@indielayer/ui 1.3.0 → 1.4.0

package/lib/components/form/Form.vue.js

@@ -1,7 +1,10 @@
-import { defineComponent as h, provide as F, onMounted as _, watch as V, nextTick as g, openBlock as E, createElementBlock as I, normalizeStyle as v, unref as r, normalizeClass as B, createElementVNode as x, renderSlot as A } from "vue";
-import { injectFormKey as k } from "../../composables/keys.js";
-import { useTheme as S } from "../../composables/useTheme.js";
-const j = ["disabled"], w = {
+import { defineComponent as E, provide as I, onMounted as S, watch as $, nextTick as A, openBlock as c, createElementBlock as m, normalizeStyle as C, unref as i, normalizeClass as n, renderSlot as r, toDisplayString as p, createCommentVNode as f, createElementVNode as y } from "vue";
+import { injectFormKey as N } from "../../composables/keys.js";
+import { useTheme as T } from "../../composables/useTheme.js";
+const j = {
+  key: 0,
+  class: "mb-10"
+}, w = ["disabled"], z = {
   autoValidate: {
     type: Boolean,
     default: !0
@@ -14,33 +17,38 @@ const j = ["disabled"], w = {
   errors: {
     type: [Array, Object],
     default: () => []
+  },
+  title: String,
+  description: String,
+  hasFooter: {
+    type: Boolean,
+    default: !0
   }
-}, z = {
-  name: "XForm",
-  inheritAttrs: !1
-}, T = /* @__PURE__ */ h({
-  ...z,
-  props: w,
+}, D = {
+  name: "XForm"
+}, O = /* @__PURE__ */ E({
+  ...D,
+  props: z,
   emits: ["submit"],
-  setup(l, { emit: d }) {
-    const i = l, u = d, s = [];
-    F(k, {
-      registerInput: (e, t, o, a) => {
-        const n = s.find((b) => b.name === e);
-        n ? (n.focus = t, n.validate = o, n.setError = a) : s.push({ name: e, focus: t, validate: o, setError: a });
+  setup(h, { emit: b }) {
+    const l = h, F = b, s = [];
+    I(N, {
+      registerInput: (e, t, o, d) => {
+        const u = s.find((B) => B.name === e);
+        u ? (u.focus = t, u.validate = o, u.setError = d) : s.push({ name: e, focus: t, validate: o, setError: d });
       },
       unregisterInput: (e) => {
         const t = s.findIndex((o) => o.name === e);
         s.splice(t, 1);
       },
       isInsideForm: !0
-    }), _(() => {
-      i.autoFocus && s && s.length > 0 && s[0].focus();
-    }), V(() => i.errors, (e) => {
-      e && g(() => {
+    }), S(async () => {
+      l.autoFocus && s && s.length > 0 && setTimeout(s[0].focus, 50);
+    }), $(() => l.errors, (e) => {
+      e && A(() => {
         if (Array.isArray(e))
           e.forEach((t) => {
-            const o = s.find((a) => a.name === t.field);
+            const o = s.find((d) => d.name === t.field);
             o && o.setError(t.msg);
           });
         else {
@@ -49,30 +57,53 @@ const j = ["disabled"], w = {
         }
       });
     });
-    const c = () => {
+    const g = () => {
       let e = !0;
       return s.forEach((t) => {
         !t.validate() && e && (e = !1, t.focus && t.focus());
       }), e;
-    }, f = (e) => {
+    }, V = (e) => {
       e.preventDefault(), e.stopPropagation();
-      const t = i.autoValidate ? c() : !0;
-      u("submit", t);
-    }, { styles: m, classes: p, className: y } = S("Form", {}, i);
-    return (e, t) => (E(), I("form", {
-      style: v(r(m)),
-      class: B([
-        r(y),
-        r(p).wrapper
+      const t = l.autoValidate ? g() : !0;
+      F("submit", t);
+    }, { styles: k, classes: a, className: v } = T("Form", {}, l);
+    return (e, t) => (c(), m("form", {
+      style: C(i(k)),
+      class: n([
+        i(v),
+        i(a).wrapper
       ]),
-      onSubmit: f
+      onSubmit: V
     }, [
-      x("fieldset", { disabled: e.disabled }, [
-        A(e.$slots, "default")
-      ], 8, j)
+      r(e.$slots, "header", {}, () => [
+        e.title || e.description ? (c(), m("div", j, [
+          e.title ? (c(), m("p", {
+            key: 0,
+            class: n(i(a).title)
+          }, p(e.title), 3)) : f("", !0),
+          e.description ? (c(), m("p", {
+            key: 1,
+            class: n(i(a).description)
+          }, p(e.description), 3)) : f("", !0)
+        ])) : f("", !0)
+      ]),
+      y("fieldset", {
+        disabled: e.disabled,
+        class: n(i(a).content)
+      }, [
+        r(e.$slots, "default")
+      ], 10, w),
+      e.hasFooter ? r(e.$slots, "footer", { key: 0 }, () => [
+        y("div", {
+          class: n(i(a).footer)
+        }, [
+          r(e.$slots, "primary-action"),
+          r(e.$slots, "secondary-action")
+        ], 2)
+      ]) : f("", !0)
     ], 38));
   }
 });
 export {
-  T as default
+  O as default
 };

package/lib/components/form/theme/Form.base.theme.js

@@ -1,8 +1,12 @@
-const e = {
+const t = {
   classes: {
-    wrapper: ""
+    wrapper: "relative",
+    content: "",
+    title: "text-xl mb-1",
+    description: "text-gray-500",
+    footer: "space-x-4 mt-4"
   }
-}, s = e;
+}, e = t;
 export {
-  s as default
+  e as default
 };

package/lib/components/form/theme/Form.carbon.theme.js

@@ -1,5 +1,12 @@
-import e from "./Form.base.theme.js";
-const t = e, o = t;
+const t = {
+  classes: {
+    wrapper: "relative",
+    content: "grid",
+    title: "text-xl mb-1",
+    description: "text-gray-500",
+    footer: "grid grid-cols-2 gap-4 lg:flex mt-8"
+  }
+}, e = t;
 export {
-  o as default
+  e as default
 };

package/lib/components/formGroup/FormGroup.vue.d.ts

@@ -0,0 +1,132 @@
+import { type ExtractPublicPropTypes, type MaybeRef } from 'vue';
+import { type ThemeComponent } from '../../composables/useTheme';
+declare const formGroupProps: {
+    vertical: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    modelValue: import("vue").PropType<string | number | boolean | object | any[] | undefined>;
+    id: StringConstructor;
+    name: StringConstructor;
+    readonly: BooleanConstructor;
+    required: BooleanConstructor;
+    validateOnInput: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+    label: StringConstructor;
+    helper: StringConstructor;
+    error: StringConstructor;
+    hideFooter: BooleanConstructor;
+    rules: {
+        readonly type: ArrayConstructor;
+        readonly default: () => never[];
+    };
+    disabled: BooleanConstructor;
+    loading: BooleanConstructor;
+    loadingLabel: StringConstructor;
+    loadingStatus: {
+        readonly type: import("vue").PropType<import("../loader/Loader.vue").LoaderStatus>;
+        readonly default: "active";
+    };
+};
+export type FormGroupProps = ExtractPublicPropTypes<typeof formGroupProps>;
+export type FormGroupInjection = {
+    registerInputGroup: (name: string, focus: () => void) => void;
+    unregisterInputGroup: (name: string) => void;
+    setValue: (val: string | number | string[] | number[]) => void;
+    value: MaybeRef<string | number | string[] | number[] | null | undefined>;
+    isInsideFormGroup: boolean;
+};
+export type FormGroupInput = {
+    name: string;
+    focus: () => void;
+};
+type InternalClasses = 'wrapper';
+export interface FormGroupTheme extends ThemeComponent<FormGroupProps, InternalClasses> {
+}
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
+    vertical: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    modelValue: import("vue").PropType<string | number | boolean | object | any[] | undefined>;
+    id: StringConstructor;
+    name: StringConstructor;
+    readonly: BooleanConstructor;
+    required: BooleanConstructor;
+    validateOnInput: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+    label: StringConstructor;
+    helper: StringConstructor;
+    error: StringConstructor;
+    hideFooter: BooleanConstructor;
+    rules: {
+        readonly type: ArrayConstructor;
+        readonly default: () => never[];
+    };
+    disabled: BooleanConstructor;
+    loading: BooleanConstructor;
+    loadingLabel: StringConstructor;
+    loadingStatus: {
+        readonly type: import("vue").PropType<import("../loader/Loader.vue").LoaderStatus>;
+        readonly default: "active";
+    };
+}, {
+    focus: () => void;
+    blur: typeof blur;
+    reset: () => void;
+    validate: (val?: any) => boolean;
+    setError: (val: string) => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, string[], string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    vertical: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    modelValue: import("vue").PropType<string | number | boolean | object | any[] | undefined>;
+    id: StringConstructor;
+    name: StringConstructor;
+    readonly: BooleanConstructor;
+    required: BooleanConstructor;
+    validateOnInput: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+    label: StringConstructor;
+    helper: StringConstructor;
+    error: StringConstructor;
+    hideFooter: BooleanConstructor;
+    rules: {
+        readonly type: ArrayConstructor;
+        readonly default: () => never[];
+    };
+    disabled: BooleanConstructor;
+    loading: BooleanConstructor;
+    loadingLabel: StringConstructor;
+    loadingStatus: {
+        readonly type: import("vue").PropType<import("../loader/Loader.vue").LoaderStatus>;
+        readonly default: "active";
+    };
+}>> & {
+    [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
+}, {
+    disabled: boolean;
+    loading: boolean;
+    loadingStatus: import("../loader/Loader.vue").LoaderStatus;
+    readonly: boolean;
+    required: boolean;
+    validateOnInput: boolean;
+    hideFooter: boolean;
+    rules: unknown[];
+    vertical: boolean;
+}, {}>, {
+    default?(_: {}): any;
+}>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/lib/components/formGroup/FormGroup.vue.js

@@ -0,0 +1,82 @@
+import { defineComponent as C, computed as k, provide as q, openBlock as m, createBlock as p, mergeProps as B, unref as o, toHandlers as N, withCtx as $, createElementVNode as w, normalizeClass as A, renderSlot as E, createCommentVNode as P } from "vue";
+import { useTheme as j } from "../../composables/useTheme.js";
+import { useInteractive as z } from "../../composables/useInteractive.js";
+import { useInputtable as l } from "../../composables/useInputtable.js";
+import { injectFormGroupKey as H } from "../../composables/keys.js";
+import K from "../label/Label.vue.js";
+import O from "../inputFooter/InputFooter.vue.js";
+const S = {
+  ...z.props(),
+  ...l.props(),
+  vertical: {
+    type: Boolean,
+    default: !1
+  }
+}, T = {
+  name: "XFormGroup"
+}, R = /* @__PURE__ */ C({
+  ...T,
+  props: S,
+  emits: l.emits(),
+  setup(d, { expose: f, emit: c }) {
+    const r = d, s = [], V = k(() => typeof r.modelValue == "string" || typeof r.modelValue == "number" || Array.isArray(r.modelValue) ? r.modelValue : "");
+    q(H, {
+      registerInputGroup: (e, t) => {
+        s.push({ name: e, focus: t });
+      },
+      unregisterInputGroup: (e) => {
+        const t = s.findIndex((g) => g.name === e);
+        s.splice(t, 1);
+      },
+      setValue: (e) => {
+        n("update:modelValue", e);
+      },
+      isInsideFormGroup: !0,
+      value: V
+    });
+    function i() {
+      var e;
+      (e = s[0]) == null || e.focus();
+    }
+    const n = c, {
+      errorInternal: a,
+      isInsideForm: y,
+      isFirstValidation: b,
+      reset: h,
+      validate: u,
+      setError: v
+    } = l(r, { focus: i, emit: n }), I = {
+      change: (e) => {
+        r.validateOnInput && !b.value && u(r.modelValue);
+      }
+    }, { styles: F, classes: G, className: _ } = j("FormGroup", {}, r, { errorInternal: a });
+    return f({ focus: i, blur, reset: h, validate: u, setError: v }), (e, t) => (m(), p(K, B({
+      tag: "fieldset",
+      style: o(F),
+      disabled: e.disabled,
+      required: e.required,
+      "is-inside-form": o(y),
+      label: e.label,
+      class: [
+        o(_)
+      ]
+    }, N(I)), {
+      default: $(() => [
+        w("div", {
+          class: A(o(G).wrapper)
+        }, [
+          E(e.$slots, "default")
+        ], 2),
+        e.hideFooter ? P("", !0) : (m(), p(O, {
+          key: 0,
+          error: o(a),
+          helper: e.helper
+        }, null, 8, ["error", "helper"]))
+      ]),
+      _: 3
+    }, 16, ["style", "disabled", "required", "is-inside-form", "label", "class"]));
+  }
+});
+export {
+  R as default
+};

package/lib/components/formGroup/FormGroup.vue2.js

@@ -0,0 +1,4 @@
+import f from "./FormGroup.vue.js";
+export {
+  f as default
+};

package/lib/components/formGroup/__tests__/FormGroup.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/components/formGroup/index.d.ts

@@ -0,0 +1,2 @@
+export { default as XFormGroup } from './FormGroup.vue';
+export type { FormGroupProps, FormGroupInjection, FormGroupInput, FormGroupTheme } from './FormGroup.vue';

package/lib/components/formGroup/theme/FormGroup.base.theme.d.ts

@@ -0,0 +1,3 @@
+import type { FormGroupTheme } from '../FormGroup.vue';
+declare const theme: FormGroupTheme;
+export default theme;

package/lib/components/formGroup/theme/FormGroup.base.theme.js

@@ -0,0 +1,11 @@
+const t = {
+  classes: {
+    wrapper: ({ props: s }) => {
+      const e = [""];
+      return s.vertical ? e.push("grid gap-1") : e.push("flex gap-2"), e;
+    }
+  }
+}, a = t;
+export {
+  a as default
+};

package/lib/components/formGroup/theme/FormGroup.carbon.theme.d.ts

@@ -0,0 +1,3 @@
+import type { FormGroupTheme } from '../FormGroup.vue';
+declare const theme: FormGroupTheme;
+export default theme;

package/lib/components/formGroup/theme/FormGroup.carbon.theme.js

@@ -0,0 +1,11 @@
+const t = {
+  classes: {
+    wrapper: ({ props: s }) => {
+      const e = [""];
+      return s.vertical ? e.push("grid gap-3") : e.push("flex gap-4"), e;
+    }
+  }
+}, a = t;
+export {
+  a as default
+};

package/lib/components/icon/theme/Icon.base.theme.js

@@ -1,7 +1,7 @@
 const t = {
   classes: {
     wrapper: ({ props: s }) => {
-      const e = "inline";
+      const e = "inline shrink-0";
       return s.size === "xs" ? e + " h-3 w-3" : s.size === "sm" ? e + " h-4 w-4" : s.size === "lg" ? e + " h-6 w-6" : s.size === "xl" ? e + " h-9 w-9" : e + " h-5 w-5";
     }
   }

package/lib/components/icon/theme/Icon.carbon.theme.js

@@ -1,11 +1,11 @@
 const t = {
   classes: {
     wrapper: ({ props: s }) => {
-      const e = "inline";
-      return s.size === "xs" ? e + " h-3 w-3" : s.size === "sm" ? e + " h-4 w-4" : s.size === "lg" ? e + " h-6 w-6" : s.size === "xl" ? e + " h-9 w-9" : e + " h-4 w-4";
+      const e = "inline shrink-0";
+      return s.size === "xs" ? e + " h-3 w-3" : s.size === "lg" ? e + " h-5 w-5" : s.size === "xl" ? e + " h-8 w-8" : e + " h-4 w-4";
     }
   }
-}, i = t;
+}, n = t;
 export {
-  i as default
+  n as default
 };

package/lib/components/index.d.ts

@@ -1,3 +1,4 @@
+export * from './accordion';
 export * from './alert';
 export * from './avatar';
 export * from './badge';
@@ -6,11 +7,11 @@ export * from './button';
 export * from './card';
 export * from './carousel';
 export * from './checkbox';
-export * from './collapse';
 export * from './container';
 export * from './divider';
 export * from './drawer';
 export * from './form';
+export * from './formGroup';
 export * from './icon';
 export * from './image';
 export * from './input';
@@ -31,6 +32,7 @@ export * from './skeleton';
 export * from './slider';
 export * from './spacer';
 export * from './spinner';
+export * from './stepper';
 export * from './tab';
 export * from './table';
 export * from './tag';