@bagelink/vue 1.5.32 → 1.6.4

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "1.5.32",
+  "version": "1.6.4",
   "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/CodeEditor/Index.vue

@@ -7,7 +7,7 @@ import { useHighlight } from './useHighlight'
 const props = defineProps({
 	language: { type: String as PropType<Language>, default: 'html' },
 	readonly: { type: Boolean, default: false },
-	modelValue: { type: String, default: '' },
+	modelValue: { type: [String, Object] as PropType<string | Record<string, any>>, default: '' },
 	autodetect: { type: Boolean, default: true },
 	ignoreIllegals: { type: Boolean, default: true },
 	label: { type: String, default: '' },
@@ -17,13 +17,26 @@ const props = defineProps({
 })
 
 const emit = defineEmits(['update:modelValue'])
+
+// Track whether the original modelValue was an object
+const isObjectMode = computed(() => typeof props.modelValue === 'object')
+
+// Helper to convert value to string for display
+function valueToString(value: string | Record<string, any>): string {
+	if (typeof value === 'string') return value
+	if (typeof value === 'object') {
+		return JSON.stringify(value, null, 2)
+	}
+	return ''
+}
+
 // State
-const code = ref(props.modelValue || '')
+const code = ref(valueToString(props.modelValue))
 const editorRef = ref<HTMLDivElement>()
 const { loaded, loadHighlight, highlightCode, setTheme } = useHighlight(props.theme)
 
 const maxHeight = computed(() => {
-	const h = props.height ?? '240px'
+	const h = props.height
 	return h.match(/^\d+$/) ? `${h}px` : h
 })
 
@@ -39,11 +52,24 @@ const formattedCode = computed(() => {
 function handleInput(e: Event) {
 	const target = e.target as HTMLTextAreaElement
 	code.value = target.value
-	emit('update:modelValue', code.value)
+
+	// If originally an object, try to parse and emit object
+	if (isObjectMode.value) {
+		try {
+			const parsed = JSON.parse(code.value)
+			emit('update:modelValue', parsed)
+		} catch {
+			// If parsing fails, emit the string as-is (user is still typing)
+			// This allows intermediate invalid JSON states while editing
+			emit('update:modelValue', code.value)
+		}
+	} else {
+		emit('update:modelValue', code.value)
+	}
 }
 
 function handleTab(event: KeyboardEvent) {
-	if ('Tab' !== event.key) {return}
+	if (event.key === 'Tab') { return }
 
 	event.preventDefault()
 	const target = event.target as HTMLTextAreaElement
@@ -53,11 +79,24 @@ function handleTab(event: KeyboardEvent) {
 	// Add tab or indent selected text
 	const newValue = `${code.value.substring(0, start)}  ${code.value.substring(end)}`
 	code.value = newValue
-	emit('update:modelValue', code.value)
+
+	// If originally an object, try to parse and emit object
+	if (isObjectMode.value) {
+		try {
+			const parsed = JSON.parse(code.value)
+			emit('update:modelValue', parsed)
+		} catch {
+			// If parsing fails, emit the string as-is
+			emit('update:modelValue', code.value)
+		}
+	} else {
+		emit('update:modelValue', code.value)
+	}
 
 	// Move cursor position after the inserted tab
 	setTimeout(() => {
-		target.selectionStart = target.selectionEnd = start + 2
+		target.selectionStart = start + 2
+		target.selectionEnd = start + 2
 	}, 0)
 }
 
@@ -68,8 +107,9 @@ onMounted(async () => {
 
 watch(() => props.theme, (t) => { setTheme(t) })
 watch(() => props.modelValue, (newVal) => {
-	if (newVal !== undefined && newVal !== code.value) {
-		code.value = newVal
+	const newCodeStr = valueToString(newVal)
+	if (newCodeStr !== code.value) {
+		code.value = newCodeStr
 	}
 }, { immediate: true })
 </script>

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/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);