@extclp/vexip-ui
Version:
A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good
1 lines • 4.16 kB
Source Map (JSON)
{"version":3,"file":"image-group.vue2.mjs","sources":["../../../components/image/image-group.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ImageViewer } from '@/components/image-viewer'\nimport { Renderer } from '@/components/renderer'\n\nimport { computed, provide, reactive, ref, toRef } from 'vue'\n\nimport { emitEvent, useNameHelper, useProps } from '@vexip-ui/config'\nimport { debounceMinor } from '@vexip-ui/utils'\nimport { imageGroupProps } from './props'\nimport { GROUP_STATE } from './symbol'\n\nimport type { ImageGroupSlots, ImageState } from './symbol'\n\ndefineOptions({ name: 'ImageGroup' })\n\nconst _props = defineProps(imageGroupProps)\nconst props = useProps('imageGroup', _props, {\n showAll: false,\n preview: false,\n viewerTransfer: null,\n slots: () => ({})\n})\n\nconst slots = defineSlots<ImageGroupSlots>()\n\nconst nh = useNameHelper('image-group')\n\nconst currentActive = ref(false)\nconst currentIndex = ref(0)\nconst imageStates = reactive(new Set<ImageState>())\n\nconst className = computed(() => {\n return [\n nh.b(),\n nh.ns('image-vars'),\n {\n [nh.bm('preview')]: props.preview\n }\n ]\n})\nconst srcList = computed(() => Array.from(imageStates).map(state => state.src))\n\nconst refreshIndex = debounceMinor(() => {\n const total = imageStates.size\n\n Array.from(imageStates).forEach((item, index) => {\n item.index = index\n item.total = total\n })\n})\n\nprovide(\n GROUP_STATE,\n reactive({\n showAll: toRef(props, 'showAll'),\n preview: toRef(props, 'preview'),\n increaseItem,\n decreaseItem,\n handlePreview\n })\n)\n\ndefineExpose({ currentActive, currentIndex })\n\nfunction increaseItem(item: ImageState) {\n imageStates.add(item)\n refreshIndex()\n}\n\nfunction decreaseItem(item: ImageState) {\n imageStates.delete(item)\n refreshIndex()\n}\n\nfunction handlePreview(item: ImageState) {\n currentIndex.value = item.index\n currentActive.value = true\n\n emitEvent(props.onPreview, item.src, Array.from(srcList.value))\n}\n</script>\n\n<template>\n <div :class=\"className\">\n <slot></slot>\n <ImageViewer\n v-if=\"props.preview\"\n v-model:active=\"currentActive\"\n v-model:index=\"currentIndex\"\n :src-list=\"srcList\"\n :transfer=\"props.viewerTransfer\"\n >\n <template v-if=\"slots.preview || props.slots.preview\" #default=\"{ src }\">\n <slot name=\"preview\" :src=\"src\">\n <Renderer :renderer=\"props.slots.preview\" :data=\"{ src }\"></Renderer>\n </slot>\n </template>\n </ImageViewer>\n </div>\n</template>\n"],"names":["props","useProps","__props","slots","_useSlots","nh","useNameHelper","currentActive","ref","currentIndex","imageStates","reactive","className","computed","srcList","state","refreshIndex","debounceMinor","total","item","index","provide","GROUP_STATE","toRef","increaseItem","decreaseItem","handlePreview","__expose","emitEvent"],"mappings":";;;;;;;;;;;;;;AAgBM,UAAAA,IAAQC,EAAS,cADRC,GAC8B;AAAA,MAC3C,SAAS;AAAA,MACT,SAAS;AAAA,MACT,gBAAgB;AAAA,MAChB,OAAO,OAAO,CAAC;AAAA,IAAA,CAChB,GAEKC,IAAQC,EAAA,GAERC,IAAKC,EAAc,aAAa,GAEhCC,IAAgBC,EAAI,EAAK,GACzBC,IAAeD,EAAI,CAAC,GACpBE,IAAcC,EAAa,oBAAA,KAAiB,GAE5CC,IAAYC,EAAS,MAClB;AAAA,MACLR,EAAG,EAAE;AAAA,MACLA,EAAG,GAAG,YAAY;AAAA,MAClB;AAAA,QACE,CAACA,EAAG,GAAG,SAAS,CAAC,GAAGL,EAAM;AAAA,MAAA;AAAA,IAE9B,CACD,GACKc,IAAUD,EAAS,MAAM,MAAM,KAAKH,CAAW,EAAE,IAAI,CAAAK,MAASA,EAAM,GAAG,CAAC,GAExEC,IAAeC,EAAc,MAAM;AACvC,YAAMC,IAAQR,EAAY;AAE1B,YAAM,KAAKA,CAAW,EAAE,QAAQ,CAACS,GAAMC,MAAU;AAC/C,QAAAD,EAAK,QAAQC,GACbD,EAAK,QAAQD;AAAA,MAAA,CACd;AAAA,IAAA,CACF;AAED,IAAAG;AAAA,MACEC;AAAA,MACAX,EAAS;AAAA,QACP,SAASY,EAAMvB,GAAO,SAAS;AAAA,QAC/B,SAASuB,EAAMvB,GAAO,SAAS;AAAA,QAC/B,cAAAwB;AAAA,QACA,cAAAC;AAAA,QACA,eAAAC;AAAA,MACD,CAAA;AAAA,IACH,GAEaC,EAAA,EAAE,eAAApB,GAAe,cAAAE,GAAc;AAE5C,aAASe,EAAaL,GAAkB;AACtC,MAAAT,EAAY,IAAIS,CAAI,GACPH,EAAA;AAAA,IAAA;AAGf,aAASS,EAAaN,GAAkB;AACtC,MAAAT,EAAY,OAAOS,CAAI,GACVH,EAAA;AAAA,IAAA;AAGf,aAASU,EAAcP,GAAkB;AACvC,MAAAV,EAAa,QAAQU,EAAK,OAC1BZ,EAAc,QAAQ,IAEZqB,EAAA5B,EAAM,WAAWmB,EAAK,KAAK,MAAM,KAAKL,EAAQ,KAAK,CAAC;AAAA,IAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}