vlite3 1.0.4 → 1.0.6

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

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

package/components/Screen/types.d.ts

@@ -33,6 +33,31 @@ export interface ScreenQuickFilter {
     /** Optional badge/count displayed next to the label */
     count?: number;
 }
+/**
+ * A named view definition for dynamic multi-view support.
+ * Pass an array of these via the `views` prop to render any number of views
+ * (table, list, kanban, calendar, etc.) with automatic toggle buttons.
+ *
+ * @example
+ * :views="[
+ * { key: 'table',    component: UserTable,    icon: 'lucide:list',         label: 'Table' },
+ * { key: 'list',     component: UserList,     icon: 'lucide:layout-grid',  label: 'Grid' },
+ * { key: 'kanban',   component: UserKanban,   icon: 'lucide:kanban',       label: 'Kanban' },
+ * { key: 'calendar', component: UserCalendar, icon: 'lucide:calendar',     label: 'Calendar' },
+ * ]"
+ */
+export interface ScreenView {
+    /** Unique key used to identify and persist this view */
+    key: string;
+    /** The Vue component to render for this view */
+    component: Component | any;
+    /** Icon string (e.g. lucide icon name) shown in the view toggle button */
+    icon?: string;
+    /** Tooltip / aria-label for the toggle button */
+    label?: string;
+    /** i18n key for the label */
+    labelI18n?: string;
+}
 export interface ScreenProps {
     name?: string;
     title?: string;
@@ -73,8 +98,31 @@ export interface ScreenProps {
     exportMode?: 'frontend' | 'backend';
     importType?: string;
     exportType?: string;
+    /**
+     * Legacy: single list component (list/grid view).
+     * Prefer `views` prop for multi-view support.
+     */
     list?: Component | any;
+    /**
+     * Legacy: single table component.
+     * Prefer `views` prop for multi-view support.
+     */
     table?: Component | any;
+    /**
+     * Dynamic multi-view definitions. When provided, replaces the legacy
+     * `table` / `list` props and renders a toggle button for each view.
+     * Supports any number of views: table, list, kanban, calendar, etc.
+     *
+     * The first entry becomes the default active view (unless persisted state exists).
+     *
+     * @example
+     * :views="[
+     * { key: 'table',    component: UserTable,    icon: 'lucide:list',        label: 'Table' },
+     * { key: 'kanban',   component: UserKanban,   icon: 'lucide:kanban',      label: 'Kanban' },
+     * { key: 'calendar', component: UserCalendar, icon: 'lucide:calendar',    label: 'Calendar' },
+     * ]"
+     */
+    views?: ScreenView[];
     customHeader?: boolean;
     canSearch?: boolean;
     canAdd?: boolean;
@@ -92,15 +140,13 @@ export interface ScreenProps {
     /**
      * 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[];
+    /**
+     * Optional array of view keys (e.g., ['table', 'list']) where quick filters should be visible.
+     * If omitted, quick filters are shown on all views.
+     */
+    quickFilterViews?: string[];
     /**
      * The key used to inject the active quick filter into the refetch filter payload.
      * Defaults to 'status'.
@@ -111,4 +157,10 @@ export interface ScreenProps {
      */
     defaultQuickFilter?: string | number;
     quickFilterVariant?: TabesVariant;
+    /**
+     * Array of view keys that should bypass the default empty state
+     * and always render their component even when there is no data.
+     * Useful for kanban boards or calendars where empty columns/grids are needed.
+     */
+    skipEmptyViews?: string[];
 }

package/components/Stats/Stats.vue.d.ts

@@ -2,6 +2,7 @@ import { StatsProps } from './types';
 declare const _default: import('vue').DefineComponent<StatsProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<StatsProps> & Readonly<{}>, {
     class: string;
     variant: import('./types').StatsVariant;
+    loading: boolean;
     columns: number | string;
     layout: import('./types').StatsLayout;
     attached: boolean;