@bagelink/vue 1.4.188 → 1.5.5

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

@@ -50,14 +50,9 @@ function isSelected(value: string | number) {
 <template>
 	<div class="flex flex-wrap gap-05 SelectBtn">
 		<Btn
-			v-for="option in options"
-			:key="option.value"
-			:thin="thin"
-			:outline="outline"
-			:class="isSelected(option.value) ? 'primary' : 'bg-transparent color-black'"
-			type="button"
-			class="border px-075 radius-2"
-			@click="toggleOption(option.value)"
+			v-for="option in options" :key="option.value" :thin="thin" :outline="outline"
+			:class="isSelected(option.value) ? 'primary' : 'bg-transparent'" type="button"
+			class="border px-075 radius-2" @click="toggleOption(option.value)"
 		>
 			<Icon v-if="option.icon" :name="option.icon" weight="300" />
 			<p>{{ option.label }}</p>

package/src/components/layout/AppSidebar.vue

@@ -76,31 +76,39 @@ const sidebarStyles = computed(() => {
 </script>
 
 <template>
-	<aside class="app-sidebar transition-400 fixed start top bottom h-100vh z-99" :class="{
-		'sidebar-mobile-open': menuState.isMobile.value && menuState.isOpen.value,
-		'sidebar-mobile-closed':
-			menuState.isMobile.value && !menuState.isOpen.value,
-		'transitioning': isTransitioning,
-		'p-05': props.card,
-		'sidebar-collapsed': !menuState.isMobile.value && !menuState.isOpen.value,
-	}" :style="sidebarStyles">
-		<div :style="{
-			backgroundColor: props.bgColor,
-			color: props.textColor,
-			...(props.card && { borderRadius: 'var(--card-border-radius)' }),
-		}" :class="{
+	<aside
+		class="app-sidebar transition-400 fixed start top bottom h-100vh z-99" :class="{
+			'sidebar-mobile-open': menuState.isMobile.value && menuState.isOpen.value,
+			'sidebar-mobile-closed':
+				menuState.isMobile.value && !menuState.isOpen.value,
+			'transitioning': isTransitioning,
+			'p-05': props.card,
+			'sidebar-collapsed': !menuState.isMobile.value && !menuState.isOpen.value,
+		}" :style="sidebarStyles"
+	>
+		<div
+			:style="{
+				backgroundColor: props.bgColor,
+				color: props.textColor,
+				...(props.card && { borderRadius: 'var(--card-border-radius)' }),
+			}" :class="{
 				'card cardWrapSide': props.card,
 				'ps-05': !menuState.isOpen.value,
 				'scrollbar-gutter-both': menuState.isOpen.value,
 				'aside_frame': props.frame,
-			}" class="overflow-hidden flex column flex-stretch gap-1 w100p pt-1 pb-05 h-100p">
+			}" class="overflow-hidden flex column flex-stretch gap-1 w100p pt-1 pb-05 h-100p"
+		>
 			<!-- Logo/Brand -->
-			<router-link to="/" class="decoration-none flex px-05" :class="{
-				'gap-05': menuState.isOpen.value,
-				'gap-0': !menuState.isOpen.value,
-			}">
-				<img v-if="props.logo" :src="props.logo" :alt="props.logoAlt" class="contain"
-					:style="{ height: props.logoHeight }">
+			<router-link
+				to="/" class="decoration-none flex px-05" :class="{
+					'gap-05': menuState.isOpen.value,
+					'gap-0': !menuState.isOpen.value,
+				}"
+			>
+				<img
+					v-if="props.logo" :src="props.logo" :alt="props.logoAlt" class="contain"
+					:style="{ height: props.logoHeight }"
+				>
 				<span class="nav-text">
 					{{ props.name }}
 				</span>
@@ -108,15 +116,17 @@ const sidebarStyles = computed(() => {
 
 			<!-- Navigation Links -->
 			<nav class="sidebar-nav flex column flex-stretch gap-025 align-items-start scrollbar-gutter-stable">
-				<Btn v-for="link in props.navLinks" :key="link.to" :title="!menuState.isOpen.value && !menuState.isMobile.value
-					? link.label
-					: ''
+				<Btn
+					v-for="link in props.navLinks" :key="link.to" :title="!menuState.isOpen.value && !menuState.isMobile.value
+						? link.label
+						: ''
 					" fullWidth alignTxt="start" class="flex-shrink-0 px-1" :class="{ 'nav-btn-active': route.path === link.to }"
 					:style="{
 						backgroundColor:
 							route.path === link.to ? props.activeColor : props.bgColor,
 						color: route.path === link.to ? 'white' : props.textColor,
-					}" :to="link.to || '/'" @click="link.action">
+					}" :to="link.to || '/'" @click="link.action"
+				>
 					<Icon :name="link.icon" size="1.2" />
 					<span class="nav-text">
 						{{ link.label }}
@@ -125,12 +135,15 @@ const sidebarStyles = computed(() => {
 			</nav>
 			<!-- Footer -->
 			<div
-				class="sidebar-footer flex column flex-stretch gap-025 align-items-start mt-auto scrollbar-gutter-stable">
+				class="sidebar-footer flex column flex-stretch gap-025 align-items-start mt-auto scrollbar-gutter-stable"
+			>
 				<!-- Footer Links -->
-				<Btn v-for="link in props.footerLinks" :key="link.to || link.label" :title="!menuState.isOpen.value && !menuState.isMobile.value
-					? link.label
-					: ''
-					" alignTxt="start" fullWidth flat :icon="link.icon" class="flex-shrink-0 px-1" :to="link.to" @click="link.action">
+				<Btn
+					v-for="link in props.footerLinks" :key="link.to || link.label" :title="!menuState.isOpen.value && !menuState.isMobile.value
+						? link.label
+						: ''
+					" alignTxt="start" fullWidth flat :icon="link.icon" class="flex-shrink-0 px-1" :to="link.to" @click="link.action"
+				>
 					<span class="nav-text">
 						{{ link.label }}
 					</span>

package/src/styles/layout.css

@@ -741,8 +741,8 @@
     top: 10rem;
 }
 
-.top-50p {
-    top: 50p;
+.top-50p{
+    top: 50%;
 }
 
 .-top-025 {
@@ -2072,6 +2072,86 @@
     margin-inline-end: auto;
     width: 98%;
 }
+.w1,
+.w1px,
+.w-1px,
+.max-w1px,
+.w-max-1px,
+.w-max-1px {
+    max-width: 1px;
+}
+
+.w2,
+.w2px,
+.w-2px,
+.max-w2px,
+.w-max-2px,
+.w-max-2px {
+    max-width: 2px;
+}
+
+.w3,
+.w3px,
+.w-3px,
+.max-w3px,
+.w-max-3px,
+.w-max-3px {
+    max-width: 3px;
+}
+
+.w4,
+.w4px,
+.w-4px,
+.max-w4px,
+.w-max-4px,
+.w-max-4px {
+    max-width: 4px;
+}
+
+.w5,
+.w5px,
+.w-5px,
+.max-w5px,
+.w-max-5px,
+.w-max-5px {
+    max-width: 5px;
+}
+
+.w6,
+.w6px,
+.w-6px,
+.max-w6px,
+.w-max-6px,
+.w-max-6px {
+    max-width: 6px;
+}
+
+.w7,
+.w7px,
+.w-7px,
+.max-w7px,
+.w-max-7px,
+.w-max-7px {
+    max-width: 7px;
+}
+
+.w8,
+.w8px,
+.w-8px,
+.max-w8px,
+.w-max-8px,
+.w-max-8px {
+    max-width: 8px;
+}
+
+.w9,
+.w9px,
+.w-9px,
+.max-w9px,
+.w-max-9px,
+.w-max-9px {
+    max-width: 9px;
+}
 
 .w10,
 .w10px,

package/src/styles/mobilLayout.css

@@ -308,6 +308,12 @@
         width: 100%;
     }
 
+    .m_w-100i,
+    .m_w-100pi,
+    .m_w100pi .m_width-100i {
+        width: 100% !important;
+    }
+
     .m_min-w-100p,
     .m_w-min-100p,
     .m_min-w100p {
@@ -1289,6 +1295,90 @@
         width: 98%;
     }
 
+
+
+    .m_w1,
+    .m_w1px,
+    .m_w-1px,
+    .m_max-w1px,
+    .m_w-max-1px,
+    .m_w-max-1px {
+        max-width: 1px;
+    }
+
+    .m_w2,
+    .m_w2px,
+    .m_w-2px,
+    .m_max-w2px,
+    .m_w-max-2px,
+    .m_w-max-2px {
+        max-width: 2px;
+    }
+
+    .m_w3,
+    .m_w3px,
+    .m_w-3px,
+    .m_max-w3px,
+    .m_w-max-3px,
+    .m_w-max-3px {
+        max-width: 3px;
+    }
+
+    .m_w4,
+    .m_w4px,
+    .m_w-4px,
+    .m_max-w4px,
+    .m_w-max-4px,
+    .m_w-max-4px {
+        max-width: 4px;
+    }
+
+    .m_w5,
+    .m_w5px,
+    .m_w-5px,
+    .m_max-w5px,
+    .m_w-max-5px,
+    .m_w-max-5px {
+        max-width: 5px;
+    }
+
+    .m_w6,
+    .m_w6px,
+    .m_w-6px,
+    .m_max-w6px,
+    .m_w-max-6px,
+    .m_w-max-6px {
+        max-width: 6px;
+    }
+
+    .m_w7,
+    .m_w7px,
+    .m_w-7px,
+    .m_max-w7px,
+    .m_w-max-7px,
+    .m_w-max-7px {
+        max-width: 7px;
+    }
+
+    .m_w8,
+    .m_w8px,
+    .m_w-8px,
+    .m_max-w8px,
+    .m_w-max-8px,
+    .m_w-max-8px {
+        max-width: 8px;
+    }
+
+    .m_w9,
+    .m_w9px,
+    .m_w-9px,
+    .m_max-w9px,
+    .m_w-max-9px,
+    .m_w-max-9px {
+        max-width: 9px;
+    }
+
+
     .m_w10,
     .m_w10px,
     .m_w-10px,
@@ -7424,7 +7514,7 @@
     }
 
     .m_top-50p {
-        top: 50p;
+        top: 50%;
     }
 
     .m_bottom,

package/src/utils/BagelFormUtils.ts

@@ -67,6 +67,25 @@ export interface NumFieldOptions<T, K extends Path<T>> extends InputOptions<T, K
 
 export interface RichTextOptions<T, P extends Path<T>> extends InputOptions<T, P> {
 	height?: number | string
+	basic?: boolean
+	simple?: boolean
+	debug?: boolean
+	// Manual hide options
+	hideToolbar?: boolean
+	hideInlineToolbar?: boolean
+	hideImages?: boolean
+	hideVideos?: boolean
+	hideEmbed?: boolean
+	hideTables?: boolean
+	hideAlignment?: boolean
+	hideDirections?: boolean
+	hideH5H6?: boolean
+	// Simple array-based hide option
+	hide?: string[]
+	// Control autofocus behavior
+	autofocus?: boolean
+	// Text color
+	textColor?: string
 }
 
 export interface TelInputOptions<T, P extends Path<T>> extends InputOptions<T, P> {
@@ -101,11 +120,29 @@ export function richText<
 		required: options?.required,
 		id,
 		label,
+		helptext: options?.helpText,
+		disabled: options?.disabled,
+		defaultValue: options?.defaultValue,
 		vIf: options?.vIf,
 		transform: options?.transform,
 		placeholder: options?.placeholder,
 		attrs: {
 			height: options?.height,
+			basic: options?.basic,
+			simple: options?.simple,
+			debug: options?.debug,
+			hideToolbar: options?.hideToolbar,
+			hideInlineToolbar: options?.hideInlineToolbar,
+			hideImages: options?.hideImages,
+			hideVideos: options?.hideVideos,
+			hideEmbed: options?.hideEmbed,
+			hideTables: options?.hideTables,
+			hideAlignment: options?.hideAlignment,
+			hideDirections: options?.hideDirections,
+			hideH5H6: options?.hideH5H6,
+			hide: options?.hide,
+			autofocus: options?.autofocus,
+			textColor: options?.textColor,
 			autocomplete: options?.autocomplete,
 		},
 	}
@@ -601,6 +638,12 @@ export function createSchema<T, PO extends PathsOptions = DefaultPathsOptions>()
 			label?: string,
 			options?: { [key: string]: any }
 		) => colorField<T, P, PO>(id, label, options),
+
+		richText: <P extends Path<T, PO>>(
+			id?: P,
+			label?: string,
+			options?: RichTextOptions<T, P>
+		) => richText<T, P, PO>(id, label, options),
 	}
 }
 

package/src/utils/useSearch.ts

@@ -129,6 +129,7 @@ export interface SearchResult<T> {
 	hasResults: ComputedRef<boolean>
 	isSearching: ComputedRef<boolean>
 	isLoading: ComputedRef<boolean> // New property to track server-side loading state
+	searchTerm?: import('vue').Ref<string> // Optional searchTerm ref for simplified usage
 }
 
 /**
@@ -349,12 +350,59 @@ export function searchItems<T>(params: SearchItemParams<T>): T[] {
 /**
  * Vue composable for searching items with reactive results
  * Supports both client-side filtering and server-side search
- * @param params Search parameters
+ *
+ * Usage 1 - Simplified: Pass items directly and get searchTerm ref back
+ * ```ts
+ * const { results, searchTerm } = useSearch(itemList)
+ * ```
+ *
+ * Usage 2 - Advanced: Pass full params object with custom search term
+ * ```ts
+ * const searchTerm = ref('')
+ * const { results } = useSearch({ searchTerm, items: itemList, keysToSearch: ['name'] })
+ * ```
+ *
+ * @param paramsOrItems Search parameters object or array of items for simplified usage
+ * @param options Optional additional search parameters (only used with simplified usage)
  * @returns Reactive search results and metadata
  */
+export function useSearch<T>(
+	items: MaybeRefOrGetter<T[]>,
+	options?: Omit<SearchItemParams<T>, 'items' | 'searchTerm'>
+): SearchResult<T> & { searchTerm: import('vue').Ref<string> }
 export function useSearch<T>(
 	params: SearchItemParams<T>
+): SearchResult<T>
+export function useSearch<T>(
+	paramsOrItems: SearchItemParams<T> | MaybeRefOrGetter<T[]>,
+	options?: Omit<SearchItemParams<T>, 'items' | 'searchTerm'>
 ): SearchResult<T> {
+	// Normalize inputs - detect if first argument is items array or params object
+	let params: SearchItemParams<T>
+	let ownedSearchTerm: import('vue').Ref<string> | undefined
+
+	// Check if first argument is an array or ref (simplified usage)
+	// If it's a params object, it won't have these characteristics
+	const isArray = Array.isArray(paramsOrItems)
+	const isFunction = typeof paramsOrItems === 'function'
+	const isObject = typeof paramsOrItems === 'object' && paramsOrItems !== null
+	const isRef = isObject && 'value' in paramsOrItems && !('items' in paramsOrItems)
+
+	const isSimplifiedUsage = isArray || isFunction || isRef
+
+	if (isSimplifiedUsage) {
+		// Simplified usage: useSearch(items, options)
+		ownedSearchTerm = ref('')
+		params = {
+			items: paramsOrItems as MaybeRefOrGetter<T[]>,
+			searchTerm: ownedSearchTerm,
+			...options
+		}
+	} else {
+		// Advanced usage: useSearch(params)
+		params = paramsOrItems as SearchItemParams<T>
+	}
+
 	const { searchTerm, minChars = 2, serverSearch, debounceMs = 300 } = params
 
 	// For tracking server-side loading state
@@ -425,11 +473,18 @@ export function useSearch<T>(
 		return !!term && typeof term === 'string' && term.length >= minChars
 	})
 
-	return {
+	const result: SearchResult<T> = {
 		results,
 		resultCount,
 		hasResults,
 		isSearching,
 		isLoading: computed(() => isLoading.value),
 	}
+
+	// Include searchTerm in result if we created it (simplified usage)
+	if (ownedSearchTerm) {
+		result.searchTerm = ownedSearchTerm
+	}
+
+	return result
 }