@element-plus/nightly 0.0.20220121 → 0.0.20220122

package/es/components/form/src/form.vue_vue_type_script_lang.mjs

@@ -1,203 +0,0 @@
-import { ref, computed, defineComponent, watch, reactive, toRefs, provide } from 'vue';
-import '../../../tokens/index.mjs';
-import { debugWarn } from '../../../utils/error.mjs';
-import '../../../hooks/index.mjs';
-import { useSize } from '../../../hooks/use-common-props/index.mjs';
-import { elFormKey } from '../../../tokens/form.mjs';
-
-function useFormLabelWidth() {
-  const potentialLabelWidthArr = ref([]);
-  const autoLabelWidth = computed(() => {
-    if (!potentialLabelWidthArr.value.length)
-      return "0";
-    const max = Math.max(...potentialLabelWidthArr.value);
-    return max ? `${max}px` : "";
-  });
-  function getLabelWidthIndex(width) {
-    const index = potentialLabelWidthArr.value.indexOf(width);
-    if (index === -1) {
-      debugWarn("Form", `unexpected width ${width}`);
-    }
-    return index;
-  }
-  function registerLabelWidth(val, oldVal) {
-    if (val && oldVal) {
-      const index = getLabelWidthIndex(oldVal);
-      potentialLabelWidthArr.value.splice(index, 1, val);
-    } else if (val) {
-      potentialLabelWidthArr.value.push(val);
-    }
-  }
-  function deregisterLabelWidth(val) {
-    const index = getLabelWidthIndex(val);
-    index > -1 && potentialLabelWidthArr.value.splice(index, 1);
-  }
-  return {
-    autoLabelWidth,
-    registerLabelWidth,
-    deregisterLabelWidth
-  };
-}
-var script = defineComponent({
-  name: "ElForm",
-  props: {
-    model: Object,
-    rules: Object,
-    labelPosition: String,
-    labelWidth: {
-      type: [String, Number],
-      default: ""
-    },
-    labelSuffix: {
-      type: String,
-      default: ""
-    },
-    inline: Boolean,
-    inlineMessage: Boolean,
-    statusIcon: Boolean,
-    showMessage: {
-      type: Boolean,
-      default: true
-    },
-    size: String,
-    disabled: Boolean,
-    validateOnRuleChange: {
-      type: Boolean,
-      default: true
-    },
-    hideRequiredAsterisk: {
-      type: Boolean,
-      default: false
-    },
-    scrollToError: Boolean
-  },
-  emits: ["validate"],
-  setup(props, { emit }) {
-    const fields = [];
-    watch(() => props.rules, () => {
-      fields.forEach((field) => {
-        field.evaluateValidationEnabled();
-      });
-      if (props.validateOnRuleChange) {
-        validate(() => ({}));
-      }
-    });
-    const formSize = useSize();
-    const prefix = "el-form";
-    const formKls = computed(() => {
-      const { labelPosition, inline } = props;
-      return [
-        prefix,
-        `${prefix}--${formSize.value}`,
-        labelPosition ? `${prefix}--label-${labelPosition}` : "",
-        inline ? `${prefix}--inline` : ""
-      ];
-    });
-    const addField = (field) => {
-      if (field) {
-        fields.push(field);
-      }
-    };
-    const removeField = (field) => {
-      if (field.prop) {
-        fields.splice(fields.indexOf(field), 1);
-      }
-    };
-    const resetFields = () => {
-      if (!props.model) {
-        debugWarn("Form", "model is required for resetFields to work.");
-        return;
-      }
-      fields.forEach((field) => {
-        field.resetField();
-      });
-    };
-    const clearValidate = (props2 = []) => {
-      const fds = props2.length ? typeof props2 === "string" ? fields.filter((field) => props2 === field.prop) : fields.filter((field) => props2.indexOf(field.prop) > -1) : fields;
-      fds.forEach((field) => {
-        field.clearValidate();
-      });
-    };
-    const validate = (callback) => {
-      if (!props.model) {
-        debugWarn("Form", "model is required for validate to work!");
-        return;
-      }
-      let promise;
-      if (typeof callback !== "function") {
-        promise = new Promise((resolve, reject) => {
-          callback = function(valid2, invalidFields2) {
-            if (valid2) {
-              resolve(true);
-            } else {
-              reject(invalidFields2);
-            }
-          };
-        });
-      }
-      if (fields.length === 0) {
-        callback(true);
-      }
-      let valid = true;
-      let count = 0;
-      let invalidFields = {};
-      let firstInvalidFields;
-      for (const field of fields) {
-        field.validate("", (message, field2) => {
-          if (message) {
-            valid = false;
-            firstInvalidFields || (firstInvalidFields = field2);
-          }
-          invalidFields = { ...invalidFields, ...field2 };
-          if (++count === fields.length) {
-            callback(valid, invalidFields);
-          }
-        });
-      }
-      if (!valid && props.scrollToError) {
-        scrollToField(Object.keys(firstInvalidFields)[0]);
-      }
-      return promise;
-    };
-    const validateField = (props2, cb) => {
-      props2 = [].concat(props2);
-      const fds = fields.filter((field) => props2.indexOf(field.prop) !== -1);
-      if (!fields.length) {
-        debugWarn("Form", "please pass correct props!");
-        return;
-      }
-      fds.forEach((field) => {
-        field.validate("", cb);
-      });
-    };
-    const scrollToField = (prop) => {
-      fields.forEach((item) => {
-        if (item.prop === prop) {
-          item.$el.scrollIntoView();
-        }
-      });
-    };
-    const elForm = reactive({
-      ...toRefs(props),
-      resetFields,
-      clearValidate,
-      validateField,
-      emit,
-      addField,
-      removeField,
-      ...useFormLabelWidth()
-    });
-    provide(elFormKey, elForm);
-    return {
-      formKls,
-      validate,
-      resetFields,
-      clearValidate,
-      validateField,
-      scrollToField
-    };
-  }
-});
-
-export { script as default };
-//# sourceMappingURL=form.vue_vue_type_script_lang.mjs.map

package/es/components/form/src/form.vue_vue_type_script_lang.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"form.vue_vue_type_script_lang.mjs","sources":["../../../../../../packages/components/form/src/form.vue"],"sourcesContent":["<template>\n  <form :class=\"formKls\">\n    <slot></slot>\n  </form>\n</template>\n\n<script lang=\"ts\">\nimport {\n  computed,\n  defineComponent,\n  provide,\n  reactive,\n  ref,\n  toRefs,\n  watch,\n} from 'vue'\nimport { elFormKey } from '@element-plus/tokens'\nimport { debugWarn } from '@element-plus/utils/error'\nimport { useSize } from '@element-plus/hooks'\nimport type { ValidateFieldsError } from 'async-validator'\n\nimport type { PropType } from 'vue'\nimport type { ComponentSize } from '@element-plus/utils/types'\nimport type { FormRulesMap } from './form.type'\nimport type {\n  ElFormItemContext as FormItemCtx,\n  ValidateFieldCallback,\n} from '@element-plus/tokens'\n\nfunction useFormLabelWidth() {\n  const potentialLabelWidthArr = ref([])\n  const autoLabelWidth = computed(() => {\n    if (!potentialLabelWidthArr.value.length) return '0'\n    const max = Math.max(...potentialLabelWidthArr.value)\n    return max ? `${max}px` : ''\n  })\n\n  function getLabelWidthIndex(width: number) {\n    const index = potentialLabelWidthArr.value.indexOf(width)\n    if (index === -1) {\n      debugWarn('Form', `unexpected width ${width}`)\n    }\n    return index\n  }\n\n  function registerLabelWidth(val: number, oldVal: number) {\n    if (val && oldVal) {\n      const index = getLabelWidthIndex(oldVal)\n      potentialLabelWidthArr.value.splice(index, 1, val)\n    } else if (val) {\n      potentialLabelWidthArr.value.push(val)\n    }\n  }\n\n  function deregisterLabelWidth(val: number) {\n    const index = getLabelWidthIndex(val)\n    index > -1 && potentialLabelWidthArr.value.splice(index, 1)\n  }\n\n  return {\n    autoLabelWidth,\n    registerLabelWidth,\n    deregisterLabelWidth,\n  }\n}\n\nexport interface Callback {\n  (isValid?: boolean, invalidFields?: ValidateFieldsError): void\n}\n\nexport default defineComponent({\n  name: 'ElForm',\n  props: {\n    model: Object,\n    rules: Object as PropType<FormRulesMap>,\n    labelPosition: String,\n    labelWidth: {\n      type: [String, Number],\n      default: '',\n    },\n    labelSuffix: {\n      type: String,\n      default: '',\n    },\n    inline: Boolean,\n    inlineMessage: Boolean,\n    statusIcon: Boolean,\n    showMessage: {\n      type: Boolean,\n      default: true,\n    },\n    size: String as PropType<ComponentSize>,\n    disabled: Boolean,\n    validateOnRuleChange: {\n      type: Boolean,\n      default: true,\n    },\n    hideRequiredAsterisk: {\n      type: Boolean,\n      default: false,\n    },\n    scrollToError: Boolean,\n  },\n  emits: ['validate'],\n  setup(props, { emit }) {\n    const fields: FormItemCtx[] = []\n\n    watch(\n      () => props.rules,\n      () => {\n        fields.forEach((field) => {\n          field.evaluateValidationEnabled()\n        })\n\n        if (props.validateOnRuleChange) {\n          validate(() => ({}))\n        }\n      }\n    )\n\n    const formSize = useSize()\n    const prefix = 'el-form'\n    const formKls = computed(() => {\n      const { labelPosition, inline } = props\n      return [\n        prefix,\n        `${prefix}--${formSize.value}`,\n        labelPosition ? `${prefix}--label-${labelPosition}` : '',\n        inline ? `${prefix}--inline` : '',\n      ]\n    })\n\n    const addField = (field: FormItemCtx) => {\n      if (field) {\n        fields.push(field)\n      }\n    }\n\n    const removeField = (field: FormItemCtx) => {\n      if (field.prop) {\n        fields.splice(fields.indexOf(field), 1)\n      }\n    }\n\n    const resetFields = () => {\n      if (!props.model) {\n        debugWarn('Form', 'model is required for resetFields to work.')\n        return\n      }\n      fields.forEach((field) => {\n        field.resetField()\n      })\n    }\n\n    const clearValidate = (props: string | string[] = []) => {\n      const fds = props.length\n        ? typeof props === 'string'\n          ? fields.filter((field) => props === field.prop)\n          : fields.filter((field) => props.indexOf(field.prop) > -1)\n        : fields\n      fds.forEach((field) => {\n        field.clearValidate()\n      })\n    }\n\n    const validate = (callback?: Callback) => {\n      if (!props.model) {\n        debugWarn('Form', 'model is required for validate to work!')\n        return\n      }\n\n      let promise: Promise<boolean> | undefined\n      // if no callback, return promise\n      if (typeof callback !== 'function') {\n        promise = new Promise((resolve, reject) => {\n          callback = function (valid, invalidFields) {\n            if (valid) {\n              resolve(true)\n            } else {\n              reject(invalidFields)\n            }\n          }\n        })\n      }\n\n      if (fields.length === 0) {\n        callback(true)\n      }\n      let valid = true\n      let count = 0\n      let invalidFields = {}\n      let firstInvalidFields\n      for (const field of fields) {\n        field.validate('', (message, field) => {\n          if (message) {\n            valid = false\n            firstInvalidFields || (firstInvalidFields = field)\n          }\n          invalidFields = { ...invalidFields, ...field }\n          if (++count === fields.length) {\n            callback(valid, invalidFields)\n          }\n        })\n      }\n      if (!valid && props.scrollToError) {\n        scrollToField(Object.keys(firstInvalidFields)[0])\n      }\n      return promise\n    }\n\n    const validateField = (\n      props: string | string[],\n      cb: ValidateFieldCallback\n    ) => {\n      props = [].concat(props)\n      const fds = fields.filter((field) => props.indexOf(field.prop) !== -1)\n      if (!fields.length) {\n        debugWarn('Form', 'please pass correct props!')\n        return\n      }\n\n      fds.forEach((field) => {\n        field.validate('', cb)\n      })\n    }\n\n    const scrollToField = (prop: string) => {\n      fields.forEach((item) => {\n        if (item.prop === prop) {\n          item.$el.scrollIntoView()\n        }\n      })\n    }\n\n    const elForm = reactive({\n      ...toRefs(props),\n      resetFields,\n      clearValidate,\n      validateField,\n      emit,\n      addField,\n      removeField,\n      ...useFormLabelWidth(),\n    })\n\n    provide(elFormKey, elForm)\n\n    return {\n      formKls,\n      validate, // export\n      resetFields,\n      clearValidate,\n      validateField,\n      scrollToField,\n    }\n  },\n})\n</script>\n"],"names":[],"mappings":"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"}

package/es/components/form/src/form.vue_vue_type_template_id_602d6cf6_lang.mjs

@@ -1,12 +0,0 @@
-import { openBlock, createElementBlock, normalizeClass, renderSlot } from 'vue';
-
-function render(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("form", {
-    class: normalizeClass(_ctx.formKls)
-  }, [
-    renderSlot(_ctx.$slots, "default")
-  ], 2);
-}
-
-export { render };
-//# sourceMappingURL=form.vue_vue_type_template_id_602d6cf6_lang.mjs.map

package/es/components/form/src/form.vue_vue_type_template_id_602d6cf6_lang.mjs.map

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

package/es/components/icon/src/icon.vue_vue_type_script_lang.mjs

@@ -1,29 +0,0 @@
-import { defineComponent, computed } from 'vue';
-import { isUndefined, addUnit } from '../../../utils/util.mjs';
-import '../../../hooks/index.mjs';
-import { iconProps } from './icon.mjs';
-import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
-
-var script = defineComponent({
-  name: "ElIcon",
-  inheritAttrs: false,
-  props: iconProps,
-  setup(props) {
-    const ns = useNamespace("icon");
-    const style = computed(() => {
-      if (!props.size && !props.color)
-        return {};
-      return {
-        fontSize: isUndefined(props.size) ? void 0 : addUnit(props.size),
-        "--color": props.color
-      };
-    });
-    return {
-      ns,
-      style
-    };
-  }
-});
-
-export { script as default };
-//# sourceMappingURL=icon.vue_vue_type_script_lang.mjs.map

package/es/components/icon/src/icon.vue_vue_type_script_lang.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"icon.vue_vue_type_script_lang.mjs","sources":["../../../../../../packages/components/icon/src/icon.vue"],"sourcesContent":["<template>\n  <i :class=\"ns.b()\" :style=\"style\" v-bind=\"$attrs\">\n    <slot></slot>\n  </i>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, computed } from 'vue'\nimport { addUnit, isUndefined } from '@element-plus/utils/util'\nimport { useNamespace } from '@element-plus/hooks'\nimport { iconProps } from './icon'\n\nimport type { CSSProperties } from 'vue'\n\nexport default defineComponent({\n  name: 'ElIcon',\n  inheritAttrs: false,\n\n  props: iconProps,\n\n  setup(props) {\n    const ns = useNamespace('icon')\n\n    const style = computed<CSSProperties>(() => {\n      if (!props.size && !props.color) return {}\n\n      return {\n        fontSize: isUndefined(props.size) ? undefined : addUnit(props.size),\n        '--color': props.color,\n      }\n    })\n\n    return {\n      ns,\n      style,\n    }\n  },\n})\n</script>\n"],"names":[],"mappings":";;;;;;AAUA,aAAe,eAAe,CAAC;;AAE/B,EAAE,YAAY,EAAE,KAAK;;AAErB,EAAE,KAAK,CAAC,KAAK,EAAE;IACX,MAAM,EAAE,GAAG;IACX,MAAM,QAAQ;;eAEH,EAAE,CAAC;;QAEV;QACA,SAAS,EAAE,KAAK,CAAC,KAAK;;KAEzB,CAAC,CAAC;WACI;;MAEL,KAAK;;;;;;;"}

package/es/components/icon/src/icon.vue_vue_type_template_id_89b755b6_lang.mjs

@@ -1,13 +0,0 @@
-import { openBlock, createElementBlock, mergeProps, renderSlot } from 'vue';
-
-function render(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("i", mergeProps({
-    class: _ctx.ns.b(),
-    style: _ctx.style
-  }, _ctx.$attrs), [
-    renderSlot(_ctx.$slots, "default")
-  ], 16);
-}
-
-export { render };
-//# sourceMappingURL=icon.vue_vue_type_template_id_89b755b6_lang.mjs.map

package/es/components/icon/src/icon.vue_vue_type_template_id_89b755b6_lang.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"icon.vue_vue_type_template_id_89b755b6_lang.mjs","sources":["../../../../../../packages/components/icon/src/icon.vue?vue&type=template&id=89b755b6&lang.js"],"sourcesContent":["<template>\n  <i :class=\"ns.b()\" :style=\"style\" v-bind=\"$attrs\">\n    <slot></slot>\n  </i>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, computed } from 'vue'\nimport { addUnit, isUndefined } from '@element-plus/utils/util'\nimport { useNamespace } from '@element-plus/hooks'\nimport { iconProps } from './icon'\n\nimport type { CSSProperties } from 'vue'\n\nexport default defineComponent({\n  name: 'ElIcon',\n  inheritAttrs: false,\n\n  props: iconProps,\n\n  setup(props) {\n    const ns = useNamespace('icon')\n\n    const style = computed<CSSProperties>(() => {\n      if (!props.size && !props.color) return {}\n\n      return {\n        fontSize: isUndefined(props.size) ? undefined : addUnit(props.size),\n        '--color': props.color,\n      }\n    })\n\n    return {\n      ns,\n      style,\n    }\n  },\n})\n</script>\n"],"names":[],"mappings":";;;;;IACM,KAAK,EAAE;SAAc;eAAuB;;;;;;"}

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

@@ -1,188 +0,0 @@
-import { defineComponent, ref, computed, nextTick, watch, onMounted } from 'vue';
-import { isString } from '@vue/shared';
-import { isClient, useThrottleFn, useEventListener } from '@vueuse/core';
-import '../../../hooks/index.mjs';
-import { ElImageViewer } from '../../image-viewer/index.mjs';
-import { isInContainer, getScrollContainer } from '../../../utils/dom.mjs';
-import { imageProps, imageEmits } from './image.mjs';
-import { useLocale } from '../../../hooks/use-locale/index.mjs';
-import { useAttrs } from '../../../hooks/use-attrs/index.mjs';
-
-const isHtmlElement = (e) => e && e.nodeType === Node.ELEMENT_NODE;
-let prevOverflow = "";
-var script = defineComponent({
-  name: "ElImage",
-  components: {
-    ImageViewer: ElImageViewer
-  },
-  inheritAttrs: false,
-  props: imageProps,
-  emits: imageEmits,
-  setup(props, { emit, attrs: rawAttrs }) {
-    const { t } = useLocale();
-    const attrs = useAttrs();
-    const hasLoadError = ref(false);
-    const loading = ref(true);
-    const imgWidth = ref(0);
-    const imgHeight = ref(0);
-    const showViewer = ref(false);
-    const container = ref();
-    const _scrollContainer = ref();
-    let stopScrollListener;
-    let stopWheelListener;
-    const containerStyle = computed(() => rawAttrs.style);
-    const imageStyle = computed(() => {
-      const { fit } = props;
-      if (isClient && fit) {
-        return { objectFit: fit };
-      }
-      return {};
-    });
-    const preview = computed(() => {
-      const { previewSrcList } = props;
-      return Array.isArray(previewSrcList) && previewSrcList.length > 0;
-    });
-    const imageIndex = computed(() => {
-      const { src, previewSrcList, initialIndex } = props;
-      let previewIndex = initialIndex;
-      const srcIndex = previewSrcList.indexOf(src);
-      if (srcIndex >= 0) {
-        previewIndex = srcIndex;
-      }
-      return previewIndex;
-    });
-    const loadImage = () => {
-      if (!isClient)
-        return;
-      loading.value = true;
-      hasLoadError.value = false;
-      const img = new Image();
-      const currentImageSrc = props.src;
-      img.addEventListener("load", (e) => {
-        if (currentImageSrc !== props.src) {
-          return;
-        }
-        handleLoad(e, img);
-      });
-      img.addEventListener("error", (e) => {
-        if (currentImageSrc !== props.src) {
-          return;
-        }
-        handleError(e);
-      });
-      Object.entries(attrs.value).forEach(([key, value]) => {
-        if (key.toLowerCase() === "onload")
-          return;
-        img.setAttribute(key, value);
-      });
-      img.src = currentImageSrc;
-    };
-    function handleLoad(e, img) {
-      imgWidth.value = img.width;
-      imgHeight.value = img.height;
-      loading.value = false;
-      hasLoadError.value = false;
-    }
-    function handleError(event) {
-      loading.value = false;
-      hasLoadError.value = true;
-      emit("error", event);
-    }
-    function handleLazyLoad() {
-      if (isInContainer(container.value, _scrollContainer.value)) {
-        loadImage();
-        removeLazyLoadListener();
-      }
-    }
-    const lazyLoadHandler = useThrottleFn(handleLazyLoad, 200);
-    async function addLazyLoadListener() {
-      var _a;
-      if (!isClient)
-        return;
-      await nextTick();
-      const { scrollContainer } = props;
-      if (isHtmlElement(scrollContainer)) {
-        _scrollContainer.value = scrollContainer;
-      } else if (isString(scrollContainer) && scrollContainer !== "") {
-        _scrollContainer.value = (_a = document.querySelector(scrollContainer)) != null ? _a : void 0;
-      } else if (container.value) {
-        _scrollContainer.value = getScrollContainer(container.value);
-      }
-      if (_scrollContainer.value) {
-        stopScrollListener = useEventListener(_scrollContainer, "scroll", lazyLoadHandler);
-        setTimeout(() => handleLazyLoad(), 100);
-      }
-    }
-    function removeLazyLoadListener() {
-      if (!isClient || !_scrollContainer.value || !lazyLoadHandler)
-        return;
-      stopScrollListener();
-      _scrollContainer.value = void 0;
-    }
-    function wheelHandler(e) {
-      if (!e.ctrlKey)
-        return;
-      if (e.deltaY < 0) {
-        e.preventDefault();
-        return false;
-      } else if (e.deltaY > 0) {
-        e.preventDefault();
-        return false;
-      }
-    }
-    function clickHandler() {
-      if (!preview.value)
-        return;
-      stopWheelListener = useEventListener("wheel", wheelHandler, {
-        passive: false
-      });
-      prevOverflow = document.body.style.overflow;
-      document.body.style.overflow = "hidden";
-      showViewer.value = true;
-    }
-    function closeViewer() {
-      stopWheelListener == null ? void 0 : stopWheelListener();
-      document.body.style.overflow = prevOverflow;
-      showViewer.value = false;
-      emit("close");
-    }
-    function switchViewer(val) {
-      emit("switch", val);
-    }
-    watch(() => props.src, () => {
-      if (props.lazy) {
-        loading.value = true;
-        hasLoadError.value = false;
-        removeLazyLoadListener();
-        addLazyLoadListener();
-      } else {
-        loadImage();
-      }
-    });
-    onMounted(() => {
-      if (props.lazy) {
-        addLazyLoadListener();
-      } else {
-        loadImage();
-      }
-    });
-    return {
-      attrs,
-      loading,
-      hasLoadError,
-      showViewer,
-      containerStyle,
-      imageStyle,
-      preview,
-      imageIndex,
-      container,
-      clickHandler,
-      closeViewer,
-      switchViewer,
-      t
-    };
-  }
-});
-
-export { script as default };
-//# sourceMappingURL=image.vue_vue_type_script_lang.mjs.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"image.vue_vue_type_script_lang.mjs","sources":["../../../../../../packages/components/image/src/image.vue"],"sourcesContent":["<template>\n  <div\n    ref=\"container\"\n    :class=\"['el-image', $attrs.class]\"\n    :style=\"containerStyle\"\n  >\n    <slot v-if=\"loading\" name=\"placeholder\">\n      <div class=\"el-image__placeholder\"></div>\n    </slot>\n    <slot v-else-if=\"hasLoadError\" name=\"error\">\n      <div class=\"el-image__error\">{{ t('el.image.error') }}</div>\n    </slot>\n    <img\n      v-else\n      class=\"el-image__inner\"\n      v-bind=\"attrs\"\n      :src=\"src\"\n      :style=\"imageStyle\"\n      :class=\"{\n        'el-image__preview': preview,\n      }\"\n      @click=\"clickHandler\"\n    />\n    <teleport to=\"body\" :disabled=\"!appendToBody\">\n      <template v-if=\"preview\">\n        <image-viewer\n          v-if=\"showViewer\"\n          :z-index=\"zIndex\"\n          :initial-index=\"imageIndex\"\n          :url-list=\"previewSrcList\"\n          :hide-on-click-modal=\"hideOnClickModal\"\n          @close=\"closeViewer\"\n          @switch=\"switchViewer\"\n        >\n          <div v-if=\"$slots.viewer\">\n            <slot name=\"viewer\" />\n          </div>\n        </image-viewer>\n      </template>\n    </teleport>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, computed, ref, onMounted, watch, nextTick } from 'vue'\nimport { isString } from '@vue/shared'\nimport { useEventListener, useThrottleFn, isClient } from '@vueuse/core'\nimport { useAttrs, useLocale } from '@element-plus/hooks'\nimport ImageViewer from '@element-plus/components/image-viewer'\nimport { getScrollContainer, isInContainer } from '@element-plus/utils/dom'\nimport { imageEmits, imageProps } from './image'\n\nimport type { CSSProperties, StyleValue } from 'vue'\n\nconst isHtmlElement = (e: any): e is Element =>\n  e && e.nodeType === Node.ELEMENT_NODE\n\nlet prevOverflow = ''\n\nexport default defineComponent({\n  name: 'ElImage',\n  components: {\n    ImageViewer,\n  },\n  inheritAttrs: false,\n\n  props: imageProps,\n  emits: imageEmits,\n\n  setup(props, { emit, attrs: rawAttrs }) {\n    const { t } = useLocale()\n\n    const attrs = useAttrs()\n    const hasLoadError = ref(false)\n    const loading = ref(true)\n    const imgWidth = ref(0)\n    const imgHeight = ref(0)\n    const showViewer = ref(false)\n    const container = ref<HTMLElement>()\n\n    const _scrollContainer = ref<HTMLElement | Window>()\n    let stopScrollListener: () => void\n    let stopWheelListener: () => void\n\n    const containerStyle = computed(() => rawAttrs.style as StyleValue)\n\n    const imageStyle = computed<CSSProperties>(() => {\n      const { fit } = props\n      if (isClient && fit) {\n        return { objectFit: fit }\n      }\n      return {}\n    })\n\n    const preview = computed(() => {\n      const { previewSrcList } = props\n      return Array.isArray(previewSrcList) && previewSrcList.length > 0\n    })\n\n    const imageIndex = computed(() => {\n      const { src, previewSrcList, initialIndex } = props\n      let previewIndex = initialIndex\n      const srcIndex = previewSrcList.indexOf(src)\n      if (srcIndex >= 0) {\n        previewIndex = srcIndex\n      }\n      return previewIndex\n    })\n\n    const loadImage = () => {\n      if (!isClient) return\n\n      // reset status\n      loading.value = true\n      hasLoadError.value = false\n\n      const img = new Image()\n      const currentImageSrc = props.src\n\n      // load & error callbacks are only responsible for currentImageSrc\n      img.addEventListener('load', (e) => {\n        if (currentImageSrc !== props.src) {\n          return\n        }\n        handleLoad(e, img)\n      })\n      img.addEventListener('error', (e) => {\n        if (currentImageSrc !== props.src) {\n          return\n        }\n        handleError(e)\n      })\n\n      // bind html attrs\n      // so it can behave consistently\n      Object.entries(attrs.value).forEach(([key, value]) => {\n        // avoid onload to be overwritten\n        if (key.toLowerCase() === 'onload') return\n        img.setAttribute(key, value as string)\n      })\n      img.src = currentImageSrc\n    }\n\n    function handleLoad(e: Event, img: HTMLImageElement) {\n      imgWidth.value = img.width\n      imgHeight.value = img.height\n      loading.value = false\n      hasLoadError.value = false\n    }\n\n    function handleError(event: Event) {\n      loading.value = false\n      hasLoadError.value = true\n      emit('error', event)\n    }\n\n    function handleLazyLoad() {\n      if (isInContainer(container.value, _scrollContainer.value)) {\n        loadImage()\n        removeLazyLoadListener()\n      }\n    }\n    const lazyLoadHandler = useThrottleFn(handleLazyLoad, 200)\n\n    async function addLazyLoadListener() {\n      if (!isClient) return\n\n      await nextTick()\n\n      const { scrollContainer } = props\n      if (isHtmlElement(scrollContainer)) {\n        _scrollContainer.value = scrollContainer\n      } else if (isString(scrollContainer) && scrollContainer !== '') {\n        _scrollContainer.value =\n          document.querySelector<HTMLElement>(scrollContainer) ?? undefined\n      } else if (container.value) {\n        _scrollContainer.value = getScrollContainer(container.value)\n      }\n\n      if (_scrollContainer.value) {\n        stopScrollListener = useEventListener(\n          _scrollContainer,\n          'scroll',\n          lazyLoadHandler\n        )\n        setTimeout(() => handleLazyLoad(), 100)\n      }\n    }\n\n    function removeLazyLoadListener() {\n      if (!isClient || !_scrollContainer.value || !lazyLoadHandler) return\n\n      stopScrollListener()\n      _scrollContainer.value = undefined\n    }\n\n    function wheelHandler(e: WheelEvent) {\n      if (!e.ctrlKey) return\n\n      if (e.deltaY < 0) {\n        e.preventDefault()\n        return false\n      } else if (e.deltaY > 0) {\n        e.preventDefault()\n        return false\n      }\n    }\n\n    function clickHandler() {\n      // don't show viewer when preview is false\n      if (!preview.value) return\n\n      stopWheelListener = useEventListener('wheel', wheelHandler, {\n        passive: false,\n      })\n\n      // prevent body scroll\n      prevOverflow = document.body.style.overflow\n      document.body.style.overflow = 'hidden'\n      showViewer.value = true\n    }\n\n    function closeViewer() {\n      stopWheelListener?.()\n      document.body.style.overflow = prevOverflow\n      showViewer.value = false\n      emit('close')\n    }\n\n    function switchViewer(val: number) {\n      emit('switch', val)\n    }\n\n    watch(\n      () => props.src,\n      () => {\n        if (props.lazy) {\n          // reset status\n          loading.value = true\n          hasLoadError.value = false\n          removeLazyLoadListener()\n          addLazyLoadListener()\n        } else {\n          loadImage()\n        }\n      }\n    )\n\n    onMounted(() => {\n      if (props.lazy) {\n        addLazyLoadListener()\n      } else {\n        loadImage()\n      }\n    })\n\n    return {\n      attrs,\n      loading,\n      hasLoadError,\n      showViewer,\n      containerStyle,\n      imageStyle,\n      preview,\n      imageIndex,\n      container,\n\n      clickHandler,\n      closeViewer,\n      switchViewer,\n      t,\n    }\n  },\n})\n</script>\n"],"names":["ImageViewer"],"mappings":"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"}

package/es/components/image/src/image.vue_vue_type_template_id_34467287_lang.mjs

@@ -1,56 +0,0 @@
-import { createElementVNode, resolveComponent, openBlock, createElementBlock, normalizeClass, normalizeStyle, renderSlot, toDisplayString, mergeProps, createBlock, Teleport, Fragment, withCtx, createCommentVNode } from 'vue';
-
-const _hoisted_1 = /* @__PURE__ */ createElementVNode("div", { class: "el-image__placeholder" }, null, -1);
-const _hoisted_2 = { class: "el-image__error" };
-const _hoisted_3 = ["src"];
-const _hoisted_4 = { key: 0 };
-function render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_image_viewer = resolveComponent("image-viewer");
-  return openBlock(), createElementBlock("div", {
-    ref: "container",
-    class: normalizeClass(["el-image", _ctx.$attrs.class]),
-    style: normalizeStyle(_ctx.containerStyle)
-  }, [
-    _ctx.loading ? renderSlot(_ctx.$slots, "placeholder", { key: 0 }, () => [
-      _hoisted_1
-    ]) : _ctx.hasLoadError ? renderSlot(_ctx.$slots, "error", { key: 1 }, () => [
-      createElementVNode("div", _hoisted_2, toDisplayString(_ctx.t("el.image.error")), 1)
-    ]) : (openBlock(), createElementBlock("img", mergeProps({
-      key: 2,
-      class: "el-image__inner"
-    }, _ctx.attrs, {
-      src: _ctx.src,
-      style: _ctx.imageStyle,
-      class: {
-        "el-image__preview": _ctx.preview
-      },
-      onClick: _cache[0] || (_cache[0] = (...args) => _ctx.clickHandler && _ctx.clickHandler(...args))
-    }), null, 16, _hoisted_3)),
-    (openBlock(), createBlock(Teleport, {
-      to: "body",
-      disabled: !_ctx.appendToBody
-    }, [
-      _ctx.preview ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-        _ctx.showViewer ? (openBlock(), createBlock(_component_image_viewer, {
-          key: 0,
-          "z-index": _ctx.zIndex,
-          "initial-index": _ctx.imageIndex,
-          "url-list": _ctx.previewSrcList,
-          "hide-on-click-modal": _ctx.hideOnClickModal,
-          onClose: _ctx.closeViewer,
-          onSwitch: _ctx.switchViewer
-        }, {
-          default: withCtx(() => [
-            _ctx.$slots.viewer ? (openBlock(), createElementBlock("div", _hoisted_4, [
-              renderSlot(_ctx.$slots, "viewer")
-            ])) : createCommentVNode("v-if", true)
-          ]),
-          _: 3
-        }, 8, ["z-index", "initial-index", "url-list", "hide-on-click-modal", "onClose", "onSwitch"])) : createCommentVNode("v-if", true)
-      ], 2112)) : createCommentVNode("v-if", true)
-    ], 8, ["disabled"]))
-  ], 6);
-}
-
-export { render };
-//# sourceMappingURL=image.vue_vue_type_template_id_34467287_lang.mjs.map

package/es/components/image/src/image.vue_vue_type_template_id_34467287_lang.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"image.vue_vue_type_template_id_34467287_lang.mjs","sources":["../../../../../../packages/components/image/src/image.vue?vue&type=template&id=34467287&lang.js"],"sourcesContent":["<template>\n  <div\n    ref=\"container\"\n    :class=\"['el-image', $attrs.class]\"\n    :style=\"containerStyle\"\n  >\n    <slot v-if=\"loading\" name=\"placeholder\">\n      <div class=\"el-image__placeholder\"></div>\n    </slot>\n    <slot v-else-if=\"hasLoadError\" name=\"error\">\n      <div class=\"el-image__error\">{{ t('el.image.error') }}</div>\n    </slot>\n    <img\n      v-else\n      class=\"el-image__inner\"\n      v-bind=\"attrs\"\n      :src=\"src\"\n      :style=\"imageStyle\"\n      :class=\"{\n        'el-image__preview': preview,\n      }\"\n      @click=\"clickHandler\"\n    />\n    <teleport to=\"body\" :disabled=\"!appendToBody\">\n      <template v-if=\"preview\">\n        <image-viewer\n          v-if=\"showViewer\"\n          :z-index=\"zIndex\"\n          :initial-index=\"imageIndex\"\n          :url-list=\"previewSrcList\"\n          :hide-on-click-modal=\"hideOnClickModal\"\n          @close=\"closeViewer\"\n          @switch=\"switchViewer\"\n        >\n          <div v-if=\"$slots.viewer\">\n            <slot name=\"viewer\" />\n          </div>\n        </image-viewer>\n      </template>\n    </teleport>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, computed, ref, onMounted, watch, nextTick } from 'vue'\nimport { isString } from '@vue/shared'\nimport { useEventListener, useThrottleFn, isClient } from '@vueuse/core'\nimport { useAttrs, useLocale } from '@element-plus/hooks'\nimport ImageViewer from '@element-plus/components/image-viewer'\nimport { getScrollContainer, isInContainer } from '@element-plus/utils/dom'\nimport { imageEmits, imageProps } from './image'\n\nimport type { CSSProperties, StyleValue } from 'vue'\n\nconst isHtmlElement = (e: any): e is Element =>\n  e && e.nodeType === Node.ELEMENT_NODE\n\nlet prevOverflow = ''\n\nexport default defineComponent({\n  name: 'ElImage',\n  components: {\n    ImageViewer,\n  },\n  inheritAttrs: false,\n\n  props: imageProps,\n  emits: imageEmits,\n\n  setup(props, { emit, attrs: rawAttrs }) {\n    const { t } = useLocale()\n\n    const attrs = useAttrs()\n    const hasLoadError = ref(false)\n    const loading = ref(true)\n    const imgWidth = ref(0)\n    const imgHeight = ref(0)\n    const showViewer = ref(false)\n    const container = ref<HTMLElement>()\n\n    const _scrollContainer = ref<HTMLElement | Window>()\n    let stopScrollListener: () => void\n    let stopWheelListener: () => void\n\n    const containerStyle = computed(() => rawAttrs.style as StyleValue)\n\n    const imageStyle = computed<CSSProperties>(() => {\n      const { fit } = props\n      if (isClient && fit) {\n        return { objectFit: fit }\n      }\n      return {}\n    })\n\n    const preview = computed(() => {\n      const { previewSrcList } = props\n      return Array.isArray(previewSrcList) && previewSrcList.length > 0\n    })\n\n    const imageIndex = computed(() => {\n      const { src, previewSrcList, initialIndex } = props\n      let previewIndex = initialIndex\n      const srcIndex = previewSrcList.indexOf(src)\n      if (srcIndex >= 0) {\n        previewIndex = srcIndex\n      }\n      return previewIndex\n    })\n\n    const loadImage = () => {\n      if (!isClient) return\n\n      // reset status\n      loading.value = true\n      hasLoadError.value = false\n\n      const img = new Image()\n      const currentImageSrc = props.src\n\n      // load & error callbacks are only responsible for currentImageSrc\n      img.addEventListener('load', (e) => {\n        if (currentImageSrc !== props.src) {\n          return\n        }\n        handleLoad(e, img)\n      })\n      img.addEventListener('error', (e) => {\n        if (currentImageSrc !== props.src) {\n          return\n        }\n        handleError(e)\n      })\n\n      // bind html attrs\n      // so it can behave consistently\n      Object.entries(attrs.value).forEach(([key, value]) => {\n        // avoid onload to be overwritten\n        if (key.toLowerCase() === 'onload') return\n        img.setAttribute(key, value as string)\n      })\n      img.src = currentImageSrc\n    }\n\n    function handleLoad(e: Event, img: HTMLImageElement) {\n      imgWidth.value = img.width\n      imgHeight.value = img.height\n      loading.value = false\n      hasLoadError.value = false\n    }\n\n    function handleError(event: Event) {\n      loading.value = false\n      hasLoadError.value = true\n      emit('error', event)\n    }\n\n    function handleLazyLoad() {\n      if (isInContainer(container.value, _scrollContainer.value)) {\n        loadImage()\n        removeLazyLoadListener()\n      }\n    }\n    const lazyLoadHandler = useThrottleFn(handleLazyLoad, 200)\n\n    async function addLazyLoadListener() {\n      if (!isClient) return\n\n      await nextTick()\n\n      const { scrollContainer } = props\n      if (isHtmlElement(scrollContainer)) {\n        _scrollContainer.value = scrollContainer\n      } else if (isString(scrollContainer) && scrollContainer !== '') {\n        _scrollContainer.value =\n          document.querySelector<HTMLElement>(scrollContainer) ?? undefined\n      } else if (container.value) {\n        _scrollContainer.value = getScrollContainer(container.value)\n      }\n\n      if (_scrollContainer.value) {\n        stopScrollListener = useEventListener(\n          _scrollContainer,\n          'scroll',\n          lazyLoadHandler\n        )\n        setTimeout(() => handleLazyLoad(), 100)\n      }\n    }\n\n    function removeLazyLoadListener() {\n      if (!isClient || !_scrollContainer.value || !lazyLoadHandler) return\n\n      stopScrollListener()\n      _scrollContainer.value = undefined\n    }\n\n    function wheelHandler(e: WheelEvent) {\n      if (!e.ctrlKey) return\n\n      if (e.deltaY < 0) {\n        e.preventDefault()\n        return false\n      } else if (e.deltaY > 0) {\n        e.preventDefault()\n        return false\n      }\n    }\n\n    function clickHandler() {\n      // don't show viewer when preview is false\n      if (!preview.value) return\n\n      stopWheelListener = useEventListener('wheel', wheelHandler, {\n        passive: false,\n      })\n\n      // prevent body scroll\n      prevOverflow = document.body.style.overflow\n      document.body.style.overflow = 'hidden'\n      showViewer.value = true\n    }\n\n    function closeViewer() {\n      stopWheelListener?.()\n      document.body.style.overflow = prevOverflow\n      showViewer.value = false\n      emit('close')\n    }\n\n    function switchViewer(val: number) {\n      emit('switch', val)\n    }\n\n    watch(\n      () => props.src,\n      () => {\n        if (props.lazy) {\n          // reset status\n          loading.value = true\n          hasLoadError.value = false\n          removeLazyLoadListener()\n          addLazyLoadListener()\n        } else {\n          loadImage()\n        }\n      }\n    )\n\n    onMounted(() => {\n      if (props.lazy) {\n        addLazyLoadListener()\n      } else {\n        loadImage()\n      }\n    })\n\n    return {\n      attrs,\n      loading,\n      hasLoadError,\n      showViewer,\n      containerStyle,\n      imageStyle,\n      preview,\n      imageIndex,\n      container,\n\n      clickHandler,\n      closeViewer,\n      switchViewer,\n      t,\n    }\n  },\n})\n</script>\n"],"names":["_createCommentVNode"],"mappings":";;;;0BAUgB;;;;;;;;;IAPX,KAAK,+CAA2B;;;;;;;;;;;;;;;cAa3B,EAAE;;iBAEA;;;YAGL;;mBAEH;UAAa;;;mBACY;yBAAvB;;;;;kBAIKA,+BAAyB;;;2CAGP;kBAClBA;;;;;;;"}