0185ccfc191b8ef0d455652ee0db7a154e7b96b712f91f23509006df12330ac2ddee52847b4a70ab6b2fe17cf405b8c812d4c960884e458b0b4d8aff8d54a3 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258
  1. 'use strict';
  2. Object.defineProperty(exports, '__esModule', { value: true });
  3. var vue = require('vue');
  4. var lodashUnified = require('lodash-unified');
  5. var index$1 = require('../../icon/index.js');
  6. var rate = require('./rate.js');
  7. var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
  8. var constants = require('../../form/src/constants.js');
  9. var useFormCommonProps = require('../../form/src/hooks/use-form-common-props.js');
  10. var index = require('../../../hooks/use-namespace/index.js');
  11. var useFormItem = require('../../form/src/hooks/use-form-item.js');
  12. var shared = require('@vue/shared');
  13. var event = require('../../../constants/event.js');
  14. var aria = require('../../../constants/aria.js');
  15. const __default__ = vue.defineComponent({
  16. name: "ElRate"
  17. });
  18. const _sfc_main = /* @__PURE__ */ vue.defineComponent({
  19. ...__default__,
  20. props: rate.rateProps,
  21. emits: rate.rateEmits,
  22. setup(__props, { expose, emit }) {
  23. const props = __props;
  24. function getValueFromMap(value, map) {
  25. const isExcludedObject = (val) => shared.isObject(val);
  26. const matchedKeys = Object.keys(map).map((key) => +key).filter((key) => {
  27. const val = map[key];
  28. const excluded = isExcludedObject(val) ? val.excluded : false;
  29. return excluded ? value < key : value <= key;
  30. }).sort((a, b) => a - b);
  31. const matchedValue = map[matchedKeys[0]];
  32. return isExcludedObject(matchedValue) && matchedValue.value || matchedValue;
  33. }
  34. const formContext = vue.inject(constants.formContextKey, void 0);
  35. const formItemContext = vue.inject(constants.formItemContextKey, void 0);
  36. const rateSize = useFormCommonProps.useFormSize();
  37. const ns = index.useNamespace("rate");
  38. const { inputId, isLabeledByFormItem } = useFormItem.useFormItemInputId(props, {
  39. formItemContext
  40. });
  41. const currentValue = vue.ref(props.modelValue);
  42. const hoverIndex = vue.ref(-1);
  43. const pointerAtLeftHalf = vue.ref(true);
  44. const iconRefs = vue.ref([]);
  45. const iconClientWidths = vue.computed(() => iconRefs.value.map((icon) => icon.$el.clientWidth));
  46. const rateClasses = vue.computed(() => [ns.b(), ns.m(rateSize.value)]);
  47. const rateDisabled = vue.computed(() => props.disabled || (formContext == null ? void 0 : formContext.disabled));
  48. const rateStyles = vue.computed(() => {
  49. return ns.cssVarBlock({
  50. "void-color": props.voidColor,
  51. "disabled-void-color": props.disabledVoidColor,
  52. "fill-color": activeColor.value
  53. });
  54. });
  55. const text = vue.computed(() => {
  56. let result = "";
  57. if (props.showScore) {
  58. result = props.scoreTemplate.replace(/\{\s*value\s*\}/, rateDisabled.value ? `${props.modelValue}` : `${currentValue.value}`);
  59. } else if (props.showText) {
  60. result = props.texts[Math.ceil(currentValue.value) - 1];
  61. }
  62. return result;
  63. });
  64. const valueDecimal = vue.computed(() => props.modelValue * 100 - Math.floor(props.modelValue) * 100);
  65. const colorMap = vue.computed(() => shared.isArray(props.colors) ? {
  66. [props.lowThreshold]: props.colors[0],
  67. [props.highThreshold]: { value: props.colors[1], excluded: true },
  68. [props.max]: props.colors[2]
  69. } : props.colors);
  70. const activeColor = vue.computed(() => {
  71. const color = getValueFromMap(currentValue.value, colorMap.value);
  72. return shared.isObject(color) ? "" : color;
  73. });
  74. const decimalStyle = vue.computed(() => {
  75. let width = "";
  76. if (rateDisabled.value) {
  77. width = `${valueDecimal.value}%`;
  78. } else if (props.allowHalf) {
  79. width = "50%";
  80. }
  81. return {
  82. color: activeColor.value,
  83. width
  84. };
  85. });
  86. const componentMap = vue.computed(() => {
  87. let icons = shared.isArray(props.icons) ? [...props.icons] : { ...props.icons };
  88. icons = vue.markRaw(icons);
  89. return shared.isArray(icons) ? {
  90. [props.lowThreshold]: icons[0],
  91. [props.highThreshold]: {
  92. value: icons[1],
  93. excluded: true
  94. },
  95. [props.max]: icons[2]
  96. } : icons;
  97. });
  98. const decimalIconComponent = vue.computed(() => getValueFromMap(props.modelValue, componentMap.value));
  99. const voidComponent = vue.computed(() => rateDisabled.value ? shared.isString(props.disabledVoidIcon) ? props.disabledVoidIcon : vue.markRaw(props.disabledVoidIcon) : shared.isString(props.voidIcon) ? props.voidIcon : vue.markRaw(props.voidIcon));
  100. const activeComponent = vue.computed(() => getValueFromMap(currentValue.value, componentMap.value));
  101. function showDecimalIcon(item) {
  102. const showWhenDisabled = rateDisabled.value && valueDecimal.value > 0 && item - 1 < props.modelValue && item > props.modelValue;
  103. const showWhenAllowHalf = props.allowHalf && pointerAtLeftHalf.value && item - 0.5 <= currentValue.value && item > currentValue.value;
  104. return showWhenDisabled || showWhenAllowHalf;
  105. }
  106. function emitValue(value) {
  107. if (props.clearable && value === props.modelValue) {
  108. value = 0;
  109. }
  110. emit(event.UPDATE_MODEL_EVENT, value);
  111. if (props.modelValue !== value) {
  112. emit(event.CHANGE_EVENT, value);
  113. }
  114. }
  115. function selectValue(value) {
  116. if (rateDisabled.value) {
  117. return;
  118. }
  119. if (props.allowHalf && pointerAtLeftHalf.value) {
  120. emitValue(currentValue.value);
  121. } else {
  122. emitValue(value);
  123. }
  124. }
  125. function handleKey(e) {
  126. if (rateDisabled.value) {
  127. return;
  128. }
  129. const code = e.code;
  130. const step = props.allowHalf ? 0.5 : 1;
  131. let _currentValue = currentValue.value;
  132. if (code === aria.EVENT_CODE.up || code === aria.EVENT_CODE.right) {
  133. _currentValue += step;
  134. } else if (code === aria.EVENT_CODE.left || code === aria.EVENT_CODE.down) {
  135. _currentValue -= step;
  136. }
  137. _currentValue = lodashUnified.clamp(_currentValue, 0, props.max);
  138. if (_currentValue === currentValue.value) {
  139. return;
  140. }
  141. e.stopPropagation();
  142. e.preventDefault();
  143. emit(event.UPDATE_MODEL_EVENT, _currentValue);
  144. emit(event.CHANGE_EVENT, _currentValue);
  145. return _currentValue;
  146. }
  147. function setCurrentValue(value, event) {
  148. if (rateDisabled.value) {
  149. return;
  150. }
  151. if (props.allowHalf && event) {
  152. pointerAtLeftHalf.value = event.offsetX * 2 <= iconClientWidths.value[value - 1];
  153. currentValue.value = pointerAtLeftHalf.value ? value - 0.5 : value;
  154. } else {
  155. currentValue.value = value;
  156. }
  157. hoverIndex.value = value;
  158. }
  159. function resetCurrentValue() {
  160. if (rateDisabled.value) {
  161. return;
  162. }
  163. if (props.allowHalf) {
  164. pointerAtLeftHalf.value = props.modelValue !== Math.floor(props.modelValue);
  165. }
  166. currentValue.value = props.modelValue;
  167. hoverIndex.value = -1;
  168. }
  169. vue.watch(() => props.modelValue, (val) => {
  170. currentValue.value = val;
  171. pointerAtLeftHalf.value = props.modelValue !== Math.floor(props.modelValue);
  172. });
  173. if (!props.modelValue) {
  174. emit(event.UPDATE_MODEL_EVENT, 0);
  175. }
  176. expose({
  177. setCurrentValue,
  178. resetCurrentValue
  179. });
  180. return (_ctx, _cache) => {
  181. var _a;
  182. return vue.openBlock(), vue.createElementBlock("div", {
  183. id: vue.unref(inputId),
  184. class: vue.normalizeClass([vue.unref(rateClasses), vue.unref(ns).is("disabled", vue.unref(rateDisabled))]),
  185. role: "slider",
  186. "aria-label": !vue.unref(isLabeledByFormItem) ? _ctx.ariaLabel || "rating" : void 0,
  187. "aria-labelledby": vue.unref(isLabeledByFormItem) ? (_a = vue.unref(formItemContext)) == null ? void 0 : _a.labelId : void 0,
  188. "aria-valuenow": currentValue.value,
  189. "aria-valuetext": vue.unref(text) || void 0,
  190. "aria-valuemin": "0",
  191. "aria-valuemax": _ctx.max,
  192. tabindex: "0",
  193. style: vue.normalizeStyle(vue.unref(rateStyles)),
  194. onKeydown: handleKey
  195. }, [
  196. (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.max, (item, key) => {
  197. return vue.openBlock(), vue.createElementBlock("span", {
  198. key,
  199. class: vue.normalizeClass(vue.unref(ns).e("item")),
  200. onMousemove: ($event) => setCurrentValue(item, $event),
  201. onMouseleave: resetCurrentValue,
  202. onClick: ($event) => selectValue(item)
  203. }, [
  204. vue.createVNode(vue.unref(index$1.ElIcon), {
  205. ref_for: true,
  206. ref_key: "iconRefs",
  207. ref: iconRefs,
  208. class: vue.normalizeClass([
  209. vue.unref(ns).e("icon"),
  210. { hover: hoverIndex.value === item },
  211. vue.unref(ns).is("active", item <= currentValue.value),
  212. vue.unref(ns).is("focus-visible", item === Math.ceil(currentValue.value || 1))
  213. ])
  214. }, {
  215. default: vue.withCtx(() => [
  216. vue.withDirectives((vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(activeComponent)), null, null, 512)), [
  217. [vue.vShow, !showDecimalIcon(item) && item <= currentValue.value]
  218. ]),
  219. vue.withDirectives((vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(voidComponent)), null, null, 512)), [
  220. [vue.vShow, !showDecimalIcon(item) && item > currentValue.value]
  221. ]),
  222. vue.withDirectives((vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(voidComponent)), {
  223. class: vue.normalizeClass([vue.unref(ns).em("decimal", "box")])
  224. }, null, 8, ["class"])), [
  225. [vue.vShow, showDecimalIcon(item)]
  226. ]),
  227. vue.withDirectives(vue.createVNode(vue.unref(index$1.ElIcon), {
  228. style: vue.normalizeStyle(vue.unref(decimalStyle)),
  229. class: vue.normalizeClass([vue.unref(ns).e("icon"), vue.unref(ns).e("decimal")])
  230. }, {
  231. default: vue.withCtx(() => [
  232. (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(decimalIconComponent))))
  233. ]),
  234. _: 2
  235. }, 1032, ["style", "class"]), [
  236. [vue.vShow, showDecimalIcon(item)]
  237. ])
  238. ]),
  239. _: 2
  240. }, 1032, ["class"])
  241. ], 42, ["onMousemove", "onClick"]);
  242. }), 128)),
  243. _ctx.showText || _ctx.showScore ? (vue.openBlock(), vue.createElementBlock("span", {
  244. key: 0,
  245. class: vue.normalizeClass(vue.unref(ns).e("text")),
  246. style: vue.normalizeStyle({ color: _ctx.textColor })
  247. }, vue.toDisplayString(vue.unref(text)), 7)) : vue.createCommentVNode("v-if", true)
  248. ], 46, ["id", "aria-label", "aria-labelledby", "aria-valuenow", "aria-valuetext", "aria-valuemax"]);
  249. };
  250. }
  251. });
  252. var Rate = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["__file", "rate.vue"]]);
  253. exports["default"] = Rate;
  254. //# sourceMappingURL=rate2.js.map