@indielayer/ui 1.14.2 → 1.14.4

package/docs/pages/component/modal/usage.vue

@@ -24,7 +24,7 @@ const show3 = ref(false)
 
     <template #actions>
       <div class="text-right space-x-4">
-        <x-button @click="show = false">Cancel</x-button>
+        <x-button tabindex="-1" @click="show = false">Cancel</x-button>
         <x-button color="success">Confirm</x-button>
       </div>
     </template>

package/lib/components/badge/Badge.vue.js

@@ -1,4 +1,4 @@
-import { defineComponent as v, useSlots as z, computed as l, openBlock as o, createBlock as S, resolveDynamicComponent as B, normalizeStyle as n, unref as s, normalizeClass as i, withCtx as w, createElementVNode as r, renderSlot as a, createElementBlock as p, createCommentVNode as f } from "vue";
+import { defineComponent as v, useSlots as z, computed as i, openBlock as o, createBlock as S, resolveDynamicComponent as B, normalizeStyle as l, unref as s, normalizeClass as n, withCtx as w, createElementVNode as r, renderSlot as a, createElementBlock as p, createCommentVNode as f } from "vue";
 import { useTheme as C } from "../../composables/useTheme.js";
 import { useCommon as d } from "../../composables/useCommon.js";
 import { useColors as k } from "../../composables/useColors.js";
@@ -40,16 +40,16 @@ const N = { class: "relative inline-block" }, X = {
   ...E,
   props: $,
   setup(m) {
-    const t = m, u = z(), g = l(() => {
+    const t = m, u = z(), g = i(() => {
       const e = [];
       return t.position === "top" && e.push("top-0"), t.position === "bottom" && e.push("bottom-0"), t.align === "left" && e.push("left-0"), t.align === "right" && e.push("right-0"), u.content ? e.push("-m-[7.5%]") : t.outlined ? e.push("-m-[5%]") : e.push("-m-[3.5%]"), e;
-    }), c = l(() => {
+    }), c = i(() => {
       const e = {};
       return t.offsetX && (e[t.align === "left" ? "marginLeft" : "marginRight"] = t.offsetX + "px"), t.offsetY && (e[t.position === "top" ? "marginTop" : "marginBottom"] = t.offsetY + "px"), e;
     }), { styles: h, classes: b, className: y } = C("Badge", {}, t);
     return (e, P) => (o(), S(B(e.tag), {
-      style: n(s(h)),
-      class: i([
+      style: l(s(h)),
+      class: n([
         s(y),
         s(b).wrapper
       ])
@@ -59,17 +59,17 @@ const N = { class: "relative inline-block" }, X = {
           a(e.$slots, "default"),
           e.show ? (o(), p("div", {
             key: 0,
-            class: i(["absolute rounded-full z-10 bg-[color:var(--x-badge-bg)]", [
+            class: n(["absolute rounded-full z-10 bg-[color:var(--x-badge-bg)] pointer-events-none", [
               g.value,
               {
                 "border-2 border-secondary-50 dark:border-secondary-900": e.outlined
               }
             ]]),
-            style: n(c.value)
+            style: l(c.value)
           }, [
             e.animated ? (o(), p("div", X)) : f("", !0),
             r("div", {
-              class: i(["text-xs text-white overflow-hidden", [
+              class: n(["text-xs text-white overflow-hidden", [
                 e.$slots.content ? "flex items-center justify-center min-w-[1.25rem] h-5 px-1.5" : {
                   "p-1": e.size === "xs",
                   "p-[0.312rem]": e.size === "sm",

package/lib/components/checkbox/Checkbox.vue2.js

@@ -1,19 +1,15 @@
-import { defineComponent as R, ref as w, watch as m, unref as o, openBlock as i, createElementBlock as p, normalizeStyle as T, normalizeClass as u, createElementVNode as d, withKeys as H, withModifiers as O, withDirectives as U, mergeProps as X, toHandlers as j, vModelCheckbox as J, createBlock as V, renderSlot as C, toDisplayString as Q, createCommentVNode as W } from "vue";
+import { defineComponent as T, ref as w, watch as m, unref as r, openBlock as o, createElementBlock as d, normalizeStyle as H, normalizeClass as t, createElementVNode as p, withKeys as O, withModifiers as U, withDirectives as X, mergeProps as j, toHandlers as J, vModelCheckbox as Q, createBlock as V, renderSlot as C, toDisplayString as W, createCommentVNode as I } from "vue";
 import { useColors as Y } from "../../composables/useColors.js";
-import { useCommon as I } from "../../composables/useCommon.js";
+import { useCommon as z } from "../../composables/useCommon.js";
 import { useInputtable as f } from "../../composables/useInputtable.js";
-import { useInteractive as z } from "../../composables/useInteractive.js";
+import { useInteractive as A } from "../../composables/useInteractive.js";
 import { useTheme as Z } from "../../composables/useTheme.js";
 import x from "../inputFooter/InputFooter.vue.js";
 import _ from "../spinner/Spinner.vue.js";
-const ee = ["onKeypress"], se = ["id", "name", "aria-checked", "aria-disabled", "disabled", "required"], le = {
-  key: 1,
-  name: "check-icon",
-  class: "w-2/3 h-[2px] bg-white dark:bg-secondary-900"
-}, ae = ["textContent"], oe = {
-  ...I.props(),
-  ...Y.props("primary"),
+const ee = ["onKeypress"], le = ["id", "name", "aria-checked", "aria-disabled", "disabled", "required"], se = ["textContent"], ae = {
   ...z.props(),
+  ...Y.props("primary"),
+  ...A.props(),
   ...f.props(),
   value: [String, Number],
   indeterminate: Boolean,
@@ -21,122 +17,127 @@ const ee = ["onKeypress"], se = ["id", "name", "aria-checked", "aria-disabled",
 }, re = {
   name: "XCheckbox",
   validators: {
-    ...I.validators()
+    ...z.validators()
   }
-}, fe = /* @__PURE__ */ R({
+}, ce = /* @__PURE__ */ T({
   ...re,
-  props: oe,
+  props: ae,
   emits: f.emits(!1),
-  setup(A, { expose: B, emit: $ }) {
-    const l = A, v = $, b = w(null), a = w(!1);
+  setup(B, { expose: $, emit: F }) {
+    const l = B, v = F, b = w(null), a = w(!1);
     function y() {
-      a.value = !a.value;
+      l.disabled || l.loading || l.readonly || (a.value = !a.value);
     }
-    const { focus: h, blur: F } = z(b), {
-      errorInternal: G,
-      hideFooterInternal: N,
-      isInsideForm: S,
+    const { focus: h, blur: G } = A(b), {
+      errorInternal: N,
+      hideFooterInternal: S,
+      isInsideForm: q,
       isInsideFormGroup: c,
-      isFirstValidation: q,
-      formGroup: r,
-      reset: E,
+      isFirstValidation: E,
+      formGroup: i,
+      reset: K,
       validate: k,
-      setError: K
+      setError: L
     } = f(l, { focus: h, emit: v, withListeners: !1 });
-    c ? (m(() => r.value, () => {
-      const e = o(r.value);
+    c ? (m(() => i.value, () => {
+      const e = r(i.value);
       e && Array.isArray(e) && e.includes(l.value) ? a.value = !0 : a.value = !1;
     }, { immediate: !0, deep: !0 }), m(() => a.value, (e) => {
       if (!l.value)
         return;
-      const s = o(r.value);
+      const s = r(i.value);
       if (e)
         if (s && Array.isArray(s)) {
           if (!s.includes(l.value)) {
-            const n = [...s, l.value];
-            r.setValue(n);
+            const u = [...s, l.value];
+            i.setValue(u);
           }
         } else
-          r.setValue([l.value]);
+          i.setValue([l.value]);
       else if (s && Array.isArray(s) && s.includes(l.value)) {
-        const n = s.findIndex((P) => P === l.value), g = [...s];
-        g.splice(n, 1), r.setValue(g);
+        const u = s.findIndex((R) => R === l.value), g = [...s];
+        g.splice(u, 1), i.setValue(g);
       }
     })) : (m(() => l.modelValue, (e) => {
       a.value = !!e;
     }, { immediate: !0 }), m(() => a.value, (e) => {
       v("update:modelValue", e);
     }));
-    const L = {
+    const M = {
       input: () => {
         c || setTimeout(() => {
-          l.validateOnInput && !q.value && k(l.modelValue);
+          l.validateOnInput && !E.value && k(l.modelValue);
         }, 0);
       }
-    }, { styles: M, classes: t, className: D } = Z("Checkbox", {}, l, { checked: a, isInsideForm: S, isInsideFormGroup: c });
-    return B({ focus: h, blur: F, toggle: y, reset: E, validate: k, setError: K }), (e, s) => (i(), p("label", {
-      style: T(o(M)),
-      class: u([
-        o(D),
-        o(t).wrapper
+    }, { styles: D, classes: n, className: P } = Z("Checkbox", {}, l, { checked: a, isInsideForm: q, isInsideFormGroup: c });
+    return $({ focus: h, blur: G, toggle: y, reset: K, validate: k, setError: L }), (e, s) => (o(), d("label", {
+      style: H(r(D)),
+      class: t([
+        r(P),
+        r(n).wrapper
       ])
     }, [
-      d("div", {
+      p("div", {
         ref_key: "elRef",
         ref: b,
-        class: u(o(t).content),
+        class: t(r(n).content),
         tabindex: "0",
-        onKeypress: H(O(y, ["prevent", "stop"]), ["space"])
+        onKeypress: O(U(y, ["prevent", "stop"]), ["space"])
       }, [
-        U(d("input", X({
+        X(p("input", j({
           id: e.id,
-          "onUpdate:modelValue": s[0] || (s[0] = (n) => a.value = n),
+          "onUpdate:modelValue": s[0] || (s[0] = (u) => a.value = u),
           name: e.name,
           "aria-checked": e.indeterminate ? "mixed" : a.value ? "true" : "false",
           "aria-disabled": e.disabled ? "true" : void 0,
           type: "checkbox",
           class: "invisible absolute",
-          disabled: e.disabled || e.loading,
+          disabled: e.disabled || e.loading || e.readonly,
           required: e.required
-        }, j(L, !0)), null, 16, se), [
-          [J, a.value]
+        }, J(M, !0)), null, 16, le), [
+          [Q, a.value]
         ]),
-        d("div", {
-          class: u([
-            o(t).box,
+        p("div", {
+          class: t([
+            r(n).box,
             [e.glow && !e.disabled && !e.loading ? e.$style["checkbox--glow"] : ""]
           ])
         }, [
-          e.loading ? (i(), V(_, {
+          e.loading ? (o(), V(_, {
             key: 0,
             size: e.size,
             class: "absolute"
-          }, null, 8, ["size"])) : e.indeterminate ? (i(), p("span", le)) : C(e.$slots, "icon", { key: 2 }, () => [
-            (i(), p("svg", {
+          }, null, 8, ["size"])) : e.indeterminate ? (o(), d("span", {
+            key: 1,
+            name: "check-icon",
+            class: t(["w-2/3 h-[1.5px]", [e.disabled ? "bg-secondary-400 dark:bg-secondary-500" : "bg-white"]])
+          }, null, 2)) : C(e.$slots, "icon", { key: 2 }, () => [
+            (o(), d("svg", {
               viewBox: "0 0 20 20",
-              class: u([o(t).icon, { "opacity-0": !a.value }])
+              class: t([r(n).icon, { "opacity-0": !a.value }])
             }, s[1] || (s[1] = [
-              d("path", { d: "M0 11l2-2 5 5L18 3l2 2L7 18z" }, null, -1)
+              p("path", { d: "M0 11l2-2 5 5L18 3l2 2L7 18z" }, null, -1)
             ]), 2))
           ])
         ], 2),
-        d("div", {
-          class: u(o(t).label)
+        e.label || e.$slots.default ? (o(), d("div", {
+          key: 0,
+          class: t(r(n).label)
         }, [
-          e.label ? (i(), p("span", {
+          e.label ? (o(), d("span", {
             key: 0,
-            textContent: Q(e.label)
-          }, null, 8, ae)) : C(e.$slots, "default", { key: 1 })
-        ], 2)
+            textContent: W(e.label)
+          }, null, 8, se)) : C(e.$slots, "default", { key: 1 })
+        ], 2)) : I("", !0)
       ], 42, ee),
-      o(N) ? W("", !0) : (i(), V(x, {
+      r(S) ? I("", !0) : (o(), V(x, {
         key: 0,
-        error: o(G),
+        error: r(N),
         helper: e.helper
       }, null, 8, ["error", "helper"]))
     ], 6));
   }
 });
 export {
-  fe as default
+  ce as default
 };

package/lib/components/checkbox/theme/Checkbox.base.theme.js

@@ -13,16 +13,16 @@ const i = {
       return e.disabled && r.push("cursor-not-allowed"), r;
     },
     icon: ({ props: e }) => {
-      const r = ["fill-current text-white"];
-      return e.size === "lg" ? r.push("h-3 w-3") : e.size === "xl" ? r.push("h-4 w-4") : r.push("h-2.5 w-2.5"), r;
+      const r = ["fill-current"];
+      return e.disabled ? r.push("text-secondary-400 dark:text-secondary-500") : r.push("text-white"), e.size === "lg" ? r.push("h-3 w-3") : e.size === "xl" ? r.push("h-4 w-4") : r.push("h-2.5 w-2.5"), r;
     },
     label: ({ props: e, data: r }) => {
       const s = ["inline-block text-secondary-800 dark:text-secondary-200 pl-2"];
       return s.push(r.isInsideFormGroup ? "font-normal" : "font-medium"), e.size === "xs" ? s.push("text-xs") : e.size === "sm" ? s.push("text-sm") : e.size === "lg" ? s.push("text-lg") : e.size === "xl" && s.push("text-xl"), s;
     }
   },
-  styles({ props: e, colors: r, css: s, data: a }) {
-    const t = r.getPalette("gray"), l = r.getPalette(e.color), o = [];
+  styles({ props: e, colors: r, css: s, data: o }) {
+    const t = r.getPalette("gray"), l = r.getPalette(e.color), a = [];
     return e.loading ? s.variables({
       bg: "transparent",
       border: "transparent",
@@ -30,28 +30,28 @@ const i = {
         bg: "transparent",
         border: "transparent"
       }
-    }) : (e.disabled ? o.push(s.variables({
+    }) : (e.disabled ? a.push(s.variables({
       bg: t[100],
       border: t[200],
       dark: {
         bg: t[800],
         border: t[700]
       }
-    })) : (a.checked ? o.push(s.variables({
+    })) : (o.checked ? a.push(s.variables({
       bg: l[500],
       border: l[500],
       dark: {
         bg: l[500],
         border: l[500]
       }
-    })) : o.push(s.variables({
+    })) : a.push(s.variables({
       bg: "#fff",
       border: e.glow ? l[300] : t[300],
       dark: {
         bg: t[900],
         border: e.glow ? l[300] : t[400]
       }
-    })), e.glow && o.push(s.get("glow", r.getColorOpacity(l[500], 0.5)))), o);
+    })), e.glow && a.push(s.get("glow", r.getColorOpacity(l[500], 0.5)))), a);
   }
 }, n = i;
 export {

package/lib/components/modal/Modal.vue.js

@@ -1,12 +1,12 @@
-import { defineComponent as X, ref as y, watch as w, nextTick as S, useSlots as H, computed as M, openBlock as t, createBlock as v, Teleport as j, createElementBlock as r, normalizeStyle as q, unref as o, normalizeClass as l, createCommentVNode as a, createElementVNode as B, resolveDynamicComponent as K, withCtx as $, renderSlot as i, toDisplayString as h } from "vue";
-import { onClickOutside as L, useEventListener as G } from "../../node_modules/.pnpm/@vueuse_core@11.1.0_vue@3.5.10_typescript@5.2.2_/node_modules/@vueuse/core/index.js";
-import { useTheme as J } from "../../composables/useTheme.js";
-import { useFocusTrap as Q } from "../../composables/useFocusTrap.js";
-import { closeIcon as U } from "../../common/icons.js";
-import Y from "../button/Button.vue.js";
-import Z from "../scroll/Scroll.vue.js";
-import _ from "../form/Form.vue.js";
-const x = { key: 0 }, ee = ["xs", "sm", "md", "lg", "xl", "full"], oe = ["top", "center", "bottom"], te = {
+import { defineComponent as X, ref as y, watch as S, nextTick as H, useSlots as M, computed as j, openBlock as t, createBlock as v, Teleport as q, createElementBlock as r, normalizeStyle as K, unref as o, normalizeClass as l, createCommentVNode as a, createElementVNode as B, resolveDynamicComponent as L, withCtx as T, renderSlot as i, toDisplayString as h } from "vue";
+import { onClickOutside as G, useEventListener as J } from "../../node_modules/.pnpm/@vueuse_core@11.1.0_vue@3.5.10_typescript@5.2.2_/node_modules/@vueuse/core/index.js";
+import { useTheme as Q } from "../../composables/useTheme.js";
+import { useFocusTrap as U } from "../../composables/useFocusTrap.js";
+import { closeIcon as Y } from "../../common/icons.js";
+import Z from "../button/Button.vue.js";
+import _ from "../scroll/Scroll.vue.js";
+import x from "../form/Form.vue.js";
+const ee = { key: 0 }, oe = ["xs", "sm", "md", "lg", "xl", "full"], te = ["top", "center", "bottom"], le = {
   size: {
     type: String,
     default: "lg"
@@ -49,35 +49,39 @@ const x = { key: 0 }, ee = ["xs", "sm", "md", "lg", "xl", "full"], oe = ["top",
     default: () => []
   },
   persistent: Boolean
-}, le = {
+}, se = {
   name: "XModal",
   validators: {
-    size: ee,
-    position: oe
+    size: oe,
+    position: te
   }
-}, me = /* @__PURE__ */ X({
-  ...le,
-  props: te,
+}, pe = /* @__PURE__ */ X({
+  ...se,
+  props: le,
   emits: ["update:modelValue", "submit"],
-  setup(V, { expose: C, emit: T }) {
-    const d = V, k = T, c = y(d.modelValue), u = y(!1), b = y(null), E = y(null), { initFocusTrap: z, clearFocusTrap: A } = Q();
+  setup($, { expose: V, emit: C }) {
+    const d = $, k = C, c = y(d.modelValue), u = y(!1), b = y(null), E = y(null), { initFocusTrap: z, clearFocusTrap: A } = U();
     let m;
-    w(c, (e) => {
+    S(c, (e) => {
       m && (m(), m = void 0), e && setTimeout(() => {
-        m = L(b, F, {
+        m = G(b, F, {
           ignore: [".v-popper__popper"]
         });
       });
-    }), w(() => d.modelValue, D, { immediate: !0 });
+    });
+    let g;
+    S(() => d.modelValue, D, { immediate: !0 });
     async function D() {
       const e = d.modelValue;
       if (e) {
         const n = window.innerWidth - document.documentElement.clientWidth;
-        c.value = e, await S(), u.value = e, await S(), z(b), document.body.style.paddingRight = `${n}px`, document.body.style.overflow = "hidden";
+        c.value = e, await H(), u.value = e, g = setTimeout(() => {
+          z(b);
+        }, 100), document.body.style.paddingRight = `${n}px`, document.body.style.overflow = "hidden";
       } else
-        u.value = e, c.value = e, A(), document.body.style.paddingRight = "", document.body.style.overflow = "auto";
+        u.value = e, c.value = e, clearTimeout(g), A(), document.body.style.paddingRight = "", document.body.style.overflow = "auto";
     }
-    typeof window < "u" && G(document, "keydown", W);
+    typeof window < "u" && J(document, "keydown", W);
     const R = (e) => [".v-popper__popper", ".x-datepicker"].some((n) => typeof n == "string" ? Array.from(window.document.querySelectorAll(n)).some((f) => f === e.target || e.composedPath().includes(f)) : !1);
     function W(e) {
       e.key === "Escape" && !R(e) && c.value && !d.persistent && p();
@@ -93,15 +97,15 @@ const x = { key: 0 }, ee = ["xs", "sm", "md", "lg", "xl", "full"], oe = ["top",
     function O() {
       k("update:modelValue", !0), u.value = !0;
     }
-    const g = H(), P = M(() => !!(g["tertiary-action"] || g["cancel-action"])), { styles: I, classes: s, className: N } = J("Modal", {}, d, {
+    const w = M(), P = j(() => !!(w["tertiary-action"] || w["cancel-action"])), { styles: I, classes: s, className: N } = Q("Modal", {}, d, {
       visible: u
     });
-    return C({ open: O, close: p }), (e, n) => (t(), v(j, { to: "body" }, [
+    return V({ open: O, close: p }), (e, n) => (t(), v(q, { to: "body" }, [
       c.value ? (t(), r("div", {
         key: 0,
         ref_key: "modalWrapperRef",
         ref: E,
-        style: q(o(I)),
+        style: K(o(I)),
         class: l([
           o(N),
           o(s).wrapper,
@@ -115,7 +119,7 @@ const x = { key: 0 }, ee = ["xs", "sm", "md", "lg", "xl", "full"], oe = ["top",
         B("div", {
           class: l(o(s).modalWrapper)
         }, [
-          (t(), v(K(e.isForm ? _ : "div"), {
+          (t(), v(L(e.isForm ? x : "div"), {
             ref_key: "modalRef",
             ref: b,
             class: l(["max-h-full", o(s).modal]),
@@ -131,7 +135,7 @@ const x = { key: 0 }, ee = ["xs", "sm", "md", "lg", "xl", "full"], oe = ["top",
             "aria-labelledby": "modal-headline",
             onSubmit: n[0] || (n[0] = (f) => e.$emit("submit", f))
           }, {
-            default: $(() => [
+            default: T(() => [
               i(e.$slots, "image"),
               i(e.$slots, "header", {}, () => [
                 e.hasHeader ? (t(), r("div", {
@@ -150,7 +154,7 @@ const x = { key: 0 }, ee = ["xs", "sm", "md", "lg", "xl", "full"], oe = ["top",
                   ])
                 ], 2)) : a("", !0)
               ]),
-              e.$slots.default ? (t(), v(Z, {
+              e.$slots.default ? (t(), v(_, {
                 key: 0,
                 scrollbar: !1,
                 class: l({
@@ -158,7 +162,7 @@ const x = { key: 0 }, ee = ["xs", "sm", "md", "lg", "xl", "full"], oe = ["top",
                 }),
                 vertical: ""
               }, {
-                default: $(() => [
+                default: T(() => [
                   B("div", {
                     class: l(o(s).content)
                   }, [
@@ -171,12 +175,12 @@ const x = { key: 0 }, ee = ["xs", "sm", "md", "lg", "xl", "full"], oe = ["top",
                 ]),
                 _: 3
               }, 8, ["class"])) : a("", !0),
-              e.showClose ? (t(), v(Y, {
+              e.showClose ? (t(), v(Z, {
                 key: 1,
                 ghost: "",
                 size: "sm",
                 tabindex: "-1",
-                icon: o(U),
+                icon: o(Y),
                 class: l(o(s).closeIcon),
                 onClick: p
               }, null, 8, ["icon", "class"])) : a("", !0),
@@ -187,7 +191,7 @@ const x = { key: 0 }, ee = ["xs", "sm", "md", "lg", "xl", "full"], oe = ["top",
                 }, [
                   i(e.$slots, "actions", {}, () => [
                     i(e.$slots, "cancel-action"),
-                    P.value ? (t(), r("div", x)) : a("", !0),
+                    P.value ? (t(), r("div", ee)) : a("", !0),
                     i(e.$slots, "tertiary-action"),
                     i(e.$slots, "secondary-action"),
                     i(e.$slots, "primary-action")
@@ -203,5 +207,5 @@ const x = { key: 0 }, ee = ["xs", "sm", "md", "lg", "xl", "full"], oe = ["top",
   }
 });
 export {
-  me as default
+  pe as default
 };

package/lib/components/notifications/Notifications.vue.d.ts

@@ -27,6 +27,10 @@ declare const notificationsProps: {
         type: (SymbolConstructor | StringConstructor)[];
         default: import("vue").InjectionKey<NotificationInjection>;
     };
+    offset: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
     color: {
         readonly type: StringConstructor;
         readonly default: string | undefined;
@@ -97,6 +101,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<im
         type: (SymbolConstructor | StringConstructor)[];
         default: import("vue").InjectionKey<NotificationInjection>;
     };
+    offset: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
     color: {
         readonly type: StringConstructor;
         readonly default: string | undefined;
@@ -135,6 +143,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<im
         type: (SymbolConstructor | StringConstructor)[];
         default: import("vue").InjectionKey<NotificationInjection>;
     };
+    offset: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
     color: {
         readonly type: StringConstructor;
         readonly default: string | undefined;
@@ -144,6 +156,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<im
     color: string;
     position: "top" | "bottom";
     align: "left" | "right";
+    offset: string | number;
     timeout: number;
     pauseOnHover: boolean;
     injectKey: string | symbol;