@bagelink/vue 0.0.789 → 0.0.793

package/dist/types/index.d.ts

@@ -11,7 +11,7 @@ export type Tab = {
     id: string;
     icon?: MaterialIcons;
 } | string;
-export type ThemeType = 'light' | 'white' | 'red' | 'gray' | 'gray-light' | 'black' | 'green' | 'primary' | 'blue';
+export type ThemeType = 'light' | 'white' | 'red' | 'gray' | 'gray-light' | 'black' | 'green' | 'yellow' | 'primary' | 'blue';
 export type Option = string | number | Record<string, any> | {
     label: string;
     value: string | number;

package/dist/types/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/types/index.ts"],"names":[],"mappings":"AAAA,YAAY,EACX,QAAQ,EACR,mBAAmB,IAAI,uBAAuB,EAC9C,mBAAmB,EACnB,gBAAgB,EAChB,YAAY,GACZ,MAAM,kBAAkB,CAAA;AAEzB,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAEpD,YAAY,EAAE,aAAa,EAAE,CAAA;AAC7B,cAAc,aAAa,CAAA;AAC3B,cAAc,cAAc,CAAA;AAC5B,YAAY,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAA;AAEzC,YAAY,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;AACxC,YAAY,EAAE,MAAM,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAA;AAE/D,MAAM,MAAM,GAAG,GAAG;IACjB,KAAK,EAAE,MAAM,CAAA;IACb,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,CAAC,EAAE,aAAa,CAAA;CACpB,GAAG,MAAM,CAAA;AAEV,MAAM,MAAM,SAAS,GACpB,OAAO,GACL,OAAO,GACP,KAAK,GACL,MAAM,GACN,YAAY,GACZ,OAAO,GACP,OAAO,GACP,SAAS,GACT,MAAM,CAAA;AAET,MAAM,MAAM,MAAM,GACf,MAAM,GACN,MAAM,GACN,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GACnB;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE,CAAA;AAE5C,MAAM,MAAM,KAAK,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/types/index.ts"],"names":[],"mappings":"AAAA,YAAY,EACX,QAAQ,EACR,mBAAmB,IAAI,uBAAuB,EAC9C,mBAAmB,EACnB,gBAAgB,EAChB,YAAY,GACZ,MAAM,kBAAkB,CAAA;AAEzB,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAEpD,YAAY,EAAE,aAAa,EAAE,CAAA;AAC7B,cAAc,aAAa,CAAA;AAC3B,cAAc,cAAc,CAAA;AAC5B,YAAY,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAA;AAEzC,YAAY,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;AACxC,YAAY,EAAE,MAAM,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAA;AAE/D,MAAM,MAAM,GAAG,GAAG;IACjB,KAAK,EAAE,MAAM,CAAA;IACb,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,CAAC,EAAE,aAAa,CAAA;CACpB,GAAG,MAAM,CAAA;AAEV,MAAM,MAAM,SAAS,GACpB,OAAO,GACL,OAAO,GACP,KAAK,GACL,MAAM,GACN,YAAY,GACZ,OAAO,GACP,OAAO,GACP,QAAQ,GACR,SAAS,GACT,MAAM,CAAA;AAET,MAAM,MAAM,MAAM,GACf,MAAM,GACN,MAAM,GACN,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GACnB;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE,CAAA;AAE5C,MAAM,MAAM,KAAK,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,CAAA"}

package/dist/utils/BagelFormUtils.d.ts

@@ -67,19 +67,7 @@ export declare function bglForm(idOrField?: string | Field, ...schema: Field[]):
             submit: (...args: any[]) => void;
             "update:modelValue": (...args: any[]) => void;
             dirty: (...args: any[]) => void;
-        }, import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & Readonly<{
-            label?: string;
-            id?: string;
-            schema: import('..').BglFormSchemaFnT<any>;
-            modelValue?: Record<string, any>;
-            onDelete?: (id: string) => void;
-            onSubmit?: (data: any) => void;
-            status?: import('../components/form/BglForm.vue').FormStatus;
-        }> & Readonly<{
-            onSubmit?: ((...args: any[]) => any) | undefined;
-            "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
-            onDirty?: ((...args: any[]) => any) | undefined;
-        }>, {
+        }, import('vue').PublicProps, {
             modelValue: Record<string, any>;
         }, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, any, import('vue').ComponentProvideOptions, {
             P: {};
@@ -180,19 +168,7 @@ export declare function bglForm(idOrField?: string | Field, ...schema: Field[]):
             submit: (...args: any[]) => void;
             "update:modelValue": (...args: any[]) => void;
             dirty: (...args: any[]) => void;
-        }, import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & Readonly<{
-            label?: string;
-            id?: string;
-            schema: import('..').BglFormSchemaFnT<any>;
-            modelValue?: Record<string, any>;
-            onDelete?: (id: string) => void;
-            onSubmit?: (data: any) => void;
-            status?: import('../components/form/BglForm.vue').FormStatus;
-        }> & Readonly<{
-            onSubmit?: ((...args: any[]) => any) | undefined;
-            "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
-            onDirty?: ((...args: any[]) => any) | undefined;
-        }>, {
+        }, import('vue').PublicProps, {
             modelValue: Record<string, any>;
         }, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, any, import('vue').ComponentProvideOptions, {
             P: {};

package/dist/utils/BagelFormUtils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BagelFormUtils.d.ts","sourceRoot":"","sources":["../../src/utils/BagelFormUtils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,KAAK,cAAc,EAAE,KAAK,KAAK,EAAE,KAAK,MAAM,EAAY,MAAM,eAAe,CAAA;AAGjG,UAAU,YAAY;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAA;CACjB;AAED,KAAK,WAAW,GAAG,YAAY,CAAA;AAE/B,UAAU,gBAAiB,SAAQ,YAAY;IAC9C,IAAI,CAAC,EAAE,MAAM,GAAG,KAAK,GAAG,OAAO,CAAA;IAC/B,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,SAAS,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,UAAU,gBAAiB,SAAQ,YAAY;IAC9C,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,WAAW,CAAC,EAAE,OAAO,CAAA;CACrB;AAED,UAAU,eAAgB,SAAQ,YAAY;IAC7C,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,IAAI,CAAC,EAAE,MAAM,CAAA;CACb;AAED,KAAK,eAAe,GAAG,YAAY,CAAA;AAEnC,wBAAgB,YAAY,CAAC,CAAC,EAAE,EAAE,CAAC,EAAE,MAAM,EAAE,WAAW,GAAE,MAAM,GAAG,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAM,EAAE,IAAI,GAAE,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAM,GAAG,KAAK,CAAC,CAAC,CAAC,CAIjI;AAED,wBAAgB,QAAQ,CACvB,EAAE,EAAE,MAAM,EACV,KAAK,CAAC,EAAE,MAAM,EACd,OAAO,CAAC,EAAE,eAAe;;;;;;;;EAWzB;AAED,wBAAgB,QAAQ,CACvB,EAAE,EAAE,MAAM,EACV,KAAK,CAAC,EAAE,MAAM,EACd,OAAO,CAAC,EAAE,gBAAgB,GACxB,KAAK,CAgBP;AAED,wBAAgB,SAAS,CACxB,EAAE,EAAE,MAAM,EACV,KAAK,CAAC,EAAE,MAAM,EACd,OAAO,CAAC,EAAE,MAAM,EAAE,GAAG,CAAC,MAAM,MAAM,EAAE,CAAC,EACrC,MAAM,CAAC,EAAE,gBAAgB,GACvB,KAAK,CAgBP;AAED,wBAAgB,UAAU,CACzB,EAAE,EAAE,MAAM,EACV,KAAK,CAAC,EAAE,MAAM,EACd,OAAO,CAAC,EAAE,eAAe,GACvB,KAAK,CAQP;AAED,wBAAgB,SAAS,CACxB,EAAE,EAAE,MAAM,EACV,KAAK,CAAC,EAAE,MAAM,EACd,OAAO,CAAC,EAAE,WAAW,GACnB,KAAK,CAaP;AAED,wBAAgB,QAAQ,CACvB,EAAE,EAAE,MAAM,EACV,KAAK,CAAC,EAAE,MAAM,EACd,OAAO,CAAC,EAAE,eAAe,GACvB,KAAK,CAoBP;AAED,wBAAgB,MAAM,CAAC,GAAG,QAAQ,EAAE,KAAK,EAAE;;;;EAM1C;AAED,wBAAgB,OAAO,CAAC,SAAS,CAAC,EAAE,MAAM,GAAG,KAAK,EAAE,GAAG,MAAM,EAAE,KAAK,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAgBrE;AAED,wBAAgB,QAAQ,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,KAAK,CAOzF;AAED,wBAAgB,gBAAgB,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,cAAc,GAAG,KAAK,GAAG,SAAS,CASvF"}
+{"version":3,"file":"BagelFormUtils.d.ts","sourceRoot":"","sources":["../../src/utils/BagelFormUtils.ts"],"names":[],"mappings":"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"}

package/dist/utils/objects.d.ts

@@ -1,4 +1,5 @@
 import { BagelField } from '..';
+
 export declare function getPropByPath(obj: Record<string, any>, propPath?: string, bagelField?: BagelField): {};
 export declare function setPropByPath(obj: Record<string, any>, path?: string, value?: any): void;
 //# sourceMappingURL=objects.d.ts.map

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "0.0.789",
+  "version": "0.0.793",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Neveh Allon",
@@ -54,7 +54,7 @@
     "@types/leaflet": "^1.9.12",
     "@types/signature_pad": "^2.3.6",
     "@vue-macros/reactivity-transform": "^1.1.1",
-    "vue": "^3.5.8"
+    "vue": "^3.5.11"
   },
   "peerDependencies": {
     "@bagelink/sdk": "*",
@@ -105,20 +105,20 @@
     "access": "public"
   },
   "dependencies": {
-    "@tiptap/extension-image": "^2.7.2",
-    "@tiptap/extension-table": "^2.7.2",
-    "@tiptap/extension-table-cell": "^2.7.2",
-    "@tiptap/extension-table-header": "^2.7.2",
-    "@tiptap/extension-table-row": "^2.7.2",
-    "@tiptap/extension-youtube": "^2.7.2",
-    "@tiptap/pm": "^2.7.2",
-    "@tiptap/starter-kit": "^2.7.2",
-    "@tiptap/vue-3": "^2.7.2",
+    "@tiptap/extension-image": "^2.8.0",
+    "@tiptap/extension-table": "^2.8.0",
+    "@tiptap/extension-table-cell": "^2.8.0",
+    "@tiptap/extension-table-header": "^2.8.0",
+    "@tiptap/extension-table-row": "^2.8.0",
+    "@tiptap/extension-youtube": "^2.8.0",
+    "@tiptap/pm": "^2.8.0",
+    "@tiptap/starter-kit": "^2.8.0",
+    "@tiptap/vue-3": "^2.8.0",
     "@vuepic/vue-datepicker": "^8.8.1",
     "@vueuse/core": "^11.1.0",
     "axios": "^1.7.7",
     "floating-vue": "^5.2.2",
-    "libphonenumber-js": "1.11.9",
+    "libphonenumber-js": "1.11.11",
     "signature_pad": "^5.0.3",
     "type-fest": "^4.26.1"
   },

package/src/components/AccordionItem.vue

@@ -24,22 +24,32 @@ onMounted(() => {
 	if (props.open) isOpen = true
 })
 
-const accordionState
-	= (inject('accordionState') as { openItem: string | null }) || {}
+interface AccordionState {
+	openItem: string | null
+}
+
+const accordionState = inject<AccordionState | null>('accordionState', null)
 const id = props.id || Math.random().toString(36).substring(7)
 
-watch(
-	() => accordionState.openItem,
-	(currentOpenId) => {
-		if (currentOpenId !== id) isOpen = false
-	},
-	{ immediate: true }
-)
+if (accordionState) {
+	watch(
+		() => accordionState.openItem,
+		(currentOpenId) => {
+			if (currentOpenId !== id) isOpen = false
+		},
+		{ immediate: true }
+	)
+}
 
 function toggle() {
 	isOpen = !isOpen
-	if (isOpen && accordionState.openItem) accordionState.openItem = id
-	else if (accordionState.openItem === id) accordionState.openItem = null
+	if (accordionState) {
+		if (isOpen) {
+			accordionState.openItem = id
+		} else if (accordionState.openItem === id) {
+			accordionState.openItem = null
+		}
+	}
 }
 </script>
 

package/src/components/Badge.vue

@@ -3,7 +3,7 @@ import { Icon } from '@bagelink/vue'
 import type { MaterialIcons } from '@bagelink/vue'
 
 interface Props {
-	'color'?: 'green' | 'red' | 'blue' | 'light' | 'gray'
+	'color'?: 'green' | 'red' | 'blue' | 'light' | 'gray' | 'yellow'
 	'size'?: string
 	'text': string
 	'icon'?: MaterialIcons
@@ -65,7 +65,9 @@ const props = defineProps<Props>()
 }
 
 .pill.yellow {
-	background-color: var(--bgl-yellow);
+	background-color: var(--bgl-yellow-light);
+	color: var(--bgl-yellow);
+
 }
 
 .pill.Paid,

package/src/components/Btn.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import type { MaterialIcons, ThemeType } from '@bagelink/vue'
 import { MaterialIcon } from '@bagelink/vue'
 import { useSlots } from 'vue'
+import type { MaterialIcons, ThemeType } from '@bagelink/vue'
 
 const props = withDefaults(
 	defineProps<{
@@ -76,6 +76,7 @@ const themes: Partial<Record<ThemeType, typeof computedDefaultColors>> = {
 	'black': getThemeColors({ backgroundColor: 'var(--bgl-black)', color: 'var(--bgl-white)' }),
 	'green': getThemeColors({ backgroundColor: 'var(--bgl-green)', color: 'var(--bgl-white)' }),
 	'primary': getThemeColors({ backgroundColor: 'var(--bgl-primary)', color: 'var(--bgl-white)' }),
+	'yellow': getThemeColors({ backgroundColor: 'var(--bgl-yellow)', color: 'var(--bgl-black)' }),
 	'gray': getThemeColors({ backgroundColor: 'var(--bgl-gray-light)', color: 'var(--bgl-black)' }),
 	'light': getThemeColors({ backgroundColor: 'var(--bgl-primary-light)', color: 'var(--bgl-primary)' }),
 	'gray-light': getThemeColors({ backgroundColor: 'var(--bgl-gray-light)', color: 'var(--bgl-gray)' }),

package/src/components/Pill.vue

@@ -63,6 +63,7 @@ const themes: Partial<Record<ThemeType, typeof computedDefaultColors>> = {
 	'black': getThemeColors({ backgroundColor: 'var(--bgl-black)', color: 'var(--bgl-white)' }),
 	'green': getThemeColors({ backgroundColor: 'var(--bgl-green)', color: 'var(--bgl-white)' }),
 	'primary': getThemeColors({ backgroundColor: 'var(--bgl-primary)', color: 'var(--bgl-white)' }),
+	'yellow': getThemeColors({ backgroundColor: 'var(--bgl-yellow)', color: 'var(--bgl-black)' }),
 	'gray': getThemeColors({ backgroundColor: 'var(--bgl-gray-light)', color: 'var(--bgl-black)' }),
 	'light': getThemeColors({ backgroundColor: 'var(--bgl-primary-light)', color: 'var(--bgl-primary)' }),
 	'gray-light': getThemeColors({ backgroundColor: 'var(--bgl-gray-light)', color: 'var(--bgl-gray)' }),

package/src/components/form/BglField.vue

@@ -3,6 +3,7 @@ import {
 	CheckInput,
 	DateInput,
 	type Field,
+	FileUpload,
 	RichText,
 	SelectInput,
 	TextInput,
@@ -23,12 +24,19 @@ const props = withDefaults(
 
 const emit = defineEmits(['update:modelValue'])
 
+const customAttrs = $ref<Record<string, any>>({})
+
 const is = $computed(() => {
 	if (props.field.$el === 'text') return TextInput
+	if (props.field.$el === 'textarea') {
+		customAttrs.multiline = true
+		return TextInput
+	}
 	if (props.field.$el === 'select') return SelectInput
 	if (props.field.$el === 'toggle') return ToggleInput
 	if (props.field.$el === 'check') return CheckInput
 	if (props.field.$el === 'richtext') return RichText
+	if (props.field.$el === 'file') return FileUpload
 	if (props.field.$el === 'date') return DateInput
 	return props.field.$el ?? 'div'
 })
@@ -70,9 +78,10 @@ const computedOptions = $computed(
 	() => bindAttrs({ options: props.field.options }, fieldData, props.modelValue).options
 )
 
-const computedAttrs = $computed(
-	() => bindAttrs(props.field.attrs || {}, fieldData, props.modelValue)
-)
+const computedAttrs = $computed(() => {
+	const attrs = { ...customAttrs, ...(props.field.attrs || {}) }
+	return bindAttrs(attrs, fieldData, props.modelValue)
+})
 
 const computedClass = $computed(
 	() => classify(fieldData, props.modelValue, props.field.class, props.field.attrs?.class)

package/src/components/form/inputs/OTP.vue

@@ -0,0 +1,145 @@
+<script setup lang="ts">
+import { reactive } from 'vue'
+
+const props = defineProps<{ digitCount: number, default?: string, modelValue?: string }>()
+
+const emit = defineEmits(['update:modelValue', 'complete'])
+const digits = reactive<(number | string | null)[]>([])
+const otpCont = $ref<HTMLElement>()
+
+function handlePaste(event: ClipboardEvent, index: number) {
+	event.preventDefault()
+	const { clipboardData } = event
+	const pastedText = clipboardData?.getData('text').replace(/\D/g, '') // Ensure only numeric digits are pasted
+	const pastedDigits = pastedText?.split('')
+	if (!pastedDigits) return
+	for (let i = 0; i < pastedDigits.length; i++) {
+		const digit = pastedDigits[i]
+		if (index + i < digits.length) {
+			digits[index + i] = digit
+		}
+	}
+	emitUpdate()
+}
+
+function emitUpdate() {
+	if (isDigitsFull()) {
+		emit('complete', digits.join(''))
+	} else {
+		emit('update:modelValue', digits.join(''))
+	}
+}
+
+function handleKeyDown(event: KeyboardEvent, index: number) {
+	const noPreventKeys = ['Tab', 'ArrowRight', 'ArrowLeft', 'Control', 'Shift', 'Alt', 'Meta']
+	if (noPreventKeys.includes(event.key)) {
+		return
+	}
+
+	if (event.key === 'Backspace') {
+		digits[index] = null
+
+		if (index !== 0) {
+			const prevDigit = otpCont?.children[index - 1] as any
+			prevDigit.focus()
+		}
+		emitUpdate()
+		return
+	}
+
+	const numberRegex = /^\d$/
+	if (numberRegex.test(event.key)) {
+		digits[index] = event.key
+
+		if (index !== props.digitCount - 1) {
+			setTimeout(() => {
+				const nextDigit = otpCont?.children[index + 1] as any
+				nextDigit.focus()
+			}, 10)
+		}
+		emitUpdate()
+	}
+}
+
+if (props.default && props.default.length === props.digitCount) {
+	for (let i = 0; i < props.digitCount; i++) {
+		digits[i] = props.default.charAt(i)
+	}
+} else {
+	for (let i = 0; i < props.digitCount; i++) {
+		digits[i] = null
+	}
+}
+
+function isDigitsFull() {
+	for (const elem of digits) {
+		if (elem == null || elem == undefined) {
+			return false
+		}
+	}
+	return true
+}
+</script>
+
+<template>
+	<div ref="otpCont" class="otp_wrap">
+		<input
+			v-for="(el, ind) in digits"
+			:key="ind"
+			:value="digits[ind] || ''"
+			type="number"
+			inputmode="numeric"
+			class="digit-box"
+			:autofocus="ind === 0"
+			maxlength="1"
+			pattern="[0-9]*"
+			oninput="this.value = this.value.slice(0, 1);"
+			@keydown="handleKeyDown($event, ind)"
+			@paste="handlePaste($event, ind)"
+		>
+	</div>
+</template>
+
+<style scoped>
+.otp_wrap {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+}
+
+.digit-box {
+    height: 3rem;
+    flex-grow: 1;
+    border: 1px solid var(--bgl-primary-tint);
+    display: inline-block;
+    background: var(--bgl-gray-light);
+    border-radius: 5px;
+    margin: 5px;
+    text-align: center;
+    font-size: 2.4rem;
+    -moz-appearance: textfield; /* Firefox */
+    caret-color: transparent;
+}
+
+.digit-box::-webkit-outer-spin-button,
+.digit-box::-webkit-inner-spin-button {
+    -webkit-appearance: none; /* Chrome, Safari, Edge, Opera */
+    margin: 0;
+}
+
+.digit-box:focus {
+  outline: 1px solid var(--bgl-primary);
+  filter: drop-shadow(0 0 0.25rem var(--bgl-primary));
+}
+
+.digit-box[type="number"] {
+    -moz-appearance: textfield; /* Firefox */
+}
+
+@media screen and (max-width: 910px) {
+  .digit-box {
+    padding: 0.25rem;
+  }
+}
+</style>

package/src/components/form/inputs/RichText2/index.vue

@@ -1,8 +1,8 @@
 <script lang="ts" setup>
-import type { ToolbarConfig } from './richtext-types'
 import { onMounted, watch } from 'vue'
 import { applyFormatting } from './formatting'
 import Toolbar from './Toolbar.vue'
+import type { ToolbarConfig } from './richtext-types'
 
 const props = defineProps<{ modelValue: string, toolbarConfig?: ToolbarConfig }>()
 const emit = defineEmits(['update:modelValue'])
@@ -173,7 +173,7 @@ function handleKeyDown(event: KeyboardEvent) {
     1 #75975d, /* comments */
     2 yellow, /* literals */
     3 #a3c19a, /* numbers */
-    4 blue, /* functions, [] */
+    4 lightblue, /* functions, [] */
     5 orange, /* js others */
     6 black, /* not in use */
     7 #bc8abd, /* inside quotes, css properties, few chars */

package/src/components/form/inputs/SelectInput.vue

@@ -311,7 +311,7 @@ onMounted(() => {
 }
 .selected{
 	/* background: var(--bgl-primary-tint); */
-	background: var(--bgl-gray-light);
+	background: var(--bgl-selected);
 }
 </style>
 

package/src/components/form/inputs/TextInput.vue

@@ -194,7 +194,7 @@ onMounted(() => {
 	position: absolute;
     bottom: 0px;
     inset-inline-end: 0.25rem;
-	margin-block: calc(var(--input-height) / 2 - 16px);
+	margin-block: calc(var(--input-height) / 2 - 13px);
 }
 .textInputIconWrap input{
 	padding-inline-end: 2rem;
@@ -205,7 +205,7 @@ onMounted(() => {
 	position: absolute;
     bottom: 0px;
     inset-inline-start: 0.25rem;
-	margin-block: calc(var(--input-height) / 2 - 16px);
+	margin-block: calc(var(--input-height) / 2 - 13px);
 }
 .txtInputIconStart input{
 	padding-inline-start: 2rem;

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

@@ -5,6 +5,7 @@ export { default as DateInput } from './DateInput.vue'
 export { default as DatePicker } from './DatePicker.vue'
 export { default as FileUpload } from './FileUpload.vue'
 export { default as JSONInput } from './JSONInput.vue'
+export { default as OTP } from './OTP.vue'
 export { default as PasswordInput } from './PasswordInput.vue'
 export { default as RadioGroup } from './RadioGroup.vue'
 export { default as RadioPillsInput } from './RadioPillsInput.vue'

package/src/components/lightbox/Lightbox.vue

@@ -98,7 +98,7 @@ defineExpose({ open, close })
 				/>
 			</div>
 			<div class="bgl-lightbox relative txt-center" @click.stop>
-				<div class="flex start fixed top-1 w-100 space-between">
+				<div class="flex start fixed top-1 w-100 space-between start-1">
 					<Btn flat class="color-white" icon="close" @click="close" />
 					<div v-if="currentItem?.enableZoom && currentItem?.type === 'image'" class="center">
 						<Btn flat class="color-white" icon="remove" :disabled="zoom === 1" @click="zoom--" />

package/src/styles/layout.css

@@ -1755,6 +1755,34 @@
     align-self: start;
 }
 
+.sticky-5,
+.position-sticky-5 {
+    position: sticky !important;
+    top: 5rem;
+    align-self: start;
+}
+
+.sticky-6,
+.position-sticky-6 {
+    position: sticky !important;
+    top: 6rem;
+    align-self: start;
+}
+
+.sticky-7,
+.position-sticky-7 {
+    position: sticky !important;
+    top: 7rem;
+    align-self: start;
+}
+
+.sticky-8,
+.position-sticky-8 {
+    position: sticky !important;
+    top: 8rem;
+    align-self: start;
+}
+
 .flex {
     display: flex;
     align-items: center;

package/src/styles/mobilLayout.css

@@ -1408,6 +1408,34 @@
         align-self: start;
     }
 
+    .m_sticky-5,
+    .m_position-sticky-5 {
+        position: sticky !important;
+        top: 5rem;
+        align-self: start;
+    }
+
+    .m_sticky-6,
+    .m_position-sticky-6 {
+        position: sticky !important;
+        top: 6rem;
+        align-self: start;
+    }
+
+    .m_sticky-7,
+    .m_position-sticky-7 {
+        position: sticky !important;
+        top: 7rem;
+        align-self: start;
+    }
+
+    .m_sticky-8,
+    .m_position-sticky-8 {
+        position: sticky !important;
+        top: 8rem;
+        align-self: start;
+    }
+
     .m_flex-stretch {
         display: flex;
         align-items: stretch;

package/src/styles/theme.css

@@ -35,7 +35,8 @@
     --bgl-selection-color: var(--bgl-white);
     --bgl-scrollbar-thumb: var(--bgl-gray);
     --pill-btn-color: var(--bgl-white);
-    --pill-btn-bg: var(--placeholder-color)
+    --pill-btn-bg: var(--placeholder-color);
+    --bgl-selected: var(--bgl-gray-light)
 }
 
 /* TYPE */

package/src/types/index.ts

@@ -30,6 +30,7 @@ export type ThemeType = |
 	| 'gray-light'
 	| 'black'
 	| 'green'
+	| 'yellow'
 	| 'primary'
 	| 'blue' // ! blue does nothing
 

package/dist/components/AddressSaerch.vue.d.ts

@@ -1,7 +0,0 @@
-declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-    addressSelected: (...args: any[]) => void;
-}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{}>> & {
-    onAddressSelected?: ((...args: any[]) => any) | undefined;
-}, {}, {}>;
-export default _default;
-//# sourceMappingURL=AddressSaerch.vue.d.ts.map

package/dist/components/AddressSaerch.vue.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"AddressSaerch.vue.d.ts","sourceRoot":"","sources":["../../src/components/AddressSaerch.vue"],"names":[],"mappings":";;;;;AAwIA,wBAMG"}

package/dist/components/Popover.vue.d.ts

@@ -1,10 +0,0 @@
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>, {
-    trigger?(_: {}): any;
-}>;
-export default _default;
-type __VLS_WithTemplateSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};
-//# sourceMappingURL=Popover.vue.d.ts.map

package/dist/components/Popover.vue.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Popover.vue.d.ts","sourceRoot":"","sources":["../../src/components/Popover.vue"],"names":[],"mappings":"AAoBA;AAEA,OAAO,6BAA6B,CAAC;;;;AAmHrC,wBAAwG;AACxG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAAE,QAAO;QAClD,MAAM,EAAE,CAAC,CAAC;KACT,CAAA;CAAE,CAAC"}