@merkaly/nuxt 0.3.1 → 0.4.0

package/dist/module.json

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

package/dist/runtime/components/dropdown/DropdownIcon.d.vue.ts

@@ -1,19 +1,25 @@
 import type { BaseButtonVariant, BaseSize } from 'bootstrap-vue-next';
-declare var __VLS_8: {};
+import type { PropType } from 'vue';
+declare var __VLS_14: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_8) => any;
+    default?: (props: typeof __VLS_14) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     size: {
         type: PropType<keyof BaseSize>;
         default: () => string;
     };
+    icon: {
+        type: StringConstructor;
+        default: () => string;
+    };
     text: {
         type: StringConstructor;
         default: () => string;
     };
     variant: {
         type: PropType<keyof BaseButtonVariant>;
+        default: () => undefined;
     };
     solid: {
         type: BooleanConstructor;
@@ -24,12 +30,17 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         type: PropType<keyof BaseSize>;
         default: () => string;
     };
+    icon: {
+        type: StringConstructor;
+        default: () => string;
+    };
     text: {
         type: StringConstructor;
         default: () => string;
     };
     variant: {
         type: PropType<keyof BaseButtonVariant>;
+        default: () => undefined;
     };
     solid: {
         type: BooleanConstructor;
@@ -37,8 +48,9 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     };
 }>> & Readonly<{}>, {
     text: string;
-    size: any;
-    variant: any;
+    size: keyof BaseSize;
+    variant: keyof BaseButtonVariant;
+    icon: string;
     solid: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/runtime/components/dropdown/DropdownIcon.vue

@@ -1,9 +1,11 @@
 <script setup>
 import { computed, useSlots } from "vue";
+import FormatIcon from "../format/FormatIcon.vue";
 const props = defineProps({
   size: { type: String, default: () => "sm" },
-  text: { type: String, default: () => "Actions" },
-  variant: { type: String },
+  icon: { type: String, default: () => "ellipsis-v" },
+  text: { type: String, default: () => "" },
+  variant: { type: String, default: () => void 0 },
   solid: { type: Boolean, default: () => false }
 });
 const slots = useSlots();
@@ -11,7 +13,16 @@ const noDefault = computed(() => !slots.default);
 </script>
 
 <template>
-  <BDropdown :disabled="noDefault" :size="props.size" :text="props.text" :variant="props.variant" auto-close="outside">
+  <BDropdown
+    :disabled="noDefault"
+    :size="props.size"
+    :text="props.text"
+    :variant="props.variant"
+    auto-close="outside"
+    no-caret>
+    <template #button-content>
+      <FormatIcon :name="props.icon" :text="props.text" />
+    </template>
     <slot />
   </BDropdown>
 </template>

package/dist/runtime/components/dropdown/DropdownIcon.vue.d.ts

@@ -1,19 +1,25 @@
 import type { BaseButtonVariant, BaseSize } from 'bootstrap-vue-next';
-declare var __VLS_8: {};
+import type { PropType } from 'vue';
+declare var __VLS_14: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_8) => any;
+    default?: (props: typeof __VLS_14) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     size: {
         type: PropType<keyof BaseSize>;
         default: () => string;
     };
+    icon: {
+        type: StringConstructor;
+        default: () => string;
+    };
     text: {
         type: StringConstructor;
         default: () => string;
     };
     variant: {
         type: PropType<keyof BaseButtonVariant>;
+        default: () => undefined;
     };
     solid: {
         type: BooleanConstructor;
@@ -24,12 +30,17 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         type: PropType<keyof BaseSize>;
         default: () => string;
     };
+    icon: {
+        type: StringConstructor;
+        default: () => string;
+    };
     text: {
         type: StringConstructor;
         default: () => string;
     };
     variant: {
         type: PropType<keyof BaseButtonVariant>;
+        default: () => undefined;
     };
     solid: {
         type: BooleanConstructor;
@@ -37,8 +48,9 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     };
 }>> & Readonly<{}>, {
     text: string;
-    size: any;
-    variant: any;
+    size: keyof BaseSize;
+    variant: keyof BaseButtonVariant;
+    icon: string;
     solid: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

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/input/InputMoney.d.vue.ts

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

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

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

@@ -7,6 +7,10 @@ declare const __VLS_export: <G>(__VLS_props: NonNullable<Awaited<typeof __VLS_se
             type: StringConstructor;
             default: () => string;
         };
+        hideHeader: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
         hideFooter: {
             type: BooleanConstructor;
             default: boolean;
@@ -40,6 +44,11 @@ declare const __VLS_export: <G>(__VLS_props: NonNullable<Awaited<typeof __VLS_se
             item: G;
             key: string;
         }) => any) | undefined;
+    } & {
+        bulk?: (props: {
+            items: G[];
+            count: number;
+        }) => any;
     } & {
         search?: (props: {}) => any;
     } & {

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

@@ -9,6 +9,7 @@ const emit = defineEmits(["fetch", "toggle:item"]);
 const slots = useSlots();
 const props = defineProps({
   emptyText: { type: String, default: () => "No items found" },
+  hideHeader: { type: Boolean, default: false },
   hideFooter: { type: Boolean, default: false },
   hidePagination: { type: Boolean, default: false },
   hideSelect: { type: Boolean, default: false }
@@ -17,8 +18,9 @@ const $datagrid = defineModel({ type: Object, ...{ type: Object, required: true
 const instance = getCurrentInstance();
 const canFetch = Boolean(instance?.vnode?.props?.onFetch);
 const canFilter = Boolean(slots.filters);
-const hasDetails = computed(() => Boolean(slots["details"]));
-const hasActions = computed(() => Boolean(slots["actions"]));
+const hasDetailsSlot = computed(() => Boolean(slots["details"]));
+const hasActionsSlot = computed(() => Boolean(slots["actions"]));
+const hasBulkSlot = computed(() => Boolean(slots["bulk"]));
 const visibleColumns = computed(() => Object.entries($datagrid.value.columns));
 const tableColspan = computed(() => {
   const baseColumns = 2;
@@ -50,9 +52,10 @@ const visibleItems = computed(() => {
   const start = Math.max(0, paginationText.value.values.current - 1);
   return $datagrid.value.items.slice(start, paginationText.value.values.final);
 });
+const selectedItems = computed(() => $datagrid.value.items.filter((it) => it._checked));
 const checkboxAllAttrs = computed(() => {
   const attrs = {};
-  const values = $datagrid.value.items.map((it) => it._checked);
+  const values = selectedItems.value.map((it) => it._checked);
   const allChecked = values.length > 0 && values.every(Boolean);
   const someChecked = values.some(Boolean);
   attrs["checked"] = allChecked;
@@ -71,14 +74,28 @@ function toggleDetails(item) {
   record._showDetails = !record._showDetails;
   emit("toggle:item", item, Boolean(record._showDetails));
 }
+function emitSearch() {
+  $datagrid.value.page = 1;
+  emit("fetch", "search");
+}
 </script>
 
 <template>
   <BCard no-body>
-    <BCardHeader class="align-items-center p-4">
+    <BCardHeader v-if="!props.hideHeader" class="align-items-center p-4">
       <BCardTitle>
+        <div v-if="hasBulkSlot && !props.hideSelect && selectedItems.length" class="w-35px">
+          <DropdownIcon icon="caret-down" size="sm" toggle-class="p-2">
+            <slot name="bulk" v-bind="{ items: selectedItems, count: selectedItems.length }" />
+          </DropdownIcon>
+        </div>
+
         <slot name="search">
-          <InputSearch :disabled="$datagrid.loading" class="w-250px" />
+          <InputSearch
+            v-model="$datagrid.search"
+            :disabled="$datagrid.loading"
+            class="max-w-250px"
+            @change="emitSearch()" />
         </slot>
       </BCardTitle>
 
@@ -133,14 +150,14 @@ function toggleDetails(item) {
 
     <BTableSimple
       :class="{ 'h-100': !visibleItems.length || $datagrid.loading }"
-      class="mb-0"
+      class="mb-0 overflow-auto"
       hover
       responsive="lg"
       small
       table-class="align-middle table-row-dashed gy-3 h-100">
       <BThead class="sticky-top z-index-1">
         <BTr class="text-start text-body-secondary fw-bold fs-7 text-uppercase gs-0">
-          <BTh v-if="hasDetails" class="p-0 w-25px" />
+          <BTh v-if="hasDetailsSlot" class="p-0 w-25px" />
 
           <BTh v-if="!props.hideSelect" class="w-40px px-0">
             <div class="form-check form-check-sm form-check-custom cell-checkbox">
@@ -161,7 +178,7 @@ function toggleDetails(item) {
             </BTh>
           </template>
 
-          <BTh v-if="hasActions" class="text-end px-3" />
+          <BTh v-if="hasActionsSlot" class="text-end px-3" />
         </BTr>
       </BThead>
 
@@ -184,7 +201,7 @@ function toggleDetails(item) {
       <BTbody v-else class="fw-semibold text-gray-600">
         <template v-for="(item, idx) in visibleItems" :key="idx">
           <BTr>
-            <BTd v-if="hasDetails" class="p-0 w-25px">
+            <BTd v-if="hasDetailsSlot" class="p-0 w-25px">
               <BButton
                 class="w-25px h-100 rounded-0 p-0 bg-light bg-hover-light-secondary border-end border-dashed"
                 size="sm"
@@ -208,14 +225,14 @@ function toggleDetails(item) {
               </BTd>
             </template>
 
-            <BTd v-if="hasActions" class="text-end px-3">
-              <DropdownIcon toggle-class="border border-secondary-subtle border-dashed text-body">
+            <BTd v-if="hasActionsSlot" class="text-end px-3">
+              <DropdownIcon toggle-class="border border-secondary-subtle border-dashed text-body py-1 px-3">
                 <slot :index="idx" :item="item" name="actions" />
               </DropdownIcon>
             </BTd>
           </BTr>
 
-          <BTr v-if="hasDetails && item._showDetails">
+          <BTr v-if="hasDetailsSlot && item._showDetails">
             <BTd :colspan="tableColspan" class="p-0">
               <slot
                 :index="idx"

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

@@ -7,6 +7,10 @@ declare const __VLS_export: <G>(__VLS_props: NonNullable<Awaited<typeof __VLS_se
             type: StringConstructor;
             default: () => string;
         };
+        hideHeader: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
         hideFooter: {
             type: BooleanConstructor;
             default: boolean;
@@ -40,6 +44,11 @@ declare const __VLS_export: <G>(__VLS_props: NonNullable<Awaited<typeof __VLS_se
             item: G;
             key: string;
         }) => any) | undefined;
+    } & {
+        bulk?: (props: {
+            items: G[];
+            count: number;
+        }) => any;
     } & {
         search?: (props: {}) => any;
     } & {

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,20 +1,13 @@
 interface NavigationItem {
-    text: string | null;
-    path: string;
+    disabled?: boolean;
     loading?: boolean;
+    path: string;
+    text: string | null;
 }
 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;
-    }[]>;
+    current: import("vue").ComputedRef<NavigationItem | undefined>;
+    items: import("vue").ComputedRef<NavigationItem[]>;
     defer: (route: {
         path: string;
     }) => void;

package/dist/runtime/composables/useNavigation.js

@@ -3,49 +3,54 @@ import { useState } from "#imports";
 export function useNavigation(page) {
   const list = useState("breadcrumbs", () => []);
   const pendingRoute = useState("breadcrumbs:pending", () => null);
-  function normalizePath(base, path) {
-    return `${base.replace(/\/$/, "")}/${path.replace(/^\//, "")}`;
-  }
-  function resolve(item) {
-    return typeof item === "function" ? item() : item;
-  }
+  const resolveItem = (item) => typeof item === "function" ? item() : item;
+  const normalizePath = (base, path) => `${base.replace(/\/$/, "")}/${path.replace(/^\//, "")}`;
+  const isVisibleItem = (item) => item.text != null && !item.loading;
   const resolved = computed(() => {
     let uri = "";
-    return list.value.map((item) => {
-      const { text, path = "", loading } = resolve(item);
-      uri = normalizePath(uri, path);
-      return { path: uri, text, loading: !!loading };
+    return list.value.map((rawItem) => {
+      const item = resolveItem(rawItem);
+      uri = normalizePath(uri, item.path ?? "");
+      return {
+        disabled: item.disabled,
+        loading: !!item.loading,
+        path: uri,
+        text: item.text
+      };
     });
   });
-  const items = computed(() => {
-    return resolved.value.filter(({ text, loading }) => text != null && !loading);
-  });
-  const current = computed(() => {
-    return resolved.value.at(-1);
-  });
+  const items = computed(() => resolved.value.filter(isVisibleItem));
+  const current = computed(() => resolved.value.at(-1));
   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 = [];
-  }
-  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);
-    }
+    const index = findLastMatchingIndex(route);
+    list.value = index >= 0 ? list.value.slice(0, index + 1) : [];
   }
   function defer(route) {
     pendingRoute.value = route.path;
   }
+  function findLastMatchingIndex(route) {
+    return resolved.value.findLastIndex(
+      (item) => route.startsWith(item.path)
+    );
+  }
+  function upsertPage(page2) {
+    const { path } = resolveItem(page2);
+    const index = list.value.findIndex(
+      (item) => resolveItem(item).path === path
+    );
+    if (index >= 0) {
+      list.value[index] = page2;
+      return;
+    }
+    list.value.push(page2);
+  }
+  if (!page) {
+    return { current, items, defer, regenerate };
+  }
+  regenerate();
+  upsertPage(page);
   return { current, items, defer, regenerate };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@merkaly/nuxt",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/merkaly-io/nuxt.git"
@@ -42,9 +42,9 @@
     "test:watch": "vitest watch"
   },
   "dependencies": {
-    "@auth0/auth0-spa-js": "^2.14.0",
+    "@auth0/auth0-spa-js": "^2.15.0",
     "@bootstrap-vue-next/nuxt": "^0.43.0",
-    "@nuxt/devtools": "^3.1.0",
+    "@nuxt/devtools": "^3.2.1",
     "@nuxt/eslint": "1.13.0",
     "@nuxt/eslint-config": "^1.13.0",
     "@nuxt/fonts": "0.13.0",
@@ -60,6 +60,7 @@
     "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",