vlite3 0.3.6 → 0.3.7

package/components/Screen/ScreenFilter.vue.js

@@ -1,9 +1,9 @@
-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 { defineComponent as b, ref as V, computed as F, openBlock as r, createBlock as a, withCtx as s, createElementVNode as t, 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";
+import x from "../Form/Form.vue.js";
 /* empty css                  */
 import "v-datepicker-lite";
 import "v-datepicker-lite/style.css";
@@ -15,7 +15,7 @@ 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({
+const $ = { class: "" }, S = { 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" }, P = /* @__PURE__ */ b({
   __name: "ScreenFilter",
   props: {
     schema: {},
@@ -23,35 +23,35 @@ const $ = { class: "p-4" }, S = { class: "p-4 w-[300px] sm:w-[320px] max-h-[85vh
     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;
+  setup(i, { emit: y }) {
+    const m = i, c = y, l = V(!1), d = F(() => m.modelValue ? Object.keys(m.modelValue).filter(
+      (o) => m.modelValue[o] !== "" && m.modelValue[o] !== null && m.modelValue[o] !== void 0
+    ).length : 0), h = (o) => {
+      c("update:modelValue", o.values), c("change", o.values), l.value = !1;
     }, g = () => {
       c("update:modelValue", {}), c("change", {});
     };
-    return (l, e) => o.type === "modal" ? (i(), s(C, {
+    return (o, e) => i.type === "modal" ? (r(), a(C, {
       key: 0,
       title: "Filters",
-      show: t.value,
-      "onUpdate:show": e[2] || (e[2] = (u) => t.value = u),
+      show: l.value,
+      "onUpdate:show": e[2] || (e[2] = (u) => l.value = u),
       "max-width": "sm:max-w-md"
     }, {
-      trigger: r(() => [
-        d.value > 0 ? (i(), s(p, {
+      trigger: s(() => [
+        d.value > 0 ? (r(), a(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)
+          onClick: e[0] || (e[0] = (u) => l.value = !0)
         }, {
-          default: r(() => [
+          default: s(() => [
             n(f, {
               icon: "ci:filter",
               class: "w-4 h-4"
             }),
-            a("span", null, "Filters (" + w(d.value) + ")", 1),
-            a("div", {
+            t("span", null, "Filters (" + w(d.value) + ")", 1),
+            t("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"
             }, [
@@ -62,49 +62,70 @@ const $ = { class: "p-4" }, S = { class: "p-4 w-[300px] sm:w-[320px] max-h-[85vh
             ])
           ]),
           _: 1
-        })) : (i(), s(p, {
+        })) : (r(), a(p, {
           key: 1,
           variant: "outline",
-          icon: "hugeicons:filter-add",
-          onClick: e[1] || (e[1] = (u) => t.value = !0),
+          onClick: e[1] || (e[1] = (u) => l.value = !0),
           title: "Filter",
           size: "lg",
+          asIcon: "",
           class: "shrink-0 h-9! w-9!"
+        }, {
+          default: s(() => [...e[4] || (e[4] = [
+            t("div", { class: "text-gray-800! h-4! w-4! flex items-center justify-center" }, [
+              t("svg", {
+                xmlns: "http://www.w3.org/2000/svg",
+                width: "1.132em",
+                height: "1.132em",
+                viewBox: "0 0 24 24"
+              }, [
+                t("path", {
+                  fill: "none",
+                  stroke: "currentColor",
+                  "stroke-linecap": "round",
+                  "stroke-linejoin": "round",
+                  "stroke-width": "2",
+                  d: "M20.67 7c.083-.182.127-.374.16-.627c.202-1.572.303-2.358-.158-2.866C20.212 3 19.396 3 17.766 3H6.234c-1.63 0-2.445 0-2.906.507c-.461.508-.36 1.294-.158 2.866c.06.459.158.72.457 1.076c.969 1.15 2.742 3.197 5.23 5.057c.228.17.377.448.402.755c.28 3.425.537 5.765.674 6.917c.071.604.741 1.069 1.293.678c.927-.655 2.66-1.39 2.888-2.612c.108-.577.267-1.585.445-3.244M17.5 8v7m3.5-3.5h-7"
+                })
+              ])
+            ], -1)
+          ])]),
+          _: 1
         }))
       ]),
-      default: r(() => [
-        a("div", $, [
-          n(v(b), {
-            schema: o.schema,
-            values: o.modelValue,
+      default: s(() => [
+        t("div", $, [
+          n(v(x), {
+            schema: i.schema,
+            values: i.modelValue,
             "submit-text": "Apply Filters",
             onOnSubmit: h
           }, null, 8, ["schema", "values"])
         ])
       ]),
       _: 1
-    }, 8, ["show"])) : (i(), s(v(O), {
+    }, 8, ["show"])) : (r(), a(v(O), {
       key: 1,
-      isOpen: t.value,
-      "onUpdate:isOpen": e[3] || (e[3] = (u) => t.value = u),
+      isOpen: l.value,
+      "onUpdate:isOpen": e[3] || (e[3] = (u) => l.value = u),
       "close-on-select": !1,
       position: "bottom-end",
       class: "w-auto"
     }, {
-      trigger: r(() => [
-        d.value > 0 ? (i(), s(p, {
+      trigger: s(() => [
+        d.value > 0 ? (r(), a(p, {
           key: 0,
           variant: "secondary",
-          class: "flex items-center gap-1.5 pl-3 pr-1.5 shrink-0",
+          class: "flex items-center gap-1.5 pl-3 pr-1.5 shrink-0 bg-gray-150! hover:bg-gray-100!",
           style: { "pointer-events": "auto" }
         }, {
-          default: r(() => [
+          default: s(() => [
             n(f, {
               icon: "ci:filter",
               class: "w-4 h-4"
             }),
-            a("span", null, "Filters (" + w(d.value) + ")", 1),
-            a("div", {
+            t("span", null, "Filters (" + w(d.value) + ")", 1),
+            t("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"
             }, [
@@ -115,7 +136,7 @@ const $ = { class: "p-4" }, S = { class: "p-4 w-[300px] sm:w-[320px] max-h-[85vh
             ])
           ]),
           _: 1
-        })) : (i(), s(p, {
+        })) : (r(), a(p, {
           key: 1,
           variant: "outline",
           icon: "hugeicons:filter-add",
@@ -124,15 +145,16 @@ const $ = { class: "p-4" }, S = { class: "p-4 w-[300px] sm:w-[320px] max-h-[85vh
           class: "shrink-0 h-9! w-9!"
         }))
       ]),
-      default: r(() => [
-        a("div", S, [
-          n(v(b), {
-            schema: o.schema,
-            values: o.modelValue,
+      default: s(() => [
+        t("div", S, [
+          n(v(x), {
+            schema: i.schema,
+            values: i.modelValue,
             "submit-text": "Apply Filters",
             "submit-props": {
               size: "sm",
-              class: "w-full"
+              class: "w-full",
+              textClass: "-text-fs-1!"
             },
             onOnSubmit: h
           }, null, 8, ["schema", "values"])

package/components/Screen/types.d.ts

@@ -17,6 +17,7 @@ export interface AddBtnConfig {
     buttonProps?: Record<string, any>;
 }
 export interface ScreenProps {
+    name?: string;
     title?: string;
     description?: string;
     pageInfo?: PageInfo;

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.6",
+  "version": "0.3.7",
   "type": "module",
   "main": "index.js",
   "module": "index.js",

package/style.css

@@ -253,7 +253,10 @@
   background-color: var(--color-white);
 }
 
-.dark {
+@custom-variant dark (&:where(.dark, .dark *));
+
+
+@utility dark {
   --color-white: #0b0b0b !important;
   --color-mixture-1: #0c0c0c !important;
   --color-mixture-2: #ffffff !important;

package/types/button.d.ts

@@ -12,4 +12,8 @@ export interface ButtonProps {
     type?: 'button' | 'submit' | 'reset';
     text?: string;
     rounded?: ButtonRounded;
+    textClass?: string;
+    iconLeftClass?: string;
+    iconRightClass?: string;
+    asIcon?: boolean;
 }

package/utils/usePersistentState.d.ts

@@ -0,0 +1,8 @@
+import { UseStorageOptions } from '@vueuse/core';
+/**
+ * Reusable function to manage persistent state in local storage.
+ * @param key Local storage key. Will be automatically prefixed with 'builto-'.
+ * @param initialValue The default value if no value exists in storage.
+ * @param options Additional options for useLocalStorage.
+ */
+export declare function usePersistentState<T>(key: string, initialValue: T, options?: UseStorageOptions<T>): import('@vueuse/shared').RemovableRef<T>;

package/utils/usePersistentState.js

@@ -0,0 +1,7 @@
+import { useLocalStorage as r } from "@vueuse/core";
+function i(t, e, o) {
+  return r(`builto-${t}`, e, o);
+}
+export {
+  i as usePersistentState
+};