UNPKG

vexip-ui

Version:

A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good

1 lines 10.8 kB
{"version":3,"file":"image-viewer.vue2.mjs","sources":["../../../components/image/image-viewer.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { Icon } from '@/components/icon'\nimport { Masker } from '@/components/masker'\nimport { Renderer } from '@/components/renderer'\nimport { Viewer } from '@/components/viewer'\n\nimport { computed, ref, watch } from 'vue'\n\nimport { emitEvent, useIcons, useNameHelper, useProps } from '@vexip-ui/config'\nimport { boundRange, ensureArray, isDefined } from '@vexip-ui/utils'\nimport { imageViewerProps } from './props'\n\nimport type { ImageViewerSlots } from './symbol'\n\ndefineOptions({ name: 'ImageViewer' })\n\nconst _props = defineProps(imageViewerProps)\nconst props = useProps('imageViewer', _props, {\n active: false,\n index: 0,\n srcList: {\n default: '',\n static: true,\n },\n transfer: false,\n viewerProps: () => ({}),\n slots: () => ({}),\n})\n\nconst emit = defineEmits(['update:active', 'update:index'])\n\ndefineSlots<ImageViewerSlots>()\n\nconst nh = useNameHelper('image-viewer')\nconst icons = useIcons()\n\nconst currentActive = ref(props.active)\nconst currentIndex = ref(props.index)\n\nconst viewer = ref<InstanceType<typeof Viewer>>()\n\nconst className = computed(() => {\n return [nh.b(), nh.ns('image-vars'), props.inherit && nh.bm('inherit')]\n})\nconst srcArray = computed(() => ensureArray(isDefined(props.srcList) ? props.srcList : ''))\nconst prevDisabled = computed(() => currentIndex.value <= 0)\nconst nextDisabled = computed(() => currentIndex.value >= srcArray.value.length - 1)\n\nwatch(\n () => props.active,\n value => {\n currentActive.value = value\n },\n)\nwatch(\n () => props.index,\n value => {\n currentIndex.value = value\n },\n)\nwatch(() => srcArray.value.length, verifyIndex)\n\ndefineExpose({\n currentActive,\n currentIndex,\n prevDisabled,\n nextDisabled,\n viewer,\n})\n\nfunction setActive(active: boolean) {\n if (currentActive.value === active) return\n\n currentActive.value = active\n\n emit('update:active', active)\n emitEvent(props.onToggle, active)\n}\n\nfunction verifyIndex() {\n currentIndex.value = boundRange(currentIndex.value, 0, srcArray.value.length - 1)\n}\n\nfunction handleChange() {\n const value = currentIndex.value\n\n viewer.value?.handleReset()\n emit('update:index', value)\n emitEvent(props.onChange, value, srcArray.value[value])\n}\n\nfunction handlePrev() {\n if (prevDisabled.value) return\n\n const prev = currentIndex.value\n\n currentIndex.value--\n verifyIndex()\n currentIndex.value !== prev && handleChange()\n emitEvent(props.onPrev, currentIndex.value, srcArray.value[currentIndex.value])\n}\n\nfunction handleNext() {\n if (nextDisabled.value) return\n\n const prev = currentIndex.value\n\n currentIndex.value++\n verifyIndex()\n currentIndex.value !== prev && handleChange()\n emitEvent(props.onNext, currentIndex.value, srcArray.value[currentIndex.value])\n}\n\nfunction handleClose() {\n setActive(false)\n emitEvent(props.onClose)\n}\n\nfunction handleShow() {\n emitEvent(props.onShow)\n}\n\nfunction handleHide() {\n emitEvent(props.onHide)\n}\n</script>\n\n<template>\n <Masker\n v-slot=\"{ show }\"\n :active=\"currentActive\"\n :inherit=\"props.inherit\"\n :class=\"className\"\n closable\n auto-remove\n :transfer=\"props.transfer\"\n @show=\"handleShow\"\n @hide=\"handleHide\"\n @toggle=\"setActive\"\n >\n <div v-show=\"show\" :class=\"nh.be('wrapper')\">\n <Viewer v-bind=\"props.viewerProps\" ref=\"viewer\">\n <slot :src=\"srcArray[currentIndex]\">\n <Renderer :renderer=\"props.slots.default\" :data=\"{ src: srcArray[currentIndex] }\">\n <img :src=\"srcArray[currentIndex]\" />\n </Renderer>\n </slot>\n </Viewer>\n <template v-if=\"srcArray.length > 1\">\n <button\n type=\"button\"\n :class=\"[nh.be('prev'), prevDisabled && nh.bem('prev', 'disabled')]\"\n @click.stop=\"handlePrev\"\n >\n <slot name=\"prev\" :disabled=\"prevDisabled\">\n <Renderer :renderer=\"props.slots.prev\" :data=\"{ disabled: prevDisabled }\">\n <div :class=\"nh.be('prev-handler')\">\n <Icon\n v-bind=\"icons.angleLeft\"\n :scale=\"+(icons.angleLeft.scale || 1) * 1.4\"\n label=\"prev\"\n ></Icon>\n </div>\n </Renderer>\n </slot>\n </button>\n <button\n type=\"button\"\n :class=\"[nh.be('next'), nextDisabled && nh.bem('next', 'disabled')]\"\n @click.stop=\"handleNext\"\n >\n <slot name=\"next\" :disabled=\"nextDisabled\">\n <Renderer :renderer=\"props.slots.next\" :data=\"{ disabled: nextDisabled }\">\n <div :class=\"nh.be('next-handler')\">\n <Icon\n v-bind=\"icons.angleRight\"\n :scale=\"+(icons.angleRight.scale || 1) * 1.4\"\n label=\"next\"\n ></Icon>\n </div>\n </Renderer>\n </slot>\n </button>\n </template>\n <button type=\"button\" :class=\"nh.be('close')\" @click.stop=\"handleClose\">\n <slot name=\"close\">\n <Renderer :renderer=\"props.slots.close\">\n <div :class=\"nh.be('close-handler')\">\n <Icon\n v-bind=\"icons.close\"\n :scale=\"+(icons.close.scale || 1) * 1.4\"\n label=\"close\"\n ></Icon>\n </div>\n </Renderer>\n </slot>\n </button>\n </div>\n </Masker>\n</template>\n"],"names":["props","useProps","__props","emit","__emit","nh","useNameHelper","icons","useIcons","currentActive","ref","currentIndex","viewer","className","computed","srcArray","ensureArray","isDefined","prevDisabled","nextDisabled","watch","value","verifyIndex","__expose","setActive","active","emitEvent","boundRange","handleChange","_a","handlePrev","prev","handleNext","handleClose","handleShow","handleHide","_createBlock","_unref","Masker","_withCtx","show","_createElementVNode","_normalizeClass","_createVNode","Viewer","_mergeProps","_renderSlot","_ctx","Renderer","_createElementBlock","_Fragment","Icon"],"mappings":"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"}