@bagelink/vue 1.4.85 → 1.4.89

package/src/styles/buttons.css

@@ -1,144 +1,140 @@
 .bgl_btn,
 .bgl_flatBtn,
 .bgl_btn-icon {
-	font-family: inherit;
-	white-space: nowrap;
-	cursor: pointer;
-	box-sizing: border-box;
-	user-select: none;
-	border: none;
-	transition: var(--bgl-transition);
-	border-radius: var(--btn-border-radius);
-	line-height: var(--btn-height);
-	font-size: var(--input-font-size);
-	display: inline-block;
-	height: var(--btn-height);
-	padding: 0;
+    font-family: inherit;
+    white-space: nowrap;
+    cursor: pointer;
+    box-sizing: border-box;
+    user-select: none;
+    border: none;
+    transition: var(--bgl-transition);
+    border-radius: var(--btn-border-radius);
+    line-height: var(--btn-height);
+    font-size: var(--input-font-size);
+    display: inline-block;
+    height: var(--btn-height);
+    padding: 0;
 }
 
 .btn-close {
-	margin-top: -20px;
-	margin-inline-end: -20px;
-	margin-inline-start: auto;
-	margin-bottom: 15px;
-	transition: var(--bgl-transition);
-	height: 30px;
-	width: 30px;
-	opacity: 0.6;
-	cursor: pointer;
-	border-radius: 100%;
-	outline: 2px solid transparent;
-	display: flex;
-	align-items: center;
-	justify-content: center;
+    margin-top: -20px;
+    margin-inline-end: -20px;
+    margin-inline-start: auto;
+    margin-bottom: 15px;
+    transition: var(--bgl-transition);
+    height: 30px;
+    width: 30px;
+    opacity: 0.6;
+    cursor: pointer;
+    border-radius: 100%;
+    outline: 2px solid transparent;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
 
 .btn-close:hover {
-	background: var(--bgl-gray-light);
-	opacity: 1;
+    background: var(--bgl-gray-light);
+    opacity: 1;
 }
 
 .btn-close:active {
-	background: var(--bgl-gray);
+    background: var(--bgl-gray);
 }
 
 .btn-close::before {
-	content: 'close';
-	font-family: 'Material Symbols Outlined', serif;
+    content: 'close';
+    font-family: 'Material Symbols Outlined', serif;
 }
 
-.bgl_btn.thin {
-	height: calc(var(--btn-height) * 0.7);
-	line-height: calc(var(--btn-height) * 0.7);
-}
 
 .hover {
-	cursor: pointer;
-	transition: all 400ms ease;
+    cursor: pointer;
+    transition: all 400ms ease;
 }
 
 .hover:hover {
-	filter: brightness(90%);
+    filter: brightness(90%);
 }
 
 .hover:active {
-	filter: brightness(80%);
+    filter: brightness(80%);
 }
 
 .border {
-	border: 1px solid var(--border-color);
+    border: 1px solid var(--border-color);
 }
 
 .border-primary {
-	border: 1px solid var(--bgl-primary);
+    border: 1px solid var(--bgl-primary);
 }
 
 .outline {
-	outline: 1px solid var(--border-color);
+    outline: 1px solid var(--border-color);
 }
 
 .outline-dashed {
-	outline: 2px dashed var(--border-color);
+    outline: 2px dashed var(--border-color);
 }
 
 .outline-primary {
-	outline: 1px solid var(--bgl-primary);
+    outline: 1px solid var(--bgl-primary);
 }
 
 .rotate-270 {
-	transform: rotate(270deg);
+    transform: rotate(270deg);
 }
 
 .rotate-180 {
-	transform: rotate(180deg);
+    transform: rotate(180deg);
 }
 
 .rotate-90 {
-	transform: rotate(90deg);
+    transform: rotate(90deg);
 }
 
 .rotate-0 {
-	transform: rotate(0deg) !important;
+    transform: rotate(0deg) !important;
 }
 
 @media screen and (max-width: 910px) {
-	.bgl_btn {
-		padding: 0 20px;
-	}
+    .bgl_btn {
+        padding: 0 20px;
+    }
 
-	.m_border {
-		border: 1px solid var(--border-color);
-	}
+    .m_border {
+        border: 1px solid var(--border-color);
+    }
 
-	.m_rotate-270 {
-		transform: rotate(270deg);
-	}
+    .m_rotate-270 {
+        transform: rotate(270deg);
+    }
 
-	.m_rotate-180 {
-		transform: rotate(180deg);
-	}
+    .m_rotate-180 {
+        transform: rotate(180deg);
+    }
 
-	.m_rotate-90 {
-		transform: rotate(90deg);
-	}
+    .m_rotate-90 {
+        transform: rotate(90deg);
+    }
 
-	.m_rotate-0 {
-		transform: rotate(0deg) !important;
-	}
+    .m_rotate-0 {
+        transform: rotate(0deg) !important;
+    }
 }
 
 .ripple {
-	position: absolute;
-	border-radius: 50%;
-	transform: scale(0);
-	background: rgba(0, 0, 0, 0.3);
-	pointer-events: none;
-	animation: rippleEffect 0.6s ease-out;
+    position: absolute;
+    border-radius: 50%;
+    transform: scale(0);
+    background: rgba(0, 0, 0, 0.3);
+    pointer-events: none;
+    animation: rippleEffect 0.6s ease-out;
 }
 
 @keyframes rippleEffect {
-	to {
-		transform: scale(4);
-		opacity: 0;
-	}
-}
+    to {
+        transform: scale(4);
+        opacity: 0;
+    }
+}

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,
@@ -94,8 +108,8 @@ export interface BaseBagelField<
 	'disabled'?: boolean
 	'helptext'?: string
 	'options'?: BagelFieldOptions<T, P>
-	'children'?: SchemaChild<T, P, PO>[]
-	'slots'?: { [key: string]: SchemaChild<T, P, PO>[] }
+	'children'?: SchemaChild<T, Path<T, PO>, PO>[]
+	'slots'?: { [key: string]: SchemaChild<T, Path<T, PO>, PO>[] }
 	'defaultValue'?: any
 	'vIf'?: VIfType<T, P>
 	'v-if'?: VIfType<T, P>
@@ -133,15 +147,20 @@ export type BglFieldT<
 	PO extends PathsOptions = DefaultPathsOptions,
 > = Field<T, PO>
 
+export type SchemaField<
+	T,
+	PO extends PathsOptions = DefaultPathsOptions,
+> = Field<T, PO> | ElementField<T, PO>
+
 export type BglFormSchemaT<
 	T,
 	PO extends PathsOptions = DefaultPathsOptions,
-> = Field<T, PO>[]
+> = SchemaField<T, PO>[]
 
 export type ShallowBglFormSchemaT<
 	T,
 	PO extends PathsOptions = ShallowPathsOptions,
-> = Field<T, PO>[]
+> = SchemaField<T, PO>[]
 
 export interface InputBagelField<
 	T,

package/src/utils/elementUtils.ts

@@ -1,21 +1,9 @@
-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,
-	PO extends PathsOptions = DefaultPathsOptions
-> extends Partial<BaseBagelField<T, any, PO>> {
-	$el: string
-	id?: any
-	class?: string
-	vIf?: boolean | (() => boolean)
-	style?: Record<string, any>
-	attrs?: Record<string, any>
-	onClick?: () => void
-	children?: BaseElementField<T, PO>[]
-}
+export type BaseElementField<T, PO extends PathsOptions = DefaultPathsOptions> = ElementField<T, PO>
 
 export interface BtnElementOptions<
 	T = any,
@@ -151,7 +139,7 @@ export function btn<
 		// 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 {
@@ -284,7 +272,7 @@ export function txt<
 		// txt(options)
 		finalOptions = idOrOptions
 		const { id: optionId } = finalOptions
-		id = optionId
+		id = optionId as Path<T, PO> | undefined
 	} else {
 		// txt(id, ...) patterns
 		id = idOrOptions
@@ -360,7 +348,7 @@ export function img<
 		// 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