b497cbc15d104cbb479aab5da6ae8e13480229219ac65b81d116ebf51da94eca43af5af92ae44135898669c549b80148b56befa180563cbd8245a3b990dfba 3.4 KB

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