@dt-frames/ui 2.0.24 → 3.0.1

package/es/components/form/index.js

@@ -1,53 +1,85 @@
+import { isProd, getDynamicProps, error, useI18n, isNumber, useAppStore, isString, isFunction, isArray, isUnDef, getSlot, isBoolean, isNull, isDef, isObject, isNullOrUnDef, deepMerge, dispatchResize } from "@dt-frames/core";
+import { ref, onUnmounted, unref, watch, nextTick, computed, getCurrentInstance, reactive, readonly, watchEffect, toRaw, defineComponent, useAttrs, openBlock, createBlock, mergeProps, isRef, withCtx, createElementBlock, Fragment, renderList, createTextVNode, toDisplayString, createElementVNode, createVNode, normalizeProps, guardReactiveProps, createCommentVNode, toRefs, isVNode, resolveDirective, withDirectives, normalizeClass, normalizeStyle, onMounted, withKeys, createSlots, renderSlot } from "vue";
 import { RadioButton, RadioGroup, Input, Button, FormItem as FormItem$1, Col as Col$1, Row, Form as Form$1 } from "ant-design-vue/es";
-import "ant-design-vue/es/form/style";
-import "ant-design-vue/es/row/style";
-import { computed, unref, getCurrentInstance, reactive, readonly, watchEffect, nextTick, toRaw, defineComponent, useAttrs, openBlock, createBlock, mergeProps, isRef, withCtx, createElementBlock, Fragment, renderList, createTextVNode, toDisplayString, createElementVNode, createVNode, normalizeProps, guardReactiveProps, createCommentVNode, ref, toRefs, isVNode, watch, resolveDirective, normalizeStyle, withDirectives, normalizeClass, onMounted, withKeys, createSlots, renderSlot } from "vue";
-import { useAppStore, isNumber, useI18n, isString, isFunction, error, useSlots, isArray, isUnDef, isBoolean, isNull, dispatchResize, isObject, deepMerge, isNullAndUnDef, useTimeoutFn } from "@dt-frames/core";
-import { merge, isEqual, omit, cloneDeep, upperFirst, uniqBy, set } from "lodash-es";
+import { useHeader, UiSize } from "../../theme/index";
+import { merge, isEqual, omit, trim, cloneDeep, upperFirst, set, uniqBy } from "lodash-es";
 import { Input as Input$1, Select, TreeSelect, Radio, Checkbox, AutoComplete, Cascader, DatePicker, InputNumber, Switch, TimePicker, Slider, Rate, Divider, Col, Tooltip, Form, FormItem } from "ant-design-vue";
-import { useHeader, UiSize } from "../../theme";
-import "ant-design-vue/es/radio/style";
-import "ant-design-vue/es/input/style";
-import "ant-design-vue/es/cascader/style";
-import "ant-design-vue/es/input-number/style";
-import "ant-design-vue/es/switch/style";
-import "ant-design-vue/es/tree-select/style";
-import "ant-design-vue/es/slider/style";
-import "ant-design-vue/es/rate/style";
-import "ant-design-vue/es/date-picker/style";
 import { DtUpload } from "../../components/upload";
-import "ant-design-vue/es/col/style";
-import "ant-design-vue/es/button/style";
 import dayjs from "dayjs";
-function useLabelWidth(schemaItemRef, propsRef) {
-  const { getIsZH } = useHeader();
-  const { appConf } = useAppStore();
-  return computed(() => {
-    const { labelWidth, enLabelWidth, labelCol = {}, wrapperCol = {} } = unref(schemaItemRef);
-    const {
-      labelWidth: gLabelWidth,
-      enLabelWidth: gEnLabelWidth,
-      labelCol: glabelCol = {},
-      wrapperCol: gwrapperCol = {},
-      layout = appConf.ui.form.layout
-    } = unref(propsRef);
-    let width = (unref(getIsZH) ? labelWidth ?? gLabelWidth : enLabelWidth ?? gEnLabelWidth) ?? labelWidth ?? gLabelWidth ?? 0;
-    const labelcol = merge({}, glabelCol, labelCol);
-    const wrapcol = merge({}, gwrapperCol, wrapperCol);
-    width = isNumber(width) ? `${width}px` : width;
-    return {
-      labelCol: merge(
-        {},
-        { style: { width } },
-        labelcol
-      ),
-      wrapperCol: merge(
-        {},
-        { style: { width: layout === "vertical" ? "100%" : `calc(100% - ${width})` } },
-        wrapcol
-      )
-    };
-  });
+import { Icon } from "../icons";
+function useForm(props) {
+  const formRef = ref(null);
+  const loadedRef = ref(false);
+  function register(instance) {
+    isProd() && onUnmounted(() => {
+      formRef.value = null;
+      loadedRef.value = null;
+    });
+    if (unref(loadedRef) && isProd() && instance === unref(formRef))
+      return;
+    formRef.value = instance;
+    loadedRef.value = true;
+    watch(
+      () => props,
+      () => props && instance.setProps(getDynamicProps(props)),
+      {
+        immediate: true,
+        deep: true
+      }
+    );
+  }
+  async function getForm() {
+    const form = unref(formRef);
+    if (!form)
+      error("\u8868\u5355\u672A\u7533\u660E!");
+    await nextTick();
+    return form;
+  }
+  const methods = {
+    setProps: async (props2) => {
+      const form = await getForm();
+      form.setProps(props2);
+    },
+    updateSchema: async (data) => {
+      const form = await getForm();
+      form.updateSchema(data);
+    },
+    resetSchema: async (data) => {
+      const form = await getForm();
+      form.resetSchema(data);
+    },
+    clearValidate: async (name) => {
+      const form = await getForm();
+      form.clearValidate(name);
+    },
+    resetForms: async () => {
+      const form = await getForm();
+      form.resetForms();
+    },
+    removeFormByName: async (name) => {
+      unref(formRef)?.removeFormByName(name);
+    },
+    setFormValues: async (values) => {
+      const form = await getForm();
+      form.setFormValues(values);
+    },
+    appendFormItems: async (schema, prefixName, first) => {
+      const form = await getForm();
+      form.appendFormItems(schema, prefixName, first);
+    },
+    validate: async (nameList) => {
+      const form = await getForm();
+      return form.validate(nameList);
+    },
+    validateFields: async (nameList) => {
+      const form = await getForm();
+      return form.validateFields(nameList);
+    },
+    getFormValues: () => {
+      return unref(formRef)?.getFormValues();
+    }
+  };
+  return [register, methods];
 }
 const SINGLE_DATA_TYPE = ["DatePicker", "MonthPicker", "WeekPicker", "TimePicker"];
 const MULTIFY_DATA_TYPE = ["RangePicker"];
@@ -87,6 +119,42 @@ function handleInputNumberValue(component, val) {
   }
   return val;
 }
+const SEARCH_BTN_NAME = "UI.SEARCH";
+const RESET_BTN_NAME = "UI.RESET";
+const SEARCH_BTNS = [
+  { label: SEARCH_BTN_NAME, preIcon: "mdi:magnify", type: "primary" },
+  { label: RESET_BTN_NAME, preIcon: "mdi:refresh", type: "default" }
+];
+function useLabelWidth(schemaItemRef, propsRef) {
+  const { getIsZH } = useHeader();
+  const { appConf } = useAppStore();
+  return computed(() => {
+    const { labelWidth, enLabelWidth, labelCol = {}, wrapperCol = {} } = unref(schemaItemRef);
+    const {
+      labelWidth: gLabelWidth,
+      enLabelWidth: gEnLabelWidth,
+      labelCol: glabelCol = {},
+      wrapperCol: gwrapperCol = {},
+      layout = appConf.ui.form.layout
+    } = unref(propsRef);
+    let width = (unref(getIsZH) ? labelWidth ?? gLabelWidth : enLabelWidth ?? gEnLabelWidth) ?? labelWidth ?? gLabelWidth ?? 0;
+    const labelcol = merge({}, glabelCol, labelCol);
+    const wrapcol = merge({}, gwrapperCol, wrapperCol);
+    width = isNumber(width) ? `${width}px` : width;
+    return {
+      labelCol: merge(
+        {},
+        { style: { width } },
+        labelcol
+      ),
+      wrapperCol: merge(
+        {},
+        { style: { width: layout === "vertical" ? "100%" : `calc(100% - ${width})` } },
+        wrapcol
+      )
+    };
+  });
+}
 function useFormValue(props, key = "value", changeEvent = "change", emitData) {
   const instance = getCurrentInstance();
   const emit = instance?.emit;
@@ -119,7 +187,7 @@ function useFormValue(props, key = "value", changeEvent = "change", emitData) {
   return [state, setState, defaultState];
 }
 const _sfc_main$4 = /* @__PURE__ */ defineComponent({
-  __name: "radioButton",
+  __name: "RadioButton",
   props: {
     value: {
       type: [String, Number, Boolean]
@@ -171,7 +239,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
 });
 const _hoisted_1$1 = { class: "input-with-dialog" };
 const _sfc_main$3 = /* @__PURE__ */ defineComponent({
-  __name: "formInputUseDialog",
+  __name: "FormInputUseDialog",
   setup(__props) {
     const { t } = useI18n("UI");
     const attrs = useAttrs();
@@ -275,9 +343,6 @@ const _sfc_main$2 = {
   setup(props, {
     slots
   }) {
-    const {
-      getSlot
-    } = useSlots();
     const {
       t
     } = useI18n("UI");
@@ -350,7 +415,8 @@ const _sfc_main$2 = {
         colon = appConf.ui.form.colon,
         suffix,
         prefix,
-        description
+        description,
+        label
       } = props.schema;
       const {
         labelCol,
@@ -358,7 +424,11 @@ const _sfc_main$2 = {
       } = unref(useLabelWidth(schema, formProps));
       const getContent = () => {
         const value = unref(getValues);
-        let _con = slot ? getSlot(slots, slot, value.model) : render ? render(value.model) : renderFormItem();
+        const slotData = {
+          model: value.model,
+          name
+        };
+        let _con = slot ? getSlot(slots, slot, slotData) : render ? render(value.model) : renderFormItem();
         return component === "InputGroup" ? createVNode(FormItem, {
           "class": "m-0"
         }, _isSlot(_con) ? _con : {
@@ -373,7 +443,7 @@ const _sfc_main$2 = {
       };
       return createVNode(Form.Item, {
         "name": isArray(name) ? name.join("-") : name,
-        "colon": colon,
+        "colon": trim(label) ? colon : false,
         "class": [unref(getUiSize), {
           "suffix-item": !!suffix
         }],
@@ -391,20 +461,20 @@ const _sfc_main$2 = {
         }, [getContent()]), !!suffix && createVNode("span", {
           "class": "suffix px-2"
         }, [getSuffix()])]), description && createVNode("div", {
-          "class": "opacity-50 text-12"
+          "class": "opacity-50 text-13px py-1 leading-5"
         }, [description])]
       });
     }
     function renderLabel() {
       const {
-        label,
+        label = null,
         toolTip,
         subLabel,
         toolTipProps = {}
       } = props.schema;
       const renderLabel2 = subLabel ? createVNode("span", null, [" ", label, createTextVNode(" "), createVNode("span", {
         "class": "text-secondary opacity-50"
-      }, [createTextVNode("("), subLabel, createTextVNode(")")])]) : label;
+      }, [createTextVNode("("), subLabel, createTextVNode(")")])]) : label === null ? "" : label || " ";
       const _toolTip = isFunction(toolTip) ? toolTip(unref(getValues).model) : toolTip;
       const _toolTipProps = {
         title: renderLabel2,
@@ -485,8 +555,15 @@ const _sfc_main$2 = {
         }
         return size === UiSize.MIDDLE ? "default" : size;
       };
+      const getAllowClear = () => {
+        if (isDef(_sProps?.allowClear))
+          return _sProps?.allowClear;
+        if (isDef(unref(formProps).allowClear))
+          return unref(formProps).allowClear;
+        return appConf.ui.form.allowClear ?? true;
+      };
       const itemProps = {
-        allowClear: _sProps?.allowClear ?? appConf.ui.form.allowClear,
+        allowClear: getAllowClear(),
         size: getSize(),
         ...unref(getComponentProps),
         disabled: unref(getDisable)
@@ -507,7 +584,10 @@ const _sfc_main$2 = {
       }
       itemProps.formValues = unref(getValues);
       if (["Select", "DatePicker", "MonthPicker", "WeekPicker", "RangePicker"].includes(component)) {
-        itemProps.dropdownClassName += ` ${unref(getUiSize)}`;
+        itemProps.popupClassName += ` ${unref(getUiSize)}`;
+      }
+      if (["InputPassword"].includes(component)) {
+        itemProps.autoComplete = true;
       }
       const bindValue = {
         [valueField || (isCheck ? "checked" : "value")]: props.formModel[name]
@@ -621,7 +701,7 @@ const _sfc_main$2 = {
           span: gSpan
         };
       } else {
-        _colProps = mode === "search" ? appConf.ui.form.searchColspan : appConf.ui.form.dialogColspan;
+        _colProps = mode === "search" ? appConf.ui.form.colspan : appConf.ui.modal.colspan;
       }
       const values = unref(getValues);
       if (!component) {
@@ -651,215 +731,229 @@ const _sfc_main$2 = {
     };
   }
 };
-const _hoisted_1 = {
-  key: 0,
-  className: "preIcon pr-1"
-};
-const _hoisted_2 = {
-  key: 0,
-  className: "preIcon pl-1"
-};
-const _hoisted_3 = { class: "text" };
-const _hoisted_4 = /* @__PURE__ */ createElementVNode("i", { class: "text-2xl i ic:baseline-arrow-drop-down" }, null, -1);
-const _hoisted_5 = [
-  _hoisted_4
-];
-const _sfc_main$1 = /* @__PURE__ */ defineComponent({
-  __name: "FormButtons",
-  props: {
-    mode: {
-      type: String,
-      default: "search"
-    },
-    show: {
-      type: Boolean,
-      default: true
-    },
-    showAdvancedButton: {
-      type: Boolean,
-      default: true
-    },
-    minShowColumn: {
-      type: Number,
-      default: 2
-    },
-    buttonList: {
-      type: [Array],
-      default: []
-    },
-    authPrefix: {
-      type: String
-    },
-    isAdvanced: {
-      type: Boolean,
-      default: true
-    },
-    colspan: {
-      type: Object
-    },
-    style: {
-      type: Object,
-      default: () => {
-      }
+const BasicProps = {
+  mode: {
+    type: String,
+    default: "search"
+  },
+  autoFetch: {
+    type: Boolean,
+    default: true
+  },
+  model: {
+    type: Object,
+    default: () => ({})
+  },
+  layout: {
+    type: String,
+    default: "horizontal"
+  },
+  labelWidth: {
+    type: [Number, String],
+    default: 100
+  },
+  enLabelWidth: {
+    type: [Number, String],
+    default: 100
+  },
+  labelAlign: {
+    type: String,
+    default: "right"
+  },
+  labelCol: {
+    type: Object,
+    default: () => ({})
+  },
+  wrapperCol: {
+    type: Object,
+    default: () => ({})
+  },
+  rowProps: {
+    type: Object,
+    default: () => ({})
+  },
+  colProps: {
+    type: Object
+  },
+  span: {
+    type: Number
+  },
+  size: {
+    type: String
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  compact: {
+    type: Boolean,
+    default: null
+  },
+  schemas: {
+    type: Array,
+    default: () => []
+  },
+  autoFetchOnEnter: {
+    type: Boolean,
+    default: true
+  },
+  minShowColumn: {
+    type: Number,
+    default: 2
+  },
+  showAdvancedButton: {
+    type: Boolean,
+    default: true
+  },
+  allowClear: {
+    type: Boolean,
+    default: true
+  },
+  scrollToFirstError: {
+    type: Boolean,
+    default: true
+  },
+  colon: {
+    type: Boolean,
+    default: true
+  },
+  loading: {
+    type: Object,
+    default: () => {
+      return {};
     }
   },
-  emits: ["handle-method"],
-  setup(__props, { emit: emits }) {
-    const props = __props;
-    const { t } = useI18n();
-    const advancedRef = ref(props.isAdvanced);
-    let key = 0;
-    const showAdvanceRef = computed(() => {
-      return props.mode === "search" ? props.showAdvancedButton : false;
-    });
-    const getAuth = (auth) => {
-      const { authPrefix } = props;
-      if (authPrefix && auth || !authPrefix && auth && auth.includes(":")) {
-        return authPrefix ? `${authPrefix}:${auth}` : auth;
-      } else {
-        return null;
+  onSearch: {
+    type: Function,
+    default: (params) => {
+    }
+  },
+  onReset: {
+    type: Function,
+    default: (params) => {
+    }
+  },
+  buttons: {
+    type: [Array, null, Boolean],
+    default: false
+  },
+  modelChange: {
+    type: Function,
+    default: (params, key, value) => {
+    }
+  },
+  resetFunc: {
+    type: Function
+  },
+  registerInstance: {
+    type: Function
+  }
+};
+function useFormValues({
+  defaultValue,
+  getSchema,
+  formModel
+}) {
+  const getComMap = () => {
+    let comMap = /* @__PURE__ */ new Map();
+    unref(getSchema).map((it) => {
+      if (it.component && it.name) {
+        comMap.set(it.name, it);
       }
-    };
-    const colOpt = computed(() => {
-      let style = {
-        textAlign: "right"
-      };
-      let gStyle = props.style ?? {};
-      if (props.mode === "dialog") {
-        Object.assign(style, {
-          display: "inline-block"
-        });
-        return {
-          style: {
-            ...gStyle,
-            ...style
-          }
-        };
-      } else if (props.mode === null) {
-        Object.assign(style, {
-          display: "flex",
-          justifyContent: "center",
-          marginBottom: "20px"
-        });
-        return {
-          style: {
-            ...gStyle,
-            ...style
-          },
-          span: 24
-        };
+    });
+    return comMap;
+  };
+  function handleFormValues(model) {
+    if (!isObject(model))
+      return {};
+    const vals = {};
+    let comMap = getComMap(), extraNames = [];
+    for (let [key, val] of Object.entries(model)) {
+      let component = comMap.get(key)?.component;
+      if (!key || Array.isArray(val) && val.length === 0 || isFunction(val)) {
+        continue;
       }
-      return {
-        style: {
-          ...props.style,
-          ...style
+      if (component) {
+        if (SINGLE_DATA_TYPE.includes(component)) {
+          val = val ? dayjs(val).valueOf() : null;
+        } else if (MULTIFY_DATA_TYPE.includes(component)) {
+          val = (val || []).map((it) => dayjs(it).valueOf());
+          if (comMap.get(key).extraName?.length) {
+            comMap.get(key).extraName.map((it, i) => {
+              extraNames.push(it);
+              set(vals, it, val.length > 0 ? val[i] : null);
+            });
+          }
         }
-      };
-    });
-    const getAdvanceClass = computed(() => {
-      return [
-        "basic-arrow",
-        { "basic-arrow--active": !advancedRef.value }
-      ];
-    });
-    const toggleAdvanced = () => {
-      advancedRef.value = !advancedRef.value;
-      dispatchResize();
-      emits("handle-method", advancedRef.value);
-    };
-    function handleBtnClick(button) {
-      if (button.onClick && isFunction(button.onClick)) {
-        button.onClick();
-      } else {
-        emits("handle-method", button);
+      }
+      if (isString(val)) {
+        val = val.trim();
+      }
+      if (!extraNames.includes(key)) {
+        set(vals, key, val);
       }
     }
-    watch(() => props.isAdvanced, (v) => {
-      if (v || props.mode !== "search") {
-        requestAnimationFrame(toggleAdvanced);
+    return vals;
+  }
+  function initDefault() {
+    const schema = unref(getSchema), obj = {};
+    schema.forEach((item) => {
+      const { props = {}, name, component, defaultValue: gDefaultValue } = item;
+      const { defaultValue: itemDefaultValue, mode, format, treeCheckable } = isFunction(props) ? props(formModel) : props;
+      if (!name)
+        return;
+      let names = [];
+      if (isArray(name)) {
+        names = name;
+      } else {
+        names = [name];
       }
-    }, {
-      immediate: true
-    });
-    watch(
-      () => props.buttonList,
-      (v) => key = new Date().getTime(),
-      {
-        immediate: true,
-        deep: true
+      const defVal = itemDefaultValue ?? gDefaultValue;
+      if (!isNullOrUnDef(defVal)) {
+        if (DATE_PICKER_TYPES.includes(component)) {
+          if (isArray(defVal)) {
+            let vals = defVal.map((it) => format ? dayjs(it, format) : dayjs(it));
+            if (names.length > 1) {
+              names.map((key, index) => obj[key] = vals[index] ?? null);
+            } else {
+              obj[names[0]] = vals;
+            }
+          } else {
+            obj[names[0]] = format ? dayjs(defVal, format) : dayjs(defVal);
+          }
+        } else {
+          if (names.length > 1) {
+            names.forEach((key, index) => {
+              if (!defVal || defVal.length - 1 < index) {
+                obj[key] = null;
+              } else {
+                obj[key] = defVal[index];
+              }
+            });
+          } else {
+            obj[names[0]] = defVal;
+          }
+        }
+      } else {
+        names.map((it) => {
+          if (component === "TreeSelect" && (mode === "multiple" || treeCheckable) || component === "Select" && mode === "multiple") {
+            obj[it] = [];
+          } else {
+            obj[it] = null;
+          }
+        });
       }
-    );
-    return (_ctx, _cache) => {
-      const _component_AButton = Button;
-      const _component_AFormItem = FormItem$1;
-      const _component_ACol = Col$1;
-      const _directive_icon = resolveDirective("icon");
-      const _directive_auth = resolveDirective("auth");
-      return __props.show ? (openBlock(), createBlock(_component_ACol, normalizeProps(mergeProps({ key: 0 }, unref(colOpt))), {
-        default: withCtx(() => [
-          createVNode(_component_AFormItem, {
-            class: "dt-form-btns",
-            style: normalizeStyle({
-              "margin-bottom": __props.mode === "search" ? "16px" : "0px"
-            })
-          }, {
-            default: withCtx(() => [
-              (openBlock(true), createElementBlock(Fragment, null, renderList(__props.buttonList, (button) => {
-                return openBlock(), createElementBlock(Fragment, null, [
-                  (button.show === void 0 ? true : button.show) ? withDirectives((openBlock(), createBlock(_component_AButton, {
-                    class: normalizeClass(["items-center", button.class]),
-                    type: button.type,
-                    loading: button.loading,
-                    disabled: button.disabled,
-                    key: unref(key),
-                    onClick: ($event) => handleBtnClick(button)
-                  }, {
-                    icon: withCtx(() => [
-                      button.preIcon ? withDirectives((openBlock(), createElementBlock("span", _hoisted_1, null, 512)), [
-                        [_directive_icon, button.preIcon]
-                      ]) : createCommentVNode("", true)
-                    ]),
-                    default: withCtx(() => [
-                      createTextVNode(" " + toDisplayString(unref(t)(button.label)) + " ", 1),
-                      button.postIcon ? withDirectives((openBlock(), createElementBlock("span", _hoisted_2, null, 512)), [
-                        [_directive_icon, button.postIcon]
-                      ]) : createCommentVNode("", true)
-                    ]),
-                    _: 2
-                  }, 1032, ["type", "class", "loading", "disabled", "onClick"])), [
-                    [_directive_auth, getAuth(button.auth)]
-                  ]) : createCommentVNode("", true)
-                ], 64);
-              }), 256)),
-              unref(showAdvanceRef) ? (openBlock(), createBlock(_component_AButton, {
-                key: 0,
-                type: "link",
-                class: "advanced",
-                onClick: toggleAdvanced
-              }, {
-                default: withCtx(() => [
-                  createElementVNode("span", _hoisted_3, toDisplayString(advancedRef.value ? unref(t)("UI.ADVANCED") : unref(t)("UI.EXPAND")), 1),
-                  createElementVNode("span", {
-                    class: normalizeClass(unref(getAdvanceClass))
-                  }, _hoisted_5, 2)
-                ]),
-                _: 1
-              })) : createCommentVNode("", true)
-            ]),
-            _: 1
-          }, 8, ["style"])
-        ]),
-        _: 1
-      }, 16)) : createCommentVNode("", true);
-    };
+    });
+    defaultValue.value = { ...obj };
+    for (let key in obj) {
+      formModel[key] = obj[key];
+    }
   }
-});
-const SEARCH_BTN_NAME = "UI.SEARCH";
-const RESET_BTN_NAME = "UI.RESET";
-const SEARCH_BTNS = [
-  { label: SEARCH_BTN_NAME, preIcon: "mdi:magnify", type: "primary" },
-  { label: RESET_BTN_NAME, preIcon: "mdi:refresh", type: "default" }
-];
+  return {
+    initDefault,
+    handleFormValues
+  };
+}
 function useFormEvents({
   emits,
   getSchema,
@@ -880,7 +974,7 @@ function useFormEvents({
     let updateItems = [];
     updateItems = isObject(data) ? [data] : [...data];
     if (updateItems?.length && !updateItems.every((it) => it.component !== "Divider" && it.name)) {
-      console.error("\u6240\u6709\u7684\u5143\u7D20\u90FD\u5FC5\u987B\u8BBE\u7F6Ename\u5C5E\u6027");
+      error("\u6240\u6709\u7684\u5143\u7D20\u90FD\u5FC5\u987B\u8BBE\u7F6Ename\u5C5E\u6027");
       return;
     }
     const schema = [];
@@ -911,10 +1005,10 @@ function useFormEvents({
     data.map((it) => {
       let name = isArray(it.name) ? it.name[0] : it.name;
       obj[name] = null;
-      if (!isNullAndUnDef(it.defaultValue))
+      if (!isNullOrUnDef(it.defaultValue))
         return obj[name] = it.defaultValue;
       let props = isFunction(it.props) ? it.props(toRaw(unref(formModel))) : it.props;
-      if (!isNullAndUnDef(props?.defaultValue))
+      if (!isNullOrUnDef(props?.defaultValue))
         obj[name] = props.defaultValue;
     });
     if (isReset) {
@@ -1043,111 +1137,155 @@ function useFormEvents({
     appendFormItems
   };
 }
-function useFormValues({
-  defaultValue,
-  getSchema,
-  formModel
-}) {
-  const getComMap = () => {
-    let comMap = /* @__PURE__ */ new Map();
-    unref(getSchema).map((it) => {
-      if (it.component && it.name) {
-        comMap.set(it.name, it);
-      }
-    });
-    return comMap;
-  };
-  function handleFormValues(model) {
-    if (!isObject(model))
-      return {};
-    const vals = {};
-    let comMap = getComMap(), extraNames = [];
-    for (let [key, val] of Object.entries(model)) {
-      let component = comMap.get(key)?.component;
-      if (!key || Array.isArray(val) && val.length === 0 || isFunction(val)) {
-        continue;
-      }
-      if (component) {
-        if (SINGLE_DATA_TYPE.includes(component)) {
-          val = val ? dayjs(val).valueOf() : null;
-        } else if (MULTIFY_DATA_TYPE.includes(component)) {
-          val = (val || []).map((it) => dayjs(it).valueOf());
-          if (comMap.get(key).extraName?.length) {
-            comMap.get(key).extraName.map((it, i) => {
-              extraNames.push(it);
-              set(vals, it, val.length > 0 ? val[i] : null);
-            });
-          }
-        }
-      }
-      if (isString(val)) {
-        val = val.trim();
-      }
-      if (!extraNames.includes(key)) {
-        set(vals, key, val);
-      }
+const _hoisted_1 = { class: "text" };
+const _hoisted_2 = /* @__PURE__ */ createElementVNode("i", { class: "text-2xl i ic:baseline-arrow-drop-down" }, null, -1);
+const _hoisted_3 = [
+  _hoisted_2
+];
+const basicProps = {
+  mode: {
+    type: String,
+    default: "search"
+  },
+  show: {
+    type: Boolean,
+    default: true
+  },
+  showAdvancedButton: {
+    type: Boolean,
+    default: true
+  },
+  minShowColumn: {
+    type: Number,
+    default: 2
+  },
+  buttonList: {
+    type: [Array],
+    default: []
+  },
+  authPrefix: {
+    type: String
+  },
+  isAdvanced: {
+    type: Boolean,
+    default: true
+  },
+  colspan: {
+    type: Object
+  },
+  style: {
+    type: Object,
+    default: () => {
     }
-    return vals;
   }
-  function initDefault() {
-    const schema = unref(getSchema), obj = {};
-    schema.forEach((item) => {
-      const { props = {}, name, component, defaultValue: gDefaultValue } = item;
-      const { defaultValue: itemDefaultValue, mode, format, treeCheckable } = isFunction(props) ? props(formModel) : props;
-      if (!name)
-        return;
-      let names = [];
-      if (isArray(name)) {
-        names = name;
-      } else {
-        names = [name];
-      }
-      const defaultValue2 = itemDefaultValue ?? gDefaultValue;
-      if (!isNullAndUnDef(defaultValue2)) {
-        if (DATE_PICKER_TYPES.includes(component)) {
-          if (isArray(defaultValue2)) {
-            let vals = defaultValue2.map((it) => format ? dayjs(it, format) : dayjs(it));
-            if (names.length > 1) {
-              names.map((key, index) => obj[key] = vals[index] ?? null);
-            } else {
-              obj[names[0]] = vals;
-            }
-          } else {
-            obj[names[0]] = format ? dayjs(defaultValue2, format) : dayjs(defaultValue2);
-          }
-        } else {
-          if (names.length > 1) {
-            names.forEach((key, index) => {
-              if (!defaultValue2 || defaultValue2.length - 1 < index) {
-                obj[key] = null;
-              } else {
-                obj[key] = defaultValue2[index];
-              }
-            });
-          } else {
-            obj[names[0]] = defaultValue2;
-          }
-        }
+};
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  __name: "FormButtons",
+  props: basicProps,
+  emits: ["handle-method"],
+  setup(__props, { emit: emits }) {
+    const props = __props;
+    const { t } = useI18n();
+    const advancedRef = ref(props.isAdvanced);
+    let key = 0;
+    const showAdvanceRef = computed(() => {
+      return props.mode === "search" ? props.showAdvancedButton : false;
+    });
+    const getAuth = (auth) => {
+      const { authPrefix } = props;
+      if (authPrefix && auth || !authPrefix && auth && auth.includes(":")) {
+        console.log("sjinlala");
+        return authPrefix ? `${authPrefix}:${auth}` : auth;
       } else {
-        names.map((it) => {
-          if (component === "TreeSelect" && (mode === "multiple" || treeCheckable) || component === "Select" && mode === "multiple") {
-            obj[it] = [];
-          } else {
-            obj[it] = null;
-          }
-        });
+        return null;
       }
+    };
+    const getAdvanceClass = computed(() => {
+      return [
+        "basic-arrow",
+        { "basic-arrow--active": !advancedRef.value }
+      ];
     });
-    defaultValue.value = { ...obj };
-    for (let key in obj) {
-      formModel[key] = obj[key];
+    const toggleAdvanced = () => {
+      advancedRef.value = !advancedRef.value;
+      dispatchResize();
+      emits("handle-method", advancedRef.value);
+    };
+    function handleBtnClick(button) {
+      if (button.onClick && isFunction(button.onClick)) {
+        button.onClick();
+      } else {
+        emits("handle-method", button);
+      }
     }
+    watch(
+      () => props.buttonList,
+      (v) => {
+        key = new Date().getTime();
+      },
+      {
+        immediate: true,
+        deep: true
+      }
+    );
+    return (_ctx, _cache) => {
+      const _component_AButton = Button;
+      const _directive_auth = resolveDirective("auth");
+      return openBlock(), createElementBlock(Fragment, null, [
+        (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.buttonList, (button) => {
+          return openBlock(), createElementBlock(Fragment, null, [
+            (button.show === void 0 ? true : button.show) ? withDirectives((openBlock(), createBlock(_component_AButton, {
+              class: normalizeClass(["items-center flex items-center !ml-0", button.class]),
+              type: button.type,
+              loading: button.loading,
+              disabled: button.disabled,
+              key: unref(key),
+              style: normalizeStyle({
+                color: button.color
+              }),
+              onClick: ($event) => handleBtnClick(button)
+            }, {
+              icon: withCtx(() => [
+                button.preIcon ? (openBlock(), createBlock(unref(Icon), {
+                  key: 0,
+                  name: button.preIcon,
+                  className: "i preIcon pr-1",
+                  color: button.color
+                }, null, 8, ["name", "color"])) : createCommentVNode("", true)
+              ]),
+              default: withCtx(() => [
+                createTextVNode(" " + toDisplayString(unref(t)(button.label)) + " ", 1),
+                button.postIcon ? (openBlock(), createBlock(unref(Icon), {
+                  key: 0,
+                  name: button.postIcon,
+                  className: "i preIcon pl-1",
+                  color: button.color
+                }, null, 8, ["name", "color"])) : createCommentVNode("", true)
+              ]),
+              _: 2
+            }, 1032, ["type", "class", "loading", "disabled", "style", "onClick"])), [
+              [_directive_auth, getAuth(button.auth)]
+            ]) : createCommentVNode("", true)
+          ], 64);
+        }), 256)),
+        unref(showAdvanceRef) ? (openBlock(), createBlock(_component_AButton, {
+          key: 0,
+          type: "link",
+          class: "advanced",
+          onClick: toggleAdvanced
+        }, {
+          default: withCtx(() => [
+            createElementVNode("span", _hoisted_1, toDisplayString(unref(advancedRef) ? unref(t)("UI.ADVANCED") : unref(t)("UI.EXPAND")), 1),
+            createElementVNode("span", {
+              class: normalizeClass(unref(getAdvanceClass))
+            }, _hoisted_3, 2)
+          ]),
+          _: 1
+        })) : createCommentVNode("", true)
+      ], 64);
+    };
   }
-  return {
-    initDefault,
-    handleFormValues
-  };
-}
+});
 function useFormActions(opt) {
   const { getProps, defaultValue, updateSchema, getFormValues, setFormValues } = opt;
   const { appConf } = useAppStore();
@@ -1181,141 +1319,116 @@ function useFormActions(opt) {
       params.onClick();
     }
   }
-  return [handleMethod];
-}
-const BasicProps = {
-  mode: {
-    type: String,
-    default: "search"
-  },
-  autoFetch: {
-    type: Boolean,
-    default: true
-  },
-  model: {
-    type: Object,
-    default: () => ({})
-  },
-  layout: {
-    type: String,
-    default: "horizontal"
-  },
-  labelWidth: {
-    type: [Number, String],
-    default: 100
-  },
-  enLabelWidth: {
-    type: [Number, String],
-    default: 100
-  },
-  labelAlign: {
-    type: String,
-    default: "right"
-  },
-  labelCol: {
-    type: Object,
-    default: () => ({})
-  },
-  wrapperCol: {
-    type: Object,
-    default: () => ({})
-  },
-  rowProps: {
-    type: Object,
-    default: () => ({})
-  },
-  colProps: {
-    type: Object
-  },
-  span: {
-    type: Number
-  },
-  size: {
-    type: String
-  },
-  disabled: {
-    type: Boolean,
-    default: false
-  },
-  compact: {
-    type: Boolean,
-    default: null
-  },
-  schemas: {
-    type: Array,
-    default: () => []
-  },
-  autoSearchOnEnter: {
-    type: Boolean,
-    default: true
-  },
-  minShowColumn: {
-    type: Number,
-    default: 2
-  },
-  showAdvancedButton: {
-    type: Boolean,
-    default: true
-  },
-  allowClear: {
-    type: Boolean,
-    default: true
-  },
-  scrollToFirstError: {
-    type: Boolean,
-    default: true
-  },
-  colon: {
-    type: Boolean,
-    default: true
-  },
-  loading: {
-    type: Object,
-    default: () => {
-      return {};
+  const actionsProps = computed(() => {
+    const { appConf: appConf2 } = useAppStore();
+    const {
+      mode,
+      minShowColumn = appConf2.ui.form.minShowColumn || 2,
+      schemas = [],
+      showAdvancedButton: advanced,
+      loading,
+      buttons
+    } = unref(getProps);
+    let showAdvancedButton = mode === "search" ? true : false;
+    if (advanced !== void 0) {
+      showAdvancedButton = advanced;
     }
-  },
-  onSearch: {
-    type: Function,
-    default: (params) => {
+    if (schemas.length <= minShowColumn) {
+      showAdvancedButton = false;
     }
-  },
-  onReset: {
-    type: Function,
-    default: (params) => {
+    let buttonList = [];
+    if (isArray(buttons)) {
+      buttonList = [...buttons];
+    } else if (mode === "search" && !buttons) {
+      SEARCH_BTNS.forEach((it) => {
+        it.loading = it.label === SEARCH_BTN_NAME ? loading?.onSearch : loading?.onReset;
+        buttonList.push(it);
+      });
     }
-  },
-  buttons: {
-    type: [Array, null, Boolean],
-    default: false
-  },
-  resetFunc: {
-    type: Function
-  },
-  registerInstance: {
-    type: Function
-  }
-};
+    let colspan = mode === "search" ? appConf2.ui.form.colspan : appConf2.ui.modal.colspan;
+    if (mode !== "search") {
+      return {
+        colspan,
+        ...{
+          mode,
+          showAdvancedButton: false,
+          isAdvanced: false,
+          buttonList
+        }
+      };
+    }
+    return {
+      colspan,
+      style: {
+        marginLeft: showAdvancedButton ? "auto" : ""
+      },
+      ...{
+        showAdvancedButton,
+        buttonList
+      }
+    };
+  });
+  const actionStyle = computed(() => {
+    let gStyle = {
+      textAlign: "right"
+    };
+    const { style = {}, mode = "search" } = unref(actionsProps);
+    if (mode === "dialog") {
+      Object.assign(gStyle, {
+        display: "inline-block"
+      });
+      return {
+        style: {
+          ...style,
+          ...gStyle
+        }
+      };
+    } else if (mode === null) {
+      Object.assign(gStyle, {
+        display: "flex",
+        justifyContent: "center",
+        marginBottom: "20px"
+      });
+      return {
+        style: {
+          ...style,
+          ...gStyle
+        },
+        span: 24
+      };
+    }
+    return {
+      style: {
+        ...style,
+        ...gStyle
+      }
+    };
+  });
+  return {
+    handleMethod,
+    actionsProps,
+    actionStyle
+  };
+}
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "index",
   props: BasicProps,
   emits: ["register"],
   setup(__props, { emit: emits }) {
     const props = __props;
-    const { getAppConf } = useAppStore();
-    const attrs = useAttrs();
+    const propsRef = ref();
     const formElRef = ref(null);
     const formModel = reactive({});
-    const defaultValue = ref({});
-    const propsRef = ref();
     const schemaRef = ref(null);
+    const { appConf } = useAppStore();
     const getProps = computed(() => {
       return {
         ...props,
-        ...getAppConf.ui.form,
+        ...appConf.ui.form,
         ...unref(propsRef)
       };
     });
+    const attrs = useAttrs();
     const getBindValue = computed(() => {
       return {
         ...attrs,
@@ -1323,7 +1436,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       };
     });
     const getSchema = computed(() => {
-      return unref(schemaRef) || unref(getProps).schemas;
+      return unref(schemaRef) || unref(getProps).schemas || [];
     });
     const getFormClass = computed(() => {
       const { compact, mode } = unref(getProps);
@@ -1336,25 +1449,27 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         }
       ];
     });
-    function setProps(formProps) {
-      propsRef.value = deepMerge(unref(propsRef) || {}, formProps);
-      return null;
-    }
+    const defaultValue = ref({});
+    const { initDefault, handleFormValues } = useFormValues({
+      defaultValue,
+      getSchema,
+      formModel
+    });
     function setFormModel(key, value) {
       formModel[key] = value;
       const { validateTrigger } = unref(getBindValue);
       if (!validateTrigger || validateTrigger === "change") {
-        validateFields([key]).catch(() => {
+        validateFields([key]).then((rsp) => {
+          unref(getProps)?.modelChange(unref(formModel), key, value);
+        }).catch(() => {
         });
       }
     }
     function handleEnterPress() {
     }
-    const { initDefault, handleFormValues } = useFormValues({
-      defaultValue,
-      getSchema,
-      formModel
-    });
+    function setProps(formProps) {
+      propsRef.value = deepMerge(unref(propsRef) || {}, formProps);
+    }
     const {
       updateSchema,
       resetSchema,
@@ -1376,6 +1491,17 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       getProps,
       handleFormValues
     });
+    const {
+      handleMethod,
+      actionsProps,
+      actionStyle
+    } = useFormActions({
+      getProps,
+      defaultValue,
+      updateSchema,
+      getFormValues,
+      setFormValues
+    });
     const formActionMethods = {
       setProps,
       updateSchema,
@@ -1389,80 +1515,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       validateFields,
       getFormValues
     };
-    const getActionsProps = computed(() => {
-      const {
-        mode,
-        minShowColumn = getAppConf.ui.form.minShowColumn || 2,
-        schemas = [],
-        showAdvancedButton: advanced,
-        loading,
-        buttons
-      } = unref(getProps);
-      let showAdvancedButton = mode === "search" ? true : false;
-      if (advanced !== void 0) {
-        showAdvancedButton = advanced;
-      }
-      if (schemas.length <= minShowColumn) {
-        showAdvancedButton = false;
-      }
-      let buttonList = [];
-      if (isArray(buttons)) {
-        buttonList = [...buttons];
-      } else if (mode === "search" && !buttons) {
-        SEARCH_BTNS.forEach((it) => {
-          it.loading = it.label === SEARCH_BTN_NAME ? loading?.onSearch : loading?.onReset;
-          buttonList.push(it);
-        });
-      }
-      let colspan = mode === "search" ? getAppConf.ui.form.searchColspan : getAppConf.ui.form.dialogColspan;
-      if (mode !== "search") {
-        return {
-          colspan,
-          ...{
-            mode,
-            showAdvancedButton: false,
-            isAdvanced: false,
-            buttonList
-          }
-        };
-      }
-      return {
-        colspan,
-        style: {
-          marginLeft: showAdvancedButton ? "auto" : ""
-        },
-        ...{
-          showAdvancedButton,
-          buttonList
-        }
-      };
-    });
-    const [handleMethod] = useFormActions({
-      getProps,
-      defaultValue,
-      updateSchema,
-      getFormValues,
-      setFormValues
-    });
     onMounted(() => {
-      setFormValues(null);
       emits("register", formActionMethods);
       initDefault();
-      if (unref(getProps)?.registerInstance) {
-        unref(getProps)?.registerInstance(formActionMethods);
-      }
+      unref(getProps)?.modelChange(unref(formModel));
     });
-    watch(
-      () => unref(getProps).onSearch,
-      () => {
-        useTimeoutFn(() => {
-          const { onSearch, autoFetch } = unref(getProps);
-          if (autoFetch && onSearch && isFunction(onSearch)) {
-            onSearch(toRaw(defaultValue.value));
-          }
-        }, 1);
-      }
-    );
     watch(
       () => unref(getProps).model,
       () => {
@@ -1478,14 +1535,16 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
     );
     return (_ctx, _cache) => {
+      const _component_AFormItem = FormItem$1;
+      const _component_ACol = Col$1;
       const _component_ARow = Row;
       const _component_AForm = Form$1;
-      return openBlock(), createBlock(_component_AForm, mergeProps(unref(getBindValue), {
+      return openBlock(), createBlock(_component_AForm, mergeProps({
         ref_key: "formElRef",
-        ref: formElRef,
+        ref: formElRef
+      }, unref(getBindValue), {
         class: unref(getFormClass),
-        model: formModel,
-        layout: unref(getProps).layout,
+        model: unref(formModel),
         onKeypress: withKeys(handleEnterPress, ["enter"])
       }), {
         default: withCtx(() => [
@@ -1498,8 +1557,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                   key: schema.name,
                   schema,
                   "form-props": unref(getProps),
-                  "form-model": formModel,
-                  "default-values": defaultValue.value,
+                  "form-model": unref(formModel),
+                  "default-values": unref(defaultValue),
                   "set-form-model": setFormModel,
                   "form-action-type": formActionMethods
                 }, createSlots({ _: 2 }, [
@@ -1513,86 +1572,31 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                   })
                 ]), 1032, ["schema", "form-props", "form-model", "default-values"]);
               }), 128)),
-              unref(getActionsProps).buttonList?.length ? (openBlock(), createBlock(unref(_sfc_main$1), mergeProps({ key: 0 }, unref(getActionsProps), { onHandleMethod: unref(handleMethod) }), null, 16, ["onHandleMethod"])) : createCommentVNode("", true)
+              unref(actionsProps).buttonList?.length ? (openBlock(), createBlock(_component_ACol, normalizeProps(mergeProps({ key: 0 }, unref(actionStyle))), {
+                default: withCtx(() => [
+                  createVNode(_component_AFormItem, {
+                    class: "dt-form-btns !mb-0",
+                    style: normalizeStyle({
+                      "margin-bottom": unref(getProps).mode === "search" ? "16px" : "0px"
+                    })
+                  }, {
+                    default: withCtx(() => [
+                      createVNode(_sfc_main$1, mergeProps(unref(actionsProps), { onHandleMethod: unref(handleMethod) }), null, 16, ["onHandleMethod"])
+                    ]),
+                    _: 1
+                  }, 8, ["style"])
+                ]),
+                _: 1
+              }, 16)) : createCommentVNode("", true)
             ]),
             _: 3
           }, 16)
         ]),
         _: 3
-      }, 16, ["class", "model", "layout", "onKeypress"]);
+      }, 16, ["class", "model", "onKeypress"]);
     };
   }
 });
-function useForm(props) {
-  const formRef = ref(null);
-  const loadedRef = ref(false);
-  function register(instance) {
-    if (unref(loadedRef) && instance === unref(formRef))
-      return;
-    formRef.value = instance;
-    loadedRef.value = true;
-    watch(
-      () => props,
-      () => props && instance.setProps(props),
-      {
-        immediate: true,
-        deep: true
-      }
-    );
-  }
-  async function getForm() {
-    const form = unref(formRef);
-    if (!form)
-      console.error("\u8868\u5355\u672A\u7533\u660E!");
-    await nextTick();
-    return form;
-  }
-  const methods = {
-    setProps: async (props2) => {
-      const form = await getForm();
-      form.setProps(props2);
-    },
-    updateSchema: async (data) => {
-      const form = await getForm();
-      form.updateSchema(data);
-    },
-    resetSchema: async (data) => {
-      const form = await getForm();
-      form.resetSchema(data);
-    },
-    clearValidate: async (name) => {
-      const form = await getForm();
-      form.clearValidate(name);
-    },
-    resetForms: async () => {
-      const form = await getForm();
-      form.resetForms();
-    },
-    removeFormByName: async (name) => {
-      unref(formRef)?.removeFormByName(name);
-    },
-    setFormValues: async (values) => {
-      const form = await getForm();
-      form.setFormValues(values);
-    },
-    appendFormItems: async (schema, prefixName, first) => {
-      const form = await getForm();
-      form.appendFormItems(schema, prefixName, first);
-    },
-    validate: async (nameList) => {
-      const form = await getForm();
-      return form.validate(nameList);
-    },
-    validateFields: async (nameList) => {
-      const form = await getForm();
-      return form.validateFields(nameList);
-    },
-    getFormValues: () => {
-      return unref(formRef)?.getFormValues();
-    }
-  };
-  return [register, methods];
-}
 export {
   _sfc_main as DtForm,
   _sfc_main$1 as DtFormButtons,