@bagelink/vue 1.4.81 → 1.4.87

package/src/types/BagelForm.ts

@@ -73,11 +73,25 @@ export type VNodeFn<T, P extends Path<T>> = (props: {
 	field: BaseBagelField<T, P>
 }) => VNode
 
+export interface ElementField<
+	T,
+	PO extends PathsOptions = DefaultPathsOptions,
+> {
+	$el: string
+	id?: Path<T, PO> | string
+	class?: any
+	vIf?: any
+	style?: Record<string, any>
+	attrs?: Record<string, any>
+	onClick?: () => void
+	children?: ElementField<T, PO>[]
+}
+
 export type SchemaChild<
 	T,
 	P extends Path<T, PO>,
 	PO extends PathsOptions = DefaultPathsOptions,
-> = Field<T, PO> | VNode | VNodeFn<T, P> | string
+> = Field<T, PO> | ElementField<T, PO> | VNode | VNodeFn<T, P> | string
 
 export interface BaseBagelField<
 	T,

package/src/types/index.ts

@@ -21,17 +21,52 @@ export type Tab = {
 	icon?: IconType
 } | string
 
-export type ThemeType = |
-	'light'
-	| 'white'
-	| 'red'
-	| 'gray'
-	| 'gray-light'
-	| 'black'
-	| 'green'
-	| 'yellow'
-	| 'primary'
-	| 'blue' // ! blue does nothing
+export type ThemeType =
+	| 'blue' | 'green' | 'red' | 'yellow' | 'purple' | 'brown' | 'orange' | 'turquoise' | 'gray' | 'black' | 'pink'
+	| 'primary' | 'white'
+	| 'blue-light' | 'green-light' | 'red-light' | 'yellow-light' | 'purple-light' | 'brown-light'
+	| 'orange-light' | 'turquoise-light' | 'pink-light' | 'gray-light' | 'primary-light'
+	| 'blue-tint' | 'red-tint' | 'primary-tint' | 'black-tint' | 'blue-dark'
+	| 'light'
+
+// Extended theme type with all percentage variations
+export type ExtendedThemeType =
+	// Base colors
+	| 'blue' | 'green' | 'red' | 'yellow' | 'purple' | 'brown' | 'orange' | 'turquoise' | 'gray' | 'black' | 'pink'
+	| 'primary' | 'white'
+	// Legacy light variants
+	| 'blue-light' | 'green-light' | 'red-light' | 'yellow-light' | 'purple-light' | 'brown-light'
+	| 'orange-light' | 'turquoise-light' | 'pink-light' | 'gray-light' | 'primary-light'
+	// Legacy tint variants  
+	| 'blue-tint' | 'red-tint' | 'primary-tint' | 'black-tint' | 'blue-dark' | 'light'
+	// 10% variants (lightest)
+	| 'blue-10' | 'green-10' | 'red-10' | 'yellow-10' | 'purple-10' | 'brown-10' | 'orange-10' | 'turquoise-10' | 'gray-10' | 'black-10' | 'pink-10'
+	// 20% variants
+	| 'blue-20' | 'green-20' | 'red-20' | 'yellow-20' | 'purple-20' | 'brown-20' | 'orange-20' | 'turquoise-20' | 'gray-20' | 'black-20' | 'pink-20'
+	// 30% variants
+	| 'blue-30' | 'green-30' | 'red-30' | 'yellow-30' | 'purple-30' | 'brown-30' | 'orange-30' | 'turquoise-30' | 'gray-30' | 'black-30' | 'pink-30'
+	// 40% variants
+	| 'blue-40' | 'green-40' | 'red-40' | 'yellow-40' | 'purple-40' | 'brown-40' | 'orange-40' | 'turquoise-40' | 'gray-40' | 'black-40' | 'pink-40'
+	// 50% variants
+	| 'blue-50' | 'green-50' | 'red-50' | 'yellow-50' | 'purple-50' | 'brown-50' | 'orange-50' | 'turquoise-50' | 'gray-50' | 'black-50' | 'pink-50'
+	// 60% variants
+	| 'blue-60' | 'green-60' | 'red-60' | 'yellow-60' | 'purple-60' | 'brown-60' | 'orange-60' | 'turquoise-60' | 'gray-60' | 'black-60' | 'pink-60'
+	// 70% variants
+	| 'blue-70' | 'green-70' | 'red-70' | 'yellow-70' | 'purple-70' | 'brown-70' | 'orange-70' | 'turquoise-70' | 'gray-70' | 'black-70' | 'pink-70'
+	// 80% variants
+	| 'blue-80' | 'green-80' | 'red-80' | 'yellow-80' | 'purple-80' | 'brown-80' | 'orange-80' | 'turquoise-80' | 'gray-80' | 'black-80' | 'pink-80'
+	// 90% variants
+	| 'blue-90' | 'green-90' | 'red-90' | 'yellow-90' | 'purple-90' | 'brown-90' | 'orange-90' | 'turquoise-90' | 'gray-90' | 'black-90' | 'pink-90'
+	// 100% variants (same as base)
+	| 'blue-100' | 'green-100' | 'red-100' | 'yellow-100' | 'purple-100' | 'brown-100' | 'orange-100' | 'turquoise-100' | 'gray-100' | 'black-100' | 'pink-100'
+	// 110% variants (darker)
+	| 'blue-110' | 'green-110' | 'red-110' | 'yellow-110' | 'purple-110' | 'brown-110' | 'orange-110' | 'turquoise-110' | 'gray-110' | 'black-110' | 'pink-110'
+	// 120% variants
+	| 'blue-120' | 'green-120' | 'red-120' | 'yellow-120' | 'purple-120' | 'brown-120' | 'orange-120' | 'turquoise-120' | 'gray-120' | 'black-120' | 'pink-120'
+	// 130% variants (darkest)
+	| 'blue-130' | 'green-130' | 'red-130' | 'yellow-130' | 'purple-130' | 'brown-130' | 'orange-130' | 'turquoise-130' | 'gray-130' | 'black-130' | 'pink-130'
+	// Status colors
+	| 'Error' | 'Paid' | 'Active'
 
 export type Option =
 	| string

package/src/utils/elementUtils.ts

@@ -1,28 +1,14 @@
-import type { BaseBagelField, IconType, Option, Path } from '@bagelink/vue'
+import type { IconType, Option, Path, ElementField } from '@bagelink/vue'
 
 export type DefaultPathsOptions = Record<string, any>
 export type PathsOptions = Record<string, any>
 
-export interface BaseElementField<
-	T,
-	P extends Path<T, PO>,
-	PO extends PathsOptions = DefaultPathsOptions
-> extends Partial<BaseBagelField<T, P, PO>> {
-	$el: string
-	id?: P
-	class?: string
-	vIf?: boolean | (() => boolean)
-	style?: Record<string, any>
-	attrs?: Record<string, any>
-	onClick?: () => void
-	children?: BaseElementField<T, any>[]
-}
+export type BaseElementField<T, PO extends PathsOptions = DefaultPathsOptions> = ElementField<T, PO>
 
 export interface BtnElementOptions<
 	T = any,
-	P extends Path<T, PO> = any,
 	PO extends PathsOptions = DefaultPathsOptions
-> extends Partial<BaseElementField<T, P, PO>> {
+> extends Partial<BaseElementField<T, PO>> {
 	text?: string
 	variant?: 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger'
 	size?: 'sm' | 'md' | 'lg'
@@ -36,9 +22,8 @@ export interface BtnElementOptions<
 
 export interface TxtElementOptions<
 	T = any,
-	P extends Path<T, PO> = any,
 	PO extends PathsOptions = DefaultPathsOptions
-> extends Partial<BaseElementField<T, P, PO>> {
+> extends Partial<BaseElementField<T, PO>> {
 	text?: string
 	tag?: 'p' | 'span' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'div'
 	size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'
@@ -49,9 +34,8 @@ export interface TxtElementOptions<
 
 export interface ImgElementOptions<
 	T = any,
-	P extends Path<T, PO> = any,
 	PO extends PathsOptions = DefaultPathsOptions
-> extends Partial<BaseElementField<T, P, PO>> {
+> extends Partial<BaseElementField<T, PO>> {
 	src?: string
 	alt?: string
 	width?: number | string
@@ -64,9 +48,8 @@ export interface ImgElementOptions<
 
 export interface DropdownElementOptions<
 	T = any,
-	P extends Path<T, PO> = any,
 	PO extends PathsOptions = DefaultPathsOptions
-> extends Partial<BaseElementField<T, P, PO>> {
+> extends Partial<BaseElementField<T, PO>> {
 	options?: Option[] | (() => Option[])
 	placeholder?: string
 	searchable?: boolean
@@ -78,9 +61,8 @@ export interface DropdownElementOptions<
 
 export interface ListItemElementOptions<
 	T = any,
-	P extends Path<T, PO> = any,
 	PO extends PathsOptions = DefaultPathsOptions
-> extends Partial<BaseElementField<T, P, PO>> {
+> extends Partial<BaseElementField<T, PO>> {
 	title?: string
 	subtitle?: string
 	icon?: IconType
@@ -94,24 +76,23 @@ export interface ListItemElementOptions<
 // Magical button overloads with schema support
 export function btn<
 	T = any,
-	P extends Path<T, PO> = any,
 	PO extends PathsOptions = DefaultPathsOptions
->(options: BtnElementOptions<T, P, PO>): BaseElementField<T, P, PO>
+>(options: BtnElementOptions<T, PO>): BaseElementField<T, PO>
 export function btn<
 	T = any,
 	P extends Path<T, PO> = any,
 	PO extends PathsOptions = DefaultPathsOptions
->(id: P): BaseElementField<T, P, PO>
+>(id: P): BaseElementField<T, PO>
 export function btn<
 	T = any,
 	P extends Path<T, PO> = any,
 	PO extends PathsOptions = DefaultPathsOptions
->(id: P, text: string): BaseElementField<T, P, PO>
+>(id: P, text: string): BaseElementField<T, PO>
 export function btn<
 	T = any,
 	P extends Path<T, PO> = any,
 	PO extends PathsOptions = DefaultPathsOptions
->(id: P, icon: IconType): BaseElementField<T, P, PO>
+>(id: P, icon: IconType): BaseElementField<T, PO>
 export function btn<
 	T = any,
 	P extends Path<T, PO> = any,
@@ -119,8 +100,8 @@ export function btn<
 >(
 	id: P,
 	text: string,
-	options: BtnElementOptions<T, P, PO>
-): BaseElementField<T, P, PO>
+	options: BtnElementOptions<T, PO>
+): BaseElementField<T, PO>
 export function btn<
 	T = any,
 	P extends Path<T, PO> = any,
@@ -128,8 +109,8 @@ export function btn<
 >(
 	id: P,
 	icon: IconType,
-	options: BtnElementOptions<T, P, PO>
-): BaseElementField<T, P, PO>
+	options: BtnElementOptions<T, PO>
+): BaseElementField<T, PO>
 export function btn<
 	T = any,
 	P extends Path<T, PO> = any,
@@ -137,28 +118,28 @@ export function btn<
 >(
 	id: P,
 	textOrIcon: string | IconType,
-	options: BtnElementOptions<T, P, PO>
-): BaseElementField<T, P, PO>
+	options: BtnElementOptions<T, PO>
+): BaseElementField<T, PO>
 export function btn<
 	T = any,
 	P extends Path<T, PO> = any,
 	PO extends PathsOptions = DefaultPathsOptions
 >(
-	idOrOptions?: P | BtnElementOptions<T, P, PO>,
+	idOrOptions?: P | BtnElementOptions<T, PO>,
 	textOrIcon?: string | IconType,
-	options?: BtnElementOptions<T, P, PO>,
-): BaseElementField<T, P, PO> {
+	options?: BtnElementOptions<T, PO>,
+): BaseElementField<T, PO> {
 	// Handle different overload patterns
-	let id: P | undefined
+	let id: Path<T, PO> | undefined
 	let text: string = ''
 	let icon: IconType | undefined
-	let finalOptions: BtnElementOptions<T, P, PO> = {}
+	let finalOptions: BtnElementOptions<T, PO> = {}
 
 	if (typeof idOrOptions === 'object' && idOrOptions !== null) {
 		// btn(options)
 		finalOptions = idOrOptions
 		const { id: optionId, text: optionText, icon: optionIcon } = finalOptions
-		id = optionId
+		id = optionId as Path<T, PO> | undefined
 		text = optionText ?? ''
 		icon = optionIcon
 	} else {
@@ -212,13 +193,12 @@ export function btn<
 
 export function getBaseElementField<
 	T = any,
-	P extends Path<T, PO> = any,
 	PO extends PathsOptions = DefaultPathsOptions
 >(
 	elementType: string,
-	id?: P,
-	options: Partial<BaseElementField<T, P, PO>> = {}
-): BaseElementField<T, P, PO> {
+	id?: Path<T, PO>,
+	options: Partial<BaseElementField<T, PO>> = {}
+): BaseElementField<T, PO> {
 	return {
 		$el: elementType,
 		id,
@@ -238,30 +218,29 @@ export function iconBtn<
 >(
 	id?: P,
 	icon?: IconType,
-	options?: BtnElementOptions<T, P, PO>,
-): BaseElementField<T, P, PO> {
+	options?: BtnElementOptions<T, PO>,
+): BaseElementField<T, PO> {
 	if (icon != null && id != null) {
 		return btn(id, icon, options || {})
 	}
-	return btn({ id, icon, ...options } as BtnElementOptions<T, P, PO>)
+	return btn({ id, icon, ...options } as BtnElementOptions<T, PO>)
 }
 
 // Magical text overloads with schema support
 export function txt<
 	T = any,
-	P extends Path<T, PO> = any,
 	PO extends PathsOptions = DefaultPathsOptions
->(options: TxtElementOptions<T, P, PO>): BaseElementField<T, P, PO>
+>(options: TxtElementOptions<T, PO>): BaseElementField<T, PO>
 export function txt<
 	T = any,
 	P extends Path<T, PO> = any,
 	PO extends PathsOptions = DefaultPathsOptions
->(id: P): BaseElementField<T, P, PO>
+>(id: P): BaseElementField<T, PO>
 export function txt<
 	T = any,
 	P extends Path<T, PO> = any,
 	PO extends PathsOptions = DefaultPathsOptions
->(id: P, text: string): BaseElementField<T, P, PO>
+>(id: P, text: string): BaseElementField<T, PO>
 export function txt<
 	T = any,
 	P extends Path<T, PO> = any,
@@ -270,30 +249,30 @@ export function txt<
 	id: P,
 	text: string,
 	tag: 'p' | 'span' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'div'
-): BaseElementField<T, P, PO>
+): BaseElementField<T, PO>
 export function txt<
 	T = any,
 	P extends Path<T, PO> = any,
 	PO extends PathsOptions = DefaultPathsOptions
->(id: P, text: string, options: TxtElementOptions<T, P, PO>): BaseElementField<T, P, PO>
+>(id: P, text: string, options: TxtElementOptions<T, PO>): BaseElementField<T, PO>
 export function txt<
 	T = any,
 	P extends Path<T, PO> = any,
 	PO extends PathsOptions = DefaultPathsOptions
 >(
-	idOrOptions?: P | TxtElementOptions<T, P, PO>,
+	idOrOptions?: P | TxtElementOptions<T, PO>,
 	text?: string,
-	tagOrOptions?: string | TxtElementOptions<T, P, PO>,
-): BaseElementField<T, P, PO> {
+	tagOrOptions?: string | TxtElementOptions<T, PO>,
+): BaseElementField<T, PO> {
 	// Handle different overload patterns
-	let id: P | undefined
-	let finalOptions: TxtElementOptions<T, P, PO> = {}
+	let id: Path<T, PO> | undefined
+	let finalOptions: TxtElementOptions<T, PO> = {}
 
 	if (typeof idOrOptions === 'object' && idOrOptions !== null) {
 		// txt(options)
 		finalOptions = idOrOptions
 		const { id: optionId } = finalOptions
-		id = optionId
+		id = optionId as Path<T, PO> | undefined
 	} else {
 		// txt(id, ...) patterns
 		id = idOrOptions
@@ -329,48 +308,47 @@ export function txt<
 // Magical image overloads with schema support
 export function img<
 	T = any,
-	P extends Path<T, PO> = any,
 	PO extends PathsOptions = DefaultPathsOptions
->(options: ImgElementOptions<T, P, PO>): BaseElementField<T, P, PO>
+>(options: ImgElementOptions<T, PO>): BaseElementField<T, PO>
 export function img<
 	T = any,
 	P extends Path<T, PO> = any,
 	PO extends PathsOptions = DefaultPathsOptions
->(id: P): BaseElementField<T, P, PO>
+>(id: P): BaseElementField<T, PO>
 export function img<
 	T = any,
 	P extends Path<T, PO> = any,
 	PO extends PathsOptions = DefaultPathsOptions
->(id: P, src: string): BaseElementField<T, P, PO>
+>(id: P, src: string): BaseElementField<T, PO>
 export function img<
 	T = any,
 	P extends Path<T, PO> = any,
 	PO extends PathsOptions = DefaultPathsOptions
->(id: P, src: string, alt: string): BaseElementField<T, P, PO>
+>(id: P, src: string, alt: string): BaseElementField<T, PO>
 export function img<
 	T = any,
 	P extends Path<T, PO> = any,
 	PO extends PathsOptions = DefaultPathsOptions
->(id: P, src: string, options: ImgElementOptions<T, P, PO>): BaseElementField<T, P, PO>
+>(id: P, src: string, options: ImgElementOptions<T, PO>): BaseElementField<T, PO>
 export function img<
 	T = any,
 	P extends Path<T, PO> = any,
 	PO extends PathsOptions = DefaultPathsOptions
 >(
-	idOrOptions?: P | ImgElementOptions<T, P, PO>,
+	idOrOptions?: P | ImgElementOptions<T, PO>,
 	src?: string,
-	altOrOptions?: string | ImgElementOptions<T, P, PO>,
-): BaseElementField<T, P, PO> {
+	altOrOptions?: string | ImgElementOptions<T, PO>,
+): BaseElementField<T, PO> {
 	// Handle different overload patterns
-	let id: P | undefined
+	let id: Path<T, PO> | undefined
 	let finalSrc: string = ''
-	let finalOptions: ImgElementOptions<T, P, PO> = {}
+	let finalOptions: ImgElementOptions<T, PO> = {}
 
 	if (typeof idOrOptions === 'object' && idOrOptions !== null) {
 		// img(options)
 		finalOptions = idOrOptions
 		const { id: optionId, src: optionSrc } = finalOptions
-		id = optionId
+		id = optionId as Path<T, PO> | undefined
 		finalSrc = optionSrc ?? ''
 	} else {
 		// img(id, ...) patterns
@@ -409,13 +387,12 @@ export function img<
 // Dropdown element function following BagelForm pattern
 export function dropdownElement<
 	T = any,
-	P extends Path<T, PO> = any,
 	PO extends PathsOptions = DefaultPathsOptions
 >(
-	id?: P,
+	id?: Path<T, PO>,
 	options?: Option[] | (() => Option[]),
-	config?: DropdownElementOptions<T, P, PO>,
-): BaseElementField<T, P, PO> {
+	config?: DropdownElementOptions<T, PO>,
+): BaseElementField<T, PO> {
 	return {
 		$el: 'dropdown',
 		id,
@@ -437,13 +414,12 @@ export function dropdownElement<
 // ListItem element function following BagelForm pattern
 export function listItemElement<
 	T = any,
-	P extends Path<T, PO> = any,
 	PO extends PathsOptions = DefaultPathsOptions
 >(
-	id?: P,
+	id?: Path<T, PO>,
 	title?: string,
-	options?: ListItemElementOptions<T, P, PO>,
-): BaseElementField<T, P, PO> {
+	options?: ListItemElementOptions<T, PO>,
+): BaseElementField<T, PO> {
 	return {
 		$el: 'listItem',
 		id,
@@ -467,13 +443,12 @@ export function listItemElement<
 // Container element function following BagelForm pattern
 export function containerElement<
 	T = any,
-	P extends Path<T, PO> = any,
 	PO extends PathsOptions = DefaultPathsOptions
 >(
-	id?: P,
+	id?: Path<T, PO>,
 	children?: BaseElementField<T, any>[],
-	options?: Partial<BaseElementField<T, P, PO>>,
-): BaseElementField<T, P, PO> {
+	options?: Partial<BaseElementField<T, PO>>,
+): BaseElementField<T, PO> {
 	return {
 		$el: 'div',
 		id,
@@ -501,9 +476,9 @@ export function findElementById<T>(
 
 export function column<T = any, P extends Path<T, PO> = any, PO extends PathsOptions = DefaultPathsOptions>(
 	id?: P,
-	labelOrOptions?: string | Partial<BaseElementField<T, P, PO>>,
-	options?: Partial<BaseElementField<T, P, PO>>,
-): BaseElementField<T, P, PO> {
+	labelOrOptions?: string | Partial<BaseElementField<T, PO>>,
+	options?: Partial<BaseElementField<T, PO>>,
+): BaseElementField<T, PO> {
 	let label: string | undefined
 	if (typeof labelOrOptions === 'string') {
 		label = labelOrOptions