vue-admin-core/lib/formily/array-tabs/src/index.js

A Component Library for Vue 3

'use strict';

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

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

elementPlus.ElTabPane.props.label = {
  default: "",
  type: Object
};
const ArrayTabs = reactiveVue.observer(
  vue.defineComponent({
    name: "ArrayTabs",
    props: ["onChange"],
    setup(props, { attrs }) {
      const fieldRef = vue$1.useField();
      const schemaRef = vue$1.useFieldSchema();
      const prefixCls = `${index.stylePrefix}-array-tabs`;
      const activeKey = vue.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 vue.h(
              "span",
              {},
              {
                default: () => [
                  vue.h(
                    elementPlus.ElBadge,
                    {
                      class: [`${prefixCls}-errors-badge`],
                      value: errors.length
                    },
                    {
                      default: () => [tab]
                    }
                  )
                ]
              }
            );
          }
          return vue.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 = vue.h(
            elementPlus.ElTabPane,
            {
              key,
              closable: index !== 0,
              name: key
            },
            {
              default: () => vue.h(
                vue$1.RecursionField,
                {
                  schema: items,
                  name: index
                },
                {}
              )
            }
          );
          IElTabPane.props.label = badgedTab(index);
          return IElTabPane;
        });
        return vue.h(
          elementPlus.ElTabs,
          {
            class: [prefixCls],
            type: "card",
            modelValue: activeKey.value,
            addable: true,
            ...attrs,
            "onUpdata:modelValue": (key) => {
              activeKey.value = key;
            },
            onEdit
          },
          {
            default: () => [renderItems()]
          }
        );
      };
    }
  })
);

exports.ArrayTabs = ArrayTabs;
exports.default = ArrayTabs;
//# sourceMappingURL=index.js.map