@bagelink/vue 1.15.309 → 1.15.321

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "1.15.309",
+  "version": "1.15.321",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Bagel Studio",

package/src/components/AccordionItem.vue

@@ -15,6 +15,7 @@ const props = defineProps<{
 const emit = defineEmits(['update:open'])
 
 const openVal = ref(!!props.open)
+const hasOpened = ref(openVal.value)
 
 const isOpen = computed({
 	get: () => openVal.value,
@@ -39,6 +40,9 @@ const computedIcon = computed(() => {
 const iconPosition = computed(() => props.iconPosition || 'end')
 
 watch(() => props.open, () => isOpen.value = props.open, { immediate: true })
+watch(isOpen, (open) => {
+	if (open) hasOpened.value = true
+}, { immediate: true })
 
 if (accordionState) {
 	watch(
@@ -94,7 +98,7 @@ function toggle() {
 			:class="{ open: isOpen }" :aria-hidden="isOpen ? 'false' : 'true'"
 		>
 			<div class="accordion-body-inner">
-				<slot />
+				<slot v-if="hasOpened" />
 			</div>
 		</div>
 	</div>

package/src/components/Dropdown.vue

@@ -61,6 +61,7 @@ const props = withDefaults(defineProps<{
 const emit = defineEmits<{ show: []; hide: [] }>()
 
 const shown = defineModel('shown', { type: Boolean, default: false })
+const hasOpened = ref(shown.value)
 
 const triggerWrapRef = ref<HTMLElement | null>(null)
 const popoverRef = ref<HTMLElement | null>(null)
@@ -141,6 +142,7 @@ function isOpen(): boolean {
 async function internalShow() {
 	if (props.disabled || isOpen()) return
 
+	hasOpened.value = true
 	teleportTarget.value = triggerWrapRef.value?.closest('dialog[open]') ?? 'body'
 
 	if (props.showGroup && groupRegistry.has(props.showGroup)) {
@@ -255,10 +257,12 @@ watch(shown, (val) => {
 function onPopoverToggle(e: Event) {
 	const te = e as ToggleEvent
 	if (te.newState === 'open') {
+		addOpenListeners()
 		shown.value = true
 		nextTick(updatePosition)
 		emit('show')
 	} else {
+		removeOpenListeners()
 		shown.value = false
 		emit('hide')
 	}
@@ -360,9 +364,22 @@ function onScroll() {
 	if (isOpen()) updatePosition()
 }
 
-onMounted(() => {
+let openListenersActive = false
+function addOpenListeners() {
+	if (openListenersActive) return
 	document.addEventListener('pointerdown', onDocumentPointerDown, true)
 	document.addEventListener('scroll', onScroll, { capture: true, passive: true })
+	openListenersActive = true
+}
+
+function removeOpenListeners() {
+	if (!openListenersActive) return
+	document.removeEventListener('pointerdown', onDocumentPointerDown, true)
+	document.removeEventListener('scroll', onScroll, true)
+	openListenersActive = false
+}
+
+onMounted(() => {
 	if (props.showGroup) {
 		if (!groupRegistry.has(props.showGroup)) groupRegistry.set(props.showGroup, new Set())
 		groupRegistry.get(props.showGroup)!.add(internalHide)
@@ -372,8 +389,7 @@ onMounted(() => {
 })
 
 onBeforeUnmount(() => {
-	document.removeEventListener('pointerdown', onDocumentPointerDown, true)
-	document.removeEventListener('scroll', onScroll, true)
+	removeOpenListeners()
 	clearTimers()
 	if (props.showGroup) groupRegistry.get(props.showGroup)?.delete(internalHide)
 	if (isOpen()) popoverRef.value?.hidePopover()
@@ -405,6 +421,7 @@ defineExpose({ show, hide, shown })
 		<!-- Popup — teleported to closest dialog[open] or body, promoted to top layer via popover -->
 		<Teleport :to="teleportTarget">
 			<div
+				v-if="hasOpened"
 				:id="bglId" ref="popoverRef" popover="manual" class="bgl-dropdown m-0 p-0 border-none"
 				role="menu"
 				style="border-radius:var(--bgl-card-border-radius);"

package/src/components/FilterQuery.vue

@@ -14,7 +14,7 @@ interface UICondition {
 	id: string
 	field: string
 	operator: ComparisonOperator
-	value: string | string[]
+	value: string | number | boolean | null | Array<string | number | boolean | null>
 	connector: LogicalOperator | ''
 }
 
@@ -145,8 +145,8 @@ const conditions = computed(() => {
 			field: cond.field as string,
 			operator: cond.op,
 			value: Array.isArray(cond.value)
-				? cond.value.map(String)
-				: (cond.value === null ? 'null' : cond.value === undefined ? '' : String(cond.value)),
+				? [...cond.value]
+				: (cond.value === undefined ? '' : cond.value),
 			connector: index > 0 ? (cond.connector || 'and') : '',
 		}
 		return uiCond
@@ -271,20 +271,21 @@ function collapseToPresets(conditions: QueryConditions<T>): QueryConditions<T> {
 }
 
 const booleanOptions = computed(() => [
-	{ label: currentTexts.value.boolean.true, value: 'true' },
-	{ label: currentTexts.value.boolean.false, value: 'false' },
+	{ label: currentTexts.value.boolean.true, value: true },
+	{ label: currentTexts.value.boolean.false, value: false },
 ])
 
-function parseValue(value: string | number | boolean | null): string | number | boolean | null {
+function parseValue(value: string | number | boolean | null, fieldType: string): string | number | boolean | null {
 	if (typeof value === 'number' || typeof value === 'boolean' || value === null) return value
-	if (value === 'true') return true
-	if (value === 'false') return false
-	if (value === 'null') return null
-	if (!Number.isNaN(Number(value)) && value.trim() !== '') return Number(value)
+	if (fieldType === 'boolean') {
+		if (value === 'true') return true
+		if (value === 'false') return false
+	}
+	if (fieldType === 'number' && !Number.isNaN(Number(value)) && value.trim() !== '') return Number(value)
 	return value
 }
 
-function updateConditionAtIndex(index: number, updates: Partial<{ field: string, op: ComparisonOperator, value: string | number | boolean | null | string[], connector: LogicalOperator }>) {
+function updateConditionAtIndex(index: number, updates: Partial<{ field: string, op: ComparisonOperator, value: UICondition['value'], connector: LogicalOperator }>) {
 	const newModel = [...internalModel.value]
 	const existing = newModel[index]
 	if (!existing) return
@@ -293,11 +294,12 @@ function updateConditionAtIndex(index: number, updates: Partial<{ field: string,
 	if (updates.field !== undefined) updated.field = updates.field
 	if (updates.op !== undefined) updated.op = updates.op
 	if (updates.value !== undefined) {
+		const fieldType = getFieldType(updated.field as string)
 		updated.value = Array.isArray(updates.value)
 			// Coerce each list/range element (e.g. "18" → 18) so numeric filters
 			// emit bare numbers in the bracket literal.
-			? updates.value.map(v => parseValue(typeof v === 'string' ? v : String(v)))
-			: parseValue(updates.value)
+			? updates.value.map(v => parseValue(v, fieldType))
+			: parseValue(updates.value, fieldType)
 	}
 	if (updates.connector !== undefined) updated.connector = updates.connector
 
@@ -361,8 +363,8 @@ function isFreeListOperator(condition: UICondition): boolean {
 }
 
 /** Convert an array value to comma-separated text for the free-list input. */
-function listToText(value: string | string[]): string {
-	return Array.isArray(value) ? value.join(', ') : (value ?? '')
+function listToText(value: UICondition['value']): string {
+	return Array.isArray(value) ? value.join(', ') : String(value ?? '')
 }
 
 /** Split comma-separated free-list text into a trimmed string[]. */
@@ -372,7 +374,7 @@ function textToList(text: string): string[] {
 
 /** Read one bound of a `between` value ([lo, hi]); index 0 = lo, 1 = hi. */
 function betweenBound(condition: UICondition, index: 0 | 1): string {
-	return Array.isArray(condition.value) ? (condition.value[index] ?? '') : ''
+	return Array.isArray(condition.value) ? String(condition.value[index] ?? '') : ''
 }
 
 /** Update one bound of a `between` value, preserving the other. */
@@ -384,7 +386,7 @@ function onBetweenBoundChange(id: string, index: 0 | 1, v: string) {
 }
 
 const activeFiltersCount = computed(() => {
-	return conditions.value.filter((c: UICondition) => Boolean(c.field) && (c.operator === 'pr' || Boolean(c.value))).length
+	return conditions.value.filter(c => isComplete({ field: c.field, op: c.operator, value: c.value })).length
 })
 
 function getConditionIndex(id: string): number {
@@ -429,7 +431,7 @@ function onOperatorChange(id: string, operator: ComparisonOperator) {
 	updateConditionAtIndex(index, updates)
 }
 
-function onValueChange(id: string, value: string | string[]) {
+function onValueChange(id: string, value: UICondition['value']) {
 	const index = getConditionIndex(id)
 	if (index >= 0) updateConditionAtIndex(index, { value })
 }
@@ -440,7 +442,7 @@ function onQueryOptionChange(id: string, optionValue: string) {
 }
 
 function getQueryOptionValue(condition: UICondition): string {
-	return Array.isArray(condition.value) ? '' : condition.value
+	return Array.isArray(condition.value) ? '' : String(condition.value ?? '')
 }
 
 function onConnectorChange(id: string, connector: LogicalOperator) {
@@ -591,7 +593,7 @@ function onConnectorChange(id: string, connector: LogicalOperator) {
 								:model-value="condition.value" :options="booleanOptions"
 								:placeholder="currentTexts.placeholders.selectOption"
 								class="m-0 light-input borderHover"
-								@update:model-value="(v: string) => onValueChange(condition.id, v)"
+								@update:model-value="(v: boolean) => onValueChange(condition.id, v)"
 							/>
 							<DateInput
 								v-else-if="getFieldType(condition.field) === 'date'"

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

@@ -17,6 +17,8 @@ const props = withDefaults(
 		multiselect?: boolean
 		/** Render only each option's icon (label becomes a tooltip). */
 		iconOnly?: boolean
+		/** Background applied to the options area only; the field label stays outside it. */
+		bgColor?: string
 	} & BagelInputShellProps>(),
 	{ multiselect: false, iconOnly: false },
 )
@@ -34,6 +36,13 @@ const hasValue = computed(() => {
 	return Array.isArray(v) ? v.length > 0 : v != null && v !== ''
 })
 
+/** Theme token names resolve to Bagel CSS variables; raw CSS values pass through. */
+const resolvedBgColor = computed(() => {
+	const color = props.bgColor
+	if (!color) { return undefined }
+	return /^[a-z][a-z0-9-]*$/i.test(color) ? `var(--bgl-${color})` : color
+})
+
 type OptionValue = string | number | boolean
 
 const selected = defineModel<OptionValue | OptionValue[] | null>('modelValue', { default: null })
@@ -57,10 +66,14 @@ function isSelected(val: OptionValue) {
 	<div
 		class="bagel-input SelectBtn" :class="[shellClass, { 'has-value': hasValue }]" :style="shellStyle"
 	>
-		<label v-if="label || required" class="pb-025">
+		<label v-if="label || required" >
 			{{ resolveI18n(label) }}<span v-if="required"> *</span>
 		</label>
-		<div class="flex flex-wrap gap-05">
+		<div
+			class="select-btn-items flex flex-wrap gap-025"
+			:class="{ 'has-background': !!bgColor, 'default-size': !thin && !size }"
+			:style="{ backgroundColor: resolvedBgColor }"
+		>
 			<Btn
 				v-for="option in options" :key="String(getOptionValue(option))" :thin="thin"
 				:size="size"
@@ -93,10 +106,47 @@ function isSelected(val: OptionValue) {
 <style scoped>
 
 .SelectBtn {
---bgl-btn-height: 30px;
+	--bgl-btn-height: var(--bgl-input-height);
+	font-size: var(--bgl-input-font-size);
+}
+
+.SelectBtn-padding {
+	padding: 0 var(--bgl-select-btn-padding, 0.7rem);
+}
+
+.select-btn-items {
+	width: fit-content;
+	max-width: 100%;
+}
+
+.select-btn-items.has-background,
+.SelectBtn.frame .select-btn-items,
+.SelectBtn.bgl-outline .select-btn-items {
+	--bgl-select-btn-group-padding: 0.25rem;
+	padding: var(--bgl-select-btn-group-padding);
+	border-radius: calc(var(--bgl-radius) * 2);
 }
-.SelectBtn-padding{
-	padding: var(--bgl-select-btn-padding, 0.75rem);
+
+.SelectBtn.frame .select-btn-items.default-size .bgl_btn,
+.SelectBtn.bgl-outline .select-btn-items.default-size .bgl_btn,
+.select-btn-items.has-background.default-size .bgl_btn {
+	height: calc(var(--bgl-input-height) - var(--bgl-select-btn-group-padding) - var(--bgl-select-btn-group-padding));
+	line-height: calc(var(--bgl-input-height) - var(--bgl-select-btn-group-padding) - var(--bgl-select-btn-group-padding));
+}
+
+.SelectBtn.frame .select-btn-items,
+.SelectBtn.bgl-outline .select-btn-items {
+	outline: 1.5px solid var(--bgl-border-color);
+	outline-offset: -1px;
+}
+
+.SelectBtn.frame .select-btn-items {
+	transition: outline-color 0.2s ease, box-shadow 0.2s ease;
+}
+
+.SelectBtn.frame:focus-within .select-btn-items {
+	outline-color: var(--bgl-input-label-active-color, var(--bgl-primary));
+	box-shadow: 0 0 0 3px color-mix(in srgb, var(--bgl-input-label-active-color, var(--bgl-primary)) 12%, transparent);
 }
 
 </style>

package/src/components/layout/AppContent.vue

@@ -486,7 +486,7 @@ padding-top: 0;
 .pageContent--m-border {
 padding-top: 0.25rem;
 }
-.pageContent:has(.p-0)  {
+.pageContent:has(.pageContentFull)  {
 padding-block: 0rem !important;
 }
 .pageContent--m-card {

package/src/styles/buttons.css

@@ -217,6 +217,22 @@
     transform: rotate(180deg);
 }
 
+.rotate-45 {
+    transform: rotate(45deg);
+}
+
+.rotate-135 {
+    transform: rotate(135deg);
+}
+
+.rotate-225 {
+    transform: rotate(225deg);
+}
+
+.rotate-315 {
+    transform: rotate(315deg);
+}
+
 [dir="rtl"] .rotate-180-rtl,
 [dir="rtl"] .rtl-rotate-180,
 [dir="rtl"] .rotate-rtl,