vlite3 1.2.4 → 1.2.7

package/components/Slider.vue.js

@@ -1,10 +1,16 @@
-import { defineComponent as N, ref as y, watch as R, computed as r, openBlock as i, createElementBlock as v, normalizeClass as s, createBlock as F, createCommentVNode as f, toDisplayString as C, createElementVNode as p, normalizeStyle as k, withDirectives as H, vModelText as L } from "vue";
-import U from "./Icon.vue.js";
-import { $t as W } from "../utils/i18n.js";
-const j = {
+import { defineComponent as F, ref as V, watch as H, computed as r, openBlock as u, createElementBlock as d, normalizeClass as s, createBlock as I, createCommentVNode as c, toDisplayString as y, createElementVNode as h, normalizeStyle as k, withDirectives as U, vModelText as W } from "vue";
+import P from "./Icon.vue.js";
+import { $t as q } from "../utils/i18n.js";
+const A = {
+  key: 0,
+  class: "flex justify-between items-end w-full"
+}, G = {
   key: 1,
-  class: "text-sm font-medium whitespace-nowrap cursor-pointer"
-}, q = ["min", "max", "step", "disabled"], K = /* @__PURE__ */ N({
+  class: "whitespace-nowrap cursor-pointer"
+}, J = {
+  key: 1,
+  class: "whitespace-nowrap cursor-pointer"
+}, K = ["min", "max", "step", "disabled", "orient"], Z = /* @__PURE__ */ F({
   __name: "Slider",
   props: {
     min: { default: 0 },
@@ -17,20 +23,24 @@ const j = {
     showValue: { type: Boolean, default: !0 },
     modelValue: { default: 0 },
     labelClass: {},
+    valueClass: {},
     centerOrigin: { type: Boolean, default: void 0 },
-    size: { default: "md" }
+    size: { default: "md" },
+    orientation: { default: "horizontal" },
+    variant: { default: "one" },
+    thumbVariant: { default: "default" }
   },
   emits: ["update:modelValue", "change", "iconClick"],
-  setup(n, { emit: z }) {
-    const t = n, d = z, o = y(!1), h = y(!1), u = y(t.modelValue);
-    R(
-      () => t.modelValue,
-      (l) => {
-        u.value = l;
+  setup(l, { emit: O }) {
+    const e = l, v = O, i = V(!1), x = V(!1), o = V(e.modelValue);
+    H(
+      () => e.modelValue,
+      (t) => {
+        o.value = t;
       }
     );
-    const b = r(() => t.centerOrigin !== void 0 ? t.centerOrigin : t.min < 0 && t.max > 0), V = r(() => t.max - t.min), g = r(() => (u.value - t.min) / V.value * 100), x = r(() => (0 - t.min) / V.value * 100), $ = r(() => {
-      switch (t.size) {
+    const w = r(() => e.centerOrigin !== void 0 ? e.centerOrigin : e.min < 0 && e.max > 0), C = r(() => e.max - e.min), f = r(() => (o.value - e.min) / C.value * 100), g = r(() => (0 - e.min) / C.value * 100), z = r(() => {
+      switch (e.size) {
         case "xs":
           return 12;
         case "sm":
@@ -40,142 +50,206 @@ const j = {
         default:
           return 14;
       }
-    }), c = (l) => {
-      const e = $.value / 2, a = $.value;
-      return `calc(${l}% + (${e}px - ${a * (l / 100)}px))`;
-    }, M = r(() => {
-      if (b.value) {
-        const l = Math.min(g.value, x.value), e = Math.max(g.value, x.value), a = c(l), E = c(e);
-        return {
-          left: a,
-          width: `calc(${E} - ${a})`
+    }), m = (t) => {
+      const a = z.value / 2, n = z.value;
+      return `calc(${t}% + (${a}px - ${n * (t / 100)}px))`;
+    }, T = r(() => {
+      if (w.value) {
+        const t = Math.min(f.value, g.value), a = Math.max(f.value, g.value), n = m(t), S = m(a);
+        return e.orientation === "vertical" ? {
+          bottom: n,
+          height: `calc(${S} - ${n})`
+        } : {
+          left: n,
+          width: `calc(${S} - ${n})`
         };
       } else
-        return {
+        return e.orientation === "vertical" ? {
+          bottom: "0%",
+          height: m(f.value)
+        } : {
           left: "0%",
-          width: c(g.value)
+          width: m(f.value)
         };
-    }), B = r(() => b.value ? u.value < 0 ? "rounded-r-none" : u.value > 0 ? "rounded-l-none" : "" : ""), S = r(() => ({
-      left: c(g.value)
-    })), D = () => {
-      d("update:modelValue", u.value);
-    }, I = () => {
-      d("change", u.value), o.value = !1;
-    }, P = r(() => Math.abs(t.modelValue) > 1e-3), O = () => {
-      if (t.disabled) return;
-      const l = b.value ? 0 : t.min;
-      u.value = l, d("update:modelValue", l), d("change", l);
-    }, T = r(() => {
-      const l = t.step.toString().split(".")[1]?.length || 0;
-      return u.value.toFixed(l);
-    }), m = r(() => ({
-      xs: {
-        track: "h-[2.85px] bg-gray-300",
-        thumb: "w-[12px] h-[12px]",
-        wrapper: "h-4",
-        tick: "h-2.5"
-      },
-      sm: {
-        track: "h-[4px] bg-gray-300",
-        thumb: "w-[13px] h-[13px]",
-        wrapper: "h-4",
-        tick: "h-3"
-      },
-      md: {
-        track: "h-1.5 bg-gray-250",
-        thumb: "w-3.5 h-3.5",
-        wrapper: "h-6",
-        tick: "h-3.5"
-      },
-      lg: {
-        track: "h-2 bg-gray-250",
-        thumb: "w-4.5 h-4.5",
-        wrapper: "h-7",
-        tick: "h-4"
+    }), j = r(() => {
+      if (!w.value) return "";
+      if (e.orientation === "vertical") {
+        if (o.value < 0) return "rounded-t-none";
+        if (o.value > 0) return "rounded-b-none";
+      } else {
+        if (o.value < 0) return "rounded-r-none";
+        if (o.value > 0) return "rounded-l-none";
       }
-    })[t.size]), w = r(() => t.labelI18n ? W(t.labelI18n) : t.label);
-    return (l, e) => (i(), v("div", {
-      class: s(["slider-wrapper flex items-center gap-3 w-full select-none touch-none", { "opacity-50 pointer-events-none": n.disabled }]),
-      onMouseenter: e[6] || (e[6] = (a) => h.value = !0),
-      onMouseleave: e[7] || (e[7] = (a) => h.value = !1)
+      return "";
+    }), E = r(() => e.orientation === "vertical" ? {
+      bottom: m(f.value)
+    } : {
+      left: m(f.value)
+    }), L = () => {
+      v("update:modelValue", o.value);
+    }, N = () => {
+      v("change", o.value), i.value = !1;
+    }, R = r(() => Math.abs(e.modelValue) > 1e-3), $ = () => {
+      if (e.disabled) return;
+      const t = w.value ? 0 : e.min;
+      o.value = t, v("update:modelValue", t), v("change", t);
+    }, M = r(() => {
+      const t = e.step.toString().split(".")[1]?.length || 0;
+      return o.value.toFixed(t);
+    }), b = r(() => {
+      const t = e.orientation === "vertical";
+      return {
+        xs: {
+          track: t ? "w-[2.85px] bg-gray-300" : "h-[2.4px] bg-gray-300",
+          thumb: "w-[11.5px] h-[11.5px]",
+          wrapper: t ? "w-4 min-h-[100px]" : "h-4 w-full",
+          tick: t ? "w-2.5 h-[1.85px]" : "h-2.5 w-[2px]"
+        },
+        sm: {
+          track: t ? "w-[4px] bg-gray-300" : "h-[4px] bg-gray-300",
+          thumb: "w-[13px] h-[13px]",
+          wrapper: t ? "w-4 min-h-[100px]" : "h-4 w-full",
+          tick: t ? "w-3 h-[2px]" : "h-3 w-[2px]"
+        },
+        md: {
+          track: t ? "w-1.5 bg-gray-250" : "h-1.5 bg-gray-250",
+          thumb: "w-3.5 h-3.5",
+          wrapper: t ? "w-6 min-h-[100px]" : "h-6 w-full",
+          tick: t ? "w-3.5 h-[2px]" : "h-3.5 w-[2px]"
+        },
+        lg: {
+          track: t ? "w-2 bg-gray-250" : "h-2 bg-gray-250",
+          thumb: "w-4.5 h-4.5",
+          wrapper: t ? "w-7 min-h-[100px]" : "h-7 w-full",
+          tick: t ? "w-4 h-[2px]" : "h-4 w-[2px]"
+        }
+      }[e.size];
+    }), p = r(() => e.labelI18n ? q(e.labelI18n) : e.label), B = r(() => e.labelClass ? e.labelClass : e.size === "xs" || e.size === "sm" ? "text-muted-foreground text-xs font-normal" : "text-muted-foreground text-sm font-medium"), D = r(() => e.valueClass ? e.valueClass : e.size === "xs" || e.size === "sm" ? "text-muted-foreground text-xs font-normal" : "text-muted-foreground text-sm");
+    return (t, a) => (u(), d("div", {
+      class: s(["slider-wrapper flex select-none touch-none", [
+        { "opacity-50 pointer-events-none": l.disabled },
+        e.orientation === "vertical" ? "flex-col items-center h-full py-2 gap-3" : e.variant === "two" ? "flex-col w-full gap-1" : "w-full flex-row items-center gap-3"
+      ]]),
+      onMouseenter: a[7] || (a[7] = (n) => x.value = !0),
+      onMouseleave: a[8] || (a[8] = (n) => x.value = !1)
     }, [
-      w.value || n.icon ? (i(), v("div", {
-        key: 0,
-        class: s(["flex items-center gap-2 min-w-fit cursor-pointer transition-colors", [{ "text-primary": o.value || h.value }, n.labelClass || "text-muted-foreground"]]),
-        onClick: e[0] || (e[0] = (a) => d("iconClick")),
+      e.variant === "two" && e.orientation !== "vertical" ? (u(), d("div", A, [
+        p.value || l.icon ? (u(), d("div", {
+          key: 0,
+          class: s(["flex items-center gap-2 cursor-pointer transition-colors", [{ "text-primary": i.value || x.value }, B.value]]),
+          onClick: a[0] || (a[0] = (n) => v("iconClick")),
+          title: "Double-click to reset"
+        }, [
+          l.icon ? (u(), I(P, {
+            key: 0,
+            icon: l.icon,
+            class: "h-4 w-4"
+          }, null, 8, ["icon"])) : c("", !0),
+          p.value ? (u(), d("label", G, y(p.value), 1)) : c("", !0)
+        ], 2)) : c("", !0),
+        l.showValue ? (u(), d("span", {
+          key: 1,
+          onDblclick: $,
+          class: s(["font-mono tabular-nums text-right min-w-6", D.value])
+        }, y(M.value), 35)) : c("", !0)
+      ])) : c("", !0),
+      (e.variant !== "two" || e.orientation === "vertical") && (p.value || l.icon) ? (u(), d("div", {
+        key: 1,
+        class: s(["flex items-center gap-2 min-w-fit cursor-pointer transition-colors", [{ "text-primary": i.value || x.value }, B.value]]),
+        onClick: a[1] || (a[1] = (n) => v("iconClick")),
         title: "Double-click to reset"
       }, [
-        n.icon ? (i(), F(U, {
+        l.icon ? (u(), I(P, {
           key: 0,
-          icon: n.icon,
+          icon: l.icon,
           class: "h-4 w-4"
-        }, null, 8, ["icon"])) : f("", !0),
-        w.value ? (i(), v("label", j, C(w.value), 1)) : f("", !0)
-      ], 2)) : f("", !0),
-      p("div", {
-        class: s(["relative flex-1 flex items-center group", m.value.wrapper])
+        }, null, 8, ["icon"])) : c("", !0),
+        p.value ? (u(), d("label", J, y(p.value), 1)) : c("", !0)
+      ], 2)) : c("", !0),
+      h("div", {
+        class: s(["relative flex justify-center items-center group", [
+          b.value.wrapper,
+          e.orientation === "vertical" || e.variant !== "two" ? "flex-1" : ""
+        ]])
       }, [
-        p("div", {
-          class: s(["absolute w-full rounded-full overflow-hidden", m.value.track])
+        h("div", {
+          class: s(["absolute rounded-full", [
+            b.value.track,
+            e.orientation === "vertical" ? "h-full left-1/2 transform -translate-x-1/2" : "w-full top-1/2 transform -translate-y-1/2"
+          ]])
         }, null, 2),
-        b.value ? (i(), v("div", {
+        w.value ? (u(), d("div", {
           key: 0,
-          class: s(["absolute top-1/2 w-0.5 bg-muted-foreground/30 rounded transform -translate-y-1/2 z-0", m.value.tick]),
-          style: k({ left: c(x.value) })
-        }, null, 6)) : f("", !0),
-        p("div", {
+          class: s(["absolute bg-muted-foreground/30 rounded z-0", [
+            b.value.tick,
+            e.orientation === "vertical" ? "left-1/2 transform -translate-x-1/2" : "top-1/2 transform -translate-y-1/2"
+          ]]),
+          style: k(
+            e.orientation === "vertical" ? { bottom: m(g.value) } : { left: m(g.value) }
+          )
+        }, null, 6)) : c("", !0),
+        h("div", {
           class: s(["absolute bg-primary rounded-full will-change-transform", [
             {
-              "bg-muted-foreground": n.disabled,
-              "transition-all duration-75 ease-out": !o.value,
-              "duration-0": o.value
+              "bg-muted-foreground": l.disabled,
+              "transition-all duration-75 ease-out": !i.value,
+              "duration-0": i.value
             },
-            m.value.track,
-            B.value
+            b.value.track,
+            j.value,
+            e.orientation === "vertical" ? "left-1/2 transform -translate-x-1/2" : "top-1/2 transform -translate-y-1/2"
           ]]),
-          style: k(M.value)
+          style: k(T.value)
         }, null, 6),
-        p("div", {
-          class: s(["absolute top-1/2 bg-background -ml-px border border-border shadow-sm rounded-full transform -translate-y-1/2 -translate-x-1/2 pointer-events-none transition-transform duration-100 ease-out z-10", [
+        h("div", {
+          class: s(["absolute rounded-full pointer-events-none transition-transform duration-100 ease-out z-10", [
+            e.thumbVariant === "solid" ? "bg-primary" : "bg-background border border-border shadow-sm",
             {
-              "border-primary shadow-md scale-110": o.value,
-              "border-primary": P.value
+              "border-primary shadow-md scale-110": i.value && e.thumbVariant !== "solid",
+              "scale-110": i.value && e.thumbVariant === "solid",
+              "border-primary": R.value && e.thumbVariant !== "solid",
+              "bg-muted-foreground": l.disabled && e.thumbVariant === "solid"
             },
-            m.value.thumb
+            b.value.thumb,
+            e.orientation === "vertical" ? "left-1/2 transform -translate-x-1/2 translate-y-1/2" : "top-1/2 -ml-px transform -translate-y-1/2 -translate-x-1/2"
           ]]),
-          style: k(S.value)
+          style: k(E.value)
         }, null, 6),
-        H(p("input", {
+        U(h("input", {
           type: "range",
-          "onUpdate:modelValue": e[1] || (e[1] = (a) => u.value = a),
-          min: n.min,
-          max: n.max,
-          step: n.step,
-          disabled: n.disabled,
-          onInput: D,
-          onChange: I,
-          onMousedown: e[2] || (e[2] = (a) => o.value = !0),
-          onTouchstart: e[3] || (e[3] = (a) => o.value = !0),
-          onMouseup: e[4] || (e[4] = (a) => o.value = !1),
-          onTouchend: e[5] || (e[5] = (a) => o.value = !1),
-          class: "slider-input absolute inset-0 w-full h-full opacity-0 cursor-pointer z-20 m-0 p-0"
-        }, null, 40, q), [
+          "onUpdate:modelValue": a[2] || (a[2] = (n) => o.value = n),
+          min: l.min,
+          max: l.max,
+          step: l.step,
+          disabled: l.disabled,
+          onInput: L,
+          onChange: N,
+          onMousedown: a[3] || (a[3] = (n) => i.value = !0),
+          onTouchstart: a[4] || (a[4] = (n) => i.value = !0),
+          onMouseup: a[5] || (a[5] = (n) => i.value = !1),
+          onTouchend: a[6] || (a[6] = (n) => i.value = !1),
+          class: "slider-input absolute inset-0 w-full h-full opacity-0 cursor-pointer z-20 m-0 p-0",
+          orient: e.orientation === "vertical" ? "vertical" : void 0,
+          style: k(
+            e.orientation === "vertical" ? "appearance: slider-vertical; -webkit-appearance: slider-vertical;" : ""
+          )
+        }, null, 44, K), [
           [
-            L,
-            u.value,
+            W,
+            o.value,
             void 0,
             { number: !0 }
           ]
         ])
       ], 2),
-      n.showValue ? (i(), v("span", {
-        key: 1,
-        onDblclick: O,
-        class: "font-mono tabular-nums text-muted-foreground text-right min-w-6 text-sm"
-      }, C(T.value), 33)) : f("", !0)
+      (e.variant !== "two" || e.orientation === "vertical") && l.showValue ? (u(), d("span", {
+        key: 2,
+        onDblclick: $,
+        class: s(["font-mono tabular-nums text-right min-w-6", D.value])
+      }, y(M.value), 35)) : c("", !0)
     ], 34));
   }
 });
 export {
-  K as default
+  Z as default
 };

package/components/ThemeToggle.vue.js

@@ -11,28 +11,28 @@ const w = /* @__PURE__ */ m({
     variant: {}
   },
   setup(t) {
-    const { theme: i, toggleTheme: r } = f(), a = d(() => {
-      const n = i.value === "light", s = "vlite.themeToggle.switchToDark", l = "vlite.themeToggle.switchToLight";
+    const { theme: i, toggleTheme: s } = f(), a = d(() => {
+      const n = i.value === "light", l = "vlite.themeToggle.switchToDark", r = "vlite.themeToggle.switchToLight";
       if (n) {
-        const e = c(s);
-        return e !== s ? e : "Switch to dark mode";
-      } else {
         const e = c(l);
-        return e !== l ? e : "Switch to light mode";
+        return e !== l ? e : "Switch to dark mode";
+      } else {
+        const e = c(r);
+        return e !== r ? e : "Switch to light mode";
       }
     });
-    return (n, s) => u(n.$slots, "default", {
-      toggleTheme: o(r),
+    return (n, l) => u(n.$slots, "default", {
+      toggleTheme: o(s),
       theme: o(i)
     }, () => [
       h(T, {
         icon: o(i) === "light" ? "lucide:sun" : "lucide:moon",
         variant: t.variant || "secondary",
-        rounded: t.rounded || "md",
+        rounded: t.rounded || "full",
         size: t.size,
         class: g(t.class),
         title: a.value,
-        onClick: o(r)
+        onClick: o(s)
       }, null, 8, ["icon", "variant", "rounded", "size", "class", "title", "onClick"])
     ]);
   }

package/components/Timeline/Timeline.vue.d.ts

@@ -46,10 +46,10 @@ declare const __VLS_component: import('vue').DefineComponent<Props, {}, {}, {},
     class: string;
     clickable: boolean;
     direction: TimelineDirection;
+    indicatorType: TimelineIndicatorType;
     activeStep: number;
     textPosition: TimelineTextPosition;
     lineStyle: TimelineLineStyle;
-    indicatorType: TimelineIndicatorType;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLElement>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;

package/components/index.d.ts

@@ -4,6 +4,7 @@ export { default as Avatar } from './Avatar.vue';
 export { AvatarUploader } from './AvatarUploader';
 export { default as Badge } from './Badge.vue';
 export { Barcode } from './Barcode';
+export { default as Beacon } from './Beacon.vue';
 export { Breadcrumb, BreadcrumbItem } from './Breadcrumb';
 export { default as Button } from './Button.vue';
 export { default as BackButton } from './BackButton.vue';
@@ -43,6 +44,7 @@ export { default as NumberInput } from './NumberInput.vue';
 export { OTPInput } from './OTPInput';
 export { Pagination } from './Pagination';
 export { PermissionMatrix, PermissionEditor } from './PermissionMatrix';
+export { default as Persona } from './Persona.vue';
 export { PricingPlan } from './PricingPlan';
 export { ProgressBar } from './ProgressBar';
 export { QRCode } from './QRCode';
@@ -64,4 +66,4 @@ export { default as Tooltip } from './Tooltip.vue';
 export { Workbook } from './Workbook';
 export { ExportData } from './ExportData';
 export { ImportData } from './ImportData';
-export { LineChart, BarChart, PieChart, CircleChart } from './Chart';
+export { LineChart, BarChart, PieChart, CircleChart, GanttChart } from './Chart';

package/index.d.ts

@@ -58,6 +58,7 @@ export * from './components/Chart';
 export * from './components/AppShell';
 export * from './components/Rating';
 export * from './components/AsyncSelect';
+export * from './components/ImageComparison';
 export { default as Icon } from './components/Icon.vue';
 export { default as Logo } from './components/Logo.vue';
 export { default as Alert } from './components/Alert.vue';
@@ -68,12 +69,14 @@ export { default as Modal } from './components/Modal.vue';
 export { default as Avatar } from './components/Avatar.vue';
 export { default as Button } from './components/Button.vue';
 export { default as BackButton } from './components/BackButton.vue';
-export { default as CopyButton } from './components/CopyButton.vue';
+export { default as Clipboard } from './components/Clipboard.vue';
 export { default as Slider } from './components/Slider.vue';
 export { default as Switch } from './components/Switch.vue';
 export { default as Tooltip } from './components/Tooltip.vue';
 export { default as CheckBox } from './components/CheckBox.vue';
 export { default as Textarea } from './components/Textarea.vue';
+export { default as Radio } from './components/Radio.vue';
+export { default as RadioGroup } from './components/RadioGroup.vue';
 export { default as SidePanel } from './components/SidePanel.vue';
 export { default as DatePicker } from './components/DatePicker.vue';
 export { default as IconPicker } from './components/IconPicker.vue';