@merkaly/nuxt 0.3.0 → 0.3.2

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": ">=3.0.0"
   },
-  "version": "0.3.0",
+  "version": "0.3.2",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/runtime/components/app.vue

@@ -1,10 +1,15 @@
 <script setup>
 import { useRoute } from "#app";
-import { useAuth, watchOnce } from "#imports";
+import { useAuth, watchOnce, addRouteMiddleware, useNuxtApp } from "#imports";
 import AuthMiddleware from "../middleware/auth";
+import { useNavigation } from "../composables/useNavigation";
 const $route = useRoute();
 const { isLoading } = useAuth();
+const { hook } = useNuxtApp();
 watchOnce(isLoading, () => AuthMiddleware($route, $route));
+const { defer, regenerate } = useNavigation();
+addRouteMiddleware("navigation", (to) => defer(to), { global: true });
+hook("page:finish", () => regenerate());
 </script>
 
 <template>

package/dist/runtime/components/format/FormatAddress.d.vue.ts

@@ -60,10 +60,10 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
     code: string;
     city: string;
     country: string;
-    locality: string;
-    state: string;
     line1: string;
     line2: string;
+    locality: string;
+    state: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/format/FormatAddress.vue.d.ts

@@ -60,10 +60,10 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
     code: string;
     city: string;
     country: string;
-    locality: string;
-    state: string;
     line1: string;
     line2: string;
+    locality: string;
+    state: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/format/FormatIcon.vue

@@ -32,7 +32,7 @@ const classList = computed(() => [
   <template v-if="props.text">
     <span :class="{ 'flex-row-reverse': props.reversed }" class="d-flex align-items-center">
       <component :is="props.tag" :class="classList" />
-      <span class="ps-1" v-text="props.text" />
+      <span :class="fontColor" class="ps-1" v-text="props.text" />
     </span>
   </template>
 

package/dist/runtime/components/format/FormatMoney.d.vue.ts

@@ -61,10 +61,10 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
     mode: keyof Intl.NumberFormatOptionsStyleRegistry;
     base: number;
     tag: string;
-    value: number;
     currency: string;
     hideDecimal: boolean;
     locale: string;
+    value: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/format/FormatMoney.vue.d.ts

@@ -61,10 +61,10 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
     mode: keyof Intl.NumberFormatOptionsStyleRegistry;
     base: number;
     tag: string;
-    value: number;
     currency: string;
     hideDecimal: boolean;
     locale: string;
+    value: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/input/InputMoney.d.vue.ts

@@ -74,11 +74,11 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
 }>> & Readonly<{
     "onUpdate:modelValue"?: ((value: Numberish) => any) | undefined;
 }>, {
-    prefix: string;
-    placeholder: string;
-    max: number;
     min: number;
+    max: number;
+    prefix: string;
     decimal: string;
+    placeholder: string;
     precision: number;
     suffix: string;
     thousands: string;

package/dist/runtime/components/input/InputMoney.vue.d.ts

@@ -74,11 +74,11 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
 }>> & Readonly<{
     "onUpdate:modelValue"?: ((value: Numberish) => any) | undefined;
 }>, {
-    prefix: string;
-    placeholder: string;
-    max: number;
     min: number;
+    max: number;
+    prefix: string;
     decimal: string;
+    placeholder: string;
     precision: number;
     suffix: string;
     thousands: string;

package/dist/runtime/components/input/InputSearch.d.vue.ts

@@ -1,3 +1,11 @@
-declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const search: import("vue").ModelRef<string, string, string, string>;
+type __VLS_ModelProps = {
+    modelValue?: typeof search['value'];
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_ModelProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/input/InputSearch.vue

@@ -1,10 +1,11 @@
 <script setup>
 import FormatIcon from "../format/FormatIcon.vue";
+const search = defineModel({ type: String, default: () => String() });
 </script>
 
 <template>
   <div class="d-flex align-items-center position-relative">
-    <BFormInput class="form-control-solid border" placeholder="Search..." />
+    <BFormInput v-model="search" class="form-control-solid border" placeholder="Search..." />
 
     <FormatIcon class="position-absolute me-3 end-0" mode="regular" name="search" size="4" variant="primary" />
   </div>

package/dist/runtime/components/input/InputSearch.vue.d.ts

@@ -1,3 +1,11 @@
-declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const search: import("vue").ModelRef<string, string, string, string>;
+type __VLS_ModelProps = {
+    modelValue?: typeof search['value'];
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_ModelProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/table/TableDatagrid.vue

@@ -78,7 +78,11 @@ function toggleDetails(item) {
     <BCardHeader class="align-items-center p-4">
       <BCardTitle>
         <slot name="search">
-          <InputSearch :disabled="$datagrid.loading" class="w-250px" />
+          <InputSearch
+            v-model="$datagrid.search"
+            :disabled="$datagrid.loading"
+            class="w-250px"
+            @change="emit('fetch', 'search')" />
         </slot>
       </BCardTitle>
 
@@ -133,7 +137,7 @@ function toggleDetails(item) {
 
     <BTableSimple
       :class="{ 'h-100': !visibleItems.length || $datagrid.loading }"
-      class="mb-0"
+      class="mb-0 overflow-auto"
       hover
       responsive="lg"
       small
@@ -236,29 +240,31 @@ function toggleDetails(item) {
     <BCardFooter v-if="!props.hideFooter" class="p-4">
       <slot name="footer" />
 
-      <BRow v-if="!props.hidePagination" align-h="between" align-v="center">
-        <BCol cols="auto">
-          <select v-model="$datagrid.limit" class="form-select form-select-sm form-select-solid" disabled>
-            <BFormSelectOption :value="10">10</BFormSelectOption>
-          </select>
-        </BCol>
+      <template v-if="!props.hidePagination">
+        <BRow align-h="between" align-v="center" class="w-100">
+          <BCol cols="auto">
+            <select v-model="$datagrid.limit" class="form-select form-select-sm form-select-solid" disabled>
+              <BFormSelectOption :value="10">10</BFormSelectOption>
+            </select>
+          </BCol>
 
-        <BCol v-show="!$datagrid.loading" cols="auto">
-          <BPagination
-            v-model="$datagrid.page"
-            :disabled="$datagrid.loading"
-            :per-page="$datagrid.limit"
-            :total-rows="$datagrid.total"
-            class="mb-0"
-            no-goto-end-buttons
-            @update:model-value="emit('fetch', 'paginate')" />
-        </BCol>
+          <BCol v-show="!$datagrid.loading" cols="auto">
+            <BPagination
+              v-model="$datagrid.page"
+              :disabled="$datagrid.loading"
+              :per-page="$datagrid.limit"
+              :total-rows="$datagrid.total"
+              class="mb-0"
+              no-goto-end-buttons
+              @update:model-value="emit('fetch', 'paginate')" />
+          </BCol>
 
-        <BCol class="fs-7 text-muted" cols="auto">
-          <span v-if="$datagrid.loading">Loading...</span>
-          <FormatText v-else :template="paginationText.template" :values="paginationText.values" />
-        </BCol>
-      </BRow>
+          <BCol class="fs-7 text-muted" cols="auto">
+            <span v-if="$datagrid.loading">Loading...</span>
+            <FormatText v-else :template="paginationText.template" :values="paginationText.values" />
+          </BCol>
+        </BRow>
+      </template>
     </BCardFooter>
   </BCard>
 </template>

package/dist/runtime/composables/useDatagrid.d.ts

@@ -14,6 +14,7 @@ export interface DataGrid<C = unknown> {
     limit: number;
     loading: boolean;
     page: number;
+    search: string;
     total: number;
     fn: {
         addItem: (item: C) => DataGridItem<C>[];
@@ -26,6 +27,7 @@ interface OptionArgs<D> {
     items?: D[];
     limit?: number;
     loading?: boolean;
+    search?: string;
     total?: number;
 }
 export declare function useDatagrid<D = unknown>(params: OptionArgs<D>): DataGrid<D>;

package/dist/runtime/composables/useDatagrid.js

@@ -4,6 +4,7 @@ export function useDatagrid(params) {
     columns: params.columns,
     error: params.error ?? null,
     items: params.items ?? [],
+    search: params.search,
     limit: params.limit ?? 10,
     loading: params.loading ?? false,
     page: 1,

package/dist/runtime/composables/useNavigation.d.ts

@@ -1,18 +1,23 @@
-import type { RouteLocationNormalized } from 'vue-router';
-interface INavigationItem {
+interface NavigationItem {
     text: string | null;
     path: string;
+    loading?: boolean;
 }
-export declare function useNavigation(page?: INavigationItem): {
+type NavigationItemOrGetter = NavigationItem | (() => NavigationItem);
+export declare function useNavigation(page?: NavigationItemOrGetter): {
     current: import("vue").ComputedRef<{
         path: string;
         text: string | null;
+        loading: boolean;
     } | undefined>;
     items: import("vue").ComputedRef<{
         path: string;
         text: string | null;
+        loading: boolean;
     }[]>;
-    regenerate: (route: RouteLocationNormalized) => void;
-    setPage: (item: INavigationItem) => number | undefined;
+    defer: (route: {
+        path: string;
+    }) => void;
+    regenerate: () => void;
 };
 export {};

package/dist/runtime/composables/useNavigation.js

@@ -2,45 +2,50 @@ import { computed } from "vue";
 import { useState } from "#imports";
 export function useNavigation(page) {
   const list = useState("breadcrumbs", () => []);
+  const pendingRoute = useState("breadcrumbs:pending", () => null);
   function normalizePath(base, path) {
-    path = String(path);
-    if (!path.startsWith("/")) {
-      path = "/" + path;
-    }
-    if (base.endsWith("/")) {
-      base = base.slice(0, -1);
-    }
-    return base + path;
+    return `${base.replace(/\/$/, "")}/${path.replace(/^\//, "")}`;
   }
-  const items = computed(() => {
+  function resolve(item) {
+    return typeof item === "function" ? item() : item;
+  }
+  const resolved = computed(() => {
     let uri = "";
-    return list.value.map(({ text, path }) => {
+    return list.value.map((item) => {
+      const { text, path = "", loading } = resolve(item);
       uri = normalizePath(uri, path);
-      return { path: uri, text };
-    }).filter(({ text }) => text !== null);
+      return { path: uri, text, loading: !!loading };
+    });
+  });
+  const items = computed(() => {
+    return resolved.value.filter(({ text, loading }) => text != null && !loading);
   });
   const current = computed(() => {
-    const length = items.value.length;
-    return items.value.at(length - 1);
+    return resolved.value.at(-1);
   });
-  const setPage = (item) => {
-    const newItem = JSON.stringify(item);
-    const existingItems = list.value.map((item2) => JSON.stringify(item2));
-    if (existingItems.includes(newItem)) {
-      return;
-    }
-    return list.value.push(item);
-  };
-  if (page) {
-    setPage(page);
-  }
-  function regenerate(route) {
-    const itemIndex = items.value.findLastIndex((value) => route.path.startsWith(value.path));
+  function regenerate() {
+    if (!pendingRoute.value) return;
+    const route = pendingRoute.value;
+    pendingRoute.value = null;
+    const itemIndex = resolved.value.findLastIndex((value) => route.startsWith(value.path));
     if (itemIndex >= 0) {
       list.value = list.value.slice(0, itemIndex + 1);
       return;
     }
     list.value = [];
   }
-  return { current, items, regenerate, setPage };
+  if (page) {
+    regenerate();
+    const { path } = resolve(page);
+    const existingIndex = list.value.findIndex((i) => resolve(i).path === path);
+    if (existingIndex >= 0) {
+      list.value[existingIndex] = page;
+    } else {
+      list.value.push(page);
+    }
+  }
+  function defer(route) {
+    pendingRoute.value = route.path;
+  }
+  return { current, items, defer, regenerate };
 }

package/dist/runtime/composables/useValidator.d.ts

@@ -0,0 +1,16 @@
+type FieldConstraints = {
+    maxlength?: number;
+    minlength?: number;
+    required?: boolean;
+};
+type FieldAttrs = FieldConstraints & {
+    state?: boolean | null;
+};
+export declare function useValidator<T extends object>(instance: T): {
+    form: T;
+    attrs: import("vue").ComputedRef<{ [K in keyof T]?: FieldAttrs | undefined; }>;
+    valid: import("vue").ComputedRef<boolean>;
+    errors: Record<keyof T, string>;
+    validate: () => Promise<boolean>;
+};
+export {};

package/dist/runtime/composables/useValidator.js

@@ -0,0 +1,59 @@
+import { reactive, computed, ref } from "vue";
+import { validate as classValidate, getMetadataStorage } from "class-validator";
+const handlers = {
+  isLength(entry, [min, max]) {
+    if (min > 0) entry.minlength = min;
+    if (max != null) entry.maxlength = max;
+  },
+  isNotEmpty(entry) {
+    entry.required = true;
+  }
+};
+function extractConstraints(constructor) {
+  const metadata = getMetadataStorage().getTargetValidationMetadatas(constructor, "", false, false);
+  const constraints = {};
+  for (const meta of metadata) {
+    const prop = meta.propertyName;
+    if (!constraints[prop]) constraints[prop] = {};
+    const handler = handlers[meta.name];
+    if (handler) handler(constraints[prop], meta.constraints ?? []);
+  }
+  return constraints;
+}
+function applyErrors(result, errors, state) {
+  for (const key of Object.keys(errors)) {
+    errors[key] = "";
+    state[key] = true;
+  }
+  for (const error of result) {
+    const messages = error.constraints ? Object.values(error.constraints) : [];
+    errors[error.property] = messages[0] || "Invalid";
+    state[error.property] = false;
+  }
+}
+function mergeAttrs(constraints, state) {
+  const result = {};
+  const keys = /* @__PURE__ */ new Set([...Object.keys(constraints), ...Object.keys(state)]);
+  for (const key of keys) {
+    const prop = key;
+    result[prop] = { ...constraints[prop], state: state[key] ?? null };
+  }
+  return result;
+}
+export function useValidator(instance) {
+  const form = reactive(instance);
+  const constraints = extractConstraints(instance.constructor);
+  const errors = reactive({});
+  const state = reactive({});
+  const validated = ref(false);
+  const valid = computed(() => validated.value && !Object.values(errors).some((v) => v));
+  const attrs = computed(() => mergeAttrs(constraints, state));
+  async function validate() {
+    const plain = Object.assign(Object.create(Object.getPrototypeOf(instance)), form);
+    const result = await classValidate(plain);
+    applyErrors(result, errors, state);
+    validated.value = true;
+    return result.length === 0;
+  }
+  return { form, attrs, valid, errors, validate };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@merkaly/nuxt",
-  "version": "0.3.0",
+  "version": "0.3.2",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/merkaly-io/nuxt.git"
@@ -60,6 +60,8 @@
     "bootstrap": "^5.3.8",
     "bootstrap-vue-next": "^0.43.0",
     "change-case": "^5",
+    "class-transformer": "^0.5.1",
+    "class-validator": "^0.14.3",
     "eslint": "^9.39.1",
     "filesize": "^11.0.2",
     "nuxt": "^4.3.0",