/home/maktab/admin/js/

File Upload :
llllll

Current File: /home/maktab/admin/js/chunk-5ae8d4b9.4ca853b1.js.map
{"version":3,"sources":["webpack:///./src/views/gallery/list.vue?6082","webpack:///./src/table/gallery.js","webpack:///./src/components/GalleryMoldal.vue?17ce","webpack:///src/components/GalleryMoldal.vue","webpack:///./src/components/GalleryMoldal.vue?e331","webpack:///./src/components/GalleryMoldal.vue","webpack:///src/views/gallery/list.vue","webpack:///./src/views/gallery/list.vue?97be","webpack:///./src/views/gallery/list.vue","webpack:///./src/components/GalleryMoldal.vue?3497"],"names":["render","_vm","this","_h","$createElement","_c","_self","ref","attrs","cols","scopedSlots","_u","key","fn","text","record","on","$event","setPreview","file","title","slot","_v","staticClass","toEdit","id","photosModelPreview","model","value","callback","$$v","photoModel","expression","staticRenderFns","tbl","XTbl","add","Xtc","filterText","renderSlot","staticStyle","$emit","items","length","_s","counter","stopPropagation","_l","val","i","class","setItem","_e","data","methods","console","e","document","behavior","inline","watch","mouseDown","startX","scrollLeft","slider","props","required","mounted","component","name","photosModelTitle","computed","gridCols","components","GalleryMoldal","XTable","Icon","window","created"],"mappings":"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","file":"js/chunk-5ae8d4b9.4ca853b1.js","sourcesContent":["var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_c('XTable',{ref:\"tbl\",attrs:{\"model\":_vm.cols},scopedSlots:_vm._u([{key:\"operator\",fn:function(ref){\nvar text = ref.text;\nvar record = ref.record;\nreturn _c('div',{},[_c('a-tooltip',{on:{\"click\":function($event){return _vm.setPreview(record.file, record.title)}}},[_c('template',{slot:\"title\"},[_vm._v(\"\\n مشاهده عکس ها\\n \")]),_c('Icon',{staticClass:\"cursor-pointer text-primary\",attrs:{\"icon\":\"vuesax:gallery-linear\"}})],2),_c('a-tooltip',{on:{\"click\":function($event){return _vm.toEdit(record.id)}}},[_c('template',{slot:\"title\"},[_vm._v(\"\\n ویرایش عکس ها\\n \")]),_c('Icon',{staticClass:\"cursor-pointer text-warning\",attrs:{\"icon\":\"vuesax:edit-linear\"}})],2)],1)}}])}),_c('GalleryMoldal',{attrs:{\"items\":_vm.photosModelPreview},model:{value:(_vm.photoModel),callback:function ($$v) {_vm.photoModel=$$v},expression:\"photoModel\"}})],1)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","import XTbl, {Xtc} from '@/components/x-table'\r\n\r\nconst tbl = new XTbl('/admin/gallery/table', 'لیست مکتب ها')\r\ntbl.add(new Xtc('id', 'شناسه').filterText())\r\ntbl.add(new Xtc('title', 'عنوان').filterText())\r\ntbl.add(new Xtc('operator', 'عملیات').renderSlot('operator'))\r\n\r\nexport default tbl\r\n","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_c('transition',[(_vm.value)?_c('div',{staticClass:\"w-screen h-screen bg-c-grey-transparent fixed top-0 bottom-0 left-0 right-0 bg-trans\",staticStyle:{\"z-index\":\"60000\"},on:{\"click\":function($event){return _vm.$emit('input',false)}}},[(_vm.items.length > 0)?_c('div',[_c('h2',{staticClass:\"text-white mt-12 mx-5\"},[_vm._v(_vm._s(_vm.title))]),_c('div',{staticClass:\"pt-3 text-center\"},[_c('transition',{attrs:{\"name\":\"slide-fade\",\"mode\":\"out-in\"}},[_c('picture',{key:_vm.counter},[_c('img',{staticClass:\"w-full md:w-90 md:h-90 xl:w-98 xl:h-98 rounded-custom trans-img object-cover aspect-square md:aspect-auto\",attrs:{\"src\":_vm.items[_vm.counter],\"alt\":\"\"}})])])],1),_c('div',{staticClass:\"fixed bottom-0\"},[_c('div',{on:{\"click\":_vm.stopPropagation}},[_c('div',{staticClass:\"flex mt-24 mb-10 thumb-items thumb-scroll\",attrs:{\"id\":\"container\"}},_vm._l((_vm.items),function(val,i){return _c('div',{staticClass:\"thumb-item\",class:i === _vm.counter? '' : 'opacity-50',attrs:{\"id\":(\"item\" + i)},on:{\"click\":function($event){return _vm.setItem(i)}}},[_c('img',{staticClass:\"mr-5 w-20 h-20 rounded\",attrs:{\"src\":val,\"alt\":\"\"}})])}),0)])])]):_c('div',{staticClass:\"text-white text-3xl w-full h-full flex items-center justify-center\"},[_vm._v(\"\\n هیچ تصویری موجود نیست\\n \")])]):_vm._e()])],1)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\r\n <div>\r\n <!-- <a-modal :visible=\"value\" :footer=\"null\" @cancel=\"$emit('input',false)\">-->\r\n\r\n\r\n <!-- </a-modal>-->\r\n\r\n <transition>\r\n\r\n <div v-if=\"value\" @click=\"$emit('input',false)\"\r\n class=\"w-screen h-screen bg-c-grey-transparent fixed top-0 bottom-0 left-0 right-0 bg-trans\" style=\"z-index: 60000\">\r\n <div v-if=\"items.length > 0\">\r\n\r\n <h2 class=\"text-white mt-12 mx-5\">{{ title }}</h2>\r\n\r\n <div class=\"pt-3 text-center\">\r\n <!-- <transition>-->\r\n\r\n <transition name=\"slide-fade\" mode=\"out-in\">\r\n <picture :key=\"counter\">\r\n <img :src=\"items[counter]\"\r\n alt=\"\"\r\n class=\"w-full md:w-90 md:h-90 xl:w-98 xl:h-98 rounded-custom trans-img object-cover aspect-square md:aspect-auto\">\r\n </picture>\r\n </transition>\r\n\r\n </div>\r\n\r\n <div class=\"fixed bottom-0\">\r\n <div class=\"\" @click=\"stopPropagation\">\r\n <div class=\"flex mt-24 mb-10 thumb-items thumb-scroll\" id=\"container\">\r\n\r\n <div :id=\"`item${i}`\" @click=\"setItem(i)\" v-for=\"(val,i) in items\" class=\"thumb-item\"\r\n :class=\"i === counter? '' : 'opacity-50'\">\r\n <img :src=\"val\" alt=\"\" class=\"mr-5 w-20 h-20 rounded\">\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <div v-else class=\"text-white text-3xl w-full h-full flex items-center justify-center\">\r\n هیچ تصویری موجود نیست\r\n </div>\r\n </div>\r\n </transition>\r\n\r\n </div>\r\n</template>\r\n<script>\r\nexport default {\r\n data () {\r\n return {\r\n counter: 0\r\n }\r\n },\r\n methods: {\r\n stopPropagation (e) {\r\n console.log('salam')\r\n e.stopPropagation()\r\n },\r\n setItem (index) {\r\n this.counter = index\r\n document.getElementById(`item${index}`).scrollIntoView({\r\n behavior: 'smooth',\r\n inline: 'center'\r\n })\r\n }\r\n },\r\n watch: {\r\n value (val) {\r\n if (val) {\r\n this.$nextTick(() => {\r\n const slider = document.getElementById('container')\r\n console.log('ff', slider)\r\n let mouseDown = false\r\n let startX, scrollLeft\r\n\r\n let startDragging = function (e) {\r\n mouseDown = true\r\n startX = e.pageX - slider.offsetLeft\r\n scrollLeft = slider.scrollLeft\r\n }\r\n let stopDragging = function (event) {\r\n mouseDown = false\r\n }\r\n\r\n slider.addEventListener('mousemove', (e) => {\r\n e.preventDefault()\r\n if (!mouseDown) {\r\n return\r\n }\r\n const x = e.pageX - slider.offsetLeft\r\n const scroll = x - startX\r\n slider.scrollLeft = scrollLeft - scroll\r\n })\r\n\r\n// Add the event listeners\r\n slider.addEventListener('mousedown', startDragging, false)\r\n slider.addEventListener('mouseup', stopDragging, false)\r\n slider.addEventListener('mouseleave', stopDragging, false)\r\n })\r\n this.$nextTick(() => {\r\n\r\n document.getElementById(`item${this.counter}`).scrollIntoView(\r\n {\r\n behavior: 'smooth',\r\n inline: 'center'\r\n })\r\n })\r\n }\r\n }\r\n },\r\n props: {\r\n value: {\r\n required: true\r\n },\r\n items: {\r\n required: true\r\n },\r\n title: {}\r\n },\r\n mounted () {\r\n /*\r\n console.log(\"this.counter ====>\", this.counter)\r\n document.getElementById(`item${this.counter}`).scrollIntoView(\r\n {\r\n behavior: 'smooth',\r\n inline: 'center'\r\n })\r\n */\r\n\r\n }\r\n}\r\n</script>\r\n<style>\r\n.thumb-items {\r\n /*justify-content: flex-end;*/\r\n /* padding-right: 40vw;\r\n padding-left:40vw*/\r\n /*transform: translate3d(-50vw, 0px, 0px);*/\r\n}\r\n\r\n.thumb-scroll {\r\n overflow-x: auto;\r\n direction: initial;\r\n width: 100vw;\r\n scrollbar-width: none; /* Firefox */\r\n -ms-overflow-style: none;\r\n cursor: grab;\r\n width: 100vw;\r\n}\r\n\r\n.thumb-scroll::-webkit-scrollbar {\r\n width: 0;\r\n height: 0;\r\n}\r\n\r\n\r\n@media (max-width: 321px) {\r\n .thumb-item:last-child {\r\n padding-left: 36vw !important;\r\n }\r\n\r\n .thumb-item:first-child {\r\n padding-right: 36vw !important\r\n }\r\n}\r\n\r\n@media (max-width: 769px) and (min-width: 322px) {\r\n .thumb-item:last-child {\r\n padding-left: 44vw !important;\r\n }\r\n\r\n .thumb-item:first-child {\r\n padding-right: 44vw !important\r\n }\r\n}\r\n\r\n.thumb-item:last-child {\r\n padding-left: 47vw;\r\n}\r\n\r\n.thumb-item:first-child {\r\n padding-right: 47vw\r\n}\r\n\r\n.thumb-item {\r\n transition: opacity 1s;\r\n}\r\n\r\n\r\n@media (min-width: 767px) {\r\n .rounded-custom {\r\n border-radius: 1rem;\r\n }\r\n}\r\n\r\n/*\r\n.bg-trans{\r\n transition: background-color 2s;\r\n transition-delay: 2s;\r\n}\r\n*/\r\n\r\n.slide-fade-enter-active {\r\n transition: all 0.3s ease-out;\r\n}\r\n\r\n.slide-fade-leave-active {\r\n transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);\r\n}\r\n\r\n.slide-fade-enter-from,\r\n.slide-fade-leave-to {\r\n transform: translateX(20px);\r\n opacity: 0;\r\n}\r\n\r\n.nested-enter-active .inner,\r\n.nested-leave-active .inner {\r\n transition: all 0.3s ease-in-out;\r\n}\r\n\r\n.nested-enter-from .inner,\r\n.nested-leave-to .inner {\r\n transform: translateX(30px);\r\n opacity: 0;\r\n}\r\n\r\n.slide-fade-enter-active {\r\n transition: all 1s ease;\r\n}\r\n\r\n.slide-fade-enter-active img {\r\n transition: all .5s ease;\r\n}\r\n\r\n.slide-fade-leave-active {\r\n transition: all .3s ease;\r\n}\r\n\r\n.slide-fade-leave-active img {\r\n transition: all .3s ease;\r\n}\r\n\r\n.slide-fade-enter, .slide-fade-leave-to {\r\n opacity: 0;\r\n}\r\n\r\n.slide-fade-enter img, .slide-fade-leave-to img {\r\n filter: blur(10px);\r\n transform: scale(1.2) rotate(3deg);\r\n}\r\n\r\n.slider-wrapper {\r\n position: relative;\r\n width: 640px;\r\n height: 400px;\r\n overflow: hidden;\r\n}\r\n\r\n.slider-wrapper img {\r\n position: absolute;\r\n top: 0;\r\n width: 100%;\r\n}\r\n\r\n.v-enter-active,\r\n.v-leave-active {\r\n transition: opacity 0.3s ease !important;\r\n}\r\n\r\n.v-enter-from,\r\n.v-leave-to {\r\n opacity: 0;\r\n}\r\n\r\n\r\n.fade-enter-active, .fade-leave-active {\r\n transition: opacity 1.5s;\r\n}\r\n.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {\r\n opacity: 0;\r\n}\r\n/*.trans-img{\r\n transition: all 0.5s;\r\n}*/\r\n</style>\r\n<!--\r\n<template>\r\n <a-modal :visible=\"value\" width=\"80%\" @cancel=\"$emit('input',false)\">\r\n <swiper\r\n :style=\"{\r\n '&#45;&#45;swiper-navigation-color': '#fff',\r\n '&#45;&#45;swiper-pagination-color': '#fff',\r\n }\"\r\n :loop=\"true\"\r\n :spaceBetween=\"10\"\r\n :navigation=\"true\"\r\n :thumbs=\"{ swiper: thumbsSwiper }\"\r\n :modules=\"modules\"\r\n class=\"mySwiper2\"\r\n >\r\n <swiper-slide\r\n ><img\r\n src=\"https://swiperjs.com/demos/images/nature-1.jpg\"/></swiper-slide\r\n >\r\n <swiper-slide\r\n ><img\r\n src=\"https://swiperjs.com/demos/images/nature-2.jpg\"/></swiper-slide\r\n >\r\n <swiper-slide\r\n ><img\r\n src=\"https://swiperjs.com/demos/images/nature-3.jpg\"/></swiper-slide\r\n >\r\n <swiper-slide\r\n ><img\r\n src=\"https://swiperjs.com/demos/images/nature-4.jpg\"/></swiper-slide\r\n >\r\n <swiper-slide\r\n ><img\r\n src=\"https://swiperjs.com/demos/images/nature-5.jpg\"/></swiper-slide\r\n >\r\n <swiper-slide\r\n ><img\r\n src=\"https://swiperjs.com/demos/images/nature-6.jpg\"/></swiper-slide\r\n >\r\n <swiper-slide\r\n ><img\r\n src=\"https://swiperjs.com/demos/images/nature-7.jpg\"/></swiper-slide\r\n >\r\n <swiper-slide\r\n ><img\r\n src=\"https://swiperjs.com/demos/images/nature-8.jpg\"/></swiper-slide\r\n >\r\n <swiper-slide\r\n ><img\r\n src=\"https://swiperjs.com/demos/images/nature-9.jpg\"/></swiper-slide\r\n >\r\n <swiper-slide\r\n ><img src=\"https://swiperjs.com/demos/images/nature-10.jpg\"\r\n /></swiper-slide>\r\n </swiper>\r\n </a-modal>\r\n&lt;!&ndash; <swiper\r\n @swiper=\"setThumbsSwiper\"\r\n :loop=\"true\"\r\n :spaceBetween=\"10\"\r\n :slidesPerView=\"4\"\r\n :freeMode=\"true\"\r\n :watchSlidesProgress=\"true\"\r\n :modules=\"modules\"\r\n class=\"mySwiper\"\r\n >\r\n <swiper-slide\r\n ><img\r\n src=\"https://swiperjs.com/demos/images/nature-1.jpg\"/></swiper-slide\r\n >\r\n <swiper-slide\r\n ><img\r\n src=\"https://swiperjs.com/demos/images/nature-2.jpg\"/></swiper-slide\r\n >\r\n <swiper-slide\r\n ><img\r\n src=\"https://swiperjs.com/demos/images/nature-3.jpg\"/></swiper-slide\r\n >\r\n <swiper-slide\r\n ><img\r\n src=\"https://swiperjs.com/demos/images/nature-4.jpg\"/></swiper-slide\r\n >\r\n <swiper-slide\r\n ><img\r\n src=\"https://swiperjs.com/demos/images/nature-5.jpg\"/></swiper-slide\r\n >\r\n <swiper-slide\r\n ><img\r\n src=\"https://swiperjs.com/demos/images/nature-6.jpg\"/></swiper-slide\r\n >\r\n <swiper-slide\r\n ><img\r\n src=\"https://swiperjs.com/demos/images/nature-7.jpg\"/></swiper-slide\r\n >\r\n <swiper-slide\r\n ><img\r\n src=\"https://swiperjs.com/demos/images/nature-8.jpg\"/></swiper-slide\r\n >\r\n <swiper-slide\r\n ><img\r\n src=\"https://swiperjs.com/demos/images/nature-9.jpg\"/></swiper-slide\r\n >\r\n <swiper-slide\r\n ><img src=\"https://swiperjs.com/demos/images/nature-10.jpg\"\r\n /></swiper-slide>\r\n </swiper>&ndash;&gt;\r\n</template>\r\n<script>\r\n// Import Swiper Vue.js components\r\nimport {Swiper, SwiperSlide} from 'swiper/vue'\r\n\r\n/*// Import Swiper styles\r\nimport 'swiper/css'\r\n\r\nimport 'swiper/css/free-mode'\r\nimport 'swiper/css/navigation'\r\nimport 'swiper/css/thumbs'*/\r\n\r\n\r\n\r\n// import required modules\r\nimport {FreeMode, Navigation, Thumbs} from 'swiper'\r\n\r\n\r\nexport default {\r\n components: {\r\n Swiper,\r\n SwiperSlide\r\n },\r\n data () {\r\n return {\r\n thumbsSwiper: null,\r\n modules: [FreeMode, Navigation, Thumbs]\r\n }\r\n },\r\n props:{\r\n value:{required: true}\r\n },\r\n methods: {\r\n setThumbsSwiper (swiper) {\r\n this.thumbsSwiper = swiper\r\n }\r\n }\r\n /* setup() {\r\n let thumbsSwiper = null;\r\n\r\n const setThumbsSwiper = (swiper) => {\r\n thumbsSwiper = swiper;\r\n },\r\n\r\n return {\r\n\r\n modules: [FreeMode,Navigation,Thumbs],\r\n };\r\n }*/\r\n}\r\n</script>\r\n\r\n<style>\r\n.swiper {\r\n width: 100%;\r\n height: 100%;\r\n}\r\n\r\n.swiper-slide {\r\n text-align: center;\r\n font-size: 18px;\r\n background: #fff;\r\n\r\n /* Center slide text vertically */\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n}\r\n\r\n.swiper-slide img {\r\n display: block;\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n}\r\n\r\n.swiper {\r\n width: 100%;\r\n height: 300px;\r\n margin-left: auto;\r\n margin-right: auto;\r\n}\r\n\r\n.swiper-slide {\r\n background-size: cover;\r\n background-position: center;\r\n}\r\n\r\n.mySwiper2 {\r\n height: 80%;\r\n width: 100%;\r\n}\r\n\r\n.mySwiper {\r\n height: 20%;\r\n box-sizing: border-box;\r\n padding: 10px 0;\r\n}\r\n\r\n.mySwiper .swiper-slide {\r\n width: 25%;\r\n height: 100%;\r\n opacity: 0.4;\r\n}\r\n\r\n.mySwiper .swiper-slide-thumb-active {\r\n opacity: 1;\r\n}\r\n\r\n.swiper-slide img {\r\n display: block;\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n}\r\n\r\n</style>\r\n-->\r\n\r\n<!--\r\n<script>\r\nimport Swiper, {Navigation, Pagination} from 'swiper'\r\n/*import 'swiper/css'\r\nimport 'swiper/css/navigation'\r\nimport 'swiper/css/pagination'*/\r\nimport 'swiper/swiper.min.css'\r\nimport 'swiper/modules/free-mode/free-mode.min.css'\r\nimport 'swiper/modules/navigation/navigation.scss'\r\nimport 'swiper/modules/thumbs/thumbs.min.css'\r\n\r\nexport default {\r\n props: {\r\n value: {required: true}\r\n },\r\n mounted () {\r\n new Swiper(this.$refs.swiper, {\r\n // configure Swiper to use modules\r\n modules: [Navigation, Pagination],\r\n // Optional parameters\r\n loop: true,\r\n\r\n // If we need pagination\r\n pagination: {\r\n el: '.swiper-pagination'\r\n },\r\n\r\n // Navigation arrows\r\n navigation: {\r\n nextEl: '.swiper-button-next',\r\n prevEl: '.swiper-button-prev'\r\n },\r\n\r\n // And if we need scrollbar\r\n scrollbar: {\r\n el: '.swiper-scrollbar'\r\n }\r\n })\r\n }\r\n}\r\n</script>\r\n\r\n\r\n<template>\r\n <a-modal :visible=\"value\">\r\n\r\n\r\n &lt;!&ndash; Slider main container &ndash;&gt;\r\n <div ref=\"swiper\" class=\"swiper\">\r\n &lt;!&ndash; Additional required wrapper &ndash;&gt;\r\n <div class=\"swiper-wrapper\">\r\n &lt;!&ndash; Slides &ndash;&gt;\r\n <div class=\"swiper-slide\">Slide 1</div>\r\n <div class=\"swiper-slide\">Slide 2</div>\r\n <div class=\"swiper-slide\">Slide 3</div>\r\n </div>\r\n &lt;!&ndash; If we need pagination &ndash;&gt;\r\n <div class=\"swiper-pagination\"></div>\r\n\r\n &lt;!&ndash; If we need navigation buttons &ndash;&gt;\r\n <div class=\"swiper-button-prev\"></div>\r\n <div class=\"swiper-button-next\"></div>\r\n\r\n &lt;!&ndash; If we need scrollbar &ndash;&gt;\r\n <div class=\"swiper-scrollbar\"></div>\r\n </div>\r\n </a-modal>\r\n</template>\r\n\r\n<style scoped>\r\n.swiper-slide {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n}\r\n</style>\r\n-->\r\n\r\n<!--\r\n<template>\r\n <a-modal :visible=\"value\">\r\n <div>\r\n <swiper\r\n :slides-per-view=\"3\"\r\n :space-between=\"30\"\r\n :loop=\"false\"\r\n @swiper=\"onSwiper\"\r\n @slideChange=\"onSlideChange\"\r\n >\r\n <swiper-slide\r\n v-for=\"n in 5\"\r\n :key=\"n\"\r\n class=\"test\"\r\n :class=\"{test_2: true}\"\r\n >\r\n&lt;!&ndash; <div>{{ 29+n }}</div>&ndash;&gt;\r\n <img\r\n :src=\"getImageUrl(29+n)\"\r\n width=\"600\"\r\n height=\"400\"\r\n class=\"img-fluid w-100 mx-auto\"\r\n blank=\"true\"\r\n >\r\n </swiper-slide>\r\n </swiper>\r\n\r\n&lt;!&ndash; <swiper\r\n :slides-per-view=\"3\"\r\n :space-between=\"30\"\r\n loop\r\n @swiper=\"onSwiper\"\r\n @slideChange=\"onSlideChange\"\r\n >\r\n <swiper-slide\r\n v-for=\"n in 5\"\r\n :key=\"n\"\r\n class=\"test\"\r\n :class=\"{test_2: true}\"\r\n >\r\n&lt;!&ndash; <div>{{ // 34+n }}</div>&ndash;&gt;\r\n <img\r\n :src=\"getImageUrl(34+n)\"\r\n width=\"600\"\r\n height=\"400\"\r\n class=\"img-fluid w-100 mx-auto\"\r\n blank=\"true\"\r\n >\r\n </swiper-slide>\r\n </swiper>&ndash;&gt;\r\n\r\n\r\n </div>\r\n </a-modal>\r\n</template>\r\n\r\n<script>\r\nimport { Navigation, Pagination } from 'swiper'\r\n\r\nimport { SwiperCore, Swiper, SwiperSlide } from 'swiper-vue2'\r\n\r\n// Import Swiper styles\r\nimport 'swiper/swiper-bundle.css'\r\n\r\nSwiperCore.use([Navigation, Pagination])\r\n\r\nexport default {\r\n components: {\r\n Swiper,\r\n SwiperSlide\r\n },\r\n props:{\r\n value:{required: true}\r\n },\r\n methods: {\r\n getImageUrl (imageId) {\r\n return `https://picsum.photos/600/400/?image=${imageId}`\r\n },\r\n onSwiper (swiper) {\r\n console.log(\"salam ====>\", 'salam')\r\n console.log(swiper)\r\n },\r\n onSlideChange () {\r\n // console.log('slide change')\r\n }\r\n }\r\n}\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.img-fluid {\r\n max-width: 100%;\r\n height: auto;\r\n}\r\n.w-100 {\r\n width: 100%;\r\n}\r\n.ml-auto, .mx-auto {\r\n margin-left: auto;\r\n}\r\n.mr-auto, .mx-auto {\r\n margin-right: auto;\r\n}\r\n/*.swiper {\r\n width: 100%;\r\n height: 100%;\r\n}\r\n\r\n.swiper-slide {\r\n text-align: center;\r\n font-size: 18px;\r\n background: #fff;\r\n\r\n !* Center slide text vertically *!\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n}\r\n\r\n.swiper-slide img {\r\n display: block;\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n}\r\n\r\n.swiper {\r\n width: 100%;\r\n height: 300px;\r\n margin-left: auto;\r\n margin-right: auto;\r\n}\r\n\r\n.swiper-slide {\r\n background-size: cover;\r\n background-position: center;\r\n}\r\n\r\n.mySwiper2 {\r\n height: 80%;\r\n width: 100%;\r\n}\r\n\r\n.mySwiper {\r\n height: 20%;\r\n box-sizing: border-box;\r\n padding: 10px 0;\r\n}\r\n\r\n.mySwiper .swiper-slide {\r\n width: 25%;\r\n height: 100%;\r\n opacity: 0.4;\r\n}\r\n\r\n.mySwiper .swiper-slide-thumb-active {\r\n opacity: 1;\r\n}\r\n\r\n.swiper-slide img {\r\n display: block;\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n}*/\r\n</style>\r\n-->\r\n","import mod from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../node_modules/thread-loader/dist/cjs.js!../../node_modules/babel-loader/lib/index.js!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./GalleryMoldal.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../node_modules/thread-loader/dist/cjs.js!../../node_modules/babel-loader/lib/index.js!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./GalleryMoldal.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./GalleryMoldal.vue?vue&type=template&id=d02bd280&\"\nimport script from \"./GalleryMoldal.vue?vue&type=script&lang=js&\"\nexport * from \"./GalleryMoldal.vue?vue&type=script&lang=js&\"\nimport style0 from \"./GalleryMoldal.vue?vue&type=style&index=0&id=d02bd280&prod&lang=css&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n script,\n render,\n staticRenderFns,\n false,\n null,\n null,\n null\n \n)\n\nexport default component.exports","<template>\r\n <div>\r\n <XTable :model=\"cols\" ref=\"tbl\">\r\n <!-- <RestFullActionSheet slot=\"operator\" slot-scope=\"{record}\"\r\n :record=\"record\" activeKey=\"active\"\r\n :has-delete=\"true\"\r\n :has-active=\"false\"\r\n :has-edit=\"true\"\r\n @edit=\"toEdit(record.id)\"\r\n @view=\"setInitialValue(record)\"\r\n @delete=\"deleteItem(record.id)\"\r\n />-->\r\n <!-- <template #active=\"{text}\">\r\n {{ isActive(text) }}\r\n </template>\r\n <template #created_at=\"{text}\">\r\n {{ text | jdateNoTime }}\r\n </template>-->\r\n <div slot=\"operator\" slot-scope=\"{ text, record }\">\r\n <a-tooltip @click=\"setPreview(record.file, record.title)\">\r\n <template slot=\"title\">\r\n مشاهده عکس ها\r\n </template>\r\n <Icon icon=\"vuesax:gallery-linear\" class=\"cursor-pointer text-primary\"/>\r\n </a-tooltip>\r\n\r\n <a-tooltip @click=\"toEdit(record.id)\">\r\n <template slot=\"title\">\r\n ویرایش عکس ها\r\n </template>\r\n <Icon icon=\"vuesax:edit-linear\" class=\"cursor-pointer text-warning\"/>\r\n </a-tooltip>\r\n </div>\r\n </XTable>\r\n<!-- <GalleryMoldal v-model=\"photoModel\" :items=\"photosModelPreview\" :title=\"photosModelTitle\"/>-->\r\n <GalleryMoldal v-model=\"photoModel\" :items=\"photosModelPreview\" />\r\n<!-- <a-modal :visible=\"photoModel\" width=\"80%\" @cancel=\"photoModel = false\">\r\n <div class=\"grid pt-10 gap-5\" :class=\"gridCols\" v-if=\"photosModelPreview.length !== 0\">\r\n <div v-for=\"val in photosModelPreview\" class=\"justify-self-center\">\r\n <img :src=\"val.full_src\" alt=\"\" class=\"w-48 h-48 rounded-lg\">\r\n </div>\r\n </div>\r\n <div v-else class=\"pt-10 text-center\">\r\n <p>هیچ عکسی جهت نمایش وجود ندارد</p>\r\n </div>\r\n </a-modal>-->\r\n </div>\r\n</template>\r\n\r\n<script>\r\nimport * as TableCol from '@/table/gallery'\r\nimport XTable from '@/components/x-table/XTable'\r\n// import RestFullActionSheet from '@/components/RestFullActionSheet'\r\nimport Icon from '@/assets/icons/UI/Icon'\r\nimport GalleryMoldal from '@/components/GalleryMoldal'\r\n\r\nexport default {\r\n name: 'list',\r\n data () {\r\n return {\r\n cols: null,\r\n photoModel: false,\r\n photosModelTitle: '',\r\n photosModelPreview: []\r\n }\r\n },\r\n watch:{\r\n photoModel(val){\r\n if (val === true){\r\n document.body.style.overflow = \"hidden\";\r\n }\r\n else {\r\n document.body.style.overflow = \"auto\";\r\n }\r\n }\r\n },\r\n computed:{\r\n gridCols(){\r\n switch (this.photosModelPreview.length) {\r\n case 1: return 'lg:grid-cols-1'\r\n case 2: return 'lg:grid-cols-2'\r\n default: return 'lg:grid-cols-3'\r\n }\r\n }\r\n },\r\n components: {\r\n GalleryMoldal,\r\n XTable,\r\n Icon\r\n },\r\n methods: {\r\n setPreview(files,name){\r\n // console.log(\"files ====>\", files)\r\n this.photosModelPreview = files.map(x => x.full_src)\r\n this.photosModelTitle = name\r\n this.photoModel = true\r\n },\r\n toEdit (id) {\r\n window.open(`/gallery/${id}`, '_blank').focus()\r\n },\r\n },\r\n created () {\r\n this.cols = TableCol.default\r\n }\r\n}\r\n</script>\r\n\r\n<style scoped>\r\n\r\n</style>\r\n","import mod from \"-!../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./list.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./list.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./list.vue?vue&type=template&id=7d133f34&scoped=true&\"\nimport script from \"./list.vue?vue&type=script&lang=js&\"\nexport * from \"./list.vue?vue&type=script&lang=js&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n script,\n render,\n staticRenderFns,\n false,\n null,\n \"7d133f34\",\n null\n \n)\n\nexport default component.exports","export * from \"-!../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--6-oneOf-1-0!../../node_modules/css-loader/index.js??ref--6-oneOf-1-1!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/postcss-loader/src/index.js??ref--6-oneOf-1-2!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./GalleryMoldal.vue?vue&type=style&index=0&id=d02bd280&prod&lang=css&\""],"sourceRoot":""}

Copyright ©2k19 - Hexid | Tex7ure