@ramathibodi/nuxt-commons 0.1.14 → 0.1.15

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

@@ -1,186 +1,186 @@
-<script lang="ts" setup>
-import { VueSignaturePad } from 'vue-signature-pad'
-import { type Ref, ref, onMounted, onBeforeUnmount, withDefaults } from 'vue'
-
-interface SignatureOptions {
-  penColor: string
-  minWidth?: number
-  maxWidth?: number
-}
-
-interface SignatureProps {
-  title?: string
-  titleConfirm?: string
-  modelValue: string
-}
-
-const props = withDefaults(defineProps<SignatureProps>(), {
-  title: 'Draw Your Signature',
-  titleConfirm: 'I Accept My Signature',
-})
-
-const signaturePadRef: Ref<any> = ref(null)
-const signatureData: Ref<string> = ref('')
-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 undoSignature = (): void => {
-  signaturePadRef.value.undoSignature()
-}
-
-const clearSignature = (): void => {
-  signaturePadRef.value.clearSignature()
-}
-
-const closeDialog = (): void => {
-  isDialogOpen.value = false
-  signaturePadRef.value.clearSignature()
-  signaturePadRef.value.clearCacheImages()
-}
-
-const emit = defineEmits<{
-  (event: 'update:modelValue', value: string): void
-}>()
-
-const saveSignature = (): void => {
-  isDialogOpen.value = false
-  const { isEmpty, data } = signaturePadRef.value.saveSignature()
-  signatureData.value = isEmpty ? '' : data
-  emit('update:modelValue', signatureData.value)
-}
-
-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
-}
-
-const signaturePadHeight: Ref<string> = ref('')
-const updateSignaturePadHeight = () => {
-  const screenHeight = window.innerHeight
-  signaturePadHeight.value = `${screenHeight * 0.4}px`
-}
-
-onMounted(() => {
-  updateSignaturePadHeight()
-  window.addEventListener('resize', updateSignaturePadHeight)
-})
-
-onBeforeUnmount(() => {
-  window.removeEventListener('resize', updateSignaturePadHeight)
-})
-</script>
-
-<template>
-  <v-card
-    v-if="signatureData"
-    class="pa-2 mb-1"
-    color="grey-lighten-1"
-    variant="outlined"
-    @click="openSignatureDialog"
-  >
-    <v-img
-      :src="signatureData"
-      cover
-    />
-  </v-card>
-  <v-btn
-    append-icon="mdi mdi-draw-pen"
-    block
-    class="text-none"
-    color="primary"
-    variant="flat"
-    @click="openSignatureDialog"
-  >
-    {{ props.title }}
-  </v-btn>
-
-  <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-icon>fa-solid fa-arrow-rotate-left</v-icon>
-        </v-btn>
-        <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-icon>fa-solid fa-xmark</v-icon>
-        </v-btn>
-      </v-toolbar>
-      <v-card-text>
-        <VueSignaturePad
-          ref="signaturePadRef"
-          :options="signatureOptions"
-          :height="signaturePadHeight"
-        />
-      </v-card-text>
-      <v-divider />
-      <v-card-actions class="justify-center">
-        <v-btn
-          class="text-none"
-          color="success"
-          prepend-icon="fa-solid fa-check"
-          variant="flat"
-          @click="saveSignature"
-        >
-          {{ props.titleConfirm }}
-        </v-btn>
-      </v-card-actions>
-    </v-card>
-  </v-dialog>
-</template>
+<script lang="ts" setup>
+import { VueSignaturePad } from 'vue-signature-pad'
+import { type Ref, ref, onMounted, onBeforeUnmount, withDefaults } from 'vue'
+
+interface SignatureOptions {
+  penColor: string
+  minWidth?: number
+  maxWidth?: number
+}
+
+interface SignatureProps {
+  title?: string
+  titleConfirm?: string
+  modelValue: string
+}
+
+const props = withDefaults(defineProps<SignatureProps>(), {
+  title: 'Draw Your Signature',
+  titleConfirm: 'I Accept My Signature',
+})
+
+const signaturePadRef: Ref<any> = ref(null)
+const signatureData: Ref<string> = ref('')
+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 undoSignature = (): void => {
+  signaturePadRef.value.undoSignature()
+}
+
+const clearSignature = (): void => {
+  signaturePadRef.value.clearSignature()
+}
+
+const closeDialog = (): void => {
+  isDialogOpen.value = false
+  signaturePadRef.value.clearSignature()
+  signaturePadRef.value.clearCacheImages()
+}
+
+const emit = defineEmits<{
+  (event: 'update:modelValue', value: string): void
+}>()
+
+const saveSignature = (): void => {
+  isDialogOpen.value = false
+  const { isEmpty, data } = signaturePadRef.value.saveSignature()
+  signatureData.value = isEmpty ? '' : data
+  emit('update:modelValue', signatureData.value)
+}
+
+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
+}
+
+const signaturePadHeight: Ref<string> = ref('')
+const updateSignaturePadHeight = () => {
+  const screenHeight = window.innerHeight
+  signaturePadHeight.value = `${screenHeight * 0.4}px`
+}
+
+onMounted(() => {
+  updateSignaturePadHeight()
+  window.addEventListener('resize', updateSignaturePadHeight)
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', updateSignaturePadHeight)
+})
+</script>
+
+<template>
+  <v-card
+    v-if="signatureData"
+    class="pa-2 mb-1"
+    color="grey-lighten-1"
+    variant="outlined"
+    @click="openSignatureDialog"
+  >
+    <v-img
+      :src="signatureData"
+      cover
+    />
+  </v-card>
+  <v-btn
+    append-icon="mdi mdi-draw-pen"
+    block
+    class="text-none"
+    color="primary"
+    variant="flat"
+    @click="openSignatureDialog"
+  >
+    {{ props.title }}
+  </v-btn>
+
+  <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-icon>fa-solid fa-arrow-rotate-left</v-icon>
+        </v-btn>
+        <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-icon>fa-solid fa-xmark</v-icon>
+        </v-btn>
+      </v-toolbar>
+      <v-card-text>
+        <VueSignaturePad
+          ref="signaturePadRef"
+          :options="signatureOptions"
+          :height="signaturePadHeight"
+        />
+      </v-card-text>
+      <v-divider />
+      <v-card-actions class="justify-center">
+        <v-btn
+          class="text-none"
+          color="success"
+          prepend-icon="fa-solid fa-check"
+          variant="flat"
+          @click="saveSignature"
+        >
+          {{ props.titleConfirm }}
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>