vlite3 0.4.8 → 0.5.2

package/types/config.type.d.ts

@@ -1,3 +1,4 @@
+import { InputVariant, InputSize, InputRounded } from './form.type';
 /**
  * Interface for the file upload handler function.
  * This allows users to replace the default upload logic with their own API.
@@ -26,6 +27,16 @@ export interface VLiteServices {
      * Used by components to support i18n.
      */
     t?: TranslationHandler;
+    /**
+     * Global import API handler.
+     * Used by the generic Screen component for the `ImportData` process.
+     */
+    importApi?: (entity: string, payload: any) => Promise<any>;
+    /**
+     * Global export API handler.
+     * Used by the generic Screen component for the `ExportData` process in backend mode.
+     */
+    exportApi?: (entity: string, payload: any) => Promise<any>;
 }
 /**
  * Main configuration object for the VLite plugin.
@@ -35,4 +46,28 @@ export interface VLiteConfig {
      * Service registry for dependency injection.
      */
     services?: VLiteServices;
+    /**
+     * ImportData specific configs.
+     */
+    importData?: {
+        batchMode?: boolean;
+        batchSize?: number;
+    };
+    /**
+     * ExportData specific configs.
+     */
+    exportData?: {
+        mode?: 'frontend' | 'backend';
+    };
+    /**
+     * Global UI Components configuration
+     */
+    components?: {
+        form?: {
+            variant?: InputVariant;
+            size?: InputSize;
+            rounded?: InputRounded;
+            showRequiredAsterisk?: boolean;
+        };
+    };
 }

package/types/form.type.d.ts

@@ -1,5 +1,5 @@
 export type InputType = 'text' | 'password' | 'email' | 'number' | 'date' | 'tel' | 'url' | 'search' | 'textarea';
-export type InputVariant = 'solid' | 'outline' | 'outline-b' | 'transparent';
+export type InputVariant = 'solid' | 'outline' | 'outline-b' | 'transparent' | 'floating';
 export type InputSize = 'sm' | 'md' | 'lg';
 export type InputRounded = 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full' | string;
 export type LabelPosition = 'top' | 'left' | 'right';
@@ -14,7 +14,9 @@ export interface InputProps {
     loading?: boolean;
     error?: string;
     icon?: string;
+    iconClass?: string;
     iconRight?: string;
+    iconRightClass?: string;
     showClearButton?: boolean;
     autofocus?: boolean;
     class?: string;

package/types/index.d.ts

@@ -5,6 +5,7 @@ export * from './avatar.type';
 export * from './sidepanel.type';
 export * from './alert.type';
 export * from './timeline.type';
-export * from './navbar.type';
 export * from './styles.ts';
 export * from './config.type';
+export * from './list.type';
+export * from './progressbar.ts';

package/types/list.type.d.ts

@@ -0,0 +1,57 @@
+export type ListVariant = 'default' | 'striped' | 'card' | 'minimal' | 'compact' | 'bordered-rows';
+export type ListColumns = 1 | 2 | 3;
+export type ListFieldType = 'text' | 'date' | 'dateTime' | 'time' | 'price' | 'image' | 'badge' | 'boolean' | 'number' | 'html';
+export interface ListField {
+    /** Unique key to resolve value from data (dot-notation supported, e.g. 'location.city') */
+    key: string;
+    /** Display label */
+    title?: string;
+    /** i18n key for the label */
+    titleI18n?: string;
+    /** Iconify icon shown beside label */
+    icon?: string;
+    /** Force item to span full-width row */
+    lineByLine?: boolean;
+    /** Only render when value is truthy */
+    whenTrue?: boolean;
+    /** Conditional render: receives resolved value and full data, returns boolean */
+    when?: (value: any, data: any) => boolean;
+    /** Custom formatter — receives (value, data), returns a string or HTML string */
+    format?: (value: any, data: any) => string;
+    /** Mask value and show eye-toggle button */
+    isSensitive?: boolean;
+    /** Apply semantic status color to the value */
+    addStatusColor?: boolean;
+    /** A built-in type for automatic rendering */
+    type?: ListFieldType;
+    /** Static class or dynamic class function for the value cell */
+    class?: string | ((value: any, data: any) => string);
+    /** Render a Vue component instead of a value; receives { data, value } props */
+    component?: any;
+    /** Fallback text when value is empty/null */
+    emptyText?: string;
+}
+export interface ListProps {
+    /** Array of field definitions (schema) */
+    fields: ListField[];
+    /** The data record to display */
+    data: Record<string, any>;
+    /** Optional section title */
+    title?: string;
+    /** i18n key for the title */
+    titleI18n?: string;
+    /** Iconify icon shown beside the section title */
+    titleIcon?: string;
+    /** Number of columns for field layout */
+    columns?: ListColumns;
+    /** Visual variant */
+    variant?: ListVariant;
+    /** Extra class on root element */
+    class?: string;
+    /** Show label colon */
+    showColon?: boolean;
+    /** Loading skeleton state */
+    loading?: boolean;
+    /** Number of skeleton rows while loading */
+    skeletonRows?: number;
+}

package/types/navbar.type.d.ts

@@ -11,6 +11,17 @@ export interface NavbarItemProps {
     onClick?: (e: MouseEvent) => void;
     class?: string;
 }
+export interface NavbarTabItem {
+    label: string;
+    labelI18n?: string;
+    value?: string | number;
+    icon?: string;
+    iconRight?: string;
+    disabled?: boolean;
+    to?: any;
+    href?: string;
+    exact?: boolean;
+}
 export interface NavbarProps {
     variant?: NavbarVariant;
     position?: NavbarPosition;
@@ -20,8 +31,8 @@ export interface NavbarProps {
     floating?: boolean;
     class?: string;
     height?: string;
-    width?: string;
     compact?: boolean;
+    renderNestedTabs?: boolean;
     logo?: string;
     logoAlt?: string;
     mobileBreakpoint?: 'sm' | 'md' | 'lg' | 'xl';
@@ -31,4 +42,30 @@ export interface NavbarProps {
     rightClass?: string;
     mobileTriggerClass?: string;
     mobileMenuVariant?: 'sidepanel' | 'dropdown';
+    /**
+     * When true (Layout Mode only), renders a bars toggle button before the logo
+     * in the #header slot area on large screens. Allows users to show/hide the
+     * sidebar. Preference is persisted in localStorage.
+     * Mobile breakpoint behavior is completely unaffected.
+     */
+    sidebarToggle?: boolean;
+    /**
+     * When true, automatically renders a Breadcrumb inside the #main slot area
+     * based on the current route path. Works in Layout Mode.
+     */
+    breadcrumb?: boolean;
+    /** Where to render the breadcrumb: 'header' renders as a slim bar inside the header, 'main' renders above the main content (default: 'header') */
+    breadcrumbPosition?: 'header' | 'main';
+    /** Breadcrumb visual variant (default: 'default') */
+    breadcrumbVariant?: import('../components/Breadcrumb/types').BreadcrumbVariant;
+    /** Breadcrumb separator style (default: 'chevron') */
+    breadcrumbSeparator?: import('../components/Breadcrumb/types').BreadcrumbSeparator;
+    /** Breadcrumb size (default: 'sm') */
+    breadcrumbSize?: import('../components/Breadcrumb/types').BreadcrumbSize;
+    /** Override auto-generated labels by path, e.g. { '/settings': 'Preferences' } */
+    breadcrumbLabels?: Record<string, string>;
+    /** Home icon (default: 'lucide:home') */
+    breadcrumbHomeIcon?: string;
+    /** Extra CSS classes for the breadcrumb wrapper */
+    breadcrumbClass?: string;
 }

package/types/timeline.type.d.ts

@@ -1,11 +1,21 @@
+export type TimelineProgressStatus = 'completed' | 'current' | 'upcoming';
+export type TimelineDirection = 'horizontal' | 'vertical';
+export type TimelineTextPosition = 'bottom' | 'right';
+export type TimelineLineStyle = 'solid' | 'dashed';
+export type TimelineIndicatorType = 'icon' | 'number' | 'dot';
 export interface TimelineStep {
     id: string | number;
-    title: string;
+    title?: string;
     titleI18n?: string;
+    subtitle?: string;
+    subtitleI18n?: string;
     description?: string;
     descriptionI18n?: string;
+    date?: string;
     icon?: string;
-    status?: 'completed' | 'current' | 'upcoming';
+    status?: string;
+    progressStatus?: TimelineProgressStatus;
+    component?: any;
+    componentProps?: Record<string, any>;
+    [key: string]: any;
 }
-export type TimelineDirection = 'horizontal' | 'vertical';
-export type TimelineTextPosition = 'bottom' | 'right';

package/components/Timeline.vue.js

@@ -1,160 +0,0 @@
-import { defineComponent as S, computed as g, openBlock as l, createElementBlock as r, normalizeClass as a, createElementVNode as c, normalizeStyle as b, createCommentVNode as u, Fragment as z, renderList as j, createVNode as $, createBlock as v, renderSlot as C, toDisplayString as x } from "vue";
-import f from "./Icon.vue.js";
-import { $t as y } from "../utils/i18n.js";
-const I = {
-  key: 0,
-  class: "absolute top-4 left-4 right-4 h-0.5 bg-border",
-  "aria-hidden": "true"
-}, B = {
-  key: 1,
-  class: "absolute top-4 left-4 right-4 h-0.5 bg-border block sm:hidden",
-  "aria-hidden": "true"
-}, V = ["onClick"], N = {
-  class: "flex h-9 w-9 items-center justify-center shrink-0 bg-background z-10",
-  "aria-hidden": "true"
-}, D = {
-  key: 0,
-  class: "relative z-10 flex h-8 w-8 items-center justify-center rounded-full bg-primary hover:bg-primary-dark transition-colors"
-}, E = {
-  key: 1,
-  class: "relative z-10 flex h-8 w-8 items-center justify-center rounded-full border-2 border-primary bg-background"
-}, T = {
-  key: 1,
-  class: "h-2.5 w-2.5 rounded-full bg-primary"
-}, F = {
-  key: 2,
-  class: "relative z-10 flex h-8 w-8 items-center justify-center rounded-full border-2 bg-background group-hover:border-muted-foreground transition-colors"
-}, L = {
-  key: 1,
-  class: "h-2.5 w-2.5 rounded-full bg-transparent group-hover:bg-muted"
-}, M = {
-  key: 0,
-  class: "text-xs text-muted-foreground mt-1"
-}, q = {
-  key: 0,
-  class: "hidden sm:block flex-1 h-0.5 bg-border ml-2",
-  "aria-hidden": "true"
-}, K = /* @__PURE__ */ S({
-  __name: "Timeline",
-  props: {
-    steps: {},
-    activeStep: { default: 0 },
-    direction: { default: "horizontal" },
-    textPosition: { default: "bottom" },
-    clickable: { type: Boolean, default: !1 },
-    class: { default: "" }
-  },
-  emits: ["step-click"],
-  setup(t, { emit: k }) {
-    const s = t, w = k, d = (o, m) => m.status ? m.status : o < s.activeStep ? "completed" : o === s.activeStep ? "current" : "upcoming", e = g(() => s.direction === "vertical"), h = g(() => s.steps.length <= 1 ? 0 : Math.min(s.activeStep, s.steps.length - 1) / (s.steps.length - 1) * 100), p = (o) => o.titleI18n ? y(o.titleI18n) : o.title, P = (o) => o.descriptionI18n ? y(o.descriptionI18n) : o.description;
-    return (o, m) => (l(), r("nav", {
-      "aria-label": "Progress",
-      class: a(["w-full", s.class])
-    }, [
-      c("ol", {
-        role: "list",
-        class: a([
-          "relative flex",
-          e.value ? "flex-col space-y-0" : "",
-          !e.value && t.textPosition === "bottom" ? "flex-row w-full justify-between items-center" : "",
-          !e.value && t.textPosition === "right" ? "flex-row w-full" : ""
-        ])
-      }, [
-        !e.value && t.textPosition === "bottom" ? (l(), r("div", I, [
-          c("div", {
-            class: "h-full bg-primary transition-all duration-300 ease-in-out",
-            style: b({ width: `${h.value}%` })
-          }, null, 4)
-        ])) : u("", !0),
-        !e.value && t.textPosition === "right" ? (l(), r("div", B, [
-          c("div", {
-            class: "h-full bg-primary transition-all duration-300 ease-in-out",
-            style: b({ width: `${h.value}%` })
-          }, null, 4)
-        ])) : u("", !0),
-        (l(!0), r(z, null, j(t.steps, (i, n) => (l(), r("li", {
-          key: i.id,
-          onClick: (A) => t.clickable ? w("step-click", i, n) : null,
-          class: a([
-            "relative",
-            t.clickable ? "cursor-pointer" : "",
-            e.value ? "w-full pb-10 last:pb-0" : "",
-            !e.value && t.textPosition === "bottom" ? "flex-none w-8" : "",
-            !e.value && t.textPosition === "right" ? "flex-1 last:flex-none" : ""
-          ])
-        }, [
-          e.value && n !== t.steps.length - 1 ? (l(), r("div", {
-            key: 0,
-            class: a(["hidden sm:block absolute top-4 left-4 -ml-px h-full w-0.5 bg-border", { "bg-primary": n < t.activeStep }]),
-            "aria-hidden": "true"
-          }, null, 2)) : u("", !0),
-          c("div", {
-            class: a([
-              "group relative flex",
-              e.value ? "flex-col items-center text-center sm:flex-row sm:items-start sm:text-left" : "",
-              !e.value && t.textPosition === "bottom" ? "flex-col items-center justify-center" : "",
-              !e.value && t.textPosition === "right" ? "flex-col items-center sm:flex-row sm:items-center sm:gap-2 w-full" : ""
-            ])
-          }, [
-            c("span", N, [
-              d(n, i) === "completed" ? (l(), r("span", D, [
-                $(f, {
-                  icon: "lucide:check",
-                  class: "h-5 w-5 text-primary-foreground"
-                })
-              ])) : d(n, i) === "current" ? (l(), r("span", E, [
-                i.icon ? (l(), v(f, {
-                  key: 0,
-                  icon: i.icon,
-                  class: "h-4 w-4 text-primary"
-                }, null, 8, ["icon"])) : (l(), r("span", T))
-              ])) : (l(), r("span", F, [
-                i.icon ? (l(), v(f, {
-                  key: 0,
-                  icon: i.icon,
-                  class: "h-4 w-4 text-muted-foreground"
-                }, null, 8, ["icon"])) : (l(), r("span", L))
-              ]))
-            ]),
-            c("span", {
-              class: a([
-                "min-w-[max-content] flex-col",
-                "hidden sm:flex",
-                e.value ? "sm:ml-4 sm:pt-1.5" : "",
-                !e.value && t.textPosition === "bottom" ? "absolute top-10 text-center" : "",
-                !e.value && t.textPosition === "bottom" && n === 0 ? "left-0 text-left items-start" : "",
-                !e.value && t.textPosition === "bottom" && n === t.steps.length - 1 ? "right-0 text-right items-end" : "",
-                !e.value && t.textPosition === "bottom" && n > 0 && n < t.steps.length - 1 ? "left-1/2 -translate-x-1/2 items-center" : "",
-                (!e.value && t.textPosition === "right", "")
-              ])
-            }, [
-              C(o.$slots, "content", {
-                step: i,
-                index: n
-              }, () => [
-                c("span", {
-                  class: a([
-                    "text-sm font-medium leading-tight",
-                    d(n, i) === "upcoming" ? "text-muted-foreground" : "text-primary"
-                  ])
-                }, x(p(i)), 3),
-                i.description || i.descriptionI18n ? (l(), r("span", M, x(P(i)), 1)) : u("", !0)
-              ])
-            ], 2),
-            !e.value && t.textPosition === "right" && n !== t.steps.length - 1 ? (l(), r("div", q, [
-              c("div", {
-                class: a([
-                  "h-full bg-primary transition-all duration-300",
-                  n < t.activeStep ? "w-full" : "w-0"
-                ])
-              }, null, 2)
-            ])) : u("", !0)
-          ], 2)
-        ], 10, V))), 128))
-      ], 2)
-    ], 2));
-  }
-});
-export {
-  K as default
-};