element-pe 1.0.8 → 1.0.9-alpha.12

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

@@ -0,0 +1,260 @@
+import { markRaw, defineComponent, ref, effectScope, computed, watch, nextTick, onMounted } from 'vue';
+import { useEventListener } from '@vueuse/core';
+import { ElIcon } from '../../icon/index.mjs';
+import '../../../hooks/index.mjs';
+import { EVENT_CODE } from '../../../utils/aria.mjs';
+import { isFirefox, rafThrottle } from '../../../utils/util.mjs';
+import { FullScreen, ScaleToOriginal, Close, ArrowLeft, ArrowRight, ZoomOut, ZoomIn, RefreshLeft, RefreshRight } from '@element-plus/icons-vue';
+import { imageViewerProps, imageViewerEmits } from './image-viewer.mjs';
+import { useLocale } from '../../../hooks/use-locale/index.mjs';
+
+const Mode = {
+  CONTAIN: {
+    name: "contain",
+    icon: markRaw(FullScreen)
+  },
+  ORIGINAL: {
+    name: "original",
+    icon: markRaw(ScaleToOriginal)
+  }
+};
+const mousewheelEventName = isFirefox() ? "DOMMouseScroll" : "mousewheel";
+var script = defineComponent({
+  name: "ElImageViewer",
+  components: {
+    ElIcon,
+    Close,
+    ArrowLeft,
+    ArrowRight,
+    ZoomOut,
+    ZoomIn,
+    RefreshLeft,
+    RefreshRight
+  },
+  props: imageViewerProps,
+  emits: imageViewerEmits,
+  setup(props, { emit }) {
+    const { t } = useLocale();
+    const wrapper = ref();
+    const img = ref();
+    const scopeEventListener = effectScope();
+    const loading = ref(true);
+    const index = ref(props.initialIndex);
+    const mode = ref(Mode.CONTAIN);
+    const transform = ref({
+      scale: 1,
+      deg: 0,
+      offsetX: 0,
+      offsetY: 0,
+      enableTransition: false
+    });
+    const isSingle = computed(() => {
+      const { urlList } = props;
+      return urlList.length <= 1;
+    });
+    const isFirst = computed(() => {
+      return index.value === 0;
+    });
+    const isLast = computed(() => {
+      return index.value === props.urlList.length - 1;
+    });
+    const currentImg = computed(() => {
+      return props.urlList[index.value];
+    });
+    const imgStyle = computed(() => {
+      const { scale, deg, offsetX, offsetY, enableTransition } = transform.value;
+      const style = {
+        transform: `scale(${scale}) rotate(${deg}deg)`,
+        transition: enableTransition ? "transform .3s" : "",
+        marginLeft: `${offsetX}px`,
+        marginTop: `${offsetY}px`
+      };
+      if (mode.value.name === Mode.CONTAIN.name) {
+        style.maxWidth = style.maxHeight = "100%";
+      }
+      return style;
+    });
+    function hide() {
+      unregisterEventListener();
+      emit("close");
+    }
+    function registerEventListener() {
+      const keydownHandler = rafThrottle((e) => {
+        switch (e.code) {
+          case EVENT_CODE.esc:
+            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 = rafThrottle((e) => {
+        const delta = e.wheelDelta ? e.wheelDelta : -e.detail;
+        if (delta > 0) {
+          handleActions("zoomIn", {
+            zoomRate: 0.015,
+            enableTransition: false
+          });
+        } else {
+          handleActions("zoomOut", {
+            zoomRate: 0.015,
+            enableTransition: false
+          });
+        }
+      });
+      scopeEventListener.run(() => {
+        useEventListener(document, "keydown", keydownHandler);
+        useEventListener(document, mousewheelEventName, 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;
+      const { offsetX, offsetY } = transform.value;
+      const startX = e.pageX;
+      const startY = e.pageY;
+      const divLeft = wrapper.value.clientLeft;
+      const divRight = wrapper.value.clientLeft + wrapper.value.clientWidth;
+      const divTop = wrapper.value.clientTop;
+      const divBottom = wrapper.value.clientTop + wrapper.value.clientHeight;
+      const dragHandler = rafThrottle((ev) => {
+        transform.value = {
+          ...transform.value,
+          offsetX: offsetX + ev.pageX - startX,
+          offsetY: offsetY + ev.pageY - startY
+        };
+      });
+      const removeMousemove = useEventListener(document, "mousemove", dragHandler);
+      useEventListener(document, "mouseup", (evt) => {
+        const mouseX = evt.pageX;
+        const mouseY = evt.pageY;
+        if (mouseX < divLeft || mouseX > divRight || mouseY < divTop || mouseY > divBottom) {
+          reset();
+        }
+        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 = Object.keys(Mode);
+      const modeValues = Object.values(Mode);
+      const currentMode = mode.value.name;
+      const index2 = modeValues.findIndex((i) => i.name === currentMode);
+      const nextIndex = (index2 + 1) % modeNames.length;
+      mode.value = Mode[modeNames[nextIndex]];
+      reset();
+    }
+    function prev() {
+      if (isFirst.value && !props.infinite)
+        return;
+      const len = props.urlList.length;
+      index.value = (index.value - 1 + len) % len;
+    }
+    function next() {
+      if (isLast.value && !props.infinite)
+        return;
+      const len = props.urlList.length;
+      index.value = (index.value + 1) % len;
+    }
+    function handleActions(action, options = {}) {
+      if (loading.value)
+        return;
+      const { zoomRate, rotateDeg, enableTransition } = {
+        zoomRate: 0.2,
+        rotateDeg: 90,
+        enableTransition: true,
+        ...options
+      };
+      switch (action) {
+        case "zoomOut":
+          if (transform.value.scale > 0.2) {
+            transform.value.scale = parseFloat((transform.value.scale - zoomRate).toFixed(3));
+          }
+          break;
+        case "zoomIn":
+          transform.value.scale = parseFloat((transform.value.scale + zoomRate).toFixed(3));
+          break;
+        case "clockwise":
+          transform.value.deg += rotateDeg;
+          break;
+        case "anticlockwise":
+          transform.value.deg -= rotateDeg;
+          break;
+      }
+      transform.value.enableTransition = enableTransition;
+    }
+    watch(currentImg, () => {
+      nextTick(() => {
+        const $img = img.value;
+        if (!($img == null ? void 0 : $img.complete)) {
+          loading.value = true;
+        }
+      });
+    });
+    watch(index, (val) => {
+      reset();
+      emit("switch", val);
+    });
+    onMounted(() => {
+      var _a, _b;
+      registerEventListener();
+      (_b = (_a = wrapper.value) == null ? void 0 : _a.focus) == null ? void 0 : _b.call(_a);
+    });
+    return {
+      index,
+      wrapper,
+      img,
+      isSingle,
+      isFirst,
+      isLast,
+      currentImg,
+      imgStyle,
+      mode,
+      handleActions,
+      prev,
+      next,
+      hide,
+      toggleMode,
+      handleImgLoad,
+      handleImgError,
+      handleMouseDown
+    };
+  }
+});
+
+export { script as default };
+//# sourceMappingURL=image-viewer.vue_vue_type_script_lang.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"image-viewer.vue_vue_type_script_lang.mjs","sources":["../../../../../../packages/components/image-viewer/src/image-viewer.vue"],"sourcesContent":["<template>\n  <transition name=\"viewer-fade\">\n    <div\n      ref=\"wrapper\"\n      :tabindex=\"-1\"\n      class=\"el-image-viewer__wrapper\"\n      :style=\"{ zIndex }\"\n    >\n      <div\n        class=\"el-image-viewer__mask\"\n        @click.self=\"hideOnClickModal && hide()\"\n      />\n\n      <!-- CLOSE -->\n      <span class=\"el-image-viewer__btn el-image-viewer__close\" @click=\"hide\">\n        <el-icon><close /></el-icon>\n      </span>\n\n      <!-- ARROW -->\n      <template v-if=\"!isSingle\">\n        <span\n          class=\"el-image-viewer__btn el-image-viewer__prev\"\n          :class=\"{ 'is-disabled': !infinite && isFirst }\"\n          @click=\"prev\"\n        >\n          <el-icon><arrow-left /></el-icon>\n        </span>\n        <span\n          class=\"el-image-viewer__btn el-image-viewer__next\"\n          :class=\"{ 'is-disabled': !infinite && isLast }\"\n          @click=\"next\"\n        >\n          <el-icon><arrow-right /></el-icon>\n        </span>\n      </template>\n      <!-- ACTIONS -->\n      <div class=\"el-image-viewer__btn el-image-viewer__actions\">\n        <div class=\"el-image-viewer__actions__inner\">\n          <el-icon @click=\"handleActions('zoomOut')\">\n            <zoom-out />\n          </el-icon>\n          <el-icon @click=\"handleActions('zoomIn')\">\n            <zoom-in />\n          </el-icon>\n          <i class=\"el-image-viewer__actions__divider\"></i>\n          <el-icon @click=\"toggleMode\">\n            <component :is=\"mode.icon\" />\n          </el-icon>\n          <i class=\"el-image-viewer__actions__divider\"></i>\n          <el-icon @click=\"handleActions('anticlockwise')\">\n            <refresh-left />\n          </el-icon>\n          <el-icon @click=\"handleActions('clockwise')\">\n            <refresh-right />\n          </el-icon>\n        </div>\n      </div>\n      <!-- CANVAS -->\n      <div class=\"el-image-viewer__canvas\">\n        <img\n          v-for=\"(url, i) in urlList\"\n          v-show=\"i === index\"\n          ref=\"img\"\n          :key=\"url\"\n          :src=\"url\"\n          :style=\"imgStyle\"\n          class=\"el-image-viewer__img\"\n          @load=\"handleImgLoad\"\n          @error=\"handleImgError\"\n          @mousedown=\"handleMouseDown\"\n        />\n      </div>\n      <slot />\n    </div>\n  </transition>\n</template>\n\n<script lang=\"ts\">\nimport {\n  defineComponent,\n  computed,\n  ref,\n  onMounted,\n  watch,\n  nextTick,\n  effectScope,\n  markRaw,\n} from 'vue'\nimport { useEventListener } from '@vueuse/core'\nimport ElIcon from '@element-plus/components/icon'\nimport { useLocale } from '@element-plus/hooks'\nimport { EVENT_CODE } from '@element-plus/utils/aria'\nimport { rafThrottle, isFirefox } from '@element-plus/utils/util'\nimport {\n  Close,\n  ArrowLeft,\n  ArrowRight,\n  ZoomOut,\n  ZoomIn,\n  RefreshLeft,\n  RefreshRight,\n  FullScreen,\n  ScaleToOriginal,\n} from '@element-plus/icons-vue'\nimport { imageViewerProps, imageViewerEmits } from './image-viewer'\n\nimport type { CSSProperties } from 'vue'\n\nconst Mode = {\n  CONTAIN: {\n    name: 'contain',\n    icon: markRaw(FullScreen),\n  },\n  ORIGINAL: {\n    name: 'original',\n    icon: markRaw(ScaleToOriginal),\n  },\n}\n\nconst mousewheelEventName = isFirefox() ? 'DOMMouseScroll' : 'mousewheel'\nexport type ImageViewerAction =\n  | 'zoomIn'\n  | 'zoomOut'\n  | 'clockwise'\n  | 'anticlockwise'\n\nexport default defineComponent({\n  name: 'ElImageViewer',\n  components: {\n    ElIcon,\n    Close,\n    ArrowLeft,\n    ArrowRight,\n    ZoomOut,\n    ZoomIn,\n    RefreshLeft,\n    RefreshRight,\n  },\n  props: imageViewerProps,\n  emits: imageViewerEmits,\n\n  setup(props, { emit }) {\n    const { t } = useLocale()\n    const wrapper = ref<HTMLDivElement>()\n    const img = ref<HTMLImageElement>()\n\n    const scopeEventListener = effectScope()\n\n    const loading = ref(true)\n    const index = ref(props.initialIndex)\n    const mode = ref(Mode.CONTAIN)\n    const transform = ref({\n      scale: 1,\n      deg: 0,\n      offsetX: 0,\n      offsetY: 0,\n      enableTransition: false,\n    })\n\n    const isSingle = computed(() => {\n      const { urlList } = props\n      return urlList.length <= 1\n    })\n\n    const isFirst = computed(() => {\n      return index.value === 0\n    })\n\n    const isLast = computed(() => {\n      return index.value === props.urlList.length - 1\n    })\n\n    const currentImg = computed(() => {\n      return props.urlList[index.value]\n    })\n\n    const imgStyle = computed(() => {\n      const { scale, deg, offsetX, offsetY, enableTransition } = transform.value\n      const style: CSSProperties = {\n        transform: `scale(${scale}) rotate(${deg}deg)`,\n        transition: enableTransition ? 'transform .3s' : '',\n        marginLeft: `${offsetX}px`,\n        marginTop: `${offsetY}px`,\n      }\n      if (mode.value.name === Mode.CONTAIN.name) {\n        style.maxWidth = style.maxHeight = '100%'\n      }\n      return style\n    })\n\n    function hide() {\n      unregisterEventListener()\n      emit('close')\n    }\n\n    function registerEventListener() {\n      const keydownHandler = rafThrottle((e: KeyboardEvent) => {\n        switch (e.code) {\n          // ESC\n          case EVENT_CODE.esc:\n            hide()\n            break\n          // SPACE\n          case EVENT_CODE.space:\n            toggleMode()\n            break\n          // LEFT_ARROW\n          case EVENT_CODE.left:\n            prev()\n            break\n          // UP_ARROW\n          case EVENT_CODE.up:\n            handleActions('zoomIn')\n            break\n          // RIGHT_ARROW\n          case EVENT_CODE.right:\n            next()\n            break\n          // DOWN_ARROW\n          case EVENT_CODE.down:\n            handleActions('zoomOut')\n            break\n        }\n      })\n      const mousewheelHandler = rafThrottle(\n        (e: WheelEvent | any /* TODO: wheelDelta is deprecated */) => {\n          const delta = e.wheelDelta ? e.wheelDelta : -e.detail\n          if (delta > 0) {\n            handleActions('zoomIn', {\n              zoomRate: 0.015,\n              enableTransition: false,\n            })\n          } else {\n            handleActions('zoomOut', {\n              zoomRate: 0.015,\n              enableTransition: false,\n            })\n          }\n        }\n      )\n\n      scopeEventListener.run(() => {\n        useEventListener(document, 'keydown', keydownHandler)\n        useEventListener(document, mousewheelEventName, mousewheelHandler)\n      })\n    }\n\n    function unregisterEventListener() {\n      scopeEventListener.stop()\n    }\n\n    function handleImgLoad() {\n      loading.value = false\n    }\n\n    function handleImgError(e: Event) {\n      loading.value = false\n      ;(e.target as HTMLImageElement).alt = t('el.image.error')\n    }\n\n    function handleMouseDown(e: MouseEvent) {\n      if (loading.value || e.button !== 0 || !wrapper.value) return\n\n      const { offsetX, offsetY } = transform.value\n      const startX = e.pageX\n      const startY = e.pageY\n\n      const divLeft = wrapper.value.clientLeft\n      const divRight = wrapper.value.clientLeft + wrapper.value.clientWidth\n      const divTop = wrapper.value.clientTop\n      const divBottom = wrapper.value.clientTop + wrapper.value.clientHeight\n\n      const dragHandler = rafThrottle((ev: MouseEvent) => {\n        transform.value = {\n          ...transform.value,\n          offsetX: offsetX + ev.pageX - startX,\n          offsetY: offsetY + ev.pageY - startY,\n        }\n      })\n      const removeMousemove = useEventListener(\n        document,\n        'mousemove',\n        dragHandler\n      )\n      useEventListener(document, 'mouseup', (evt) => {\n        const mouseX = evt.pageX\n        const mouseY = evt.pageY\n        if (\n          mouseX < divLeft ||\n          mouseX > divRight ||\n          mouseY < divTop ||\n          mouseY > divBottom\n        ) {\n          reset()\n        }\n        removeMousemove()\n      })\n\n      e.preventDefault()\n    }\n\n    function reset() {\n      transform.value = {\n        scale: 1,\n        deg: 0,\n        offsetX: 0,\n        offsetY: 0,\n        enableTransition: false,\n      }\n    }\n\n    function toggleMode() {\n      if (loading.value) return\n\n      const modeNames = Object.keys(Mode)\n      const modeValues = Object.values(Mode)\n      const currentMode = mode.value.name\n      const index = modeValues.findIndex((i) => i.name === currentMode)\n      const nextIndex = (index + 1) % modeNames.length\n      mode.value = Mode[modeNames[nextIndex]]\n      reset()\n    }\n\n    function prev() {\n      if (isFirst.value && !props.infinite) return\n      const len = props.urlList.length\n      index.value = (index.value - 1 + len) % len\n    }\n\n    function next() {\n      if (isLast.value && !props.infinite) return\n      const len = props.urlList.length\n      index.value = (index.value + 1) % len\n    }\n\n    function handleActions(action: ImageViewerAction, options = {}) {\n      if (loading.value) return\n      const { zoomRate, rotateDeg, enableTransition } = {\n        zoomRate: 0.2,\n        rotateDeg: 90,\n        enableTransition: true,\n        ...options,\n      }\n      switch (action) {\n        case 'zoomOut':\n          if (transform.value.scale > 0.2) {\n            transform.value.scale = parseFloat(\n              (transform.value.scale - zoomRate).toFixed(3)\n            )\n          }\n          break\n        case 'zoomIn':\n          transform.value.scale = parseFloat(\n            (transform.value.scale + zoomRate).toFixed(3)\n          )\n          break\n        case 'clockwise':\n          transform.value.deg += rotateDeg\n          break\n        case 'anticlockwise':\n          transform.value.deg -= rotateDeg\n          break\n      }\n      transform.value.enableTransition = enableTransition\n    }\n\n    watch(currentImg, () => {\n      nextTick(() => {\n        const $img = img.value\n        if (!$img?.complete) {\n          loading.value = true\n        }\n      })\n    })\n\n    watch(index, (val) => {\n      reset()\n      emit('switch', val)\n    })\n\n    onMounted(() => {\n      registerEventListener()\n      // add tabindex then wrapper can be focusable via Javascript\n      // focus wrapper so arrow key can't cause inner scroll behavior underneath\n      wrapper.value?.focus?.()\n    })\n\n    return {\n      index,\n      wrapper,\n      img,\n      isSingle,\n      isFirst,\n      isLast,\n      currentImg,\n      imgStyle,\n      mode,\n      handleActions,\n      prev,\n      next,\n      hide,\n      toggleMode,\n      handleImgLoad,\n      handleImgError,\n      handleMouseDown,\n    }\n  },\n})\n</script>\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,137 @@
+import { createElementVNode, resolveComponent, openBlock, createBlock, Transition, withCtx, normalizeStyle, withModifiers, createCommentVNode, createVNode, createElementBlock, Fragment, normalizeClass, resolveDynamicComponent, renderList, withDirectives, vShow, renderSlot } from 'vue';
+
+const _hoisted_1 = { class: "el-image-viewer__btn el-image-viewer__actions" };
+const _hoisted_2 = { class: "el-image-viewer__actions__inner" };
+const _hoisted_3 = /* @__PURE__ */ createElementVNode("i", { class: "el-image-viewer__actions__divider" }, null, -1);
+const _hoisted_4 = /* @__PURE__ */ createElementVNode("i", { class: "el-image-viewer__actions__divider" }, null, -1);
+const _hoisted_5 = { class: "el-image-viewer__canvas" };
+const _hoisted_6 = ["src"];
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_close = resolveComponent("close");
+  const _component_el_icon = resolveComponent("el-icon");
+  const _component_arrow_left = resolveComponent("arrow-left");
+  const _component_arrow_right = resolveComponent("arrow-right");
+  const _component_zoom_out = resolveComponent("zoom-out");
+  const _component_zoom_in = resolveComponent("zoom-in");
+  const _component_refresh_left = resolveComponent("refresh-left");
+  const _component_refresh_right = resolveComponent("refresh-right");
+  return openBlock(), createBlock(Transition, { name: "viewer-fade" }, {
+    default: withCtx(() => [
+      createElementVNode("div", {
+        ref: "wrapper",
+        tabindex: -1,
+        class: "el-image-viewer__wrapper",
+        style: normalizeStyle({ zIndex: _ctx.zIndex })
+      }, [
+        createElementVNode("div", {
+          class: "el-image-viewer__mask",
+          onClick: _cache[0] || (_cache[0] = withModifiers(($event) => _ctx.hideOnClickModal && _ctx.hide(), ["self"]))
+        }),
+        createCommentVNode(" CLOSE "),
+        createElementVNode("span", {
+          class: "el-image-viewer__btn el-image-viewer__close",
+          onClick: _cache[1] || (_cache[1] = (...args) => _ctx.hide && _ctx.hide(...args))
+        }, [
+          createVNode(_component_el_icon, null, {
+            default: withCtx(() => [
+              createVNode(_component_close)
+            ]),
+            _: 1
+          })
+        ]),
+        createCommentVNode(" ARROW "),
+        !_ctx.isSingle ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+          createElementVNode("span", {
+            class: normalizeClass(["el-image-viewer__btn el-image-viewer__prev", { "is-disabled": !_ctx.infinite && _ctx.isFirst }]),
+            onClick: _cache[2] || (_cache[2] = (...args) => _ctx.prev && _ctx.prev(...args))
+          }, [
+            createVNode(_component_el_icon, null, {
+              default: withCtx(() => [
+                createVNode(_component_arrow_left)
+              ]),
+              _: 1
+            })
+          ], 2),
+          createElementVNode("span", {
+            class: normalizeClass(["el-image-viewer__btn el-image-viewer__next", { "is-disabled": !_ctx.infinite && _ctx.isLast }]),
+            onClick: _cache[3] || (_cache[3] = (...args) => _ctx.next && _ctx.next(...args))
+          }, [
+            createVNode(_component_el_icon, null, {
+              default: withCtx(() => [
+                createVNode(_component_arrow_right)
+              ]),
+              _: 1
+            })
+          ], 2)
+        ], 64)) : createCommentVNode("v-if", true),
+        createCommentVNode(" ACTIONS "),
+        createElementVNode("div", _hoisted_1, [
+          createElementVNode("div", _hoisted_2, [
+            createVNode(_component_el_icon, {
+              onClick: _cache[4] || (_cache[4] = ($event) => _ctx.handleActions("zoomOut"))
+            }, {
+              default: withCtx(() => [
+                createVNode(_component_zoom_out)
+              ]),
+              _: 1
+            }),
+            createVNode(_component_el_icon, {
+              onClick: _cache[5] || (_cache[5] = ($event) => _ctx.handleActions("zoomIn"))
+            }, {
+              default: withCtx(() => [
+                createVNode(_component_zoom_in)
+              ]),
+              _: 1
+            }),
+            _hoisted_3,
+            createVNode(_component_el_icon, { onClick: _ctx.toggleMode }, {
+              default: withCtx(() => [
+                (openBlock(), createBlock(resolveDynamicComponent(_ctx.mode.icon)))
+              ]),
+              _: 1
+            }, 8, ["onClick"]),
+            _hoisted_4,
+            createVNode(_component_el_icon, {
+              onClick: _cache[6] || (_cache[6] = ($event) => _ctx.handleActions("anticlockwise"))
+            }, {
+              default: withCtx(() => [
+                createVNode(_component_refresh_left)
+              ]),
+              _: 1
+            }),
+            createVNode(_component_el_icon, {
+              onClick: _cache[7] || (_cache[7] = ($event) => _ctx.handleActions("clockwise"))
+            }, {
+              default: withCtx(() => [
+                createVNode(_component_refresh_right)
+              ]),
+              _: 1
+            })
+          ])
+        ]),
+        createCommentVNode(" CANVAS "),
+        createElementVNode("div", _hoisted_5, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.urlList, (url, i) => {
+            return withDirectives((openBlock(), createElementBlock("img", {
+              ref: "img",
+              key: url,
+              src: url,
+              style: normalizeStyle(_ctx.imgStyle),
+              class: "el-image-viewer__img",
+              onLoad: _cache[8] || (_cache[8] = (...args) => _ctx.handleImgLoad && _ctx.handleImgLoad(...args)),
+              onError: _cache[9] || (_cache[9] = (...args) => _ctx.handleImgError && _ctx.handleImgError(...args)),
+              onMousedown: _cache[10] || (_cache[10] = (...args) => _ctx.handleMouseDown && _ctx.handleMouseDown(...args))
+            }, null, 44, _hoisted_6)), [
+              [vShow, i === _ctx.index]
+            ]);
+          }), 128))
+        ]),
+        renderSlot(_ctx.$slots, "default")
+      ], 4)
+    ]),
+    _: 3
+  });
+}
+
+export { render };
+//# sourceMappingURL=image-viewer.vue_vue_type_template_id_4b22ad85_lang.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"image-viewer.vue_vue_type_template_id_4b22ad85_lang.mjs","sources":["../../../../../../packages/components/image-viewer/src/image-viewer.vue?vue&type=template&id=4b22ad85&lang.js"],"sourcesContent":["<template>\n  <transition name=\"viewer-fade\">\n    <div\n      ref=\"wrapper\"\n      :tabindex=\"-1\"\n      class=\"el-image-viewer__wrapper\"\n      :style=\"{ zIndex }\"\n    >\n      <div\n        class=\"el-image-viewer__mask\"\n        @click.self=\"hideOnClickModal && hide()\"\n      />\n\n      <!-- CLOSE -->\n      <span class=\"el-image-viewer__btn el-image-viewer__close\" @click=\"hide\">\n        <el-icon><close /></el-icon>\n      </span>\n\n      <!-- ARROW -->\n      <template v-if=\"!isSingle\">\n        <span\n          class=\"el-image-viewer__btn el-image-viewer__prev\"\n          :class=\"{ 'is-disabled': !infinite && isFirst }\"\n          @click=\"prev\"\n        >\n          <el-icon><arrow-left /></el-icon>\n        </span>\n        <span\n          class=\"el-image-viewer__btn el-image-viewer__next\"\n          :class=\"{ 'is-disabled': !infinite && isLast }\"\n          @click=\"next\"\n        >\n          <el-icon><arrow-right /></el-icon>\n        </span>\n      </template>\n      <!-- ACTIONS -->\n      <div class=\"el-image-viewer__btn el-image-viewer__actions\">\n        <div class=\"el-image-viewer__actions__inner\">\n          <el-icon @click=\"handleActions('zoomOut')\">\n            <zoom-out />\n          </el-icon>\n          <el-icon @click=\"handleActions('zoomIn')\">\n            <zoom-in />\n          </el-icon>\n          <i class=\"el-image-viewer__actions__divider\"></i>\n          <el-icon @click=\"toggleMode\">\n            <component :is=\"mode.icon\" />\n          </el-icon>\n          <i class=\"el-image-viewer__actions__divider\"></i>\n          <el-icon @click=\"handleActions('anticlockwise')\">\n            <refresh-left />\n          </el-icon>\n          <el-icon @click=\"handleActions('clockwise')\">\n            <refresh-right />\n          </el-icon>\n        </div>\n      </div>\n      <!-- CANVAS -->\n      <div class=\"el-image-viewer__canvas\">\n        <img\n          v-for=\"(url, i) in urlList\"\n          v-show=\"i === index\"\n          ref=\"img\"\n          :key=\"url\"\n          :src=\"url\"\n          :style=\"imgStyle\"\n          class=\"el-image-viewer__img\"\n          @load=\"handleImgLoad\"\n          @error=\"handleImgError\"\n          @mousedown=\"handleMouseDown\"\n        />\n      </div>\n      <slot />\n    </div>\n  </transition>\n</template>\n\n<script lang=\"ts\">\nimport {\n  defineComponent,\n  computed,\n  ref,\n  onMounted,\n  watch,\n  nextTick,\n  effectScope,\n  markRaw,\n} from 'vue'\nimport { useEventListener } from '@vueuse/core'\nimport ElIcon from '@element-plus/components/icon'\nimport { useLocale } from '@element-plus/hooks'\nimport { EVENT_CODE } from '@element-plus/utils/aria'\nimport { rafThrottle, isFirefox } from '@element-plus/utils/util'\nimport {\n  Close,\n  ArrowLeft,\n  ArrowRight,\n  ZoomOut,\n  ZoomIn,\n  RefreshLeft,\n  RefreshRight,\n  FullScreen,\n  ScaleToOriginal,\n} from '@element-plus/icons-vue'\nimport { imageViewerProps, imageViewerEmits } from './image-viewer'\n\nimport type { CSSProperties } from 'vue'\n\nconst Mode = {\n  CONTAIN: {\n    name: 'contain',\n    icon: markRaw(FullScreen),\n  },\n  ORIGINAL: {\n    name: 'original',\n    icon: markRaw(ScaleToOriginal),\n  },\n}\n\nconst mousewheelEventName = isFirefox() ? 'DOMMouseScroll' : 'mousewheel'\nexport type ImageViewerAction =\n  | 'zoomIn'\n  | 'zoomOut'\n  | 'clockwise'\n  | 'anticlockwise'\n\nexport default defineComponent({\n  name: 'ElImageViewer',\n  components: {\n    ElIcon,\n    Close,\n    ArrowLeft,\n    ArrowRight,\n    ZoomOut,\n    ZoomIn,\n    RefreshLeft,\n    RefreshRight,\n  },\n  props: imageViewerProps,\n  emits: imageViewerEmits,\n\n  setup(props, { emit }) {\n    const { t } = useLocale()\n    const wrapper = ref<HTMLDivElement>()\n    const img = ref<HTMLImageElement>()\n\n    const scopeEventListener = effectScope()\n\n    const loading = ref(true)\n    const index = ref(props.initialIndex)\n    const mode = ref(Mode.CONTAIN)\n    const transform = ref({\n      scale: 1,\n      deg: 0,\n      offsetX: 0,\n      offsetY: 0,\n      enableTransition: false,\n    })\n\n    const isSingle = computed(() => {\n      const { urlList } = props\n      return urlList.length <= 1\n    })\n\n    const isFirst = computed(() => {\n      return index.value === 0\n    })\n\n    const isLast = computed(() => {\n      return index.value === props.urlList.length - 1\n    })\n\n    const currentImg = computed(() => {\n      return props.urlList[index.value]\n    })\n\n    const imgStyle = computed(() => {\n      const { scale, deg, offsetX, offsetY, enableTransition } = transform.value\n      const style: CSSProperties = {\n        transform: `scale(${scale}) rotate(${deg}deg)`,\n        transition: enableTransition ? 'transform .3s' : '',\n        marginLeft: `${offsetX}px`,\n        marginTop: `${offsetY}px`,\n      }\n      if (mode.value.name === Mode.CONTAIN.name) {\n        style.maxWidth = style.maxHeight = '100%'\n      }\n      return style\n    })\n\n    function hide() {\n      unregisterEventListener()\n      emit('close')\n    }\n\n    function registerEventListener() {\n      const keydownHandler = rafThrottle((e: KeyboardEvent) => {\n        switch (e.code) {\n          // ESC\n          case EVENT_CODE.esc:\n            hide()\n            break\n          // SPACE\n          case EVENT_CODE.space:\n            toggleMode()\n            break\n          // LEFT_ARROW\n          case EVENT_CODE.left:\n            prev()\n            break\n          // UP_ARROW\n          case EVENT_CODE.up:\n            handleActions('zoomIn')\n            break\n          // RIGHT_ARROW\n          case EVENT_CODE.right:\n            next()\n            break\n          // DOWN_ARROW\n          case EVENT_CODE.down:\n            handleActions('zoomOut')\n            break\n        }\n      })\n      const mousewheelHandler = rafThrottle(\n        (e: WheelEvent | any /* TODO: wheelDelta is deprecated */) => {\n          const delta = e.wheelDelta ? e.wheelDelta : -e.detail\n          if (delta > 0) {\n            handleActions('zoomIn', {\n              zoomRate: 0.015,\n              enableTransition: false,\n            })\n          } else {\n            handleActions('zoomOut', {\n              zoomRate: 0.015,\n              enableTransition: false,\n            })\n          }\n        }\n      )\n\n      scopeEventListener.run(() => {\n        useEventListener(document, 'keydown', keydownHandler)\n        useEventListener(document, mousewheelEventName, mousewheelHandler)\n      })\n    }\n\n    function unregisterEventListener() {\n      scopeEventListener.stop()\n    }\n\n    function handleImgLoad() {\n      loading.value = false\n    }\n\n    function handleImgError(e: Event) {\n      loading.value = false\n      ;(e.target as HTMLImageElement).alt = t('el.image.error')\n    }\n\n    function handleMouseDown(e: MouseEvent) {\n      if (loading.value || e.button !== 0 || !wrapper.value) return\n\n      const { offsetX, offsetY } = transform.value\n      const startX = e.pageX\n      const startY = e.pageY\n\n      const divLeft = wrapper.value.clientLeft\n      const divRight = wrapper.value.clientLeft + wrapper.value.clientWidth\n      const divTop = wrapper.value.clientTop\n      const divBottom = wrapper.value.clientTop + wrapper.value.clientHeight\n\n      const dragHandler = rafThrottle((ev: MouseEvent) => {\n        transform.value = {\n          ...transform.value,\n          offsetX: offsetX + ev.pageX - startX,\n          offsetY: offsetY + ev.pageY - startY,\n        }\n      })\n      const removeMousemove = useEventListener(\n        document,\n        'mousemove',\n        dragHandler\n      )\n      useEventListener(document, 'mouseup', (evt) => {\n        const mouseX = evt.pageX\n        const mouseY = evt.pageY\n        if (\n          mouseX < divLeft ||\n          mouseX > divRight ||\n          mouseY < divTop ||\n          mouseY > divBottom\n        ) {\n          reset()\n        }\n        removeMousemove()\n      })\n\n      e.preventDefault()\n    }\n\n    function reset() {\n      transform.value = {\n        scale: 1,\n        deg: 0,\n        offsetX: 0,\n        offsetY: 0,\n        enableTransition: false,\n      }\n    }\n\n    function toggleMode() {\n      if (loading.value) return\n\n      const modeNames = Object.keys(Mode)\n      const modeValues = Object.values(Mode)\n      const currentMode = mode.value.name\n      const index = modeValues.findIndex((i) => i.name === currentMode)\n      const nextIndex = (index + 1) % modeNames.length\n      mode.value = Mode[modeNames[nextIndex]]\n      reset()\n    }\n\n    function prev() {\n      if (isFirst.value && !props.infinite) return\n      const len = props.urlList.length\n      index.value = (index.value - 1 + len) % len\n    }\n\n    function next() {\n      if (isLast.value && !props.infinite) return\n      const len = props.urlList.length\n      index.value = (index.value + 1) % len\n    }\n\n    function handleActions(action: ImageViewerAction, options = {}) {\n      if (loading.value) return\n      const { zoomRate, rotateDeg, enableTransition } = {\n        zoomRate: 0.2,\n        rotateDeg: 90,\n        enableTransition: true,\n        ...options,\n      }\n      switch (action) {\n        case 'zoomOut':\n          if (transform.value.scale > 0.2) {\n            transform.value.scale = parseFloat(\n              (transform.value.scale - zoomRate).toFixed(3)\n            )\n          }\n          break\n        case 'zoomIn':\n          transform.value.scale = parseFloat(\n            (transform.value.scale + zoomRate).toFixed(3)\n          )\n          break\n        case 'clockwise':\n          transform.value.deg += rotateDeg\n          break\n        case 'anticlockwise':\n          transform.value.deg -= rotateDeg\n          break\n      }\n      transform.value.enableTransition = enableTransition\n    }\n\n    watch(currentImg, () => {\n      nextTick(() => {\n        const $img = img.value\n        if (!$img?.complete) {\n          loading.value = true\n        }\n      })\n    })\n\n    watch(index, (val) => {\n      reset()\n      emit('switch', val)\n    })\n\n    onMounted(() => {\n      registerEventListener()\n      // add tabindex then wrapper can be focusable via Javascript\n      // focus wrapper so arrow key can't cause inner scroll behavior underneath\n      wrapper.value?.focus?.()\n    })\n\n    return {\n      index,\n      wrapper,\n      img,\n      isSingle,\n      isFirst,\n      isLast,\n      currentImg,\n      imgStyle,\n      mode,\n      handleActions,\n      prev,\n      next,\n      hide,\n      toggleMode,\n      handleImgLoad,\n      handleImgError,\n      handleMouseDown,\n    }\n  },\n})\n</script>\n"],"names":["_createBlock","_createElementVNode","_createCommentVNode","_createVNode","_createElementBlock","_renderSlot"],"mappings":";;qBAoCW,OAAM;qBACJ,OAAM;6DAON,OAAM;6DAIN,OAAM;qBAUR,OAAM;;;;;;;;;;;sBAzDfA,0BAAY,MAAK;qBACf;MAAAC;QACE,KAAI;AAAA,QACH,UAAU;AAAA,QACX,OAAM;AAAA,QACL,gCAAS;;QAEVA;UACE,OAAM;AAAA,UACL,6DAAY,yBAAoB;;QAGnCC;QACAD;UAAM,OAAM;AAAA,UAA+C,gDAAO;;UAChEE;6BAAS;cAAAA,YAAS;AAAA;AAAA;;;QAGpBD;SACiB,8BAAjBE;UACEH;YACE,uBAAM,gEACoB,iBAAY;YACrC,gDAAO;;YAERE;+BAAS;gBAAAA,YAAc;AAAA;AAAA;;;UAEzBF;YACE,uBAAM,gEACoB,iBAAY;YACrC,gDAAO;;YAERE;+BAAS;gBAAAA,YAAe;AAAA;AAAA;;;;QAG5BD;QACAD,0BAAA;UACEA,0BAAA;YACEE;cAAU,+CAAO;;+BACf;gBAAAA;;;;YAEFA;cAAU,+CAAO;;+BACf;gBAAAA;;;;YAEF;AAAA,YACAA,kCAAU,SAAO;+BACf;8BAAAH,oCAAgB,UAAK;AAAA;AAAA;;YAEvB;AAAA,YACAG;cAAU,+CAAO;;+BACf;gBAAAA;;;;YAEFA;cAAU,+CAAO;;+BACf;gBAAAA;;;;;;QAIND;QACAD,0BAAA;4BACEG,8CACqB,eAAX,KAAK;gDADfA;cAGE,KAAI;AAAA,cACH,KAAK;AAAA,cACL,KAAK;AAAA,cACL,sBAAO;cACR,OAAM;AAAA,cACL,+CAAM;cACN,gDAAO;cACP,sDAAW;;sBARJ,MAAM;;;;QAWlBC;;;;;;;;;"}

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

@@ -1,6 +1,6 @@
-import script from './image-viewer.vue_vue&type=script&lang.mjs';
-export { default } from './image-viewer.vue_vue&type=script&lang.mjs';
-import { render } from './image-viewer.vue_vue&type=template&id=4b22ad85&lang.mjs';
+import script from './image-viewer.vue_vue_type_script_lang.mjs';
+export { default } from './image-viewer.vue_vue_type_script_lang.mjs';
+import { render } from './image-viewer.vue_vue_type_template_id_4b22ad85_lang.mjs';
 
 script.render = render;
 script.__file = "packages/components/image-viewer/src/image-viewer.vue";

package/es/components/index.mjs

@@ -65,39 +65,42 @@ export { ElTreeV2 } from './tree-v2/index.mjs';
 export { ElUpload } from './upload/index.mjs';
 import './virtual-list/index.mjs';
 export { ElInfiniteScroll } from './infinite-scroll/index.mjs';
-export { default as ElLoading, ElLoadingDirective, ElLoadingService } from './loading/index.mjs';
+export { ElLoading, ElLoadingDirective, ElLoadingService } from './loading/index.mjs';
 export { ElMessage } from './message/index.mjs';
 export { ElMessageBox } from './message-box/index.mjs';
 export { ElNotification } from './notification/index.mjs';
 export { ElPopover, ElPopoverDirective } from './popover/index.mjs';
-export { affixEmits, affixProps } from './affix/src/affix2.mjs';
-export { alertEmits, alertProps } from './alert/src/alert2.mjs';
+export { affixEmits, affixProps } from './affix/src/affix.mjs';
+export { alertEmits, alertProps } from './alert/src/alert.mjs';
 export { avatarEmits, avatarProps } from './avatar/src/avatar.mjs';
 export { backtopEmits, backtopProps } from './backtop/src/backtop.mjs';
-export { badgeProps } from './badge/src/badge2.mjs';
-export { breadcrumbProps } from './breadcrumb/src/breadcrumb2.mjs';
+export { badgeProps } from './badge/src/badge.mjs';
+export { breadcrumbProps } from './breadcrumb/src/breadcrumb.mjs';
 export { breadcrumbItemProps } from './breadcrumb/src/breadcrumb-item.mjs';
 export { buttonEmits, buttonNativeType, buttonProps, buttonSize, buttonType } from './button/src/button.mjs';
+export { calendarEmits, calendarProps } from './calendar/src/calendar.mjs';
 export { cardProps } from './card/src/card.mjs';
 export { CASCADER_PANEL_INJECTION_KEY, ExpandTrigger } from './cascader-panel/src/types.mjs';
 export { CommonProps, DefaultProps, useCascaderConfig } from './cascader-panel/src/config.mjs';
 export { colProps } from './col/src/col.mjs';
+export { configProviderProps } from './config-provider/src/config-provider.mjs';
 export { useDialog } from './dialog/src/use-dialog.mjs';
 export { dialogEmits, dialogProps } from './dialog/src/dialog.mjs';
 export { dividerProps } from './divider/src/divider.mjs';
+export { drawerEmits, drawerProps } from './drawer/src/drawer.mjs';
 export { emptyProps } from './empty/src/empty.mjs';
 export { iconProps } from './icon/src/icon.mjs';
 export { imageEmits, imageProps } from './image/src/image.mjs';
 export { imageViewerEmits, imageViewerProps } from './image-viewer/src/image-viewer.mjs';
 export { inputEmits, inputProps } from './input/src/input.mjs';
-export { inputNumberEmits, inputNumberProps } from './input-number/src/input-number2.mjs';
-export { linkEmits, linkProps } from './link/src/link2.mjs';
+export { inputNumberEmits, inputNumberProps } from './input-number/src/input-number.mjs';
+export { linkEmits, linkProps } from './link/src/link.mjs';
 export { menuEmits, menuProps } from './menu/src/menu.mjs';
 export { menuItemEmits, menuItemProps } from './menu/src/menu-item.mjs';
 export { menuItemGroupProps } from './menu/src/menu-item-group.mjs';
 export { subMenuProps } from './menu/src/sub-menu.mjs';
 export { overlayEmits, overlayProps } from './overlay/src/overlay.mjs';
-export { pageHeaderEmits, pageHeaderProps } from './page-header/src/page-header2.mjs';
+export { pageHeaderEmits, pageHeaderProps } from './page-header/src/page-header.mjs';
 export { paginationEmits, paginationProps } from './pagination/src/pagination.mjs';
 export { popconfirmEmits, popconfirmProps } from './popconfirm/src/popconfirm.mjs';
 export { Effect, default as popperDefaultProps } from './popper/src/use-popper/defaults.mjs';
@@ -105,23 +108,39 @@ export { default as usePopper } from './popper/src/use-popper/index.mjs';
 export { default as renderPopper } from './popper/src/renderers/popper.mjs';
 export { default as renderTrigger } from './popper/src/renderers/trigger.mjs';
 export { default as renderArrow } from './popper/src/renderers/arrow.mjs';
+export { progressProps } from './progress/src/progress.mjs';
+export { radioEmits, radioProps, radioPropsBase, useRadio } from './radio/src/radio.mjs';
+export { radioGroupEmits, radioGroupProps } from './radio/src/radio-group.mjs';
+export { radioButtonProps } from './radio/src/radio-button.mjs';
+export { rateEmits, rateProps } from './rate/src/rate.mjs';
+export { IconComponentMap, IconMap, resultProps } from './result/src/result.mjs';
+export { rowProps } from './row/src/row.mjs';
 export { BAR_MAP, renderThumbStyle } from './scrollbar/src/util.mjs';
+export { scrollbarEmits, scrollbarProps } from './scrollbar/src/scrollbar.mjs';
+export { barProps } from './scrollbar/src/bar.mjs';
 export { selectGroupKey, selectKey } from './select/src/token.mjs';
 export { selectV2InjectionKey } from './select-v2/src/token.mjs';
+export { skeletonProps } from './skeleton/src/skeleton.mjs';
+export { skeletonItemProps } from './skeleton/src/skeleton-item.mjs';
 export { spaceProps } from './space/src/space.mjs';
 export { useSpace } from './space/src/use-space.mjs';
-export { tagEmits, tagProps } from './tag/src/tag2.mjs';
+export { switchEmits, switchProps } from './switch/src/switch.mjs';
+export { tabsEmits, tabsProps } from './tabs/src/tabs.mjs';
+export { tabBar } from './tabs/src/tab-bar.mjs';
+export { tabNavProps } from './tabs/src/tab-nav.mjs';
+export { tabPaneProps } from './tabs/src/tab-pane.mjs';
+export { tagEmits, tagProps } from './tag/src/tag.mjs';
 export { extractDateFormat, extractTimeFormat, rangeArr } from './time-picker/src/common/date-utils.mjs';
 export { DEFAULT_FORMATS_DATE, DEFAULT_FORMATS_DATEPICKER, DEFAULT_FORMATS_TIME } from './time-picker/src/common/constant.mjs';
 export { timePickerDefaultProps } from './time-picker/src/common/props.mjs';
-export { default as CommonPicker } from './time-picker/src/common/picker.vue_vue&type=script&lang.mjs';
-export { default as TimePickPanel } from './time-picker/src/time-picker-com/panel-time-pick.vue_vue&type=script&lang.mjs';
+export { default as CommonPicker } from './time-picker/src/common/picker.vue_vue_type_script_lang.mjs';
+export { default as TimePickPanel } from './time-picker/src/time-picker-com/panel-time-pick.vue_vue_type_script_lang.mjs';
 export { CHANGE_EVENT } from '../utils/constants.mjs';
 export { default as FixedSizeList } from './virtual-list/src/components/fixed-size-list.mjs';
 export { default as DynamicSizeList } from './virtual-list/src/components/dynamic-size-list.mjs';
 export { default as FixedSizeGrid } from './virtual-list/src/components/fixed-size-grid.mjs';
 export { default as DynamicSizeGrid } from './virtual-list/src/components/dynamic-size-grid.mjs';
 export { virtualizedGridProps, virtualizedListProps, virtualizedProps, virtualizedScrollbarProps } from './virtual-list/src/props.mjs';
-export { messageEmits, messageProps, messageTypes } from './message/src/message2.mjs';
+export { messageEmits, messageProps, messageTypes } from './message/src/message.mjs';
 export { notificationEmits, notificationProps, notificationTypes } from './notification/src/notification.mjs';
 //# sourceMappingURL=index.mjs.map

package/es/components/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}