atom-nuxt 1.0.155 → 1.1.0

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@atomengine/atom-nuxt",
   "configKey": "atomNuxt",
-  "version": "1.0.155",
+  "version": "1.1.0",
   "builder": {
     "@nuxt/module-builder": "1.0.1",
     "unbuild": "3.5.0"

package/dist/runtime/components/CrudApiSelectorField.vue

@@ -16,7 +16,7 @@ const selectionModel = defineModel();
 const search = ref("");
 const searchDialog = ref(false);
 const searchDialogSelectedValue = ref(null);
-const hasSelection = computed(() => selectionModel.value !== 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;
   searchDialog.value = true;

package/dist/runtime/components/CrudFormDialog.vue

@@ -54,6 +54,11 @@ const props = defineProps({
     required: false,
     default: "Delete item"
   },
+  viewTitle: {
+    type: String,
+    required: false,
+    default: "View item"
+  },
   saveAction: {
     type: Function,
     required: true
@@ -94,13 +99,14 @@ const item = defineModel();
 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 +135,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 +149,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 +157,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"

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

@@ -13,6 +13,7 @@ declare const __VLS_component: import("vue").DefineComponent<{}, {
     createTitle: string;
     updateTitle: string;
     deleteTitle: string;
+    viewTitle: string;
     saveAction: Function;
     btnIcon: string;
     btnColor: string;
@@ -25,6 +26,7 @@ declare const __VLS_component: import("vue").DefineComponent<{}, {
 type __VLS_Slots = {
     default?: ((props: {
         action: any;
+        readonly: any;
         item: any;
         errors: any;
     }) => any) | undefined;

package/dist/runtime/components/CrudPaginatedLoader.vue

@@ -90,6 +90,13 @@ const props = defineProps({
       return "Create item";
     }
   },
+  viewTitle: {
+    type: String,
+    required: false,
+    default() {
+      return "View item";
+    }
+  },
   customFilters: {
     type: Object,
     required: false,
@@ -151,7 +158,7 @@ const previousRoute = usePreviousRoute();
 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;
@@ -254,6 +261,17 @@ const deleteForm = async (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 } };
@@ -308,6 +326,8 @@ 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);
@@ -339,9 +359,12 @@ const exportAction = async () => {
     <slot
       name="before"
       :items="items"
+      :total-items="totalItems"
+      :total-pages="totalPages"
       :pending="listPending"
       :create-action="createForm"
       :update-action="updateForm"
+      :view-action="viewForm"
       :delete-action="deleteForm"
       :form-pending="formPending"
       :export-action="exportAction"
@@ -374,6 +397,7 @@ const exportAction = async () => {
               :items="items"
               :pending="listPending"
               :update-action="updateForm"
+              :view-action="viewForm"
               :delete-action="deleteForm"
               :form-pending="formPending"
             >
@@ -403,6 +427,7 @@ const exportAction = async () => {
       :create-title="createTitle"
       :update-title="updateTitle"
       :delete-title="deleteTitle"
+      :view-title="viewTitle"
       :save-action="saveAction"
       :full-screen="fullScreenDialog"
     >

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

@@ -13,6 +13,7 @@ declare const __VLS_component: import("vue").DefineComponent<{}, {
     createTitle: string;
     updateTitle: string;
     deleteTitle: string;
+    viewTitle: string;
     allowCreate: boolean;
     hideFilters: boolean;
     fullScreenDialog: boolean;
@@ -31,9 +32,12 @@ declare const __VLS_component: import("vue").DefineComponent<{}, {
 type __VLS_Slots = {
     before?: ((props: {
         items: any;
+        totalItems: any;
+        totalPages: any;
         pending: any;
         createAction: any;
         updateAction: any;
+        viewAction: any;
         deleteAction: any;
         formPending: any;
         exportAction: any;
@@ -57,6 +61,7 @@ type __VLS_Slots = {
         items: any;
         pending: any;
         updateAction: any;
+        viewAction: any;
         deleteAction: any;
         formPending: any;
     }) => any) | undefined;

package/package.json

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