vue-admin-core/lib/formily/form-collapse/src/index.js

A Component Library for Vue 3

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var reactive = require('@formily/reactive');
var vue = require('vue');
var vue$1 = require('@formily/vue');
var reactiveVue = require('@formily/reactive-vue');
var elementPlus = require('element-plus');
var shared = require('@formily/shared');
require('../../__builtins__/index.js');
var index = require('../../__builtins__/configs/index.js');
var utils = require('../../__builtins__/shared/utils.js');

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 = reactive.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 = shared.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 = reactiveVue.observer(
  vue.defineComponent({
    inheritAttrs: false,
    props: {
      formCollapse: { type: Object },
      activeKey: {
        type: [String, Number]
      }
    },
    emits: ["input"],
    setup(props, { attrs, emit }) {
      const field = vue$1.useField();
      const schema = vue$1.useFieldSchema();
      const prefixCls = `${index.stylePrefix}-form-collapse`;
      const formCollapseRef = vue.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 vue$1.h(
            elementPlus.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 vue$1.h(
          elementPlus.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 vue$1.h(
                  elementPlus.ElCollapseItem,
                  {
                    key,
                    ...props2,
                    name
                  },
                  {
                    default: () => vue$1.h(vue$1.RecursionField, { schema: schema2, name }, {}),
                    title: () => vue$1.h("span", {}, { default: () => [badgedHeader(name, props2)] })
                  }
                );
              });
            }
          }
        );
      };
    }
  })
);
const FormCollapseItem = vue.defineComponent({
  name: "FFormCollapseItem",
  inheritAttrs: false,
  setup(_props, { slots }) {
    return () => vue$1.h(vue$1.Fragment, {}, slots);
  }
});
const composeFormCollapse = utils.composeExport(FormCollapse, {
  Item: FormCollapseItem,
  createFormCollapse
});

exports.FormCollapse = composeFormCollapse;
exports.FormCollapseItem = FormCollapseItem;
exports.default = composeFormCollapse;
//# sourceMappingURL=index.js.map