@aplus-frontend/ui 0.0.1-beta.3 → 0.0.1-beta.31

package/es/src/pro-form/index.d.ts

@@ -6,6 +6,8 @@ import { default as ApiTree } from './components/api-tree.vue';
 import { default as ApiTreeSelect } from './components/api-tree-select.vue';
 import { default as RadioButtonGroup } from './components/radio-button-group.vue';
 import { default as ProForm } from './pro-form.vue';
+import { default as ProTableForm } from './table-form.vue';
+import { default as ProTableFormInner } from './table-form-inner.vue';
 
 type FieldType = {
     ApiCascader: typeof ApiCascader;
@@ -20,5 +22,7 @@ declare const Field: FieldType;
 export * from './components/interface';
 export * from './types/form';
 export * from './types/form-item';
+export * from './types/table-form';
+export { useComponentRegister } from './hooks/use-component-register';
 export { useForm } from './hooks/use-form';
-export { Field, ApiCascader, ApiRadioGroup, ApiSelect, ApiTransfer, ApiTree, RadioButtonGroup, ProForm, ApiTreeSelect };
+export { Field, ApiCascader, ApiRadioGroup, ApiSelect, ApiTransfer, ApiTree, RadioButtonGroup, ProForm, ApiTreeSelect, ProTableForm, ProTableFormInner };

package/es/src/pro-form/index.mjs

@@ -1,43 +1,46 @@
-import i from "./components/api-cascader.vue.mjs";
+import "./components/api-cascader.vue2.mjs";
+import "./components/api-radio-group.vue2.mjs";
+import "./components/api-select.vue2.mjs";
+import "./components/api-transfer.vue2.mjs";
+import "./components/api-tree.vue2.mjs";
+import "./components/api-tree-select.vue2.mjs";
+import "./components/radio-button-group.vue2.mjs";
+import "./pro-form.vue2.mjs";
+import "./table-form.vue2.mjs";
+import "./table-form-inner.vue2.mjs";
+import "./components/interface.mjs";
+import { isComponentFormSchema as k, isSlotFormSchema as q } from "./types/form.mjs";
+import "./types/form-item.mjs";
+import "./types/table-form.mjs";
+import { useComponentRegister as w } from "./hooks/use-component-register.mjs";
+import { useForm as z } from "./hooks/use-form.mjs";
+import o from "./components/api-cascader.vue.mjs";
 import r from "./components/api-radio-group.vue.mjs";
-import o from "./components/api-select.vue.mjs";
-import p from "./components/api-transfer.vue.mjs";
-import m from "./components/api-tree.vue.mjs";
+import i from "./components/api-select.vue.mjs";
+import m from "./components/api-transfer.vue.mjs";
+import p from "./components/api-tree.vue.mjs";
 import t from "./components/api-tree-select.vue.mjs";
-import a from "./components/radio-button-group.vue.mjs";
-import "vue";
-import "ant-design-vue";
-import "./component-map.mjs";
-import "../basic/index.mjs";
-import "lodash-unified";
-import "@fruits-chain/utils";
-import "../config-provider/index.mjs";
-import "./components/style/form-item.css";
-import "../base-button/index.mjs";
-import "@aplus-frontend/hooks";
-import "./components/style/form-action.css";
-import "dayjs";
-import "@aplus-frontend/utils";
-import "@vueuse/core";
-import "./hooks/use-break-point.mjs";
-import "../modal/index.mjs";
-import "./style/index.css";
-const q = {
-  ApiCascader: i,
+import e from "./components/radio-button-group.vue.mjs";
+const g = {
+  ApiCascader: o,
   ApiRadioGroup: r,
-  ApiSelect: o,
-  ApiTransfer: p,
-  ApiTree: m,
+  ApiSelect: i,
+  ApiTransfer: m,
+  ApiTree: p,
   ApiTreeSelect: t,
-  RadioButtonGroup: a
+  RadioButtonGroup: e
 };
 export {
-  i as ApiCascader,
+  o as ApiCascader,
   r as ApiRadioGroup,
-  o as ApiSelect,
-  p as ApiTransfer,
-  m as ApiTree,
+  i as ApiSelect,
+  m as ApiTransfer,
+  p as ApiTree,
   t as ApiTreeSelect,
-  q as Field,
-  a as RadioButtonGroup
+  g as Field,
+  e as RadioButtonGroup,
+  k as isComponentFormSchema,
+  q as isSlotFormSchema,
+  w as useComponentRegister,
+  z as useForm
 };

package/es/src/pro-form/pro-form.vue.d.ts

@@ -66,7 +66,7 @@ declare const _default: __VLS_WithTemplateSlots< DefineComponent<__VLS_WithDefau
     "onAdvanced-change"?: ((...args: any[]) => any) | undefined;
     "onField-value-change"?: ((...args: any[]) => any) | undefined;
 }, {
-    size: "small" | "large" | "default";
+    size: "default" | "small" | "large";
     layout: "inline" | "horizontal" | "vertical";
     labelWidth: string | number;
     rulesMessageJoinLabel: boolean;
@@ -75,7 +75,7 @@ declare const _default: __VLS_WithTemplateSlots< DefineComponent<__VLS_WithDefau
     showActionButtonGroup: boolean;
     showResetButton: boolean;
     showSubmitButton: boolean;
-    schemas: FormSchema[];
+    schemas: FormSchema<any>[];
     emptySpan: number | Partial< ColEx>;
     fieldMapToTime: FieldMapToTime;
     autoSubmitOnEnter: boolean;

package/es/src/pro-form/pro-form.vue.mjs

@@ -1,23 +1,25 @@
-import { defineComponent as pe, useAttrs as ve, reactive as $, ref as f, computed as c, unref as a, watch as b, nextTick as ye, onMounted as ge, openBlock as V, createBlock as N, mergeProps as C, withKeys as Be, withCtx as h, createVNode as Y, normalizeProps as z, guardReactiveProps as U, renderSlot as A, createElementBlock as be, Fragment as he, renderList as M, createSlots as K } from "vue";
+import { defineComponent as pe, useAttrs as ve, reactive as $, ref as f, computed as m, unref as a, watch as b, nextTick as ye, onMounted as ge, openBlock as V, createBlock as N, mergeProps as C, withKeys as Be, withCtx as h, createVNode as Y, normalizeProps as z, guardReactiveProps as j, renderSlot as A, createElementBlock as be, Fragment as he, renderList as M, createSlots as K } from "vue";
 import { Form as Ae, Row as Fe } from "ant-design-vue";
-import Se from "./components/form-item.vue.mjs";
-import we from "./components/form-action.vue.mjs";
-import { dateItemType as Pe, isIncludeSimpleComponents as De } from "./helper.mjs";
+import "./components/form-item.vue.mjs";
+import "./components/form-action.vue.mjs";
+import { dateItemType as Se, isIncludeSimpleComponents as we } from "./helper.mjs";
 import F from "dayjs";
-import { deepMerge as Ve } from "@aplus-frontend/utils";
-import { useFormValues as Ce } from "./hooks/use-form-values.mjs";
-import Me from "./hooks/use-advanced.mjs";
-import { useFormEvents as Re } from "./hooks/use-form-events.mjs";
-import { createFormContext as Te } from "./hooks/use-form-context.mjs";
-import { useAutoFocus as _e } from "./hooks/use-auto-focus.mjs";
+import { deepMerge as Pe } from "@aplus-frontend/utils";
+import { useFormValues as De } from "./hooks/use-form-values.mjs";
+import Ve from "./hooks/use-advanced.mjs";
+import { useFormEvents as Ce } from "./hooks/use-form-events.mjs";
+import { createFormContext as Me } from "./hooks/use-form-context.mjs";
+import { useAutoFocus as Re } from "./hooks/use-auto-focus.mjs";
 import "../modal/index.mjs";
-import { useDebounceFn as Ee } from "@vueuse/core";
-import { cloneDeep as Oe } from "lodash-unified";
+import { useDebounceFn as Te } from "@vueuse/core";
+import { cloneDeep as _e } from "lodash-unified";
 import "../config-provider/index.mjs";
 import "./style/index.css";
-import { useModalContext as ke } from "../modal/hooks/use-modal-context.mjs";
-import { useNamespace as He } from "../config-provider/hooks/use-namespace.mjs";
-const ot = /* @__PURE__ */ pe({
+import { useModalContext as Ee } from "../modal/hooks/use-modal-context.mjs";
+import { useNamespace as Oe } from "../config-provider/hooks/use-namespace.mjs";
+import ke from "./components/form-item.vue2.mjs";
+import He from "./components/form-action.vue2.mjs";
+const nt = /* @__PURE__ */ pe({
   name: "BasicForm",
   __name: "pro-form",
   props: {
@@ -70,41 +72,41 @@ const ot = /* @__PURE__ */ pe({
     "register",
     "field-value-change"
   ],
-  setup(r, { expose: d, emit: j }) {
-    const p = r, v = j, x = ve(), l = $({}), m = ke(), R = $({
+  setup(r, { expose: d, emit: U }) {
+    const p = r, v = U, x = ve(), s = $({}), c = Ee(), R = $({
       isAdvanced: !0,
       hideAdvanceBtn: !1,
       isLoad: !1,
       actionSpan: 6
-    }), y = f({}), S = f(!1), w = f(), T = f(null), P = f(null), { b: G, m: J } = He("basic-form"), n = c(() => ({ ...p, ...a(w) })), W = c(() => [
+    }), y = f({}), S = f(!1), w = f(), T = f(null), P = f(null), { b: G, m: J } = Oe("basic-form"), n = m(() => ({ ...p, ...a(w) })), W = m(() => [
       G(),
       {
         [J("compact")]: a(n).compact
       }
-    ]), q = c(() => {
+    ]), q = m(() => {
       const { baseRowStyle: e = {}, rowProps: o } = a(n);
       return {
         style: e,
         ...o
       };
-    }), Q = c(
+    }), Q = m(
       () => ({ ...x, ...p, ...a(n) })
-    ), u = c(() => {
-      const e = Oe(
+    ), u = m(() => {
+      const e = _e(
         a(T) || a(n).schemas
       );
       for (const o of e) {
         const {
           defaultValue: t,
-          component: s,
+          component: l,
           componentProps: i = {},
           isHandleDateDefaultValue: fe = !0
         } = o;
-        if (fe && t && s && Pe.includes(s)) {
+        if (fe && t && l && Se.includes(l)) {
           const de = {
             schema: o,
             tableAction: p.tableAction ?? {},
-            formModel: l,
+            formModel: s,
             formActionType: {}
           }, B = i ? typeof i == "function" ? i(de).valueFormat : i.valueFormat : null;
           if (!Array.isArray(t))
@@ -120,22 +122,22 @@ const ot = /* @__PURE__ */ pe({
         }
       }
       return a(n).showAdvancedButton ? e.filter(
-        (o) => !De(o.component)
+        (o) => !we(o.component)
       ) : e;
-    }), { handleToggleAdvanced: X, fieldsIsAdvancedMap: Z } = Me({
+    }), { handleToggleAdvanced: X, fieldsIsAdvancedMap: Z } = Ve({
       advanceState: R,
       emit: v,
       getProps: n,
       getSchema: u,
-      formModel: l,
+      formModel: s,
       defaultValueRef: y
-    }), { handleFormValues: ee, initDefault: _ } = Ce({
+    }), { handleFormValues: ee, initDefault: _ } = De({
       getProps: n,
       defaultValueRef: y,
       getSchema: u,
-      formModel: l
+      formModel: s
     });
-    _e({
+    Re({
       getSchema: u,
       getProps: n,
       isInitedDefault: S,
@@ -151,20 +153,20 @@ const ot = /* @__PURE__ */ pe({
       updateSchema: ne,
       resetSchema: k,
       appendSchemaByField: re,
-      removeSchemaByField: le,
+      removeSchemaByField: se,
       resetFields: H,
-      scrollToField: se
-    } = Re({
+      scrollToField: le
+    } = Ce({
       emit: v,
       getProps: n,
-      formModel: l,
+      formModel: s,
       getSchema: u,
       defaultValueRef: y,
       formElRef: P,
       schemaRef: T,
       handleFormValues: ee
     });
-    Te({
+    Me({
       resetAction: H,
       submitAction: g
     }), b(
@@ -186,24 +188,24 @@ const ot = /* @__PURE__ */ pe({
       (e) => {
         ye(() => {
           var o;
-          (o = m == null ? void 0 : m.redoModalHeight) == null || o.call(m);
+          (o = c == null ? void 0 : c.redoModalHeight) == null || o.call(c);
         }), !a(S) && e != null && e.length && (_(), S.value = !0);
       }
     ), b(
-      () => l,
-      Ee(() => {
+      () => s,
+      Te(() => {
         a(n).submitOnChange && g();
       }, 300),
       { deep: !0 }
     );
     async function ue(e) {
-      w.value = Ve(a(w) || {}, e);
+      w.value = Pe(a(w) || {}, e);
     }
     function ie(e, o, t) {
-      l[e] = o, v("field-value-change", e, o), t && t.itemProps && !t.itemProps.autoLink && O([e]).catch((s) => {
+      s[e] = o, v("field-value-change", e, o), t && t.itemProps && !t.itemProps.autoLink && O([e]).catch((l) => {
       });
     }
-    function ce(e) {
+    function me(e) {
       const { autoSubmitOnEnter: o } = a(n);
       if (o && e.key === "Enter" && e.target && e.target instanceof HTMLElement) {
         const t = e.target;
@@ -217,14 +219,14 @@ const ot = /* @__PURE__ */ pe({
       updateSchema: ne,
       resetSchema: k,
       setProps: ue,
-      removeSchemaByField: le,
+      removeSchemaByField: se,
       appendSchemaByField: re,
       clearValidate: te,
       validateFields: O,
       validate: oe,
       submit: g,
-      scrollToField: se
-    }, me = c(
+      scrollToField: le
+    }, ce = m(
       () => ({ ...n.value, ...R })
     );
     return d({
@@ -235,14 +237,14 @@ const ot = /* @__PURE__ */ pe({
       class: W.value,
       ref_key: "formElRef",
       ref: P,
-      model: l,
-      onKeypress: Be(ce, ["enter"])
+      model: s,
+      onKeypress: Be(me, ["enter"])
     }), {
       default: h(() => [
-        Y(a(Fe), z(U(q.value)), {
+        Y(a(Fe), z(j(q.value)), {
           default: h(() => [
             A(e.$slots, "formHeader"),
-            (V(!0), be(he, null, M(u.value, (t) => (V(), N(Se, {
+            (V(!0), be(he, null, M(u.value, (t) => (V(), N(ke, {
               key: t.field,
               isAdvanced: a(Z)[t.field],
               tableAction: e.tableAction,
@@ -250,17 +252,17 @@ const ot = /* @__PURE__ */ pe({
               schema: t,
               formProps: n.value,
               allDefaultValues: y.value,
-              formModel: l,
+              formModel: s,
               setFormModel: ie
             }, K({ _: 2 }, [
-              M(Object.keys(e.$slots), (s) => ({
-                name: s,
+              M(Object.keys(e.$slots), (l) => ({
+                name: l,
                 fn: h((i) => [
-                  A(e.$slots, s, C({ ref_for: !0 }, i || {}))
+                  A(e.$slots, l, C({ ref_for: !0 }, i || {}))
                 ])
               }))
             ]), 1032, ["isAdvanced", "tableAction", "schema", "formProps", "allDefaultValues", "formModel"]))), 128)),
-            Y(we, C(me.value, { onToggleAdvanced: a(X) }), K({ _: 2 }, [
+            Y(He, C(ce.value, { onToggleAdvanced: a(X) }), K({ _: 2 }, [
               M([
                 "resetBefore",
                 "submitBefore",
@@ -268,8 +270,8 @@ const ot = /* @__PURE__ */ pe({
                 "advanceAfter"
               ], (t) => ({
                 name: t,
-                fn: h((s) => [
-                  A(e.$slots, t, z(U(s || {})))
+                fn: h((l) => [
+                  A(e.$slots, t, z(j(l || {})))
                 ])
               }))
             ]), 1040, ["onToggleAdvanced"]),
@@ -283,5 +285,5 @@ const ot = /* @__PURE__ */ pe({
   }
 });
 export {
-  ot as default
+  nt as default
 };

package/es/src/pro-form/style/table-form.css

@@ -0,0 +1,101 @@
+.aplus-pro-table-form .table-form-admin .ant-table .ant-table-tbody > tr > td,
+.aplus-pro-table-form .table-form-admin .ant-table .ant-table-body .ant-table-tbody > tr.ant-table-row > td {
+  padding: 18px 16px 0px ;
+}
+.aplus-pro-table-form .table-form-admin .ant-table .ant-table-body .ant-table-tbody > tr.ant-table-row > td:first-child {
+  padding: 18px 16px 0 ;
+}
+.aplus-pro-table-form .table-form-admin .ant-table .ant-form-item {
+  margin-bottom: 18px;
+}
+.aplus-pro-table-form .table-form-admin .ant-table .ant-form-item .ant-form-item-explain {
+  line-height: 18px;
+}
+.aplus-pro-table-form .table-form-admin .ant-table .ant-form-item .ant-form-item-explain + div {
+  height: 18px ;
+}
+.aplus-pro-table-form .table-form-admin .ant-table .ant-table-thead > tr > th {
+  padding: 10.5px 16px !important;
+  background: #fafafa;
+  color: #182948;
+}
+.aplus-pro-table-form .table-form-aplus .ant-form-item {
+  margin-bottom: 0;
+}
+.aplus-pro-table-form .table-form-aplus .ant-form-item-has-error.ant-form-item {
+  margin-bottom: 24px;
+}
+.aplus-pro-table-form .table-form-aplus .ant-table-tbody > tr > td,
+.aplus-pro-table-form .table-form-aplus .ant-table-body .ant-table-tbody > tr.ant-table-row > td {
+  padding: 16px 8px ;
+}
+.aplus-pro-table-form .table-form-aplus .ant-table-body .ant-table-tbody > tr.ant-table-row > td:first-child {
+  padding: 16px 8px ;
+}
+.aplus-pro-table-form .ant-table {
+  border-radius: 0 !important;
+}
+.aplus-pro-table-form .ant-table .ant-table-container table > thead > tr:first-child > *:first-child {
+  border-start-start-radius: 0;
+}
+.aplus-pro-table-form .ant-table .ant-table-container table > thead > tr:first-child > *:last-child {
+  border-start-end-radius: 0;
+}
+.aplus-pro-table-form .ant-table .ant-table-container,
+.aplus-pro-table-form .ant-table .ant-table-thead {
+  border-start-start-radius: 0;
+  border-start-end-radius: 0;
+}
+.aplus-pro-table-form .ant-table .ant-table-thead > tr > th {
+  padding: 15.5px 8px !important;
+  background: #f2f6f9;
+  color: #182948;
+  text-align: left !important;
+}
+.aplus-pro-table-form .ant-table .ant-table-thead > tr > th::before {
+  display: none;
+  visibility: hidden;
+  width: 0;
+}
+.aplus-pro-table-form .ant-table .ant-table-content {
+  overflow-x: scroll;
+}
+.aplus-pro-table-form .ant-table-row.ant-table-row-level-0 .ant-table-cell {
+  vertical-align: top;
+}
+.aplus-pro-table-form--required {
+  color: #FF4D4F;
+  margin-top: 4px;
+}
+.aplus-pro-table-form--edit-cell {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-start;
+  justify-content: flex-start;
+}
+.aplus-pro-table-form--form-item {
+  width: 100%;
+}
+.aplus-pro-table-form--edit-wraper {
+  display: flex;
+}
+.aplus-pro-table-form--field-error .ant-input-number,
+.aplus-pro-table-form--field-error .ant-input {
+  border-color: #ff4d4f;
+}
+.aplus-pro-table-form--text-cell {
+  margin-top: 5px;
+}
+.aplus-pro-table-form--action-cell {
+  display: flex;
+  align-items: center;
+  margin-top: 5px;
+}
+.aplus-pro-table-form--error-tip {
+  margin-left: 8px;
+  color: #FF4D4F;
+}
+.aplus-pro-table-form .ant-input-number {
+  width: 100% !important;
+}

package/es/src/pro-form/table-form-inner.vue.d.ts

@@ -0,0 +1,44 @@
+import { EditColumn, Recordable, ProTableFormInnerProps, TableActionTypes } from './types/table-form';
+import { DefineComponent, ComponentOptionsMixin, PublicProps, ExtractPropTypes, PropType } from 'vue';
+
+declare const _default: DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<ProTableFormInnerProps>, {
+    disabled: boolean;
+    dataPath: () => never[];
+    actions: () => never[];
+    bordered: boolean;
+    editableFunc: () => true;
+}>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+    editChange: (...args: any[]) => void;
+}, string, PublicProps, Readonly< ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<ProTableFormInnerProps>, {
+    disabled: boolean;
+    dataPath: () => never[];
+    actions: () => never[];
+    bordered: boolean;
+    editableFunc: () => true;
+}>>> & {
+    onEditChange?: ((...args: any[]) => any) | undefined;
+}, {
+    disabled: boolean;
+    bordered: boolean;
+    actions: TableActionTypes;
+    dataPath: string[];
+    editableFunc: (column: EditColumn<any>, record: Recordable) => boolean;
+}, {}>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};