Star.js 3.2 KB

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