vlite3 1.0.1 → 1.0.2

package/components/Badge.vue.js

@@ -10,7 +10,7 @@ const p = /* @__PURE__ */ b({
   setup(o) {
     const e = o, s = a(() => {
       const r = {
-        xs: "px-1.5 h-5 text-[10.5px] leading-none",
+        xs: "px-1.5 h-4 text-[9px] leading-none",
         sm: "px-2 h-6 text-xs font-medium",
         md: "px-2.5 h-7 text-xs font-semibold",
         lg: "px-3 h-8 text-sm font-semibold"

package/components/Clock/Clock.vue.d.ts

@@ -0,0 +1,33 @@
+type __VLS_Props = {
+    /** dayjs-compatible format string for the time portion. Default: 'hh:mm:ss A' */
+    timeFormat?: string;
+    /** dayjs-compatible format string for the date portion. Default: 'dddd, MMMM D, YYYY' */
+    dateFormat?: string;
+    /** Whether to render the time heading. Default: true */
+    showTime?: boolean;
+    /** Whether to render the date paragraph. Default: true */
+    showDate?: boolean;
+    /**
+     * Milliseconds between each clock tick.
+     * Reactive — changing this prop will immediately restart the interval.
+     * Default: 1000
+     */
+    tickInterval?: number;
+    /** Additional Tailwind/CSS classes applied to the time <h2> element */
+    timeClass?: string;
+    /** Additional Tailwind/CSS classes applied to the date <p> element */
+    dateClass?: string;
+    /** Additional Tailwind/CSS classes applied to the root wrapper <div> */
+    wrapperClass?: string;
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    wrapperClass: string;
+    timeFormat: string;
+    dateFormat: string;
+    showTime: boolean;
+    showDate: boolean;
+    tickInterval: number;
+    timeClass: string;
+    dateClass: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

package/components/Clock/Clock.vue.js

@@ -0,0 +1,51 @@
+import { defineComponent as h, ref as w, watch as x, onMounted as k, onUnmounted as C, computed as i, openBlock as r, createElementBlock as n, normalizeClass as s, toDisplayString as d, createCommentVNode as u } from "vue";
+import c from "dayjs";
+const D = /* @__PURE__ */ h({
+  __name: "Clock",
+  props: {
+    timeFormat: { default: "hh:mm:ss A" },
+    dateFormat: { default: "dddd, MMMM D, YYYY" },
+    showTime: { type: Boolean, default: !0 },
+    showDate: { type: Boolean, default: !0 },
+    tickInterval: { default: 1e3 },
+    timeClass: { default: "" },
+    dateClass: { default: "" },
+    wrapperClass: { default: "" }
+  },
+  setup(t) {
+    const a = t, o = w(/* @__PURE__ */ new Date());
+    let e;
+    function m(l) {
+      e !== void 0 && clearInterval(e), e = setInterval(() => {
+        o.value = /* @__PURE__ */ new Date();
+      }, l);
+    }
+    x(
+      () => a.tickInterval,
+      (l) => {
+        m(l);
+      }
+    ), k(() => {
+      m(a.tickInterval);
+    }), C(() => {
+      e !== void 0 && clearInterval(e);
+    });
+    const f = i(() => c(o.value).format(a.timeFormat)), v = i(() => c(o.value).format(a.dateFormat));
+    return (l, p) => (r(), n("div", {
+      class: s(["flex flex-col items-center z-10 w-full", t.wrapperClass]),
+      style: { "will-change": "transform", contain: "layout style" }
+    }, [
+      t.showTime ? (r(), n("h2", {
+        key: 0,
+        class: s(["text-5xl md:text-6xl font-extralight text-foreground tracking-tight tabular-nums", t.timeClass])
+      }, d(f.value), 3)) : u("", !0),
+      t.showDate ? (r(), n("p", {
+        key: 1,
+        class: s(["text-fs-1 font-normal text-muted-foreground mt-3.5 tracking-wide", t.dateClass])
+      }, d(v.value), 3)) : u("", !0)
+    ], 2));
+  }
+});
+export {
+  D as default
+};

package/components/Clock/Clock.vue2.js

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

package/components/Clock/index.d.ts

@@ -0,0 +1 @@
+export { default as Clock } from './Clock.vue';

package/components/OTPInput/OTPInput.vue.d.ts

@@ -9,6 +9,8 @@ interface Props {
     variant?: 'solid' | 'outline' | 'ghost';
     attached?: boolean;
     size?: 'sm' | 'md' | 'lg';
+    mask?: boolean;
+    fluid?: boolean;
 }
 declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
     change: (value: string) => any;
@@ -21,6 +23,7 @@ declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, imp
 }>, {
     length: number;
     type: "text" | "number";
+    mask: boolean;
     variant: "solid" | "outline" | "ghost";
     size: "sm" | "md" | "lg";
     error: boolean;
@@ -29,5 +32,6 @@ declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, imp
     modelValue: string;
     autofocus: boolean;
     attached: boolean;
+    fluid: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
 export default _default;

package/components/OTPInput/OTPInput.vue.js

@@ -1,5 +1,5 @@
-import { defineComponent as j, ref as h, watch as z, onMounted as C, nextTick as V, computed as A, openBlock as g, createElementBlock as m, normalizeClass as v, Fragment as E, renderList as M } from "vue";
-const F = ["value", "type", "disabled", "placeholder", "onInput", "onKeydown"], P = /* @__PURE__ */ j({
+import { defineComponent as C, ref as v, watch as M, onMounted as V, nextTick as A, computed as m, openBlock as g, createElementBlock as h, normalizeClass as y, Fragment as E, renderList as F } from "vue";
+const K = ["value", "type", "inputmode", "disabled", "placeholder", "onInput", "onKeydown"], T = /* @__PURE__ */ C({
   __name: "OTPInput",
   props: {
     length: { default: 6 },
@@ -11,29 +11,31 @@ const F = ["value", "type", "disabled", "placeholder", "onInput", "onKeydown"],
     placeholder: { default: "" },
     variant: { default: "outline" },
     attached: { type: Boolean, default: !1 },
-    size: { default: "md" }
+    size: { default: "md" },
+    mask: { type: Boolean, default: !1 },
+    fluid: { type: Boolean, default: !1 }
   },
   emits: ["update:modelValue", "complete", "change"],
-  setup(f, { emit: b }) {
-    const a = f, p = b, s = h([]), r = h(new Array(a.length).fill(""));
-    z(
-      () => a.modelValue,
-      (t) => {
-        const e = t || "", l = e.split("").slice(0, a.length);
+  setup(d, { emit: b }) {
+    const t = d, p = b, s = v([]), r = v(new Array(t.length).fill(""));
+    M(
+      () => t.modelValue,
+      (l) => {
+        const e = l || "", a = e.split("").slice(0, t.length);
         if (r.value.join("") !== e) {
-          const o = new Array(a.length).fill("");
-          l.forEach((u, i) => o[i] = u), r.value = o;
+          const o = new Array(t.length).fill("");
+          a.forEach((u, i) => o[i] = u), r.value = o;
         }
       },
       { immediate: !0 }
     );
     const c = () => {
-      const t = r.value.join("");
-      p("update:modelValue", t), p("change", t), t.length === a.length && p("complete", t);
-    }, y = (t, e) => {
-      let n = t.target.value;
-      if (a.type === "number" && (n = n.replace(/\D/g, "")), n.length === 1) {
-        r.value[e] = n, c(), e < a.length - 1 && s.value[e + 1]?.focus();
+      const l = r.value.join("");
+      p("update:modelValue", l), p("change", l), l.length === t.length && p("complete", l);
+    }, w = (l, e) => {
+      let n = l.target.value;
+      if (t.type === "number" && (n = n.replace(/\D/g, "")), n.length === 1) {
+        r.value[e] = n, c(), e < t.length - 1 && s.value[e + 1]?.focus();
         return;
       }
       if (!n) {
@@ -41,75 +43,85 @@ const F = ["value", "type", "disabled", "placeholder", "onInput", "onKeydown"],
         return;
       }
       if (n.length > 1) {
-        const o = n.split("").slice(0, a.length - e);
-        o.forEach((i, d) => {
-          e + d < a.length && (r.value[e + d] = i);
+        const o = n.split("").slice(0, t.length - e);
+        o.forEach((i, f) => {
+          e + f < t.length && (r.value[e + f] = i);
         }), c();
-        const u = Math.min(e + o.length, a.length - 1);
+        const u = Math.min(e + o.length, t.length - 1);
         s.value[u]?.focus();
       }
-    }, w = (t, e) => {
-      const l = t.key;
-      if (l === "Backspace") {
-        r.value[e] || (t.preventDefault(), e > 0 && (r.value[e - 1] = "", s.value[e - 1]?.focus(), c()));
+    }, D = (l, e) => {
+      const a = l.key;
+      if (a === "Backspace") {
+        r.value[e] || (l.preventDefault(), e > 0 && (r.value[e - 1] = "", s.value[e - 1]?.focus(), c()));
         return;
       }
-      l === "ArrowLeft" && (t.preventDefault(), e > 0 && s.value[e - 1]?.focus()), l === "ArrowRight" && (t.preventDefault(), e < a.length - 1 && s.value[e + 1]?.focus());
-    }, D = (t) => {
-      t.preventDefault();
-      const e = t.clipboardData?.getData("text/plain");
+      a === "ArrowLeft" && (l.preventDefault(), e > 0 && s.value[e - 1]?.focus()), a === "ArrowRight" && (l.preventDefault(), e < t.length - 1 && s.value[e + 1]?.focus());
+    }, k = (l) => {
+      l.preventDefault();
+      const e = l.clipboardData?.getData("text/plain");
       if (!e) return;
-      let l = e.trim();
-      a.type === "number" && (l = l.replace(/\D/g, ""));
-      const n = l.split("").slice(0, a.length), o = [...r.value];
-      n.forEach((i, d) => {
-        o[d] = i;
+      let a = e.trim();
+      t.type === "number" && (a = a.replace(/\D/g, ""));
+      const n = a.split("").slice(0, t.length), o = [...r.value];
+      n.forEach((i, f) => {
+        o[f] = i;
       }), r.value = o, c();
-      const u = Math.min(n.length, a.length - 1);
+      const u = Math.min(n.length, t.length - 1);
       s.value[u]?.focus();
-    }, k = (t, e) => {
-      t && (s.value[e] = t);
+    }, B = (l, e) => {
+      l && (s.value[e] = l);
     };
-    C(() => {
-      a.autofocus && V(() => {
+    V(() => {
+      t.autofocus && A(() => {
         s.value[0]?.focus();
       });
     });
-    const B = A(() => ["flex items-center", a.attached ? "-space-x-px" : "gap-2"].join(" ")), I = (t) => {
-      const e = "text-center font-medium transition-all focus:outline-none focus:z-10 disabled:opacity-50 disabled:cursor-not-allowed placeholder:text-muted-foreground", l = {
+    const I = m(() => t.mask ? "password" : t.type === "number" ? "tel" : "text"), j = m(() => {
+      if (!t.mask)
+        return t.type === "number" ? "numeric" : void 0;
+    }), x = m(() => {
+      const l = t.attached ? "-space-x-px" : "gap-2", e = t.fluid ? "w-full" : "";
+      return ["flex items-center", l, e].filter(Boolean).join(" ");
+    }), z = (l) => {
+      const e = "text-center font-medium transition-all focus:outline-none focus:z-10 disabled:opacity-50 disabled:cursor-not-allowed placeholder:text-muted-foreground", a = t.fluid ? {
+        sm: "flex-1 min-w-0 h-8 text-sm",
+        md: "flex-1 min-w-0 h-10 text-lg",
+        lg: "flex-1 min-w-0 h-12 text-xl"
+      } : {
         sm: "w-8 h-8 text-sm",
         md: "w-10 h-10 text-lg",
         lg: "w-12 h-12 text-xl"
       }, n = {
         solid: "bg-muted border border-transparent focus:border-primary focus:ring-2 focus:ring-primary",
         outline: "border border-input focus:border-primary focus:ring-2 focus:ring-primary",
-        ghost: "bg-transparent border border-transparent hover:bg-accent focus:focus:border-primary focus:ring-2 focus:ring-primary"
-      }, o = a.error ? "border-destructive focus:ring-destructive text-destructive" : "";
+        ghost: "bg-transparent border border-transparent hover:bg-accent focus:border-primary focus:ring-2 focus:ring-primary"
+      }, o = t.error ? "border-destructive focus:ring-destructive text-destructive" : "";
       let u = "rounded-md";
-      return a.attached && (t === 0 ? u = "rounded-l-md rounded-r-none" : t === a.length - 1 ? u = "rounded-r-md rounded-l-none" : u = "rounded-none"), [e, l[a.size], n[a.variant], o, u].join(" ");
+      return t.attached && (l === 0 ? u = "rounded-l-md rounded-r-none" : l === t.length - 1 ? u = "rounded-r-md rounded-l-none" : u = "rounded-none"), [e, a[t.size], n[t.variant], o, u].join(" ");
     };
-    return (t, e) => (g(), m("div", {
-      class: v(B.value)
+    return (l, e) => (g(), h("div", {
+      class: y(x.value)
     }, [
-      (g(!0), m(E, null, M(a.length, (l, n) => (g(), m("input", {
+      (g(!0), h(E, null, F(t.length, (a, n) => (g(), h("input", {
         key: n,
         ref_for: !0,
-        ref: (o) => k(o, n),
+        ref: (o) => B(o, n),
         value: r.value[n],
-        type: f.type === "number" ? "tel" : "text",
-        inputmode: "numeric",
+        type: I.value,
+        inputmode: j.value,
         maxlength: 1,
-        disabled: f.disabled,
-        placeholder: f.placeholder,
-        class: v(I(n)),
-        onInput: (o) => y(o, n),
-        onKeydown: (o) => w(o, n),
-        onPaste: D,
-        onFocus: e[0] || (e[0] = (o) => t.$emit("update:modelValue", r.value.join("")))
-      }, null, 42, F))), 128))
+        disabled: d.disabled,
+        placeholder: d.placeholder,
+        class: y(z(n)),
+        onInput: (o) => w(o, n),
+        onKeydown: (o) => D(o, n),
+        onPaste: k,
+        onFocus: e[0] || (e[0] = (o) => l.$emit("update:modelValue", r.value.join("")))
+      }, null, 42, K))), 128))
     ], 2));
   }
 });
 export {
-  P as default
+  T as default
 };

package/index.d.ts

@@ -76,4 +76,5 @@ export { GoogleSignInPlugin };
 export * from './components/StatusChip';
 export * from './components/Price';
 export * from './components/DateTime';
+export * from './components/Clock';
 export * from './core/config.ts';

package/index.js

@@ -118,7 +118,8 @@ import { default as Qt } from "./components/StatusChip/StatusChip.vue.js";
 import { STATUS_MAP as qt, normalizeStatus as Wt, resolveStatus as Xt } from "./components/StatusChip/status-map.js";
 import { default as Jt } from "./components/Price/Price.vue.js";
 import { default as ea } from "./components/DateTime/DateTime.vue.js";
-import { VLITE_CONFIG_KEY as ra, configState as ta, updateConfig as aa, useVLiteConfig as fa } from "./core/config.js";
+import { default as ra } from "./components/Clock/Clock.vue.js";
+import { VLITE_CONFIG_KEY as aa, configState as fa, updateConfig as ma, useVLiteConfig as la } from "./core/config.js";
 export {
   E as $t,
   Fo as Accordion,
@@ -140,6 +141,7 @@ export {
   nt as CheckBox,
   L as Chip,
   yo as ChoiceBox,
+  ra as Clock,
   yt as ColorPicker,
   Ot as CommandPaletteContent,
   Mt as ConfirmationModal,
@@ -218,12 +220,12 @@ export {
   Mr as TimelineItem,
   Rt as ToastNotification,
   xt as Tooltip,
-  ra as VLITE_CONFIG_KEY,
+  aa as VLITE_CONFIG_KEY,
   fo as Workbook,
   we as barcodesConstants,
   p as camelCase,
   d as capitalize,
-  ta as configState,
+  fa as configState,
   Fr as configure,
   u as copyToClipboard,
   Ht as createVLite,
@@ -259,7 +261,7 @@ export {
   F as throttle,
   Br as toast,
   v as truncate,
-  aa as updateConfig,
+  ma as updateConfig,
   Sr as useAdvancedKeyStroke,
   Ye as useDropdownIds,
   Ve as useDropdownSelection,
@@ -271,6 +273,6 @@ export {
   kr as useNotifications,
   Vo as useTheme,
   oo as useTreeSelection,
-  fa as useVLiteConfig,
+  la as useVLiteConfig,
   Cr as vScrollReveal
 };

package/package.json

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