@bagelink/vue 0.0.363 → 0.0.378

package/src/components/form/BglField.vue

@@ -1,58 +1,87 @@
 <template>
-  <component :required="field.required" v-bind="bindAttrs(field?.attrs || {}, fieldData, modelValue)"
-    :class="classify(fieldData, modelValue, field.class, field.attrs?.class)" v-if="vIf" :is="is" :label="field.label"
-    :id="field.id" :placeholder="field.placeholder || field.label" v-model="fieldData"
-    :defaultValue="field.defaultValue" :options="bindAttrs({ options: field.options }, fieldData, modelValue).options"
-    :helptext="field.helptext" @update:modelValue="($event: any) => field?.onUpdate?.($event, formData)">
-    {{ field.transform?.(fieldData, modelValue) || fieldData || '' }}
-    <BglField v-model="formData" v-for="(child, ii) in field.children" :key="child.id || ii" :field="child" />
-  </component>
+	<component
+		:required="field.required"
+		v-bind="bindAttrs(field?.attrs || {}, fieldData, modelValue)"
+		:class="classify(fieldData, modelValue, field.class, field.attrs?.class)"
+		v-if="vIf"
+		:is="is"
+		:label="field.label"
+		:id="field.id"
+		:placeholder="field.placeholder || field.label"
+		v-model="fieldData"
+		:defaultValue="field.defaultValue"
+		:options="
+			bindAttrs({ options: field.options }, fieldData, modelValue).options
+		"
+		:helptext="field.helptext"
+		@update:modelValue="($event: any) => field?.onUpdate?.($event, formData)">
+		{{ field.transform?.(fieldData, modelValue) || fieldData || '' }}
+		<BglField
+			v-model="formData"
+			v-for="(child, ii) in field.children"
+			:key="child.id || ii"
+			:field="child" />
+	</component>
 </template>
 
 <script lang="ts" setup>
 import {
-  type Field, bindAttrs, classify, SelectInput, TextInput, ToggleInput, CheckInput,
+	type Field,
+	bindAttrs,
+	classify,
+	SelectInput,
+	TextInput,
+	ToggleInput,
+	CheckInput,
+	RichText,
 } from '@bagelink/vue';
 
-const props = withDefaults(defineProps<{
-  field: Field
-  modelValue: Record<string, any>
-}>(), {
-  modelValue: () => ({}),
-});
+const props = withDefaults(
+	defineProps<{
+		field: Field;
+		modelValue: Record<string, any>;
+	}>(),
+	{
+		modelValue: () => ({}),
+	}
+);
 
 const is = $computed(() => {
-  if (props.field.$el === 'text') return TextInput;
-  if (props.field.$el === 'select') return SelectInput;
-  if (props.field.$el === 'toggle') return ToggleInput;
-  if (props.field.$el === 'check') return CheckInput;
-  return props.field.$el || 'div';
+	if (props.field.$el === 'text') return TextInput;
+	if (props.field.$el === 'select') return SelectInput;
+	if (props.field.$el === 'toggle') return ToggleInput;
+	if (props.field.$el === 'check') return CheckInput;
+	if (props.field.$el === 'richtext') return RichText;
+	return props.field.$el || 'div';
 });
 
 const emit = defineEmits(['update:modelValue']);
 
 const formData = $computed({
-  get: () => props.modelValue,
-  set: (val: any) => emit('update:modelValue', val),
+	get: () => props.modelValue,
+	set: (val: any) => emit('update:modelValue', val),
 });
 
 const fieldData = $computed({
-  set: (val: any) => {
-    if (!props.field.id) return;
-    const data = { ...props.modelValue } || {};
-    data[props.field.id] = val;
-    emit('update:modelValue', data);
-  },
-  get: () => (props.field.id ? props.modelValue[props.field.id] : props.field.defaultValue || ''),
+	set: (val: any) => {
+		if (!props.field.id) return;
+		const data = { ...props.modelValue } || {};
+		data[props.field.id] = val;
+		emit('update:modelValue', data);
+	},
+	get: () => {
+		if (props.field.id) return props.modelValue[props.field.id];
+		return props.field.defaultValue || '';
+	},
 });
 
 const vIf = $computed(() => {
-  if (props.field['v-if'] === undefined) return true;
-  if (typeof props.field['v-if'] === 'boolean') return props.field['v-if'];
-  if (typeof props.field['v-if'] === 'string') return true;
-  if (typeof props.field['v-if'] === 'function') {
-    return props.field['v-if']?.(fieldData, formData);
-  }
-  return true;
+	if (props.field['v-if'] === undefined) return true;
+	if (typeof props.field['v-if'] === 'boolean') return props.field['v-if'];
+	if (typeof props.field['v-if'] === 'string') return true;
+	if (typeof props.field['v-if'] === 'function') {
+		return props.field['v-if']?.(fieldData, formData);
+	}
+	return true;
 });
 </script>

package/src/components/form/BglForm.vue

@@ -1,21 +1,30 @@
 <template>
-  <template v-if="id">
-    <BglField v-for="(field, i) in schema" :key="field.id || `${i}p`" :field="field" v-model="data" />
-  </template>
-  <form v-else-if="(!slots.success || formStatus !== 'success')" ref="form" @submit.prevent="runSubmit">
-    <Title tag="h4" :label="label" v-if="label" />
-    <BglField v-for="(field, i) in schema" :key="field.id || `${i}p`" :field="field" v-model="data" />
-    <slot name="submit" />
-  </form>
-  <slot v-if="formStatus === 'success'" name="success" />
-  <slot v-if="formStatus === 'error'" name="error" />
+	<template v-if="id">
+		<BglField
+			v-for="(field, i) in schema"
+			:key="field.id || `${i}p`"
+			:field="field"
+			v-model="data" />
+	</template>
+	<form
+		v-else-if="!slots.success || status !== 'success'"
+		ref="form"
+		@submit.prevent="runSubmit">
+		<Title tag="h4" :label="label" v-if="label" />
+		<BglField
+			v-for="(field, i) in schema"
+			:key="field.id || `${i}p`"
+			:field="field"
+			v-model="data" />
+		<slot name="submit" />
+	</form>
+	<slot v-if="status === 'success'" name="success" />
+	<slot v-if="status === 'error'" name="error" />
 </template>
 
 <script lang="ts" setup>
 import { useSlots } from 'vue';
-import {
-  useModal, BglField, Title,
-} from '@bagelink/vue';
+import { useModal, BglField, Title } from '@bagelink/vue';
 
 import { type BglFormSchemaT } from '@bagelink/vue';
 
@@ -24,17 +33,18 @@ const slots = useSlots();
 const { showModal } = useModal();
 
 const props = withDefaults(
-  defineProps<{
-    label?: string;
-    id?: string;
-    schema: BglFormSchemaT<any>;
-    modelValue?: Record<string, any>;
-    onDelete?: ((id: string) => void);
-    onSubmit?: ((data: any) => void);
-  }>(),
-  {
-    modelValue: () => ({}),
-  },
+	defineProps<{
+		label?: string;
+		id?: string;
+		schema: BglFormSchemaT<any>;
+		modelValue?: Record<string, any>;
+		onDelete?: (id: string) => void;
+		onSubmit?: (data: any) => void;
+		status?: FormStatus;
+	}>(),
+	{
+		modelValue: () => ({}),
+	}
 );
 
 const instAt = new Date();
@@ -43,15 +53,15 @@ let formData = $ref(props.modelValue);
 const emit = defineEmits(['update:modelValue', 'submit', 'dirty']);
 let isDirty = $ref(false);
 const data = $computed({
-  set: (val: any) => {
-    if (timeSinceInst() > 100) {
-      emit('dirty');
-      isDirty = true;
-    }
-    formData = val;
-    emit('update:modelValue', val);
-  },
-  get: () => props.modelValue || formData,
+	set: (val: any) => {
+		if (timeSinceInst() > 100) {
+			emit('dirty');
+			isDirty = true;
+		}
+		formData = val;
+		emit('update:modelValue', val);
+	},
+	get: () => props.modelValue || formData,
 });
 const form = $ref<HTMLFormElement>();
 
@@ -61,38 +71,32 @@ const clearForm = () => Object.assign(data, {});
 
 type FormStatus = 'idle' | 'loading' | 'success' | 'error';
 
-let formStatus = $ref<FormStatus>('idle');
-
 const runSubmit = () => {
-  try {
-    validateForm();
-    props.onSubmit?.(data);
-    // emit('submit', data);
-    clearForm();
-    formStatus = 'success';
-  } catch (e) {
-    formStatus = 'error';
-  }
+	const isValid = validateForm();
+	if (!isValid) return;
+	props.onSubmit?.(data);
+	// emit('submit', data);
+	clearForm();
 };
 
 const i18nT = (val: string) => val;
 
 const deleteItem = () => {
-  showModal(
-    {
-      class: 'small-modal',
-      title: i18nT('Are you sure?'),
-      actions: [
-        {
-          value: 'Confirm',
-          color: 'red',
-          onClick: () => props.onDelete?.(data.value.id),
-        },
-        { value: 'Cancel', color: 'gray' },
-      ],
-    },
-    { default: i18nT('form.deleteMessage') },
-  );
+	showModal(
+		{
+			class: 'small-modal',
+			title: i18nT('Are you sure?'),
+			actions: [
+				{
+					value: 'Confirm',
+					color: 'red',
+					onClick: () => props.onDelete?.(data.value.id),
+				},
+				{ value: 'Cancel', color: 'gray' },
+			],
+		},
+		{ default: i18nT('form.deleteMessage') }
+	);
 };
 
 defineExpose({ validateForm, deleteItem, isDirty });
@@ -100,6 +104,6 @@ defineExpose({ validateForm, deleteItem, isDirty });
 
 <style>
 .del-top {
-  transform: translateY(-2.6rem);
+	transform: translateY(-2.6rem);
 }
 </style>

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

@@ -8,28 +8,20 @@
 				:highlight-week-days="[6]"
 				:enable-time-picker="false"
 				:month-change-on-scroll="false"
-				v-bind="options"
-			>
+				v-bind="options">
 				<template #action-buttons />
 				<template #action-preview />
 			</VDatepicker>
 		</div>
-		<div
-			class="time-wrap"
-			v-if="showTimeWrap"
-		>
-			<template
-				v-for="hr in hours"
-				:key="hr"
-			>
+		<div class="time-wrap" v-if="showTimeWrap">
+			<template v-for="hr in hours" :key="hr">
 				<input
 					type="radio"
-					:id="`${hr}_${name}`"
-					:name="name"
+					:id="`${hr}_${id}`"
+					:name="label"
 					:value="hr"
-					v-model="selectedHour"
-				>
-				<label :for="`${hr}_${name}`">{{ hr }}</label>
+					v-model="selectedHour" />
+				<label :for="`${hr}_${id}`">{{ hr }}</label>
 			</template>
 		</div>
 	</div>
@@ -39,7 +31,12 @@
 import VDatepicker from '@vuepic/vue-datepicker';
 import '@vuepic/vue-datepicker/dist/main.css';
 
-defineProps<{ name: string, options?: Record<string, any>, showTimeWrap?: boolean }>();
+defineProps<{
+	label?: string;
+	id?: string;
+	options?: Record<string, any>;
+	showTimeWrap?: boolean;
+}>();
 const selectedDate = $ref(null);
 const selectedHour = $ref();
 
@@ -80,7 +77,7 @@ const hours = Array.from({ length: 18 }, (_, index) => {
 	border: 1px solid var(--bgl-primary);
 }
 
-.time-wrap input[type="radio"]:checked+label {
+.time-wrap input[type='radio']:checked + label {
 	background: var(--bgl-primary);
 	color: var(--bgl-white);
 }
@@ -130,7 +127,7 @@ const hours = Array.from({ length: 18 }, (_, index) => {
 	margin-bottom: -10px;
 }
 
-.dp__calendar_row>div:last-child {
+.dp__calendar_row > div:last-child {
 	pointer-events: none;
 }
 

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

@@ -9,21 +9,13 @@
 			@drop="drop"
 			@dragleave="dragleave"
 			class="fileUploadWrap"
-			:class="{ fileDropZone: !storageFiles.length && !fileQueue.length, dragover: isDragOver }"
-		>
-			<template
-				v-for="file in storageFiles"
-				:key="file.id"
-			>
-				<div
-					class="imagePreviewWrap"
-					v-if="!multiple"
-				>
-					<img
-						class="preview"
-						:src="file.url"
-						alt=""
-					>
+			:class="{
+				fileDropZone: !storageFiles.length && !fileQueue.length,
+				dragover: isDragOver,
+			}">
+			<template v-for="file in storageFiles" :key="file.id">
+				<div class="imagePreviewWrap" v-if="!multiple">
+					<img class="preview" :src="file.url" alt="" />
 				</div>
 				<div class="previewName">
 					<img
@@ -31,8 +23,7 @@
 						v-if="multiple"
 						class="preview"
 						:src="file.url"
-						alt=""
-					>
+						alt="" />
 					<p class="no-margin">
 						{{ file.name }}
 					</p>
@@ -41,23 +32,12 @@
 						@click.stop="removeFile(file)"
 						flat
 						icon="delete"
-						color="red"
-					/>
+						color="red" />
 				</div>
 			</template>
-			<template
-				v-for="fileQ in fileQueue"
-				:key="fileQ.file"
-			>
-				<div
-					class="imagePreviewWrap"
-					v-if="!multiple"
-				>
-					<img
-						class="preview"
-						:src="fileToUrl(fileQ.file)"
-						alt=""
-					>
+			<template v-for="fileQ in fileQueue" :key="fileQ.file">
+				<div class="imagePreviewWrap" v-if="!multiple">
+					<img class="preview" :src="fileToUrl(fileQ.file)" alt="" />
 				</div>
 				<div class="previewName">
 					<img
@@ -65,8 +45,7 @@
 						v-if="multiple"
 						class="preview"
 						:src="fileToUrl(fileQ.file)"
-						alt=""
-					>
+						alt="" />
 					<p class="no-margin">
 						{{ fileQ.name }}
 					</p>
@@ -74,18 +53,11 @@
 						class="pie"
 						:style="`--p:${fileQ.progress}`"
 						style="--b: 2px"
-						:class="{ complete: fileQ.progress === 100 }"
-					>
-						<span
-							class="progress"
-							v-if="fileQ.progress < 100"
-						>
+						:class="{ complete: fileQ.progress === 100 }">
+						<span class="progress" v-if="fileQ.progress < 100">
 							{{ `${fileQ.progress.toFixed(0)}` }}
 						</span>
-						<MaterialIcon
-							class="success"
-							icon="check"
-						/>
+						<MaterialIcon class="success" icon="check" />
 					</div>
 				</div>
 			</template>
@@ -95,9 +67,7 @@
 
 <script setup lang="ts">
 import { watch } from 'vue';
-import {
-	Btn, type StorageFile, useBagel, MaterialIcon,
-} from '@bagelink/vue';
+import { Btn, type StorageFile, useBagel, MaterialIcon } from '@bagelink/vue';
 
 const bagel = useBagel();
 
@@ -110,27 +80,36 @@ type QueueFile = {
 };
 
 const props = defineProps<{
-	label: string,
-	multiple?: boolean,
-	files?: StorageFile | StorageFile[],
+	label: string;
+	multiple?: boolean;
+	files?: StorageFile | StorageFile[];
 	deleteEndpoint?: string;
 }>();
 
 const file_ids = defineModel<string[] | string>('modelValue');
 const storageFiles = $ref<StorageFile[]>([]);
 
-const compareIds = (v1?: string[] | string, v2?: string[] | string) => [v1].flat().join(',') === [v2].flat().join(',');
-
-watch(() => props.files, (newFiles) => {
-	if (newFiles) storageFiles.push(...[newFiles].flat());
-}, { immediate: true });
-
-watch(() => storageFiles, (newFiles) => {
-	let idValue: string[] | string = '';
-	if (props.multiple) idValue = newFiles.map((f) => f.id || '');
-	else idValue = newFiles[0]?.id || '';
-	if (!compareIds(file_ids?.value, idValue)) file_ids.value = idValue;
-}, { deep: true });
+const compareIds = (v1?: string[] | string, v2?: string[] | string) =>
+	[v1].flat().join(',') === [v2].flat().join(',');
+
+watch(
+	() => props.files,
+	(newFiles) => {
+		if (newFiles) storageFiles.push(...[newFiles].flat());
+	},
+	{ immediate: true }
+);
+
+watch(
+	() => storageFiles,
+	(newFiles) => {
+		let idValue: string[] | string = '';
+		if (props.multiple) idValue = newFiles.map((f) => f.id || '');
+		else idValue = newFiles[0]?.id || '';
+		if (!compareIds(file_ids?.value, idValue)) file_ids.value = idValue;
+	},
+	{ deep: true }
+);
 
 const fileQueue = $ref<QueueFile[]>([]);
 let isDragOver = $ref(false);
@@ -145,20 +124,20 @@ const removeFile = (file: StorageFile) => {
 	const index = storageFiles.indexOf(file);
 	storageFiles.splice(index, 1);
 
-	if (props.deleteEndpoint) void bagel.delete(`${props.deleteEndpoint}/${file.id}`);
+	if (props.deleteEndpoint) {
+		void bagel.delete(`${props.deleteEndpoint}/${file.id}`);
+	}
 };
 
 const flushQueue = () => {
-	fileQueue.forEach(
-		async (file, i) => {
-			if (!props.multiple) storageFiles.splice(0, 1);
-			const serverFile = await bagel.uploadFile<StorageFile>(file.file, {
-				onUploadProgress: (e: any) => (file.progress = e.progress * 100 - 1),
-			});
-			storageFiles.push(serverFile);
-			fileQueue.splice(i, 1);
-		},
-	);
+	fileQueue.forEach(async (file, i) => {
+		if (!props.multiple) storageFiles.splice(0, 1);
+		const serverFile = await bagel.uploadFile<StorageFile>(file.file, {
+			onUploadProgress: (e: any) => (file.progress = e.progress * 100 - 1),
+		});
+		storageFiles.push(serverFile);
+		fileQueue.splice(i, 1);
+	});
 };
 
 const browse = () => {
@@ -168,7 +147,9 @@ const browse = () => {
 	input.onchange = (e: Event) => {
 		const target = e?.target as HTMLInputElement;
 		if (target?.files) {
-			Array.from(target.files).forEach((file: File) => fileQueue.push({ name: file.name, file, progress: 0 }));
+			Array.from(target.files).forEach((file: File) =>
+				fileQueue.push({ name: file.name, file, progress: 0 })
+			);
 		}
 		flushQueue();
 	};
@@ -190,13 +171,9 @@ const dragover = (e: DragEvent) => {
 const drop = (e: DragEvent) => {
 	preventDefault(e);
 	if (e.dataTransfer) {
-		Array
-			.from(e.dataTransfer.files)
-			.forEach(
-				(file: File) => (
-					fileQueue.push({ name: file.name, file, progress: 0 })
-				),
-			);
+		Array.from(e.dataTransfer.files).forEach((file: File) =>
+			fileQueue.push({ name: file.name, file, progress: 0 })
+		);
 	}
 	isDragOver = false;
 	flushQueue();
@@ -222,7 +199,7 @@ const drop = (e: DragEvent) => {
 	display: grid;
 	grid-template-columns: 1fr 22px;
 	align-items: center;
-
+	padding-inline: 14px;
 }
 
 .previewName p {
@@ -258,7 +235,7 @@ img.preview {
 }
 
 .bagel-input .fileUploadWrap.fileDropZone:after {
-	content: "Drop files here or click to upload";
+	content: 'Drop files here or click to upload';
 }
 
 .pie {
@@ -271,18 +248,22 @@ img.preview {
 }
 
 .pie:before {
-	content: "";
+	content: '';
 	position: absolute;
 	border-radius: 50%;
 	inset: 0;
 	transition: all 0.2s ease-in-out;
 	background: conic-gradient(var(--bgl-primary) calc(var(--p) * 1%), #0000 0);
-	-webkit-mask: radial-gradient(farthest-side,
-			#0000 calc(99% - var(--b)),
-			#000 calc(100% - var(--b)));
-	mask: radial-gradient(farthest-side,
-			#0000 calc(99% - var(--b)),
-			#000 calc(100% - var(--b)));
+	-webkit-mask: radial-gradient(
+		farthest-side,
+		#0000 calc(99% - var(--b)),
+		#000 calc(100% - var(--b))
+	);
+	mask: radial-gradient(
+		farthest-side,
+		#0000 calc(99% - var(--b)),
+		#000 calc(100% - var(--b))
+	);
 }
 
 .pie .success {