@indielayer/ui 1.4.0 → 1.5.0

package/lib/components/textarea/Textarea.vue.js

@@ -1,4 +1,4 @@
-import { defineComponent as V, ref as P, watch as q, openBlock as m, createBlock as d, normalizeStyle as K, unref as r, normalizeClass as R, withCtx as j, createElementVNode as F, mergeProps as H, toHandlers as L, withKeys as $, createCommentVNode as D } from "vue";
+import { defineComponent as x, ref as P, watch as q, openBlock as m, createBlock as d, normalizeStyle as K, unref as r, normalizeClass as R, withCtx as j, createElementVNode as F, mergeProps as H, toHandlers as L, withKeys as $, createCommentVNode as D } from "vue";
 import { useResizeObserver as O, useEventListener as X } from "../../node_modules/.pnpm/@vueuse_core@10.2.0_vue@3.3.9/node_modules/@vueuse/core/index.js";
 import { useCSS as A } from "../../composables/useCSS.js";
 import { useTheme as G } from "../../composables/useTheme.js";
@@ -27,51 +27,53 @@ const U = ["id", "disabled", "max", "maxlength", "min", "dir", "rows", "minlengt
   placeholder: String,
   adjustToText: Boolean,
   preventEnter: Boolean,
-  block: Boolean
+  block: Boolean,
+  resizable: Boolean
 }, Y = {
   name: "XTextarea",
   validators: {
     ...u.validators()
   }
-}, de = /* @__PURE__ */ V({
+}, de = /* @__PURE__ */ x({
   ...Y,
   props: W,
   emits: s.emits(),
   setup(f, { expose: c, emit: h }) {
     const t = f, b = h, o = P(null);
-    O(o, n), typeof window < "u" && X(window, "resize", n), q([() => t.modelValue, () => t.size], () => {
-      setTimeout(n);
+    O(o, l), typeof window < "u" && X(window, "resize", l), q([() => t.modelValue, () => t.size], () => {
+      setTimeout(l);
     });
     const g = A("textarea"), y = J().getPalette("primary"), v = g.get("border", y[400]);
     function w() {
-      n();
+      l();
     }
     function S(e) {
       t.preventEnter && e.preventDefault(), e.stopPropagation();
     }
-    function n() {
+    function l() {
       t.adjustToText && o.value && (o.value.style.height = "1px", o.value.style.height = 2 + o.value.scrollHeight + "px");
     }
     const { focus: a, blur: k } = p(o), {
-      errorInternal: l,
+      errorInternal: n,
       hideFooterInternal: N,
       isInsideForm: T,
-      inputListeners: C,
-      reset: z,
-      validate: E,
-      setError: I
-    } = s(t, { focus: a, emit: b }), { styles: x, classes: i, className: B } = G("Textarea", {}, t, { errorInternal: l });
-    return c({ focus: a, blur: k, reset: z, validate: E, setError: I }), (e, _) => (m(), d(M, {
-      style: K(r(x)),
+      inputListeners: z,
+      reset: C,
+      validate: B,
+      setError: E
+    } = s(t, { focus: a, emit: b }), { styles: I, classes: i, className: V } = G("Textarea", {}, t, { errorInternal: n });
+    return c({ focus: a, blur: k, reset: C, validate: B, setError: E }), (e, _) => (m(), d(M, {
+      style: K(r(I)),
       block: e.block,
       disabled: e.disabled,
       required: e.required,
       "is-inside-form": r(T),
       label: e.label,
       class: R([
-        r(B),
+        r(V),
         r(i).wrapper
-      ])
+      ]),
+      tooltip: e.tooltip
     }, {
       default: j(() => [
         F("textarea", H({
@@ -80,7 +82,7 @@ const U = ["id", "disabled", "max", "maxlength", "min", "dir", "rows", "minlengt
           ref: o,
           class: ["", [
             r(i).input,
-            r(l) ? "border-red-500 dark:border-red-400 focus:outline-red-500" : "focus:outline-[color:var(--x-textarea-border)]"
+            r(n) ? "border-error-500 dark:border-error-400 focus:outline-error-500" : "focus:outline-[color:var(--x-textarea-border)]"
           ]],
           style: r(v),
           disabled: e.disabled,
@@ -94,18 +96,18 @@ const U = ["id", "disabled", "max", "maxlength", "min", "dir", "rows", "minlengt
           placeholder: e.placeholder,
           readonly: e.readonly,
           value: e.modelValue ? String(e.modelValue) : ""
-        }, L(r(C), !0), {
+        }, L(r(z), !0), {
           onKeydown: $(S, ["enter"]),
           onInput: w
         }), null, 16, U),
         r(N) ? D("", !0) : (m(), d(Q, {
           key: 0,
-          error: r(l),
+          error: r(n),
           helper: e.helper
         }, null, 8, ["error", "helper"]))
       ]),
       _: 1
-    }, 8, ["style", "block", "disabled", "required", "is-inside-form", "label", "class"]));
+    }, 8, ["style", "block", "disabled", "required", "is-inside-form", "label", "class", "tooltip"]));
   }
 });
 export {

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

@@ -1,12 +1,12 @@
-const t = {
+const a = {
   classes: {
     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 shadow-sm rounded-md"];
-      return !a.errorInternal && !r.disabled && e.push("hover:border-gray-400 dark:hover:border-gray-500"), r.size === "xs" ? e.push("px-2 py-1 text-xs") : r.size === "sm" ? e.push("px-2 py-2 text-sm") : r.size === "lg" ? e.push("px-4 py-3 text-lg") : r.size === "xl" ? e.push("px-5 py-4 text-xl") : e.push("px-3 py-2"), e.push(r.disabled ? "bg-gray-100 dark:bg-gray-900 text-gray-500 cursor-not-allowed" : "bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-200"), e;
+    input: ({ props: s, data: r }) => {
+      const e = ["appearance-none block w-full placeholder-secondary-400 dark:placeholder-secondary-500 outline-transparent outline outline-2 outline-offset-[-1px] transition duration-150 ease-in-out border-secondary-300 dark:border-secondary-700 border shadow-sm rounded-md"];
+      return s.resizable || e.push("resize-none"), !r.errorInternal && !s.disabled && e.push("hover:border-secondary-400 dark:hover:border-secondary-500"), s.size === "xs" ? e.push("px-2 py-1 text-xs") : s.size === "sm" ? e.push("px-2 py-2 text-sm") : s.size === "lg" ? e.push("px-4 py-3 text-lg") : s.size === "xl" ? e.push("px-5 py-4 text-xl") : e.push("px-3 py-2"), e.push(s.disabled ? "bg-secondary-100 dark:bg-secondary-700 text-secondary-400 dark:text-secondary-600 cursor-not-allowed" : "bg-white dark:bg-secondary-800 text-secondary-700 dark:text-secondary-200"), e;
     }
   }
-}, s = t;
+}, t = a;
 export {
-  s as default
+  t as default
 };

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

@@ -1,12 +1,12 @@
-const t = {
+const a = {
   classes: {
     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-50 dark:bg-gray-800 text-gray-700 dark:text-gray-200"), e;
+    input: ({ props: r, data: s }) => {
+      const e = ["resize-none appearance-none block w-full placeholder-secondary-400 dark:placeholder-secondary-500 outline-transparent outline outline-2 outline-offset-[-1px] transition duration-150 ease-in-out border-secondary-300 dark:border-secondary-700 border-b text-sm px-4"];
+      return !s.errorInternal && !r.disabled && e.push("hover:border-secondary-400 dark:hover:border-secondary-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-secondary-100 dark:bg-secondary-900 text-secondary-300 cursor-not-allowed") : r.readonly ? e.push("bg-white dark:bg-secondary-900 text-secondary-700") : e.push("bg-secondary-50 dark:bg-secondary-800 text-secondary-700 dark:text-secondary-200"), e;
     }
   }
-}, s = t;
+}, n = a;
 export {
-  s as default
+  n as default
 };

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

@@ -19,6 +19,7 @@ declare const toggleProps: {
         readonly type: ArrayConstructor;
         readonly default: () => never[];
     };
+    tooltip: StringConstructor;
     disabled: BooleanConstructor;
     loading: BooleanConstructor;
     loadingLabel: StringConstructor;
@@ -59,6 +60,7 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: ArrayConstructor;
         readonly default: () => never[];
     };
+    tooltip: StringConstructor;
     disabled: BooleanConstructor;
     loading: BooleanConstructor;
     loadingLabel: StringConstructor;
@@ -100,6 +102,7 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: ArrayConstructor;
         readonly default: () => never[];
     };
+    tooltip: StringConstructor;
     disabled: BooleanConstructor;
     loading: BooleanConstructor;
     loadingLabel: StringConstructor;

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

@@ -1,8 +1,8 @@
-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 { 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 P } from "../../composables/useColors.js";
-import { useInputtable as n } from "../../composables/useInputtable.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";
@@ -10,7 +10,7 @@ const X = { class: "flex items-center" }, j = ["id", "aria-checked", "aria-disab
   ...f.props(),
   ...P.props("primary"),
   ...v.props(),
-  ...n.props(),
+  ...i.props(),
   glow: Boolean
 }, H = {
   name: "XToggle",
@@ -20,11 +20,11 @@ const X = { class: "flex items-center" }, j = ["id", "aria-checked", "aria-disab
 }, ee = /* @__PURE__ */ T({
   ...H,
   props: G,
-  emits: n.emits(!1),
+  emits: i.emits(!1),
   setup(h, { expose: k, emit: y }) {
-    const d = h, u = y, m = $(null), l = D({
+    const n = h, u = y, m = $(null), o = D({
       get() {
-        return !!d.modelValue;
+        return !!n.modelValue;
       },
       set(e) {
         u("update:modelValue", e);
@@ -35,9 +35,9 @@ const X = { class: "flex items-center" }, j = ["id", "aria-checked", "aria-disab
       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", [
+    } = 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"
@@ -45,23 +45,23 @@ const X = { class: "flex items-center" }, j = ["id", "aria-checked", "aria-disab
     }, [
       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(r(q))
         }, [
           a("div", {
-            class: o(r(s).buttonWrapper)
+            class: l(r(s).buttonWrapper)
           }, [
             S(a("input", {
               id: e.id,
               ref_key: "elRef",
               ref: m,
-              "onUpdate:modelValue": g[0] || (g[0] = (N) => l.value = N),
-              "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",
@@ -70,32 +70,32 @@ const X = { class: "flex items-center" }, j = ["id", "aria-checked", "aria-disab
               required: e.required,
               value: e.modelValue
             }, null, 8, j), [
-              [F, l.value]
+              [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 ? (t(), b("span", {
+        e.label ? (d(), b("span", {
           key: 0,
-          class: o(["ml-2", r(s).label]),
+          class: l(["ml-2", r(s).label]),
           textContent: L(e.label)
-        }, null, 10, A)) : i("", !0),
-        e.loading ? (t(), c(U, {
+        }, null, 10, A)) : t("", !0),
+        e.loading ? (d(), g(U, {
           key: 1,
           size: e.size,
           class: "ml-1"
-        }, null, 8, ["size"])) : i("", !0)
+        }, null, 8, ["size"])) : t("", !0)
       ]),
-      r(V) ? i("", !0) : (t(), c(W, {
+      r(V) ? t("", !0) : (d(), g(W, {
         key: 0,
         error: r(C),
         helper: e.helper

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/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/useInputtable.d.ts

@@ -46,5 +46,6 @@ export declare const useInputtable: {
             readonly type: ArrayConstructor;
             readonly default: () => never[];
         };
+        readonly tooltip: StringConstructor;
     };
 };

package/lib/composables/useInputtable.js

@@ -1,11 +1,11 @@
-import { ref as i, watch as h, inject as G, computed as j, onMounted as A, onUnmounted as O } from "vue";
+import { ref as a, 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);
+  const s = a(!0), u = a(r.error), v = a(r.hideFooter), V = r.name ? r.name : (Math.random() + 1).toString(36).substring(7), i = a(V);
   h(() => r.error, (e) => {
-    n.value = e;
+    u.value = e;
   }), h(() => r.name, (e) => {
-    e && (a.value = e);
+    e && (i.value = e);
   });
   const t = G(K, {
     registerInputGroup: () => {
@@ -25,28 +25,28 @@ const y = (r, { focus: I, emit: o, withListeners: b = !0 }) => {
     },
     isInsideForm: !1
   }), S = () => {
-    n.value = "", s.value = !0, o("update:modelValue", "");
+    u.value = "", s.value = !0, o("update:modelValue", "");
   }, F = (e) => {
-    n.value = e;
+    u.value = e;
   }, m = (e) => {
     e = e || r.modelValue, s.value = !1;
     for (let p = 0; p < r.rules.length; p++) {
-      const u = r.rules[p];
+      const n = 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;
+      if (typeof n == "function")
+        l = n(e);
+      else if (Array.isArray(n) && n.length === 2) {
+        const { 0: d, 1: g } = n;
         l = d(e, g);
       } else {
-        const d = u.fn, { options: g } = u;
+        const d = n.fn, { options: g } = n;
         l = d(e, g);
       }
       if (l !== !0)
-        return n.value = l, !1;
+        return u.value = l, !1;
     }
-    return n.value = "", !0;
-  }, f = i(!1), B = b ? j(() => ({
+    return u.value = "", !0;
+  }, f = a(!1), B = b ? j(() => ({
     focus: (e) => {
       f.value = !0, o("focus", e);
     },
@@ -68,12 +68,12 @@ const y = (r, { focus: I, emit: o, withListeners: b = !0 }) => {
     }
   };
   return A(() => {
-    t.isInsideFormGroup ? t.registerInputGroup(a.value, I) : c.registerInput(a.value, I, m, F);
+    t.isInsideFormGroup ? t.registerInputGroup(i.value, I) : c.registerInput(i.value, I, m, F);
   }), O(() => {
-    t.isInsideFormGroup ? t.unregisterInputGroup(a.value) : c.unregisterInput(a.value);
+    t.isInsideFormGroup ? t.unregisterInputGroup(i.value) : c.unregisterInput(i.value);
   }), {
     isFirstValidation: s,
-    errorInternal: n,
+    errorInternal: u,
     hideFooterInternal: v,
     isFocused: f,
     isInsideForm: c.isInsideForm,
@@ -103,7 +103,8 @@ y.props = () => ({
   rules: {
     type: Array,
     default: () => []
-  }
+  },
+  tooltip: String
 });
 export {
   y as useInputtable