atom-nuxt 1.3.0 → 1.3.3

package/dist/runtime/components/CrudFormDialog.vue

@@ -1,8 +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";
+import { useRuntimeConfig } from "#app";
 const props = defineProps({
   action: {
     type: String,
@@ -94,25 +94,72 @@ const props = defineProps({
     default: () => {
       return {};
     }
+  },
+  dialogStyle: {
+    type: String,
+    required: false,
+    default: null
+  },
+  dialogSize: {
+    type: [String, Number],
+    required: false,
+    default: null
+  },
+  createDialogSize: {
+    type: [String, Number],
+    required: false,
+    default: null
+  },
+  updateDialogSize: {
+    type: [String, Number],
+    required: false,
+    default: null
+  },
+  deleteDialogSize: {
+    type: [String, Number],
+    required: false,
+    default: null
+  },
+  viewDialogSize: {
+    type: [String, Number],
+    required: false,
+    default: null
   }
 });
 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");
+const atomNuxtConfig = useRuntimeConfig().public.atomNuxt;
+const effectiveDialogStyle = computed(() => {
+  return props.dialogStyle ?? atomNuxtConfig?.defaultDialogStyle ?? "default";
+});
+const effectiveDialogSize = computed(() => {
+  const actionSize = props.action === "create" ? props.createDialogSize : props.action === "update" ? props.updateDialogSize : props.action === "delete" ? props.deleteDialogSize : props.action === "view" ? props.viewDialogSize : null;
+  if (actionSize) return actionSize;
+  if (props.dialogSize) return props.dialogSize;
+  return effectiveDialogStyle.value === "leaf" ? "400" : "1200";
+});
+const shouldUseFullscreen = computed(() => {
+  if (props.fullScreen) return true;
+  if (effectiveDialogStyle.value === "leaf") {
+    if (!isLarge.value) return true;
+    const sizeNum = typeof effectiveDialogSize.value === "string" ? parseInt(effectiveDialogSize.value) : effectiveDialogSize.value;
+    return sizeNum >= display.width.value * 0.9;
+  }
+  return !isLarge.value;
+});
+const dialogTransition = computed(() => {
+  return effectiveDialogStyle.value === "leaf" ? "dialog-right-transition" : "dialog-bottom-transition";
+});
 </script>
 
 <template>
@@ -121,15 +168,26 @@ const readonly = computed(() => props.action === 'view');
     :persistent="true"
     :close-on-back="false"
     v-model="dialogOpen"
-    :fullscreen="!isLarge || fullScreen"
+    :fullscreen="shouldUseFullscreen"
     z-index="2000"
-    :max-width="isLarge && !fullScreen ? '1200' : ''"
-    transition="dialog-bottom-transition"
+    :max-width="effectiveDialogStyle === 'default' && isLarge && !shouldUseFullscreen ? effectiveDialogSize : ''"
+    :width="effectiveDialogStyle === 'leaf' && !shouldUseFullscreen ? effectiveDialogSize : ''"
+    :transition="dialogTransition"
+    :content-class="effectiveDialogStyle === 'leaf' ? 'leaf-dialog' : ''"
   >
-    <v-card class="bg-white d-flex flex-column pa-0">
-      <v-toolbar>
-        <v-toolbar-items>
+    <v-card :class="['bg-white d-flex flex-column pa-0', effectiveDialogStyle === 'leaf' ? 'leaf-card' : '']">
+      <v-toolbar :class="effectiveDialogStyle === 'leaf' ? 'leaf-toolbar' : ''">
+        <v-toolbar-items :class="effectiveDialogStyle === 'leaf' ? 'leaf-toolbar-items' : ''">
           <v-btn
+            v-if="effectiveDialogStyle === 'leaf'"
+            icon="mdi-close"
+            variant="flat"
+            color="light"
+            class="leaf-close-btn"
+            @click="dialogOpen = false"
+          ></v-btn>
+          <v-btn
+            v-else
             color="error"
             variant="flat"
             @click="dialogOpen = false"
@@ -137,15 +195,15 @@ const readonly = computed(() => props.action === 'view');
             <v-icon color="white" icon="mdi-close"></v-icon>
           </v-btn>
         </v-toolbar-items>
-        <v-toolbar-title v-if="itemPending">
+        <v-toolbar-title v-if="itemPending" :class="effectiveDialogStyle === 'leaf' ? 'font-weight-bold' : ''">
           Loading
         </v-toolbar-title>
-        <v-toolbar-title v-else>{{
+        <v-toolbar-title v-else :class="effectiveDialogStyle === 'leaf' ? 'font-weight-bold' : ''">{{
             action === 'create' ? createTitle : (action === 'update' ? updateTitle : (action === 'delete' ? deleteTitle : (action === 'view' ? viewTitle : '')))
           }}
         </v-toolbar-title>
       </v-toolbar>
-      <div class="pa-5 d-flex flex-column flex-fill justify-start overflow-scroll">
+      <div :class="['pa-5 d-flex flex-column justify-start', effectiveDialogStyle === 'leaf' ? 'flex-grow-1 overflow-y-auto' : 'flex-fill overflow-scroll']">
         <div>
           <crud-error-display class="mb-5" :errors="formErrors"></crud-error-display>
           <crud-error-display class="mb-5" :errors="itemErrors"></crud-error-display>
@@ -172,7 +230,7 @@ const readonly = computed(() => props.action === 'view');
           </suspense>
         </div>
       </div>
-      <v-card-actions v-if="!hideActions && action !== 'view'" 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', effectiveDialogStyle === 'leaf' ? 'flex-shrink-0' : '']">
         <v-btn
           size="large"
           class="px-5"
@@ -192,6 +250,6 @@ const readonly = computed(() => props.action === 'view');
   </v-dialog>
 </template>
 
-<style scoped>
-
+<style>
+.leaf-dialog,.leaf-dialog .v-overlay__content{align-items:stretch!important;bottom:0!important;display:flex!important;height:100vh!important;margin:0!important;max-height:100vh!important;position:fixed!important;right:0!important;top:0!important}.leaf-card{border-radius:0!important;height:100vh!important;max-height:100vh!important}.leaf-toolbar{background-color:#fff!important;border-bottom:1px solid rgba(0,0,0,.08)!important;box-shadow:0 1px 3px rgba(0,0,0,.04)!important}.leaf-toolbar-items{align-items:center!important;display:flex!important;padding:8px 4px 8px 8px!important}.leaf-close-btn{border-radius:50%!important;height:40px!important;min-height:40px!important;min-width:40px!important;transition:background-color .2s ease,color .2s ease;width:40px!important}.leaf-close-btn .v-icon{color:rgb(var(--v-theme-error))!important;transition:color .2s ease}.leaf-close-btn:hover{background-color:rgb(var(--v-theme-error))!important}.leaf-close-btn:hover .v-icon{color:#fff!important}.dialog-right-transition-enter-active,.dialog-right-transition-leave-active{transition:transform .3s cubic-bezier(.25,.8,.25,1)}.dialog-right-transition-enter-from,.dialog-right-transition-leave-to{transform:translateX(100%)}.dialog-right-transition-enter-to,.dialog-right-transition-leave-from{transform:translateX(0)}
 </style>

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

@@ -0,0 +1,39 @@
+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<{}, {
+    disabled: boolean;
+    action: string;
+    formErrors: Record<string, any>;
+    itemErrors: Record<string, any>;
+    formPending: boolean;
+    itemPending: boolean;
+    createTitle: string;
+    updateTitle: string;
+    deleteTitle: string;
+    viewTitle: string;
+    saveAction: Function;
+    btnIcon: string;
+    btnColor: string;
+    fullScreen: boolean;
+    hideActions: boolean;
+    originalItem: Record<string, any>;
+    dialogStyle: string;
+    dialogSize: string | number;
+    createDialogSize: string | number;
+    updateDialogSize: string | number;
+    deleteDialogSize: string | number;
+    viewDialogSize: string | number;
+    btnText?: string | undefined;
+    $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: {
+        action: any;
+        readonly: any;
+        item: any;
+        errors: any;
+    }) => any) | undefined;
+};

package/dist/runtime/components/CrudFormLoader.vue

@@ -1,102 +1,124 @@
 <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: () => []
+  },
+  dialogStyle: {
+    type: String,
+    required: false,
+    default: null
+  },
+  dialogSize: {
+    type: [String, Number],
+    required: false,
+    default: null
   },
-})
+  createDialogSize: {
+    type: [String, Number],
+    required: false,
+    default: null
+  },
+  updateDialogSize: {
+    type: [String, Number],
+    required: false,
+    default: null
+  },
+  deleteDialogSize: {
+    type: [String, Number],
+    required: false,
+    default: null
+  }
+});
 const {
   getItem,
   updateItem,
@@ -106,122 +128,106 @@ 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"];
+        } else {
+          delete currentQuery.action;
+          delete currentQuery.actionId;
         }
-        router.replace({ ...route, query: currentQuery })
+        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'
+    newQuery.query[(props.loaderKey ?? "") + "action"] = "create";
+  } else {
+    newQuery.query.action = "create";
   }
-  else {
-    newQuery.query.action = 'create'
-  }
-  router.push(newQuery)
-}
-
+  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) : {}
+    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);
     }
-    else if (action.value === 'delete' && actionId.value) {
-      getItem(actionId.value)
-    }
-  }
-  catch (error) {
-    console.error('Error in actionId watcher:', error)
+  } catch (error) {
+    console.error("Error in actionId watcher:", error);
   }
-}, { immediate: true })
-
-const { notify } = useListenerService()
+}, { immediate: true });
+const { notify } = useListenerService();
 </script>
 
 <template>
@@ -245,6 +251,11 @@ const { notify } = useListenerService()
       :update-title="updateTitle"
       :delete-title="deleteTitle"
       :save-action="saveAction"
+      :dialog-style="dialogStyle"
+      :dialog-size="dialogSize"
+      :create-dialog-size="createDialogSize"
+      :update-dialog-size="updateDialogSize"
+      :delete-dialog-size="deleteDialogSize"
     >
       <slot
         name="form"
@@ -255,7 +266,3 @@ const { notify } = useListenerService()
     </crud-form-dialog>
   </div>
 </template>
-
-<style scoped>
-
-</style>

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

@@ -0,0 +1,46 @@
+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: "delete" | "create" | "update", ...args: any[]) => void;
+    path: string;
+    customFilters: Record<string, any>;
+    await: boolean;
+    listeners: unknown[];
+    createTitle: string;
+    updateTitle: string;
+    deleteTitle: string;
+    dialogStyle: string;
+    dialogSize: string | number;
+    createDialogSize: string | number;
+    updateDialogSize: string | number;
+    deleteDialogSize: string | number;
+    allowCreate: boolean;
+    hideFilters: boolean;
+    title?: string | undefined;
+    loaderKey?: string | undefined;
+    initialItem?: Record<string, any> | undefined;
+    transformItem?: Function | undefined;
+    transformItems?: Function | undefined;
+    beforeSave?: Function | undefined;
+    beforeCreate?: Function | undefined;
+    beforeUpdate?: Function | undefined;
+    beforeDelete?: Function | undefined;
+    $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: {
+        createAction: any;
+        updateAction: any;
+        deleteAction: any;
+        formPending: any;
+    }) => any) | undefined;
+} & {
+    form?: ((props: {
+        action: any;
+        item: any;
+        errors: any;
+    }) => any) | undefined;
+};