vlite3 0.8.11 → 0.9.2

package/components/Screen/components/ScreenHeaderTitle.vue.js

@@ -0,0 +1,57 @@
+import { defineComponent as p, computed as c, openBlock as n, createElementBlock as o, renderSlot as a, createElementVNode as u, normalizeClass as d, toDisplayString as m, createBlock as x, withCtx as h, createVNode as I, createCommentVNode as i } from "vue";
+import C from "../../Icon.vue.js";
+import g from "../../Tooltip.vue.js";
+import { $t as f } from "../../../utils/i18n.js";
+const k = { class: "flex flex-col shrink-0" }, v = {
+  key: 0,
+  class: "flex items-center! gap-2"
+}, S = /* @__PURE__ */ p({
+  __name: "ScreenHeaderTitle",
+  props: {
+    title: {},
+    titleI18n: {},
+    description: {},
+    descriptionI18n: {},
+    info: {},
+    infoI18n: {},
+    titleClass: {},
+    descriptionClass: {}
+  },
+  setup(t) {
+    const e = t, s = c(() => e.titleI18n ? f(e.titleI18n) : e.title), r = c(
+      () => e.descriptionI18n ? f(e.descriptionI18n) : e.description
+    );
+    return (l, y) => (n(), o("div", k, [
+      a(l.$slots, "title", {}, () => [
+        s.value ? (n(), o("div", v, [
+          u("h1", {
+            class: d(["text-fs-7.5 font-bold text-foreground", t.titleClass])
+          }, m(s.value), 3),
+          t.info || t.infoI18n ? (n(), x(g, {
+            key: 0,
+            content: t.info,
+            "content-i18n": t.infoI18n,
+            placement: "right"
+          }, {
+            default: h(() => [
+              I(C, {
+                icon: "lucide:info",
+                class: "w-[18px] h-[18px] mt-3! text-muted-foreground hover:text-foreground cursor-pointer transition-colors outline-none"
+              })
+            ]),
+            _: 1
+          }, 8, ["content", "content-i18n"])) : i("", !0)
+        ])) : i("", !0)
+      ]),
+      a(l.$slots, "description", {}, () => [
+        r.value ? (n(), o("p", {
+          key: 0,
+          class: d(["text-sm text-gray-700 mt-1 md:max-w-[450px]", t.descriptionClass])
+        }, m(r.value), 3)) : i("", !0)
+      ])
+    ]));
+  }
+});
+export {
+  S as default
+};

package/components/Screen/components/ScreenHeaderTitle.vue2.js

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

package/components/Screen/components/ScreenOptionsDropdown.vue.d.ts

@@ -0,0 +1,10 @@
+type __VLS_Props = {
+    exportProps?: Record<string, any> | boolean;
+    importProps?: Record<string, any> | boolean;
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    select: (payload: any) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSelect?: (payload: any) => any;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
+export default _default;

package/components/Screen/components/ScreenOptionsDropdown.vue.js

@@ -0,0 +1,43 @@
+import { defineComponent as d, computed as o, openBlock as f, createBlock as v, withCtx as x, createVNode as O, unref as p } from "vue";
+import D from "../../Button.vue.js";
+import _ from "../../Dropdown/Dropdown.vue.js";
+import { $t as e } from "../../../utils/i18n.js";
+const S = /* @__PURE__ */ d({
+  __name: "ScreenOptionsDropdown",
+  props: {
+    exportProps: { type: [Object, Boolean] },
+    importProps: { type: [Object, Boolean] }
+  },
+  emits: ["select"],
+  setup(i, { emit: s }) {
+    const r = i, a = s, l = o(() => {
+      const t = e("vlite.screen.exportData");
+      return t !== "vlite.screen.exportData" ? t : "Export Data";
+    }), c = o(() => {
+      const t = e("vlite.screen.importData");
+      return t !== "vlite.screen.importData" ? t : "Import Data";
+    }), m = o(() => {
+      const t = [];
+      return r.exportProps !== !1 && t.push({ value: "export", label: l.value, icon: "lucide:download" }), r.importProps !== !1 && t.push({ value: "import", label: c.value, icon: "lucide:upload" }), t;
+    });
+    return (t, n) => (f(), v(_, {
+      closeOnSelect: "",
+      position: "bottom-end",
+      options: m.value,
+      onOnSelect: n[0] || (n[0] = (u) => a("select", u))
+    }, {
+      trigger: x(() => [
+        O(D, {
+          variant: "outline",
+          icon: "lucide:more-vertical",
+          class: "px-2!",
+          title: p(e)("vlite.screen.moreOptions") !== "vlite.screen.moreOptions" ? p(e)("vlite.screen.moreOptions") : "More Options"
+        }, null, 8, ["title"])
+      ]),
+      _: 1
+    }, 8, ["options"]));
+  }
+});
+export {
+  S as default
+};

package/components/Screen/components/ScreenOptionsDropdown.vue2.js

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

package/components/Screen/components/ScreenQuickFilters.vue.d.ts

@@ -0,0 +1,15 @@
+import { ScreenQuickFilter } from '../types';
+import { TabesVariant } from '../../Tabes/types';
+type __VLS_Props = {
+    modelValue: string | number;
+    options: ScreenQuickFilter[];
+    variant?: TabesVariant;
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    change: (val: string | number) => any;
+    "update:modelValue": (val: string | number) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onChange?: (val: string | number) => any;
+    "onUpdate:modelValue"?: (val: string | number) => any;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+export default _default;

package/components/Screen/components/ScreenQuickFilters.vue.js

@@ -0,0 +1,36 @@
+import { defineComponent as i, computed as s, openBlock as r, createElementBlock as u, createVNode as m, unref as d } from "vue";
+import b from "../../Tabes/Tabes.vue.js";
+const p = { class: "w-max" }, V = /* @__PURE__ */ i({
+  __name: "ScreenQuickFilters",
+  props: {
+    modelValue: {},
+    options: {},
+    variant: {}
+  },
+  emits: ["update:modelValue", "change"],
+  setup(a, { emit: o }) {
+    const l = a, n = o, t = s(
+      () => l.options.map((e) => ({
+        value: e.value,
+        icon: e.icon,
+        labelI18n: e.labelI18n,
+        // Append count badge inline in the label string when provided
+        label: e.count !== void 0 ? `${e.label} (${e.count})` : e.label
+      }))
+    ), c = (e) => {
+      n("update:modelValue", e), n("change", e);
+    };
+    return (e, v) => (r(), u("div", p, [
+      m(d(b), {
+        class: "border-b-0! border-0! pb-0",
+        "model-value": a.modelValue,
+        options: t.value,
+        variant: a.variant || "line",
+        onChange: c
+      }, null, 8, ["model-value", "options", "variant"])
+    ]));
+  }
+});
+export {
+  V as default
+};

package/components/Screen/components/ScreenQuickFilters.vue2.js

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

package/components/Screen/components/ScreenViewToggle.vue.d.ts

@@ -0,0 +1,9 @@
+type __VLS_Props = {
+    modelValue: 'table' | 'list';
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    "update:modelValue": (val: "table" | "list") => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: (val: "table" | "list") => any;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+export default _default;

package/components/Screen/components/ScreenViewToggle.vue.js

@@ -0,0 +1,48 @@
+import { defineComponent as b, computed as l, openBlock as f, createElementBlock as p, createElementVNode as n, normalizeClass as s, createVNode as d } from "vue";
+import i from "../../Icon.vue.js";
+import { $t as a } from "../../../utils/i18n.js";
+const g = { class: "flex items-center p-1 rounded-md border border-border shrink-0" }, w = ["title"], v = ["title"], k = /* @__PURE__ */ b({
+  __name: "ScreenViewToggle",
+  props: {
+    modelValue: {}
+  },
+  emits: ["update:modelValue"],
+  setup(o, { emit: u }) {
+    const r = u, c = l(() => {
+      const e = a("vlite.screen.listView");
+      return e !== "vlite.screen.listView" ? e : "List View";
+    }), m = l(() => {
+      const e = a("vlite.screen.tableView");
+      return e !== "vlite.screen.tableView" ? e : "Table View";
+    });
+    return (e, t) => (f(), p("div", g, [
+      n("button", {
+        onClick: t[0] || (t[0] = (V) => r("update:modelValue", "table")),
+        class: s(["p-1.5 rounded", [
+          o.modelValue === "table" ? "bg-secondary/85 dark:bg-secondary shadow-sm text-foreground" : "text-muted-foreground hover:text-foreground"
+        ]]),
+        title: m.value
+      }, [
+        d(i, {
+          icon: "lucide:list",
+          class: "w-4 h-4"
+        })
+      ], 10, w),
+      n("button", {
+        onClick: t[1] || (t[1] = (V) => r("update:modelValue", "list")),
+        class: s(["p-1.5 rounded", [
+          o.modelValue === "list" ? "bg-secondary/85 dark:bg-secondary shadow-sm text-foreground" : "text-muted-foreground hover:text-foreground"
+        ]]),
+        title: c.value
+      }, [
+        d(i, {
+          icon: "lucide:layout-grid",
+          class: "w-4 h-4"
+        })
+      ], 10, v)
+    ]));
+  }
+});
+export {
+  k as default
+};

package/components/Screen/components/ScreenViewToggle.vue2.js

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

package/components/Screen/index.d.ts

@@ -1,3 +1,4 @@
 export { default as Screen } from './Screen.vue';
 export { default as ScreenFilter } from './ScreenFilter.vue';
+export { default as ScreenQuickFilters } from './components/ScreenQuickFilters.vue';
 export * from './types';

package/components/Screen/types.d.ts

@@ -4,6 +4,7 @@ import { ButtonVariant } from '../../types';
 import { IForm } from '../Form';
 import { ExportField } from '../ExportData/types';
 import { ImportField } from '../ImportData/types';
+import { TabesVariant } from '../Tabes';
 export interface ScreenPaginationProps extends Omit<PaginationProps, 'currentPage' | 'totalPages'> {
 }
 export interface AddBtnConfig {
@@ -19,6 +20,19 @@ export interface AddBtnConfig {
     modalProps?: Record<string, any>;
     buttonProps?: Record<string, any>;
 }
+/**
+ * A single quick-filter tab option.
+ * `value` is what gets emitted in the refetch payload.
+ * Use `value: ''` (or `value: 'all'`) for the "All" tab — it resets the quick filter.
+ */
+export interface ScreenQuickFilter {
+    label: string;
+    labelI18n?: string;
+    value: string | number;
+    icon?: string;
+    /** Optional badge/count displayed next to the label */
+    count?: number;
+}
 export interface ScreenProps {
     name?: string;
     title?: string;
@@ -31,7 +45,7 @@ export interface ScreenProps {
     data?: any[];
     loading?: boolean;
     /**
-     * Called on every search, filter, pagination, or sort change.
+     * Called on every search, filter, pagination, sort, or quick-filter change.
      * Standard payload shape: { pagination, search, sort, filter }
      */
     refetch?: (payload: {
@@ -70,6 +84,31 @@ export interface ScreenProps {
     showRefresh?: boolean;
     containerClass?: string;
     headerClass?: string;
+    titleClass?: string;
+    descriptionClass?: string;
     viewProps?: Record<string, any>;
-    canSelectRows?: boolean;
+    hideSelectable?: boolean;
+    hideDeleteBtn?: boolean;
+    /**
+     * Quick-filter tabs rendered below the header (above the content).
+     * Inspired by modern dashboards (Shopify, Linear, Vercel).
+     * Example:
+     * [
+     * { label: 'All',       value: '' },
+     * { label: 'Active',    value: 'active' },
+     * { label: 'Draft',     value: 'draft' },
+     * { label: 'Archived',  value: 'archived' },
+     * ]
+     */
+    quickFilters?: ScreenQuickFilter[];
+    /**
+     * The key used to inject the active quick filter into the refetch filter payload.
+     * Defaults to 'status'.
+     */
+    quickFilterKey?: string;
+    /**
+     * Default selected quick-filter value. Defaults to the first tab's value.
+     */
+    defaultQuickFilter?: string | number;
+    quickFilterVariant?: TabesVariant;
 }

package/components/SidePanel.vue.js

@@ -1,7 +1,7 @@
 import o from "./SidePanel.vue2.js";
 /* empty css               */
 import t from "../_virtual/_plugin-vue_export-helper.js";
-const a = /* @__PURE__ */ t(o, [["__scopeId", "data-v-d572f4ef"]]);
+const a = /* @__PURE__ */ t(o, [["__scopeId", "data-v-ff2923de"]]);
 export {
   a as default
 };

package/components/SidePanel.vue2.js

@@ -32,7 +32,7 @@ const J = { class: "text-lg font-bold text-foreground" }, Q = {
   setup(o, { emit: z }) {
     const t = o, p = z, s = V(t.show);
     let d = null;
-    const n = j("dropdown-context", null), C = u(() => t.body ? K(t.body) : void 0);
+    const n = j("dropdown-context", null), b = u(() => t.body ? K(t.body) : void 0);
     h(
       () => t.show,
       (e) => {
@@ -61,7 +61,7 @@ const J = { class: "text-lg font-bold text-foreground" }, Q = {
       lg: "max-w-lg",
       xl: "max-w-xl",
       full: "max-w-full"
-    }, E = u(() => t.position === "left" ? "left-0" : "right-0"), N = u(() => t.position === "left" ? "slide-left" : "slide-right"), g = u(() => t.titleI18n ? T(t.titleI18n) : t.title), b = u(
+    }, E = u(() => t.position === "left" ? "left-0" : "right-0"), N = u(() => t.position === "left" ? "slide-left" : "slide-right"), C = u(() => t.titleI18n ? T(t.titleI18n) : t.title), g = u(
       () => t.descriptionI18n ? T(t.descriptionI18n) : t.description
     );
     return (e, m) => (l(), r(L, null, [
@@ -101,14 +101,14 @@ const J = { class: "text-lg font-bold text-foreground" }, Q = {
               key: 0,
               class: c(["sidepanel-body fixed inset-y-0 z-50 flex flex-col bg-body shadow-sm border transition-transform duration-300 ease-in-out w-full", [S[o.size], E.value, t.class]])
             }, [
-              g.value || e.$slots.header ? (l(), r("div", {
+              C.value || e.$slots.header ? (l(), r("div", {
                 key: 0,
                 class: c([o.headerClass, "flex-none flex items-center justify-between px-6 py-2 border-b border-border"])
               }, [
                 f(e.$slots, "header", {}, () => [
                   y("div", null, [
-                    y("h3", J, B(g.value), 1),
-                    b.value ? (l(), r("p", Q, B(b.value), 1)) : a("", !0)
+                    y("h3", J, B(C.value), 1),
+                    g.value ? (l(), r("p", Q, B(g.value), 1)) : a("", !0)
                   ])
                 ], !0),
                 o.hideCloseButton ? a("", !0) : (l(), v(G, {
@@ -122,9 +122,9 @@ const J = { class: "text-lg font-bold text-foreground" }, Q = {
                 }))
               ], 2)) : a("", !0),
               y("div", {
-                class: c(["flex-1 overflow-y-auto px-6 py-4", o.bodyClass])
+                class: c(["flex-1 overflow-y-auto px-6 py-4 scrollbar-thin scrollbar-stable", o.bodyClass])
               }, [
-                C.value ? (l(), v(q(C.value), w({ key: 0 }, { ...o.bodyProps, ...e.$attrs }, { close: i }), null, 16)) : f(e.$slots, "default", {
+                b.value ? (l(), v(q(b.value), w({ key: 0 }, { ...o.bodyProps, ...e.$attrs }, { close: i }), null, 16)) : f(e.$slots, "default", {
                   key: 1,
                   close: i
                 }, void 0, !0)

package/components/SidebarMenu/SidebarMenu.vue.js

@@ -26,7 +26,7 @@ const U = /* @__PURE__ */ P({
     menuOffset: { default: () => [0, 10] },
     orientation: { default: "vertical" },
     mobileBreakpoint: { default: "none" },
-    showTooltip: { type: Boolean, default: !0 },
+    showTooltip: { type: Boolean, default: !1 },
     forceTreeView: { type: Boolean, default: !1 }
   },
   setup(m) {