element-plus 1.2.0-beta.6 → 1.3.0-beta.1

package/lib/components/form/src/form.vue_vue_type_script_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"form.vue_vue_type_script_lang.js","sources":["../../../../../../packages/components/form/src/form.vue"],"sourcesContent":["<template>\n  <form\n    class=\"el-form\"\n    :class=\"[\n      labelPosition ? 'el-form--label-' + labelPosition : '',\n      { 'el-form--inline': inline },\n    ]\"\n  >\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 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 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      validate, // export\n      resetFields,\n      clearValidate,\n      validateField,\n      scrollToField,\n    }\n  },\n})\n</script>\n"],"names":["ref","computed","defineComponent","reactive","toRefs","elFormKey"],"mappings":"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"}
+{"version":3,"file":"form.vue_vue_type_script_lang.js","sources":["../../../../../../packages/components/form/src/form.vue"],"sourcesContent":["<template>\n  <form\n    class=\"el-form\"\n    :class=\"[\n      labelPosition ? 'el-form--label-' + labelPosition : '',\n      { 'el-form--inline': inline },\n    ]\"\n  >\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 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 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      validate, // export\n      resetFields,\n      clearValidate,\n      validateField,\n      scrollToField,\n    }\n  },\n})\n</script>\n"],"names":["debugWarn","watch","reactive"],"mappings":"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"}

package/lib/components/form/src/form.vue_vue_type_template_id_602d6cf6_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"form.vue_vue_type_template_id_602d6cf6_lang.js","sources":["../../../../../../packages/components/form/src/form.vue?vue&type=template&id=602d6cf6&lang.js"],"sourcesContent":["<template>\n  <form\n    class=\"el-form\"\n    :class=\"[\n      labelPosition ? 'el-form--label-' + labelPosition : '',\n      { 'el-form--inline': inline },\n    ]\"\n  >\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 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 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      validate, // export\n      resetFields,\n      clearValidate,\n      validateField,\n      scrollToField,\n    }\n  },\n})\n</script>\n"],"names":["_createElementBlock","_renderSlot"],"mappings":";;;;;;;0BACEA;IACE,2BAAM;;;;;IAMNC;;;;;;"}
+{"version":3,"file":"form.vue_vue_type_template_id_602d6cf6_lang.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;"}

package/lib/components/form/src/label-wrap.js.map

@@ -1 +1 @@
-{"version":3,"file":"label-wrap.js","sources":["../../../../../../packages/components/form/src/label-wrap.ts"],"sourcesContent":["import {\n  defineComponent,\n  Fragment,\n  h,\n  inject,\n  nextTick,\n  onBeforeUnmount,\n  onMounted,\n  onUpdated,\n  ref,\n  watch,\n} from 'vue'\nimport {\n  addResizeListener,\n  removeResizeListener,\n} from '@element-plus/utils/resize-event'\nimport { elFormItemKey, elFormKey } from '@element-plus/tokens'\nimport type { ResizableElement } from '@element-plus/utils/resize-event'\n\nimport type { CSSProperties } from 'vue'\nimport type { Nullable } from '@element-plus/utils/types'\n\nexport default defineComponent({\n  name: 'ElLabelWrap',\n  props: {\n    isAutoWidth: Boolean,\n    updateAll: Boolean,\n  },\n  setup(props, { slots }) {\n    const el = ref<Nullable<HTMLElement>>(null)\n    const elForm = inject(elFormKey)\n    const elFormItem = inject(elFormItemKey)\n\n    const computedWidth = ref(0)\n    watch(computedWidth, (val, oldVal) => {\n      if (props.updateAll) {\n        elForm.registerLabelWidth(val, oldVal)\n        elFormItem.updateComputedLabelWidth(val)\n      }\n    })\n\n    const getLabelWidth = () => {\n      if (el.value?.firstElementChild) {\n        const width = window.getComputedStyle(el.value.firstElementChild).width\n        return Math.ceil(parseFloat(width))\n      } else {\n        return 0\n      }\n    }\n    const updateLabelWidth = (action = 'update') => {\n      nextTick(() => {\n        if (slots.default && props.isAutoWidth) {\n          if (action === 'update') {\n            computedWidth.value = getLabelWidth()\n          } else if (action === 'remove') {\n            elForm.deregisterLabelWidth(computedWidth.value)\n          }\n        }\n      })\n    }\n    const updateLabelWidthFn = () => updateLabelWidth('update')\n\n    onMounted(() => {\n      addResizeListener(\n        el.value.firstElementChild as ResizableElement,\n        updateLabelWidthFn\n      )\n      updateLabelWidthFn()\n    })\n\n    onUpdated(updateLabelWidthFn)\n\n    onBeforeUnmount(() => {\n      updateLabelWidth('remove')\n      removeResizeListener(\n        el.value?.firstElementChild as ResizableElement,\n        updateLabelWidthFn\n      )\n    })\n\n    function render() {\n      if (!slots) return null\n      if (props.isAutoWidth) {\n        const autoLabelWidth = elForm.autoLabelWidth\n        const style = {} as CSSProperties\n        if (autoLabelWidth && autoLabelWidth !== 'auto') {\n          const marginWidth = Math.max(\n            0,\n            parseInt(autoLabelWidth, 10) - computedWidth.value\n          )\n          const marginPosition =\n            elForm.labelPosition === 'left' ? 'marginRight' : 'marginLeft'\n          if (marginWidth) {\n            style[marginPosition] = `${marginWidth}px`\n          }\n        }\n        return h(\n          'div',\n          {\n            ref: el,\n            class: ['el-form-item__label-wrap'],\n            style,\n          },\n          slots.default?.()\n        )\n      } else {\n        return h(Fragment, { ref: el }, slots.default?.())\n      }\n    }\n\n    return render\n  },\n})\n"],"names":["defineComponent","ref","inject","elFormKey","elFormItemKey","h","Fragment"],"mappings":";;;;;;;;;AAsBA,gBAAeA,oBAAgB;AAAA,EAC7B,MAAM;AAAA,EACN,OAAO;AAAA,IACL,aAAa;AAAA,IACb,WAAW;AAAA;AAAA,EAEb,MAAM,OAAO,EAAE,SAAS;AACtB,UAAM,KAAKC,QAA2B;AACtC,UAAM,SAASC,WAAOC;AACtB,UAAM,aAAaD,WAAOE;AAE1B,UAAM,gBAAgBH,QAAI;AAC1B,cAAM,eAAe,CAAC,KAAK,WAAW;AACpC,UAAI,MAAM,WAAW;AACnB,eAAO,mBAAmB,KAAK;AAC/B,mBAAW,yBAAyB;AAAA;AAAA;AAIxC,UAAM,gBAAgB,MAAM;AAzChC;AA0CM,UAAI,SAAG,UAAH,mBAAU,mBAAmB;AAC/B,cAAM,QAAQ,OAAO,iBAAiB,GAAG,MAAM,mBAAmB;AAClE,eAAO,KAAK,KAAK,WAAW;AAAA,aACvB;AACL,eAAO;AAAA;AAAA;AAGX,UAAM,mBAAmB,CAAC,SAAS,aAAa;AAC9C,mBAAS,MAAM;AACb,YAAI,MAAM,WAAW,MAAM,aAAa;AACtC,cAAI,WAAW,UAAU;AACvB,0BAAc,QAAQ;AAAA,qBACb,WAAW,UAAU;AAC9B,mBAAO,qBAAqB,cAAc;AAAA;AAAA;AAAA;AAAA;AAKlD,UAAM,qBAAqB,MAAM,iBAAiB;AAElD,kBAAU,MAAM;AACd,oCACE,GAAG,MAAM,mBACT;AAEF;AAAA;AAGF,kBAAU;AAEV,wBAAgB,MAAM;AAxE1B;AAyEM,uBAAiB;AACjB,uCACE,SAAG,UAAH,mBAAU,mBACV;AAAA;AAIJ,sBAAkB;AAhFtB;AAiFM,UAAI,CAAC;AAAO,eAAO;AACnB,UAAI,MAAM,aAAa;AACrB,cAAM,iBAAiB,OAAO;AAC9B,cAAM,QAAQ;AACd,YAAI,kBAAkB,mBAAmB,QAAQ;AAC/C,gBAAM,cAAc,KAAK,IACvB,GACA,SAAS,gBAAgB,MAAM,cAAc;AAE/C,gBAAM,iBACJ,OAAO,kBAAkB,SAAS,gBAAgB;AACpD,cAAI,aAAa;AACf,kBAAM,kBAAkB,GAAG;AAAA;AAAA;AAG/B,eAAOI,MACL,OACA;AAAA,UACE,KAAK;AAAA,UACL,OAAO,CAAC;AAAA,UACR;AAAA,WAEF,YAAM,YAAN;AAAA,aAEG;AACL,eAAOA,MAAEC,cAAU,EAAE,KAAK,MAAM,YAAM,YAAN;AAAA;AAAA;AAIpC,WAAO;AAAA;AAAA;;;;"}
+{"version":3,"file":"label-wrap.js","sources":["../../../../../../packages/components/form/src/label-wrap.ts"],"sourcesContent":["import {\n  defineComponent,\n  Fragment,\n  h,\n  inject,\n  nextTick,\n  onBeforeUnmount,\n  onMounted,\n  onUpdated,\n  ref,\n  watch,\n} from 'vue'\nimport {\n  addResizeListener,\n  removeResizeListener,\n} from '@element-plus/utils/resize-event'\nimport { elFormItemKey, elFormKey } from '@element-plus/tokens'\nimport type { ResizableElement } from '@element-plus/utils/resize-event'\n\nimport type { CSSProperties } from 'vue'\nimport type { Nullable } from '@element-plus/utils/types'\n\nexport default defineComponent({\n  name: 'ElLabelWrap',\n  props: {\n    isAutoWidth: Boolean,\n    updateAll: Boolean,\n  },\n  setup(props, { slots }) {\n    const el = ref<Nullable<HTMLElement>>(null)\n    const elForm = inject(elFormKey)\n    const elFormItem = inject(elFormItemKey)\n\n    const computedWidth = ref(0)\n    watch(computedWidth, (val, oldVal) => {\n      if (props.updateAll) {\n        elForm.registerLabelWidth(val, oldVal)\n        elFormItem.updateComputedLabelWidth(val)\n      }\n    })\n\n    const getLabelWidth = () => {\n      if (el.value?.firstElementChild) {\n        const width = window.getComputedStyle(el.value.firstElementChild).width\n        return Math.ceil(parseFloat(width))\n      } else {\n        return 0\n      }\n    }\n    const updateLabelWidth = (action = 'update') => {\n      nextTick(() => {\n        if (slots.default && props.isAutoWidth) {\n          if (action === 'update') {\n            computedWidth.value = getLabelWidth()\n          } else if (action === 'remove') {\n            elForm.deregisterLabelWidth(computedWidth.value)\n          }\n        }\n      })\n    }\n    const updateLabelWidthFn = () => updateLabelWidth('update')\n\n    onMounted(() => {\n      addResizeListener(\n        el.value.firstElementChild as ResizableElement,\n        updateLabelWidthFn\n      )\n      updateLabelWidthFn()\n    })\n\n    onUpdated(updateLabelWidthFn)\n\n    onBeforeUnmount(() => {\n      updateLabelWidth('remove')\n      removeResizeListener(\n        el.value?.firstElementChild as ResizableElement,\n        updateLabelWidthFn\n      )\n    })\n\n    function render() {\n      if (!slots) return null\n      if (props.isAutoWidth) {\n        const autoLabelWidth = elForm.autoLabelWidth\n        const style = {} as CSSProperties\n        if (autoLabelWidth && autoLabelWidth !== 'auto') {\n          const marginWidth = Math.max(\n            0,\n            parseInt(autoLabelWidth, 10) - computedWidth.value\n          )\n          const marginPosition =\n            elForm.labelPosition === 'left' ? 'marginRight' : 'marginLeft'\n          if (marginWidth) {\n            style[marginPosition] = `${marginWidth}px`\n          }\n        }\n        return h(\n          'div',\n          {\n            ref: el,\n            class: ['el-form-item__label-wrap'],\n            style,\n          },\n          slots.default?.()\n        )\n      } else {\n        return h(Fragment, { ref: el }, slots.default?.())\n      }\n    }\n\n    return render\n  },\n})\n"],"names":["defineComponent","ref","inject","elFormKey","elFormItemKey","watch","nextTick","onMounted","addResizeListener","onUpdated","onBeforeUnmount","removeResizeListener","h","Fragment"],"mappings":"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"}

package/lib/components/icon/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../packages/components/icon/index.ts"],"sourcesContent":["import { withInstall } from '@element-plus/utils/with-install'\n\nimport Icon from './src/icon.vue'\n\nexport const ElIcon = withInstall(Icon)\nexport default ElIcon\n\nexport * from './src/icon'\n"],"names":["withInstall","Icon"],"mappings":";;;;;;;;;MAIa,SAASA,wBAAYC;;;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../../packages/components/icon/index.ts"],"sourcesContent":["import { withInstall } from '@element-plus/utils/with-install'\n\nimport Icon from './src/icon.vue'\n\nexport const ElIcon = withInstall(Icon)\nexport default ElIcon\n\nexport * from './src/icon'\n"],"names":["withInstall","Icon"],"mappings":";;;;;;;;;AAEY,MAAC,MAAM,GAAGA,uBAAW,CAACC,wCAAI;;;;;;"}

package/lib/components/icon/src/icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"icon.js","sources":["../../../../../../packages/components/icon/src/icon.ts"],"sourcesContent":["import { definePropType, buildProps } from '@element-plus/utils/props'\nimport type { ExtractPropTypes } from 'vue'\n\nexport const iconProps = buildProps({\n  size: {\n    type: definePropType<number | string>([Number, String]),\n  },\n  color: {\n    type: String,\n  },\n} as const)\nexport type IconProps = ExtractPropTypes<typeof iconProps>\n"],"names":["buildProps","definePropType"],"mappings":";;;;;;MAGa,YAAYA,iBAAW;AAAA,EAClC,MAAM;AAAA,IACJ,MAAMC,qBAAgC,CAAC,QAAQ;AAAA;AAAA,EAEjD,OAAO;AAAA,IACL,MAAM;AAAA;AAAA;;;;"}
+{"version":3,"file":"icon.js","sources":["../../../../../../packages/components/icon/src/icon.ts"],"sourcesContent":["import { definePropType, buildProps } from '@element-plus/utils/props'\nimport type { ExtractPropTypes } from 'vue'\n\nexport const iconProps = buildProps({\n  size: {\n    type: definePropType<number | string>([Number, String]),\n  },\n  color: {\n    type: String,\n  },\n} as const)\nexport type IconProps = ExtractPropTypes<typeof iconProps>\n"],"names":["buildProps","definePropType"],"mappings":";;;;;;AACY,MAAC,SAAS,GAAGA,gBAAU,CAAC;AACpC,EAAE,IAAI,EAAE;AACR,IAAI,IAAI,EAAEC,oBAAc,CAAC,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAC1C,GAAG;AACH,EAAE,KAAK,EAAE;AACT,IAAI,IAAI,EAAE,MAAM;AAChB,GAAG;AACH,CAAC;;;;"}

package/lib/components/icon/src/icon.vue_vue_type_script_lang.js

@@ -22,7 +22,7 @@ var script = vue.defineComponent({
           size = `${size}px`;
         }
         return {
-          ...props.size ? { "--font-size": size } : {},
+          ...props.size ? { fontSize: size } : {},
           ...props.color ? { "--color": props.color } : {}
         };
       })

package/lib/components/icon/src/icon.vue_vue_type_script_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"icon.vue_vue_type_script_lang.js","sources":["../../../../../../packages/components/icon/src/icon.vue"],"sourcesContent":["<template>\n  <i class=\"el-icon\" :style=\"style\" v-bind=\"$attrs\">\n    <slot></slot>\n  </i>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, computed } from 'vue'\nimport { isNumber, isString } from '@element-plus/utils/util'\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    return {\n      style: computed<CSSProperties>(() => {\n        if (!props.size && !props.color) {\n          return {}\n        }\n        let size = props.size\n        if (isNumber(size) || (isString(size) && !size.endsWith('px'))) {\n          size = `${size}px`\n        }\n        return {\n          ...(props.size ? { '--font-size': size } : {}),\n          ...(props.color ? { '--color': props.color } : {}),\n        } as CSSProperties\n      }),\n    }\n  },\n})\n</script>\n"],"names":["defineComponent","iconProps","computed","isNumber","isString"],"mappings":";;;;;;;;;AAaA,aAAeA,oBAAgB;AAAA,EAC7B,MAAM;AAAA,EACN,cAAc;AAAA,EAEd,OAAOC;AAAA,EAEP,MAAM,OAAO;AACX,WAAO;AAAA,MACL,OAAOC,aAAwB,MAAM;AACnC,YAAI,CAAC,MAAM,QAAQ,CAAC,MAAM,OAAO;AAC/B,iBAAO;AAAA;AAET,YAAI,OAAO,MAAM;AACjB,YAAIC,cAAS,SAAUC,gBAAS,SAAS,CAAC,KAAK,SAAS,OAAQ;AAC9D,iBAAO,GAAG;AAAA;AAEZ,eAAO;AAAA,aACD,MAAM,OAAO,EAAE,eAAe,SAAS;AAAA,aACvC,MAAM,QAAQ,EAAE,WAAW,MAAM,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;;;;"}
+{"version":3,"file":"icon.vue_vue_type_script_lang.js","sources":["../../../../../../packages/components/icon/src/icon.vue"],"sourcesContent":["<template>\n  <i class=\"el-icon\" :style=\"style\" v-bind=\"$attrs\">\n    <slot></slot>\n  </i>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, computed } from 'vue'\nimport { isNumber, isString } from '@element-plus/utils/util'\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    return {\n      style: computed<CSSProperties>(() => {\n        if (!props.size && !props.color) {\n          return {}\n        }\n        let size = props.size\n        if (isNumber(size) || (isString(size) && !size.endsWith('px'))) {\n          size = `${size}px`\n        }\n        return {\n          ...(props.size ? { fontSize: size } : {}),\n          ...(props.color ? { '--color': props.color } : {}),\n        } as CSSProperties\n      }),\n    }\n  },\n})\n</script>\n"],"names":["defineComponent","computed"],"mappings":";;;;;;;;;AASA,aAAeA,mBAAe,CAAC;;AAE/B,EAAE,YAAY,EAAE,KAAK;;AAErB,EAAE,KAAK,CAAC,KAAK,EAAE;IACX,OAAO;MACL,KAAK,EAAEC,YAAQ;;UAEX,OAAO;;QAET,IAAI;QACJ;UACE,IAAI,GAAG,CAAC,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC;SACpB;eACM;;UAEL,GAAG,MAAM,KAAK,GAAG;SAClB;;;;;;;;"}

package/lib/components/icon/src/icon.vue_vue_type_template_id_89b755b6_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"icon.vue_vue_type_template_id_89b755b6_lang.js","sources":["../../../../../../packages/components/icon/src/icon.vue?vue&type=template&id=89b755b6&lang.js"],"sourcesContent":["<template>\n  <i class=\"el-icon\" :style=\"style\" v-bind=\"$attrs\">\n    <slot></slot>\n  </i>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, computed } from 'vue'\nimport { isNumber, isString } from '@element-plus/utils/util'\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    return {\n      style: computed<CSSProperties>(() => {\n        if (!props.size && !props.color) {\n          return {}\n        }\n        let size = props.size\n        if (isNumber(size) || (isString(size) && !size.endsWith('px'))) {\n          size = `${size}px`\n        }\n        return {\n          ...(props.size ? { '--font-size': size } : {}),\n          ...(props.color ? { '--color': props.color } : {}),\n        } as CSSProperties\n      }),\n    }\n  },\n})\n</script>\n"],"names":["_createElementBlock","_mergeProps","_renderSlot"],"mappings":";;;;;;;0BACEA,4BAAAC;IAAG,OAAM;AAAA,IAAW,OAAO;KAAe;IACxCC;;;;;;"}
+{"version":3,"file":"icon.vue_vue_type_template_id_89b755b6_lang.js","sources":["../../../../../../packages/components/icon/src/icon.vue?vue&type=template&id=89b755b6&lang.js"],"sourcesContent":["<template>\n  <i class=\"el-icon\" :style=\"style\" v-bind=\"$attrs\">\n    <slot></slot>\n  </i>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, computed } from 'vue'\nimport { isNumber, isString } from '@element-plus/utils/util'\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    return {\n      style: computed<CSSProperties>(() => {\n        if (!props.size && !props.color) {\n          return {}\n        }\n        let size = props.size\n        if (isNumber(size) || (isString(size) && !size.endsWith('px'))) {\n          size = `${size}px`\n        }\n        return {\n          ...(props.size ? { fontSize: size } : {}),\n          ...(props.color ? { '--color': props.color } : {}),\n        } as CSSProperties\n      }),\n    }\n  },\n})\n</script>\n"],"names":[],"mappings":";;;;;;;;;IACK,KAAK,EAAC;SAAgB;mBAAuB;;;;;;"}

package/lib/components/image/index.d.ts

@@ -37,8 +37,8 @@ export declare const ElImage: import("../../utils/types").SFCWithInstall<import(
     readonly zIndex?: unknown;
     readonly initialIndex?: unknown;
 } & {
-    lazy: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     zIndex: number;
+    lazy: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     appendToBody: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     src: string;
     fit: import("../../utils/props").BuildPropType<StringConstructor, "" | "fill" | "none" | "contain" | "cover" | "scale-down", unknown>;
@@ -52,8 +52,8 @@ export declare const ElImage: import("../../utils/types").SFCWithInstall<import(
     onError?: ((evt: Event) => any) | undefined;
     onSwitch?: ((val: number) => any) | undefined;
 }, {
-    lazy: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     zIndex: number;
+    lazy: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     appendToBody: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     src: string;
     fit: import("../../utils/props").BuildPropType<StringConstructor, "" | "fill" | "none" | "contain" | "cover" | "scale-down", unknown>;

package/lib/components/image/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../packages/components/image/index.ts"],"sourcesContent":["import { withInstall } from '@element-plus/utils/with-install'\n\nimport Image from './src/image.vue'\n\nexport const ElImage = withInstall(Image)\nexport default ElImage\n\nexport * from './src/image'\n"],"names":["withInstall","Image"],"mappings":";;;;;;;;;MAIa,UAAUA,wBAAYC;;;;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../../packages/components/image/index.ts"],"sourcesContent":["import { withInstall } from '@element-plus/utils/with-install'\n\nimport Image from './src/image.vue'\n\nexport const ElImage = withInstall(Image)\nexport default ElImage\n\nexport * from './src/image'\n"],"names":["withInstall","Image"],"mappings":";;;;;;;;;AAEY,MAAC,OAAO,GAAGA,uBAAW,CAACC,yCAAK;;;;;;;"}

package/lib/components/image/src/image.js.map

@@ -1 +1 @@
-{"version":3,"file":"image.js","sources":["../../../../../../packages/components/image/src/image.ts"],"sourcesContent":["import { buildProps, definePropType, mutable } from '@element-plus/utils/props'\nimport { isNumber } from '@element-plus/utils/util'\n\nimport type { ExtractPropTypes } from 'vue'\n\nexport const imageProps = buildProps({\n  appendToBody: {\n    type: Boolean,\n    default: false,\n  },\n  hideOnClickModal: {\n    type: Boolean,\n    default: false,\n  },\n  src: {\n    type: String,\n    default: '',\n  },\n  fit: {\n    type: String,\n    values: ['', 'contain', 'cover', 'fill', 'none', 'scale-down'],\n    default: '',\n  },\n  lazy: {\n    type: Boolean,\n    default: false,\n  },\n  scrollContainer: {\n    type: definePropType<string | HTMLElement | undefined>([String, Object]),\n  },\n  previewSrcList: {\n    type: definePropType<string[]>(Array),\n    default: () => mutable([] as const),\n  },\n  zIndex: {\n    type: Number,\n    default: 2000,\n  },\n  initialIndex: {\n    type: Number,\n    default: 0,\n  },\n} as const)\nexport type ImageProps = ExtractPropTypes<typeof imageProps>\n\nexport const imageEmits = {\n  error: (evt: Event) => evt instanceof Event,\n  switch: (val: number) => isNumber(val),\n  close: () => true,\n}\nexport type ImageEmits = typeof imageEmits\n"],"names":["buildProps","definePropType","mutable","isNumber"],"mappings":";;;;;;;MAKa,aAAaA,iBAAW;AAAA,EACnC,cAAc;AAAA,IACZ,MAAM;AAAA,IACN,SAAS;AAAA;AAAA,EAEX,kBAAkB;AAAA,IAChB,MAAM;AAAA,IACN,SAAS;AAAA;AAAA,EAEX,KAAK;AAAA,IACH,MAAM;AAAA,IACN,SAAS;AAAA;AAAA,EAEX,KAAK;AAAA,IACH,MAAM;AAAA,IACN,QAAQ,CAAC,IAAI,WAAW,SAAS,QAAQ,QAAQ;AAAA,IACjD,SAAS;AAAA;AAAA,EAEX,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,SAAS;AAAA;AAAA,EAEX,iBAAiB;AAAA,IACf,MAAMC,qBAAiD,CAAC,QAAQ;AAAA;AAAA,EAElE,gBAAgB;AAAA,IACd,MAAMA,qBAAyB;AAAA,IAC/B,SAAS,MAAMC,cAAQ;AAAA;AAAA,EAEzB,QAAQ;AAAA,IACN,MAAM;AAAA,IACN,SAAS;AAAA;AAAA,EAEX,cAAc;AAAA,IACZ,MAAM;AAAA,IACN,SAAS;AAAA;AAAA;MAKA,aAAa;AAAA,EACxB,OAAO,CAAC,QAAe,eAAe;AAAA,EACtC,QAAQ,CAAC,QAAgBC,cAAS;AAAA,EAClC,OAAO,MAAM;AAAA;;;;;"}
+{"version":3,"file":"image.js","sources":["../../../../../../packages/components/image/src/image.ts"],"sourcesContent":["import { buildProps, definePropType, mutable } from '@element-plus/utils/props'\nimport { isNumber } from '@element-plus/utils/util'\n\nimport type { ExtractPropTypes } from 'vue'\n\nexport const imageProps = buildProps({\n  appendToBody: {\n    type: Boolean,\n    default: false,\n  },\n  hideOnClickModal: {\n    type: Boolean,\n    default: false,\n  },\n  src: {\n    type: String,\n    default: '',\n  },\n  fit: {\n    type: String,\n    values: ['', 'contain', 'cover', 'fill', 'none', 'scale-down'],\n    default: '',\n  },\n  lazy: {\n    type: Boolean,\n    default: false,\n  },\n  scrollContainer: {\n    type: definePropType<string | HTMLElement | undefined>([String, Object]),\n  },\n  previewSrcList: {\n    type: definePropType<string[]>(Array),\n    default: () => mutable([] as const),\n  },\n  zIndex: {\n    type: Number,\n    default: 2000,\n  },\n  initialIndex: {\n    type: Number,\n    default: 0,\n  },\n} as const)\nexport type ImageProps = ExtractPropTypes<typeof imageProps>\n\nexport const imageEmits = {\n  error: (evt: Event) => evt instanceof Event,\n  switch: (val: number) => isNumber(val),\n  close: () => true,\n}\nexport type ImageEmits = typeof imageEmits\n"],"names":["buildProps","definePropType","mutable","isNumber"],"mappings":";;;;;;;AAEY,MAAC,UAAU,GAAGA,gBAAU,CAAC;AACrC,EAAE,YAAY,EAAE;AAChB,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,KAAK;AAClB,GAAG;AACH,EAAE,gBAAgB,EAAE;AACpB,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,KAAK;AAClB,GAAG;AACH,EAAE,GAAG,EAAE;AACP,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,GAAG,EAAE;AACP,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,MAAM,EAAE,CAAC,EAAE,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,YAAY,CAAC;AAClE,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,IAAI,EAAE;AACR,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,KAAK;AAClB,GAAG;AACH,EAAE,eAAe,EAAE;AACnB,IAAI,IAAI,EAAEC,oBAAc,CAAC,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAC1C,GAAG;AACH,EAAE,cAAc,EAAE;AAClB,IAAI,IAAI,EAAEA,oBAAc,CAAC,KAAK,CAAC;AAC/B,IAAI,OAAO,EAAE,MAAMC,aAAO,CAAC,EAAE,CAAC;AAC9B,GAAG;AACH,EAAE,MAAM,EAAE;AACV,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,GAAG;AAChB,GAAG;AACH,EAAE,YAAY,EAAE;AAChB,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,CAAC;AACd,GAAG;AACH,CAAC,EAAE;AACS,MAAC,UAAU,GAAG;AAC1B,EAAE,KAAK,EAAE,CAAC,GAAG,KAAK,GAAG,YAAY,KAAK;AACtC,EAAE,MAAM,EAAE,CAAC,GAAG,KAAKC,aAAQ,CAAC,GAAG,CAAC;AAChC,EAAE,KAAK,EAAE,MAAM,IAAI;AACnB;;;;;"}

package/lib/components/image/src/image.vue.d.ts

@@ -38,8 +38,8 @@ declare const _default: import("vue").DefineComponent<{
     readonly zIndex?: unknown;
     readonly initialIndex?: unknown;
 } & {
-    lazy: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     zIndex: number;
+    lazy: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     appendToBody: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     src: string;
     fit: import("../../../utils/props").BuildPropType<StringConstructor, "" | "fill" | "none" | "contain" | "cover" | "scale-down", unknown>;
@@ -53,8 +53,8 @@ declare const _default: import("vue").DefineComponent<{
     onError?: ((evt: Event) => any) | undefined;
     onSwitch?: ((val: number) => any) | undefined;
 }, {
-    lazy: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     zIndex: number;
+    lazy: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     appendToBody: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     src: string;
     fit: import("../../../utils/props").BuildPropType<StringConstructor, "" | "fill" | "none" | "contain" | "cover" | "scale-down", unknown>;

package/lib/components/image/src/image.vue_vue_type_script_lang.js

@@ -7,7 +7,6 @@ var shared = require('@vue/shared');
 var core = require('@vueuse/core');
 require('../../../hooks/index.js');
 var index = require('../../image-viewer/index.js');
-var isServer = require('../../../utils/isServer.js');
 var dom = require('../../../utils/dom.js');
 var image = require('./image.js');
 var index$1 = require('../../../hooks/use-locale/index.js');
@@ -38,7 +37,7 @@ var script = vue.defineComponent({
     const containerStyle = vue.computed(() => rawAttrs.style);
     const imageStyle = vue.computed(() => {
       const { fit } = props;
-      if (!isServer["default"] && fit) {
+      if (core.isClient && fit) {
         return { objectFit: fit };
       }
       return {};
@@ -57,7 +56,7 @@ var script = vue.defineComponent({
       return previewIndex;
     });
     const loadImage = () => {
-      if (isServer["default"])
+      if (!core.isClient)
         return;
       loading.value = true;
       hasLoadError.value = false;
@@ -91,7 +90,7 @@ var script = vue.defineComponent({
     const lazyLoadHandler = core.useThrottleFn(handleLazyLoad, 200);
     async function addLazyLoadListener() {
       var _a;
-      if (isServer["default"])
+      if (!core.isClient)
         return;
       await vue.nextTick();
       const { scrollContainer } = props;
@@ -108,7 +107,7 @@ var script = vue.defineComponent({
       }
     }
     function removeLazyLoadListener() {
-      if (isServer["default"] || !_scrollContainer.value || !lazyLoadHandler)
+      if (!core.isClient || !_scrollContainer.value || !lazyLoadHandler)
         return;
       stopScrollListener();
       _scrollContainer.value = void 0;

package/lib/components/image/src/image.vue_vue_type_script_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"image.vue_vue_type_script_lang.js","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 } from '@vueuse/core'\nimport { useAttrs, useLocale } from '@element-plus/hooks'\nimport ImageViewer from '@element-plus/components/image-viewer'\nimport isServer from '@element-plus/utils/isServer'\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 (!isServer && 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 (isServer) return\n\n      // reset status\n      loading.value = true\n      hasLoadError.value = false\n\n      const img = new Image()\n      img.addEventListener('load', (e) => handleLoad(e, img))\n      img.addEventListener('error', handleError)\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 = props.src\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 (isServer) 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 (isServer || !_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":["defineComponent","ImageViewer","imageProps","imageEmits","useLocale","useAttrs","ref","computed","isServer","isInContainer","useThrottleFn","nextTick","isString","getScrollContainer","useEventListener"],"mappings":"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"}
+{"version":3,"file":"image.vue_vue_type_script_lang.js","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      img.addEventListener('load', (e) => handleLoad(e, img))\n      img.addEventListener('error', handleError)\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 = props.src\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":["defineComponent","ImageViewer","imageEmits","ref","computed","isClient","isInContainer","useThrottleFn","isString","getScrollContainer"],"mappings":";;;;;;;;;;;;;;AAkDA,mBAAmB,GAAG,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,QAAQ;;AAE5C,aAAeA,mBAAe,CAAC;;AAE/B,EAAE,UAAU,EAAE;iBACVC,mBAAW;;AAEf,EAAE,YAAY;;AAEd,EAAE,KAAK,EAAEC,gBAAU;EACjB,MAAM,KAAK,EAAE,EAAE;IACb,MAAM,EAAE;IACR,MAAM,KAAK;;IAEX,MAAM,OAAO,GAAGC;;IAEhB,MAAM,SAAS;IACf,MAAM;;IAEN,MAAM,gBAAgB,UAAM,EAAE,CAAC;IAC/B,IAAI,kBAAkB,CAAC;;IAEvB,MAAM,cAAc,GAAGC;IACvB,MAAM,UAAU,GAAGA,YAAQ,CAAC;MAC1B,MAAM,EAAE,QAAQ,KAAK,CAAC;MACtB,IAAIC,iBAAY,GAAG;QACjB,OAAO,EAAE,SAAS;OACnB;MACD,OAAO,EAAE,CAAC;;IAEZ,MAAM,OAAO,GAAGD,aAAS,MAAM;MAC7B,MAAM,EAAE,cAAc;MACtB,OAAO,KAAK,CAAC,QAAQ;;IAEvB,MAAM,UAAU,GAAGA,YAAQ,CAAC;;MAE1B,IAAI,eAAe,YAAY,CAAC;MAChC,MAAM,QAAQ,GAAG;MACjB,IAAI,YAAY,CAAC,EAAE;QACjB,YAAY,GAAG,SAAS;;MAE1B,OAAO;KACR;;MAEC,IAAI,CAACC;QACH,OAAO;MACT,OAAO,CAAC,KAAK,GAAG,IAAI,CAAC;;;MAGrB,IAAI,gBAAgB,CAAC,MAAM,EAAE,CAAC;MAC9B,GAAG,CAAC,gBAAgB,CAAC,SAAS,YAAY;MAC1C,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;QAC1B,IAAI,GAAG,CAAC,WAAW,EAAE,KAAK,QAAQ;UAChC,OAAO;QACT,GAAG,CAAC,YAAY,CAAC,GAAG,EAAE;;MAExB,GAAG,CAAC,GAAG,GAAG,KAAK,CAAC;KACjB;;MAEC,QAAQ,CAAC,KAAK,GAAG,GAAG;MACpB,SAAS,CAAC,KAAK,GAAG;;MAElB,YAAY,CAAC;;aAEN,YAAY,KAAK;;MAExB,YAAY,CAAC,KAAK,GAAG;MACrB,IAAI,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;;;MAGrB,IAAIC,iBAAa;iBACN,EAAE,CAAC;QACZ,sBAAsB,EAAE,CAAC;;;UAGvB,eAAe,GAAGC,kBAAa,CAAC;;MAEpC,IAAI,EAAE;;;MAGN,kBAAc,EAAE,CAAC;MACjB,MAAM,EAAE,eAAe,EAAE;MACzB,IAAI,cAAc;QAChB,gBAAgB,CAAC;OAClB,MAAM,IAAIC,eAAQ;;;QAGjB,gBAAgB,CAAC,KAAK,GAAGC;OAC1B;MACD,IAAI,iBAAiB;QACnB;;;KAGH;aACQ,sBAAsB,GAAG;UAC5B,CAACJ;QACH,OAAO;MACT;;KAED;;MAEC,IAAI,CAAC,CAAC,CAAC,OAAO;eACL;;QAEP,CAAC,CAAC;;OAEH,UAAU,CAAC,CAAC,MAAM,GAAG;SACnB,CAAC,cAAc,EAAE,CAAC;QACnB,OAAO,KAAK,CAAC;;;aAGR,YAAY,GAAG;MACtB,IAAI,CAAC,OAAO,CAAC,KAAK;QAChB,OAAO;MACT;;OAEC,EAAE;kBACS,GAAG,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC;cAC3B,CAAC,IAAI,CAAC,KAAK,CAAC;gBACV,CAAC;;;uBAGM,IAAI,IAAI,GAAG,KAAK,CAAC,GAAG;MACrC;;;KAGD;aACQ,YAAY,CAAC,GAAG,EAAE;;;aAGtB,CAAC,MAAM,KAAK,CAAC,GAAG,EAAE,MAAM;;;QAGzB,YAAY,CAAC,KAAK,GAAG,KAAK,CAAC;;;OAG5B,MAAM;QACL,SAAS,EAAE,CAAC;;MAEd;iBACO,CAAC,MAAM;UACV,KAAK,CAAC;;;;OAIT;MACD,CAAC;WACI;;MAEL,OAAO;kBACK;MACZ;;MAEA;MACA,OAAO;MACP,UAAU;MACV,SAAS;;;MAGT,YAAY;MACZ,CAAC;MACD;;;;;;"}

package/lib/components/image/src/image.vue_vue_type_template_id_34467287_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"image.vue_vue_type_template_id_34467287_lang.js","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 } from '@vueuse/core'\nimport { useAttrs, useLocale } from '@element-plus/hooks'\nimport ImageViewer from '@element-plus/components/image-viewer'\nimport isServer from '@element-plus/utils/isServer'\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 (!isServer && 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 (isServer) return\n\n      // reset status\n      loading.value = true\n      hasLoadError.value = false\n\n      const img = new Image()\n      img.addEventListener('load', (e) => handleLoad(e, img))\n      img.addEventListener('error', handleError)\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 = props.src\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 (isServer) 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 (isServer || !_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":["_createElementBlock","_renderSlot","_createElementVNode","_mergeProps","_createBlock"],"mappings":";;;;;;mEAOW,OAAM;qBAGN,OAAM;;;;;0BATfA;IACE,KAAI;AAAA,IACH,uCAAoB,YAAO;AAAA,IAC3B,0BAAO;;IAEI,eAAZC,uDAAA;MACE;AAAA,SAEe,oBAAjBA,iDAAA;MACEC,8BAAA,gCAAgC;2BAElCF,8BAAAG;;MAEE,OAAM;AAAA,OACE;MACP,KAAK;MACL,OAAO;MACP;;;MAGA,gDAAO;;sBAEVC;MAAU,IAAG;AAAA,MAAQ,WAAW;;MACd,iCAAhBJ;QAEU,oCADRI;;UAEG,WAAS;UACT,iBAAe;UACf,YAAU;UACV,uBAAqB;UACrB,SAAO;UACP,UAAQ;;+BAET;YAAW,YAAO,2BAAlBJ;cACEC;;;;;;;;;;;;"}
+{"version":3,"file":"image.vue_vue_type_template_id_34467287_lang.js","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      img.addEventListener('load', (e) => handleLoad(e, img))\n      img.addEventListener('error', handleError)\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 = props.src\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,mDAA2B;;;;;;;;;;;;;;;kBAa3B,EAAE;;iBAEA;;;YAGL;;mBAEH;UAAa;;;mBACY;yBAAvB;;;;;kBAIKA,mCAAyB;;;2CAGP;kBAClBA;;;;;;;"}

package/lib/components/image-viewer/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../packages/components/image-viewer/index.ts"],"sourcesContent":["import { withInstall } from '@element-plus/utils/with-install'\n\nimport ImageViewer from './src/image-viewer.vue'\n\nexport const ElImageViewer = withInstall(ImageViewer)\nexport default ElImageViewer\n\nexport * from './src/image-viewer'\n"],"names":["withInstall","ImageViewer"],"mappings":";;;;;;;;;MAIa,gBAAgBA,wBAAYC;;;;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../../packages/components/image-viewer/index.ts"],"sourcesContent":["import { withInstall } from '@element-plus/utils/with-install'\n\nimport ImageViewer from './src/image-viewer.vue'\n\nexport const ElImageViewer = withInstall(ImageViewer)\nexport default ElImageViewer\n\nexport * from './src/image-viewer'\n"],"names":["withInstall","ImageViewer"],"mappings":";;;;;;;;;AAEY,MAAC,aAAa,GAAGA,uBAAW,CAACC,+CAAW;;;;;;;"}

package/lib/components/image-viewer/src/image-viewer.js.map

@@ -1 +1 @@
-{"version":3,"file":"image-viewer.js","sources":["../../../../../../packages/components/image-viewer/src/image-viewer.ts"],"sourcesContent":["import { buildProps, definePropType, mutable } from '@element-plus/utils/props'\nimport type { ExtractPropTypes } from 'vue'\n\nexport const imageViewerProps = buildProps({\n  urlList: {\n    type: definePropType<string[]>(Array),\n    default: () => mutable([] as const),\n  },\n  zIndex: {\n    type: Number,\n    default: 2000,\n  },\n  initialIndex: {\n    type: Number,\n    default: 0,\n  },\n  infinite: {\n    type: Boolean,\n    default: true,\n  },\n  hideOnClickModal: {\n    type: Boolean,\n    default: false,\n  },\n} as const)\nexport type ImageViewerProps = ExtractPropTypes<typeof imageViewerProps>\n\nexport const imageViewerEmits = {\n  close: () => true,\n  switch: (index: number) => typeof index === 'number',\n}\nexport type ImageViewerEmits = typeof imageViewerEmits\n"],"names":["buildProps","definePropType","mutable"],"mappings":";;;;;;MAGa,mBAAmBA,iBAAW;AAAA,EACzC,SAAS;AAAA,IACP,MAAMC,qBAAyB;AAAA,IAC/B,SAAS,MAAMC,cAAQ;AAAA;AAAA,EAEzB,QAAQ;AAAA,IACN,MAAM;AAAA,IACN,SAAS;AAAA;AAAA,EAEX,cAAc;AAAA,IACZ,MAAM;AAAA,IACN,SAAS;AAAA;AAAA,EAEX,UAAU;AAAA,IACR,MAAM;AAAA,IACN,SAAS;AAAA;AAAA,EAEX,kBAAkB;AAAA,IAChB,MAAM;AAAA,IACN,SAAS;AAAA;AAAA;MAKA,mBAAmB;AAAA,EAC9B,OAAO,MAAM;AAAA,EACb,QAAQ,CAAC,UAAkB,OAAO,UAAU;AAAA;;;;;"}
+{"version":3,"file":"image-viewer.js","sources":["../../../../../../packages/components/image-viewer/src/image-viewer.ts"],"sourcesContent":["import { buildProps, definePropType, mutable } from '@element-plus/utils/props'\nimport type { ExtractPropTypes } from 'vue'\n\nexport const imageViewerProps = buildProps({\n  urlList: {\n    type: definePropType<string[]>(Array),\n    default: () => mutable([] as const),\n  },\n  zIndex: {\n    type: Number,\n    default: 2000,\n  },\n  initialIndex: {\n    type: Number,\n    default: 0,\n  },\n  infinite: {\n    type: Boolean,\n    default: true,\n  },\n  hideOnClickModal: {\n    type: Boolean,\n    default: false,\n  },\n} as const)\nexport type ImageViewerProps = ExtractPropTypes<typeof imageViewerProps>\n\nexport const imageViewerEmits = {\n  close: () => true,\n  switch: (index: number) => typeof index === 'number',\n}\nexport type ImageViewerEmits = typeof imageViewerEmits\n"],"names":["buildProps","definePropType","mutable"],"mappings":";;;;;;AACY,MAAC,gBAAgB,GAAGA,gBAAU,CAAC;AAC3C,EAAE,OAAO,EAAE;AACX,IAAI,IAAI,EAAEC,oBAAc,CAAC,KAAK,CAAC;AAC/B,IAAI,OAAO,EAAE,MAAMC,aAAO,CAAC,EAAE,CAAC;AAC9B,GAAG;AACH,EAAE,MAAM,EAAE;AACV,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,GAAG;AAChB,GAAG;AACH,EAAE,YAAY,EAAE;AAChB,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,CAAC;AACd,GAAG;AACH,EAAE,QAAQ,EAAE;AACZ,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,IAAI;AACjB,GAAG;AACH,EAAE,gBAAgB,EAAE;AACpB,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,KAAK;AAClB,GAAG;AACH,CAAC,EAAE;AACS,MAAC,gBAAgB,GAAG;AAChC,EAAE,KAAK,EAAE,MAAM,IAAI;AACnB,EAAE,MAAM,EAAE,CAAC,KAAK,KAAK,OAAO,KAAK,KAAK,QAAQ;AAC9C;;;;;"}

package/lib/components/image-viewer/src/image-viewer.vue_vue_type_script_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"image-viewer.vue_vue_type_script_lang.js","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":["markRaw","FullScreen","ScaleToOriginal","isFirefox","defineComponent","ElIcon","Close","ArrowLeft","ArrowRight","ZoomOut","ZoomIn","RefreshLeft","RefreshRight","imageViewerProps","imageViewerEmits","useLocale","ref","effectScope","computed","rafThrottle","EVENT_CODE","useEventListener"],"mappings":"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"}
+{"version":3,"file":"image-viewer.vue_vue_type_script_lang.js","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":["markRaw","ScaleToOriginal","defineComponent","Close","ArrowLeft","ArrowRight","ZoomOut","ZoomIn","RefreshLeft","imageViewerProps","imageViewerEmits","computed","EVENT_CODE","useEventListener","nextTick","watch"],"mappings":"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"}

package/lib/components/image-viewer/src/image-viewer.vue_vue_type_template_id_4b22ad85_lang.js

@@ -117,6 +117,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
         vue.createElementVNode("div", _hoisted_5, [
           (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.urlList, (url, i) => {
             return vue.withDirectives((vue.openBlock(), vue.createElementBlock("img", {
+              ref_for: true,
               ref: "img",
               key: url,
               src: url,

package/lib/components/image-viewer/src/image-viewer.vue_vue_type_template_id_4b22ad85_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"image-viewer.vue_vue_type_template_id_4b22ad85_lang.js","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;iEAON,OAAM;iEAIN,OAAM;qBAUR,OAAM;;;;;;;;;;;0BAzDfA,kCAAY,MAAK;yBACf;MAAAC;QACE,KAAI;AAAA,QACH,UAAU;AAAA,QACX,OAAM;AAAA,QACL,oCAAS;;QAEVA;UACE,OAAM;AAAA,UACL,iEAAY,yBAAoB;;QAGnCC;QACAD;UAAM,OAAM;AAAA,UAA+C,gDAAO;;UAChEE;iCAAS;cAAAA,gBAAS;AAAA;AAAA;;;QAGpBD;SACiB,kCAAjBE;UACEH;YACE,2BAAM,gEACoB,iBAAY;YACrC,gDAAO;;YAERE;mCAAS;gBAAAA,gBAAc;AAAA;AAAA;;;UAEzBF;YACE,2BAAM,gEACoB,iBAAY;YACrC,gDAAO;;YAERE;mCAAS;gBAAAA,gBAAe;AAAA;AAAA;;;;QAG5BD;QACAD,8BAAA;UACEA,8BAAA;YACEE;cAAU,+CAAO;;mCACf;gBAAAA;;;;YAEFA;cAAU,+CAAO;;mCACf;gBAAAA;;;;YAEF;AAAA,YACAA,sCAAU,SAAO;mCACf;kCAAAH,4CAAgB,UAAK;AAAA;AAAA;;YAEvB;AAAA,YACAG;cAAU,+CAAO;;mCACf;gBAAAA;;;;YAEFA;cAAU,+CAAO;;mCACf;gBAAAA;;;;;;QAIND;QACAD,8BAAA;gCACEG,0DACqB,eAAX,KAAK;wDADfA;cAGE,KAAI;AAAA,cACH,KAAK;AAAA,cACL,KAAK;AAAA,cACL,0BAAO;cACR,OAAM;AAAA,cACL,+CAAM;cACN,gDAAO;cACP,sDAAW;;0BARJ,MAAM;;;;QAWlBC;;;;;;;;;"}
+{"version":3,"file":"image-viewer.vue_vue_type_template_id_4b22ad85_lang.js","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":["_createElementVNode","_createVNode"],"mappings":";;;;;;;qBAoCW,KAAK,EAAC;;;;0BAsBD;;;;;;;;;;;;;;;;QAvDV,KAAI;;QAEJA;;;;;;;;;UASMC;;;;;;;;;;;;;;qBAOG;gBAEJA;;;;;;;;;;qBAKI;gBAEJA;;;;;;;;;;;;;;;cAQS;;;;;;;;cAGA;;;;;;;;;;;;;;;;cAQA;;;;;;;;cAGA;;;;;;;;;;;;qDAOZ;;cAGE;cACC;cACA;mBACK;cACN,UAAM;cACL;cACA;;;;;;;;;;;"}

package/lib/components/infinite-scroll/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../packages/components/infinite-scroll/index.ts"],"sourcesContent":["import InfiniteScroll from './src/index'\n\nimport type { App } from 'vue'\nimport type { SFCWithInstall } from '@element-plus/utils/types'\n\nconst _InfiniteScroll = InfiniteScroll as SFCWithInstall<typeof InfiniteScroll>\n\n_InfiniteScroll.install = (app: App) => {\n  app.directive('InfiniteScroll', _InfiniteScroll)\n}\n\nexport default _InfiniteScroll\nexport const ElInfiniteScroll = _InfiniteScroll\n"],"names":["InfiniteScroll"],"mappings":";;;;;;MAKM,kBAAkBA;AAExB,gBAAgB,UAAU,CAAC,QAAa;AACtC,MAAI,UAAU,kBAAkB;AAAA;MAIrB,mBAAmB;;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../../packages/components/infinite-scroll/index.ts"],"sourcesContent":["import InfiniteScroll from './src/index'\n\nimport type { App } from 'vue'\nimport type { SFCWithInstall } from '@element-plus/utils/types'\n\nconst _InfiniteScroll = InfiniteScroll as SFCWithInstall<typeof InfiniteScroll>\n\n_InfiniteScroll.install = (app: App) => {\n  app.directive('InfiniteScroll', _InfiniteScroll)\n}\n\nexport default _InfiniteScroll\nexport const ElInfiniteScroll = _InfiniteScroll\n"],"names":["InfiniteScroll"],"mappings":";;;;;;AACK,MAAC,eAAe,GAAGA,iBAAe;AACvC,eAAe,CAAC,OAAO,GAAG,CAAC,GAAG,KAAK;AACnC,EAAE,GAAG,CAAC,SAAS,CAAC,gBAAgB,EAAE,eAAe,CAAC,CAAC;AACnD,CAAC,CAAC;AAEU,MAAC,gBAAgB,GAAG;;;;;"}