checkbox-group2.mjs 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114
  1. import { defineComponent, computed, provide, toRefs, watch, openBlock, createBlock, resolveDynamicComponent, unref, normalizeClass, withCtx, renderSlot, createElementBlock, Fragment, renderList, mergeProps, nextTick } from 'vue';
  2. import { pick, isEqual, omit } from 'lodash-unified';
  3. import { checkboxGroupProps, checkboxGroupEmits, checkboxDefaultProps } from './checkbox-group.mjs';
  4. import { checkboxGroupContextKey } from './constants.mjs';
  5. import Checkbox from './checkbox2.mjs';
  6. import CheckboxButton from './checkbox-button.mjs';
  7. import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
  8. import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
  9. import { useFormDisabled } from '../../form/src/hooks/use-form-common-props.mjs';
  10. import { useFormItem, useFormItemInputId } from '../../form/src/hooks/use-form-item.mjs';
  11. import { debugWarn } from '../../../utils/error.mjs';
  12. import { UPDATE_MODEL_EVENT, CHANGE_EVENT } from '../../../constants/event.mjs';
  13. const _sfc_main = defineComponent({
  14. ...{
  15. name: "ElCheckboxGroup"
  16. },
  17. __name: "checkbox-group",
  18. props: checkboxGroupProps,
  19. emits: checkboxGroupEmits,
  20. setup(__props, { emit: __emit }) {
  21. const props = __props;
  22. const emit = __emit;
  23. const ns = useNamespace("checkbox");
  24. const checkboxDisabled = useFormDisabled();
  25. const { formItem } = useFormItem();
  26. const { inputId: groupId, isLabeledByFormItem } = useFormItemInputId(props, {
  27. formItemContext: formItem
  28. });
  29. const changeEvent = async (value) => {
  30. emit(UPDATE_MODEL_EVENT, value);
  31. await nextTick();
  32. emit(CHANGE_EVENT, value);
  33. };
  34. const modelValue = computed({
  35. get() {
  36. return props.modelValue;
  37. },
  38. set(val) {
  39. changeEvent(val);
  40. }
  41. });
  42. const aliasProps = computed(() => ({
  43. ...checkboxDefaultProps,
  44. ...props.props
  45. }));
  46. const getOptionProps = (option) => {
  47. const { label, value, disabled } = aliasProps.value;
  48. const base = {
  49. label: option[label],
  50. value: option[value],
  51. disabled: option[disabled]
  52. };
  53. return { ...omit(option, [label, value, disabled]), ...base };
  54. };
  55. const optionComponent = computed(
  56. () => props.type === "button" ? CheckboxButton : Checkbox
  57. );
  58. provide(checkboxGroupContextKey, {
  59. ...pick(toRefs(props), [
  60. "size",
  61. "min",
  62. "max",
  63. "validateEvent",
  64. "fill",
  65. "textColor"
  66. ]),
  67. disabled: checkboxDisabled,
  68. modelValue,
  69. changeEvent
  70. });
  71. watch(
  72. () => props.modelValue,
  73. (newVal, oldValue) => {
  74. if (props.validateEvent && !isEqual(newVal, oldValue)) {
  75. formItem == null ? void 0 : formItem.validate("change").catch((err) => debugWarn(err));
  76. }
  77. }
  78. );
  79. return (_ctx, _cache) => {
  80. var _a;
  81. return openBlock(), createBlock(resolveDynamicComponent(_ctx.tag), {
  82. id: unref(groupId),
  83. class: normalizeClass(unref(ns).b("group")),
  84. role: "group",
  85. "aria-label": !unref(isLabeledByFormItem) ? _ctx.ariaLabel || "checkbox-group" : void 0,
  86. "aria-labelledby": unref(isLabeledByFormItem) ? (_a = unref(formItem)) == null ? void 0 : _a.labelId : void 0
  87. }, {
  88. default: withCtx(() => [
  89. renderSlot(_ctx.$slots, "default", {}, () => [
  90. (openBlock(true), createElementBlock(
  91. Fragment,
  92. null,
  93. renderList(_ctx.options, (item, index) => {
  94. return openBlock(), createBlock(
  95. resolveDynamicComponent(optionComponent.value),
  96. mergeProps({ key: index }, { ref_for: true }, getOptionProps(item)),
  97. null,
  98. 16
  99. );
  100. }),
  101. 128
  102. ))
  103. ])
  104. ]),
  105. _: 3
  106. }, 8, ["id", "class", "aria-label", "aria-labelledby"]);
  107. };
  108. }
  109. });
  110. var CheckboxGroup = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "/home/runner/work/element-plus/element-plus/packages/components/checkbox/src/checkbox-group.vue"]]);
  111. export { CheckboxGroup as default };
  112. //# sourceMappingURL=checkbox-group2.mjs.map