@bagelink/vue 1.4.105 → 1.4.109

package/src/styles/modal.css

@@ -1,134 +1,134 @@
 .bg-dark {
-	position: fixed;
-	top: 0;
-	right: 0;
-	left: 0;
-	bottom: 0;
-	background-color: var(--bgl-dark-bg);
-	pointer-events: none;
-	opacity: 0;
-	transition: all ease-in-out 0.3s;
-	max-height: 100vh;
-	overflow: scroll;
-	margin: 0 auto;
-	width: 100%;
-	display: grid;
-	align-items: center;
-	overflow-x: hidden;
+    position: fixed;
+    top: 0;
+    right: 0;
+    left: 0;
+    bottom: 0;
+    background-color: var(--bgl-dark-bg);
+    pointer-events: none;
+    opacity: 0;
+    transition: all ease-in-out 0.3s;
+    max-height: 100vh;
+    overflow: scroll;
+    margin: 0 auto;
+    width: 100%;
+    display: grid;
+    align-items: center;
+    overflow-x: hidden;
 }
 
 .bg-lignt {
-	background-color: var(--bgl-white);
+    background-color: var(--bgl-white);
 }
 
 .modal {
-	width: 96%;
-	max-width: 720px;
-	/* transform: scale(0.5); */
-	/* opacity: 0; */
-	transition: all ease-in-out 0.18s;
-	margin-left: auto;
-	margin-right: auto;
-	height: fit-content;
+    width: 96%;
+    max-width: 720px;
+    /* transform: scale(0.5); */
+    /* opacity: 0; */
+    transition: all ease-in-out 0.18s;
+    margin-left: auto;
+    margin-right: auto;
+    height: fit-content;
 }
 
 .is-active .modal {
-	animation: 200ms ease bgl-modal-animation;
+    animation: 200ms ease bgl-modal-animation;
 }
 
 @keyframes bgl-modal-animation {
-	from {
-		scale: 0.7;
-		transform: translateY(2rem);
-	}
+    from {
+        scale: 0.7;
+        transform: translateY(2rem);
+    }
 
-	to {
-		scale: 1;
-		transform: translateY(0);
-	}
+    to {
+        scale: 1;
+        transform: translateY(0);
+    }
 }
 
 .small-modal .modal {
-	max-width: 300px;
-	text-align: center;
+    max-width: 300px;
+    text-align: center;
 }
 
 .tool-bar {
-	margin: -1rem -1rem 1rem;
-	display: flex;
-	justify-content: space-between;
-	position: -webkit-sticky;
-	position: sticky;
-	padding-top: 0rem;
-	top: 0rem;
-	z-index: 3;
-	background: var(--bgl-popup-bg);
-	border-radius: var(--card-border-radius);
+    margin: -1rem -1rem 1rem;
+    display: flex;
+    justify-content: space-between;
+    position: -webkit-sticky;
+    position: sticky;
+    padding-top: 0rem;
+    top: 0rem;
+    z-index: 3;
+    background: var(--bgl-popup-bg);
+    /* border-radius: var(--card-border-radius); */
 }
 
 .modal-size {
-	cursor: pointer;
+    cursor: pointer;
 }
 
 .is-side .modal {
-	inset-inline-end: -1720px;
-	opacity: 1;
-	max-width: 600px;
-	width: 90%;
-	margin-top: 1rem;
-	margin-bottom: 1rem;
-	margin-inline-start: auto;
-	margin-inline-end: 20px;
-	min-height: calc(100vh - 40px);
-	transform: translateX(100%);
+    inset-inline-end: -1720px;
+    opacity: 1;
+    max-width: 600px;
+    width: 90%;
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+    margin-inline-start: auto;
+    margin-inline-end: 20px;
+    min-height: calc(100vh - 40px);
+    transform: translateX(100%);
 }
 
 .is-active .modal {
-	opacity: 1;
-	box-shadow: 6px 6px 20px 20px #0000001c;
+    opacity: 1;
+    box-shadow: 6px 6px 20px 20px #0000001c;
 }
 
 .bg-lignt .modal {
-	border: 1px solid var(--border-color);
+    border: 1px solid var(--border-color);
 }
 
 .bg-lignt.is-active .modal {
-	box-shadow: none;
+    box-shadow: none;
 }
 
 .is-active.is-side .modal {
-	inset-inline-end: 0px;
-	transform: translateX(0%);
+    inset-inline-end: 0px;
+    transform: translateX(0%);
 }
 
 .bg-dark.is-active {
-	opacity: 1;
-	pointer-events: all;
+    opacity: 1;
+    pointer-events: all;
 }
 
 body:has(.bg-dark.is-active) {
-	overflow: hidden;
+    overflow: hidden;
 }
 
 .is-side.bg-dark.is-active {
-	opacity: 1;
-	align-items: stretch;
+    opacity: 1;
+    align-items: stretch;
 }
 
 .is-side.is-active .modal {
-	pointer-events: all;
+    pointer-events: all;
 }
 
 @media screen and (max-width: 910px) {
-	.tool-bar {
-		margin: -1rem 0rem 1rem;
-		padding-bottom: 1rem;
-		align-items: center;
-	}
-
-	.is-active.is-side .modal {
-		margin-inline-end: 2%;
-		margin-inline-start: 2%;
-		width: 98%;
-	}
-}
+    .tool-bar {
+        margin: -1rem 0rem 1rem;
+        padding-bottom: 1rem;
+        align-items: center;
+    }
+
+    .is-active.is-side .modal {
+        margin-inline-end: 2%;
+        margin-inline-start: 2%;
+        width: 98%;
+    }
+}

package/src/types/BagelForm.ts

@@ -77,13 +77,13 @@ export interface ElementField<
 	T,
 	PO extends PathsOptions = DefaultPathsOptions,
 > {
-	$el: string
+	$el: any
 	id?: Path<T, PO> | string
 	class?: any
 	vIf?: any
 	style?: Record<string, any>
 	attrs?: Record<string, any>
-	onClick?: () => void
+	onClick?: (val?: any, rowData?: T) => void
 	transform?: (val?: any, rowData?: T) => any
 	children?: ElementField<T, PO>[]
 }

package/src/utils/BagelFormUtils.ts

@@ -8,6 +8,7 @@ export interface InputOptions<
 > extends Partial<BaseBagelField<T, P>> {
 	defaultValue?: string | number
 	autocomplete?: AutoFillField
+	helpText?: string
 }
 
 export interface DateOptions<T, K extends Path<T>> extends InputOptions<T, K> {

package/src/utils/elementUtils.ts

@@ -1,4 +1,6 @@
-import type { IconType, Option, Path, ElementField } from '@bagelink/vue'
+import type { ElementField, IconType, Option, Path } from '@bagelink/vue'
+import { Dropdown, ListItem } from '@bagelink/vue'
+import { markRaw } from 'vue'
 
 export type DefaultPathsOptions = Record<string, any>
 export type PathsOptions = Record<string, any>
@@ -30,7 +32,6 @@ export interface TxtElementOptions<
 	weight?: 'light' | 'normal' | 'medium' | 'semibold' | 'bold'
 	color?: string
 	align?: 'left' | 'center' | 'right' | 'justify'
-	transform?: (val?: any, rowData?: T) => any
 }
 
 export interface ImgElementOptions<
@@ -64,6 +65,7 @@ export interface ListItemElementOptions<
 	T = any,
 	PO extends PathsOptions = DefaultPathsOptions
 > extends Partial<BaseElementField<T, PO>> {
+	id?: Path<T, PO>
 	title?: string
 	subtitle?: string
 	icon?: IconType
@@ -373,8 +375,8 @@ export function img<
 		class: finalOptions.class,
 		vIf: finalOptions.vIf,
 		style: finalOptions.style,
+		transform: finalOptions.transform,
 		attrs: {
-			src: finalSrc || (finalOptions.src ?? '') || '',
 			alt: finalOptions.alt,
 			width: finalOptions.width,
 			height: finalOptions.height,
@@ -386,50 +388,68 @@ export function img<
 	}
 }
 
-// Dropdown element function following BagelForm pattern
-export function dropdownElement<
+export function dropdown<
 	T = any,
 	PO extends PathsOptions = DefaultPathsOptions
 >(
-	id?: Path<T, PO>,
-	options?: Option[] | (() => Option[]),
-	config?: DropdownElementOptions<T, PO>,
+	...args: Array<DropdownElementOptions<T, PO> | BaseElementField<T, PO>>
 ): BaseElementField<T, PO> {
+	let opts: DropdownElementOptions<T, PO> | undefined
+	let children: BaseElementField<T, PO>[] = []
+
+	if (args.length > 0) {
+		const firstArg = args[0] as DropdownElementOptions<T, PO> | BaseElementField<T, PO>
+		if (
+			typeof firstArg === 'object'
+			&& firstArg !== null
+			&& ('$el' in (firstArg as Record<string, unknown>))
+		) {
+			children = args as BaseElementField<T, PO>[]
+		} else {
+			opts = firstArg as DropdownElementOptions<T, PO>
+			children = args.slice(1) as BaseElementField<T, PO>[]
+		}
+	}
+
+	const attrs: Record<string, unknown> = {}
+	if (opts?.attrs) Object.assign(attrs, opts.attrs)
+	if (opts) {
+		if (opts.options != null) attrs.options = opts.options
+		if (opts.placeholder != null) attrs.placeholder = opts.placeholder
+		if (opts.searchable != null) attrs.searchable = opts.searchable
+		if (opts.multiselect != null) attrs.multiselect = opts.multiselect
+		if (opts.clearable != null) attrs.clearable = opts.clearable
+		if (opts.onSelect != null) attrs.onSelect = opts.onSelect
+		if (opts.onSearch != null) attrs.onSearch = opts.onSearch
+	}
+
 	return {
-		$el: 'dropdown',
-		id,
-		class: config?.class,
-		vIf: config?.vIf,
-		style: config?.style,
-		attrs: {
-			options: options || config?.options,
-			placeholder: config?.placeholder,
-			searchable: config?.searchable,
-			multiselect: config?.multiselect,
-			clearable: config?.clearable,
-			onSelect: config?.onSelect,
-			onSearch: config?.onSearch,
-		},
+		$el: markRaw(Dropdown),
+		class: opts?.class,
+		vIf: opts?.vIf,
+		style: opts?.style,
+		attrs,
+		children,
 	}
 }
 
 // ListItem element function following BagelForm pattern
-export function listItemElement<
+export function listItem<
 	T = any,
 	PO extends PathsOptions = DefaultPathsOptions
 >(
-	id?: Path<T, PO>,
 	title?: string,
 	options?: ListItemElementOptions<T, PO>,
 ): BaseElementField<T, PO> {
 	return {
-		$el: 'listItem',
-		id,
+		$el: markRaw(ListItem),
+		id: options?.id,
 		class: options?.class,
 		vIf: options?.vIf,
 		style: options?.style,
 		onClick: options?.onClick,
 		attrs: {
+			thin: true,
 			title: title ?? options?.title ?? '',
 			subtitle: options?.subtitle,
 			icon: options?.icon,
@@ -443,7 +463,7 @@ export function listItemElement<
 }
 
 // Container element function following BagelForm pattern
-export function containerElement<
+export function container<
 	T = any,
 	PO extends PathsOptions = DefaultPathsOptions
 >(
@@ -494,6 +514,7 @@ export function column<T = any, P extends Path<T, PO> = any, PO extends PathsOpt
 		class: options?.class ?? 'column-class',
 		vIf: options?.vIf,
 		style: options?.style,
+		transform: options?.transform,
 		attrs: {
 			...options?.attrs,
 			label: label ?? options?.attrs?.label ?? '',
@@ -510,9 +531,9 @@ export function useElements() {
 		iconBtn,
 		txt,
 		img,
-		dropdownElement,
-		listItemElement,
-		containerElement,
+		dropdown,
+		listItem,
+		container,
 		findElementById,
 		getBaseElementField,
 		col,