akaunting 3.0 (the last dance)

2022-06-01 10:15:55 +03:00
parent cead09f6d4
commit d9c0764572
3812 changed files with 126831 additions and 102949 deletions
--- a/resources/assets/js/components/AkauntingSlider.vue
+++ b/resources/assets/js/components/AkauntingSlider.vue
@ -0,0 +1,125 @@
+<template>
+    <div v-if="video || screenshots">
+      <div class="swiper-carousel overflow-hidden">
+        <div class="swiper-wrapper" style="flex-wrap: nowrap !important;">
+          <div class="swiper-slide" v-for="(screenshot, index) in screenshots" :key="index">
+            <a :href="screenshot.path_string" class="glightbox">
+                <img class="rounded-lg object-cover cursor-pointer" :src="screenshot.path_string" :alt="screenshot.alt_attribute" />
+                <div class="text-gray-700 text-sm my-2">{{ screenshot.description }}</div>
+            </a>
+          </div>
+        </div>
+        <div v-if="pagination" class="swiper-pagination w-full flex justify-center gap-1"></div>
+
+        <div v-if="arrow" class="swiper-button-next ltr:-right-8 rtl:-left-8 top-12">
+            <span class="material-icons text-5xl">chevron_right</span>
+        </div>
+
+        <div v-if="arrow" class="swiper-button-prev ltr:-left-8 rtl:-right-8 top-12">
+            <span class="material-icons text-5xl">chevron_left</span>
+        </div>
+      </div>
+    </div>
+</template>
+
+<script>
+import Swiper, { Navigation, Pagination } from 'swiper';
+Swiper.use([Navigation, Pagination]);
+
+import GLightbox from 'glightbox';
+import 'glightbox/dist/css/glightbox.min.css';
+
+export default {
+    name: "akaunting-slider",
+
+    props: {
+        name: {
+            type: String,
+            default: null,
+            description: "App Name"
+        },
+        video: {
+            type: String,
+            default: null,
+            description: "App Video"
+        },
+        screenshots: {
+            type: Array,
+            default: false,
+            description: "App Screenshots"
+        },
+        height: {
+            type: String,
+            default: null,
+            description: "height of the carousel"
+        },
+        arrow: {
+            type: [Boolean, String],
+            default: false,
+        },
+        pagination: {
+            type: [Boolean, String],
+            default: false,
+        },
+        type: {
+            type: String,
+            default: '',
+            description: "type of the Carousel (card)"
+        },
+        sliderView: {
+            type: [Number, String],
+            default: 4,
+        },
+        sliderRow: {
+            type: [Number, String],
+            default: 2,
+        }
+    },
+    mounted() {
+        let media = [];
+        if (this.screenshots.length) {
+            this.screenshots.forEach(function(screenshot) {
+                media.push({ // For image
+                    thumb: screenshot.path_string,
+                    src: screenshot.path_string,
+                });
+            });
+        }
+        this.media = media;
+        new Swiper(".swiper-carousel", {
+            loop: false,
+            grid: {
+                rows: this.sliderRow,
+            },
+            spaceBetween: 30,
+            breakpoints: {
+                640: {
+                    slidesPerView: 1
+                },
+                768: {
+                    slidesPerView: this.sliderView,
+                }
+            },
+            pagination: {
+                el: ".swiper-pagination",
+                clickable: true
+              },
+              navigation: {
+                nextEl: ".swiper-button-next",
+                prevEl: ".swiper-button-prev",
+              },
+        });
+        GLightbox({
+            touchNavigation: true,
+            loop: false,
+            autoplayVideos: false,
+            selector: ".glightbox"
+        });
+    },
+    data: function () {
+        return {
+            media: [],
+        }
+    },
+}
+</script>