@bagelink/vue 1.12.57 → 1.12.67

package/package.json

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

package/src/components/Btn.vue

@@ -4,7 +4,7 @@ import type { SetupContext } from 'vue'
 import { Icon, Loading, useModal, useI18n, resolveI18n } from '@bagelink/vue'
 import { useSlots, ref, onMounted, onUnmounted, computed } from 'vue'
 import { RouterLink } from 'vue-router'
-
+defineOptions({ name: 'BglBtn' })
 const props = withDefaults(
 	defineProps<{
 		disabled?: boolean
@@ -23,7 +23,7 @@ const props = withDefaults(
 		loading?: boolean
 		role?: string
 		value?: TranslatableString
-		to?: string
+		to?: string | Record<string, any>
 		href?: string
 		round?: boolean
 		is?: string

package/src/components/IframeVue.vue

@@ -58,15 +58,16 @@ defineExpose({ contentWindow })
 		ref="iframe"
 		:src
 		:title
-		frameborder="none"
-		:width
-		:height
+		frameborder="0"
+		:width="width ?? '100%'"
+		:height="height ?? '100%'"
 		allowpaymentrequest="true"
 		:marginwidth
 		:marginheight
 		:csp
 		:scrolling
 		:srcset
+		style="display:block; border:none;"
 		@load="$event => emit('load', $event)"
 	/>
 </template>

package/src/components/Menu.vue

@@ -43,8 +43,13 @@ defineProps<{ items: NavLink[] }>()
 </template>
 
 <style scoped>
-.bgl_btn.router-link-active {
+/* .bgl_btn.router-link-active {
 	background-color: var(--bgl-gray-40);
+} */
+
+.bglTopMenu .router-link-active {
+    background: var(--bgl-primary) !important;
+    color: var(--bgl-white) !important;
 }
 </style>
 

package/src/components/calendar/views/WeekView.vue

@@ -714,7 +714,7 @@ onUnmounted(() => {
 								backgroundColor: event.color || 'var(--bgl-primary)',
 							}" @mousedown.stop @click.stop="handleEventSelection(event, $event)"
 						>
-							<div class="overflow-hidden color-white p-025 txt12 h-100p">
+							<div class="overflow-hidden color-white p-025 txt12 h-100p flex gap-1 flex-wrap">
 								<div class="white-space ellipsis-1">
 									{{ event.title }}
 								</div>

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

@@ -31,6 +31,8 @@ const props = withDefaults(defineProps<{
 	format?: FormatType
 	clearable?: boolean
 	required?: boolean
+	label?: string
+	helptext?: string
 }>(), {
 	clearable: true,
 })
@@ -218,6 +220,8 @@ defineExpose({
 		:class="{ 'bg-transparent': disabled }"
 		@touchmove.prevent
 	>
+		<label v-if="label" class="label">{{ label }}</label>
+		<p v-if="helptext" class="helptext">{{ helptext }}</p>
 		<Btn
 			v-if="clearable && !disabled"
 			flat
@@ -258,6 +262,19 @@ defineExpose({
 	border-radius: var(--input-border-radius);
 }
 
+.bgl_input.signature-pad > .label {
+	display: block;
+	font-size: 0.8rem;
+	padding: 0.25rem 0.5rem 0;
+}
+
+.bgl_input.signature-pad > .helptext {
+	font-size: 0.75rem;
+	padding: 0.15rem 0.5rem 0.25rem;
+	margin: 0;
+	line-height: 1.4;
+}
+
 .bgl_input.signature-pad .canvas[disabled] {
 	background: var(--input-disabled-bg);
 	border: 1px solid var(--bgl-gray);

package/src/components/layout/AppContent.vue

@@ -5,7 +5,7 @@ import { inject, computed } from 'vue'
 interface Props {
 	title?: string
 	showMenuButton?: boolean
-	backTo?: string
+	backTo?: string | Record<string, any>
 	border?: boolean
 }
 

package/src/components/layout/TabsNav.vue

@@ -22,6 +22,7 @@ const props = defineProps<{
 	fullWidthMobile?: boolean
 	alignTxt?: 'center' | 'start' | 'end'
 	alignTxtMobile?: 'center' | 'start' | 'end'
+	outline?: boolean
 }>()
 
 const emit = defineEmits(['update:modelValue'])
@@ -34,21 +35,40 @@ currentTab.value
 const tabsWrap = ref<HTMLElement | undefined>(undefined)
 const tabEls = ref<HTMLElement[]>([])
 
+let resizeObserver: ResizeObserver | undefined
+
+/** Position relative to tabs wrap content box (works after breakpoint / font / scroll changes). */
+function measureActiveTabIndicator(wrap: HTMLElement, activeTab: HTMLElement) {
+	const wrapRect = wrap.getBoundingClientRect()
+	const tabRect = activeTab.getBoundingClientRect()
+	const left = tabRect.left - wrapRect.left + wrap.scrollLeft
+	const width = tabRect.width
+	if (width > 0) {
+		wrap.style.setProperty('--indicator-left', `${left}px`)
+		wrap.style.setProperty('--indicator-width', `${width}px`)
+		wrap.style.setProperty('--indicator-opacity', '1')
+	}
+}
+
 function updateIndicator() {
 	nextTick(() => {
-		if (!tabsWrap.value) { return }
-		const activeTab = tabEls.value.find(tab => tab.classList.contains('active'))
-		if (activeTab) {
-			// Wait a bit more to ensure CSS is fully loaded and elements are properly sized
-			setTimeout(() => {
-				const { offsetLeft, offsetWidth } = activeTab
-				if (offsetLeft >= 0 && offsetWidth > 0) { // Ensure valid measurements
-					tabsWrap.value?.style.setProperty('--indicator-left', `${offsetLeft}px`)
-					tabsWrap.value?.style.setProperty('--indicator-width', `${offsetWidth}px`)
-					tabsWrap.value?.style.setProperty('--indicator-opacity', '1')
-				}
-			}, 10)
+		const wrap = tabsWrap.value
+		if (!wrap) { return }
+
+		const apply = () => {
+			tabEls.value = Array.from(wrap.querySelectorAll<HTMLElement>('.bgl_tab'))
+			const activeTab = tabEls.value.find(tab => tab.classList.contains('active'))
+			if (!activeTab) {
+				wrap.style.setProperty('--indicator-opacity', '0')
+				return
+			}
+			measureActiveTabIndicator(wrap, activeTab)
 		}
+
+		// Double rAF: layout + media-query / font metrics often settle after one frame (e.g. mobile ↔ desktop).
+		requestAnimationFrame(() => {
+			requestAnimationFrame(apply)
+		})
 	})
 }
 
@@ -80,32 +100,51 @@ watch(
 onMounted(() => {
 	tabEls.value = Array.from(tabsWrap.value?.querySelectorAll('.bgl_tab') || [])
 
-	// Wait for the next frame to ensure all CSS and layout calculations are done
 	requestAnimationFrame(() => {
 		updateIndicator()
 	})
 
 	window.addEventListener('resize', updateIndicator)
+	tabsWrap.value?.addEventListener('scroll', updateIndicator, { passive: true })
+
+	if (typeof ResizeObserver !== 'undefined' && tabsWrap.value) {
+		resizeObserver = new ResizeObserver(() => {
+			updateIndicator()
+		})
+		resizeObserver.observe(tabsWrap.value)
+	}
+
+	if (typeof window !== 'undefined' && window.visualViewport) {
+		// Mobile browser chrome / zoom — window "resize" alone can miss this.
+		window.visualViewport.addEventListener('resize', updateIndicator)
+	}
 })
 
 watch(
-	() => tabEls.value,
+	() => props.tabs,
 	() => {
 		nextTick(() => { updateIndicator() })
 	},
 	{ deep: true }
 )
+
 onBeforeUnmount(() => {
 	window.removeEventListener('resize', updateIndicator)
+	tabsWrap.value?.removeEventListener('scroll', updateIndicator)
+	resizeObserver?.disconnect()
+	resizeObserver = undefined
+	if (typeof window !== 'undefined' && window.visualViewport) {
+		window.visualViewport.removeEventListener('resize', updateIndicator)
+	}
 })
 </script>
 
 <template>
-<div ref="tabsWrap" class="grid auto-flow-columns relative fit-content bgl_tabs_wrap overflow-hidden" :class="{ 'bgl_flat-tabs': flat, 'bgl_vertical-tabs': vertical }">
+<div ref="tabsWrap" class="grid auto-flow-columns relative fit-content bgl_tabs_wrap overflow-hidden" :class="{ 'bgl_flat-tabs': flat, 'bgl_vertical-tabs': vertical, 'outline': outline }">
 	<slot name="tabs" v-bind="{ selectTab, isActive, tabLabel, tabs: tabEls }">
 		<button v-for="(tab, i) in props.tabs" :key="i" type="button" :class="[
 			{ active: isActive(tab) },
-			{
+			{	
 				'bgl_tab-thin': thin,
 				'bgl_tab-xs': size === 'xs' || size === 'extra-small',
 				'bgl_tab-s': size === 's' || size === 'small',

package/src/dialog/Dialog.vue

@@ -399,12 +399,18 @@ dialog.dialog-right[style*="--dialog-width: 100%"] {
 	width: calc(100vw - 2rem);
 }
 
+dialog.dialog-left .grid-dialog,
+	dialog.dialog-right .grid-dialog {
+		height: 100%
+	}
+
 /* Mobile adjustments */
 @media screen and (max-width: 910px) {
 
 	dialog.dialog-left .grid-dialog,
 	dialog.dialog-right .grid-dialog {
 		max-height: 100vh;
+		height: unset !important;
 	}
 
 	dialog.dialog-left,

package/src/form-flow/FormFlow.vue

@@ -11,6 +11,7 @@ import NumberInput from '../components/form/inputs/NumberInput.vue'
 import PasswordInput from '../components/form/inputs/PasswordInput.vue'
 import RadioGroup from '../components/form/inputs/RadioGroup.vue'
 import RichText from '../components/form/inputs/RichText/index.vue'
+import SelectBtn from '../components/form/inputs/SelectBtn.vue'
 import SelectInput from '../components/form/inputs/SelectInput.vue'
 import TelInput from '../components/form/inputs/TelInput.vue'
 import TextInput from '../components/form/inputs/TextInput.vue'
@@ -194,7 +195,13 @@ function generateLabel(key: string, field: FieldBuilder): string {
 		.join(' ')
 }
 
-function getFieldComponent(type: string) {
+function getFieldComponent(fieldOrType: FieldBuilder | string) {
+	// display: 'btn' on select/multiselect renders as SelectBtn
+	if (typeof fieldOrType !== 'string' && (fieldOrType._type === 'select' || fieldOrType._type === 'multiselect') && fieldOrType._config.display === 'btn') {
+		return SelectBtn
+	}
+
+	const type = typeof fieldOrType === 'string' ? fieldOrType : fieldOrType._type
 	const componentMap: Record<string, any> = {
 		text: TextInput,
 		email: EmailInput,
@@ -435,7 +442,7 @@ defineExpose({
 					</template>
 
 					<!-- Default field rendering -->
-					<component :is="getFieldComponent(field._type)" v-else v-bind="getFieldProps(field, key)" />
+					<component :is="getFieldComponent(field)" v-else v-bind="getFieldProps(field, key)" />
 				</slot>
 			</div>
 

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

@@ -326,8 +326,8 @@ export const $ = {
 
 	select<T extends string = string>(
 		optionsOrLabel: SelectOptions<T> | string,
-		labelOrOptionsOrConfig?: string | SelectOptions<T> | (BaseFieldConfig & { searchable?: boolean }),
-		config?: BaseFieldConfig & { searchable?: boolean }
+		labelOrOptionsOrConfig?: string | SelectOptions<T> | (BaseFieldConfig & { searchable?: boolean, display?: 'btn', thin?: boolean, outline?: boolean }),
+		config?: BaseFieldConfig & { searchable?: boolean, display?: 'btn', thin?: boolean, outline?: boolean }
 	): FieldBuilder<T> {
 		// Label-first: $.select('Country', ['USA', 'Canada'])
 		if (typeof optionsOrLabel === 'string') {
@@ -341,8 +341,8 @@ export const $ = {
 
 	multiselect<T extends string = string>(
 		optionsOrLabel: SelectOptions<T> | string,
-		labelOrOptionsOrConfig?: string | SelectOptions<T> | (BaseFieldConfig & { searchable?: boolean }),
-		config?: BaseFieldConfig & { searchable?: boolean }
+		labelOrOptionsOrConfig?: string | SelectOptions<T> | (BaseFieldConfig & { searchable?: boolean, display?: 'btn', thin?: boolean, outline?: boolean }),
+		config?: BaseFieldConfig & { searchable?: boolean, display?: 'btn', thin?: boolean, outline?: boolean }
 	): FieldBuilder<T[]> {
 		// Label-first: $.multiselect('Tags', ['tech', 'news'])
 		if (typeof optionsOrLabel === 'string') {