@element-plus/nightly 0.0.20250202 → 0.0.20250205

package/es/components/countdown/src/countdown.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"countdown.mjs","sources":["../../../../../../packages/components/countdown/src/countdown.vue"],"sourcesContent":["<template>\n  <el-statistic\n    :value=\"rawValue\"\n    :title=\"title\"\n    :prefix=\"prefix\"\n    :suffix=\"suffix\"\n    :value-style=\"valueStyle\"\n    :formatter=\"formatter\"\n  >\n    <template v-for=\"(_, name) in $slots\" #[name]>\n      <slot :name=\"name\" />\n    </template>\n  </el-statistic>\n</template>\n<script lang=\"ts\" setup>\nimport { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'\nimport { ElStatistic } from '@element-plus/components/statistic'\nimport { cAF, rAF } from '@element-plus/utils'\nimport { countdownEmits, countdownProps } from './countdown'\nimport { formatTime, getTime } from './utils'\n\ndefineOptions({\n  name: 'ElCountdown',\n})\n\nconst props = defineProps(countdownProps)\nconst emit = defineEmits(countdownEmits)\n\nlet timer: ReturnType<typeof rAF> | undefined\nconst rawValue = ref<number>(0)\nconst displayValue = computed(() => formatTime(rawValue.value, props.format))\n\nconst formatter = (val: number) => formatTime(val, props.format)\n\nconst stopTimer = () => {\n  if (timer) {\n    cAF(timer)\n    timer = undefined\n  }\n}\n\nconst startTimer = () => {\n  const timestamp = getTime(props.value)\n  const frameFunc = () => {\n    let diff = timestamp - Date.now()\n    emit('change', diff)\n    if (diff <= 0) {\n      diff = 0\n      stopTimer()\n      emit('finish')\n    } else {\n      timer = rAF(frameFunc)\n    }\n    rawValue.value = diff\n  }\n  timer = rAF(frameFunc)\n}\n\nonMounted(() => {\n  rawValue.value = getTime(props.value) - Date.now()\n\n  watch(\n    () => [props.value, props.format],\n    () => {\n      stopTimer()\n      startTimer()\n    },\n    {\n      immediate: true,\n    }\n  )\n})\n\nonBeforeUnmount(() => {\n  stopTimer()\n})\n\ndefineExpose({\n  /**\n   * @description current display value\n   */\n  displayValue,\n})\n</script>\n"],"names":["_openBlock","_createBlock","_unref"],"mappings":";;;;;;;mCAqBc,CAAA;AAAA,EACZ,IAAM,EAAA,aAAA;AACR,CAAA,CAAA,CAAA;;;;;;;AAKA,IAAI,IAAA,KAAA,CAAA;AACJ,IAAM,MAAA,QAAA,GAAW,IAAY,CAAC,CAAA,CAAA;AAC9B,IAAM,MAAA,YAAA,GAAe,SAAS,MAAM,UAAA,CAAW,SAAS,KAAO,EAAA,KAAA,CAAM,MAAM,CAAC,CAAA,CAAA;AAE5E,IAAA,MAAM,YAAY,CAAC,GAAA,KAAgB,UAAW,CAAA,GAAA,EAAK,MAAM,MAAM,CAAA,CAAA;AAE/D,IAAA,MAAM,YAAY,MAAM;AACtB,MAAA,IAAI,KAAO,EAAA;AACT,QAAA,GAAA,CAAI,KAAK,CAAA,CAAA;AACT,QAAQ,KAAA,GAAA,KAAA,CAAA,CAAA;AAAA,OACV;AAAA,KACF,CAAA;AAEA,IAAA,MAAM,aAAa,MAAM;AACvB,MAAM,MAAA,SAAA,GAAY,OAAQ,CAAA,KAAA,CAAM,KAAK,CAAA,CAAA;AACrC,MAAA,MAAM,YAAY,MAAM;AACtB,QAAI,IAAA,IAAA,GAAO,SAAY,GAAA,IAAA,CAAK,GAAI,EAAA,CAAA;AAChC,QAAA,IAAA,CAAK,UAAU,IAAI,CAAA,CAAA;AACnB,QAAA,IAAI,QAAQ,CAAG,EAAA;AACb,UAAO,IAAA,GAAA,CAAA,CAAA;AACP,UAAU,SAAA,EAAA,CAAA;AACV,UAAA,IAAA,CAAK,QAAQ,CAAA,CAAA;AAAA,SACR,MAAA;AACL,UAAA,KAAA,GAAQ,IAAI,SAAS,CAAA,CAAA;AAAA,SACvB;AACA,QAAA,QAAA,CAAS,KAAQ,GAAA,IAAA,CAAA;AAAA,OACnB,CAAA;AACA,MAAA,KAAA,GAAQ,IAAI,SAAS,CAAA,CAAA;AAAA,KACvB,CAAA;AAEA,IAAA,SAAA,CAAU,MAAM;AACd,MAAA,QAAA,CAAS,QAAQ,OAAQ,CAAA,KAAA,CAAM,KAAK,CAAA,GAAI,KAAK,GAAI,EAAA,CAAA;AAEjD,MAAA,KAAA,CAAA,MAAA,CAAA,KAAA,CAAA,KAAA,EAAA,KAAA,CAAA,MAAA,CAAA,EAAA,MAAA;AAAA,QACE,SAAa,EAAA,CAAA;AAAmB,QAChC,UAAM,EAAA,CAAA;AACJ,OAAU,EAAA;AACV,QAAW,SAAA,EAAA,IAAA;AAAA,OACb,CAAA,CAAA;AAAA,KACA,CAAA,CAAA;AAAA,IAAA,eACa,CAAA,MAAA;AAAA,MACb,SAAA,EAAA,CAAA;AAAA,KACF,CAAA,CAAA;AAAA,IACF,MAAC,CAAA;AAED,MAAA,YAAA;AACE,KAAU,CAAA,CAAA;AAAA,IACZ,OAAC,CAAA,IAAA,EAAA,MAAA,KAAA;AAED,MAAa,OAAAA,SAAA,EAAA,EAAAC,WAAA,CAAAC,KAAA,CAAA,WAAA,CAAA,EAAA;AAAA,QAAA,KAAA,EAAA,QAAA,CAAA,KAAA;AAAA,QAAA,KAAA,EAAA,IAAA,CAAA,KAAA;AAAA,QAAA,MAAA,EAAA,IAAA,CAAA,MAAA;AAAA,QAIX,MAAA,EAAA,IAAA,CAAA,MAAA;AAAA,QACD,aAAA,EAAA,IAAA,CAAA,UAAA;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"countdown.mjs","sources":["../../../../../../packages/components/countdown/src/countdown.ts"],"sourcesContent":["import { buildProps, definePropType, isNumber } from '@element-plus/utils'\nimport { CHANGE_EVENT } from '@element-plus/constants'\n\nimport type { ExtractPropTypes, StyleValue } from 'vue'\nimport type { Dayjs } from 'dayjs'\nimport type Countdown from './countdown.vue'\n\nexport const countdownProps = buildProps({\n  /**\n   * @description Formatting the countdown display\n   */\n  format: {\n    type: String,\n    default: 'HH:mm:ss',\n  },\n  /**\n   * @description Sets the prefix of a countdown\n   */\n  prefix: String,\n  /**\n   * @description Sets the suffix of a countdown\n   */\n  suffix: String,\n  /**\n   * @description countdown titles\n   */\n  title: String,\n  /**\n   * @description target time\n   */\n  value: {\n    type: definePropType<number | Dayjs>([Number, Object]),\n    default: 0,\n  },\n  /**\n   * @description Styles countdown values\n   */\n  valueStyle: {\n    type: definePropType<StyleValue>([String, Object, Array]),\n  },\n} as const)\nexport type CountdownProps = ExtractPropTypes<typeof countdownProps>\n\nexport const countdownEmits = {\n  finish: () => true,\n  [CHANGE_EVENT]: (value: number) => isNumber(value),\n}\nexport type CountdownEmits = typeof countdownEmits\n\nexport type CountdownInstance = InstanceType<typeof Countdown>\n"],"names":[],"mappings":";;;;AAEY,MAAC,cAAc,GAAG,UAAU,CAAC;AACzC,EAAE,MAAM,EAAE;AACV,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,UAAU;AACvB,GAAG;AACH,EAAE,MAAM,EAAE,MAAM;AAChB,EAAE,MAAM,EAAE,MAAM;AAChB,EAAE,KAAK,EAAE,MAAM;AACf,EAAE,KAAK,EAAE;AACT,IAAI,IAAI,EAAE,cAAc,CAAC,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAC1C,IAAI,OAAO,EAAE,CAAC;AACd,GAAG;AACH,EAAE,UAAU,EAAE;AACd,IAAI,IAAI,EAAE,cAAc,CAAC,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,CAAC,CAAC;AACjD,GAAG;AACH,CAAC,EAAE;AACS,MAAC,cAAc,GAAG;AAC9B,EAAE,MAAM,EAAE,MAAM,IAAI;AACpB,EAAE,CAAC,YAAY,GAAG,CAAC,KAAK,KAAK,QAAQ,CAAC,KAAK,CAAC;AAC5C;;;;"}

package/es/components/countdown/src/countdown2.mjs

@@ -1,27 +1,84 @@
-import { buildProps, definePropType } from '../../../utils/vue/props/runtime.mjs';
-import { CHANGE_EVENT } from '../../../constants/event.mjs';
-import { isNumber } from '../../../utils/types.mjs';
+import { defineComponent, ref, computed, onMounted, watch, onBeforeUnmount, openBlock, createBlock, unref, createSlots, renderList, withCtx, renderSlot } from 'vue';
+import { ElStatistic } from '../../statistic/index.mjs';
+import { countdownProps, countdownEmits } from './countdown.mjs';
+import { formatTime, getTime } from './utils.mjs';
+import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
+import { rAF, cAF } from '../../../utils/raf.mjs';
 
-const countdownProps = buildProps({
-  format: {
-    type: String,
-    default: "HH:mm:ss"
-  },
-  prefix: String,
-  suffix: String,
-  title: String,
-  value: {
-    type: definePropType([Number, Object]),
-    default: 0
-  },
-  valueStyle: {
-    type: definePropType([String, Object, Array])
+const __default__ = defineComponent({
+  name: "ElCountdown"
+});
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...__default__,
+  props: countdownProps,
+  emits: countdownEmits,
+  setup(__props, { expose, emit }) {
+    const props = __props;
+    let timer;
+    const rawValue = ref(0);
+    const displayValue = computed(() => formatTime(rawValue.value, props.format));
+    const formatter = (val) => formatTime(val, props.format);
+    const stopTimer = () => {
+      if (timer) {
+        cAF(timer);
+        timer = void 0;
+      }
+    };
+    const startTimer = () => {
+      const timestamp = getTime(props.value);
+      const frameFunc = () => {
+        let diff = timestamp - Date.now();
+        emit("change", diff);
+        if (diff <= 0) {
+          diff = 0;
+          stopTimer();
+          emit("finish");
+        } else {
+          timer = rAF(frameFunc);
+        }
+        rawValue.value = diff;
+      };
+      timer = rAF(frameFunc);
+    };
+    onMounted(() => {
+      rawValue.value = getTime(props.value) - Date.now();
+      watch(() => [props.value, props.format], () => {
+        stopTimer();
+        startTimer();
+      }, {
+        immediate: true
+      });
+    });
+    onBeforeUnmount(() => {
+      stopTimer();
+    });
+    expose({
+      displayValue
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(ElStatistic), {
+        value: rawValue.value,
+        title: _ctx.title,
+        prefix: _ctx.prefix,
+        suffix: _ctx.suffix,
+        "value-style": _ctx.valueStyle,
+        formatter
+      }, createSlots({
+        _: 2
+      }, [
+        renderList(_ctx.$slots, (_, name) => {
+          return {
+            name,
+            fn: withCtx(() => [
+              renderSlot(_ctx.$slots, name)
+            ])
+          };
+        })
+      ]), 1032, ["value", "title", "prefix", "suffix", "value-style"]);
+    };
   }
 });
-const countdownEmits = {
-  finish: () => true,
-  [CHANGE_EVENT]: (value) => isNumber(value)
-};
+var Countdown = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "countdown.vue"]]);
 
-export { countdownEmits, countdownProps };
+export { Countdown as default };
 //# sourceMappingURL=countdown2.mjs.map

package/es/components/countdown/src/countdown2.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"countdown2.mjs","sources":["../../../../../../packages/components/countdown/src/countdown.ts"],"sourcesContent":["import { buildProps, definePropType, isNumber } from '@element-plus/utils'\nimport { CHANGE_EVENT } from '@element-plus/constants'\n\nimport type { ExtractPropTypes, StyleValue } from 'vue'\nimport type { Dayjs } from 'dayjs'\nimport type Countdown from './countdown.vue'\n\nexport const countdownProps = buildProps({\n  /**\n   * @description Formatting the countdown display\n   */\n  format: {\n    type: String,\n    default: 'HH:mm:ss',\n  },\n  /**\n   * @description Sets the prefix of a countdown\n   */\n  prefix: String,\n  /**\n   * @description Sets the suffix of a countdown\n   */\n  suffix: String,\n  /**\n   * @description countdown titles\n   */\n  title: String,\n  /**\n   * @description target time\n   */\n  value: {\n    type: definePropType<number | Dayjs>([Number, Object]),\n    default: 0,\n  },\n  /**\n   * @description Styles countdown values\n   */\n  valueStyle: {\n    type: definePropType<StyleValue>([String, Object, Array]),\n  },\n} as const)\nexport type CountdownProps = ExtractPropTypes<typeof countdownProps>\n\nexport const countdownEmits = {\n  finish: () => true,\n  [CHANGE_EVENT]: (value: number) => isNumber(value),\n}\nexport type CountdownEmits = typeof countdownEmits\n\nexport type CountdownInstance = InstanceType<typeof Countdown>\n"],"names":[],"mappings":";;;;AAEY,MAAC,cAAc,GAAG,UAAU,CAAC;AACzC,EAAE,MAAM,EAAE;AACV,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,UAAU;AACvB,GAAG;AACH,EAAE,MAAM,EAAE,MAAM;AAChB,EAAE,MAAM,EAAE,MAAM;AAChB,EAAE,KAAK,EAAE,MAAM;AACf,EAAE,KAAK,EAAE;AACT,IAAI,IAAI,EAAE,cAAc,CAAC,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAC1C,IAAI,OAAO,EAAE,CAAC;AACd,GAAG;AACH,EAAE,UAAU,EAAE;AACd,IAAI,IAAI,EAAE,cAAc,CAAC,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,CAAC,CAAC;AACjD,GAAG;AACH,CAAC,EAAE;AACS,MAAC,cAAc,GAAG;AAC9B,EAAE,MAAM,EAAE,MAAM,IAAI;AACpB,EAAE,CAAC,YAAY,GAAG,CAAC,KAAK,KAAK,QAAQ,CAAC,KAAK,CAAC;AAC5C;;;;"}
+{"version":3,"file":"countdown2.mjs","sources":["../../../../../../packages/components/countdown/src/countdown.vue"],"sourcesContent":["<template>\n  <el-statistic\n    :value=\"rawValue\"\n    :title=\"title\"\n    :prefix=\"prefix\"\n    :suffix=\"suffix\"\n    :value-style=\"valueStyle\"\n    :formatter=\"formatter\"\n  >\n    <template v-for=\"(_, name) in $slots\" #[name]>\n      <slot :name=\"name\" />\n    </template>\n  </el-statistic>\n</template>\n<script lang=\"ts\" setup>\nimport { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'\nimport { ElStatistic } from '@element-plus/components/statistic'\nimport { cAF, rAF } from '@element-plus/utils'\nimport { countdownEmits, countdownProps } from './countdown'\nimport { formatTime, getTime } from './utils'\n\ndefineOptions({\n  name: 'ElCountdown',\n})\n\nconst props = defineProps(countdownProps)\nconst emit = defineEmits(countdownEmits)\n\nlet timer: ReturnType<typeof rAF> | undefined\nconst rawValue = ref<number>(0)\nconst displayValue = computed(() => formatTime(rawValue.value, props.format))\n\nconst formatter = (val: number) => formatTime(val, props.format)\n\nconst stopTimer = () => {\n  if (timer) {\n    cAF(timer)\n    timer = undefined\n  }\n}\n\nconst startTimer = () => {\n  const timestamp = getTime(props.value)\n  const frameFunc = () => {\n    let diff = timestamp - Date.now()\n    emit('change', diff)\n    if (diff <= 0) {\n      diff = 0\n      stopTimer()\n      emit('finish')\n    } else {\n      timer = rAF(frameFunc)\n    }\n    rawValue.value = diff\n  }\n  timer = rAF(frameFunc)\n}\n\nonMounted(() => {\n  rawValue.value = getTime(props.value) - Date.now()\n\n  watch(\n    () => [props.value, props.format],\n    () => {\n      stopTimer()\n      startTimer()\n    },\n    {\n      immediate: true,\n    }\n  )\n})\n\nonBeforeUnmount(() => {\n  stopTimer()\n})\n\ndefineExpose({\n  /**\n   * @description current display value\n   */\n  displayValue,\n})\n</script>\n"],"names":["_openBlock","_createBlock","_unref"],"mappings":";;;;;;;mCAqBc,CAAA;AAAA,EACZ,IAAM,EAAA,aAAA;AACR,CAAA,CAAA,CAAA;;;;;;;AAKA,IAAI,IAAA,KAAA,CAAA;AACJ,IAAM,MAAA,QAAA,GAAW,IAAY,CAAC,CAAA,CAAA;AAC9B,IAAM,MAAA,YAAA,GAAe,SAAS,MAAM,UAAA,CAAW,SAAS,KAAO,EAAA,KAAA,CAAM,MAAM,CAAC,CAAA,CAAA;AAE5E,IAAA,MAAM,YAAY,CAAC,GAAA,KAAgB,UAAW,CAAA,GAAA,EAAK,MAAM,MAAM,CAAA,CAAA;AAE/D,IAAA,MAAM,YAAY,MAAM;AACtB,MAAA,IAAI,KAAO,EAAA;AACT,QAAA,GAAA,CAAI,KAAK,CAAA,CAAA;AACT,QAAQ,KAAA,GAAA,KAAA,CAAA,CAAA;AAAA,OACV;AAAA,KACF,CAAA;AAEA,IAAA,MAAM,aAAa,MAAM;AACvB,MAAM,MAAA,SAAA,GAAY,OAAQ,CAAA,KAAA,CAAM,KAAK,CAAA,CAAA;AACrC,MAAA,MAAM,YAAY,MAAM;AACtB,QAAI,IAAA,IAAA,GAAO,SAAY,GAAA,IAAA,CAAK,GAAI,EAAA,CAAA;AAChC,QAAA,IAAA,CAAK,UAAU,IAAI,CAAA,CAAA;AACnB,QAAA,IAAI,QAAQ,CAAG,EAAA;AACb,UAAO,IAAA,GAAA,CAAA,CAAA;AACP,UAAU,SAAA,EAAA,CAAA;AACV,UAAA,IAAA,CAAK,QAAQ,CAAA,CAAA;AAAA,SACR,MAAA;AACL,UAAA,KAAA,GAAQ,IAAI,SAAS,CAAA,CAAA;AAAA,SACvB;AACA,QAAA,QAAA,CAAS,KAAQ,GAAA,IAAA,CAAA;AAAA,OACnB,CAAA;AACA,MAAA,KAAA,GAAQ,IAAI,SAAS,CAAA,CAAA;AAAA,KACvB,CAAA;AAEA,IAAA,SAAA,CAAU,MAAM;AACd,MAAA,QAAA,CAAS,QAAQ,OAAQ,CAAA,KAAA,CAAM,KAAK,CAAA,GAAI,KAAK,GAAI,EAAA,CAAA;AAEjD,MAAA,KAAA,CAAA,MAAA,CAAA,KAAA,CAAA,KAAA,EAAA,KAAA,CAAA,MAAA,CAAA,EAAA,MAAA;AAAA,QACE,SAAa,EAAA,CAAA;AAAmB,QAChC,UAAM,EAAA,CAAA;AACJ,OAAU,EAAA;AACV,QAAW,SAAA,EAAA,IAAA;AAAA,OACb,CAAA,CAAA;AAAA,KACA,CAAA,CAAA;AAAA,IAAA,eACa,CAAA,MAAA;AAAA,MACb,SAAA,EAAA,CAAA;AAAA,KACF,CAAA,CAAA;AAAA,IACF,MAAC,CAAA;AAED,MAAA,YAAA;AACE,KAAU,CAAA,CAAA;AAAA,IACZ,OAAC,CAAA,IAAA,EAAA,MAAA,KAAA;AAED,MAAa,OAAAA,SAAA,EAAA,EAAAC,WAAA,CAAAC,KAAA,CAAA,WAAA,CAAA,EAAA;AAAA,QAAA,KAAA,EAAA,QAAA,CAAA,KAAA;AAAA,QAAA,KAAA,EAAA,IAAA,CAAA,KAAA;AAAA,QAAA,MAAA,EAAA,IAAA,CAAA,MAAA;AAAA,QAIX,MAAA,EAAA,IAAA,CAAA,MAAA;AAAA,QACD,aAAA,EAAA,IAAA,CAAA,UAAA;;;;;;;;;;;;;;;;;;;;;"}

package/es/components/dropdown/src/dropdown.mjs

@@ -1,4 +1,4 @@
-import { useTooltipTriggerProps } from '../../tooltip/src/trigger2.mjs';
+import { useTooltipTriggerProps } from '../../tooltip/src/trigger.mjs';
 import { buildProps, definePropType } from '../../../utils/vue/props/runtime.mjs';
 import { EVENT_CODE } from '../../../constants/aria.mjs';
 import { useTooltipContentProps } from '../../tooltip/src/content.mjs';

package/es/components/image-viewer/index.mjs

@@ -1,5 +1,5 @@
-import ImageViewer from './src/image-viewer.mjs';
-export { imageViewerEmits, imageViewerProps } from './src/image-viewer2.mjs';
+import ImageViewer from './src/image-viewer2.mjs';
+export { imageViewerEmits, imageViewerProps } from './src/image-viewer.mjs';
 import { withInstall } from '../../utils/vue/install.mjs';
 
 const ElImageViewer = withInstall(ImageViewer);

package/es/components/image-viewer/src/image-viewer.mjs

@@ -1,431 +1,54 @@
-import { defineComponent, markRaw, ref, effectScope, shallowRef, computed, watch, nextTick, onMounted, openBlock, createBlock, unref, withCtx, createVNode, Transition, createElementVNode, normalizeClass, normalizeStyle, withModifiers, createCommentVNode, createElementBlock, Fragment, renderSlot, createTextVNode, toDisplayString, resolveDynamicComponent, renderList, withDirectives, vShow } from 'vue';
-import { useEventListener } from '@vueuse/core';
-import { throttle } from 'lodash-unified';
-import ElFocusTrap from '../../focus-trap/src/focus-trap.mjs';
-import { ElTeleport } from '../../teleport/index.mjs';
-import { ElIcon } from '../../icon/index.mjs';
-import { FullScreen, ScaleToOriginal, Close, ArrowLeft, ArrowRight, ZoomOut, ZoomIn, RefreshLeft, RefreshRight } from '@element-plus/icons-vue';
-import { imageViewerProps, imageViewerEmits } from './image-viewer2.mjs';
-import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
-import { useLocale } from '../../../hooks/use-locale/index.mjs';
-import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
-import { useZIndex } from '../../../hooks/use-z-index/index.mjs';
-import { EVENT_CODE } from '../../../constants/aria.mjs';
-import { keysOf } from '../../../utils/objects.mjs';
+import { buildProps, definePropType } from '../../../utils/vue/props/runtime.mjs';
+import { mutable } from '../../../utils/typescript.mjs';
+import { isNumber } from '../../../utils/types.mjs';
 
-const __default__ = defineComponent({
-  name: "ElImageViewer"
-});
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  ...__default__,
-  props: imageViewerProps,
-  emits: imageViewerEmits,
-  setup(__props, { expose, emit }) {
-    var _a;
-    const props = __props;
-    const modes = {
-      CONTAIN: {
-        name: "contain",
-        icon: markRaw(FullScreen)
-      },
-      ORIGINAL: {
-        name: "original",
-        icon: markRaw(ScaleToOriginal)
-      }
-    };
-    const { t } = useLocale();
-    const ns = useNamespace("image-viewer");
-    const { nextZIndex } = useZIndex();
-    const wrapper = ref();
-    const imgRefs = ref([]);
-    const scopeEventListener = effectScope();
-    const loading = ref(true);
-    const activeIndex = ref(props.initialIndex);
-    const mode = shallowRef(modes.CONTAIN);
-    const transform = ref({
-      scale: 1,
-      deg: 0,
-      offsetX: 0,
-      offsetY: 0,
-      enableTransition: false
-    });
-    const zIndex = ref((_a = props.zIndex) != null ? _a : nextZIndex());
-    const isSingle = computed(() => {
-      const { urlList } = props;
-      return urlList.length <= 1;
-    });
-    const isFirst = computed(() => activeIndex.value === 0);
-    const isLast = computed(() => activeIndex.value === props.urlList.length - 1);
-    const currentImg = computed(() => props.urlList[activeIndex.value]);
-    const arrowPrevKls = computed(() => [
-      ns.e("btn"),
-      ns.e("prev"),
-      ns.is("disabled", !props.infinite && isFirst.value)
-    ]);
-    const arrowNextKls = computed(() => [
-      ns.e("btn"),
-      ns.e("next"),
-      ns.is("disabled", !props.infinite && isLast.value)
-    ]);
-    const imgStyle = computed(() => {
-      const { scale, deg, offsetX, offsetY, enableTransition } = transform.value;
-      let translateX = offsetX / scale;
-      let translateY = offsetY / scale;
-      const radian = deg * Math.PI / 180;
-      const cosRadian = Math.cos(radian);
-      const sinRadian = Math.sin(radian);
-      translateX = translateX * cosRadian + translateY * sinRadian;
-      translateY = translateY * cosRadian - offsetX / scale * sinRadian;
-      const style = {
-        transform: `scale(${scale}) rotate(${deg}deg) translate(${translateX}px, ${translateY}px)`,
-        transition: enableTransition ? "transform .3s" : ""
-      };
-      if (mode.value.name === modes.CONTAIN.name) {
-        style.maxWidth = style.maxHeight = "100%";
-      }
-      return style;
-    });
-    const progress = computed(() => `${activeIndex.value + 1} / ${props.urlList.length}`);
-    function hide() {
-      unregisterEventListener();
-      emit("close");
-    }
-    function registerEventListener() {
-      const keydownHandler = throttle((e) => {
-        switch (e.code) {
-          case EVENT_CODE.esc:
-            props.closeOnPressEscape && hide();
-            break;
-          case EVENT_CODE.space:
-            toggleMode();
-            break;
-          case EVENT_CODE.left:
-            prev();
-            break;
-          case EVENT_CODE.up:
-            handleActions("zoomIn");
-            break;
-          case EVENT_CODE.right:
-            next();
-            break;
-          case EVENT_CODE.down:
-            handleActions("zoomOut");
-            break;
-        }
-      });
-      const mousewheelHandler = throttle((e) => {
-        const delta = e.deltaY || e.deltaX;
-        handleActions(delta < 0 ? "zoomIn" : "zoomOut", {
-          zoomRate: props.zoomRate,
-          enableTransition: false
-        });
-      });
-      scopeEventListener.run(() => {
-        useEventListener(document, "keydown", keydownHandler);
-        useEventListener(document, "wheel", mousewheelHandler);
-      });
-    }
-    function unregisterEventListener() {
-      scopeEventListener.stop();
-    }
-    function handleImgLoad() {
-      loading.value = false;
-    }
-    function handleImgError(e) {
-      loading.value = false;
-      e.target.alt = t("el.image.error");
-    }
-    function handleMouseDown(e) {
-      if (loading.value || e.button !== 0 || !wrapper.value)
-        return;
-      transform.value.enableTransition = false;
-      const { offsetX, offsetY } = transform.value;
-      const startX = e.pageX;
-      const startY = e.pageY;
-      const dragHandler = throttle((ev) => {
-        transform.value = {
-          ...transform.value,
-          offsetX: offsetX + ev.pageX - startX,
-          offsetY: offsetY + ev.pageY - startY
-        };
-      });
-      const removeMousemove = useEventListener(document, "mousemove", dragHandler);
-      useEventListener(document, "mouseup", () => {
-        removeMousemove();
-      });
-      e.preventDefault();
-    }
-    function reset() {
-      transform.value = {
-        scale: 1,
-        deg: 0,
-        offsetX: 0,
-        offsetY: 0,
-        enableTransition: false
-      };
-    }
-    function toggleMode() {
-      if (loading.value)
-        return;
-      const modeNames = keysOf(modes);
-      const modeValues = Object.values(modes);
-      const currentMode = mode.value.name;
-      const index = modeValues.findIndex((i) => i.name === currentMode);
-      const nextIndex = (index + 1) % modeNames.length;
-      mode.value = modes[modeNames[nextIndex]];
-      reset();
-    }
-    function setActiveItem(index) {
-      const len = props.urlList.length;
-      activeIndex.value = (index + len) % len;
-    }
-    function prev() {
-      if (isFirst.value && !props.infinite)
-        return;
-      setActiveItem(activeIndex.value - 1);
-    }
-    function next() {
-      if (isLast.value && !props.infinite)
-        return;
-      setActiveItem(activeIndex.value + 1);
-    }
-    function handleActions(action, options = {}) {
-      if (loading.value)
-        return;
-      const { minScale, maxScale } = props;
-      const { zoomRate, rotateDeg, enableTransition } = {
-        zoomRate: props.zoomRate,
-        rotateDeg: 90,
-        enableTransition: true,
-        ...options
-      };
-      switch (action) {
-        case "zoomOut":
-          if (transform.value.scale > minScale) {
-            transform.value.scale = Number.parseFloat((transform.value.scale / zoomRate).toFixed(3));
-          }
-          break;
-        case "zoomIn":
-          if (transform.value.scale < maxScale) {
-            transform.value.scale = Number.parseFloat((transform.value.scale * zoomRate).toFixed(3));
-          }
-          break;
-        case "clockwise":
-          transform.value.deg += rotateDeg;
-          emit("rotate", transform.value.deg);
-          break;
-        case "anticlockwise":
-          transform.value.deg -= rotateDeg;
-          emit("rotate", transform.value.deg);
-          break;
-      }
-      transform.value.enableTransition = enableTransition;
-    }
-    function onFocusoutPrevented(event) {
-      var _a2;
-      if (((_a2 = event.detail) == null ? void 0 : _a2.focusReason) === "pointer") {
-        event.preventDefault();
-      }
-    }
-    function onCloseRequested() {
-      if (props.closeOnPressEscape) {
-        hide();
-      }
-    }
-    watch(currentImg, () => {
-      nextTick(() => {
-        const $img = imgRefs.value[0];
-        if (!($img == null ? void 0 : $img.complete)) {
-          loading.value = true;
-        }
-      });
-    });
-    watch(activeIndex, (val) => {
-      reset();
-      emit("switch", val);
-    });
-    onMounted(() => {
-      registerEventListener();
-    });
-    expose({
-      setActiveItem
-    });
-    return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(ElTeleport), {
-        to: "body",
-        disabled: !_ctx.teleported
-      }, {
-        default: withCtx(() => [
-          createVNode(Transition, {
-            name: "viewer-fade",
-            appear: ""
-          }, {
-            default: withCtx(() => [
-              createElementVNode("div", {
-                ref_key: "wrapper",
-                ref: wrapper,
-                tabindex: -1,
-                class: normalizeClass(unref(ns).e("wrapper")),
-                style: normalizeStyle({ zIndex: zIndex.value })
-              }, [
-                createVNode(unref(ElFocusTrap), {
-                  loop: "",
-                  trapped: "",
-                  "focus-trap-el": wrapper.value,
-                  "focus-start-el": "container",
-                  onFocusoutPrevented,
-                  onReleaseRequested: onCloseRequested
-                }, {
-                  default: withCtx(() => [
-                    createElementVNode("div", {
-                      class: normalizeClass(unref(ns).e("mask")),
-                      onClick: withModifiers(($event) => _ctx.hideOnClickModal && hide(), ["self"])
-                    }, null, 10, ["onClick"]),
-                    createCommentVNode(" CLOSE "),
-                    createElementVNode("span", {
-                      class: normalizeClass([unref(ns).e("btn"), unref(ns).e("close")]),
-                      onClick: hide
-                    }, [
-                      createVNode(unref(ElIcon), null, {
-                        default: withCtx(() => [
-                          createVNode(unref(Close))
-                        ]),
-                        _: 1
-                      })
-                    ], 2),
-                    createCommentVNode(" ARROW "),
-                    !unref(isSingle) ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-                      createElementVNode("span", {
-                        class: normalizeClass(unref(arrowPrevKls)),
-                        onClick: prev
-                      }, [
-                        createVNode(unref(ElIcon), null, {
-                          default: withCtx(() => [
-                            createVNode(unref(ArrowLeft))
-                          ]),
-                          _: 1
-                        })
-                      ], 2),
-                      createElementVNode("span", {
-                        class: normalizeClass(unref(arrowNextKls)),
-                        onClick: next
-                      }, [
-                        createVNode(unref(ElIcon), null, {
-                          default: withCtx(() => [
-                            createVNode(unref(ArrowRight))
-                          ]),
-                          _: 1
-                        })
-                      ], 2)
-                    ], 64)) : createCommentVNode("v-if", true),
-                    _ctx.showProgress ? (openBlock(), createElementBlock("div", {
-                      key: 1,
-                      class: normalizeClass([unref(ns).e("btn"), unref(ns).e("progress")])
-                    }, [
-                      renderSlot(_ctx.$slots, "progress", {
-                        activeIndex: activeIndex.value,
-                        total: _ctx.urlList.length
-                      }, () => [
-                        createTextVNode(toDisplayString(unref(progress)), 1)
-                      ])
-                    ], 2)) : createCommentVNode("v-if", true),
-                    createCommentVNode(" ACTIONS "),
-                    createElementVNode("div", {
-                      class: normalizeClass([unref(ns).e("btn"), unref(ns).e("actions")])
-                    }, [
-                      createElementVNode("div", {
-                        class: normalizeClass(unref(ns).e("actions__inner"))
-                      }, [
-                        renderSlot(_ctx.$slots, "toolbar", {
-                          actions: handleActions,
-                          prev,
-                          next,
-                          reset: toggleMode,
-                          activeIndex: activeIndex.value
-                        }, () => [
-                          createVNode(unref(ElIcon), {
-                            onClick: ($event) => handleActions("zoomOut")
-                          }, {
-                            default: withCtx(() => [
-                              createVNode(unref(ZoomOut))
-                            ]),
-                            _: 1
-                          }, 8, ["onClick"]),
-                          createVNode(unref(ElIcon), {
-                            onClick: ($event) => handleActions("zoomIn")
-                          }, {
-                            default: withCtx(() => [
-                              createVNode(unref(ZoomIn))
-                            ]),
-                            _: 1
-                          }, 8, ["onClick"]),
-                          createElementVNode("i", {
-                            class: normalizeClass(unref(ns).e("actions__divider"))
-                          }, null, 2),
-                          createVNode(unref(ElIcon), { onClick: toggleMode }, {
-                            default: withCtx(() => [
-                              (openBlock(), createBlock(resolveDynamicComponent(unref(mode).icon)))
-                            ]),
-                            _: 1
-                          }),
-                          createElementVNode("i", {
-                            class: normalizeClass(unref(ns).e("actions__divider"))
-                          }, null, 2),
-                          createVNode(unref(ElIcon), {
-                            onClick: ($event) => handleActions("anticlockwise")
-                          }, {
-                            default: withCtx(() => [
-                              createVNode(unref(RefreshLeft))
-                            ]),
-                            _: 1
-                          }, 8, ["onClick"]),
-                          createVNode(unref(ElIcon), {
-                            onClick: ($event) => handleActions("clockwise")
-                          }, {
-                            default: withCtx(() => [
-                              createVNode(unref(RefreshRight))
-                            ]),
-                            _: 1
-                          }, 8, ["onClick"])
-                        ])
-                      ], 2)
-                    ], 2),
-                    createCommentVNode(" CANVAS "),
-                    createElementVNode("div", {
-                      class: normalizeClass(unref(ns).e("canvas"))
-                    }, [
-                      (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.urlList, (url, i) => {
-                        return withDirectives((openBlock(), createElementBlock("img", {
-                          ref_for: true,
-                          ref: (el) => imgRefs.value[i] = el,
-                          key: url,
-                          src: url,
-                          style: normalizeStyle(unref(imgStyle)),
-                          class: normalizeClass(unref(ns).e("img")),
-                          crossorigin: _ctx.crossorigin,
-                          onLoad: handleImgLoad,
-                          onError: handleImgError,
-                          onMousedown: handleMouseDown
-                        }, null, 46, ["src", "crossorigin"])), [
-                          [vShow, i === activeIndex.value]
-                        ]);
-                      }), 128))
-                    ], 2),
-                    renderSlot(_ctx.$slots, "default")
-                  ]),
-                  _: 3
-                }, 8, ["focus-trap-el"])
-              ], 6)
-            ]),
-            _: 3
-          })
-        ]),
-        _: 3
-      }, 8, ["disabled"]);
-    };
+const imageViewerProps = buildProps({
+  urlList: {
+    type: definePropType(Array),
+    default: () => mutable([])
+  },
+  zIndex: {
+    type: Number
+  },
+  initialIndex: {
+    type: Number,
+    default: 0
+  },
+  infinite: {
+    type: Boolean,
+    default: true
+  },
+  hideOnClickModal: Boolean,
+  teleported: Boolean,
+  closeOnPressEscape: {
+    type: Boolean,
+    default: true
+  },
+  zoomRate: {
+    type: Number,
+    default: 1.2
+  },
+  minScale: {
+    type: Number,
+    default: 0.2
+  },
+  maxScale: {
+    type: Number,
+    default: 7
+  },
+  showProgress: {
+    type: Boolean,
+    default: false
+  },
+  crossorigin: {
+    type: definePropType(String)
   }
 });
-var ImageViewer = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "image-viewer.vue"]]);
+const imageViewerEmits = {
+  close: () => true,
+  switch: (index) => isNumber(index),
+  rotate: (deg) => isNumber(deg)
+};
 
-export { ImageViewer as default };
+export { imageViewerEmits, imageViewerProps };
 //# sourceMappingURL=image-viewer.mjs.map