atom-nuxt 1.1.0 → 1.3.0

package/dist/runtime/components/CrudFormLoader.vue

@@ -1,99 +1,102 @@
 <script setup async>
-import { computed, watch } from "vue";
-import { useCrudConverters } from "../composables/useCrudConverters";
-import { useCrudApi } from "../composables/useCrudApi";
-import { useListenerService } from "../composables/useListenerService";
-import CrudFormDialog from "./CrudFormDialog.vue";
-import { useRoute, useRouter } from "#app";
-const { cloneDeep } = useCrudConverters();
-const emits = defineEmits(["update", "delete", "create"]);
+import { computed, watch } from 'vue'
+import { useCrudConverters } from '../composables/useCrudConverters'
+import { useCrudApi } from '../composables/useCrudApi'
+import { useListenerService } from '../composables/useListenerService'
+import CrudFormDialog from './CrudFormDialog.vue'
+import { useRoute, useRouter } from '#app'
+
+const { cloneDeep } = useCrudConverters()
+
+const emits = defineEmits(['update', 'delete', 'create'])
+
 const props = defineProps({
   loaderKey: {
     type: String,
-    required: false
+    required: false,
   },
   initialItem: {
     type: Object,
-    required: false
+    required: false,
   },
   path: {
     type: String,
-    required: true
+    required: true,
   },
   allowCreate: {
     type: Boolean,
-    default: false
+    default: false,
   },
   hideFilters: {
     type: Boolean,
-    default: false
+    default: false,
   },
   title: {
     type: String,
-    required: false
+    required: false,
   },
   transformItem: {
     type: Function,
-    required: false
+    required: false,
   },
   transformItems: {
     type: Function,
-    required: false
+    required: false,
   },
   beforeSave: {
     type: Function,
-    required: false
+    required: false,
   },
   beforeCreate: {
     type: Function,
-    required: false
+    required: false,
   },
   beforeUpdate: {
     type: Function,
-    required: false
+    required: false,
   },
   beforeDelete: {
     type: Function,
-    required: false
+    required: false,
   },
   updateTitle: {
     type: String,
     required: false,
     default() {
-      return "Update item";
-    }
+      return 'Update item'
+    },
   },
   deleteTitle: {
     type: String,
     required: false,
     default() {
-      return "Delete item";
-    }
+      return 'Delete item'
+    },
   },
   createTitle: {
     type: String,
     required: false,
     default() {
-      return "Create item";
-    }
+      return 'Create item'
+    },
   },
   customFilters: {
     type: Object,
     required: false,
     default: () => {
-    }
+    },
   },
   await: {
     type: Boolean,
     required: false,
-    default: false
+    default: false,
   },
   listeners: {
     type: Array,
     required: false,
-    default: () => []
-  }
-});
+    default: () => [],
+  },
+})
 const {
   getItem,
   updateItem,
@@ -103,106 +106,122 @@ const {
   formErrors,
   formPending,
   itemErrors,
-  itemPending
-} = useCrudApi(props.path, false, props.transformItem, props.transformItems);
-const route = useRoute();
-const router = useRouter();
-const action = computed(() => route.query[(props.loaderKey ?? "") + "action"]);
-const actionId = computed(() => route.query[(props.loaderKey ?? "") + "actionId"]);
+  itemPending,
+} = useCrudApi(props.path, false, props.transformItem, props.transformItems)
+
+const route = useRoute()
+const router = useRouter()
+
+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)),
   set: (value) => {
     if (!value) {
       if (router.options.history.state.back) {
-        router.back();
-      } else {
-        const currentQuery = route.query;
+        router.back()
+      }
+      else {
+        const currentQuery = route.query
         if (props.loaderKey) {
-          delete currentQuery[(props.loaderKey ?? "") + "action"];
-          delete currentQuery[(props.loaderKey ?? "") + "actionId"];
-        } else {
-          delete currentQuery.action;
-          delete currentQuery.actionId;
+          delete (currentQuery[(props.loaderKey ?? '') + 'action'])
+          delete (currentQuery[(props.loaderKey ?? '') + 'actionId'])
         }
-        router.replace({ ...route, query: currentQuery });
+        else {
+          delete currentQuery.action
+          delete currentQuery.actionId
+        }
+        router.replace({ ...route, query: currentQuery })
       }
     }
-  }
-});
+  },
+})
 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;
-  } else {
-    newQuery.query.action = "update";
-    newQuery.query.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);
-};
+  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;
-  } else {
-    newQuery.query.action = "delete";
-    newQuery.query.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);
-};
+  await router.push(newQuery)
+}
 const createForm = () => {
-  item.value = props.initialItem ? cloneDeep(props.initialItem) : {};
-  const newQuery = { query: { ...route.query } };
+  item.value = props.initialItem ? cloneDeep(props.initialItem) : {}
+  const newQuery = { query: { ...route.query } }
   if (props.loaderKey) {
-    newQuery.query[(props.loaderKey ?? "") + "action"] = "create";
-  } else {
-    newQuery.query.action = "create";
+    newQuery.query[(props.loaderKey ?? '') + 'action'] = 'create'
   }
-  router.push(newQuery);
-};
+  else {
+    newQuery.query.action = 'create'
+  }
+  router.push(newQuery)
+}
+
 const saveAction = async () => {
-  formPending.value = true;
-  let itemToSave = JSON.parse(JSON.stringify(item.value));
+  formPending.value = true
+  let itemToSave = JSON.parse(JSON.stringify(item.value))
   if (props.beforeSave != null) {
-    itemToSave = await props.beforeSave(itemToSave);
+    itemToSave = await props.beforeSave(itemToSave)
   }
-  if (action.value === "create") {
+  if (action.value === 'create') {
     if (props.beforeCreate != null) {
-      itemToSave = await props.beforeCreate(itemToSave);
+      itemToSave = await props.beforeCreate(itemToSave)
     }
-    await createItem(itemToSave);
-  } else if (action.value === "update") {
+    await createItem(itemToSave)
+  }
+  else if (action.value === 'update') {
     if (props.beforeUpdate != null) {
-      itemToSave = await props.beforeUpdate(itemToSave);
+      itemToSave = await props.beforeUpdate(itemToSave)
     }
-    await updateItem(itemToSave.id, itemToSave);
-  } else if (action.value === "delete") {
+    await updateItem(itemToSave.id, itemToSave)
+  }
+  else if (action.value === 'delete') {
     if (props.beforeDelete != null) {
-      itemToSave = await props.beforeDelete(itemToSave);
+      itemToSave = await props.beforeDelete(itemToSave)
     }
-    await deleteItem(itemToSave.id);
+    await deleteItem(itemToSave.id)
   }
   if (formErrors.value == null || Object.keys(formErrors.value).length === 0) {
-    emits(action.value, itemToSave);
-    notify(props.path + ":" + action.value, itemToSave);
-    dialogOpen.value = false;
+    emits(action.value,itemToSave);
+    notify(props.path + ':' + action.value, itemToSave)
+    dialogOpen.value = false
   }
-};
+}
+
 watch(action, () => {
   try {
-    if (action.value === "update" && actionId.value) {
-      getItem(actionId.value);
-    } else if (action.value === "create") {
-      item.value = props.initialItem ? cloneDeep(props.initialItem) : {};
-    } else if (action.value === "delete" && actionId.value) {
-      getItem(actionId.value);
+    if (action.value === 'update' && actionId.value) {
+      getItem(actionId.value)
+    }
+    else if (action.value === 'create') {
+      item.value = props.initialItem ? cloneDeep(props.initialItem) : {}
+    }
+    else if (action.value === 'delete' && actionId.value) {
+      getItem(actionId.value)
     }
-  } catch (error) {
-    console.error("Error in actionId watcher:", error);
   }
-}, { immediate: true });
-const { notify } = useListenerService();
+  catch (error) {
+    console.error('Error in actionId watcher:', error)
+  }
+}, { immediate: true })
+
+const { notify } = useListenerService()
 </script>
 
 <template>
@@ -236,3 +255,7 @@ const { notify } = useListenerService();
     </crud-form-dialog>
   </div>
 </template>
+
+<style scoped>
+
+</style>

package/dist/runtime/components/CrudListLoader.vue

@@ -1,15 +1,16 @@
 <script setup async>
-import { useCrudApi } from "../composables/useCrudApi";
+import {useCrudApi} from "../composables/useCrudApi";
 import CrudErrorDisplay from "./CrudErrorDisplay.vue";
-import { useListenerService } from "../composables/useListenerService";
-import { watch, onMounted, onBeforeUnmount, ref } from "vue";
-import { useDebounceFn } from "@vueuse/core";
+import {useListenerService} from "../composables/useListenerService";
+import {watch, onMounted, onBeforeUnmount, ref} from "vue";
+import {useDebounceFn} from "@vueuse/core";
+
 const props = defineProps({
-  debounced: {
+  debounced : {
     type: Boolean,
-    default: false
+    default :false
   },
-  disableNoResults: {
+  disableNoResults : {
     type: Boolean,
     default: false
   },
@@ -36,7 +37,7 @@ const props = defineProps({
     required: false,
     default: false
   },
-  listeners: {
+  listeners : {
     type: Array,
     required: false,
     default: () => []
@@ -63,44 +64,50 @@ const {
   totalPages,
   hasListErrors
 } = useCrudApi(props.path);
+
 const debouncedGet = useDebounceFn(getItems, 500);
+
 const lastRequest = ref(null);
+
 const setLastRequest = () => {
-  lastRequest.value = JSON.stringify({ page: props.page, perPage: props.perPage, customFilters: props.customFilters });
-};
+  lastRequest.value = JSON.stringify({page: props.page, perPage: props.perPage, customFilters: props.customFilters});
+}
+
 watch(() => props.customFilters, () => {
-  if (lastRequest.value === JSON.stringify({ page: props.page, perPage: props.perPage, customFilters: props.customFilters })) {
+  if (lastRequest.value === JSON.stringify({page: props.page, perPage: props.perPage, customFilters: props.customFilters})) {
     return;
   }
-  if (props.debounced) {
+  if(props.debounced) {
     debouncedGet(props.page, props.perPage, props.customFilters);
   } else {
     getItems(props.page, props.perPage, props.customFilters);
   }
   setLastRequest();
-});
+}, {deep: true});
 watch(() => props.page, () => {
   getItems(props.page, props.perPage, props.customFilters);
 });
-if (props.await) {
+if(props.await) {
   await getItems(props.page, props.perPage, props.customFilters);
 } else {
   getItems(props.page, props.perPage, props.customFilters);
 }
 setLastRequest();
-const { addListener, removeLocalListenersWithEvent, notify } = useListenerService();
+
+const {addListener, removeLocalListenersWithEvent, notify} = useListenerService();
 onMounted(() => {
   props.listeners.forEach((listener) => {
     addListener(listener, (data) => {
       getItems(props.page, null, props.customFilters);
     });
   });
-});
+})
 onBeforeUnmount(() => {
   props.listeners.forEach((listener) => {
     removeLocalListenersWithEvent(listener);
   });
-});
+})
+
 </script>
 
 <template>
@@ -128,3 +135,7 @@ onBeforeUnmount(() => {
     </slot>
   </div>
 </template>
+
+<style scoped>
+
+</style>