@bagelink/vue 1.5.30 → 1.6.2

package/package.json

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

package/src/components/ListItem.vue

@@ -21,6 +21,7 @@ const props = withDefaults(
 		fullWidth?: boolean
 		ellipsis?: boolean
 		ripple?: boolean
+		tiny?: boolean
 		onClick?: () => void
 	}>(),
 	{
@@ -30,9 +31,9 @@ const props = withDefaults(
 )
 
 const isComponent = $computed(() => {
-	if (props.to) {return 'router-link'}
-	if (props.href) {return 'a'}
-	if (props.onClick) {return 'button'}
+	if (props.to) { return 'router-link' }
+	if (props.href) { return 'a' }
+	if (props.onClick) { return 'button' }
 	return 'div'
 })
 
@@ -42,15 +43,15 @@ const isClickable = $computed(() => {
 
 const bind = $computed(() => {
 	const obj: { [key: string]: any } = {}
-	if (props.to) {obj.to = props.to}
-	else if (props.href) {obj.href = props.href}
-	if (props.target && (props.to || props.href)) {obj.target = props.target}
+	if (props.to) { obj.to = props.to }
+	else if (props.href) { obj.href = props.href }
+	if (props.target && (props.to || props.href)) { obj.target = props.target }
 
 	obj.class = {
 		'notClickable': !(props.to || props.onClick),
 		'no-border-list': props.flat,
 	}
-	if (props.disabled) {obj.disabled = true}
+	if (props.disabled) { obj.disabled = true }
 	return obj
 })
 </script>
@@ -60,8 +61,9 @@ const bind = $computed(() => {
 		<component
 			:is="isComponent" v-bind="bind" v-ripple="ripple && isClickable"
 			class="flex flex-grow-1 gap-05 list-item" :class="{
-				'py-1': !props.thin,
+				'py-1': !props.thin && !props.tiny,
 				'py-05': props.thin,
+				'py-0': props.tiny,
 				'px-1': !props.fullWidth,
 				'px-0': props.fullWidth,
 			}" @click="onClick"

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

@@ -0,0 +1,79 @@
+<script setup lang="ts" generic="T = unknown">
+import type { Ref, WritableComputedRef } from 'vue'
+
+import { Btn } from '@bagelink/vue'
+import { computed, ref, watch } from 'vue'
+
+const props = defineProps<{
+	label?: string
+	helpText?: string
+	modelValue: T[]
+	allowAdd?: boolean
+	allowDelete?: boolean
+}>()
+
+const emit = defineEmits(['update:modelValue'])
+
+defineSlots<{
+	default: (props: { item: WritableComputedRef<T>, index: number }) => unknown
+}>()
+
+const items = ref(Array.isArray(props.modelValue) ? [...props.modelValue] : []) as Ref<T[]>
+
+watch(
+	() => props.modelValue,
+	(newVal) => {
+		if (Array.isArray(newVal)) {
+			items.value = [...newVal]
+		}
+	}
+)
+
+function addItem() {
+	items.value.push(undefined as T)
+	updateModel()
+}
+
+function deleteItem(i: number) {
+	items.value.splice(i, 1)
+	updateModel()
+}
+
+function updateModel() {
+	emit('update:modelValue', [...items.value])
+}
+
+function onUpdate(value: T, i: number) {
+	items.value[i] = value
+	updateModel()
+}
+
+// Create a writable computed ref for each item
+function getItemRef(i: number) {
+	return computed({
+		get: () => items.value[i],
+		set: (value) => {
+			onUpdate(value, i)
+		}
+	})
+}
+</script>
+
+<template>
+	<div>
+		<label v-if="label" class="txt12 txt-gray-90 mb-025">
+			{{ label }}
+		</label>
+		<p v-if="helpText" class="txt12 txt-gray-50 mb-05">
+			{{ helpText }}
+		</p>
+		<div
+			v-for="(_, i) in items" :key="i" class="array-input-row"
+			style="display: flex; align-items: center; gap: 0.5rem;"
+		>
+			<slot :item="getItemRef(i)" :index="i" />
+			<Btn v-if="allowDelete" v-tooltip="'Delete'" flat icon="delete" size="xs" @click="deleteItem(i)" />
+		</div>
+		<Btn v-if="allowAdd" icon="add" size="small" value="Add" @click="addItem" />
+	</div>
+</template>

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

@@ -13,7 +13,7 @@ const props = withDefaults(defineProps<PropTypes>(), {
 
 const emit = defineEmits(['update:modelValue'])
 
-const isAsyncSource = (src: OptionsSource): src is (q: string) => Promise<Option[]> => 'function' === typeof src
+const isAsyncSource = (src: OptionsSource): src is (q: string) => Promise<Option[]> => typeof src === 'function'
 
 type Primitive = string | number | boolean
 
@@ -48,8 +48,8 @@ let selected = $ref(false)
 let open = $ref(false)
 
 const selectedLabel = $computed((): string => {
-	if (0 === selectedItemCount) {return props.placeholder}
-	if (4 < selectedItemCount) {
+	if (selectedItemCount === 0) { return props.placeholder }
+	if (selectedItemCount > 4) {
 		const str = selectedItems
 			.slice(0, 4)
 			.map(item => getLabel(item))
@@ -77,30 +77,30 @@ function navigate(direction: 'up' | 'down') {
 		setTimeout(() => { navigate(direction) }, 210)
 		return
 	}
-	if ('up' === direction) {
-		highlightedIndex = 0 < highlightedIndex ? highlightedIndex - 1 : results.value.length - 1
-	} else if ('down' === direction) {
+	if (direction === 'up') {
+		highlightedIndex = highlightedIndex > 0 ? highlightedIndex - 1 : results.value.length - 1
+	} else if (direction === 'down') {
 		highlightedIndex = highlightedIndex < results.value.length - 1 ? highlightedIndex + 1 : 0
 	}
 	setTimeout(() => {
 		const el = selectOptions?.children[highlightedIndex] as HTMLElement
-		if (el) {el.focus()}
-		else {highlightedIndex = -1}
+		if (el) { el.focus() }
+		else { highlightedIndex = -1 }
 	}, 10)
 }
 
 const isSelected = (option: Option) => selectedItems.find(item => getValue(option) === getValue(item)) !== undefined
 
 function scrollToSelectedItem() {
-	if (!selectOptions || 0 === selectedItemCount) {return}
+	if (!selectOptions || selectedItemCount === 0) { return }
 
 	// Find the first selected item in the results
 	const selectedIndex = results.value.findIndex(option => isSelected(option))
-	if (-1 === selectedIndex) {return}
+	if (selectedIndex === -1) { return }
 
 	// Get the selected option element
 	const selectedElement = selectOptions.children[selectedIndex] as HTMLElement
-	if (!selectedElement) {return}
+	if (!selectedElement) { return }
 
 	// Scroll the selected item into view
 	selectedElement.scrollIntoView({
@@ -110,22 +110,22 @@ function scrollToSelectedItem() {
 }
 
 function getLabel(option: Option) {
-	if (null == option) {return ''}
-	if ('object' === typeof option) {return option.label ?? String((option as any).value ?? '')}
-	if ('boolean' === typeof option) {return option ? 'Yes' : 'No'}
+	if (option == null) { return '' }
+	if (typeof option === 'object') { return option.label ?? String((option as any).value ?? '') }
+	if (typeof option === 'boolean') { return option ? 'Yes' : 'No' }
 	return String(option)
 }
 
 function getValue(option?: Option): Primitive | undefined {
-	if (null == option) {return}
-	if ('object' === typeof option) {return option.value as Primitive}
+	if (option == null) { return }
+	if (typeof option === 'object') { return option.value as Primitive }
 	return option as Primitive
 }
 
 function focusInput() {
 	open = true
 	setTimeout(() => {
-		if (searchInput) {searchInput.focus()}
+		if (searchInput) { searchInput.focus() }
 	}, 10)
 }
 
@@ -134,7 +134,7 @@ function select(option: Option) {
 	const existingIndex = selectedItems.findIndex(
 		item => getValue(item) === getValue(option),
 	)
-	if (-1 < existingIndex) {
+	if (existingIndex > -1) {
 		selectedItems.splice(existingIndex, 1)
 	}
 	else if (props.multiselect) {
@@ -148,7 +148,7 @@ function select(option: Option) {
 
 	// Move focus away from popper content before it gets aria-hidden
 	const active = document.activeElement as HTMLElement | null
-	if (active && selectOptions?.contains(active)) {active.blur()}
+	if (active && selectOptions?.contains(active)) { active.blur() }
 
 	if (!props.multiselect) {
 		open = false
@@ -169,7 +169,7 @@ function emitUpdate() {
 }
 
 function compareArrays(arr1: Option[], arr2: Option[]) {
-	if (arr1.length !== arr2.length) {return false}
+	if (arr1.length !== arr2.length) { return false }
 	const s1 = arr1.map(getValue).filter(Boolean).map(String).sort()
 	const s2 = arr2.map(getValue).filter(Boolean).map(String).sort()
 	return s1.every((v, i) => v === s2[i])
@@ -182,7 +182,7 @@ watch(
 			const newOption = Array.isArray(props.options)
 				? (props.options.find(o => getValue(o) === newVal) ?? newVal)
 				: newVal
-			if (newOption && !isSelected(newOption)) {selectedItems = [newOption]}
+			if (newOption && !isSelected(newOption)) { selectedItems = [newOption] }
 		} else {
 			const newData = [newVal].flat()
 			const isSame = compareArrays(newData, selectedItems)
@@ -206,13 +206,13 @@ watch(
 	() => props.options,
 	() => {
 		const opts = props.options
-		if (!Array.isArray(opts)) {return}
+		if (!Array.isArray(opts)) { return }
 		selectedItems.forEach((option, i) => {
 			const exists = opts.find(
 				(o: Option) => getValue(o) === getValue(option),
 			)
-			if (exists === undefined) {selectedItems.splice(i, 1)}
-			else {selectedItems.splice(i, 1, exists)}
+			if (exists === undefined) { selectedItems.splice(i, 1) }
+			else { selectedItems.splice(i, 1, exists) }
 		})
 		// const original = JSON.stringify(props.options.map(getValue));
 		// const newSelection = JSON.stringify(selectedItems.map(getValue));
@@ -225,11 +225,11 @@ watch(
 watch(
 	() => results.value,
 	(newResults) => {
-		if (isAsyncSource(props.options) && 0 < newResults.length) {
+		if (isAsyncSource(props.options) && newResults.length > 0) {
 			selectedItems.forEach((option, i) => {
 				const optionValue = getValue(option)
 				// If the selected item is just a primitive value (no label), find the full option
-				if ('object' !== typeof option || !option.label) {
+				if (typeof option !== 'object' || !option.label) {
 					const fullOption = newResults.find(
 						(o: Option) => getValue(o) === optionValue,
 					)
@@ -250,7 +250,7 @@ onMounted(() => {
 			(o: Option) => getValue(o) === getValue(props.defaultValue),
 		)
 
-		if (defaultOption === undefined) {return}
+		if (defaultOption === undefined) { return }
 
 		selectedItems = [defaultOption]
 	}
@@ -411,7 +411,7 @@ onMounted(() => {
 .v-popper--theme-dropdown .v-popper__inner {
 	border: none;
 	/* background: transparent; if anyone is changing this please talk to me first*/
-	border-radius: var(--card-border-radius);
+	border-radius: var(--popper-border-radius);
 	color: var(--dropdown-color);
 }
 </style>

package/src/components/form/inputs/index.ts

@@ -1,3 +1,4 @@
+export { default as ArrayInput } from './ArrayInput.vue'
 export { default as Checkbox } from './Checkbox.vue'
 export { default as CheckInput } from './CheckInput.vue'
 export { default as CodeEditor } from './CodeEditor/Index.vue'

package/src/components/lightbox/Lightbox.vue

@@ -22,14 +22,14 @@ function close() {
 }
 
 function next() {
-	if (1 < group.length) {
+	if (group.length > 1) {
 		currentIndex = (currentIndex + 1) % group.length
 		currentItem = group[currentIndex]
 	}
 }
 
 function prev() {
-	if (1 < group.length) {
+	if (group.length > 1) {
 		currentIndex = (currentIndex - 1 + group.length) % group.length
 		currentItem = group[currentIndex]
 	}
@@ -41,16 +41,16 @@ function selectItem(index: number) {
 }
 
 watch(() => isOpen, (val) => {
-	if (val) {document.body.style.overflow = 'hidden'}
-	else {document.body.style.overflow = ''}
+	if (val) { document.body.style.overflow = 'hidden' }
+	else { document.body.style.overflow = '' }
 })
 
 function handleKeydown(event: KeyboardEvent) {
-	if ('Escape' === event.key) {
+	if (event.key === 'Escape') {
 		close()
-	} else if ('ArrowLeft' === event.key) {
+	} else if (event.key === 'ArrowLeft') {
 		prev()
-	} else if ('ArrowRight' === event.key) {
+	} else if (event.key === 'ArrowRight') {
 		next()
 	}
 }
@@ -58,7 +58,7 @@ function handleKeydown(event: KeyboardEvent) {
 const zoom = $ref(1)
 
 function clickOutside() {
-	if (1 === zoom) {close()}
+	if (zoom === 1) { close() }
 }
 
 defineExpose({ open, close })
@@ -69,25 +69,15 @@ defineExpose({ open, close })
 		<div
 			v-if="isOpen"
 			class="bgl-lightbox-overlay fixed w-100 h-100 flex justify-content-center z-9999 inset mx-auto"
-			@keydown.esc="close"
-			@keydown.left="prev"
-			@keydown.right="next"
-			@click="clickOutside"
+			@keydown.esc="close" @keydown.left="prev" @keydown.right="next" @click="clickOutside"
 		>
-			<div v-if="group && group.length > 1" class="navigation flex space-between px-3 w-100 absolute m_px-1 m_none z-9">
-				<Btn
-					class="oval opacity-8"
-					icon="arrow_back"
-					color="black"
-					@click="prev"
-				/>
-
-				<Btn
-					class="oval opacity-8"
-					icon="arrow_forward"
-					color="black"
-					@click="next"
-				/>
+			<div
+				v-if="group && group.length > 1"
+				class="navigation flex space-between px-3 w-100 absolute m_px-1 m_none z-9"
+			>
+				<Btn class="oval opacity-8" icon="arrow_back" color="black" @click="prev" />
+
+				<Btn class="oval opacity-8" icon="arrow_forward" color="black" @click="next" />
 			</div>
 			<div class="bgl-lightbox relative txt-center" @click.stop>
 				<div class="flex start fixed top-1 w-100 space-between px-1 z-9">
@@ -98,44 +88,37 @@ defineExpose({ open, close })
 						<Btn flat class="color-white" icon="add" :disabled="zoom === 3" @click="zoom++" />
 					</div>
 					<Btn
-						v-if="currentItem?.openFile && currentItem?.src" class="color-white" round thin flat iconEnd="arrow_outward"
-						value="Open File"
-						:href="currentItem?.src"
-						target="_blank"
+						v-if="currentItem?.openFile && currentItem?.src" class="color-white" round thin flat
+						iconEnd="arrow_outward" value="Open File" :href="currentItem?.src" target="_blank"
 					/>
 					<Btn
-						v-if="currentItem?.download && currentItem?.src" class="color-white" round thin flat icon="download"
-						value="Download File"
-						@click="downloadFile(currentItem?.src)"
+						v-if="currentItem?.download && currentItem?.src" class="color-white" round thin flat
+						icon="download" value="Download File" @click="downloadFile(currentItem?.src)"
 					/>
 					<div v-if="!currentItem?.openFile && !currentItem?.download" />
 				</div>
 
-				<Carousel v-model:index="currentIndex" :items="1" class="bgl-lightbox-item" :class="{ zoomed: zoom > 1 }" :freeDrag="zoom === 1">
+				<Carousel
+					v-model:index="currentIndex" :items="1" class="bgl-lightbox-item"
+					:class="{ zoomed: zoom > 1 }" :freeDrag="zoom === 1"
+				>
 					<template v-for="item in group" :key="item.src">
-						<Zoomer v-if="item.type === 'image'" v-model:zoom="zoom" :disabled="!item?.enableZoom" :mouse-wheel-to-zoom="false">
+						<Zoomer
+							v-if="item.type === 'image'" v-model:zoom="zoom" :disabled="!item?.enableZoom"
+							:mouse-wheel-to-zoom="false"
+						>
 							<Image :draggable="false" :src="item?.src" alt="Preview" class="vw90 lightbox-image" />
 						</Zoomer>
 
 						<BglVideo
-							v-else-if="item?.type === 'video' && item?.src"
-							:src="item?.src"
-							autoplay
-							controls
+							v-else-if="item?.type === 'video' && item?.src" :src="item?.src" autoplay controls
 							class="vw90"
 						/>
 
-						<div
-							v-else-if="item?.type === 'pdf' && item?.src"
-							class="vw90"
-						>
+						<div v-else-if="item?.type === 'pdf' && item?.src" class="vw90">
 							<embed
-								:src="normalizeURL(item?.src)"
-								type="application/pdf"
-								width="100%"
-								height="1080"
-								:title="item?.name"
-								class="vw90"
+								:src="normalizeURL(item?.src)" type="application/pdf" width="100%" height="1080"
+								:title="item?.name" class="vw90"
 							>
 						</div>
 						<div v-else class="vw90">
@@ -164,30 +147,19 @@ defineExpose({ open, close })
 					</template>
 				</Carousel>
 				<div
-					v-if="group && group.length > 1"
-					class="flex justify-content-center mt-2 overflow
+					v-if="group && group.length > 1" class="flex justify-content-center mt-2 overflow
 					p-1 fixed bottom start end gap-1 m_justify-content-start"
 				>
-					<template
-						v-for="(item, index) in group"
-						:key="index"
-					>
+					<template v-for="(item, index) in group" :key="index">
 						<Image
-							v-if="item.type === 'image'"
-							class="thumbnail object-fit-cover hover
-							 opacity-5 rounded flex bg-popup justify-content-center align-items-center flex-shrink-0"
-							:src="item.src"
-							alt=""
-							:class="{ active: currentIndex === index }"
-							@click="selectItem(index)"
+							v-if="item.type === 'image'" class="thumbnail object-fit-cover hover
+							 opacity-5 rounded flex bg-popup justify-content-center align-items-center flex-shrink-0" :src="item.src" alt=""
+							:class="{ active: currentIndex === index }" @click="selectItem(index)"
 						/>
 						<Icon
-							v-else
-							class="thumbnail object-fit-cover hover
-							 opacity-5 ed flex bg-popup justify-content-center align-items-center flex-shrink-0"
-							icon="description"
-							:class="{ active: currentIndex === index }"
-							@click="selectItem(index)"
+							v-else class="thumbnail object-fit-cover hover
+							 opacity-5 ed flex bg-popup justify-content-center align-items-center flex-shrink-0" icon="description"
+							:class="{ active: currentIndex === index }" @click="selectItem(index)"
 						/>
 					</template>
 				</div>
@@ -200,15 +172,18 @@ defineExpose({ open, close })
 .bgl-lightbox:has(.bgl_vid) {
 	width: 90vw;
 }
+
 .bgl-lightbox:has(.vid_short) {
 	width: auto;
 	aspect-ratio: 9/16;
 	height: 90vh;
 }
+
 .bgl-lightbox:has(.vid_short) .bgl-lightbox-item * {
-    max-height:unset !important;
+	max-height: unset !important;
 }
-.lightbox-image{
+
+.lightbox-image {
 	object-fit: contain;
 	width: fit-content;
 }
@@ -221,18 +196,19 @@ defineExpose({ open, close })
 	max-height: 90%;
 }
 
-.bgl-lightbox-item{
+.bgl-lightbox-item {
 	animation: 500ms ease bgl-lightbox-load;
 }
+
 @keyframes bgl-lightbox-load {
-  from {
-    scale:0.7;
-  }
+	from {
+		scale: 0.7;
+	}
 
-  to {
-	scale:1;
+	to {
+		scale: 1;
 
-  }
+	}
 }
 
 .bgl-lightbox-item * {
@@ -248,6 +224,14 @@ defineExpose({ open, close })
 	height: calc(100vh - 90px);
 }
 
+.bgl-lightbox-item.zoomed {
+	pointer-events: none;
+}
+
+.bgl-lightbox-item.zoomed .vue-zoomer {
+	pointer-events: auto;
+}
+
 .navigation {
 	top: 50%;
 	transform: translateY(-50%);
@@ -257,9 +241,11 @@ defineExpose({ open, close })
 	height: 50px;
 	width: 50px;
 }
+
 .thumbnail:hover {
 	opacity: 1;
 }
+
 .thumbnail:active {
 	opacity: 0.8;
 }
@@ -268,18 +254,21 @@ defineExpose({ open, close })
 	opacity: 1;
 	outline: 2px solid white;
 }
-.file-info{
+
+.file-info {
 	max-width: 420px
 }
+
 @media screen and (max-width: 910px) {
-	.file-info{
-	max-width: 220px;
-	text-align: center !important;
-}
-.file-info *{
-	text-align: center !important;
-	margin-inline: 0 !important;
-	max-width: 100% !important;
-}
+	.file-info {
+		max-width: 220px;
+		text-align: center !important;
+	}
+
+	.file-info * {
+		text-align: center !important;
+		margin-inline: 0 !important;
+		max-width: 100% !important;
+	}
 }
 </style>

package/src/styles/text.css

@@ -1391,6 +1391,22 @@
     white-space: nowrap;
 }
 
+.white-space-break-spaces {
+    white-space: break-spaces;
+}
+
+.white-space-pre {
+    white-space: pre;
+}
+
+.white-space-pre-line {
+    white-space: pre-line;
+}
+
+.white-space-pre-wrap {
+    white-space: pre-wrap;
+}
+
 .notranslate {
     translate: none !important;
     -webkit-translate: none !important;
@@ -2791,4 +2807,24 @@
     .m_capitalize {
         text-transform: capitalize;
     }
+
+    .m_white-space {
+        white-space: nowrap;
+    }
+
+    .m_white-space-break-spaces {
+        white-space: break-spaces;
+    }
+
+    .m_white-space-pre {
+        white-space: pre;
+    }
+
+    .m_white-space-pre-line {
+        white-space: pre-line;
+    }
+
+    .m_white-space-pre-wrap {
+        white-space: pre-wrap;
+    }
 }

package/src/styles/theme.css

@@ -24,6 +24,7 @@
     --bgl-box-bg: var(--bgl-white);
     --bgl-popup-bg: var(--bgl-white);
     --bgl-popup-text: var(--bgl-black);
+    --popper-border-radius: var(--card-border-radius);
     --bgl-text-color: var(--bgl-black);
     --bgl-light-text: var(--bgl-white);
     --bgl-richtext-color: var(--bgl-white);