tantee-nuxt-commons 0.0.168 → 0.0.169

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

@@ -1,167 +1,139 @@
 <script lang="ts" setup>
-import { VueSignaturePad } from 'vue-signature-pad'
+import { VueSignaturePad } from 'vue-signature-pad';
 import { VInput } from 'vuetify/components/VInput'
-import { ref, computed, withDefaults, defineProps, defineExpose, watch } from 'vue'
-import { useAssetFile, type Base64Asset } from '../../composables/assetFile'
+import { type Ref, ref, onMounted, onBeforeUnmount, nextTick,watch,defineExpose,useTemplateRef,computed } from 'vue'
+
+interface SignatureOptions {
+ penColor: string
+ minWidth?: number
+ maxWidth?: number
+}
 
 interface SignatureProps extends /* @vue-ignore */ InstanceType<typeof VInput['$props']> {
   title?: string
   btnName?: string
   titleConfirm?: string
-  penColor?: string
-  /** hydrate when id is present but base64String is missing */
-  autoHydrate?: boolean
+  modelValue?: string
 }
 
 const props = withDefaults(defineProps<SignatureProps>(), {
-  title: 'Signature',
+  title: 'Draw Your Signature',
   btnName: 'Draw Your Signature',
   titleConfirm: 'I Accept My Signature',
-  penColor: '#303F9F',
-  autoHydrate: true,
 })
 
-const { hydrateAssetFile } = useAssetFile()
-
-const model = defineModel<Base64Asset | string | null>({ default: null })
-
-// refs
-const inputRef = ref<InstanceType<typeof VInput> | null>(null)
-const signaturePadRef = ref<InstanceType<typeof VueSignaturePad> | null>(null)
-
-const isDialogOpen = ref(false)
+const inputRef = useTemplateRef<VInput>("inputRef")
+const signaturePadRef = useTemplateRef<typeof VueSignaturePad>("signaturePadRef")
 
-// signature pad options from props
-const signatureOptions = computed(() => ({
-  penColor: props.penColor,
-  minWidth: 0.5,
-  maxWidth: 4,
-}))
+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)
 
-// internal normalized value
-const normalized = ref<Base64Asset | null>(null)
-const imageDataUrl = computed(() => {
-  const val = normalized.value
-  if (!val?.base64String) return null
-
-  const base = val.base64String.trim()
+const undoSignature = (): void => {
+ signaturePadRef.value?.undoSignature()
+}
 
-  if (base.startsWith("data:")) {
-    return base
-  }
+const clearSignature = (): void => {
+ signaturePadRef.value?.clearSignature()
+}
 
-  const mime = (val as Base64File).fileType || "image/png"
-  return `data:${mime};base64,${base}`
-})
+const closeDialog = (): void => {
+ isDialogOpen.value = false
+ signaturePadRef.value?.clearSignature()
+ signaturePadRef.value?.clearCacheImages()
+}
 
+const emit = defineEmits<{
+ (event: 'update:modelValue', value: string|null): void
+}>()
 
-// guards
-let syncing = false      // block re-entrancy while normalizing/hydrating
+const saveSignature = (): void => {
+ isDialogOpen.value = false
+ const { isEmpty, data } = signaturePadRef.value?.saveSignature()
+ signatureData.value = isEmpty ? null : data
+}
 
-function wrapToAsset(input: Base64Asset | string | null): Base64Asset | null {
-  if (input == null) return null
-  return typeof input === 'string' ? { base64String: input } : input
+const changePenColor = (color: string): void => {
+ selectedColor.value = color
+ signatureOptions.value = { penColor: color }
 }
 
-/** 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?.()
+const openSignatureDialog = (): void => {
+  selectedColor.value = defaultColor
+  signatureOptions.value = { penColor: defaultColor }
+  isDialogOpen.value = true
+  nextTick(() =>{
+    if (props.modelValue) {
+      signaturePadRef.value?.fromDataURL(props.modelValue)
+    }
+  });
 }
 
-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
-  }
+const signaturePadHeight: Ref<string> = ref('')
+const updateSignaturePadHeight = () => {
+  const screenHeight = window.innerHeight
+  signaturePadHeight.value = `${screenHeight * 0.4}px`
 }
 
-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
-  }
+watch(signatureData,()=>{
+  emit('update:modelValue', signatureData.value)
+})
 
-  isDialogOpen.value = true
+watch(()=>props.modelValue, (newValue) => {
+  signatureData.value = newValue || null
+},{immediate: true})
 
-  const existing = normalized.value?.base64String
-  if (existing) {
-    // seed after dialog mount
-    requestAnimationFrame(() => signaturePadRef.value?.fromDataURL(existing))
-  }
-}
+onMounted(() => {
+  updateSignaturePadHeight()
+  window.addEventListener('resize', updateSignaturePadHeight)
+})
 
-// validation passthrough
-const isValid = computed(() => inputRef.value?.isValid)
-const errorMessages = computed(() => inputRef.value?.errorMessages)
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', updateSignaturePadHeight)
+})
+
+const isValid = computed(()=>{
+  return inputRef.value?.isValid
+})
+
+const errorMessages = computed(()=>{
+  return 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="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-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-icon
               class="position-absolute"
               style="top: 8px; right: 8px; z-index: 10;"
-              @click="model = null; normalized = null"
-              v-if="!isReadonly?.value"
+              @click="signatureData=null"
+              v-if="signatureData && !isReadonly.value"
           >
             mdi mdi-close-circle
           </v-icon>
         </v-card-text>
-
-        <v-card-actions v-if="!isReadonly?.value">
+        <v-card-actions>
           <v-btn
               append-icon="mdi mdi-draw-pen"
               block
@@ -169,43 +141,79 @@ 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-btn icon @click="closeDialog">
+              <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-icon>fa-solid fa-xmark</v-icon>
               </v-btn>
             </v-toolbar>
-
             <v-card-text>
               <VueSignaturePad
                   ref="signaturePadRef"
                   :options="signatureOptions"
-                  height="40vh"
+                  :height="signaturePadHeight"
               />
             </v-card-text>
-
             <v-divider />
-
             <v-card-actions class="justify-center">
               <v-btn
                   class="text-none"