atom-nuxt 1.0.156 → 1.2.2

package/dist/runtime/components/CrudPaginatedLoader.vue

@@ -1,15 +1,16 @@
 <script setup async>
-import { useCrudApi } from "../composables/useCrudApi";
-import { useCrudConverters } from "../composables/useCrudConverters";
-import { usePreviousRoute } from "../composables/usePreviousRoute";
-import { useRoute, useRouter } from "#app";
+import {useCrudApi} from "../composables/useCrudApi";
+import {useCrudConverters} from "../composables/useCrudConverters";
+import {usePreviousRoute} from "../composables/usePreviousRoute";
+import {useRoute, useRouter} from '#app';
 import CrudFilterList from "./CrudFilterList.vue";
-import { computed, ref, watch, onMounted, onBeforeUnmount } from "vue";
-import { useDebounceFn } from "@vueuse/core";
-import { useListenerService } from "../composables/useListenerService";
+import {computed, ref, watch, onMounted, onBeforeUnmount} from "vue";
+import {useDebounceFn} from '@vueuse/core'
+import {useListenerService} from "../composables/useListenerService";
 import CrudFormDialog from "./CrudFormDialog.vue";
 import CrudErrorDisplay from "./CrudErrorDisplay.vue";
-const { parseQuery, stringifyQuery, cloneDeep } = useCrudConverters();
+
+const {parseQuery, stringifyQuery, cloneDeep} = useCrudConverters();
 const props = defineProps({
   fullScreenDialog: {
     type: Boolean,
@@ -90,6 +91,13 @@ const props = defineProps({
       return "Create item";
     }
   },
+  viewTitle: {
+    type: String,
+    required: false,
+    default() {
+      return "View item";
+    }
+  },
   customFilters: {
     type: Object,
     required: false,
@@ -144,29 +152,40 @@ const {
   hasExportErrors,
   hasListErrors
 } = useCrudApi(props.path, false, props.transformItem, props.transformItems);
+
 perPage.value = props.perPage;
+
 const route = useRoute();
 const router = useRouter();
 const previousRoute = usePreviousRoute();
-const action = computed(() => route.query[(props.loaderKey ?? "") + "action"]);
-const actionId = computed(() => route.query[(props.loaderKey ?? "") + "actionId"]);
+
+const action = computed(() => route.query[(props.loaderKey ?? '') + 'action']);
+const actionId = computed(() => route.query[(props.loaderKey ?? '') + 'actionId']);
+
 const dialogOpen = computed({
-  get: () => !!(action.value === "create" || action.value === "update" && actionId.value || action.value === "delete" && actionId.value),
+  get: () => !!(action.value === "create" || (action.value === "update" && actionId.value) || (action.value === "delete" && actionId.value) || (action.value === "view" && actionId.value)),
   set: (value) => {
     if (!value) {
-      const hasBackState = router.options.history.state.back;
-      console.log("hasBackState", hasBackState);
-      console.log("previousRoute", previousRoute.value);
-      console.log("route", route);
-      const previousRouteName = previousRoute.value?.name;
-      const currentRouteName = route.name;
-      console.log("previousRouteName", previousRouteName);
-      console.log("currentRouteName", currentRouteName);
-      if (hasBackState && previousRouteName === currentRouteName) {
-        console.log("going back");
+      const hasBackState = router.options.history.state.back
+
+      console.log('hasBackState', hasBackState)
+      console.log('previousRoute', previousRoute.value)
+      console.log('route', route)
+
+      const previousRouteName = previousRoute.value?.name
+      const currentRouteName = route.name
+
+      console.log('previousRouteName', previousRouteName)
+      console.log('currentRouteName', currentRouteName)
+
+
+      if (hasBackState && previousRouteName === currentRouteName) { // Only go back if there's a back state AND the previous route is the same
+        console.log('going back')
         router.back();
       } else {
-        const currentQuery = { ...route.query };
+        // ✅ Clone the query object!
+        const currentQuery = {...route.query};
+
         if (props.loaderKey) {
           delete currentQuery[`${props.loaderKey}action`];
           delete currentQuery[`${props.loaderKey}actionId`];
@@ -174,35 +193,40 @@ const dialogOpen = computed({
           delete currentQuery.action;
           delete currentQuery.actionId;
         }
+
         const finalRoute = {
           path: route.path,
-          query: currentQuery
+          query: currentQuery,
         };
         router.replace(finalRoute);
       }
     }
   }
 });
+
+
 const page = computed(() => props.loaderKey ? parseQuery(route.query[props.loaderKey])?.page ?? 1 : route.query.page ?? 1);
-const filterValues = props.loaderKey ? ref({ ...props.customFilters, ...parseQuery(route.query[props.loaderKey]) }) : ref({ ...props.customFilters, ...route.query });
-const onQueryChange = (page2) => {
+const filterValues = props.loaderKey ? ref({...props.customFilters, ...parseQuery(route.query[props.loaderKey])} ?? props.customFilters) : ref({...props.customFilters, ...route.query});
+const onQueryChange = (page) => {
   console.error("QUERY CHANGED");
-  const newQuery = {};
+  const newQuery = {}
   const existingQuery = parseQuery(route.query);
+
   for (const key in filterValues.value) {
     if (filterValues.value[key] !== null && filterValues.value[key] !== "") {
       newQuery[key] = filterValues.value[key];
     }
   }
-  newQuery.page = page2;
+  newQuery.page = page;
   let finalQuery = {
-    ...existingQuery
-  };
+    ...existingQuery,
+  }
   if (props.loaderKey) {
     finalQuery[props.loaderKey] = stringifyQuery(newQuery);
   } else {
     finalQuery = newQuery;
   }
+  //Delete action and actionId from query when filters or page change
   if (props.loaderKey) {
     delete finalQuery[`${props.loaderKey}action`];
     delete finalQuery[`${props.loaderKey}actionId`];
@@ -211,59 +235,81 @@ const onQueryChange = (page2) => {
     delete finalQuery.actionId;
   }
   console.error("Setting query", finalQuery);
-  router.replace({ path: route.path, query: finalQuery, force: true });
-};
+  router.replace({path: route.path, query: finalQuery, force: true})
+}
 watch(currentPage, (newVal, oldValue) => {
   onQueryChange(currentPage.value);
 });
 watch(filterValues, (newVal, oldValue) => {
   console.error("FILTERS CHANGED");
   onQueryChange(1);
-}, { deep: true });
+}, {deep: true});
+
+
 watch(() => page, () => {
   console.error("ROUTE CHANGED");
   debouncedGet();
-}, { deep: true });
+}, {deep: true});
 watch(() => filterValues, () => {
   console.error("ROUTE CHANGED");
   debouncedGet();
-}, { deep: true });
+}, {deep: true});
+
+watch(() => props.customFilters, (newVal) => {
+  // Update filterValues when customFilters prop changes
+  filterValues.value = {...newVal, ...filterValues.value};
+}, {deep: true});
+
 const debouncedGet = useDebounceFn(() => {
   console.error("DEBOUNCED GET");
   getItems(Number.parseInt(page.value) ?? null, null, filterValues.value);
-}, 200);
+}, 200)
+
 const updateForm = async (id) => {
-  const newQuery = { query: { ...route.query } };
+  const newQuery = {query: {...route.query}};
   if (props.loaderKey) {
-    newQuery.query[(props.loaderKey ?? "") + "action"] = "update";
-    newQuery.query[(props.loaderKey ?? "") + "actionId"] = id;
+    newQuery.query[(props.loaderKey ?? '') + 'action'] = "update";
+    newQuery.query[(props.loaderKey ?? '') + 'actionId'] = id;
   } else {
     newQuery.query.action = "update";
     newQuery.query.actionId = id;
   }
   await router.push(newQuery);
-};
+}
 const deleteForm = async (id) => {
-  const newQuery = { query: { ...route.query } };
+
+  const newQuery = {query: {...route.query}};
   if (props.loaderKey) {
-    newQuery.query[(props.loaderKey ?? "") + "action"] = "delete";
-    newQuery.query[(props.loaderKey ?? "") + "actionId"] = id;
+    newQuery.query[(props.loaderKey ?? '') + 'action'] = "delete";
+    newQuery.query[(props.loaderKey ?? '') + 'actionId'] = id;
   } else {
     newQuery.query.action = "delete";
     newQuery.query.actionId = id;
   }
   await router.push(newQuery);
-};
+}
+const viewForm = async (id) => {
+  const newQuery = {query: {...route.query}};
+  if (props.loaderKey) {
+    newQuery.query[(props.loaderKey ?? '') + 'action'] = "view";
+    newQuery.query[(props.loaderKey ?? '') + 'actionId'] = id;
+  } else {
+    newQuery.query.action = "view";
+    newQuery.query.actionId = id;
+  }
+  await router.push(newQuery);
+}
 const createForm = () => {
   item.value = props.initialItem ? cloneDeep(props.initialItem) : {};
-  const newQuery = { query: { ...route.query } };
+  const newQuery = {query: {...route.query}};
   if (props.loaderKey) {
-    newQuery.query[(props.loaderKey ?? "") + "action"] = "create";
+    newQuery.query[(props.loaderKey ?? '') + 'action'] = "create";
   } else {
     newQuery.query.action = "create";
   }
   router.push(newQuery);
-};
+}
+
 const saveAction = async () => {
   formPending.value = true;
   let itemToSave = JSON.parse(JSON.stringify(item.value));
@@ -294,12 +340,14 @@ const saveAction = async () => {
     await getItems(Number.parseInt(page.value) ?? null, null, filterValues.value);
     notify(savedPath + ":" + savedAction, savedItem);
   }
-};
+}
+
 if (props.await) {
   await getItems(page.value ?? null, null, filterValues.value);
 } else {
   getItems(page.value ?? null, null, filterValues.value);
 }
+
 watch(action, (newVal, oldValue) => {
   try {
     if (action.value === "update" && actionId.value) {
@@ -308,30 +356,34 @@ watch(action, (newVal, oldValue) => {
       item.value = props.initialItem ? cloneDeep(props.initialItem) : {};
     } else if (action.value === "delete" && actionId.value) {
       getItem(actionId.value);
+    } else if (action.value === "view" && actionId.value) {
+      getItem(actionId.value);
     }
   } catch (error) {
     console.error("Error in actionId watcher:", error);
   }
-}, { immediate: true });
-const { addListener, removeLocalListenersWithEvent, notify } = useListenerService();
+}, {immediate: true});
+
+const {addListener, removeLocalListenersWithEvent, notify} = useListenerService();
 onMounted(() => {
   props.listeners.forEach((listener) => {
     addListener(listener, (data) => {
       getItems(Number.parseInt(page.value) ?? null, null, filterValues.value);
     });
   });
-});
+})
 onBeforeUnmount(() => {
   props.listeners.forEach((listener) => {
     removeLocalListenersWithEvent(listener);
   });
-});
+})
 const exportAction = async () => {
   await exportItems(filterValues.value);
   if (!hasExportErrors.value) {
-    window.open(exportUrl.value, "_blank");
+    window.open(exportUrl.value, '_blank');
   }
-};
+}
+
 </script>
 
 <template>
@@ -344,6 +396,7 @@ const exportAction = async () => {
       :pending="listPending"
       :create-action="createForm"
       :update-action="updateForm"
+      :view-action="viewForm"
       :delete-action="deleteForm"
       :form-pending="formPending"
       :export-action="exportAction"
@@ -376,6 +429,7 @@ const exportAction = async () => {
               :items="items"
               :pending="listPending"
               :update-action="updateForm"
+              :view-action="viewForm"
               :delete-action="deleteForm"
               :form-pending="formPending"
             >
@@ -405,6 +459,7 @@ const exportAction = async () => {
       :create-title="createTitle"
       :update-title="updateTitle"
       :delete-title="deleteTitle"
+      :view-title="viewTitle"
       :save-action="saveAction"
       :full-screen="fullScreenDialog"
     >
@@ -419,3 +474,7 @@ const exportAction = async () => {
 
   </div>
 </template>
+
+<style scoped>
+
+</style>

package/dist/runtime/components/CrudUploadField.vue

@@ -1,11 +1,14 @@
 <script setup>
-import { ref, computed, watch } from "vue";
+import { ref, computed, watch } from 'vue';
+
 import { useCrudApi } from "../composables/useCrudApi";
 import { useCrudConverters } from "../composables/useCrudConverters";
 import CrudErrorDisplay from "../components/CrudErrorDisplay.vue";
 import CrudListLoader from "./CrudListLoader.vue";
 import CrudUploadFieldSelection from "./CrudUploadFieldSelection.vue";
+
 const { toBase64, getFileType } = useCrudConverters();
+
 const props = defineProps({
   replaceable: {
     type: Boolean,
@@ -30,11 +33,11 @@ const props = defineProps({
   },
   mimeKey: {
     type: String,
-    default: "mimeType"
+    default: 'mimeType'
   },
   fileNameKey: {
     type: String,
-    default: "fileName"
+    default: 'fileName'
   },
   customFilters: {
     type: Object,
@@ -49,29 +52,37 @@ const props = defineProps({
     }
   }
 });
+
 const model = defineModel();
+
 const dialog = ref(false);
 const filesToUpload = ref([]);
 const fileToUpload = ref(null);
 const searchValue = ref(null);
+
+// Temporary selection used within the dialog
 const tempModel = ref(null);
-const cloneModel = () => props.multiple ? [...model.value || []] : model.value;
+
+const cloneModel = () => props.multiple ? [...(model.value || [])] : model.value;
+
 const finish = () => {
   model.value = props.multiple ? [...tempModel.value] : tempModel.value;
   dialog.value = false;
 };
+
 const onSelectImage = (item) => {
   if (props.multiple) {
     if (!tempModel.value) tempModel.value = [];
     if (!tempModel.value.includes(item)) {
       tempModel.value.push(item);
     } else {
-      tempModel.value = tempModel.value.filter((i) => i !== item);
+      tempModel.value = tempModel.value.filter(i => i !== item);
     }
   } else {
     tempModel.value = tempModel.value === item ? null : item;
   }
 };
+
 const {
   createItem: createUpload,
   item: completedUpload,
@@ -81,6 +92,7 @@ const {
   hasFormErrors: hasUploadErrors,
   formErrors: uploadErrors
 } = useCrudApi(props.path);
+
 const processUploads = async () => {
   uploadsLoading.value = true;
   if (props.multiple) {
@@ -110,12 +122,14 @@ const processUploads = async () => {
     }
   }
   uploadsLoading.value = false;
+
   if (props.multiple) {
     filesToUpload.value = [];
   } else {
     fileToUpload.value = null;
   }
 };
+
 const selectionFilters = computed(() => {
   let filters = {};
   if (hasSelection.value) {
@@ -123,18 +137,21 @@ const selectionFilters = computed(() => {
   }
   return filters;
 });
+
 const hasSelection = computed(() => {
   if (props.multiple) {
     return model.value && model.value.length > 0;
   } else {
-    return model.value && model.value !== "" && (model.value.length > 0 || model.value > 0);
+    return model.value && model.value !== '' && (model.value.length > 0 || model.value > 0);
   }
 });
+
 watch(() => dialog.value, (val) => {
   if (val) {
     tempModel.value = cloneModel();
   }
 });
+
 watch(() => filesToUpload.value, () => {
   if (filesToUpload.value.length > 0) {
     processUploads();
@@ -309,3 +326,8 @@ watch(() => fileToUpload.value, () => {
     </v-dialog>
   </div>
 </template>
+
+
+<style scoped>
+
+</style>

package/dist/runtime/components/CrudUploadFieldSelection.vue

@@ -1,11 +1,13 @@
 <script setup>
-import { computed, defineModel } from "vue";
-import { useCrudConverters } from "../composables/useCrudConverters";
+import {computed, defineModel} from 'vue';
+import {useCrudConverters} from '../composables/useCrudConverters';
+
 const {
   formatStringDate,
   uploadToUrl,
   mimeTypeToMdiIcon
 } = useCrudConverters();
+
 const props = defineProps({
   item: {
     type: Object,
@@ -13,11 +15,11 @@ const props = defineProps({
   },
   mimeKey: {
     type: String,
-    default: "mimeType"
+    default: 'mimeType'
   },
   fileNameKey: {
     type: String,
-    default: "fileName"
+    default: 'fileName'
   },
   hideTitle: {
     type: Boolean,
@@ -29,10 +31,13 @@ const props = defineProps({
     }
   }
 });
+
 const copyUrl = () => {
   navigator.clipboard.writeText(displayUrl.value);
 };
+
 const model = defineModel();
+
 const selected = computed(() => {
   if (props.item === null) {
     return false;
@@ -42,55 +47,58 @@ const selected = computed(() => {
   }
   return model.value === props.item.id;
 });
+
 const isVideo = computed(() => {
   if (props.item) {
-    return props.item[props.mimeKey].includes("video");
+    return props.item[props.mimeKey].includes('video');
   }
   return false;
 });
 const isImage = computed(() => {
   if (props.item) {
-    return props.item[props.mimeKey].includes("image");
+    return props.item[props.mimeKey].includes('image');
   }
   return false;
 });
+
 const url = computed(() => {
   if (props.item) {
-    return uploadToUrl(props.item, isImage.value ? "thumbnail" : "original");
+    return uploadToUrl(props.item, isImage.value ? 'thumbnail' : 'original');
   }
   return null;
 });
 const displayUrl = computed(() => {
   if (props.item) {
-    return uploadToUrl(props.item, isImage.value ? "thumbnail" : "original");
+    return uploadToUrl(props.item, isImage.value ? 'thumbnail' : 'original');
   }
   return null;
 });
 const downloadUrl = computed(() => {
   if (props.item) {
-    return uploadToUrl(props.item, "original");
+    return uploadToUrl(props.item, 'original');
   }
   return null;
 });
 const largeUrl = computed(() => {
   if (props.item) {
-    return uploadToUrl(props.item, "large");
+    return uploadToUrl(props.item, 'large');
   }
   return null;
 });
+
 const containerClasses = computed(() => {
   return {
-    "pa-1": true,
-    "position-relative": true,
-    "cursor": true,
-    "d-flex": true,
-    "border": selected.value,
-    "border-primary": selected.value,
-    "shadow": selected.value
-  };
+    'pa-1': true,
+    'position-relative': true,
+    'cursor': true,
+    'd-flex': true,
+    'border': selected.value,
+    'border-primary': selected.value,
+    'shadow' : selected.value,
+  }
 });
-</script>
 
+</script>
 <template>
   <div :class="containerClasses">
     <div class="d-flex justify-center flex-fill align-center" v-bind="props">

package/dist/types.d.mts

@@ -1,9 +1,7 @@
 import type { NuxtModule } from '@nuxt/schema'
 
-import type { default as Module } from './module.mjs'
+import type { default as Module } from './module.js'
 
 export type ModuleOptions = typeof Module extends NuxtModule<infer O> ? Partial<O> : Record<string, any>
 
-export { default } from './module.mjs'
-
-export { type AtomCrudModuleOptions, type azureAdB2COptions } from './module.mjs'
+export { type AtomCrudModuleOptions, type azureAdB2COptions, default } from './module.js'

package/dist/types.d.ts

@@ -0,0 +1,7 @@
+import type { NuxtModule } from '@nuxt/schema'
+
+import type { default as Module } from './module'
+
+export type ModuleOptions = typeof Module extends NuxtModule<infer O> ? Partial<O> : Record<string, any>
+
+export { type AtomCrudModuleOptions, type azureAdB2COptions, default } from './module'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "atom-nuxt",
-  "version": "1.0.156",
+  "version": "1.2.2",
   "description": "My new Nuxt module",
   "repository": "atomengine/atom-nuxt",
   "license": "MIT",

package/dist/runtime/components/AlertDisplay.vue.d.ts

@@ -1,2 +0,0 @@
-declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-export default _default;

package/dist/runtime/components/CrudAddressSearchField.vue.d.ts

@@ -1,8 +0,0 @@
-declare const _default: import("vue").DefineComponent<{}, {
-    hint: string;
-    label: string;
-    placeholder: string;
-    countries: unknown[];
-    $props: any;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-export default _default;

package/dist/runtime/components/CrudApiSelectorField.vue.d.ts

@@ -1,30 +0,0 @@
-declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
-export default _default;
-type __VLS_WithSlots<T, S> = T & (new () => {
-    $slots: S;
-});
-declare const __VLS_component: import("vue").DefineComponent<{}, {
-    path: string;
-    multiple: boolean;
-    endpointDisplayKey: string;
-    endpointFilterKey: string;
-    endpointResponseKey: string;
-    additionalFilters: Record<string, any>;
-    disableUpdate: boolean;
-    createBtnText: string;
-    updateBtnText: string;
-    $props: any;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-type __VLS_Slots = {
-    items?: ((props: {
-        items: any;
-    }) => any) | undefined;
-} & {
-    action?: ((props: {
-        action: any;
-    }) => any) | undefined;
-} & {
-    dialogListTitle?: ((props: {
-        item: any;
-    }) => any) | undefined;
-};

package/dist/runtime/components/CrudConfirmDialog.vue.d.ts

@@ -1,18 +0,0 @@
-declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
-export default _default;
-type __VLS_WithSlots<T, S> = T & (new () => {
-    $slots: S;
-});
-declare const __VLS_component: import("vue").DefineComponent<{}, {
-    $emit: (event: "confirm", ...args: any[]) => void;
-    message: string;
-    title: string;
-    cancelText: string;
-    confirmText: string;
-    $props: any;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-type __VLS_Slots = {
-    default?: ((props: {
-        click: any;
-    }) => any) | undefined;
-};

package/dist/runtime/components/CrudErrorDisplay.vue.d.ts

@@ -1,6 +0,0 @@
-declare const _default: import("vue").DefineComponent<{}, {
-    errorKey: string;
-    errors?: Record<string, any> | undefined;
-    $props: any;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-export default _default;