Rate.mjs 6.3 KB

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