@extclp/vexip-ui/es/components/image/image-viewer.vue2.mjs.map

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

{"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"],"mappings":"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"}