@bagelink/vue 1.3.3 → 1.3.7

package/src/styles/scrollbar.css

@@ -1,6 +1,6 @@
 body>div ::-webkit-scrollbar {
-    width: 0.5em;
-    height: 0.5rem;
+    width: var(--bgl-scrollbar-size);
+    height: var(--bgl-scrollbar-size);
 }
 
 body>div ::-webkit-scrollbar-track {}

package/src/styles/theme.css

@@ -33,6 +33,7 @@
     --bgl-selection-bg: var(--bgl-blue-dark);
     --bgl-selection-color: var(--bgl-white);
     --bgl-scrollbar-thumb: var(--bgl-gray);
+    --bgl-scrollbar-size: 0.5rem;
     --pill-btn-color: var(--bgl-white);
     --pill-btn-bg: var(--placeholder-color);
     --bgl-selected: var(--bgl-gray-light);

package/src/types/BagelForm.ts

@@ -6,7 +6,12 @@ import type { PathsOptions, DefaultPathsOptions } from 'type-fest/source/paths'
 import type { VNode } from 'vue'
 import type { ComponentExposed } from 'vue-component-type-helpers'
 
-export type AttributeValue = string | number | boolean | undefined | { [key: string]: any }
+export type AttributeValue =
+	| string
+	| number
+	| boolean
+	| undefined
+	| { [key: string]: any }
 
 export type AttributeFn<T, P extends Path<T>> = (
 	field: FieldVal<T, P>,
@@ -17,10 +22,10 @@ export interface Attributes<T, P extends Path<T>> {
 	[key: string]: AttributeValue | AttributeFn<T, P>
 }
 
-export type BagelFieldOptions<T, P extends Path<T>> = (
-	string
+export type BagelFieldOptions<T, P extends Path<T>> =
+	| string
 	| (
-		{
+		| {
 			label?: string
 			value: string | number
 		}
@@ -30,54 +35,55 @@ export type BagelFieldOptions<T, P extends Path<T>> = (
 		| { [key: string]: any }
 	)[]
 	| ((val?: FieldVal<T, P>, rowData?: T) => void)
-)
 
-export type VIfType<T, P extends Path<T>> = (
-	string |
-	boolean |
-	((val?: FieldVal<T, P>, rowData?: T) => boolean)
-)
+export type VIfType<T, P extends Path<T>> =
+	| string
+	| boolean
+	| ((val?: FieldVal<T, P>, rowData?: T) => boolean)
 
 export type ValidationFn<T, P extends Path<T>> = (
 	val?: FieldVal<T, P>,
-	rowData?: T,
+	rowData?: T
 ) => string | undefined
 
 export interface ShallowPathsOptions extends PathsOptions {
 	maxRecursionDepth: 1
 }
 
-export type _Path<T, PathsOpts extends PathsOptions = DefaultPathsOptions> = (
-	ToString<
-		Paths<
-			OmitIndexSignature<T>,
-			PathsOpts
-		>
-	>
-)
-
-export type Path<T, PathsOpts extends PathsOptions = DefaultPathsOptions> = (
-  FieldVal<T, _Path<T, PathsOpts>> extends Array<any> ?
-  	LiteralStringUnion<_Path<T, PathsOpts>> :
-  	_Path<T, PathsOpts>
-)
+export type _Path<
+	T,
+	PO extends PathsOptions = DefaultPathsOptions,
+> = ToString<Paths<OmitIndexSignature<T>, PO>>
+
+export type Path<T, PO extends PathsOptions = DefaultPathsOptions> =
+	FieldVal<T, _Path<T, PO>> extends Array<any>
+		? LiteralStringUnion<_Path<T, PO>>
+		: _Path<T, PO>
 
 /** The value type at path P in object T. */
 // Fall back to unknown if type resolution fails
-export type FieldVal<T, P extends Path<T>> = (
-unknown extends Get<T, P> ?
-	unknown :
-	Get<T, P>
-)
+export type FieldVal<T, P extends Path<T>> =
+	unknown extends Get<T, P> ? unknown : Get<T, P>
 
 /** If path P in T is an array, this gives the array's element type. */
 export type ArrayFieldVal<T, P extends Path<T>> = IterableElement<Get<T, P>>
 
-export type VNodeFn<T, P extends Path<T>> = (props: { row?: T, field: BaseBagelField<T, P> }) => VNode
-
-export type SchemaChild<T, P extends Path<T>> = Field<T> | VNode | VNodeFn<T, P> | string
-
-export interface BaseBagelField<T, P extends Path<T>> {
+export type VNodeFn<T, P extends Path<T>> = (props: {
+	row?: T
+	field: BaseBagelField<T, P>
+}) => VNode
+
+export type SchemaChild<
+	T,
+	P extends Path<T, PO>,
+	PO extends PathsOptions = DefaultPathsOptions,
+> = Field<T, PO> | VNode | VNodeFn<T, P> | string
+
+export interface BaseBagelField<
+	T,
+	P extends Path<T, PO>,
+	PO extends PathsOptions = DefaultPathsOptions,
+> {
 	'$el'?: any
 	'id'?: P
 	'label'?: string
@@ -88,8 +94,8 @@ export interface BaseBagelField<T, P extends Path<T>> {
 	'disabled'?: boolean
 	'helptext'?: string
 	'options'?: BagelFieldOptions<T, P>
-	'children'?: SchemaChild<T, P>[]
-	'slots'?: { [key: string]: SchemaChild<T, P>[] }
+	'children'?: SchemaChild<T, P, PO>[]
+	'slots'?: { [key: string]: SchemaChild<T, P, PO>[] }
 	'defaultValue'?: any
 	'vIf'?: VIfType<T, P>
 	'v-if'?: VIfType<T, P>
@@ -98,30 +104,61 @@ export interface BaseBagelField<T, P extends Path<T>> {
 	'validate'?: ValidationFn<T, P>
 }
 
-export type _MappedBaseBagelField<T> = {
-	[P in Path<T>]: BaseBagelField<T, P>
+export type _MappedBaseBagelField<
+	T,
+	PO extends PathsOptions = DefaultPathsOptions,
+> = {
+	[P in Path<T, PO>]: BaseBagelField<T, P, PO>
 }
 
-export type MappedBaseBagelFieldP<T, P extends Path<T>> = _MappedBaseBagelField<T>[P]
-
-export type FieldByP<T, P extends Path<T>> = MappedBaseBagelFieldP<T, P>
-
-export type Field<T, PathsOpts extends PathsOptions = DefaultPathsOptions> = (
-	MappedBaseBagelFieldP<T, Path<T, PathsOpts>>
-)
-
-export type BglFieldT<T> = Field<T>
-
-export type BglFormSchemaT<T, PathsOpts extends PathsOptions = DefaultPathsOptions> = Field<T, PathsOpts>[]
-
-export type ShallowBglFormSchemaT<T, PathsOpts extends PathsOptions = ShallowPathsOptions> = Field<T, PathsOpts>[]
-
-export interface InputBagelField<T, P extends Path<T>> extends BaseBagelField<T, P> {
+export type MappedBaseBagelFieldP<
+	T,
+	P extends Path<T, PO>,
+	PO extends PathsOptions = DefaultPathsOptions,
+> = _MappedBaseBagelField<T, PO>[P]
+
+export type FieldByP<
+	T,
+	P extends Path<T, PO>,
+	PO extends PathsOptions = DefaultPathsOptions,
+> = MappedBaseBagelFieldP<T, P, PO>
+
+export type Field<
+	T,
+	PO extends PathsOptions = DefaultPathsOptions,
+> = MappedBaseBagelFieldP<T, Path<T, PO>, PO>
+
+export type BglFieldT<
+	T,
+	PO extends PathsOptions = DefaultPathsOptions,
+> = Field<T, PO>
+
+export type BglFormSchemaT<
+	T,
+	PO extends PathsOptions = DefaultPathsOptions,
+> = Field<T, PO>[]
+
+export type ShallowBglFormSchemaT<
+	T,
+	PO extends PathsOptions = ShallowPathsOptions,
+> = Field<T, PO>[]
+
+export interface InputBagelField<
+	T,
+	P extends Path<T, PO>,
+	PO extends PathsOptions = ShallowPathsOptions
+>
+	extends BaseBagelField<T, P, PO> {
 	$el: 'text' | ComponentExposed<typeof TextInput>
 	type?: string
 }
 
-export interface SelectBagelField<T, P extends Path<T>> extends BaseBagelField<T, P> {
+export interface SelectBagelField<
+	T,
+	P extends Path<T, PO>,
+	PO extends PathsOptions = ShallowPathsOptions,
+>
+	extends BaseBagelField<T, P, PO> {
 	$el: 'select' | ComponentExposed<typeof SelectInput>
 	type?: string
 }

package/src/utils/BagelFormUtils.ts

@@ -1,6 +1,10 @@
 import type { ArrayFieldVal, Attributes, BaseBagelField, BglFormSchemaT, FieldByP, IconType, InputBagelField, Option, Path, SchemaChild, SelectBagelField, ShallowBglFormSchemaT, UploadInputProps } from '@bagelink/vue'
+import type { DefaultPathsOptions, PathsOptions } from 'type-fest/source/paths'
 
-interface InputOptions<T, P extends Path<T>> extends Partial<BaseBagelField<T, P>> {
+interface InputOptions<
+	T,
+	P extends Path<T>
+> extends Partial<BaseBagelField<T, P>> {
 	defaultValue?: string | number
 	autocomplete?: AutoFillField
 }
@@ -40,22 +44,33 @@ interface NumFieldOptions<T, K extends Path<T>> extends InputOptions<T, K> {
 	useGrouping?: boolean
 }
 
-type RichTextOptions<T, P extends Path<T>> = InputOptions<T, P>
+type RichTextOptions<
+	T,
+	P extends Path<T>
+> = InputOptions<T, P>
 
-export function getBaseField<T, P extends Path<T>>(
+export function getBaseField<
+	T,
+	P extends Path<T, PO>,
+	PO extends PathsOptions = DefaultPathsOptions,
+>(
 	id?: P,
 	labelOrRest: string | Partial<BaseBagelField<T, P>> = {},
 	rest: Partial<BaseBagelField<T, P>> = {}
-): BaseBagelField<T, P> {
+): BaseBagelField<T, P, PO> {
 	if (typeof labelOrRest === 'object') return { id, ...labelOrRest }
 	return { id, label: labelOrRest, ...rest }
 }
 
-export function richText<T, P extends Path<T>>(
+export function richText<
+	T,
+	P extends Path<T, PO>,
+	PO extends PathsOptions = DefaultPathsOptions,
+>(
 	id?: P,
 	label?: string,
 	options?: RichTextOptions<T, P>,
-): BaseBagelField<T, P> {
+): BaseBagelField<T, P, PO> {
 	return {
 		$el: 'richtext',
 		class: options?.class,
@@ -70,11 +85,15 @@ export function richText<T, P extends Path<T>>(
 	}
 }
 
-export function txtField<T, P extends Path<T>>(
+export function txtField<
+	T,
+	P extends Path<T, PO>,
+	PO extends PathsOptions = DefaultPathsOptions,
+>(
 	id?: P,
 	label?: string,
 	options?: TextInputOptions<T, P>,
-): InputBagelField<T, P> {
+): InputBagelField<T, P, PO> {
 	return {
 		$el: 'text',
 		id,
@@ -101,12 +120,16 @@ export function txtField<T, P extends Path<T>>(
 	}
 }
 
-export function selectField<T, P extends Path<T>>(
+export function selectField<
+	T,
+	P extends Path<T, PO>,
+	PO extends PathsOptions = DefaultPathsOptions,
+>(
 	id?: P,
 	label?: string,
 	options?: Option[] | (() => Option[]),
 	config?: SlctInputOptions<T, P>,
-): SelectBagelField<T, P> {
+): SelectBagelField<T, P, PO> {
 	return {
 		$el: 'select',
 		id,
@@ -134,11 +157,15 @@ interface CheckInputOptions<T, K extends Path<T>> extends InputOptions<T, K> {
 	value?: string
 }
 
-export function checkField<T, P extends Path<T>>(
+export function checkField<
+	T,
+	P extends Path<T, PO>,
+	PO extends PathsOptions = DefaultPathsOptions,
+>(
 	id?: P,
 	label?: string,
 	options?: CheckInputOptions<T, P>,
-): BaseBagelField<T, P> {
+): BaseBagelField<T, P, PO> {
 	return {
 		$el: 'check',
 		class: options?.class,
@@ -151,14 +178,21 @@ export function checkField<T, P extends Path<T>>(
 	}
 }
 
-interface EmailInputOptions<T, P extends Path<T>> extends InputOptions<T, P> {
+interface EmailInputOptions<
+	T,
+	P extends Path<T>
+> extends InputOptions<T, P> {
 	autocorrect?: boolean
 	serverValidate?: boolean
 	preventFakeEmails?: boolean
 	pattern?: string
 }
 
-export function emailField<T, P extends Path<T>>(id?: P, label?: string, options?: EmailInputOptions<T, P>): BaseBagelField<T, P> {
+export function emailField<
+	T,
+	P extends Path<T, PO>,
+	PO extends PathsOptions = DefaultPathsOptions,
+>(id?: P, label?: string, options?: EmailInputOptions<T, P>): BaseBagelField<T, P, PO> {
 	return {
 		$el: 'email',
 		id,
@@ -175,11 +209,15 @@ export function emailField<T, P extends Path<T>>(id?: P, label?: string, options
 	}
 }
 
-export function dateField<T, P extends Path<T>>(
+export function dateField<
+	T,
+	P extends Path<T, PO>,
+	PO extends PathsOptions = DefaultPathsOptions,
+>(
 	id?: P,
 	label?: string,
 	options?: DateOptions<T, P>,
-): BaseBagelField<T, P> {
+): BaseBagelField<T, P, PO> {
 	return {
 		$el: 'date',
 		class: options?.class,
@@ -200,11 +238,15 @@ export function dateField<T, P extends Path<T>>(
 	}
 }
 
-export function numField<T, P extends Path<T>>(
+export function numField<
+	T,
+	P extends Path<T, PO>,
+	PO extends PathsOptions = DefaultPathsOptions,
+>(
 	id?: P,
 	label?: string,
 	options?: NumFieldOptions<T, P>,
-): BaseBagelField<T, P> {
+): BaseBagelField<T, P, PO> {
 	return {
 		$el: 'number',
 		class: options?.class,
@@ -229,9 +271,13 @@ export function numField<T, P extends Path<T>>(
 	}
 }
 
-export function frmRow<T, P extends Path<T>>(
-	...children: SchemaChild<T, P>[]
-): FieldByP<T, P> {
+export function frmRow<
+	T,
+	P extends Path<T, PO>,
+	PO extends PathsOptions = DefaultPathsOptions,
+>(
+	...children: SchemaChild<T, P, PO>[]
+): FieldByP<T, P, PO> {
 	return {
 		$el: 'div',
 		class: 'flex gap-1 m_block align-items-end',
@@ -241,11 +287,15 @@ export function frmRow<T, P extends Path<T>>(
 
 export interface UploadOptions<T, K extends Path<T>> extends Omit<UploadInputProps, 'id'>, InputOptions<T, K> {}
 
-export function uploadField<T, P extends Path<T>>(
+export function uploadField<
+	T,
+	P extends Path<T, PO>,
+	PO extends PathsOptions = DefaultPathsOptions,
+>(
 	id?: P,
 	label?: string,
 	options?: UploadOptions<T, P>
-): BaseBagelField<T, P> {
+): BaseBagelField<T, P, PO> {
 	return {
 		$el: 'upload',
 		id,
@@ -266,11 +316,15 @@ interface RangeOptions<T, K extends Path<T>> extends InputOptions<T, K> {
 	formatValue?: (value: number) => string
 }
 
-export function rangeField<T, P extends Path<T>>(
+export function rangeField<
+	T,
+	P extends Path<T, PO>,
+	PO extends PathsOptions = DefaultPathsOptions,
+>(
 	id?: P,
 	label?: string,
 	options?: RangeOptions <T, P>
-): BaseBagelField<T, P> {
+): BaseBagelField<T, P, PO> {
 	return {
 		$el: 'range',
 		id,
@@ -306,11 +360,15 @@ export function bglForm<T>(idOrField?: string | FieldByP<T, Path<T>>, ...schema:
 	}
 }
 
-export function telField<T, P extends Path<T>>(
+export function telField<
+	T,
+	P extends Path<T, PO>,
+	PO extends PathsOptions = DefaultPathsOptions,
+>(
 	id?: P,
 	label?: string,
 	options?: { [key: string]: any }
-): BaseBagelField<T, P> {
+): BaseBagelField<T, P, PO> {
 	return {
 		$el: 'tel',
 		id,
@@ -321,11 +379,15 @@ export function telField<T, P extends Path<T>>(
 	}
 }
 
-export function colorField<T, P extends Path<T>>(
+export function colorField<
+	T,
+	P extends Path<T, PO>,
+	PO extends PathsOptions = DefaultPathsOptions,
+>(
 	id?: P,
 	label?: string,
 	options?: { [key: string]: any }
-): BaseBagelField<T, P> {
+): BaseBagelField<T, P, PO> {
 	return {
 		$el: 'color',
 		id,
@@ -357,12 +419,16 @@ export interface ArrayFieldOptions<T, K extends Path<T>> extends InputOptions<T,
 
 export type ArrayType = 'number' | 'text'
 
-export function arrField<T, P extends Path<T>>(
+export function arrField<
+	T,
+	P extends Path<T, PO>,
+	PO extends PathsOptions = DefaultPathsOptions,
+>(
 	id: P,
 	label: string,
 	schemaOrType: BglFormSchemaT<ArrayFieldVal<T, P>> | ArrayType,
 	options?: ArrayFieldOptions<T, P>
-): BaseBagelField<T, P> {
+): BaseBagelField<T, P, PO> {
 	const attrs: Attributes<T, P> = { delete: true, add: true, ...options }
 
 	if (typeof schemaOrType === 'string') {
@@ -400,23 +466,7 @@ export function arrField<T, P extends Path<T>>(
 // 			})
 // }
 
-export function useForm(): {
-	txtField: typeof txtField
-	selectField: typeof selectField
-	checkField: typeof checkField
-	dateField: typeof dateField
-	numField: typeof numField
-	frmRow: typeof frmRow
-	uploadField: typeof uploadField
-	rangeField: typeof rangeField
-	bglForm: typeof bglForm
-	telField: typeof telField
-	colorField: typeof colorField
-	arrField: typeof arrField
-	richText: typeof richText
-	findBglFieldById: typeof findBglFieldById
-	getBaseField: typeof getBaseField
-} {
+export function useForm() {
 	return {
 		txtField,
 		selectField,