@bagelink/vue 0.0.749 → 0.0.753

package/dist/types/index.d.ts

@@ -1,11 +1,11 @@
 import { MaterialIcons } from './materialIcons';
-export type { ModalComponentProps as ModalFormComponentProps, ModalApi, ModalComponentProps, ModalFormOptions, ModalOptions, } from '../plugins/modal';
+export type { ModalApi, ModalComponentProps as ModalFormComponentProps, ModalComponentProps, ModalFormOptions, ModalOptions, } from '../plugins/modal';
 export type { MaterialIcons };
-export type { Tables, TableToTypeMapping } from '../../../sdk/src/index.ts';
+export * from './BagelForm';
+export * from './BtnOptions';
 export type { StorageFile } from './file';
 export type { NavLink } from './NavLink';
-export * from './BtnOptions';
-export * from './BagelForm';
+export type { Tables, TableToTypeMapping } from '../../../sdk/src/index.ts';
 export type Tab = {
     label: string;
     id: string;

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,mBAAmB,IAAI,uBAAuB,EAC9C,QAAQ,EACR,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,YAAY,EAAE,MAAM,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAA;AAC/D,YAAY,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAA;AACzC,YAAY,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;AAExC,cAAc,cAAc,CAAA;AAC5B,cAAc,aAAa,CAAA;AAE3B,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;AAG5C,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,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/index.d.ts

@@ -9,9 +9,9 @@ export declare function bindAttrs<T = Record<string, any>>(attrs?: Attributes, f
 export declare function iffer(field: any, itemData: any): any;
 export declare function denullify(itemData?: Record<string, any>, fieldID?: string): any;
 export declare const isDate: (dateToTest: any) => boolean;
-export { formatString } from './strings';
 export * as bagelFormUtils from './BagelFormUtils';
 export { useLang } from './lang';
+export { formatString } from './strings';
 export declare function getFallbackSchema<T>(data?: any[], showFields?: string[]): BglFormSchemaT<T>;
 export declare const sleep: (ms?: number) => Promise<unknown>;
 export declare function appendScript(src: string): Promise<void>;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAG/D,wBAAgB,QAAQ,CAAC,EAAE,EAAE,MAAM,IAAI,EAAE,KAAK,SAAM,QAGnD;AAED,wBAAgB,UAAU,CAAC,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAK3D;AAED,wBAAsB,QAAQ,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,iBAGtE;AAED,wBAAgB,QAAQ,CAAC,GAAG,MAAM,EAAE,MAAM,EAAE,UAG3C;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,IAAI,QAIrE;AAED,wBAAgB,QAAQ,CAAC,QAAQ,CAAC,EAAE,GAAG,EAAE,GAAG,CAAC,EAAE,GAAG,EAAE,GAAG,OAAO,EAAE,GAAG,EAAE,UAKpE;AAED,wBAAgB,SAAS,CAAC,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,KAAK,CAAC,EAAE,UAAU,EAAE,QAAQ,CAAC,EAAE,GAAG,EAAE,GAAG,CAAC,EAAE,CAAC,OAU7F;AAED,wBAAgB,KAAK,CAAC,KAAK,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,OAM9C;AAED,wBAAgB,SAAS,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,OAAO,CAAC,EAAE,MAAM,OAGzE;AAED,eAAO,MAAM,MAAM,eAAgB,GAAG,YAA0C,CAAA;AAEhF,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AAExC,OAAO,KAAK,cAAc,MAAM,kBAAkB,CAAA;AAElD,OAAO,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAA;AAEhC,wBAAgB,iBAAiB,CAAC,CAAC,EAAE,IAAI,CAAC,EAAE,GAAG,EAAE,EAAE,UAAU,CAAC,EAAE,MAAM,EAAE,GAAG,cAAc,CAAC,CAAC,CAAC,CAa3F;AAED,eAAO,MAAM,KAAK,QAAQ,MAAM,qBAA0D,CAAA;AAE1F,wBAAgB,YAAY,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAYvD"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAG/D,wBAAgB,QAAQ,CAAC,EAAE,EAAE,MAAM,IAAI,EAAE,KAAK,SAAM,QAGnD;AAED,wBAAgB,UAAU,CAAC,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAK3D;AAED,wBAAsB,QAAQ,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,iBAGtE;AAED,wBAAgB,QAAQ,CAAC,GAAG,MAAM,EAAE,MAAM,EAAE,UAG3C;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,IAAI,QAIrE;AAED,wBAAgB,QAAQ,CAAC,QAAQ,CAAC,EAAE,GAAG,EAAE,GAAG,CAAC,EAAE,GAAG,EAAE,GAAG,OAAO,EAAE,GAAG,EAAE,UAKpE;AAED,wBAAgB,SAAS,CAAC,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,KAAK,CAAC,EAAE,UAAU,EAAE,QAAQ,CAAC,EAAE,GAAG,EAAE,GAAG,CAAC,EAAE,CAAC,OAU7F;AAED,wBAAgB,KAAK,CAAC,KAAK,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,OAM9C;AAED,wBAAgB,SAAS,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,OAAO,CAAC,EAAE,MAAM,OAGzE;AAED,eAAO,MAAM,MAAM,eAAgB,GAAG,YAA0C,CAAA;AAEhF,OAAO,KAAK,cAAc,MAAM,kBAAkB,CAAA;AAElD,OAAO,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAA;AAEhC,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AAExC,wBAAgB,iBAAiB,CAAC,CAAC,EAAE,IAAI,CAAC,EAAE,GAAG,EAAE,EAAE,UAAU,CAAC,EAAE,MAAM,EAAE,GAAG,cAAc,CAAC,CAAC,CAAC,CAa3F;AAED,eAAO,MAAM,KAAK,QAAQ,MAAM,qBAA0D,CAAA;AAE1F,wBAAgB,YAAY,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAYvD"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "0.0.749",
+  "version": "0.0.753",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Neveh Allon",

package/src/components/Btn.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
+import { MaterialIcon } from '@bagelink/vue'
 import { useSlots } from 'vue'
 import type { MaterialIcons, ThemeType } from '@bagelink/vue'
-import { MaterialIcon } from '@bagelink/vue'
 
 const props = withDefaults(
 	defineProps<{
@@ -72,8 +72,8 @@ function getThemeColors(theme: Partial<typeof computedDefaultColors>): typeof co
 
 const themes: Partial<Record<ThemeType, typeof computedDefaultColors>> = {
 	'red': getThemeColors({ backgroundColor: 'var(--bgl-red)' }),
-	'white': getThemeColors({ backgroundColor: 'var(--bgl-white)' }),
-	'black': getThemeColors({ backgroundColor: 'var(--bgl-black)' }),
+	'white': getThemeColors({ backgroundColor: 'var(--bgl-white)', color: 'var(--bgl-black)' }),
+	'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)' }),
 	'gray': getThemeColors({ backgroundColor: 'var(--bgl-gray-light)', color: 'var(--bgl-black)' }),

package/src/components/DataPreview.vue

@@ -1,13 +1,13 @@
 <script lang="ts" setup>
 import {
 	BglField,
-	type BglFormSchemaT,
 	Title,
 	getFallbackSchema,
 	iffer,
 	isDate,
 	keyToLabel,
 } from '@bagelink/vue'
+import type { BglFormSchemaT } from '@bagelink/vue'
 
 const props = defineProps<{
 	showFields?: string[]

package/src/components/Dropdown.vue

@@ -2,9 +2,9 @@
 import { Btn, type MaterialIcons } from '@bagelink/vue'
 import { Dropdown as DDown } from 'floating-vue'
 
-export declare type Side = 'top' | 'right' | 'bottom' | 'left' | 'auto'
-export declare type Alignment = 'start' | 'end'
-export declare type AlignedPlacement = `${Side}-${Alignment}`
+export type Side = 'top' | 'right' | 'bottom' | 'left' | 'auto'
+export type Alignment = 'start' | 'end'
+export type AlignedPlacement = 'auto' | `${Side}-${Alignment}`
 
 defineProps<{
 	value?: string
@@ -17,7 +17,7 @@ defineProps<{
 	border?: boolean
 	outline?: boolean
 	round?: boolean
-	placement?: 'auto' | AlignedPlacement
+	placement?: AlignedPlacement
 	noAutoFocus?: boolean
 	// theme
 	// referenceNode

package/src/components/MapEmbed.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import './leaflet/leaflet.css'
+import { appendScript, sleep } from '@bagelink/vue'
 import { onMounted, watch } from 'vue'
 import type { LatLngExpression, Layer, Map, Marker } from 'leaflet'
-import { appendScript, sleep } from '@bagelink/vue'
+import './leaflet/leaflet.css'
 
 type MapMarker = {
 	lat: number
@@ -57,12 +57,12 @@ async function initializeMap() {
 
 function addMarker(L: any, latlng: LatLngExpression) {
 	const iconSVG = props.markerIcon || defaultMarkerSVG
-	const customIcon = L.icon({
+	const customIcon = L?.icon({
 		iconUrl: `data:image/svg+xml;utf8,${encodeURIComponent(iconSVG)}`,
 		iconSize: [32, 32],
 	})
 
-	const marker = L.marker(latlng, { icon: customIcon }).addTo(map as Map)
+	const marker = L?.marker(latlng, { icon: customIcon }).addTo(map as Map)
 	_markers.push(marker)
 }
 
@@ -72,20 +72,20 @@ function fitMarkers(L: any) {
 	}
 }
 
-watch(
-	() => props.markers,
-	async (markers) => {
-		_markers.forEach(marker => marker.remove())
-		if (!markers) return
-		for (const marker of markers) {
-			const [lat, lon] = Array.isArray(marker) ? marker : [marker.lat, marker.lon]
-			if (!map) initializeMap()
-			addMarker(L, [lat, lon])
-			fitMarkers(L)
-		}
-	},
-	{ immediate: true }
-)
+async function watchMarkers(markers?: MapMarker[]) {
+	if (!L) L = await loadGlobalL()
+	_markers.forEach(marker => marker.remove())
+	if (!markers) return
+	for (const marker of markers) {
+		const [lat, lon] = Array.isArray(marker) ? marker : [marker.lat, marker.lon]
+		if (!map) initializeMap()
+		addMarker(L, [lat, lon])
+		fitMarkers(L)
+	}
+}
+
+watch(() => props.markers, watchMarkers, { immediate: true })
+watch(() => props.center, center => map?.setView(center, props.zoom), { immediate: true })
 
 onMounted(initializeMap)
 </script>

package/src/components/Modal.vue

@@ -1,10 +1,4 @@
 <script lang="ts" setup>
-import {
-	onMounted,
-	onUnmounted,
-	useSlots,
-	watch,
-} from 'vue'
 import {
 	Btn,
 	type BtnOptions,
@@ -12,6 +6,12 @@ import {
 	Title,
 	useEscape,
 } from '@bagelink/vue'
+import {
+	onMounted,
+	onUnmounted,
+	useSlots,
+	watch,
+} from 'vue'
 import '../styles/modal.css'
 
 const props = defineProps<{

package/src/components/NavBar.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { MaterialIcons, NavLink } from '@bagelink/vue'
 import { MaterialIcon } from '@bagelink/vue'
+import type { MaterialIcons, NavLink } from '@bagelink/vue'
 
 withDefaults(
 	defineProps<{

package/src/components/TableSchema.vue

@@ -7,8 +7,8 @@ import {
 	keyToLabel,
 	useBglSchema,
 } from '@bagelink/vue'
-import { computed, useSlots, watch } from 'vue'
 import { useVirtualList } from '@vueuse/core'
+import { computed, useSlots, watch } from 'vue'
 
 export type SortDirectionsT = 'ASC' | 'DESC'
 const props = defineProps<{

package/src/components/dashboard/Lineart.vue

@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import { onMounted, onUnmounted } from 'vue'
 import {
 	Area,
 	Chart,
@@ -8,7 +9,6 @@ import {
 	Tooltip,
 } from 'vue3-charts'
 import type { ChartAxis, Data } from 'vue3-charts/dist/types'
-import { onMounted, onUnmounted } from 'vue'
 
 const props = defineProps<{ data: Data[], locale: string }>()
 

package/src/components/form/index.ts

@@ -1,5 +1,5 @@
+export { default as BglField } from './BglField.vue'
 export { default as BglForm } from './BglForm.vue'
 export { default as BagelForm } from './BglForm.vue'
-export { default as BglField } from './BglField.vue'
 export { default as BglMultiStepForm } from './BglMultiStepForm.vue'
 export * from './inputs'

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

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import VDatepicker, { type DatePickerInstance, type VueDatePickerProps } from '@vuepic/vue-datepicker'
-import '@vuepic/vue-datepicker/dist/main.css'
 import { onMounted } from 'vue'
+import '@vuepic/vue-datepicker/dist/main.css'
 
 const props = withDefaults(
 	defineProps<{

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

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { onMounted, watch } from 'vue'
 import { Btn, IMAGE_FORMATS_REGEXP, Icon, type StorageFile, useBagel } from '@bagelink/vue'
+import { onMounted, watch } from 'vue'
 
 const props = defineProps<{
 	label?: string

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

@@ -6,15 +6,15 @@ import {
 	bagelFormUtils,
 	useModal,
 } from '@bagelink/vue'
-import { onBeforeUnmount, onMounted, watch } from 'vue'
-import StarterKit from '@tiptap/starter-kit'
-import { Editor, EditorContent } from '@tiptap/vue-3'
 import Image from '@tiptap/extension-image'
-import YouTube from '@tiptap/extension-youtube'
 import Table from '@tiptap/extension-table'
-import TableRow from '@tiptap/extension-table-row'
 import TableCell from '@tiptap/extension-table-cell'
 import TableHeader from '@tiptap/extension-table-header'
+import TableRow from '@tiptap/extension-table-row'
+import YouTube from '@tiptap/extension-youtube'
+import StarterKit from '@tiptap/starter-kit'
+import { Editor, EditorContent } from '@tiptap/vue-3'
+import { onBeforeUnmount, onMounted, watch } from 'vue'
 import type { MaterialIcons } from '@bagelink/vue'
 
 const props = defineProps<{ modelValue: string }>()
@@ -57,22 +57,19 @@ const config: {
 		name: 'Bold',
 		command: () => focus().toggleBold().run(),
 		icon: 'format_bold',
-		disabled: () => !editor?.can().chain().focus().toggleBold()
-			.run(),
+		disabled: () => !editor?.can().chain().focus().toggleBold().run(),
 	},
 	{
 		name: 'Italic',
 		command: () => focus().toggleItalic().run(),
 		icon: 'format_italic',
-		disabled: () => !editor?.can().chain().focus().toggleItalic()
-			.run(),
+		disabled: () => !editor?.can().chain().focus().toggleItalic().run(),
 	},
 	{
 		name: 'Strike',
 		command: () => focus().toggleStrike().run(),
 		icon: 'format_strikethrough',
-		disabled: () => !editor?.can().chain().focus().toggleStrike()
-			.run(),
+		disabled: () => !editor?.can().chain().focus().toggleStrike().run(),
 	},
 	{
 		name: 'Code Text',
@@ -190,15 +187,13 @@ const config: {
 		name: 'Undo',
 		command: () => focus().undo().run(),
 		icon: 'undo',
-		disabled: () => !editor?.can().chain().focus().undo()
-			.run(),
+		disabled: () => !editor?.can().chain().focus().undo().run(),
 	},
 	{
 		name: 'Redo',
 		command: () => focus().redo().run(),
 		icon: 'redo',
-		disabled: () => !editor?.can().chain().focus().redo()
-			.run(),
+		disabled: () => !editor?.can().chain().focus().redo().run(),
 	},
 ]
 

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

@@ -1,8 +1,8 @@
 <script lang="ts" setup>
 import { onMounted, watch } from 'vue'
+import { applyFormatting } from './formatting'
 import Toolbar from './Toolbar.vue'
 import type { ToolbarConfig } from './richtext-types'
-import { applyFormatting } from './formatting'
 
 const props = defineProps<{ modelValue: string, toolbarConfig?: ToolbarConfig }>()
 const emit = defineEmits(['update:modelValue'])

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

@@ -1,6 +1,4 @@
 <script lang="ts" setup>
-import { onMounted, watch } from 'vue'
-import 'floating-vue/style.css'
 import {
 	Btn,
 	Card,
@@ -10,6 +8,8 @@ import {
 	type Option,
 	TextInput,
 } from '@bagelink/vue'
+import { onMounted, watch } from 'vue'
+import 'floating-vue/style.css'
 
 const props = defineProps<{
 	options: Option[]

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

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import SignaturePad from 'signature_pad'
-import type { Options as SignaturePadOptions } from 'signature_pad'
 import { Btn } from '@bagelink/vue'
+import SignaturePad from 'signature_pad'
 import { onMounted, watch } from 'vue'
+import type { Options as SignaturePadOptions } from 'signature_pad'
 
 interface WaterMark {
 	text: string

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

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { VueDraggableNext } from 'vue-draggable-next'
-import { onMounted, ref } from 'vue'
 import { Btn, MaterialIcon, formatString } from '@bagelink/vue'
+import { onMounted, ref } from 'vue'
+import { VueDraggableNext } from 'vue-draggable-next'
 
 const props = withDefaults(
 	defineProps<{

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

@@ -8,13 +8,13 @@ import {
 	allCountries,
 	debounce,
 } from '@bagelink/vue'
-import { type Raw, type StyleValue, onMounted, watch } from 'vue'
+import axios from 'axios'
 import {
 	type CountryCode,
 	type NumberFormat,
 	parsePhoneNumberFromString,
 } from 'libphonenumber-js'
-import axios from 'axios'
+import { type Raw, type StyleValue, onMounted, watch } from 'vue'
 
 export interface Props {
 	label?: string
@@ -139,7 +139,7 @@ const filteredCountries = $computed(() => {
 	if (props.excludeCountries.length) {
 		return props.allCountries.filter(
 			({ iso2 }) => !props.excludeCountries.includes(iso2.toUpperCase())
-			&& !props.excludeCountries.includes(iso2.toLowerCase()),
+				&& !props.excludeCountries.includes(iso2.toLowerCase()),
 		)
 	}
 	return props.allCountries
@@ -157,8 +157,8 @@ const sortedCountries = $computed(() => {
 	return countriesList
 		.filter(
 			c => new RegExp(cleanInput, 'i').test(c.name || '')
-			|| new RegExp(cleanInput, 'i').test(c.iso2 || '')
-			|| new RegExp(cleanInput, 'i').test(c.dialCode || ''),
+				|| new RegExp(cleanInput, 'i').test(c.iso2 || '')
+				|| new RegExp(cleanInput, 'i').test(c.dialCode || ''),
 		)
 		.filter(Boolean)
 })

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

@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { onMounted, watch } from 'vue'
 import {
 	MaterialIcon,
 	type MaterialIcons,
 	debounce,
 } from '@bagelink/vue'
+import { onMounted, watch } from 'vue'
 
 const props = withDefaults(
 	defineProps<{
@@ -186,24 +186,26 @@ onMounted(() => {
 	font-size: var(--label-font-size);
 }
 
-.textInputIconWrap {
-	position: relative;
-}
-
 .textInputIconWrap .bgl_icon-font {
-	position: absolute;
-	inset-inline-end: 0.7rem;
-	bottom: 50%;
-	line-height: 0;
 	color: var(--bgl-gray);
+	position: absolute;
+    bottom: 0px;
+    inset-inline-end: 0.25rem;
+	margin-block: calc(var(--input-height) / 2 - 16px);
+}
+.textInputIconWrap input{
+	padding-inline-end: 2rem;
 }
 
 .txtInputIconStart .iconStart {
-	position: absolute;
-	inset-inline-start: 0.7rem;
-	top: 50%;
-	line-height: 0;
 	color: var(--bgl-gray);
+	position: absolute;
+    bottom: 0px;
+    inset-inline-start: 0.25rem;
+	margin-block: calc(var(--input-height) / 2 - 16px);
+}
+.txtInputIconStart input{
+	padding-inline-start: 2rem;
 }
 
 .txtInputIconStart textarea {

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

@@ -1,18 +1,18 @@
+export { default as Checkbox } from './Checkbox.vue'
 export { default as CheckInput } from './CheckInput.vue'
+export { default as ColorPicker } from './ColorPicker.vue'
 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 PasswordInput } from './PasswordInput.vue'
+export { default as RadioGroup } from './RadioGroup.vue'
+export { default as RadioPillsInput } from './RadioPillsInput.vue'
+export { default as RichText } from './RichText.vue'
+export { default as RichText2 } from './RichText2/index.vue'
 export { default as SelectInput } from './SelectInput.vue'
+export { default as SignaturePad } from './SignaturePad.vue'
 export { default as TableField } from './TableField.vue'
+export { default as TelInput } from './TelInput.vue'
 export { default as TextInput } from './TextInput.vue'
-export { default as Checkbox } from './Checkbox.vue'
-export { default as ColorPicker } from './ColorPicker.vue'
-export { default as DatePicker } from './DatePicker.vue'
-export { default as RadioPillsInput } from './RadioPillsInput.vue'
-export { default as FileUpload } from './FileUpload.vue'
 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 { default as RadioGroup } from './RadioGroup.vue'
-export { default as PasswordInput } from './PasswordInput.vue'

package/src/components/formkit/FileUploader.vue

@@ -9,10 +9,10 @@ interface UploadFile {
 	uploaded: boolean
 }
 
-import { onMounted, onUnmounted } from 'vue'
-
 import { Btn, Icon, useBagel } from '@bagelink/vue'
 
+import { onMounted, onUnmounted } from 'vue'
+
 const props = withDefaults(
 	defineProps<{
 		context: Record<string, any>