vlite3 0.9.9 → 1.0.1

package/README.md

@@ -224,84 +224,73 @@ Override these variables in `:root` or within a `.dark` class (when using class-
 
 ### Extended Color Variants
 
-For more complex components, vlite3 provides extended variants for main semantic colors (`primary`, `danger`, `warning`, `info`, `success`). These are useful for building nuanced UIs with subtle backgrounds, hover states, and accessible text.
+For more complex components, **vlite3** provides extended variants for main semantic colors (`primary`, `danger`, `warning`, `info`, `success`). These help create nuanced UIs with subtle backgrounds, hover states, and accessible text.
 
-| Base Color  | Variant Variables           | Usage Description |
-| ----------- | --------------------------- | ----------------- |
-| **Primary** | `--color-primary-light`<br> |
-
-<br>`--color-primary-dark`<br>
-
-<br>`--color-primary-fg`<br>
-
-<br>`--color-primary-fg-light` | **Light**: Subtle background (e.g., 10% opacity).<br>
-
-<br>**Dark**: Hover state for the main color.<br>
-
-<br>**Fg**: Text color on top of the _main_ color.<br>
-
-<br>**Fg-Light**: Text color on top of the _light_ variant. |
-| **Danger** | `--color-danger-light`<br>
-
-<br>`--color-danger-dark`<br>
-
-<br>`--color-danger-fg`<br>
-
-<br>`--color-danger-fg-light` | **Light**: Error backgrounds (alerts).<br>
-
-<br>**Dark**: Hover state for destructive buttons.<br>
-
-<br>**Fg**: Text on destructive buttons.<br>
-
-<br>**Fg-Light**: Text on error alerts. |
-| **Warning** | `--color-warning-light`<br>
-
-<br>`--color-warning-dark`<br>
-
-<br>`--color-warning-fg`<br>
-
-<br>`--color-warning-fg-light` | **Light**: Warning backgrounds.<br>
+---
 
-<br>**Dark**: Active/Determined warning states.<br>
+#### Primary
 
-<br>**Fg**: Text on warning badges.<br>
+| Variable                   | Description                            |
+| -------------------------- | -------------------------------------- |
+| `--color-primary-light`    | Subtle background (e.g., 10% opacity)  |
+| `--color-primary-dark`     | Hover state for the main color         |
+| `--color-primary-fg`       | Text color on top of the main color    |
+| `--color-primary-fg-light` | Text color on top of the light variant |
 
-<br>**Fg-Light**: Text on warning backgrounds. |
-| **Success** | `--color-success-light`<br>
+---
 
-<br>`--color-success-dark`<br>
+#### Danger
 
-<br>`--color-success-fg`<br>
+| Variable                  | Description                         |
+| ------------------------- | ----------------------------------- |
+| `--color-danger-light`    | Error backgrounds (alerts)          |
+| `--color-danger-dark`     | Hover state for destructive buttons |
+| `--color-danger-fg`       | Text on destructive buttons         |
+| `--color-danger-fg-light` | Text on error alerts                |
 
-<br>`--color-success-fg-light` | **Light**: Success backgrounds (toasts).<br>
+---
 
-<br>**Dark**: Hover/Active success actions.<br>
+#### Warning
 
-<br>**Fg**: Text on success buttons.<br>
+| Variable                   | Description                         |
+| -------------------------- | ----------------------------------- |
+| `--color-warning-light`    | Warning backgrounds                 |
+| `--color-warning-dark`     | Active or emphasized warning states |
+| `--color-warning-fg`       | Text on warning badges              |
+| `--color-warning-fg-light` | Text on warning backgrounds         |
 
-<br>**Fg-Light**: Text on success backgrounds. |
-| **Info** | `--color-info-light`<br>
+---
 
-<br>`--color-info-dark`<br>
+#### Success
 
-<br>`--color-info-fg`<br>
+| Variable                   | Description                     |
+| -------------------------- | ------------------------------- |
+| `--color-success-light`    | Success backgrounds (toasts)    |
+| `--color-success-dark`     | Hover or active success actions |
+| `--color-success-fg`       | Text on success buttons         |
+| `--color-success-fg-light` | Text on success backgrounds     |
 
-<br>`--color-info-fg-light` | **Light**: Info backgrounds.<br>
+---
 
-<br>**Dark**: Hover/Active info actions.<br>
+#### Info
 
-<br>**Fg**: Text on info buttons.<br>
+| Variable                | Description                  |
+| ----------------------- | ---------------------------- |
+| `--color-info-light`    | Info backgrounds             |
+| `--color-info-dark`     | Hover or active info actions |
+| `--color-info-fg`       | Text on info buttons         |
+| `--color-info-fg-light` | Text on info backgrounds     |
 
-<br>**Fg-Light**: Text on info backgrounds. |
+---
 
-**Example Usage:**
+### Example Usage
 
 ```html
 <div class="bg-success-light text-success-fg-light border border-success/20">
   Operation Completed
 </div>
 
-<button class="bg-danger text-danger-fg hover:bg-danger-dark">Delete</button>
+<button class="bg-danger text-danger-fg hover:bg-dang
 ```
 
 ### Additional Colors
@@ -404,16 +393,19 @@ Follow these rules strictly to ensure visual consistency and predictable styling
 - [x] **Label**
 - [x] **Badge**
 - [x] **Chip**
+- [x] **StatusChip**
 - [x] **Logo**
 - [x] **Navbar**
 - [x] **SidebarMenu**
 - [x] **SidePanel**
 - [x] **Breadcrumb**
 - [x] **List**
+- [x] **AttachmentsList**
 - [x] **Masonry Grid**
 - [x] **Stats**
 - [x] **ThemeToggle**
 - [x] **Screen**
+- [x] **ChatInterface**
 
 ### Inputs & Forms
 
@@ -454,11 +446,14 @@ Follow these rules strictly to ensure visual consistency and predictable styling
 - [x] **Tabes**
 - [x] **Masonry**
 - [x] **Stats**
+- [x] **Price**
+- [x] **Date**
 
 ### Feedback & Overlays
 
 - [x] **Alert**
 - [x] **Modal**
+- [x] **Empty**
 - [x] **ConfirmationModal**
 - [x] **ToastNotification**
 - [x] **Tooltip**

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

@@ -6,8 +6,8 @@ import O from "../Input.vue.js";
 import "../../core/config.js";
 /* empty css                            */
 import y from "../Button.vue.js";
-import E from "./ColorIro.vue2.js";
-/* empty css             */
+import E from "./ColorIro.vue.js";
+/* empty css              */
 import { useEyeDropper as P } from "@vueuse/core";
 const I = {
   key: 0,

package/components/CommandPalette/CommandPaletteContent.vue2.js

@@ -4,7 +4,7 @@ import k from "../Icon.vue.js";
 import { $t as E } from "../../utils/i18n.js";
 import { useCommandPaletteItems as Y } from "./useCommandPaletteItems.js";
 import { useCommandPaletteNav as Z } from "./useCommandPaletteNav.js";
-import ee from "./CommandPaletteItem.vue2.js";
+import ee from "./CommandPaletteItem.vue.js";
 const te = { class: "command-palette-content flex flex-col w-full h-full max-h-[70vh]" }, oe = { class: "flex items-center gap-3 px-4 py-3 border-b border-border/60 shrink-0" }, se = ["placeholder"], ne = ["aria-label"], re = {
   key: 0,
   class: "flex flex-col items-center justify-center py-14 px-6 text-center select-none",

package/components/CommandPalette/{CommandPaletteItem.vue2.js → CommandPaletteItem.vue.js}

@@ -1,5 +1,5 @@
 import t from "./CommandPaletteItem.vue3.js";
-/* empty css                       */
+/* empty css                        */
 import o from "../../_virtual/_plugin-vue_export-helper.js";
 const r = /* @__PURE__ */ o(t, [["__scopeId", "data-v-66b1ae06"]]);
 export {

package/components/DatePicker.vue.js

@@ -1,13 +1,13 @@
-import { defineComponent as T, computed as d, openBlock as x, createBlock as w, unref as o, withCtx as u, createElementVNode as z, createVNode as m, renderSlot as $, mergeProps as k } from "vue";
-import P from "./Button.vue.js";
-import B from "./Dropdown/Dropdown.vue.js";
+import { defineComponent as z, computed as m, openBlock as x, createBlock as k, unref as D, withCtx as h, createElementVNode as L, createVNode as g, renderSlot as B, mergeProps as P } from "vue";
+import V from "./Button.vue.js";
+import U from "./Dropdown/Dropdown.vue.js";
 import "@iconify/vue";
-import { $t as S } from "../utils/i18n.js";
+import { $t as I } from "../utils/i18n.js";
 /* empty css           */
 /* empty css                           */
 import j, { TimePicker as C } from "v-datepicker-lite";
 import "v-datepicker-lite/style.css";
-const U = { class: "overflow-hidden min-w-[300px]" }, G = /* @__PURE__ */ T({
+const F = { class: "overflow-hidden min-w-[300px]" }, G = /* @__PURE__ */ z({
   __name: "DatePicker",
   props: {
     placeholder: {},
@@ -29,34 +29,53 @@ const U = { class: "overflow-hidden min-w-[300px]" }, G = /* @__PURE__ */ T({
     readonly: { type: Boolean }
   },
   emits: ["update:modelValue", "change"],
-  setup(t, { emit: V }) {
-    const l = t, s = V, a = d({
-      get: () => l.modelValue ?? l.value,
+  setup(t, { emit: N }) {
+    const r = t, y = N, a = m({
+      get: () => r.modelValue ?? r.value,
       set: (e) => {
-        s("update:modelValue", e), s("change", e);
+        y("update:modelValue", e), y("change", e);
       }
-    }), I = (e) => e instanceof Date ? e.getHours() !== 0 || e.getMinutes() !== 0 : typeof e == "string" ? e.includes("T") || /\d{2}:\d{2}/.test(e) : !1, c = (e) => {
+    }), T = (e) => e instanceof Date ? e.getHours() !== 0 || e.getMinutes() !== 0 : typeof e == "string" ? e.includes("T") || /\d{2}:\d{2}/.test(e) : !1, u = (e) => {
+      if (!e) return null;
+      if (e instanceof Date)
+        return isNaN(e.getTime()) ? null : new Date(e.getFullYear(), e.getMonth(), e.getDate());
+      if (typeof e == "string") {
+        if (/^\d{4}-\d{2}-\d{2}$/.test(e)) {
+          const [l, d, o] = e.split("-").map(Number);
+          return new Date(l, d - 1, o);
+        }
+        if (e.includes("T")) {
+          const l = e.split("T")[0], [d, o, s] = l.split("-").map(Number);
+          return new Date(d, o - 1, s);
+        }
+        const i = new Date(e);
+        return isNaN(i.getTime()) ? null : i;
+      }
+      return null;
+    }, c = (e) => {
+      const n = e.getFullYear(), i = String(e.getMonth() + 1).padStart(2, "0"), l = String(e.getDate()).padStart(2, "0");
+      return `${n}-${i}-${l}`;
+    }, b = (e) => {
       try {
         if (e && typeof e == "object") {
-          const h = e.startDate || e.start, b = e.endDate || e.end;
-          if (h && b) {
-            const y = new Date(h), g = new Date(b);
-            if (!isNaN(y.getTime()) && !isNaN(g.getTime()))
-              return { startDate: y, endDate: g };
+          const d = e.startDate || e.start, o = e.endDate || e.end;
+          if (d && o) {
+            const s = u(d), w = u(o);
+            if (s && w) return { startDate: s, endDate: w };
           }
         }
-        const n = new Date(e);
-        if (isNaN(n.getTime())) return null;
-        const i = new Date(n), D = new Date(n);
-        return D.setDate(i.getDate() + 6), { startDate: i, endDate: D };
+        const n = u(e);
+        if (!n) return null;
+        const i = new Date(n), l = new Date(n);
+        return l.setDate(i.getDate() + 6), { startDate: i, endDate: l };
       } catch {
         return null;
       }
-    }, r = d(() => {
+    }, f = m(() => {
       if (!a.value) return "";
-      if (l.mode === "time") return a.value;
-      if (l.mode === "week") {
-        const e = c(a.value);
+      if (r.mode === "time") return a.value;
+      if (r.mode === "week") {
+        const e = b(a.value);
         if (!e) return "";
         const n = e.startDate.toLocaleDateString("en-US", {
           month: "short",
@@ -70,34 +89,52 @@ const U = { class: "overflow-hidden min-w-[300px]" }, G = /* @__PURE__ */ T({
         return `${n} - ${i}`;
       }
       try {
+        if (r.mode === "date" || r.mode === "month") {
+          const i = u(a.value);
+          return i ? i.toLocaleDateString("en-US", {
+            month: "short",
+            day: "numeric",
+            year: "numeric"
+          }) : String(a.value);
+        }
         const e = new Date(a.value);
         if (isNaN(e.getTime())) return String(a.value);
-        const n = l.mode === "dateTime" && I(a.value);
+        const n = r.mode === "dateTime" && T(a.value);
         return e.toLocaleDateString("en-US", {
           month: "short",
           day: "numeric",
           year: "numeric",
-          ...n ? { hour: "2-digit", minute: "2-digit", hour12: l.timeFormat === "12h" } : {}
+          ...n ? { hour: "2-digit", minute: "2-digit", hour12: r.timeFormat === "12h" } : {}
         });
       } catch {
         return String(a.value);
       }
-    }), f = d(() => {
-      if (l.placeholderI18n) return S(l.placeholderI18n);
-      if (l.placeholder !== void 0) return l.placeholder;
-      const e = S("vlite.datePicker.placeholder");
+    }), v = m(() => {
+      if (r.placeholderI18n) return I(r.placeholderI18n);
+      if (r.placeholder !== void 0) return r.placeholder;
+      const e = I("vlite.datePicker.placeholder");
       return e !== "vlite.datePicker.placeholder" ? e : "Select date";
-    }), v = (e) => {
-      if (l.mode === "week") {
-        const n = c(e);
+    }), S = (e) => {
+      if (r.mode === "week") {
+        const n = b(e);
+        if (n) {
+          a.value = {
+            startDate: c(n.startDate),
+            endDate: c(n.endDate)
+          };
+          return;
+        }
+      }
+      if (r.mode === "date" || r.mode === "month") {
+        const n = u(e);
         if (n) {
-          a.value = { startDate: n.startDate, endDate: n.endDate };
+          a.value = c(n);
           return;
         }
       }
       a.value = e;
-    }, N = d(() => l.mode === "week" && a.value && typeof a.value == "object" && (a.value.startDate || a.value.start) || a.value);
-    return (e, n) => t.mode !== "time" ? (x(), w(o(B), {
+    }, $ = m(() => r.mode === "week" && a.value && typeof a.value == "object" && (a.value.startDate || a.value.start) || a.value);
+    return (e, n) => t.mode !== "time" ? (x(), k(D(U), {
       key: 0,
       position: "bottom-start",
       class: "w-full",
@@ -105,13 +142,13 @@ const U = { class: "overflow-hidden min-w-[300px]" }, G = /* @__PURE__ */ T({
       teleport: t.teleport,
       disabled: t.disabled || t.readonly
     }, {
-      trigger: u(() => [
-        $(e.$slots, "default", {
+      trigger: h(() => [
+        B(e.$slots, "default", {
           value: a.value,
-          displayValue: r.value
+          displayValue: f.value
         }, () => [
-          m(P, k({
-            text: r.value?.replace("-", "—") || f.value,
+          g(V, P({
+            text: f.value?.replace("-", "—") || v.value,
             variant: t.variant || "outline",
             size: t.size || "md",
             icon: t.icon || "lucide:calendar",
@@ -119,10 +156,10 @@ const U = { class: "overflow-hidden min-w-[300px]" }, G = /* @__PURE__ */ T({
           }, t.btnProps, { class: "w-full justify-start text-left font-normal" }), null, 16, ["text", "variant", "size", "icon", "disabled"])
         ])
       ]),
-      default: u(() => [
-        z("div", U, [
-          m(o(j), {
-            value: N.value,
+      default: h(() => [
+        L("div", F, [
+          g(D(j), {
+            value: $.value,
             mode: t.mode,
             "min-date": t.minDate,
             "max-date": t.maxDate,
@@ -132,17 +169,17 @@ const U = { class: "overflow-hidden min-w-[300px]" }, G = /* @__PURE__ */ T({
             "time-format": "12h",
             disabled: t.disabled,
             readonly: t.readonly,
-            onChange: v
+            onChange: S
           }, null, 8, ["value", "mode", "min-date", "max-date", "disabled-dates", "minuteInterval", "disabled", "readonly"])
         ])
       ]),
       _: 3
-    }, 8, ["teleport", "disabled"])) : (x(), w(o(C), {
+    }, 8, ["teleport", "disabled"])) : (x(), k(D(C), {
       key: 1,
       "model-value": a.value,
       "onUpdate:modelValue": [
         n[0] || (n[0] = (i) => a.value = i),
-        v
+        S
       ],
       mode: t.mode,
       "min-date": t.minDate,
@@ -154,9 +191,9 @@ const U = { class: "overflow-hidden min-w-[300px]" }, G = /* @__PURE__ */ T({
       disabled: t.disabled,
       readonly: t.readonly
     }, {
-      default: u(() => [
-        m(P, k({
-          text: r.value || f.value,
+      default: h(() => [
+        g(V, P({
+          text: f.value || v.value,
           variant: t.variant || "outline",
           size: t.size || "md",
           icon: t.icon || (t.mode === "time" ? "lucide:clock" : "lucide:calendar"),

package/components/Form/CustomFields.vue.js

@@ -1,7 +1,7 @@
 import o from "./CustomFields.vue2.js";
 /* empty css                  */
 import t from "../../_virtual/_plugin-vue_export-helper.js";
-const s = /* @__PURE__ */ t(o, [["__scopeId", "data-v-3674ca13"]]);
+const r = /* @__PURE__ */ t(o, [["__scopeId", "data-v-3e1f26ae"]]);
 export {
-  s as default
+  r as default
 };