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

A Component Library for Vue 3

'use strict';

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

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

elementPlus.ElTabPane.props.label = {
  default: "",
  type: Object
};
const useTabs = () => {
  const tabsField = vue.useField();
  const schema = vue.useFieldSchema();
  const tabs = vue$1.reactive([]);
  schema.value.mapProperties((schema2, name) => {
    var _a, _b;
    const field = tabsField.value.query(tabsField.value.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("TabPane")) > -1) {
      tabs.push({
        name,
        props: {
          name: ((_b = schema2 == null ? void 0 : schema2["x-component-props"]) == null ? void 0 : _b.name) || name,
          ...schema2 == null ? void 0 : schema2["x-component-props"]
        },
        schema: schema2
      });
    }
  });
  return tabs;
};
const createFormTab = (defaultActiveKey) => {
  const formTab = reactive.model({
    activeKey: defaultActiveKey,
    setActiveKey(key) {
      formTab.activeKey = key;
    }
  });
  return formTab;
};
const FormTab = reactiveVue.observer(vue$1.defineComponent({
  inheritAttrs: false,
  props: {
    formTab: {
      type: Object
    },
    value: {
      type: String
    }
  },
  emits: ["input"],
  setup(props, {
    attrs,
    emit
  }) {
    const field = vue.useField();
    const prefixCls = `${index.stylePrefix}-form-tab`;
    const formTabRef = vue$1.computed(() => {
      var _a;
      return (_a = props.formTab) != null ? _a : createFormTab();
    });
    const takeActiveKey = (tabs) => {
      var _a, _b;
      return (props == null ? void 0 : props.value) || ((_a = formTabRef.value) == null ? void 0 : _a.activeKey) || ((_b = tabs == null ? void 0 : tabs[0]) == null ? void 0 : _b.name);
    };
    const badgedHeader = (key, props2) => {
      const errors = field.value.form.queryFeedbacks({
        type: "error",
        address: `${field.value.address.concat(key)}.*`
      });
      if (errors.length) {
        return vue.h(elementPlus.ElBadge, {
          class: [`${prefixCls}-errors-badge`],
          value: errors.length
        }, {
          default: () => props2.label
        });
      }
      return props2.label;
    };
    return () => {
      const tabs = useTabs();
      const activeKey = takeActiveKey(tabs);
      return vue.h(elementPlus.ElTabs, {
        ...attrs,
        class: [prefixCls],
        modelValue: activeKey,
        onTabChange: (key) => {
          var _a, _b;
          if (typeof key !== "string")
            return;
          emit("input", key);
          (_b = (_a = formTabRef.value).setActiveKey) == null ? void 0 : _b.call(_a, key);
        }
      }, {
        default: () => tabs.map(({
          props: props2,
          schema,
          name
        }, key) => {
          const IElTabPane = vue.h(elementPlus.ElTabPane, {
            key,
            ...props2
          }, {
            default: () => vue.h(vue.RecursionField, {
              schema,
              name
            }, {})
          });
          IElTabPane.props.label = vue.h("div", {}, {
            default: () => [badgedHeader(name, props2)]
          });
          return IElTabPane;
        })
      });
    };
  }
}));
const FormTabPane = vue$1.defineComponent({
  name: "FFormTabPane",
  inheritAttrs: false,
  setup(_props, {
    slots
  }) {
    return () => vue.h(vue.Fragment, {}, slots);
  }
});
const composeFormTab = utils.composeExport(FormTab, {
  TabPane: FormTabPane,
  createFormTab
});

exports.FormTab = composeFormTab;
exports.composeFormTab = composeFormTab;
exports.default = composeFormTab;
//# sourceMappingURL=index.js.map