atom-nuxt 1.0.156 → 1.2.2

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,
@@ -54,6 +55,11 @@ const props = defineProps({
     required: false,
     default: "Delete item"
   },
+  viewTitle: {
+    type: String,
+    required: false,
+    default: "View item"
+  },
   saveAction: {
     type: Function,
     required: true
@@ -91,16 +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 : "";
+  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" : "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');
+
 </script>
 
 <template>
@@ -129,7 +141,7 @@ const isLarge = computed(() => display.lgAndUp.value);
           Loading
         </v-toolbar-title>
         <v-toolbar-title v-else>{{
-            action === 'create' ? createTitle : (action === 'update' ? updateTitle : (action === 'delete' ? deleteTitle : ''))
+            action === 'create' ? createTitle : (action === 'update' ? updateTitle : (action === 'delete' ? deleteTitle : (action === 'view' ? viewTitle : '')))
           }}
         </v-toolbar-title>
       </v-toolbar>
@@ -143,7 +155,7 @@ const isLarge = computed(() => display.lgAndUp.value);
           <v-progress-circular indeterminate color="primary"></v-progress-circular>
         </div>
 
-        <div v-if="(hasItem && !itemPending) || action === 'create'" class="flex-fill">
+        <div v-if="(hasItem && !itemPending) || action === 'create' || action === 'view'" class="flex-fill">
           <suspense>
             <template #fallback>
               <div v-if="!itemPending" class="d-flex flex-fill flex-column justify-center align-center"
@@ -151,21 +163,22 @@ const isLarge = computed(() => display.lgAndUp.value);
                 <v-progress-circular indeterminate color="primary"></v-progress-circular>
               </div>
             </template>
-            <slot v-bind:action="action"
-                  v-bind:item="item"
-                  v-bind:errors="formErrors">
+            <slot :action="action"
+                  :readonly="readonly"
+                  :item="item"
+                  :errors="formErrors">
 
             </slot>
           </suspense>
         </div>
       </div>
-      <v-card-actions v-if="!hideActions" class="pa-0 border-t pa-4 elevation-5">
+      <v-card-actions v-if="!hideActions && action !== 'view'" class="pa-0 border-t pa-4 elevation-5">
         <v-btn
           size="large"
           class="px-5"
           :width="isLarge ? 'auto' : '100%'"
           :disabled="disabled || !action"
-          :color="btnColor ? btnColor : (action === 'create' ? 'success' : (action === 'update' ? 'info' : (action === 'delete' ? 'error' : 'light')))"
+          :color="btnColor ? btnColor : (action === 'create' ? 'success' : (action === 'update' ? 'info' : (action === 'delete' ? 'error' : (action === 'view' ? 'primary' : 'light'))))"
           variant="flat"
           @click="saveAction"
           :loading="formPending"
@@ -178,3 +191,7 @@ const isLarge = computed(() => display.lgAndUp.value);
     </v-card>
   </v-dialog>
 </template>
+
+<style scoped>
+
+</style>

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>