Checker.mjs 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142
  1. import { ref, computed, defineComponent, createVNode as _createVNode } from "vue";
  2. import { extend, addUnit, truthProp, numericProp, unknownProp, makeRequiredProp } from "../utils/index.mjs";
  3. import { Icon } from "../icon/index.mjs";
  4. const checkerProps = {
  5. name: unknownProp,
  6. disabled: Boolean,
  7. iconSize: numericProp,
  8. modelValue: unknownProp,
  9. checkedColor: String,
  10. labelPosition: String,
  11. labelDisabled: Boolean
  12. };
  13. var stdin_default = defineComponent({
  14. props: extend({}, checkerProps, {
  15. bem: makeRequiredProp(Function),
  16. role: String,
  17. shape: String,
  18. parent: Object,
  19. checked: Boolean,
  20. bindGroup: truthProp,
  21. indeterminate: {
  22. type: Boolean,
  23. default: null
  24. }
  25. }),
  26. emits: ["click", "toggle"],
  27. setup(props, {
  28. emit,
  29. slots
  30. }) {
  31. const iconRef = ref();
  32. const getParentProp = (name) => {
  33. if (props.parent && props.bindGroup) {
  34. return props.parent.props[name];
  35. }
  36. };
  37. const disabled = computed(() => {
  38. if (props.parent && props.bindGroup) {
  39. const disabled2 = getParentProp("disabled") || props.disabled;
  40. if (props.role === "checkbox") {
  41. const checkedCount = getParentProp("modelValue").length;
  42. const max = getParentProp("max");
  43. const overlimit = max && checkedCount >= +max;
  44. return disabled2 || overlimit && !props.checked;
  45. }
  46. return disabled2;
  47. }
  48. return props.disabled;
  49. });
  50. const direction = computed(() => getParentProp("direction"));
  51. const iconStyle = computed(() => {
  52. const checkedColor = props.checkedColor || getParentProp("checkedColor");
  53. if (checkedColor && props.checked && !disabled.value) {
  54. return {
  55. borderColor: checkedColor,
  56. backgroundColor: checkedColor
  57. };
  58. }
  59. });
  60. const shape = computed(() => {
  61. return props.shape || getParentProp("shape") || "round";
  62. });
  63. const onClick = (event) => {
  64. const {
  65. target
  66. } = event;
  67. const icon = iconRef.value;
  68. const iconClicked = icon === target || (icon == null ? void 0 : icon.contains(target));
  69. if (!disabled.value && (iconClicked || !props.labelDisabled)) {
  70. emit("toggle");
  71. }
  72. emit("click", event);
  73. };
  74. const renderIcon = () => {
  75. var _a, _b;
  76. const {
  77. bem,
  78. checked,
  79. indeterminate
  80. } = props;
  81. const iconSize = props.iconSize || getParentProp("iconSize");
  82. return _createVNode("div", {
  83. "ref": iconRef,
  84. "class": bem("icon", [shape.value, {
  85. disabled: disabled.value,
  86. checked,
  87. indeterminate
  88. }]),
  89. "style": shape.value !== "dot" ? {
  90. fontSize: addUnit(iconSize)
  91. } : {
  92. width: addUnit(iconSize),
  93. height: addUnit(iconSize),
  94. borderColor: (_a = iconStyle.value) == null ? void 0 : _a.borderColor
  95. }
  96. }, [slots.icon ? slots.icon({
  97. checked,
  98. disabled: disabled.value
  99. }) : shape.value !== "dot" ? _createVNode(Icon, {
  100. "name": indeterminate ? "minus" : "success",
  101. "style": iconStyle.value
  102. }, null) : _createVNode("div", {
  103. "class": bem("icon--dot__icon"),
  104. "style": {
  105. backgroundColor: (_b = iconStyle.value) == null ? void 0 : _b.backgroundColor
  106. }
  107. }, null)]);
  108. };
  109. const renderLabel = () => {
  110. const {
  111. checked
  112. } = props;
  113. if (slots.default) {
  114. return _createVNode("span", {
  115. "class": props.bem("label", [props.labelPosition, {
  116. disabled: disabled.value
  117. }])
  118. }, [slots.default({
  119. checked,
  120. disabled: disabled.value
  121. })]);
  122. }
  123. };
  124. return () => {
  125. const nodes = props.labelPosition === "left" ? [renderLabel(), renderIcon()] : [renderIcon(), renderLabel()];
  126. return _createVNode("div", {
  127. "role": props.role,
  128. "class": props.bem([{
  129. disabled: disabled.value,
  130. "label-disabled": props.labelDisabled
  131. }, direction.value]),
  132. "tabindex": disabled.value ? void 0 : 0,
  133. "aria-checked": props.checked,
  134. "onClick": onClick
  135. }, [nodes]);
  136. };
  137. }
  138. });
  139. export {
  140. checkerProps,
  141. stdin_default as default
  142. };