vlite3 0.2.15 → 0.2.16

package/components/Button.vue.js

@@ -1,6 +1,7 @@
-import { defineComponent as v, useSlots as x, computed as c, openBlock as o, createElementBlock as w, normalizeClass as r, createBlock as l, createCommentVNode as g, renderSlot as y, createTextVNode as p, toDisplayString as z } from "vue";
+import { defineComponent as v, useSlots as x, computed as c, withDirectives as w, openBlock as i, createElementBlock as p, normalizeClass as o, createBlock as l, createCommentVNode as g, renderSlot as y, createTextVNode as z, toDisplayString as k, unref as B } from "vue";
 import d from "./Icon.vue.js";
-const k = ["type", "disabled"], S = /* @__PURE__ */ v({
+import { vRipple as C } from "../directives/vRipple.js";
+const S = ["type", "disabled"], D = /* @__PURE__ */ v({
   __name: "Button",
   props: {
     variant: { default: "primary" },
@@ -16,7 +17,7 @@ const k = ["type", "disabled"], S = /* @__PURE__ */ v({
   },
   setup(e) {
     const n = e, u = x(), s = c(() => n.icon && !n.text && !u.default), h = c(() => {
-      const t = "inline-flex items-center justify-center whitespace-nowrap text-sm font-medium ring-offset-background transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 active:scale-[0.95] active:opacity-80 cursor-pointer gap-2", i = {
+      const t = "inline-flex items-center justify-center whitespace-nowrap text-sm font-medium ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 active:scale-[0.98] cursor-pointer gap-2", r = {
         primary: "bg-primary text-primary-foreground hover:bg-primary/90",
         "primary-light": "bg-primary-light text-primary-fg-light hover:bg-primary/20",
         secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
@@ -42,13 +43,13 @@ const k = ["type", "disabled"], S = /* @__PURE__ */ v({
         md: "h-9 px-4 py-2",
         lg: "h-10 px-6",
         xl: "h-12 px-10"
-      }, b = {
+      }, m = {
         xs: "h-6.5 w-6.5 min-h-6.5 min-w-6.5",
         sm: "h-7 w-7 min-h-7 min-w-7",
         md: "h-7.5 w-7.5 min-h-7.5 min-w-7.5",
         lg: "h-8 w-8 min-h-8 min-w-8",
         xl: "h-8.5 w-8.5 min-h-8.5 min-w-8.5"
-      }, m = {
+      }, b = {
         none: "rounded-none",
         sm: "rounded-sm",
         md: "rounded",
@@ -59,9 +60,9 @@ const k = ["type", "disabled"], S = /* @__PURE__ */ v({
       };
       return [
         t,
-        i[n.variant],
-        m[n.rounded],
-        s.value ? b[n.size] : f[n.size],
+        r[n.variant],
+        b[n.rounded],
+        s.value ? m[n.size] : f[n.size],
         n.class
       ].join(" ");
     }), a = c(() => {
@@ -71,40 +72,42 @@ const k = ["type", "disabled"], S = /* @__PURE__ */ v({
         md: "w-4 h-4",
         lg: "w-4 h-4",
         xl: "w-4 h-4"
-      }, i = {
+      }, r = {
         xs: "w-3 h-3",
         sm: "w-3.5 h-3.5",
         md: "w-3.5 h-3.5",
         lg: "w-4 h-4",
         xl: "w-4 h-4"
       };
-      return s.value ? i[n.size] : t[n.size];
+      return s.value ? r[n.size] : t[n.size];
     });
-    return (t, i) => (o(), w("button", {
+    return (t, r) => w((i(), p("button", {
       type: e.type,
-      class: r(h.value),
+      class: o(h.value),
       disabled: e.disabled || e.loading
     }, [
-      e.loading ? (o(), l(d, {
+      e.loading ? (i(), l(d, {
         key: 0,
         icon: "lucide:loader-2",
-        class: r(["animate-spin pointer-events-none", a.value])
-      }, null, 8, ["class"])) : e.icon ? (o(), l(d, {
+        class: o(["animate-spin pointer-events-none", a.value])
+      }, null, 8, ["class"])) : e.icon ? (i(), l(d, {
         key: 1,
         icon: e.icon,
-        class: r(["pointer-events-none", [a.value, s.value ? "mx-auto" : ""]])
+        class: o(["pointer-events-none", [a.value, s.value ? "mx-auto" : ""]])
       }, null, 8, ["icon", "class"])) : g("", !0),
       y(t.$slots, "default", {}, () => [
-        p(z(e.text), 1)
+        z(k(e.text), 1)
       ]),
-      e.iconRight && !e.loading ? (o(), l(d, {
+      e.iconRight && !e.loading ? (i(), l(d, {
         key: 2,
         icon: e.iconRight,
-        class: r([a.value, "h-4 w-4 pointer-events-none"])
+        class: o([a.value, "h-4 w-4 pointer-events-none"])
       }, null, 8, ["icon", "class"])) : g("", !0)
-    ], 10, k));
+    ], 10, S)), [
+      [B(C)]
+    ]);
   }
 });
 export {
-  S as default
+  D as default
 };

package/components/Carousel/Carousel.vue.d.ts

@@ -352,7 +352,7 @@ declare function __VLS_template(): {
             };
         }>> & Readonly<{
             "onSlide-change"?: ((index: number) => any) | undefined;
-        }>, "direction" | "pagination" | "paginationSize" | "paginationVisibility" | "paginationHoverInitialTimeout" | "paginationHoverEdgeThreshold" | "autoPlay" | "draggable" | "autoPlayInterval" | "itemsToShow" | "gap" | "speed" | "easing" | "mousewheel" | "loop" | "currentItem" | "bufferSize" | "maxDomElements" | "goToSlide" | "goNext" | "goPrev" | "autoFocus" | "wheelOptions" | "state" | "canGoNext" | "canGoPrev" | "focus"> & import('vue').ShallowUnwrapRef<{
+        }>, "focus" | "direction" | "pagination" | "paginationSize" | "paginationVisibility" | "paginationHoverInitialTimeout" | "paginationHoverEdgeThreshold" | "autoPlay" | "draggable" | "autoPlayInterval" | "itemsToShow" | "gap" | "speed" | "easing" | "mousewheel" | "loop" | "currentItem" | "bufferSize" | "maxDomElements" | "goToSlide" | "goNext" | "goPrev" | "autoFocus" | "wheelOptions" | "state" | "canGoNext" | "canGoPrev"> & import('vue').ShallowUnwrapRef<{
             goToSlide: (index: number, smooth?: boolean) => void;
             goNext: (smooth?: boolean) => void;
             goPrev: (smooth?: boolean) => void;
@@ -778,7 +778,7 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
         };
     }>> & Readonly<{
         "onSlide-change"?: ((index: number) => any) | undefined;
-    }>, "direction" | "pagination" | "paginationSize" | "paginationVisibility" | "paginationHoverInitialTimeout" | "paginationHoverEdgeThreshold" | "autoPlay" | "draggable" | "autoPlayInterval" | "itemsToShow" | "gap" | "speed" | "easing" | "mousewheel" | "loop" | "currentItem" | "bufferSize" | "maxDomElements" | "goToSlide" | "goNext" | "goPrev" | "autoFocus" | "wheelOptions" | "state" | "canGoNext" | "canGoPrev" | "focus"> & import('vue').ShallowUnwrapRef<{
+    }>, "focus" | "direction" | "pagination" | "paginationSize" | "paginationVisibility" | "paginationHoverInitialTimeout" | "paginationHoverEdgeThreshold" | "autoPlay" | "draggable" | "autoPlayInterval" | "itemsToShow" | "gap" | "speed" | "easing" | "mousewheel" | "loop" | "currentItem" | "bufferSize" | "maxDomElements" | "goToSlide" | "goNext" | "goPrev" | "autoFocus" | "wheelOptions" | "state" | "canGoNext" | "canGoPrev"> & import('vue').ShallowUnwrapRef<{
         goToSlide: (index: number, smooth?: boolean) => void;
         goNext: (smooth?: boolean) => void;
         goPrev: (smooth?: boolean) => void;

package/components/Form/FormField.vue.d.ts

@@ -24,8 +24,8 @@ declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, imp
     disabled: boolean;
     size: InputSize;
     variant: InputVariant;
-    rounded: InputRounded;
     error: string;
+    rounded: InputRounded;
     readonly: boolean;
     isUpdate: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;

package/components/Input.vue.d.ts

@@ -14,15 +14,15 @@ type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 declare const __VLS_component: import('vue').DefineComponent<InputProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
     "update:modelValue": (value: string | number) => any;
     change: (value: string | number) => any;
-    focus: (event: FocusEvent) => any;
     blur: (event: FocusEvent) => any;
+    focus: (event: FocusEvent) => any;
     "click:icon": (event: MouseEvent) => any;
     "click:icon-right": (event: MouseEvent) => any;
 }, string, import('vue').PublicProps, Readonly<InputProps> & Readonly<{
     "onUpdate:modelValue"?: (value: string | number) => any;
     onChange?: (value: string | number) => any;
-    onFocus?: (event: FocusEvent) => any;
     onBlur?: (event: FocusEvent) => any;
+    onFocus?: (event: FocusEvent) => any;
     "onClick:icon"?: (event: MouseEvent) => any;
     "onClick:icon-right"?: (event: MouseEvent) => any;
 }>, {

package/components/NumberInput.vue.d.ts

@@ -16,13 +16,13 @@ export interface NumberInputProps {
 declare const _default: import('vue').DefineComponent<NumberInputProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
     "update:modelValue": (value: number) => any;
     change: (value: number) => any;
-    focus: (event: FocusEvent) => any;
     blur: (event: FocusEvent) => any;
+    focus: (event: FocusEvent) => any;
 }, string, import('vue').PublicProps, Readonly<NumberInputProps> & Readonly<{
     "onUpdate:modelValue"?: (value: number) => any;
     onChange?: (value: number) => any;
-    onFocus?: (event: FocusEvent) => any;
     onBlur?: (event: FocusEvent) => any;
+    onFocus?: (event: FocusEvent) => any;
 }>, {
     disabled: boolean;
     mode: "solid" | "outline" | "ghost";

package/components/Textarea.vue.d.ts

@@ -7,12 +7,12 @@ interface Props {
 }
 declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
     "update:modelValue": (value: string) => any;
-    focus: (event: FocusEvent) => any;
     blur: (event: FocusEvent) => any;
+    focus: (event: FocusEvent) => any;
 }, string, import('vue').PublicProps, Readonly<Props> & Readonly<{
     "onUpdate:modelValue"?: (value: string) => any;
-    onFocus?: (event: FocusEvent) => any;
     onBlur?: (event: FocusEvent) => any;
+    onFocus?: (event: FocusEvent) => any;
 }>, {
     disabled: boolean;
     class: string;

package/directives/vRipple.d.ts

@@ -0,0 +1,8 @@
+interface RippleElement extends HTMLElement {
+    _rippleHandler?: (ev: MouseEvent) => void;
+}
+export declare const vRipple: {
+    mounted(el: RippleElement): void;
+    unmounted(el: RippleElement): void;
+};
+export {};

package/directives/vRipple.js

@@ -0,0 +1,16 @@
+const c = (e, i) => {
+  const n = i.getBoundingClientRect(), s = e.clientX - n.left, l = e.clientY - n.top, t = document.createElement("span"), p = Math.max(n.width, n.height), o = p / 2;
+  t.style.width = t.style.height = `${p}px`, t.style.left = `${s - o}px`, t.style.top = `${l - o}px`, t.style.position = "absolute", t.style.pointerEvents = "none", t.classList.add("ripple"), i.querySelectorAll(".ripple").forEach((r) => r.remove()), i.appendChild(t), setTimeout(() => {
+    t && t.parentNode && t.remove();
+  }, 600);
+}, a = {
+  mounted(e) {
+    window.getComputedStyle(e).position === "static" && (e.style.position = "relative"), e.style.overflow = "hidden", e._rippleHandler = (i) => c(i, e), e.addEventListener("click", e._rippleHandler);
+  },
+  unmounted(e) {
+    e._rippleHandler && e.removeEventListener("click", e._rippleHandler), e.querySelectorAll(".ripple").forEach((n) => n.remove());
+  }
+};
+export {
+  a as vRipple
+};

package/package.json

@@ -3,7 +3,7 @@
   "private": false,
   "description": "A Vue 3 UI component library built with Tailwind CSS.",
   "license": "MIT",
-  "version": "0.2.15",
+  "version": "0.2.16",
   "type": "module",
   "main": "index.js",
   "module": "index.js",

package/style.css

@@ -470,6 +470,17 @@ html {
       'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
   }
 
+
+  /* Ripple */
+  span.ripple {
+    position: absolute;
+    border-radius: 50%;
+    transform: scale(0);
+    animation: ripple 600ms linear forwards;
+    background-color: rgba(255, 255, 255, 0.094);
+    pointer-events: none !important;
+  }
+
   *,
   ::before,
   ::after {
@@ -569,6 +580,13 @@ html {
   }
 }
 
+@keyframes ripple {
+  to {
+    transform: scale(4);
+    opacity: 0;
+  }
+}
+
 #icon-picker {
   --iconPicker-text: var(--color-foreground);
   --iconPicker-border: var(--color-border);