@bagelink/vue 0.0.564 → 0.0.568

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

@@ -1,11 +1,6 @@
 <script setup lang="ts">
 import { onMounted, watch } from 'vue'
-import {
-	Btn,
-	MaterialIcon,
-	type StorageFile,
-	useBagel,
-} from '@bagelink/vue'
+import { Btn, MaterialIcon, type StorageFile, useBagel } from '@bagelink/vue'
 
 const props = defineProps<{
 	label?: string
@@ -13,6 +8,7 @@ const props = defineProps<{
 	files?: StorageFile | StorageFile[]
 	deleteEndpoint?: string
 	bindkey?: StrKey
+	modelValue?: FSValue
 	width?: string
 }>()
 
@@ -32,32 +28,41 @@ type FSValue = string[] | string | number
 
 const bindKey: StrKey = props.bindkey || 'id'
 
-const file_bindkeys = defineModel<FSValue>('modelValue')
+const emit = defineEmits(['update:modelValue'])
+
+let file_bindkeys = $ref<FSValue>(props.modelValue || [])
 const storageFiles = $ref<StorageFile[]>([])
 
-const compareIds = (v1?: FSValue, v2?: FSValue) => [v1].flat().join(',') === [v2].flat().join(',')
+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().filter(Boolean)
+	if (!props.files && [file_bindkeys].flat().length) {
+		const ids = [file_bindkeys].flat().filter(Boolean)
 		if (!ids.length) return
 		if (props.multiple) {
-			ids.forEach((id) => {
-				void bagel.get<StorageFile>(`/files/${id}`).then((file) => {
-					storageFiles.push(file)
-				}).catch(console.error)
+			ids.forEach(id => {
+				void bagel
+					.get<StorageFile>(`/files/${id}`)
+					.then(file => {
+						storageFiles.push(file)
+					})
+					.catch(console.error)
 			})
 		} else {
-			void bagel.get<StorageFile>(`/files/${ids[0]}`).then((file) => {
-				storageFiles.push(file)
-			}).catch(console.error)
+			void bagel
+				.get<StorageFile>(`/files/${ids[0]}`)
+				.then(file => {
+					storageFiles.push(file)
+				})
+				.catch(console.error)
 		}
 	}
 })
 
 watch(
 	() => props.files,
-	(newFiles) => {
+	newFiles => {
 		if (newFiles) {
 			const filesToAdd = [newFiles]
 				.flat()
@@ -67,24 +72,24 @@ watch(
 			}
 		}
 	},
-	{ immediate: true },
+	{ immediate: true }
 )
 
-watch(
-	() => storageFiles,
-	(newFiles) => {
-		let idValue: FSValue
-		if (props.multiple) { idValue = newFiles.map(f => f[bindKey]) as FSValue
-		}
-		else {
-			idValue = (newFiles[0][bindKey] as string) || ''
-		}
-		if (!compareIds(file_bindkeys.value, idValue)) {
-			file_bindkeys.value = idValue
-		}
-	},
-	{ deep: true },
-)
+function updateModelValue() {
+	let idValue: FSValue
+	if (props.multiple) {
+		idValue = storageFiles.map(f => f[bindKey]) as FSValue
+	} else {
+		idValue = (storageFiles[0][bindKey] as string) || ''
+	}
+	const isSame = [idValue]
+		.flat()
+		.every(id => [file_bindkeys].flat().includes(id))
+	if (!isSame) {
+		file_bindkeys = idValue
+		emit('update:modelValue', file_bindkeys)
+	}
+}
 
 const fileQueue = $ref<QueueFile[]>([])
 let isDragOver = $ref(false)
@@ -102,17 +107,21 @@ function removeFile(file: StorageFile) {
 	if (props.deleteEndpoint) {
 		void bagel.delete(`${props.deleteEndpoint}/${file.id}`)
 	}
+	updateModelValue()
 }
 
-function flushQueue() {
-	fileQueue.forEach(async (file, i) => {
+async function flushQueue() {
+	for (const file of fileQueue) {
+		file.uploading = true
 		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)
+		const i = fileQueue.indexOf(file)
 		fileQueue.splice(i, 1)
-	})
+	}
+	updateModelValue()
 }
 
 function browse() {
@@ -122,7 +131,9 @@ function 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()
 	}
@@ -144,7 +155,9 @@ function dragover(e: DragEvent) {
 function 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()
@@ -170,13 +183,13 @@ function drop(e: DragEvent) {
 			<slot name="files" :files="storageFiles" :fileQueue>
 				<template v-for="file in storageFiles" :key="file.id">
 					<div v-if="!multiple" class="single-image">
-						<img class="single preview" :src="file.url" alt="">
-					<!-- <p class="no-margin">
+						<img class="single preview" :src="file.url" alt="" />
+						<!-- <p class="no-margin">
 						{{ file.name }}
 					</p> -->
 					</div>
 					<div v-if="multiple" class="multi-image-item previewName">
-						<img class="preview" :src="file.url" alt="">
+						<img class="preview" :src="file.url" alt="" />
 						<p class="no-margin">
 							{{ file.name }}
 						</p>
@@ -191,7 +204,7 @@ function drop(e: DragEvent) {
 				</template>
 				<template v-for="fileQ in fileQueue" :key="fileQ.file">
 					<div v-if="!multiple" class="imagePreviewWrap">
-						<img class="preview" :src="fileToUrl(fileQ.file)" alt="">
+						<img class="preview" :src="fileToUrl(fileQ.file)" alt="" />
 					</div>
 					<div class="previewName">
 						<img
@@ -200,7 +213,7 @@ function drop(e: DragEvent) {
 							class="preview"
 							:src="fileToUrl(fileQ.file)"
 							alt=""
-						>
+						/>
 						<p class="no-margin">
 							{{ fileQ.name }}
 						</p>
@@ -218,7 +231,11 @@ function drop(e: DragEvent) {
 					</div>
 				</template>
 			</slot>
-			<slot v-if="(!storageFiles.length && !fileQueue.length) || multiple" name="placeholder" :browse>
+			<slot
+				v-if="(!storageFiles.length && !fileQueue.length) || multiple"
+				name="placeholder"
+				:browse
+			>
 				<p>Drop files here or click to upload</p>
 			</slot>
 		</div>
@@ -273,10 +290,9 @@ img.preview {
 	object-fit: cover;
 	background: var(--bgl-gray-light);
 	box-shadow: 0 0 10px #00000012;
-
 }
 
-img.preview.single{
+img.preview.single {
 	max-width: var(--width);
 	width: auto;
 	object-fit: contain;

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

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { watch } from 'vue'
+import { onMounted, watch } from 'vue'
 import { Dropdown } from 'floating-vue'
 import 'floating-vue/style.css'
 import {
@@ -27,6 +27,7 @@ const props = defineProps<{
 	multiselect?: boolean
 	icon?: MaterialIcons
 	hideLabel?: boolean
+	defaultValue?: Option
 }>()
 
 const emit = defineEmits(['update:modelValue'])
@@ -47,8 +48,7 @@ function openOptions() {
 
 function updateOpen(visible: boolean) {
 	open = visible
-	if (!open) { search = ''
-	}
+	if (!open) { search = '' }
 	else {
 		setTimeout(
 			() => (searchInput as any)?.$el?.querySelector('input')?.focus(),
@@ -83,7 +83,7 @@ function getValue(option?: Option) {
 	return option.value
 }
 
-const isSelected = (option: Option) => !!selectedItems.find(item => getValue(option) === getValue(item))
+const isSelected = (option: Option) => selectedItems.find(item => getValue(option) === getValue(item)) !== undefined
 
 const filteredOptions = $computed(() =>	props.options.filter((option) => {
 	const searchTerm = search
@@ -136,8 +136,7 @@ watch(
 	() => props.modelValue,
 	(newVal: Option | Option[]) => {
 		if (!props.multiselect) {
-			const newOption
-				= props.options.find(o => getValue(o) === newVal) || newVal
+			const newOption = props.options.find(o => getValue(o) === newVal) ?? newVal
 			if (newOption && !isSelected(newOption)) selectedItems = [newOption]
 		} else {
 			const isSame = compareArrays([newVal].flat(), selectedItems)
@@ -156,7 +155,7 @@ watch(
 			const exists = props.options.find(
 				o => getValue(o) === getValue(option),
 			)
-			if (!exists) selectedItems.splice(i, 1)
+			if (exists === undefined) selectedItems.splice(i, 1)
 			else selectedItems.splice(i, 1, exists)
 		})
 		// const original = JSON.stringify(props.options.map(getValue));
@@ -165,6 +164,17 @@ watch(
 	},
 	{ deep: true, immediate: true },
 )
+
+onMounted(() => {
+	if (props.defaultValue !== undefined) {
+		const defaultOption = props.options.find(
+			o => getValue(o) === getValue(props.defaultValue),
+		)
+		if (defaultOption === undefined) return
+
+		selectedItems = [defaultOption]
+	}
+})
 </script>
 
 <template>

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

@@ -6,10 +6,13 @@ const props = withDefaults(defineProps<{
 	id?: string
 	title?: string
 	small?: boolean
+	required?: boolean
 	defaultValue?: boolean
 }>(), { defaultValue: false })
 
-const checked = defineModel<boolean>('modelValue')
+const inputId = $ref(props.id || Math.random().toString(36).substring(7))
+
+const checked = defineModel<boolean | undefined>('modelValue', { default: undefined })
 
 onMounted(() => {
 	if (checked.value === undefined) checked.value = props.defaultValue
@@ -17,13 +20,27 @@ onMounted(() => {
 </script>
 
 <template>
-	<div class="bagel-input bgl-checkbox justify-content-center gap-1" :title="title" :class="{ small }">
+	<div
+		class="bagel-input bgl-checkbox justify-content-center gap-1"
+		:title
+		:class="{ small }"
+		@click.prevent="checked = !checked"
+	>
 		<div class="switch" :class="{ checked }">
 			<span class="slider round" />
 		</div>
-		<label>
-			{{ label }}
-			<input :id="id" v-model="checked" type="checkbox">
+
+		<input
+			:id="inputId"
+			v-model="checked"
+			type="checkbox"
+			:required
+		>
+
+		<label :for="inputId">
+			<slot name="label">
+				{{ label }}
+			</slot>
 		</label>
 	</div>
 </template>

package/src/components/layout/TabbedLayout.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { onMounted } from 'vue'
 import type { Router } from 'vue-router'
+import { onMounted } from 'vue'
 
 const props = defineProps<{
 	title?: string

package/src/composables/index.ts

@@ -0,0 +1,24 @@
+import { type BglFormSchemaFnT, type BglFormSchemaT, getFallbackSchema } from '@bagelink/vue'
+
+interface useBglSchemaParamsT {
+	schema?: BglFormSchemaFnT
+	showFields?: string[]
+	data?: any[]
+}
+
+export function useBglSchema(
+	{ schema, showFields, data }: useBglSchemaParamsT = {}
+): BglFormSchemaT {
+	let _schema = schema
+	if (typeof _schema === 'function') {
+		_schema = _schema()
+	}
+	if (_schema) {
+		return (
+			showFields && showFields.length
+				? _schema.filter(f => showFields.includes(f.id as string))
+				: _schema
+		) as BglFormSchemaT
+	}
+	return getFallbackSchema(data, showFields)
+}

package/src/index.ts

@@ -9,6 +9,7 @@ export {
 export { ModalPlugin, useModal } from './plugins/modal'
 export * from './utils'
 export * from './types'
+export * from './composables'
 export * from './components'
 export * from './utils/allCountries'
 import './styles/bagel.css'

package/src/styles/layout.css

@@ -2185,6 +2185,30 @@
 .direction-rtl {
     direction: rtl;
 }
+.inset-0, .inset{
+    inset: 0;
+}
+.inset-1{
+    inset: 1rem;
+}
+.inset-2{
+    inset: 2rem;
+}
+
+.inset-3{
+    inset: 3rem;
+}
+
+.inset-4{
+    inset: 4rem;
+}
+
+.inset-5{
+    inset: 5rem;
+}
+.inset-6{
+    inset: 6rem;
+}
 
 
 @media screen and (max-width: 910px) {

package/src/styles/mobilLayout.css

@@ -2085,5 +2085,28 @@
     .m_-bottom-8{
         bottom: -8rem !important;
     }
+    .m_inset-0, .m_inset{
+        inset: 0;
+    }
+    .m_inset-1{
+        inset: 1rem;
+    }
+    .m_inset-2{
+        inset: 2rem;
+    }
+    
+    .m_inset-3{
+        inset: 3rem;
+    }
     
+    .m_inset-4{
+        inset: 4rem;
+    }
+    
+    .m_inset-5{
+        inset: 5rem;
+    }
+    .m_inset-6{
+        inset: 6rem;
+    }
 }

package/src/styles/text.css

@@ -215,7 +215,6 @@
 }
 
 .black,
-.txt-black,
 .font-black {
     font-weight: 900;
 }
@@ -593,7 +592,6 @@
     }
 
     .m_black,
-    .m_txt-black,
     .m_font-black {
         font-weight: 900;
     }

package/src/styles/theme.css

@@ -1,6 +1,7 @@
 /* @import url("https://fonts.googleapis.com/css2?family=Noto+Sans+Hebrew:wght@300;400;500;600;700&display=swap"); */
 /*noinspection CssUnknownTarget*/
-@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined&display=swap");
+/* @import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined&display=swap"); */
+@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200");
 @import url("https://fonts.googleapis.com/css2?family=Lexend:wght@100;200;300;400;500;600;700;800;900&display=swap");
 
 :root {

package/src/types/BagelForm.ts

@@ -54,3 +54,5 @@ export interface SelectBagelField<T> extends BaseBagelField<T> {
 export type Field<T = Record<string, any>> = BaseBagelField<T> | InputBagelField<T> | SelectBagelField<T>
 
 export type BglFormSchemaT<T = Record<string, any>> = Field<T>[]
+
+export type BglFormSchemaFnT<T = Record<string, any>> = (() => BglFormSchemaT<T>) | BglFormSchemaT<T>

package/src/utils/index.ts

@@ -1,4 +1,4 @@
-import type { Attributes } from '../types'
+import type { Attributes, BglFormSchemaT } from '@bagelink/vue'
 
 let timeout: any
 export function debounce(fn: () => void, delay = 500) {
@@ -55,7 +55,10 @@ export function iffer(field: any, itemData: any) {
 	return true
 }
 
-export const denullify = (itemData?: Record<string, any>, fieldID?: string) => (fieldID && itemData ? itemData[fieldID] : null)
+export function denullify(itemData?: Record<string, any>, fieldID?: string) {
+	if (!fieldID) return null
+	return itemData ? itemData[fieldID] : null
+}
 
 export const isDate = (dateToTest: any) => !Number.isNaN(Date.parse(dateToTest))
 
@@ -64,3 +67,20 @@ export { formatString } from './strings'
 export * as bagelFormUtils from './BagelFormUtils'
 
 export { useLang } from './lang'
+
+export function getFallbackSchema(data?: any[], showFields?: string[]): BglFormSchemaT {
+	const keys = [
+		...new Set((data ?? []).map(Object.keys).flat()),
+	] as string[]
+
+	const schema: BglFormSchemaT = keys.map(
+		id => ({
+			id,
+			label: keyToLabel(id),
+		})
+	)
+
+	return showFields
+		? schema.filter(f => showFields.includes(f.id as string) || !f.id)
+		: schema
+}