feat: signature dialog

src/components/CanvasComponent.vue

@@ -0,0 +1,143 @@
+<script lang="ts" setup>
+import { onMounted, ref } from 'vue';
+import SignaturePad from 'signature_pad';
+
+defineExpose({ clearCanvas });
+
+let canvasRef: HTMLCanvasElement | null = null;
+const signaturePad = ref();
+const currentColor = ref('blue');
+const tab = ref('draw');
+
+const initializeSignaturePad = () => {
+  if (canvasRef) {
+    signaturePad.value = new SignaturePad(canvasRef, {
+      backgroundColor: 'rgb(248,249,250)',
+      penColor: 'blue',
+    });
+  } else {
+    console.warn('Canvas reference not found. SignaturePad not initialized.');
+  }
+};
+
+function changeColor(color: string) {
+  signaturePad.value.penColor = color;
+  currentColor.value = color;
+}
+
+function clearCanvas() {
+  signaturePad.value.clear();
+}
+
+onMounted(() => {
+  canvasRef = document.querySelector('canvas');
+  initializeSignaturePad();
+});
+</script>
+<template>
+  <div class="surface-1 bordered rounded">
+    <q-tabs
+      v-model="tab"
+      dense
+      align="left"
+      class="text-grey"
+      active-color="primary"
+      indicator-color="primary"
+    >
+      <q-tab
+        name="draw"
+        label="Draw"
+        style="border-top-left-radius: var(--radius-2)"
+      />
+      <q-tab name="upload" label="Upload" />
+    </q-tabs>
+    <q-separator />
+
+    <q-tab-panels v-model="tab" animated>
+      <q-tab-panel name="draw">
+        <div class="column relative-position">
+          <div
+            class="absolute-top-right q-ma-md q-gutter-x-md row items-center"
+          >
+            <span
+              class="dot"
+              :class="{ active: currentColor === 'black' }"
+              style="background-color: black"
+              @click="changeColor('black')"
+            >
+              <q-icon
+                v-if="currentColor === 'black'"
+                name="mdi-check"
+                color="white"
+                size="sm"
+              />
+            </span>
+            <span
+              :class="{ active: currentColor === 'red' }"
+              class="dot"
+              style="background-color: red"
+              @click="changeColor('red')"
+            >
+              <q-icon
+                v-if="currentColor === 'red'"
+                name="mdi-check"
+                color="white"
+                size="sm"
+              />
+            </span>
+            <span
+              :class="{ active: currentColor === 'blue' }"
+              class="dot"
+              style="background-color: blue"
+              @click="changeColor('blue')"
+            >
+              <q-icon
+                v-if="currentColor === 'blue'"
+                name="mdi-check"
+                color="white"
+                size="sm"
+              />
+            </span>
+          </div>
+
+          <canvas
+            class="signature-canvas"
+            ref="canvasRef"
+            id="signature-pad"
+            width="650"
+            height="300"
+          ></canvas>
+        </div>
+      </q-tab-panel>
+    </q-tab-panels>
+
+    <!-- <div class="text-right q-gutter-x-md">
+      <q-btn id="clear" label="Clear" @click="signaturePad.clear()" />
+    </div> -->
+  </div>
+</template>
+<style scoped lang="scss">
+.signature-canvas {
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-2);
+}
+
+.dot {
+  height: 25px;
+  width: 25px;
+  border-radius: 50%;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+
+  &.active {
+    height: 35px;
+    width: 35px;
+  }
+}
+
+.color-palette {
+  position: absolute;
+  display: inline-block;
+}
+</style>