vlite3 1.1.2 → 1.1.5

package/components/DataTable/DataTableHeader.vue.js

@@ -1,51 +1,52 @@
-import { defineComponent as g, computed as o, openBlock as n, createElementBlock as l, normalizeClass as r, createElementVNode as s, toDisplayString as x, createVNode as b, createCommentVNode as y } from "vue";
-import v from "../Icon.vue.js";
-import { $t as C } from "../../utils/i18n.js";
-const w = { class: "text-xs font-bold! uppercase tracking-wider text-gray-900 truncate" }, S = {
+import { defineComponent as x, computed as r, openBlock as n, createElementBlock as l, normalizeClass as o, createElementVNode as s, toDisplayString as y, createVNode as b, createCommentVNode as v } from "vue";
+import C from "../Icon.vue.js";
+import { $t as w } from "../../utils/i18n.js";
+const S = { class: "text-xs font-bold! uppercase tracking-wider text-gray-900 truncate" }, k = {
   key: 0,
   class: "w-4 h-4 shrink-0"
-}, M = /* @__PURE__ */ g({
+}, M = /* @__PURE__ */ x({
   __name: "DataTableHeader",
   props: {
     header: {},
     sortConfig: {},
     compact: { type: Boolean, default: !1 },
+    size: { default: "md" },
     tableSortable: { type: Boolean, default: !0 }
   },
   emits: ["sort"],
   setup(t, { emit: i }) {
-    const e = t, c = i, a = o(() => e.header.sortKey || e.header.field), d = o(
+    const e = t, c = i, a = r(() => e.header.sortKey || e.header.field), d = r(
       () => e.sortConfig?.field === a.value && e.sortConfig?.order
-    ), f = o(() => !e.sortConfig || e.sortConfig.field !== a.value ? "lucide:chevrons-up-down" : e.sortConfig.order === "asc" ? "lucide:arrow-up" : e.sortConfig.order === "desc" ? "lucide:arrow-down" : "lucide:chevrons-up-down"), u = () => {
+    ), u = r(() => !e.sortConfig || e.sortConfig.field !== a.value ? "lucide:chevrons-up-down" : e.sortConfig.order === "asc" ? "lucide:arrow-up" : e.sortConfig.order === "desc" ? "lucide:arrow-down" : "lucide:chevrons-up-down"), f = () => {
       e.tableSortable && e.header.sortable !== !1 && c("sort", e.header.field);
-    }, h = o(() => ({
+    }, h = r(() => ({
       left: "justify-start text-left",
       center: "justify-center text-center",
       right: "justify-end text-right"
-    })[e.header.align || "left"]), m = o(
-      () => e.header.titleI18n ? C(e.header.titleI18n) : e.header.title
-    );
-    return (p, k) => (n(), l("th", {
+    })[e.header.align || "left"]), m = r(
+      () => e.header.titleI18n ? w(e.header.titleI18n) : e.header.title
+    ), p = r(() => e.size === "xs" || e.compact ? "py-1.5!" : e.size === "sm" ? "py-2!" : e.size === "lg" ? "py-4!" : "py-3!");
+    return (g, z) => (n(), l("th", {
       scope: "col",
-      class: r(["px-3 text-left align-middle font-medium text-muted-foreground transition-colors [&:has([role=checkbox])]:pr-0 overflow-hidden max-w-[400px]", [
-        t.compact ? "py-2.5!" : "py-3!",
+      class: o(["group/th px-3 text-left align-middle font-medium text-muted-foreground transition-colors [&:has([role=checkbox])]:pr-0 overflow-hidden max-w-[400px]", [
+        p.value,
         t.header.sortable !== !1 && t.tableSortable ? "cursor-pointer hover:bg-muted/50" : "",
         t.header.hideOnMobile ? "hidden md:table-cell" : ""
       ]]),
-      onClick: u
+      onClick: f
     }, [
       s("div", {
-        class: r(["flex items-center gap-2 space-x-2", h.value])
+        class: o(["flex items-center gap-2 space-x-2", h.value])
       }, [
-        s("span", w, x(m.value), 1),
-        t.tableSortable && t.header.sortable !== !1 ? (n(), l("span", S, [
-          b(v, {
-            icon: f.value,
-            class: r(["w-3.5 h-3.5 transition-all text-muted-foreground mt-0.5", [
-              d.value ? "opacity-100 text-foreground" : "opacity-0 group-hover:opacity-100"
+        s("span", S, y(m.value), 1),
+        t.tableSortable && t.header.sortable !== !1 ? (n(), l("span", k, [
+          b(C, {
+            icon: u.value,
+            class: o(["w-3.5 h-3.5 transition-all text-muted-foreground mt-0.5", [
+              d.value ? "opacity-100 text-foreground" : "opacity-0 group-hover/th:opacity-100"
             ]])
           }, null, 8, ["icon", "class"])
-        ])) : y("", !0)
+        ])) : v("", !0)
       ], 2)
     ], 2));
   }

package/components/DataTable/DataTableRow.vue.d.ts

@@ -9,6 +9,7 @@ interface Props {
     hoverable?: boolean;
     striped?: boolean;
     compact?: boolean;
+    size?: 'xs' | 'sm' | 'md' | 'lg';
 }
 declare function __VLS_template(): {
     attrs: Partial<{}>;
@@ -35,6 +36,7 @@ declare const __VLS_component: import('vue').DefineComponent<Props, {}, {}, {},
         index: number;
     }) => any;
 }>, {
+    size: "xs" | "sm" | "md" | "lg";
     striped: boolean;
     compact: boolean;
     selectable: boolean;

package/components/DataTable/DataTableRow.vue.js

@@ -1,8 +1,8 @@
-import { defineComponent as S, computed as p, openBlock as o, createElementBlock as d, normalizeClass as a, withModifiers as B, createElementVNode as r, createVNode as M, createCommentVNode as W, Fragment as z, renderList as N, normalizeStyle as V, renderSlot as h, createBlock as f } from "vue";
-import F from "../CheckBox.vue.js";
-import L from "../Price/Price.vue.js";
-import $ from "../DateTime/DateTime.vue.js";
-const T = ["data-state"], E = { class: "flex items-center justify-center" }, H = { class: "max-h-[80px] overflow-y-auto w-full" }, I = ["title", "innerHTML"], j = /* @__PURE__ */ S({
+import { defineComponent as S, computed as z, openBlock as c, createElementBlock as m, normalizeClass as u, withModifiers as B, createElementVNode as a, createVNode as M, createCommentVNode as W, Fragment as N, renderList as V, normalizeStyle as h, renderSlot as F, createBlock as f } from "vue";
+import L from "../CheckBox.vue.js";
+import $ from "../Price/Price.vue.js";
+import T from "../DateTime/DateTime.vue.js";
+const E = ["data-state"], H = { class: "flex items-center justify-center" }, I = { class: "max-h-[80px] overflow-y-auto w-full" }, R = ["title", "innerHTML"], q = /* @__PURE__ */ S({
   __name: "DataTableRow",
   props: {
     row: {},
@@ -13,22 +13,23 @@ const T = ["data-state"], E = { class: "flex items-center justify-center" }, H =
     isSelected: { type: Boolean, default: !1 },
     hoverable: { type: Boolean, default: !0 },
     striped: { type: Boolean, default: !1 },
-    compact: { type: Boolean, default: !1 }
+    compact: { type: Boolean, default: !1 },
+    size: { default: "md" }
   },
   emits: ["select", "rowClick"],
   setup(i, { emit: w }) {
-    const m = i, u = w, n = (e, l) => {
+    const o = i, r = w, n = (e, l) => {
       if (!(!e || !l))
         return l.includes(".") ? l.split(".").reduce((t, s) => t?.[s], e) : e[l];
     }, x = (e, l, t) => e.format ? e.format(l, t) : l == null ? "-" : e.type === "number" ? new Intl.NumberFormat("en-US").format(Number(l)) : String(l), g = (e, l, t) => {
       const s = [];
       if (e.width && /(?:^|\s|:)w-/.test(e.width) && s.push(e.width), e.minWidth && /(?:^|\s|:)min-w-/.test(e.minWidth) && s.push(e.minWidth), e.capitalize && s.push("capitalize"), e.addStatusColor) {
-        const c = y(l);
-        c && s.push(c);
+        const d = y(l);
+        d && s.push(d);
       }
       if (typeof e.class == "function") {
-        const c = e.class(l, t);
-        c && s.push(c);
+        const d = e.class(l, t);
+        d && s.push(d);
       } else e.class && s.push(e.class);
       return s.join(" ");
     }, y = (e) => {
@@ -52,13 +53,13 @@ const T = ["data-state"], E = { class: "flex items-center justify-center" }, H =
       left: "text-left",
       center: "text-center",
       right: "text-right"
-    })[e.align || "left"], k = p(() => n(m.row, m.keyField)), v = () => {
-      u("rowClick", { row: m.row, index: m.index });
+    })[e.align || "left"], p = z(() => n(o.row, o.keyField)), k = () => o.size === "xs" || o.compact ? "py-1.5! -text-fs-1.5! pr-3 max-sm:pr-10!" : o.size === "sm" ? "py-2! -text-fs-1.5! pr-4 max-sm:pr-10!" : o.size === "lg" ? "py-4! text-base pr-6 max-sm:pr-12!" : "py-3! pr-5! max-sm:pr-10! -text-fs-1.5!", v = () => {
+      r("rowClick", { row: o.row, index: o.index });
     }, C = () => {
-      u("select", k.value);
+      r("select", p.value);
     };
-    return (e, l) => (o(), d("tr", {
-      class: a(["border-b data-[state=selected]:bg-muted h-full", [
+    return (e, l) => (c(), m("tr", {
+      class: u(["border-b data-[state=selected]:bg-muted h-full", [
         i.hoverable ? "hover:bg-muted/20" : "",
         i.striped && i.index % 2 === 1 ? "bg-muted/20" : "bg-background",
         i.isSelected ? "bg-muted! hover:bg-muted/30" : "",
@@ -67,62 +68,62 @@ const T = ["data-state"], E = { class: "flex items-center justify-center" }, H =
       "data-state": i.isSelected ? "selected" : void 0,
       onClick: v
     }, [
-      i.selectable ? (o(), d("td", {
+      i.selectable ? (c(), m("td", {
         key: 0,
         class: "px-0! py-1! align-middle text-center",
         onClick: l[0] || (l[0] = B(() => {
         }, ["stop"]))
       }, [
-        r("div", E, [
-          M(F, {
+        a("div", H, [
+          M(L, {
             "model-value": i.isSelected,
             size: "xs",
             "onUpdate:modelValue": C
           }, null, 8, ["model-value"])
         ])
       ])) : W("", !0),
-      (o(!0), d(z, null, N(i.headers, (t) => (o(), d("td", {
+      (c(!0), m(N, null, V(i.headers, (t) => (c(), m("td", {
         key: t.field,
-        class: a(["align-middle overflow-hidden max-w-[400px] whitespace-normal break-words", [
-          i.compact ? "py-1! -text-fs-1.5! max-sm:pr-10!" : "py-3! pr-5! max-sm:pr-10! -text-fs-1.5!",
+        class: u(["align-middle overflow-hidden max-w-[400px] whitespace-normal wrap-break-word", [
+          k(),
           b(t),
           t.hideOnMobile ? "hidden md:table-cell" : "",
           g(t, n(i.row, t.field), i.row)
         ]]),
-        style: V({
+        style: h({
           ...t.width && !/(?:^|\s|:)w-/.test(t.width) ? { width: t.width } : {},
           ...t.minWidth && !/(?:^|\s|:)min-w-/.test(t.minWidth) ? { minWidth: t.minWidth } : {}
         })
       }, [
-        r("div", H, [
-          h(e.$slots, t.field, {
+        a("div", I, [
+          F(e.$slots, t.field, {
             value: n(i.row, t.field),
             row: i.row,
             index: i.index,
             field: t.field
           }, () => [
-            t.type === "price" ? (o(), f(L, {
+            t.type === "price" ? (c(), f($, {
               key: 0,
               value: n(i.row, t.field),
               class: "block",
               title: String(n(i.row, t.field))
-            }, null, 8, ["value", "title"])) : t.type === "date" ? (o(), f($, {
+            }, null, 8, ["value", "title"])) : t.type === "date" ? (c(), f(T, {
               key: 1,
               value: n(i.row, t.field),
               class: "block",
               title: String(n(i.row, t.field))
-            }, null, 8, ["value", "title"])) : (o(), d("span", {
+            }, null, 8, ["value", "title"])) : (c(), m("span", {
               key: 2,
               class: "block",
               title: String(n(i.row, t.field)),
               innerHTML: x(t, n(i.row, t.field), i.row)
-            }, null, 8, I))
+            }, null, 8, R))
           ])
         ])
       ], 6))), 128))
-    ], 10, T));
+    ], 10, E));
   }
 });
 export {
-  j as default
+  q as default
 };

package/components/DataTable/types.d.ts

@@ -11,7 +11,6 @@ export interface SortConfig {
 export interface TableState {
     pagination: PaginationConfig;
     sort: SortConfig;
-    search: string;
     filter: Record<string, any>;
 }
 export interface FilterConfig {
@@ -19,7 +18,6 @@ export interface FilterConfig {
 }
 export interface TableFilter {
     pagination: PaginationConfig;
-    search: string;
     sort: SortConfig;
     filter: FilterConfig;
 }
@@ -48,12 +46,6 @@ export interface TableHeader {
 export interface DataTableProps {
     rows: any[];
     selectedRows?: any[];
-    search?: string;
-    showSearch?: boolean;
-    searchPlaceholder?: string;
-    searchPlaceholderI18n?: string;
-    toolbarClass?: string;
-    toolbarSearchClass?: string;
     headers: TableHeader[];
     /**
      * Unique row identifier field.
@@ -78,6 +70,8 @@ export interface DataTableProps {
     class?: string;
     sortable?: boolean;
     variant?: 'default' | 'raised';
+    headerVariant?: 'default' | 'minimal';
+    size?: 'xs' | 'sm' | 'md' | 'lg';
 }
 export interface SelectionState {
     selected: any[];
@@ -98,7 +92,6 @@ export interface RowClickPayload {
  *                      Undefined when DataTable is used standalone (outside Screen).
  */
 export interface ScreenContext {
-    disableSearch: boolean;
     forceSelectable: boolean;
     onTableChange?: (state: TableState) => void;
 }

package/components/DatePicker.vue.js

@@ -1,13 +1,13 @@
-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 { defineComponent as z, computed as m, openBlock as w, createBlock as $, unref as D, withCtx as h, createElementVNode as p, createVNode as g, renderSlot as L, mergeProps as x } from "vue";
+import P from "./Button.vue.js";
+import B from "./Dropdown/Dropdown.vue.js";
 import "@iconify/vue";
-import { $t as I } from "../utils/i18n.js";
+import { $t as V } from "../utils/i18n.js";
 /* empty css           */
 /* empty css                           */
-import j, { TimePicker as C } from "v-datepicker-lite";
+import U, { TimePicker as j } from "v-datepicker-lite";
 import "v-datepicker-lite/style.css";
-const F = { class: "overflow-hidden min-w-[300px]" }, G = /* @__PURE__ */ z({
+const C = { class: "overflow-hidden min-w-[300px]" }, G = /* @__PURE__ */ z({
   __name: "DatePicker",
   props: {
     placeholder: {},
@@ -29,45 +29,45 @@ const F = { class: "overflow-hidden min-w-[300px]" }, G = /* @__PURE__ */ z({
     readonly: { type: Boolean }
   },
   emits: ["update:modelValue", "change"],
-  setup(t, { emit: N }) {
-    const r = t, y = N, a = m({
+  setup(t, { emit: I }) {
+    const r = t, y = I, a = m({
       get: () => r.modelValue ?? r.value,
       set: (e) => {
         y("update:modelValue", e), y("change", 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) => {
+    }), N = (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);
+          const [d, l, o] = e.split("-").map(Number);
+          return new Date(d, l - 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 d = e.split("T")[0], [l, o, s] = d.split("-").map(Number);
+          return new Date(l, 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}`;
+      const n = e.getFullYear(), i = String(e.getMonth() + 1).padStart(2, "0"), d = String(e.getDate()).padStart(2, "0");
+      return `${n}-${i}-${d}`;
     }, b = (e) => {
       try {
         if (e && typeof e == "object") {
-          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 l = e.startDate || e.start, o = e.endDate || e.end;
+          if (l && o) {
+            const s = u(l), k = u(o);
+            if (s && k) return { startDate: s, endDate: k };
           }
         }
         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 };
+        const i = new Date(n), d = new Date(n);
+        return d.setDate(i.getDate() + 6), { startDate: i, endDate: d };
       } catch {
         return null;
       }
@@ -99,7 +99,7 @@ const F = { class: "overflow-hidden min-w-[300px]" }, G = /* @__PURE__ */ z({
         }
         const e = new Date(a.value);
         if (isNaN(e.getTime())) return String(a.value);
-        const n = r.mode === "dateTime" && T(a.value);
+        const n = r.mode === "dateTime" && N(a.value);
         return e.toLocaleDateString("en-US", {
           month: "short",
           day: "numeric",
@@ -110,9 +110,9 @@ const F = { class: "overflow-hidden min-w-[300px]" }, G = /* @__PURE__ */ z({
         return String(a.value);
       }
     }), v = m(() => {
-      if (r.placeholderI18n) return I(r.placeholderI18n);
+      if (r.placeholderI18n) return V(r.placeholderI18n);
       if (r.placeholder !== void 0) return r.placeholder;
-      const e = I("vlite.datePicker.placeholder");
+      const e = V("vlite.datePicker.placeholder");
       return e !== "vlite.datePicker.placeholder" ? e : "Select date";
     }), S = (e) => {
       if (r.mode === "week") {
@@ -133,8 +133,8 @@ const F = { class: "overflow-hidden min-w-[300px]" }, G = /* @__PURE__ */ z({
         }
       }
       a.value = e;
-    }, $ = 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), {
+    }, T = m(() => r.mode === "week" && a.value && typeof a.value == "object" && (a.value.startDate || a.value.start) || a.value);
+    return (e, n) => t.mode !== "time" ? (w(), $(D(B), {
       key: 0,
       position: "bottom-start",
       class: "w-full",
@@ -143,23 +143,26 @@ const F = { class: "overflow-hidden min-w-[300px]" }, G = /* @__PURE__ */ z({
       disabled: t.disabled || t.readonly
     }, {
       trigger: h(() => [
-        B(e.$slots, "default", {
+        L(e.$slots, "default", {
           value: a.value,
           displayValue: f.value
         }, () => [
-          g(V, P({
+          g(P, x({
             text: f.value?.replace("-", "—") || v.value,
             variant: t.variant || "outline",
             size: t.size || "md",
             icon: t.icon || "lucide:calendar",
             disabled: t.disabled
-          }, t.btnProps, { class: "w-full justify-start text-left font-normal" }), null, 16, ["text", "variant", "size", "icon", "disabled"])
+          }, t.btnProps, {
+            class: "w-full justify-start text-left font-normal",
+            "data-testid": e.$attrs["data-testid"] || (e.$attrs.name ? `datepicker-${e.$attrs.name}` : "datepicker")
+          }), null, 16, ["text", "variant", "size", "icon", "disabled", "data-testid"])
         ])
       ]),
       default: h(() => [
-        L("div", F, [
-          g(D(j), {
-            value: $.value,
+        p("div", C, [
+          g(D(U), {
+            value: T.value,
             mode: t.mode,
             "min-date": t.minDate,
             "max-date": t.maxDate,
@@ -174,7 +177,7 @@ const F = { class: "overflow-hidden min-w-[300px]" }, G = /* @__PURE__ */ z({
         ])
       ]),
       _: 3
-    }, 8, ["teleport", "disabled"])) : (x(), k(D(C), {
+    }, 8, ["teleport", "disabled"])) : (w(), $(D(j), {
       key: 1,
       "model-value": a.value,
       "onUpdate:modelValue": [
@@ -192,13 +195,16 @@ const F = { class: "overflow-hidden min-w-[300px]" }, G = /* @__PURE__ */ z({
       readonly: t.readonly
     }, {
       default: h(() => [
-        g(V, P({
+        g(P, x({
           text: f.value || v.value,
           variant: t.variant || "outline",
           size: t.size || "md",
           icon: t.icon || (t.mode === "time" ? "lucide:clock" : "lucide:calendar"),
           disabled: t.disabled
-        }, t.btnProps, { class: "w-full justify-start text-left font-normal" }), null, 16, ["text", "variant", "size", "icon", "disabled"])
+        }, t.btnProps, {
+          class: "w-full justify-start text-left font-normal",
+          "data-testid": e.$attrs["data-testid"] || (e.$attrs.name ? `timepicker-${e.$attrs.name}` : "timepicker")
+        }), null, 16, ["text", "variant", "size", "icon", "disabled", "data-testid"])
       ]),
       _: 1
     }, 8, ["model-value", "mode", "min-date", "max-date", "disabled-dates", "minuteInterval", "disabled", "readonly"]));

package/components/DateRangePicker.vue.js

@@ -1,5 +1,5 @@
-import { defineComponent as F, ref as b, watch as L, computed as u, openBlock as d, createBlock as m, unref as v, withCtx as D, createElementVNode as i, createElementBlock as w, Fragment as T, renderList as z, createCommentVNode as B, createVNode as h, normalizeClass as y, toDisplayString as x, createTextVNode as E } from "vue";
-import $ from "./Dropdown/Dropdown.vue.js";
+import { defineComponent as $, ref as b, watch as F, computed as u, openBlock as d, createBlock as m, unref as v, withCtx as D, createElementVNode as i, createElementBlock as w, Fragment as L, renderList as T, createCommentVNode as z, createVNode as h, normalizeClass as y, toDisplayString as x, createTextVNode as B } from "vue";
+import E from "./Dropdown/Dropdown.vue.js";
 import R from "./Icon.vue.js";
 import { $t as l } from "../utils/i18n.js";
 /* empty css           */
@@ -10,7 +10,7 @@ import "v-datepicker-lite/style.css";
 const j = { class: "flex items-center justify-start gap-2 w-full" }, H = { class: "flex flex-col sm:flex-row bg-background rounded-md" }, Q = {
   key: 0,
   class: "flex flex-col gap-1 sm:pr-3 py-2 sm:border-r border-border max-h-[280px]"
-}, O = { class: "flex flex-col sm:flex-row items-center gap-4 py-2 p-3" }, I = { class: "border border-border rounded-md overflow-hidden bg-background" }, U = { class: "flex items-center justify-center shrink-0" }, q = { class: "border border-border rounded-md overflow-hidden bg-background" }, te = /* @__PURE__ */ F({
+}, O = { class: "flex flex-col sm:flex-row items-center gap-4 py-2 p-3" }, I = { class: "border border-border rounded-md overflow-hidden bg-background" }, U = { class: "flex items-center justify-center shrink-0" }, q = { class: "border border-border rounded-md overflow-hidden bg-background" }, te = /* @__PURE__ */ $({
   __name: "DateRangePicker",
   props: {
     modelValue: {},
@@ -28,7 +28,7 @@ const j = { class: "flex items-center justify-start gap-2 w-full" }, H = { class
   emits: ["update:modelValue", "change"],
   setup(s, { emit: M }) {
     const g = s, k = M, o = b(!1), c = b(0);
-    L(o, (a) => {
+    F(o, (a) => {
       a && c.value++;
     });
     const n = u({
@@ -46,13 +46,13 @@ const j = { class: "flex items-center justify-start gap-2 w-full" }, H = { class
       n.value = { ...n.value, startDate: a };
     }, S = (a) => {
       n.value = { ...n.value, endDate: a };
-    }, _ = u(() => {
+    }, C = u(() => {
       if (n.value.endDate) {
         const a = new Date(n.value.endDate);
         if (!isNaN(a.getTime())) return a.toISOString();
       }
       return g.maxDate;
-    }), C = u(() => {
+    }), N = u(() => {
       if (n.value.startDate) {
         const a = new Date(n.value.startDate);
         if (!isNaN(a.getTime())) return a.toISOString();
@@ -66,7 +66,7 @@ const j = { class: "flex items-center justify-start gap-2 w-full" }, H = { class
       } catch {
         return "";
       }
-    }, N = u(() => [
+    }, V = u(() => [
       {
         label: l("vlite.dateRangePicker.today") !== "vlite.dateRangePicker.today" ? l("vlite.dateRangePicker.today") : "Today",
         value: "today",
@@ -112,7 +112,7 @@ const j = { class: "flex items-center justify-start gap-2 w-full" }, H = { class
         value: "last_year",
         icon: "lucide:history"
       }
-    ]), V = (a) => {
+    ]), _ = (a) => {
       const e = /* @__PURE__ */ new Date();
       let t = /* @__PURE__ */ new Date(), r = /* @__PURE__ */ new Date();
       switch (e.setHours(0, 0, 0, 0), t.setHours(0, 0, 0, 0), r.setHours(0, 0, 0, 0), a.value) {
@@ -146,7 +146,7 @@ const j = { class: "flex items-center justify-start gap-2 w-full" }, H = { class
       }
       n.value = { startDate: t, endDate: r }, c.value++, o.value = !1;
     };
-    return (a, e) => (d(), m(v($), {
+    return (a, e) => (d(), m(v(E), {
       isOpen: o.value,
       "onUpdate:isOpen": e[0] || (e[0] = (t) => o.value = t),
       position: "bottom-start",
@@ -160,36 +160,37 @@ const j = { class: "flex items-center justify-start gap-2 w-full" }, H = { class
           variant: s.variant || "outline",
           size: s.size || "md",
           disabled: s.disabled,
-          class: y(["w-full justify-between text-left font-normal", [s.triggerClass, { "ring-1 ring-ring ring-offset-[1]": t }]])
+          class: y(["w-full justify-between text-left font-normal", [s.triggerClass, { "ring-1 ring-ring ring-offset-[1]": t }]]),
+          "data-testid": a.$attrs["data-testid"] || (a.$attrs.name ? `daterange-${a.$attrs.name}` : "daterange")
         }, {
           default: D(() => [
             i("div", j, [
               i("span", {
                 class: y({ "text-muted-foreground": !n.value.startDate })
               }, x(n.value.startDate ? f(n.value.startDate) : s.placeholderStart), 3),
-              e[1] || (e[1] = E(" — ", -1)),
+              e[1] || (e[1] = B(" — ", -1)),
               i("span", {
                 class: y({ "text-muted-foreground": !n.value.endDate })
               }, x(n.value.endDate ? f(n.value.endDate) : s.placeholderEnd), 3)
             ])
           ]),
           _: 1
-        }, 8, ["variant", "size", "disabled", "class"])
+        }, 8, ["variant", "size", "disabled", "class", "data-testid"])
       ]),
       menu: D(() => [
         i("div", H, [
           s.showQuickRanges ? (d(), w("div", Q, [
             e[2] || (e[2] = i("div", { class: "text-xs pl-2 pb-2 font-semibold text-muted-foreground uppercase tracking-wider" }, " Quick Ranges ", -1)),
-            (d(!0), w(T, null, z(N.value, (t) => (d(), m(P, {
+            (d(!0), w(L, null, T(V.value, (t) => (d(), m(P, {
               key: t.value,
               text: t.label,
               icon: t.icon,
               variant: "ghost",
               size: "sm",
               class: "justify-start w-full font-normal",
-              onClick: (r) => V(t)
+              onClick: (r) => _(t)
             }, null, 8, ["text", "icon", "onClick"]))), 128))
-          ])) : B("", !0),
+          ])) : z("", !0),
           i("div", O, [
             i("div", I, [
               (d(), m(v(p), {
@@ -197,7 +198,7 @@ const j = { class: "flex items-center justify-start gap-2 w-full" }, H = { class
                 value: n.value.startDate,
                 onChange: Y,
                 mode: "date",
-                "max-date": _.value,
+                "max-date": C.value,
                 "min-date": s.minDate,
                 disabled: s.disabled,
                 class: "min-w-[270px]",
@@ -220,7 +221,7 @@ const j = { class: "flex items-center justify-start gap-2 w-full" }, H = { class
                 value: n.value.endDate,
                 onChange: S,
                 mode: "date",
-                "min-date": C.value,
+                "min-date": N.value,
                 "max-date": s.maxDate,
                 class: "min-w-[270px]",
                 disabled: s.disabled,

package/components/Dropdown/Dropdown.vue.d.ts

@@ -22,6 +22,7 @@ type __VLS_Props = {
     nestedPosition?: TooltTipPlacement;
     nestedOffset?: [number, number];
     showSelectedLabel?: boolean;
+    showSelectedIcon?: boolean;
     selectable?: boolean;
     doubleConfirmation?: boolean;
     layout?: 'default' | 'grouped';
@@ -36,12 +37,14 @@ type __VLS_Props = {
     direction?: 'ltr' | 'rtl';
     isNested?: boolean;
     disabled?: boolean;
+    readonly?: boolean;
 };
 declare function __VLS_template(): {
     attrs: Partial<{}>;
     slots: {
         trigger?(_: {
             selectedLabel: string;
+            selectedIcon: string;
             isOpen: boolean;
         }): any;
         default?(_: {}): any;
@@ -85,6 +88,7 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}
 }>, {
     columns: number | string;
     loading: boolean;
+    readonly: boolean;
     disabled: boolean;
     direction: "ltr" | "rtl";
     selectable: boolean;
@@ -104,6 +108,7 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}
     isOpen: boolean;
     teleport: boolean;
     showSelectedLabel: boolean;
+    showSelectedIcon: boolean;
     doubleConfirmation: boolean;
     isNested: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;