@indielayer/ui 1.3.0 → 1.4.0

package/lib/components/radio/Radio.vue.d.ts

@@ -1,11 +1,10 @@
 import { type ExtractPublicPropTypes, type Ref } from 'vue';
 import { type ThemeComponent } from '../../composables/useTheme';
 declare const radioProps: {
-    value: (ArrayConstructor | ObjectConstructor | StringConstructor | BooleanConstructor | NumberConstructor | FunctionConstructor)[];
-    label: StringConstructor;
-    helper: StringConstructor;
+    value: (StringConstructor | NumberConstructor)[];
     glow: BooleanConstructor;
     modelValue: import("vue").PropType<string | number | boolean | object | any[] | undefined>;
+    id: StringConstructor;
     name: StringConstructor;
     readonly: BooleanConstructor;
     required: BooleanConstructor;
@@ -13,6 +12,8 @@ declare const radioProps: {
         readonly type: BooleanConstructor;
         readonly default: true;
     };
+    label: StringConstructor;
+    helper: StringConstructor;
     error: StringConstructor;
     hideFooter: BooleanConstructor;
     rules: {
@@ -40,15 +41,16 @@ export type RadioProps = ExtractPublicPropTypes<typeof radioProps>;
 type InternalClasses = 'wrapper' | 'circle' | 'circleIcon' | 'label' | 'content';
 type InternalExtraData = {
     selected: Ref<boolean>;
+    isInsideForm: boolean;
+    isInsideFormGroup: boolean;
 };
 export interface RadioTheme extends ThemeComponent<RadioProps, InternalClasses, InternalExtraData> {
 }
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
-    value: (ArrayConstructor | ObjectConstructor | StringConstructor | BooleanConstructor | NumberConstructor | FunctionConstructor)[];
-    label: StringConstructor;
-    helper: StringConstructor;
+    value: (StringConstructor | NumberConstructor)[];
     glow: BooleanConstructor;
     modelValue: import("vue").PropType<string | number | boolean | object | any[] | undefined>;
+    id: StringConstructor;
     name: StringConstructor;
     readonly: BooleanConstructor;
     required: BooleanConstructor;
@@ -56,6 +58,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         readonly type: BooleanConstructor;
         readonly default: true;
     };
+    label: StringConstructor;
+    helper: StringConstructor;
     error: StringConstructor;
     hideFooter: BooleanConstructor;
     rules: {
@@ -85,11 +89,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     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<{
-    value: (ArrayConstructor | ObjectConstructor | StringConstructor | BooleanConstructor | NumberConstructor | FunctionConstructor)[];
-    label: StringConstructor;
-    helper: StringConstructor;
+    value: (StringConstructor | NumberConstructor)[];
     glow: BooleanConstructor;
     modelValue: import("vue").PropType<string | number | boolean | object | any[] | undefined>;
+    id: StringConstructor;
     name: StringConstructor;
     readonly: BooleanConstructor;
     required: BooleanConstructor;
@@ -97,6 +100,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         readonly type: BooleanConstructor;
         readonly default: true;
     };
+    label: StringConstructor;
+    helper: StringConstructor;
     error: StringConstructor;
     hideFooter: BooleanConstructor;
     rules: {
@@ -122,14 +127,14 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
 }>> & {
     [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
 }, {
-    size: import("../../composables/useCommon").Size;
-    required: boolean;
+    disabled: boolean;
     glow: boolean;
     color: string;
-    disabled: boolean;
+    size: import("../../composables/useCommon").Size;
     loading: boolean;
     loadingStatus: import("../loader/Loader.vue").LoaderStatus;
     readonly: boolean;
+    required: boolean;
     validateOnInput: boolean;
     hideFooter: boolean;
     rules: unknown[];

package/lib/components/radio/Radio.vue2.js

@@ -1,117 +1,132 @@
-import { defineComponent as I, ref as N, computed as q, openBlock as o, createElementBlock as d, normalizeStyle as E, unref as l, normalizeClass as s, withKeys as D, withModifiers as F, createElementVNode as t, withDirectives as K, vModelRadio as M, createBlock as b, toDisplayString as j, createCommentVNode as u, renderSlot as A } from "vue";
-import { useCommon as y } from "../../composables/useCommon.js";
-import { useTheme as L } from "../../composables/useTheme.js";
-import { useColors as O } from "../../composables/useColors.js";
-import { useInteractive as g } from "../../composables/useInteractive.js";
-import { useInputtable as m } from "../../composables/useInputtable.js";
-import P from "../spinner/Spinner.vue.js";
-import T from "../inputFooter/InputFooter.vue.js";
-const U = ["aria-selected", "aria-disabled"], X = ["name", "required", "disabled"], G = /* @__PURE__ */ t("circle", {
+import { defineComponent as D, ref as M, computed as P, unref as s, openBlock as o, createElementBlock as n, normalizeStyle as T, normalizeClass as r, withKeys as H, withModifiers as L, createElementVNode as a, withDirectives as O, mergeProps as U, toHandlers as X, vModelRadio as _, createBlock as h, toDisplayString as j, createCommentVNode as p, renderSlot as A } from "vue";
+import { useCommon as g } from "../../composables/useCommon.js";
+import { useTheme as J } from "../../composables/useTheme.js";
+import { useColors as Q } from "../../composables/useColors.js";
+import { useInteractive as w } from "../../composables/useInteractive.js";
+import { useInputtable as c } from "../../composables/useInputtable.js";
+import W from "../spinner/Spinner.vue.js";
+import Y from "../inputFooter/InputFooter.vue.js";
+const Z = ["aria-selected", "aria-disabled", "onKeypress"], x = ["id", "name", "required", "disabled"], ee = /* @__PURE__ */ a("circle", {
   cx: "10",
   cy: "10",
   r: "10"
-}, null, -1), H = [
-  G
-], J = ["textContent"], Q = {
-  ...y.props(),
-  ...O.props("primary"),
+}, null, -1), le = [
+  ee
+], se = ["textContent"], oe = {
   ...g.props(),
-  ...m.props(),
-  value: [String, Number, Boolean, Function, Object, Array],
-  label: String,
-  helper: String,
+  ...Q.props("primary"),
+  ...w.props(),
+  ...c.props(),
+  value: [String, Number],
   glow: Boolean
-}, W = {
+}, re = {
   name: "XRadio",
   validators: {
-    ...y.validators()
+    ...g.validators()
   }
-}, re = /* @__PURE__ */ I({
-  ...W,
-  props: Q,
-  emits: m.emits(!1),
-  setup(h, { expose: w, emit: k }) {
-    const r = h, p = k, c = N(null), i = q({
+}, ce = /* @__PURE__ */ D({
+  ...re,
+  props: oe,
+  emits: c.emits(!1),
+  setup(V, { expose: k, emit: I }) {
+    const l = V, d = I, f = M(null), { focus: v, blur: C } = w(f), {
+      errorInternal: $,
+      hideFooterInternal: z,
+      isInsideForm: B,
+      isInsideFormGroup: u,
+      isFirstValidation: R,
+      formGroup: m,
+      reset: F,
+      validate: b,
+      setError: N
+    } = c(l, { focus: v, emit: d, withListeners: !1 }), i = P({
       get() {
-        return r.value === r.modelValue;
+        const e = s(m.value);
+        return u ? e === l.value : l.value === l.modelValue;
       },
       set() {
-        p("update:modelValue", r.value);
+        d("update:modelValue", l.value), m.setValue(l.value);
       }
-    }), { focus: f, blur: $ } = g(c), {
-      errorInternal: C,
-      reset: B,
-      validate: S,
-      setError: V
-    } = m(r, { focus: f, emit: p, withListeners: !1 }), { styles: z, classes: a, className: R } = L("Radio", {}, r, { selected: i });
-    return w({ focus: f, blur: $, reset: B, validate: S, setError: V }), (e, n) => (o(), d("label", {
+    });
+    function S() {
+      d("update:modelValue", l.value), m.setValue(l.value);
+    }
+    const q = {
+      input: () => {
+        u || setTimeout(() => {
+          l.validateOnInput && !R.value && b(l.modelValue);
+        }, 0);
+      }
+    }, { styles: E, classes: t, className: G } = J("Radio", {}, l, { selected: i, isInsideForm: B, isInsideFormGroup: u });
+    return k({ focus: v, blur: C, reset: F, validate: b, setError: N }), (e, y) => (o(), n("label", {
       ref_key: "elRef",
-      ref: c,
+      ref: f,
       tabindex: "0",
       "aria-selected": i.value ? "true" : "false",
       "aria-disabled": e.disabled || e.loading ? "true" : void 0,
-      style: E(l(z)),
-      class: s([
-        l(R),
-        l(a).wrapper
+      style: T(s(E)),
+      class: r([
+        s(G),
+        s(t).wrapper
       ]),
-      onKeypress: n[1] || (n[1] = D(F((v) => e.$emit("update:modelValue", e.value), ["prevent", "stop"]), ["space"]))
+      onKeypress: H(L(S, ["prevent", "stop"]), ["space"])
     }, [
-      t("div", {
-        class: s(["flex items-center", { "cursor-not-allowed": e.disabled }])
+      a("div", {
+        class: r(["flex items-center", { "cursor-not-allowed": e.disabled }])
       }, [
-        K(t("input", {
-          "onUpdate:modelValue": n[0] || (n[0] = (v) => i.value = v),
+        O(a("input", U({
+          id: e.id,
+          "onUpdate:modelValue": y[0] || (y[0] = (K) => i.value = K),
           name: e.name,
           required: e.required,
           disabled: e.disabled || e.loading,
           type: "radio",
           class: "invisible absolute"
-        }, null, 8, X), [
-          [M, i.value]
+        }, X(q, !0)), null, 16, x), [
+          [_, i.value]
         ]),
-        t("div", {
-          class: s([
+        a("div", {
+          class: r([
             e.$style.radio,
-            l(a).circle,
+            s(t).circle,
             [e.glow && !e.disabled && !e.loading ? e.$style["radio--glow"] : ""]
           ])
         }, [
-          e.loading ? (o(), b(P, {
+          e.loading ? (o(), h(W, {
             key: 0,
             size: e.size,
             class: "absolute"
-          }, null, 8, ["size"])) : (o(), d("svg", {
+          }, null, 8, ["size"])) : (o(), n("svg", {
             key: 1,
             viewBox: "0 0 20 20",
-            class: s(["fill-current w-full", [
-              l(a).circleIcon,
+            class: r(["fill-current w-full", [
+              s(t).circleIcon,
               e.$style.radio_circle
             ]])
-          }, H, 2))
+          }, le, 2))
         ], 2),
-        t("div", null, [
-          e.label ? (o(), d("div", {
+        a("div", null, [
+          e.label ? (o(), n("div", {
             key: 0,
-            class: s(l(a).label),
+            class: r(s(t).label),
             textContent: j(e.label)
-          }, null, 10, J)) : u("", !0),
-          e.$slots.default ? (o(), d("div", {
+          }, null, 10, se)) : p("", !0),
+          e.$slots.default ? (o(), n("div", {
             key: 1,
-            class: s(l(a).content)
+            class: r(s(t).content)
           }, [
             A(e.$slots, "default")
-          ], 2)) : u("", !0)
+          ], 2)) : p("", !0)
         ])
       ], 2),
-      e.hideFooter ? u("", !0) : (o(), b(T, {
+      s(z) ? p("", !0) : (o(), h(Y, {
         key: 0,
-        error: l(C),
+        error: s($),
         helper: e.helper
       }, null, 8, ["error", "helper"]))
-    ], 46, U));
+    ], 46, Z));
   }
 });
 export {
-  re as default
+  ce as default
 };

package/lib/components/radio/theme/Radio.base.theme.js

@@ -1,6 +1,9 @@
-const n = {
+const a = {
   classes: {
-    wrapper: "inline-block relative cursor-pointer focus:outline-none group",
+    wrapper: ({ data: e }) => {
+      const t = ["inline-block relative cursor-pointer focus:outline-none group"];
+      return e.isInsideForm && !e.isInsideFormGroup && t.push("mb-3"), t;
+    },
     circle: ({ props: e }) => {
       let t = "rounded-full flex justify-center items-center shrink-0 border-2 outline-offset-2 outline-slate-300 dark:outline-slate-500 group-focus:outline-1 group-focus:outline";
       return (e.size === "xs" || e.size === "sm") && (t += " h-4 w-4"), e.size === "xl" ? t += " h-6 w-6" : t += " h-5 w-5", t;
@@ -18,8 +21,8 @@ const n = {
       return e.size === "xs" ? t += " text-xs" : e.size === "sm" ? t += " text-sm" : e.size === "lg" ? t += " text-lg" : e.size === "xl" && (t += " text-xl"), t;
     }
   },
-  styles: ({ props: e, colors: t, css: r, data: a }) => {
-    const l = t.getPalette("gray"), i = t.getPalette(e.color), s = [];
+  styles: ({ props: e, colors: t, css: r, data: n }) => {
+    const l = t.getPalette("gray"), s = t.getPalette(e.color), i = [];
     return e.loading ? r.variables({
       bg: "transparent",
       border: "transparent",
@@ -27,7 +30,7 @@ const n = {
         bg: "transparent",
         border: "transparent"
       }
-    }) : (e.disabled ? a.selected ? s.push(r.variables({
+    }) : (e.disabled ? n.selected ? i.push(r.variables({
       bg: "transparent",
       border: l[200],
       circle: l[200],
@@ -36,32 +39,32 @@ const n = {
         border: l[700],
         circle: l[700]
       }
-    })) : s.push(r.variables({
+    })) : i.push(r.variables({
       bg: l[200],
       border: l[200],
       dark: {
         bg: l[700],
         border: l[700]
       }
-    })) : (a.selected ? s.push(r.variables({
+    })) : (n.selected ? i.push(r.variables({
       bg: "transparent",
-      border: i[500],
-      circle: i[500],
+      border: s[500],
+      circle: s[500],
       dark: {
         bg: "transparent",
-        border: i[500],
-        circle: i[500]
+        border: s[500],
+        circle: s[500]
       }
-    })) : s.push(r.variables({
+    })) : i.push(r.variables({
       bg: "#fff",
-      border: e.glow ? i[300] : l[300],
+      border: e.glow ? s[300] : l[300],
       dark: {
         bg: l[900],
-        border: e.glow ? i[300] : l[300]
+        border: e.glow ? s[300] : l[300]
       }
-    })), e.glow && s.push(r.get("glow", t.getColorOpacity(i[500], 0.5)))), s);
+    })), e.glow && i.push(r.get("glow", t.getColorOpacity(s[500], 0.5)))), i);
   }
-}, u = n;
+}, u = a;
 export {
   u as default
 };

package/lib/components/radio/theme/Radio.carbon.theme.js

@@ -1,59 +1,62 @@
 const i = {
   classes: {
-    wrapper: "inline-block relative cursor-pointer focus:outline-none group",
+    wrapper: ({ data: e }) => {
+      const r = ["inline-block relative cursor-pointer focus:outline-none group"];
+      return e.isInsideForm && !e.isInsideFormGroup && r.push("mb-8"), r;
+    },
     circle: ({ props: e }) => {
-      let l = "rounded-full flex justify-center items-center shrink-0 border outline-offset-2 outline-slate-300 dark:outline-slate-500 group-focus:outline-1 group-focus:outline";
-      return (e.size === "xs" || e.size === "sm") && (l += " h-4 w-4"), e.size === "xl" ? l += " h-6 w-6" : l += " h-5 w-5", l;
+      const r = ["rounded-full flex justify-center items-center shrink-0 border outline-offset-2 outline-slate-300 dark:outline-slate-500 group-focus:outline-1 group-focus:outline"];
+      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;
     },
-    circleIcon: ({ props: e, data: l }) => {
-      const r = [];
-      return l.selected ? e.size === "lg" ? r.push("h-2.5") : e.size === "xl" ? r.push("h-3") : r.push("h-2") : r.push("opacity-0"), r;
+    circleIcon: ({ props: e, data: r }) => {
+      const t = [];
+      return r.selected ? e.size === "lg" ? t.push("h-2.5") : e.size === "xl" ? t.push("h-3") : t.push("h-2") : t.push("opacity-0"), t;
     },
     label: "text-sm text-gray-800 dark:text-gray-200 pl-2",
     content: "pl-2"
   },
-  styles: ({ props: e, colors: l, css: r, data: s }) => {
-    const t = l.getPalette("gray"), a = l.getPalette(e.color), n = [];
-    return e.loading ? r.variables({
+  styles: ({ props: e, colors: r, css: t, data: n }) => {
+    const s = r.getPalette("gray"), l = r.getPalette(e.color), a = [];
+    return e.loading ? t.variables({
       bg: "transparent",
       border: "transparent",
       dark: {
         bg: "transparent",
         border: "transparent"
       }
-    }) : (e.disabled ? s.selected ? n.push(r.variables({
+    }) : (e.disabled ? n.selected ? a.push(t.variables({
       bg: "transparent",
-      border: t[200],
-      circle: t[200],
+      border: s[200],
+      circle: s[200],
       dark: {
         bg: "transparent",
-        border: t[700],
-        circle: t[700]
+        border: s[700],
+        circle: s[700]
       }
-    })) : n.push(r.variables({
-      bg: t[200],
-      border: t[200],
+    })) : a.push(t.variables({
+      bg: s[200],
+      border: s[200],
       dark: {
-        bg: t[700],
-        border: t[700]
+        bg: s[700],
+        border: s[700]
       }
-    })) : (s.selected ? n.push(r.variables({
+    })) : (n.selected ? a.push(t.variables({
       bg: "transparent",
-      border: a[500],
-      circle: a[500],
+      border: l[500],
+      circle: l[500],
       dark: {
         bg: "transparent",
-        border: a[500],
-        circle: a[500]
+        border: l[500],
+        circle: l[500]
       }
-    })) : n.push(r.variables({
+    })) : a.push(t.variables({
       bg: "#fff",
-      border: e.glow ? a[300] : t[300],
+      border: e.glow ? l[300] : s[900],
       dark: {
-        bg: t[900],
-        border: e.glow ? a[300] : t[300]
+        bg: s[900],
+        border: e.glow ? l[300] : s[300]
       }
-    })), e.glow && n.push(r.get("glow", l.getColorOpacity(a[500], 0.5)))), n);
+    })), e.glow && a.push(t.get("glow", r.getColorOpacity(l[500], 0.5)))), a);
   }
 }, o = i;
 export {

package/lib/components/select/Select.vue.d.ts

@@ -4,11 +4,10 @@ declare const selectProps: {
     placeholder: StringConstructor;
     options: PropType<SelectOption[]>;
     multiple: BooleanConstructor;
-    label: StringConstructor;
-    helper: StringConstructor;
     flat: BooleanConstructor;
     native: BooleanConstructor;
     modelValue: PropType<string | number | boolean | object | any[] | undefined>;
+    id: StringConstructor;
     name: StringConstructor;
     readonly: BooleanConstructor;
     required: BooleanConstructor;
@@ -16,6 +15,8 @@ declare const selectProps: {
         readonly type: BooleanConstructor;
         readonly default: true;
     };
+    label: StringConstructor;
+    helper: StringConstructor;
     error: StringConstructor;
     hideFooter: BooleanConstructor;
     rules: {
@@ -37,8 +38,8 @@ declare const selectProps: {
 };
 export type SelectOption = {
     value: number | string;
-    disabled: boolean;
     label: string;
+    disabled?: boolean;
 };
 export type SelectProps = ExtractPublicPropTypes<typeof selectProps>;
 type InternalClasses = 'wrapper' | 'box' | 'content' | 'iconWrapper' | 'icon';
@@ -51,11 +52,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     placeholder: StringConstructor;
     options: PropType<SelectOption[]>;
     multiple: BooleanConstructor;
-    label: StringConstructor;
-    helper: StringConstructor;
     flat: BooleanConstructor;
     native: BooleanConstructor;
     modelValue: PropType<string | number | boolean | object | any[] | undefined>;
+    id: StringConstructor;
     name: StringConstructor;
     readonly: BooleanConstructor;
     required: BooleanConstructor;
@@ -63,6 +63,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         readonly type: BooleanConstructor;
         readonly default: true;
     };
+    label: StringConstructor;
+    helper: StringConstructor;
     error: StringConstructor;
     hideFooter: BooleanConstructor;
     rules: {
@@ -91,11 +93,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     placeholder: StringConstructor;
     options: PropType<SelectOption[]>;
     multiple: BooleanConstructor;
-    label: StringConstructor;
-    helper: StringConstructor;
     flat: BooleanConstructor;
     native: BooleanConstructor;
     modelValue: PropType<string | number | boolean | object | any[] | undefined>;
+    id: StringConstructor;
     name: StringConstructor;
     readonly: BooleanConstructor;
     required: BooleanConstructor;
@@ -103,6 +104,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         readonly type: BooleanConstructor;
         readonly default: true;
     };
+    label: StringConstructor;
+    helper: StringConstructor;
     error: StringConstructor;
     hideFooter: BooleanConstructor;
     rules: {
@@ -124,13 +127,13 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
 }>> & {
     [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
 }, {
-    size: import("../../composables/useCommon").Size;
-    flat: boolean;
-    required: boolean;
     disabled: boolean;
+    flat: boolean;
+    size: import("../../composables/useCommon").Size;
     loading: boolean;
     loadingStatus: import("../loader/Loader.vue").LoaderStatus;
     readonly: boolean;
+    required: boolean;
     validateOnInput: boolean;
     hideFooter: boolean;
     rules: unknown[];