@indielayer/ui 1.3.0 → 1.4.0

package/lib/components/checkbox/Checkbox.vue2.js

@@ -1,108 +1,142 @@
-import { defineComponent as M, ref as b, watch as h, openBlock as l, createElementBlock as n, normalizeStyle as N, unref as s, normalizeClass as r, createElementVNode as a, withKeys as _, withModifiers as D, withDirectives as F, vModelCheckbox as R, createBlock as v, renderSlot as k, toDisplayString as P, createCommentVNode as T } from "vue";
-import { useTheme as U } from "../../composables/useTheme.js";
-import { useCommon as y } from "../../composables/useCommon.js";
-import { useColors as X } from "../../composables/useColors.js";
-import { useInteractive as g } from "../../composables/useInteractive.js";
-import { useInputtable as d } from "../../composables/useInputtable.js";
-import j from "../spinner/Spinner.vue.js";
-import A from "../inputFooter/InputFooter.vue.js";
-const G = ["onKeypress"], H = ["aria-checked", "aria-disabled", "disabled", "name", "required"], J = /* @__PURE__ */ a("path", { d: "M0 11l2-2 5 5L18 3l2 2L7 18z" }, null, -1), O = [
-  J
-], Q = ["textContent"], W = {
-  ...y.props(),
-  ...X.props("primary"),
-  ...g.props(),
-  ...d.props(),
-  label: String,
-  helper: String,
+import { defineComponent as P, ref as w, watch as m, unref as o, openBlock as i, createElementBlock as p, normalizeStyle as R, normalizeClass as u, createElementVNode as d, withKeys as T, withModifiers as H, withDirectives as O, mergeProps as U, toHandlers as X, vModelCheckbox as j, createBlock as V, renderSlot as C, toDisplayString as J, createCommentVNode as Q } from "vue";
+import { useTheme as W } from "../../composables/useTheme.js";
+import { useCommon as I } from "../../composables/useCommon.js";
+import { useColors as Y } from "../../composables/useColors.js";
+import { useInteractive as z } from "../../composables/useInteractive.js";
+import { useInputtable as f } from "../../composables/useInputtable.js";
+import Z from "../spinner/Spinner.vue.js";
+import x from "../inputFooter/InputFooter.vue.js";
+const ee = ["onKeypress"], se = ["id", "name", "aria-checked", "aria-disabled", "disabled", "required"], le = {
+  key: 1,
+  name: "check-icon",
+  class: "w-2/3 h-[2px] bg-white dark:bg-gray-900"
+}, ae = /* @__PURE__ */ d("path", { d: "M0 11l2-2 5 5L18 3l2 2L7 18z" }, null, -1), oe = [
+  ae
+], re = ["textContent"], ie = {
+  ...I.props(),
+  ...Y.props("primary"),
+  ...z.props(),
+  ...f.props(),
+  value: [String, Number],
+  indeterminate: Boolean,
   glow: Boolean
-}, Y = {
+}, te = {
   name: "XCheckbox",
   validators: {
-    ...y.validators()
+    ...I.validators()
   }
-}, te = /* @__PURE__ */ M({
-  ...Y,
-  props: W,
-  emits: d.emits(!1),
-  setup(w, { expose: C, emit: z }) {
-    const i = w, m = z, p = b(null), o = b(!1);
-    h(() => i.modelValue, (e) => {
-      o.value = !!e;
-    }, { immediate: !0 }), h(() => o.value, (e) => {
-      m("update:modelValue", e);
-    });
-    function u() {
-      o.value = !o.value;
+}, he = /* @__PURE__ */ P({
+  ...te,
+  props: ie,
+  emits: f.emits(!1),
+  setup(A, { expose: B, emit: $ }) {
+    const s = A, v = $, h = w(null), l = w(!1);
+    function b() {
+      l.value = !l.value;
     }
-    const { focus: c, blur: B } = g(p), {
-      errorInternal: S,
-      isInsideForm: V,
-      reset: $,
-      validate: I,
-      setError: q
-    } = d(i, { focus: c, emit: m, withListeners: !1 }), { styles: E, classes: t, className: K } = U("Checkbox", {}, i, { checked: o });
-    return C({ focus: c, blur: B, toggle: u, reset: $, validate: I, setError: q }), (e, f) => (l(), n("label", {
-      style: N(s(E)),
-      class: r([
-        s(K),
-        s(t).wrapper,
-        { "mb-3": s(V) }
+    const { focus: y, blur: F } = z(h), {
+      errorInternal: G,
+      hideFooterInternal: N,
+      isInsideForm: S,
+      isInsideFormGroup: c,
+      isFirstValidation: _,
+      formGroup: r,
+      reset: q,
+      validate: k,
+      setError: E
+    } = f(s, { focus: y, emit: v, withListeners: !1 });
+    c ? (m(() => r.value, () => {
+      const e = o(r.value);
+      e && Array.isArray(e) && e.includes(s.value) ? l.value = !0 : l.value = !1;
+    }, { immediate: !0, deep: !0 }), m(() => l.value, (e) => {
+      if (!s.value)
+        return;
+      const a = o(r.value);
+      if (e)
+        if (a && Array.isArray(a)) {
+          if (!a.includes(s.value)) {
+            const n = [...a, s.value];
+            r.setValue(n);
+          }
+        } else
+          r.setValue([s.value]);
+      else if (a && Array.isArray(a) && a.includes(s.value)) {
+        const n = a.findIndex((D) => D === s.value), g = [...a];
+        g.splice(n, 1), r.setValue(g);
+      }
+    })) : (m(() => s.modelValue, (e) => {
+      l.value = !!e;
+    }, { immediate: !0 }), m(() => l.value, (e) => {
+      v("update:modelValue", e);
+    }));
+    const K = {
+      input: () => {
+        c || setTimeout(() => {
+          s.validateOnInput && !_.value && k(s.modelValue);
+        }, 0);
+      }
+    }, { styles: L, classes: t, className: M } = W("Checkbox", {}, s, { checked: l, isInsideForm: S, isInsideFormGroup: c });
+    return B({ focus: y, blur: F, toggle: b, reset: q, validate: k, setError: E }), (e, a) => (i(), p("label", {
+      style: R(o(L)),
+      class: u([
+        o(M),
+        o(t).wrapper
       ])
     }, [
-      a("div", {
+      d("div", {
         ref_key: "elRef",
-        ref: p,
-        class: r(["flex items-center", { "cursor-not-allowed": e.disabled }]),
+        ref: h,
+        class: u(o(t).content),
         tabindex: "0",
-        onKeypress: _(D(u, ["prevent", "stop"]), ["space"])
+        onKeypress: T(H(b, ["prevent", "stop"]), ["space"])
       }, [
-        F(a("input", {
-          "onUpdate:modelValue": f[0] || (f[0] = (L) => o.value = L),
-          "aria-checked": o.value ? "true" : "false",
+        O(d("input", U({
+          id: e.id,
+          "onUpdate:modelValue": a[0] || (a[0] = (n) => l.value = n),
+          name: e.name,
+          "aria-checked": e.indeterminate ? "mixed" : l.value ? "true" : "false",
           "aria-disabled": e.disabled ? "true" : void 0,
           type: "checkbox",
           class: "invisible absolute",
           disabled: e.disabled || e.loading,
-          name: e.name,
           required: e.required
-        }, null, 8, H), [
-          [R, o.value]
+        }, X(K, !0)), null, 16, se), [
+          [j, l.value]
         ]),
-        a("div", {
-          class: r([
-            s(t).box,
+        d("div", {
+          class: u([
+            o(t).box,
             [e.glow && !e.disabled && !e.loading ? e.$style["checkbox--glow"] : ""]
           ])
         }, [
-          e.loading ? (l(), v(j, {
+          e.loading ? (i(), V(Z, {
             key: 0,
             size: e.size,
             class: "absolute"
-          }, null, 8, ["size"])) : k(e.$slots, "icon", { key: 1 }, () => [
-            (l(), n("svg", {
+          }, null, 8, ["size"])) : e.indeterminate ? (i(), p("span", le)) : C(e.$slots, "icon", { key: 2 }, () => [
+            (i(), p("svg", {
               viewBox: "0 0 20 20",
-              class: r([s(t).icon, { "opacity-0": !o.value }])
-            }, O, 2))
+              class: u([o(t).icon, { "opacity-0": !l.value }])
+            }, oe, 2))
           ])
         ], 2),
-        a("div", {
-          class: r(s(t).label)
+        d("div", {
+          class: u(o(t).label)
         }, [
-          e.label ? (l(), n("span", {
+          e.label ? (i(), p("span", {
             key: 0,
-            textContent: P(e.label)
-          }, null, 8, Q)) : k(e.$slots, "default", { key: 1 })
+            textContent: J(e.label)
+          }, null, 8, re)) : C(e.$slots, "default", { key: 1 })
         ], 2)
-      ], 42, G),
-      e.hideFooter ? T("", !0) : (l(), v(A, {
+      ], 42, ee),
+      o(N) ? Q("", !0) : (i(), V(x, {
         key: 0,
-        error: s(S),
+        error: o(G),
         helper: e.helper
       }, null, 8, ["error", "helper"]))
     ], 6));
   }
 });
 export {
-  te as default
+  he as default
 };

package/lib/components/checkbox/theme/Checkbox.base.theme.js

@@ -1,52 +1,59 @@
-const b = {
+const o = {
   classes: {
-    wrapper: "inline-block relative cursor-pointer align-middle",
-    box: ({ props: e }) => {
-      const r = ["rounded flex justify-center items-center shrink-0 border-2 border-[color:var(--x-checkbox-border)] bg-[color:var(--x-checkbox-bg)] dark:border-[color:var(--x-checkbox-dark-border)] dark:bg-[color:var(--x-checkbox-dark-bg)]"];
-      return e.size === "xs" || e.size === "sm" ? r.push("h-4 w-4") : e.size === "xl" ? r.push("h-6 w-6") : r.push("h-5 w-5"), r;
+    wrapper: ({ data: r }) => {
+      const e = ["inline-block relative cursor-pointer align-middle"];
+      return r.isInsideForm && !r.isInsideFormGroup && e.push("mb-3"), e;
     },
-    icon: ({ props: e }) => {
-      const r = ["fill-current text-white dark:text-gray-900"];
-      return e.size === "xs" || e.size === "sm" ? r.push("h-2 w-2") : e.size === "xl" ? r.push("h-4 w-4") : r.push("h-3 w-3"), r;
+    box: ({ props: r }) => {
+      const e = ["rounded flex justify-center items-center shrink-0 border-2 border-[color:var(--x-checkbox-border)] bg-[color:var(--x-checkbox-bg)] dark:border-[color:var(--x-checkbox-dark-border)] dark:bg-[color:var(--x-checkbox-dark-bg)]"];
+      return r.size === "xs" || r.size === "sm" ? e.push("h-4 w-4") : r.size === "xl" ? e.push("h-6 w-6") : e.push("h-5 w-5"), e;
     },
-    label: ({ props: e }) => {
-      const r = ["inline-block font-medium text-gray-800 dark:text-gray-200 pl-2"];
-      return e.size === "xs" ? r.push("text-xs") : e.size === "sm" ? r.push("text-sm") : e.size === "lg" ? r.push("text-lg") : e.size === "xl" && r.push("text-xl"), r;
+    content: ({ props: r }) => {
+      const e = ["flex items-center"];
+      return r.disabled && e.push("cursor-not-allowed"), e;
+    },
+    icon: ({ props: r }) => {
+      const e = ["fill-current text-white dark:text-gray-900"];
+      return r.size === "xs" || r.size === "sm" ? e.push("h-2 w-2") : r.size === "xl" ? e.push("h-4 w-4") : e.push("h-3 w-3"), e;
+    },
+    label: ({ props: r }) => {
+      const e = ["inline-block font-medium text-gray-800 dark:text-gray-200 pl-2"];
+      return r.size === "xs" ? e.push("text-xs") : r.size === "sm" ? e.push("text-sm") : r.size === "lg" ? e.push("text-lg") : r.size === "xl" && e.push("text-xl"), e;
     }
   },
-  styles({ props: e, colors: r, css: a, data: i }) {
-    const t = r.getPalette("gray"), s = r.getPalette(e.color), l = [];
-    return e.loading ? a.variables({
+  styles({ props: r, colors: e, css: l, data: i }) {
+    const s = e.getPalette("gray"), t = e.getPalette(r.color), a = [];
+    return r.loading ? l.variables({
       bg: "transparent",
       border: "transparent",
       dark: {
         bg: "transparent",
         border: "transparent"
       }
-    }) : (e.disabled ? l.push(a.variables({
-      bg: t[100],
-      border: t[200],
+    }) : (r.disabled ? a.push(l.variables({
+      bg: s[100],
+      border: s[200],
       dark: {
-        bg: t[800],
-        border: t[700]
+        bg: s[800],
+        border: s[700]
       }
-    })) : (i.checked ? l.push(a.variables({
-      bg: s[500],
-      border: s[500],
+    })) : (i.checked ? a.push(l.variables({
+      bg: t[500],
+      border: t[500],
       dark: {
-        bg: s[500],
-        border: s[500]
+        bg: t[500],
+        border: t[500]
       }
-    })) : l.push(a.variables({
+    })) : a.push(l.variables({
       bg: "#fff",
-      border: e.glow ? s[300] : t[300],
+      border: r.glow ? t[300] : s[300],
       dark: {
-        bg: t[900],
-        border: e.glow ? s[300] : t[400]
+        bg: s[900],
+        border: r.glow ? t[300] : s[400]
       }
-    })), e.glow && l.push(a.get("glow", r.getColorOpacity(s[500], 0.5)))), l);
+    })), r.glow && a.push(l.get("glow", e.getColorOpacity(t[500], 0.5)))), a);
   }
-}, o = b;
+}, n = o;
 export {
-  o as default
+  n as default
 };

package/lib/components/checkbox/theme/Checkbox.carbon.theme.js

@@ -1,52 +1,59 @@
-const b = {
+const o = {
   classes: {
-    wrapper: "inline-block relative cursor-pointer align-middle",
-    box: ({ props: e }) => {
-      const r = ["rounded-sm flex justify-center items-center shrink-0 border border-[color:var(--x-checkbox-border)] bg-[color:var(--x-checkbox-bg)] dark:border-[color:var(--x-checkbox-dark-border)] dark:bg-[color:var(--x-checkbox-dark-bg)]"];
-      return e.size === "xs" || e.size === "sm" ? r.push("h-3 w-3") : e.size === "xl" ? r.push("h-5 w-5") : r.push("h-4 w-4"), r;
+    wrapper: ({ data: r }) => {
+      const e = ["inline-block relative cursor-pointer align-middle"];
+      return r.isInsideForm && !r.isInsideFormGroup && e.push("mb-8"), e;
     },
-    icon: ({ props: e }) => {
-      const r = ["fill-current text-white dark:text-gray-900"];
-      return e.size === "xs" || e.size === "sm" ? r.push("h-2 w-2") : e.size === "xl" ? r.push("h-3.5 w-3.5") : r.push("h-2.5 w-2.5"), r;
+    box: ({ props: r }) => {
+      const e = ["rounded-sm flex justify-center items-center shrink-0 border border-[color:var(--x-checkbox-border)] bg-[color:var(--x-checkbox-bg)] dark:border-[color:var(--x-checkbox-dark-border)] dark:bg-[color:var(--x-checkbox-dark-bg)] mt-0.5"];
+      return r.size === "xs" || r.size === "sm" ? e.push("h-3 w-3") : r.size === "xl" ? e.push("h-5 w-5") : e.push("h-4 w-4"), e;
     },
-    label: ({ props: e }) => {
-      const r = ["inline-block text-gray-800 dark:text-gray-200 pl-2 text-sm"];
-      return e.size === "xs" ? r.push("text-xs") : e.size === "sm" ? r.push("text-sm") : e.size === "lg" ? r.push("text-lg") : e.size === "xl" && r.push("text-xl"), r;
+    content: ({ props: r }) => {
+      const e = ["flex"];
+      return r.disabled && e.push("cursor-not-allowed"), e;
+    },
+    icon: ({ props: r }) => {
+      const e = ["fill-current text-white dark:text-gray-900"];
+      return r.size === "xs" || r.size === "sm" ? e.push("h-2 w-2") : r.size === "xl" ? e.push("h-3.5 w-3.5") : e.push("h-2.5 w-2.5"), e;
+    },
+    label: ({ props: r }) => {
+      const e = ["text-gray-800 dark:text-gray-200 pl-2 text-sm"];
+      return r.size === "xs" ? e.push("text-xs") : r.size === "sm" ? e.push("text-sm") : r.size === "lg" ? e.push("text-lg") : r.size === "xl" && e.push("text-xl"), e;
     }
   },
-  styles({ props: e, colors: r, css: a, data: i }) {
-    const t = r.getPalette("gray"), s = r.getPalette(e.color), l = [];
-    return e.loading ? a.variables({
+  styles({ props: r, colors: e, css: l, data: i }) {
+    const s = e.getPalette("gray"), t = e.getPalette(r.color), a = [];
+    return r.loading ? l.variables({
       bg: "transparent",
       border: "transparent",
       dark: {
         bg: "transparent",
         border: "transparent"
       }
-    }) : (e.disabled ? l.push(a.variables({
-      bg: t[100],
-      border: t[200],
+    }) : (r.disabled ? a.push(l.variables({
+      bg: s[100],
+      border: s[200],
       dark: {
-        bg: t[800],
-        border: t[700]
+        bg: s[800],
+        border: s[700]
       }
-    })) : (i.checked ? l.push(a.variables({
-      bg: s[500],
-      border: s[500],
+    })) : (i.checked ? a.push(l.variables({
+      bg: t[500],
+      border: t[500],
       dark: {
-        bg: s[500],
-        border: s[500]
+        bg: t[500],
+        border: t[500]
       }
-    })) : l.push(a.variables({
+    })) : a.push(l.variables({
       bg: "#fff",
-      border: e.glow ? s[300] : t[900],
+      border: r.glow ? t[300] : s[900],
       dark: {
-        bg: t[900],
-        border: e.glow ? s[300] : t[300]
+        bg: s[900],
+        border: r.glow ? t[300] : s[300]
       }
-    })), e.glow && l.push(a.get("glow", r.getColorOpacity(s[500], 0.5)))), l);
+    })), r.glow && a.push(l.get("glow", e.getColorOpacity(t[500], 0.5)))), a);
   }
-}, o = b;
+}, n = o;
 export {
-  o as default
+  n as default
 };

package/lib/components/container/Container.vue.d.ts

@@ -5,6 +5,10 @@ declare const containerProps: {
         type: StringConstructor;
         default: string;
     };
+    fluid: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 };
 export type ContainerProps = ExtractPublicPropTypes<typeof containerProps>;
 type InternalClasses = 'wrapper';
@@ -15,13 +19,22 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: StringConstructor;
         default: string;
     };
+    fluid: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     tag: {
         type: StringConstructor;
         default: string;
     };
+    fluid: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>>, {
     tag: string;
+    fluid: boolean;
 }, {}>, {
     default?(_: {}): any;
 }>;

package/lib/components/container/Container.vue.js

@@ -1,20 +1,24 @@
-import { defineComponent as l, openBlock as c, createBlock as p, resolveDynamicComponent as i, normalizeStyle as m, unref as e, normalizeClass as f, withCtx as u, renderSlot as d } from "vue";
-import { useTheme as _ } from "../../composables/useTheme.js";
-const y = {
+import { defineComponent as r, openBlock as c, createBlock as p, resolveDynamicComponent as i, normalizeStyle as f, unref as e, normalizeClass as m, withCtx as u, renderSlot as d } from "vue";
+import { useTheme as y } from "../../composables/useTheme.js";
+const _ = {
   tag: {
     type: String,
     default: "div"
+  },
+  fluid: {
+    type: Boolean,
+    default: !1
   }
-}, C = { name: "XContainer" }, k = /* @__PURE__ */ l({
+}, C = { name: "XContainer" }, S = /* @__PURE__ */ r({
   ...C,
-  props: y,
+  props: _,
   setup(s) {
-    const o = s, { styles: n, classes: a, className: r } = _("Container", {}, o);
+    const o = s, { styles: a, classes: n, className: l } = y("Container", {}, o);
     return (t, g) => (c(), p(i(t.tag), {
-      style: m(e(n)),
-      class: f([
-        e(r),
-        e(a).wrapper
+      style: f(e(a)),
+      class: m([
+        e(l),
+        e(n).wrapper
       ])
     }, {
       default: u(() => [
@@ -25,5 +29,5 @@ const y = {
   }
 });
 export {
-  k as default
+  S as default
 };

package/lib/components/container/theme/Container.base.theme.js

@@ -1,8 +1,11 @@
-const e = {
+const a = {
   classes: {
-    wrapper: "max-w-screen-2xl mx-auto px-4 md:px-8"
+    wrapper: ({ props: s }) => {
+      const e = ["px-4 md:px-8"];
+      return s.fluid || e.push("max-w-screen-2xl mx-auto"), e;
+    }
   }
-}, s = e;
+}, t = a;
 export {
-  s as default
+  t as default
 };

package/lib/components/drawer/Drawer.vue.d.ts

@@ -4,7 +4,7 @@ declare const drawerPosition: readonly ["left", "right", "top", "bottom"];
 declare const drawerProps: {
     modelValue: BooleanConstructor;
     position: {
-        type: PropType<"top" | "bottom" | "left" | "right">;
+        type: PropType<"left" | "right" | "top" | "bottom">;
         default: string;
     };
     teleportTo: {
@@ -33,7 +33,7 @@ export interface DrawerTheme extends ThemeComponent<DrawerProps, InternalClasses
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     modelValue: BooleanConstructor;
     position: {
-        type: PropType<"top" | "bottom" | "left" | "right">;
+        type: PropType<"left" | "right" | "top" | "bottom">;
         default: string;
     };
     teleportTo: {
@@ -59,7 +59,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: BooleanConstructor;
     position: {
-        type: PropType<"top" | "bottom" | "left" | "right">;
+        type: PropType<"left" | "right" | "top" | "bottom">;
         default: string;
     };
     teleportTo: {
@@ -82,7 +82,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
-    position: "top" | "bottom" | "left" | "right";
+    position: "left" | "right" | "top" | "bottom";
     modelValue: boolean;
     teleportTo: string | HTMLElement;
     width: string | number;

package/lib/components/form/Form.vue.d.ts

@@ -14,6 +14,12 @@ declare const formProps: {
         type: PropType<[FormError[], FormError]>;
         default: () => never[];
     };
+    title: StringConstructor;
+    description: StringConstructor;
+    hasFooter: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 };
 export type FormProps = ExtractPublicPropTypes<typeof formProps>;
 export type FormInjection = {
@@ -31,7 +37,7 @@ export type FormInput = {
     validate: (val?: any) => boolean;
     setError: (val: string) => void;
 };
-type InternalClasses = 'wrapper';
+type InternalClasses = 'wrapper' | 'content' | 'title' | 'description' | 'footer';
 export interface FormTheme extends ThemeComponent<FormProps, InternalClasses> {
 }
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
@@ -48,6 +54,12 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: PropType<[FormError[], FormError]>;
         default: () => never[];
     };
+    title: StringConstructor;
+    description: StringConstructor;
+    hasFooter: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "submit"[], "submit", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     autoValidate: {
         type: BooleanConstructor;
@@ -62,15 +74,26 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: PropType<[FormError[], FormError]>;
         default: () => never[];
     };
+    title: StringConstructor;
+    description: StringConstructor;
+    hasFooter: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>> & {
     onSubmit?: ((...args: any[]) => any) | undefined;
 }, {
-    disabled: boolean;
     autoValidate: boolean;
     autoFocus: boolean;
+    disabled: boolean;
     errors: [FormError[], FormError];
+    hasFooter: boolean;
 }, {}>, {
+    header?(_: {}): any;
     default?(_: {}): any;
+    footer?(_: {}): any;
+    "primary-action"?(_: {}): any;
+    "secondary-action"?(_: {}): any;
 }>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {