vue-admin-core/es/formily/array-tabs/src/index.mjs

A Component Library for Vue 3

import { defineComponent, ref, h } from 'vue';
import { observer } from '@formily/reactive-vue';
import { useField, useFieldSchema, RecursionField } from '@formily/vue';
import { ElTabPane, ElBadge, ElTabs } from 'element-plus';
import { stylePrefix } from '../../__builtins__/configs/index.mjs';

ElTabPane.props.label = {
  default: "",
  type: Object
};
const ArrayTabs = observer(
  defineComponent({
    name: "ArrayTabs",
    props: ["onChange"],
    setup(props, { attrs }) {
      const fieldRef = useField();
      const schemaRef = useFieldSchema();
      const prefixCls = `${stylePrefix}-array-tabs`;
      const activeKey = ref("tab-0");
      return () => {
        const field = fieldRef.value;
        const schema = schemaRef.value;
        const value = Array.isArray(field.value) ? field.value : [];
        const dataSource = (value == null ? void 0 : value.length) ? value : [{}];
        const onEdit = (targetKey, type) => {
          var _a, _b, _c;
          if (type == "add") {
            const id = dataSource.length;
            if ((_a = field == null ? void 0 : field.value) == null ? void 0 : _a.length) {
              field.push(null);
            } else {
              field.push(null, null);
            }
            activeKey.value = `tab-${id}`;
          } else if (type == "remove") {
            const index = (_b = targetKey.match(/-(\d+)/)) == null ? void 0 : _b[1];
            field.remove(Number(index));
            if (activeKey.value === targetKey) {
              activeKey.value = `tab-${index - 1}`;
            }
          }
          !((_c = attrs == null ? void 0 : attrs["tab-remove"]) == null ? void 0 : _c.call(attrs, targetKey, type));
        };
        const badgedTab = (index) => {
          const tab = `${field.title || "Untitled"} ${index + 1}`;
          const path = field.address.concat(index);
          const errors = field.form.queryFeedbacks({
            type: "error",
            address: `${path}.**`
          });
          if (errors.length) {
            return h(
              "span",
              {},
              {
                default: () => [
                  h(
                    ElBadge,
                    {
                      class: [`${prefixCls}-errors-badge`],
                      value: errors.length
                    },
                    {
                      default: () => [tab]
                    }
                  )
                ]
              }
            );
          }
          return h(
            "span",
            {},
            {
              default: () => [tab]
            }
          );
        };
        const renderItems = () => dataSource == null ? void 0 : dataSource.map((item, index) => {
          const items = Array.isArray(schema.items) ? schema.items[index] : schema.items;
          const key = `tab-${index}`;
          const IElTabPane = h(
            ElTabPane,
            {
              key,
              closable: index !== 0,
              name: key
            },
            {
              default: () => h(
                RecursionField,
                {
                  schema: items,
                  name: index
                },
                {}
              )
            }
          );
          IElTabPane.props.label = badgedTab(index);
          return IElTabPane;
        });
        return h(
          ElTabs,
          {
            class: [prefixCls],
            type: "card",
            modelValue: activeKey.value,
            addable: true,
            ...attrs,
            "onUpdata:modelValue": (key) => {
              activeKey.value = key;
            },
            onEdit
          },
          {
            default: () => [renderItems()]
          }
        );
      };
    }
  })
);

export { ArrayTabs, ArrayTabs as default };
//# sourceMappingURL=index.mjs.map