Rate.mjs 6.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224
  1. import { computed, defineComponent, ref, createVNode as _createVNode } from "vue";
  2. import { addUnit, truthProp, numericProp, preventDefault, makeStringProp, makeNumberProp, makeNumericProp, createNamespace } from "../utils/index.mjs";
  3. import { useRect, useCustomFieldValue, useEventListener } from "@vant/use";
  4. import { useRefs } from "../composables/use-refs.mjs";
  5. import { useTouch } from "../composables/use-touch.mjs";
  6. import { Icon } from "../icon/index.mjs";
  7. const [name, bem] = createNamespace("rate");
  8. function getRateStatus(value, index, allowHalf, readonly) {
  9. if (value >= index) {
  10. return {
  11. status: "full",
  12. value: 1
  13. };
  14. }
  15. if (value + 0.5 >= index && allowHalf && !readonly) {
  16. return {
  17. status: "half",
  18. value: 0.5
  19. };
  20. }
  21. if (value + 1 >= index && allowHalf && readonly) {
  22. const cardinal = 10 ** 10;
  23. return {
  24. status: "half",
  25. value: Math.round((value - index + 1) * cardinal) / cardinal
  26. };
  27. }
  28. return {
  29. status: "void",
  30. value: 0
  31. };
  32. }
  33. const rateProps = {
  34. size: numericProp,
  35. icon: makeStringProp("star"),
  36. color: String,
  37. count: makeNumericProp(5),
  38. gutter: numericProp,
  39. clearable: Boolean,
  40. readonly: Boolean,
  41. disabled: Boolean,
  42. voidIcon: makeStringProp("star-o"),
  43. allowHalf: Boolean,
  44. voidColor: String,
  45. touchable: truthProp,
  46. iconPrefix: String,
  47. modelValue: makeNumberProp(0),
  48. disabledColor: String
  49. };
  50. var stdin_default = defineComponent({
  51. name,
  52. props: rateProps,
  53. emits: ["change", "update:modelValue"],
  54. setup(props, {
  55. emit
  56. }) {
  57. const touch = useTouch();
  58. const [itemRefs, setItemRefs] = useRefs();
  59. const groupRef = ref();
  60. const unselectable = computed(() => props.readonly || props.disabled);
  61. const untouchable = computed(() => unselectable.value || !props.touchable);
  62. const list = computed(() => Array(+props.count).fill("").map((_, i) => getRateStatus(props.modelValue, i + 1, props.allowHalf, props.readonly)));
  63. let ranges;
  64. let groupRefRect;
  65. let minRectTop = Number.MAX_SAFE_INTEGER;
  66. let maxRectTop = Number.MIN_SAFE_INTEGER;
  67. const updateRanges = () => {
  68. groupRefRect = useRect(groupRef);
  69. const rects = itemRefs.value.map(useRect);
  70. ranges = [];
  71. rects.forEach((rect, index) => {
  72. minRectTop = Math.min(rect.top, minRectTop);
  73. maxRectTop = Math.max(rect.top, maxRectTop);
  74. if (props.allowHalf) {
  75. ranges.push({
  76. score: index + 0.5,
  77. left: rect.left,
  78. top: rect.top,
  79. height: rect.height
  80. }, {
  81. score: index + 1,
  82. left: rect.left + rect.width / 2,
  83. top: rect.top,
  84. height: rect.height
  85. });
  86. } else {
  87. ranges.push({
  88. score: index + 1,
  89. left: rect.left,
  90. top: rect.top,
  91. height: rect.height
  92. });
  93. }
  94. });
  95. };
  96. const getScoreByPosition = (x, y) => {
  97. for (let i = ranges.length - 1; i > 0; i--) {
  98. if (y >= groupRefRect.top && y <= groupRefRect.bottom) {
  99. if (x > ranges[i].left && y >= ranges[i].top && y <= ranges[i].top + ranges[i].height) {
  100. return ranges[i].score;
  101. }
  102. } else {
  103. const curTop = y < groupRefRect.top ? minRectTop : maxRectTop;
  104. if (x > ranges[i].left && ranges[i].top === curTop) {
  105. return ranges[i].score;
  106. }
  107. }
  108. }
  109. return props.allowHalf ? 0.5 : 1;
  110. };
  111. const select = (value) => {
  112. if (unselectable.value || value === props.modelValue) return;
  113. emit("update:modelValue", value);
  114. emit("change", value);
  115. };
  116. const onTouchStart = (event) => {
  117. if (untouchable.value) {
  118. return;
  119. }
  120. touch.start(event);
  121. updateRanges();
  122. };
  123. const onTouchMove = (event) => {
  124. if (untouchable.value) {
  125. return;
  126. }
  127. touch.move(event);
  128. if (touch.isHorizontal() && !touch.isTap.value) {
  129. const {
  130. clientX,
  131. clientY
  132. } = event.touches[0];
  133. preventDefault(event);
  134. select(getScoreByPosition(clientX, clientY));
  135. }
  136. };
  137. const renderStar = (item, index) => {
  138. const {
  139. icon,
  140. size,
  141. color,
  142. count,
  143. gutter,
  144. voidIcon,
  145. disabled,
  146. voidColor,
  147. allowHalf,
  148. iconPrefix,
  149. disabledColor
  150. } = props;
  151. const score = index + 1;
  152. const isFull = item.status === "full";
  153. const isVoid = item.status === "void";
  154. const renderHalf = allowHalf && item.value > 0 && item.value < 1;
  155. let style;
  156. if (gutter && score !== +count) {
  157. style = {
  158. paddingRight: addUnit(gutter)
  159. };
  160. }
  161. const onClickItem = (event) => {
  162. updateRanges();
  163. let value = allowHalf ? getScoreByPosition(event.clientX, event.clientY) : score;
  164. if (props.clearable && touch.isTap.value && value === props.modelValue) {
  165. value = 0;
  166. }
  167. select(value);
  168. };
  169. return _createVNode("div", {
  170. "key": index,
  171. "ref": setItemRefs(index),
  172. "role": "radio",
  173. "style": style,
  174. "class": bem("item"),
  175. "tabindex": disabled ? void 0 : 0,
  176. "aria-setsize": count,
  177. "aria-posinset": score,
  178. "aria-checked": !isVoid,
  179. "onClick": onClickItem
  180. }, [_createVNode(Icon, {
  181. "size": size,
  182. "name": isFull ? icon : voidIcon,
  183. "class": bem("icon", {
  184. disabled,
  185. full: isFull
  186. }),
  187. "color": disabled ? disabledColor : isFull ? color : voidColor,
  188. "classPrefix": iconPrefix
  189. }, null), renderHalf && _createVNode(Icon, {
  190. "size": size,
  191. "style": {
  192. width: item.value + "em"
  193. },
  194. "name": isVoid ? voidIcon : icon,
  195. "class": bem("icon", ["half", {
  196. disabled,
  197. full: !isVoid
  198. }]),
  199. "color": disabled ? disabledColor : isVoid ? voidColor : color,
  200. "classPrefix": iconPrefix
  201. }, null)]);
  202. };
  203. useCustomFieldValue(() => props.modelValue);
  204. useEventListener("touchmove", onTouchMove, {
  205. target: groupRef
  206. });
  207. return () => _createVNode("div", {
  208. "ref": groupRef,
  209. "role": "radiogroup",
  210. "class": bem({
  211. readonly: props.readonly,
  212. disabled: props.disabled
  213. }),
  214. "tabindex": props.disabled ? void 0 : 0,
  215. "aria-disabled": props.disabled,
  216. "aria-readonly": props.readonly,
  217. "onTouchstartPassive": onTouchStart
  218. }, [list.value.map(renderStar)]);
  219. }
  220. });
  221. export {
  222. stdin_default as default,
  223. rateProps
  224. };