@bagelink/vue 0.0.466 → 0.0.471

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

@@ -1,239 +1,245 @@
-<template>
-	<Dropdown
-		@click.stop
-		@hide="updateOpen(false)"
-		ref="dropdown"
-		placement="bottom-start"
-		class="bagel-input selectinput"
-	>
-		<label>
-			{{ label }}
-			<button
-				@keydown="openOptions"
-				@click="updateOpen(true)"
-				:disabled="disabled"
-				type="button"
-				class="selectinput-btn"
-				:class="{ isEmpty: selectedItems.length === 0 }"
-			>
-				<Icon v-if="icon" :icon="icon" />
-				<p v-if="!hideLabel">
-					{{ selectedLabel }}
-				</p>
-				<Icon
-					v-if="!disabled"
-					thin
-					v-bind="{ icon: open ? 'unfold_less' : 'unfold_more' }"
-				/>
-			</button>
-			<input
-				tabindex="-1"
-				style="width: 0; height: 0; position: absolute; opacity: 0; z-index: -1"
-				v-if="required"
-				@input="updateOpen(true)"
-				:value="selectedItems"
-				required
-			/>
-		</label>
-		<template #popper>
-			<Card
-				class="selectinput-options p-05"
-				:style="{ width: fullWidth ? '100%' : 'auto' }"
-			>
-				<TextInput
-					v-if="searchable"
-					ref="searchInput"
-					dense
-					:placeholder="'Search'"
-					icon="search"
-					v-model="search"
-				/>
-				<div
-					class="selectinput-option hover gap-1"
-					v-for="(option, i) in filteredOptions"
-					:key="`${option}${i}`"
-					@click="select(option)"
-					:class="{ selected: isSelected(option) }"
-				>
-					<Icon v-if="isSelected(option)" icon="check" />
-					<Icon
-						class="opacity-3"
-						v-if="!isSelected(option)"
-						icon="fiber_manual_record"
-					/>
-					<span>
-						{{ getLabel(option) }}
-					</span>
-				</div>
-				<slot name="last" />
-			</Card>
-		</template>
-	</Dropdown>
-</template>
-
 <script lang="ts" setup>
-import { watch } from 'vue';
-import { Dropdown } from 'floating-vue';
-import 'floating-vue/style.css';
+import { watch } from 'vue'
+import { Dropdown } from 'floating-vue'
+import 'floating-vue/style.css'
 import {
-	TextInput, Card, Icon, type MaterialIcons,
-} from '@bagelink/vue';
+	Card,
+	Icon,
+	type MaterialIcons,
+	TextInput,
+} from '@bagelink/vue'
 
 type Option =
 	| string
 	| number
 	| Record<string, any>
-	| { label: string; value: string | number };
-
-const searchInput = $ref<HTMLInputElement | null>(null);
+	| { label: string, value: string | number }
 
 const props = defineProps<{
-	options: Option[];
-	placeholder?: string;
-	disabled?: boolean;
-	modelValue?: Option;
-	searchable?: boolean;
-	required?: boolean;
-	label?: string;
-	fullWidth?: boolean;
-	multiselect?: boolean;
-	icon?: MaterialIcons;
-	hideLabel?: boolean;
-}>();
-
-let selectedItems = $ref<Option[]>([]);
-let search = $ref('');
-
-const dropdown = $ref<InstanceType<typeof Dropdown> | null>(null);
-
-let open = $ref(false);
+	options: Option[]
+	placeholder?: string
+	disabled?: boolean
+	modelValue?: Option
+	searchable?: boolean
+	required?: boolean
+	label?: string
+	fullWidth?: boolean
+	multiselect?: boolean
+	icon?: MaterialIcons
+	hideLabel?: boolean
+}>()
+
+const emit = defineEmits(['update:modelValue'])
+
+const searchInput = $ref<HTMLInputElement | null>(null)
+
+let selectedItems = $ref<Option[]>([])
+let search = $ref('')
+
+const dropdown = $ref<InstanceType<typeof Dropdown> | null>(null)
+
+let open = $ref(false)
 
 function openOptions() {
-	dropdown?.show();
+	dropdown?.show()
 	// updateOpen(true);
 }
 
 function updateOpen(visible: boolean) {
-	open = visible;
-	if (!open) search = '';
+	open = visible
+	if (!open) { search = ''
+	}
 	else {
 		setTimeout(
 			() => (searchInput as any)?.$el?.querySelector('input')?.focus(),
 			100,
-		);
+		)
 	}
 }
 
 const selectedLabel = $computed(() => {
-	if (selectedItems.length === 0) return props.placeholder || 'Select';
+	if (selectedItems.length === 0) return props.placeholder || 'Select'
 	if (selectedItems.length > 4) {
 		const str = selectedItems
 			.slice(0, 4)
-			.map((item) => getLabel(item))
-			.join(', ');
-		return `${str}... +${selectedItems.length - 4}`;
+			.map(item => getLabel(item))
+			.join(', ')
+		return `${str}... +${selectedItems.length - 4}`
 	}
-	return selectedItems.map((item) => getLabel(item)).join(', ');
-});
-
-const emit = defineEmits(['update:modelValue']);
-
-const getLabel = (option: Option) => {
-	if (!option) return '';
-	if (typeof option === 'string') return option;
-	if (typeof option === 'number') return `${option}`;
-	return option.label;
-};
+	return selectedItems.map(item => getLabel(item)).join(', ')
+})
+
+function getLabel(option: Option) {
+	if (!option) return ''
+	if (typeof option === 'string') return option
+	if (typeof option === 'number') return `${option}`
+	return option.label
+}
 
-const getValue = (option?: Option) => {
-	if (!option) return undefined;
-	if (typeof option === 'string') return option;
-	if (typeof option === 'number') return option;
-	return option.value;
-};
+function getValue(option?: Option) {
+	if (!option) return undefined
+	if (typeof option === 'string') return option
+	if (typeof option === 'number') return option
+	return option.value
+}
 
-const isSelected = (option: Option) => !!selectedItems.find((item) => getValue(option) === getValue(item));
+const isSelected = (option: Option) => !!selectedItems.find(item => getValue(option) === getValue(item))
 
 const filteredOptions = $computed(() =>	props.options.filter((option) => {
-		const searchTerm = search
-			.split(/\s+/)
-			.filter(Boolean)
-			.map((t) => new RegExp(t, 'gi'));
-		return (
-			Boolean(option) &&
-			(searchTerm.every((s) => getLabel(option).match(s)) ||
-				searchTerm.length === 0)
-		);
-	}));
-
-const select = (option: Option) => {
+	const searchTerm = search
+		.split(/\s+/)
+		.filter(Boolean)
+		.map(t => new RegExp(t, 'gi'))
+	return (
+		Boolean(option)
+		&& (searchTerm.every(s => getLabel(option).match(s))
+		|| searchTerm.length === 0)
+	)
+}))
+
+function select(option: Option) {
 	const existingIndex = selectedItems.findIndex(
-		(item) => getValue(item) === getValue(option),
-	);
-	if (existingIndex > -1) selectedItems.splice(existingIndex, 1);
+		item => getValue(item) === getValue(option),
+	)
+	if (existingIndex > -1) { selectedItems.splice(existingIndex, 1)
+	}
 	else if (props.multiselect) {
-		const current = [...selectedItems];
-		current.push(option);
+		const current = [...selectedItems]
+		current.push(option)
 
-		selectedItems = current;
-	} else selectedItems.splice(0, selectedItems.length, option);
+		selectedItems = current
+	} else { selectedItems.splice(0, selectedItems.length, option)
+	}
 
-	if (!props.multiselect) dropdown?.hide();
-	emitUpdate();
-};
+	if (!props.multiselect) dropdown?.hide()
+	emitUpdate()
+}
 
 function emitUpdate() {
 	if (props.multiselect) {
-		emit('update:modelValue', selectedItems.map(getValue).filter(Boolean));
+		emit('update:modelValue', selectedItems.map(getValue).filter(Boolean))
 	} else {
 		// selectedItems.splice(1, selectedItems.length - 1);
-		const [item] = selectedItems;
-		emit('update:modelValue', getValue(item));
+		const [item] = selectedItems
+		emit('update:modelValue', getValue(item))
 	}
 }
 
 function compareArrays(arr1: Option[], arr2: Option[]) {
-	const arr1Values = [...arr1].map((a) => getValue(a)).filter(Boolean);
-	const arr2Values = [...arr2].map((a) => getValue(a)).filter(Boolean);
-	const isSame = arr1Values.every((item: Option) => arr2Values.includes(item));
-	return isSame;
+	const arr1Values = [...arr1].map(a => getValue(a)).filter(Boolean)
+	const arr2Values = [...arr2].map(a => getValue(a)).filter(Boolean)
+	const isSame = arr1Values.every((item: Option) => arr2Values.includes(item))
+	return isSame
 }
 
 watch(
 	() => props.modelValue,
 	(newVal: Option | Option[]) => {
 		if (!props.multiselect) {
-			const newOption =
-				props.options?.find((o) => getValue(o) === newVal) || newVal;
-			if (newOption && !isSelected(newOption)) selectedItems = [newOption];
+			const newOption
+				= props.options.find(o => getValue(o) === newVal) || newVal
+			if (newOption && !isSelected(newOption)) selectedItems = [newOption]
 		} else {
-			const isSame = compareArrays([newVal].flat(), selectedItems);
+			const isSame = compareArrays([newVal].flat(), selectedItems)
 			if (!isSame) {
-				selectedItems.splice(0, selectedItems.length, ...[newVal].flat());
+				selectedItems.splice(0, selectedItems.length, ...[newVal].flat())
 			}
 		}
 	},
 	{ immediate: true },
-);
+)
 
 watch(
 	() => props.options,
 	() => {
 		selectedItems.forEach((option, i) => {
 			const exists = props.options.find(
-				(o) => getValue(o) === getValue(option),
-			);
-			if (!exists) selectedItems.splice(i, 1);
-			else selectedItems.splice(i, 1, exists);
-		});
+				o => getValue(o) === getValue(option),
+			)
+			if (!exists) selectedItems.splice(i, 1)
+			else selectedItems.splice(i, 1, exists)
+		})
 		// const original = JSON.stringify(props.options.map(getValue));
 		// const newSelection = JSON.stringify(selectedItems.map(getValue));
 		// if (original !== newSelection) emitUpdate();
 	},
 	{ deep: true, immediate: true },
-);
+)
 </script>
 
+<template>
+	<Dropdown
+		ref="dropdown"
+		placement="bottom-start"
+		class="bagel-input selectinput"
+		@click.stop
+		@hide="updateOpen(false)"
+	>
+		<label>
+			{{ label }}
+			<button
+				:disabled="disabled"
+				type="button"
+				class="selectinput-btn"
+				:class="{ isEmpty: selectedItems.length === 0 }"
+				@keydown="openOptions"
+				@click="updateOpen(true)"
+			>
+				<Icon v-if="icon" :icon="icon" />
+				<p v-if="!hideLabel">
+					{{ selectedLabel }}
+				</p>
+				<Icon
+					v-if="!disabled"
+					thin
+					v-bind="{ icon: open ? 'unfold_less' : 'unfold_more' }"
+				/>
+			</button>
+			<input
+				v-if="required"
+				tabindex="-1"
+				style="width: 0; height: 0; position: absolute; opacity: 0; z-index: -1"
+				:value="selectedItems"
+				required
+				@input="updateOpen(true)"
+			>
+		</label>
+		<template #popper>
+			<Card
+				class="selectinput-options p-05"
+				:style="{ width: fullWidth ? '100%' : 'auto' }"
+			>
+				<TextInput
+					v-if="searchable"
+					ref="searchInput"
+					v-model="search"
+					dense
+					placeholder="Search"
+					icon="search"
+				/>
+				<div
+					v-for="(option, i) in filteredOptions"
+					:key="`${option}${i}`"
+					class="selectinput-option hover gap-1"
+					:class="{ selected: isSelected(option) }"
+					@click="select(option)"
+				>
+					<Icon v-if="isSelected(option)" icon="check" />
+					<Icon
+						v-if="!isSelected(option)"
+						class="opacity-3"
+						icon="fiber_manual_record"
+					/>
+					<span>
+						{{ getLabel(option) }}
+					</span>
+				</div>
+				<slot name="last" />
+			</Card>
+		</template>
+	</Dropdown>
+</template>
+
 <style scoped>
 .selectinput {
 	width: 100%;

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

@@ -0,0 +1,150 @@
+<script setup lang="ts">
+import SignaturePad from 'signature_pad'
+import type { Options as SignaturePadOptions } from 'signature_pad'
+
+import { onMounted, watch } from 'vue'
+
+interface WaterMark {
+	text: string
+	x: number
+	y: number
+	sx: number
+	sy: number
+	font: string
+	fillStyle: string
+	strokeStyle: string
+	style: string
+}
+
+type FormatType = 'image/png' | 'image/jpeg' | 'image/svg+xml'
+
+const props = defineProps<{
+	sigOption?: SignaturePadOptions
+	width?: string
+	height?: string
+	ratio?: number
+	clearOnResize?: boolean
+	waterMark?: WaterMark
+	disabled?: boolean
+	defaultUrl?: string
+	format?: FormatType
+}>()
+
+const vCanvas = $ref<HTMLCanvasElement>()
+
+let sig = $ref<SignaturePad>()
+
+const clear = () => sig?.clear()
+
+function save(format?: FormatType) {
+	format = format || props.format
+	return format ? sig?.toDataURL(format) : sig?.toDataURL()
+}
+
+const fromDataURL = (url: string) => sig?.fromDataURL(url)
+
+const isEmpty = () => sig?.isEmpty()
+function undo() {
+	const data = sig?.toData()
+	if (data) {
+		data.pop()
+		sig?.fromData(data)
+	}
+}
+
+const defaultOptions = $ref<SignaturePadOptions>({
+	penColor: 'rgb(0, 0, 0)',
+})
+
+const signatureOptions = $computed(() => ({ ...defaultOptions, ...props.sigOption }))
+
+watch(
+	() => props.disabled,
+	(val) => {
+		if (val) sig?.off()
+		else sig?.on()
+	},
+)
+
+function addWaterMark(data: WaterMark) {
+	if (!(Object.prototype.toString.call(data) === '[object Object]')) {
+		throw new Error(`Expected Object, got ${typeof data}.`)
+	} else {
+		const textData = {
+			text: data.text || '',
+			x: data.x || 20,
+			y: data.y || 20,
+			sx: data.sx || 40,
+			sy: data.sy || 40,
+		}
+
+		const ctx = vCanvas?.getContext('2d')
+		if (!ctx) return
+		ctx.font = data.font || '20px sans-serif'
+		ctx.fillStyle = data.fillStyle || '#333'
+		ctx.strokeStyle = data.strokeStyle || '#333'
+		if (data.style === 'all') {
+			ctx.fillText(textData.text, textData.x, textData.y)
+			ctx.strokeText(textData.text, textData.sx, textData.sy)
+		} else if (data.style === 'stroke') {
+			ctx.strokeText(textData.text, textData.sx, textData.sy)
+		} else {
+			ctx.fillText(textData.text, textData.x, textData.y)
+		}
+	}
+}
+
+function draw() {
+	const canvas = vCanvas!
+	sig = new SignaturePad(canvas, signatureOptions)
+	function resizeCanvas(c: HTMLCanvasElement) {
+		let url
+		if (!isEmpty()) url = save()
+		const ratio = props.ratio || 1 / 2
+		const { width } = c.getBoundingClientRect()
+		c.width = props.width ? Number(props.width.replace(/px/g, '')) : width
+		c.height = props.height ? Number(props.height.replace(/px/g, '')) : width * ratio
+		clear()
+		if (!props.clearOnResize && url !== undefined) fromDataURL(url)
+		if (props.waterMark) addWaterMark(props.waterMark)
+	}
+	window.addEventListener('resize', () => { resizeCanvas(canvas) })
+	resizeCanvas(canvas)
+	if (props.disabled) sig.off()
+	else sig.on()
+}
+
+onMounted(draw)
+
+defineExpose({
+	save,
+	clear,
+	isEmpty,
+	undo,
+	addWaterMark,
+	fromDataURL,
+})
+</script>
+
+<template>
+	<div class="bgl_input signature-pad" @touchmove.prevent>
+		<canvas ref="vCanvas" class="canvas" :disabled="disabled" />
+	</div>
+</template>
+
+<style>
+.bgl_input .canvas {
+	width: 100%;
+	height: 100%;
+}
+
+.bgl_input.signature-pad {
+	background: var(--input-bg);
+	border: none;
+	border-radius: var(--input-border-radius);
+}
+
+.bgl_input.signature-pad .canvas[disabled] {
+	background: var(--input-disabled-bg);
+}
+</style>