atom-nuxt 1.0.141 → 1.0.142

package/dist/module.json

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

package/dist/runtime/components/CrudUploadField.vue

@@ -54,19 +54,22 @@ const dialog = ref(false);
 const filesToUpload = ref([]);
 const fileToUpload = ref(null);
 const searchValue = ref(null);
+const tempModel = ref(null);
+const cloneModel = () => props.multiple ? [...model.value || []] : model.value;
 const finish = () => {
+  model.value = props.multiple ? [...tempModel.value] : tempModel.value;
   dialog.value = false;
 };
 const onSelectImage = (item) => {
   if (props.multiple) {
-    if (model.value === null) model.value = [];
-    if (!model.value.includes(item)) {
-      model.value.push(item);
+    if (!tempModel.value) tempModel.value = [];
+    if (!tempModel.value.includes(item)) {
+      tempModel.value.push(item);
     } else {
-      model.value = model.value.filter((i) => i !== item);
+      tempModel.value = tempModel.value.filter((i) => i !== item);
     }
   } else {
-    model.value = model.value === item ? null : item;
+    tempModel.value = tempModel.value === item ? null : item;
   }
 };
 const {
@@ -103,12 +106,14 @@ const processUploads = async () => {
     await createUpload(upload);
     if (!hasUploadErrors.value && hasItem.value) {
       model.value = completedUpload.value.id;
+      dialog.value = false;
     }
   }
   uploadsLoading.value = false;
-  if (!props.multiple) {
+  if (props.multiple) {
     filesToUpload.value = [];
-    dialog.value = false;
+  } else {
+    fileToUpload.value = null;
   }
 };
 const selectionFilters = computed(() => {
@@ -125,6 +130,11 @@ const hasSelection = computed(() => {
     return model.value && model.value !== "" && (model.value.length > 0 || model.value > 0);
   }
 });
+watch(() => dialog.value, (val) => {
+  if (val) {
+    tempModel.value = cloneModel();
+  }
+});
 watch(() => filesToUpload.value, () => {
   if (filesToUpload.value.length > 0) {
     processUploads();
@@ -140,14 +150,20 @@ watch(() => fileToUpload.value, () => {
 <template>
   <div>
     <div v-if="title" style="font-size: 12px;" class="text-grey-darken-2 mb-1">{{ title }}</div>
+
     <div v-if="!hasSelection" class="mb-3">
-      <v-btn :disabled="disabled" @click="dialog = true" size="small"
-             color="success">
+      <v-btn :disabled="disabled" @click="dialog = true" size="small" color="success">
         Select Media
       </v-btn>
     </div>
-    <crud-list-loader v-if="hasSelection" :limit="1000" :disable-no-results="true" :custom-filters="selectionFilters"
-                      :path="path">
+
+    <crud-list-loader
+      v-if="hasSelection"
+      :per-page="1000"
+      :disable-no-results="true"
+      :custom-filters="selectionFilters"
+      :path="path"
+    >
       <template #default="uploadSlot">
         <div v-for="item in uploadSlot.items" :key="item.id">
           <crud-upload-field-selection
@@ -156,19 +172,20 @@ watch(() => fileToUpload.value, () => {
             :file-name-key="fileNameKey"
             :image-click-action="() => { if(replaceable && !multiple) { dialog = true; }}"
             :item="item"
-            :selected="false">
+            :selected="false"
+          >
             <template #additionalActions>
-              <slot name="additionalActions" :item="item">
-
-              </slot>
+              <slot name="additionalActions" :item="item" />
             </template>
           </crud-upload-field-selection>
         </div>
       </template>
     </crud-list-loader>
-    <v-dialog v-model="dialog" max-width="1700">
+
+    <v-dialog v-model="dialog" @update:modelValue="val => { dialog = val; if (val) tempModel = cloneModel(); }" max-width="1700">
       <v-card>
         <h2 class="mb-0 border-b pa-4" v-if="title">{{ title }}</h2>
+
         <div style="height: 90vh; overflow: auto;" class="pa-4 d-flex flex-column">
           <div class="flex-wrap">
             <div class="border pa-3 rounded mb-3">
@@ -189,13 +206,15 @@ watch(() => fileToUpload.value, () => {
                     v-model="fileToUpload"
                     :disabled="uploadsLoading"
                   />
-                  <crud-error-display :errors="uploadErrors"></crud-error-display>
+                  <crud-error-display :errors="uploadErrors" />
                 </div>
-                <v-btn :loading="uploadsLoading"
-                       class="ml-2"
-                       @click="processUploads"
-                       color='primary'
-                       :disabled="(multiple && (filesToUpload === null || filesToUpload.length === 0)) || (!multiple && fileToUpload === null)">
+                <v-btn
+                  :loading="uploadsLoading"
+                  class="ml-2"
+                  @click="processUploads"
+                  color="primary"
+                  :disabled="(multiple && (!filesToUpload || filesToUpload.length === 0)) || (!multiple && !fileToUpload)"
+                >
                   <v-icon small class="mr-1">mdi-upload</v-icon>
                   Upload
                 </v-btn>
@@ -204,12 +223,16 @@ watch(() => fileToUpload.value, () => {
             <v-text-field
               v-model="searchValue"
               label="Search by file name"
-              :disabled="uploadsLoading"/>
+              :disabled="uploadsLoading"
+            />
           </div>
-
-          <crud-list-loader v-if="hasSelection" :limit="1000" :disable-no-results="true"
-                            :custom-filters="selectionFilters"
-                            :path="path">
+          <crud-list-loader
+            v-if="tempModel && (Array.isArray(tempModel) ? tempModel.length : tempModel)"
+            :per-page="1000"
+            :disable-no-results="true"
+            :custom-filters="{ ids: multiple ? tempModel : [tempModel] }"
+            :path="path"
+          >
             <template #default="uploadSlot">
               <div class="pa-3 border rounded mb-3 bg-white">
                 <h4 class="mb-2">Selected media:</h4>
@@ -219,56 +242,65 @@ watch(() => fileToUpload.value, () => {
                     :file-name-key="fileNameKey"
                     @click="onSelectImage(item.id)"
                     :item="item"
-                    :selected="false"
-                    class="col-6">
-                  </crud-upload-field-selection>
+                    :selected="multiple ? tempModel.includes(item.id) : tempModel === item.id"
+                    class="col-6"
+                  />
                 </div>
               </div>
             </template>
           </crud-list-loader>
 
           <div class="border pa-3 rounded overflow-scroll flex-fill">
-            <crud-list-loader :custom-filters="{keywords: searchValue, ...customFilters}"
-                              :debounced="true"
-                              :per-page="66"
-                              :page="uploadsPage"
-                              :path="path">
+            <crud-list-loader
+              :custom-filters="{ keywords: searchValue, ...customFilters }"
+              :debounced="true"
+              :per-page="66"
+              :page="uploadsPage"
+              :path="path"
+            >
               <template #empty>
-                <v-alert>
-                  No media for filter, upload new instead
-                </v-alert>
+                <v-alert>No media for filter, upload new instead</v-alert>
               </template>
 
-              <template #default="{items,currentPage,totalPages}">
-                <div class="d-flex align-between flex-wrap " style="gap: 8px; overflow-x: hidden;">
-                  <div class="d-inline-flex border align-center rounded bg-white"
-                       style="max-width: 250px; flex: 0 0 auto;" v-for="item in items" :key="'selection-'+item.id">
+              <template #default="{ items, currentPage, totalPages }">
+                <div class="d-flex align-between flex-wrap" style="gap: 8px; overflow-x: hidden;">
+                  <div
+                    class="d-inline-flex border align-center rounded bg-white"
+                    style="max-width: 250px; flex: 0 0 auto;"
+                    v-for="item in items"
+                    :key="'selection-'+item.id"
+                  >
                     <crud-upload-field-selection
+                      v-model="tempModel"
                       :hide-title="true"
                       :file-name-key="fileNameKey"
                       :mime-key="mimeKey"
                       class="flex-fill"
                       @click="onSelectImage(item.id)"
                       :item="item"
-                      v-model="model"
-                    >
-                    </crud-upload-field-selection>
+                      :selected="multiple ? tempModel.includes(item.id) : tempModel === item.id"
+                    />
                   </div>
                   <v-col cols="12">
-                    <v-pagination :length="totalPages" v-model="uploadsPage"/>
+                    <v-pagination :length="totalPages" v-model="uploadsPage" />
                   </v-col>
                 </div>
               </template>
             </crud-list-loader>
-
           </div>
         </div>
+
         <div class="border-t pa-4">
-          <v-btn v-if="hasSelection" :loading="uploadsLoading" @click="finish" color='success'>
+          <v-btn
+            v-if="tempModel && (Array.isArray(tempModel) ? tempModel.length > 0 : true)"
+            :loading="uploadsLoading"
+            @click="finish"
+            color="success"
+          >
             <v-icon small class="mr-1">mdi-content-save</v-icon>
             Done
           </v-btn>
-          <v-btn v-else @click="dialog = false" color='error'>
+          <v-btn v-else @click="dialog = false" color="error">
             <v-icon small class="mr-1">mdi-close</v-icon>
             Cancel
           </v-btn>

package/dist/runtime/components/CrudUploadFieldSelection.vue

@@ -83,70 +83,81 @@ const containerClasses = computed(() => {
     "pa-1": true,
     "position-relative": true,
     "cursor": true,
-    "d-flex": true
+    "d-flex": true,
+    "border": selected.value,
+    "border-primary": selected.value,
+    "shadow": selected.value
   };
 });
 </script>
 
 <template>
   <div :class="containerClasses">
+    <div class="d-flex justify-center flex-fill align-center" v-bind="props">
+      <nuxt-img v-if="isImage"
+                @click="imageClickAction"
+                style="width:100px; height:100px; object-fit: cover;"
+                format="webp"
+                :src="url"
+                fit="cover"
+                :width="item.width ?? 100"
+                :height="item.height  ?? 'auto'"
+      />
+      <video v-else-if="isVideo"
+             @click="imageClickAction"
+             :src="url"
+             :width="50"
+             :height="50"
+             class="flex-shrink-1"></video>
+      <div v-else class="bg-white d-flex justify-center align-center" style="height: 100px; width: 100px;">
+        <v-icon :icon="mimeTypeToMdiIcon(item[mimeKey])" size="40" color="primary" class="m-auto"></v-icon>
+      </div>
+      <div v-if="!hideTitle"
+           style="font-size: 12px; overflow-wrap: break-word; word-wrap: break-word; word-break: break-all;"
+           class="text-wrap ml-2">{{ item[fileNameKey] }}
+      </div>
+      <div class="ml-2 d-flex flex-column align-center">
+        <v-btn size="x-small" target="_blank" color="primary" :icon="true" :href="downloadUrl">
+          <v-icon icon="mdi-download"></v-icon>
+        </v-btn>
+        <slot name="additionalActions" :item="item">
+        </slot>
+      </div>
+
+    </div>
     <v-tooltip>
       <template v-slot:activator="{ props }">
-        <div class="d-flex justify-center flex-fill align-center" v-bind="props">
-          <nuxt-img v-if="isImage"
-                    @click="imageClickAction"
-                    style="width:100px; height:100px; object-fit: cover;"
-                    format="webp"
-                    :src="url"
-                    fit="cover"
-                    :width="item.width ?? 100"
-                    :height="item.height  ?? 'auto'"
-          />
-          <video v-else-if="isVideo"
-                 @click="imageClickAction"
-                 :src="url"
-                 :width="50"
-                 :height="50"
-                 class="flex-shrink-1"></video>
-          <div v-else class="bg-white d-flex justify-center align-center" style="height: 100px; width: 100px;">
-            <v-icon :icon="mimeTypeToMdiIcon(item[mimeKey])" size="40" color="primary" class="m-auto"></v-icon>
-          </div>
-          <div v-if="!hideTitle"
-               style="font-size: 12px; overflow-wrap: break-word; word-wrap: break-word; word-break: break-all;"
-               class="text-wrap ml-2">{{ item[fileNameKey] }}
-          </div>
-          <div class="ml-2 d-flex flex-column align-center">
-            <v-btn size="x-small"  target="_blank" color="primary" :icon="true" :href="downloadUrl">
-              <v-icon icon="mdi-download"></v-icon>
-            </v-btn>
-            <slot name="additionalActions" :item="item">
-            </slot>
-          </div>
-
-        </div>
+        <v-avatar
+          v-bind="props"
+          style="position: absolute; top: 5px; left: 5px;"
+          size="20"
+          color="black">
+          <v-icon size="10">mdi-magnify-plus</v-icon>
+        </v-avatar>
       </template>
-      <div>
-        <div class="d-flex flex-column justify-center text-wrap flex-shrink-1" style="font-size: 14px;">
-          <nuxt-img v-if="isImage"
-                    style="width:600px; height:auto; max-width:100%;"
-                    :src="largeUrl"
-                    :width="item.width ?? 100"
-                    :height="item.height  ?? 'auto'"
-          />
-          <div style="overflow-wrap: break-word; word-wrap: break-word; word-break: break-all;"
-               class="font-weight-bold text-wrap">{{ item[fileNameKey] }}
-          </div>
-          <div>
-            <small>{{ formatStringDate(item.createdAt, 'DD/MM/YYYY HH:mm', 'YYYY-MM-DD HH:mm:ss') }}</small>
-          </div>
+    <div>
+      <div class="d-flex flex-column justify-center text-wrap flex-shrink-1" style="font-size: 14px;">
+        <nuxt-img v-if="isImage"
+                  style="width:600px; height:auto; max-width:100%;"
+                  :src="largeUrl"
+                  :width="item.width ?? 100"
+                  :height="item.height  ?? 'auto'"
+        />
+        <div style="overflow-wrap: break-word; word-wrap: break-word; word-break: break-all;"
+             class="font-weight-bold text-wrap">{{ item[fileNameKey] }}
+        </div>
+        <div>
+          <small>{{ formatStringDate(item.createdAt, 'DD/MM/YYYY HH:mm', 'YYYY-MM-DD HH:mm:ss') }}</small>
         </div>
       </div>
+    </div>
     </v-tooltip>
+
     <v-avatar
       style="position: absolute; top: 5px; right: 5px;"
       size="20"
       v-if="selected"
-      color="success">
+      color="accent">
       <v-icon dark size="10">mdi-check</v-icon>
     </v-avatar>
     <v-avatar

package/package.json

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