@bagelink/vue 1.4.22 → 1.4.28

package/src/styles/layout.css

@@ -6139,42 +6139,231 @@
     grid-template-rows: 1fr;
 }
 
-.grid-wrap-50 {
+.grid-wrap-50,
+.grid-wrap-50-fit {
     grid-template-columns: repeat(auto-fit, minmax(min(50px, 100%), 1fr));
     height: max-content;
     width: 100%;
 }
 
-.grid-wrap-100 {
+.grid-wrap-100,
+.grid-wrap-100-fit {
     grid-template-columns: repeat(auto-fit, minmax(min(100px, 100%), 1fr));
     height: max-content;
     width: 100%;
 }
 
-.grid-wrap-200 {
+.grid-wrap-150,
+.grid-wrap-150-fit {
+    grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
+    height: max-content;
+    width: 100%;
+}
+
+.grid-wrap-200,
+.grid-wrap-200-fit {
     grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
     height: max-content;
     width: 100%;
 }
 
-.grid-wrap-300 {
+.grid-wrap-250,
+.grid-wrap-250-fit {
+    grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
+    height: max-content;
+    width: 100%;
+}
+
+.grid-wrap-300,
+.grid-wrap-300-fit {
     grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
     height: max-content;
     width: 100%;
 }
 
-.grid-wrap-400 {
+.grid-wrap-350,
+.grid-wrap-350-fit {
+    grid-template-columns: repeat(auto-fit, minmax(min(350px, 100%), 1fr));
+    height: max-content;
+    width: 100%;
+}
+
+.grid-wrap-400,
+.grid-wrap-400-fit {
     grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr));
     height: max-content;
     width: 100%;
 }
 
-.grid-wrap-500 {
+.grid-wrap-450,
+.grid-wrap-450-fit {
+    grid-template-columns: repeat(auto-fit, minmax(min(450px, 100%), 1fr));
+    height: max-content;
+    width: 100%;
+}
+
+.grid-wrap-500,
+.grid-wrap-500-fit {
     grid-template-columns: repeat(auto-fit, minmax(min(500px, 100%), 1fr));
     height: max-content;
     width: 100%;
 }
 
+.grid-wrap-550,
+.grid-wrap-550-fit {
+    grid-template-columns: repeat(auto-fit, minmax(min(550px, 100%), 1fr));
+    height: max-content;
+    width: 100%;
+}
+
+.grid-wrap-600,
+.grid-wrap-600-fit {
+    grid-template-columns: repeat(auto-fit, minmax(min(600px, 100%), 1fr));
+    height: max-content;
+    width: 100%;
+}
+
+.grid-wrap-650,
+.grid-wrap-650-fit {
+    grid-template-columns: repeat(auto-fit, minmax(min(650px, 100%), 1fr));
+    height: max-content;
+    width: 100%;
+}
+
+.grid-wrap-700,
+.grid-wrap-700-fit {
+    grid-template-columns: repeat(auto-fit, minmax(min(700px, 100%), 1fr));
+    height: max-content;
+    width: 100%;
+}
+
+.grid-wrap-750,
+.grid-wrap-750-fit {
+    grid-template-columns: repeat(auto-fit, minmax(min(750px, 100%), 1fr));
+    height: max-content;
+    width: 100%;
+}
+
+.grid-wrap-800,
+.grid-wrap-800-fit {
+    grid-template-columns: repeat(auto-fit, minmax(min(800px, 100%), 1fr));
+    height: max-content;
+    width: 100%;
+}
+
+.grid-wrap-850,
+.grid-wrap-850-fit {
+    grid-template-columns: repeat(auto-fit, minmax(min(850px, 100%), 1fr));
+    height: max-content;
+    width: 100%;
+}
+
+.grid-wrap-900,
+.grid-wrap-900-fit {
+    grid-template-columns: repeat(auto-fit, minmax(min(900px, 100%), 1fr));
+    height: max-content;
+    width: 100%;
+}
+
+.grid-wrap-950,
+.grid-wrap-950-fit {
+    grid-template-columns: repeat(auto-fit, minmax(min(950px, 100%), 1fr));
+    height: max-content;
+    width: 100%;
+}
+
+.grid-wrap-1000,
+.grid-wrap-1000-fit {
+    grid-template-columns: repeat(auto-fit, minmax(min(1000px, 100%), 1fr));
+    height: max-content;
+    width: 100%;
+}
+
+
+
+.grid-wrap-50-fill {
+    grid-template-columns: repeat(auto-fill, minmax(min(50px, 100%), 1fr));
+}
+
+.grid-wrap-100-fill {
+    grid-template-columns: repeat(auto-fill, minmax(min(100px, 100%), 1fr));
+}
+
+.grid-wrap-150-fill {
+    grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr));
+}
+
+.grid-wrap-200-fill {
+    grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr));
+}
+
+.grid-wrap-250-fill {
+    grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr));
+}
+
+.grid-wrap-300-fill {
+    grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
+}
+
+.grid-wrap-350-fill {
+    grid-template-columns: repeat(auto-fill, minmax(min(350px, 100%), 1fr));
+}
+
+.grid-wrap-400-fill {
+    grid-template-columns: repeat(auto-fill, minmax(min(400px, 100%), 1fr));
+}
+
+.grid-wrap-450-fill {
+    grid-template-columns: repeat(auto-fill, minmax(min(450px, 100%), 1fr));
+}
+
+.grid-wrap-500-fill {
+    grid-template-columns: repeat(auto-fill, minmax(min(500px, 100%), 1fr));
+}
+
+.grid-wrap-550-fill {
+    grid-template-columns: repeat(auto-fill, minmax(min(550px, 100%), 1fr));
+}
+
+.grid-wrap-600-fill {
+    grid-template-columns: repeat(auto-fill, minmax(min(600px, 100%), 1fr));
+}
+
+.grid-wrap-650-fill {
+    grid-template-columns: repeat(auto-fill, minmax(min(650px, 100%), 1fr));
+}
+
+.grid-wrap-700-fill {
+    grid-template-columns: repeat(auto-fill, minmax(min(700px, 100%), 1fr));
+}
+
+.grid-wrap-750-fill {
+    grid-template-columns: repeat(auto-fill, minmax(min(750px, 100%), 1fr));
+}
+
+.grid-wrap-800-fill {
+    grid-template-columns: repeat(auto-fill, minmax(min(800px, 100%), 1fr));
+}
+
+.grid-wrap-850-fill {
+    grid-template-columns: repeat(auto-fill, minmax(min(850px, 100%), 1fr));
+}
+
+.grid-wrap-900-fill {
+    grid-template-columns: repeat(auto-fill, minmax(min(900px, 100%), 1fr));
+}
+
+.grid-wrap-950-fill {
+    grid-template-columns: repeat(auto-fill, minmax(min(950px, 100%), 1fr));
+}
+
+.grid-wrap-1000-fill {
+    grid-template-columns: repeat(auto-fill, minmax(min(1000px, 100%), 1fr));
+}
+
+
+
+
 .grid-wrap-1 {
     grid-template-columns: repeat(1, 1fr);
     height: max-content;

package/src/styles/mobilLayout.css

@@ -5396,40 +5396,227 @@
     }
 
 
-    .m_grid-wrap-50 {
+
+    .m_grid-wrap-50,
+    .m_grid-wrap-50-fit {
         grid-template-columns: repeat(auto-fit, minmax(min(50px, 100%), 1fr));
         height: max-content;
-        width: 100%
+        width: 100%;
     }
 
-    .m_grid-wrap-100 {
+    .m_grid-wrap-100,
+    .m_grid-wrap-100-fit {
         grid-template-columns: repeat(auto-fit, minmax(min(100px, 100%), 1fr));
         height: max-content;
-        width: 100%
+        width: 100%;
+    }
+
+    .m_grid-wrap-150,
+    .m_grid-wrap-150-fit {
+        grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
+        height: max-content;
+        width: 100%;
     }
 
-    .m_grid-wrap-200 {
+    .m_grid-wrap-200,
+    .m_grid-wrap-200-fit {
         grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
         height: max-content;
-        width: 100%
+        width: 100%;
     }
 
-    .m_grid-wrap-300 {
+    .m_grid-wrap-250,
+    .m_grid-wrap-250-fit {
+        grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
+        height: max-content;
+        width: 100%;
+    }
+
+    .m_grid-wrap-300,
+    .m_grid-wrap-300-fit {
         grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
         height: max-content;
-        width: 100%
+        width: 100%;
     }
 
-    .m_grid-wrap-400 {
+    .m_grid-wrap-350,
+    .m_grid-wrap-350-fit {
+        grid-template-columns: repeat(auto-fit, minmax(min(350px, 100%), 1fr));
+        height: max-content;
+        width: 100%;
+    }
+
+    .m_grid-wrap-400,
+    .m_grid-wrap-400-fit {
         grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr));
         height: max-content;
-        width: 100%
+        width: 100%;
     }
 
-    .m_grid-wrap-500 {
+    .m_grid-wrap-450,
+    .m_grid-wrap-450-fit {
+        grid-template-columns: repeat(auto-fit, minmax(min(450px, 100%), 1fr));
+        height: max-content;
+        width: 100%;
+    }
+
+    .m_grid-wrap-500,
+    .m_grid-wrap-500-fit {
         grid-template-columns: repeat(auto-fit, minmax(min(500px, 100%), 1fr));
         height: max-content;
-        width: 100%
+        width: 100%;
+    }
+
+    .m_grid-wrap-550,
+    .m_grid-wrap-550-fit {
+        grid-template-columns: repeat(auto-fit, minmax(min(550px, 100%), 1fr));
+        height: max-content;
+        width: 100%;
+    }
+
+    .m_grid-wrap-600,
+    .m_grid-wrap-600-fit {
+        grid-template-columns: repeat(auto-fit, minmax(min(600px, 100%), 1fr));
+        height: max-content;
+        width: 100%;
+    }
+
+    .m_grid-wrap-650,
+    .m_grid-wrap-650-fit {
+        grid-template-columns: repeat(auto-fit, minmax(min(650px, 100%), 1fr));
+        height: max-content;
+        width: 100%;
+    }
+
+    .m_grid-wrap-700,
+    .m_grid-wrap-700-fit {
+        grid-template-columns: repeat(auto-fit, minmax(min(700px, 100%), 1fr));
+        height: max-content;
+        width: 100%;
+    }
+
+    .m_grid-wrap-750,
+    .m_grid-wrap-750-fit {
+        grid-template-columns: repeat(auto-fit, minmax(min(750px, 100%), 1fr));
+        height: max-content;
+        width: 100%;
+    }
+
+    .m_grid-wrap-800,
+    .m_grid-wrap-800-fit {
+        grid-template-columns: repeat(auto-fit, minmax(min(800px, 100%), 1fr));
+        height: max-content;
+        width: 100%;
+    }
+
+    .m_grid-wrap-850,
+    .m_grid-wrap-850-fit {
+        grid-template-columns: repeat(auto-fit, minmax(min(850px, 100%), 1fr));
+        height: max-content;
+        width: 100%;
+    }
+
+    .m_grid-wrap-900,
+    .m_grid-wrap-900-fit {
+        grid-template-columns: repeat(auto-fit, minmax(min(900px, 100%), 1fr));
+        height: max-content;
+        width: 100%;
+    }
+
+    .m_grid-wrap-950,
+    .m_grid-wrap-950-fit {
+        grid-template-columns: repeat(auto-fit, minmax(min(950px, 100%), 1fr));
+        height: max-content;
+        width: 100%;
+    }
+
+    .m_grid-wrap-1000,
+    .m_grid-wrap-1000-fit {
+        grid-template-columns: repeat(auto-fit, minmax(min(1000px, 100%), 1fr));
+        height: max-content;
+        width: 100%;
+    }
+
+
+
+    .m_grid-wrap-50-fill {
+        grid-template-columns: repeat(auto-fill, minmax(min(50px, 100%), 1fr));
+    }
+
+    .m_grid-wrap-100-fill {
+        grid-template-columns: repeat(auto-fill, minmax(min(100px, 100%), 1fr));
+    }
+
+    .m_grid-wrap-150-fill {
+        grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr));
+    }
+
+    .m_grid-wrap-200-fill {
+        grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr));
+    }
+
+    .m_grid-wrap-250-fill {
+        grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr));
+    }
+
+    .m_grid-wrap-300-fill {
+        grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
+    }
+
+    .m_grid-wrap-350-fill {
+        grid-template-columns: repeat(auto-fill, minmax(min(350px, 100%), 1fr));
+    }
+
+    .m_grid-wrap-400-fill {
+        grid-template-columns: repeat(auto-fill, minmax(min(400px, 100%), 1fr));
+    }
+
+    .m_grid-wrap-450-fill {
+        grid-template-columns: repeat(auto-fill, minmax(min(450px, 100%), 1fr));
+    }
+
+    .m_grid-wrap-500-fill {
+        grid-template-columns: repeat(auto-fill, minmax(min(500px, 100%), 1fr));
+    }
+
+    .m_grid-wrap-550-fill {
+        grid-template-columns: repeat(auto-fill, minmax(min(550px, 100%), 1fr));
+    }
+
+    .m_grid-wrap-600-fill {
+        grid-template-columns: repeat(auto-fill, minmax(min(600px, 100%), 1fr));
+    }
+
+    .m_grid-wrap-650-fill {
+        grid-template-columns: repeat(auto-fill, minmax(min(650px, 100%), 1fr));
+    }
+
+    .m_grid-wrap-700-fill {
+        grid-template-columns: repeat(auto-fill, minmax(min(700px, 100%), 1fr));
+    }
+
+    .m_grid-wrap-750-fill {
+        grid-template-columns: repeat(auto-fill, minmax(min(750px, 100%), 1fr));
+    }
+
+    .m_grid-wrap-800-fill {
+        grid-template-columns: repeat(auto-fill, minmax(min(800px, 100%), 1fr));
+    }
+
+    .m_grid-wrap-850-fill {
+        grid-template-columns: repeat(auto-fill, minmax(min(850px, 100%), 1fr));
+    }
+
+    .m_grid-wrap-900-fill {
+        grid-template-columns: repeat(auto-fill, minmax(min(900px, 100%), 1fr));
+    }
+
+    .m_grid-wrap-950-fill {
+        grid-template-columns: repeat(auto-fill, minmax(min(950px, 100%), 1fr));
+    }
+
+    .m_grid-wrap-1000-fill {
+        grid-template-columns: repeat(auto-fill, minmax(min(1000px, 100%), 1fr));
     }
 
     .m_grid-wrap-1 {

package/src/types/BagelForm.ts

@@ -1,4 +1,4 @@
-import type { SelectInput, TextInput } from '@bagelink/vue'
+import type { ArrayAttrs, FieldArray, SelectInput, TextInput } from '@bagelink/vue'
 import type { Paths, Get, IterableElement, OmitIndexSignature } from 'type-fest'
 import type { ToString } from 'type-fest/source/internal'
 import type { LiteralStringUnion } from 'type-fest/source/literal-union'
@@ -163,6 +163,16 @@ export interface SelectBagelField<
 	type?: string
 }
 
+export interface ArrayBagelField<
+	T,
+	P extends Path<T, PO>,
+	PO extends PathsOptions = DefaultPathsOptions,
+>
+	extends BaseBagelField<T, P, PO> {
+	$el: 'array' | ComponentExposed<typeof FieldArray>
+	attrs?: ArrayAttrs<T, P>
+}
+
 export interface ValidateInputBaseT {
 	validate?: ValidationFn<{ [key: string]: unknown }, string>
 	getFormData?: () => any

package/src/utils/BagelFormUtils.ts

@@ -1,7 +1,8 @@
-import type { ArrayFieldVal, Attributes, BaseBagelField, BglFormSchemaT, FieldByP, IconType, InputBagelField, Option, Path, SchemaChild, SelectBagelField, ShallowBglFormSchemaT, UploadInputProps } from '@bagelink/vue'
+import type { ArrayBagelField, 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'
+import type { InputTypeHTMLAttribute } from 'vue'
 
-interface InputOptions<
+export interface InputOptions<
 	T,
 	P extends Path<T>
 > extends Partial<BaseBagelField<T, P>> {
@@ -9,15 +10,15 @@ interface InputOptions<
 	autocomplete?: AutoFillField
 }
 
-interface DateOptions<T, K extends Path<T>> extends InputOptions<T, K> {
+export interface DateOptions<T, K extends Path<T>> extends InputOptions<T, K> {
 	enableTime?: boolean
 	mode?: 'day' | 'month' | 'year'
 	locale?: string
 	timezone?: string
 }
 
-interface TextInputOptions<T, K extends Path<T>> extends InputOptions<T, K> {
-	type?: 'text' | 'tel' | 'email' | 'time'
+export interface TextInputOptions<T, K extends Path<T>> extends InputOptions<T, K> {
+	type?: InputTypeHTMLAttribute
 	pattern?: string
 	multiline?: boolean
 	autoheight?: boolean
@@ -27,14 +28,14 @@ interface TextInputOptions<T, K extends Path<T>> extends InputOptions<T, K> {
 	iconStart?: IconType
 }
 
-interface SlctInputOptions<T, K extends Path<T>> extends InputOptions<T, K> {
+export interface SlctInputOptions<T, K extends Path<T>> extends InputOptions<T, K> {
 	searchable?: boolean
 	multiselect?: boolean
 	clearable?: boolean
 	onSearch?: (search: string) => any
 }
 
-interface NumFieldOptions<T, K extends Path<T>> extends InputOptions<T, K> {
+export interface NumFieldOptions<T, K extends Path<T>> extends InputOptions<T, K> {
 	max?: number
 	min?: number
 	step?: number
@@ -44,16 +45,11 @@ interface NumFieldOptions<T, K extends Path<T>> extends InputOptions<T, K> {
 	useGrouping?: boolean
 }
 
-type RichTextOptions<
-	T,
-	P extends Path<T>
-> = InputOptions<T, P>
+export interface RichTextOptions<T, P extends Path<T>> extends InputOptions<T, P> {
+	height?: number | string
+}
 
-export function getBaseField<
-	T,
-	P extends Path<T, PO>,
-	PO extends PathsOptions = DefaultPathsOptions,
->(
+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>> = {}
@@ -80,6 +76,7 @@ export function richText<
 		vIf: options?.vIf,
 		placeholder: options?.placeholder,
 		attrs: {
+			height: options?.height,
 			autocomplete: options?.autocomplete,
 		},
 	}
@@ -412,11 +409,15 @@ export function findBglFieldById<T>(id: string, _schema: ShallowBglFormSchemaT<T
 	return undefined
 }
 
-export interface ArrayFieldOptions<T, K extends Path<T>> extends InputOptions<T, K> {
+export interface ArrayAttrs<T, P extends Path<T>> extends Attributes<T, P> {
 	delete?: boolean
 	add?: boolean
+	// schema?: MaybeRefOrGetter<BglFormSchemaT<ArrayFieldVal<T, P>>>
+	// type?: ArrayType
 }
 
+export interface ArrayFieldOptions<T, K extends Path<T>> extends InputOptions<T, K>,	ArrayAttrs<T, K> {}
+
 export type ArrayType = 'number' | 'text'
 
 export function arrField<
@@ -428,13 +429,18 @@ export function arrField<
 	label: string,
 	schemaOrType: BglFormSchemaT<ArrayFieldVal<T, P>> | ArrayType,
 	options?: ArrayFieldOptions<T, P>
-): BaseBagelField<T, P, PO> {
-	const attrs: Attributes<T, P> = { delete: true, add: true, ...options }
-
-	if (typeof schemaOrType === 'string') {
-		attrs.type = schemaOrType
-	} else {
-		attrs.schema = schemaOrType
+): ArrayBagelField<T, P, PO> {
+	const arraySpecificAttrs = (
+		typeof schemaOrType === 'string'
+			? { type: schemaOrType }
+			: { schema: schemaOrType }
+	)
+
+	const attrs: ArrayAttrs<T, P> = {
+		delete: true,
+		add: true,
+		...options,
+		...arraySpecificAttrs,
 	}
 
 	return {
@@ -473,6 +479,7 @@ export function useForm() {
 		checkField,
 		dateField,
 		numField,
+		emailField,
 		frmRow,
 		uploadField,
 		rangeField,

package/src/utils/useSearch.ts

@@ -1,31 +1,43 @@
 import type { ComputedRef, MaybeRefOrGetter } from 'vue'
 import { computed, ref, watch, toValue } from 'vue'
+
+const htmlReplacers = {
+	'': /<[^>]*>?/g,
+	' ': /&nbsp;/g,
+	'"': /&quot;/g,
+	'\'': /&apos;/g,
+	'&': /&amp;/g,
+	'<': /&lt;/g,
+	'>': /&gt;/g,
+} as const
+
 /**
  * Clears HTML tags from a string
  * @param html - HTML string to clean
  * @returns Plain text without HTML tags
  */
-
 export function clearHtml(value?: string) {
 	if (!value) return ''
-	return value
-		.replace(/<[^>]*>?/g, '')
-		.replace(/&nbsp;/g, ' ')
-		.replace(/&quot;/g, '"')
-		.replace(/&apos;/g, `'`)
-		.replace(/&amp;/g, '&')
-		.replace(/&lt;/g, '<')
-		.replace(/&gt;/g, '>')
+	return Object.entries(htmlReplacers)
+		.reduce(
+			(
+				text,
+				[replacement, regex]
+			) => (
+				text.replace(regex, replacement)
+			),
+			value
+		)
 }
 
+const normalizeSearchChars = /[\p{N}\p{L}\s]/gu
 /**
  * Normalizes text by removing special characters and converting to lowercase
  * @param text - Text to normalize
  * @returns Normalized text
  */
 export function normalizeText(text: string): string {
-	const searchChars = /[\p{N}\p{L}\s]/gu
-	return text.match(searchChars)?.join('').toLowerCase() ?? ''
+	return text.match(normalizeSearchChars)?.join('').toLowerCase() ?? ''
 }
 
 /**