vlite3 1.4.6 → 1.4.8

package/README.md

@@ -463,6 +463,7 @@ Follow these rules strictly to ensure visual consistency and predictable styling
 - [x] **Charts**
 - [x] **GanttChart**
 - [x] **ImageComparison**
+- [x] **ImageMagnifier**
 
 ### Feedback & Overlays
 

package/components/AppShell/AppShellLayoutStorefront.vue.js

@@ -10,10 +10,10 @@ import { normalizeRoutePrefix as B } from "../CategoryMenu/utils.js";
 const E = { class: "vlite-app-layout flex flex-col w-full h-full min-h-0 bg-body text-foreground overflow-hidden" }, L = {
   key: 0,
   class: "shrink-0 w-full"
-}, M = { class: "w-full mx-auto max-w-7xl px-3 sm:px-4 md:px-6 lg:px-8" }, O = ["aria-label"], A = {
+}, M = { class: "w-full mx-auto px-3 sm:px-4 md:px-6 lg:px-8" }, O = ["aria-label"], A = {
   key: 0,
   class: "flex items-center justify-center min-w-0 flex-1 px-2"
-}, U = { class: "w-full min-w-0 max-w-7xl mx-auto overflow-hidden px-3 sm:px-4 md:px-6 lg:px-8" }, Y = {
+}, U = { class: "w-full min-w-0 mx-auto overflow-hidden" }, Y = {
   key: 0,
   class: "shrink-0 w-full"
 }, D = {
@@ -35,12 +35,12 @@ const E = { class: "vlite-app-layout flex flex-col w-full h-full min-h-0 bg-body
       toggleSidebar: G,
       pageTitle: J,
       breadcrumbData: p,
-      breakpointClasses: u,
+      breakpointClasses: m,
       nestedTabsItems: g,
       activeNestedTab: c,
-      handleNestedTabClick: x,
-      mainScrollRef: $,
-      layoutMainRef: C
+      handleNestedTabClick: $,
+      mainScrollRef: C,
+      layoutMainRef: x
     } = k, S = v(() => [
       "w-full shrink-0 bg-background transition-shadow duration-200",
       {
@@ -54,7 +54,7 @@ const E = { class: "vlite-app-layout flex flex-col w-full h-full min-h-0 bg-body
       s.floating ? "m-3 rounded-lg border border-border shadow-sm overflow-hidden" : "",
       s.class
     ].filter(Boolean).join(" ")), h = v(() => B(s.categoryRoutePrefix));
-    return (o, m) => (t(), i("div", E, [
+    return (o, u) => (t(), i("div", E, [
       o.$slots.announcement ? (t(), i("div", L, [
         l(o.$slots, "announcement")
       ])) : d("", !0),
@@ -74,9 +74,9 @@ const E = { class: "vlite-app-layout flex flex-col w-full h-full min-h-0 bg-body
               }, () => [
                 a("button", {
                   type: "button",
-                  class: n(["inline-flex items-center justify-center w-9 h-9 rounded-md text-muted-foreground hover:text-foreground hover:bg-accent", [e(u).mobileTrigger, e(s).mobileTriggerClass]]),
+                  class: n(["inline-flex items-center justify-center w-9 h-9 rounded-md text-muted-foreground hover:text-foreground hover:bg-accent", [e(m).mobileTrigger, e(s).mobileTriggerClass]]),
                   "aria-label": e(r) ? "Close menu" : "Open menu",
-                  onClick: m[0] || (m[0] = (b) => r.value = !e(r))
+                  onClick: u[0] || (u[0] = (b) => r.value = !e(r))
                 }, [
                   f(R, {
                     icon: e(r) ? "lucide:x" : "lucide:menu",
@@ -97,14 +97,14 @@ const E = { class: "vlite-app-layout flex flex-col w-full h-full min-h-0 bg-body
           ], 2),
           o.$slots["mobile-bottom"] ? (t(), i("div", {
             key: 0,
-            class: n(["pb-3 w-full", e(u).mobileTrigger])
+            class: n(["pb-3 w-full", e(m).mobileTrigger])
           }, [
             l(o.$slots, "mobile-bottom")
           ], 2)) : d("", !0)
         ]),
         o.$slots.categories ? (t(), i("div", {
           key: 0,
-          class: n(["w-full min-w-0 overflow-hidden border-t border-border bg-background", [e(u).desktopContent, e(s).menuClass]])
+          class: n(["w-full min-w-0 overflow-hidden border-t border-border bg-background", [e(m).desktopContent, e(s).menuClass]])
         }, [
           a("div", U, [
             l(o.$slots, "categories", { categoryRoutePrefix: h.value })
@@ -114,14 +114,14 @@ const E = { class: "vlite-app-layout flex flex-col w-full h-full min-h-0 bg-body
       o.$slots.main ? (t(), i("main", {
         key: 1,
         ref_key: "layoutMainRef",
-        ref: C,
+        ref: x,
         class: "flex-1 overflow-hidden w-full relative flex flex-col min-h-0"
       }, [
         e(s).renderNestedTabs && e(g).length > 0 ? (t(), i("div", Y, [
           f(V, {
             modelValue: e(c),
-            "onUpdate:modelValue": m[1] || (m[1] = (b) => y(c) ? c.value = b : null),
-            onChange: e(x),
+            "onUpdate:modelValue": u[1] || (u[1] = (b) => y(c) ? c.value = b : null),
+            onChange: e($),
             items: e(g)
           }, null, 8, ["modelValue", "onChange", "items"])
         ])) : d("", !0),
@@ -138,7 +138,7 @@ const E = { class: "vlite-app-layout flex flex-col w-full h-full min-h-0 bg-body
         ], 2)) : d("", !0),
         a("div", {
           ref_key: "mainScrollRef",
-          ref: $,
+          ref: C,
           style: { "will-change": "transform", contain: "layout style" },
           class: n(["flex-1 overflow-y-auto w-full relative h-full scrollbar-thin scrollbar-stable", e(s).contentClass])
         }, [
@@ -150,11 +150,11 @@ const E = { class: "vlite-app-layout flex flex-col w-full h-full min-h-0 bg-body
       ])) : d("", !0),
       f(P, {
         show: e(r),
-        "onUpdate:show": m[2] || (m[2] = (b) => y(r) ? r.value = b : null),
+        "onUpdate:show": u[2] || (u[2] = (b) => y(r) ? r.value = b : null),
         position: "left",
         size: "sm",
-        triggerClass: e(u).mobileTrigger,
-        class: n(["z-60", e(u).mobileTrigger]),
+        triggerClass: e(m).mobileTrigger,
+        class: n(["z-60", e(m).mobileTrigger]),
         headerClass: "pl-3! pr-4.5! py-3!",
         bodyClass: "p-0!"
       }, _({

package/components/CategoryManager/CategoryManager.vue2.js

@@ -17,13 +17,13 @@ import "v-datepicker-lite";
 import "v-datepicker-lite/style.css";
 import "@jaames/iro";
 import "@vueuse/core";
-/* empty css                          */
+/* empty css                           */
 import qe from "../IconPicker.vue.js";
 /* empty css                                 */
 /* empty css                 */
 /* empty css                                         */
-/* empty css                                    */
-/* empty css                                        */
+/* empty css                                     */
+/* empty css                                         */
 import "../../core/config.js";
 /* empty css                                    */
 /* empty css                      */

package/components/ColorPicker/ColorIro.vue3.js

@@ -1,5 +1,5 @@
-import o from "./ColorIro.vue2.js";
-/* empty css             */
+import o from "./ColorIro.vue.js";
+/* empty css              */
 export {
   o as default
 };

package/components/ColorPicker/ColorPicker.vue.js

@@ -7,8 +7,8 @@ import "../../core/config.js";
 /* empty css                                    */
 /* empty css                            */
 import E from "../Button.vue.js";
-import _ from "./ColorIro.vue2.js";
-/* empty css             */
+import _ from "./ColorIro.vue.js";
+/* empty css              */
 import { useEyeDropper as I } from "@vueuse/core";
 const N = { class: "absolute left-2.5 top-1/2 -translate-y-1/2 flex items-center justify-center z-20 pointer-events-none" }, j = {
   key: 0,

package/components/Dropdown/DropdownMenu.vue.js

@@ -1,7 +1,7 @@
 import o from "./DropdownMenu.vue2.js";
 /* empty css                  */
 import r from "../../_virtual/_plugin-vue_export-helper.js";
-const m = /* @__PURE__ */ r(o, [["__scopeId", "data-v-754d002e"]]);
+const m = /* @__PURE__ */ r(o, [["__scopeId", "data-v-173c7a02"]]);
 export {
   m as default
 };

package/components/Dropdown/DropdownMenu.vue2.js

@@ -144,7 +144,6 @@ const ve = ["dir"], ye = {
           size: "sm",
           autofocus: !0,
           class: "font-medium!",
-          "input-class": "-ml-1",
           variant: "transparent",
           "icon-class": "h-3.5! w-3.5!",
           "show-clear-button": !1,

package/components/ImageMagnifier.vue.d.ts

@@ -0,0 +1,18 @@
+export interface ImageMagnifierProps {
+    src: string;
+    alt?: string;
+    zoom?: number;
+    magnifierSize?: number;
+    glass?: boolean;
+    class?: any;
+    imageClass?: any;
+}
+declare const _default: import('vue').DefineComponent<ImageMagnifierProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<ImageMagnifierProps> & Readonly<{}>, {
+    glass: boolean;
+    zoom: number;
+    magnifierSize: number;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    containerRef: HTMLDivElement;
+    imageRef: HTMLImageElement;
+}, HTMLDivElement>;
+export default _default;

package/components/ImageMagnifier.vue.js

@@ -0,0 +1,73 @@
+import { defineComponent as k, ref as a, openBlock as S, createElementBlock as R, withModifiers as m, normalizeClass as f, createElementVNode as x, withDirectives as C, normalizeStyle as _, vShow as B } from "vue";
+const T = ["src", "alt"], E = /* @__PURE__ */ k({
+  __name: "ImageMagnifier",
+  props: {
+    src: {},
+    alt: {},
+    zoom: { default: 2 },
+    magnifierSize: { default: 120 },
+    glass: { type: Boolean, default: !0 },
+    class: {},
+    imageClass: {}
+  },
+  setup(b) {
+    const e = b, r = a(null), v = a(null), t = a(!1), u = a({ x: 0, y: 0 }), c = a({ x: 0, y: 0 }), g = a({ width: 0, height: 0 }), d = (n) => {
+      if (!r.value || !v.value) return;
+      const { left: o, top: i, width: p, height: h } = r.value.getBoundingClientRect();
+      let l = n.clientX - o, s = n.clientY - i;
+      l = Math.max(0, Math.min(l, p)), s = Math.max(0, Math.min(s, h)), u.value = {
+        x: l - e.magnifierSize / 2,
+        y: s - e.magnifierSize / 2
+      };
+      const w = p * e.zoom, y = h * e.zoom;
+      g.value = { width: w, height: y };
+      const M = e.magnifierSize / 2 - l * e.zoom, $ = e.magnifierSize / 2 - s * e.zoom;
+      c.value = { x: M, y: $ };
+    }, z = (n) => {
+      n.touches.length > 0 && d(n.touches[0]);
+    };
+    return (n, o) => (S(), R("div", {
+      ref_key: "containerRef",
+      ref: r,
+      class: f(["relative inline-block w-full max-w-max cursor-crosshair select-none touch-none group", e.class]),
+      onMouseenter: o[0] || (o[0] = (i) => t.value = !0),
+      onMouseleave: o[1] || (o[1] = (i) => t.value = !1),
+      onMousemove: d,
+      onTouchstart: o[2] || (o[2] = m((i) => t.value = !0, ["prevent"])),
+      onTouchend: o[3] || (o[3] = m((i) => t.value = !1, ["prevent"])),
+      onTouchmove: m(z, ["prevent"])
+    }, [
+      x("img", {
+        ref_key: "imageRef",
+        ref: v,
+        src: e.src,
+        alt: e.alt || "Magnifiable Image",
+        class: f(["block w-full h-auto object-cover rounded-lg", e.imageClass])
+      }, null, 10, T),
+      C(x("div", {
+        class: f(["absolute pointer-events-none border border-border/50 shadow-[0_8px_30px_rgb(0,0,0,0.12)] z-10 will-change-transform", [
+          e.glass ? "backdrop-blur-sm bg-background/5" : "bg-white",
+          "rounded-full",
+          t.value ? "opacity-100 scale-100" : "opacity-0 scale-95"
+        ]]),
+        style: _({
+          width: `${e.magnifierSize}px`,
+          height: `${e.magnifierSize}px`,
+          transform: `translate(${u.value.x}px, ${u.value.y}px)`,
+          top: "0",
+          left: "0",
+          backgroundImage: `url(${e.src})`,
+          backgroundRepeat: "no-repeat",
+          backgroundSize: `${g.value.width}px ${g.value.height}px`,
+          backgroundPosition: `${c.value.x}px ${c.value.y}px`,
+          transition: "opacity 0.2s ease, transform 0.05s linear"
+        })
+      }, null, 6), [
+        [B, t.value]
+      ])
+    ], 34));
+  }
+});
+export {
+  E as default
+};

package/components/ImageMagnifier.vue2.js

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

package/components/Input.vue.js

@@ -1,9 +1,9 @@
-import { defineComponent as Y, computed as d, useSlots as Z, ref as v, onMounted as _, nextTick as B, openBlock as r, createElementBlock as s, normalizeClass as u, createBlock as j, withCtx as ee, createTextVNode as R, toDisplayString as w, createCommentVNode as i, createElementVNode as A, renderSlot as M, createVNode as C } from "vue";
+import { defineComponent as Z, computed as d, useSlots as _, ref as v, onMounted as ee, nextTick as B, openBlock as r, createElementBlock as s, normalizeClass as u, createBlock as j, withCtx as te, createTextVNode as R, toDisplayString as w, createCommentVNode as i, createElementVNode as A, renderSlot as M, createVNode as C } from "vue";
 import g from "./Icon.vue.js";
-import te from "./Label.vue.js";
-import le from "./Textarea.vue.js";
+import le from "./Label.vue.js";
+import ne from "./Textarea.vue.js";
 import { $t as E } from "../utils/i18n.js";
-const ne = ["for"], oe = ["type", "value", "placeholder", "disabled", "readonly", "min", "max", "data-testid"], ae = { class: "absolute right-3 top-1/2 -translate-y-1/2 flex items-center justify-center gap-2 z-20" }, fe = /* @__PURE__ */ Y({
+const oe = ["for"], ae = ["type", "value", "placeholder", "disabled", "readonly", "min", "max", "data-testid"], de = { class: "absolute right-3 top-1/2 -translate-y-1/2 flex items-center justify-center gap-2 z-20" }, me = /* @__PURE__ */ Z({
   __name: "Input",
   props: {
     modelValue: { default: "" },
@@ -39,16 +39,16 @@ const ne = ["for"], oe = ["type", "value", "placeholder", "disabled", "readonly"
   },
   emits: ["update:modelValue", "focus", "blur", "change", "click:icon", "click:icon-right"],
   setup(t, { emit: D }) {
-    const e = t, c = D, a = d(() => e.labelI18n ? E(e.labelI18n) : e.label), S = d(
+    const e = t, c = D, a = d(() => e.labelI18n ? E(e.labelI18n) : e.label), L = d(
       () => e.placeholderI18n ? E(e.placeholderI18n) : e.placeholder
-    ), x = Z(), m = v(null), y = v(!1), h = v(!1), H = d(() => e.type === "password" && y.value ? "text" : e.type), k = d(() => e.modelValue !== "" && e.modelValue !== null && e.modelValue !== void 0), $ = d(() => b.value || k.value || h.value), p = d(() => !!e.addonLeft || !!x["addon-left"]), V = d(() => !!e.addonRight || !!x["addon-right"]), U = d(() => [
+    ), x = _(), m = v(null), y = v(!1), p = v(!1), H = d(() => e.type === "password" && y.value ? "text" : e.type), k = d(() => e.modelValue !== "" && e.modelValue !== null && e.modelValue !== void 0), $ = d(() => b.value || k.value || p.value), h = d(() => !!e.addonLeft || !!x["addon-left"]), V = d(() => !!e.addonRight || !!x["addon-right"]), U = d(() => [
       "relative w-full",
       e.class,
       e.labelPosition === "left" ? "flex items-center gap-4" : "",
       e.labelPosition === "right" ? "flex flex-row-reverse items-center gap-4" : "space-y-2"
     ].join(" ")), W = d(() => ["relative flex w-full items-stretch", e.labelPosition !== "top" ? "flex-1" : ""].join(
       " "
-    )), L = d(() => {
+    )), S = d(() => {
       const l = "block w-full bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground/70 disabled:cursor-not-allowed disabled:opacity-50 focus-visible:outline-none relative focus:z-10", n = {
         solid: "bg-muted border-transparent focus-visible:border-black",
         outline: "border border-input focus-visible:border-black",
@@ -69,15 +69,23 @@ const ne = ["for"], oe = ["type", "value", "placeholder", "disabled", "readonly"
         "2xl": "rounded-2xl",
         full: "rounded-full"
       }[e.rounded];
-      p.value && (e.rounded === "md" ? o = "rounded-r-md rounded-l-none" : e.rounded === "sm" ? o = "rounded-r-sm rounded-l-none" : e.rounded === "lg" ? o = "rounded-r-lg rounded-l-none" : e.rounded === "full" ? o = "rounded-r-full rounded-l-none" : e.rounded !== "none" && (o = o.replace("rounded-", "rounded-r-").replace("rounded-l-", ""))), V.value && (p.value ? o = "rounded-none" : e.rounded === "md" ? o = "rounded-l-md rounded-r-none" : e.rounded === "sm" ? o = "rounded-l-sm rounded-r-none" : e.rounded === "lg" ? o = "rounded-l-lg rounded-r-none" : e.rounded === "full" ? o = "rounded-l-full rounded-r-none" : e.rounded !== "none" && (o = o.replace("rounded-", "rounded-l-").replace("rounded-r-", ""))), e.variant === "outline-b" && (o = "rounded-none");
+      h.value && (e.rounded === "md" ? o = "rounded-r-md rounded-l-none" : e.rounded === "sm" ? o = "rounded-r-sm rounded-l-none" : e.rounded === "lg" ? o = "rounded-r-lg rounded-l-none" : e.rounded === "full" ? o = "rounded-r-full rounded-l-none" : e.rounded !== "none" && (o = o.replace("rounded-", "rounded-r-").replace("rounded-l-", ""))), V.value && (h.value ? o = "rounded-none" : e.rounded === "md" ? o = "rounded-l-md rounded-r-none" : e.rounded === "sm" ? o = "rounded-l-sm rounded-r-none" : e.rounded === "lg" ? o = "rounded-l-lg rounded-r-none" : e.rounded === "full" ? o = "rounded-l-full rounded-r-none" : e.rounded !== "none" && (o = o.replace("rounded-", "rounded-l-").replace("rounded-r-", ""))), e.variant === "outline-b" && (o = "rounded-none");
       const T = e.variant === "outline-b" || e.variant === "transparent";
-      return e.variant, [
+      e.variant;
+      const Y = {
+        xs: "pl-6",
+        sm: "pl-8",
+        md: "pl-9",
+        lg: "pl-9",
+        xl: "pl-9"
+      };
+      return [
         l,
         n[e.variant],
         e.type === "textarea" ? "" : f[e.size],
         o,
         e.error ? "border-destructive focus-visible:ring-destructive" : "",
-        e.icon ? "pl-9" : T && !p.value ? "pl-0" : "",
+        e.icon ? Y[e?.size] : T && !h.value ? "pl-0" : "",
         e.showClearButton && k.value || e.type === "password" || e.loading || e.iconRight ? "pr-9" : T && !V.value ? "pr-0" : "",
         // Keyframe name used to detect browser autofill via animationstart event
         e.variant === "floating" ? "autofill-detect" : "",
@@ -147,26 +155,26 @@ const ne = ["for"], oe = ["type", "value", "placeholder", "disabled", "readonly"
     }, N = (l) => {
       b.value = !1, c("blur", l);
     }, X = (l) => {
-      l.animationName === "onAutoFillStart" ? h.value = !0 : l.animationName === "onAutoFillCancel" && (h.value = !1);
+      l.animationName === "onAutoFillStart" ? p.value = !0 : l.animationName === "onAutoFillCancel" && (p.value = !1);
     };
-    return _(() => {
+    return ee(() => {
       e.autofocus && B(() => {
         setTimeout(() => {
           m.value?.focus(), b.value = !0;
         }, 100);
       }), B(() => {
-        m.value && m.value.value && !e.modelValue && (h.value = !0);
+        m.value && m.value.value && !e.modelValue && (p.value = !0);
       });
     }), (l, n) => (r(), s("div", {
       class: u(U.value)
     }, [
-      a.value && t.variant !== "floating" ? (r(), j(te, {
+      a.value && t.variant !== "floating" ? (r(), j(le, {
         key: 0,
         size: "xs",
         for: a.value,
         class: u(["mb-1.5", t.labelPosition !== "top" ? "mb-0" : ""].join(" "))
       }, {
-        default: ee(() => [
+        default: te(() => [
           R(w(a.value), 1)
         ]),
         _: 1
@@ -174,7 +182,7 @@ const ne = ["for"], oe = ["type", "value", "placeholder", "disabled", "readonly"
       A("div", {
         class: u(W.value)
       }, [
-        p.value ? (r(), s("div", {
+        h.value ? (r(), s("div", {
           key: 0,
           class: u(q.value)
         }, [
@@ -194,15 +202,15 @@ const ne = ["for"], oe = ["type", "value", "placeholder", "disabled", "readonly"
               "absolute transition-all duration-200 ease-in-out pointer-events-none z-20",
               $.value ? "-top-2.5 left-3 text-xs bg-background px-1 text-black shadow-[0_4px_4px_-4px_bg-background] translate-y-0" : t.type === "textarea" ? `top-2 text-sm text-muted-foreground/70 ${t.icon ? "left-9" : "left-3"} translate-y-0` : `top-1/2 -translate-y-1/2 text-sm text-muted-foreground/70 ${t.icon ? "left-9" : "left-3"}`
             ])
-          }, w(a.value), 11, ne)) : i("", !0),
-          t.type === "textarea" ? (r(), j(le, {
+          }, w(a.value), 11, oe)) : i("", !0),
+          t.type === "textarea" ? (r(), j(ne, {
             key: 1,
             "model-value": String(t.modelValue),
-            placeholder: t.variant === "floating" && a.value && !$.value ? "" : S.value,
+            placeholder: t.variant === "floating" && a.value && !$.value ? "" : L.value,
             disabled: t.disabled,
             readonly: t.readonly,
             rows: t.rows,
-            class: u(L.value),
+            class: u(S.value),
             "onUpdate:modelValue": n[0] || (n[0] = (f) => c("update:modelValue", f)),
             onBlur: N,
             onFocus: F,
@@ -213,19 +221,19 @@ const ne = ["for"], oe = ["type", "value", "placeholder", "disabled", "readonly"
             ref: m,
             type: H.value,
             value: t.modelValue,
-            placeholder: t.variant === "floating" && a.value && !$.value ? "" : S.value,
+            placeholder: t.variant === "floating" && a.value && !$.value ? "" : L.value,
             disabled: t.disabled,
             readonly: t.readonly,
             min: t.min,
             max: t.max,
-            class: u(L.value),
+            class: u(S.value),
             onInput: J,
             onChange: K,
             onBlur: N,
             onFocus: F,
             onAnimationstart: X,
             "data-testid": l.$attrs["data-testid"] || (l.$attrs.name ? `input-${l.$attrs.name}` : a.value ? `input-${a.value.toString().toLowerCase().replace(/[^a-z0-9]+/g, "-")}` : "input")
-          }, null, 42, oe)),
+          }, null, 42, ae)),
           t.icon ? (r(), s("div", {
             key: 3,
             tabindex: "-1",
@@ -239,7 +247,7 @@ const ne = ["for"], oe = ["type", "value", "placeholder", "disabled", "readonly"
               class: u(["h-4 w-4", t.iconClass])
             }, null, 8, ["icon", "class"])
           ], 2)) : i("", !0),
-          A("div", ae, [
+          A("div", de, [
             t.loading ? (r(), j(g, {
               key: 0,
               icon: "lucide:loader-2",
@@ -297,5 +305,5 @@ const ne = ["for"], oe = ["type", "value", "placeholder", "disabled", "readonly"
   }
 });
 export {
-  fe as default
+  me as default
 };

package/components/RichTextEditor/RichTextEditor.vue.js

@@ -1,9 +1,9 @@
 import { defineComponent as te, ref as v, shallowRef as ne, watch as oe, computed as h, onMounted as le, onUnmounted as ae, openBlock as C, createElementBlock as L, normalizeClass as re, toDisplayString as I, createCommentVNode as U, createElementVNode as w, createVNode as q, unref as a, normalizeStyle as ie } from "vue";
 /* empty css                         */
-import se from "./RichTextToolbar.vue2.js";
-/* empty css                    */
-import de from "./RichTextLinkPopover.vue2.js";
-/* empty css                        */
+import se from "./RichTextToolbar.vue.js";
+/* empty css                     */
+import de from "./RichTextLinkPopover.vue.js";
+/* empty css                         */
 import { useRichTextImageUpload as ue } from "./composables/useRichTextImageUpload.js";
 import { useRichTextLinks as ce } from "./composables/useRichTextLinks.js";
 const fe = ["aria-labelledby", "aria-describedby"], me = ["id", "for"], ve = { class: "rte-wrapper" }, ye = { class: "rte-body-wrap" }, ge = ["id", "contenteditable", "aria-label", "aria-readonly", "aria-disabled", "aria-invalid"], be = ["id"], Se = /* @__PURE__ */ te({

package/components/RichTextEditor/RichTextLinkPopover.vue3.js

@@ -1,5 +1,5 @@
-import o from "./RichTextLinkPopover.vue2.js";
-/* empty css                        */
+import o from "./RichTextLinkPopover.vue.js";
+/* empty css                         */
 export {
   o as default
 };

package/components/RichTextEditor/RichTextToolbar.vue3.js

@@ -1,5 +1,5 @@
-import o from "./RichTextToolbar.vue2.js";
-/* empty css                    */
+import o from "./RichTextToolbar.vue.js";
+/* empty css                     */
 export {
   o as default
 };

package/components/Screen/ScreenFilter.vue.js

@@ -15,14 +15,14 @@ import "v-datepicker-lite";
 import "v-datepicker-lite/style.css";
 import "@jaames/iro";
 import "@vueuse/core";
-/* empty css                          */
+/* empty css                           */
 import "iconify-icon-picker";
 import "iconify-icon-picker/style.css";
 /* empty css                                 */
 /* empty css                 */
 /* empty css                                         */
-/* empty css                                    */
-/* empty css                                        */
+/* empty css                                     */
+/* empty css                                         */
 import "../../core/config.js";
 /* empty css                                    */
 /* empty css                      */

package/components/Timeline/Timeline.vue.js

@@ -1,10 +1,10 @@
-import { defineComponent as p, computed as g, openBlock as r, createElementBlock as d, normalizeClass as k, createElementVNode as b, normalizeStyle as S, createCommentVNode as P, Fragment as C, renderList as B, isMemoSame as T, createBlock as z, withCtx as o, renderSlot as n, mergeProps as s } from "vue";
+import { defineComponent as p, computed as g, openBlock as r, createElementBlock as d, normalizeClass as k, createElementVNode as b, normalizeStyle as S, createCommentVNode as x, Fragment as C, renderList as B, isMemoSame as T, createBlock as z, withCtx as o, renderSlot as s, mergeProps as n } from "vue";
 import V from "./TimelineItem.vue.js";
-const E = {
+const j = {
   key: 0,
   class: "absolute top-4 left-4 right-4 h-0.5 bg-border",
   "aria-hidden": "true"
-}, M = {
+}, E = {
   key: 1,
   class: "absolute top-4 left-4 right-4 h-0.5 bg-border block sm:hidden",
   "aria-hidden": "true"
@@ -22,8 +22,8 @@ const E = {
   },
   emits: ["step-click"],
   setup(e, { emit: w }) {
-    const l = e, x = w, a = g(() => l.direction === "vertical"), y = g(() => l.steps.length <= 1 ? 0 : Math.min(l.activeStep, l.steps.length - 1) / (l.steps.length - 1) * 100), $ = (i, f) => {
-      x("step-click", i, f);
+    const l = e, P = w, a = g(() => l.direction === "vertical"), y = g(() => l.steps.length <= 1 ? 0 : Math.min(l.activeStep, l.steps.length - 1) / (l.steps.length - 1) * 100), $ = (i, f) => {
+      P("step-click", i, f);
     };
     return (i, f) => (r(), d("nav", {
       "aria-label": "Progress",
@@ -35,22 +35,22 @@ const E = {
           "relative flex",
           a.value ? "flex-col space-y-0" : "",
           !a.value && e.textPosition === "bottom" ? "flex-row w-full justify-between items-center" : "",
-          !a.value && e.textPosition === "right" ? "flex-row w-full" : ""
+          !a.value && e.textPosition === "right" ? "flex-row w-full max-sm:justify-between max-sm:items-center" : ""
         ])
       }, [
-        !a.value && e.textPosition === "bottom" ? (r(), d("div", E, [
+        !a.value && e.textPosition === "bottom" ? (r(), d("div", j, [
           b("div", {
             class: "h-full bg-primary transition-all duration-300 ease-in-out",
             style: S({ width: `${y.value}%` })
           }, null, 4)
-        ])) : P("", !0),
-        !a.value && e.textPosition === "right" ? (r(), d("div", M, [
+        ])) : x("", !0),
+        !a.value && e.textPosition === "right" ? (r(), d("div", E, [
           b("div", {
             class: "h-full bg-primary transition-all duration-300 ease-in-out",
             style: S({ width: `${y.value}%` })
           }, null, 4)
-        ])) : P("", !0),
-        (r(!0), d(C, null, B(e.steps, (c, m, N, u) => {
+        ])) : x("", !0),
+        (r(!0), d(C, null, B(e.steps, (c, m, M, u) => {
           const v = [
             c,
             m,
@@ -77,22 +77,22 @@ const E = {
             onStepClick: $
           }, {
             indicator: o((t) => [
-              n(i.$slots, "indicator", s({ ref_for: !0 }, t))
+              s(i.$slots, "indicator", n({ ref_for: !0 }, t))
             ]),
             title: o((t) => [
-              n(i.$slots, "title", s({ ref_for: !0 }, t))
+              s(i.$slots, "title", n({ ref_for: !0 }, t))
             ]),
             subtitle: o((t) => [
-              n(i.$slots, "subtitle", s({ ref_for: !0 }, t))
+              s(i.$slots, "subtitle", n({ ref_for: !0 }, t))
             ]),
             status: o((t) => [
-              n(i.$slots, "status", s({ ref_for: !0 }, t))
+              s(i.$slots, "status", n({ ref_for: !0 }, t))
             ]),
             content: o((t) => [
-              n(i.$slots, "content", s({ ref_for: !0 }, t))
+              s(i.$slots, "content", n({ ref_for: !0 }, t))
             ]),
             body: o((t) => [
-              n(i.$slots, "body", s({ ref_for: !0 }, t))
+              s(i.$slots, "body", n({ ref_for: !0 }, t))
             ]),
             _: 3
           }, 8, ["step", "index", "is-last", "active-step", "direction", "text-position", "line-style", "indicator-type", "clickable"]));