vlite3 0.4.8 → 0.5.2

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

@@ -4,11 +4,11 @@ type __VLS_Props = {
     type?: 'modal' | 'dropdown';
 };
 declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
-    "update:modelValue": (val: Record<string, any>) => any;
     change: (val: Record<string, any>) => any;
+    "update:modelValue": (val: Record<string, any>) => any;
 }, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
-    "onUpdate:modelValue"?: (val: Record<string, any>) => any;
     onChange?: (val: Record<string, any>) => any;
+    "onUpdate:modelValue"?: (val: Record<string, any>) => any;
 }>, {
     type: "modal" | "dropdown";
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;

package/components/Screen/ScreenFilter.vue.js

@@ -1,7 +1,7 @@
-import { defineComponent as $, ref as S, computed as p, openBlock as o, createBlock as a, withCtx as r, createElementVNode as l, createVNode as n, unref as w, toDisplayString as v, withModifiers as F } from "vue";
+import { defineComponent as $, ref as M, computed as p, openBlock as o, createBlock as a, withCtx as r, createElementVNode as l, createVNode as n, unref as w, toDisplayString as v, withModifiers as F } from "vue";
 import f from "../Button.vue.js";
-import j from "../Modal.vue.js";
-import z from "../Dropdown/Dropdown.vue.js";
+import S from "../Modal.vue.js";
+import j from "../Dropdown/Dropdown.vue.js";
 import h from "../Icon.vue.js";
 import { $t as x } from "../../utils/i18n.js";
 import C from "../Form/Form.vue.js";
@@ -16,7 +16,7 @@ import "iconify-icon-picker/style.css";
 /* empty css                        */
 /* empty css                      */
 import "../../core/config.js";
-const B = { class: "" }, M = { class: "py-3 px-3.5 w-[300px] sm:w-[320px] max-h-[85vh] overflow-y-auto bg-card rounded-md border border-border shadow-lg text-left" }, X = /* @__PURE__ */ $({
+const z = { class: "" }, B = { class: "py-3 px-3.5 w-[300px] sm:w-[320px] max-h-[85vh] overflow-y-auto bg-card rounded-md border border-border shadow-lg text-left" }, X = /* @__PURE__ */ $({
   __name: "ScreenFilter",
   props: {
     schema: {},
@@ -25,7 +25,7 @@ const B = { class: "" }, M = { class: "py-3 px-3.5 w-[300px] sm:w-[320px] max-h-
   },
   emits: ["update:modelValue", "change"],
   setup(i, { emit: O }) {
-    const u = i, m = O, s = S(!1), d = p(() => u.modelValue ? Object.keys(u.modelValue).filter(
+    const u = i, m = O, s = M(!1), d = p(() => u.modelValue ? Object.keys(u.modelValue).filter(
       (e) => u.modelValue[e] !== "" && u.modelValue[e] !== null && u.modelValue[e] !== void 0
     ).length : 0), k = (e) => {
       m("update:modelValue", e.values), m("change", e.values), s.value = !1;
@@ -41,7 +41,7 @@ const B = { class: "" }, M = { class: "py-3 px-3.5 w-[300px] sm:w-[320px] max-h-
       const e = x("vlite.screen.filter");
       return e !== "vlite.screen.filter" ? e : "Filter";
     });
-    return (e, t) => i.type === "modal" ? (o(), a(j, {
+    return (e, t) => i.type === "modal" ? (o(), a(S, {
       key: 0,
       title: g.value,
       show: s.value,
@@ -104,7 +104,7 @@ const B = { class: "" }, M = { class: "py-3 px-3.5 w-[300px] sm:w-[320px] max-h-
         }, 8, ["title"]))
       ]),
       default: r(() => [
-        l("div", B, [
+        l("div", z, [
           n(w(C), {
             schema: i.schema,
             values: i.modelValue,
@@ -114,7 +114,7 @@ const B = { class: "" }, M = { class: "py-3 px-3.5 w-[300px] sm:w-[320px] max-h-
         ])
       ]),
       _: 1
-    }, 8, ["title", "show"])) : (o(), a(w(z), {
+    }, 8, ["title", "show"])) : (o(), a(w(j), {
       key: 1,
       isOpen: s.value,
       "onUpdate:isOpen": t[3] || (t[3] = (c) => s.value = c),
@@ -156,7 +156,7 @@ const B = { class: "" }, M = { class: "py-3 px-3.5 w-[300px] sm:w-[320px] max-h-
         }, null, 8, ["title"]))
       ]),
       default: r(() => [
-        l("div", M, [
+        l("div", B, [
           n(w(C), {
             schema: i.schema,
             values: i.modelValue,

package/components/Screen/types.d.ts

@@ -2,6 +2,8 @@ import { Component } from 'vue';
 import { PageInfo, PaginationProps } from '../Pagination';
 import { ButtonVariant } from '../../types';
 import { IForm } from '../Form';
+import { ExportField } from '../ExportData/types';
+import { ImportField } from '../ImportData/types';
 export interface ScreenPaginationProps extends Omit<PaginationProps, 'currentPage' | 'totalPages'> {
 }
 export interface AddBtnConfig {
@@ -23,6 +25,8 @@ export interface ScreenProps {
     titleI18n?: string;
     description?: string;
     descriptionI18n?: string;
+    info?: string;
+    infoI18n?: string;
     pageInfo?: PageInfo;
     data?: any[];
     loading?: boolean;
@@ -46,6 +50,14 @@ export interface ScreenProps {
     emptyIcon?: string;
     addComponent?: Component | any;
     addBtn?: AddBtnConfig;
+    /** Generic properties for Export and Import capabilities */
+    exportSchema?: ExportField[] | any[];
+    importSchema?: ImportField[] | any[];
+    exportProps?: Record<string, any> | boolean;
+    importProps?: Record<string, any> | boolean;
+    exportMode?: 'frontend' | 'backend';
+    importType?: string;
+    exportType?: string;
     list?: Component | any;
     table?: Component | any;
     customHeader?: boolean;

package/components/SidePanel.vue.d.ts

@@ -50,14 +50,14 @@ declare const __VLS_component: import('vue').DefineComponent<Props, {}, {}, {},
     onOnAfterOpen?: () => any;
     onOnAfterClose?: () => any;
 }>, {
-    class: string;
     size: SidePanelSize;
-    triggerClass: string;
+    class: string;
     headerClass: string;
     position: SidePanelPosition;
     show: boolean;
     closeOutside: boolean;
     backdrop: boolean;
+    triggerClass: string;
     bodyClass: string;
     footerClass: string;
     hideCloseButton: boolean;

package/components/SidebarMenu/SidebarMenu.vue.d.ts

@@ -1,11 +1,24 @@
 import { SidebarMenuProps, SidebarMenuItemSchema } from './types';
 declare const _default: import('vue').DefineComponent<SidebarMenuProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<SidebarMenuProps> & Readonly<{}>, {
     variant: "default" | "ghost";
+    compact: boolean;
     items: SidebarMenuItemSchema[];
+    iconSize: string;
+    mobileBreakpoint: "sm" | "md" | "lg" | "xl" | "none";
+    orientation: "vertical" | "horizontal";
     allowMultiple: boolean;
-    compact: boolean;
+    menuOffset: [number, number];
     indentSize: number;
     defaultExpanded: string[];
     showCompactLabels: boolean;
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLElement>;
+    renderMode: "tree" | "popover";
+    compactIconSize: string;
+    labelClass: string;
+    compactLabelClass: string;
+    itemPadding: string;
+    compactItemPadding: string;
+    nestedMenuWidth: string;
+    nestedMenuMaxHeight: string;
+    showTooltip: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLElement>;
 export default _default;

package/components/SidebarMenu/SidebarMenu.vue.js

@@ -1,12 +1,9 @@
-import { defineComponent as y, ref as v, watch as h, reactive as E, computed as r, provide as _, openBlock as f, createElementBlock as x, Fragment as w, renderList as M, createBlock as B } from "vue";
-import { useRoute as S } from "vue-router";
-import k from "./SidebarMenuItem.vue.js";
+import { defineComponent as S, inject as I, ref as w, computed as n, watch as h, reactive as E, provide as N, openBlock as g, createElementBlock as y, normalizeClass as L, Fragment as P, renderList as A, createBlock as O } from "vue";
+import { useRoute as F } from "vue-router";
+import { useBreakpoints as W, breakpointsTailwind as H } from "@vueuse/core";
+import D from "./SidebarMenuItem.vue.js";
 /* empty css                     */
-const C = {
-  class: "flex flex-col space-y-1 w-full",
-  role: "tree",
-  "aria-label": "Sidebar Menu"
-}, W = /* @__PURE__ */ y({
+const J = /* @__PURE__ */ S({
   __name: "SidebarMenu",
   props: {
     items: { default: () => [] },
@@ -15,64 +12,137 @@ const C = {
     variant: { default: "default" },
     defaultExpanded: { default: () => [] },
     compact: { type: Boolean, default: !1 },
-    renderMode: {},
-    showCompactLabels: { type: Boolean, default: !1 }
+    showCompactLabels: { type: Boolean, default: !1 },
+    renderMode: { default: "tree" },
+    iconSize: { default: "16px" },
+    compactIconSize: { default: "20px" },
+    labelClass: { default: "text-sm" },
+    compactLabelClass: { default: "text-[11.5px] mt-1" },
+    itemPadding: { default: "py-2 px-2" },
+    compactItemPadding: { default: "py-2 px-1" },
+    nestedMenuWidth: { default: "220px" },
+    nestedMenuMaxHeight: { default: "300px" },
+    itemClass: {},
+    menuOffset: { default: () => [0, 10] },
+    orientation: { default: "vertical" },
+    mobileBreakpoint: { default: "none" },
+    showTooltip: { type: Boolean, default: !0 }
   },
-  setup(p) {
-    const a = p, u = S(), l = v([...a.defaultExpanded]), i = v(null), b = (e, o) => {
-      if (i.value === e.id) return !0;
-      if (e.to) {
-        const t = typeof e.to == "string" ? e.to : e.to.path;
-        if (t && (o === t || o.startsWith(t) && t !== "/" && t.length > 1))
+  setup(m) {
+    const d = I("navbar-context", null), t = m, c = F(), T = W(H), u = w([...t.defaultExpanded]), i = w(null), k = n(() => !t.mobileBreakpoint || t.mobileBreakpoint === "none" ? !0 : T.greaterOrEqual(t.mobileBreakpoint).value), v = n(() => k.value && t.orientation || "vertical"), M = (l, s) => {
+      if (i.value === l.id) return !0;
+      if (l.to) {
+        const a = typeof l.to == "string" ? l.to : l.to.path;
+        if (a && (s === a || s.startsWith(a) && a !== "/" && a.length > 1))
           return !0;
       }
       return !1;
-    }, s = (e, o, t = []) => {
-      let c = !1;
-      for (const n of e) {
-        const m = n.id || (typeof n.to == "string" ? n.to : null) || n.label;
-        b(n, o) && (i.value = m, t.forEach((d) => {
-          l.value.includes(d) || l.value.push(d);
-        }), c = !0), n.children && s(n.children, o, [...t, m]) && (c = !0);
+    }, b = (l, s, a = []) => {
+      let r = !1;
+      for (const e of l) {
+        const o = e.id || (typeof e.to == "string" ? e.to : null) || e.label;
+        let f = !1;
+        e.children && (f = b(e.children, s, [...a, o]), f && (r = !0));
+        const p = M(e, s), z = f && d?.renderNestedTabs?.value && a.length === 0;
+        (p || z) && (i.value = o, a.forEach((C) => {
+          u.value.includes(C) || u.value.push(C);
+        }), r = !0);
       }
-      return c;
+      return r;
+    }, x = (l) => {
+      if (!d?.renderNestedTabs?.value) return;
+      const s = t.items.find((a) => i.value === (a.id || a.label || a.to) ? !0 : a.children?.some((e) => i.value === (e.id || e.label || e.to) || e.children && e.children.some(
+        (o) => i.value === (o.id || o.label || o.to)
+      )) || M(a, l));
+      if (s && s.children) {
+        const a = s.children.map((e) => ({
+          label: e.label,
+          labelI18n: e.labelI18n,
+          value: e.id || (typeof e.to == "string" ? e.to : null) || e.label,
+          icon: e.icon,
+          disabled: e.disabled,
+          to: e.to,
+          href: e.href
+        }));
+        let r = a[0].value;
+        if (i.value) {
+          const e = a.find((o) => o.value === i.value);
+          if (e)
+            r = e.value;
+          else {
+            const o = s.children.find((f) => f.children?.some(
+              (p) => (p.id || p.label || p.to) === i.value
+            ));
+            o && (r = o.id || (typeof o.to == "string" ? o.to : null) || o.label);
+          }
+        }
+        d.setNestedTabs(a, r);
+      } else
+        t.items.some(
+          (r) => r.children?.some((e) => (e.id || e.label || e.to) === i.value)
+        ) || d.setNestedTabs([], "");
     };
     h(
-      () => u?.path,
-      (e) => {
-        e && s(a.items, e);
+      () => c?.path,
+      (l) => {
+        l && (b(t.items, l), x(l));
       },
       { immediate: !0 }
     ), h(
-      () => a.items,
+      () => t.items,
       () => {
-        u?.path && s(a.items, u.path);
+        c?.path && (b(t.items, c.path), x(c.path));
       },
       { deep: !0 }
+    ), h(
+      () => i.value,
+      () => {
+        d?.renderNestedTabs?.value && x(c?.path || "");
+      }
     );
-    const g = E({
+    const B = E({
       activeItem: i,
-      expandedItems: l,
-      toggleExpand: (e) => {
-        l.value.includes(e) ? l.value = l.value.filter((t) => t !== e) : (a.allowMultiple, l.value.push(e));
+      expandedItems: u,
+      toggleExpand: (l) => {
+        u.value.includes(l) ? u.value = u.value.filter((a) => a !== l) : t.allowMultiple ? u.value.push(l) : u.value = [l];
       },
-      setActive: (e) => {
-        i.value = e;
+      setActive: (l) => {
+        i.value = l;
       },
-      indentSize: r(() => a.indentSize),
-      variant: r(() => a.variant),
-      renderMode: r(() => a.renderMode || "tree"),
-      compact: r(() => a.compact),
-      showCompactLabels: r(() => a.showCompactLabels)
+      indentSize: n(() => t.indentSize),
+      variant: n(() => t.variant),
+      renderMode: n(() => t.renderMode || "tree"),
+      renderNestedTabs: n(() => !!d?.renderNestedTabs?.value),
+      compact: n(() => t.compact),
+      showCompactLabels: n(() => t.showCompactLabels),
+      iconSize: n(() => t.iconSize),
+      compactIconSize: n(() => t.compactIconSize),
+      labelClass: n(() => t.labelClass),
+      compactLabelClass: n(() => t.compactLabelClass),
+      itemPadding: n(() => t.itemPadding),
+      compactItemPadding: n(() => t.compactItemPadding),
+      nestedMenuWidth: n(() => t.nestedMenuWidth),
+      nestedMenuMaxHeight: n(() => t.nestedMenuMaxHeight),
+      currentOrientation: v,
+      showTooltip: n(() => t.showTooltip)
     });
-    return _("sidebar-menu-ctx", g), (e, o) => (f(), x("nav", C, [
-      (f(!0), x(w, null, M(p.items, (t) => (f(), B(k, {
-        key: t.id || t.label,
-        item: t
-      }, null, 8, ["item"]))), 128))
-    ]));
+    return N("sidebar-menu-ctx", B), (l, s) => (g(), y("nav", {
+      class: L(["flex w-full transition-all duration-300", [
+        v.value === "horizontal" ? "flex-row flex-wrap gap-2 items-center" : "flex-col",
+        v.value === "vertical" && !t.compact ? "space-y-1" : ""
+      ]]),
+      role: "tree",
+      "aria-label": "Sidebar Menu"
+    }, [
+      (g(!0), y(P, null, A(m.items, (a) => (g(), O(D, {
+        key: a.id || a.label,
+        item: a,
+        itemClass: m.itemClass,
+        menuOffset: m.menuOffset
+      }, null, 8, ["item", "itemClass", "menuOffset"]))), 128))
+    ], 2));
   }
 });
 export {
-  W as default
+  J as default
 };

package/components/SidebarMenu/SidebarMenuItem.vue.d.ts

@@ -2,6 +2,8 @@ import { SidebarMenuItemSchema } from './types';
 interface Props {
     item: SidebarMenuItemSchema;
     depth?: number;
+    menuOffset?: [number, number];
+    itemClass?: string;
 }
 declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{}>, {
     depth: number;