@indielayer/ui 1.3.0 → 1.4.0

package/lib/components/textarea/theme/Textarea.carbon.theme.js

@@ -3,7 +3,7 @@ const t = {
     wrapper: "",
     input: ({ props: r, data: a }) => {
       const e = ["resize-none appearance-none block w-full placeholder-gray-400 dark:placeholder-gray-500 outline-transparent outline outline-2 outline-offset-[-1px] transition duration-150 ease-in-out border-gray-300 dark:border-gray-700 border-b text-sm px-4"];
-      return !a.errorInternal && !r.disabled && e.push("hover:border-gray-400 dark:hover:border-gray-500"), r.size === "xs" || r.size === "sm" ? e.push("py-1.5") : r.size === "lg" || r.size === "xl" ? e.push("py-3.5") : e.push("py-2.5"), r.disabled ? e.push("bg-gray-100 dark:bg-gray-900 text-gray-300 cursor-not-allowed") : r.readonly ? e.push("bg-white dark:bg-gray-900 text-gray-700") : e.push("bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-200"), e;
+      return !a.errorInternal && !r.disabled && e.push("hover:border-gray-400 dark:hover:border-gray-500"), r.size === "xs" || r.size === "sm" ? e.push("py-1.5") : r.size === "lg" || r.size === "xl" ? e.push("py-3.5") : e.push("py-2.5"), r.disabled ? e.push("bg-gray-100 dark:bg-gray-900 text-gray-300 cursor-not-allowed") : r.readonly ? e.push("bg-white dark:bg-gray-900 text-gray-700") : e.push("bg-gray-50 dark:bg-gray-800 text-gray-700 dark:text-gray-200"), e;
     }
   }
 }, s = t;

package/lib/components/toggle/Toggle.vue.d.ts

@@ -1,11 +1,9 @@
 import { type ExtractPublicPropTypes } from 'vue';
 import { type ThemeComponent } from '../../composables/useTheme';
 declare const toggleProps: {
-    id: StringConstructor;
-    label: StringConstructor;
-    helper: StringConstructor;
     glow: BooleanConstructor;
     modelValue: import("vue").PropType<string | number | boolean | object | any[] | undefined>;
+    id: StringConstructor;
     name: StringConstructor;
     readonly: BooleanConstructor;
     required: BooleanConstructor;
@@ -13,6 +11,8 @@ declare const toggleProps: {
         readonly type: BooleanConstructor;
         readonly default: true;
     };
+    label: StringConstructor;
+    helper: StringConstructor;
     error: StringConstructor;
     hideFooter: BooleanConstructor;
     rules: {
@@ -41,11 +41,9 @@ type InternalClasses = 'wrapper' | 'label' | 'buttonWrapper' | 'button';
 export interface ToggleTheme extends ThemeComponent<ToggleProps, InternalClasses> {
 }
 declare const _default: import("vue").DefineComponent<{
-    id: StringConstructor;
-    label: StringConstructor;
-    helper: StringConstructor;
     glow: BooleanConstructor;
     modelValue: import("vue").PropType<string | number | boolean | object | any[] | undefined>;
+    id: StringConstructor;
     name: StringConstructor;
     readonly: BooleanConstructor;
     required: BooleanConstructor;
@@ -53,6 +51,8 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: BooleanConstructor;
         readonly default: true;
     };
+    label: StringConstructor;
+    helper: StringConstructor;
     error: StringConstructor;
     hideFooter: BooleanConstructor;
     rules: {
@@ -82,11 +82,9 @@ declare const _default: 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<{
-    id: StringConstructor;
-    label: StringConstructor;
-    helper: StringConstructor;
     glow: BooleanConstructor;
     modelValue: import("vue").PropType<string | number | boolean | object | any[] | undefined>;
+    id: StringConstructor;
     name: StringConstructor;
     readonly: BooleanConstructor;
     required: BooleanConstructor;
@@ -94,6 +92,8 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: BooleanConstructor;
         readonly default: true;
     };
+    label: StringConstructor;
+    helper: StringConstructor;
     error: StringConstructor;
     hideFooter: BooleanConstructor;
     rules: {
@@ -119,14 +119,14 @@ declare const _default: 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/toggle/Toggle.vue.js

@@ -1,51 +1,49 @@
-import { defineComponent as I, ref as N, computed as T, openBlock as i, createElementBlock as b, normalizeClass as o, unref as r, createElementVNode as a, normalizeStyle as $, withDirectives as D, vModelCheckbox as R, toDisplayString as F, createCommentVNode as d, createBlock as c } from "vue";
-import { useTheme as L } from "../../composables/useTheme.js";
+import { defineComponent as T, ref as $, computed as D, openBlock as t, createElementBlock as b, normalizeClass as o, unref as r, createElementVNode as a, normalizeStyle as R, withDirectives as S, vModelCheckbox as F, toDisplayString as L, createCommentVNode as i, createBlock as c } from "vue";
+import { useTheme as M } from "../../composables/useTheme.js";
 import { useCommon as f } from "../../composables/useCommon.js";
-import { useColors as M } from "../../composables/useColors.js";
+import { useColors as P } from "../../composables/useColors.js";
 import { useInputtable as n } from "../../composables/useInputtable.js";
-import { useInteractive as h } from "../../composables/useInteractive.js";
-import P from "../spinner/Spinner.vue.js";
-import U from "../inputFooter/InputFooter.vue.js";
-const W = { class: "flex items-center" }, X = ["id", "aria-checked", "aria-disabled", "disabled", "name", "required", "value"], j = ["textContent"], A = {
+import { useInteractive as v } from "../../composables/useInteractive.js";
+import U from "../spinner/Spinner.vue.js";
+import W from "../inputFooter/InputFooter.vue.js";
+const X = { class: "flex items-center" }, j = ["id", "aria-checked", "aria-disabled", "disabled", "name", "required", "value"], A = ["textContent"], G = {
   ...f.props(),
-  ...M.props("primary"),
-  ...h.props(),
+  ...P.props("primary"),
+  ...v.props(),
   ...n.props(),
-  id: String,
-  label: String,
-  helper: String,
   glow: Boolean
-}, G = {
+}, H = {
   name: "XToggle",
   validators: {
     ...f.validators()
   }
-}, x = /* @__PURE__ */ I({
-  ...G,
-  props: A,
+}, ee = /* @__PURE__ */ T({
+  ...H,
+  props: G,
   emits: n.emits(!1),
-  setup(v, { expose: k, emit: y }) {
-    const t = v, u = y, m = N(null), l = T({
+  setup(h, { expose: k, emit: y }) {
+    const d = h, u = y, m = $(null), l = D({
       get() {
-        return !!t.modelValue;
+        return !!d.modelValue;
       },
       set(e) {
         u("update:modelValue", e);
       }
-    }), { focus: p, blur: w } = h(m), {
+    }), { focus: p, blur: w } = v(m), {
       errorInternal: C,
-      reset: V,
-      validate: z,
-      setError: S
-    } = n(t, { focus: p, emit: u, withListeners: !1 }), { styles: B, classes: s, className: q } = L("Toggle", {}, t);
-    return k({ focus: p, blur: w, reset: V, validate: z, setError: S }), (e, g) => (i(), b("label", {
+      hideFooterInternal: V,
+      reset: z,
+      validate: B,
+      setError: I
+    } = n(d, { focus: p, emit: u, withListeners: !1 }), { styles: q, classes: s, className: E } = M("Toggle", {}, d);
+    return k({ focus: p, blur: w, reset: z, validate: B, setError: I }), (e, g) => (t(), b("label", {
       class: o(["inline-block", [
-        r(q),
+        r(E),
         r(s).wrapper,
         e.disabled ? "cursor-not-allowed" : "cursor-pointer"
       ]])
     }, [
-      a("div", W, [
+      a("div", X, [
         a("div", {
           class: o(["flex items-center rounded-full transition-colors duration-300 border-[3px] shrink-0 !border-transparent", {
             [`shadow-lg shadow-${e.color}-500/50`]: e.glow && e.modelValue,
@@ -53,16 +51,16 @@ const W = { class: "flex items-center" }, X = ["id", "aria-checked", "aria-disab
             "bg-gray-100 dark:bg-gray-700": e.disabled || e.loading,
             "bg-[color:var(--x-toggle-bg)] dark:bg-[color:var(--x-toggle-dark-bg)]": !e.disabled && l.value
           }]),
-          style: $(r(B))
+          style: R(r(q))
         }, [
           a("div", {
             class: o(r(s).buttonWrapper)
           }, [
-            D(a("input", {
+            S(a("input", {
               id: e.id,
               ref_key: "elRef",
               ref: m,
-              "onUpdate:modelValue": g[0] || (g[0] = (E) => l.value = E),
+              "onUpdate:modelValue": g[0] || (g[0] = (N) => l.value = N),
               "aria-checked": l.value ? "true" : "false",
               "aria-disabled": e.disabled ? "true" : void 0,
               type: "checkbox",
@@ -71,8 +69,8 @@ const W = { class: "flex items-center" }, X = ["id", "aria-checked", "aria-disab
               name: e.name,
               required: e.required,
               value: e.modelValue
-            }, null, 8, X), [
-              [R, l.value]
+            }, null, 8, j), [
+              [F, l.value]
             ]),
             a("div", {
               class: o([
@@ -86,18 +84,18 @@ const W = { class: "flex items-center" }, X = ["id", "aria-checked", "aria-disab
             }, null, 2)
           ], 2)
         ], 6),
-        e.label ? (i(), b("span", {
+        e.label ? (t(), b("span", {
           key: 0,
           class: o(["ml-2", r(s).label]),
-          textContent: F(e.label)
-        }, null, 10, j)) : d("", !0),
-        e.loading ? (i(), c(P, {
+          textContent: L(e.label)
+        }, null, 10, A)) : i("", !0),
+        e.loading ? (t(), c(U, {
           key: 1,
           size: e.size,
           class: "ml-1"
-        }, null, 8, ["size"])) : d("", !0)
+        }, null, 8, ["size"])) : i("", !0)
       ]),
-      e.hideFooter ? d("", !0) : (i(), c(U, {
+      r(V) ? i("", !0) : (t(), c(W, {
         key: 0,
         error: r(C),
         helper: e.helper
@@ -106,5 +104,5 @@ const W = { class: "flex items-center" }, X = ["id", "aria-checked", "aria-disab
   }
 });
 export {
-  x as default
+  ee as default
 };

package/lib/composables/keys.d.ts

@@ -4,12 +4,16 @@ import type { TabGroupInjection } from '../components/tab/TabGroup.vue';
 import type { ButtonGroupInjection } from '../components/button/ButtonGroup.vue';
 import type { NotificationInjection } from '../components/notifications/Notifications.vue';
 import type { IconInjection } from '../components/icon/Icon.vue';
+import type { FormGroupInjection } from '../components/formGroup';
+import type { AccordionInjection } from '../components/accordion';
 import type { UIOptions } from '../create';
 import type { UITheme } from '../theme';
 export declare const injectOptionsKey: InjectionKey<UIOptions>;
 export declare const injectThemeKey: InjectionKey<MaybeRef<UITheme>>;
-export declare const injectTabKey: InjectionKey<TabGroupInjection>;
+export declare const injectTabGroupKey: InjectionKey<TabGroupInjection>;
 export declare const injectFormKey: InjectionKey<FormInjection>;
+export declare const injectFormGroupKey: InjectionKey<FormGroupInjection>;
 export declare const injectIconsKey: InjectionKey<IconInjection>;
 export declare const injectButtonGroupKey: InjectionKey<ButtonGroupInjection>;
 export declare const injectNotificationKey: InjectionKey<NotificationInjection>;
+export declare const injectAccordionKey: InjectionKey<AccordionInjection>;

package/lib/composables/keys.js

@@ -1,10 +1,12 @@
-const o = Symbol(), t = Symbol(), n = Symbol(), e = Symbol(), c = Symbol(), y = Symbol(), i = Symbol();
+const o = Symbol(), t = Symbol(), n = Symbol(), c = Symbol(), e = Symbol(), y = Symbol(), i = Symbol(), m = Symbol(), s = Symbol();
 export {
-  y as injectButtonGroupKey,
-  e as injectFormKey,
-  c as injectIconsKey,
-  i as injectNotificationKey,
+  s as injectAccordionKey,
+  i as injectButtonGroupKey,
+  e as injectFormGroupKey,
+  c as injectFormKey,
+  y as injectIconsKey,
+  m as injectNotificationKey,
   o as injectOptionsKey,
-  n as injectTabKey,
+  n as injectTabGroupKey,
   t as injectThemeKey
 };

package/lib/composables/useFocusTrap.d.ts

@@ -0,0 +1,6 @@
+import type { ComponentPublicInstance } from 'vue';
+import { type MaybeRef } from 'vue';
+export declare function useFocusTrap(): {
+    initFocusTrap: (targetRef: MaybeRef<HTMLElement | ComponentPublicInstance | null>) => Promise<void>;
+    clearFocusTrap: () => void;
+};

package/lib/composables/useFocusTrap.js

@@ -0,0 +1,45 @@
+import { onUnmounted as y, unref as p, nextTick as x } from "vue";
+const m = 'button:not([tabindex="-1"]), [href], input, select, textarea, li, a, [tabindex]:not([tabindex="-1"])';
+function w() {
+  let n = [], u = null, s = null, r = null;
+  async function b(e) {
+    e = p(e), e && (await x(), f(e), s && s.focus(), document.addEventListener("keydown", d), u = new MutationObserver(() => f(e)), e.$el ? u.observe(e.$el, { childList: !0, subtree: !0 }) : u.observe(e, { childList: !0, subtree: !0 }));
+  }
+  function f(e) {
+    if (e === null)
+      return;
+    let c;
+    e.$el ? c = e == null ? void 0 : e.$el.querySelectorAll(m) : e.querySelectorAll(m), n = Array.from(c || []), s = n[0] || null, r = n[n.length - 1] || null;
+  }
+  const d = (e) => {
+    var c;
+    if (e.key === "Tab") {
+      const t = e.shiftKey, o = document.activeElement;
+      if (!o) {
+        e.preventDefault(), (c = n[0]) == null || c.focus();
+        return;
+      }
+      const l = n[0], i = n[n.length - 1];
+      !t && o === i ? (e.preventDefault(), l == null || l.focus()) : t && o === l && (e.preventDefault(), i == null || i.focus());
+    } else if (e.key === "ArrowUp" || e.key === "ArrowLeft") {
+      e.preventDefault();
+      const t = document.activeElement, o = n.indexOf(t), l = n[o - 1];
+      l ? l.focus() : r && r.focus();
+    } else if (e.key === "ArrowDown" || e.key === "ArrowRight") {
+      e.preventDefault();
+      const t = document.activeElement, o = n.indexOf(t), l = n[o + 1];
+      l ? l.focus() : s && s.focus();
+    }
+  }, a = () => {
+    document.removeEventListener("keydown", d), u == null || u.disconnect();
+  };
+  return y(() => {
+    a();
+  }), {
+    initFocusTrap: b,
+    clearFocusTrap: a
+  };
+}
+export {
+  w as useFocusTrap
+};

package/lib/composables/useInputtable.d.ts

@@ -12,14 +12,17 @@ export declare const useInputtable: {
     }): {
         isFirstValidation: import("vue").Ref<boolean>;
         errorInternal: any;
+        hideFooterInternal: any;
         isFocused: import("vue").Ref<boolean>;
         isInsideForm: boolean;
+        isInsideFormGroup: boolean;
         inputListeners: MaybeRef<{
             focus: (event: Event) => void;
             blur: (event: Event) => void;
             input: (event: Event) => void;
             change: (event: Event) => void;
         }>;
+        formGroup: import("..").FormGroupInjection;
         reset: () => void;
         validate: (val?: any) => boolean;
         setError: (val: string) => void;
@@ -27,6 +30,7 @@ export declare const useInputtable: {
     emits(withListeners?: boolean): string[];
     props(): {
         readonly modelValue: PropType<string | number | boolean | object | any[] | undefined>;
+        readonly id: StringConstructor;
         readonly name: StringConstructor;
         readonly readonly: BooleanConstructor;
         readonly required: BooleanConstructor;
@@ -34,6 +38,8 @@ export declare const useInputtable: {
             readonly type: BooleanConstructor;
             readonly default: true;
         };
+        readonly label: StringConstructor;
+        readonly helper: StringConstructor;
         readonly error: StringConstructor;
         readonly hideFooter: BooleanConstructor;
         readonly rules: {

package/lib/composables/useInputtable.js

@@ -1,51 +1,62 @@
-import { ref as s, watch as I, inject as B, computed as A, onMounted as S, onUnmounted as j } from "vue";
-import { injectFormKey as O } from "./keys.js";
-const p = (t, { focus: h, emit: u, withListeners: y = !0 }) => {
-  const o = s(!0), n = s(t.error), b = t.name ? t.name : (Math.random() + 1).toString(36).substring(7), i = s(b);
-  I(() => t.error, (e) => {
+import { ref as i, watch as h, inject as G, computed as j, onMounted as A, onUnmounted as O } from "vue";
+import { injectFormGroupKey as K, injectFormKey as M } from "./keys.js";
+const y = (r, { focus: I, emit: o, withListeners: b = !0 }) => {
+  const s = i(!0), n = i(r.error), v = i(r.hideFooter), V = r.name ? r.name : (Math.random() + 1).toString(36).substring(7), a = i(V);
+  h(() => r.error, (e) => {
     n.value = e;
-  }), I(() => t.name, (e) => {
-    e && (i.value = e);
+  }), h(() => r.name, (e) => {
+    e && (a.value = e);
   });
-  const c = B(O, {
+  const t = G(K, {
+    registerInputGroup: () => {
+    },
+    unregisterInputGroup: () => {
+    },
+    setValue: () => {
+    },
+    isInsideFormGroup: !1,
+    value: void 0
+  });
+  t.isInsideFormGroup && (v.value = !0);
+  const c = G(M, {
     registerInput: () => {
     },
     unregisterInput: () => {
     },
     isInsideForm: !1
-  }), V = () => {
-    n.value = "", o.value = !0, u("update:modelValue", "");
-  }, v = (e) => {
+  }), S = () => {
+    n.value = "", s.value = !0, o("update:modelValue", "");
+  }, F = (e) => {
     n.value = e;
-  }, d = (e) => {
-    e = e || t.modelValue, o.value = !1;
-    for (let m = 0; m < t.rules.length; m++) {
-      const r = t.rules[m];
-      let a = !0;
-      if (typeof r == "function")
-        a = r(e);
-      else if (Array.isArray(r) && r.length === 2) {
-        const { 0: l, 1: g } = r;
-        a = l(e, g);
+  }, m = (e) => {
+    e = e || r.modelValue, s.value = !1;
+    for (let p = 0; p < r.rules.length; p++) {
+      const u = r.rules[p];
+      let l = !0;
+      if (typeof u == "function")
+        l = u(e);
+      else if (Array.isArray(u) && u.length === 2) {
+        const { 0: d, 1: g } = u;
+        l = d(e, g);
       } else {
-        const l = r.fn, { options: g } = r;
-        a = l(e, g);
+        const d = u.fn, { options: g } = u;
+        l = d(e, g);
       }
-      if (a !== !0)
-        return n.value = a, !1;
+      if (l !== !0)
+        return n.value = l, !1;
     }
     return n.value = "", !0;
-  }, f = s(!1), F = y ? A(() => ({
+  }, f = i(!1), B = b ? j(() => ({
     focus: (e) => {
-      f.value = !0, u("focus", e);
+      f.value = !0, o("focus", e);
     },
     blur: (e) => {
-      f.value = !1, u("blur", e);
+      f.value = !1, o("blur", e);
     },
     input: (e) => {
-      t.validateOnInput && !o.value && d(e.target.value), u("update:modelValue", e.target.value);
+      r.validateOnInput && !s.value && m(e.target.value), o("update:modelValue", e.target.value);
     },
-    change: (e) => u("change", e)
+    change: (e) => o("change", e)
   })) : {
     focus: () => {
     },
@@ -56,24 +67,28 @@ const p = (t, { focus: h, emit: u, withListeners: y = !0 }) => {
     change: () => {
     }
   };
-  return S(() => {
-    c.registerInput(i.value, h, d, v);
-  }), j(() => {
-    c.unregisterInput(i.value);
+  return A(() => {
+    t.isInsideFormGroup ? t.registerInputGroup(a.value, I) : c.registerInput(a.value, I, m, F);
+  }), O(() => {
+    t.isInsideFormGroup ? t.unregisterInputGroup(a.value) : c.unregisterInput(a.value);
   }), {
-    isFirstValidation: o,
+    isFirstValidation: s,
     errorInternal: n,
+    hideFooterInternal: v,
     isFocused: f,
     isInsideForm: c.isInsideForm,
-    inputListeners: F,
-    reset: V,
-    validate: d,
-    setError: v
+    isInsideFormGroup: t.isInsideFormGroup,
+    inputListeners: B,
+    formGroup: t,
+    reset: S,
+    validate: m,
+    setError: F
   };
 };
-p.emits = (t = !0) => t ? ["update:modelValue", "blur", "focus", "input", "change"] : ["update:modelValue"];
-p.props = () => ({
+y.emits = (r = !0) => r ? ["update:modelValue", "blur", "focus", "input", "change"] : ["update:modelValue"];
+y.props = () => ({
   modelValue: [String, Number, Boolean, Object, Array],
+  id: String,
   name: String,
   readonly: Boolean,
   required: Boolean,
@@ -81,6 +96,8 @@ p.props = () => ({
     type: Boolean,
     default: !0
   },
+  label: String,
+  helper: String,
   error: String,
   hideFooter: Boolean,
   rules: {
@@ -89,5 +106,5 @@ p.props = () => ({
   }
 });
 export {
-  p as useInputtable
+  y as useInputtable
 };