tantee-nuxt-commons 0.0.171 → 0.0.173

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/module.json +1 -1
  2. package/dist/runtime/components/form/images/Field.vue +60 -53
  3. package/package.json +1 -1
package/dist/module.json CHANGED
@@ -4,7 +4,7 @@
4
4
  "compatibility": {
5
5
  "nuxt": "^3.0.0"
6
6
  },
7
- "version": "0.0.171",
7
+ "version": "0.0.173",
8
8
  "builder": {
9
9
  "@nuxt/module-builder": "0.8.4",
10
10
  "unbuild": "2.0.0"
package/dist/runtime/components/form/images/Field.vue CHANGED
@@ -1,5 +1,5 @@
1
1
  <script lang="ts" setup>
2
- import { ref, watch } from 'vue'
2
+ import { ref, watch,computed } from 'vue'
3
3
  import { isEqual } from 'lodash-es'
4
4
  import { useAlert } from '../../../composables/alert'
5
5
  import { useAssetFile, type Base64Image, type Base64Asset, type Base64File} from '../../../composables/assetFile'
@@ -230,58 +230,65 @@ defineExpose({
230
230
  <template>
231
231
  <v-input v-model="images" v-bind="$attrs" ref="inputRef">
232
232
  <template #default="{ isReadonly, isDisabled }">
233
- <VCard>
234
- <VToolbar density="compact">
235
- <VToolbarTitle>{{ label }}</VToolbarTitle>
236
- <v-spacer />
237
- <VToolbarItems v-if="!readonly">
238
- <FileBtn
239
- v-model="uploadImages"
240
- :accept="accept"
241
- color="primary"
242
- icon="mdi:mdi-image-plus"
243
- icon-only
244
- multiple
245
- variant="text"
246
- @update:model-value="uploadImageFile"
247
- :disabled="isDisabled?.value" :readonly="isReadonly?.value"
248
- />
249
- <v-btn color="primary" icon @click="dialog = true" :disabled="isDisabled?.value" :readonly="isReadonly?.value">
250
- <v-icon>mdi mdi-camera-plus</v-icon>
251
- </v-btn>
252
- </VToolbarItems>
253
- </VToolbar>
254
-
255
- <VCardText>
256
- <VRow dense justify="center">
257
- <VCol v-for="(image, index) in images" :key="`${imageKey(image)}-${index}`" cols="4">
258
- <VCard>
259
- <VToolbar density="compact">
260
- <VToolbarTitle>
261
- {{ image.imageTitle }}
262
- </VToolbarTitle>
263
- <VSpacer />
264
- <VToolbarItems v-if="!readonly">
265
- <v-btn icon @click="remove(index)" :disabled="isDisabled?.value" :readonly="isReadonly?.value">
266
- <v-icon>mdi mdi-delete-outline</v-icon>
267
- </v-btn>
268
- <v-btn color="primary" icon @click="setDataUpdate(image)" v-if="!image.imageData?.id" :disabled="isDisabled?.value" :readonly="isReadonly?.value">
269
- <v-icon>mdi mdi-image-edit-outline</v-icon>
270
- </v-btn>
271
- </VToolbarItems>
272
- </VToolbar>
273
-
274
- <v-img
275
- :src="imageSrcFromImageData(image)"
276
- height="250"
277
- @click="() => { (props.readonly || image.imageData?.id || isReadonly?.value) ? openImageFullScreen(image) : setDataUpdate(image) }"
278
- :disabled="isDisabled?.value"
279
- />
280
- </VCard>
281
- </VCol>
282
- </VRow>
283
- </VCardText>
284
- </VCard>
233
+ <v-container fluid>
234
+ <v-row>
235
+ <v-col class="pa-0">
236
+ <VCard>
237
+ <VToolbar density="compact">
238
+ <VToolbarTitle>{{ label }}</VToolbarTitle>
239
+ <v-spacer />
240
+ <VToolbarItems v-if="!readonly">
241
+ <FileBtn
242
+ v-model="uploadImages"
243
+ :accept="accept"
244
+ color="primary"
245
+ icon="mdi:mdi-image-plus"
246
+ icon-only
247
+ multiple
248
+ variant="text"
249
+ @update:model-value="uploadImageFile"
250
+ :disabled="isDisabled?.value" :readonly="isReadonly?.value"
251
+ />
252
+ <v-btn color="primary" icon @click="dialog = true" :disabled="isDisabled?.value" :readonly="isReadonly?.value">
253
+ <v-icon>mdi mdi-camera-plus</v-icon>
254
+ </v-btn>
255
+ </VToolbarItems>
256
+ </VToolbar>
257
+
258
+ <VCardText>
259
+ <VRow dense justify="start">
260
+ <VCol v-for="(image, index) in images" :key="`${imageKey(image)}-${index}`" cols="4">
261
+ <VCard>
262
+ <VToolbar density="compact">
263
+ <VToolbarTitle>
264
+ {{ image.imageTitle }}
265
+ </VToolbarTitle>
266
+ <VSpacer />
267
+ <VToolbarItems v-if="!readonly">
268
+ <v-btn icon @click="remove(index)" :disabled="isDisabled?.value" :readonly="isReadonly?.value">
269
+ <v-icon>mdi mdi-delete-outline</v-icon>
270
+ </v-btn>
271
+ <v-btn color="primary" icon @click="setDataUpdate(image)" v-if="!image.imageData?.id" :disabled="isDisabled?.value" :readonly="isReadonly?.value">
272
+ <v-icon>mdi mdi-image-edit-outline</v-icon>
273
+ </v-btn>
274
+ </VToolbarItems>
275
+ </VToolbar>
276
+
277
+ <v-img
278
+ :src="imageSrcFromImageData(image)"
279
+ height="250"
280
+ @click="() => { (props.readonly || image.imageData?.id || isReadonly?.value) ? openImageFullScreen(image) : setDataUpdate(image) }"
281
+ :disabled="isDisabled?.value"
282
+ />
283
+ </VCard>
284
+ </VCol>
285
+ </VRow>
286
+ </VCardText>
287
+ </VCard>
288
+ </v-col>
289
+ </v-row>
290
+ </v-container>
291
+
285
292
 
286
293
  <!-- Edit dialog -->
287
294
  <VDialog v-model="dialogUpdate" fullscreen transition="dialog-bottom-transition">
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "tantee-nuxt-commons",
3
- "version": "0.0.171",
3
+ "version": "0.0.173",
4
4
  "description": "Ramathibodi Nuxt modules for common components",
5
5
  "repository": {
6
6
  "type": "git",