@bagelink/vue 0.0.427 → 0.0.435

package/src/components/form/BglField.vue

@@ -14,13 +14,15 @@
 			bindAttrs({ options: field.options }, fieldData, modelValue).options
 		"
 		:helptext="field.helptext"
-		@update:modelValue="($event: any) => field?.onUpdate?.($event, formData)">
+		@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" />
+			:field="child"
+		/>
 	</component>
 </template>
 
@@ -43,7 +45,7 @@ const props = withDefaults(
 	}>(),
 	{
 		modelValue: () => ({}),
-	}
+	},
 );
 
 const is = $computed(() => {

package/src/components/form/BglForm.vue

@@ -4,19 +4,22 @@
 			v-for="(field, i) in schema"
 			:key="field.id || `${i}p`"
 			:field="field"
-			v-model="data" />
+			v-model="data"
+		/>
 	</template>
 	<form
 		v-else-if="!slots.success || status !== 'success'"
 		ref="form"
-		@submit.prevent="runSubmit">
+		@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" />
+			v-model="data"
+		/>
+		<slot name="submit" :submit="runSubmit" :isDirty />
 	</form>
 	<slot v-if="status === 'success'" name="success" />
 	<slot v-if="status === 'error'" name="error" />
@@ -44,7 +47,7 @@ const props = withDefaults(
 	}>(),
 	{
 		modelValue: () => ({}),
-	}
+	},
 );
 
 const instAt = new Date();
@@ -61,7 +64,7 @@ let data = $computed({
 		formData = val;
 		emit('update:modelValue', val);
 	},
-	get: () => props.modelValue || formData,
+	get: () => formData,
 });
 const form = $ref<HTMLFormElement>();
 
@@ -79,14 +82,15 @@ watch(
 			clearForm();
 		}
 	},
-	{ immediate: true }
+	{ immediate: true },
 );
 
 const runSubmit = () => {
 	const isValid = validateForm();
 	if (!isValid) return;
 	// props.onSubmit?.(data);
-	emit('submit', data);
+	emit('submit', { ...formData });
+	isDirty = false;
 };
 
 const i18nT = (val: string) => val;
@@ -105,7 +109,7 @@ const deleteItem = () => {
 				{ value: 'Cancel', color: 'gray' },
 			],
 		},
-		{ default: i18nT('form.deleteMessage') }
+		{ default: i18nT('form.deleteMessage') },
 	);
 };
 

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

@@ -5,11 +5,14 @@
 				inline
 				week-start="0"
 				v-model="selectedDate"
+				:allowed-dates="allowedDates"
+				:disabled-dates="disabledDates"
 				:auto-apply="true"
 				: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>
@@ -21,7 +24,8 @@
 					:id="`${hr}_${id}`"
 					:name="label"
 					:value="hr"
-					v-model="selectedHour" />
+					v-model="selectedHour"
+				/>
 				<label :for="`${hr}_${id}`">{{ hr }}</label>
 			</template>
 		</div>
@@ -38,6 +42,8 @@ const props = defineProps<{
 	options?: Record<string, any>;
 	showTimeWrap?: boolean;
 	modelValue?: Date;
+	allowedDates?: string[] | Date[];
+	disabledDates?: string[] | Date[];
 }>();
 
 const emit = defineEmits(['update:modelValue']);

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

@@ -12,18 +12,14 @@
 			: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
-						height="60"
-						v-if="multiple"
-						class="preview"
-						:src="file.url"
-						alt="" />
+					<img v-if="multiple" class="preview" :src="file.url" alt="" />
 					<p class="no-margin">
 						{{ file.name }}
 					</p>
@@ -32,7 +28,8 @@
 						@click.stop="removeFile(file)"
 						flat
 						icon="delete"
-						color="red" />
+						color="red"
+					/>
 				</div>
 			</template>
 			<template v-for="fileQ in fileQueue" :key="fileQ.file">
@@ -41,11 +38,12 @@
 				</div>
 				<div class="previewName">
 					<img
-						height="60"
+						:width="width || '220'"
 						v-if="multiple"
 						class="preview"
 						:src="fileToUrl(fileQ.file)"
-						alt="" />
+						alt=""
+					/>
 					<p class="no-margin">
 						{{ fileQ.name }}
 					</p>
@@ -53,7 +51,8 @@
 						class="pie"
 						:style="`--p:${fileQ.progress}`"
 						style="--b: 2px"
-						:class="{ complete: fileQ.progress === 100 }">
+						:class="{ complete: fileQ.progress === 100 }"
+					>
 						<span class="progress" v-if="fileQ.progress < 100">
 							{{ `${fileQ.progress.toFixed(0)}` }}
 						</span>
@@ -66,7 +65,7 @@
 </template>
 
 <script setup lang="ts">
-import { watch } from 'vue';
+import { onMounted, watch } from 'vue';
 import { Btn, type StorageFile, useBagel, MaterialIcon } from '@bagelink/vue';
 
 const bagel = useBagel();
@@ -84,11 +83,12 @@ type StrKey = keyof StorageFile;
 type FSValue = string[] | string | number;
 
 const props = defineProps<{
-	label: string;
+	label?: string;
 	multiple?: boolean;
 	files?: StorageFile | StorageFile[];
 	deleteEndpoint?: string;
 	bindkey?: StrKey;
+	width?: string;
 }>();
 
 const bindKey: StrKey = props.bindkey || 'id';
@@ -99,12 +99,36 @@ const storageFiles = $ref<StorageFile[]>([]);
 const compareIds = (v1?: FSValue, v2?: FSValue) =>
 	[v1].flat().join(',') === [v2].flat().join(',');
 
+onMounted(() => {
+	if (!props.files && [file_bindkeys.value].flat().length) {
+		const ids = [file_bindkeys.value].flat();
+		if (props.multiple) {
+			ids.forEach((id) => {
+				void bagel.get<StorageFile>(`/files/${id}`).then((file) => {
+					storageFiles.push(file);
+				});
+			});
+		} else {
+			void bagel.get<StorageFile>(`/files/${ids[0]}`).then((file) => {
+				storageFiles.push(file);
+			});
+		}
+	}
+});
+
 watch(
 	() => props.files,
 	(newFiles) => {
-		if (newFiles) storageFiles.push(...[newFiles].flat());
+		if (newFiles) {
+			const filesToAdd = [newFiles]
+				.flat()
+				.filter((f) => !storageFiles.find((sf) => sf[bindKey] === f[bindKey]));
+			for (const file of filesToAdd) {
+				storageFiles.push(file);
+			}
+		}
 	},
-	{ immediate: true }
+	{ immediate: true },
 );
 
 watch(
@@ -119,7 +143,7 @@ watch(
 			file_bindkeys.value = idValue;
 		}
 	},
-	{ deep: true }
+	{ deep: true },
 );
 
 const fileQueue = $ref<QueueFile[]>([]);
@@ -159,7 +183,7 @@ const browse = () => {
 		const target = e?.target as HTMLInputElement;
 		if (target?.files) {
 			Array.from(target.files).forEach((file: File) =>
-				fileQueue.push({ name: file.name, file, progress: 0 })
+				fileQueue.push({ name: file.name, file, progress: 0 }),
 			);
 		}
 		flushQueue();
@@ -183,7 +207,7 @@ 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 })
+			fileQueue.push({ name: file.name, file, progress: 0 }),
 		);
 	}
 	isDragOver = false;
@@ -193,14 +217,18 @@ const drop = (e: DragEvent) => {
 
 <style scoped>
 .bagel-input .fileUploadWrap {
+	--width: 320px;
 	outline: 1px solid var(--border-color);
 	border-radius: var(--input-border-radius);
 	text-align: center;
 	cursor: pointer;
 	transition: var(--bgl-transition);
 	position: relative;
-	height: 132px;
+	min-height: 132px;
+	max-height: 500px;
 	font-size: var(--input-font-size);
+	overflow-y: auto;
+	background: var(--input-bg);
 }
 
 .previewName {
@@ -208,7 +236,8 @@ const drop = (e: DragEvent) => {
 	text-align: start;
 	color: var(--input-color);
 	display: grid;
-	grid-template-columns: 1fr 22px;
+	grid-template-columns: auto 1fr 22px;
+	gap: 1rem;
 	align-items: center;
 	padding-inline: 14px;
 }
@@ -222,14 +251,16 @@ const drop = (e: DragEvent) => {
 .imagePreviewWrap {
 	background: var(--input-bg);
 	border-radius: var(--input-border-radius);
-	height: 90px;
 	padding: 5px;
+	min-height: 90px;
 }
 
 img.preview {
-	height: 80px;
+	width: var(--width);
+	/* max-width: calc(var(--width) * 2); */
 	border-radius: var(--input-border-radius);
-	object-fit: contain;
+	object-fit: cover;
+	background: var(--bgl-white);
 }
 
 .fileUploadWrap.dragover,

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

@@ -1,8 +1,6 @@
 <template>
 	<div class="bagel-input">
-		<label class="pb-025">
-			{{ label }}
-		</label>
+		<label class="pb-025"> {{ label }}</label>
 		<div class="flex gap-05 flex-wrap">
 			<div class="radio-pill" v-for="(option, index) in options" :key="index">
 				<input
@@ -10,8 +8,9 @@
 					:id="`${id}-${getValue(option)}`"
 					:name="id"
 					:value="getValue(option)"
-					:checked="selectedValue === getValue(option)"
-					@change="handleSelect" />
+					:checked="selectedValue == getValue(option)"
+					@change="handleSelect"
+				/>
 				<label :for="`${id}-${getValue(option)}`">{{ getLabel(option) }}</label>
 			</div>
 		</div>
@@ -50,25 +49,26 @@ const props = withDefaults(
 	}>(),
 	{
 		modelValue: '',
-		id: () => `radio-pill-${Math.random().toString(36).substr(2, 9)}`,
+		id: () => `radio-pill-${Math.random().toString(36).substring(2, 9)}`,
 		label: '',
-	}
+	},
 );
 
-let selectedValue = $ref('');
+let selectedValue = $ref(props.modelValue);
 
 function handleSelect(e: Event) {
 	const newVal = (e.target as any)?.value;
 	emits('update:modelValue', newVal);
 	selectedValue = newVal;
 }
+
 watch(
 	() => props.modelValue,
 	(newVal, oldVal) => {
 		if (newVal === oldVal || oldVal === undefined) return;
 		if (selectedValue !== newVal) selectedValue = newVal;
 	},
-	{ immediate: true }
+	{ immediate: true },
 );
 
 onMounted(() => {

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

@@ -4,7 +4,8 @@
 		@hide="updateOpen(false)"
 		ref="dropdown"
 		placement="bottom-start"
-		class="bagel-input selectinput">
+		class="bagel-input selectinput"
+	>
 		<label>
 			{{ label }}
 			<button
@@ -13,11 +14,13 @@
 				:disabled="disabled"
 				type="button"
 				class="selectinput-btn"
-				:class="{ isEmpty: selectedItems.length === 0 }">
+				:class="{ isEmpty: selectedItems.length === 0 }"
+			>
 				<p>{{ selectedLabel }}</p>
 				<Icon
 					v-if="!disabled"
-					v-bind="{ icon: open ? 'unfold_less' : 'unfold_more' }" />
+					v-bind="{ icon: open ? 'unfold_less' : 'unfold_more' }"
+				/>
 			</button>
 			<input
 				tabindex="-1"
@@ -25,30 +28,35 @@
 				v-if="required"
 				@input="updateOpen(true)"
 				:value="selectedItems"
-				required />
+				required
+			>
 		</label>
 		<template #popper>
 			<Card
 				class="selectinput-options p-05"
-				:style="{ width: fullWidth ? '100%' : 'auto' }">
+				:style="{ width: fullWidth ? '100%' : 'auto' }"
+			>
 				<TextInput
 					v-if="searchable"
 					ref="searchInput"
 					dense
 					:placeholder="'Search'"
 					icon="search"
-					v-model="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) }">
+					:class="{ selected: isSelected(option) }"
+				>
 					<Icon v-if="isSelected(option)" icon="check" />
 					<Icon
 						class="opacity-3"
 						v-if="!isSelected(option)"
-						icon="fiber_manual_record" />
+						icon="fiber_manual_record"
+					/>
 					<span>
 						{{ getLabel(option) }}
 					</span>
@@ -103,7 +111,7 @@ function updateOpen(visible: boolean) {
 	else {
 		setTimeout(
 			() => (searchInput as any)?.$el?.querySelector('input')?.focus(),
-			100
+			100,
 		);
 	}
 }
@@ -129,33 +137,30 @@ const getLabel = (option: Option) => {
 	return option.label;
 };
 
-const getValue = (option: Option) => {
-	if (!option) return '';
+const 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 filteredOptions = $computed(() =>
-	props.options.filter((option) => {
-		const searchTerm = search
-			.split(/\s+/)
-			.filter(Boolean)
-			.map((t) => new RegExp(t, 'gi'));
-		return (
-			Boolean(option) &&
+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 existingIndex = selectedItems.findIndex(
-		(item) => getValue(item) === getValue(option)
+		(item) => getValue(item) === getValue(option),
 	);
 	if (existingIndex > -1) selectedItems.splice(existingIndex, 1);
 	else if (props.multiselect) {
@@ -173,9 +178,9 @@ function emitUpdate() {
 	if (props.multiselect) {
 		emit('update:modelValue', selectedItems.map(getValue).filter(Boolean));
 	} else {
-		selectedItems.splice(1, selectedItems.length - 1);
+		// selectedItems.splice(1, selectedItems.length - 1);
 		const [item] = selectedItems;
-		emit('update:modelValue', item ? getValue(item) : null);
+		emit('update:modelValue', getValue(item));
 	}
 }
 
@@ -200,7 +205,7 @@ watch(
 			}
 		}
 	},
-	{ immediate: true }
+	{ immediate: true },
 );
 
 watch(
@@ -208,7 +213,7 @@ watch(
 	() => {
 		selectedItems.forEach((option, i) => {
 			const exists = props.options.find(
-				(o) => getValue(o) === getValue(option)
+				(o) => getValue(o) === getValue(option),
 			);
 			if (!exists) selectedItems.splice(i, 1);
 			else selectedItems.splice(i, 1, exists);
@@ -217,7 +222,7 @@ watch(
 		// const newSelection = JSON.stringify(selectedItems.map(getValue));
 		// if (original !== newSelection) emitUpdate();
 	},
-	{ deep: true, immediate: true }
+	{ deep: true, immediate: true },
 );
 </script>
 

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

@@ -96,6 +96,7 @@ const props = withDefaults(
 		autoheight?: boolean;
 		code?: boolean;
 		lines?: number;
+		// eslint-disable-next-line max-len
 		autocomplete?: string;
 		autofocus?: boolean;
 	}>(),
@@ -103,7 +104,6 @@ const props = withDefaults(
 		type: 'text',
 		toggleEdit: false,
 		modelValue: '',
-		autocomplete: 'off',
 	},
 );
 let inputVal = $ref<string | number>();

package/src/components/layout/Tabs.vue

@@ -1,5 +1,5 @@
 <template>
-	<TabsNav :tabs="tabs" :group="group" class="mb-05" />
+	<TabsNav v-model="slctTab" :tabs="tabs" :group="group" class="mb-05" />
 	<div v-if="currentTab">
 		<template v-if="slots[currentTab]">
 			<slot :name="currentTab" />
@@ -9,10 +9,11 @@
 		</template>
 	</div>
 </template>
-
+z
 <script setup lang="ts">
 import { TabsNav, type Tab } from '@bagelink/vue';
-import { defineProps, useSlots, h, defineComponent } from 'vue';
+import { defineProps, useSlots, h, type VNode, defineComponent } from 'vue';
+
 import { useTabs } from './tabsManager';
 
 const props = defineProps<{
@@ -26,13 +27,21 @@ const { currentTab } = useTabs(group);
 
 const tabValue = (tab: Tab) => (typeof tab === 'string' ? tab : tab.id);
 
+const emit = defineEmits(['update:modelValue']);
+
+const slctTab = $computed({
+	get: () => props.modelValue || tabValue(props.tabs[0]),
+	set: (value) => emit('update:modelValue', value),
+});
+
 const tabComponent = defineComponent({
 	render() {
 		const currentTabIndex = props.tabs.findIndex(
-			(tab) => tabValue(tab) === currentTab.value
+			(tab) => tabValue(tab) === currentTab.value,
 		);
 		const slotChildren = slots?.default?.()?.[1]?.children;
-		return h('div', slotChildren?.[currentTabIndex]);
+
+		return h('div', (slotChildren as VNode[])[currentTabIndex]);
 	},
 });
 </script>

package/src/components/layout/TabsNav.vue

@@ -6,7 +6,8 @@
 			@click="selectTab(tab)"
 			class="bgl_tab"
 			v-for="(tab, i) in tabs"
-			:key="i">
+			:key="i"
+		>
 			<Icon v-if="typeof tab !== 'string' && tab.icon" :icon="tab.icon" />
 			{{ tabLabel(tab) }}
 		</button>
@@ -15,6 +16,7 @@
 
 <script setup lang="ts">
 import { type Tab, Icon } from '@bagelink/vue';
+import { watch } from 'vue';
 import { useTabs } from './tabsManager';
 
 const props = defineProps<{
@@ -41,39 +43,57 @@ const isActive = (tab: Tab) => {
 	if (typeof tab === 'string') return currentTab.value === tab;
 	return currentTab.value === tab.id;
 };
+
 const tabLabel = (tab: Tab) => {
 	if (typeof tab === 'string') return tab;
 	return tab.label;
 };
+
+watch(
+	() => props.modelValue,
+	(value) => {
+		if (value && !isActive(value)) currentTab.value = value;
+	},
+	{ immediate: true },
+);
 </script>
 
 <style scoped>
 .bgl_tabs_wrap {
+	background: var(--input-bg);
+	border-radius: calc(var(--input-border-radius) * 1.4);
+	padding-inline: calc(var(--btn-padding) / 8);
+	padding-block: calc(var(--btn-padding) / 8);
+	box-shadow: inset 0 0 10px #00000012;
+	gap: 0.25rem;
 }
 .bgl_tab {
 	border: none;
-	border-bottom: 2px solid var(--border-color);
 	background: transparent;
+	cursor: pointer;
 	font-size: var(--input-font-size);
 	font-family: inherit;
-	cursor: pointer;
 	transition: var(--bgl-transition);
-	padding-inline-start: calc(var(--btn-padding) / 2);
-	padding-inline-end: calc(var(--btn-padding) / 2);
-	padding-bottom: calc(var(--btn-padding) / 4);
+	padding-inline: calc(var(--btn-padding) / 2);
+	padding-block: calc(var(--btn-padding) / 8);
+	border-radius: var(--input-border-radius);
 }
-
-.bgl_tab.currentTab {
-	border-bottom: 2px solid var(--primary-color);
-}
-
+.bgl_tab.currentTab,
 .bgl_tab.active {
-	color: var(--bgl-primary);
-	border-bottom: 2px solid var(--bgl-primary);
+	background: var(--bgl-white);
+	box-shadow: 0 0 10px #00000011;
+	position: relative;
 }
 
 .bgl_tab:hover {
-	color: var(--bgl-primary);
+	background: var(--input-bg);
+	filter: brightness(95%);
+}
+.bgl_tab.currentTab:hover,
+.bgl_tab.active:hover {
+	background: var(--bgl-white);
+	filter: brightness(100%);
+	box-shadow: 0 0 10px #00000022;
 }
 
 .bgl_tab:active {