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

A Component Library for Vue 3

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

ElTabPane.props.label = {
  default: "",
  type: Object
};
const useTabs = () => {
  const tabsField = useField();
  const schema = useFieldSchema();
  const tabs = 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 = model({
    activeKey: defaultActiveKey,
    setActiveKey(key) {
      formTab.activeKey = key;
    }
  });
  return formTab;
};
const FormTab = observer(defineComponent({
  inheritAttrs: false,
  props: {
    formTab: {
      type: Object
    },
    value: {
      type: String
    }
  },
  emits: ["input"],
  setup(props, {
    attrs,
    emit
  }) {
    const field = useField();
    const prefixCls = `${stylePrefix}-form-tab`;
    const formTabRef = 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 h(ElBadge, {
          class: [`${prefixCls}-errors-badge`],
          value: errors.length
        }, {
          default: () => props2.label
        });
      }
      return props2.label;
    };
    return () => {
      const tabs = useTabs();
      const activeKey = takeActiveKey(tabs);
      return h(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 = h(ElTabPane, {
            key,
            ...props2
          }, {
            default: () => h(RecursionField, {
              schema,
              name
            }, {})
          });
          IElTabPane.props.label = h("div", {}, {
            default: () => [badgedHeader(name, props2)]
          });
          return IElTabPane;
        })
      });
    };
  }
}));
const FormTabPane = defineComponent({
  name: "FFormTabPane",
  inheritAttrs: false,
  setup(_props, {
    slots
  }) {
    return () => h(Fragment, {}, slots);
  }
});
const composeFormTab = composeExport(FormTab, {
  TabPane: FormTabPane,
  createFormTab
});

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