@indielayer/ui 1.3.0 → 1.5.0

package/lib/components/toggle/Toggle.vue.js

@@ -1,69 +1,67 @@
-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 d, createElementBlock as b, normalizeClass as l, unref as r, createElementVNode as a, normalizeStyle as R, withDirectives as S, vModelCheckbox as F, toDisplayString as L, createCommentVNode as t, createBlock as g } 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 { 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 { useColors as P } from "../../composables/useColors.js";
+import { useInputtable as i } from "../../composables/useInputtable.js";
+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(),
-  ...n.props(),
-  id: String,
-  label: String,
-  helper: String,
+  ...P.props("primary"),
+  ...v.props(),
+  ...i.props(),
   glow: Boolean
-}, G = {
+}, H = {
   name: "XToggle",
   validators: {
     ...f.validators()
   }
-}, x = /* @__PURE__ */ I({
-  ...G,
-  props: A,
-  emits: n.emits(!1),
-  setup(v, { expose: k, emit: y }) {
-    const t = v, u = y, m = N(null), l = T({
+}, ee = /* @__PURE__ */ T({
+  ...H,
+  props: G,
+  emits: i.emits(!1),
+  setup(h, { expose: k, emit: y }) {
+    const n = h, u = y, m = $(null), o = D({
       get() {
-        return !!t.modelValue;
+        return !!n.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", {
-      class: o(["inline-block", [
-        r(q),
+      hideFooterInternal: V,
+      reset: z,
+      validate: B,
+      setError: I
+    } = i(n, { focus: p, emit: u, withListeners: !1 }), { styles: q, classes: s, className: E } = M("Toggle", {}, n);
+    return k({ focus: p, blur: w, reset: z, validate: B, setError: I }), (e, c) => (d(), b("label", {
+      class: l(["inline-block", [
+        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", {
+          class: l(["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,
-            "bg-gray-300 dark:bg-gray-500": !e.disabled && !l.value && !e.loading,
-            "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
+            "bg-secondary-300 dark:bg-secondary-500": !e.disabled && !o.value && !e.loading,
+            "bg-secondary-100 dark:bg-secondary-700": e.disabled || e.loading,
+            "bg-[color:var(--x-toggle-bg)] dark:bg-[color:var(--x-toggle-dark-bg)]": !e.disabled && o.value
           }]),
-          style: $(r(B))
+          style: R(r(q))
         }, [
           a("div", {
-            class: o(r(s).buttonWrapper)
+            class: l(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),
-              "aria-checked": l.value ? "true" : "false",
+              "onUpdate:modelValue": c[0] || (c[0] = (N) => o.value = N),
+              "aria-checked": o.value ? "true" : "false",
               "aria-disabled": e.disabled ? "true" : void 0,
               type: "checkbox",
               class: "hidden",
@@ -71,33 +69,33 @@ 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, o.value]
             ]),
             a("div", {
-              class: o([
+              class: l([
                 r(s).button,
                 {
-                  "translate-x-full": l.value,
+                  "translate-x-full": o.value,
                   shadow: !e.disabled
                 },
-                e.disabled ? "bg-gray-50 dark:bg-gray-800" : "bg-white dark:bg-gray-800"
+                e.disabled ? "bg-secondary-50 dark:bg-secondary-800" : "bg-white dark:bg-secondary-800"
               ])
             }, null, 2)
           ], 2)
         ], 6),
-        e.label ? (i(), b("span", {
+        e.label ? (d(), 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, {
+          class: l(["ml-2", r(s).label]),
+          textContent: L(e.label)
+        }, null, 10, A)) : t("", !0),
+        e.loading ? (d(), g(U, {
           key: 1,
           size: e.size,
           class: "ml-1"
-        }, null, 8, ["size"])) : d("", !0)
+        }, null, 8, ["size"])) : t("", !0)
       ]),
-      e.hideFooter ? d("", !0) : (i(), c(U, {
+      r(V) ? t("", !0) : (d(), g(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/components/toggle/theme/Toggle.base.theme.js

@@ -2,7 +2,7 @@ const i = {
   classes: {
     wrapper: "",
     label: ({ props: t }) => {
-      const e = "font-medium text-gray-800 dark:text-gray-200";
+      const e = "font-medium text-secondary-800 dark:text-secondary-200";
       return t.size === "xs" ? e + " text-xs" : t.size === "sm" ? e + " text-sm" : t.size === "lg" ? e + " text-lg" : t.size === "xl" ? e + " text-xl" : e + " text-sm";
     },
     buttonWrapper: ({ props: t }) => {

package/lib/components/tooltip/ToggleTip.vue.d.ts

@@ -0,0 +1,14 @@
+import { type ExtractPublicPropTypes } from 'vue';
+declare const toggleTipProps: {
+    content: StringConstructor;
+    icon: StringConstructor;
+};
+export type ToggleTipProps = ExtractPublicPropTypes<typeof toggleTipProps>;
+declare const _default: import("vue").DefineComponent<{
+    content: StringConstructor;
+    icon: StringConstructor;
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    content: StringConstructor;
+    icon: StringConstructor;
+}>>, {}, {}>;
+export default _default;

package/lib/components/tooltip/ToggleTip.vue.js

@@ -0,0 +1,29 @@
+import { defineComponent as r, computed as i, openBlock as p, createBlock as s, withCtx as o, createElementVNode as a, createVNode as m } from "vue";
+import l from "./Tooltip.vue.js";
+import _ from "../icon/Icon.vue.js";
+import { infoIcon as d } from "../../common/icons.js";
+const u = ["innerHTML"], f = {
+  content: String,
+  icon: String
+}, g = { name: "XToggleTip" }, y = /* @__PURE__ */ r({
+  ...g,
+  props: f,
+  setup(t) {
+    const e = t, n = i(() => e.icon || d);
+    return (c, T) => (p(), s(l, { placement: "auto" }, {
+      tooltip: o(() => [
+        a("div", { innerHTML: c.content }, null, 8, u)
+      ]),
+      default: o(() => [
+        m(_, {
+          icon: n.value,
+          class: "text-secondary-500 dark:text-secondary-300 cursor-pointer"
+        }, null, 8, ["icon"])
+      ]),
+      _: 1
+    }));
+  }
+});
+export {
+  y as default
+};

package/lib/components/tooltip/ToggleTip.vue2.js

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

package/lib/components/tooltip/Tooltip.vue.d.ts

@@ -1,7 +1,26 @@
-import type { ExtractPublicPropTypes } from 'vue';
-declare const tooltipProps: {};
+import type { ExtractPublicPropTypes, PropType } from 'vue';
+import { type Placement } from 'floating-vue';
+declare const tooltipProps: {
+    placement: {
+        type: PropType<Placement>;
+        default: string;
+    };
+};
+export type PopoverPlacement = Placement;
 export type TooltipProps = ExtractPublicPropTypes<typeof tooltipProps>;
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>, {
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
+    placement: {
+        type: PropType<Placement>;
+        default: string;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    placement: {
+        type: PropType<Placement>;
+        default: string;
+    };
+}>>, {
+    placement: Placement;
+}, {}>, {
     default?(_: {}): any;
     tooltip?(_: {}): any;
 }>;

package/lib/components/tooltip/Tooltip.vue.js

@@ -1,31 +1,40 @@
-import { defineComponent as s, openBlock as r, createBlock as a, withCtx as t, createElementVNode as n, createVNode as l, renderSlot as o } from "vue";
+import { defineComponent as r, openBlock as a, createBlock as s, withCtx as e, createElementVNode as l, createVNode as n, renderSlot as o } from "vue";
 import c from "../popover/Popover.vue.js";
-import "../popover/Popover.vue2.js";
-import i from "../popover/PopoverContainer.vue.js";
-const m = { class: "dark" }, _ = { name: "XTooltip" }, k = /* @__PURE__ */ s({
+import "../popover/Popover.vue3.js";
+import p from "../popover/PopoverContainer.vue.js";
+import "../../node_modules/.pnpm/floating-vue@5.2.0_vue@3.3.9/node_modules/floating-vue/dist/floating-vue.js";
+const i = { class: "dark" }, m = {
+  placement: {
+    type: String,
+    default: "bottom"
+  }
+}, _ = { name: "XTooltip" }, $ = /* @__PURE__ */ r({
   ..._,
-  setup(p) {
-    return (e, d) => (r(), a(c, {
-      triggers: ["hover"],
-      class: "inline-block"
+  props: m,
+  setup(d) {
+    return (t, f) => (a(), s(c, {
+      triggers: ["hover", "click"],
+      class: "inline-block",
+      "hide-arrow": !1,
+      placement: t.placement
     }, {
-      content: t(() => [
-        n("div", m, [
-          l(i, { class: "p-2 text-white text-sm w-max max-w-xs" }, {
-            default: t(() => [
-              o(e.$slots, "tooltip")
+      content: e(() => [
+        l("div", i, [
+          n(p, { class: "p-2 text-white text-xs w-max max-w-xs" }, {
+            default: e(() => [
+              o(t.$slots, "tooltip")
             ]),
             _: 3
           })
         ])
       ]),
-      default: t(() => [
-        o(e.$slots, "default")
+      default: e(() => [
+        o(t.$slots, "default")
       ]),
       _: 3
-    }));
+    }, 8, ["placement"]));
   }
 });
 export {
-  k as default
+  $ as default
 };

package/lib/components/tooltip/__tests__/ToggleTip.spec.d.ts

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

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

@@ -1,2 +1,4 @@
 export { default as XTooltip } from './Tooltip.vue';
 export type { TooltipProps } from './Tooltip.vue';
+export { default as XToggleTip } from './ToggleTip.vue';
+export type { ToggleTipProps } from './ToggleTip.vue';

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/useColors.js

@@ -2,27 +2,27 @@ import { inject as m, computed as p, unref as f } from "vue";
 import { injectThemeKey as g } from "./keys.js";
 import { tailwindColors as n, setOpacity as l, isValidColor as d, colorShade as t } from "../common/colors.js";
 import { mergeRightDeep as y } from "../common/utils.js";
-const i = {}, C = {
-  primary: n.sky,
+const a = {}, C = {
+  primary: n.emerald,
   secondary: n.slate,
   success: n.green,
   warning: n.yellow,
   error: n.red
-}, a = (r) => n[r], c = (r, s) => l(r, s), w = () => {
+}, i = (r) => n[r], c = (r, s) => l(r, s), w = () => {
   const r = m(g, {}), s = p(() => y(C, f(r).colors || {}));
   return {
     getPalette: (e) => {
       if (!e)
-        return a("gray");
-      const o = a(e);
+        return i("gray");
+      const o = i(e);
       if (o)
         return o;
-      if (i[e])
-        return i[e];
+      if (a[e])
+        return a[e];
       if (s.value[e])
         return s.value[e];
       if (!d(e))
-        return console.warn(`Invalid color: ${e}`), a("gray");
+        return console.warn(`Invalid color: ${e}`), i("gray");
       const u = {
         50: t(e, 0.9),
         100: t(e, 0.8),
@@ -36,7 +36,7 @@ const i = {}, C = {
         900: t(e, -0.7),
         950: t(e, -0.8)
       };
-      return i[e] = u, u;
+      return a[e] = u, u;
     },
     getColorOpacity: c
   };

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,11 +38,14 @@ export declare const useInputtable: {
             readonly type: BooleanConstructor;
             readonly default: true;
         };
+        readonly label: StringConstructor;
+        readonly helper: StringConstructor;
         readonly error: StringConstructor;
         readonly hideFooter: BooleanConstructor;
         readonly rules: {
             readonly type: ArrayConstructor;
             readonly default: () => never[];
         };
+        readonly tooltip: StringConstructor;
     };
 };