@bagelink/vue 0.0.696 → 0.0.702

package/src/styles/mobilLayout.css

@@ -35,23 +35,23 @@
     }
 
     .m_round {
-        border-radius: var(--btn-border-radius);
+        border-radius: var(--btn-border-radius) !important;
     }
 
     .m_rounded {
-        border-radius: calc(var(--btn-border-radius) / 2);
+        border-radius: calc(var(--btn-border-radius) / 2) !important;
     }
 
     .m_round-extra {
-        border-radius: calc(var(--btn-border-radius) * 2);
+        border-radius: calc(var(--btn-border-radius) * 2) !important;
     }
 
     .m_round-none {
         border-radius: 0 !important;
     }
-    
-    .m_oval{
-        border-radius: 100% ;
+
+    .m_oval {
+        border-radius: 100%;
     }
 
     .m_flex-center {
@@ -83,7 +83,7 @@
     .m_align-items-center {
         align-items: center !important;
     }
-    
+
     .m_align-items-baseline {
         align-items: baseline !important;
     }
@@ -544,39 +544,41 @@
     .m_flex-shrink {
         flex-shrink: 1;
     }
-    
-    .m_flex-no-grow, .m_flex-grow-0 {
+
+    .m_flex-no-grow,
+    .m_flex-grow-0 {
         flex-grow: 0;
     }
-    
-    .m_flex-no-shrink, .m_flex-shrink-0 {
+
+    .m_flex-no-shrink,
+    .m_flex-shrink-0 {
         flex-shrink: 0;
     }
-    
+
     .m_flex-grow-2 {
         flex-grow: 2;
     }
-    
+
     .m_flex-shrink-2 {
         flex-shrink: 2;
     }
-    
+
     .m_flex-grow-3 {
         flex-grow: 3;
     }
-    
+
     .m_flex-shrink-3 {
         flex-shrink: 3;
     }
-    
+
     .m_flex-grow-4 {
         flex-grow: 4;
     }
-    
+
     .m_flex-shrink-4 {
         flex-shrink: 4;
     }
-    
+
     .m_flex-2-col {
         max-width: 50%;
         flex: 1 1 calc(50% - 2rem);
@@ -1770,26 +1772,27 @@
     .m_grid-span-6 {
         grid-column: span 6;
     }
+
     .m_grid-span-row-1 {
         grid-row: span 1;
     }
-    
+
     .m_grid-span-row-2 {
         grid-row: span 2;
     }
-    
+
     .m_grid-span-row-3 {
         grid-row: span 3;
     }
-    
+
     .m_grid-span-row-4 {
         grid-row: span 4;
     }
-    
+
     .m_grid-span-row-5 {
         grid-row: span 5;
     }
-    
+
     .m_grid-span-row-6 {
         grid-row: span 6;
     }
@@ -1851,299 +1854,309 @@
         inset-inline-start: 0;
         inset-inline-end: 0;
     }
-    .m_inset-inline-start, .m_start{
+
+    .m_inset-inline-start,
+    .m_start {
         inset-inline-start: 0 !important;
     }
-    
-    .m_start-1{
+
+    .m_start-1 {
         inset-inline-start: 1rem !important;
     }
-    
-    .m_start-2{
+
+    .m_start-2 {
         inset-inline-start: 2rem !important;
     }
-    
-    .m_start-3{
+
+    .m_start-3 {
         inset-inline-start: 3rem !important;
     }
-    
-    .m_start-4{
+
+    .m_start-4 {
         inset-inline-start: 4rem !important;
     }
-    
-    .m_start-5{
+
+    .m_start-5 {
         inset-inline-start: 5rem !important;
     }
-    
-    .m_start-6{
+
+    .m_start-6 {
         inset-inline-start: 6rem !important;
     }
-    
-    .m_start-7{
+
+    .m_start-7 {
         inset-inline-start: 7rem !important;
     }
-    
-    .m_start-8{
+
+    .m_start-8 {
         inset-inline-start: 8rem !important;
     }
-    
-    .m_-start-1{
+
+    .m_-start-1 {
         inset-inline-start: -1rem !important;
     }
-    
-    .m_-start-2{
+
+    .m_-start-2 {
         inset-inline-start: -2rem !important;
     }
-    
-    .m_-start-3{
+
+    .m_-start-3 {
         inset-inline-start: -3rem !important;
     }
-    
-    .m_-start-4{
+
+    .m_-start-4 {
         inset-inline-start: -4rem !important;
     }
-    
-    .m_-start-5{
+
+    .m_-start-5 {
         inset-inline-start: -5rem !important;
     }
-    
-    .m_-start-6{
+
+    .m_-start-6 {
         inset-inline-start: -6rem !important;
     }
-    
-    .m_-start-7{
+
+    .m_-start-7 {
         inset-inline-start: -7rem !important;
     }
-    
-    .m_-start-8{
+
+    .m_-start-8 {
         inset-inline-start: -8rem !important;
     }
-    
-    .m_inset-inline-end, .m_end{
+
+    .m_inset-inline-end,
+    .m_end {
         inset-inline-end: 0 !important;
     }
-    
-    .m_end-1{
+
+    .m_end-1 {
         inset-inline-end: 1rem !important;
     }
-    
-    .m_end-2{
+
+    .m_end-2 {
         inset-inline-end: 2rem !important;
     }
-    
-    .m_end-3{
+
+    .m_end-3 {
         inset-inline-end: 3rem !important;
     }
-    
-    .m_end-4{
+
+    .m_end-4 {
         inset-inline-end: 4rem !important;
     }
-    
-    .m_end-5{
+
+    .m_end-5 {
         inset-inline-end: 5rem !important;
     }
-    
-    .m_end-6{
+
+    .m_end-6 {
         inset-inline-end: 6rem !important;
     }
-    
-    .m_end-7{
+
+    .m_end-7 {
         inset-inline-end: 7rem !important;
     }
-    
-    .m_end-8{
+
+    .m_end-8 {
         inset-inline-end: 8rem !important;
     }
-    
-    .m_-end-1{
+
+    .m_-end-1 {
         inset-inline-end: -1rem !important;
     }
-    
-    .m_-end-2{
+
+    .m_-end-2 {
         inset-inline-end: -2rem !important;
     }
-    
-    .m_-end-3{
+
+    .m_-end-3 {
         inset-inline-end: -3rem !important;
     }
-    
-    .m_-end-4{
+
+    .m_-end-4 {
         inset-inline-end: -4rem !important;
     }
-    
-    .m_-end-5{
+
+    .m_-end-5 {
         inset-inline-end: -5rem !important;
     }
-    
-    .m_-end-6{
+
+    .m_-end-6 {
         inset-inline-end: -6rem !important;
     }
-    
-    .m_-end-7{
+
+    .m_-end-7 {
         inset-inline-end: -7rem !important;
     }
-    
-    .m_-end-8{
+
+    .m_-end-8 {
         inset-inline-end: -8rem !important;
     }
-    
-    .m_top, .m_top-0{
+
+    .m_top,
+    .m_top-0 {
         top: 0 !important;
     }
-    
-    .m_top-1{
+
+    .m_top-1 {
         top: 1rem !important;
     }
-    
-    .m_top-2{
+
+    .m_top-2 {
         top: 2rem !important;
     }
-    
-    .m_top-3{
+
+    .m_top-3 {
         top: 3rem !important;
     }
-    
-    .m_top-4{
+
+    .m_top-4 {
         top: 4rem !important;
     }
-    
-    .m_top-5{
+
+    .m_top-5 {
         top: 5rem !important;
     }
-    
-    .m_top-6{
+
+    .m_top-6 {
         top: 6rem !important;
     }
-    
-    .m_top-7{
+
+    .m_top-7 {
         top: 7rem !important;
     }
-    
-    .m_top-8{
+
+    .m_top-8 {
         top: 8rem !important;
     }
-    
-    .m_-top-1{
+
+    .m_-top-1 {
         top: -1rem !important;
     }
-    
-    .m_-top-2{
+
+    .m_-top-2 {
         top: -2rem !important;
     }
-    
-    .m_-top-3{
+
+    .m_-top-3 {
         top: -3rem !important;
     }
-    
-    .m_-top-4{
+
+    .m_-top-4 {
         top: -4rem !important;
     }
-    
-    .m_-top-5{
+
+    .m_-top-5 {
         top: -5rem !important;
     }
-    
-    .m_-top-6{
+
+    .m_-top-6 {
         top: -6rem !important;
     }
-    
-    .m_-top-7{
+
+    .m_-top-7 {
         top: -7rem !important;
     }
-    
-    .m_-top-8{
+
+    .m_-top-8 {
         top: -8rem !important;
     }
-    
-    .m_bottom, .m_bottom-0{
+
+    .m_bottom,
+    .m_bottom-0 {
         bottom: 0 !important;
     }
-    
-    .m_bottom-1{
+
+    .m_bottom-1 {
         bottom: 1rem !important;
     }
-    
-    .m_bottom-2{
+
+    .m_bottom-2 {
         bottom: 2rem !important;
     }
-    
-    .m_bottom-3{
+
+    .m_bottom-3 {
         bottom: 3rem !important;
     }
-    
-    .m_bottom-4{
+
+    .m_bottom-4 {
         bottom: 4rem !important;
     }
-    
-    .m_bottom-5{
+
+    .m_bottom-5 {
         bottom: 5rem !important;
     }
-    
-    .m_bottom-6{
+
+    .m_bottom-6 {
         bottom: 6rem !important;
     }
-    
-    .m_bottom-7{
+
+    .m_bottom-7 {
         bottom: 7rem !important;
     }
-    
-    .m_bottom-8{
+
+    .m_bottom-8 {
         bottom: 8rem !important;
     }
-    
-    .m_-bottom-1{
+
+    .m_-bottom-1 {
         bottom: -1rem !important;
     }
-    
-    .m_-bottom-2{
+
+    .m_-bottom-2 {
         bottom: -2rem !important;
     }
-    
-    .m_-bottom-3{
+
+    .m_-bottom-3 {
         bottom: -3rem !important;
     }
-    
-    .m_-bottom-4{
+
+    .m_-bottom-4 {
         bottom: -4rem !important;
     }
-    
-    .m_-bottom-5{
+
+    .m_-bottom-5 {
         bottom: -5rem !important;
     }
-    
-    .m_-bottom-6{
+
+    .m_-bottom-6 {
         bottom: -6rem !important;
     }
-    
-    .m_-bottom-7{
+
+    .m_-bottom-7 {
         bottom: -7rem !important;
     }
-    
-    .m_-bottom-8{
+
+    .m_-bottom-8 {
         bottom: -8rem !important;
     }
-    .m_inset-0, .m_inset{
+
+    .m_inset-0,
+    .m_inset {
         inset: 0;
     }
-    .m_inset-1{
+
+    .m_inset-1 {
         inset: 1rem;
     }
-    .m_inset-2{
+
+    .m_inset-2 {
         inset: 2rem;
     }
-    
-    .m_inset-3{
+
+    .m_inset-3 {
         inset: 3rem;
     }
-    
-    .m_inset-4{
+
+    .m_inset-4 {
         inset: 4rem;
     }
-    
-    .m_inset-5{
+
+    .m_inset-5 {
         inset: 5rem;
     }
-    .m_inset-6{
+
+    .m_inset-6 {
         inset: 6rem;
     }
 }

package/src/types/BagelForm.ts

@@ -55,6 +55,7 @@ export interface SelectBagelField<T> extends BaseBagelField<T> {
 }
 
 export type Field<T = Record<string, any>> = BaseBagelField<T> | InputBagelField<T> | SelectBagelField<T>
+export type BglFieldT<T = Record<string, any>> = Field<T>
 
 export type BglFormSchemaT<T = Record<string, any>> = Field<T>[]
 

package/src/utils/BagelFormUtils.ts

@@ -1,4 +1,5 @@
-import type { BglFormSchemaT, Field, Option } from '@bagelink/vue'
+import { BagelForm, type BglFormSchemaT, type Field, type Option, TelInput } from '@bagelink/vue'
+import { markRaw } from 'vue'
 
 interface InputOptions {
 	required?: boolean
@@ -164,6 +165,33 @@ export function frmRow(...children: Field[]) {
 	}
 }
 
+export function bglForm(idOrField?: string | Field, ...schema: Field[]) {
+	if (typeof idOrField === 'string') {
+		return {
+			$el: markRaw(BagelForm),
+			id: idOrField,
+			attrs: {
+				schema: [idOrField, ...schema],
+			},
+		}
+	}
+	return {
+		$el: markRaw(BagelForm),
+		attrs: {
+			schema: [idOrField, ...schema]
+		},
+	}
+}
+
+export function telField(id: string, label?: string, options?: Record<string, any>): Field {
+	return {
+		$el: markRaw(TelInput),
+		id,
+		label,
+		attrs: options,
+	}
+}
+
 export function findBglFieldById(id: string, _schema: BglFormSchemaT): Field | undefined {
 	for (const field of _schema) {
 		if (field.id === id) return field