@bagelink/vue 1.15.429 → 1.15.433

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "1.15.429",
+  "version": "1.15.433",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Bagel Studio",

package/src/components/Btn.vue

@@ -199,6 +199,13 @@ const bind = computed(() => {
 	}
 	return obj
 })
+function handleKeydown(event: KeyboardEvent) {
+	const element = event.currentTarget as HTMLElement
+	if (element.tagName === 'BUTTON' || (element.tagName === 'A' && event.key === 'Enter')) return
+	if (props.disabled || event.repeat) return
+	event.preventDefault()
+	element.click()
+}
 const slots: SetupContext['slots'] = useSlots()
 </script>
 
@@ -226,7 +233,7 @@ const slots: SetupContext['slots'] = useSlots()
 			'gradient': computedVariant === 'gradient',
 			'bgl_pill-frame': frame,
 			relative: loading,
-		}, computedPairClass]" :style="gradientStyle" :tabindex="disabled ? -1 : 0" @click.stop="handleClick" @keydown.enter="handleClick" @keydown.space="handleClick"
+		}, computedPairClass]" :style="gradientStyle" :tabindex="disabled ? -1 : 0" @click.stop="handleClick" @keydown.enter="handleKeydown" @keydown.space="handleKeydown"
 	>
 		<!-- Keep label/icons mounted while loading so the button width/height don't jump.
 		     Hide them hard (visibility + opacity) so the icon never shows through the spinner.

package/src/components/form/inputs/ArrayInput.vue

@@ -173,7 +173,7 @@ function getItemRef(i: number) {
 			{{ helptext }}
 		</p>
 		<template v-if="!collapsible">
-			<div v-for="(_, i) in items" :key="i" class="array-input-row grid align-items-center" :class="{ 'simpleArray': isSimple, 'pb-1': !isSimple }">
+			<div v-for="(_, i) in items" :key="i" class="array-input-row grid align-items-center" :class="{ 'simpleArray mb-025': isSimple, 'pb-1': !isSimple }">
 				<slot :item="getItemRef(i)" :index="i" />
 				<div v-if="allowDelete" class=" h-100p" :class="{ 'border-start ps-025 ms-075': !simple }">
 					<Btn

package/src/components/form/inputs/NumberInput.vue

@@ -16,6 +16,7 @@ interface NumberInputProps extends BagelInputShellProps {
 	iconStart?: IconType
 	icon?: IconType
 	label?: string
+	hideLabel?: boolean
 	defaultValue?: number | string
 	placeholder?: string
 	disabled?: boolean
@@ -39,6 +40,7 @@ const {
 	iconStart,
 	icon,
 	label,
+	hideLabel = false,
 	placeholder,
 	disabled,
 	required,
@@ -181,7 +183,7 @@ const hasValue = computed(() => formattedValue.value.length > 0)
 		]" :style="shellStyle"
 	>
 		<div>
-			<label v-if="label || (underlined && placeholder)" class="block">
+			<label v-if="!hideLabel && (label || (underlined && placeholder))" class="block">
 				<span class="label-text">{{ resolveI18n(label) || resolveI18n(placeholder) }}<span v-if="required"> *</span></span>
 			</label>
 			<div class="gap-025" :class="{ 'column display-flex': layout === 'vertical', 'flex': layout === 'horizontal' }">
@@ -195,7 +197,8 @@ const hasValue = computed(() => formattedValue.value.length > 0)
 						:id v-model.trim="formattedValue" v-pattern.number type="text" :class="{
 							'txt-center': center,
 							'min0': layout,
-						}" :placeholder="underlined ? ' ' : (resolveI18n(placeholder) || resolveI18n(label))" :disabled :required inputmode="decimal"
+						}" :placeholder="underlined ? ' ' : (resolveI18n(placeholder) || (hideLabel ? undefined : resolveI18n(label)))" :disabled :required inputmode="decimal"
+						:aria-label="hideLabel ? (resolveI18n(label) || resolveI18n(placeholder)) : undefined"
 						autocomplete="off" :pattern="useGrouping ? '^-?\\d{1,3}(,\\d{3})*(\.\\d+)?$' : '^-?\\d*\.?\d*$'"
 						autocorrect="off" spellcheck="false" @input="inputHandler" @keydown.up.prevent="increment"
 						@keydown.down.prevent="decrement"

package/src/components/form/inputs/RadioGroup.vue

@@ -26,6 +26,7 @@ const props = withDefaults(
 	defineProps<{
 		id?: string
 		label?: string
+		hideLabel?: boolean
 		groupName?: string
 		options: RadioOptionsSource<ContextObjType>
 		deletable?: boolean
@@ -173,8 +174,8 @@ function handleChange() {
 </script>
 
 <template>
-	<div :class="containerClasses" :style="containerStyle" role="radiogroup" :aria-labelledby="label ? `${name}-label` : undefined">
-		<p v-if="label" :id="`${name}-label`" class="group-label">
+	<div :class="containerClasses" :style="containerStyle" role="radiogroup" :aria-labelledby="label && !hideLabel ? `${name}-label` : undefined" :aria-label="hideLabel ? resolveI18n(label) : undefined">
+		<p v-if="label && !hideLabel" :id="`${name}-label`" class="group-label">
 			{{ resolveI18n(label) }} <span v-if="required">*</span>
 		</p>
 <div ref="inlineWrapper" class="radio-group-wrap" :class="[wrapperClass, { 'radio-group-wrap--inline': inline }]"

package/src/components/form/inputs/SelectInput.vue

@@ -299,7 +299,7 @@ onMounted(() => {
 	>
 		<template #trigger>
 			<label>
-				<span v-if="label || (underlined && placeholder)" class="label-text">{{ resolveI18n(label)
+				<span v-if="!hideLabel && (label || (underlined && placeholder))" class="label-text">{{ resolveI18n(label)
 					|| resolveI18n(placeholder) }}<span v-if="required"> *</span></span>
 				<div class="flex gap-05">
 					<TextInput

package/src/components/form/inputs/SignaturePad.vue

@@ -6,6 +6,7 @@ import SignaturePad from 'signature_pad'
 import { computed, onMounted, ref, watch } from 'vue'
 import type { BagelInputShellProps } from './bagelInputShell'
 import { useBagelInputShell } from './bagelInputShell'
+import { getSignaturePadPixelRatio, resizeSignatureCanvas } from './signaturePadSizing'
 
 export interface WaterMark {
 	text: string
@@ -94,10 +95,11 @@ function saveFile() {
 }
 
 function fromDataURL(url: string) {
+	const bounds = vCanvas.value?.getBoundingClientRect()
 	return sig.value?.fromDataURL(url, {
-		height: vCanvas.value?.height,
-		width: vCanvas.value?.width,
-		ratio: props.ratio,
+		height: bounds?.height,
+		width: bounds?.width,
+		ratio: getSignaturePadPixelRatio(),
 		xOffset: 0,
 		yOffset: 0,
 	})
@@ -195,17 +197,37 @@ watch(fileData, (newFile) => {
 })
 
 function resizeCanvas() {
-	let url
-	if (!isEmpty()) { url = save() }
-	const ratio = props.ratio ?? 1 / 2
-	const { width } = vCanvas.value!.getBoundingClientRect()
-	vCanvas.value!.width = props.width ? Number(props.width.replaceAll('px', '')) : width
-	vCanvas.value!.height = props.height ? Number(props.height.replaceAll('px', '')) : width * ratio
-	clear()
-	if (!props.clearOnResize && url !== undefined) { void fromDataURL(url) }
+	const canvas = vCanvas.value
+	const signature = sig.value
+	if (!canvas || !signature) { return }
+
+	const wasEmpty = signature.isEmpty()
+	const pointData = wasEmpty ? [] : signature.toData()
+	const imageData = !wasEmpty && pointData.length === 0 ? save() : undefined
+	if (!resizeSignatureCanvas(canvas)) { return }
+
+	signature.clear()
+	if (props.clearOnResize) {
+		_isEmpty.value = true
+		sigData.value = undefined
+	} else if (pointData.length > 0) {
+		signature.fromData(pointData)
+		_isEmpty.value = false
+	} else if (imageData) {
+		void fromDataURL(imageData)
+		_isEmpty.value = false
+	}
 	if (props.waterMark) { addWaterMark(props.waterMark) }
 }
 
+const canvasStyle = computed(() => ({
+	...(props.backgroundColor ? { background: props.backgroundColor } : {}),
+	width: props.width ?? '100%',
+	...(props.height
+		? { height: props.height }
+		: { aspectRatio: `1 / ${props.ratio ?? 1 / 2}`, height: 'auto' }),
+}))
+
 function draw() {
 	sig.value = new SignaturePad(vCanvas.value!, signatureOptions.value)
 	resizeCanvas()
@@ -253,7 +275,7 @@ defineExpose({
 			ref="vCanvas"
 			class="canvas"
 			:disabled
-			:style="backgroundColor ? { background: backgroundColor } : {}"
+			:style="canvasStyle"
 		/>
 		<input
 			placeholder="required"
@@ -273,8 +295,7 @@ defineExpose({
 <style>
 
 .bgl_input .canvas {
-width: 100%;
-height: 100%;
+display: block;
 }
 
 .bgl_input.signature-pad {

package/src/components/form/inputs/signaturePadSizing.ts

@@ -0,0 +1,30 @@
+export const MAX_SIGNATURE_PAD_PIXEL_RATIO = 2
+
+export interface SignatureCanvasSize {
+	width: number
+	height: number
+	pixelRatio: number
+}
+
+export function getSignaturePadPixelRatio(
+	devicePixelRatio = globalThis.devicePixelRatio ?? 1,
+): number {
+	if (!Number.isFinite(devicePixelRatio)) { return 1 }
+	return Math.min(Math.max(devicePixelRatio, 1), MAX_SIGNATURE_PAD_PIXEL_RATIO)
+}
+
+export function resizeSignatureCanvas(
+	canvas: HTMLCanvasElement,
+	pixelRatio = getSignaturePadPixelRatio(),
+): SignatureCanvasSize | undefined {
+	const { width, height } = canvas.getBoundingClientRect()
+	if (width <= 0 || height <= 0) { return undefined }
+
+	const backingWidth = Math.round(width * pixelRatio)
+	const backingHeight = Math.round(height * pixelRatio)
+	if (canvas.width !== backingWidth) { canvas.width = backingWidth }
+	if (canvas.height !== backingHeight) { canvas.height = backingHeight }
+
+	canvas.getContext('2d')?.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0)
+	return { width, height, pixelRatio }
+}