atom-nuxt 1.1.0 → 1.3.0

package/dist/module.cjs

@@ -0,0 +1,5 @@
+module.exports = function(...args) {
+  return import('./module.mjs').then(m => m.default.call(this, ...args))
+}
+const _meta = module.exports.meta = require('./module.json')
+module.exports.getMeta = () => Promise.resolve(_meta)

package/dist/module.d.mts

@@ -19,5 +19,4 @@ interface AtomCrudModuleOptions {
 }
 declare const _default: _nuxt_schema.NuxtModule<AtomCrudModuleOptions, AtomCrudModuleOptions, false>;
 
-export { _default as default };
-export type { AtomCrudModuleOptions, azureAdB2COptions };
+export { type AtomCrudModuleOptions, type azureAdB2COptions, _default as default };

package/dist/module.d.ts

@@ -0,0 +1,22 @@
+import * as _nuxt_schema from '@nuxt/schema';
+
+interface azureAdB2COptions {
+    clientId: string;
+    authority: string;
+    knownAuthorities?: Array<string>;
+    redirectUri: string;
+    postLogoutRedirectUri?: string;
+    navigateToLoginRequestUrl: boolean;
+    scopes?: string[];
+}
+interface AtomCrudModuleOptions {
+    apiBaseUrl?: string;
+    storageBaseUrl?: string;
+    additionalHeaders?: Record<string, string>;
+    azureAdB2C?: azureAdB2COptions;
+    googleMapsApiKey?: string;
+    debug?: boolean;
+}
+declare const _default: _nuxt_schema.NuxtModule<AtomCrudModuleOptions, AtomCrudModuleOptions, false>;
+
+export { type AtomCrudModuleOptions, type azureAdB2COptions, _default as default };

package/dist/module.json

@@ -1,9 +1,9 @@
 {
   "name": "@atomengine/atom-nuxt",
   "configKey": "atomNuxt",
-  "version": "1.1.0",
+  "version": "1.3.0",
   "builder": {
-    "@nuxt/module-builder": "1.0.1",
-    "unbuild": "3.5.0"
+    "@nuxt/module-builder": "0.8.4",
+    "unbuild": "2.0.0"
   }
 }

package/dist/runtime/components/AlertDisplay.vue

@@ -1,43 +1,46 @@
-<script setup>
-import { useAlertService } from "../composables/useAlertService";
-import { computed } from "vue";
-const { alertMessage, alertActive } = useAlertService();
+<script setup lang="ts">
+import {useAlertService} from '../composables/useAlertService';
+import {computed} from 'vue';
+
+const {alertMessage, alertActive} = useAlertService();
+
 const message = computed(() => {
   if (!alertMessage.value || !alertActive.value) {
     return null;
   }
-  return typeof alertMessage.value === "string" ? alertMessage.value : alertMessage.value.message;
+  return typeof alertMessage.value === 'string' ? alertMessage.value : alertMessage.value.message;
 });
 const color = computed(() => {
   if (!alertMessage.value || !alertActive.value) {
     return null;
   }
-  return typeof alertMessage.value === "string" ? "success" : alertMessage.value.color || "success";
+  return typeof alertMessage.value === 'string' ? 'success' : alertMessage.value.color || 'success';
 });
 const location = computed(() => {
   if (!alertMessage.value || !alertActive.value) {
     return "";
   }
-  return typeof alertMessage.value === "string" ? "" : alertMessage.value.location || "";
+  return typeof alertMessage.value === 'string' ? "" : alertMessage.value.location || "";
 });
 const icon = computed(() => {
   if (!alertMessage.value || !alertActive.value) {
     return null;
   }
-  return typeof alertMessage.value === "string" ? null : alertMessage.value.icon || null;
+  return typeof alertMessage.value === 'string' ? null : alertMessage.value.icon || null;
 });
+
 const clickable = computed(() => {
-  if (!alertMessage.value || !alertActive.value || typeof alertMessage.value === "string" || !alertMessage.value.onClick) {
+  if (!alertMessage.value || !alertActive.value || typeof alertMessage.value === 'string' || !alertMessage.value.onClick) {
     return false;
   }
   return true;
-});
+})
 const onClick = () => {
   if (!clickable.value) {
     return;
   }
   alertMessage.value.onClick();
-};
+}
 </script>
 
 <template>
@@ -53,3 +56,7 @@ const onClick = () => {
     </div>
   </v-snackbar>
 </template>
+
+<style scoped>
+
+</style>

package/dist/runtime/components/CrudAddressSearchField.vue

@@ -1,33 +1,36 @@
 <script setup>
-import { ref, watch } from "vue";
-import { useRuntimeConfig } from "nuxt/app";
-import { useDebounceFn } from "@vueuse/core";
+import {ref, watch} from 'vue';
+import {useRuntimeConfig} from "nuxt/app";
+import {useDebounceFn} from '@vueuse/core'; // Ensure @vueuse/core is installed
+
 const atomNuxtConfig = useRuntimeConfig().public.atomNuxt;
 const props = defineProps({
   hint: {
     type: String,
-    default: "Search by postcode, city or country. You must select an option from the list."
+    default: 'Search by postcode, city or country. You must select an option from the list.'
   },
   label: {
     type: String,
-    default: "Address search"
+    default: 'Address search'
   },
   placeholder: {
     type: String,
-    default: "Start typing address"
+    default: 'Start typing address'
   },
   countries: {
     type: Array,
-    default: () => []
-    // Example: ['gb', 'fr', 'us']
+    default: () => [] // Example: ['gb', 'fr', 'us']
   }
 });
-const searchText = ref("");
+// Data
+const searchText = ref('');
 const addressSearchResults = ref([]);
 const loading = ref(false);
 const selectedPlaceId = ref(null);
 const model = defineModel();
-const placeModel = defineModel("place");
+const placeModel = defineModel("place")
+
+// Function to get autocomplete suggestions using fetch
 const fetchAutocompleteSuggestions = async (query) => {
   if (!query || loading.value) return;
   loading.value = true;
@@ -38,21 +41,23 @@ const fetchAutocompleteSuggestions = async (query) => {
         params: {
           input: query,
           key: atomNuxtConfig.googleMapsApiKey,
-          components: props.countries.length ? props.countries.map((c) => `country:${c}`).join("|") : void 0
+          components: props.countries.length
+            ? props.countries.map(c => `country:${c}`).join('|')
+            : undefined
         },
-        method: "GET"
+        method: 'GET'
       }
     );
-    if (result.status === "OK") {
-      addressSearchResults.value = result.predictions.map((prediction) => ({
+    if (result.status === 'OK') {
+      addressSearchResults.value = result.predictions.map(prediction => ({
         text: prediction.description,
         place_id: prediction.place_id
       }));
     } else {
-      console.error("Error fetching autocomplete suggestions:", result.status);
+      console.error('Error fetching autocomplete suggestions:', result.status);
     }
   } catch (error) {
-    console.error("Error fetching autocomplete suggestions:", error);
+    console.error('Error fetching autocomplete suggestions:', error);
   } finally {
     loading.value = false;
   }
@@ -68,29 +73,37 @@ const fetchPlaceId = async (placeId) => {
       `/api/maps/places`,
       {
         params: {
-          placeId,
-          key: atomNuxtConfig.googleMapsApiKey
+          placeId: placeId,
+          key: atomNuxtConfig.googleMapsApiKey,
         },
-        method: "GET"
+        method: 'GET'
       }
     );
-    if (result.status === "OK") {
+    // Check if the API call was successful
+    if (result.status === 'OK') {
       placeModel.value = result.result;
       model.value = `${result.result.geometry.location.lat},${result.result.geometry.location.lng}`;
     } else {
-      console.error("Error fetching place details:", result.status);
+      console.error('Error fetching place details:', result.status);
     }
   } catch (error) {
-    console.error("Error fetching place details:", error);
+    console.error('Error fetching place details:', error);
   }
 };
+
+
+// Debounce the search text updates to avoid excessive API calls
 const debouncedFetchAutocompleteSuggestions = useDebounceFn(fetchAutocompleteSuggestions, 500);
+
+// Watch for changes to searchText and trigger debounced API calls
 watch(searchText, (newQuery) => {
   debouncedFetchAutocompleteSuggestions(newQuery);
 });
+
 watch(selectedPlaceId, (newPlaceId) => {
   fetchPlaceId(newPlaceId);
 });
+
 </script>
 
 <template>

package/dist/runtime/components/CrudApiSelectorField.vue

@@ -1,31 +1,44 @@
 <script setup>
 import CrudListLoader from "./CrudListLoader.vue";
-import { defineModel, ref, computed } from "vue";
+import {defineModel, ref, computed} from "vue";
+
 const props = defineProps({
-  path: { type: String, required: true },
-  multiple: { type: Boolean, default: false },
-  endpointDisplayKey: { type: String, default: "name" },
-  endpointFilterKey: { type: String, default: "keywords" },
-  endpointResponseKey: { type: String, default: "id" },
-  additionalFilters: { type: Object, default: () => ({}) },
-  disableUpdate: { type: Boolean, default: false },
-  createBtnText: { type: String, default: "Select" },
-  updateBtnText: { type: String, default: "Update" }
+  path: {type: String, required: true},
+  multiple: {type: Boolean, default: false},
+  endpointDisplayKey: {type: String, default: "name"},
+  endpointFilterKey: {type: String, default: "keywords"},
+  endpointResponseKey: {type: String, default: "id"},
+  additionalFilters: {type: Object, default: () => ({})},
+  disableUpdate: {type: Boolean, default: false},
+  createBtnText: {type: String, default: "Select"},
+  updateBtnText: {type: String, default: "Update"}
 });
+
 const selectionModel = defineModel();
 const search = ref("");
 const searchDialog = ref(false);
 const searchDialogSelectedValue = ref(null);
+
 const hasSelection = computed(() => props.multiple ? selectionModel.value !== null && Array.isArray(selectionModel.value) && selectionModel.value.length > 0 : selectionModel.value !== null);
+
 const onAction = () => {
-  searchDialogSelectedValue.value = selectionModel.value ? Array.isArray(selectionModel.value) ? [...selectionModel.value] : selectionModel.value : null;
+  // Clone selectionModel into searchDialogSelectedValue (to modify freely inside the dialog)
+  searchDialogSelectedValue.value = selectionModel.value
+    ? Array.isArray(selectionModel.value)
+      ? [...selectionModel.value]
+      : selectionModel.value
+    : null;
   searchDialog.value = true;
 };
+
 const onDone = () => {
+  // Update selectionModel only when clicking "Done"
   selectionModel.value = searchDialogSelectedValue.value;
   searchDialog.value = false;
 };
+
 const onCancel = () => {
+  // Close the dialog without saving changes
   searchDialog.value = false;
 };
 </script>

package/dist/runtime/components/CrudConfirmDialog.vue

@@ -1,40 +1,41 @@
 <script setup>
-import { ref, defineProps, defineEmits } from "vue";
+import { ref, defineProps, defineEmits } from 'vue';
 defineProps({
   title: {
     type: String,
     default() {
-      return "Delete item";
+      return "Delete item"
     }
   },
   message: {
     type: String,
     default() {
-      return "Are you sure you want to delete this item?";
+      return "Are you sure you want to delete this item?"
     }
   },
   cancelText: {
     type: String,
     default() {
-      return "Cancel";
+      return "Cancel"
     }
   },
   confirmText: {
     type: String,
     default() {
-      return "OK";
+      return "OK"
     }
   }
-});
-const emit = defineEmits(["confirm"]);
-const dialog = ref(false);
+})
+const emit = defineEmits(['confirm']); // Declare the 'confirm' event
+const dialog = ref(false)
 const open = () => {
-  dialog.value = true;
-};
+  dialog.value = true
+}
 const handleConfirm = () => {
-  emit("confirm");
+  emit('confirm'); // Emit the 'confirm' event
   dialog.value = false;
 };
+
 </script>
 
 <template>
@@ -78,6 +79,11 @@ const handleConfirm = () => {
         </v-btn>
       </v-card-actions>
 
+
     </v-card>
   </v-dialog>
 </template>
+
+<style scoped>
+
+</style>

package/dist/runtime/components/CrudErrorDisplay.vue

@@ -1,6 +1,6 @@
 <script setup>
-import { computed } from "vue";
-import { defineProps } from "vue";
+import {computed} from 'vue';
+import {defineProps} from 'vue';
 const props = defineProps({
   errors: Object,
   errorKey: {
@@ -8,9 +8,9 @@ const props = defineProps({
     default: null
   }
 });
+
 const random = computed(() => Math.random());
 </script>
-
 <template>
   <v-alert
       v-if="errors != null && errors[errorKey ?? 'global'] != null"
@@ -26,3 +26,4 @@ const random = computed(() => Math.random());
     </div>
   </v-alert>
 </template>
+

package/dist/runtime/components/CrudFilter.vue

@@ -1,103 +1,121 @@
 <script setup>
 import CrudListLoader from "./CrudListLoader.vue";
-import { ref, computed, watch, onMounted, onBeforeUnmount } from "vue";
-import { useDebounceFn } from "@vueuse/core";
+import {ref, computed, watch, onMounted, onBeforeUnmount} from "vue";
+import {useDebounceFn} from "@vueuse/core";
 import CrudAddressSearchField from "./CrudAddressSearchField.vue";
-import { useCrudConverters } from "../composables/useCrudConverters";
-import { useCrudApi } from "../composables/useCrudApi";
+import {useCrudConverters} from "../composables/useCrudConverters";
+import {useCrudApi} from "../composables/useCrudApi";
+
 const props = defineProps({
   filter: {
     type: Object,
-    required: true
+    required: true,
   },
   modelValue: null,
-  disabled: Boolean
+  disabled: Boolean,
 });
 const model = ref();
-const emit = defineEmits(["update:modelValue"]);
+const emit = defineEmits(['update:modelValue']);
+// Watch for changes in the prop and update the internal model
 watch(() => props.modelValue, (newValue) => {
-  model.value = newValue;
+  model.value = newValue; // Sync internal model when the prop changes
 });
+// Debounced emit function
+
 const filter = ref(props.filter);
+
+// Watch for changes in the filter prop and update the internal filter
 watch(() => props.filter, (newValue) => {
-  filter.value = newValue;
+  filter.value = newValue; // Sync internal filter when the prop changes
 });
+
 const searchDialogSelectedValue = ref(null);
 const search = ref(null);
 const searchDialog = ref(false);
 const datePickerValue = ref(null);
 const datePicker = ref(false);
+
 const emitUpdate = () => {
-  emit("update:modelValue", model.value);
-};
+  emit('update:modelValue', model.value);
+}
 const debouncedUpdate = useDebounceFn(emitUpdate, 700);
-const { inputDateForDb, outputDateFromDb, cloneDeep, localDateForDb } = useCrudConverters();
+
+
+const {inputDateForDb, outputDateFromDb, cloneDeep, localDateForDb} = useCrudConverters();
+
 const datePickerDisplayValue = computed(() => {
   if (!selectedValue.value || selectedValue.value.length !== 2) {
     return null;
   }
-  const startDate = outputDateFromDb(selectedValue.value[0], "dd LLL");
-  const endDate = outputDateFromDb(selectedValue.value[1], "dd LLL");
+  const startDate = outputDateFromDb(selectedValue.value[0], 'dd LLL');
+  const endDate = outputDateFromDb(selectedValue.value[1], 'dd LLL');
   return `${startDate} - ${endDate}`;
 });
+
 const selectedValue = computed({
   get() {
     if (model.value != null) {
-      if (props.filter.optionType === "DateTimeRange") {
+      if (props.filter.optionType === 'DateTimeRange') {
         if (!model.value || model.value.length !== 2) {
           return null;
         }
         return model.value;
       }
       return model.value;
-    } else if (props.filter.type === "multiOption" || props.filter.type === "multiSearch") {
+    } else if (props.filter.type === 'multiOption' || props.filter.type === 'multiSearch') {
       return [];
     } else {
       return null;
     }
   },
   set(val) {
-    if (props.filter.optionType === "DateTimeRange" && val && val[0]) {
+    if (props.filter.optionType === 'DateTimeRange' && val && val[0]) {
       let start = val[0];
       let end = val[1];
       model.value = [start, end];
     } else {
       model.value = val;
     }
-    if (props.filter.type === "search" || props.filter.type === "multiSearch" || props.filter.type === "option" || props.filter.type === "multiOption" || props.filter.type === "multiOptionTree") {
+    if (props.filter.type === 'search' || props.filter.type === 'multiSearch' || props.filter.type === 'option' || props.filter.type === 'multiOption' || props.filter.type === 'multiOptionTree') {
       emitUpdate();
     } else {
       debouncedUpdate();
     }
-  }
+  },
 });
+
 const {
   getItems: searchGetItems,
   items: searchListItems,
   listPending: searchLoading
 } = useCrudApi(props.filter.endpoint);
+
+
 async function getSearchListValue() {
   if (!selectedValue.value || selectedValue.value.length === 0) {
     return;
   }
-  const filters = { ids: selectedValue.value };
+  const filters = {ids: selectedValue.value};
   await searchGetItems(1, selectedValue.value.length, filters);
 }
+
 const validateDateRange = () => {
   datePicker.value = false;
+
   if (!datePickerValue.value || datePickerValue.value.length < 2) {
     return;
   }
   let startDate = localDateForDb(datePickerValue.value[0]);
   let endDate = localDateForDb(datePickerValue.value[datePickerValue.value.length - 1]);
   selectedValue.value = [startDate, endDate];
-};
+}
+
 const closeDatePicker = (clear = false) => {
   if (clear) {
     selectedValue.value = null;
   }
   datePicker.value = false;
-};
+}
 watch(searchDialog, (newValue, oldValue) => {
   if (!newValue && searchDialogSelectedValue.value != null) {
     selectedValue.value = cloneDeep(searchDialogSelectedValue.value);
@@ -108,19 +126,22 @@ watch(searchDialog, (newValue, oldValue) => {
     searchDialogSelectedValue.value = cloneDeep(model.value);
   }
 });
+
 onMounted(() => {
   model.value = props.modelValue;
-  if (props.filter.type === "search" || props.filter.type === "multiSearch") {
+  if (props.filter.type === 'search' || props.filter.type === 'multiSearch') {
     getSearchListValue();
   }
 });
+
 const displayForChip = (item) => {
-  var searchItem = searchListItems.value.find((inlineItem) => inlineItem[props.filter.endpointResponseKey] === item.raw);
+  var searchItem = searchListItems.value.find(inlineItem => inlineItem[props.filter.endpointResponseKey] === item.raw);
   if (!searchItem) {
     return "Loading";
   }
   return searchItem[props.filter.endpointDisplayKey] ?? "Loading";
-};
+}
+
 </script>
 
 <template>

package/dist/runtime/components/CrudFilterList.vue

@@ -1,5 +1,6 @@
 <script setup>
 import CrudFilter from "../components/CrudFilter.vue";
+
 const model = defineModel();
 const props = defineProps({
   filters: {
@@ -9,6 +10,7 @@ const props = defineProps({
     }
   }
 });
+
 </script>
 
 <template>
@@ -18,3 +20,7 @@ const props = defineProps({
     </div>
   </div>
 </template>
+
+<style scoped>
+
+</style>

package/dist/runtime/components/CrudFormDialog.vue

@@ -1,7 +1,8 @@
 <script setup>
 import CrudErrorDisplay from "../components/CrudErrorDisplay.vue";
-import { computed } from "vue";
-import { useDisplay } from "vuetify";
+import {computed} from "vue";
+import {useDisplay} from "vuetify";
+
 const props = defineProps({
   action: {
     type: String,
@@ -96,17 +97,22 @@ const props = defineProps({
   }
 });
 const item = defineModel();
-const dialogOpen = defineModel("dialog");
+const dialogOpen = defineModel('dialog');
 const hasItem = computed(() => item.value && Object.keys(item.value).length > 0);
+
 const buttonTitle = computed(() => {
-  return props.btnText ? props.btnText : props.action === "create" ? props.createTitle : props.action === "update" ? props.updateTitle : props.action === "delete" ? props.deleteTitle : props.action === "view" ? props.viewTitle : "";
+  return props.btnText ? props.btnText : (props.action === 'create' ? props.createTitle : (props.action === 'update' ? props.updateTitle : (props.action === 'delete' ? props.deleteTitle : (props.action === 'view' ? props.viewTitle : ''))));
 });
+
 const buttonIcon = computed(() => {
-  return props.btnIcon ? props.btnIcon : props.action === "create" ? "mdi-plus" : props.action === "update" ? "mdi-pencil" : props.action === "delete" ? "mdi-delete" : props.action === "view" ? "mdi-eye" : "mdi-timer-sand";
+  return props.btnIcon ? props.btnIcon : (props.action === 'create' ? 'mdi-plus' : (props.action === 'update' ? 'mdi-pencil' : (props.action === 'delete' ? 'mdi-delete' : (props.action === 'view' ? 'mdi-eye' : 'mdi-timer-sand'))));
 });
+
 const display = useDisplay();
 const isLarge = computed(() => display.lgAndUp.value);
-const readonly = computed(() => props.action === "view");
+
+const readonly = computed(() => props.action === 'view');
+
 </script>
 
 <template>
@@ -185,3 +191,7 @@ const readonly = computed(() => props.action === "view");
     </v-card>
   </v-dialog>
 </template>
+
+<style scoped>
+
+</style>