@bagelink/vue 0.0.423 → 0.0.431

package/dist/utils/index.d.ts

@@ -11,4 +11,5 @@ export declare const iffer: (field: any, itemData: any) => any;
 export declare const denullify: (itemData?: Record<string, any>, fieldID?: string) => any;
 export { formatString } from './strings';
 export * as bagelFormUtils from './BagelFormUtils';
+export { useLang } from './lang';
 //# sourceMappingURL=index.d.ts.map

package/dist/utils/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAGtC,eAAO,MAAM,QAAQ,OAAQ,MAAM,IAAI,yBAGtC,CAAC;AAEF,eAAO,MAAM,UAAU,SAAU,MAAM,KAAG,MAAM,GAAG,SAEjC,CAAC;AAEnB,eAAO,MAAM,QAAQ,SACd,MAAM,OAEP,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,kBAI1B,CAAC;AAEF,eAAO,MAAM,QAAQ,cAAe,MAAM,EAAE,WAG3C,CAAC;AAEF,wBAAgB,SAAS,CAAC,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,IAAI,QAIrE;AAED,wBAAgB,QAAQ,CAAC,QAAQ,CAAC,EAAE,GAAG,EAAE,GAAG,CAAC,EAAE,GAAG,EAAE,GAAG,OAAO,EAAE,GAAG,EAAE,UAKpE;AAED,wBAAgB,SAAS,CAAC,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,KAAK,CAAC,EAAE,UAAU,EAAE,QAAQ,CAAC,EAAE,GAAG,EAAE,GAAG,CAAC,EAAE,CAAC,OAS7F;AAED,eAAO,MAAM,KAAK,UAAW,GAAG,YAAY,GAAG,QAM9C,CAAC;AAEF,eAAO,MAAM,SAAS,cAAe,OAAO,MAAM,EAAE,GAAG,CAAC,YAAY,MAAM,QAAqD,CAAC;AAEhI,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAEzC,OAAO,KAAK,cAAc,MAAM,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAGtC,eAAO,MAAM,QAAQ,OAAQ,MAAM,IAAI,yBAGtC,CAAC;AAEF,eAAO,MAAM,UAAU,SAAU,MAAM,KAAG,MAAM,GAAG,SAEjC,CAAC;AAEnB,eAAO,MAAM,QAAQ,SACd,MAAM,OAEP,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,kBAI1B,CAAC;AAEF,eAAO,MAAM,QAAQ,cAAe,MAAM,EAAE,WAG3C,CAAC;AAEF,wBAAgB,SAAS,CAAC,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,IAAI,QAIrE;AAED,wBAAgB,QAAQ,CAAC,QAAQ,CAAC,EAAE,GAAG,EAAE,GAAG,CAAC,EAAE,GAAG,EAAE,GAAG,OAAO,EAAE,GAAG,EAAE,UAKpE;AAED,wBAAgB,SAAS,CAAC,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,KAAK,CAAC,EAAE,UAAU,EAAE,QAAQ,CAAC,EAAE,GAAG,EAAE,GAAG,CAAC,EAAE,CAAC,OAS7F;AAED,eAAO,MAAM,KAAK,UAAW,GAAG,YAAY,GAAG,QAM9C,CAAC;AAEF,eAAO,MAAM,SAAS,cAAe,OAAO,MAAM,EAAE,GAAG,CAAC,YAAY,MAAM,QAAqD,CAAC;AAEhI,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAEzC,OAAO,KAAK,cAAc,MAAM,kBAAkB,CAAC;AAEnD,OAAO,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC"}

package/dist/utils/lang.d.ts

@@ -0,0 +1,7 @@
+export declare function useLang(): {
+    lang: import('vue').WritableComputedRef<string>;
+    $tdb: (langEl: Record<string, any>) => any;
+    availableLangs: import('vue').WritableComputedRef<string[]>;
+    defaultLang: import('vue').WritableComputedRef<string>;
+};
+//# sourceMappingURL=lang.d.ts.map

package/dist/utils/lang.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"lang.d.ts","sourceRoot":"","sources":["../../src/utils/lang.ts"],"names":[],"mappings":"AAcA,wBAAgB,OAAO;;mBAMA,OAAO,MAAM,EAAE,GAAG,CAAC;;;EAkBzC"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "0.0.423",
+  "version": "0.0.431",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Neveh Allon",

package/src/components/AccordionItem.vue

@@ -1,18 +1,26 @@
 <template>
-  <div class="accordion-item">
-    <button @click="toggle()" :aria-expanded="open ? 'true' : 'false'" class="accordion-head"
-      :aria-controls="`accordion-body-${id}`">
-      <span class="accordion-label">{{ label }}</span>
-      <div class="accordion-icon" :class="{ open }">
-        <MaterialIcon icon="expand_more" />
-      </div>
-    </button>
-    <Transition name="expand">
-      <div v-if="open" class="accordion-body" :id="`accordion-body-${id}`" :aria-hidden="open ? 'false' : 'true'">
-        <slot />
-      </div>
-    </Transition>
-  </div>
+	<div class="accordion-item">
+		<button
+			@click="toggle()"
+			:aria-expanded="open ? 'true' : 'false'"
+			class="accordion-head"
+			:aria-controls="`accordion-body-${id}`">
+			<span class="accordion-label">{{ label }}</span>
+			<slot name="head" />
+			<div class="accordion-icon" :class="{ open }">
+				<MaterialIcon icon="expand_more" />
+			</div>
+		</button>
+		<Transition name="expand">
+			<div
+				v-if="open"
+				class="accordion-body"
+				:id="`accordion-body-${id}`"
+				:aria-hidden="open ? 'false' : 'true'">
+				<slot />
+			</div>
+		</Transition>
+	</div>
 </template>
 
 <script lang="ts" setup>
@@ -20,77 +28,83 @@ import { MaterialIcon } from '@bagelink/vue';
 import { watch, inject } from 'vue';
 
 const props = defineProps<{
-  label: string,
-  id?: string,
+	label?: string;
+	id?: string;
 }>();
 let open = $ref(false);
 
 const accordionState = inject('accordionState') as { openItem: string | null };
 const id = props.id || Math.random().toString(36).substring(7);
 
-watch(() => accordionState?.openItem, (currentOpenId) => {
-  if (currentOpenId !== id) {
-    open = false;
-  }
-}, { immediate: true });
+watch(
+	() => accordionState?.openItem,
+	(currentOpenId) => {
+		if (currentOpenId !== id) {
+			open = false;
+		}
+	},
+	{ immediate: true }
+);
 
 function toggle() {
-  open = !open;
-  if (open && accordionState?.openItem) accordionState.openItem = id;
-  else if (accordionState?.openItem === id) accordionState.openItem = null;
+	open = !open;
+	if (open && accordionState?.openItem) accordionState.openItem = id;
+	else if (accordionState?.openItem === id) accordionState.openItem = null;
 }
 </script>
 
 <style scoped>
 .accordion-item {
-  border-bottom: 1px solid var(--border-color);
-  transition: all 0.2s;
-  cursor: pointer;
-  overflow: hidden;
+	border-bottom: 1px solid var(--border-color);
+	transition: all 0.2s;
+	cursor: pointer;
+	overflow: hidden;
 }
 
 .accordion-head {
-  height: var(--input-height);
-  background: transparent;
-  display: flex;
-  width: 100%;
-  align-items: center;
-  justify-content: space-between;
+	height: var(--input-height);
+	background: transparent;
+	display: flex;
+	width: 100%;
+	align-items: center;
+	justify-content: space-between;
+	border: none;
 }
 
 .accordion-icon {
-  transition: all 0.2s ease;
+	transition: all 0.2s ease;
 }
 
 .accordion-icon.open {
-  transform: rotate(180deg);
+	transform: rotate(180deg);
 }
 
 .accordion-label {
-  font-weight: bold;
+	font-weight: bold;
 }
 
 .accordion-head:hover .accordion-label {
-  text-decoration: underline;
+	text-decoration: underline;
 }
 
-.accordion-body {}
+.accordion-body {
+}
 </style>
 
 <style>
 .expand-enter-active,
 .expand-leave-active {
-  transition: all 0.5s;
-  transition-delay: 0ms;
+	transition: all 0.2s;
+	transition-delay: 0ms;
 }
 
 .expand-enter-from,
 .expand-leave-to {
-  max-height: 0;
+	max-height: 0;
 }
 
 .expand-enter-to,
 .expand-leave-from {
-  max-height: 300px;
+	max-height: 300px;
 }
 </style>

package/src/components/Alert.vue

@@ -1,6 +1,6 @@
 <template>
 	<div class="alert" :class="[type]" v-if="!isDismissed" :dismissable="dismissable" >
-		<Icon class="alert_icon" :icon="type" :size="2" :color="color[type]"/>
+		<Icon v-if="icon !== 'none'" class="alert_icon" :icon="icon || type" :size="2" :color="color[type]"/>
 		<p class="m-0">
 			{{ message }}
 		</p>
@@ -10,12 +10,14 @@
 
 <script setup lang="ts">
 import { Icon } from '@bagelink/vue';
+import type { MaterialIcons } from '@bagelink/vue';
 import Btn from './Btn.vue';
 
 type Props = {
   message: string;
   dismissable?: boolean;
-  type: 'info' | 'warning' | 'error';
+  type?: 'info' | 'warning' | 'error';
+  icon?: MaterialIcons | 'none';
 }
 
 withDefaults(

package/src/components/Avatar.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="avatar flex" :style="{ width: `${size}px`, height: `${size}px` }">
+  <div class="avatar flex justify-content-center" :style="{ width: `${size}px`, height: `${size}px` }">
     <img v-if="src" :src="src" :alt="name">
     <p v-else :style="{ 'line-height': `${size}px`, 'font-size': `calc(1.5rem * ${size} / 50)` }">
       {{ fallback || initials(name || '') }}

package/src/components/Carousel.vue

@@ -16,10 +16,10 @@
 		</div>
 		<div class="Handlers">
 			<span @click="prev">
-				<slot name="prev" />
+				<slot :prev :index="activeSlideIndex" name="prev" />
 			</span>
 			<span @click="next">
-				<slot name="next" />
+				<slot :next :index="activeSlideIndex" name="next" />
 			</span>
 		</div>
 	</div>

package/src/components/Modal.vue

@@ -15,7 +15,7 @@
 				<Title class="modal-title" tag="h3" v-if="title" :label="title" />
 			</header>
 			<slot />
-			<footer class="modal-footer mt-3">
+			<footer v-if="slots['footer'] || actions?.length" class="modal-footer mt-3">
 				<Btn
 					v-for="(action, i) in actions"
 					:key="i"
@@ -29,7 +29,7 @@
 </template>
 
 <script lang="ts" setup>
-import { onMounted, onUnmounted, watch } from 'vue';
+import { onMounted, onUnmounted, watch, useSlots } from 'vue';
 import { type BtnOptions, Btn, useEscape, Title, Card } from '@bagelink/vue';
 import '../styles/modal.css';
 
@@ -42,6 +42,8 @@ const props = defineProps<{
 	visible?: boolean;
 }>();
 
+const slots = useSlots();
+
 let isVisible = $ref<boolean>(false);
 
 watch(

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(() => {