Checker.mjs 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107
  1. import { createVNode as _createVNode } from "vue";
  2. import { ref, computed, defineComponent } from "vue";
  3. import { extend, addUnit, truthProp, numericProp, unknownProp, makeStringProp, makeRequiredProp } from "../utils/index.mjs";
  4. import { Icon } from "../icon/index.mjs";
  5. const checkerProps = {
  6. name: unknownProp,
  7. shape: makeStringProp("round"),
  8. disabled: Boolean,
  9. iconSize: numericProp,
  10. modelValue: unknownProp,
  11. checkedColor: String,
  12. labelPosition: String,
  13. labelDisabled: Boolean
  14. };
  15. var stdin_default = defineComponent({
  16. props: extend({}, checkerProps, {
  17. bem: makeRequiredProp(Function),
  18. role: String,
  19. parent: Object,
  20. checked: Boolean,
  21. bindGroup: truthProp
  22. }),
  23. emits: ["click", "toggle"],
  24. setup(props, {
  25. emit,
  26. slots
  27. }) {
  28. const iconRef = ref();
  29. const getParentProp = (name) => {
  30. if (props.parent && props.bindGroup) {
  31. return props.parent.props[name];
  32. }
  33. };
  34. const disabled = computed(() => getParentProp("disabled") || props.disabled);
  35. const direction = computed(() => getParentProp("direction"));
  36. const iconStyle = computed(() => {
  37. const checkedColor = props.checkedColor || getParentProp("checkedColor");
  38. if (checkedColor && props.checked && !disabled.value) {
  39. return {
  40. borderColor: checkedColor,
  41. backgroundColor: checkedColor
  42. };
  43. }
  44. });
  45. const onClick = (event) => {
  46. const {
  47. target
  48. } = event;
  49. const icon = iconRef.value;
  50. const iconClicked = icon === target || (icon == null ? void 0 : icon.contains(target));
  51. if (!disabled.value && (iconClicked || !props.labelDisabled)) {
  52. emit("toggle");
  53. }
  54. emit("click", event);
  55. };
  56. const renderIcon = () => {
  57. const {
  58. bem,
  59. shape,
  60. checked
  61. } = props;
  62. const iconSize = props.iconSize || getParentProp("iconSize");
  63. return _createVNode("div", {
  64. "ref": iconRef,
  65. "class": bem("icon", [shape, {
  66. disabled: disabled.value,
  67. checked
  68. }]),
  69. "style": {
  70. fontSize: addUnit(iconSize)
  71. }
  72. }, [slots.icon ? slots.icon({
  73. checked,
  74. disabled: disabled.value
  75. }) : _createVNode(Icon, {
  76. "name": "success",
  77. "style": iconStyle.value
  78. }, null)]);
  79. };
  80. const renderLabel = () => {
  81. if (slots.default) {
  82. return _createVNode("span", {
  83. "class": props.bem("label", [props.labelPosition, {
  84. disabled: disabled.value
  85. }])
  86. }, [slots.default()]);
  87. }
  88. };
  89. return () => {
  90. const nodes = props.labelPosition === "left" ? [renderLabel(), renderIcon()] : [renderIcon(), renderLabel()];
  91. return _createVNode("div", {
  92. "role": props.role,
  93. "class": props.bem([{
  94. disabled: disabled.value,
  95. "label-disabled": props.labelDisabled
  96. }, direction.value]),
  97. "tabindex": disabled.value ? void 0 : 0,
  98. "aria-checked": props.checked,
  99. "onClick": onClick
  100. }, [nodes]);
  101. };
  102. }
  103. });
  104. export {
  105. checkerProps,
  106. stdin_default as default
  107. };