npm - element-plus - Versions diffs - 1.2.0-beta.6 → 1.3.0-beta.1 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1690) hide show

package/es/components/form/index.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.mjs","sources":["../../../../../packages/components/form/index.ts"],"sourcesContent":["import { withInstall, withNoopInstall } from '@element-plus/utils/with-install'\nimport Form from './src/form.vue'\nimport FormItem from './src/form-item.vue'\n\nexport const ElForm = withInstall(Form, {\n FormItem,\n})\n\nexport default ElForm\n\nexport const ElFormItem = withNoopInstall(FormItem)\n"],"names":["Form","FormItem"],"mappings":";;;;;;~~MAIa~~,~~SAAS~~,~~YAAYA~~,~~QAAM~~;~~AAAA~~,~~YACtCC~~;~~AAAA~~;~~MAKW~~,~~aAAa~~,~~gBAAgBA~~;;;;"}
1	+ {"version":3,"file":"index.mjs","sources":["../../../../../packages/components/form/index.ts"],"sourcesContent":["import { withInstall, withNoopInstall } from '@element-plus/utils/with-install'\nimport Form from './src/form.vue'\nimport FormItem from './src/form-item.vue'\n\nexport const ElForm = withInstall(Form, {\n FormItem,\n})\n\nexport default ElForm\n\nexport const ElFormItem = withNoopInstall(FormItem)\n"],"names":["Form","FormItem"],"mappings":";;;;;;AAGY,MAAC,MAAM,GAAG,WAAW,CAACA,MAAI,EAAE;AACxC,YAAEC,QAAQ;AACV,CAAC,EAAE;AAES,MAAC,UAAU,GAAG,eAAe,CAACA,QAAQ;;;;"}

package/es/components/form/src/form-item.vue_vue_type_script_lang.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"form-item.vue_vue_type_script_lang.mjs","sources":["../../../../../../packages/components/form/src/form-item.vue"],"sourcesContent":["<template>\n <div ref=\"formItemRef\" class=\"el-form-item\" :class=\"formItemClass\">\n <LabelWrap\n :is-auto-width=\"labelStyle.width === 'auto'\"\n :update-all=\"elForm.labelWidth === 'auto'\"\n >\n <label\n v-if=\"label \|\| $slots.label\"\n :for=\"labelFor\"\n class=\"el-form-item__label\"\n :style=\"labelStyle\"\n >\n <slot name=\"label\" :label=\"currentLabel\">\n {{ currentLabel }}\n </slot>\n </label>\n </LabelWrap>\n <div class=\"el-form-item__content\" :style=\"contentStyle\">\n <slot></slot>\n <transition name=\"el-zoom-in-top\">\n <slot v-if=\"shouldShowError\" name=\"error\" :error=\"validateMessage\">\n <div\n class=\"el-form-item__error\"\n :class=\"{\n 'el-form-item__error--inline':\n typeof inlineMessage === 'boolean'\n ? inlineMessage\n : elForm.inlineMessage \|\| false,\n }\"\n >\n {{ validateMessage }}\n </div>\n </slot>\n </transition>\n </div>\n </div>\n</template>\n\n<script lang=\"ts\">\nimport {\n computed,\n defineComponent,\n getCurrentInstance,\n inject,\n onBeforeUnmount,\n onMounted,\n provide,\n reactive,\n ref,\n toRefs,\n watch,\n nextTick,\n} from 'vue'\nimport { NOOP } from '@vue/shared'\nimport AsyncValidator from 'async-validator'\nimport { addUnit, getPropByPath } from '@element-plus/utils/util'\nimport { isValidComponentSize } from '@element-plus/utils/validators'\nimport { elFormItemKey, elFormKey } from '@element-plus/tokens'\nimport { useSize } from '@element-plus/hooks'\nimport LabelWrap from './label-wrap'\n\nimport type { PropType, CSSProperties } from 'vue'\nimport type { ComponentSize } from '@element-plus/utils/types'\nimport type { ElFormContext, ValidateFieldCallback } from '@element-plus/tokens'\nimport type { FormItemRule } from './form.type'\n\nexport default defineComponent({\n name: 'ElFormItem',\n componentName: 'ElFormItem',\n components: {\n LabelWrap,\n },\n props: {\n label: String,\n labelWidth: {\n type: [String, Number],\n default: '',\n },\n prop: String,\n required: {\n type: Boolean,\n default: undefined,\n },\n rules: [Object, Array] as PropType<FormItemRule \| FormItemRule[]>,\n error: String,\n validateStatus: String,\n for: String,\n inlineMessage: {\n type: [String, Boolean],\n default: '',\n },\n showMessage: {\n type: Boolean,\n default: true,\n },\n size: {\n type: String as PropType<ComponentSize>,\n validator: isValidComponentSize,\n },\n },\n setup(props, { slots }) {\n const elForm = inject(elFormKey, {} as ElFormContext)\n const validateState = ref('')\n const validateMessage = ref('')\n const isValidationEnabled = ref(false)\n\n const computedLabelWidth = ref('')\n\n const formItemRef = ref<HTMLDivElement>()\n\n const vm = getCurrentInstance()\n const isNested = computed(() => {\n let parent = vm.parent\n while (parent && parent.type.name !== 'ElForm') {\n if (parent.type.name === 'ElFormItem') {\n return true\n }\n parent = parent.parent\n }\n return false\n })\n\n let initialValue = undefined\n\n watch(\n () => props.error,\n (val) => {\n validateMessage.value = val\n validateState.value = val ? 'error' : ''\n },\n {\n immediate: true,\n }\n )\n watch(\n () => props.validateStatus,\n (val) => {\n validateState.value = val\n }\n )\n\n const labelFor = computed(() => props.for \|\| props.prop)\n const labelStyle = computed(() => {\n const ret: CSSProperties = {}\n if (elForm.labelPosition === 'top') return ret\n const labelWidth = addUnit(props.labelWidth \|\| elForm.labelWidth)\n if (labelWidth) {\n ret.width = labelWidth\n }\n return ret\n })\n const contentStyle = computed(() => {\n const ret: CSSProperties = {}\n if (elForm.labelPosition === 'top' \|\| elForm.inline) {\n return ret\n }\n if (!props.label && !props.labelWidth && isNested.value) {\n return ret\n }\n const labelWidth = addUnit(props.labelWidth \|\| elForm.labelWidth)\n if (!props.label && !slots.label) {\n ret.marginLeft = labelWidth\n }\n return ret\n })\n const fieldValue = computed(() => {\n const model = elForm.model\n if (!model \|\| !props.prop) {\n return\n }\n\n let path = props.prop\n if (path.indexOf(':') !== -1) {\n path = path.replace(/:/, '.')\n }\n\n return getPropByPath(model, path, true).v\n })\n const isRequired = computed(() => {\n const rules = getRules()\n let required = false\n\n if (rules && rules.length) {\n rules.every((rule) => {\n if (rule.required) {\n required = true\n return false\n }\n return true\n })\n }\n return required\n })\n const sizeClass = useSize(undefined, { formItem: false })\n\n const validate = (\n trigger: string,\n callback: ValidateFieldCallback = NOOP\n ) => {\n if (!isValidationEnabled.value) {\n callback()\n return\n }\n const rules = getFilteredRule(trigger)\n if ((!rules \|\| rules.length === 0) && props.required === undefined) {\n callback()\n return\n }\n validateState.value = 'validating'\n const descriptor = {}\n if (rules && rules.length > 0) {\n rules.forEach((rule) => {\n delete rule.trigger\n })\n }\n descriptor[props.prop] = rules\n const validator = new AsyncValidator(descriptor)\n const model = {}\n model[props.prop] = fieldValue.value\n validator.validate(model, { firstFields: true }, (errors, fields) => {\n validateState.value = !errors ? 'success' : 'error'\n validateMessage.value = errors\n ? errors[0].message \|\| `${props.prop} is required`\n : ''\n // fix: #3860 after version 3.5.2, async-validator also return fields if validation fails\n callback(validateMessage.value, errors ? fields : {})\n elForm.emit?.(\n 'validate',\n props.prop,\n !errors,\n validateMessage.value \|\| null\n )\n })\n }\n\n const clearValidate = () => {\n validateState.value = ''\n validateMessage.value = ''\n }\n const resetField = () => {\n const model = elForm.model\n const value = fieldValue.value\n let path = props.prop\n if (path.indexOf(':') !== -1) {\n path = path.replace(/:/, '.')\n }\n const prop = getPropByPath(model, path, true)\n if (Array.isArray(value)) {\n prop.o[prop.k] = [].concat(initialValue)\n } else {\n prop.o[prop.k] = initialValue\n }\n nextTick(() => {\n clearValidate()\n })\n }\n\n const getRules = () => {\n const formRules = elForm.rules\n const selfRules = props.rules\n const requiredRule =\n props.required !== undefined ? { required: !!props.required } : []\n\n const prop = getPropByPath(formRules, props.prop \|\| '', false)\n const normalizedRule = formRules ? prop.o[props.prop \|\| ''] \|\| prop.v : []\n\n return [].concat(selfRules \|\| normalizedRule \|\| []).concat(requiredRule)\n }\n const getFilteredRule = (trigger) => {\n const rules = getRules()\n\n return rules\n .filter((rule) => {\n if (!rule.trigger \|\| trigger === '') return true\n if (Array.isArray(rule.trigger)) {\n return rule.trigger.indexOf(trigger) > -1\n } else {\n return rule.trigger === trigger\n }\n })\n .map((rule) => ({ ...rule }))\n }\n\n const evaluateValidationEnabled = () => {\n isValidationEnabled.value = !!getRules()?.length\n }\n\n const updateComputedLabelWidth = (width: string \| number) => {\n computedLabelWidth.value = width ? `${width}px` : ''\n }\n\n const elFormItem = reactive({\n ...toRefs(props),\n size: sizeClass,\n validateState,\n $el: formItemRef,\n evaluateValidationEnabled,\n resetField,\n clearValidate,\n validate,\n updateComputedLabelWidth,\n })\n\n onMounted(() => {\n if (props.prop) {\n elForm?.addField(elFormItem)\n\n const value = fieldValue.value\n initialValue = Array.isArray(value) ? [...value] : value\n\n evaluateValidationEnabled()\n }\n })\n onBeforeUnmount(() => {\n elForm?.removeField(elFormItem)\n })\n\n provide(elFormItemKey, elFormItem)\n\n const formItemClass = computed(() => [\n {\n 'el-form-item--feedback': elForm.statusIcon,\n 'is-error': validateState.value === 'error',\n 'is-validating': validateState.value === 'validating',\n 'is-success': validateState.value === 'success',\n 'is-required': isRequired.value \|\| props.required,\n 'is-no-asterisk': elForm.hideRequiredAsterisk,\n },\n sizeClass.value ? `el-form-item--${sizeClass.value}` : '',\n ])\n\n const shouldShowError = computed(() => {\n return (\n validateState.value === 'error' &&\n props.showMessage &&\n elForm.showMessage\n )\n })\n\n const currentLabel = computed(\n () => (props.label \|\| '') + (elForm.labelSuffix \|\| '')\n )\n\n return {\n formItemRef,\n formItemClass,\n shouldShowError,\n elForm,\n labelStyle,\n contentStyle,\n validateMessage,\n labelFor,\n resetField,\n clearValidate,\n currentLabel,\n }\n },\n})\n</script>\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"form-item.vue_vue_type_script_lang.mjs","sources":["../../../../../../packages/components/form/src/form-item.vue"],"sourcesContent":["<template>\n <div ref=\"formItemRef\" class=\"el-form-item\" :class=\"formItemClass\">\n <LabelWrap\n :is-auto-width=\"labelStyle.width === 'auto'\"\n :update-all=\"elForm.labelWidth === 'auto'\"\n >\n <label\n v-if=\"label \|\| $slots.label\"\n :for=\"labelFor\"\n class=\"el-form-item__label\"\n :style=\"labelStyle\"\n >\n <slot name=\"label\" :label=\"currentLabel\">\n {{ currentLabel }}\n </slot>\n </label>\n </LabelWrap>\n <div class=\"el-form-item__content\" :style=\"contentStyle\">\n <slot></slot>\n <transition name=\"el-zoom-in-top\">\n <slot v-if=\"shouldShowError\" name=\"error\" :error=\"validateMessage\">\n <div\n class=\"el-form-item__error\"\n :class=\"{\n 'el-form-item__error--inline':\n typeof inlineMessage === 'boolean'\n ? inlineMessage\n : elForm.inlineMessage \|\| false,\n }\"\n >\n {{ validateMessage }}\n </div>\n </slot>\n </transition>\n </div>\n </div>\n</template>\n\n<script lang=\"ts\">\nimport {\n computed,\n defineComponent,\n getCurrentInstance,\n inject,\n onBeforeUnmount,\n onMounted,\n provide,\n reactive,\n ref,\n toRefs,\n watch,\n nextTick,\n} from 'vue'\nimport { NOOP } from '@vue/shared'\nimport AsyncValidator from 'async-validator'\nimport { addUnit, getPropByPath } from '@element-plus/utils/util'\nimport { isValidComponentSize } from '@element-plus/utils/validators'\nimport { elFormItemKey, elFormKey } from '@element-plus/tokens'\nimport { useSize } from '@element-plus/hooks'\nimport LabelWrap from './label-wrap'\n\nimport type { PropType, CSSProperties } from 'vue'\nimport type { ComponentSize } from '@element-plus/utils/types'\nimport type { ElFormContext, ValidateFieldCallback } from '@element-plus/tokens'\nimport type { FormItemRule } from './form.type'\n\nexport default defineComponent({\n name: 'ElFormItem',\n componentName: 'ElFormItem',\n components: {\n LabelWrap,\n },\n props: {\n label: String,\n labelWidth: {\n type: [String, Number],\n default: '',\n },\n prop: String,\n required: {\n type: Boolean,\n default: undefined,\n },\n rules: [Object, Array] as PropType<FormItemRule \| FormItemRule[]>,\n error: String,\n validateStatus: String,\n for: String,\n inlineMessage: {\n type: [String, Boolean],\n default: '',\n },\n showMessage: {\n type: Boolean,\n default: true,\n },\n size: {\n type: String as PropType<ComponentSize>,\n validator: isValidComponentSize,\n },\n },\n setup(props, { slots }) {\n const elForm = inject(elFormKey, {} as ElFormContext)\n const validateState = ref('')\n const validateMessage = ref('')\n const isValidationEnabled = ref(false)\n\n const computedLabelWidth = ref('')\n\n const formItemRef = ref<HTMLDivElement>()\n\n const vm = getCurrentInstance()\n const isNested = computed(() => {\n let parent = vm.parent\n while (parent && parent.type.name !== 'ElForm') {\n if (parent.type.name === 'ElFormItem') {\n return true\n }\n parent = parent.parent\n }\n return false\n })\n\n let initialValue = undefined\n\n watch(\n () => props.error,\n (val) => {\n validateMessage.value = val\n validateState.value = val ? 'error' : ''\n },\n {\n immediate: true,\n }\n )\n watch(\n () => props.validateStatus,\n (val) => {\n validateState.value = val\n }\n )\n\n const labelFor = computed(() => props.for \|\| props.prop)\n const labelStyle = computed(() => {\n const ret: CSSProperties = {}\n if (elForm.labelPosition === 'top') return ret\n const labelWidth = addUnit(props.labelWidth \|\| elForm.labelWidth)\n if (labelWidth) {\n ret.width = labelWidth\n }\n return ret\n })\n const contentStyle = computed(() => {\n const ret: CSSProperties = {}\n if (elForm.labelPosition === 'top' \|\| elForm.inline) {\n return ret\n }\n if (!props.label && !props.labelWidth && isNested.value) {\n return ret\n }\n const labelWidth = addUnit(props.labelWidth \|\| elForm.labelWidth)\n if (!props.label && !slots.label) {\n ret.marginLeft = labelWidth\n }\n return ret\n })\n const fieldValue = computed(() => {\n const model = elForm.model\n if (!model \|\| !props.prop) {\n return\n }\n\n let path = props.prop\n if (path.indexOf(':') !== -1) {\n path = path.replace(/:/, '.')\n }\n\n return getPropByPath(model, path, true).v\n })\n const isRequired = computed(() => {\n const rules = getRules()\n let required = false\n\n if (rules && rules.length) {\n rules.every((rule) => {\n if (rule.required) {\n required = true\n return false\n }\n return true\n })\n }\n return required\n })\n const sizeClass = useSize(undefined, { formItem: false })\n\n const validate = (\n trigger: string,\n callback: ValidateFieldCallback = NOOP\n ) => {\n if (!isValidationEnabled.value) {\n callback()\n return\n }\n const rules = getFilteredRule(trigger)\n if ((!rules \|\| rules.length === 0) && props.required === undefined) {\n callback()\n return\n }\n validateState.value = 'validating'\n const descriptor = {}\n if (rules && rules.length > 0) {\n rules.forEach((rule) => {\n delete rule.trigger\n })\n }\n descriptor[props.prop] = rules\n const validator = new AsyncValidator(descriptor)\n const model = {}\n model[props.prop] = fieldValue.value\n validator.validate(model, { firstFields: true }, (errors, fields) => {\n validateState.value = !errors ? 'success' : 'error'\n validateMessage.value = errors\n ? errors[0].message \|\| `${props.prop} is required`\n : ''\n // fix: #3860 after version 3.5.2, async-validator also return fields if validation fails\n callback(validateMessage.value, errors ? fields : {})\n elForm.emit?.(\n 'validate',\n props.prop,\n !errors,\n validateMessage.value \|\| null\n )\n })\n }\n\n const clearValidate = () => {\n validateState.value = ''\n validateMessage.value = ''\n }\n const resetField = () => {\n const model = elForm.model\n const value = fieldValue.value\n let path = props.prop\n if (path.indexOf(':') !== -1) {\n path = path.replace(/:/, '.')\n }\n const prop = getPropByPath(model, path, true)\n if (Array.isArray(value)) {\n prop.o[prop.k] = [].concat(initialValue)\n } else {\n prop.o[prop.k] = initialValue\n }\n nextTick(() => {\n clearValidate()\n })\n }\n\n const getRules = () => {\n const formRules = elForm.rules\n const selfRules = props.rules\n const requiredRule =\n props.required !== undefined ? { required: !!props.required } : []\n\n const prop = getPropByPath(formRules, props.prop \|\| '', false)\n const normalizedRule = formRules ? prop.o[props.prop \|\| ''] \|\| prop.v : []\n\n return [].concat(selfRules \|\| normalizedRule \|\| []).concat(requiredRule)\n }\n const getFilteredRule = (trigger) => {\n const rules = getRules()\n\n return rules\n .filter((rule) => {\n if (!rule.trigger \|\| trigger === '') return true\n if (Array.isArray(rule.trigger)) {\n return rule.trigger.indexOf(trigger) > -1\n } else {\n return rule.trigger === trigger\n }\n })\n .map((rule) => ({ ...rule }))\n }\n\n const evaluateValidationEnabled = () => {\n isValidationEnabled.value = !!getRules()?.length\n }\n\n const updateComputedLabelWidth = (width: string \| number) => {\n computedLabelWidth.value = width ? `${width}px` : ''\n }\n\n const elFormItem = reactive({\n ...toRefs(props),\n size: sizeClass,\n validateState,\n $el: formItemRef,\n evaluateValidationEnabled,\n resetField,\n clearValidate,\n validate,\n updateComputedLabelWidth,\n })\n\n onMounted(() => {\n if (props.prop) {\n elForm?.addField(elFormItem)\n\n const value = fieldValue.value\n initialValue = Array.isArray(value) ? [...value] : value\n\n evaluateValidationEnabled()\n }\n })\n onBeforeUnmount(() => {\n elForm?.removeField(elFormItem)\n })\n\n provide(elFormItemKey, elFormItem)\n\n const formItemClass = computed(() => [\n {\n 'el-form-item--feedback': elForm.statusIcon,\n 'is-error': validateState.value === 'error',\n 'is-validating': validateState.value === 'validating',\n 'is-success': validateState.value === 'success',\n 'is-required': isRequired.value \|\| props.required,\n 'is-no-asterisk': elForm.hideRequiredAsterisk,\n },\n sizeClass.value ? `el-form-item--${sizeClass.value}` : '',\n ])\n\n const shouldShowError = computed(() => {\n return (\n validateState.value === 'error' &&\n props.showMessage &&\n elForm.showMessage\n )\n })\n\n const currentLabel = computed(\n () => (props.label \|\| '') + (elForm.labelSuffix \|\| '')\n )\n\n return {\n formItemRef,\n formItemClass,\n shouldShowError,\n elForm,\n labelStyle,\n contentStyle,\n validateMessage,\n labelFor,\n resetField,\n clearValidate,\n currentLabel,\n }\n },\n})\n</script>\n"],"names":[],"mappings":"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"}

package/es/components/form/src/form-item.vue_vue_type_template_id_24eda48b_lang.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"form-item.vue_vue_type_template_id_24eda48b_lang.mjs","sources":["../../../../../../packages/components/form/src/form-item.vue?vue&type=template&id=24eda48b&lang.js"],"sourcesContent":["<template>\n <div ref=\"formItemRef\" class=\"el-form-item\" :class=\"formItemClass\">\n <LabelWrap\n :is-auto-width=\"labelStyle.width === 'auto'\"\n :update-all=\"elForm.labelWidth === 'auto'\"\n >\n <label\n v-if=\"label \|\| $slots.label\"\n :for=\"labelFor\"\n class=\"el-form-item__label\"\n :style=\"labelStyle\"\n >\n <slot name=\"label\" :label=\"currentLabel\">\n {{ currentLabel }}\n </slot>\n </label>\n </LabelWrap>\n <div class=\"el-form-item__content\" :style=\"contentStyle\">\n <slot></slot>\n <transition name=\"el-zoom-in-top\">\n <slot v-if=\"shouldShowError\" name=\"error\" :error=\"validateMessage\">\n <div\n class=\"el-form-item__error\"\n :class=\"{\n 'el-form-item__error--inline':\n typeof inlineMessage === 'boolean'\n ? inlineMessage\n : elForm.inlineMessage \|\| false,\n }\"\n >\n {{ validateMessage }}\n </div>\n </slot>\n </transition>\n </div>\n </div>\n</template>\n\n<script lang=\"ts\">\nimport {\n computed,\n defineComponent,\n getCurrentInstance,\n inject,\n onBeforeUnmount,\n onMounted,\n provide,\n reactive,\n ref,\n toRefs,\n watch,\n nextTick,\n} from 'vue'\nimport { NOOP } from '@vue/shared'\nimport AsyncValidator from 'async-validator'\nimport { addUnit, getPropByPath } from '@element-plus/utils/util'\nimport { isValidComponentSize } from '@element-plus/utils/validators'\nimport { elFormItemKey, elFormKey } from '@element-plus/tokens'\nimport { useSize } from '@element-plus/hooks'\nimport LabelWrap from './label-wrap'\n\nimport type { PropType, CSSProperties } from 'vue'\nimport type { ComponentSize } from '@element-plus/utils/types'\nimport type { ElFormContext, ValidateFieldCallback } from '@element-plus/tokens'\nimport type { FormItemRule } from './form.type'\n\nexport default defineComponent({\n name: 'ElFormItem',\n componentName: 'ElFormItem',\n components: {\n LabelWrap,\n },\n props: {\n label: String,\n labelWidth: {\n type: [String, Number],\n default: '',\n },\n prop: String,\n required: {\n type: Boolean,\n default: undefined,\n },\n rules: [Object, Array] as PropType<FormItemRule \| FormItemRule[]>,\n error: String,\n validateStatus: String,\n for: String,\n inlineMessage: {\n type: [String, Boolean],\n default: '',\n },\n showMessage: {\n type: Boolean,\n default: true,\n },\n size: {\n type: String as PropType<ComponentSize>,\n validator: isValidComponentSize,\n },\n },\n setup(props, { slots }) {\n const elForm = inject(elFormKey, {} as ElFormContext)\n const validateState = ref('')\n const validateMessage = ref('')\n const isValidationEnabled = ref(false)\n\n const computedLabelWidth = ref('')\n\n const formItemRef = ref<HTMLDivElement>()\n\n const vm = getCurrentInstance()\n const isNested = computed(() => {\n let parent = vm.parent\n while (parent && parent.type.name !== 'ElForm') {\n if (parent.type.name === 'ElFormItem') {\n return true\n }\n parent = parent.parent\n }\n return false\n })\n\n let initialValue = undefined\n\n watch(\n () => props.error,\n (val) => {\n validateMessage.value = val\n validateState.value = val ? 'error' : ''\n },\n {\n immediate: true,\n }\n )\n watch(\n () => props.validateStatus,\n (val) => {\n validateState.value = val\n }\n )\n\n const labelFor = computed(() => props.for \|\| props.prop)\n const labelStyle = computed(() => {\n const ret: CSSProperties = {}\n if (elForm.labelPosition === 'top') return ret\n const labelWidth = addUnit(props.labelWidth \|\| elForm.labelWidth)\n if (labelWidth) {\n ret.width = labelWidth\n }\n return ret\n })\n const contentStyle = computed(() => {\n const ret: CSSProperties = {}\n if (elForm.labelPosition === 'top' \|\| elForm.inline) {\n return ret\n }\n if (!props.label && !props.labelWidth && isNested.value) {\n return ret\n }\n const labelWidth = addUnit(props.labelWidth \|\| elForm.labelWidth)\n if (!props.label && !slots.label) {\n ret.marginLeft = labelWidth\n }\n return ret\n })\n const fieldValue = computed(() => {\n const model = elForm.model\n if (!model \|\| !props.prop) {\n return\n }\n\n let path = props.prop\n if (path.indexOf(':') !== -1) {\n path = path.replace(/:/, '.')\n }\n\n return getPropByPath(model, path, true).v\n })\n const isRequired = computed(() => {\n const rules = getRules()\n let required = false\n\n if (rules && rules.length) {\n rules.every((rule) => {\n if (rule.required) {\n required = true\n return false\n }\n return true\n })\n }\n return required\n })\n const sizeClass = useSize(undefined, { formItem: false })\n\n const validate = (\n trigger: string,\n callback: ValidateFieldCallback = NOOP\n ) => {\n if (!isValidationEnabled.value) {\n callback()\n return\n }\n const rules = getFilteredRule(trigger)\n if ((!rules \|\| rules.length === 0) && props.required === undefined) {\n callback()\n return\n }\n validateState.value = 'validating'\n const descriptor = {}\n if (rules && rules.length > 0) {\n rules.forEach((rule) => {\n delete rule.trigger\n })\n }\n descriptor[props.prop] = rules\n const validator = new AsyncValidator(descriptor)\n const model = {}\n model[props.prop] = fieldValue.value\n validator.validate(model, { firstFields: true }, (errors, fields) => {\n validateState.value = !errors ? 'success' : 'error'\n validateMessage.value = errors\n ? errors[0].message \|\| `${props.prop} is required`\n : ''\n // fix: #3860 after version 3.5.2, async-validator also return fields if validation fails\n callback(validateMessage.value, errors ? fields : {})\n elForm.emit?.(\n 'validate',\n props.prop,\n !errors,\n validateMessage.value \|\| null\n )\n })\n }\n\n const clearValidate = () => {\n validateState.value = ''\n validateMessage.value = ''\n }\n const resetField = () => {\n const model = elForm.model\n const value = fieldValue.value\n let path = props.prop\n if (path.indexOf(':') !== -1) {\n path = path.replace(/:/, '.')\n }\n const prop = getPropByPath(model, path, true)\n if (Array.isArray(value)) {\n prop.o[prop.k] = [].concat(initialValue)\n } else {\n prop.o[prop.k] = initialValue\n }\n nextTick(() => {\n clearValidate()\n })\n }\n\n const getRules = () => {\n const formRules = elForm.rules\n const selfRules = props.rules\n const requiredRule =\n props.required !== undefined ? { required: !!props.required } : []\n\n const prop = getPropByPath(formRules, props.prop \|\| '', false)\n const normalizedRule = formRules ? prop.o[props.prop \|\| ''] \|\| prop.v : []\n\n return [].concat(selfRules \|\| normalizedRule \|\| []).concat(requiredRule)\n }\n const getFilteredRule = (trigger) => {\n const rules = getRules()\n\n return rules\n .filter((rule) => {\n if (!rule.trigger \|\| trigger === '') return true\n if (Array.isArray(rule.trigger)) {\n return rule.trigger.indexOf(trigger) > -1\n } else {\n return rule.trigger === trigger\n }\n })\n .map((rule) => ({ ...rule }))\n }\n\n const evaluateValidationEnabled = () => {\n isValidationEnabled.value = !!getRules()?.length\n }\n\n const updateComputedLabelWidth = (width: string \| number) => {\n computedLabelWidth.value = width ? `${width}px` : ''\n }\n\n const elFormItem = reactive({\n ...toRefs(props),\n size: sizeClass,\n validateState,\n $el: formItemRef,\n evaluateValidationEnabled,\n resetField,\n clearValidate,\n validate,\n updateComputedLabelWidth,\n })\n\n onMounted(() => {\n if (props.prop) {\n elForm?.addField(elFormItem)\n\n const value = fieldValue.value\n initialValue = Array.isArray(value) ? [...value] : value\n\n evaluateValidationEnabled()\n }\n })\n onBeforeUnmount(() => {\n elForm?.removeField(elFormItem)\n })\n\n provide(elFormItemKey, elFormItem)\n\n const formItemClass = computed(() => [\n {\n 'el-form-item--feedback': elForm.statusIcon,\n 'is-error': validateState.value === 'error',\n 'is-validating': validateState.value === 'validating',\n 'is-success': validateState.value === 'success',\n 'is-required': isRequired.value \|\| props.required,\n 'is-no-asterisk': elForm.hideRequiredAsterisk,\n },\n sizeClass.value ? `el-form-item--${sizeClass.value}` : '',\n ])\n\n const shouldShowError = computed(() => {\n return (\n validateState.value === 'error' &&\n props.showMessage &&\n elForm.showMessage\n )\n })\n\n const currentLabel = computed(\n () => (props.label \|\| '') + (elForm.labelSuffix \|\| '')\n )\n\n return {\n formItemRef,\n formItemClass,\n shouldShowError,\n elForm,\n labelStyle,\n contentStyle,\n validateMessage,\n labelFor,\n resetField,\n clearValidate,\n currentLabel,\n }\n },\n})\n</script>\n"],"names":["_createElementBlock","_createVNode","_renderSlot","_createElementVNode"],"mappings":";;;;;sBACEA;IAAK,KAAI;AAAA,IAAc,uBAAM,gBAAuB;;IAClDC;MACG,iBAAe,gBAAW;MAC1B,cAAY,YAAO;;uBAEpB;QACQ,cAAS,YAAO,sBADxBD;;UAEG,KAAK;UACN,OAAM;AAAA,UACL,sBAAO;;UAERE,mCAAoB,OAAO,qBAA3B;4CACK;;;;;;IAITC;MAAK,OAAM;AAAA,MAAyB,sBAAO;;MACzCD;MACAD,0BAAY,MAAK;yBACf;UAAY,uBAAZC;;YAA2C,OAAO;aAAlD;YACEC;cACE,uBAAM;;;+BAQH;;;;;;;;;;;"}
1	+ {"version":3,"file":"form-item.vue_vue_type_template_id_24eda48b_lang.mjs","sources":["../../../../../../packages/components/form/src/form-item.vue?vue&type=template&id=24eda48b&lang.js"],"sourcesContent":["<template>\n <div ref=\"formItemRef\" class=\"el-form-item\" :class=\"formItemClass\">\n <LabelWrap\n :is-auto-width=\"labelStyle.width === 'auto'\"\n :update-all=\"elForm.labelWidth === 'auto'\"\n >\n <label\n v-if=\"label \|\| $slots.label\"\n :for=\"labelFor\"\n class=\"el-form-item__label\"\n :style=\"labelStyle\"\n >\n <slot name=\"label\" :label=\"currentLabel\">\n {{ currentLabel }}\n </slot>\n </label>\n </LabelWrap>\n <div class=\"el-form-item__content\" :style=\"contentStyle\">\n <slot></slot>\n <transition name=\"el-zoom-in-top\">\n <slot v-if=\"shouldShowError\" name=\"error\" :error=\"validateMessage\">\n <div\n class=\"el-form-item__error\"\n :class=\"{\n 'el-form-item__error--inline':\n typeof inlineMessage === 'boolean'\n ? inlineMessage\n : elForm.inlineMessage \|\| false,\n }\"\n >\n {{ validateMessage }}\n </div>\n </slot>\n </transition>\n </div>\n </div>\n</template>\n\n<script lang=\"ts\">\nimport {\n computed,\n defineComponent,\n getCurrentInstance,\n inject,\n onBeforeUnmount,\n onMounted,\n provide,\n reactive,\n ref,\n toRefs,\n watch,\n nextTick,\n} from 'vue'\nimport { NOOP } from '@vue/shared'\nimport AsyncValidator from 'async-validator'\nimport { addUnit, getPropByPath } from '@element-plus/utils/util'\nimport { isValidComponentSize } from '@element-plus/utils/validators'\nimport { elFormItemKey, elFormKey } from '@element-plus/tokens'\nimport { useSize } from '@element-plus/hooks'\nimport LabelWrap from './label-wrap'\n\nimport type { PropType, CSSProperties } from 'vue'\nimport type { ComponentSize } from '@element-plus/utils/types'\nimport type { ElFormContext, ValidateFieldCallback } from '@element-plus/tokens'\nimport type { FormItemRule } from './form.type'\n\nexport default defineComponent({\n name: 'ElFormItem',\n componentName: 'ElFormItem',\n components: {\n LabelWrap,\n },\n props: {\n label: String,\n labelWidth: {\n type: [String, Number],\n default: '',\n },\n prop: String,\n required: {\n type: Boolean,\n default: undefined,\n },\n rules: [Object, Array] as PropType<FormItemRule \| FormItemRule[]>,\n error: String,\n validateStatus: String,\n for: String,\n inlineMessage: {\n type: [String, Boolean],\n default: '',\n },\n showMessage: {\n type: Boolean,\n default: true,\n },\n size: {\n type: String as PropType<ComponentSize>,\n validator: isValidComponentSize,\n },\n },\n setup(props, { slots }) {\n const elForm = inject(elFormKey, {} as ElFormContext)\n const validateState = ref('')\n const validateMessage = ref('')\n const isValidationEnabled = ref(false)\n\n const computedLabelWidth = ref('')\n\n const formItemRef = ref<HTMLDivElement>()\n\n const vm = getCurrentInstance()\n const isNested = computed(() => {\n let parent = vm.parent\n while (parent && parent.type.name !== 'ElForm') {\n if (parent.type.name === 'ElFormItem') {\n return true\n }\n parent = parent.parent\n }\n return false\n })\n\n let initialValue = undefined\n\n watch(\n () => props.error,\n (val) => {\n validateMessage.value = val\n validateState.value = val ? 'error' : ''\n },\n {\n immediate: true,\n }\n )\n watch(\n () => props.validateStatus,\n (val) => {\n validateState.value = val\n }\n )\n\n const labelFor = computed(() => props.for \|\| props.prop)\n const labelStyle = computed(() => {\n const ret: CSSProperties = {}\n if (elForm.labelPosition === 'top') return ret\n const labelWidth = addUnit(props.labelWidth \|\| elForm.labelWidth)\n if (labelWidth) {\n ret.width = labelWidth\n }\n return ret\n })\n const contentStyle = computed(() => {\n const ret: CSSProperties = {}\n if (elForm.labelPosition === 'top' \|\| elForm.inline) {\n return ret\n }\n if (!props.label && !props.labelWidth && isNested.value) {\n return ret\n }\n const labelWidth = addUnit(props.labelWidth \|\| elForm.labelWidth)\n if (!props.label && !slots.label) {\n ret.marginLeft = labelWidth\n }\n return ret\n })\n const fieldValue = computed(() => {\n const model = elForm.model\n if (!model \|\| !props.prop) {\n return\n }\n\n let path = props.prop\n if (path.indexOf(':') !== -1) {\n path = path.replace(/:/, '.')\n }\n\n return getPropByPath(model, path, true).v\n })\n const isRequired = computed(() => {\n const rules = getRules()\n let required = false\n\n if (rules && rules.length) {\n rules.every((rule) => {\n if (rule.required) {\n required = true\n return false\n }\n return true\n })\n }\n return required\n })\n const sizeClass = useSize(undefined, { formItem: false })\n\n const validate = (\n trigger: string,\n callback: ValidateFieldCallback = NOOP\n ) => {\n if (!isValidationEnabled.value) {\n callback()\n return\n }\n const rules = getFilteredRule(trigger)\n if ((!rules \|\| rules.length === 0) && props.required === undefined) {\n callback()\n return\n }\n validateState.value = 'validating'\n const descriptor = {}\n if (rules && rules.length > 0) {\n rules.forEach((rule) => {\n delete rule.trigger\n })\n }\n descriptor[props.prop] = rules\n const validator = new AsyncValidator(descriptor)\n const model = {}\n model[props.prop] = fieldValue.value\n validator.validate(model, { firstFields: true }, (errors, fields) => {\n validateState.value = !errors ? 'success' : 'error'\n validateMessage.value = errors\n ? errors[0].message \|\| `${props.prop} is required`\n : ''\n // fix: #3860 after version 3.5.2, async-validator also return fields if validation fails\n callback(validateMessage.value, errors ? fields : {})\n elForm.emit?.(\n 'validate',\n props.prop,\n !errors,\n validateMessage.value \|\| null\n )\n })\n }\n\n const clearValidate = () => {\n validateState.value = ''\n validateMessage.value = ''\n }\n const resetField = () => {\n const model = elForm.model\n const value = fieldValue.value\n let path = props.prop\n if (path.indexOf(':') !== -1) {\n path = path.replace(/:/, '.')\n }\n const prop = getPropByPath(model, path, true)\n if (Array.isArray(value)) {\n prop.o[prop.k] = [].concat(initialValue)\n } else {\n prop.o[prop.k] = initialValue\n }\n nextTick(() => {\n clearValidate()\n })\n }\n\n const getRules = () => {\n const formRules = elForm.rules\n const selfRules = props.rules\n const requiredRule =\n props.required !== undefined ? { required: !!props.required } : []\n\n const prop = getPropByPath(formRules, props.prop \|\| '', false)\n const normalizedRule = formRules ? prop.o[props.prop \|\| ''] \|\| prop.v : []\n\n return [].concat(selfRules \|\| normalizedRule \|\| []).concat(requiredRule)\n }\n const getFilteredRule = (trigger) => {\n const rules = getRules()\n\n return rules\n .filter((rule) => {\n if (!rule.trigger \|\| trigger === '') return true\n if (Array.isArray(rule.trigger)) {\n return rule.trigger.indexOf(trigger) > -1\n } else {\n return rule.trigger === trigger\n }\n })\n .map((rule) => ({ ...rule }))\n }\n\n const evaluateValidationEnabled = () => {\n isValidationEnabled.value = !!getRules()?.length\n }\n\n const updateComputedLabelWidth = (width: string \| number) => {\n computedLabelWidth.value = width ? `${width}px` : ''\n }\n\n const elFormItem = reactive({\n ...toRefs(props),\n size: sizeClass,\n validateState,\n $el: formItemRef,\n evaluateValidationEnabled,\n resetField,\n clearValidate,\n validate,\n updateComputedLabelWidth,\n })\n\n onMounted(() => {\n if (props.prop) {\n elForm?.addField(elFormItem)\n\n const value = fieldValue.value\n initialValue = Array.isArray(value) ? [...value] : value\n\n evaluateValidationEnabled()\n }\n })\n onBeforeUnmount(() => {\n elForm?.removeField(elFormItem)\n })\n\n provide(elFormItemKey, elFormItem)\n\n const formItemClass = computed(() => [\n {\n 'el-form-item--feedback': elForm.statusIcon,\n 'is-error': validateState.value === 'error',\n 'is-validating': validateState.value === 'validating',\n 'is-success': validateState.value === 'success',\n 'is-required': isRequired.value \|\| props.required,\n 'is-no-asterisk': elForm.hideRequiredAsterisk,\n },\n sizeClass.value ? `el-form-item--${sizeClass.value}` : '',\n ])\n\n const shouldShowError = computed(() => {\n return (\n validateState.value === 'error' &&\n props.showMessage &&\n elForm.showMessage\n )\n })\n\n const currentLabel = computed(\n () => (props.label \|\| '') + (elForm.labelSuffix \|\| '')\n )\n\n return {\n formItemRef,\n formItemClass,\n shouldShowError,\n elForm,\n labelStyle,\n contentStyle,\n validateMessage,\n labelFor,\n resetField,\n clearValidate,\n currentLabel,\n }\n },\n})\n</script>\n"],"names":["_createVNode"],"mappings":";;;;;;;;;IACOA;4BAAwB,gBAAuB;;;MAE/C,gBAAe;kBACL;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"form.vue_vue_type_script_lang.mjs","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":[],"mappings":";;;;;~~AAkCA~~,~~6BAA6B;AAC3B~~,~~QAAM~~,~~yBAAyB,IAAI~~;~~AACnC~~,~~QAAM~~,~~iBAAiB~~,~~SAAS~~,MAAM~~;AACpC~~,~~QAAI~~,CAAC,~~uBAAuB~~,~~MAAM~~;~~AAAQ~~,~~aAAO~~;~~AACjD~~,~~UAAM~~,MAAM,~~KAAK~~,IAAI,GAAG,~~uBAAuB~~;~~AAC/C~~,~~WAAO~~,~~MAAM~~,~~GAAG,UAAU~~;~~AAAA;AAG5B~~,~~8BAA4B,OAAe~~;~~AACzC~~,~~UAAM~~,~~QAAQ,uBAAuB,~~MAAM,~~QAAQ;AACnD~~,~~QAAI~~,~~UAAU~~,~~IAAI;AAChB~~,~~gBAAU~~,~~QAAQ~~,~~oBAAoB;AAAA;AAExC~~,~~WAAO~~;~~AAAA~~;~~AAGT~~,~~8BAA4B~~,~~KAAa~~,~~QAAgB;AACvD~~,~~QAAI~~,~~OAAO~~,~~QAAQ;AACjB~~,~~YAAM~~,~~QAAQ~~,~~mBAAmB~~;~~AACjC~~,~~6BAAuB~~,~~MAAM,OAAO,OAAO,~~GAAG~~;AAAA~~,~~eACrC~~,~~KAAK;AACd~~,~~6BAAuB~~,MAAM,~~KAAK;AAAA;AAAA;AAItC~~,~~gCAA8B~~,~~KAAa~~;~~AACzC~~,~~UAAM~~,~~QAAQ~~,~~mBAAmB;AACjC~~,~~YAAQ~~,~~MAAM~~,~~uBAAuB~~,~~MAAM~~,~~OAAO~~,~~OAAO~~;~~AAAA;AAG3D~~,~~SAAO~~;~~AAAA,~~IACL~~;AAAA~~,~~IACA~~;~~AAAA,IACA~~;~~AAAA~~;~~AAAA;AAQJ~~,~~aAAe~~,~~gBAAgB;AAAA~~,~~EAC7B,~~MAAM;~~AAAA~~,~~EACN,~~OAAO;~~AAAA,IACL,OAAO;AAAA,~~IACP,~~OAAO;AAAA,IACP,~~eAAe~~;AAAA~~,~~IACf,YAAY;AAAA,MACV,~~MAAM~~,CAAC,QAAQ~~;~~AAAA~~,~~MACf~~,~~SAAS~~;~~AAAA;AAAA~~,~~IAEX~~,~~aAAa;AAAA~~,~~MACX,~~MAAM~~;AAAA~~,~~MACN~~,~~SAAS;AAAA;AAAA~~,~~IAEX~~,~~QAAQ~~;~~AAAA~~,~~IACR~~,~~eAAe;AAAA~~,~~IACf,YAAY~~;~~AAAA~~,~~IACZ,~~aAAa~~;AAAA~~,~~MACX~~,~~MAAM~~;~~AAAA,MACN,SAAS~~;~~AAAA~~;~~AAAA~~,~~IAEX~~,~~MAAM~~;~~AAAA,IACN,UAAU;AAAA,~~IACV,~~sBAAsB;AAAA~~,~~MACpB,MAAM~~;~~AAAA,MACN,SAAS;AAAA;AAAA,IAEX,sBAAsB;AAAA,~~MACpB,~~MAAM;AAAA~~,~~MACN~~,~~SAAS~~;~~AAAA;AAAA~~,~~IAEX~~,~~eAAe;AAAA;AAAA~~,~~EAEjB~~,~~OAAO~~,CAAC;~~AAAA~~,~~EACR~~,~~MAAM~~,~~OAAO~~,EAAE,~~QAAQ;AACrB~~,~~UAAM~~,~~SAAwB~~;~~AAE9B~~,~~UACE,~~MAAM,MAAM,~~OACZ~~,~~MAAM~~;~~AACJ~~,~~aAAO~~,~~QAAQ,~~CAAC~~,UAAU~~;~~AACxB~~,~~cAAM;AAAA;AAGR,UAAI,~~MAAM,~~sBAAsB~~;~~AAC9B~~,~~iBAAS;AAAO;AAAA;AAKtB~~,~~UAAM~~,~~WAAW~~,~~CAAC~~,~~UAAuB~~;~~AACvC~~,~~UAAI~~,~~OAAO~~;~~AACT,eAAO,KAAK~~;~~AAAA;AAAA;AAIhB~~,~~UAAM,cAAc,~~CAAC~~,UAAuB~~;~~AAC1C~~,~~UAAI~~,MAAM,~~MAAM;AACd~~,~~eAAO~~,~~OAAO~~,~~OAAO,QAAQ,QAAQ~~;~~AAAA~~;~~AAAA~~;~~AAIzC~~,~~UAAM~~,~~cAAc~~,~~MAAM;AACxB,UAAI,~~CAAC,~~MAAM~~,~~OAAO~~;~~AAChB~~,~~kBAAU,QAAQ~~;~~AAClB;AAAA;AAEF~~,~~aAAO~~,~~QAAQ~~,~~CAAC~~,~~UAAU~~;~~AACxB,cAAM~~;~~AAAA~~;~~AAAA;AAIV~~,~~UAAM,gBAAgB,~~CAAC,~~SAA2B,~~OAAO~~;AACvD~~,~~YAAM~~,~~MAAM~~,~~OAAM~~,~~SACd~~,~~OAAO~~,~~WAAU~~,~~WACf~~,~~OAAO~~,~~OAAO,~~CAAC,~~UAAU~~,~~WAAU~~,MAAM,~~QACzC~~,~~OAAO~~,~~OAAO~~,~~CAAC~~,~~UAAU~~,~~OAAM,QAAQ,~~MAAM,~~QAAQ~~,~~MACvD;AACJ~~,~~UAAI,~~QAAQ,~~CAAC,UAAU~~;~~AACrB~~,~~cAAM;AAAA;AAAA;AAIV~~,~~UAAM,WAAW,~~CAAC,~~aAAwB~~;~~AACxC~~,~~UAAI~~,CAAC,MAAM,OAAO~~;AAChB~~,~~kBAAU,~~QAAQ~~;AAClB;AAAA;AAGF~~,~~UAAI;AAEJ~~,~~UAAI~~,~~OAAO,aAAa,YAAY~~;~~AAClC~~,~~kBAAU~~,IAAI,QAAQ,~~CAAC~~,SAAS,~~WAAW;AACzC~~,~~qBAAW~~,~~SAAU,QAAO,gBAAe~~;~~AACzC,gBAAI,QAAO~~;~~AACT~~,~~sBAAQ~~;~~AAAA~~,~~mBACH;AACL~~,~~qBAAO;AAAA;AAAA;AAAA;AAAA;AAMf~~,~~UAAI~~,~~OAAO~~,~~WAAW~~,~~GAAG;AACvB~~,~~iBAAS~~;~~AAAA;AAEX~~,~~UAAI,~~QAAQ~~;AACZ~~,~~UAAI~~,~~QAAQ;AACZ~~,~~UAAI~~,~~gBAAgB~~;~~AACpB~~,~~UAAI;AACJ~~,~~iBAAW~~,~~SAAS~~,~~QAAQ~~;~~AAC1B~~,~~cAAM~~,~~SAAS~~,~~IAAI,~~CAAC~~,SAAS,WAAU~~;~~AACrC~~,~~cAAI~~,~~SAAS;AACX~~,~~oBAAQ~~;~~AACR~~,~~wDAA4C;AAAA;AAE9C~~,~~0BAAgB~~,~~KAAK~~,~~kBAAkB;AACvC~~,~~cAAI,~~EAAE,~~UAAU~~,OAAO,~~QAAQ~~;~~AAC7B~~,~~qBAAS~~,OAAO;~~AAAA~~;~~AAAA~~;~~AAAA~~;~~AAItB~~,~~UAAI~~,CAAC,~~SAAS~~,~~MAAM~~,~~eAAe;AACjC,sBAAc,~~OAAO,~~KAAK,oBAAoB~~;~~AAAA~~;~~AAEhD~~,~~aAAO;AAAA;AAGT~~,~~UAAM~~,~~gBAAgB~~,~~CACpB~~,~~QACA~~,~~OACG;AACH~~,~~eAAQ,GAAG,OAAO~~;~~AAClB~~,~~YAAM~~,MAAM,~~OAAO~~,~~OAAO~~,CAAC,~~UAAU~~,~~OAAM~~,~~QAAQ~~,MAAM,~~UAAU;AACnE~~,~~UAAI,~~CAAC,~~OAAO~~,~~QAAQ;AAClB~~,~~kBAAU~~,~~QAAQ~~;~~AAClB;AAAA;AAGF~~,~~UAAI,QAAQ,~~CAAC~~,UAAU~~;~~AACrB~~,~~cAAM~~,~~SAAS~~,~~IAAI~~;~~AAAA~~;~~AAAA;AAIvB~~,~~UAAM~~,~~gBAAgB,~~CAAC,~~SAAiB;AACtC~~,~~aAAO~~,~~QAAQ,~~CAAC,~~SAAS;AACvB~~,~~YAAI,~~KAAK,~~SAAS~~,~~MAAM;AACtB~~,~~eAAK~~,IAAI;~~AAAA~~;~~AAAA;AAAA;AAKf~~,~~UAAM~~,~~SAAS~~,~~SAAS~~;~~AAAA~~,~~SACnB~~,~~OAAO~~;~~AAAA,MACV~~;~~AAAA,MACA~~;~~AAAA~~,~~MACA~~;~~AAAA,~~MACA~~;AAAA~~,~~MACA;AAAA,MACA;AAAA,SACG;AAAA;AAGL,YAAQ,~~WAAW;~~AAEnB,WAAO~~;~~AAAA,MACL~~;~~AAAA,~~MACA~~;AAAA~~,~~MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA;AAAA;;;;~~"}
1	+ {"version":3,"file":"form.vue_vue_type_script_lang.mjs","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":[],"mappings":"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"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"form.vue_vue_type_template_id_602d6cf6_lang.mjs","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":"~~;;;sBACEA;IACE,uBAAM;;;;;IAMNC;;;;;;~~"}
1	+ {"version":3,"file":"form.vue_vue_type_template_id_602d6cf6_lang.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;"}

package/es/components/form/src/label-wrap.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"label-wrap.mjs","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":[],"mappings":";;;;;~~AAsBA~~,gBAAe,~~gBAAgB~~;~~AAAA~~,~~EAC7B~~,~~MAAM;AAAA~~,~~EACN~~,~~OAAO~~;~~AAAA~~,~~IACL~~,~~aAAa~~;~~AAAA~~,~~IACb~~,WAAW;~~AAAA;AAAA~~,~~EAEb~~,~~MAAM~~,~~OAAO,~~EAAE,~~SAAS~~;AACtB,~~UAAM~~,KAAK,~~IAA2B~~;~~AACtC~~,~~UAAM~~,SAAS,~~OAAO~~;~~AACtB~~,~~UAAM~~,aAAa,~~OAAO~~;~~AAE1B~~,~~UAAM~~,~~gBAAgB~~,~~IAAI;AAC1B~~,~~UAAM~~,~~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~~,~~eAAS~~,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~~,~~cAAU~~,MAAM;~~AACd~~,~~wBACE~~,~~GAAG~~,MAAM,~~mBACT~~;~~AAEF~~;~~AAAA;AAGF~~,~~cAAU~~;~~AAEV~~,~~oBAAgB~~,MAAM;~~AAxE1B~~;~~AAyEM~~,~~uBAAiB~~;~~AACjB~~,~~2BACE~~,~~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~~,~~eAAO~~,~~EACL~~,~~OACA;AAAA~~,~~UACE~~,KAAK;~~AAAA~~,~~UACL~~,~~OAAO~~,CAAC;~~AAAA~~,~~UACR~~;~~AAAA~~,~~WAEF~~,~~YAAM~~,~~YAAN~~;~~AAAA~~,~~aAEG~~;~~AACL~~,~~eAAO~~,EAAE,~~UAAU~~,EAAE,KAAK,~~MAAM~~,~~YAAM~~,~~YAAN~~;~~AAAA~~;~~AAAA~~;~~AAIpC~~,~~WAAO~~;~~AAAA~~;~~AAAA~~;;;;"}
1	+ {"version":3,"file":"label-wrap.mjs","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":[],"mappings":"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"}

package/es/components/icon/index.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.mjs","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":["Icon"],"mappings":";;;;;~~MAIa~~,~~SAAS~~,~~YAAYA~~;;;;"}
1	+ {"version":3,"file":"index.mjs","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":["Icon"],"mappings":";;;;;AAEY,MAAC,MAAM,GAAG,WAAW,CAACA,MAAI;;;;"}

package/es/components/icon/src/icon.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"icon.mjs","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":[],"mappings":";;~~MAGa~~,~~YAAY~~,~~WAAW~~;~~AAAA~~,~~EAClC~~,~~MAAM~~;~~AAAA~~,~~IACJ~~,MAAM,~~eAAgC~~,CAAC,~~QAAQ~~;~~AAAA~~;~~AAAA~~,~~EAEjD~~,~~OAAO~~;~~AAAA~~,~~IACL~~,MAAM;~~AAAA~~;~~AAAA~~;;;;"}
1	+ {"version":3,"file":"icon.mjs","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":[],"mappings":";;AACY,MAAC,SAAS,GAAG,UAAU,CAAC;AACpC,EAAE,IAAI,EAAE;AACR,IAAI,IAAI,EAAE,cAAc,CAAC,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAC1C,GAAG;AACH,EAAE,KAAK,EAAE;AACT,IAAI,IAAI,EAAE,MAAM;AAChB,GAAG;AACH,CAAC;;;;"}

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

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"icon.vue_vue_type_script_lang.mjs","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":[],"mappings":";;;;;~~AAaA~~,aAAe,~~gBAAgB;AAAA~~,~~EAC7B~~,~~MAAM;AAAA~~,~~EACN~~,~~cAAc;AAAA~~,~~EAEd~~,~~OAAO;AAAA~~,~~EAEP~~,~~MAAM~~,~~OAAO;AACX~~,~~WAAO~~;~~AAAA~~,~~MACL,~~OAAO~~,SAAwB,MAAM~~;~~AACnC~~,~~YAAI~~,~~CAAC~~,~~MAAM,~~QAAQ,~~CAAC,MAAM,~~OAAO~~;AAC/B~~,~~iBAAO~~;~~AAAA~~;~~AAET~~,~~YAAI~~,~~OAAO~~,~~MAAM;AACjB~~,~~YAAI~~,~~SAAS~~,~~SAAU~~,~~SAAS~~,~~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;;;;~~"}
1	+ {"version":3,"file":"icon.vue_vue_type_script_lang.mjs","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":[],"mappings":";;;;;AASA,aAAe,eAAe,CAAC;;AAE/B,EAAE,YAAY,EAAE,KAAK;;AAErB,EAAE,KAAK,CAAC,KAAK,EAAE;IACX,OAAO;MACL,KAAK,EAAE,QAAQ;;UAEX,OAAO;;QAET,IAAI;QACJ;UACE,IAAI,GAAG,CAAC,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC;SACpB;eACM;;UAEL,GAAG,MAAM,KAAK,GAAG;SAClB;;;;;;;;"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"icon.vue_vue_type_template_id_89b755b6_lang.mjs","sources":["../../../../../../packages/components/icon/src/icon.vue?vue&type=template&id=89b755b6&lang.js"],"sourcesContent":["<template>\n <i class=\"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":"~~;;;sBACEA~~,~~wBAAAC;IAAG~~,~~OAAM~~;~~AAAA,IAAW,OAAO~~;~~KAAe;IACxCC~~;;;;;;"}
1	+ {"version":3,"file":"icon.vue_vue_type_template_id_89b755b6_lang.mjs","sources":["../../../../../../packages/components/icon/src/icon.vue?vue&type=template&id=89b755b6&lang.js"],"sourcesContent":["<template>\n <i class=\"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;eAAuB;;;;;;"}

package/es/components/image/index.d.ts CHANGED Viewed

@@ -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/es/components/image/index.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.mjs","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":["Image"],"mappings":";;;;;~~MAIa~~,~~UAAU~~,~~YAAYA~~;;;;"}
1	+ {"version":3,"file":"index.mjs","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":["Image"],"mappings":";;;;;AAEY,MAAC,OAAO,GAAG,WAAW,CAACA,MAAK;;;;"}

package/es/components/image/src/image.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"image.mjs","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":[],"mappings":";;;~~MAKa~~,~~aAAa~~,~~WAAW~~;~~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~~,MAAM,~~eAAiD~~,CAAC,~~QAAQ~~;~~AAAA~~;~~AAAA~~,~~EAElE~~,~~gBAAgB~~;~~AAAA~~,~~IACd~~,~~MAAM~~,~~eAAyB~~;~~AAAA,IAC~~/B,~~SAAS~~,MAAM,~~QAAQ~~;~~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,~~QAAgB~~,~~SAAS~~;~~AAAA~~,~~EAClC~~,~~OAAO~~,MAAM;~~AAAA~~;;;;"}
1	+ {"version":3,"file":"image.mjs","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":[],"mappings":";;;AAEY,MAAC,UAAU,GAAG,UAAU,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,EAAE,cAAc,CAAC,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAC1C,GAAG;AACH,EAAE,cAAc,EAAE;AAClB,IAAI,IAAI,EAAE,cAAc,CAAC,KAAK,CAAC;AAC/B,IAAI,OAAO,EAAE,MAAM,OAAO,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,KAAK,QAAQ,CAAC,GAAG,CAAC;AAChC,EAAE,KAAK,EAAE,MAAM,IAAI;AACnB;;;;"}

package/es/components/image/src/image.vue.d.ts CHANGED Viewed

@@ -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/es/components/image/src/image.vue_vue_type_script_lang.mjs CHANGED Viewed

@@ -1,9 +1,8 @@
 import { defineComponent, ref, computed, nextTick, watch, onMounted } from 'vue';
 import { isString } from '@vue/shared';
-import { useThrottleFn, useEventListener } from '@vueuse/core';
+import { isClient, useThrottleFn, useEventListener } from '@vueuse/core';
 import '../../../hooks/index.mjs';
 import { ElImageViewer } from '../../image-viewer/index.mjs';
-import isServer from '../../../utils/isServer.mjs';
 import { isInContainer, getScrollContainer } from '../../../utils/dom.mjs';
 import { imageProps, imageEmits } from './image.mjs';
 import { useLocale } from '../../../hooks/use-locale/index.mjs';
@@ -34,7 +33,7 @@ var script = defineComponent({
     const containerStyle = computed(() => rawAttrs.style);
     const imageStyle = computed(() => {
       const { fit } = props;
-      if (!isServer && fit) {
+      if (isClient && fit) {
         return { objectFit: fit };
       }
       return {};
@@ -53,7 +52,7 @@ var script = defineComponent({
       return previewIndex;
     });
     const loadImage = () => {
-      if (isServer)
+      if (!isClient)
         return;
       loading.value = true;
       hasLoadError.value = false;
@@ -87,7 +86,7 @@ var script = defineComponent({
     const lazyLoadHandler = useThrottleFn(handleLazyLoad, 200);
     async function addLazyLoadListener() {
       var _a;
-      if (isServer)
+      if (!isClient)
         return;
       await nextTick();
       const { scrollContainer } = props;
@@ -104,7 +103,7 @@ var script = defineComponent({
       }
     }
     function removeLazyLoadListener() {
-      if (isServer || !_scrollContainer.value || !lazyLoadHandler)
+      if (!isClient || !_scrollContainer.value || !lazyLoadHandler)
         return;
       stopScrollListener();
       _scrollContainer.value = void 0;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"image.vue_vue_type_script_lang.mjs","sources":["../../../../../../packages/components/image/src/image.vue"],"sourcesContent":["<template>\n <div\n ref=\"container\"\n :class=\"['el-image', $attrs.class]\"\n :style=\"containerStyle\"\n >\n <slot v-if=\"loading\" name=\"placeholder\">\n <div class=\"el-image__placeholder\"></div>\n </slot>\n <slot v-else-if=\"hasLoadError\" name=\"error\">\n <div class=\"el-image__error\">{{ t('el.image.error') }}</div>\n </slot>\n <img\n v-else\n class=\"el-image__inner\"\n v-bind=\"attrs\"\n :src=\"src\"\n :style=\"imageStyle\"\n :class=\"{\n 'el-image__preview': preview,\n }\"\n @click=\"clickHandler\"\n />\n <teleport to=\"body\" :disabled=\"!appendToBody\">\n <template v-if=\"preview\">\n <image-viewer\n v-if=\"showViewer\"\n :z-index=\"zIndex\"\n :initial-index=\"imageIndex\"\n :url-list=\"previewSrcList\"\n :hide-on-click-modal=\"hideOnClickModal\"\n @close=\"closeViewer\"\n @switch=\"switchViewer\"\n >\n <div v-if=\"$slots.viewer\">\n <slot name=\"viewer\" />\n </div>\n </image-viewer>\n </template>\n </teleport>\n </div>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, computed, ref, onMounted, watch, nextTick } from 'vue'\nimport { isString } from '@vue/shared'\nimport { useEventListener, useThrottleFn } 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":["ImageViewer"],"mappings":"~~;;;;;;;;;;;AAuDA~~,~~MAAM~~,~~gBAAgB~~,CAAC,~~MACrB~~,KAAK,~~EAAE~~,~~aAAa~~,~~KAAK;AAE3B~~,~~IAAI~~,~~eAAe;AAEnB~~,aAAe,~~gBAAgB;AAAA~~,~~EAC7B~~,~~MAAM;AAAA~~,~~EACN~~,~~YAAY~~;~~AAAA,~~iBACVA~~;AAAA;AAAA~~,~~EAEF~~,~~cAAc;AAAA~~,~~EAEd~~,~~OAAO;AAAA~~,~~EACP~~,~~OAAO~~;~~AAAA~~,~~EAEP,~~MAAM,~~OAAO~~,EAAE,~~MAAM,OAAO,YAAY~~;~~AACtC~~,~~UAAM~~,EAAE,MAAM~~;AAEd~~,~~UAAM~~,~~QAAQ;AACd~~,~~UAAM~~,~~eAAe~~,~~IAAI;AACzB~~,~~UAAM,UAAU,IAAI~~;~~AACpB~~,~~UAAM~~,~~WAAW~~,~~IAAI;AACrB~~,~~UAAM~~,~~YAAY~~,~~IAAI~~;~~AACtB~~,~~UAAM,aAAa,~~IAAI~~;AACvB~~,~~UAAM~~,~~YAAY;AAElB~~,~~UAAM~~,~~mBAAmB;AACzB~~,~~QAAI~~;~~AACJ~~,~~QAAI;AAEJ~~,~~UAAM~~,~~iBAAiB~~,~~SAAS~~,~~MAAM,SAAS~~;~~AAE/C~~,~~UAAM,aAAa,SAAwB,~~MAAM~~;AAC/C~~,~~YAAM,~~EAAE,QAAQ~~;AAChB~~,~~UAAI~~,CAAC,YAAY,~~KAAK~~;~~AACpB~~,~~eAAO~~,EAAE,~~WAAW~~;~~AAAA~~;~~AAEtB~~,~~aAAO;AAAA;AAGT~~,~~UAAM~~,~~UAAU~~,SAAS,MAAM;~~AAC7B~~,~~YAAM~~,EAAE,~~mBAAmB~~;~~AAC3B~~,~~aAAO~~,~~MAAM~~,QAAQ,~~mBAAmB~~,~~eAAe~~,~~SAAS;AAAA;AAGlE~~,~~UAAM~~,~~aAAa~~,~~SAAS~~,~~MAAM;AAChC~~,~~YAAM~~,~~EAAE~~,~~KAAK~~,~~gBAAgB~~,~~iBAAiB~~;~~AAC9C~~,~~UAAI~~,~~eAAe;AACnB~~,~~YAAM~~,~~WAAW,eAAe,QAAQ~~;~~AACxC~~,~~UAAI,~~YAAY,GAAG~~;AACjB~~,~~uBAAe;AAAA;AAEjB~~,~~aAAO~~;~~AAAA;AAGT~~,~~UAAM~~,~~YAAY,MAAM~~;~~AACtB~~,~~UAAI~~;~~AAAU;AAGd~~,~~cAAQ~~,~~QAAQ;AAChB~~,~~mBAAa~~,~~QAAQ;AAErB~~,~~YAAM~~,~~MAAM~~,IAAI~~;AAChB~~,~~UAAI~~,~~iBAAiB,QAAQ,~~CAAC,MAAM,~~WAAW~~,~~GAAG~~;~~AAClD~~,~~UAAI~~,~~iBAAiB~~,SAAS;~~AAI9B~~,~~aAAO~~,~~QAAQ~~,~~MAAM,~~OAAO,~~QAAQ,~~CAAC,CAAC,KAAK,~~WAAW~~;~~AAEpD~~,~~YAAI,~~IAAI,~~kBAAkB;AAAU;AACpC~~,~~YAAI~~,~~aAAa~~,KAAK;~~AAAA~~;~~AAExB~~,~~UAAI~~,~~MAAM~~,~~MAAM;AAAA;AAGlB~~,~~wBAAoB~~,~~GAAU~~,~~KAAuB;AACnD~~,~~eAAS~~,~~QAAQ~~,~~IAAI;AACrB~~,~~gBAAU~~,~~QAAQ~~,~~IAAI~~;~~AACtB~~,~~cAAQ,~~QAAQ~~;AAChB~~,~~mBAAa~~,~~QAAQ;AAAA;AAGvB~~,~~yBAAqB~~,~~OAAc~~;~~AACjC~~,~~cAAQ~~,~~QAAQ;AAChB~~,~~mBAAa~~,~~QAAQ;AACrB~~,~~WAAK~~,~~SAAS;AAAA;AAGhB~~,~~8BAA0B~~;~~AACxB~~,~~UAAI~~,~~cAAc~~,~~UAAU,~~OAAO,~~iBAAiB~~,~~QAAQ;AAC1D;AACA;AAAA;AAAA;AAGJ~~,~~UAAM~~,~~kBAAkB~~,~~cAAc~~,~~gBAAgB~~;~~AAEtD~~,~~yCAAqC;;AACnC~~,~~UAAI~~;~~AAAU;AAEd~~,~~YAAM;AAEN~~,~~YAAM,~~EAAE,~~oBAAoB;AAC5B~~,~~UAAI~~,~~cAAc~~,~~kBAAkB;AAClC~~,~~yBAAiB~~,~~QAAQ;AAAA~~,~~iBAChB~~,~~SAAS~~,~~oBAAoB~~,~~oBAAoB,IAAI~~;~~AAC9D~~,~~yBAAiB~~,~~QACf~~,~~eAAS~~,~~cAA2B~~,~~qBAApC~~,~~YAAwD~~;~~AAAA~~,~~iBACjD~~,~~UAAU,OAAO~~;~~AAC1B~~,~~yBAAiB~~,QAAQ,~~mBAAmB~~,~~UAAU~~;~~AAAA~~;~~AAGxD~~,~~UAAI~~,iBAAiB~~,OAAO~~;~~AAC1B~~,~~6BAAqB~~,~~iBACnB~~,~~kBACA~~,~~UACA~~;~~AAEF~~,~~mBAAW~~,~~MAAM~~,~~kBAAkB;AAAA;AAAA;AAIvC~~,~~sCAAkC~~;~~AAChC~~,~~UAAI~~,~~YAAY,~~CAAC,~~iBAAiB~~,~~SAAS~~,CAAC~~;AAAiB;AAE7D;AACA~~,~~uBAAiB~~,~~QAAQ~~;~~AAAA;AAG3B~~,~~0BAAsB~~,~~GAAe;AACnC~~,~~UAAI~~,CAAC~~,EAAE~~;~~AAAS;AAEhB~~,~~UAAI~~,~~EAAE~~,~~SAAS~~,GAAG;~~AAChB~~,~~UAAE;AACF~~,~~eAAO;AAAA~~,~~iBACE~~,~~EAAE~~,~~SAAS,GAAG~~;~~AACvB~~,~~UAAE~~;~~AACF~~,~~eAAO~~;~~AAAA;AAAA;AAIX~~,~~4BAAwB;AAEtB~~,~~UAAI~~,CAAC,~~QAAQ;AAAO;AAEpB~~,~~0BAAoB~~,~~iBAAiB~~,~~SAAS,cAAc~~;~~AAAA~~,~~QAC1D~~,~~SAAS;AAAA;AAIX~~,~~qBAAe~~,~~SAAS,~~KAAK,~~MAAM~~;~~AACnC~~,~~eAAS~~,~~KAAK~~,~~MAAM~~,~~WAAW;AAC/B~~,~~iBAAW,QAAQ;AAAA;AAGrB,2BAAuB;AACrB;AACA,eAAS,~~KAAK,~~MAAM~~,~~WAAW~~;~~AAC/B,iBAAW,QAAQ~~;~~AACnB~~,~~WAAK;AAAA;AAGP~~,~~0BAAsB~~,~~KAAa;AACjC~~,~~WAAK~~,~~UAAU;AAAA;AAGjB~~,~~UACE,~~MAAM,~~MAAM~~,~~KACZ~~,~~MAAM;AACJ~~,~~UAAI~~,MAAM,~~MAAM;AAEd~~,~~gBAAQ~~,~~QAAQ;AAChB~~,~~qBAAa~~,~~QAAQ;AACrB;AACA;AAAA~~,~~aACK;AACL;AAAA;AAAA;AAKN~~,~~cAAU,~~MAAM;~~AACd~~,~~UAAI~~,~~MAAM~~,~~MAAM~~;~~AACd;AAAA~~,~~aACK;AACL;AAAA;AAAA;AAIJ~~,~~WAAO~~;~~AAAA~~,~~MACL;AAAA~~,~~MACA~~;~~AAAA~~,~~MACA~~;~~AAAA~~,~~MACA~~;~~AAAA,MACA~~;~~AAAA,MACA~~;~~AAAA,~~MACA~~;AAAA~~,~~MACA~~;~~AAAA~~,~~MACA~~;~~AAAA~~,~~MAEA;AAAA~~,~~MACA~~;~~AAAA~~,~~MACA~~;~~AAAA,MACA;AAAA;AAAA;AAAA;;;;~~"}
1	+ {"version":3,"file":"image.vue_vue_type_script_lang.mjs","sources":["../../../../../../packages/components/image/src/image.vue"],"sourcesContent":["<template>\n <div\n ref=\"container\"\n :class=\"['el-image', $attrs.class]\"\n :style=\"containerStyle\"\n >\n <slot v-if=\"loading\" name=\"placeholder\">\n <div class=\"el-image__placeholder\"></div>\n </slot>\n <slot v-else-if=\"hasLoadError\" name=\"error\">\n <div class=\"el-image__error\">{{ t('el.image.error') }}</div>\n </slot>\n <img\n v-else\n class=\"el-image__inner\"\n v-bind=\"attrs\"\n :src=\"src\"\n :style=\"imageStyle\"\n :class=\"{\n 'el-image__preview': preview,\n }\"\n @click=\"clickHandler\"\n />\n <teleport to=\"body\" :disabled=\"!appendToBody\">\n <template v-if=\"preview\">\n <image-viewer\n v-if=\"showViewer\"\n :z-index=\"zIndex\"\n :initial-index=\"imageIndex\"\n :url-list=\"previewSrcList\"\n :hide-on-click-modal=\"hideOnClickModal\"\n @close=\"closeViewer\"\n @switch=\"switchViewer\"\n >\n <div v-if=\"$slots.viewer\">\n <slot name=\"viewer\" />\n </div>\n </image-viewer>\n </template>\n </teleport>\n </div>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, computed, ref, onMounted, watch, nextTick } from 'vue'\nimport { isString } from '@vue/shared'\nimport { useEventListener, useThrottleFn, isClient } from '@vueuse/core'\nimport { useAttrs, useLocale } from '@element-plus/hooks'\nimport ImageViewer from '@element-plus/components/image-viewer'\nimport { getScrollContainer, isInContainer } from '@element-plus/utils/dom'\nimport { imageEmits, imageProps } from './image'\n\nimport type { CSSProperties, StyleValue } from 'vue'\n\nconst isHtmlElement = (e: any): e is Element =>\n e && e.nodeType === Node.ELEMENT_NODE\n\nlet prevOverflow = ''\n\nexport default defineComponent({\n name: 'ElImage',\n components: {\n ImageViewer,\n },\n inheritAttrs: false,\n\n props: imageProps,\n emits: imageEmits,\n\n setup(props, { emit, attrs: rawAttrs }) {\n const { t } = useLocale()\n\n const attrs = useAttrs()\n const hasLoadError = ref(false)\n const loading = ref(true)\n const imgWidth = ref(0)\n const imgHeight = ref(0)\n const showViewer = ref(false)\n const container = ref<HTMLElement>()\n\n const _scrollContainer = ref<HTMLElement \| Window>()\n let stopScrollListener: () => void\n let stopWheelListener: () => void\n\n const containerStyle = computed(() => rawAttrs.style as StyleValue)\n\n const imageStyle = computed<CSSProperties>(() => {\n const { fit } = props\n if (isClient && fit) {\n return { objectFit: fit }\n }\n return {}\n })\n\n const preview = computed(() => {\n const { previewSrcList } = props\n return Array.isArray(previewSrcList) && previewSrcList.length > 0\n })\n\n const imageIndex = computed(() => {\n const { src, previewSrcList, initialIndex } = props\n let previewIndex = initialIndex\n const srcIndex = previewSrcList.indexOf(src)\n if (srcIndex >= 0) {\n previewIndex = srcIndex\n }\n return previewIndex\n })\n\n const loadImage = () => {\n if (!isClient) return\n\n // reset status\n loading.value = true\n hasLoadError.value = false\n\n const img = new Image()\n 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":["ImageViewer"],"mappings":";;;;;;;;;;AAkDA,mBAAmB,GAAG,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,QAAQ;;AAE5C,aAAe,eAAe,CAAC;;AAE/B,EAAE,UAAU,EAAE;iBACVA,aAAW;;AAEf,EAAE,YAAY;;AAEd,EAAE,KAAK,EAAE,UAAU;EACjB,MAAM,KAAK,EAAE,EAAE;IACb,MAAM,EAAE;IACR,MAAM,KAAK;;IAEX,MAAM,OAAO,GAAG;;IAEhB,MAAM,SAAS;IACf,MAAM;;IAEN,MAAM,gBAAgB,MAAM,EAAE,CAAC;IAC/B,IAAI,kBAAkB,CAAC;;IAEvB,MAAM,cAAc,GAAG;IACvB,MAAM,UAAU,GAAG,QAAQ,CAAC;MAC1B,MAAM,EAAE,QAAQ,KAAK,CAAC;MACtB,IAAI,YAAY,GAAG;QACjB,OAAO,EAAE,SAAS;OACnB;MACD,OAAO,EAAE,CAAC;;IAEZ,MAAM,OAAO,GAAG,SAAS,MAAM;MAC7B,MAAM,EAAE,cAAc;MACtB,OAAO,KAAK,CAAC,QAAQ;;IAEvB,MAAM,UAAU,GAAG,QAAQ,CAAC;;MAE1B,IAAI,eAAe,YAAY,CAAC;MAChC,MAAM,QAAQ,GAAG;MACjB,IAAI,YAAY,CAAC,EAAE;QACjB,YAAY,GAAG,SAAS;;MAE1B,OAAO;KACR;;MAEC,IAAI,CAAC;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,IAAI,aAAa;iBACN,EAAE,CAAC;QACZ,sBAAsB,EAAE,CAAC;;;UAGvB,eAAe,GAAG,aAAa,CAAC;;MAEpC,IAAI,EAAE;;;MAGN,cAAc,EAAE,CAAC;MACjB,MAAM,EAAE,eAAe,EAAE;MACzB,IAAI,cAAc;QAChB,gBAAgB,CAAC;OAClB,MAAM,IAAI,QAAQ;;;QAGjB,gBAAgB,CAAC,KAAK,GAAG;OAC1B;MACD,IAAI,iBAAiB;QACnB;;;KAGH;aACQ,sBAAsB,GAAG;UAC5B,CAAC;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;;;SAGtB,CAAC,MAAM,KAAK,CAAC,GAAG,EAAE,MAAM;;;QAGzB,YAAY,CAAC,KAAK,GAAG,KAAK,CAAC;;;OAG5B,MAAM;QACL,SAAS,EAAE,CAAC;;MAEd;aACO,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/es/components/image/src/image.vue_vue_type_template_id_34467287_lang.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"image.vue_vue_type_template_id_34467287_lang.mjs","sources":["../../../../../../packages/components/image/src/image.vue?vue&type=template&id=34467287&lang.js"],"sourcesContent":["<template>\n <div\n ref=\"container\"\n :class=\"['el-image', $attrs.class]\"\n :style=\"containerStyle\"\n >\n <slot v-if=\"loading\" name=\"placeholder\">\n <div class=\"el-image__placeholder\"></div>\n </slot>\n <slot v-else-if=\"hasLoadError\" name=\"error\">\n <div class=\"el-image__error\">{{ t('el.image.error') }}</div>\n </slot>\n <img\n v-else\n class=\"el-image__inner\"\n v-bind=\"attrs\"\n :src=\"src\"\n :style=\"imageStyle\"\n :class=\"{\n 'el-image__preview': preview,\n }\"\n @click=\"clickHandler\"\n />\n <teleport to=\"body\" :disabled=\"!appendToBody\">\n <template v-if=\"preview\">\n <image-viewer\n v-if=\"showViewer\"\n :z-index=\"zIndex\"\n :initial-index=\"imageIndex\"\n :url-list=\"previewSrcList\"\n :hide-on-click-modal=\"hideOnClickModal\"\n @close=\"closeViewer\"\n @switch=\"switchViewer\"\n >\n <div v-if=\"$slots.viewer\">\n <slot name=\"viewer\" />\n </div>\n </image-viewer>\n </template>\n </teleport>\n </div>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, computed, ref, onMounted, watch, nextTick } from 'vue'\nimport { isString } from '@vue/shared'\nimport { useEventListener, useThrottleFn } 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":"~~;;+DAOW~~,~~OAAM;qBAGN~~,~~OAAM;;;;;sBATfA;IACE,KAAI;AAAA,IACH,mCAAoB,YAAO;AAAA,IAC3B,sBAAO~~;;~~IAEI,eAAZC,mDAAA;MACE;AAAA,SAEe,oBAAjBA,6CAAA;MACEC,0BAAA,4BAAgC;uBAElCF,0BAAAG~~;;~~MAEE,OAAM~~;~~AAAA,OACE~~;~~MACP,KAAK;MACL,OAAO;MACP~~;;;~~MAGA,gDAAO;;kBAEVC~~;~~MAAU,IAAG;AAAA,MAAQ,WAAW;;MACd,6BAAhBJ;QAEU,gCADRI;;UAEG,WAAS;UACT,iBAAe;UACf,YAAU;UACV,uBAAqB;UACrB,SAAO;UACP,UAAQ;;2BAET;YAAW,YAAO,uBAAlBJ;cACEC;;;;;;;;;;;;~~"}
1	+ {"version":3,"file":"image.vue_vue_type_template_id_34467287_lang.mjs","sources":["../../../../../../packages/components/image/src/image.vue?vue&type=template&id=34467287&lang.js"],"sourcesContent":["<template>\n <div\n ref=\"container\"\n :class=\"['el-image', $attrs.class]\"\n :style=\"containerStyle\"\n >\n <slot v-if=\"loading\" name=\"placeholder\">\n <div class=\"el-image__placeholder\"></div>\n </slot>\n <slot v-else-if=\"hasLoadError\" name=\"error\">\n <div class=\"el-image__error\">{{ t('el.image.error') }}</div>\n </slot>\n <img\n v-else\n class=\"el-image__inner\"\n v-bind=\"attrs\"\n :src=\"src\"\n :style=\"imageStyle\"\n :class=\"{\n 'el-image__preview': preview,\n }\"\n @click=\"clickHandler\"\n />\n <teleport to=\"body\" :disabled=\"!appendToBody\">\n <template v-if=\"preview\">\n <image-viewer\n v-if=\"showViewer\"\n :z-index=\"zIndex\"\n :initial-index=\"imageIndex\"\n :url-list=\"previewSrcList\"\n :hide-on-click-modal=\"hideOnClickModal\"\n @close=\"closeViewer\"\n @switch=\"switchViewer\"\n >\n <div v-if=\"$slots.viewer\">\n <slot name=\"viewer\" />\n </div>\n </image-viewer>\n </template>\n </teleport>\n </div>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, computed, ref, onMounted, watch, nextTick } from 'vue'\nimport { isString } from '@vue/shared'\nimport { useEventListener, useThrottleFn, isClient } from '@vueuse/core'\nimport { useAttrs, useLocale } from '@element-plus/hooks'\nimport ImageViewer from '@element-plus/components/image-viewer'\nimport { getScrollContainer, isInContainer } from '@element-plus/utils/dom'\nimport { imageEmits, imageProps } from './image'\n\nimport type { CSSProperties, StyleValue } from 'vue'\n\nconst isHtmlElement = (e: any): e is Element =>\n e && e.nodeType === Node.ELEMENT_NODE\n\nlet prevOverflow = ''\n\nexport default defineComponent({\n name: 'ElImage',\n components: {\n ImageViewer,\n },\n inheritAttrs: false,\n\n props: imageProps,\n emits: imageEmits,\n\n setup(props, { emit, attrs: rawAttrs }) {\n const { t } = useLocale()\n\n const attrs = useAttrs()\n const hasLoadError = ref(false)\n const loading = ref(true)\n const imgWidth = ref(0)\n const imgHeight = ref(0)\n const showViewer = ref(false)\n const container = ref<HTMLElement>()\n\n const _scrollContainer = ref<HTMLElement \| Window>()\n let stopScrollListener: () => void\n let stopWheelListener: () => void\n\n const containerStyle = computed(() => rawAttrs.style as StyleValue)\n\n const imageStyle = computed<CSSProperties>(() => {\n const { fit } = props\n if (isClient && fit) {\n return { objectFit: fit }\n }\n return {}\n })\n\n const preview = computed(() => {\n const { previewSrcList } = props\n return Array.isArray(previewSrcList) && previewSrcList.length > 0\n })\n\n const imageIndex = computed(() => {\n const { src, previewSrcList, initialIndex } = props\n let previewIndex = initialIndex\n const srcIndex = previewSrcList.indexOf(src)\n if (srcIndex >= 0) {\n previewIndex = srcIndex\n }\n return previewIndex\n })\n\n const loadImage = () => {\n if (!isClient) return\n\n // reset status\n loading.value = true\n hasLoadError.value = false\n\n const img = new Image()\n 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,+CAA2B;;;;;;;;;;;;;;;cAa3B,EAAE;;iBAEA;;;YAGL;;mBAEH;UAAa;;;mBACY;yBAAvB;;;;;kBAIKA,+BAAyB;;;2CAGP;kBAClBA;;;;;;;"}

package/es/components/image-viewer/index.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.mjs","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":["ImageViewer"],"mappings":";;;;;~~MAIa~~,~~gBAAgB~~,~~YAAYA~~;;;;"}
1	+ {"version":3,"file":"index.mjs","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":["ImageViewer"],"mappings":";;;;;AAEY,MAAC,aAAa,GAAG,WAAW,CAACA,MAAW;;;;"}

package/es/components/image-viewer/src/image-viewer.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"image-viewer.mjs","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":[],"mappings":";;~~MAGa~~,~~mBAAmB~~,~~WAAW~~;~~AAAA~~,~~EACzC~~,~~SAAS~~;~~AAAA~~,~~IACP~~,~~MAAM~~,~~eAAyB~~;~~AAAA,IAC~~/B,~~SAAS~~,MAAM,~~QAAQ~~;~~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~~;;;;"}
1	+ {"version":3,"file":"image-viewer.mjs","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":[],"mappings":";;AACY,MAAC,gBAAgB,GAAG,UAAU,CAAC;AAC3C,EAAE,OAAO,EAAE;AACX,IAAI,IAAI,EAAE,cAAc,CAAC,KAAK,CAAC;AAC/B,IAAI,OAAO,EAAE,MAAM,OAAO,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;;;;"}