@das-fed/ui 6.4.0-hot.5 → 6.4.0-hot.50

package/packages/components/form/index.d.ts

@@ -1,18 +1,6 @@
 import '@das-fed/ui/packages/global/theme';
 declare const DasForm: import("@das-fed/utils").SFCWithInstall<{
     new (...args: any[]): import("vue").CreateComponentPublicInstance<Readonly<import("vue").ExtractPropTypes<{
-        alignItems: {
-            type: import("vue").PropType<string>;
-            default: string;
-        };
-        marginBottom: {
-            type: import("vue").PropType<string>;
-            default: string;
-        };
-        marginRight: {
-            type: import("vue").PropType<string>;
-            default: string;
-        };
         labelLength: {
             type: import("vue").PropType<string | number>;
             default: number;
@@ -22,13 +10,25 @@ declare const DasForm: import("@das-fed/utils").SFCWithInstall<{
             default: number;
         };
         labelPosition: {
-            type: import("vue").PropType<"left" | "top" | "right">;
+            type: import("vue").PropType<"top" | "left" | "right">;
             default: string;
         };
         alignType: {
             type: import("vue").PropType<"vertical" | "horizontal">;
             default: string;
         };
+        alignItems: {
+            type: import("vue").PropType<string>;
+            default: string;
+        };
+        marginBottom: {
+            type: import("vue").PropType<string>;
+            default: string;
+        };
+        marginRight: {
+            type: import("vue").PropType<string>;
+            default: string;
+        };
         cols: {
             type: import("vue").PropType<number>;
         };
@@ -48,23 +48,15 @@ declare const DasForm: import("@das-fed/utils").SFCWithInstall<{
             type: import("vue").PropType<"default" | "overlay">;
             default: string;
         };
+        autoMarginRight: {
+            type: import("vue").PropType<boolean>;
+            default: boolean;
+        };
     }>>, {
         validate: (callback: any) => Promise<void>;
         validateField: (prop: string, callback: any) => Promise<void>;
         resetField: () => void;
     }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & Readonly<import("vue").ExtractPropTypes<{
-        alignItems: {
-            type: import("vue").PropType<string>;
-            default: string;
-        };
-        marginBottom: {
-            type: import("vue").PropType<string>;
-            default: string;
-        };
-        marginRight: {
-            type: import("vue").PropType<string>;
-            default: string;
-        };
         labelLength: {
             type: import("vue").PropType<string | number>;
             default: number;
@@ -74,13 +66,25 @@ declare const DasForm: import("@das-fed/utils").SFCWithInstall<{
             default: number;
         };
         labelPosition: {
-            type: import("vue").PropType<"left" | "top" | "right">;
+            type: import("vue").PropType<"top" | "left" | "right">;
             default: string;
         };
         alignType: {
             type: import("vue").PropType<"vertical" | "horizontal">;
             default: string;
         };
+        alignItems: {
+            type: import("vue").PropType<string>;
+            default: string;
+        };
+        marginBottom: {
+            type: import("vue").PropType<string>;
+            default: string;
+        };
+        marginRight: {
+            type: import("vue").PropType<string>;
+            default: string;
+        };
         cols: {
             type: import("vue").PropType<number>;
         };
@@ -100,18 +104,23 @@ declare const DasForm: import("@das-fed/utils").SFCWithInstall<{
             type: import("vue").PropType<"default" | "overlay">;
             default: string;
         };
+        autoMarginRight: {
+            type: import("vue").PropType<boolean>;
+            default: boolean;
+        };
     }>>, {
-        alignItems: string;
-        marginBottom: string;
-        marginRight: string;
         labelLength: number | string;
         contentWidth: number | string;
         labelPosition: "left" | "right" | "top";
         alignType: "vertical" | "horizontal";
+        alignItems: string;
+        marginBottom: string;
+        marginRight: string;
         rules: any;
         labelMarginRight: string;
         isSearchForm: boolean;
         errorMode: "default" | "overlay";
+        autoMarginRight: boolean;
     }, true, {}, {}, {
         P: {};
         B: {};
@@ -120,18 +129,6 @@ declare const DasForm: import("@das-fed/utils").SFCWithInstall<{
         M: {};
         Defaults: {};
     }, Readonly<import("vue").ExtractPropTypes<{
-        alignItems: {
-            type: import("vue").PropType<string>;
-            default: string;
-        };
-        marginBottom: {
-            type: import("vue").PropType<string>;
-            default: string;
-        };
-        marginRight: {
-            type: import("vue").PropType<string>;
-            default: string;
-        };
         labelLength: {
             type: import("vue").PropType<string | number>;
             default: number;
@@ -141,13 +138,25 @@ declare const DasForm: import("@das-fed/utils").SFCWithInstall<{
             default: number;
         };
         labelPosition: {
-            type: import("vue").PropType<"left" | "top" | "right">;
+            type: import("vue").PropType<"top" | "left" | "right">;
             default: string;
         };
         alignType: {
             type: import("vue").PropType<"vertical" | "horizontal">;
             default: string;
         };
+        alignItems: {
+            type: import("vue").PropType<string>;
+            default: string;
+        };
+        marginBottom: {
+            type: import("vue").PropType<string>;
+            default: string;
+        };
+        marginRight: {
+            type: import("vue").PropType<string>;
+            default: string;
+        };
         cols: {
             type: import("vue").PropType<number>;
         };
@@ -167,39 +176,32 @@ declare const DasForm: import("@das-fed/utils").SFCWithInstall<{
             type: import("vue").PropType<"default" | "overlay">;
             default: string;
         };
+        autoMarginRight: {
+            type: import("vue").PropType<boolean>;
+            default: boolean;
+        };
     }>>, {
         validate: (callback: any) => Promise<void>;
         validateField: (prop: string, callback: any) => Promise<void>;
         resetField: () => void;
     }, {}, {}, {}, {
-        alignItems: string;
-        marginBottom: string;
-        marginRight: string;
         labelLength: number | string;
         contentWidth: number | string;
         labelPosition: "left" | "right" | "top";
         alignType: "vertical" | "horizontal";
+        alignItems: string;
+        marginBottom: string;
+        marginRight: string;
         rules: any;
         labelMarginRight: string;
         isSearchForm: boolean;
         errorMode: "default" | "overlay";
+        autoMarginRight: boolean;
     }>;
     __isFragment?: never;
     __isTeleport?: never;
     __isSuspense?: never;
 } & import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
-    alignItems: {
-        type: import("vue").PropType<string>;
-        default: string;
-    };
-    marginBottom: {
-        type: import("vue").PropType<string>;
-        default: string;
-    };
-    marginRight: {
-        type: import("vue").PropType<string>;
-        default: string;
-    };
     labelLength: {
         type: import("vue").PropType<string | number>;
         default: number;
@@ -209,13 +211,25 @@ declare const DasForm: import("@das-fed/utils").SFCWithInstall<{
         default: number;
     };
     labelPosition: {
-        type: import("vue").PropType<"left" | "top" | "right">;
+        type: import("vue").PropType<"top" | "left" | "right">;
         default: string;
     };
     alignType: {
         type: import("vue").PropType<"vertical" | "horizontal">;
         default: string;
     };
+    alignItems: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    marginBottom: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    marginRight: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
     cols: {
         type: import("vue").PropType<number>;
     };
@@ -235,22 +249,27 @@ declare const DasForm: import("@das-fed/utils").SFCWithInstall<{
         type: import("vue").PropType<"default" | "overlay">;
         default: string;
     };
+    autoMarginRight: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
 }>>, {
     validate: (callback: any) => Promise<void>;
     validateField: (prop: string, callback: any) => Promise<void>;
     resetField: () => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
-    alignItems: string;
-    marginBottom: string;
-    marginRight: string;
     labelLength: number | string;
     contentWidth: number | string;
     labelPosition: "left" | "right" | "top";
     alignType: "vertical" | "horizontal";
+    alignItems: string;
+    marginBottom: string;
+    marginRight: string;
     rules: any;
     labelMarginRight: string;
     isSearchForm: boolean;
     errorMode: "default" | "overlay";
+    autoMarginRight: boolean;
 }, {}, string, {}> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
     $slots: {
         default?(_: {}): any;
@@ -260,43 +279,33 @@ declare const DasFormRef: () => import("vue").Ref<({
     $: import("vue").ComponentInternalInstance;
     $data: {};
     $props: Partial<{
-        alignItems: string;
-        marginBottom: string;
-        marginRight: string;
         labelLength: number | string;
         contentWidth: number | string;
         labelPosition: "left" | "right" | "top";
         alignType: "vertical" | "horizontal";
+        alignItems: string;
+        marginBottom: string;
+        marginRight: string;
         rules: any;
         labelMarginRight: string;
         isSearchForm: boolean;
         errorMode: "default" | "overlay";
+        autoMarginRight: boolean;
     }> & Omit<{
-        readonly alignItems: string;
-        readonly marginBottom: string;
-        readonly marginRight: string;
         readonly labelLength: number | string;
         readonly contentWidth: number | string;
         readonly labelPosition: "left" | "right" | "top";
         readonly alignType: "vertical" | "horizontal";
+        readonly alignItems: string;
+        readonly marginBottom: string;
+        readonly marginRight: string;
         readonly rules: any;
         readonly labelMarginRight: string;
         readonly isSearchForm: boolean;
         readonly errorMode: "default" | "overlay";
+        readonly autoMarginRight: boolean;
         readonly cols?: number;
     } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & Readonly<import("vue").ExtractPropTypes<{
-        alignItems: {
-            type: import("vue").PropType<string>;
-            default: string;
-        };
-        marginBottom: {
-            type: import("vue").PropType<string>;
-            default: string;
-        };
-        marginRight: {
-            type: import("vue").PropType<string>;
-            default: string;
-        };
         labelLength: {
             type: import("vue").PropType<string | number>;
             default: number;
@@ -306,13 +315,25 @@ declare const DasFormRef: () => import("vue").Ref<({
             default: number;
         };
         labelPosition: {
-            type: import("vue").PropType<"left" | "top" | "right">;
+            type: import("vue").PropType<"top" | "left" | "right">;
             default: string;
         };
         alignType: {
             type: import("vue").PropType<"vertical" | "horizontal">;
             default: string;
         };
+        alignItems: {
+            type: import("vue").PropType<string>;
+            default: string;
+        };
+        marginBottom: {
+            type: import("vue").PropType<string>;
+            default: string;
+        };
+        marginRight: {
+            type: import("vue").PropType<string>;
+            default: string;
+        };
         cols: {
             type: import("vue").PropType<number>;
         };
@@ -332,7 +353,11 @@ declare const DasFormRef: () => import("vue").Ref<({
             type: import("vue").PropType<"default" | "overlay">;
             default: string;
         };
-    }>>, "alignItems" | "marginBottom" | "marginRight" | "labelLength" | "contentWidth" | "labelPosition" | "alignType" | "rules" | "labelMarginRight" | "isSearchForm" | "errorMode">;
+        autoMarginRight: {
+            type: import("vue").PropType<boolean>;
+            default: boolean;
+        };
+    }>>, "labelLength" | "contentWidth" | "labelPosition" | "alignType" | "alignItems" | "marginBottom" | "marginRight" | "rules" | "labelMarginRight" | "isSearchForm" | "errorMode" | "autoMarginRight">;
     $attrs: {
         [x: string]: unknown;
     };
@@ -347,18 +372,6 @@ declare const DasFormRef: () => import("vue").Ref<({
     $emit: (event: string, ...args: any[]) => void;
     $el: any;
     $options: import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
-        alignItems: {
-            type: import("vue").PropType<string>;
-            default: string;
-        };
-        marginBottom: {
-            type: import("vue").PropType<string>;
-            default: string;
-        };
-        marginRight: {
-            type: import("vue").PropType<string>;
-            default: string;
-        };
         labelLength: {
             type: import("vue").PropType<string | number>;
             default: number;
@@ -368,13 +381,25 @@ declare const DasFormRef: () => import("vue").Ref<({
             default: number;
         };
         labelPosition: {
-            type: import("vue").PropType<"left" | "top" | "right">;
+            type: import("vue").PropType<"top" | "left" | "right">;
             default: string;
         };
         alignType: {
             type: import("vue").PropType<"vertical" | "horizontal">;
             default: string;
         };
+        alignItems: {
+            type: import("vue").PropType<string>;
+            default: string;
+        };
+        marginBottom: {
+            type: import("vue").PropType<string>;
+            default: string;
+        };
+        marginRight: {
+            type: import("vue").PropType<string>;
+            default: string;
+        };
         cols: {
             type: import("vue").PropType<number>;
         };
@@ -394,22 +419,27 @@ declare const DasFormRef: () => import("vue").Ref<({
             type: import("vue").PropType<"default" | "overlay">;
             default: string;
         };
+        autoMarginRight: {
+            type: import("vue").PropType<boolean>;
+            default: boolean;
+        };
     }>>, {
         validate: (callback: any) => Promise<void>;
         validateField: (prop: string, callback: any) => Promise<void>;
         resetField: () => void;
     }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
-        alignItems: string;
-        marginBottom: string;
-        marginRight: string;
         labelLength: number | string;
         contentWidth: number | string;
         labelPosition: "left" | "right" | "top";
         alignType: "vertical" | "horizontal";
+        alignItems: string;
+        marginBottom: string;
+        marginRight: string;
         rules: any;
         labelMarginRight: string;
         isSearchForm: boolean;
         errorMode: "default" | "overlay";
+        autoMarginRight: boolean;
     }, {}, string, {}> & {
         beforeCreate?: (() => void) | (() => void)[];
         created?: (() => void) | (() => void)[];
@@ -431,18 +461,6 @@ declare const DasFormRef: () => import("vue").Ref<({
     $nextTick: typeof import("vue").nextTick;
     $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, (cleanupFn: () => void) => void]) => any : (...args: [any, any, (cleanupFn: () => void) => void]) => any, options?: import("vue").WatchOptions): import("vue").WatchStopHandle;
 } & Omit<Readonly<import("vue").ExtractPropTypes<{
-    alignItems: {
-        type: import("vue").PropType<string>;
-        default: string;
-    };
-    marginBottom: {
-        type: import("vue").PropType<string>;
-        default: string;
-    };
-    marginRight: {
-        type: import("vue").PropType<string>;
-        default: string;
-    };
     labelLength: {
         type: import("vue").PropType<string | number>;
         default: number;
@@ -452,13 +470,25 @@ declare const DasFormRef: () => import("vue").Ref<({
         default: number;
     };
     labelPosition: {
-        type: import("vue").PropType<"left" | "top" | "right">;
+        type: import("vue").PropType<"top" | "left" | "right">;
         default: string;
     };
     alignType: {
         type: import("vue").PropType<"vertical" | "horizontal">;
         default: string;
     };
+    alignItems: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    marginBottom: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    marginRight: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
     cols: {
         type: import("vue").PropType<number>;
     };
@@ -478,6 +508,10 @@ declare const DasFormRef: () => import("vue").Ref<({
         type: import("vue").PropType<"default" | "overlay">;
         default: string;
     };
+    autoMarginRight: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
 }>>, "validate" | "validateField" | "resetField"> & import("vue").ShallowUnwrapRef<{
     validate: (callback: any) => Promise<void>;
     validateField: (prop: string, callback: any) => Promise<void>;

package/packages/components/form/index.js

@@ -1,8 +1,8 @@
 import '@das-fed/ui/packages/components/form/style.css';
-import { defineComponent as p, provide as u, reactive as v, openBlock as g, createElementBlock as h, normalizeClass as F, normalizeStyle as y, renderSlot as _, ref as x } from "vue";
-import { withInstall as I } from "@das-fed/utils/with-install/index";
+import { defineComponent as _, ref as p, useSlots as x, watch as N, nextTick as I, provide as M, reactive as b, onMounted as k, createElementBlock as S, openBlock as w, normalizeStyle as z, normalizeClass as B, renderSlot as C } from "vue";
+import { withInstall as E } from "@das-fed/utils/with-install/index";
 import "@das-fed/ui/packages/global/theme";
-const S = /* @__PURE__ */ p({
+const L = /* @__PURE__ */ _({
   __name: "Index",
   props: {
     labelLength: { default: 4 },
@@ -16,51 +16,78 @@ const S = /* @__PURE__ */ p({
     rules: { default: {} },
     labelMarginRight: { default: "30px" },
     isSearchForm: { type: Boolean, default: !1 },
-    errorMode: { default: "default" }
+    errorMode: { default: "default" },
+    autoMarginRight: { type: Boolean, default: !1 }
   },
-  setup(l, { expose: r }) {
-    const o = l;
-    let a = [];
-    u("DasForm", v({ props: o, addField: (e) => {
-      a.push(e);
+  setup(n, { expose: d }) {
+    const a = n, i = p(), c = x(), g = () => {
+      const e = ["#comment", "#text"], t = Array.from(i.value.childNodes).filter(
+        (r) => !e.includes(r.nodeName)
+      ), l = a.cols || 4;
+      let o = 0;
+      t.forEach((r, R) => {
+        const f = Number(r.dataset.col ?? 1);
+        o += f;
+        const m = t[R];
+        o === l || o > l && f === l ? m.classList.add("marin-right-0") : m.classList.remove("marin-right-0"), o === l ? o = 0 : o > l && (o = f);
+      });
+    };
+    N(
+      () => c.default(),
+      (e) => {
+        I(() => {
+          u();
+        });
+      },
+      {
+        deep: !0
+      }
+    );
+    let s = [];
+    M("DasForm", b({ props: a, addField: (e) => {
+      s.push(e);
     }, removeField: (e) => {
-      a = a.filter((t) => t.timeStamp !== e.timeStamp);
+      s = s.filter((t) => t.timeStamp !== e.timeStamp);
     } }));
-    const i = async (e) => {
-      const t = await f();
+    const h = async (e) => {
+      const t = await y();
       e(t);
-    }, d = async (e, t) => {
-      const m = await a.find((n) => n.propName === e && n.rules.length > 0).validate();
-      t(m);
-    }, f = async () => {
+    }, v = async (e, t) => {
+      const o = await s.find((r) => r.propName === e && r.rules.length > 0).validate();
+      t(o);
+    }, y = async () => {
       let e = !0;
-      for (const t of a)
+      for (const t of s)
         t.propName && t.rules.length > 0 && (await t.validate() || (e = !1));
       return e;
+    }, F = () => {
+      s.forEach((e) => {
+        e.resetError();
+      });
+    }, u = () => {
+      a.autoMarginRight && a.alignType === "horizontal" && g();
     };
-    return r({
-      validate: i,
-      validateField: d,
-      resetField: () => {
-        a.forEach((e) => {
-          e.resetError();
-        });
-      }
-    }), (e, t) => (g(), h("div", {
-      class: F(["das-ui-form", { horizontal: e.alignType === "horizontal" }]),
-      style: y({ alignItems: e.alignItems })
+    return k(u), d({
+      validate: h,
+      validateField: v,
+      resetField: F
+    }), (e, t) => (w(), S("div", {
+      class: B(["das-ui-form", { horizontal: e.alignType === "horizontal" }]),
+      ref_key: "$formRef",
+      ref: i,
+      style: z({ alignItems: e.alignItems })
     }, [
-      _(e.$slots, "default", {}, void 0, !0)
+      C(e.$slots, "default", {}, void 0, !0)
     ], 6));
   }
-}), b = (l, r) => {
-  const o = l.__vccOpts || l;
-  for (const [a, s] of r)
-    o[a] = s;
-  return o;
-}, w = /* @__PURE__ */ b(S, [["__scopeId", "data-v-7f30b002"]]), R = I(w), C = () => x(null);
+}), T = (n, d) => {
+  const a = n.__vccOpts || n;
+  for (const [i, c] of d)
+    a[i] = c;
+  return a;
+}, A = /* @__PURE__ */ T(L, [["__scopeId", "data-v-e05eb9be"]]), j = E(A), q = () => p(null);
 export {
-  R as DasForm,
-  C as DasFormRef,
-  R as default
+  j as DasForm,
+  q as DasFormRef,
+  j as default
 };

package/packages/components/form/src/Index.vue.d.ts

@@ -14,6 +14,7 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_WithDefaults<
     labelMarginRight: string;
     errorMode: string;
     isSearchForm: boolean;
+    autoMarginRight: boolean;
 }>, {
     validate: (callback: any) => Promise<void>;
     validateField: (prop: string, callback: any) => Promise<void>;
@@ -30,18 +31,20 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_WithDefaults<
     labelMarginRight: string;
     errorMode: string;
     isSearchForm: boolean;
+    autoMarginRight: boolean;
 }>>>, {
-    alignItems: string;
-    marginBottom: string;
-    marginRight: string;
     labelLength: number | string;
     contentWidth: number | string;
     labelPosition: "left" | "right" | "top";
     alignType: "vertical" | "horizontal";
+    alignItems: string;
+    marginBottom: string;
+    marginRight: string;
     rules: any;
     labelMarginRight: string;
     isSearchForm: boolean;
     errorMode: "default" | "overlay";
+    autoMarginRight: boolean;
 }, {}>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
 export default _default;