@bagelink/vue 1.15.301 → 1.15.305

package/package.json

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

package/src/components/AccordionItem.vue

@@ -65,6 +65,7 @@ function toggle() {
 <template>
 	<div class="accordion-item txt-start" :class="[{ flat }]">
 		<button
+			type="button"
 			:aria-expanded="isOpen ? 'true' : 'false'" class="accordion-head"
 			:aria-controls="`accordion-body-${id}`" @click="toggle()"
 		>

package/src/components/FilterQuery.vue

@@ -652,6 +652,7 @@ function onConnectorChange(id: string, connector: LogicalOperator) {
 .and-or-select {
 --bgl-input-font-size: 12px !important;
 --input-background-color: transparent !important;
+min-width: 60px !important;
 }
 
 .between-inputs {
@@ -706,11 +707,11 @@ max-height: none;
 }
 
 .filter-query-inline .filter-row {
-grid-template-columns: 50px minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) auto;
+grid-template-columns: 60px minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) auto;
 }
 
 .filter-query-inline .first-filter-row {
-grid-template-columns: 50px minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) auto;
+grid-template-columns: 60px minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) auto;
 }
 
 .filter-query-inline .first-filter-field {

package/src/components/form/inputs/CodeEditor/Index.vue

@@ -167,7 +167,7 @@ watch(() => props.modelValue, () => {
 
 <template>
 	<div
-		class="bagel-input code-editor-container ltr" :class="[shellClass, { 'mb-2': label && !singleLine, 'has-value': hasCodeValue, 'single-line': singleLine }]"
+		class="bagel-input code-editor-container ltr" :class="[shellClass, { '': label && !singleLine, 'has-value': hasCodeValue, 'single-line': singleLine }]"
 		:style="[{ height: maxHeight }, shellStyle]"
 	>
 		<label v-if="label" class="label">{{ label }}</label>
@@ -225,6 +225,12 @@ watch(() => props.modelValue, () => {
 	outline: solid 1px var(--bgl-border-color, #4f575f);
 	box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.13);
 }
+.code-editor-grandpa textarea.code-input{
+	box-shadow: none !important;
+	background: transparent !important;
+	border-radius: 0 !important;
+
+}
 
 .editor-content-papa {
 	/* Stack pre + textarea in one cell so both share the content-sized box */

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

@@ -0,0 +1,120 @@
+<script setup lang="ts">
+import { computed, onBeforeUnmount, ref, watch } from 'vue'
+import { Dropdown, EmptyState, Icon, TabsNav, TextInput } from '@bagelink/vue'
+import { FONT_AWESOME_BRANDS_ICONS, FONT_AWESOME_ICONS, MATERIAL_ICONS } from '../../Icon/constants'
+
+defineProps<{
+	modelValue?: string
+	label?: string
+	placeholder?: string
+}>()
+
+const emit = defineEmits<{
+	'update:modelValue': [value: string | undefined]
+}>()
+
+const dropdown = ref<InstanceType<typeof Dropdown> | null>(null)
+const search = ref('')
+const activeTab = ref<'material' | 'fa' | 'brands'>('material')
+const visibleCount = ref(80)
+const tabsGroup = `icon-picker-${Math.random().toString(36).slice(2)}`
+let batchTimer: ReturnType<typeof setTimeout> | undefined
+
+const tabs = [
+	{ label: 'Material', value: 'material' },
+	{ label: 'FA', value: 'fa' },
+	{ label: 'Brands', value: 'brands' },
+]
+
+const iconSets = {
+	material: MATERIAL_ICONS,
+	fa: FONT_AWESOME_ICONS,
+	brands: FONT_AWESOME_BRANDS_ICONS,
+}
+
+const filteredIcons = computed(() => {
+	const query = search.value.trim().toLowerCase()
+	const icons = iconSets[activeTab.value]
+	return query ? icons.filter(icon => icon.includes(query)) : icons
+})
+
+const visibleIcons = computed(() => filteredIcons.value.slice(0, visibleCount.value))
+
+function loadMore() {
+	if (visibleCount.value >= filteredIcons.value.length) return
+	batchTimer = setTimeout(() => {
+		visibleCount.value = Math.min(visibleCount.value + 80, filteredIcons.value.length)
+		loadMore()
+	}, 16)
+}
+
+function resetAndLoad() {
+	if (batchTimer) clearTimeout(batchTimer)
+	visibleCount.value = 80
+	loadMore()
+}
+
+function select(icon: string) {
+	emit('update:modelValue', icon)
+	dropdown.value?.hide()
+	search.value = ''
+}
+
+function clear() {
+	emit('update:modelValue', undefined)
+}
+
+watch([activeTab, search], resetAndLoad)
+onBeforeUnmount(() => {
+	if (batchTimer) clearTimeout(batchTimer)
+})
+</script>
+
+<template>
+	<div class="bagel-input">
+		<label v-if="label" class="block txt12 medium pb-025">{{ label }}</label>
+		<Dropdown
+			ref="dropdown"
+			placement="bottom-start"
+			:auto-hide="true"
+			@show="resetAndLoad"
+			@hide="search = ''"
+		>
+			<template #trigger="{ shown, show, hide }">
+				<div class="icon-picker-trigger flex gap-05 w-100p bg-input px-075 rounded hover" @click="shown ? hide() : show()">
+					<span class="square-20 flex-center flex-shrink-0">
+						<Icon v-if="modelValue" :icon="modelValue" :size="1.1" />
+						<span v-else class="txt11 opacity-4">—</span>
+					</span>
+					<span class="txt12 flex-grow opacity-6 ellipsis-1">{{ modelValue || placeholder || 'Choose an icon' }}</span>
+					<Icon v-if="modelValue" icon="close" :size="0.9" class="opacity-5 hover-opacity-10" @click.stop="clear" />
+					<Icon :icon="shown ? 'expand_less' : 'expand_more'" :size="1" class="opacity-4" />
+				</div>
+			</template>
+
+			<div class="w-300px overflow-hidden">
+				<TabsNav v-model="activeTab" :tabs="tabs" :group="tabsGroup" flat class="round-none w-100p mx-0 txt-center" />
+				<TextInput v-model="search" icon-start="search" placeholder="Search icons" class="mb-0" />
+				<div class="grid grid-wrap-7 gap-025 p-05 overflow max-h-300px">
+					<div
+						v-for="icon in visibleIcons"
+						:key="icon"
+						class="square-40 flex-center hover rounded relative overflow-hidden"
+						:class="modelValue === icon ? 'bg-primary-light color-primary' : 'bg-box'"
+						:title="icon"
+						@click="select(icon)"
+					>
+						<Icon :icon="icon" :size="1.2" />
+					</div>
+				</div>
+				<EmptyState v-if="visibleIcons.length === 0" compact icon="none" description="No icons found" />
+			</div>
+		</Dropdown>
+	</div>
+</template>
+
+<style scoped>
+.icon-picker-trigger {
+	height: var(--bgl-input-height);
+}
+</style>

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

@@ -7,6 +7,7 @@ export { default as ColorInput } from './ColorInput.vue'
 export { default as DateInput } from './DateInput.vue'
 export { default as DatePicker } from './DatePicker.vue'
 export { default as EmailInput } from './EmailInput.vue'
+export { default as IconPickerInput } from './IconPickerInput.vue'
 export { default as MarkdownEditor } from './MarkdownEditor.vue'
 export { default as NumberInput } from './NumberInput.vue'
 export { default as OTP } from './OTP.vue'

package/src/components/layout/AppContent.vue

@@ -52,6 +52,15 @@ interface Props {
 	 * mobile). Turn this on only for headers you know must stay one exact line.
 	 */
 	singleRow?: boolean
+	/**
+	 * Mobile (≤ breakpoint) only: collapse the header's three sides into one
+	 * continuous flow. The menu/back/title, center and trailing actions all sit in
+	 * a single wrapping row — items run one after another (no `space-between` gap,
+	 * no auto-margin pushing the actions to the far edge) and simply wrap onto the
+	 * next line as a continuous stream when they run out of room. Desktop is
+	 * unaffected. Off by default (mobile keeps the split leading/trailing layout).
+	 */
+	mobileSingleRow?: boolean
 	/**
 	 * Cap the readable width of the page and center it on wide screens. Applies to
 	 * BOTH the header and the body, so the title stays aligned above the content
@@ -80,6 +89,7 @@ const props = withDefaults(defineProps<Props>(), {
 	border: undefined,
 	headerHeight: '60px',
 	singleRow: false,
+	mobileSingleRow: false,
 	maxWidth: undefined,
 	fill: false,
 })
@@ -135,7 +145,10 @@ const hasCenter = computed(() => !!slots['header-center'])
 			:class="[
 				`app-header--${resolvedVariant}`,
 				`app-header--m-${resolvedMobileVariant}`,
-				{ 'app-header--single-row': singleRow },
+				{
+					'app-header--single-row': singleRow,
+					'app-header--m-single-flow': mobileSingleRow,
+				},
 			]"
 		>
 			<!-- Left Side -->
@@ -163,17 +176,23 @@ const hasCenter = computed(() => !!slots['header-center'])
 				</PageTitle>
 
 				<!-- Custom Left Content -->
-				<slot name="header-left" />
+				<div class="app-header-slot">
+					<slot name="header-left" />
+				</div>
 			</div>
 
 			<!-- Center Content (only rendered when the slot is provided) -->
 			<div v-if="hasCenter" class="app-header-center flex min-w-0">
-				<slot name="header-center" />
+				<div class="app-header-slot">
+					<slot name="header-center" />
+				</div>
 			</div>
 
 			<!-- Right Side -->
 			<div class="app-header-side flex gap-row-05 endNavTools">
-				<slot name="header-right" />
+				<div class="app-header-slot">
+					<slot name="header-right" />
+				</div>
 			</div>
 		</header>
 
@@ -262,6 +281,25 @@ padding-inline: 0;
 }
 }
 
+/* Slot content is rendered in the consumer's scope. Keep this mobile flow rule
+   unscoped so it targets the real rendered DOM directly and remains stable across
+   async slot updates and component HMR. */
+.app-header-slot {
+display: contents;
+}
+
+@media screen and (max-width: 910px) {
+.app-header.app-header--m-single-flow {
+justify-content: flex-start !important;
+}
+.app-header--m-single-flow > .app-header-side,
+.app-header--m-single-flow > .app-header-center,
+.app-header--m-single-flow > .app-header-side > .app-header-slot > *,
+.app-header--m-single-flow > .app-header-center > .app-header-slot > * {
+display: contents !important;
+}
+}
+
 </style>
 
 <style scoped>
@@ -434,6 +472,9 @@ padding-inline: 0.75rem;
 .pageContent--border {
 padding-top: 1rem;
 }
+.pageContent--border:has(.pageContentFull)  {
+padding: 0rem;
+}
 .pageContent--card {
 padding-top: 0.25rem;
 }
@@ -445,6 +486,9 @@ padding-top: 0;
 .pageContent--m-border {
 padding-top: 0.25rem;
 }
+.pageContent:has(.p-0)  {
+padding-block: 0rem !important;
+}
 .pageContent--m-card {
 padding-top: 0.25rem;
 }

package/src/components/layout/TimelineItem.vue

@@ -30,7 +30,7 @@ const slots = useSlots()
 </script>
 
 <template>
-	<div class="bgl-tl-item flex gap-075" :class="{ 'bgl-tl-item--last': last }">
+	<div class="bgl-tl-item flex gap-075 align-items-start" :class="{ 'bgl-tl-item--last': last }">
 		<div class="bgl-tl-rail flex-column align-items-center flex-shrink-0">
 			<span class="bgl-tl-marker flex-center" :style="{ '--tl-color': `var(--bgl-${color})` }">
 				<slot name="marker">
@@ -52,9 +52,13 @@ const slots = useSlots()
 .bgl-tl-item {
 	min-height: 1.75rem;
 }
+.bgl-tl-rail {
+	display: flex;
+	align-self: stretch;
+}
 .bgl-tl-marker {
-	width: 1.625rem;
-	height: 1.625rem;
+	width: 1.25rem;
+	height: 1.25rem;
 	border-radius: 50%;
 	background: color-mix(in srgb, var(--tl-color) 15%, transparent);
 	color: var(--tl-color);

package/src/form-flow/FormFlow.vue

@@ -7,6 +7,7 @@ import CodeEditor from '../components/form/inputs/CodeEditor/Index.vue'
 import ColorInput from '../components/form/inputs/ColorInput.vue'
 import DateInput from '../components/form/inputs/DateInput.vue'
 import EmailInput from '../components/form/inputs/EmailInput.vue'
+import IconPickerInput from '../components/form/inputs/IconPickerInput.vue'
 import NumberInput from '../components/form/inputs/NumberInput.vue'
 import PasswordInput from '../components/form/inputs/PasswordInput.vue'
 import RadioGroup from '../components/form/inputs/RadioGroup.vue'
@@ -283,6 +284,7 @@ function getFieldComponent(fieldOrType: FieldBuilder | string) {
 		array: ArrayInput,
 		upload: UploadInput,
 		color: ColorInput,
+		icon: IconPickerInput,
 		range: RangeInput,
 	}
 

package/src/form-flow/form-flow.ts

@@ -371,6 +371,10 @@ export const $ = {
 		return new Field('color', parseArgs(labelOrConfig, config))
 	},
 
+	icon(labelOrConfig?: string | BaseFieldConfig, config?: BaseFieldConfig): FieldBuilder<string> {
+		return new Field('icon', parseArgs(labelOrConfig, config))
+	},
+
 	range(
 		labelOrConfig?: string | (BaseFieldConfig & { min?: number, max?: number, step?: number, multiRange?: boolean }),
 		config?: BaseFieldConfig & { min?: number, max?: number, step?: number, multiRange?: boolean }
@@ -1031,6 +1035,9 @@ function createFieldFromProperty(
 		case 'multiselect':
 			field = $.multiselect(xOptions ?? resolvedProp.enum ?? [], config)
 			break
+		case 'icon':
+			field = $.icon(config)
+			break
 		case 'file':
 		case 'upload':
 			field = $.upload(config)