@bagelink/vue 0.0.544 → 0.0.552

package/src/components/form/inputs/RichText2/richtext-types.ts

@@ -0,0 +1,25 @@
+export type ToolbarConfigOption = 'bold'
+	| 'italic'
+	| 'underline'
+	| 'strikethrough'
+	| 'fontSize'
+	| 'fontFamily'
+	| 'textColor'
+	| 'backgroundColor'
+	| 'alignLeft'
+	| 'alignCenter'
+	| 'alignRight'
+	| 'alignJustify'
+	| 'orderedList'
+	| 'unorderedList'
+	| 'indent'
+	| 'outdent'
+	| 'link'
+	| 'image'
+	| 'table'
+	| 'blockquote'
+	| 'codeBlock'
+	| 'splitView'
+	| 'codeView'
+
+export type ToolbarConfig = ToolbarConfigOption[]

package/src/components/form/inputs/index.ts

@@ -13,5 +13,6 @@ export { default as ToggleInput } from './ToggleInput.vue'
 export { default as RichText } from './RichText.vue'
 export { default as TelInput } from './TelInput.vue'
 export { default as SignaturePad } from './SignaturePad.vue'
+export { default as RichText2 } from './RichText2/index.vue'
 
 export { Dropdown } from 'floating-vue'

package/src/components/formkit/FileUploader.vue

@@ -62,7 +62,7 @@ function emitValue() {
 	// const fileValues = files.map((f) => f.serverFile?.id);
 	const relationshipObjKey = props.context.attrs?.relationshipObjKey
 	if (!computedMultiple) return props.context.node.input(relationshipObjKey ? files[0].serverFile.id : files[0].serverFile)
-	// eslint-disable-next-line no-alert
+
 	alert('not implemented')
 }
 

package/src/styles/appearance.css

@@ -464,35 +464,35 @@
 }
 
 .border-bottom-none {
-    border-bottom: none
+    border-bottom: none !important;
 }
 
 .border-top-none {
-    border-top: none
+    border-top: none !important
 }
 
 .border-start-none {
-    border-inline-start: none
+    border-inline-start: none !important
 }
 
 .border-end-none {
-    border-inline-end: none
+    border-inline-end: none !important
 }
 
 .border-inner-bottom-none>* {
-    border-bottom: none
+    border-bottom: none !important
 }
 
 .border-inner-top-none>* {
-    border-top: none
+    border-top: none !important
 }
 
 .border-inner-start-none>* {
-    border-inline-start: none
+    border-inline-start: none !important
 }
 
 .border-inner-end-none>* {
-    border-inline-end: none
+    border-inline-end: none !important
 }
 
 
@@ -960,34 +960,34 @@
     }
 
     .m_border-bottom-none {
-        border-bottom: none
+        border-bottom: none !important
     }
 
     .m_border-top-none {
-        border-top: none
+        border-top: none !important
     }
 
     .m_border-start-none {
-        border-inline-start: none
+        border-inline-start: none !important
     }
 
     .m_border-end-none {
-        border-inline-end: none
+        border-inline-end: none !important
     }
 
     .m_border-inner-bottom-none>* {
-        border-bottom: none
+        border-bottom: none !important
     }
 
     .m_border-inner-top-none>* {
-        border-top: none
+        border-top: none !important
     }
 
     .m_border-inner-start-none>* {
-        border-inline-start: none
+        border-inline-start: none !important
     }
 
     .m_border-inner-end-none>* {
-        border-inline-end: none
+        border-inline-end: none !important
     }
 }

package/src/styles/layout.css

@@ -18,6 +18,13 @@
 .rounded {
     border-radius: calc(var(--btn-border-radius) / 2);
 }
+.round-extra {
+    border-radius: calc(var(--btn-border-radius) * 2);
+}
+
+.round-none {
+    border-radius: 0 ;
+}
 
 .flex-center {
     justify-content: center;
@@ -149,6 +156,53 @@
     inset-inline-end: 0;
 }
 
+.inset-inline-start, .start{
+    inset-inline-start: 0;
+}
+
+.inset-inline-end, .end{
+    inset-inline-end: 0;
+}
+.top, .top-0{
+    top: 0;
+}
+
+.top-1{
+    top: 1rem;
+}
+
+.top-2{
+    top: 2rem;
+}
+
+.top-3{
+    top: 3rem;
+}
+
+.top-4{
+    top: 4rem;
+}
+
+.bottom, .bottom-0{
+    bottom: 0;
+}
+
+.bottom-1{
+    bottom: 1rem;
+}
+
+.bottom-2{
+    bottom: 2rem;
+}
+
+.bottom-3{
+    bottom: 3rem;
+}
+
+.bottom-4{
+    bottom: 4rem;
+}
+
 .auto-flow-rows {
     grid-auto-flow: row;
 }
@@ -1368,11 +1422,40 @@
 }
 
 .sticky,
-.position-sticky {
+.position-sticky,
+.sticky-0,
+.position-sticky-0  {
     position: sticky !important;
     top: 0;
     align-self: start;
+}
+
+.sticky-1,
+.position-sticky-1 {
+    position: sticky !important;
+    top: 1rem;
+    align-self: start;
+}
 
+.sticky-2,
+.position-sticky-2 {
+    position: sticky !important;
+    top: 2rem;
+    align-self: start;
+}
+
+.sticky-3,
+.position-sticky-3 {
+    position: sticky !important;
+    top: 3rem;
+    align-self: start;
+}
+
+.sticky-4,
+.position-sticky-4 {
+    position: sticky !important;
+    top: 4rem;
+    align-self: start;
 }
 
 .flex {
@@ -1388,24 +1471,24 @@
 .hide,
 .none,
 .display-none {
-    display: none;
+    display: none !important;
 }
 
 .display-block {
-    display: block;
+    display: block !important;
 }
 
 .block {
     display: block;
-    width: 100%;
+    width: 100% !important;
 }
 
 .inline {
-    display: inline;
+    display: inline !important;
 }
 
 .inline-block {
-    display: inline-block;
+    display: inline-block !important;
 }
 
 .flex-end {
@@ -1788,6 +1871,30 @@
     grid-column: span 6;
 }
 
+.grid-span-row-1 {
+    grid-row: span 1;
+}
+
+.grid-span-row-2 {
+    grid-row: span 2;
+}
+
+.grid-span-row-3 {
+    grid-row: span 3;
+}
+
+.grid-span-row-4 {
+    grid-row: span 4;
+}
+
+.grid-span-row-5 {
+    grid-row: span 5;
+}
+
+.grid-span-row-6 {
+    grid-row: span 6;
+}
+
 .overflow-hidden {
     overflow: hidden;
 }

package/src/styles/mobilLayout.css

@@ -38,6 +38,18 @@
         border-radius: var(--btn-border-radius);
     }
 
+    .m_rounded {
+        border-radius: calc(var(--btn-border-radius) / 2);
+    }
+
+    .m_round-extra {
+        border-radius: calc(var(--btn-border-radius) * 2);
+    }
+
+    .m_round-none {
+        border-radius: 0 !important;
+    }
+
     .m_flex-center {
         justify-items: center;
         align-items: center;
@@ -65,7 +77,7 @@
     }
 
     .m_align-items-center {
-        align-items: center;
+        align-items: center !important;
     }
 
     .m_align-items-end {
@@ -160,13 +172,6 @@
         inset-inline-end: 0px;
     }
 
-    .m_positioned-full {
-        top: 0;
-        bottom: 0;
-        inset-inline-start: 0;
-        inset-inline-end: 0;
-    }
-
 
     .m_auto-flow-rows {
         grid-auto-flow: row;
@@ -1300,10 +1305,42 @@
         position: static !important;
     }
 
+
     .m_sticky,
-    .m_position-sticky {
+    .m_position-sticky,
+    .m_sticky-0,
+    .m_position-sticky-0 {
         position: sticky !important;
         top: 0;
+        align-self: start;
+    }
+
+    .m_sticky-1,
+    .m_position-sticky-1 {
+        position: sticky !important;
+        top: 1rem;
+        align-self: start;
+    }
+
+    .m_sticky-2,
+    .m_position-sticky-2 {
+        position: sticky !important;
+        top: 2rem;
+        align-self: start;
+    }
+
+    .m_sticky-3,
+    .m_position-sticky-3 {
+        position: sticky !important;
+        top: 3rem;
+        align-self: start;
+    }
+
+    .m_sticky-4,
+    .m_position-sticky-4 {
+        position: sticky !important;
+        top: 4rem;
+        align-self: start;
     }
 
     .m_flex-stretch {
@@ -1692,6 +1729,29 @@
     .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;
+    }
 
     .m_overflow-hidden {
         overflow: hidden;
@@ -1705,15 +1765,15 @@
         overflow: unset;
     }
 
-    .overflow-scroll {
+    .m_overflow-scroll {
         overflow: scroll;
     }
 
-    .overflow-x-scroll {
+    .m_overflow-x-scroll {
         overflow-x: scroll;
     }
 
-    .overflow-y-scroll {
+    .m_overflow-y-scroll {
         overflow-y: scroll;
     }
 
@@ -1750,4 +1810,56 @@
         inset-inline-start: 0;
         inset-inline-end: 0;
     }
+
+    .m_inset-inline-start,
+    .m_start {
+        inset-inline-start: 0;
+    }
+
+    .m_inset-inline-end,
+    .m_end {
+        inset-inline-end: 0;
+    }
+
+    .m_top,
+    .m_top-0 {
+        top: 0;
+    }
+
+    .m_top-1 {
+        top: 1rem;
+    }
+
+    .m_top-2 {
+        top: 2rem;
+    }
+
+    .m_top-3 {
+        top: 3rem;
+    }
+
+    .m_top-4 {
+        top: 4rem;
+    }
+
+    .m_bottom,
+    .m_bottom-0 {
+        bottom: 0;
+    }
+
+    .m_bottom-1 {
+        bottom: 1rem;
+    }
+
+    .m_bottom-2 {
+        bottom: 2rem;
+    }
+
+    .m_bottom-3 {
+        bottom: 3rem;
+    }
+
+    .m_bottom-4 {
+        bottom: 4rem;
+    }
 }

package/src/styles/text.css

@@ -159,15 +159,23 @@
     color: var(--bgl-white);
 }
 
-.font-light,
-.txt-light {
+.font-thin,
+.txt-thin {
     font-weight: 100;
 }
 
-.bold,
-.txt-bold,
-.font-bold {
-    font-weight: 700;
+.extra-light,
+.font-extra-light,
+.txt-extra-light,
+.font-ultra-light,
+.txt-ultra-light {
+    font-weight: 200;
+}
+
+.light,
+.txt-light,
+.font-light {
+    font-weight: 300;
 }
 
 .regular,
@@ -176,6 +184,12 @@
     font-weight: 400;
 }
 
+.medium,
+.txt-medium,
+.font-medium {
+    font-weight: 500;
+}
+
 .semi,
 .semibold,
 .txt-semi,
@@ -186,6 +200,26 @@
     font-weight: 600;
 }
 
+.bold,
+.txt-bold,
+.font-bold {
+    font-weight: 700;
+}
+
+.extra-bold,
+.font-extra-bold,
+.txt-extra-bold,
+.font-ultra-bold,
+.txt-ultra-bold {
+    font-weight: 800;
+}
+
+.black,
+.txt-black,
+.font-black {
+    font-weight: 900;
+}
+
 .line-height-1 {
     line-height: 1;
 }
@@ -503,15 +537,23 @@
         color: var(--bgl-white);
     }
 
-    .m_font-light,
-    .m_txt-light {
+    .m_font-thin,
+    .m_txt-thin {
         font-weight: 100;
     }
 
-    .m_bold,
-    .m_txt-bold,
-    .m_font-bold {
-        font-weight: 700;
+    .m_extra-light,
+    .m_font-extra-light,
+    .m_txt-extra-light,
+    .m_font-ultra-light,
+    .m_txt-ultra-light {
+        font-weight: 200;
+    }
+
+    .m_light,
+    .m_txt-light,
+    .m_font-light {
+        font-weight: 300;
     }
 
     .m_regular,
@@ -520,6 +562,12 @@
         font-weight: 400;
     }
 
+    .m_medium,
+    .m_txt-medium,
+    .m_font-medium {
+        font-weight: 500;
+    }
+
     .m_semi,
     .m_semibold,
     .m_txt-semi,
@@ -530,7 +578,25 @@
         font-weight: 600;
     }
 
+    .m_bold,
+    .m_txt-bold,
+    .m_font-bold {
+        font-weight: 700;
+    }
 
+    .m_extra-bold,
+    .m_font-extra-bold,
+    .m_txt-extra-bold,
+    .m_font-ultra-bold,
+    .m_txt-ultra-bold {
+        font-weight: 800;
+    }
+
+    .m_black,
+    .m_txt-black,
+    .m_font-black {
+        font-weight: 900;
+    }
 
     .m_line-height-1 {
         line-height: 1;

package/src/styles/theme.css

@@ -17,6 +17,7 @@
     --bgl-gray-light: #f5f8fa;
     --bgl-gray-80: #e8ecef;
     --bgl-gray-20: rgba(183, 183, 183, 0.2);
+    --bgl-gray-40: rgba(183, 183, 183, 0.4);
     --bgl-pink: #f1416c;
     --bgl-red: #ed6c6f;
     --bgl-red-tint: #fbe2e2;

package/src/types/BagelForm.ts

@@ -8,6 +8,20 @@ export interface Attributes<T = any> {
 	[key: string]: AttributeValue | AttributeFn<T>
 }
 
+export type BagelFieldOptions = (
+	string
+	| (
+		{
+			label?: string
+			value: string | number
+		}
+		| string
+		| number
+		| Record<string, any>
+	)[]
+	| ((val: any, rowData?: Record<string, any>) => void)
+)
+
 export interface BaseBagelField<T = Record<string, any>> {
 	'$el'?: any
 	'id'?: string
@@ -19,7 +33,7 @@ export interface BaseBagelField<T = Record<string, any>> {
 	'required'?: boolean
 	'disabled'?: boolean
 	'helptext'?: string
-	'options'?: string | ({ label?: string, value: string | number } | string | number | Record<string, any>)[] | ((val: any, rowData?: Record<string, any>) => void)
+	'options'?: BagelFieldOptions
 	'defaultValue'?: any
 	'transform'?: (val?: any, rowData?: Record<string, any>) => any
 	'onUpdate'?: (val: any, rowData?: Record<string, any>) => void