@bagelink/vue 0.0.427 → 0.0.431

package/src/components/TableSchema.vue

@@ -6,15 +6,18 @@
 					class="col"
 					v-for="field in computedSchema"
 					:key="field.id"
-					@click="sort(field?.id || '')">
+					@click="sort(field?.id || '')"
+				>
 					<div class="flex">
 						{{ field.label || keyToLabel(field.id) }}
 						<div
 							class="list-arrows"
-							:class="{ sorted: sortField === field.id }">
+							:class="{ sorted: sortField === field.id }"
+						>
 							<MaterialIcon
 								:class="{ desc: sortDirection === 'DESC' }"
-								icon="keyboard_arrow_up" />
+								icon="keyboard_arrow_up"
+							/>
 						</div>
 					</div>
 				</th>
@@ -24,25 +27,29 @@
 					v-for="row in computedData"
 					:key="row.id"
 					@click="selectElement(row)"
-					class="row row-item position-relative">
+					class="row row-item position-relative"
+				>
 					<td
 						class="col"
 						v-for="field in computedSchema.map((c) => ({
 							...c,
 							transform: undefined,
 						}))"
-						:key="`${field.id}-${row.id}`">
+						:key="`${field.id}-${row.id}`"
+					>
 						<slot
 							v-if="field.id && slots[field.id]"
 							:name="field.id"
 							:row="row"
-							:field="field" />
+							:field="field"
+						/>
 						<div v-else>
 							<BglField
 								class="embedded-field"
 								:field="field"
 								:modelValue="row"
-								label="" />
+								label=""
+							/>
 						</div>
 					</td>
 				</tr>
@@ -65,14 +72,17 @@ const loading = $ref(true);
 
 const props = defineProps<{
 	data: any[];
-	schema: BglFormSchemaT | (() => BglFormSchemaT);
+	schema?: BglFormSchemaT | (() => BglFormSchemaT);
 }>();
 
 const computedSchema = $computed(() => {
 	if (typeof props.schema === 'function') {
 		return props.schema();
 	}
-	return props.schema;
+	if (props.schema) return props.schema;
+	const keys = [...new Set((props.data || []).map(Object.keys).flat())] as string[];
+	const schema: BglFormSchemaT = keys.map((id) => ({ id, label: keyToLabel(id) }));
+	return schema;
 });
 
 const emit = defineEmits(['select', 'orderBy']);

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

@@ -11,7 +11,8 @@
 					:name="id"
 					:value="getValue(option)"
 					:checked="selectedValue === getValue(option)"
-					@change="handleSelect" />
+					@change="handleSelect"
+				/>
 				<label :for="`${id}-${getValue(option)}`">{{ getLabel(option) }}</label>
 			</div>
 		</div>
@@ -50,9 +51,9 @@ 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('');
@@ -68,7 +69,7 @@ watch(
 		if (newVal === oldVal || oldVal === undefined) return;
 		if (selectedValue !== newVal) selectedValue = newVal;
 	},
-	{ immediate: true }
+	{ immediate: true },
 );
 
 onMounted(() => {