sprintify-ui 0.12.15 → 0.12.17

package/src/components/BaseSignature.mdx

@@ -31,6 +31,29 @@ const signature = ref<string | null>(null);
 
 `update:modelValue` is emitted after each completed stroke. Clearing the pad emits `update:modelValue` with `null`, followed by the `clear` event.
 
+## Text signatures
+
+Pass `signature-text` when the signer’s name is entered elsewhere in the form. The component then shows a translated **Apply my signature** button. Clicking it clears the canvas internally and renders the name with the bundled Dancing Script font, before emitting the resulting white-background PNG through `v-model`. It does not emit `clear` because the signature is replaced, not removed.
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue';
+import { BaseInput, BaseSignature } from 'sprintify-ui';
+
+const name = ref('François Lévesque');
+const signature = ref<string | null>(null);
+</script>
+
+<template>
+  <BaseInput v-model="name" label="Full name" />
+  <BaseSignature v-model="signature" :signature-text="name" />
+</template>
+```
+
+The text action is optional: drawing with a mouse, touch, or pen remains available. Blank text (including spaces only) hides the button. Text is rendered on one line and scales down to fit the available canvas space.
+
+<Canvas of={BaseSignatureStories.TextSignature} />
+
 ## Existing signatures and resizing
 
 Only complete PNG Data URLs are accepted, for example `data:image/png;base64,...`. The image is inspected to find its visible, non-white pixels. That content is then scaled proportionally, centered, and rendered with 8% horizontal and vertical padding.
@@ -53,7 +76,7 @@ JPEG, WebP, SVG, malformed Data URLs, and invalid PNG payloads are rejected. The
 
 ## Disabled state
 
-The `disabled` prop prevents pointer input and disables the built-in clear button. Exposed methods remain available to the parent component.
+The `disabled` prop prevents pointer input and disables all built-in actions. Exposed methods remain available to the parent component.
 
 <Canvas of={BaseSignatureStories.Disabled} />
 
@@ -66,8 +89,9 @@ The `disabled` prop prevents pointer input and disables the built-in clear butto
 | `modelValue` | `string \| null` | `null` | Complete PNG Data URL containing the current signature. |
 | `width` | `number` | `400` | Maximum visual width of the signature pad in pixels. The pad can shrink with its parent. |
 | `height` | `number` | `180` | Visual height used to determine the pad aspect ratio. |
-| `disabled` | `boolean` | `false` | Prevents drawing and clearing through the built-in button. |
+| `disabled` | `boolean` | `false` | Prevents drawing and disables built-in actions. |
 | `showClearButton` | `boolean` | `true` | Shows or hides the built-in translated clear button. |
+| `signatureText` | `string` | `''` | When non-blank, shows an action that renders the text as a Dancing Script PNG signature. |
 
 ## Events
 

package/src/components/BaseSignature.stories.js

@@ -43,6 +43,7 @@ export default {
     height: 180,
     disabled: false,
     showClearButton: true,
+    signatureText: '',
   },
   argTypes: {
     modelValue: {
@@ -65,6 +66,10 @@ export default {
       control: "boolean",
       description: "Shows the built-in clear button below the pad.",
     },
+    signatureText: {
+      control: "text",
+      description: "Text rendered as a Dancing Script PNG when the built-in button is pressed.",
+    },
     "update:modelValue": {
       action: "update:modelValue",
       table: { category: "Events" },
@@ -201,6 +206,41 @@ Compact.args = {
   height: 120,
 };
 
+const TextSignatureTemplate = (args) => ({
+  components: { BaseSignature },
+  setup() {
+    const signature = ref(null);
+    const signatureText = ref(args.signatureText);
+
+    return { args, signature, signatureText };
+  },
+  template: `
+    <div class="space-y-3">
+      <label class="block max-w-md space-y-1 text-sm font-medium text-slate-700">
+        Signature text
+        <input
+          v-model="signatureText"
+          type="text"
+          class="block w-full rounded-md border-slate-300 shadow-sm"
+        >
+      </label>
+      <BaseSignature
+        v-bind="args"
+        v-model="signature"
+        :signature-text="signatureText"
+      />
+      <p class="max-w-lg text-sm text-slate-600">
+        Applying the text replaces the current canvas content with a PNG signature.
+      </p>
+    </div>
+  `,
+});
+
+export const TextSignature = TextSignatureTemplate.bind({});
+TextSignature.args = {
+  signatureText: 'François Lévesque',
+};
+
 export const Disabled = ExistingSignatureTemplate.bind({});
 Disabled.args = {
   disabled: true,

package/src/components/BaseSignature.vue

@@ -25,7 +25,7 @@
     </div>
 
     <div
-      v-if="showClearButton || errorMessage"
+      v-if="showApplySignatureButton || showClearButton || errorMessage"
       class="flex items-start justify-between gap-3"
     >
       <p
@@ -37,23 +37,38 @@
       </p>
       <span v-else />
 
-      <BaseButton
-        v-if="showClearButton"
-        type="button"
-        size="sm"
-        color="secondary-outline"
-        icon="heroicons:trash"
-        :disabled="disabled || !canClear"
-        @click="clear"
-      >
-        {{ t('sui.clear') }}
-      </BaseButton>
+      <div class="flex flex-wrap justify-end gap-2">
+        <BaseButton
+          v-if="showApplySignatureButton"
+          type="button"
+          size="sm"
+          color="secondary-outline"
+          :disabled="disabled || applyingTextSignature"
+          :loading="applyingTextSignature"
+          @click="applyTextSignature"
+        >
+          {{ t('sui.apply_signature') }}
+        </BaseButton>
+
+        <BaseButton
+          v-if="showClearButton"
+          type="button"
+          size="sm"
+          color="secondary-outline"
+          icon="heroicons:trash"
+          :disabled="disabled || !canClear"
+          @click="clear"
+        >
+          {{ t('sui.clear') }}
+        </BaseButton>
+      </div>
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
 import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
+import '@fontsource/dancing-script/400.css';
 import { BaseButton } from '.';
 import { t } from '@/i18n';
 import type { SignatureError, SignatureErrorCode } from '@/types';
@@ -71,12 +86,14 @@ const props = withDefaults(defineProps<{
   height?: number;
   disabled?: boolean;
   showClearButton?: boolean;
+  signatureText?: string;
 }>(), {
   modelValue: null,
   width: 400,
   height: 180,
   disabled: false,
   showClearButton: true,
+  signatureText: '',
 });
 
 const emit = defineEmits<{
@@ -93,6 +110,7 @@ const PNG_SIGNATURE = [137, 80, 78, 71, 13, 10, 26, 10];
 const canvas = ref<HTMLCanvasElement | null>(null);
 const errorMessage = ref<string | null>(null);
 const filled = ref(false);
+const applyingTextSignature = ref(false);
 
 let context: CanvasRenderingContext2D | null = null;
 let activePointerId: number | null = null;
@@ -107,6 +125,8 @@ const normalizedHeight = computed(() => Math.max(1, Math.round(props.height)));
 const canClear = computed(() => {
   return filled.value || Boolean(props.modelValue) || Boolean(errorMessage.value);
 });
+const signatureText = computed(() => props.signatureText.trim());
+const showApplySignatureButton = computed(() => Boolean(signatureText.value));
 
 const containerStyle = computed(() => ({
   width: `${normalizedWidth.value}px`,
@@ -189,6 +209,69 @@ function resetCanvas() {
   filled.value = false;
 }
 
+async function applyTextSignature() {
+  if (!context || props.disabled || !signatureText.value) return;
+
+  const text = signatureText.value;
+  const requestId = ++loadRequestId;
+
+  cancelDrawing();
+  errorMessage.value = null;
+  resetCanvas();
+  applyingTextSignature.value = true;
+
+  try {
+    await document.fonts?.load('400 16px "Dancing Script"', text);
+
+    if (requestId !== loadRequestId || props.disabled) return;
+
+    drawTextSignature(text);
+    emitSignature();
+  } finally {
+    applyingTextSignature.value = false;
+  }
+}
+
+function drawTextSignature(text: string) {
+  if (!context) return;
+
+  const availableWidth = normalizedWidth.value * (1 - SIGNATURE_PADDING_RATIO * 2);
+  const availableHeight = normalizedHeight.value * (1 - SIGNATURE_PADDING_RATIO * 2);
+  const maximumFontSize = Math.max(1, availableHeight * 2);
+  let minimumFontSize = 1;
+  let maximumFittingFontSize = maximumFontSize;
+
+  for (let index = 0; index < 20; index += 1) {
+    const fontSize = (minimumFontSize + maximumFittingFontSize) / 2;
+
+    context.font = `400 ${fontSize}px "Dancing Script", cursive`;
+
+    const metrics = context.measureText(text);
+    const textHeight = metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent;
+    const fits = metrics.width <= availableWidth && textHeight <= availableHeight;
+
+    if (fits) {
+      minimumFontSize = fontSize;
+    } else {
+      maximumFittingFontSize = fontSize;
+    }
+  }
+
+  context.font = `400 ${minimumFontSize}px "Dancing Script", cursive`;
+
+  const metrics = context.measureText(text);
+  const textHeight = metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent;
+  const x = (normalizedWidth.value - metrics.width) / 2;
+  const y = (normalizedHeight.value - textHeight) / 2 + metrics.actualBoundingBoxAscent;
+
+  context.save();
+  context.fillStyle = '#000000';
+  context.textBaseline = 'alphabetic';
+  context.fillText(text, x, y);
+  context.restore();
+  filled.value = true;
+}
+
 async function renderModelValue(modelValue: string | null | undefined) {
   const requestId = ++loadRequestId;
   errorMessage.value = null;
@@ -356,6 +439,7 @@ function startDrawing(event: PointerEvent) {
 
   event.preventDefault();
   loadRequestId += 1;
+  applyingTextSignature.value = false;
   activePointerId = event.pointerId;
   drawing = true;
   errorMessage.value = null;

package/src/lang/en.json

@@ -12,6 +12,7 @@
     "address_2_description": "Apartment, suite, unit, building",
     "and": "and",
     "apply": "Apply",
+    "apply_signature": "Apply my signature",
     "apply_filters": "Apply filters",
     "authentication_code": "Authentication code",
     "autocomplete_placeholder": "Search...",

package/src/lang/fr.json

@@ -12,6 +12,7 @@
     "address_2_description": "Appartement, suite, unité, immeuble",
     "and": "et",
     "apply": "Appliquer",
+    "apply_signature": "Appliquer ma signature",
     "apply_filters": "Appliquer les filtres",
     "authentication_code": "Code d'authentification",
     "autocomplete_placeholder": "Rechercher...",