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/image-viewer/src/image-viewer.vue_vue_type_script_lang.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"image-viewer.vue_vue_type_script_lang.mjs","sources":["../../../../../../packages/components/image-viewer/src/image-viewer.vue"],"sourcesContent":["<template>\n <transition name=\"viewer-fade\">\n <div\n ref=\"wrapper\"\n :tabindex=\"-1\"\n class=\"el-image-viewer__wrapper\"\n :style=\"{ zIndex }\"\n >\n <div\n class=\"el-image-viewer__mask\"\n @click.self=\"hideOnClickModal && hide()\"\n />\n\n <!-- CLOSE -->\n <span class=\"el-image-viewer__btn el-image-viewer__close\" @click=\"hide\">\n <el-icon><close /></el-icon>\n </span>\n\n <!-- ARROW -->\n <template v-if=\"!isSingle\">\n <span\n class=\"el-image-viewer__btn el-image-viewer__prev\"\n :class=\"{ 'is-disabled': !infinite && isFirst }\"\n @click=\"prev\"\n >\n <el-icon><arrow-left /></el-icon>\n </span>\n <span\n class=\"el-image-viewer__btn el-image-viewer__next\"\n :class=\"{ 'is-disabled': !infinite && isLast }\"\n @click=\"next\"\n >\n <el-icon><arrow-right /></el-icon>\n </span>\n </template>\n <!-- ACTIONS -->\n <div class=\"el-image-viewer__btn el-image-viewer__actions\">\n <div class=\"el-image-viewer__actions__inner\">\n <el-icon @click=\"handleActions('zoomOut')\">\n <zoom-out />\n </el-icon>\n <el-icon @click=\"handleActions('zoomIn')\">\n <zoom-in />\n </el-icon>\n <i class=\"el-image-viewer__actions__divider\"></i>\n <el-icon @click=\"toggleMode\">\n <component :is=\"mode.icon\" />\n </el-icon>\n <i class=\"el-image-viewer__actions__divider\"></i>\n <el-icon @click=\"handleActions('anticlockwise')\">\n <refresh-left />\n </el-icon>\n <el-icon @click=\"handleActions('clockwise')\">\n <refresh-right />\n </el-icon>\n </div>\n </div>\n <!-- CANVAS -->\n <div class=\"el-image-viewer__canvas\">\n <img\n v-for=\"(url, i) in urlList\"\n v-show=\"i === index\"\n ref=\"img\"\n :key=\"url\"\n :src=\"url\"\n :style=\"imgStyle\"\n class=\"el-image-viewer__img\"\n @load=\"handleImgLoad\"\n @error=\"handleImgError\"\n @mousedown=\"handleMouseDown\"\n />\n </div>\n <slot />\n </div>\n </transition>\n</template>\n\n<script lang=\"ts\">\nimport {\n defineComponent,\n computed,\n ref,\n onMounted,\n watch,\n nextTick,\n effectScope,\n markRaw,\n} from 'vue'\nimport { useEventListener } from '@vueuse/core'\nimport ElIcon from '@element-plus/components/icon'\nimport { useLocale } from '@element-plus/hooks'\nimport { EVENT_CODE } from '@element-plus/utils/aria'\nimport { rafThrottle, isFirefox } from '@element-plus/utils/util'\nimport {\n Close,\n ArrowLeft,\n ArrowRight,\n ZoomOut,\n ZoomIn,\n RefreshLeft,\n RefreshRight,\n FullScreen,\n ScaleToOriginal,\n} from '@element-plus/icons-vue'\nimport { imageViewerProps, imageViewerEmits } from './image-viewer'\n\nimport type { CSSProperties } from 'vue'\n\nconst Mode = {\n CONTAIN: {\n name: 'contain',\n icon: markRaw(FullScreen),\n },\n ORIGINAL: {\n name: 'original',\n icon: markRaw(ScaleToOriginal),\n },\n}\n\nconst mousewheelEventName = isFirefox() ? 'DOMMouseScroll' : 'mousewheel'\nexport type ImageViewerAction =\n \| 'zoomIn'\n \| 'zoomOut'\n \| 'clockwise'\n \| 'anticlockwise'\n\nexport default defineComponent({\n name: 'ElImageViewer',\n components: {\n ElIcon,\n Close,\n ArrowLeft,\n ArrowRight,\n ZoomOut,\n ZoomIn,\n RefreshLeft,\n RefreshRight,\n },\n props: imageViewerProps,\n emits: imageViewerEmits,\n\n setup(props, { emit }) {\n const { t } = useLocale()\n const wrapper = ref<HTMLDivElement>()\n const img = ref<HTMLImageElement>()\n\n const scopeEventListener = effectScope()\n\n const loading = ref(true)\n const index = ref(props.initialIndex)\n const mode = ref(Mode.CONTAIN)\n const transform = ref({\n scale: 1,\n deg: 0,\n offsetX: 0,\n offsetY: 0,\n enableTransition: false,\n })\n\n const isSingle = computed(() => {\n const { urlList } = props\n return urlList.length <= 1\n })\n\n const isFirst = computed(() => {\n return index.value === 0\n })\n\n const isLast = computed(() => {\n return index.value === props.urlList.length - 1\n })\n\n const currentImg = computed(() => {\n return props.urlList[index.value]\n })\n\n const imgStyle = computed(() => {\n const { scale, deg, offsetX, offsetY, enableTransition } = transform.value\n const style: CSSProperties = {\n transform: `scale(${scale}) rotate(${deg}deg)`,\n transition: enableTransition ? 'transform .3s' : '',\n marginLeft: `${offsetX}px`,\n marginTop: `${offsetY}px`,\n }\n if (mode.value.name === Mode.CONTAIN.name) {\n style.maxWidth = style.maxHeight = '100%'\n }\n return style\n })\n\n function hide() {\n unregisterEventListener()\n emit('close')\n }\n\n function registerEventListener() {\n const keydownHandler = rafThrottle((e: KeyboardEvent) => {\n switch (e.code) {\n // ESC\n case EVENT_CODE.esc:\n hide()\n break\n // SPACE\n case EVENT_CODE.space:\n toggleMode()\n break\n // LEFT_ARROW\n case EVENT_CODE.left:\n prev()\n break\n // UP_ARROW\n case EVENT_CODE.up:\n handleActions('zoomIn')\n break\n // RIGHT_ARROW\n case EVENT_CODE.right:\n next()\n break\n // DOWN_ARROW\n case EVENT_CODE.down:\n handleActions('zoomOut')\n break\n }\n })\n const mousewheelHandler = rafThrottle(\n (e: WheelEvent \| any /* TODO: wheelDelta is deprecated */) => {\n const delta = e.wheelDelta ? e.wheelDelta : -e.detail\n if (delta > 0) {\n handleActions('zoomIn', {\n zoomRate: 0.015,\n enableTransition: false,\n })\n } else {\n handleActions('zoomOut', {\n zoomRate: 0.015,\n enableTransition: false,\n })\n }\n }\n )\n\n scopeEventListener.run(() => {\n useEventListener(document, 'keydown', keydownHandler)\n useEventListener(document, mousewheelEventName, mousewheelHandler)\n })\n }\n\n function unregisterEventListener() {\n scopeEventListener.stop()\n }\n\n function handleImgLoad() {\n loading.value = false\n }\n\n function handleImgError(e: Event) {\n loading.value = false\n ;(e.target as HTMLImageElement).alt = t('el.image.error')\n }\n\n function handleMouseDown(e: MouseEvent) {\n if (loading.value \|\| e.button !== 0 \|\| !wrapper.value) return\n\n const { offsetX, offsetY } = transform.value\n const startX = e.pageX\n const startY = e.pageY\n\n const divLeft = wrapper.value.clientLeft\n const divRight = wrapper.value.clientLeft + wrapper.value.clientWidth\n const divTop = wrapper.value.clientTop\n const divBottom = wrapper.value.clientTop + wrapper.value.clientHeight\n\n const dragHandler = rafThrottle((ev: MouseEvent) => {\n transform.value = {\n ...transform.value,\n offsetX: offsetX + ev.pageX - startX,\n offsetY: offsetY + ev.pageY - startY,\n }\n })\n const removeMousemove = useEventListener(\n document,\n 'mousemove',\n dragHandler\n )\n useEventListener(document, 'mouseup', (evt) => {\n const mouseX = evt.pageX\n const mouseY = evt.pageY\n if (\n mouseX < divLeft \|\|\n mouseX > divRight \|\|\n mouseY < divTop \|\|\n mouseY > divBottom\n ) {\n reset()\n }\n removeMousemove()\n })\n\n e.preventDefault()\n }\n\n function reset() {\n transform.value = {\n scale: 1,\n deg: 0,\n offsetX: 0,\n offsetY: 0,\n enableTransition: false,\n }\n }\n\n function toggleMode() {\n if (loading.value) return\n\n const modeNames = Object.keys(Mode)\n const modeValues = Object.values(Mode)\n const currentMode = mode.value.name\n const index = modeValues.findIndex((i) => i.name === currentMode)\n const nextIndex = (index + 1) % modeNames.length\n mode.value = Mode[modeNames[nextIndex]]\n reset()\n }\n\n function prev() {\n if (isFirst.value && !props.infinite) return\n const len = props.urlList.length\n index.value = (index.value - 1 + len) % len\n }\n\n function next() {\n if (isLast.value && !props.infinite) return\n const len = props.urlList.length\n index.value = (index.value + 1) % len\n }\n\n function handleActions(action: ImageViewerAction, options = {}) {\n if (loading.value) return\n const { zoomRate, rotateDeg, enableTransition } = {\n zoomRate: 0.2,\n rotateDeg: 90,\n enableTransition: true,\n ...options,\n }\n switch (action) {\n case 'zoomOut':\n if (transform.value.scale > 0.2) {\n transform.value.scale = parseFloat(\n (transform.value.scale - zoomRate).toFixed(3)\n )\n }\n break\n case 'zoomIn':\n transform.value.scale = parseFloat(\n (transform.value.scale + zoomRate).toFixed(3)\n )\n break\n case 'clockwise':\n transform.value.deg += rotateDeg\n break\n case 'anticlockwise':\n transform.value.deg -= rotateDeg\n break\n }\n transform.value.enableTransition = enableTransition\n }\n\n watch(currentImg, () => {\n nextTick(() => {\n const $img = img.value\n if (!$img?.complete) {\n loading.value = true\n }\n })\n })\n\n watch(index, (val) => {\n reset()\n emit('switch', val)\n })\n\n onMounted(() => {\n registerEventListener()\n // add tabindex then wrapper can be focusable via Javascript\n // focus wrapper so arrow key can't cause inner scroll behavior underneath\n wrapper.value?.focus?.()\n })\n\n return {\n index,\n wrapper,\n img,\n isSingle,\n isFirst,\n isLast,\n currentImg,\n imgStyle,\n mode,\n handleActions,\n prev,\n next,\n hide,\n toggleMode,\n handleImgLoad,\n handleImgError,\n handleMouseDown,\n }\n },\n})\n</script>\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"image-viewer.vue_vue_type_script_lang.mjs","sources":["../../../../../../packages/components/image-viewer/src/image-viewer.vue"],"sourcesContent":["<template>\n <transition name=\"viewer-fade\">\n <div\n ref=\"wrapper\"\n :tabindex=\"-1\"\n class=\"el-image-viewer__wrapper\"\n :style=\"{ zIndex }\"\n >\n <div\n class=\"el-image-viewer__mask\"\n @click.self=\"hideOnClickModal && hide()\"\n />\n\n <!-- CLOSE -->\n <span class=\"el-image-viewer__btn el-image-viewer__close\" @click=\"hide\">\n <el-icon><close /></el-icon>\n </span>\n\n <!-- ARROW -->\n <template v-if=\"!isSingle\">\n <span\n class=\"el-image-viewer__btn el-image-viewer__prev\"\n :class=\"{ 'is-disabled': !infinite && isFirst }\"\n @click=\"prev\"\n >\n <el-icon><arrow-left /></el-icon>\n </span>\n <span\n class=\"el-image-viewer__btn el-image-viewer__next\"\n :class=\"{ 'is-disabled': !infinite && isLast }\"\n @click=\"next\"\n >\n <el-icon><arrow-right /></el-icon>\n </span>\n </template>\n <!-- ACTIONS -->\n <div class=\"el-image-viewer__btn el-image-viewer__actions\">\n <div class=\"el-image-viewer__actions__inner\">\n <el-icon @click=\"handleActions('zoomOut')\">\n <zoom-out />\n </el-icon>\n <el-icon @click=\"handleActions('zoomIn')\">\n <zoom-in />\n </el-icon>\n <i class=\"el-image-viewer__actions__divider\"></i>\n <el-icon @click=\"toggleMode\">\n <component :is=\"mode.icon\" />\n </el-icon>\n <i class=\"el-image-viewer__actions__divider\"></i>\n <el-icon @click=\"handleActions('anticlockwise')\">\n <refresh-left />\n </el-icon>\n <el-icon @click=\"handleActions('clockwise')\">\n <refresh-right />\n </el-icon>\n </div>\n </div>\n <!-- CANVAS -->\n <div class=\"el-image-viewer__canvas\">\n <img\n v-for=\"(url, i) in urlList\"\n v-show=\"i === index\"\n ref=\"img\"\n :key=\"url\"\n :src=\"url\"\n :style=\"imgStyle\"\n class=\"el-image-viewer__img\"\n @load=\"handleImgLoad\"\n @error=\"handleImgError\"\n @mousedown=\"handleMouseDown\"\n />\n </div>\n <slot />\n </div>\n </transition>\n</template>\n\n<script lang=\"ts\">\nimport {\n defineComponent,\n computed,\n ref,\n onMounted,\n watch,\n nextTick,\n effectScope,\n markRaw,\n} from 'vue'\nimport { useEventListener } from '@vueuse/core'\nimport ElIcon from '@element-plus/components/icon'\nimport { useLocale } from '@element-plus/hooks'\nimport { EVENT_CODE } from '@element-plus/utils/aria'\nimport { rafThrottle, isFirefox } from '@element-plus/utils/util'\nimport {\n Close,\n ArrowLeft,\n ArrowRight,\n ZoomOut,\n ZoomIn,\n RefreshLeft,\n RefreshRight,\n FullScreen,\n ScaleToOriginal,\n} from '@element-plus/icons-vue'\nimport { imageViewerProps, imageViewerEmits } from './image-viewer'\n\nimport type { CSSProperties } from 'vue'\n\nconst Mode = {\n CONTAIN: {\n name: 'contain',\n icon: markRaw(FullScreen),\n },\n ORIGINAL: {\n name: 'original',\n icon: markRaw(ScaleToOriginal),\n },\n}\n\nconst mousewheelEventName = isFirefox() ? 'DOMMouseScroll' : 'mousewheel'\nexport type ImageViewerAction =\n \| 'zoomIn'\n \| 'zoomOut'\n \| 'clockwise'\n \| 'anticlockwise'\n\nexport default defineComponent({\n name: 'ElImageViewer',\n components: {\n ElIcon,\n Close,\n ArrowLeft,\n ArrowRight,\n ZoomOut,\n ZoomIn,\n RefreshLeft,\n RefreshRight,\n },\n props: imageViewerProps,\n emits: imageViewerEmits,\n\n setup(props, { emit }) {\n const { t } = useLocale()\n const wrapper = ref<HTMLDivElement>()\n const img = ref<HTMLImageElement>()\n\n const scopeEventListener = effectScope()\n\n const loading = ref(true)\n const index = ref(props.initialIndex)\n const mode = ref(Mode.CONTAIN)\n const transform = ref({\n scale: 1,\n deg: 0,\n offsetX: 0,\n offsetY: 0,\n enableTransition: false,\n })\n\n const isSingle = computed(() => {\n const { urlList } = props\n return urlList.length <= 1\n })\n\n const isFirst = computed(() => {\n return index.value === 0\n })\n\n const isLast = computed(() => {\n return index.value === props.urlList.length - 1\n })\n\n const currentImg = computed(() => {\n return props.urlList[index.value]\n })\n\n const imgStyle = computed(() => {\n const { scale, deg, offsetX, offsetY, enableTransition } = transform.value\n const style: CSSProperties = {\n transform: `scale(${scale}) rotate(${deg}deg)`,\n transition: enableTransition ? 'transform .3s' : '',\n marginLeft: `${offsetX}px`,\n marginTop: `${offsetY}px`,\n }\n if (mode.value.name === Mode.CONTAIN.name) {\n style.maxWidth = style.maxHeight = '100%'\n }\n return style\n })\n\n function hide() {\n unregisterEventListener()\n emit('close')\n }\n\n function registerEventListener() {\n const keydownHandler = rafThrottle((e: KeyboardEvent) => {\n switch (e.code) {\n // ESC\n case EVENT_CODE.esc:\n hide()\n break\n // SPACE\n case EVENT_CODE.space:\n toggleMode()\n break\n // LEFT_ARROW\n case EVENT_CODE.left:\n prev()\n break\n // UP_ARROW\n case EVENT_CODE.up:\n handleActions('zoomIn')\n break\n // RIGHT_ARROW\n case EVENT_CODE.right:\n next()\n break\n // DOWN_ARROW\n case EVENT_CODE.down:\n handleActions('zoomOut')\n break\n }\n })\n const mousewheelHandler = rafThrottle(\n (e: WheelEvent \| any /* TODO: wheelDelta is deprecated */) => {\n const delta = e.wheelDelta ? e.wheelDelta : -e.detail\n if (delta > 0) {\n handleActions('zoomIn', {\n zoomRate: 0.015,\n enableTransition: false,\n })\n } else {\n handleActions('zoomOut', {\n zoomRate: 0.015,\n enableTransition: false,\n })\n }\n }\n )\n\n scopeEventListener.run(() => {\n useEventListener(document, 'keydown', keydownHandler)\n useEventListener(document, mousewheelEventName, mousewheelHandler)\n })\n }\n\n function unregisterEventListener() {\n scopeEventListener.stop()\n }\n\n function handleImgLoad() {\n loading.value = false\n }\n\n function handleImgError(e: Event) {\n loading.value = false\n ;(e.target as HTMLImageElement).alt = t('el.image.error')\n }\n\n function handleMouseDown(e: MouseEvent) {\n if (loading.value \|\| e.button !== 0 \|\| !wrapper.value) return\n\n const { offsetX, offsetY } = transform.value\n const startX = e.pageX\n const startY = e.pageY\n\n const divLeft = wrapper.value.clientLeft\n const divRight = wrapper.value.clientLeft + wrapper.value.clientWidth\n const divTop = wrapper.value.clientTop\n const divBottom = wrapper.value.clientTop + wrapper.value.clientHeight\n\n const dragHandler = rafThrottle((ev: MouseEvent) => {\n transform.value = {\n ...transform.value,\n offsetX: offsetX + ev.pageX - startX,\n offsetY: offsetY + ev.pageY - startY,\n }\n })\n const removeMousemove = useEventListener(\n document,\n 'mousemove',\n dragHandler\n )\n useEventListener(document, 'mouseup', (evt) => {\n const mouseX = evt.pageX\n const mouseY = evt.pageY\n if (\n mouseX < divLeft \|\|\n mouseX > divRight \|\|\n mouseY < divTop \|\|\n mouseY > divBottom\n ) {\n reset()\n }\n removeMousemove()\n })\n\n e.preventDefault()\n }\n\n function reset() {\n transform.value = {\n scale: 1,\n deg: 0,\n offsetX: 0,\n offsetY: 0,\n enableTransition: false,\n }\n }\n\n function toggleMode() {\n if (loading.value) return\n\n const modeNames = Object.keys(Mode)\n const modeValues = Object.values(Mode)\n const currentMode = mode.value.name\n const index = modeValues.findIndex((i) => i.name === currentMode)\n const nextIndex = (index + 1) % modeNames.length\n mode.value = Mode[modeNames[nextIndex]]\n reset()\n }\n\n function prev() {\n if (isFirst.value && !props.infinite) return\n const len = props.urlList.length\n index.value = (index.value - 1 + len) % len\n }\n\n function next() {\n if (isLast.value && !props.infinite) return\n const len = props.urlList.length\n index.value = (index.value + 1) % len\n }\n\n function handleActions(action: ImageViewerAction, options = {}) {\n if (loading.value) return\n const { zoomRate, rotateDeg, enableTransition } = {\n zoomRate: 0.2,\n rotateDeg: 90,\n enableTransition: true,\n ...options,\n }\n switch (action) {\n case 'zoomOut':\n if (transform.value.scale > 0.2) {\n transform.value.scale = parseFloat(\n (transform.value.scale - zoomRate).toFixed(3)\n )\n }\n break\n case 'zoomIn':\n transform.value.scale = parseFloat(\n (transform.value.scale + zoomRate).toFixed(3)\n )\n break\n case 'clockwise':\n transform.value.deg += rotateDeg\n break\n case 'anticlockwise':\n transform.value.deg -= rotateDeg\n break\n }\n transform.value.enableTransition = enableTransition\n }\n\n watch(currentImg, () => {\n nextTick(() => {\n const $img = img.value\n if (!$img?.complete) {\n loading.value = true\n }\n })\n })\n\n watch(index, (val) => {\n reset()\n emit('switch', val)\n })\n\n onMounted(() => {\n registerEventListener()\n // add tabindex then wrapper can be focusable via Javascript\n // focus wrapper so arrow key can't cause inner scroll behavior underneath\n wrapper.value?.focus?.()\n })\n\n return {\n index,\n wrapper,\n img,\n isSingle,\n isFirst,\n isLast,\n currentImg,\n imgStyle,\n mode,\n handleActions,\n prev,\n next,\n hide,\n toggleMode,\n handleImgLoad,\n handleImgError,\n handleMouseDown,\n }\n },\n})\n</script>\n"],"names":[],"mappings":";;;;;;;;;;AAwGA,UAAU,GAAG;;AAEb,IAAI,IAAI,EAAE,SAAS;;AAEnB,GAAG;EACD;IACE,IAAI,EAAE;IACN,IAAI,EAAE,OAAO,CAAC;GACf;EACD;MACI;aACS,eAAe,CAAC;EAC7B;AACF;;AAEA,IAAI,KAAK;AACT,IAAI,SAAS;IACT;IACA,OAAO;IACP,MAAM;IACN,WAAW;;AAEf,GAAG;EACD,OAAO;EACP,KAAK,EAAE;OACF,CAAC;IACJ;IACA,MAAM;IACN,MAAM,GAAG;IACT,MAAM;IACN,MAAM;IACN,MAAM,KAAK;IACX,MAAM,IAAI;;MAER,KAAK,EAAE,CAAC;MACR,GAAG,EAAE,CAAC;;MAEN,OAAO,EAAE;MACT,gBAAgB,EAAE;KACnB,CAAC,CAAC;IACH,MAAM,QAAQ,GAAG,QAAQ,CAAC,MAAM;;MAE9B,OAAO,OAAO,CAAC,MAAM,IAAI,CAAC,CAAC;;IAE7B,MAAM,UAAU,QAAQ;MACtB,OAAO,KAAK,CAAC,KAAK,KAAK,CAAC,CAAC;KAC1B,CAAC,CAAC;IACH,MAAM,MAAM;MACV,OAAO;MACP,CAAC;UACG;MACJ,OAAO;MACP,CAAC;IACH;;MAEE,MAAM,KAAK;QACT,SAAS,EAAE,CAAC,MAAM,EAAE;QACpB,UAAU,EAAE;;;OAGb,CAAC;MACF,IAAI,IAAI,CAAC,KAAK,CAAC,IAAI;;;MAGnB,OAAO,MAAM;MACb,CAAC;IACH;;MAEE,IAAI,CAAC,OAAO,CAAC;;IAEf;;QAEI,QAAQ,CAAC,KAAK;UACZ,KAAK,WAAW,GAAG;YACjB,IAAI,GAAG;YACP;UACF,KAAK,UAAU,CAAC,KAAK;YACnB,UAAU,EAAE,CAAC;YACb;;YAEA,IAAI,EAAE,CAAC;YACP,MAAM;;;;;gBAKF,EAAE;YACN,MAAM;UACR,KAAK;;;SAGN;OACF,CAAC,CAAC;YACG;cACE;YACF,KAAK,GAAG,CAAC,EAAE;;YAEX;;WAED,CAAC,CAAC;eACE;;oBAEK,EAAE;YACV,gBAAgB,EAAE;YAClB,CAAC;;;wBAGW,CAAC,GAAG;wBACJ,CAAC,QAAQ;;;;aAIpB;;;aAGA,aAAa,GAAG;aAChB,CAAC,KAAK,GAAG,KAAK,CAAC;;;MAGtB;MACA,CAAC,CAAC,MAAM,CAAC,GAAG,GAAG,CAAC,CAAC,gBAAgB,CAAC,CAAC;;aAE5B,eAAe,CAAC,CAAC,EAAE;UACtB,OAAO,CAAC,KAAK;eACR;cACD,OAAO;kBACH,GAAG,CAAC,CAAC,KAAK,CAAC;YACjB;YACA;YACA,QAAQ,GAAG,OAAO,CAAC,MAAM;kBACnB,GAAG,OAAO,CAAC;qBACR,GAAG,QAAQ,KAAK;YACzB;;;;;SAKH,CAAC;QACF,CAAC;YACG,eAAe,GAAG,gBAAgB,CAAC,UAAU,WAAW,EAAE;MAChE;;;QAGE,UAAU,GAAG,OAAO,IAAI;UACtB,KAAK,EAAE,CAAC;;;OAGX,CAAC,CAAC;MACH,CAAC,CAAC,cAAc,EAAE,CAAC;;;MAGnB,SAAS,CAAC,KAAK,GAAG;QAChB,KAAK,EAAE,CAAC;QACR,GAAG,EAAE,CAAC;;;QAGN,gBAAgB,EAAE;OACnB;;uBAEgB,GAAG;MACpB,IAAI,OAAO,MAAM;QACf,OAAO;;MAET,MAAM,UAAU,GAAG,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;MACvC,MAAM,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC;MACpC,MAAM,SAAS,UAAU,CAAC,SAAS,CAAC,CAAC;MACrC,MAAM,YAAY,CAAC,MAAM,GAAG,CAAC,IAAI,SAAS,OAAO,CAAC;;MAElD,OAAO,CAAC;;aAED,IAAI,GAAG;UACV,OAAO,MAAM,IAAI,MAAM,CAAC,QAAQ;eAC3B;;MAET;;aAEO;UACH,MAAM,CAAC;QACT,OAAO;MACT;MACA,KAAK,CAAC,KAAK,GAAG,CAAC,KAAK,CAAC,QAAQ,CAAC,IAAI,IAAI;;0BAElB,CAAC;;eAEZ;YACH,EAAE,QAAQ,EAAE;qBACH;iBACJ,EAAE,EAAE;QACb;WACG;QACH;cACM,MAAM;;;YAGR,SAAS,CAAC;;;QAGd,KAAK,QAAQ;UACX,SAAS,CAAC;UACV,MAAM;QACR,KAAK;UACH;UACA;QACF,KAAK,eAAe;;;;MAItB,SAAS,CAAC,KAAK,CAAC;;;MAGhB,QAAQ,CAAC;QACP,MAAM,IAAI,GAAG,IAAI,KAAK,CAAC;QACvB,IAAI,EAAE,IAAI,IAAI,IAAI,GAAG,KAAK,CAAC,GAAG;UAC5B,QAAQ,KAAK,GAAG,IAAI,CAAC;SACtB;OACF,CAAC,CAAC;MACH,CAAC;IACH;;MAEE,IAAI,CAAC;MACL,CAAC;aACM,CAAC,MAAM;MACd,IAAI,EAAE,EAAE,EAAE;;;KAGX,CAAC,CAAC;WACI;MACL;MACA,OAAO;;;MAGP,OAAO;MACP,MAAM;MACN,UAAU;cACF;UACJ;mBACS;UACT;MACJ;MACA,IAAI;gBACM;mBACG;oBACC;qBACC;;;;;;;"}

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

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

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

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

package/es/components/infinite-scroll/index.mjs.map CHANGED Viewed

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

package/es/components/infinite-scroll/src/index.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.mjs","sources":["../../../../../../packages/components/infinite-scroll/src/index.ts"],"sourcesContent":["import { nextTick } from 'vue'\nimport { isFunction } from '@vue/shared'\nimport throttle from 'lodash/throttle'\nimport {\n getScrollContainer,\n getOffsetTopDistance,\n} from '@element-plus/utils/dom'\nimport { throwError } from '@element-plus/utils/error'\n\nimport type { ObjectDirective, ComponentPublicInstance } from 'vue'\n\nexport const SCOPE = 'ElInfiniteScroll'\nexport const CHECK_INTERVAL = 50\nexport const DEFAULT_DELAY = 200\nexport const DEFAULT_DISTANCE = 0\n\nconst attributes = {\n delay: {\n type: Number,\n default: DEFAULT_DELAY,\n },\n distance: {\n type: Number,\n default: DEFAULT_DISTANCE,\n },\n disabled: {\n type: Boolean,\n default: false,\n },\n immediate: {\n type: Boolean,\n default: true,\n },\n}\n\ntype Attrs = typeof attributes\ntype ScrollOptions = { [K in keyof Attrs]: Attrs[K]['default'] }\ntype InfiniteScrollCallback = () => void\ntype InfiniteScrollEl = HTMLElement & {\n [SCOPE]: {\n container: HTMLElement \| Window\n containerEl: HTMLElement\n instance: ComponentPublicInstance\n delay: number // export for test\n lastScrollTop: number\n cb: InfiniteScrollCallback\n onScroll: () => void\n observer?: MutationObserver\n }\n}\n\nconst getScrollOptions = (\n el: HTMLElement,\n instance: ComponentPublicInstance\n): ScrollOptions => {\n return Object.entries(attributes).reduce((acm, [name, option]) => {\n const { type, default: defaultValue } = option\n const attrVal = el.getAttribute(`infinite-scroll-${name}`)\n let value = instance[attrVal] ?? attrVal ?? defaultValue\n value = value === 'false' ? false : value\n value = type(value)\n acm[name] = Number.isNaN(value) ? defaultValue : value\n return acm\n }, {} as ScrollOptions)\n}\n\nconst destroyObserver = (el: InfiniteScrollEl) => {\n const { observer } = el[SCOPE]\n\n if (observer) {\n observer.disconnect()\n delete el[SCOPE].observer\n }\n}\n\nconst handleScroll = (el: InfiniteScrollEl, cb: InfiniteScrollCallback) => {\n const { container, containerEl, instance, observer, lastScrollTop } =\n el[SCOPE]\n const { disabled, distance } = getScrollOptions(el, instance)\n const { clientHeight, scrollHeight, scrollTop } = containerEl\n const delta = scrollTop - lastScrollTop\n\n el[SCOPE].lastScrollTop = scrollTop\n\n // trigger only if full check has done and not disabled and scroll down\n if (observer \|\| disabled \|\| delta < 0) return\n\n let shouldTrigger = false\n\n if (container === el) {\n shouldTrigger = scrollHeight - (clientHeight + scrollTop) <= distance\n } else {\n // get the scrollHeight since el might be visible overflow\n const { clientTop, scrollHeight: height } = el\n const offsetTop = getOffsetTopDistance(el, containerEl)\n shouldTrigger =\n scrollTop + clientHeight >= offsetTop + clientTop + height - distance\n }\n\n if (shouldTrigger) {\n cb.call(instance)\n }\n}\n\nfunction checkFull(el: InfiniteScrollEl, cb: InfiniteScrollCallback) {\n const { containerEl, instance } = el[SCOPE]\n const { disabled } = getScrollOptions(el, instance)\n\n if (disabled) return\n\n if (containerEl.scrollHeight <= containerEl.clientHeight) {\n cb.call(instance)\n } else {\n destroyObserver(el)\n }\n}\n\nconst InfiniteScroll: ObjectDirective<\n InfiniteScrollEl,\n InfiniteScrollCallback\n> = {\n async mounted(el, binding) {\n const { instance, value: cb } = binding\n\n if (!isFunction(cb)) {\n throwError(SCOPE, \"'v-infinite-scroll' binding value must be a function\")\n }\n\n // ensure parentNode mounted\n await nextTick()\n\n const { delay, immediate } = getScrollOptions(el, instance)\n const container = getScrollContainer(el, true)\n const containerEl =\n container === window\n ? document.documentElement\n : (container as HTMLElement)\n const onScroll = throttle(handleScroll.bind(null, el, cb), delay)\n\n if (!container) return\n\n el[SCOPE] = {\n instance,\n container,\n containerEl,\n delay,\n cb,\n onScroll,\n lastScrollTop: containerEl.scrollTop,\n }\n\n if (immediate) {\n const observer = new MutationObserver(\n throttle(checkFull.bind(null, el, cb), CHECK_INTERVAL)\n )\n el[SCOPE].observer = observer\n observer.observe(el, { childList: true, subtree: true })\n checkFull(el, cb)\n }\n\n container.addEventListener('scroll', onScroll)\n },\n unmounted(el) {\n const { container, onScroll } = el[SCOPE]\n\n container?.removeEventListener('scroll', onScroll)\n destroyObserver(el)\n },\n}\n\nexport default InfiniteScroll\n"],"names":[],"mappings":";;;;;;~~MAWa~~,~~QAAQ~~;~~MACR~~,~~iBAAiB~~;~~MACjB~~,~~gBAAgB~~;~~MAChB~~,~~mBAAmB~~;~~AAEhC~~,MAAM,~~aAAa~~;~~AAAA~~,~~EACjB~~,~~OAAO~~;~~AAAA~~,~~IACL~~,MAAM;~~AAAA~~,~~IACN~~,~~SAAS~~;~~AAAA~~;~~AAAA~~,~~EAEX~~,~~UAAU~~;~~AAAA~~,~~IACR~~,MAAM;~~AAAA~~,~~IACN~~,~~SAAS~~;~~AAAA~~;~~AAAA~~,~~EAEX~~,~~UAAU~~;~~AAAA~~,~~IACR~~,~~MAAM~~;~~AAAA~~,~~IACN~~,~~SAAS~~;~~AAAA~~;~~AAAA~~,~~EAEX~~,~~WAAW~~;~~AAAA~~,~~IACT~~,~~MAAM~~;~~AAAA~~,~~IACN~~,~~SAAS~~;~~AAAA~~;~~AAAA~~;~~AAoBb~~,MAAM,~~mBAAmB~~,~~CACvB~~,~~IACA~~,~~aACkB~~;~~AAClB~~,~~SAAO~~,OAAO,~~QAAQ~~,~~YAAY~~,OAAO,CAAC,~~KAAK~~,CAAC,MAAM,~~YAAY;AAvDpE;AAwDI~~,~~UAAM~~,EAAE,MAAM,~~SAAS~~,~~iBAAiB~~;~~AACxC~~,~~UAAM~~,~~UAAU~~,GAAG,~~aAAa~~,~~mBAAmB~~;AACnD,~~QAAI~~,~~QAAQ~~,~~qBAAS~~,~~aAAT~~,~~YAAqB~~,~~YAArB~~,~~YAAgC~~;~~AAC5C~~,~~YAAQ~~,~~UAAU~~,~~UAAU~~,QAAQ~~;AACpC~~,~~YAAQ~~,KAAK;~~AACb~~,~~QAAI~~,~~QAAQ~~,OAAO,MAAM,~~SAAS~~,~~eAAe~~;~~AACjD~~,~~WAAO~~;~~AAAA~~,~~KACN~~;~~AAAA~~;~~AAGL~~,MAAM,~~kBAAkB~~,CAAC,~~OAAyB~~;~~AAChD~~,~~QAAM~~,EAAE,~~aAAa~~,GAAG;~~AAExB~~,~~MAAI~~,~~UAAU~~;~~AACZ~~,~~aAAS~~;~~AACT~~,~~WAAO~~,~~GAAG~~,~~OAAO~~;~~AAAA~~;~~AAAA~~;~~AAIrB~~,MAAM,~~eAAe~~,CAAC,~~IAAsB~~,~~OAA+B~~;~~AACzE~~,~~QAAM~~,EAAE,WAAW,aAAa,~~UAAU~~,~~UAAU~~,~~kBAClD~~,GAAG;~~AACL~~,~~QAAM~~,EAAE,~~UAAU~~,~~aAAa~~,~~iBAAiB~~,~~IAAI~~;~~AACpD~~,~~QAAM~~,EAAE,~~cAAc~~,~~cAAc~~,~~cAAc~~;~~AAClD~~,~~QAAM~~,QAAQ,~~YAAY~~;~~AAE1B~~,~~KAAG~~,OAAO,~~gBAAgB~~;~~AAG1B~~,~~MAAI~~,YAAY,YAAY,QAAQ;~~AAAG;AAEvC~~,~~MAAI~~,~~gBAAgB~~;~~AAEpB~~,~~MAAI~~,~~cAAc~~,~~IAAI;AACpB~~,~~oBAAgB,+BAA+B~~,~~cAAc;AAAA~~,~~SACxD~~;~~AAEL~~,~~UAAM~~,EAAE,WAAW,~~cAAc~~,~~WAAW~~;~~AAC5C~~,~~UAAM~~,~~YAAY~~,~~qBAAqB~~,~~IAAI;AAC3C~~,~~oBACE~~,YAAY,~~gBAAgB~~,~~YAAY~~,~~YAAY~~,SAAS;~~AAAA~~;~~AAGjE~~,~~MAAI~~,~~eAAe~~;~~AACjB~~,~~OAAG~~,~~KAAK~~;~~AAAA~~;~~AAAA~~;~~AAIZ~~,~~mBAAmB~~,~~IAAsB~~,~~IAA4B~~;~~AACnE~~,~~QAAM~~,EAAE,~~aAAa~~,~~aAAa~~,GAAG;~~AACrC~~,~~QAAM~~,EAAE,~~aAAa~~,~~iBAAiB~~,IAAI;~~AAE1C~~,~~MAAI~~;~~AAAU;AAEd~~,~~MAAI~~,YAAY,~~gBAAgB~~,YAAY,~~cAAc~~;~~AACxD~~,~~OAAG~~,~~KAAK~~;~~AAAA~~,~~SACH~~;~~AACL~~,~~oBAAgB~~;~~AAAA~~;~~AAAA~~;~~MAId~~,~~iBAGF~~;~~AAAA~~,~~QACI~~,~~QAAQ~~,~~IAAI~~,~~SAAS~~;~~AACzB~~,~~UAAM~~,EAAE,~~UAAU~~,OAAO,~~OAAO~~;~~AAEhC~~,~~QAAI~~,CAAC,~~WAAW~~,~~KAAK~~;~~AACnB~~,~~iBAAW~~,~~OAAO~~;~~AAAA~~;~~AAIpB~~,~~UAAM~~;~~AAEN~~,~~UAAM~~,EAAE,~~OAAO~~,~~cAAc~~,~~iBAAiB~~,~~IAAI~~;~~AAClD~~,~~UAAM~~,~~YAAY~~,~~mBAAmB~~,IAAI;~~AACzC~~,~~UAAM~~,~~cACJ~~,~~cAAc~~,~~SACV~~,SAAS,~~kBACR;AACP~~,~~UAAM~~,~~WAAW~~,SAAS,~~aAAa~~,~~KAAK~~,MAAM,IAAI,KAAK~~;AAE3D~~,~~QAAI~~,CAAC;~~AAAW;AAEhB~~,~~OAAG~~,SAAS;~~AAAA~~,~~MACV~~;~~AAAA~~,~~MACA~~;~~AAAA~~,~~MACA~~;~~AAAA~~,~~MACA~~;~~AAAA~~,~~MACA~~;~~AAAA~~,~~MACA~~;~~AAAA~~,~~MACA~~,~~eAAe~~,~~YAAY~~;~~AAAA;AAG7B~~,~~QAAI~~,WAAW;~~AACb~~,~~YAAM~~,~~WAAW~~,IAAI,~~iBACnB~~,SAAS,~~UAAU~~,~~KAAK~~,MAAM,IAAI,~~KAAK~~;~~AAEzC~~,~~SAAG~~,~~OAAO~~,~~WAAW~~;~~AACrB~~,~~eAAS~~,QAAQ,IAAI,EAAE,~~WAAW~~,MAAM,SAAS;~~AACjD~~,~~gBAAU~~,IAAI;~~AAAA~~;~~AAGhB~~,~~cAAU~~,~~iBAAiB~~,~~UAAU~~;~~AAAA~~;~~AAAA~~,~~EAEvC~~,~~UAAU~~,IAAI~~;AACZ~~,~~UAAM~~,EAAE,~~WAAW~~,~~aAAa~~,~~GAAG~~;~~AAEnC~~,~~2CAAW~~,~~oBAAoB~~,~~UAAU~~;~~AACzC~~,~~oBAAgB~~;~~AAAA;AAAA~~;;;;"}
1	+ {"version":3,"file":"index.mjs","sources":["../../../../../../packages/components/infinite-scroll/src/index.ts"],"sourcesContent":["import { nextTick } from 'vue'\nimport { isFunction } from '@vue/shared'\nimport throttle from 'lodash/throttle'\nimport {\n getScrollContainer,\n getOffsetTopDistance,\n} from '@element-plus/utils/dom'\nimport { throwError } from '@element-plus/utils/error'\n\nimport type { ObjectDirective, ComponentPublicInstance } from 'vue'\n\nexport const SCOPE = 'ElInfiniteScroll'\nexport const CHECK_INTERVAL = 50\nexport const DEFAULT_DELAY = 200\nexport const DEFAULT_DISTANCE = 0\n\nconst attributes = {\n delay: {\n type: Number,\n default: DEFAULT_DELAY,\n },\n distance: {\n type: Number,\n default: DEFAULT_DISTANCE,\n },\n disabled: {\n type: Boolean,\n default: false,\n },\n immediate: {\n type: Boolean,\n default: true,\n },\n}\n\ntype Attrs = typeof attributes\ntype ScrollOptions = { [K in keyof Attrs]: Attrs[K]['default'] }\ntype InfiniteScrollCallback = () => void\ntype InfiniteScrollEl = HTMLElement & {\n [SCOPE]: {\n container: HTMLElement \| Window\n containerEl: HTMLElement\n instance: ComponentPublicInstance\n delay: number // export for test\n lastScrollTop: number\n cb: InfiniteScrollCallback\n onScroll: () => void\n observer?: MutationObserver\n }\n}\n\nconst getScrollOptions = (\n el: HTMLElement,\n instance: ComponentPublicInstance\n): ScrollOptions => {\n return Object.entries(attributes).reduce((acm, [name, option]) => {\n const { type, default: defaultValue } = option\n const attrVal = el.getAttribute(`infinite-scroll-${name}`)\n let value = instance[attrVal] ?? attrVal ?? defaultValue\n value = value === 'false' ? false : value\n value = type(value)\n acm[name] = Number.isNaN(value) ? defaultValue : value\n return acm\n }, {} as ScrollOptions)\n}\n\nconst destroyObserver = (el: InfiniteScrollEl) => {\n const { observer } = el[SCOPE]\n\n if (observer) {\n observer.disconnect()\n delete el[SCOPE].observer\n }\n}\n\nconst handleScroll = (el: InfiniteScrollEl, cb: InfiniteScrollCallback) => {\n const { container, containerEl, instance, observer, lastScrollTop } =\n el[SCOPE]\n const { disabled, distance } = getScrollOptions(el, instance)\n const { clientHeight, scrollHeight, scrollTop } = containerEl\n const delta = scrollTop - lastScrollTop\n\n el[SCOPE].lastScrollTop = scrollTop\n\n // trigger only if full check has done and not disabled and scroll down\n if (observer \|\| disabled \|\| delta < 0) return\n\n let shouldTrigger = false\n\n if (container === el) {\n shouldTrigger = scrollHeight - (clientHeight + scrollTop) <= distance\n } else {\n // get the scrollHeight since el might be visible overflow\n const { clientTop, scrollHeight: height } = el\n const offsetTop = getOffsetTopDistance(el, containerEl)\n shouldTrigger =\n scrollTop + clientHeight >= offsetTop + clientTop + height - distance\n }\n\n if (shouldTrigger) {\n cb.call(instance)\n }\n}\n\nfunction checkFull(el: InfiniteScrollEl, cb: InfiniteScrollCallback) {\n const { containerEl, instance } = el[SCOPE]\n const { disabled } = getScrollOptions(el, instance)\n\n if (disabled) return\n\n if (containerEl.scrollHeight <= containerEl.clientHeight) {\n cb.call(instance)\n } else {\n destroyObserver(el)\n }\n}\n\nconst InfiniteScroll: ObjectDirective<\n InfiniteScrollEl,\n InfiniteScrollCallback\n> = {\n async mounted(el, binding) {\n const { instance, value: cb } = binding\n\n if (!isFunction(cb)) {\n throwError(SCOPE, \"'v-infinite-scroll' binding value must be a function\")\n }\n\n // ensure parentNode mounted\n await nextTick()\n\n const { delay, immediate } = getScrollOptions(el, instance)\n const container = getScrollContainer(el, true)\n const containerEl =\n container === window\n ? document.documentElement\n : (container as HTMLElement)\n const onScroll = throttle(handleScroll.bind(null, el, cb), delay)\n\n if (!container) return\n\n el[SCOPE] = {\n instance,\n container,\n containerEl,\n delay,\n cb,\n onScroll,\n lastScrollTop: containerEl.scrollTop,\n }\n\n if (immediate) {\n const observer = new MutationObserver(\n throttle(checkFull.bind(null, el, cb), CHECK_INTERVAL)\n )\n el[SCOPE].observer = observer\n observer.observe(el, { childList: true, subtree: true })\n checkFull(el, cb)\n }\n\n container.addEventListener('scroll', onScroll)\n },\n unmounted(el) {\n const { container, onScroll } = el[SCOPE]\n\n container?.removeEventListener('scroll', onScroll)\n destroyObserver(el)\n },\n}\n\nexport default InfiniteScroll\n"],"names":[],"mappings":"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"}

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

@@ -1,5 +1,5 @@
 export declare const ElInput: import("../../utils/types").SFCWithInstall<import("vue").DefineComponent<{
-    readonly size: import("../../utils/props").BuildPropReturn<StringConstructor, "", false, "" | "small" | "large" | "medium" | "mini", never>;
+    readonly size: import("../../utils/props").BuildPropReturn<StringConstructor, "", false, "" | "small" | "default" | "large", never>;
     readonly disabled: BooleanConstructor;
     readonly modelValue: import("../../utils/props").BuildPropReturn<import("../../utils/props").PropWrapper<string | number | null | undefined>, "", unknown, unknown, unknown>;
     readonly type: import("../../utils/props").BuildPropReturn<StringConstructor, "text", unknown, unknown, unknown>;
@@ -25,7 +25,7 @@ export declare const ElInput: import("../../utils/types").SFCWithInstall<import(
     input: import("vue").Ref<HTMLInputElement | undefined>;
     textarea: import("vue").Ref<HTMLTextAreaElement | undefined>;
     attrs: import("vue").ComputedRef<Record<string, unknown>>;
-    inputSize: import("vue").ComputedRef<"" | import("../../utils/types").ComponentSize>;
+    inputSize: import("vue").ComputedRef<import("../../utils/types").ComponentSize>;
     validateState: import("vue").ComputedRef<string>;
     validateIcon: import("vue").ComputedRef<any>;
     containerStyle: import("vue").ComputedRef<import("../../utils/types").StyleValue>;
@@ -91,7 +91,7 @@ export declare const ElInput: import("../../utils/types").SFCWithInstall<import(
     readonly inputStyle?: unknown;
 } & {
     type: string;
-    size: import("../../utils/props").BuildPropType<StringConstructor, "" | "small" | "large" | "medium" | "mini", never>;
+    size: import("../../utils/props").BuildPropType<StringConstructor, "" | "small" | "default" | "large", never>;
     disabled: boolean;
     modelValue: import("../../utils/props").BuildPropType<import("../../utils/props").PropWrapper<string | number | null | undefined>, unknown, unknown>;
     form: string;
@@ -128,7 +128,7 @@ export declare const ElInput: import("../../utils/types").SFCWithInstall<import(
     onClear?: (() => any) | undefined;
 }, {
     type: string;
-    size: import("../../utils/props").BuildPropType<StringConstructor, "" | "small" | "large" | "medium" | "mini", never>;
+    size: import("../../utils/props").BuildPropType<StringConstructor, "" | "small" | "default" | "large", never>;
     disabled: boolean;
     modelValue: import("../../utils/props").BuildPropType<import("../../utils/props").PropWrapper<string | number | null | undefined>, unknown, unknown>;
     label: string;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.mjs","sources":["../../../../../packages/components/input/index.ts"],"sourcesContent":["import { withInstall } from '@element-plus/utils/with-install'\n\nimport Input from './src/input.vue'\n\nexport const ElInput = withInstall(Input)\nexport default ElInput\n\nexport * from './src/input'\n"],"names":["Input"],"mappings":";;;;;~~MAIa~~,~~UAAU~~,~~YAAYA~~;;;;"}
1	+ {"version":3,"file":"index.mjs","sources":["../../../../../packages/components/input/index.ts"],"sourcesContent":["import { withInstall } from '@element-plus/utils/with-install'\n\nimport Input from './src/input.vue'\n\nexport const ElInput = withInstall(Input)\nexport default ElInput\n\nexport * from './src/input'\n"],"names":["Input"],"mappings":";;;;;AAEY,MAAC,OAAO,GAAG,WAAW,CAACA,MAAK;;;;"}

package/es/components/input/src/calc-textarea-height.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"calc-textarea-height.mjs","sources":["../../../../../../packages/components/input/src/calc-textarea-height.ts"],"sourcesContent":["import { isNumber } from '@element-plus/utils/util'\n\nlet hiddenTextarea: HTMLTextAreaElement \| undefined = undefined\n\nconst HIDDEN_STYLE = `\n height:0 !important;\n visibility:hidden !important;\n overflow:hidden !important;\n position:absolute !important;\n z-index:-1000 !important;\n top:0 !important;\n right:0 !important;\n`\n\nconst CONTEXT_STYLE = [\n 'letter-spacing',\n 'line-height',\n 'padding-top',\n 'padding-bottom',\n 'font-family',\n 'font-weight',\n 'font-size',\n 'text-rendering',\n 'text-transform',\n 'width',\n 'text-indent',\n 'padding-left',\n 'padding-right',\n 'border-width',\n 'box-sizing',\n]\n\ntype NodeStyle = {\n contextStyle: string\n boxSizing: string\n paddingSize: number\n borderSize: number\n}\n\ntype TextAreaHeight = {\n height: string\n minHeight?: string\n}\n\nfunction calculateNodeStyling(targetElement: Element): NodeStyle {\n const style = window.getComputedStyle(targetElement)\n\n const boxSizing = style.getPropertyValue('box-sizing')\n\n const paddingSize =\n parseFloat(style.getPropertyValue('padding-bottom')) +\n parseFloat(style.getPropertyValue('padding-top'))\n\n const borderSize =\n parseFloat(style.getPropertyValue('border-bottom-width')) +\n parseFloat(style.getPropertyValue('border-top-width'))\n\n const contextStyle = CONTEXT_STYLE.map(\n (name) => `${name}:${style.getPropertyValue(name)}`\n ).join(';')\n\n return { contextStyle, paddingSize, borderSize, boxSizing }\n}\n\nexport function calcTextareaHeight(\n targetElement: HTMLTextAreaElement,\n minRows = 1,\n maxRows?: number\n): TextAreaHeight {\n if (!hiddenTextarea) {\n hiddenTextarea = document.createElement('textarea')\n document.body.appendChild(hiddenTextarea)\n }\n\n const { paddingSize, borderSize, boxSizing, contextStyle } =\n calculateNodeStyling(targetElement)\n\n hiddenTextarea.setAttribute('style', `${contextStyle};${HIDDEN_STYLE}`)\n hiddenTextarea.value = targetElement.value \|\| targetElement.placeholder \|\| ''\n\n let height = hiddenTextarea.scrollHeight\n const result = {} as TextAreaHeight\n\n if (boxSizing === 'border-box') {\n height = height + borderSize\n } else if (boxSizing === 'content-box') {\n height = height - paddingSize\n }\n\n hiddenTextarea.value = ''\n const singleRowHeight = hiddenTextarea.scrollHeight - paddingSize\n\n if (isNumber(minRows)) {\n let minHeight = singleRowHeight * minRows\n if (boxSizing === 'border-box') {\n minHeight = minHeight + paddingSize + borderSize\n }\n height = Math.max(minHeight, height)\n result.minHeight = `${minHeight}px`\n }\n if (isNumber(maxRows)) {\n let maxHeight = singleRowHeight * maxRows\n if (boxSizing === 'border-box') {\n maxHeight = maxHeight + paddingSize + borderSize\n }\n height = Math.min(maxHeight, height)\n }\n result.height = `${height}px`\n hiddenTextarea.parentNode?.removeChild(hiddenTextarea)\n hiddenTextarea = undefined\n\n return result\n}\n"],"names":[],"mappings":";;~~AAEA~~,IAAI,~~iBAAkD~~;~~AAEtD~~,MAAM,~~eAAe~~;~~AAAA~~;~~AAAA~~;~~AAAA~~;~~AAAA~~;~~AAAA~~;~~AAAA~~;~~AAAA~~;~~AAAA~~;~~AAUrB~~,MAAM,~~gBAAgB~~;~~AAAA~~,~~EACpB~~;~~AAAA~~,~~EACA~~;~~AAAA~~,~~EACA~~;~~AAAA~~,~~EACA~~;~~AAAA~~,~~EACA~~;~~AAAA~~,~~EACA~~;~~AAAA~~,~~EACA~~;~~AAAA~~,~~EACA~~;~~AAAA~~,~~EACA~~;~~AAAA~~,~~EACA~~;~~AAAA~~,~~EACA~~;~~AAAA~~,~~EACA~~;~~AAAA~~,~~EACA~~;~~AAAA~~,~~EACA~~;~~AAAA~~,~~EACA~~;~~AAAA;AAeF~~,~~8BAA8B~~,~~eAAmC~~;~~AAC/D~~,~~QAAM~~,~~QAAQ~~,~~OAAO~~,~~iBAAiB~~;~~AAEtC~~,~~QAAM~~,~~YAAY~~,MAAM,~~iBAAiB;AAEzC~~,~~QAAM~~,~~cACJ~~,~~WAAW~~,MAAM,~~iBAAiB~~,~~qBAClC~~,~~WAAW~~,~~MAAM~~,~~iBAAiB~~;~~AAEpC~~,~~QAAM~~,~~aACJ~~,WAAW,~~MAAM~~,~~iBAAiB~~,~~0BAClC~~,~~WAAW~~,~~MAAM~~,~~iBAAiB~~;~~AAEpC~~,~~QAAM~~,~~eAAe~~,~~cAAc~~,~~IACjC~~,CAAC,~~SAAS~~,GAAG,~~QAAQ~~,MAAM,~~iBAAiB~~,~~SAC5C~~,KAAK~~;AAEP~~,~~SAAO~~,EAAE,~~cAAc~~,~~aAAa~~,~~YAAY~~;~~AAAA;4BAIhD~~,~~eACA~~,UAAU,~~GACV~~,~~SACgB~~;~~AApElB~~;~~AAqEE~~,~~MAAI~~,CAAC,~~gBAAgB~~;~~AACnB~~,~~qBAAiB~~,~~SAAS~~,cAAc;~~AACxC~~,~~aAAS~~,~~KAAK~~,~~YAAY~~;~~AAAA~~;~~AAG5B~~,~~QAAM~~,EAAE,aAAa,YAAY,~~WAAW~~,~~iBAC1C~~,~~qBAAqB~~;~~AAEvB~~,~~iBAAe~~,~~aAAa~~,~~SAAS~~,GAAG,~~gBAAgB~~;~~AACxD~~,~~iBAAe~~,~~QAAQ~~,~~cAAc~~,~~SAAS~~,cAAc,~~eAAe~~;~~AAE3E~~,~~MAAI~~,~~SAAS~~,~~eAAe~~;~~AAC5B~~,~~QAAM~~,SAAS;~~AAEf~~,~~MAAI~~,~~cAAc~~,~~cAAc~~;~~AAC9B~~,~~aAAS~~,SAAS;~~AAAA~~,~~aACT~~,cAAc,~~eAAe~~;~~AACtC~~,~~aAAS~~,~~SAAS~~;~~AAAA;AAGpB~~,~~iBAAe~~,QAAQ;~~AACvB~~,~~QAAM~~,~~kBAAkB~~,eAAe,~~eAAe~~;~~AAEtD~~,~~MAAI~~,SAAS,~~UAAU;AACrB~~,~~QAAI,~~YAAY,~~kBAAkB~~;~~AAClC~~,~~QAAI~~,~~cAAc~~,~~cAAc;AAC9B~~,~~kBAAY~~,~~YAAY~~,~~cAAc~~;~~AAAA~~;~~AAExC~~,~~aAAS~~,~~KAAK~~,IAAI,~~WAAW~~;~~AAC7B~~,~~WAAO~~,~~YAAY~~,GAAG;~~AAAA~~;~~AAExB~~,~~MAAI~~,SAAS,~~UAAU~~;~~AACrB~~,~~QAAI~~,YAAY,~~kBAAkB~~;~~AAClC~~,~~QAAI~~,~~cAAc~~,~~cAAc;AAC9B~~,~~kBAAY~~,~~YAAY~~,~~cAAc~~;~~AAAA~~;~~AAExC~~,~~aAAS~~,~~KAAK~~,IAAI,~~WAAW~~;~~AAAA~~;~~AAE/B~~,~~SAAO~~,~~SAAS~~,GAAG;~~AACnB~~,~~uBAAe~~,~~eAAf~~,~~mBAA2B~~,~~YAAY~~;~~AACvC~~,~~mBAAiB~~;~~AAEjB~~,~~SAAO~~;~~AAAA~~;;;;"}
1	+ {"version":3,"file":"calc-textarea-height.mjs","sources":["../../../../../../packages/components/input/src/calc-textarea-height.ts"],"sourcesContent":["import { isNumber } from '@element-plus/utils/util'\n\nlet hiddenTextarea: HTMLTextAreaElement \| undefined = undefined\n\nconst HIDDEN_STYLE = `\n height:0 !important;\n visibility:hidden !important;\n overflow:hidden !important;\n position:absolute !important;\n z-index:-1000 !important;\n top:0 !important;\n right:0 !important;\n`\n\nconst CONTEXT_STYLE = [\n 'letter-spacing',\n 'line-height',\n 'padding-top',\n 'padding-bottom',\n 'font-family',\n 'font-weight',\n 'font-size',\n 'text-rendering',\n 'text-transform',\n 'width',\n 'text-indent',\n 'padding-left',\n 'padding-right',\n 'border-width',\n 'box-sizing',\n]\n\ntype NodeStyle = {\n contextStyle: string\n boxSizing: string\n paddingSize: number\n borderSize: number\n}\n\ntype TextAreaHeight = {\n height: string\n minHeight?: string\n}\n\nfunction calculateNodeStyling(targetElement: Element): NodeStyle {\n const style = window.getComputedStyle(targetElement)\n\n const boxSizing = style.getPropertyValue('box-sizing')\n\n const paddingSize =\n parseFloat(style.getPropertyValue('padding-bottom')) +\n parseFloat(style.getPropertyValue('padding-top'))\n\n const borderSize =\n parseFloat(style.getPropertyValue('border-bottom-width')) +\n parseFloat(style.getPropertyValue('border-top-width'))\n\n const contextStyle = CONTEXT_STYLE.map(\n (name) => `${name}:${style.getPropertyValue(name)}`\n ).join(';')\n\n return { contextStyle, paddingSize, borderSize, boxSizing }\n}\n\nexport function calcTextareaHeight(\n targetElement: HTMLTextAreaElement,\n minRows = 1,\n maxRows?: number\n): TextAreaHeight {\n if (!hiddenTextarea) {\n hiddenTextarea = document.createElement('textarea')\n document.body.appendChild(hiddenTextarea)\n }\n\n const { paddingSize, borderSize, boxSizing, contextStyle } =\n calculateNodeStyling(targetElement)\n\n hiddenTextarea.setAttribute('style', `${contextStyle};${HIDDEN_STYLE}`)\n hiddenTextarea.value = targetElement.value \|\| targetElement.placeholder \|\| ''\n\n let height = hiddenTextarea.scrollHeight\n const result = {} as TextAreaHeight\n\n if (boxSizing === 'border-box') {\n height = height + borderSize\n } else if (boxSizing === 'content-box') {\n height = height - paddingSize\n }\n\n hiddenTextarea.value = ''\n const singleRowHeight = hiddenTextarea.scrollHeight - paddingSize\n\n if (isNumber(minRows)) {\n let minHeight = singleRowHeight * minRows\n if (boxSizing === 'border-box') {\n minHeight = minHeight + paddingSize + borderSize\n }\n height = Math.max(minHeight, height)\n result.minHeight = `${minHeight}px`\n }\n if (isNumber(maxRows)) {\n let maxHeight = singleRowHeight * maxRows\n if (boxSizing === 'border-box') {\n maxHeight = maxHeight + paddingSize + borderSize\n }\n height = Math.min(maxHeight, height)\n }\n result.height = `${height}px`\n hiddenTextarea.parentNode?.removeChild(hiddenTextarea)\n hiddenTextarea = undefined\n\n return result\n}\n"],"names":[],"mappings":"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"}

package/es/components/input/src/input.d.ts CHANGED Viewed

@@ -5,7 +5,7 @@ declare type AutoSize = {
     maxRows?: number;
 } | boolean;
 export declare const inputProps: {
-    readonly size: import("element-plus/es/utils/props").BuildPropReturn<StringConstructor, "", false, "" | "small" | "large" | "medium" | "mini", never>;
+    readonly size: import("element-plus/es/utils/props").BuildPropReturn<StringConstructor, "", false, "" | "small" | "default" | "large", never>;
     readonly disabled: BooleanConstructor;
     readonly modelValue: import("element-plus/es/utils/props").BuildPropReturn<import("element-plus/es/utils/props").PropWrapper<string | number | null | undefined>, "", unknown, unknown, unknown>;
     readonly type: import("element-plus/es/utils/props").BuildPropReturn<StringConstructor, "text", unknown, unknown, unknown>;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"input.mjs","sources":["../../../../../../packages/components/input/src/input.ts"],"sourcesContent":["import { isString } from '@vue/shared'\nimport { buildProps, definePropType, mutable } from '@element-plus/utils/props'\nimport { UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'\nimport { useSizeProp } from '@element-plus/hooks'\nimport type { StyleValue } from '@element-plus/utils/types'\nimport type { ExtractPropTypes, Component } from 'vue'\n\ntype AutoSize = { minRows?: number; maxRows?: number } \| boolean\n\nexport const inputProps = buildProps({\n size: useSizeProp,\n disabled: Boolean,\n modelValue: {\n type: definePropType<string \| number \| null \| undefined>(undefined),\n default: '',\n },\n type: {\n type: String,\n default: 'text',\n },\n resize: {\n type: String,\n values: ['none', 'both', 'horizontal', 'vertical'],\n },\n autosize: {\n type: definePropType<AutoSize>([Boolean, Object]),\n default: false,\n },\n autocomplete: {\n type: String,\n default: 'off',\n },\n placeholder: {\n type: String,\n },\n form: {\n type: String,\n default: '',\n },\n readonly: {\n type: Boolean,\n default: false,\n },\n clearable: {\n type: Boolean,\n default: false,\n },\n showPassword: {\n type: Boolean,\n default: false,\n },\n showWordLimit: {\n type: Boolean,\n default: false,\n },\n suffixIcon: {\n type: definePropType<string \| Component>([String, Object]),\n default: '',\n },\n prefixIcon: {\n type: definePropType<string \| Component>([String, Object]),\n default: '',\n },\n label: {\n type: String,\n },\n tabindex: {\n type: [Number, String],\n },\n validateEvent: {\n type: Boolean,\n default: true,\n },\n inputStyle: {\n type: definePropType<StyleValue>([Object, Array, String]),\n default: () => mutable({} as const),\n },\n} as const)\nexport type InputProps = ExtractPropTypes<typeof inputProps>\n\nexport const inputEmits = {\n [UPDATE_MODEL_EVENT]: (value: string) => isString(value),\n input: (value: string) => isString(value),\n change: (value: string) => isString(value),\n focus: (evt: FocusEvent) => evt instanceof FocusEvent,\n blur: (evt: FocusEvent) => evt instanceof FocusEvent,\n clear: () => true,\n mouseleave: (evt: MouseEvent) => evt instanceof MouseEvent,\n mouseenter: (evt: MouseEvent) => evt instanceof MouseEvent,\n keydown: (evt: KeyboardEvent) => evt instanceof KeyboardEvent,\n compositionstart: (evt: CompositionEvent) => evt instanceof CompositionEvent,\n compositionupdate: (evt: CompositionEvent) => evt instanceof CompositionEvent,\n compositionend: (evt: CompositionEvent) => evt instanceof CompositionEvent,\n}\nexport type InputEmits = typeof inputEmits\n"],"names":[],"mappings":";;;;;;~~MASa~~,~~aAAa~~,WAAW;~~AAAA~~,~~EACnC~~,~~MAAM~~;~~AAAA~~,~~EACN~~,UAAU;~~AAAA~~,~~EACV~~,~~YAAY;AAAA~~,~~IACV~~,~~MAAM~~,~~eAAmD~~;~~AAAA~~,~~IACzD~~,~~SAAS~~;~~AAAA~~;~~AAAA~~,~~EAEX~~,~~MAAM~~;~~AAAA~~,~~IACJ~~,MAAM;~~AAAA~~,~~IACN~~,~~SAAS~~;~~AAAA~~;~~AAAA~~,~~EAEX~~,~~QAAQ~~;~~AAAA~~,~~IACN~~,MAAM;~~AAAA~~,~~IACN~~,~~QAAQ~~,CAAC,~~QAAQ~~,~~QAAQ~~,~~cAAc~~;~~AAAA~~;~~AAAA~~,~~EAEzC~~,~~UAAU~~;~~AAAA~~,~~IACR~~,MAAM,~~eAAyB~~,CAAC~~,SAAS~~;~~AAAA~~,~~IACzC~~,~~SAAS~~;~~AAAA~~;~~AAAA~~,~~EAEX~~,~~cAAc~~;~~AAAA~~,~~IACZ~~,MAAM;~~AAAA~~,~~IACN~~,~~SAAS~~;~~AAAA~~;~~AAAA~~,~~EAEX~~,~~aAAa~~;~~AAAA~~,~~IACX~~,MAAM;~~AAAA~~;~~AAAA~~,~~EAER~~,~~MAAM~~;~~AAAA~~,~~IACJ~~,MAAM;~~AAAA~~,~~IACN~~,~~SAAS~~;~~AAAA~~;~~AAAA~~,~~EAEX~~,~~UAAU~~;~~AAAA~~,~~IACR~~,~~MAAM~~;~~AAAA~~,~~IACN~~,~~SAAS~~;~~AAAA~~;~~AAAA~~,~~EAEX~~,~~WAAW~~;~~AAAA~~,~~IACT~~,~~MAAM~~;~~AAAA~~,~~IACN~~,~~SAAS~~;~~AAAA~~;~~AAAA~~,~~EAEX~~,~~cAAc~~;~~AAAA~~,~~IACZ~~,~~MAAM~~;~~AAAA~~,~~IACN~~,~~SAAS~~;~~AAAA~~;~~AAAA~~,~~EAEX~~,~~eAAe~~;~~AAAA~~,~~IACb~~,~~MAAM~~;~~AAAA~~,~~IACN~~,~~SAAS~~;~~AAAA~~;~~AAAA~~,~~EAEX~~,~~YAAY~~;~~AAAA~~,~~IACV~~,MAAM,~~eAAmC~~,CAAC,~~QAAQ~~;~~AAAA~~,~~IAClD~~,~~SAAS~~;~~AAAA~~;~~AAAA~~,~~EAEX~~,~~YAAY~~;~~AAAA~~,~~IACV~~,MAAM,~~eAAmC~~,CAAC,~~QAAQ~~;~~AAAA~~,~~IAClD~~,~~SAAS~~;~~AAAA~~;~~AAAA~~,~~EAEX~~,~~OAAO~~;~~AAAA~~,~~IACL~~,MAAM;~~AAAA~~;~~AAAA~~,~~EAER~~,~~UAAU~~;~~AAAA~~,~~IACR~~,MAAM,CAAC,~~QAAQ~~;~~AAAA;AAAA~~,~~EAEjB~~,~~eAAe~~;~~AAAA~~,~~IACb~~,~~MAAM~~;~~AAAA~~,~~IACN~~,~~SAAS~~;~~AAAA~~;~~AAAA~~,~~EAEX~~,~~YAAY~~;~~AAAA~~,~~IACV~~,MAAM,~~eAA2B~~,CAAC,~~QAAQ~~,OAAO~~;AAAA~~,~~IACjD~~,~~SAAS,~~MAAM,~~QAAQ~~;~~AAAA~~;~~AAAA~~;~~MAKd~~,~~aAAa~~;~~AAAA~~,~~GACvB~~,~~qBAAqB~~,CAAC,~~UAAkB~~,~~SAAS~~;~~AAAA~~,~~EAClD~~,~~OAAO~~,CAAC,~~UAAkB~~,~~SAAS~~;~~AAAA~~,~~EACnC~~,QAAQ,CAAC,~~UAAkB~~,~~SAAS~~;~~AAAA~~,~~EACpC~~,~~OAAO~~,CAAC,~~QAAoB~~,~~eAAe~~;~~AAAA~~,~~EAC3C~~,~~MAAM~~,CAAC,~~QAAoB~~,~~eAAe~~;~~AAAA~~,~~EAC1C~~,~~OAAO~~,MAAM;~~AAAA~~,~~EACb~~,~~YAAY~~,CAAC,~~QAAoB~~,~~eAAe;AAAA~~,~~EAChD~~,YAAY,CAAC,~~QAAoB~~,~~eAAe~~;~~AAAA~~,~~EAChD~~,~~SAAS~~,CAAC,~~QAAuB~~,~~eAAe~~;~~AAAA~~,~~EAChD~~,~~kBAAkB~~,CAAC,~~QAA0B~~,~~eAAe~~;~~AAAA~~,~~EAC5D~~,~~mBAAmB~~,CAAC,~~QAA0B~~,~~eAAe;AAAA~~,~~EAC7D~~,gBAAgB,CAAC,~~QAA0B~~,~~eAAe~~;~~AAAA~~;;;;"}
1	+ {"version":3,"file":"input.mjs","sources":["../../../../../../packages/components/input/src/input.ts"],"sourcesContent":["import { isString } from '@vue/shared'\nimport { buildProps, definePropType, mutable } from '@element-plus/utils/props'\nimport { UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'\nimport { useSizeProp } from '@element-plus/hooks'\nimport type { StyleValue } from '@element-plus/utils/types'\nimport type { ExtractPropTypes, Component } from 'vue'\n\ntype AutoSize = { minRows?: number; maxRows?: number } \| boolean\n\nexport const inputProps = buildProps({\n size: useSizeProp,\n disabled: Boolean,\n modelValue: {\n type: definePropType<string \| number \| null \| undefined>(undefined),\n default: '',\n },\n type: {\n type: String,\n default: 'text',\n },\n resize: {\n type: String,\n values: ['none', 'both', 'horizontal', 'vertical'],\n },\n autosize: {\n type: definePropType<AutoSize>([Boolean, Object]),\n default: false,\n },\n autocomplete: {\n type: String,\n default: 'off',\n },\n placeholder: {\n type: String,\n },\n form: {\n type: String,\n default: '',\n },\n readonly: {\n type: Boolean,\n default: false,\n },\n clearable: {\n type: Boolean,\n default: false,\n },\n showPassword: {\n type: Boolean,\n default: false,\n },\n showWordLimit: {\n type: Boolean,\n default: false,\n },\n suffixIcon: {\n type: definePropType<string \| Component>([String, Object]),\n default: '',\n },\n prefixIcon: {\n type: definePropType<string \| Component>([String, Object]),\n default: '',\n },\n label: {\n type: String,\n },\n tabindex: {\n type: [Number, String],\n },\n validateEvent: {\n type: Boolean,\n default: true,\n },\n inputStyle: {\n type: definePropType<StyleValue>([Object, Array, String]),\n default: () => mutable({} as const),\n },\n} as const)\nexport type InputProps = ExtractPropTypes<typeof inputProps>\n\nexport const inputEmits = {\n [UPDATE_MODEL_EVENT]: (value: string) => isString(value),\n input: (value: string) => isString(value),\n change: (value: string) => isString(value),\n focus: (evt: FocusEvent) => evt instanceof FocusEvent,\n blur: (evt: FocusEvent) => evt instanceof FocusEvent,\n clear: () => true,\n mouseleave: (evt: MouseEvent) => evt instanceof MouseEvent,\n mouseenter: (evt: MouseEvent) => evt instanceof MouseEvent,\n keydown: (evt: KeyboardEvent) => evt instanceof KeyboardEvent,\n compositionstart: (evt: CompositionEvent) => evt instanceof CompositionEvent,\n compositionupdate: (evt: CompositionEvent) => evt instanceof CompositionEvent,\n compositionend: (evt: CompositionEvent) => evt instanceof CompositionEvent,\n}\nexport type InputEmits = typeof inputEmits\n"],"names":[],"mappings":"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"}

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

@@ -1,6 +1,6 @@
 import type { StyleValue } from 'element-plus/es/utils/types';
 declare const _default: import("vue").DefineComponent<{
-    readonly size: import("../../../utils/props").BuildPropReturn<StringConstructor, "", false, "" | "small" | "large" | "medium" | "mini", never>;
+    readonly size: import("../../../utils/props").BuildPropReturn<StringConstructor, "", false, "" | "small" | "default" | "large", never>;
     readonly disabled: BooleanConstructor;
     readonly modelValue: import("../../../utils/props").BuildPropReturn<import("../../../utils/props").PropWrapper<string | number | null | undefined>, "", unknown, unknown, unknown>;
     readonly type: import("../../../utils/props").BuildPropReturn<StringConstructor, "text", unknown, unknown, unknown>;
@@ -26,7 +26,7 @@ declare const _default: import("vue").DefineComponent<{
     input: import("vue").Ref<HTMLInputElement | undefined>;
     textarea: import("vue").Ref<HTMLTextAreaElement | undefined>;
     attrs: import("vue").ComputedRef<Record<string, unknown>>;
-    inputSize: import("vue").ComputedRef<"" | import("element-plus/es/utils/types").ComponentSize>;
+    inputSize: import("vue").ComputedRef<import("element-plus/es/utils/types").ComponentSize>;
     validateState: import("vue").ComputedRef<string>;
     validateIcon: import("vue").ComputedRef<any>;
     containerStyle: import("vue").ComputedRef<StyleValue>;
@@ -92,7 +92,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly inputStyle?: unknown;
 } & {
     type: string;
-    size: import("../../../utils/props").BuildPropType<StringConstructor, "" | "small" | "large" | "medium" | "mini", never>;
+    size: import("../../../utils/props").BuildPropType<StringConstructor, "" | "small" | "default" | "large", never>;
     disabled: boolean;
     modelValue: import("../../../utils/props").BuildPropType<import("../../../utils/props").PropWrapper<string | number | null | undefined>, unknown, unknown>;
     form: string;
@@ -129,7 +129,7 @@ declare const _default: import("vue").DefineComponent<{
     onClear?: (() => any) | undefined;
 }, {
     type: string;
-    size: import("../../../utils/props").BuildPropType<StringConstructor, "" | "small" | "large" | "medium" | "mini", never>;
+    size: import("../../../utils/props").BuildPropType<StringConstructor, "" | "small" | "default" | "large", never>;
     disabled: boolean;
     modelValue: import("../../../utils/props").BuildPropType<import("../../../utils/props").PropWrapper<string | number | null | undefined>, unknown, unknown>;
     label: string;

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

@@ -1,11 +1,11 @@
 import { defineComponent, getCurrentInstance, ref, shallowRef, computed, nextTick, watch, onMounted, onUpdated } from 'vue';
+import { isClient } from '@vueuse/core';
 import { ElIcon } from '../../icon/index.mjs';
 import { CircleClose, View } from '@element-plus/icons-vue';
 import { ValidateComponentsMap } from '../../../utils/icon.mjs';
 import '../../../hooks/index.mjs';
 import { UPDATE_MODEL_EVENT } from '../../../utils/constants.mjs';
 import '../../../utils/util.mjs';
-import isServer from '../../../utils/isServer.mjs';
 import { isKorean } from '../../../utils/isDef.mjs';
 import { calcTextareaHeight } from './calc-textarea-height.mjs';
 import { inputProps, inputEmits } from './input.mjs';
@@ -58,7 +58,7 @@ var script = defineComponent({
     const inputExceed = computed(() => !!isWordLimitVisible.value && textLength.value > Number(attrs.value.maxlength));
     const resizeTextarea = () => {
       const { type, autosize } = props;
-      if (isServer || type !== "textarea")
+      if (!isClient || type !== "textarea")
         return;
       if (autosize) {
         const minRows = isObject(autosize) ? autosize.minRows : void 0;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"input.vue_vue_type_script_lang.mjs","sources":["../../../../../../packages/components/input/src/input.vue"],"sourcesContent":["<template>\n <div\n v-show=\"type !== 'hidden'\"\n :class=\"[\n type === 'textarea' ? 'el-textarea' : 'el-input',\n inputSize ? 'el-input--' + inputSize : '',\n {\n 'is-disabled': inputDisabled,\n 'is-exceed': inputExceed,\n 'el-input-group': $slots.prepend \|\| $slots.append,\n 'el-input-group--append': $slots.append,\n 'el-input-group--prepend': $slots.prepend,\n 'el-input--prefix': $slots.prefix \|\| prefixIcon,\n 'el-input--suffix':\n $slots.suffix \|\| suffixIcon \|\| clearable \|\| showPassword,\n 'el-input--suffix--password-clear': clearable && showPassword,\n },\n $attrs.class,\n ]\"\n :style=\"containerStyle\"\n @mouseenter=\"onMouseEnter\"\n @mouseleave=\"onMouseLeave\"\n >\n <!-- input -->\n <template v-if=\"type !== 'textarea'\">\n <!-- prepend slot -->\n <div v-if=\"$slots.prepend\" class=\"el-input-group__prepend\">\n <slot name=\"prepend\" />\n </div>\n\n <input\n ref=\"input\"\n class=\"el-input__inner\"\n v-bind=\"attrs\"\n :type=\"showPassword ? (passwordVisible ? 'text' : 'password') : type\"\n :disabled=\"inputDisabled\"\n :readonly=\"readonly\"\n :autocomplete=\"autocomplete\"\n :tabindex=\"tabindex\"\n :aria-label=\"label\"\n :placeholder=\"placeholder\"\n :style=\"inputStyle\"\n @compositionstart=\"handleCompositionStart\"\n @compositionupdate=\"handleCompositionUpdate\"\n @compositionend=\"handleCompositionEnd\"\n @input=\"handleInput\"\n @focus=\"handleFocus\"\n @blur=\"handleBlur\"\n @change=\"handleChange\"\n @keydown=\"handleKeydown\"\n />\n\n <!-- prefix slot -->\n <span v-if=\"$slots.prefix \|\| prefixIcon\" class=\"el-input__prefix\">\n <span class=\"el-input__prefix-inner\">\n <slot name=\"prefix\"></slot>\n <el-icon v-if=\"prefixIcon\" class=\"el-input__icon\">\n <component :is=\"prefixIcon\" />\n </el-icon>\n </span>\n </span>\n\n <!-- suffix slot -->\n <span v-if=\"suffixVisible\" class=\"el-input__suffix\">\n <span class=\"el-input__suffix-inner\">\n <template v-if=\"!showClear \|\| !showPwdVisible \|\| !isWordLimitVisible\">\n <slot name=\"suffix\"></slot>\n <el-icon v-if=\"suffixIcon\" class=\"el-input__icon\">\n <component :is=\"suffixIcon\" />\n </el-icon>\n </template>\n <el-icon\n v-if=\"showClear\"\n class=\"el-input__icon el-input__clear\"\n @mousedown.prevent\n @click=\"clear\"\n >\n <circle-close />\n </el-icon>\n <el-icon\n v-if=\"showPwdVisible\"\n class=\"el-input__icon el-input__clear\"\n @click=\"handlePasswordVisible\"\n >\n <icon-view />\n </el-icon>\n <span v-if=\"isWordLimitVisible\" class=\"el-input__count\">\n <span class=\"el-input__count-inner\">\n {{ textLength }} / {{ attrs.maxlength }}\n </span>\n </span>\n </span>\n <el-icon\n v-if=\"validateState && validateIcon\"\n class=\"el-input__icon el-input__validateIcon\"\n >\n <component :is=\"validateIcon\" />\n </el-icon>\n </span>\n\n <!-- append slot -->\n <div v-if=\"$slots.append\" class=\"el-input-group__append\">\n <slot name=\"append\" />\n </div>\n </template>\n\n <!-- textarea -->\n <template v-else>\n <textarea\n ref=\"textarea\"\n class=\"el-textarea__inner\"\n v-bind=\"attrs\"\n :tabindex=\"tabindex\"\n :disabled=\"inputDisabled\"\n :readonly=\"readonly\"\n :autocomplete=\"autocomplete\"\n :style=\"computedTextareaStyle\"\n :aria-label=\"label\"\n :placeholder=\"placeholder\"\n @compositionstart=\"handleCompositionStart\"\n @compositionupdate=\"handleCompositionUpdate\"\n @compositionend=\"handleCompositionEnd\"\n @input=\"handleInput\"\n @focus=\"handleFocus\"\n @blur=\"handleBlur\"\n @change=\"handleChange\"\n @keydown=\"handleKeydown\"\n />\n <span v-if=\"isWordLimitVisible\" class=\"el-input__count\">\n {{ textLength }} / {{ attrs.maxlength }}\n </span>\n </template>\n </div>\n</template>\n\n<script lang=\"ts\">\nimport {\n defineComponent,\n computed,\n watch,\n nextTick,\n getCurrentInstance,\n ref,\n shallowRef,\n onMounted,\n onUpdated,\n} from 'vue'\nimport { ElIcon } from '@element-plus/components/icon'\nimport { CircleClose, View as IconView } from '@element-plus/icons-vue'\nimport { ValidateComponentsMap } from '@element-plus/utils/icon'\nimport {\n useAttrs,\n useDisabled,\n useFormItem,\n useSize,\n} from '@element-plus/hooks'\nimport { UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'\nimport { isObject } from '@element-plus/utils/util'\nimport isServer from '@element-plus/utils/isServer'\nimport { isKorean } from '@element-plus/utils/isDef'\nimport { calcTextareaHeight } from './calc-textarea-height'\nimport { inputProps, inputEmits } from './input'\n\nimport type { StyleValue } from '@element-plus/utils/types'\n\ntype TargetElement = HTMLInputElement \| HTMLTextAreaElement\n\nconst PENDANT_MAP = {\n suffix: 'append',\n prefix: 'prepend',\n} as const\n\nexport default defineComponent({\n name: 'ElInput',\n\n components: { ElIcon, CircleClose, IconView },\n\n inheritAttrs: false,\n\n props: inputProps,\n emits: inputEmits,\n\n setup(props, { slots, emit, attrs: rawAttrs }) {\n const instance = getCurrentInstance()!\n const attrs = useAttrs()\n\n const { form, formItem } = useFormItem()\n const inputSize = useSize()\n const inputDisabled = useDisabled()\n\n const input = ref<HTMLInputElement>()\n const textarea = ref<HTMLTextAreaElement>()\n const focused = ref(false)\n const hovering = ref(false)\n const isComposing = ref(false)\n const passwordVisible = ref(false)\n const _textareaCalcStyle = shallowRef(props.inputStyle)\n\n const inputOrTextarea = computed(() => input.value \|\| textarea.value)\n\n const needStatusIcon = computed(() => form?.statusIcon ?? false)\n const validateState = computed(() => formItem?.validateState \|\| '')\n const validateIcon = computed(\n () => ValidateComponentsMap[validateState.value]\n )\n const containerStyle = computed(() => rawAttrs.style as StyleValue)\n const computedTextareaStyle = computed<StyleValue>(() => [\n props.inputStyle,\n _textareaCalcStyle.value,\n { resize: props.resize },\n ])\n const nativeInputValue = computed(() =>\n props.modelValue === null \|\| props.modelValue === undefined\n ? ''\n : String(props.modelValue)\n )\n const showClear = computed(\n () =>\n props.clearable &&\n !inputDisabled.value &&\n !props.readonly &&\n !!nativeInputValue.value &&\n (focused.value \|\| hovering.value)\n )\n const showPwdVisible = computed(\n () =>\n props.showPassword &&\n !inputDisabled.value &&\n !props.readonly &&\n (!!nativeInputValue.value \|\| focused.value)\n )\n const isWordLimitVisible = computed(\n () =>\n props.showWordLimit &&\n !!attrs.value.maxlength &&\n (props.type === 'text' \|\| props.type === 'textarea') &&\n !inputDisabled.value &&\n !props.readonly &&\n !props.showPassword\n )\n const textLength = computed(() => Array.from(nativeInputValue.value).length)\n const inputExceed = computed(\n () =>\n // show exceed style if length of initial value greater then maxlength\n !!isWordLimitVisible.value &&\n textLength.value > Number(attrs.value.maxlength)\n )\n\n const resizeTextarea = () => {\n const { type, autosize } = props\n\n if (isServer \|\| type !== 'textarea') return\n\n if (autosize) {\n const minRows = isObject(autosize) ? autosize.minRows : undefined\n const maxRows = isObject(autosize) ? autosize.maxRows : undefined\n _textareaCalcStyle.value = {\n ...calcTextareaHeight(textarea.value!, minRows, maxRows),\n }\n } else {\n _textareaCalcStyle.value = {\n minHeight: calcTextareaHeight(textarea.value!).minHeight,\n }\n }\n }\n\n const setNativeInputValue = () => {\n const input = inputOrTextarea.value\n if (!input \|\| input.value === nativeInputValue.value) return\n input.value = nativeInputValue.value\n }\n\n const calcIconOffset = (place: 'prefix' \| 'suffix') => {\n const { el } = instance.vnode\n if (!el) return\n const elList: HTMLSpanElement[] = Array.from(\n el.querySelectorAll(`.el-input__${place}`)\n )\n const target = elList.find((item) => item.parentNode === el)\n\n if (!target) return\n\n const pendant = PENDANT_MAP[place]\n\n if (slots[pendant]) {\n target.style.transform = `translateX(${place === 'suffix' ? '-' : ''}${\n el.querySelector(`.el-input-group__${pendant}`).offsetWidth\n }px)`\n } else {\n target.removeAttribute('style')\n }\n }\n\n const updateIconOffset = () => {\n calcIconOffset('prefix')\n calcIconOffset('suffix')\n }\n\n const handleInput = (event: Event) => {\n const { value } = event.target as TargetElement\n\n // should not emit input during composition\n // see: https://github.com/ElemeFE/element/issues/10516\n if (isComposing.value) return\n\n // hack for https://github.com/ElemeFE/element/issues/8548\n // should remove the following line when we don't support IE\n if (value === nativeInputValue.value) return\n\n emit(UPDATE_MODEL_EVENT, value)\n emit('input', value)\n\n // ensure native input value is controlled\n // see: https://github.com/ElemeFE/element/issues/12850\n nextTick(setNativeInputValue)\n }\n\n const handleChange = (event: Event) => {\n emit('change', (event.target as TargetElement).value)\n }\n\n const focus = () => {\n // see: https://github.com/ElemeFE/element/issues/18573\n nextTick(() => {\n inputOrTextarea.value?.focus()\n })\n }\n\n const blur = () => {\n inputOrTextarea.value?.blur()\n }\n\n const handleFocus = (event: FocusEvent) => {\n focused.value = true\n emit('focus', event)\n }\n\n const handleBlur = (event: FocusEvent) => {\n focused.value = false\n emit('blur', event)\n if (props.validateEvent) {\n formItem?.validate?.('blur')\n }\n }\n\n const select = () => {\n inputOrTextarea.value?.select()\n }\n\n const handleCompositionStart = (event: CompositionEvent) => {\n emit('compositionstart', event)\n isComposing.value = true\n }\n\n const handleCompositionUpdate = (event: CompositionEvent) => {\n emit('compositionupdate', event)\n const text = (event.target as HTMLInputElement)?.value\n const lastCharacter = text[text.length - 1] \|\| ''\n isComposing.value = !isKorean(lastCharacter)\n }\n\n const handleCompositionEnd = (event: CompositionEvent) => {\n emit('compositionend', event)\n if (isComposing.value) {\n isComposing.value = false\n handleInput(event)\n }\n }\n\n const clear = () => {\n emit(UPDATE_MODEL_EVENT, '')\n emit('change', '')\n emit('clear')\n emit('input', '')\n }\n\n const handlePasswordVisible = () => {\n passwordVisible.value = !passwordVisible.value\n focus()\n }\n\n const suffixVisible = computed(\n () =>\n !!slots.suffix \|\|\n !!props.suffixIcon \|\|\n showClear.value \|\|\n props.showPassword \|\|\n isWordLimitVisible.value \|\|\n (!!validateState.value && needStatusIcon.value)\n )\n\n watch(\n () => props.modelValue,\n () => {\n nextTick(resizeTextarea)\n if (props.validateEvent) {\n formItem?.validate?.('change')\n }\n }\n )\n\n // native input value is set explicitly\n // do not use v-model / :value in template\n // see: https://github.com/ElemeFE/element/issues/14521\n watch(nativeInputValue, () => setNativeInputValue())\n\n // when change between <input> and <textarea>,\n // update DOM dependent value and styles\n // https://github.com/ElemeFE/element/issues/14857\n watch(\n () => props.type,\n () => {\n nextTick(() => {\n setNativeInputValue()\n resizeTextarea()\n updateIconOffset()\n })\n }\n )\n\n onMounted(() => {\n setNativeInputValue()\n updateIconOffset()\n nextTick(resizeTextarea)\n })\n\n onUpdated(() => {\n nextTick(updateIconOffset)\n })\n\n const onMouseLeave = (evt: MouseEvent) => {\n hovering.value = false\n emit('mouseleave', evt)\n }\n\n const onMouseEnter = (evt: MouseEvent) => {\n hovering.value = true\n emit('mouseenter', evt)\n }\n\n const handleKeydown = (evt: KeyboardEvent) => {\n emit('keydown', evt)\n }\n\n return {\n input,\n textarea,\n attrs,\n inputSize,\n validateState,\n validateIcon,\n containerStyle,\n computedTextareaStyle,\n inputDisabled,\n showClear,\n showPwdVisible,\n isWordLimitVisible,\n textLength,\n hovering,\n inputExceed,\n passwordVisible,\n inputOrTextarea,\n suffixVisible,\n\n resizeTextarea,\n handleInput,\n handleChange,\n handleFocus,\n handleBlur,\n handleCompositionStart,\n handleCompositionUpdate,\n handleCompositionEnd,\n handlePasswordVisible,\n clear,\n select,\n focus,\n blur,\n onMouseLeave,\n onMouseEnter,\n handleKeydown,\n }\n },\n})\n</script>\n"],"names":["IconView"],"mappings":"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"}
1	+ {"version":3,"file":"input.vue_vue_type_script_lang.mjs","sources":["../../../../../../packages/components/input/src/input.vue"],"sourcesContent":["<template>\n <div\n v-show=\"type !== 'hidden'\"\n :class=\"[\n type === 'textarea' ? 'el-textarea' : 'el-input',\n inputSize ? 'el-input--' + inputSize : '',\n {\n 'is-disabled': inputDisabled,\n 'is-exceed': inputExceed,\n 'el-input-group': $slots.prepend \|\| $slots.append,\n 'el-input-group--append': $slots.append,\n 'el-input-group--prepend': $slots.prepend,\n 'el-input--prefix': $slots.prefix \|\| prefixIcon,\n 'el-input--suffix':\n $slots.suffix \|\| suffixIcon \|\| clearable \|\| showPassword,\n 'el-input--suffix--password-clear': clearable && showPassword,\n },\n $attrs.class,\n ]\"\n :style=\"containerStyle\"\n @mouseenter=\"onMouseEnter\"\n @mouseleave=\"onMouseLeave\"\n >\n <!-- input -->\n <template v-if=\"type !== 'textarea'\">\n <!-- prepend slot -->\n <div v-if=\"$slots.prepend\" class=\"el-input-group__prepend\">\n <slot name=\"prepend\" />\n </div>\n\n <input\n ref=\"input\"\n class=\"el-input__inner\"\n v-bind=\"attrs\"\n :type=\"showPassword ? (passwordVisible ? 'text' : 'password') : type\"\n :disabled=\"inputDisabled\"\n :readonly=\"readonly\"\n :autocomplete=\"autocomplete\"\n :tabindex=\"tabindex\"\n :aria-label=\"label\"\n :placeholder=\"placeholder\"\n :style=\"inputStyle\"\n @compositionstart=\"handleCompositionStart\"\n @compositionupdate=\"handleCompositionUpdate\"\n @compositionend=\"handleCompositionEnd\"\n @input=\"handleInput\"\n @focus=\"handleFocus\"\n @blur=\"handleBlur\"\n @change=\"handleChange\"\n @keydown=\"handleKeydown\"\n />\n\n <!-- prefix slot -->\n <span v-if=\"$slots.prefix \|\| prefixIcon\" class=\"el-input__prefix\">\n <span class=\"el-input__prefix-inner\">\n <slot name=\"prefix\"></slot>\n <el-icon v-if=\"prefixIcon\" class=\"el-input__icon\">\n <component :is=\"prefixIcon\" />\n </el-icon>\n </span>\n </span>\n\n <!-- suffix slot -->\n <span v-if=\"suffixVisible\" class=\"el-input__suffix\">\n <span class=\"el-input__suffix-inner\">\n <template v-if=\"!showClear \|\| !showPwdVisible \|\| !isWordLimitVisible\">\n <slot name=\"suffix\"></slot>\n <el-icon v-if=\"suffixIcon\" class=\"el-input__icon\">\n <component :is=\"suffixIcon\" />\n </el-icon>\n </template>\n <el-icon\n v-if=\"showClear\"\n class=\"el-input__icon el-input__clear\"\n @mousedown.prevent\n @click=\"clear\"\n >\n <circle-close />\n </el-icon>\n <el-icon\n v-if=\"showPwdVisible\"\n class=\"el-input__icon el-input__clear\"\n @click=\"handlePasswordVisible\"\n >\n <icon-view />\n </el-icon>\n <span v-if=\"isWordLimitVisible\" class=\"el-input__count\">\n <span class=\"el-input__count-inner\">\n {{ textLength }} / {{ attrs.maxlength }}\n </span>\n </span>\n </span>\n <el-icon\n v-if=\"validateState && validateIcon\"\n class=\"el-input__icon el-input__validateIcon\"\n >\n <component :is=\"validateIcon\" />\n </el-icon>\n </span>\n\n <!-- append slot -->\n <div v-if=\"$slots.append\" class=\"el-input-group__append\">\n <slot name=\"append\" />\n </div>\n </template>\n\n <!-- textarea -->\n <template v-else>\n <textarea\n ref=\"textarea\"\n class=\"el-textarea__inner\"\n v-bind=\"attrs\"\n :tabindex=\"tabindex\"\n :disabled=\"inputDisabled\"\n :readonly=\"readonly\"\n :autocomplete=\"autocomplete\"\n :style=\"computedTextareaStyle\"\n :aria-label=\"label\"\n :placeholder=\"placeholder\"\n @compositionstart=\"handleCompositionStart\"\n @compositionupdate=\"handleCompositionUpdate\"\n @compositionend=\"handleCompositionEnd\"\n @input=\"handleInput\"\n @focus=\"handleFocus\"\n @blur=\"handleBlur\"\n @change=\"handleChange\"\n @keydown=\"handleKeydown\"\n />\n <span v-if=\"isWordLimitVisible\" class=\"el-input__count\">\n {{ textLength }} / {{ attrs.maxlength }}\n </span>\n </template>\n </div>\n</template>\n\n<script lang=\"ts\">\nimport {\n defineComponent,\n computed,\n watch,\n nextTick,\n getCurrentInstance,\n ref,\n shallowRef,\n onMounted,\n onUpdated,\n} from 'vue'\nimport { isClient } from '@vueuse/core'\nimport { ElIcon } from '@element-plus/components/icon'\nimport { CircleClose, View as IconView } from '@element-plus/icons-vue'\nimport { ValidateComponentsMap } from '@element-plus/utils/icon'\nimport {\n useAttrs,\n useDisabled,\n useFormItem,\n useSize,\n} from '@element-plus/hooks'\nimport { UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'\nimport { isObject } from '@element-plus/utils/util'\nimport { isKorean } from '@element-plus/utils/isDef'\nimport { calcTextareaHeight } from './calc-textarea-height'\nimport { inputProps, inputEmits } from './input'\n\nimport type { StyleValue } from '@element-plus/utils/types'\n\ntype TargetElement = HTMLInputElement \| HTMLTextAreaElement\n\nconst PENDANT_MAP = {\n suffix: 'append',\n prefix: 'prepend',\n} as const\n\nexport default defineComponent({\n name: 'ElInput',\n\n components: { ElIcon, CircleClose, IconView },\n\n inheritAttrs: false,\n\n props: inputProps,\n emits: inputEmits,\n\n setup(props, { slots, emit, attrs: rawAttrs }) {\n const instance = getCurrentInstance()!\n const attrs = useAttrs()\n\n const { form, formItem } = useFormItem()\n const inputSize = useSize()\n const inputDisabled = useDisabled()\n\n const input = ref<HTMLInputElement>()\n const textarea = ref<HTMLTextAreaElement>()\n const focused = ref(false)\n const hovering = ref(false)\n const isComposing = ref(false)\n const passwordVisible = ref(false)\n const _textareaCalcStyle = shallowRef(props.inputStyle)\n\n const inputOrTextarea = computed(() => input.value \|\| textarea.value)\n\n const needStatusIcon = computed(() => form?.statusIcon ?? false)\n const validateState = computed(() => formItem?.validateState \|\| '')\n const validateIcon = computed(\n () => ValidateComponentsMap[validateState.value]\n )\n const containerStyle = computed(() => rawAttrs.style as StyleValue)\n const computedTextareaStyle = computed<StyleValue>(() => [\n props.inputStyle,\n _textareaCalcStyle.value,\n { resize: props.resize },\n ])\n const nativeInputValue = computed(() =>\n props.modelValue === null \|\| props.modelValue === undefined\n ? ''\n : String(props.modelValue)\n )\n const showClear = computed(\n () =>\n props.clearable &&\n !inputDisabled.value &&\n !props.readonly &&\n !!nativeInputValue.value &&\n (focused.value \|\| hovering.value)\n )\n const showPwdVisible = computed(\n () =>\n props.showPassword &&\n !inputDisabled.value &&\n !props.readonly &&\n (!!nativeInputValue.value \|\| focused.value)\n )\n const isWordLimitVisible = computed(\n () =>\n props.showWordLimit &&\n !!attrs.value.maxlength &&\n (props.type === 'text' \|\| props.type === 'textarea') &&\n !inputDisabled.value &&\n !props.readonly &&\n !props.showPassword\n )\n const textLength = computed(() => Array.from(nativeInputValue.value).length)\n const inputExceed = computed(\n () =>\n // show exceed style if length of initial value greater then maxlength\n !!isWordLimitVisible.value &&\n textLength.value > Number(attrs.value.maxlength)\n )\n\n const resizeTextarea = () => {\n const { type, autosize } = props\n\n if (!isClient \|\| type !== 'textarea') return\n\n if (autosize) {\n const minRows = isObject(autosize) ? autosize.minRows : undefined\n const maxRows = isObject(autosize) ? autosize.maxRows : undefined\n _textareaCalcStyle.value = {\n ...calcTextareaHeight(textarea.value!, minRows, maxRows),\n }\n } else {\n _textareaCalcStyle.value = {\n minHeight: calcTextareaHeight(textarea.value!).minHeight,\n }\n }\n }\n\n const setNativeInputValue = () => {\n const input = inputOrTextarea.value\n if (!input \|\| input.value === nativeInputValue.value) return\n input.value = nativeInputValue.value\n }\n\n const calcIconOffset = (place: 'prefix' \| 'suffix') => {\n const { el } = instance.vnode\n if (!el) return\n const elList: HTMLSpanElement[] = Array.from(\n el.querySelectorAll(`.el-input__${place}`)\n )\n const target = elList.find((item) => item.parentNode === el)\n\n if (!target) return\n\n const pendant = PENDANT_MAP[place]\n\n if (slots[pendant]) {\n target.style.transform = `translateX(${place === 'suffix' ? '-' : ''}${\n el.querySelector(`.el-input-group__${pendant}`).offsetWidth\n }px)`\n } else {\n target.removeAttribute('style')\n }\n }\n\n const updateIconOffset = () => {\n calcIconOffset('prefix')\n calcIconOffset('suffix')\n }\n\n const handleInput = (event: Event) => {\n const { value } = event.target as TargetElement\n\n // should not emit input during composition\n // see: https://github.com/ElemeFE/element/issues/10516\n if (isComposing.value) return\n\n // hack for https://github.com/ElemeFE/element/issues/8548\n // should remove the following line when we don't support IE\n if (value === nativeInputValue.value) return\n\n emit(UPDATE_MODEL_EVENT, value)\n emit('input', value)\n\n // ensure native input value is controlled\n // see: https://github.com/ElemeFE/element/issues/12850\n nextTick(setNativeInputValue)\n }\n\n const handleChange = (event: Event) => {\n emit('change', (event.target as TargetElement).value)\n }\n\n const focus = () => {\n // see: https://github.com/ElemeFE/element/issues/18573\n nextTick(() => {\n inputOrTextarea.value?.focus()\n })\n }\n\n const blur = () => {\n inputOrTextarea.value?.blur()\n }\n\n const handleFocus = (event: FocusEvent) => {\n focused.value = true\n emit('focus', event)\n }\n\n const handleBlur = (event: FocusEvent) => {\n focused.value = false\n emit('blur', event)\n if (props.validateEvent) {\n formItem?.validate?.('blur')\n }\n }\n\n const select = () => {\n inputOrTextarea.value?.select()\n }\n\n const handleCompositionStart = (event: CompositionEvent) => {\n emit('compositionstart', event)\n isComposing.value = true\n }\n\n const handleCompositionUpdate = (event: CompositionEvent) => {\n emit('compositionupdate', event)\n const text = (event.target as HTMLInputElement)?.value\n const lastCharacter = text[text.length - 1] \|\| ''\n isComposing.value = !isKorean(lastCharacter)\n }\n\n const handleCompositionEnd = (event: CompositionEvent) => {\n emit('compositionend', event)\n if (isComposing.value) {\n isComposing.value = false\n handleInput(event)\n }\n }\n\n const clear = () => {\n emit(UPDATE_MODEL_EVENT, '')\n emit('change', '')\n emit('clear')\n emit('input', '')\n }\n\n const handlePasswordVisible = () => {\n passwordVisible.value = !passwordVisible.value\n focus()\n }\n\n const suffixVisible = computed(\n () =>\n !!slots.suffix \|\|\n !!props.suffixIcon \|\|\n showClear.value \|\|\n props.showPassword \|\|\n isWordLimitVisible.value \|\|\n (!!validateState.value && needStatusIcon.value)\n )\n\n watch(\n () => props.modelValue,\n () => {\n nextTick(resizeTextarea)\n if (props.validateEvent) {\n formItem?.validate?.('change')\n }\n }\n )\n\n // native input value is set explicitly\n // do not use v-model / :value in template\n // see: https://github.com/ElemeFE/element/issues/14521\n watch(nativeInputValue, () => setNativeInputValue())\n\n // when change between <input> and <textarea>,\n // update DOM dependent value and styles\n // https://github.com/ElemeFE/element/issues/14857\n watch(\n () => props.type,\n () => {\n nextTick(() => {\n setNativeInputValue()\n resizeTextarea()\n updateIconOffset()\n })\n }\n )\n\n onMounted(() => {\n setNativeInputValue()\n updateIconOffset()\n nextTick(resizeTextarea)\n })\n\n onUpdated(() => {\n nextTick(updateIconOffset)\n })\n\n const onMouseLeave = (evt: MouseEvent) => {\n hovering.value = false\n emit('mouseleave', evt)\n }\n\n const onMouseEnter = (evt: MouseEvent) => {\n hovering.value = true\n emit('mouseenter', evt)\n }\n\n const handleKeydown = (evt: KeyboardEvent) => {\n emit('keydown', evt)\n }\n\n return {\n input,\n textarea,\n attrs,\n inputSize,\n validateState,\n validateIcon,\n containerStyle,\n computedTextareaStyle,\n inputDisabled,\n showClear,\n showPwdVisible,\n isWordLimitVisible,\n textLength,\n hovering,\n inputExceed,\n passwordVisible,\n inputOrTextarea,\n suffixVisible,\n\n resizeTextarea,\n handleInput,\n handleChange,\n handleFocus,\n handleBlur,\n handleCompositionStart,\n handleCompositionUpdate,\n handleCompositionEnd,\n handlePasswordVisible,\n clear,\n select,\n focus,\n blur,\n onMouseLeave,\n onMouseEnter,\n handleKeydown,\n }\n },\n})\n</script>\n"],"names":[],"mappings":"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"}