Star.js 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122
  1. import { createVNode as _createVNode } from "vue";
  2. import { defineComponent, computed } from 'vue';
  3. import PropTypes from '../_util/vue-types';
  4. export const starProps = {
  5. value: Number,
  6. index: Number,
  7. prefixCls: String,
  8. allowHalf: {
  9. type: Boolean,
  10. default: undefined
  11. },
  12. disabled: {
  13. type: Boolean,
  14. default: undefined
  15. },
  16. character: PropTypes.any,
  17. characterRender: Function,
  18. focused: {
  19. type: Boolean,
  20. default: undefined
  21. },
  22. count: Number,
  23. onClick: Function,
  24. onHover: Function
  25. };
  26. export default defineComponent({
  27. compatConfig: {
  28. MODE: 3
  29. },
  30. name: 'Star',
  31. inheritAttrs: false,
  32. props: starProps,
  33. emits: ['hover', 'click'],
  34. setup(props, _ref) {
  35. let {
  36. emit
  37. } = _ref;
  38. const onHover = e => {
  39. const {
  40. index
  41. } = props;
  42. emit('hover', e, index);
  43. };
  44. const onClick = e => {
  45. const {
  46. index
  47. } = props;
  48. emit('click', e, index);
  49. };
  50. const onKeyDown = e => {
  51. const {
  52. index
  53. } = props;
  54. if (e.keyCode === 13) {
  55. emit('click', e, index);
  56. }
  57. };
  58. const cls = computed(() => {
  59. const {
  60. prefixCls,
  61. index,
  62. value,
  63. allowHalf,
  64. focused
  65. } = props;
  66. const starValue = index + 1;
  67. let className = prefixCls;
  68. if (value === 0 && index === 0 && focused) {
  69. className += ` ${prefixCls}-focused`;
  70. } else if (allowHalf && value + 0.5 >= starValue && value < starValue) {
  71. className += ` ${prefixCls}-half ${prefixCls}-active`;
  72. if (focused) {
  73. className += ` ${prefixCls}-focused`;
  74. }
  75. } else {
  76. className += starValue <= value ? ` ${prefixCls}-full` : ` ${prefixCls}-zero`;
  77. if (starValue === value && focused) {
  78. className += ` ${prefixCls}-focused`;
  79. }
  80. }
  81. return className;
  82. });
  83. return () => {
  84. const {
  85. disabled,
  86. prefixCls,
  87. characterRender,
  88. character,
  89. index,
  90. count,
  91. value
  92. } = props;
  93. const characterNode = typeof character === 'function' ? character({
  94. disabled,
  95. prefixCls,
  96. index,
  97. count,
  98. value
  99. }) : character;
  100. let star = _createVNode("li", {
  101. "class": cls.value
  102. }, [_createVNode("div", {
  103. "onClick": disabled ? null : onClick,
  104. "onKeydown": disabled ? null : onKeyDown,
  105. "onMousemove": disabled ? null : onHover,
  106. "role": "radio",
  107. "aria-checked": value > index ? 'true' : 'false',
  108. "aria-posinset": index + 1,
  109. "aria-setsize": count,
  110. "tabindex": disabled ? -1 : 0
  111. }, [_createVNode("div", {
  112. "class": `${prefixCls}-first`
  113. }, [characterNode]), _createVNode("div", {
  114. "class": `${prefixCls}-second`
  115. }, [characterNode])])]);
  116. if (characterRender) {
  117. star = characterRender(star, props);
  118. }
  119. return star;
  120. };
  121. }
  122. });