tantee-nuxt-commons 0.0.169 → 0.0.170

package/dist/runtime/components/form/SignPad.vue

@@ -1,139 +1,160 @@
 <script lang="ts" setup>
-import { VueSignaturePad } from 'vue-signature-pad';
+import { VueSignaturePad } from 'vue-signature-pad'
 import { VInput } from 'vuetify/components/VInput'
-import { type Ref, ref, onMounted, onBeforeUnmount, nextTick,watch,defineExpose,useTemplateRef,computed } from 'vue'
-
-interface SignatureOptions {
- penColor: string
- minWidth?: number
- maxWidth?: number
-}
+import { ref, computed, withDefaults, defineProps, defineExpose, watch } from 'vue'
+import { useAssetFile, type Base64Asset, type Base64File } from '../../composables/assetFile'
 
 interface SignatureProps extends /* @vue-ignore */ InstanceType<typeof VInput['$props']> {
   title?: string
   btnName?: string
   titleConfirm?: string
-  modelValue?: string
+  penColor?: string
+  /** hydrate when id is present but base64String is missing */
+  autoHydrate?: boolean
 }
 
 const props = withDefaults(defineProps<SignatureProps>(), {
-  title: 'Draw Your Signature',
+  title: 'Signature',
   btnName: 'Draw Your Signature',
   titleConfirm: 'I Accept My Signature',
+  penColor: '#303F9F',
+  autoHydrate: true,
 })
 
-const inputRef = useTemplateRef<VInput>("inputRef")
-const signaturePadRef = useTemplateRef<typeof VueSignaturePad>("signaturePadRef")
+const { hydrateAssetFile } = useAssetFile()
 
-const signatureData: Ref<string|null> = ref(null)
-const colorOptions: string[] = ['#303F9F', '#1A2023', '#2E7D32', '#AC04BF']
-const defaultColor: string = colorOptions[0]
-const selectedColor: Ref<string> = ref(defaultColor)
-const signatureOptions: Ref<SignatureOptions> = ref({ penColor: defaultColor, minWidth: 0.5, maxWidth: 4 })
-const isDialogOpen: Ref<boolean> = ref(false)
+const model = defineModel<Base64Asset | string | null>({ default: null })
 
-const undoSignature = (): void => {
- signaturePadRef.value?.undoSignature()
-}
+// refs
+const inputRef = ref<InstanceType<typeof VInput> | null>(null)
+const signaturePadRef = ref<InstanceType<typeof VueSignaturePad> | null>(null)
 
-const clearSignature = (): void => {
- signaturePadRef.value?.clearSignature()
-}
+const isDialogOpen = ref(false)
 
-const closeDialog = (): void => {
- isDialogOpen.value = false
- signaturePadRef.value?.clearSignature()
- signaturePadRef.value?.clearCacheImages()
-}
+// signature pad options from props
+const signatureOptions = computed(() => ({
+  penColor: props.penColor,
+  minWidth: 0.5,
+  maxWidth: 4,
+}))
 
-const emit = defineEmits<{
- (event: 'update:modelValue', value: string|null): void
-}>()
+// internal normalized value
+const normalized = ref<Base64Asset | null>(null)
+const imageDataUrl = computed(() => {
+  const val = normalized.value
+  if (!val?.base64String) return null
 
-const saveSignature = (): void => {
- isDialogOpen.value = false
- const { isEmpty, data } = signaturePadRef.value?.saveSignature()
- signatureData.value = isEmpty ? null : data
-}
+  return useAssetFile().ensureDataUrl(val.base64String.trim(),(val as Base64File).fileType || "image/png")
+})
 
-const changePenColor = (color: string): void => {
- selectedColor.value = color
- signatureOptions.value = { penColor: color }
-}
 
-const openSignatureDialog = (): void => {
-  selectedColor.value = defaultColor
-  signatureOptions.value = { penColor: defaultColor }
-  isDialogOpen.value = true
-  nextTick(() =>{
-    if (props.modelValue) {
-      signaturePadRef.value?.fromDataURL(props.modelValue)
-    }
-  });
-}
+// guards
+let syncing = false      // block re-entrancy while normalizing/hydrating
 
-const signaturePadHeight: Ref<string> = ref('')
-const updateSignaturePadHeight = () => {
-  const screenHeight = window.innerHeight
-  signaturePadHeight.value = `${screenHeight * 0.4}px`
+function wrapToAsset(input: Base64Asset | string | null): Base64Asset | null {
+  if (input == null) return null
+  return typeof input === 'string' ? { base64String: input } : input
 }
 
-watch(signatureData,()=>{
-  emit('update:modelValue', signatureData.value)
-})
+/** Normalize & (optionally) hydrate whenever external model changes */
+watch(
+    model,
+    async (val) => {
+      if (syncing) return
+      syncing = true
+      try {
+        const asAsset = wrapToAsset(val)
+        normalized.value = asAsset
+
+        // If parent provided a string, convert and write back once
+        if (typeof val === 'string') {
+          model.value = asAsset
+        }
+
+        // Hydrate if requested and needed (id present, no base64String)
+        if (props.autoHydrate && asAsset?.id != null && !asAsset.base64String) {
+          await hydrateAssetFile(asAsset) // mutates asAsset in-place
+          // reflect hydrated base64String back to parent (guarded)
+          model.value = asAsset
+        }
+      } finally {
+        syncing = false
+      }
+    },
+    { immediate: true }
+)
+
+// signature actions
+const undoSignature = () => signaturePadRef.value?.undoSignature()
+const clearSignature = () => signaturePadRef.value?.clearSignature()
+
+const closeDialog = () => {
+  isDialogOpen.value = false
+  signaturePadRef.value?.clearSignature()
+  signaturePadRef.value?.clearCacheImages?.()
+}
 
-watch(()=>props.modelValue, (newValue) => {
-  signatureData.value = newValue || null
-},{immediate: true})
+const saveSignature = () => {
+  isDialogOpen.value = false
+  const result = signaturePadRef.value?.saveSignature()
+  if (!result) return
+  const { isEmpty, data } = result
+  if (isEmpty) {
+    normalized.value = null
+    model.value = null
+  } else {
+    const asset: Base64Asset = { base64String: data }
+    normalized.value = asset
+    model.value = asset
+  }
+}
 
-onMounted(() => {
-  updateSignaturePadHeight()
-  window.addEventListener('resize', updateSignaturePadHeight)
-})
+const openSignatureDialog = async () => {
+  // ensure hydration before opening to preview correctly
+  if (props.autoHydrate && normalized.value?.id != null && !normalized.value.base64String) {
+    await hydrateAssetFile(normalized.value)
+    model.value = normalized.value
+  }
 
-onBeforeUnmount(() => {
-  window.removeEventListener('resize', updateSignaturePadHeight)
-})
+  isDialogOpen.value = true
 
-const isValid = computed(()=>{
-  return inputRef.value?.isValid
-})
+  const existing = normalized.value?.base64String
+  if (existing) {
+    // seed after dialog mount
+    requestAnimationFrame(() => signaturePadRef.value?.fromDataURL(existing))
+  }
+}
 
-const errorMessages = computed(()=>{
-  return inputRef.value?.errorMessages
-})
+// validation passthrough
+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(),
+  reset: () => inputRef.value?.reset(),
+  resetValidation: () => inputRef.value?.resetValidation(),
+  validate: () => inputRef.value?.validate(),
 })
 </script>
 
 <template>
-  <v-input v-model="signatureData" v-bind="$attrs" ref="inputRef">
-    <template #default="{isReadonly,isDisabled}">
-      <v-card
-          class="w-100"
-          flat
-      >
-        <v-card-text v-if="signatureData">
-          <v-img
-              :src="signatureData"
-              cover
-          />
+  <v-input v-model="model" v-bind="$attrs" ref="inputRef">
+    <template #default="{ isReadonly, isDisabled }">
+      <v-card class="w-100" flat :variant="$attrs.variant" :title="props.title">
+        <v-card-text v-if="normalized?.base64String">
+          <v-img :src="imageDataUrl" cover />
           <v-icon
               class="position-absolute"
               style="top: 8px; right: 8px; z-index: 10;"
-              @click="signatureData=null"
-              v-if="signatureData && !isReadonly.value"
+              @click="model = null; normalized = null"
+              v-if="!isReadonly?.value"
           >
             mdi mdi-close-circle
           </v-icon>
         </v-card-text>
-        <v-card-actions>
+
+        <v-card-actions v-if="!isReadonly?.value">
           <v-btn
               append-icon="mdi mdi-draw-pen"
               block
@@ -141,79 +162,43 @@ defineExpose({
               color="primary"
               variant="flat"
               @click="openSignatureDialog"
-              :readonly="isReadonly.value"
-              :disabled="isDisabled.value"
+              :readonly="isReadonly?.value"
+              :disabled="isDisabled?.value"
           >
             {{ props.btnName }}
           </v-btn>
         </v-card-actions>
-        <v-dialog
-            v-model="isDialogOpen"
-            height="auto"
-            persistent
-            width="100%"
-        >
+
+        <v-dialog v-model="isDialogOpen" height="auto" persistent width="100%">
           <v-card>
             <v-toolbar>
               <v-toolbar-title class="text-no-wrap">
                 {{ props.title }}
               </v-toolbar-title>
-              <v-btn
-                  icon
-                  @click="undoSignature"
-              >
+
+              <v-btn icon @click="undoSignature">
                 <v-icon>fa-solid fa-arrow-rotate-left</v-icon>
               </v-btn>
-              <v-btn
-                  icon
-                  @click="clearSignature"
-              >
+
+              <v-btn icon @click="clearSignature">
                 <v-icon>fa-solid fa-trash</v-icon>
               </v-btn>
-              <v-menu>
-                <template #activator="{ props: activatorProps }">
-                  <v-btn
-                      :color="selectedColor"
-                      :icon="true"
-                      v-bind="activatorProps"
-                  >
-                    <v-icon>fa-solid fa-paintbrush</v-icon>
-                  </v-btn>
-                </template>
-                <v-list>
-                  <v-row>
-                    <v-col class="text-center">
-                      <v-avatar
-                          v-for="(color, index) in colorOptions"
-                          :key="index"
-                          :color="color"
-                          :value="color"
-                          class="mr-1"
-                          @click="changePenColor(color)"
-                      >
-                        <v-icon color="white">
-                          {{ selectedColor === color ? 'fa-solid fa-check' : '' }}
-                        </v-icon>
-                      </v-avatar>
-                    </v-col>
-                  </v-row>
-                </v-list>
-              </v-menu>
-              <v-btn
-                  icon
-                  @click="closeDialog"
-              >
+
+              <v-btn icon @click="closeDialog">
                 <v-icon>fa-solid fa-xmark</v-icon>
               </v-btn>
             </v-toolbar>
+
             <v-card-text>
               <VueSignaturePad
                   ref="signaturePadRef"
                   :options="signatureOptions"
-                  :height="signaturePadHeight"
+                  height="40vh"
               />
             </v-card-text>
+
             <v-divider />
+
             <v-card-actions class="justify-center">
               <v-btn
                   class="text-none"