tantee-nuxt-commons 0.0.170 → 0.0.172

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": "^3.0.0"
   },
-  "version": "0.0.170",
+  "version": "0.0.172",
   "builder": {
     "@nuxt/module-builder": "0.8.4",
     "unbuild": "2.0.0"

package/dist/module.mjs

@@ -39,6 +39,12 @@ const module = defineNuxtModule({
       ...runtimeConfig,
       ..._options
     };
+    _nuxt.options.vite.optimizeDeps ||= {};
+    _nuxt.options.vite.optimizeDeps.include ||= [];
+    _nuxt.options.vite.optimizeDeps.include.push("painterro");
+    _nuxt.options.vite.optimizeDeps.include.push("print-js");
+    _nuxt.options.vite.optimizeDeps.include.push("gql-query-builder");
+    _nuxt.options.vite.optimizeDeps.include.push("exif-rotate-js");
   }
 });
 

package/dist/runtime/components/form/images/Field.vue

@@ -1,9 +1,10 @@
 <script lang="ts" setup>
-import { ref, watch } from 'vue'
+import { ref, watch,computed } from 'vue'
 import { isEqual } from 'lodash-es'
 import { useAlert } from '../../../composables/alert'
-import {useAssetFile, type Base64Image, type Base64Asset, type Base64File} from '../../../composables/assetFile'
-import {useRuntimeConfig} from "#imports";
+import { useAssetFile, type Base64Image, type Base64Asset, type Base64File} from '../../../composables/assetFile'
+import { useRuntimeConfig } from "#imports";
+import { VInput } from 'vuetify/components/VInput'
 
 const emit = defineEmits<{
   (e: 'update:modelValue', value: Base64Image[]): void
@@ -210,83 +211,103 @@ watch(
     },
     { immediate: false }
 )
+
+// validation passthrough
+const inputRef = ref<InstanceType<typeof VInput> | null>(null)
+
+const isValid = computed(() => inputRef.value?.isValid)
+const errorMessages = computed(() => inputRef.value?.errorMessages)
+
+defineExpose({
+  errorMessages,
+  isValid,
+  reset: () => inputRef.value?.reset(),
+  resetValidation: () => inputRef.value?.resetValidation(),
+  validate: () => inputRef.value?.validate(),
+})
 </script>
 
 <template>
-  <VCard>
-    <VToolbar density="compact">
-      <VToolbarTitle>{{ label }}</VToolbarTitle>
-      <v-spacer />
-      <VToolbarItems v-if="!readonly">
-        <FileBtn
-            v-model="uploadImages"
-            :accept="accept"
-            color="primary"
-            icon="mdi:mdi-image-plus"
-            icon-only
-            multiple
-            variant="text"
-            @update:model-value="uploadImageFile"
-        />
-        <v-btn color="primary" icon @click="dialog = true">
-          <v-icon>mdi mdi-camera-plus</v-icon>
-        </v-btn>
-      </VToolbarItems>
-    </VToolbar>
-
-    <VCardText>
-      <VRow dense justify="center">
-        <VCol v-for="(image, index) in images" :key="`${imageKey(image)}-${index}`" cols="4">
-          <VCard>
-            <VToolbar density="compact">
-              <VToolbarTitle>
-                {{ image.imageTitle }}
-              </VToolbarTitle>
-              <VSpacer />
-              <VToolbarItems v-if="!readonly">
-                <v-btn icon @click="remove(index)">
-                  <v-icon>mdi mdi-delete-outline</v-icon>
-                </v-btn>
-                <v-btn color="primary" icon @click="setDataUpdate(image)" v-if="!image.imageData?.id">
-                  <v-icon>mdi mdi-image-edit-outline</v-icon>
-                </v-btn>
-              </VToolbarItems>
-            </VToolbar>
-
-            <v-img
-                :src="imageSrcFromImageData(image)"
-                height="250"
-                @click="() => { (props.readonly || image.imageData?.id) ? openImageFullScreen(image) : setDataUpdate(image) }"
+  <v-input v-model="images" v-bind="$attrs" ref="inputRef">
+    <template #default="{ isReadonly, isDisabled }">
+      <VCard>
+        <VToolbar density="compact">
+          <VToolbarTitle>{{ label }}</VToolbarTitle>
+          <v-spacer />
+          <VToolbarItems v-if="!readonly">
+            <FileBtn
+                v-model="uploadImages"
+                :accept="accept"
+                color="primary"
+                icon="mdi:mdi-image-plus"
+                icon-only
+                multiple
+                variant="text"
+                @update:model-value="uploadImageFile"
+                :disabled="isDisabled?.value" :readonly="isReadonly?.value"
             />
-          </VCard>
-        </VCol>
-      </VRow>
-    </VCardText>
-  </VCard>
-
-  <!-- Edit dialog -->
-  <VDialog v-model="dialogUpdate" fullscreen transition="dialog-bottom-transition">
-    <FormImagesPad
-        v-model="dataUpdate.imageData.base64String"
-        @closedDialog="dialogUpdate = false"
-    />
-  </VDialog>
-
-  <!-- Capture dialog -->
-  <FormDialog v-model="dialog" :form-data="modelData" @create="captureImage">
-    <template #default="{ data }">
-      <FormImagesCapture v-model="data.imageCapture" />
+            <v-btn color="primary" icon @click="dialog = true" :disabled="isDisabled?.value" :readonly="isReadonly?.value">
+              <v-icon>mdi mdi-camera-plus</v-icon>
+            </v-btn>
+          </VToolbarItems>
+        </VToolbar>
+
+        <VCardText>
+          <VRow dense justify="center">
+            <VCol v-for="(image, index) in images" :key="`${imageKey(image)}-${index}`" cols="4">
+              <VCard>
+                <VToolbar density="compact">
+                  <VToolbarTitle>
+                    {{ image.imageTitle }}
+                  </VToolbarTitle>
+                  <VSpacer />
+                  <VToolbarItems v-if="!readonly">
+                    <v-btn icon @click="remove(index)" :disabled="isDisabled?.value" :readonly="isReadonly?.value">
+                      <v-icon>mdi mdi-delete-outline</v-icon>
+                    </v-btn>
+                    <v-btn color="primary" icon @click="setDataUpdate(image)" v-if="!image.imageData?.id" :disabled="isDisabled?.value" :readonly="isReadonly?.value">
+                      <v-icon>mdi mdi-image-edit-outline</v-icon>
+                    </v-btn>
+                  </VToolbarItems>
+                </VToolbar>
+
+                <v-img
+                    :src="imageSrcFromImageData(image)"
+                    height="250"
+                    @click="() => { (props.readonly || image.imageData?.id || isReadonly?.value) ? openImageFullScreen(image) : setDataUpdate(image) }"
+                    :disabled="isDisabled?.value"
+                />
+              </VCard>
+            </VCol>
+          </VRow>
+        </VCardText>
+      </VCard>
+
+      <!-- Edit dialog -->
+      <VDialog v-model="dialogUpdate" fullscreen transition="dialog-bottom-transition">
+        <FormImagesPad
+            v-model="dataUpdate.imageData.base64String"
+            @closedDialog="dialogUpdate = false"
+        />
+      </VDialog>
+
+      <!-- Capture dialog -->
+      <FormDialog v-model="dialog" :form-data="modelData" @create="captureImage">
+        <template #default="{ data }">
+          <FormImagesCapture v-model="data.imageCapture" />
+        </template>
+      </FormDialog>
+
+      <!-- Fullscreen preview -->
+      <v-dialog v-model="dialogImageFullScreen">
+        <v-toolbar :title="imageFullScreen.title">
+          <v-spacer />
+          <v-btn icon="mdi mdi-close" @click="dialogImageFullScreen = false" />
+        </v-toolbar>
+        <v-card height="80vh">
+          <v-img :src="imageFullScreen.image" />
+        </v-card>
+      </v-dialog>
     </template>
-  </FormDialog>
-
-  <!-- Fullscreen preview -->
-  <v-dialog v-model="dialogImageFullScreen">
-    <v-toolbar :title="imageFullScreen.title">
-      <v-spacer />
-      <v-btn icon="mdi mdi-close" @click="dialogImageFullScreen = false" />
-    </v-toolbar>
-    <v-card height="80vh">
-      <v-img :src="imageFullScreen.image" />
-    </v-card>
-  </v-dialog>
+  </v-input>
 </template>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tantee-nuxt-commons",
-  "version": "0.0.170",
+  "version": "0.0.172",
   "description": "Ramathibodi Nuxt modules for common components",
   "repository": {
     "type": "git",