@bagelink/vue 0.0.568 → 0.0.575

package/dist/style.css

@@ -1909,10 +1909,10 @@ svg.leaflet-image-layer.leaflet-interactive path {
 }
 .resize-observer[data-v-b329ee4c]{position:absolute;top:0;left:0;z-index:-1;width:100%;height:100%;border:none;background-color:transparent;pointer-events:none;display:block;overflow:hidden;opacity:0}.resize-observer[data-v-b329ee4c] object{display:block;position:absolute;top:0;left:0;height:100%;width:100%;overflow:hidden;pointer-events:none;z-index:-1}.v-popper__popper{z-index:10000;top:0;left:0;outline:none}.v-popper__popper.v-popper__popper--hidden{visibility:hidden;opacity:0;transition:opacity .15s,visibility .15s;pointer-events:none}.v-popper__popper.v-popper__popper--shown{visibility:visible;opacity:1;transition:opacity .15s}.v-popper__popper.v-popper__popper--skip-transition,.v-popper__popper.v-popper__popper--skip-transition>.v-popper__wrapper{transition:none!important}.v-popper__backdrop{position:absolute;top:0;left:0;width:100%;height:100%;display:none}.v-popper__inner{position:relative;box-sizing:border-box;overflow-y:auto}.v-popper__inner>div{position:relative;z-index:1;max-width:inherit;max-height:inherit}.v-popper__arrow-container{position:absolute;width:10px;height:10px}.v-popper__popper--arrow-overflow .v-popper__arrow-container,.v-popper__popper--no-positioning .v-popper__arrow-container{display:none}.v-popper__arrow-inner,.v-popper__arrow-outer{border-style:solid;position:absolute;top:0;left:0;width:0;height:0}.v-popper__arrow-inner{visibility:hidden;border-width:7px}.v-popper__arrow-outer{border-width:6px}.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-inner{left:-2px}.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-outer,.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-outer{left:-1px}.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-outer{border-bottom-width:0;border-left-color:transparent!important;border-right-color:transparent!important;border-bottom-color:transparent!important}.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-inner{top:-2px}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-container{top:0}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-outer{border-top-width:0;border-left-color:transparent!important;border-right-color:transparent!important;border-top-color:transparent!important}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-inner{top:-4px}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-outer{top:-6px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-inner{top:-2px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-outer,.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-outer{top:-1px}.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-outer{border-left-width:0;border-left-color:transparent!important;border-top-color:transparent!important;border-bottom-color:transparent!important}.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-inner{left:-4px}.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-outer{left:-6px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-container{right:-10px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-outer{border-right-width:0;border-top-color:transparent!important;border-right-color:transparent!important;border-bottom-color:transparent!important}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-inner{left:-2px}.v-popper--theme-tooltip .v-popper__inner{background:rgba(0,0,0,.8);color:#fff;border-radius:6px;padding:7px 12px 6px}.v-popper--theme-tooltip .v-popper__arrow-outer{border-color:#000c}.v-popper--theme-dropdown .v-popper__inner{background:#fff;color:#000;border-radius:6px;border:1px solid #ddd;box-shadow:0 6px 30px #0000001a}.v-popper--theme-dropdown .v-popper__arrow-inner{visibility:visible;border-color:#fff}.v-popper--theme-dropdown .v-popper__arrow-outer{border-color:#ddd}
 
-.selectinput[data-v-4e1d2142] {
+.selectinput[data-v-c5344871] {
 	width: 100%;
 }
-.selectinput-option[data-v-4e1d2142] {
+.selectinput-option[data-v-c5344871] {
 	padding: 6px 12px;
 	cursor: pointer;
 	border-radius: 5px;
@@ -1923,14 +1923,14 @@ svg.leaflet-image-layer.leaflet-interactive path {
 	width: 100%;
 	font-size: var(--input-font-size);
 }
-.selectinput-options[data-v-4e1d2142] {
+.selectinput-options[data-v-c5344871] {
 	max-height: 300px;
 	overflow-y: auto;
 }
-.selectinput-option[data-v-4e1d2142]:hover {
+.selectinput-option[data-v-c5344871]:hover {
 	background: var(--bgl-gray-20);
 }
-.isEmpty p[data-v-4e1d2142] {
+.isEmpty p[data-v-c5344871] {
 	opacity: 0.3;
 }
 
@@ -2337,7 +2337,7 @@ svg.leaflet-image-layer.leaflet-interactive path {
 	color: var(--bgl-white);
 }
 
-.bagel-input .fileUploadWrap[data-v-1ce244aa] {
+.bagel-input .fileUploadWrap[data-v-853e75be] {
 	--width: 320px;
 	outline: 1px solid var(--border-color);
 	border-radius: var(--input-border-radius);
@@ -2350,7 +2350,7 @@ svg.leaflet-image-layer.leaflet-interactive path {
 	overflow-y: auto;
 	background: var(--input-bg);
 }
-.previewName[data-v-1ce244aa] {
+.previewName[data-v-853e75be] {
 	padding: 0.5rem;
 	text-align: start;
 	color: var(--input-color);
@@ -2360,18 +2360,18 @@ svg.leaflet-image-layer.leaflet-interactive path {
 	align-items: center;
 	padding-inline: 14px;
 }
-.previewName p[data-v-1ce244aa] {
+.previewName p[data-v-853e75be] {
 	overflow: hidden;
 	text-overflow: ellipsis;
 	white-space: nowrap;
 }
-.imagePreviewWrap[data-v-1ce244aa] {
+.imagePreviewWrap[data-v-853e75be] {
 	background: var(--input-bg);
 	border-radius: var(--input-border-radius);
 	padding: 5px;
 	min-height: 90px;
 }
-img.preview[data-v-1ce244aa] {
+img.preview[data-v-853e75be] {
 	/* max-height: calc(var(--width) / 2); */
 	/* max-width: calc(var(--width) * 2); */
 	width: 40px;
@@ -2381,7 +2381,7 @@ img.preview[data-v-1ce244aa] {
 	background: var(--bgl-gray-light);
 	box-shadow: 0 0 10px #00000012;
 }
-img.preview.single[data-v-1ce244aa] {
+img.preview.single[data-v-853e75be] {
 	max-width: var(--width);
 	width: auto;
 	object-fit: contain;
@@ -2389,18 +2389,18 @@ img.preview.single[data-v-1ce244aa] {
 	max-height: calc(var(--width) / 2);
 	margin: 1rem;
 }
-.fileUploadWrap.dragover[data-v-1ce244aa],
-.fileUploadWrap[data-v-1ce244aa]:hover {
+.fileUploadWrap.dragover[data-v-853e75be],
+.fileUploadWrap[data-v-853e75be]:hover {
 	box-shadow: inset 0 0 10px #00000012;
 }
-.bagel-input .fileUploadWrap.fileDropZone[data-v-1ce244aa] {
+.bagel-input .fileUploadWrap.fileDropZone[data-v-853e75be] {
 	background: var(--input-bg);
 	display: flex;
 	align-items: center;
 	justify-content: center;
 	color: var(--bgl-gray);
 }
-.pie[data-v-1ce244aa] {
+.pie[data-v-853e75be] {
 	width: 30px;
 	height: 30px;
 	position: relative;
@@ -2408,7 +2408,7 @@ img.preview.single[data-v-1ce244aa] {
 	align-items: center;
 	justify-content: center;
 }
-.pie[data-v-1ce244aa]:before {
+.pie[data-v-853e75be]:before {
 	content: '';
 	position: absolute;
 	border-radius: 50%;
@@ -2426,26 +2426,26 @@ img.preview.single[data-v-1ce244aa] {
 		#000 calc(100% - var(--b))
 	);
 }
-.pie .success[data-v-1ce244aa] {
+.pie .success[data-v-853e75be] {
 	transform: scale(0);
 	opacity: 0;
 	transition: all 0.3s ease-in-out;
 }
-.pie .progress[data-v-1ce244aa] {
+.pie .progress[data-v-853e75be] {
 	position: absolute;
 	font-size: 10px;
 }
-.pie.complete .progress[data-v-1ce244aa] {
+.pie.complete .progress[data-v-853e75be] {
 	display: none;
 }
-.pie.complete .success[data-v-1ce244aa] {
+.pie.complete .success[data-v-853e75be] {
 	transform: scale(1.3);
 	opacity: 1;
 }
-.pie.complete[data-v-1ce244aa]:before {
+.pie.complete[data-v-853e75be]:before {
 	background: conic-gradient(var(--bgl-green) calc(var(--p) * 1%), #0000 0);
 }
-.pie.complete[data-v-1ce244aa] {
+.pie.complete[data-v-853e75be] {
 	color: var(--bgl-green);
 }
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "0.0.568",
+  "version": "0.0.575",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Neveh Allon",
@@ -105,15 +105,15 @@
     "access": "public"
   },
   "dependencies": {
-    "@tiptap/extension-image": "^2.4.0",
-    "@tiptap/extension-table": "^2.4.0",
-    "@tiptap/extension-table-cell": "^2.4.0",
-    "@tiptap/extension-table-header": "^2.4.0",
-    "@tiptap/extension-table-row": "^2.4.0",
-    "@tiptap/extension-youtube": "^2.4.0",
-    "@tiptap/pm": "^2.4.0",
-    "@tiptap/starter-kit": "^2.4.0",
-    "@tiptap/vue-3": "^2.4.0",
+    "@tiptap/extension-image": "^2.5.1",
+    "@tiptap/extension-table": "^2.5.1",
+    "@tiptap/extension-table-cell": "^2.5.1",
+    "@tiptap/extension-table-header": "^2.5.1",
+    "@tiptap/extension-table-row": "^2.5.1",
+    "@tiptap/extension-youtube": "^2.5.1",
+    "@tiptap/pm": "^2.5.1",
+    "@tiptap/starter-kit": "^2.5.1",
+    "@tiptap/vue-3": "^2.5.1",
     "@vuepic/vue-datepicker": "^8.8.1",
     "@vueuse/core": "^10.11.0",
     "axios": "^1.7.2",

package/src/components/MaterialIcon.vue

@@ -6,17 +6,16 @@ defineProps<{
 	name?: MaterialIcons
 	size?: number | string
 	color?: string
-	weight?: number | string 
+	weight?: number | string
 }>()
 </script>
 
 <template>
-	<span class="bgl_icon-font" :style="{ fontSize: `${size}rem`, color,  'font-variation-settings':  `'wght' ${weight || 400}`}">
+	<span class="bgl_icon-font" :style="{ 'fontSize': `${size}rem`, color, 'font-variation-settings': `'wght' ${weight || 400}` }">
 		{{ icon || name }}
 	</span>
 </template>
 
-
 <style scoped>
 
 </style>

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

@@ -6,12 +6,14 @@ const props = defineProps<{
 	label?: string
 	multiple?: boolean
 	files?: StorageFile | StorageFile[]
-	deleteEndpoint?: string
 	bindkey?: StrKey
 	modelValue?: FSValue
 	width?: string
+	topic?: string
 }>()
 
+const emit = defineEmits(['update:modelValue'])
+
 const bagel = useBagel()
 
 interface QueueFile {
@@ -28,23 +30,24 @@ type FSValue = string[] | string | number
 
 const bindKey: StrKey = props.bindkey || 'id'
 
-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(',')
+async function fetchFiles() {
+	const files = await bagel.get<StorageFile[]>(`/files?topic=${props.topic}`)
+	storageFiles.push(...files)
+}
 
 onMounted(() => {
+	if (props.topic) fetchFiles()
 	if (!props.files && [file_bindkeys].flat().length) {
 		const ids = [file_bindkeys].flat().filter(Boolean)
 		if (!ids.length) return
 		if (props.multiple) {
-			ids.forEach(id => {
+			ids.forEach((id) => {
 				void bagel
 					.get<StorageFile>(`/files/${id}`)
-					.then(file => {
+					.then((file) => {
 						storageFiles.push(file)
 					})
 					.catch(console.error)
@@ -52,7 +55,7 @@ onMounted(() => {
 		} else {
 			void bagel
 				.get<StorageFile>(`/files/${ids[0]}`)
-				.then(file => {
+				.then((file) => {
 					storageFiles.push(file)
 				})
 				.catch(console.error)
@@ -62,7 +65,7 @@ onMounted(() => {
 
 watch(
 	() => props.files,
-	newFiles => {
+	(newFiles) => {
 		if (newFiles) {
 			const filesToAdd = [newFiles]
 				.flat()
@@ -103,10 +106,7 @@ const fileToUrl = (file: File) => URL.createObjectURL(file)
 function removeFile(file: StorageFile) {
 	const index = storageFiles.indexOf(file)
 	storageFiles.splice(index, 1)
-
-	if (props.deleteEndpoint) {
-		void bagel.delete(`${props.deleteEndpoint}/${file.id}`)
-	}
+	void bagel.delete(`/static_files/${file.id}`)
 	updateModelValue()
 }
 
@@ -116,6 +116,7 @@ async function flushQueue() {
 		if (!props.multiple) storageFiles.splice(0, 1)
 		const serverFile = await bagel.uploadFile<StorageFile>(file.file, {
 			onUploadProgress: (e: any) => (file.progress = e.progress * 100 - 1),
+			topic: props.topic,
 		})
 		storageFiles.push(serverFile)
 		const i = fileQueue.indexOf(file)
@@ -131,8 +132,7 @@ 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()
@@ -155,8 +155,7 @@ 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
@@ -183,13 +182,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="" />
+						<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>
@@ -204,7 +203,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
@@ -213,7 +212,7 @@ function drop(e: DragEvent) {
 							class="preview"
 							:src="fileToUrl(fileQ.file)"
 							alt=""
-						/>
+						>
 						<p class="no-margin">
 							{{ fileQ.name }}
 						</p>

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

@@ -3,6 +3,7 @@ import { onMounted, watch } from 'vue'
 import { Dropdown } from 'floating-vue'
 import 'floating-vue/style.css'
 import {
+	Btn,
 	Card,
 	Icon,
 	type MaterialIcons,
@@ -28,6 +29,7 @@ const props = defineProps<{
 	icon?: MaterialIcons
 	hideLabel?: boolean
 	defaultValue?: Option
+	clearable?: boolean
 }>()
 
 const emit = defineEmits(['update:modelValue'])
@@ -35,6 +37,8 @@ const emit = defineEmits(['update:modelValue'])
 const searchInput = $ref<HTMLInputElement | null>(null)
 
 let selectedItems = $ref<Option[]>([])
+
+const selectedItemCount = $computed(() => selectedItems.length ?? 0)
 let search = $ref('')
 
 const dropdown = $ref<InstanceType<typeof Dropdown> | null>(null)
@@ -58,13 +62,13 @@ function updateOpen(visible: boolean) {
 }
 
 const selectedLabel = $computed(() => {
-	if (selectedItems.length === 0) return props.placeholder || 'Select'
-	if (selectedItems.length > 4) {
+	if (selectedItemCount === 0) return props.placeholder || 'Select'
+	if (selectedItemCount > 4) {
 		const str = selectedItems
 			.slice(0, 4)
 			.map(item => getLabel(item))
 			.join(', ')
-		return `${str}... +${selectedItems.length - 4}`
+		return `${str}... +${selectedItemCount - 4}`
 	}
 	return selectedItems.map(item => getLabel(item)).join(', ')
 })
@@ -108,7 +112,7 @@ function select(option: Option) {
 		current.push(option)
 
 		selectedItems = current
-	} else { selectedItems.splice(0, selectedItems.length, option)
+	} else { selectedItems.splice(0, selectedItemCount, option)
 	}
 
 	if (!props.multiselect) dropdown?.hide()
@@ -119,7 +123,7 @@ function emitUpdate() {
 	if (props.multiselect) {
 		emit('update:modelValue', selectedItems.map(getValue).filter(Boolean))
 	} else {
-		// selectedItems.splice(1, selectedItems.length - 1);
+		// selectedItems.splice(1, selectedItemCount - 1);
 		const [item] = selectedItems
 		emit('update:modelValue', getValue(item))
 	}
@@ -141,7 +145,7 @@ watch(
 		} else {
 			const isSame = compareArrays([newVal].flat(), selectedItems)
 			if (!isSame) {
-				selectedItems.splice(0, selectedItems.length, ...[newVal].flat())
+				selectedItems.splice(0, selectedItemCount, ...[newVal].flat())
 			}
 		}
 	},
@@ -170,6 +174,7 @@ onMounted(() => {
 		const defaultOption = props.options.find(
 			o => getValue(o) === getValue(props.defaultValue),
 		)
+
 		if (defaultOption === undefined) return
 
 		selectedItems = [defaultOption]
@@ -185,13 +190,13 @@ onMounted(() => {
 		@click.stop
 		@hide="updateOpen(false)"
 	>
-		<label>
+		<label class="flex gap-05">
 			{{ label }}
 			<button
 				:disabled="disabled"
 				type="button"
 				class="selectinput-btn"
-				:class="{ isEmpty: selectedItems.length === 0 }"
+				:class="{ isEmpty: selectedItemCount === 0 }"
 				@keydown="openOptions"
 				@click="updateOpen(true)"
 			>
@@ -199,6 +204,15 @@ onMounted(() => {
 				<p v-if="!hideLabel">
 					{{ selectedLabel }}
 				</p>
+
+				<div v-if="clearable" class="ms-auto ps-05 me-05">
+					<Btn
+						thin
+						icon="clear"
+						class="color-black bg-gray-light"
+						@click="selectedItems = []"
+					/>
+				</div>
 				<Icon
 					v-if="!disabled"
 					thin
@@ -213,10 +227,11 @@ onMounted(() => {
 				required
 				@input="updateOpen(true)"
 			>
+
 		</label>
 		<template #popper>
 			<Card
-				class="selectinput-options p-05"
+				class="p-05"
 				:style="{ width: fullWidth ? '100%' : 'auto' }"
 			>
 				<TextInput
@@ -227,22 +242,24 @@ onMounted(() => {
 					placeholder="Search"
 					icon="search"
 				/>
-				<div
-					v-for="(option, i) in filteredOptions"
-					:key="`${option}${i}`"
-					class="selectinput-option hover gap-1"
-					:class="{ selected: isSelected(option) }"
-					@click="select(option)"
-				>
-					<Icon v-if="isSelected(option)" icon="check" />
-					<Icon
-						v-if="!isSelected(option)"
-						class="opacity-3"
-						icon="fiber_manual_record"
-					/>
-					<span>
-						{{ getLabel(option) }}
-					</span>
+				<div class="selectinput-options">
+					<div
+						v-for="(option, i) in filteredOptions"
+						:key="`${option}${i}`"
+						class="selectinput-option hover gap-1"
+						:class="{ selected: isSelected(option) }"
+						@click="select(option)"
+					>
+						<Icon v-if="isSelected(option)" icon="check" />
+						<Icon
+							v-if="!isSelected(option)"
+							class="opacity-3"
+							icon="fiber_manual_record"
+						/>
+						<span>
+							{{ getLabel(option) }}
+						</span>
+					</div>
 				</div>
 				<slot name="last" />
 			</Card>