You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1 line
16 KiB
1 line
16 KiB
2 years ago
|
{"version":3,"file":"rate2.mjs","sources":["../../../../../../packages/components/rate/src/rate.vue"],"sourcesContent":["<template>\n <div\n :id=\"inputId\"\n :class=\"[rateClasses, ns.is('disabled', rateDisabled)]\"\n role=\"slider\"\n :aria-label=\"!isLabeledByFormItem ? label || 'rating' : undefined\"\n :aria-labelledby=\"\n isLabeledByFormItem ? formItemContext?.labelId : undefined\n \"\n :aria-valuenow=\"currentValue\"\n :aria-valuetext=\"text || undefined\"\n aria-valuemin=\"0\"\n :aria-valuemax=\"max\"\n tabindex=\"0\"\n :style=\"rateStyles\"\n @keydown=\"handleKey\"\n >\n <span\n v-for=\"(item, key) in max\"\n :key=\"key\"\n :class=\"ns.e('item')\"\n @mousemove=\"setCurrentValue(item, $event)\"\n @mouseleave=\"resetCurrentValue\"\n @click=\"selectValue(item)\"\n >\n <el-icon\n :class=\"[\n ns.e('icon'),\n { hover: hoverIndex === item },\n ns.is('active', item <= currentValue),\n ]\"\n >\n <template v-if=\"!showDecimalIcon(item)\">\n <component :is=\"activeComponent\" v-show=\"item <= currentValue\" />\n <component :is=\"voidComponent\" v-show=\"!(item <= currentValue)\" />\n </template>\n <el-icon\n v-if=\"showDecimalIcon(item)\"\n :style=\"decimalStyle\"\n :class=\"[ns.e('icon'), ns.e('decimal')]\"\n >\n <component :is=\"decimalIconComponent\" />\n </el-icon>\n </el-icon>\n </span>\n <span v-if=\"showText || showScore\" :class=\"ns.e('text')\">\n {{ text }}\n </span>\n </div>\n</template>\n<script lang=\"ts\" setup>\nimport { computed, inject, markRaw, ref, watch } from 'vue'\nimport { EVENT_CODE, UPDATE_MODEL_EVENT } from '@element-plus/constants'\nimport { hasClass, isArray, isObject, isString } from '@element-plus/utils'\nimport {\n formContextKey,\n formItemContextKey,\n useFormItemInputId,\n useFormSize,\n} from '@element-plus/components/form'\nimport { ElIcon } from '@element-plus/components/icon'\nimport { useNamespace } from '@element-plus/hooks'\nimport { rateEmits, rateProps } from './rate'\nimport type { iconPropType } from '@element-plus/utils'\nimport type { CSSProperties, Component } from 'vue'\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\ndefineOptions({\n name: 'ElRate',\n})\n\nconst props = defineProps(rateProps)\nconst emit = defineEmits(rateEmits)\n\nconst formContext = inject(formContextKey, undefined)\nconst formItemContext = inject(formItemContextKey, undefined)\nconst rateSize = useFormSize()\nconst ns = useNamespace('rate')\nconst { inputId, isLabeledByFormItem } = useFormItemInputId(props, {\n formItemContext,\n})\n\nconst currentValue = ref(props.modelValue)\nconst hoverIndex = ref(-1)\nconst pointerAtLeftHalf = ref(true)\n\nconst rateClasses = computed(() => [ns.b(), ns.m(rateSize.value)])\nconst rateDisabled = computed(() => props.disabled || formContext?.disabled)\nconst rateStyles = computed(() => {\n return ns.cssVarBlock({\n 'void-color': props.voidColor,\n 'disabled-void-color': props.disabledVoidColor,\n 'fill-color': activeColor.value,\n }) as CSSProperties\n})\n\nconst text = computed(() => {\n let result = ''\n if (props.showScore) {\n result = props.scoreTemplate.replace(\n /\\{\\s*value\\s*\\}/,\n rateDisabled.value ? `${props.modelValue}` : `${currentValue.value}`\n )\n } else if (props.showText) {\n result
|