vue-admin-core/es/formily/form-collapse/src/index.mjs

A Component Library for Vue 3

import { model } from '@formily/reactive';
import { defineComponent, computed } from 'vue';
import { useField, useFieldSchema, h, RecursionField, Fragment } from '@formily/vue';
import { observer } from '@formily/reactive-vue';
import { ElBadge, ElCollapse, ElCollapseItem } from 'element-plus';
import { toArr } from '@formily/shared';
import '../../__builtins__/index.mjs';
import { stylePrefix } from '../../__builtins__/configs/index.mjs';
import { composeExport } from '../../__builtins__/shared/utils.mjs';

const usePanels = (collapseField, schema) => {
  const panels = [];
  schema.mapProperties((schema2, name) => {
    var _a, _b;
    const field = collapseField.query(collapseField.address.concat(name)).take();
    if ((field == null ? void 0 : field.display) === "none" || (field == null ? void 0 : field.display) === "hidden")
      return;
    if (((_a = schema2["x-component"]) == null ? void 0 : _a.indexOf("FormCollapse.Item")) > -1) {
      panels.push({
        name,
        props: {
          ...schema2 == null ? void 0 : schema2["x-component-props"],
          key: ((_b = schema2 == null ? void 0 : schema2["x-component-props"]) == null ? void 0 : _b.key) || name
        },
        schema: schema2
      });
    }
  });
  return panels;
};
const createFormCollapse = (defaultActiveKeys) => {
  const formCollapse = model({
    activeKeys: defaultActiveKeys,
    setActiveKeys(keys) {
      formCollapse.activeKeys = keys;
    },
    hasActiveKey(key) {
      if (Array.isArray(formCollapse.activeKeys)) {
        if (formCollapse.activeKeys.includes(key)) {
          return true;
        }
      } else if (formCollapse.activeKeys == key) {
        return true;
      }
      return false;
    },
    addActiveKey(key) {
      if (formCollapse.hasActiveKey(key))
        return;
      formCollapse.activeKeys = toArr(formCollapse.activeKeys).concat(key);
    },
    removeActiveKey(key) {
      if (Array.isArray(formCollapse.activeKeys)) {
        formCollapse.activeKeys = formCollapse.activeKeys.filter((item) => item != key);
      } else {
        formCollapse.activeKeys = "";
      }
    },
    toggleActiveKey(key) {
      if (formCollapse.hasActiveKey(key)) {
        formCollapse.removeActiveKey(key);
      } else {
        formCollapse.addActiveKey(key);
      }
    }
  });
  return formCollapse;
};
const FormCollapse = observer(
  defineComponent({
    inheritAttrs: false,
    props: {
      formCollapse: { type: Object },
      activeKey: {
        type: [String, Number]
      }
    },
    emits: ["input"],
    setup(props, { attrs, emit }) {
      const field = useField();
      const schema = useFieldSchema();
      const prefixCls = `${stylePrefix}-form-collapse`;
      const formCollapseRef = computed(() => {
        var _a;
        return (_a = props.formCollapse) != null ? _a : createFormCollapse();
      });
      const takeActiveKeys = (panels) => {
        var _a, _b, _c;
        if (props.activeKey)
          return props.activeKey;
        if ((_a = formCollapseRef.value) == null ? void 0 : _a.activeKeys)
          return (_b = formCollapseRef.value) == null ? void 0 : _b.activeKeys;
        if (attrs.accordion)
          return (_c = panels[0]) == null ? void 0 : _c.name;
        return panels.map((item) => item.name);
      };
      const badgedHeader = (key, props2) => {
        const errors = field.value.form.queryFeedbacks({
          type: "error",
          address: `${field.value.address.concat(key)}.*`
        });
        if (errors.length > 0) {
          return h(
            ElBadge,
            {
              class: [`${prefixCls}-errors-badge`],
              value: errors.length
            },
            { default: () => props2.title }
          );
        }
        return props2.title;
      };
      return () => {
        const panels = usePanels(field.value, schema.value);
        const activeKey = takeActiveKeys(panels);
        return h(
          ElCollapse,
          {
            class: prefixCls,
            modelValue: activeKey,
            onChange: (key) => {
              emit("input", key);
              formCollapseRef.value.setActiveKeys(key);
            }
          },
          {
            default: () => {
              return panels.map(({ props: props2, schema: schema2, name }, key) => {
                return h(
                  ElCollapseItem,
                  {
                    key,
                    ...props2,
                    name
                  },
                  {
                    default: () => h(RecursionField, { schema: schema2, name }, {}),
                    title: () => h("span", {}, { default: () => [badgedHeader(name, props2)] })
                  }
                );
              });
            }
          }
        );
      };
    }
  })
);
const FormCollapseItem = defineComponent({
  name: "FFormCollapseItem",
  inheritAttrs: false,
  setup(_props, { slots }) {
    return () => h(Fragment, {}, slots);
  }
});
const composeFormCollapse = composeExport(FormCollapse, {
  Item: FormCollapseItem,
  createFormCollapse
});

export { composeFormCollapse as FormCollapse, FormCollapseItem, composeFormCollapse as default };
//# sourceMappingURL=index.mjs.map