npm - @element-plus/nightly - Versions diffs - 0.0.20220106 → 0.0.20220107 - Mend

@element-plus/nightly 0.0.20220106 → 0.0.20220107

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 (109) hide show

package/es/components/message-box/src/index.vue_vue_type_template_id_7035e868_lang.mjs CHANGED Viewed

@@ -37,6 +37,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
         default: withCtx(() => [
           withDirectives((openBlock(), createElementBlock("div", {
             ref: "root",
+            role: "dialog",
             "aria-label": _ctx.title || "dialog",
             "aria-modal": "true",
             class: normalizeClass([

package/es/components/message-box/src/index.vue_vue_type_template_id_7035e868_lang.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.vue_vue_type_template_id_7035e868_lang.mjs","sources":["../../../../../../packages/components/message-box/src/index.vue?vue&type=template&id=7035e868&lang.js"],"sourcesContent":["<template>\n <transition name=\"fade-in-linear\" @after-leave=\"$emit('vanish')\">\n <el-overlay\n v-show=\"visible\"\n :z-index=\"zIndex\"\n :overlay-class=\"['is-message-box', modalClass]\"\n :mask=\"modal\"\n @click.self=\"handleWrapperClick\"\n >\n <div\n ref=\"root\"\n v-trap-focus\n :aria-label=\"title \|\| 'dialog'\"\n aria-modal=\"true\"\n :class=\"[\n 'el-message-box',\n customClass,\n { 'el-message-box--center': center },\n ]\"\n :style=\"customStyle\"\n >\n <div\n v-if=\"title !== null && title !== undefined\"\n class=\"el-message-box__header\"\n >\n <div class=\"el-message-box__title\">\n <el-icon\n v-if=\"iconComponent && center\"\n class=\"el-message-box__status\"\n :class=\"typeClass\"\n >\n <component :is=\"iconComponent\" />\n </el-icon>\n <span>{{ title }}</span>\n </div>\n <button\n v-if=\"showClose\"\n type=\"button\"\n class=\"el-message-box__headerbtn\"\n aria-label=\"Close\"\n @click=\"\n handleAction(distinguishCancelAndClose ? 'close' : 'cancel')\n \"\n @keydown.prevent.enter=\"\n handleAction(distinguishCancelAndClose ? 'close' : 'cancel')\n \"\n >\n <el-icon class=\"el-message-box__close\"><close /></el-icon>\n </button>\n </div>\n <div class=\"el-message-box__content\">\n <div class=\"el-message-box__container\">\n <el-icon\n v-if=\"iconComponent && !center && hasMessage\"\n class=\"el-message-box__status\"\n :class=\"typeClass\"\n >\n <component :is=\"iconComponent\" />\n </el-icon>\n <div v-if=\"hasMessage\" class=\"el-message-box__message\">\n <slot>\n <p v-if=\"!dangerouslyUseHTMLString\">{{ message }}</p>\n <p v-else v-html=\"message\"></p>\n </slot>\n </div>\n </div>\n <div v-show=\"showInput\" class=\"el-message-box__input\">\n <el-input\n ref=\"inputRef\"\n v-model=\"inputValue\"\n :type=\"inputType\"\n :placeholder=\"inputPlaceholder\"\n :class=\"{ invalid: validateError }\"\n @keydown.prevent.enter=\"handleInputEnter\"\n />\n <div\n class=\"el-message-box__errormsg\"\n :style=\"{\n visibility: !!editorErrorMessage ? 'visible' : 'hidden',\n }\"\n >\n {{ editorErrorMessage }}\n </div>\n </div>\n </div>\n <div class=\"el-message-box__btns\">\n <el-button\n v-if=\"showCancelButton\"\n :loading=\"cancelButtonLoading\"\n :class=\"[cancelButtonClass]\"\n :round=\"roundButton\"\n :size=\"buttonSize \|\| ''\"\n @click=\"handleAction('cancel')\"\n @keydown.prevent.enter=\"handleAction('cancel')\"\n >\n {{ cancelButtonText \|\| t('el.messagebox.cancel') }}\n </el-button>\n <el-button\n v-show=\"showConfirmButton\"\n ref=\"confirmRef\"\n type=\"primary\"\n :loading=\"confirmButtonLoading\"\n :class=\"[confirmButtonClasses]\"\n :round=\"roundButton\"\n :disabled=\"confirmButtonDisabled\"\n :size=\"buttonSize \|\| ''\"\n @click=\"handleAction('confirm')\"\n @keydown.prevent.enter=\"handleAction('confirm')\"\n >\n {{ confirmButtonText \|\| t('el.messagebox.confirm') }}\n </el-button>\n </div>\n </div>\n </el-overlay>\n </transition>\n</template>\n<script lang=\"ts\">\nimport {\n defineComponent,\n nextTick,\n onMounted,\n onBeforeUnmount,\n computed,\n watch,\n reactive,\n ref,\n toRefs,\n} from 'vue'\nimport ElButton from '@element-plus/components/button'\nimport { TrapFocus } from '@element-plus/directives'\nimport {\n useModal,\n useLockscreen,\n useLocale,\n useRestoreActive,\n usePreventGlobal,\n} from '@element-plus/hooks'\nimport ElInput from '@element-plus/components/input'\nimport { ElOverlay } from '@element-plus/components/overlay'\nimport { PopupManager } from '@element-plus/utils/popup-manager'\nimport { on, off } from '@element-plus/utils/dom'\nimport { EVENT_CODE } from '@element-plus/utils/aria'\nimport { isValidComponentSize } from '@element-plus/utils/validators'\nimport { ElIcon } from '@element-plus/components/icon'\nimport { TypeComponents, TypeComponentsMap } from '@element-plus/utils/icon'\n\nimport type { ComponentPublicInstance, PropType } from 'vue'\nimport type { ComponentSize } from '@element-plus/utils/types'\nimport type {\n Action,\n MessageBoxState,\n MessageBoxType,\n} from './message-box.type'\n\nexport default defineComponent({\n name: 'ElMessageBox',\n directives: {\n TrapFocus,\n },\n components: {\n ElButton,\n ElInput,\n ElOverlay,\n ElIcon,\n ...TypeComponents,\n },\n inheritAttrs: false,\n props: {\n buttonSize: {\n type: String as PropType<ComponentSize>,\n validator: isValidComponentSize,\n },\n modal: {\n type: Boolean,\n default: true,\n },\n lockScroll: {\n type: Boolean,\n default: true,\n },\n showClose: {\n type: Boolean,\n default: true,\n },\n closeOnClickModal: {\n type: Boolean,\n default: true,\n },\n closeOnPressEscape: {\n type: Boolean,\n default: true,\n },\n closeOnHashChange: {\n type: Boolean,\n default: true,\n },\n center: Boolean,\n roundButton: {\n default: false,\n type: Boolean,\n },\n container: {\n type: String, // default append to body\n default: 'body',\n },\n boxType: {\n type: String as PropType<MessageBoxType>,\n default: '',\n },\n },\n emits: ['vanish', 'action'],\n setup(props, { emit }) {\n // const popup = usePopup(props, doClose)\n const { t } = useLocale()\n const visible = ref(false)\n // s represents state\n const state = reactive<MessageBoxState>({\n beforeClose: null,\n callback: null,\n cancelButtonText: '',\n cancelButtonClass: '',\n confirmButtonText: '',\n confirmButtonClass: '',\n customClass: '',\n customStyle: {},\n dangerouslyUseHTMLString: false,\n distinguishCancelAndClose: false,\n icon: '',\n inputPattern: null,\n inputPlaceholder: '',\n inputType: 'text',\n inputValue: null,\n inputValidator: null,\n inputErrorMessage: '',\n message: null,\n modalFade: true,\n modalClass: '',\n showCancelButton: false,\n showConfirmButton: true,\n type: '',\n title: undefined,\n showInput: false,\n action: '' as Action,\n confirmButtonLoading: false,\n cancelButtonLoading: false,\n confirmButtonDisabled: false,\n editorErrorMessage: '',\n // refer to: https://github.com/ElemeFE/element/commit/2999279ae34ef10c373ca795c87b020ed6753eed\n // seemed ok for now without this state.\n // isOnComposition: false, // temporary remove\n validateError: false,\n zIndex: PopupManager.nextZIndex(),\n })\n\n const typeClass = computed(() => {\n const type = state.type\n return type && TypeComponentsMap[type]\n ? `el-message-box-icon--${type}`\n : ''\n })\n\n const iconComponent = computed(\n () => state.icon \|\| TypeComponentsMap[state.type] \|\| ''\n )\n const hasMessage = computed(() => !!state.message)\n const inputRef = ref<ComponentPublicInstance>(null)\n const confirmRef = ref<ComponentPublicInstance>(null)\n\n const confirmButtonClasses = computed(() => state.confirmButtonClass)\n\n watch(\n () => state.inputValue,\n async (val) => {\n await nextTick()\n if (props.boxType === 'prompt' && val !== null) {\n validate()\n }\n },\n { immediate: true }\n )\n\n watch(\n () => visible.value,\n (val) => {\n if (val) {\n if (props.boxType === 'alert' \|\| props.boxType === 'confirm') {\n nextTick().then(() => {\n confirmRef.value?.$el?.focus?.()\n })\n }\n state.zIndex = PopupManager.nextZIndex()\n }\n if (props.boxType !== 'prompt') return\n if (val) {\n nextTick().then(() => {\n if (inputRef.value && inputRef.value.$el) {\n getInputElement().focus()\n }\n })\n } else {\n state.editorErrorMessage = ''\n state.validateError = false\n }\n }\n )\n\n onMounted(async () => {\n await nextTick()\n if (props.closeOnHashChange) {\n on(window, 'hashchange', doClose)\n }\n })\n\n onBeforeUnmount(() => {\n if (props.closeOnHashChange) {\n off(window, 'hashchange', doClose)\n }\n })\n\n function doClose() {\n if (!visible.value) return\n visible.value = false\n nextTick(() => {\n if (state.action) emit('action', state.action)\n })\n }\n\n const handleWrapperClick = () => {\n if (props.closeOnClickModal) {\n handleAction(state.distinguishCancelAndClose ? 'close' : 'cancel')\n }\n }\n\n const handleInputEnter = () => {\n if (state.inputType !== 'textarea') {\n return handleAction('confirm')\n }\n }\n\n const handleAction = (action: Action) => {\n if (props.boxType === 'prompt' && action === 'confirm' && !validate()) {\n return\n }\n\n state.action = action\n\n if (state.beforeClose) {\n state.beforeClose?.(action, state, doClose)\n } else {\n doClose()\n }\n }\n\n const validate = () => {\n if (props.boxType === 'prompt') {\n const inputPattern = state.inputPattern\n if (inputPattern && !inputPattern.test(state.inputValue \|\| '')) {\n state.editorErrorMessage =\n state.inputErrorMessage \|\| t('el.messagebox.error')\n state.validateError = true\n return false\n }\n const inputValidator = state.inputValidator\n if (typeof inputValidator === 'function') {\n const validateResult = inputValidator(state.inputValue)\n if (validateResult === false) {\n state.editorErrorMessage =\n state.inputErrorMessage \|\| t('el.messagebox.error')\n state.validateError = true\n return false\n }\n if (typeof validateResult === 'string') {\n state.editorErrorMessage = validateResult\n state.validateError = true\n return false\n }\n }\n }\n state.editorErrorMessage = ''\n state.validateError = false\n return true\n }\n\n const getInputElement = () => {\n const inputRefs = inputRef.value.$refs\n return (inputRefs.input \|\| inputRefs.textarea) as HTMLElement\n }\n\n const handleClose = () => {\n handleAction('close')\n }\n\n // when close on press escape is disabled, pressing esc should not callout\n // any other message box and close any other dialog-ish elements\n // e.g. Dialog has a close on press esc feature, and when it closes, it calls\n // props.beforeClose method to make a intermediate state by callout a message box\n // for some verification or alerting. then if we allow global event liek this\n // to dispatch, it could callout another message box.\n if (props.closeOnPressEscape) {\n useModal(\n {\n handleClose,\n },\n visible\n )\n } else {\n usePreventGlobal(\n visible,\n 'keydown',\n (e: KeyboardEvent) => e.code === EVENT_CODE.esc\n )\n }\n\n // locks the screen to prevent scroll\n if (props.lockScroll) {\n useLockscreen(visible)\n }\n\n // restore to prev active element.\n useRestoreActive(visible)\n\n return {\n ...toRefs(state),\n visible,\n hasMessage,\n typeClass,\n iconComponent,\n confirmButtonClasses,\n inputRef,\n confirmRef,\n doClose, // for outside usage\n handleClose, // for out side usage\n handleWrapperClick,\n handleInputEnter,\n handleAction,\n t,\n }\n },\n})\n</script>\n"],"names":["_withModifiers","_createCommentVNode","_withCtx","_createTextVNode"],"mappings":";;;;;;EAuBU;;qBAEK,KAAK,EAAC;qBAyBR,KAAK,EAAC;;;;EASgB;;;;mDAO4B;eAmBlD,KAAK,EAAC,sBAAsB;;;;;;;;;;;IApF3B;;;;;QAGP,SAAOA;;QAEP;;;0BAGD;;YACE,KAAI;;;;;;;;kDASe;;;;;;;;;;2CAYb;;;;;;;;iCAKa;;;;;;;;;;;;;wBAWf;;;;;;;;;;;;;;;sBAOEC;;;;;;;;;;;0BAOY;0CAAV;;;8BACU,SAAgB;;;;;;;;kBAM5B;;;qCAEgB;;;;;;uBAMX,EAACC;kBACLC;;;;;;;;sCAQP;;;;;yBAIU;;;iFAGc;;;;;;;;;;;;;oBAUd;;;;;;;;;"}
1	+ {"version":3,"file":"index.vue_vue_type_template_id_7035e868_lang.mjs","sources":["../../../../../../packages/components/message-box/src/index.vue?vue&type=template&id=7035e868&lang.js"],"sourcesContent":["<template>\n <transition name=\"fade-in-linear\" @after-leave=\"$emit('vanish')\">\n <el-overlay\n v-show=\"visible\"\n :z-index=\"zIndex\"\n :overlay-class=\"['is-message-box', modalClass]\"\n :mask=\"modal\"\n @click.self=\"handleWrapperClick\"\n >\n <div\n ref=\"root\"\n v-trap-focus\n role=\"dialog\"\n :aria-label=\"title \|\| 'dialog'\"\n aria-modal=\"true\"\n :class=\"[\n 'el-message-box',\n customClass,\n { 'el-message-box--center': center },\n ]\"\n :style=\"customStyle\"\n >\n <div\n v-if=\"title !== null && title !== undefined\"\n class=\"el-message-box__header\"\n >\n <div class=\"el-message-box__title\">\n <el-icon\n v-if=\"iconComponent && center\"\n class=\"el-message-box__status\"\n :class=\"typeClass\"\n >\n <component :is=\"iconComponent\" />\n </el-icon>\n <span>{{ title }}</span>\n </div>\n <button\n v-if=\"showClose\"\n type=\"button\"\n class=\"el-message-box__headerbtn\"\n aria-label=\"Close\"\n @click=\"\n handleAction(distinguishCancelAndClose ? 'close' : 'cancel')\n \"\n @keydown.prevent.enter=\"\n handleAction(distinguishCancelAndClose ? 'close' : 'cancel')\n \"\n >\n <el-icon class=\"el-message-box__close\"><close /></el-icon>\n </button>\n </div>\n <div class=\"el-message-box__content\">\n <div class=\"el-message-box__container\">\n <el-icon\n v-if=\"iconComponent && !center && hasMessage\"\n class=\"el-message-box__status\"\n :class=\"typeClass\"\n >\n <component :is=\"iconComponent\" />\n </el-icon>\n <div v-if=\"hasMessage\" class=\"el-message-box__message\">\n <slot>\n <p v-if=\"!dangerouslyUseHTMLString\">{{ message }}</p>\n <p v-else v-html=\"message\"></p>\n </slot>\n </div>\n </div>\n <div v-show=\"showInput\" class=\"el-message-box__input\">\n <el-input\n ref=\"inputRef\"\n v-model=\"inputValue\"\n :type=\"inputType\"\n :placeholder=\"inputPlaceholder\"\n :class=\"{ invalid: validateError }\"\n @keydown.prevent.enter=\"handleInputEnter\"\n />\n <div\n class=\"el-message-box__errormsg\"\n :style=\"{\n visibility: !!editorErrorMessage ? 'visible' : 'hidden',\n }\"\n >\n {{ editorErrorMessage }}\n </div>\n </div>\n </div>\n <div class=\"el-message-box__btns\">\n <el-button\n v-if=\"showCancelButton\"\n :loading=\"cancelButtonLoading\"\n :class=\"[cancelButtonClass]\"\n :round=\"roundButton\"\n :size=\"buttonSize \|\| ''\"\n @click=\"handleAction('cancel')\"\n @keydown.prevent.enter=\"handleAction('cancel')\"\n >\n {{ cancelButtonText \|\| t('el.messagebox.cancel') }}\n </el-button>\n <el-button\n v-show=\"showConfirmButton\"\n ref=\"confirmRef\"\n type=\"primary\"\n :loading=\"confirmButtonLoading\"\n :class=\"[confirmButtonClasses]\"\n :round=\"roundButton\"\n :disabled=\"confirmButtonDisabled\"\n :size=\"buttonSize \|\| ''\"\n @click=\"handleAction('confirm')\"\n @keydown.prevent.enter=\"handleAction('confirm')\"\n >\n {{ confirmButtonText \|\| t('el.messagebox.confirm') }}\n </el-button>\n </div>\n </div>\n </el-overlay>\n </transition>\n</template>\n<script lang=\"ts\">\nimport {\n defineComponent,\n nextTick,\n onMounted,\n onBeforeUnmount,\n computed,\n watch,\n reactive,\n ref,\n toRefs,\n} from 'vue'\nimport ElButton from '@element-plus/components/button'\nimport { TrapFocus } from '@element-plus/directives'\nimport {\n useModal,\n useLockscreen,\n useLocale,\n useRestoreActive,\n usePreventGlobal,\n} from '@element-plus/hooks'\nimport ElInput from '@element-plus/components/input'\nimport { ElOverlay } from '@element-plus/components/overlay'\nimport { PopupManager } from '@element-plus/utils/popup-manager'\nimport { on, off } from '@element-plus/utils/dom'\nimport { EVENT_CODE } from '@element-plus/utils/aria'\nimport { isValidComponentSize } from '@element-plus/utils/validators'\nimport { ElIcon } from '@element-plus/components/icon'\nimport { TypeComponents, TypeComponentsMap } from '@element-plus/utils/icon'\n\nimport type { ComponentPublicInstance, PropType } from 'vue'\nimport type { ComponentSize } from '@element-plus/utils/types'\nimport type {\n Action,\n MessageBoxState,\n MessageBoxType,\n} from './message-box.type'\n\nexport default defineComponent({\n name: 'ElMessageBox',\n directives: {\n TrapFocus,\n },\n components: {\n ElButton,\n ElInput,\n ElOverlay,\n ElIcon,\n ...TypeComponents,\n },\n inheritAttrs: false,\n props: {\n buttonSize: {\n type: String as PropType<ComponentSize>,\n validator: isValidComponentSize,\n },\n modal: {\n type: Boolean,\n default: true,\n },\n lockScroll: {\n type: Boolean,\n default: true,\n },\n showClose: {\n type: Boolean,\n default: true,\n },\n closeOnClickModal: {\n type: Boolean,\n default: true,\n },\n closeOnPressEscape: {\n type: Boolean,\n default: true,\n },\n closeOnHashChange: {\n type: Boolean,\n default: true,\n },\n center: Boolean,\n roundButton: {\n default: false,\n type: Boolean,\n },\n container: {\n type: String, // default append to body\n default: 'body',\n },\n boxType: {\n type: String as PropType<MessageBoxType>,\n default: '',\n },\n },\n emits: ['vanish', 'action'],\n setup(props, { emit }) {\n // const popup = usePopup(props, doClose)\n const { t } = useLocale()\n const visible = ref(false)\n // s represents state\n const state = reactive<MessageBoxState>({\n beforeClose: null,\n callback: null,\n cancelButtonText: '',\n cancelButtonClass: '',\n confirmButtonText: '',\n confirmButtonClass: '',\n customClass: '',\n customStyle: {},\n dangerouslyUseHTMLString: false,\n distinguishCancelAndClose: false,\n icon: '',\n inputPattern: null,\n inputPlaceholder: '',\n inputType: 'text',\n inputValue: null,\n inputValidator: null,\n inputErrorMessage: '',\n message: null,\n modalFade: true,\n modalClass: '',\n showCancelButton: false,\n showConfirmButton: true,\n type: '',\n title: undefined,\n showInput: false,\n action: '' as Action,\n confirmButtonLoading: false,\n cancelButtonLoading: false,\n confirmButtonDisabled: false,\n editorErrorMessage: '',\n // refer to: https://github.com/ElemeFE/element/commit/2999279ae34ef10c373ca795c87b020ed6753eed\n // seemed ok for now without this state.\n // isOnComposition: false, // temporary remove\n validateError: false,\n zIndex: PopupManager.nextZIndex(),\n })\n\n const typeClass = computed(() => {\n const type = state.type\n return type && TypeComponentsMap[type]\n ? `el-message-box-icon--${type}`\n : ''\n })\n\n const iconComponent = computed(\n () => state.icon \|\| TypeComponentsMap[state.type] \|\| ''\n )\n const hasMessage = computed(() => !!state.message)\n const inputRef = ref<ComponentPublicInstance>(null)\n const confirmRef = ref<ComponentPublicInstance>(null)\n\n const confirmButtonClasses = computed(() => state.confirmButtonClass)\n\n watch(\n () => state.inputValue,\n async (val) => {\n await nextTick()\n if (props.boxType === 'prompt' && val !== null) {\n validate()\n }\n },\n { immediate: true }\n )\n\n watch(\n () => visible.value,\n (val) => {\n if (val) {\n if (props.boxType === 'alert' \|\| props.boxType === 'confirm') {\n nextTick().then(() => {\n confirmRef.value?.$el?.focus?.()\n })\n }\n state.zIndex = PopupManager.nextZIndex()\n }\n if (props.boxType !== 'prompt') return\n if (val) {\n nextTick().then(() => {\n if (inputRef.value && inputRef.value.$el) {\n getInputElement().focus()\n }\n })\n } else {\n state.editorErrorMessage = ''\n state.validateError = false\n }\n }\n )\n\n onMounted(async () => {\n await nextTick()\n if (props.closeOnHashChange) {\n on(window, 'hashchange', doClose)\n }\n })\n\n onBeforeUnmount(() => {\n if (props.closeOnHashChange) {\n off(window, 'hashchange', doClose)\n }\n })\n\n function doClose() {\n if (!visible.value) return\n visible.value = false\n nextTick(() => {\n if (state.action) emit('action', state.action)\n })\n }\n\n const handleWrapperClick = () => {\n if (props.closeOnClickModal) {\n handleAction(state.distinguishCancelAndClose ? 'close' : 'cancel')\n }\n }\n\n const handleInputEnter = () => {\n if (state.inputType !== 'textarea') {\n return handleAction('confirm')\n }\n }\n\n const handleAction = (action: Action) => {\n if (props.boxType === 'prompt' && action === 'confirm' && !validate()) {\n return\n }\n\n state.action = action\n\n if (state.beforeClose) {\n state.beforeClose?.(action, state, doClose)\n } else {\n doClose()\n }\n }\n\n const validate = () => {\n if (props.boxType === 'prompt') {\n const inputPattern = state.inputPattern\n if (inputPattern && !inputPattern.test(state.inputValue \|\| '')) {\n state.editorErrorMessage =\n state.inputErrorMessage \|\| t('el.messagebox.error')\n state.validateError = true\n return false\n }\n const inputValidator = state.inputValidator\n if (typeof inputValidator === 'function') {\n const validateResult = inputValidator(state.inputValue)\n if (validateResult === false) {\n state.editorErrorMessage =\n state.inputErrorMessage \|\| t('el.messagebox.error')\n state.validateError = true\n return false\n }\n if (typeof validateResult === 'string') {\n state.editorErrorMessage = validateResult\n state.validateError = true\n return false\n }\n }\n }\n state.editorErrorMessage = ''\n state.validateError = false\n return true\n }\n\n const getInputElement = () => {\n const inputRefs = inputRef.value.$refs\n return (inputRefs.input \|\| inputRefs.textarea) as HTMLElement\n }\n\n const handleClose = () => {\n handleAction('close')\n }\n\n // when close on press escape is disabled, pressing esc should not callout\n // any other message box and close any other dialog-ish elements\n // e.g. Dialog has a close on press esc feature, and when it closes, it calls\n // props.beforeClose method to make a intermediate state by callout a message box\n // for some verification or alerting. then if we allow global event liek this\n // to dispatch, it could callout another message box.\n if (props.closeOnPressEscape) {\n useModal(\n {\n handleClose,\n },\n visible\n )\n } else {\n usePreventGlobal(\n visible,\n 'keydown',\n (e: KeyboardEvent) => e.code === EVENT_CODE.esc\n )\n }\n\n // locks the screen to prevent scroll\n if (props.lockScroll) {\n useLockscreen(visible)\n }\n\n // restore to prev active element.\n useRestoreActive(visible)\n\n return {\n ...toRefs(state),\n visible,\n hasMessage,\n typeClass,\n iconComponent,\n confirmButtonClasses,\n inputRef,\n confirmRef,\n doClose, // for outside usage\n handleClose, // for out side usage\n handleWrapperClick,\n handleInputEnter,\n handleAction,\n t,\n }\n },\n})\n</script>\n"],"names":["_withModifiers","_createCommentVNode","_withCtx","_createTextVNode"],"mappings":";;;;;;EAwBU;;qBAEK,KAAK,EAAC;qBAyBR,KAAK,EAAC;;;;EASgB;;;;mDAO4B;eAmBlD,KAAK,EAAC,sBAAsB;;;;;;;;;;;IArF3B;;;;;QAGP,SAAOA;;QAEP;;;0BAGD;;YACE;YAEA;;;;;;;;kDAQmB;;;;;;;;;;2CAYb;;;;;;;;iCAKa;;;;;;;;;;;;;wBAWf;;;;;;;;;;;;;;;sBAOEC;;;;;;;;;;;0BAOY;0CAAV;;;8BACU,SAAgB;;;;;;;;kBAM5B;;;qCAEgB;;;;;;uBAMX,EAACC;kBACLC;;;;;;;;sCAQP;;;;;yBAIU;;;iFAGc;;;;;;;;;;;;;oBAUd;;;;;;;;;"}

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

@@ -16,6 +16,7 @@ export declare const ElRate: import("../../utils/types").SFCWithInstall<import("
     readonly textColor: import("../../utils/props").BuildPropReturn<StringConstructor, "#1f2d3d", unknown, unknown, unknown>;
     readonly texts: import("../../utils/props").BuildPropReturn<import("../../utils/props").PropWrapper<string[]>, () => ["Extremely bad", "Disappointed", "Fair", "Satisfied", "Surprise"], unknown, unknown, unknown>;
     readonly scoreTemplate: import("../../utils/props").BuildPropReturn<StringConstructor, "{value}", unknown, unknown, unknown>;
+    readonly size: import("../../utils/props").BuildPropReturn<(new (...args: any[]) => import("../../utils/types").ComponentSize & {}) | (() => import("../../utils/types").ComponentSize) | ((new (...args: any[]) => import("../../utils/types").ComponentSize & {}) | (() => import("../../utils/types").ComponentSize))[], unknown, unknown, unknown, unknown>;
 }, {
     hoverIndex: import("vue").Ref<number>;
     currentValue: import("vue").Ref<number>;
@@ -43,6 +44,7 @@ export declare const ElRate: import("../../utils/types").SFCWithInstall<import("
         };
     }>;
     iconComponents: import("vue").ComputedRef<any[]>;
+    rateKls: import("vue").ComputedRef<string[]>;
     showDecimalIcon: (item: number) => boolean;
     getIconStyle: (item: number) => {
         color: string | {
@@ -75,6 +77,7 @@ export declare const ElRate: import("../../utils/types").SFCWithInstall<import("
     readonly textColor?: unknown;
     readonly texts?: unknown;
     readonly scoreTemplate?: unknown;
+    readonly size?: unknown;
 } & {
     disabled: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     modelValue: number;
@@ -93,10 +96,13 @@ export declare const ElRate: import("../../utils/types").SFCWithInstall<import("
     showScore: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     texts: string[];
     scoreTemplate: string;
-} & {}> & {
+} & {
+    size?: import("../../utils/props").BuildPropType<(new (...args: any[]) => import("../../utils/types").ComponentSize & {}) | (() => import("../../utils/types").ComponentSize) | ((new (...args: any[]) => import("../../utils/types").ComponentSize & {}) | (() => import("../../utils/types").ComponentSize))[], unknown, unknown> | undefined;
+}> & {
     onChange?: ((value: number) => any) | undefined;
     "onUpdate:modelValue"?: ((value: number) => any) | undefined;
 }, {
+    size: import("../../utils/props").BuildPropType<(new (...args: any[]) => import("../../utils/types").ComponentSize & {}) | (() => import("../../utils/types").ComponentSize) | ((new (...args: any[]) => import("../../utils/types").ComponentSize & {}) | (() => import("../../utils/types").ComponentSize))[], unknown, unknown>;
     disabled: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     modelValue: number;
     textColor: string;

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

@@ -1,3 +1,4 @@
+import type { ComponentSize } from 'element-plus/es/utils/types';
 import type { Component, ExtractPropTypes } from 'vue';
 export declare const rateProps: {
     readonly modelValue: import("element-plus/es/utils/props").BuildPropReturn<NumberConstructor, 0, unknown, unknown, unknown>;
@@ -17,6 +18,7 @@ export declare const rateProps: {
     readonly textColor: import("element-plus/es/utils/props").BuildPropReturn<StringConstructor, "#1f2d3d", unknown, unknown, unknown>;
     readonly texts: import("element-plus/es/utils/props").BuildPropReturn<import("element-plus/es/utils/props").PropWrapper<string[]>, () => ["Extremely bad", "Disappointed", "Fair", "Satisfied", "Surprise"], unknown, unknown, unknown>;
     readonly scoreTemplate: import("element-plus/es/utils/props").BuildPropReturn<StringConstructor, "{value}", unknown, unknown, unknown>;
+    readonly size: import("element-plus/es/utils/props").BuildPropReturn<(new (...args: any[]) => ComponentSize & {}) | (() => ComponentSize) | ((new (...args: any[]) => ComponentSize & {}) | (() => ComponentSize))[], unknown, unknown, unknown, unknown>;
 };
 export declare type RateProps = ExtractPropTypes<typeof rateProps>;
 export declare const rateEmits: {

package/es/components/rate/src/rate.mjs CHANGED Viewed

@@ -1,6 +1,7 @@
 import { StarFilled, Star } from '@element-plus/icons-vue';
 import { UPDATE_MODEL_EVENT } from '../../../utils/constants.mjs';
 import { buildProps, definePropType, mutable } from '../../../utils/props.mjs';
+import { isValidComponentSize } from '../../../utils/validators.mjs';
 const rateProps = buildProps({
   modelValue: {
@@ -76,6 +77,10 @@ const rateProps = buildProps({
   scoreTemplate: {
     type: String,
     default: "{value}"
+  },
+  size: {
+    type: String,
+    validator: isValidComponentSize
   }
 });
 const rateEmits = {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"rate.mjs","sources":["../../../../../../packages/components/rate/src/rate.ts"],"sourcesContent":["import { Star, StarFilled } from '@element-plus/icons-vue'\nimport { UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'\nimport { buildProps, definePropType, mutable } from '@element-plus/utils/props'\nimport type { Component, ExtractPropTypes } from 'vue'\n\nexport const rateProps = buildProps({\n modelValue: {\n type: Number,\n default: 0,\n },\n lowThreshold: {\n type: Number,\n default: 2,\n },\n highThreshold: {\n type: Number,\n default: 4,\n },\n max: {\n type: Number,\n default: 5,\n },\n colors: {\n type: definePropType<string[] \| Record<number, string>>([Array, Object]),\n default: () => mutable(['#F7BA2A', '#F7BA2A', '#F7BA2A'] as const),\n },\n voidColor: {\n type: String,\n default: '#C6D1DE',\n },\n disabledVoidColor: {\n type: String,\n default: '#EFF2F7',\n },\n icons: {\n type: definePropType<\n Array<string \| Component> \| Record<number, string \| Component>\n >([Array, Object]),\n default: () => [StarFilled, StarFilled, StarFilled],\n },\n voidIcon: {\n type: definePropType<string \| Component>([String, Object]),\n default: () => Star,\n },\n disabledvoidIcon: {\n type: definePropType<string \| Component>([String, Object]),\n default: () => StarFilled,\n },\n disabled: {\n type: Boolean,\n default: false,\n },\n allowHalf: {\n type: Boolean,\n default: false,\n },\n showText: {\n type: Boolean,\n default: false,\n },\n showScore: {\n type: Boolean,\n default: false,\n },\n textColor: {\n type: String,\n default: '#1f2d3d',\n },\n texts: {\n type: definePropType<string[]>([Array]),\n default: () =>\n mutable([\n 'Extremely bad',\n 'Disappointed',\n 'Fair',\n 'Satisfied',\n 'Surprise',\n ] as const),\n },\n scoreTemplate: {\n type: String,\n default: '{value}',\n },\n} as const)\n\nexport type RateProps = ExtractPropTypes<typeof rateProps>\n\nexport const rateEmits = {\n change: (value: number) => typeof value === 'number',\n [UPDATE_MODEL_EVENT]: (value: number) => typeof value === 'number',\n}\nexport type RateEmits = typeof rateEmits\n"],"names":[],"mappings":"~~;;;;AAGY~~,MAAC,SAAS,GAAG,UAAU,CAAC;AACpC,EAAE,UAAU,EAAE;AACd,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,CAAC;AACd,GAAG;AACH,EAAE,YAAY,EAAE;AAChB,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,CAAC;AACd,GAAG;AACH,EAAE,aAAa,EAAE;AACjB,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,CAAC;AACd,GAAG;AACH,EAAE,GAAG,EAAE;AACP,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,CAAC;AACd,GAAG;AACH,EAAE,MAAM,EAAE;AACV,IAAI,IAAI,EAAE,cAAc,CAAC,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;AACzC,IAAI,OAAO,EAAE,MAAM,OAAO,CAAC,CAAC,SAAS,EAAE,SAAS,EAAE,SAAS,CAAC,CAAC;AAC7D,GAAG;AACH,EAAE,SAAS,EAAE;AACb,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,SAAS;AACtB,GAAG;AACH,EAAE,iBAAiB,EAAE;AACrB,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,SAAS;AACtB,GAAG;AACH,EAAE,KAAK,EAAE;AACT,IAAI,IAAI,EAAE,cAAc,CAAC,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;AACzC,IAAI,OAAO,EAAE,MAAM,CAAC,UAAU,EAAE,UAAU,EAAE,UAAU,CAAC;AACvD,GAAG;AACH,EAAE,QAAQ,EAAE;AACZ,IAAI,IAAI,EAAE,cAAc,CAAC,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAC1C,IAAI,OAAO,EAAE,MAAM,IAAI;AACvB,GAAG;AACH,EAAE,gBAAgB,EAAE;AACpB,IAAI,IAAI,EAAE,cAAc,CAAC,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAC1C,IAAI,OAAO,EAAE,MAAM,UAAU;AAC7B,GAAG;AACH,EAAE,QAAQ,EAAE;AACZ,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,KAAK;AAClB,GAAG;AACH,EAAE,SAAS,EAAE;AACb,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,KAAK;AAClB,GAAG;AACH,EAAE,QAAQ,EAAE;AACZ,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,KAAK;AAClB,GAAG;AACH,EAAE,SAAS,EAAE;AACb,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,KAAK;AAClB,GAAG;AACH,EAAE,SAAS,EAAE;AACb,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,SAAS;AACtB,GAAG;AACH,EAAE,KAAK,EAAE;AACT,IAAI,IAAI,EAAE,cAAc,CAAC,CAAC,KAAK,CAAC,CAAC;AACjC,IAAI,OAAO,EAAE,MAAM,OAAO,CAAC;AAC3B,MAAM,eAAe;AACrB,MAAM,cAAc;AACpB,MAAM,MAAM;AACZ,MAAM,WAAW;AACjB,MAAM,UAAU;AAChB,KAAK,CAAC;AACN,GAAG;AACH,EAAE,aAAa,EAAE;AACjB,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,SAAS;AACtB,GAAG;AACH,CAAC,EAAE;AACS,MAAC,SAAS,GAAG;AACzB,EAAE,MAAM,EAAE,CAAC,KAAK,KAAK,OAAO,KAAK,KAAK,QAAQ;AAC9C,EAAE,CAAC,kBAAkB,GAAG,CAAC,KAAK,KAAK,OAAO,KAAK,KAAK,QAAQ;AAC5D;;;;"}
1	+ {"version":3,"file":"rate.mjs","sources":["../../../../../../packages/components/rate/src/rate.ts"],"sourcesContent":["import { Star, StarFilled } from '@element-plus/icons-vue'\nimport { UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'\nimport { buildProps, definePropType, mutable } from '@element-plus/utils/props'\nimport { isValidComponentSize } from '@element-plus/utils/validators'\nimport type { ComponentSize } from '@element-plus/utils/types'\nimport type { Component, ExtractPropTypes, PropType } from 'vue'\n\nexport const rateProps = buildProps({\n modelValue: {\n type: Number,\n default: 0,\n },\n lowThreshold: {\n type: Number,\n default: 2,\n },\n highThreshold: {\n type: Number,\n default: 4,\n },\n max: {\n type: Number,\n default: 5,\n },\n colors: {\n type: definePropType<string[] \| Record<number, string>>([Array, Object]),\n default: () => mutable(['#F7BA2A', '#F7BA2A', '#F7BA2A'] as const),\n },\n voidColor: {\n type: String,\n default: '#C6D1DE',\n },\n disabledVoidColor: {\n type: String,\n default: '#EFF2F7',\n },\n icons: {\n type: definePropType<\n Array<string \| Component> \| Record<number, string \| Component>\n >([Array, Object]),\n default: () => [StarFilled, StarFilled, StarFilled],\n },\n voidIcon: {\n type: definePropType<string \| Component>([String, Object]),\n default: () => Star,\n },\n disabledvoidIcon: {\n type: definePropType<string \| Component>([String, Object]),\n default: () => StarFilled,\n },\n disabled: {\n type: Boolean,\n default: false,\n },\n allowHalf: {\n type: Boolean,\n default: false,\n },\n showText: {\n type: Boolean,\n default: false,\n },\n showScore: {\n type: Boolean,\n default: false,\n },\n textColor: {\n type: String,\n default: '#1f2d3d',\n },\n texts: {\n type: definePropType<string[]>([Array]),\n default: () =>\n mutable([\n 'Extremely bad',\n 'Disappointed',\n 'Fair',\n 'Satisfied',\n 'Surprise',\n ] as const),\n },\n scoreTemplate: {\n type: String,\n default: '{value}',\n },\n size: {\n type: String as PropType<ComponentSize>,\n validator: isValidComponentSize,\n },\n} as const)\n\nexport type RateProps = ExtractPropTypes<typeof rateProps>\n\nexport const rateEmits = {\n change: (value: number) => typeof value === 'number',\n [UPDATE_MODEL_EVENT]: (value: number) => typeof value === 'number',\n}\nexport type RateEmits = typeof rateEmits\n"],"names":[],"mappings":"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"}

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

@@ -16,6 +16,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly textColor: import("../../../utils/props").BuildPropReturn<StringConstructor, "#1f2d3d", unknown, unknown, unknown>;
     readonly texts: import("../../../utils/props").BuildPropReturn<import("../../../utils/props").PropWrapper<string[]>, () => ["Extremely bad", "Disappointed", "Fair", "Satisfied", "Surprise"], unknown, unknown, unknown>;
     readonly scoreTemplate: import("../../../utils/props").BuildPropReturn<StringConstructor, "{value}", unknown, unknown, unknown>;
+    readonly size: import("../../../utils/props").BuildPropReturn<(new (...args: any[]) => import("../../../utils/types").ComponentSize & {}) | (() => import("../../../utils/types").ComponentSize) | ((new (...args: any[]) => import("../../../utils/types").ComponentSize & {}) | (() => import("../../../utils/types").ComponentSize))[], unknown, unknown, unknown, unknown>;
 }, {
     hoverIndex: import("vue").Ref<number>;
     currentValue: import("vue").Ref<number>;
@@ -43,6 +44,7 @@ declare const _default: import("vue").DefineComponent<{
         };
     }>;
     iconComponents: import("vue").ComputedRef<any[]>;
+    rateKls: import("vue").ComputedRef<string[]>;
     showDecimalIcon: (item: number) => boolean;
     getIconStyle: (item: number) => {
         color: string | {
@@ -75,6 +77,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly textColor?: unknown;
     readonly texts?: unknown;
     readonly scoreTemplate?: unknown;
+    readonly size?: unknown;
 } & {
     disabled: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     modelValue: number;
@@ -93,10 +96,13 @@ declare const _default: import("vue").DefineComponent<{
     showScore: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     texts: string[];
     scoreTemplate: string;
-} & {}> & {
+} & {
+    size?: import("../../../utils/props").BuildPropType<(new (...args: any[]) => import("../../../utils/types").ComponentSize & {}) | (() => import("../../../utils/types").ComponentSize) | ((new (...args: any[]) => import("../../../utils/types").ComponentSize & {}) | (() => import("../../../utils/types").ComponentSize))[], unknown, unknown> | undefined;
+}> & {
     onChange?: ((value: number) => any) | undefined;
     "onUpdate:modelValue"?: ((value: number) => any) | undefined;
 }, {
+    size: import("../../../utils/props").BuildPropType<(new (...args: any[]) => import("../../../utils/types").ComponentSize & {}) | (() => import("../../../utils/types").ComponentSize) | ((new (...args: any[]) => import("../../../utils/types").ComponentSize & {}) | (() => import("../../../utils/types").ComponentSize))[], unknown, unknown>;
     disabled: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     modelValue: number;
     textColor: string;

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

@@ -6,8 +6,10 @@ import { EVENT_CODE } from '../../../utils/aria.mjs';
 import { UPDATE_MODEL_EVENT } from '../../../utils/constants.mjs';
 import { ElIcon } from '../../icon/index.mjs';
 import { StarFilled, Star } from '@element-plus/icons-vue';
+import '../../../hooks/index.mjs';
 import { rateProps, rateEmits } from './rate.mjs';
 import { elFormKey } from '../../../tokens/form.mjs';
+import { useSize } from '../../../hooks/use-common-props/index.mjs';
 function getValueFromMap(value, map) {
   const isExcludedObject = (val) => isObject(val);
@@ -30,9 +32,12 @@ var script = defineComponent({
   emits: rateEmits,
   setup(props, { emit }) {
     const elForm = inject(elFormKey, {});
+    const rateSize = useSize();
     const currentValue = ref(props.modelValue);
     const hoverIndex = ref(-1);
     const pointerAtLeftHalf = ref(true);
+    const prefix = "el-rate";
+    const rateKls = computed(() => [prefix, `${prefix}--${rateSize.value}`]);
     const rateDisabled = computed(() => props.disabled || elForm.disabled);
     const text = computed(() => {
       let result = "";
@@ -180,6 +185,7 @@ var script = defineComponent({
       decimalStyle,
       decimalIconComponent,
       iconComponents,
+      rateKls,
       showDecimalIcon,
       getIconStyle,
       selectValue,

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

	@@ -1 +1 @@
1	- {"version":3,"file":"rate.vue_vue_type_script_lang.mjs","sources":["../../../../../../packages/components/rate/src/rate.vue"],"sourcesContent":["<template>\n <div\n class=\"el-rate\"\n role=\"slider\"\n :aria-valuenow=\"currentValue\"\n :aria-valuetext=\"text\"\n aria-valuemin=\"0\"\n :aria-valuemax=\"max\"\n tabindex=\"0\"\n @keydown=\"handleKey\"\n >\n <span\n v-for=\"(item, key) in max\"\n :key=\"key\"\n class=\"el-rate__item\"\n :style=\"{ cursor: rateDisabled ? 'auto' : 'pointer' }\"\n @mousemove=\"setCurrentValue(item, $event)\"\n @mouseleave=\"resetCurrentValue\"\n @click=\"selectValue(item)\"\n >\n <el-icon\n :class=\"[{ hover: hoverIndex === item }]\"\n class=\"el-rate__icon\"\n :style=\"getIconStyle(item)\"\n >\n <component :is=\"iconComponents[item - 1]\" />\n <el-icon\n v-if=\"showDecimalIcon(item)\"\n :style=\"decimalStyle\"\n class=\"el-rate__icon el-rate__decimal\"\n >\n <component :is=\"decimalIconComponent\" />\n </el-icon>\n </el-icon>\n </span>\n <span\n v-if=\"showText \|\| showScore\"\n class=\"el-rate__text\"\n :style=\"{ color: textColor }\"\n >\n {{ text }}\n </span>\n </div>\n</template>\n<script lang=\"ts\">\nimport { defineComponent, inject, computed, ref, watch } from 'vue'\nimport { isObject, isArray } from '@vue/shared'\nimport { elFormKey } from '@element-plus/tokens'\nimport { hasClass } from '@element-plus/utils/dom'\nimport { EVENT_CODE } from '@element-plus/utils/aria'\n\nimport { UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'\nimport { ElIcon } from '@element-plus/components/icon'\nimport { StarFilled, Star } from '@element-plus/icons-vue'\nimport { rateProps, rateEmits } from './rate'\nimport type { ElFormContext } from '@element-plus/tokens'\n\nfunction getValueFromMap<T>(\n value: number,\n map: Record<string, T \| { excluded?: boolean; value: T }>\n) {\n const isExcludedObject = (\n val: unknown\n ): val is { excluded?: boolean } & Record<any, unknown> => isObject(val)\n\n const matchedKeys = Object.keys(map)\n .map((key) => +key)\n .filter((key) => {\n const val = map[key]\n const excluded = isExcludedObject(val) ? val.excluded : false\n return excluded ? value < key : value <= key\n })\n .sort((a, b) => a - b)\n const matchedValue = map[matchedKeys[0]]\n return (isExcludedObject(matchedValue) && matchedValue.value) \|\| matchedValue\n}\n\nexport default defineComponent({\n name: 'ElRate',\n components: {\n ElIcon,\n StarFilled,\n Star,\n },\n props: rateProps,\n emits: rateEmits,\n\n setup(props, { emit }) {\n const elForm = inject(elFormKey, {} as ElFormContext)\n\n const currentValue = ref(props.modelValue)\n const hoverIndex = ref(-1)\n const pointerAtLeftHalf = ref(true)\n\n const rateDisabled = computed(() => props.disabled \|\| elForm.disabled)\n const text = computed(() => {\n let result = ''\n if (props.showScore) {\n result = props.scoreTemplate.replace(\n /\\{\\svalue\\s\\}/,\n rateDisabled.value ? `${props.modelValue}` : `${currentValue.value}`\n )\n } else if (props.showText) {\n result = props.texts[Math.ceil(currentValue.value) - 1]\n }\n return result\n })\n const valueDecimal = computed(\n () => props.modelValue * 100 - Math.floor(props.modelValue) * 100\n )\n const colorMap = computed(() =>\n isArray(props.colors)\n ? {\n [props.lowThreshold]: props.colors[0],\n [props.highThreshold]: { value: props.colors[1], excluded: true },\n [props.max]: props.colors[2],\n }\n : props.colors\n )\n const activeColor = computed(() =>\n getValueFromMap(currentValue.value, colorMap.value)\n )\n const decimalStyle = computed(() => {\n let width = ''\n if (rateDisabled.value) {\n width = `${valueDecimal.value}%`\n } else if (props.allowHalf) {\n width = '50%'\n }\n return {\n color: activeColor.value,\n width,\n }\n })\n const componentMap = computed(() =>\n isArray(props.icons)\n ? {\n [props.lowThreshold]: props.icons[0],\n [props.highThreshold]: {\n value: props.icons[1],\n excluded: true,\n },\n [props.max]: props.icons[2],\n }\n : props.icons\n )\n const decimalIconComponent = computed(() =>\n getValueFromMap(props.modelValue, componentMap.value)\n )\n const voidComponent = computed(() =>\n rateDisabled.value ? props.disabledvoidIcon : props.voidIcon\n )\n const activeComponent = computed(() =>\n getValueFromMap(currentValue.value, componentMap.value)\n )\n const iconComponents = computed(() => {\n const result = Array(props.max)\n const threshold = currentValue.value\n result.fill(activeComponent.value, 0, threshold)\n result.fill(voidComponent.value, threshold, props.max)\n return result\n })\n\n function showDecimalIcon(item: number) {\n const showWhenDisabled =\n rateDisabled.value &&\n valueDecimal.value > 0 &&\n item - 1 < props.modelValue &&\n item > props.modelValue\n const showWhenAllowHalf =\n props.allowHalf &&\n pointerAtLeftHalf.value &&\n item - 0.5 <= currentValue.value &&\n item > currentValue.value\n return showWhenDisabled \|\| showWhenAllowHalf\n }\n\n function getIconStyle(item: number) {\n const voidColor = rateDisabled.value\n ? props.disabledVoidColor\n : props.voidColor\n return {\n color: item <= currentValue.value ? activeColor.value : voidColor,\n }\n }\n\n function selectValue(value: number) {\n if (rateDisabled.value) {\n return\n }\n if (props.allowHalf && pointerAtLeftHalf.value) {\n emit(UPDATE_MODEL_EVENT, currentValue.value)\n if (props.modelValue !== currentValue.value) {\n emit('change', currentValue.value)\n }\n } else {\n emit(UPDATE_MODEL_EVENT, value)\n if (props.modelValue !== value) {\n emit('change', value)\n }\n }\n }\n\n function handleKey(e: KeyboardEvent) {\n if (rateDisabled.value) {\n return\n }\n let _currentValue = currentValue.value\n const code = e.code\n if (code === EVENT_CODE.up \|\| code === EVENT_CODE.right) {\n if (props.allowHalf) {\n _currentValue += 0.5\n } else {\n _currentValue += 1\n }\n e.stopPropagation()\n e.preventDefault()\n } else if (code === EVENT_CODE.left \|\| code === EVENT_CODE.down) {\n if (props.allowHalf) {\n _currentValue -= 0.5\n } else {\n _currentValue -= 1\n }\n e.stopPropagation()\n e.preventDefault()\n }\n _currentValue = _currentValue < 0 ? 0 : _currentValue\n _currentValue = _currentValue > props.max ? props.max : _currentValue\n emit(UPDATE_MODEL_EVENT, _currentValue)\n emit('change', _currentValue)\n return _currentValue\n }\n\n function setCurrentValue(value: number, event: MouseEvent) {\n if (rateDisabled.value) {\n return\n }\n if (props.allowHalf) {\n let target = event.target as HTMLElement\n if (hasClass(target, 'el-rate__item')) {\n target = target.querySelector('.el-rate__icon')!\n }\n if (target.clientWidth === 0 \|\| hasClass(target, 'el-rate__decimal')) {\n target = target.parentNode as HTMLElement\n }\n pointerAtLeftHalf.value = event.offsetX * 2 <= target.clientWidth\n currentValue.value = pointerAtLeftHalf.value ? value - 0.5 : value\n } else {\n currentValue.value = value\n }\n hoverIndex.value = value\n }\n\n function resetCurrentValue() {\n if (rateDisabled.value) {\n return\n }\n if (props.allowHalf) {\n pointerAtLeftHalf.value =\n props.modelValue !== Math.floor(props.modelValue)\n }\n currentValue.value = props.modelValue\n hoverIndex.value = -1\n }\n\n watch(\n () => props.modelValue,\n (val) => {\n currentValue.value = val\n pointerAtLeftHalf.value =\n props.modelValue !== Math.floor(props.modelValue)\n }\n )\n\n if (!props.modelValue) {\n emit(UPDATE_MODEL_EVENT, 0)\n }\n\n return {\n hoverIndex,\n currentValue,\n rateDisabled,\n text,\n decimalStyle,\n decimalIconComponent,\n iconComponents,\n\n showDecimalIcon,\n getIconStyle,\n selectValue,\n handleKey,\n setCurrentValue,\n resetCurrentValue,\n }\n },\n})\n</script>\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"rate.vue_vue_type_script_lang.mjs","sources":["../../../../../../packages/components/rate/src/rate.vue"],"sourcesContent":["<template>\n <div\n :class=\"rateKls\"\n role=\"slider\"\n :aria-valuenow=\"currentValue\"\n :aria-valuetext=\"text\"\n aria-valuemin=\"0\"\n :aria-valuemax=\"max\"\n tabindex=\"0\"\n @keydown=\"handleKey\"\n >\n <span\n v-for=\"(item, key) in max\"\n :key=\"key\"\n class=\"el-rate__item\"\n :style=\"{ cursor: rateDisabled ? 'auto' : 'pointer' }\"\n @mousemove=\"setCurrentValue(item, $event)\"\n @mouseleave=\"resetCurrentValue\"\n @click=\"selectValue(item)\"\n >\n <el-icon\n :class=\"[{ hover: hoverIndex === item }]\"\n class=\"el-rate__icon\"\n :style=\"getIconStyle(item)\"\n >\n <component :is=\"iconComponents[item - 1]\" />\n <el-icon\n v-if=\"showDecimalIcon(item)\"\n :style=\"decimalStyle\"\n class=\"el-rate__icon el-rate__decimal\"\n >\n <component :is=\"decimalIconComponent\" />\n </el-icon>\n </el-icon>\n </span>\n <span\n v-if=\"showText \|\| showScore\"\n class=\"el-rate__text\"\n :style=\"{ color: textColor }\"\n >\n {{ text }}\n </span>\n </div>\n</template>\n<script lang=\"ts\">\nimport { defineComponent, inject, computed, ref, watch } from 'vue'\nimport { isObject, isArray } from '@vue/shared'\nimport { elFormKey } from '@element-plus/tokens'\nimport { hasClass } from '@element-plus/utils/dom'\nimport { EVENT_CODE } from '@element-plus/utils/aria'\n\nimport { UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'\nimport { ElIcon } from '@element-plus/components/icon'\nimport { StarFilled, Star } from '@element-plus/icons-vue'\nimport { useSize } from '@element-plus/hooks'\nimport { rateProps, rateEmits } from './rate'\nimport type { ElFormContext } from '@element-plus/tokens'\n\nfunction getValueFromMap<T>(\n value: number,\n map: Record<string, T \| { excluded?: boolean; value: T }>\n) {\n const isExcludedObject = (\n val: unknown\n ): val is { excluded?: boolean } & Record<any, unknown> => isObject(val)\n\n const matchedKeys = Object.keys(map)\n .map((key) => +key)\n .filter((key) => {\n const val = map[key]\n const excluded = isExcludedObject(val) ? val.excluded : false\n return excluded ? value < key : value <= key\n })\n .sort((a, b) => a - b)\n const matchedValue = map[matchedKeys[0]]\n return (isExcludedObject(matchedValue) && matchedValue.value) \|\| matchedValue\n}\n\nexport default defineComponent({\n name: 'ElRate',\n components: {\n ElIcon,\n StarFilled,\n Star,\n },\n props: rateProps,\n emits: rateEmits,\n\n setup(props, { emit }) {\n const elForm = inject(elFormKey, {} as ElFormContext)\n\n const rateSize = useSize()\n const currentValue = ref(props.modelValue)\n const hoverIndex = ref(-1)\n const pointerAtLeftHalf = ref(true)\n\n const prefix = 'el-rate'\n const rateKls = computed(() => [prefix, `${prefix}--${rateSize.value}`])\n\n const rateDisabled = computed(() => props.disabled \|\| elForm.disabled)\n const text = computed(() => {\n let result = ''\n if (props.showScore) {\n result = props.scoreTemplate.replace(\n /\\{\\svalue\\s\\}/,\n rateDisabled.value ? `${props.modelValue}` : `${currentValue.value}`\n )\n } else if (props.showText) {\n result = props.texts[Math.ceil(currentValue.value) - 1]\n }\n return result\n })\n const valueDecimal = computed(\n () => props.modelValue * 100 - Math.floor(props.modelValue) * 100\n )\n const colorMap = computed(() =>\n isArray(props.colors)\n ? {\n [props.lowThreshold]: props.colors[0],\n [props.highThreshold]: { value: props.colors[1], excluded: true },\n [props.max]: props.colors[2],\n }\n : props.colors\n )\n const activeColor = computed(() =>\n getValueFromMap(currentValue.value, colorMap.value)\n )\n const decimalStyle = computed(() => {\n let width = ''\n if (rateDisabled.value) {\n width = `${valueDecimal.value}%`\n } else if (props.allowHalf) {\n width = '50%'\n }\n return {\n color: activeColor.value,\n width,\n }\n })\n const componentMap = computed(() =>\n isArray(props.icons)\n ? {\n [props.lowThreshold]: props.icons[0],\n [props.highThreshold]: {\n value: props.icons[1],\n excluded: true,\n },\n [props.max]: props.icons[2],\n }\n : props.icons\n )\n const decimalIconComponent = computed(() =>\n getValueFromMap(props.modelValue, componentMap.value)\n )\n const voidComponent = computed(() =>\n rateDisabled.value ? props.disabledvoidIcon : props.voidIcon\n )\n const activeComponent = computed(() =>\n getValueFromMap(currentValue.value, componentMap.value)\n )\n const iconComponents = computed(() => {\n const result = Array(props.max)\n const threshold = currentValue.value\n result.fill(activeComponent.value, 0, threshold)\n result.fill(voidComponent.value, threshold, props.max)\n return result\n })\n\n function showDecimalIcon(item: number) {\n const showWhenDisabled =\n rateDisabled.value &&\n valueDecimal.value > 0 &&\n item - 1 < props.modelValue &&\n item > props.modelValue\n const showWhenAllowHalf =\n props.allowHalf &&\n pointerAtLeftHalf.value &&\n item - 0.5 <= currentValue.value &&\n item > currentValue.value\n return showWhenDisabled \|\| showWhenAllowHalf\n }\n\n function getIconStyle(item: number) {\n const voidColor = rateDisabled.value\n ? props.disabledVoidColor\n : props.voidColor\n return {\n color: item <= currentValue.value ? activeColor.value : voidColor,\n }\n }\n\n function selectValue(value: number) {\n if (rateDisabled.value) {\n return\n }\n if (props.allowHalf && pointerAtLeftHalf.value) {\n emit(UPDATE_MODEL_EVENT, currentValue.value)\n if (props.modelValue !== currentValue.value) {\n emit('change', currentValue.value)\n }\n } else {\n emit(UPDATE_MODEL_EVENT, value)\n if (props.modelValue !== value) {\n emit('change', value)\n }\n }\n }\n\n function handleKey(e: KeyboardEvent) {\n if (rateDisabled.value) {\n return\n }\n let _currentValue = currentValue.value\n const code = e.code\n if (code === EVENT_CODE.up \|\| code === EVENT_CODE.right) {\n if (props.allowHalf) {\n _currentValue += 0.5\n } else {\n _currentValue += 1\n }\n e.stopPropagation()\n e.preventDefault()\n } else if (code === EVENT_CODE.left \|\| code === EVENT_CODE.down) {\n if (props.allowHalf) {\n _currentValue -= 0.5\n } else {\n _currentValue -= 1\n }\n e.stopPropagation()\n e.preventDefault()\n }\n _currentValue = _currentValue < 0 ? 0 : _currentValue\n _currentValue = _currentValue > props.max ? props.max : _currentValue\n emit(UPDATE_MODEL_EVENT, _currentValue)\n emit('change', _currentValue)\n return _currentValue\n }\n\n function setCurrentValue(value: number, event: MouseEvent) {\n if (rateDisabled.value) {\n return\n }\n if (props.allowHalf) {\n let target = event.target as HTMLElement\n if (hasClass(target, 'el-rate__item')) {\n target = target.querySelector('.el-rate__icon')!\n }\n if (target.clientWidth === 0 \|\| hasClass(target, 'el-rate__decimal')) {\n target = target.parentNode as HTMLElement\n }\n pointerAtLeftHalf.value = event.offsetX * 2 <= target.clientWidth\n currentValue.value = pointerAtLeftHalf.value ? value - 0.5 : value\n } else {\n currentValue.value = value\n }\n hoverIndex.value = value\n }\n\n function resetCurrentValue() {\n if (rateDisabled.value) {\n return\n }\n if (props.allowHalf) {\n pointerAtLeftHalf.value =\n props.modelValue !== Math.floor(props.modelValue)\n }\n currentValue.value = props.modelValue\n hoverIndex.value = -1\n }\n\n watch(\n () => props.modelValue,\n (val) => {\n currentValue.value = val\n pointerAtLeftHalf.value =\n props.modelValue !== Math.floor(props.modelValue)\n }\n )\n\n if (!props.modelValue) {\n emit(UPDATE_MODEL_EVENT, 0)\n }\n\n return {\n hoverIndex,\n currentValue,\n rateDisabled,\n text,\n decimalStyle,\n decimalIconComponent,\n iconComponents,\n rateKls,\n\n showDecimalIcon,\n getIconStyle,\n selectValue,\n handleKey,\n setCurrentValue,\n resetCurrentValue,\n }\n },\n})\n</script>\n"],"names":[],"mappings":"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"}

package/es/components/rate/src/rate.vue_vue_type_template_id_38c42df6_lang.mjs CHANGED Viewed

@@ -1,11 +1,11 @@
-import { resolveComponent, openBlock, createElementBlock, Fragment, renderList, normalizeStyle, createVNode, normalizeClass, withCtx, createBlock, resolveDynamicComponent, createCommentVNode, toDisplayString } from 'vue';
+import { resolveComponent, openBlock, createElementBlock, normalizeClass, Fragment, renderList, normalizeStyle, createVNode, withCtx, createBlock, resolveDynamicComponent, createCommentVNode, toDisplayString } from 'vue';
 const _hoisted_1 = ["aria-valuenow", "aria-valuetext", "aria-valuemax"];
 const _hoisted_2 = ["onMousemove", "onClick"];
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_el_icon = resolveComponent("el-icon");
   return openBlock(), createElementBlock("div", {
-    class: "el-rate",
+    class: normalizeClass(_ctx.rateKls),
     role: "slider",
     "aria-valuenow": _ctx.currentValue,
     "aria-valuetext": _ctx.text,
@@ -49,7 +49,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       class: "el-rate__text",
       style: normalizeStyle({ color: _ctx.textColor })
     }, toDisplayString(_ctx.text), 5)) : createCommentVNode("v-if", true)
-  ], 40, _hoisted_1);
+  ], 42, _hoisted_1);
 }
 export { render };

package/es/components/rate/src/rate.vue_vue_type_template_id_38c42df6_lang.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"rate.vue_vue_type_template_id_38c42df6_lang.mjs","sources":["../../../../../../packages/components/rate/src/rate.vue?vue&type=template&id=38c42df6&lang.js"],"sourcesContent":["<template>\n <div\n class=\"~~el-rate~~\"\n role=\"slider\"\n :aria-valuenow=\"currentValue\"\n :aria-valuetext=\"text\"\n aria-valuemin=\"0\"\n :aria-valuemax=\"max\"\n tabindex=\"0\"\n @keydown=\"handleKey\"\n >\n <span\n v-for=\"(item, key) in max\"\n :key=\"key\"\n class=\"el-rate__item\"\n :style=\"{ cursor: rateDisabled ? 'auto' : 'pointer' }\"\n @mousemove=\"setCurrentValue(item, $event)\"\n @mouseleave=\"resetCurrentValue\"\n @click=\"selectValue(item)\"\n >\n <el-icon\n :class=\"[{ hover: hoverIndex === item }]\"\n class=\"el-rate__icon\"\n :style=\"getIconStyle(item)\"\n >\n <component :is=\"iconComponents[item - 1]\" />\n <el-icon\n v-if=\"showDecimalIcon(item)\"\n :style=\"decimalStyle\"\n class=\"el-rate__icon el-rate__decimal\"\n >\n <component :is=\"decimalIconComponent\" />\n </el-icon>\n </el-icon>\n </span>\n <span\n v-if=\"showText \|\| showScore\"\n class=\"el-rate__text\"\n :style=\"{ color: textColor }\"\n >\n {{ text }}\n </span>\n </div>\n</template>\n<script lang=\"ts\">\nimport { defineComponent, inject, computed, ref, watch } from 'vue'\nimport { isObject, isArray } from '@vue/shared'\nimport { elFormKey } from '@element-plus/tokens'\nimport { hasClass } from '@element-plus/utils/dom'\nimport { EVENT_CODE } from '@element-plus/utils/aria'\n\nimport { UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'\nimport { ElIcon } from '@element-plus/components/icon'\nimport { StarFilled, Star } from '@element-plus/icons-vue'\nimport { rateProps, rateEmits } from './rate'\nimport type { ElFormContext } from '@element-plus/tokens'\n\nfunction getValueFromMap<T>(\n value: number,\n map: Record<string, T \| { excluded?: boolean; value: T }>\n) {\n const isExcludedObject = (\n val: unknown\n ): val is { excluded?: boolean } & Record<any, unknown> => isObject(val)\n\n const matchedKeys = Object.keys(map)\n .map((key) => +key)\n .filter((key) => {\n const val = map[key]\n const excluded = isExcludedObject(val) ? val.excluded : false\n return excluded ? value < key : value <= key\n })\n .sort((a, b) => a - b)\n const matchedValue = map[matchedKeys[0]]\n return (isExcludedObject(matchedValue) && matchedValue.value) \|\| matchedValue\n}\n\nexport default defineComponent({\n name: 'ElRate',\n components: {\n ElIcon,\n StarFilled,\n Star,\n },\n props: rateProps,\n emits: rateEmits,\n\n setup(props, { emit }) {\n const elForm = inject(elFormKey, {} as ElFormContext)\n\n const currentValue = ref(props.modelValue)\n const hoverIndex = ref(-1)\n const pointerAtLeftHalf = ref(true)\n\n const rateDisabled = computed(() => props.disabled \|\| elForm.disabled)\n const text = computed(() => {\n let result = ''\n if (props.showScore) {\n result = props.scoreTemplate.replace(\n /\\{\\svalue\\s\\}/,\n rateDisabled.value ? `${props.modelValue}` : `${currentValue.value}`\n )\n } else if (props.showText) {\n result = props.texts[Math.ceil(currentValue.value) - 1]\n }\n return result\n })\n const valueDecimal = computed(\n () => props.modelValue * 100 - Math.floor(props.modelValue) * 100\n )\n const colorMap = computed(() =>\n isArray(props.colors)\n ? {\n [props.lowThreshold]: props.colors[0],\n [props.highThreshold]: { value: props.colors[1], excluded: true },\n [props.max]: props.colors[2],\n }\n : props.colors\n )\n const activeColor = computed(() =>\n getValueFromMap(currentValue.value, colorMap.value)\n )\n const decimalStyle = computed(() => {\n let width = ''\n if (rateDisabled.value) {\n width = `${valueDecimal.value}%`\n } else if (props.allowHalf) {\n width = '50%'\n }\n return {\n color: activeColor.value,\n width,\n }\n })\n const componentMap = computed(() =>\n isArray(props.icons)\n ? {\n [props.lowThreshold]: props.icons[0],\n [props.highThreshold]: {\n value: props.icons[1],\n excluded: true,\n },\n [props.max]: props.icons[2],\n }\n : props.icons\n )\n const decimalIconComponent = computed(() =>\n getValueFromMap(props.modelValue, componentMap.value)\n )\n const voidComponent = computed(() =>\n rateDisabled.value ? props.disabledvoidIcon : props.voidIcon\n )\n const activeComponent = computed(() =>\n getValueFromMap(currentValue.value, componentMap.value)\n )\n const iconComponents = computed(() => {\n const result = Array(props.max)\n const threshold = currentValue.value\n result.fill(activeComponent.value, 0, threshold)\n result.fill(voidComponent.value, threshold, props.max)\n return result\n })\n\n function showDecimalIcon(item: number) {\n const showWhenDisabled =\n rateDisabled.value &&\n valueDecimal.value > 0 &&\n item - 1 < props.modelValue &&\n item > props.modelValue\n const showWhenAllowHalf =\n props.allowHalf &&\n pointerAtLeftHalf.value &&\n item - 0.5 <= currentValue.value &&\n item > currentValue.value\n return showWhenDisabled \|\| showWhenAllowHalf\n }\n\n function getIconStyle(item: number) {\n const voidColor = rateDisabled.value\n ? props.disabledVoidColor\n : props.voidColor\n return {\n color: item <= currentValue.value ? activeColor.value : voidColor,\n }\n }\n\n function selectValue(value: number) {\n if (rateDisabled.value) {\n return\n }\n if (props.allowHalf && pointerAtLeftHalf.value) {\n emit(UPDATE_MODEL_EVENT, currentValue.value)\n if (props.modelValue !== currentValue.value) {\n emit('change', currentValue.value)\n }\n } else {\n emit(UPDATE_MODEL_EVENT, value)\n if (props.modelValue !== value) {\n emit('change', value)\n }\n }\n }\n\n function handleKey(e: KeyboardEvent) {\n if (rateDisabled.value) {\n return\n }\n let _currentValue = currentValue.value\n const code = e.code\n if (code === EVENT_CODE.up \|\| code === EVENT_CODE.right) {\n if (props.allowHalf) {\n _currentValue += 0.5\n } else {\n _currentValue += 1\n }\n e.stopPropagation()\n e.preventDefault()\n } else if (code === EVENT_CODE.left \|\| code === EVENT_CODE.down) {\n if (props.allowHalf) {\n _currentValue -= 0.5\n } else {\n _currentValue -= 1\n }\n e.stopPropagation()\n e.preventDefault()\n }\n _currentValue = _currentValue < 0 ? 0 : _currentValue\n _currentValue = _currentValue > props.max ? props.max : _currentValue\n emit(UPDATE_MODEL_EVENT, _currentValue)\n emit('change', _currentValue)\n return _currentValue\n }\n\n function setCurrentValue(value: number, event: MouseEvent) {\n if (rateDisabled.value) {\n return\n }\n if (props.allowHalf) {\n let target = event.target as HTMLElement\n if (hasClass(target, 'el-rate__item')) {\n target = target.querySelector('.el-rate__icon')!\n }\n if (target.clientWidth === 0 \|\| hasClass(target, 'el-rate__decimal')) {\n target = target.parentNode as HTMLElement\n }\n pointerAtLeftHalf.value = event.offsetX * 2 <= target.clientWidth\n currentValue.value = pointerAtLeftHalf.value ? value - 0.5 : value\n } else {\n currentValue.value = value\n }\n hoverIndex.value = value\n }\n\n function resetCurrentValue() {\n if (rateDisabled.value) {\n return\n }\n if (props.allowHalf) {\n pointerAtLeftHalf.value =\n props.modelValue !== Math.floor(props.modelValue)\n }\n currentValue.value = props.modelValue\n hoverIndex.value = -1\n }\n\n watch(\n () => props.modelValue,\n (val) => {\n currentValue.value = val\n pointerAtLeftHalf.value =\n props.modelValue !== Math.floor(props.modelValue)\n }\n )\n\n if (!props.modelValue) {\n emit(UPDATE_MODEL_EVENT, 0)\n }\n\n return {\n hoverIndex,\n currentValue,\n rateDisabled,\n text,\n decimalStyle,\n decimalIconComponent,\n iconComponents,\n\n showDecimalIcon,\n getIconStyle,\n selectValue,\n handleKey,\n setCurrentValue,\n resetCurrentValue,\n }\n },\n})\n</script>\n"],"names":["_openBlock","_createVNode"],"mappings":";;;;;;;;;;~~IAEI~~;~~IACA~~;IACC,eAAa,EAAE;IACf;IACD,iBAAc;;;aAGNA,wCAAE;;;;QAIP;QACD;QACC;;QAEAC,WAAU;eACL,4BAAa,KAAK;;;UAGrB;;;;;;;;;;;;;;;;;;;;;;KAeG;;;;;"}
1	+ {"version":3,"file":"rate.vue_vue_type_template_id_38c42df6_lang.mjs","sources":["../../../../../../packages/components/rate/src/rate.vue?vue&type=template&id=38c42df6&lang.js"],"sourcesContent":["<template>\n <div\n :class=\"rateKls\"\n role=\"slider\"\n :aria-valuenow=\"currentValue\"\n :aria-valuetext=\"text\"\n aria-valuemin=\"0\"\n :aria-valuemax=\"max\"\n tabindex=\"0\"\n @keydown=\"handleKey\"\n >\n <span\n v-for=\"(item, key) in max\"\n :key=\"key\"\n class=\"el-rate__item\"\n :style=\"{ cursor: rateDisabled ? 'auto' : 'pointer' }\"\n @mousemove=\"setCurrentValue(item, $event)\"\n @mouseleave=\"resetCurrentValue\"\n @click=\"selectValue(item)\"\n >\n <el-icon\n :class=\"[{ hover: hoverIndex === item }]\"\n class=\"el-rate__icon\"\n :style=\"getIconStyle(item)\"\n >\n <component :is=\"iconComponents[item - 1]\" />\n <el-icon\n v-if=\"showDecimalIcon(item)\"\n :style=\"decimalStyle\"\n class=\"el-rate__icon el-rate__decimal\"\n >\n <component :is=\"decimalIconComponent\" />\n </el-icon>\n </el-icon>\n </span>\n <span\n v-if=\"showText \|\| showScore\"\n class=\"el-rate__text\"\n :style=\"{ color: textColor }\"\n >\n {{ text }}\n </span>\n </div>\n</template>\n<script lang=\"ts\">\nimport { defineComponent, inject, computed, ref, watch } from 'vue'\nimport { isObject, isArray } from '@vue/shared'\nimport { elFormKey } from '@element-plus/tokens'\nimport { hasClass } from '@element-plus/utils/dom'\nimport { EVENT_CODE } from '@element-plus/utils/aria'\n\nimport { UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'\nimport { ElIcon } from '@element-plus/components/icon'\nimport { StarFilled, Star } from '@element-plus/icons-vue'\nimport { useSize } from '@element-plus/hooks'\nimport { rateProps, rateEmits } from './rate'\nimport type { ElFormContext } from '@element-plus/tokens'\n\nfunction getValueFromMap<T>(\n value: number,\n map: Record<string, T \| { excluded?: boolean; value: T }>\n) {\n const isExcludedObject = (\n val: unknown\n ): val is { excluded?: boolean } & Record<any, unknown> => isObject(val)\n\n const matchedKeys = Object.keys(map)\n .map((key) => +key)\n .filter((key) => {\n const val = map[key]\n const excluded = isExcludedObject(val) ? val.excluded : false\n return excluded ? value < key : value <= key\n })\n .sort((a, b) => a - b)\n const matchedValue = map[matchedKeys[0]]\n return (isExcludedObject(matchedValue) && matchedValue.value) \|\| matchedValue\n}\n\nexport default defineComponent({\n name: 'ElRate',\n components: {\n ElIcon,\n StarFilled,\n Star,\n },\n props: rateProps,\n emits: rateEmits,\n\n setup(props, { emit }) {\n const elForm = inject(elFormKey, {} as ElFormContext)\n\n const rateSize = useSize()\n const currentValue = ref(props.modelValue)\n const hoverIndex = ref(-1)\n const pointerAtLeftHalf = ref(true)\n\n const prefix = 'el-rate'\n const rateKls = computed(() => [prefix, `${prefix}--${rateSize.value}`])\n\n const rateDisabled = computed(() => props.disabled \|\| elForm.disabled)\n const text = computed(() => {\n let result = ''\n if (props.showScore) {\n result = props.scoreTemplate.replace(\n /\\{\\svalue\\s\\}/,\n rateDisabled.value ? `${props.modelValue}` : `${currentValue.value}`\n )\n } else if (props.showText) {\n result = props.texts[Math.ceil(currentValue.value) - 1]\n }\n return result\n })\n const valueDecimal = computed(\n () => props.modelValue * 100 - Math.floor(props.modelValue) * 100\n )\n const colorMap = computed(() =>\n isArray(props.colors)\n ? {\n [props.lowThreshold]: props.colors[0],\n [props.highThreshold]: { value: props.colors[1], excluded: true },\n [props.max]: props.colors[2],\n }\n : props.colors\n )\n const activeColor = computed(() =>\n getValueFromMap(currentValue.value, colorMap.value)\n )\n const decimalStyle = computed(() => {\n let width = ''\n if (rateDisabled.value) {\n width = `${valueDecimal.value}%`\n } else if (props.allowHalf) {\n width = '50%'\n }\n return {\n color: activeColor.value,\n width,\n }\n })\n const componentMap = computed(() =>\n isArray(props.icons)\n ? {\n [props.lowThreshold]: props.icons[0],\n [props.highThreshold]: {\n value: props.icons[1],\n excluded: true,\n },\n [props.max]: props.icons[2],\n }\n : props.icons\n )\n const decimalIconComponent = computed(() =>\n getValueFromMap(props.modelValue, componentMap.value)\n )\n const voidComponent = computed(() =>\n rateDisabled.value ? props.disabledvoidIcon : props.voidIcon\n )\n const activeComponent = computed(() =>\n getValueFromMap(currentValue.value, componentMap.value)\n )\n const iconComponents = computed(() => {\n const result = Array(props.max)\n const threshold = currentValue.value\n result.fill(activeComponent.value, 0, threshold)\n result.fill(voidComponent.value, threshold, props.max)\n return result\n })\n\n function showDecimalIcon(item: number) {\n const showWhenDisabled =\n rateDisabled.value &&\n valueDecimal.value > 0 &&\n item - 1 < props.modelValue &&\n item > props.modelValue\n const showWhenAllowHalf =\n props.allowHalf &&\n pointerAtLeftHalf.value &&\n item - 0.5 <= currentValue.value &&\n item > currentValue.value\n return showWhenDisabled \|\| showWhenAllowHalf\n }\n\n function getIconStyle(item: number) {\n const voidColor = rateDisabled.value\n ? props.disabledVoidColor\n : props.voidColor\n return {\n color: item <= currentValue.value ? activeColor.value : voidColor,\n }\n }\n\n function selectValue(value: number) {\n if (rateDisabled.value) {\n return\n }\n if (props.allowHalf && pointerAtLeftHalf.value) {\n emit(UPDATE_MODEL_EVENT, currentValue.value)\n if (props.modelValue !== currentValue.value) {\n emit('change', currentValue.value)\n }\n } else {\n emit(UPDATE_MODEL_EVENT, value)\n if (props.modelValue !== value) {\n emit('change', value)\n }\n }\n }\n\n function handleKey(e: KeyboardEvent) {\n if (rateDisabled.value) {\n return\n }\n let _currentValue = currentValue.value\n const code = e.code\n if (code === EVENT_CODE.up \|\| code === EVENT_CODE.right) {\n if (props.allowHalf) {\n _currentValue += 0.5\n } else {\n _currentValue += 1\n }\n e.stopPropagation()\n e.preventDefault()\n } else if (code === EVENT_CODE.left \|\| code === EVENT_CODE.down) {\n if (props.allowHalf) {\n _currentValue -= 0.5\n } else {\n _currentValue -= 1\n }\n e.stopPropagation()\n e.preventDefault()\n }\n _currentValue = _currentValue < 0 ? 0 : _currentValue\n _currentValue = _currentValue > props.max ? props.max : _currentValue\n emit(UPDATE_MODEL_EVENT, _currentValue)\n emit('change', _currentValue)\n return _currentValue\n }\n\n function setCurrentValue(value: number, event: MouseEvent) {\n if (rateDisabled.value) {\n return\n }\n if (props.allowHalf) {\n let target = event.target as HTMLElement\n if (hasClass(target, 'el-rate__item')) {\n target = target.querySelector('.el-rate__icon')!\n }\n if (target.clientWidth === 0 \|\| hasClass(target, 'el-rate__decimal')) {\n target = target.parentNode as HTMLElement\n }\n pointerAtLeftHalf.value = event.offsetX * 2 <= target.clientWidth\n currentValue.value = pointerAtLeftHalf.value ? value - 0.5 : value\n } else {\n currentValue.value = value\n }\n hoverIndex.value = value\n }\n\n function resetCurrentValue() {\n if (rateDisabled.value) {\n return\n }\n if (props.allowHalf) {\n pointerAtLeftHalf.value =\n props.modelValue !== Math.floor(props.modelValue)\n }\n currentValue.value = props.modelValue\n hoverIndex.value = -1\n }\n\n watch(\n () => props.modelValue,\n (val) => {\n currentValue.value = val\n pointerAtLeftHalf.value =\n props.modelValue !== Math.floor(props.modelValue)\n }\n )\n\n if (!props.modelValue) {\n emit(UPDATE_MODEL_EVENT, 0)\n }\n\n return {\n hoverIndex,\n currentValue,\n rateDisabled,\n text,\n decimalStyle,\n decimalIconComponent,\n iconComponents,\n rateKls,\n\n showDecimalIcon,\n getIconStyle,\n selectValue,\n handleKey,\n setCurrentValue,\n resetCurrentValue,\n }\n },\n})\n</script>\n"],"names":["_openBlock","_createVNode"],"mappings":";;;;;;;;;;IAEK,uBAAO;IACR;IACC,eAAa,EAAE;IACf;IACD,iBAAc;;;aAGNA,wCAAE;;;;QAIP;QACD;QACC;;QAEAC,WAAU;eACL,4BAAa,KAAK;;;UAGrB;;;;;;;;;;;;;;;;;;;;;;KAeG;;;;;"}

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

@@ -24,9 +24,13 @@ declare const _Slider: SFCWithInstall<import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    size: {
+        type: import("vue").PropType<import("element-plus/es/utils/types").ComponentSize>;
+        validator: (val: string) => boolean;
+    };
     inputSize: {
         type: import("vue").PropType<import("element-plus/es/utils/types").ComponentSize>;
-        default: string;
+        validator: (val: string) => boolean;
     };
     showStops: {
         type: BooleanConstructor;
@@ -89,6 +93,9 @@ declare const _Slider: SFCWithInstall<import("vue").DefineComponent<{
     stops: import("vue").ComputedRef<number[]>;
     markList: import("vue").ComputedRef<import("./src/slider.type").Mark[]>;
     sliderWrapper: import("vue").Ref<import("element-plus/es/utils/types").Nullable<HTMLElement>>;
+    sliderWrapperSize: import("vue").ComputedRef<import("element-plus/es/utils/types").ComponentSize>;
+    sliderInputSize: import("vue").ComputedRef<import("element-plus/es/utils/types").ComponentSize>;
+    sliderKls: import("vue").ComputedRef<string[]>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("input" | "update:modelValue" | "change")[], "input" | "update:modelValue" | "change", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
     modelValue?: unknown;
     min?: unknown;
@@ -96,6 +103,7 @@ declare const _Slider: SFCWithInstall<import("vue").DefineComponent<{
     step?: unknown;
     showInput?: unknown;
     showInputControls?: unknown;
+    size?: unknown;
     inputSize?: unknown;
     showStops?: unknown;
     showTooltip?: unknown;
@@ -114,7 +122,6 @@ declare const _Slider: SFCWithInstall<import("vue").DefineComponent<{
     height: string;
     vertical: boolean;
     range: boolean;
-    inputSize: import("element-plus/es/utils/types").ComponentSize;
     debounce: number;
     max: number;
     min: number;
@@ -124,7 +131,9 @@ declare const _Slider: SFCWithInstall<import("vue").DefineComponent<{
     showInputControls: boolean;
     showStops: boolean;
 } & {
+    size?: import("element-plus/es/utils/types").ComponentSize | undefined;
     label?: string | undefined;
+    inputSize?: import("element-plus/es/utils/types").ComponentSize | undefined;
     tooltipClass?: string | undefined;
     formatTooltip?: ((val: number) => string | number) | undefined;
     marks?: Record<string, any> | undefined;
@@ -139,7 +148,6 @@ declare const _Slider: SFCWithInstall<import("vue").DefineComponent<{
     height: string;
     vertical: boolean;
     range: boolean;
-    inputSize: import("element-plus/es/utils/types").ComponentSize;
     debounce: number;
     max: number;
     min: number;
@@ -177,9 +185,13 @@ export declare const ElSlider: SFCWithInstall<import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    size: {
+        type: import("vue").PropType<import("element-plus/es/utils/types").ComponentSize>;
+        validator: (val: string) => boolean;
+    };
     inputSize: {
         type: import("vue").PropType<import("element-plus/es/utils/types").ComponentSize>;
-        default: string;
+        validator: (val: string) => boolean;
     };
     showStops: {
         type: BooleanConstructor;
@@ -242,6 +254,9 @@ export declare const ElSlider: SFCWithInstall<import("vue").DefineComponent<{
     stops: import("vue").ComputedRef<number[]>;
     markList: import("vue").ComputedRef<import("./src/slider.type").Mark[]>;
     sliderWrapper: import("vue").Ref<import("element-plus/es/utils/types").Nullable<HTMLElement>>;
+    sliderWrapperSize: import("vue").ComputedRef<import("element-plus/es/utils/types").ComponentSize>;
+    sliderInputSize: import("vue").ComputedRef<import("element-plus/es/utils/types").ComponentSize>;
+    sliderKls: import("vue").ComputedRef<string[]>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("input" | "update:modelValue" | "change")[], "input" | "update:modelValue" | "change", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
     modelValue?: unknown;
     min?: unknown;
@@ -249,6 +264,7 @@ export declare const ElSlider: SFCWithInstall<import("vue").DefineComponent<{
     step?: unknown;
     showInput?: unknown;
     showInputControls?: unknown;
+    size?: unknown;
     inputSize?: unknown;
     showStops?: unknown;
     showTooltip?: unknown;
@@ -267,7 +283,6 @@ export declare const ElSlider: SFCWithInstall<import("vue").DefineComponent<{
     height: string;
     vertical: boolean;
     range: boolean;
-    inputSize: import("element-plus/es/utils/types").ComponentSize;
     debounce: number;
     max: number;
     min: number;
@@ -277,7 +292,9 @@ export declare const ElSlider: SFCWithInstall<import("vue").DefineComponent<{
     showInputControls: boolean;
     showStops: boolean;
 } & {
+    size?: import("element-plus/es/utils/types").ComponentSize | undefined;
     label?: string | undefined;
+    inputSize?: import("element-plus/es/utils/types").ComponentSize | undefined;
     tooltipClass?: string | undefined;
     formatTooltip?: ((val: number) => string | number) | undefined;
     marks?: Record<string, any> | undefined;
@@ -292,7 +309,6 @@ export declare const ElSlider: SFCWithInstall<import("vue").DefineComponent<{
     height: string;
     vertical: boolean;
     range: boolean;
-    inputSize: import("element-plus/es/utils/types").ComponentSize;
     debounce: number;
     max: number;
     min: number;

package/es/components/slider/src/index.vue.d.ts CHANGED Viewed

@@ -25,9 +25,13 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    size: {
+        type: PropType<ComponentSize>;
+        validator: (val: string) => boolean;
+    };
     inputSize: {
         type: PropType<ComponentSize>;
-        default: string;
+        validator: (val: string) => boolean;
     };
     showStops: {
         type: BooleanConstructor;
@@ -90,6 +94,9 @@ declare const _default: import("vue").DefineComponent<{
     stops: import("vue").ComputedRef<number[]>;
     markList: import("vue").ComputedRef<import("./slider.type").Mark[]>;
     sliderWrapper: Ref<Nullable<HTMLElement>>;
+    sliderWrapperSize: import("vue").ComputedRef<ComponentSize>;
+    sliderInputSize: import("vue").ComputedRef<ComponentSize>;
+    sliderKls: import("vue").ComputedRef<string[]>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("input" | "update:modelValue" | "change")[], "input" | "update:modelValue" | "change", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
     modelValue?: unknown;
     min?: unknown;
@@ -97,6 +104,7 @@ declare const _default: import("vue").DefineComponent<{
     step?: unknown;
     showInput?: unknown;
     showInputControls?: unknown;
+    size?: unknown;
     inputSize?: unknown;
     showStops?: unknown;
     showTooltip?: unknown;
@@ -115,7 +123,6 @@ declare const _default: import("vue").DefineComponent<{
     height: string;
     vertical: boolean;
     range: boolean;
-    inputSize: ComponentSize;
     debounce: number;
     max: number;
     min: number;
@@ -125,7 +132,9 @@ declare const _default: import("vue").DefineComponent<{
     showInputControls: boolean;
     showStops: boolean;
 } & {
+    size?: ComponentSize | undefined;
     label?: string | undefined;
+    inputSize?: ComponentSize | undefined;
     tooltipClass?: string | undefined;
     formatTooltip?: ((val: number) => number | string) | undefined;
     marks?: Record<string, any> | undefined;
@@ -140,7 +149,6 @@ declare const _default: import("vue").DefineComponent<{
     height: string;
     vertical: boolean;
     range: boolean;
-    inputSize: ComponentSize;
     debounce: number;
     max: number;
     min: number;

package/es/components/slider/src/index.vue_vue_type_script_lang.mjs CHANGED Viewed

@@ -3,6 +3,8 @@ import { ElInputNumber } from '../../input-number/index.mjs';
 import { UPDATE_MODEL_EVENT, CHANGE_EVENT, INPUT_EVENT } from '../../../utils/constants.mjs';
 import { on, off } from '../../../utils/dom.mjs';
 import { throwError } from '../../../utils/error.mjs';
+import { isValidComponentSize } from '../../../utils/validators.mjs';
+import '../../../hooks/index.mjs';
 import './button.mjs';
 import './marker.mjs';
 import { useMarks } from './useMarks.mjs';
@@ -10,6 +12,7 @@ import { useSlide } from './useSlide.mjs';
 import { useStops } from './useStops.mjs';
 import script$1 from './button.vue_vue_type_script_lang.mjs';
 import script$2 from './marker.vue_vue_type_script_lang.mjs';
+import { useSize } from '../../../hooks/use-common-props/index.mjs';
 var script = defineComponent({
   name: "ElSlider",
@@ -43,9 +46,13 @@ var script = defineComponent({
       type: Boolean,
       default: true
     },
+    size: {
+      type: String,
+      validator: isValidComponentSize
+    },
     inputSize: {
       type: String,
-      default: "small"
+      validator: isValidComponentSize
     },
     showStops: {
       type: Boolean,
@@ -115,6 +122,15 @@ var script = defineComponent({
       setSecondValue
     } = useSlide(props, initData, emit);
     const { stops, getStopStyle } = useStops(props, initData, minValue, maxValue);
+    const sliderWrapperSize = useSize();
+    const sliderInputSize = computed(() => props.inputSize || sliderWrapperSize.value);
+    const prefix = "el-slider";
+    const sliderKls = computed(() => [
+      prefix,
+      `${prefix}--${sliderWrapperSize.value}`,
+      props.vertical ? "is-vertical" : "",
+      props.showInput ? "el-slider--with-input" : ""
+    ]);
     const markList = useMarks(props);
     useWatch(props, initData, minValue, maxValue, emit, elFormItem);
     const precision = computed(() => {
@@ -157,7 +173,10 @@ var script = defineComponent({
       setSecondValue,
       stops,
       markList,
-      sliderWrapper
+      sliderWrapper,
+      sliderWrapperSize,
+      sliderInputSize,
+      sliderKls
     };
   }
 });