vlite3 1.2.2 → 1.2.4

package/README.md

@@ -431,6 +431,7 @@ Follow these rules strictly to ensure visual consistency and predictable styling
 - [x] **CustomFields**
 - [x] **GoogleLogin**
 - [x] **PermissionEditor**
+- [x] **Rating**
 - [x] **RichTextEditor**
 
 ### Data Display

package/components/AppShell/AppShellLayoutDashboard.vue.js

@@ -119,7 +119,7 @@ const D = { class: "vlite-app-layout flex flex-row w-full h-full bg-muted/20 p-0
             ref_key: "mainScrollRef",
             ref: S,
             style: { "will-change": "transform", contain: "layout style" },
-            class: "flex-1 overflow-y-auto pt-2 w-full relative h-full scrollbar-thin scrollbar-stable"
+            class: "flex-1 overflow-y-auto w-full relative h-full scrollbar-thin scrollbar-stable"
           }, [
             l(s.$slots, "main")
           ], 512)

package/components/AppShell/AppShellLayoutHeaderShell.vue.js

@@ -121,7 +121,7 @@ const H = { class: "vlite-app-layout flex flex-row w-full h-full bg-background o
             ref_key: "mainScrollRef",
             ref: S,
             style: { "will-change": "transform", contain: "layout style" },
-            class: "flex-1 overflow-y-auto w-full relative h-full scrollbar-thin scrollbar-stable px-6 pb-4 mt-4"
+            class: "flex-1 overflow-y-auto w-full relative h-full scrollbar-thin scrollbar-stable"
           }, [
             l(s.$slots, "main")
           ], 512)

package/components/AsyncSelect/createAsyncSelect.d.ts

@@ -0,0 +1,88 @@
+import { PropType } from 'vue';
+export interface SelectOption<T = unknown> {
+    label: string;
+    value: string | number;
+    subtitle?: string;
+    description?: string;
+    icon?: string;
+    data?: T;
+}
+export type OptionsMapper<T> = (item: T) => SelectOption<T> | null | undefined;
+export interface CreateSelectConfig<T = any> {
+    name: string;
+    useQuery: any;
+    queryName: string;
+    labelKey?: keyof T | ((item: T) => string);
+    subtitleKey?: keyof T | ((item: T) => string);
+    descriptionKey?: keyof T | ((item: T) => string);
+    valueKey?: keyof T;
+    iconKey?: keyof T | ((item: T) => string);
+    searchable?: boolean;
+    remote?: boolean;
+    multiple?: boolean;
+    optionsMapper?: OptionsMapper<T>;
+}
+export declare const createAsyncSelect: <T extends {
+    id?: string | number;
+}>(config: CreateSelectConfig<T>) => import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    value: {
+        type: (ObjectConstructor | ArrayConstructor | BooleanConstructor | NumberConstructor | StringConstructor)[];
+    };
+    modelValue: {
+        type: (ObjectConstructor | ArrayConstructor | BooleanConstructor | NumberConstructor | StringConstructor)[];
+    };
+    multiple: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    placeholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    filter: {
+        type: ObjectConstructor;
+        default: () => {};
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    optionsMapper: {
+        type: PropType<OptionsMapper<T>>;
+    };
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, ("onChange" | "change" | "update:modelValue")[], "onChange" | "change" | "update:modelValue", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    value: {
+        type: (ObjectConstructor | ArrayConstructor | BooleanConstructor | NumberConstructor | StringConstructor)[];
+    };
+    modelValue: {
+        type: (ObjectConstructor | ArrayConstructor | BooleanConstructor | NumberConstructor | StringConstructor)[];
+    };
+    multiple: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    placeholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    filter: {
+        type: ObjectConstructor;
+        default: () => {};
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    optionsMapper: {
+        type: PropType<OptionsMapper<T>>;
+    };
+}>> & Readonly<{
+    onChange?: (...args: any[]) => any;
+    "onUpdate:modelValue"?: (...args: any[]) => any;
+    onOnChange?: (...args: any[]) => any;
+}>, {
+    filter: Record<string, any>;
+    placeholder: string;
+    disabled: boolean;
+    multiple: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

package/components/AsyncSelect/createAsyncSelect.js

@@ -0,0 +1,156 @@
+import { defineComponent as q, ref as m, computed as s, watch as _, createVNode as w, mergeProps as I, nextTick as j } from "vue";
+import k from "../Dropdown/Dropdown.vue.js";
+import "@iconify/vue";
+import "../../core/config.js";
+/* empty css            */
+/* empty css                            */
+import x from "../MultiSelect/MultiSelect.vue.js";
+const z = (t) => /* @__PURE__ */ q({
+  name: t.name,
+  inheritAttrs: !1,
+  props: {
+    value: {
+      type: [String, Array, Number, Object, Boolean]
+    },
+    modelValue: {
+      type: [String, Array, Number, Object, Boolean]
+    },
+    multiple: {
+      type: Boolean,
+      default: t.multiple || !1
+    },
+    placeholder: {
+      type: String,
+      default: "Select..."
+    },
+    filter: {
+      type: Object,
+      default: () => ({})
+    },
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    optionsMapper: {
+      type: Function
+    }
+  },
+  emits: ["onChange", "update:modelValue", "change"],
+  setup(l, {
+    attrs: M,
+    emit: c
+  }) {
+    const i = m([]), d = m(1), f = m(""), N = 20, h = s(() => l.value !== void 0 ? l.value : l.modelValue), v = s(() => l.optionsMapper || t.optionsMapper), B = s(() => ({
+      pagination: {
+        page: d.value,
+        limit: N
+      },
+      search: f.value || void 0,
+      filter: {
+        ...l.filter
+      }
+    })), {
+      result: b,
+      loading: K,
+      refetch: g
+    } = t.useQuery(B, {
+      notifyOnNetworkStatusChange: !0,
+      fetchPolicy: "cache-and-network"
+    }), A = s(() => {
+      const e = b.value?.[t.queryName]?.pageInfo;
+      return e ? e.currentPage < e.totalPages : !1;
+    });
+    _(() => b.value?.[t.queryName], (e) => {
+      if (!e) return;
+      const n = Array.isArray(e) ? e : e.items;
+      if (n)
+        if (d.value === 1)
+          i.value = [...n];
+        else {
+          const u = new Set(i.value.map((a) => a.id)), r = n.filter((a) => !u.has(a.id));
+          i.value.push(...r);
+        }
+    }, {
+      immediate: !0
+    });
+    const S = (e) => {
+      if (v.value)
+        return v.value(e);
+      const n = typeof t.labelKey == "function" ? t.labelKey(e) : e[t.labelKey || "name"], u = typeof t.subtitleKey == "function" ? t.subtitleKey(e) : e[t.subtitleKey || ""], r = typeof t.descriptionKey == "function" ? t.descriptionKey(e) : e[t.descriptionKey || ""], a = t.iconKey ? typeof t.iconKey == "function" ? t.iconKey(e) : e[t.iconKey] : void 0;
+      return {
+        label: n,
+        subtitle: u || void 0,
+        description: r || void 0,
+        value: e[t.valueKey || "id"],
+        icon: a || void 0,
+        data: e
+      };
+    }, p = s(() => i.value.map(S).filter(Boolean)), y = (e, n) => {
+      let u = n;
+      l.multiple && Array.isArray(e) && (u = e.map((a) => {
+        const o = p.value.find((V) => V.value === a);
+        return o ? o.data : null;
+      }).filter(Boolean));
+      const r = {
+        value: e,
+        data: u
+      };
+      c("update:modelValue", e), c("change", r), c("onChange", r);
+    }, C = (e) => {
+      f.value = e, d.value = 1;
+    }, O = () => {
+      !A.value || K.value || d.value++;
+    }, P = async (e) => {
+      const n = (Array.isArray(e) ? e : [e]).filter((a) => (typeof a == "string" || typeof a == "number") && a !== "");
+      if (n.length === 0) return [];
+      await j();
+      const u = new Set(p.value.map((a) => a.value)), r = n.filter((a) => !u.has(a));
+      if (r.length === 0) return [];
+      try {
+        const {
+          data: a
+        } = await g({
+          pagination: {
+            page: 1,
+            limit: r.length
+          },
+          filter: {
+            ...l.filter,
+            ids: r
+          }
+        }), o = a?.[t.queryName];
+        return (Array.isArray(o) ? o : o?.items || []).map(S).filter(Boolean);
+      } catch (a) {
+        return console.error(`[${t.name}] Hydration failed`, a), [];
+      }
+    };
+    return () => {
+      const e = {
+        options: p.value,
+        loading: K.value,
+        searchable: t.searchable ?? !0,
+        remote: t.remote ?? !0,
+        hasMore: A.value,
+        placeholder: l.placeholder,
+        disabled: l.disabled,
+        fetchSelected: P,
+        onSearch: C,
+        onLoadMore: O,
+        ...M
+      };
+      return l.multiple ? w(x, I(e, {
+        modelValue: h.value,
+        "onUpdate:modelValue": (n) => y(n),
+        onChange: (n) => y(n)
+      }), null) : w(k, I(e, {
+        showSelectedIcon: !0,
+        emptyMessage: "Data not found",
+        modelValue: h.value,
+        onOnSelect: (n) => y(n.value, n.data)
+      }), null);
+    };
+  }
+});
+export {
+  z as createAsyncSelect
+};

package/components/AsyncSelect/index.d.ts

@@ -0,0 +1 @@
+export * from './createAsyncSelect';

package/components/ChoiceBox/ChoiceBox.vue.js

@@ -15,7 +15,7 @@ const E = { class: "w-full" }, S = {
   class: "shrink-0 pt-0.5"
 }, L = { class: "flex flex-col" }, M = { class: "flex items-center gap-2" }, G = {
   key: 0,
-  class: "mt-1 -text-fs-3 text-muted leading-relaxed"
+  class: "mt-0.5 -text-fs-3 text-muted leading-relaxed"
 }, H = {
   key: 0,
   class: "absolute top-4 right-4 text-primary"
@@ -35,7 +35,9 @@ const E = { class: "w-full" }, S = {
   },
   emits: ["update:modelValue", "change"],
   setup(g, { emit: _ }) {
-    const s = g, x = _, f = m(() => s.titleI18n ? u(s.titleI18n) : s.title), p = m(() => s.descriptionI18n ? u(s.descriptionI18n) : s.description), k = (t) => t.titleI18n ? u(t.titleI18n) : t.title, I = (t) => t.descriptionI18n ? u(t.descriptionI18n) : t.description, w = (t) => t.badgeI18n ? u(t.badgeI18n) : t.badge, d = (t) => Array.isArray(s.modelValue) ? s.modelValue.includes(t) : s.modelValue === t, b = (t) => {
+    const s = g, x = _, f = m(() => s.titleI18n ? u(s.titleI18n) : s.title), p = m(
+      () => s.descriptionI18n ? u(s.descriptionI18n) : s.description
+    ), k = (t) => t.titleI18n ? u(t.titleI18n) : t.title, I = (t) => t.descriptionI18n ? u(t.descriptionI18n) : t.description, w = (t) => t.badgeI18n ? u(t.badgeI18n) : t.badge, d = (t) => Array.isArray(s.modelValue) ? s.modelValue.includes(t) : s.modelValue === t, b = (t) => {
       if (s.disabled || s.options.find((l) => l.id === t)?.disabled) return;
       let e;
       if (s.multiple) {

package/components/CommandPalette/CommandPaletteContent.vue2.js

@@ -4,7 +4,7 @@ import k from "../Icon.vue.js";
 import { $t as E } from "../../utils/i18n.js";
 import { useCommandPaletteItems as Y } from "./useCommandPaletteItems.js";
 import { useCommandPaletteNav as Z } from "./useCommandPaletteNav.js";
-import ee from "./CommandPaletteItem.vue.js";
+import ee from "./CommandPaletteItem.vue2.js";
 const te = { class: "command-palette-content flex flex-col w-full h-full max-h-[70vh]" }, oe = { class: "flex items-center gap-3 px-4 py-3 border-b border-border/80 shrink-0" }, se = ["placeholder"], ne = ["aria-label"], re = {
   key: 0,
   class: "flex flex-col items-center justify-center py-14 px-6 text-center select-none",

package/components/CommandPalette/{CommandPaletteItem.vue.js → CommandPaletteItem.vue2.js}

@@ -1,5 +1,5 @@
 import t from "./CommandPaletteItem.vue3.js";
-/* empty css                        */
+/* empty css                       */
 import o from "../../_virtual/_plugin-vue_export-helper.js";
 const r = /* @__PURE__ */ o(t, [["__scopeId", "data-v-66b1ae06"]]);
 export {

package/components/Form/Form.vue.js

@@ -1,7 +1,7 @@
 import o from "./Form.vue2.js";
 /* empty css          */
 import r from "../../_virtual/_plugin-vue_export-helper.js";
-const p = /* @__PURE__ */ r(o, [["__scopeId", "data-v-712d6d5d"]]);
+const p = /* @__PURE__ */ r(o, [["__scopeId", "data-v-45c18c7b"]]);
 export {
   p as default
 };

package/components/Form/Form.vue2.js

@@ -220,7 +220,7 @@ const Be = ["onKeydown"], Le = { class: "flex items-center gap-3" }, Ne = { clas
       ], 2)) : c("", !0),
       !e.schemaLoading && u.value && X.value.length > 0 ? (s(), d("div", {
         key: 1,
-        class: m(["form-timeline", e.timelineTextPosition == "right" ? "mb-6.5" : "mb-13"])
+        class: m(["form-timeline", e.timelineTextPosition == "right" ? "mb-2" : "mb-8"])
       }, [
         T(t(Pe), {
           steps: X.value,