@bagelink/vue 0.0.464 → 0.0.471

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

@@ -1,8 +1,82 @@
+<script setup lang="ts">
+import { onMounted, watch } from 'vue'
+import {
+	MaterialIcon,
+	type MaterialIcons,
+	debounce,
+} from '@bagelink/vue'
+
+const props = withDefaults(
+	defineProps<{
+		id?: string
+		title?: string
+		helptext?: string
+		placeholder?: string
+		modelValue?: string | number
+		label?: string
+		small?: boolean
+		dense?: boolean
+		required?: boolean
+		pattern?: string
+		shrink?: boolean
+		disabled?: boolean
+		type?: string
+		nativeInputAttrs?: Record<string, any>
+		icon?: MaterialIcons
+		iconStart?: MaterialIcons
+		multiline?: boolean
+		autoheight?: boolean
+		code?: boolean
+		lines?: number
+		autocomplete?: AutoFillField
+		autofocus?: boolean
+		debounceDelay?: number
+	}>(),
+	{
+		type: 'text',
+		modelValue: '',
+		debounceDelay: 300,
+	},
+)
+const emit = defineEmits(['update:modelValue', 'debounce'])
+let inputVal = $ref<string | number>()
+
+const input = $ref<HTMLInputElement>()
+
+const rows = $computed(() => {
+	if (props.lines) return props.lines
+	if (props.autoheight) return `${inputVal}`.split('\n').length || 1
+	if (props.multiline || props.code) return 4
+	return 1
+})
+
+function updateInputVal() {
+	if (props.disabled) return
+	emit('update:modelValue', inputVal as string)
+	debounce(() => { emit('debounce', inputVal) }, props.debounceDelay)
+}
+
+watch(
+	() => props.modelValue,
+	(newVal) => {
+		if (newVal !== inputVal) inputVal = newVal
+	},
+	{ immediate: true },
+)
+
+onMounted(() => {
+	if (props.autofocus) setTimeout(() => input?.focus(), 10)
+})
+</script>
+
 <template>
 	<div
 		class="bagel-input text-input"
 		:class="{
-			dense, small, shrink, code,
+			dense,
+			small,
+			shrink,
+			code,
 			textInputIconWrap: icon,
 			txtInputIconStart: iconStart,
 		}"
@@ -13,13 +87,13 @@
 
 			<input
 				v-if="!multiline && !autoheight && !code"
-				:title="title"
-				:autocomplete="autocomplete"
 				:id="id"
+				ref="input"
 				v-model="inputVal"
+				:title="title"
+				:autocomplete="autocomplete"
 				:type="type"
 				:rows="1"
-				ref="input"
 				:placeholder="placeholder || label"
 				:disabled
 				:required="required"
@@ -29,12 +103,12 @@
 			>
 			<textarea
 				v-else
-				:title="title"
 				:id="id"
+				ref="input"
 				v-model="inputVal"
+				:title="title"
 				:type="type"
 				:rows="rows"
-				ref="input"
 				:placeholder="placeholder || label"
 				:disabled
 				:required="required"
@@ -46,8 +120,8 @@
 		</label>
 
 		<MaterialIcon
-			class="iconStart"
 			v-if="iconStart"
+			class="iconStart"
 			:icon="iconStart"
 		/>
 		<MaterialIcon
@@ -57,75 +131,6 @@
 	</div>
 </template>
 
-<script setup lang="ts">
-import { onMounted, watch } from 'vue';
-import {
-	debounce, type MaterialIcons, MaterialIcon,
-} from '@bagelink/vue';
-
-const emit = defineEmits(['update:modelValue', 'debounce']);
-const props = withDefaults(
-	defineProps<{
-		id?: string;
-		title?: string;
-		helptext?: string;
-		placeholder?: string;
-		modelValue?: string | number;
-		label?: string;
-		small?: boolean;
-		dense?: boolean;
-		required?: boolean;
-		pattern?: string;
-		shrink?: boolean;
-		disabled?: boolean;
-		type?: string;
-		nativeInputAttrs?: Record<string, any>;
-		icon?: MaterialIcons;
-		iconStart?: MaterialIcons;
-		multiline?: boolean;
-		autoheight?: boolean;
-		code?: boolean;
-		lines?: number;
-		autocomplete?: AutoFillField;
-		autofocus?: boolean;
-		debounceDelay?: number;
-	}>(),
-	{
-		type: 'text',
-		modelValue: '',
-		debounceDelay: 300,
-	},
-);
-let inputVal = $ref<string | number>();
-
-const input = $ref<HTMLInputElement>();
-
-const rows = $computed(() => {
-	if (props.lines) return props.lines;
-	if (props.autoheight) return `${inputVal}`?.split('\n').length || 1;
-	if (props.multiline || props.code) return 4;
-	return 1;
-});
-
-function updateInputVal() {
-	if (props.disabled) return;
-	emit('update:modelValue', inputVal as string);
-	debounce(() => emit('debounce', inputVal), props.debounceDelay);
-}
-
-watch(
-	() => props.modelValue,
-	(newVal) => {
-		if (newVal !== inputVal) inputVal = newVal;
-	},
-	{ immediate: true },
-);
-
-onMounted(() => {
-	if (props.autofocus) setTimeout(() => input?.focus(), 10);
-});
-</script>
-
 <style>
 .bagel-input.shrink,
 .bagel-input.shrink input {

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

@@ -1,26 +1,26 @@
+<script setup lang="ts">
+defineProps<{
+	label: string
+	id?: string
+	title?: string
+	small?: boolean
+}>()
+
+const checked = defineModel<boolean>('modelValue', { default: false })
+</script>
+
 <template>
-	<div class="bagel-input bgl-checkbox justify-content-center gap-1" :title="title" :class="{ small: small }">
+	<div class="bagel-input bgl-checkbox justify-content-center gap-1" :title="title" :class="{ small }">
 		<div class="switch" :class="{ checked }">
 			<span class="slider round" />
 		</div>
 		<label>
 			{{ label }}
-			<input :id="id" type="checkbox" v-model="checked">
+			<input :id="id" v-model="checked" type="checkbox">
 		</label>
 	</div>
 </template>
 
-<script setup lang="ts">
-defineProps<{
-  label: string;
-  id?: string;
-  title?: string;
-  small?: boolean;
-}>();
-
-const checked = defineModel<boolean>('modelValue', { default: false });
-</script>
-
 <style scoped>
 .bgl-checkbox {
   position: relative;

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

@@ -1,15 +1,17 @@
-export { default as CheckInput } from './CheckInput.vue';
-export { default as DateInput } from './DateInput.vue';
-export { default as JSONInput } from './JSONInput.vue';
-export { default as SelectInput } from './SelectInput.vue';
-export { default as TableField } from './TableField.vue';
-export { default as TextInput } from './TextInput.vue';
-export { default as Checkbox } from './Checkbox.vue';
-export { default as ColorPicker } from './ColorPicker.vue';
-export { default as DatePicker } from './DatePicker.vue';
-export { default as RadioPillsInput } from './RadioPillsInput.vue';
-export { default as FileUpload } from './FileUpload.vue';
-export { default as ToggleInput } from './ToggleInput.vue';
-export { default as RichText } from './RichText.vue';
-export { default as TelInput } from './TelInput.vue';
-export { Dropdown } from 'floating-vue';
+export { default as CheckInput } from './CheckInput.vue'
+export { default as DateInput } from './DateInput.vue'
+export { default as JSONInput } from './JSONInput.vue'
+export { default as SelectInput } from './SelectInput.vue'
+export { default as TableField } from './TableField.vue'
+export { default as TextInput } from './TextInput.vue'
+export { default as Checkbox } from './Checkbox.vue'
+export { default as ColorPicker } from './ColorPicker.vue'
+export { default as DatePicker } from './DatePicker.vue'
+export { default as RadioPillsInput } from './RadioPillsInput.vue'
+export { default as FileUpload } from './FileUpload.vue'
+export { default as ToggleInput } from './ToggleInput.vue'
+export { default as RichText } from './RichText.vue'
+export { default as TelInput } from './TelInput.vue'
+export { default as SignaturePad } from './SignaturePad.vue'
+
+export { Dropdown } from 'floating-vue'

package/src/components/formkit/FileUploader.vue

@@ -1,3 +1,155 @@
+<script setup lang="ts">
+interface UploadFile {
+	dataUrl: string
+	progress: number
+	uploading: boolean
+	file?: File
+	name: string
+	serverFile?: any
+	uploaded: boolean
+}
+
+import { onMounted, onUnmounted } from 'vue'
+
+import { Btn, MaterialIcon, useBagel } from '@bagelink/vue'
+
+const props = withDefaults(
+	defineProps<{
+		context: Record<string, any>
+		dragDropLabel?: string
+		browseLabel?: string
+		multiple?: boolean
+	}>(),
+	{
+		dragDropLabel: 'Drag and drop your files here',
+		browseLabel: 'or browse',
+		multiple: false,
+	},
+)
+
+const bagel = useBagel()
+
+let draggingOver = $ref(false)
+const dropCircle = $ref<HTMLElement>()
+const dropZoneEl = $ref<HTMLElement>()
+const fileInputEl = $ref<HTMLInputElement>()
+
+const files = $ref<UploadFile[]>([])
+
+const computedDragDropLabel = $computed(() => props.context.attrs?.dragDropLabel || props.dragDropLabel)
+const computedDrowseLabel = $computed(() => props.context.attrs?.browseLabel || props.browseLabel)
+const computedMultiple = $computed(() => !!(props.context.attrs?.multiple || props.multiple))
+
+const allowUpload = $computed(() => {
+	const tooManyFiles = !computedMultiple && files.length > 0
+	return !tooManyFiles
+})
+
+const openFileDialog = () => (allowUpload ? fileInputEl?.click() : '')
+
+function animateCircle(e: DragEvent) {
+	e.preventDefault()
+	const zoneRect = dropZoneEl?.getBoundingClientRect()
+	if (!zoneRect) return
+	draggingOver = true
+	const left = e.clientX - zoneRect.left
+	const top = e.clientY - zoneRect.top
+	dropCircle?.style.setProperty('left', `${left}px`)
+	dropCircle?.style.setProperty('top', `${top}px`)
+}
+
+function emitValue() {
+	// const fileValues = files.map((f) => f.serverFile?.id);
+	const relationshipObjKey = props.context.attrs?.relationshipObjKey
+	if (!computedMultiple) return props.context.node.input(relationshipObjKey ? files[0].serverFile.id : files[0].serverFile)
+	// eslint-disable-next-line no-alert
+	alert('not implemented')
+}
+
+function isImg(file: UploadFile) {
+	return file.file?.type.includes('image')
+		|| file.serverFile?.mimetype?.match(/image\/|jpg|png|gif|bmp|jpeg/i)
+		|| file.serverFile.extension?.match(/jpg|png|gif|bmp|jpeg/i)
+}
+
+function uploadFiles() {
+	files.forEach(async (file) => {
+		if (file.uploaded || file.uploading || !file.file) return
+		file.uploading = true
+		file.serverFile = await bagel.uploadFile(file.file, {
+			onUploadProgress: (e: any) => (file.progress = e.progress * 100 - 1),
+		})
+		file.progress += 1
+		emitValue()
+		file.uploaded = true
+		file.uploading = false
+	})
+}
+
+async function deleteImg(file: UploadFile) {
+	await bagel.delete(`files/${file.serverFile.id}`)
+	const index = files.indexOf(file)
+	files.splice(index, 1)
+	emitValue()
+}
+
+function readAsDataURL(file: File): Promise<any> {
+	return new Promise((resolve, reject) => {
+		const reader = new FileReader()
+		reader.onload = () => { resolve(reader.result) }
+		reader.onerror = reject
+		reader.readAsDataURL(file)
+	})
+}
+
+async function addFiles(addedFiles: FileList) {
+	if (!allowUpload) return
+	for (let i = 0; i < addedFiles.length; i++) {
+		const f = addedFiles[i]
+		const file: UploadFile = {
+			// eslint-disable-next-line no-await-in-loop
+			dataUrl: await readAsDataURL(f),
+			file: f,
+			name: f.name,
+			progress: 0,
+			uploading: false,
+			uploaded: false,
+		}
+		files.push(file)
+	}
+	uploadFiles()
+}
+
+onMounted(() => {
+	dropZoneEl?.addEventListener('dragover', animateCircle)
+	const relationshipObjKey = props.context.attrs?.relationshipObjKey
+	const imageObj = relationshipObjKey ? props.context.node?.parent?.value[relationshipObjKey] : props.context.node?.value
+	if (!computedMultiple && imageObj) {
+		files.push({
+			serverFile: imageObj,
+			uploaded: true,
+			uploading: false,
+			progress: 100,
+			dataUrl: imageObj?.url,
+			name: imageObj?.name,
+		})
+	}
+})
+onUnmounted(() => dropZoneEl?.removeEventListener('dragover', animateCircle))
+
+function handleFileInput(e: Event) {
+	const filesToAdd: FileList = (e.target as any).files
+	void addFiles(filesToAdd) // TODO: Nati: should be awaited?
+}
+
+function onDrop(e: DragEvent) {
+	draggingOver = false
+	e.preventDefault()
+	const filesToAdd = e.dataTransfer?.files
+	if (filesToAdd) void addFiles(filesToAdd) // TODO: Nati: should be awaited?
+}
+</script>
+
 <template>
 	<div class="files-wrapper flex">
 		<div
@@ -9,14 +161,14 @@
 		>
 			<Transition name="pop">
 				<div
-					ref="dropCircle"
 					v-if="draggingOver"
+					ref="dropCircle"
 					class="drop-circle"
 				/>
 			</Transition>
 			<div
-				class="img-label"
 				v-if="allowUpload"
+				class="img-label"
 			>
 				<p>
 					{{ computedDragDropLabel }} <span>{{ computedDrowseLabel }}</span>
@@ -25,14 +177,14 @@
 			<div class="uploading-wrap">
 				<div
 					v-for="(item, index) in files"
-					:class="{ uploading: item.uploading }"
 					:key="index"
+					:class="{ uploading: item.uploading }"
 				>
 					<div class="load-file-bar">
 						<!-- Preview File if image -->
 						<img
-							width="40"
 							v-if="isImg(item)"
+							width="40"
 							:src="item.dataUrl"
 							:alt="item.name"
 							style="margin-inline-end: 10px"
@@ -48,8 +200,8 @@
 								:class="{ complete: item.progress === 100 }"
 							>
 								<span
-									class="progress"
 									v-if="item.progress < 100"
+									class="progress"
 								>{{
 									`${item.progress.toFixed(0)}`
 								}}</span>
@@ -59,11 +211,11 @@
 								/>
 							</div>
 							<Btn
+								v-if="item.progress === 100"
 								thin
 								class="delete-btn"
-								@click.stop="deleteImg(item)"
 								icon="delete"
-								v-if="item.progress === 100"
+								@click.stop="deleteImg(item)"
 							/>
 						</div>
 					</div>
@@ -71,164 +223,15 @@
 			</div>
 		</div>
 		<input
+			ref="fileInputEl"
 			class="file-input"
 			type="file"
-			@change="handleFileInput"
-			ref="fileInputEl"
 			:multiple="computedMultiple"
+			@change="handleFileInput"
 		>
 	</div>
 </template>
 
-<script setup lang="ts">
-interface UploadFile {
-	dataUrl: string;
-	progress: number;
-	uploading: boolean;
-	file?: File;
-	name: string;
-	serverFile?: any;
-	uploaded: boolean;
-}
-
-import { onMounted, onUnmounted } from 'vue';
-
-import { MaterialIcon, Btn, useBagel } from '@bagelink/vue';
-
-const bagel = useBagel();
-
-let draggingOver = $ref(false);
-const dropCircle = $ref<HTMLElement>();
-const dropZoneEl = $ref<HTMLElement>();
-const fileInputEl = $ref<HTMLInputElement>();
-
-const files = $ref<UploadFile[]>([]);
-
-const props = withDefaults(
-	defineProps<{
-		context: Record<string, any>;
-		dragDropLabel?: string;
-		browseLabel?: string;
-		multiple?: boolean;
-	}>(),
-	{
-		dragDropLabel: 'Drag and drop your files here',
-		browseLabel: 'or browse',
-		multiple: false,
-	},
-);
-
-const computedDragDropLabel = $computed(() => props?.context?.attrs?.dragDropLabel || props?.dragDropLabel);
-const computedDrowseLabel = $computed(() => props?.context?.attrs?.browseLabel || props?.browseLabel);
-const computedMultiple = $computed(() => !!(props?.context?.attrs?.multiple || props?.multiple));
-
-const allowUpload = $computed(() => {
-	const tooManyFiles = !computedMultiple && files.length > 0;
-	return !tooManyFiles;
-});
-
-const openFileDialog = () => (allowUpload ? fileInputEl?.click() : '');
-
-function animateCircle(e: DragEvent) {
-	e.preventDefault();
-	const zoneRect = dropZoneEl?.getBoundingClientRect?.();
-	if (!zoneRect) return;
-	draggingOver = true;
-	const left = e.clientX - zoneRect.left;
-	const top = e.clientY - zoneRect.top;
-	dropCircle?.style?.setProperty?.('left', `${left}px`);
-	dropCircle?.style?.setProperty?.('top', `${top}px`);
-}
-
-function emitValue() {
-	// const fileValues = files.map((f) => f.serverFile?.id);
-	const relationshipObjKey = props.context?.attrs?.relationshipObjKey;
-	if (!computedMultiple) return props.context?.node.input(relationshipObjKey ? files[0].serverFile.id : files[0].serverFile);
-	// eslint-disable-next-line no-alert
-	return alert('not implemented');
-}
-
-const isImg = (file: UploadFile) => file.file?.type.includes('image') ||
-	file.serverFile?.mimetype?.match(/image\/|jpg|png|gif|bmp|jpeg/i) ||
-	file.serverFile.extension?.match(/jpg|png|gif|bmp|jpeg/i);
-
-function uploadFiles() {
-	files.forEach(async (file) => {
-		if (file.uploaded || file.uploading || !file.file) return;
-		file.uploading = true;
-		file.serverFile = await bagel.uploadFile(file.file, {
-			onUploadProgress: (e: any) => (file.progress = e.progress * 100 - 1),
-		});
-		file.progress += 1;
-		emitValue();
-		file.uploaded = true;
-		file.uploading = false;
-	});
-}
-
-const deleteImg = async (file: UploadFile) => {
-	await bagel.delete(`files/${file.serverFile.id}`);
-	const index = files.indexOf(file);
-	files.splice(index, 1);
-	emitValue();
-};
-
-function readAsDataURL(file: File): Promise<any> {
-	return new Promise((resolve, reject) => {
-		const reader = new FileReader();
-		reader.onload = () => resolve(reader.result);
-		reader.onerror = reject;
-		reader.readAsDataURL(file);
-	});
-}
-
-async function addFiles(addedFiles: FileList) {
-	if (!allowUpload) return;
-	for (let i = 0; i < addedFiles.length; i++) {
-		const f = addedFiles[i];
-		const file: UploadFile = {
-			// eslint-disable-next-line no-await-in-loop
-			dataUrl: await readAsDataURL(f),
-			file: f,
-			name: f.name,
-			progress: 0,
-			uploading: false,
-			uploaded: false,
-		};
-		files.push(file);
-	}
-	uploadFiles();
-}
-
-onMounted(() => {
-	dropZoneEl?.addEventListener('dragover', animateCircle);
-	const relationshipObjKey = props.context?.attrs?.relationshipObjKey;
-	const imageObj = relationshipObjKey ? props.context?.node?.parent?.value[relationshipObjKey] : props.context?.node?.value;
-	if (!computedMultiple && imageObj) {
-		files.push({
-			serverFile: imageObj,
-			uploaded: true,
-			uploading: false,
-			progress: 100,
-			dataUrl: imageObj?.url,
-			name: imageObj?.name,
-		});
-	}
-});
-onUnmounted(() => dropZoneEl?.removeEventListener('dragover', animateCircle));
-
-function handleFileInput(e: Event) {
-	const filesToAdd: FileList = (e.target as any).files;
-	void addFiles(filesToAdd); // TODO: Nati: should be awaited?
-}
-
-function onDrop(e: DragEvent) {
-	draggingOver = false;
-	e.preventDefault();
-	const filesToAdd = e.dataTransfer?.files;
-	if (filesToAdd) void addFiles(filesToAdd); // TODO: Nati: should be awaited?
-}
-</script>
 <style>
 .uploading-wrap {
 	width: 100%;
@@ -375,6 +378,7 @@ function onDrop(e: DragEvent) {
 	color: var(--bgl-green);
 }
 </style>
+
 <style>
 .pop-enter-active {
 	transition: scale 0.2s cubic-bezier(0.55, 0, 0.1, 1);

package/src/components/formkit/MiscFields.vue

@@ -1,37 +1,37 @@
+<script lang="ts" setup>
+import { Btn } from '@bagelink/vue'
+
+const props = defineProps<{
+	context: Record<string, any>
+	addBtnLabel: string
+}>()
+
+const fields = $computed(() => props.context.node?.parent?.children || [])
+
+function addToField(field: any) {
+	field.input([{}])
+	console.log(fields)
+}
+</script>
+
 <template>
 	<div class="misc-wrap">
 		<Btn
-			class="add-btn"
-			color="gray"
-			flat
-			@click="addToField(field)"
 			v-for="(field, i) in fields.filter(
 				(field: any) => field.value?.length === 0,
 			)"
 			:key="i"
+			class="add-btn"
+			color="gray"
+			flat
 			thin
+			@click="addToField(field)"
 		>
 			{{ addBtnLabel }} {{ field.context?.label }}
 		</Btn>
 	</div>
 </template>
 
-<script lang="ts" setup>
-import { Btn } from '@bagelink/vue';
-
-const props = defineProps<{
-	context: Record<string, any>;
-	addBtnLabel: string;
-}>();
-
-const fields = $computed(() => props.context?.node?.parent?.children || []);
-
-const addToField = (field: any) => {
-	field.input([{}]);
-	console.log(fields);
-};
-</script>
-
 <style scoped>
 .misc-wrap {
 	display: flex;