vlite3 0.3.2 → 0.3.6

package/components/Screen/ScreenFilter.vue.js

@@ -0,0 +1,147 @@
+import { defineComponent as x, ref as V, computed as F, openBlock as i, createBlock as s, withCtx as r, createElementVNode as a, createVNode as n, unref as v, toDisplayString as w, withModifiers as k } from "vue";
+import p from "../Button.vue.js";
+import C from "../Modal.vue.js";
+import O from "../Dropdown/Dropdown.vue.js";
+import f from "../Icon.vue.js";
+import b from "../Form/Form.vue.js";
+/* empty css                  */
+import "v-datepicker-lite";
+import "v-datepicker-lite/style.css";
+import "@jaames/iro";
+import "@vueuse/core";
+/* empty css                           */
+import "iconify-icon-picker";
+import "iconify-icon-picker/style.css";
+/* empty css                        */
+/* empty css                      */
+import "../../core/config.js";
+const $ = { class: "p-4" }, S = { class: "p-4 w-[300px] sm:w-[320px] max-h-[85vh] overflow-y-auto bg-card rounded-md border border-border shadow-lg text-left" }, P = /* @__PURE__ */ x({
+  __name: "ScreenFilter",
+  props: {
+    schema: {},
+    modelValue: {},
+    type: { default: "modal" }
+  },
+  emits: ["update:modelValue", "change"],
+  setup(o, { emit: y }) {
+    const m = o, c = y, t = V(!1), d = F(() => m.modelValue ? Object.keys(m.modelValue).filter(
+      (l) => m.modelValue[l] !== "" && m.modelValue[l] !== null && m.modelValue[l] !== void 0
+    ).length : 0), h = (l) => {
+      c("update:modelValue", l.values), c("change", l.values), t.value = !1;
+    }, g = () => {
+      c("update:modelValue", {}), c("change", {});
+    };
+    return (l, e) => o.type === "modal" ? (i(), s(C, {
+      key: 0,
+      title: "Filters",
+      show: t.value,
+      "onUpdate:show": e[2] || (e[2] = (u) => t.value = u),
+      "max-width": "sm:max-w-md"
+    }, {
+      trigger: r(() => [
+        d.value > 0 ? (i(), s(p, {
+          key: 0,
+          variant: "secondary",
+          class: "flex items-center gap-1.5 pl-3 pr-1.5 shrink-0",
+          onClick: e[0] || (e[0] = (u) => t.value = !0)
+        }, {
+          default: r(() => [
+            n(f, {
+              icon: "ci:filter",
+              class: "w-4 h-4"
+            }),
+            a("span", null, "Filters (" + w(d.value) + ")", 1),
+            a("div", {
+              onClick: k(g, ["stop"]),
+              class: "ml-1 p-1 hover:bg-black/10 dark:hover:bg-white/10 rounded-full transition-colors cursor-pointer"
+            }, [
+              n(f, {
+                icon: "lucide:x",
+                class: "w-4 h-4"
+              })
+            ])
+          ]),
+          _: 1
+        })) : (i(), s(p, {
+          key: 1,
+          variant: "outline",
+          icon: "hugeicons:filter-add",
+          onClick: e[1] || (e[1] = (u) => t.value = !0),
+          title: "Filter",
+          size: "lg",
+          class: "shrink-0 h-9! w-9!"
+        }))
+      ]),
+      default: r(() => [
+        a("div", $, [
+          n(v(b), {
+            schema: o.schema,
+            values: o.modelValue,
+            "submit-text": "Apply Filters",
+            onOnSubmit: h
+          }, null, 8, ["schema", "values"])
+        ])
+      ]),
+      _: 1
+    }, 8, ["show"])) : (i(), s(v(O), {
+      key: 1,
+      isOpen: t.value,
+      "onUpdate:isOpen": e[3] || (e[3] = (u) => t.value = u),
+      "close-on-select": !1,
+      position: "bottom-end",
+      class: "w-auto"
+    }, {
+      trigger: r(() => [
+        d.value > 0 ? (i(), s(p, {
+          key: 0,
+          variant: "secondary",
+          class: "flex items-center gap-1.5 pl-3 pr-1.5 shrink-0",
+          style: { "pointer-events": "auto" }
+        }, {
+          default: r(() => [
+            n(f, {
+              icon: "ci:filter",
+              class: "w-4 h-4"
+            }),
+            a("span", null, "Filters (" + w(d.value) + ")", 1),
+            a("div", {
+              onClick: k(g, ["stop"]),
+              class: "ml-1 p-1 hover:bg-black/10 dark:hover:bg-white/10 rounded-full transition-colors cursor-pointer"
+            }, [
+              n(f, {
+                icon: "lucide:x",
+                class: "w-4 h-4"
+              })
+            ])
+          ]),
+          _: 1
+        })) : (i(), s(p, {
+          key: 1,
+          variant: "outline",
+          icon: "hugeicons:filter-add",
+          title: "Filter",
+          size: "lg",
+          class: "shrink-0 h-9! w-9!"
+        }))
+      ]),
+      default: r(() => [
+        a("div", S, [
+          n(v(b), {
+            schema: o.schema,
+            values: o.modelValue,
+            "submit-text": "Apply Filters",
+            "submit-props": {
+              size: "sm",
+              class: "w-full"
+            },
+            onOnSubmit: h
+          }, null, 8, ["schema", "values"])
+        ])
+      ]),
+      _: 1
+    }, 8, ["isOpen"]));
+  }
+});
+export {
+  P as default
+};

package/components/Screen/ScreenFilter.vue2.js

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

package/components/Screen/index.d.ts

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

package/components/Screen/types.d.ts

@@ -0,0 +1,52 @@
+import { Component } from 'vue';
+import { PageInfo, PaginationProps } from '../Pagination';
+import { ButtonVariant } from '../../types';
+import { IForm } from '../Form';
+export interface ScreenPaginationProps extends Omit<PaginationProps, 'currentPage' | 'totalPages'> {
+}
+export interface AddBtnConfig {
+    label?: string;
+    icon?: string;
+    variant?: ButtonVariant;
+    to?: string | Record<string, any>;
+    href?: string;
+    target?: string;
+    onClick?: () => void;
+    modal?: Component | any;
+    modalProps?: Record<string, any>;
+    buttonProps?: Record<string, any>;
+}
+export interface ScreenProps {
+    title?: string;
+    description?: string;
+    pageInfo?: PageInfo;
+    data?: any[];
+    loading?: boolean;
+    refetch?: (payload: {
+        pageinfo: {
+            page: number;
+            limit: number;
+        };
+        pagination: {
+            page: number;
+            limit: number;
+        };
+        search: string;
+        filter: Record<string, any>;
+    }) => void;
+    paginationProps?: ScreenPaginationProps;
+    emptyTitle?: string;
+    emptyDescription?: string;
+    emptyIcon?: string;
+    addComponent?: Component | any;
+    addBtn?: AddBtnConfig;
+    list?: Component | any;
+    table?: Component | any;
+    customHeader?: boolean;
+    canSearch?: boolean;
+    canAdd?: boolean;
+    pagination?: boolean;
+    filterSchema?: IForm[];
+    filterType?: 'modal' | 'dropdown';
+    showRefresh?: boolean;
+}

package/index.d.ts

@@ -55,3 +55,5 @@ export { createVLite, useVLiteConfig } from './core';
 export { GoogleSignInPlugin };
 export * from './utils';
 export * from './types';
+export * from './components/DataList';
+export * from './components/Screen';

package/index.js

@@ -6,10 +6,10 @@ import { default as u } from "./components/Accordion/AccordionContent.vue.js";
 import { default as i } from "./components/Alert.vue.js";
 import { default as c } from "./components/Avatar.vue.js";
 import { default as g } from "./components/AvatarUploader/AvatarUploader.vue.js";
-import { default as S } from "./components/Badge.vue.js";
+import { default as b } from "./components/Badge.vue.js";
 import { default as P } from "./components/Button.vue.js";
-import { default as v } from "./components/ButtonGroup.vue.js";
-import { default as C } from "./components/Carousel/Carousel.vue.js";
+import { default as h } from "./components/ButtonGroup.vue.js";
+import { default as A } from "./components/Carousel/Carousel.vue.js";
 import { default as D } from "./components/CheckBox.vue.js";
 import { default as y } from "./components/Chip/Chip.vue.js";
 import { default as k } from "./components/ChoiceBox/ChoiceBox.vue.js";
@@ -33,10 +33,10 @@ import { default as ue } from "./components/Form/Form.vue.js";
 import { default as ie } from "./components/Form/FormField.vue.js";
 import { default as ce } from "./components/Form/FormFields.vue.js";
 import { default as ge } from "./components/Form/CustomFields.vue.js";
-import { useForm as Se } from "./components/Form/composables/useForm.js";
+import { useForm as be } from "./components/Form/composables/useForm.js";
 import { useFileUpload as Pe } from "./components/Form/composables/useFileUpload.js";
-import { default as ve } from "./components/Heatmap/Heatmap.vue.js";
-import { default as Ce } from "./components/Icon.vue.js";
+import { default as he } from "./components/Heatmap/Heatmap.vue.js";
+import { default as Ae } from "./components/Icon.vue.js";
 import { default as De } from "./components/IconPicker.vue.js";
 import { default as ye } from "./components/Input.vue.js";
 import { default as ke } from "./components/Kanban/Kanban.vue.js";
@@ -60,11 +60,11 @@ import { default as xo } from "./components/SidePanel.vue.js";
 import { default as no } from "./components/SidebarMenu/SidebarMenu.vue.js";
 import { default as To } from "./components/SidebarMenu/SidebarMenuItem.vue.js";
 /* empty css                                            */
-import { default as bo } from "./components/Slider.vue.js";
+import { default as So } from "./components/Slider.vue.js";
 import { default as Io } from "./components/Spinner/Spinner.vue.js";
-import { default as ho } from "./components/Switch.vue.js";
-import { default as Ao } from "./components/Tabes/Tabes.vue.js";
-import { default as Fo } from "./components/Textarea.vue.js";
+import { default as Fo } from "./components/Switch.vue.js";
+import { default as vo } from "./components/Tabes/Tabes.vue.js";
+import { default as Co } from "./components/Textarea.vue.js";
 import { default as wo } from "./components/ThemeToggle.vue.js";
 import { default as No } from "./components/Timeline.vue.js";
 import { default as Bo } from "./components/ToastNotification.vue.js";
@@ -79,10 +79,13 @@ import { useAdvancedKeyStroke as er, useKeyStroke as or } from "./composables/us
 import { vScrollReveal as tr } from "./directives/vScrollReveal.js";
 import { createVLite as fr } from "./core/index.js";
 import { deepMerge as mr } from "./utils/object.js";
-import { camelCase as dr, capitalize as sr, copyToClipboard as ur, debounce as xr, delay as ir, downloadFile as nr, flattenArray as cr, formatCurrency as Tr, getUniqueId as gr, isAppleDevice as br, isEmpty as Sr, randomNumber as Ir, removeExtraProperties as Pr, slugify as hr, throttle as vr, truncate as Ar } from "./utils/functions.js";
-import { lazySearch as Fr, resetSearchIndex as Dr, search as wr } from "./utils/search.util.js";
+import { camelCase as dr, capitalize as sr, copyToClipboard as ur, debounce as xr, delay as ir, downloadFile as nr, flattenArray as cr, formatCurrency as Tr, getUniqueId as gr, isAppleDevice as Sr, isEmpty as br, randomNumber as Ir, removeExtraProperties as Pr, slugify as Fr, throttle as hr, truncate as vr } from "./utils/functions.js";
+import { lazySearch as Cr, resetSearchIndex as Dr, search as wr } from "./utils/search.util.js";
 import { env as Nr } from "./utils/env.js";
-import { useVLiteConfig as Br } from "./core/config.js";
+import { default as Br } from "./components/DataList/DataList.vue.js";
+import { default as Kr } from "./components/Screen/Screen.vue.js";
+import { default as Gr } from "./components/Screen/ScreenFilter.vue.js";
+import { useVLiteConfig as Er } from "./core/config.js";
 export {
   f as Accordion,
   u as AccordionContent,
@@ -91,16 +94,17 @@ export {
   i as Alert,
   c as Avatar,
   g as AvatarUploader,
-  S as Badge,
+  b as Badge,
   P as Button,
-  v as ButtonGroup,
-  C as Carousel,
+  h as ButtonGroup,
+  A as Carousel,
   D as CheckBox,
   y as Chip,
   k as ChoiceBox,
   M as ColorPicker,
   L as ConfirmationModal,
   ge as CustomFields,
+  Br as DataList,
   O as DataTable,
   z as DataTableHeader,
   V as DataTableRow,
@@ -117,8 +121,8 @@ export {
   ce as FormFields,
   Uo as GoogleLogin,
   t as GoogleSignInPlugin,
-  ve as Heatmap,
-  Ce as Icon,
+  he as Heatmap,
+  Ae as Icon,
   De as IconPicker,
   ye as Input,
   ke as Kanban,
@@ -138,15 +142,17 @@ export {
   mo as PricingPlan,
   so as PricingPlanItem,
   Ho as ProgressBar,
+  Kr as Screen,
+  Gr as ScreenFilter,
   Eo as Sheet,
   xo as SidePanel,
   no as SidebarMenu,
   To as SidebarMenuItem,
-  bo as Slider,
+  So as Slider,
   Io as Spinner,
-  ho as Switch,
-  Ao as Tabes,
-  Fo as Textarea,
+  Fo as Switch,
+  vo as Tabes,
+  Co as Textarea,
   wo as ThemeToggle,
   No as Timeline,
   Bo as ToastNotification,
@@ -165,9 +171,9 @@ export {
   cr as flattenArray,
   Tr as formatCurrency,
   gr as getUniqueId,
-  br as isAppleDevice,
-  Sr as isEmpty,
-  Fr as lazySearch,
+  Sr as isAppleDevice,
+  br as isEmpty,
+  Cr as lazySearch,
   Wo as pauseTimers,
   Ir as randomNumber,
   Pr as removeExtraProperties,
@@ -176,20 +182,20 @@ export {
   _o as resumeTimers,
   wr as search,
   jo as showToast,
-  hr as slugify,
-  vr as throttle,
+  Fr as slugify,
+  hr as throttle,
   Jo as toast,
-  Ar as truncate,
+  vr as truncate,
   er as useAdvancedKeyStroke,
   oe as useDropdownIds,
   $ as useDropdownSelection,
   Pe as useFileUpload,
-  Se as useForm,
+  be as useForm,
   Le as useKanbanBoard,
   or as useKeyStroke,
   Qo as useNotifications,
   Zo as useTheme,
   de as useTreeSelection,
-  Br as useVLiteConfig,
+  Er as useVLiteConfig,
   tr as vScrollReveal
 };

package/package.json

@@ -3,7 +3,7 @@
   "private": false,
   "description": "A Vue 3 UI component library built with Tailwind CSS.",
   "license": "MIT",
-  "version": "0.3.2",
+  "version": "0.3.6",
   "type": "module",
   "main": "index.js",
   "module": "index.js",