@bagelink/vue 0.0.807 → 0.0.813

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

@@ -1 +1 @@
-{"version":3,"file":"lang.d.ts","sourceRoot":"","sources":["../../src/utils/lang.ts"],"names":[],"mappings":"AAcA,iBAAS,IAAI,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,CAAC,EAAE,CAAC,GAAG,MAAM,CAOlE;AAED,wBAAgB,OAAO;;;;;EAsBtB"}
+{"version":3,"file":"lang.d.ts","sourceRoot":"","sources":["../../src/utils/lang.ts"],"names":[],"mappings":"AAcA,iBAAS,IAAI,CAAC,CAAC,SAAS;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE,EAAE,MAAM,CAAC,EAAE,CAAC,GAAG,MAAM,CAOrE;AAED,wBAAgB,OAAO;;;;;EAsBtB"}

package/dist/utils/objects.d.ts

@@ -1,5 +1,4 @@
 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/dist/utils/strings.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"strings.d.ts","sourceRoot":"","sources":["../../src/utils/strings.ts"],"names":[],"mappings":"AAAA,wBAAgB,YAAY,CAC3B,GAAG,EAAE,MAAM,EACX,MAAM,EAAE,QAAQ,GAAG,OAAO,GAAG,OAAO,GAAG,WAAW,GAChD,MAAM,CAgCR"}
+{"version":3,"file":"strings.d.ts","sourceRoot":"","sources":["../../src/utils/strings.ts"],"names":[],"mappings":"AAAA,wBAAgB,YAAY,CAC3B,GAAG,EAAE,MAAM,EACX,MAAM,EAAE,QAAQ,GAAG,OAAO,GAAG,OAAO,GAAG,WAAW,GAChD,MAAM,CA+BR"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "0.0.807",
+  "version": "0.0.813",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Neveh Allon",
@@ -51,9 +51,9 @@
     "./vite.config.ts"
   ],
   "devDependencies": {
-    "@types/leaflet": "^1.9.12",
+    "@types/leaflet": "^1.9.13",
     "@types/signature_pad": "^2.3.6",
-    "@vue-macros/reactivity-transform": "^1.1.1",
+    "@vue-macros/reactivity-transform": "^1.1.2",
     "vue": "^3.5.12"
   },
   "peerDependencies": {
@@ -118,8 +118,8 @@
     "@vueuse/core": "^11.1.0",
     "axios": "^1.7.7",
     "floating-vue": "^5.2.2",
-    "libphonenumber-js": "1.11.11",
-    "signature_pad": "^5.0.3",
+    "libphonenumber-js": "1.11.12",
+    "signature_pad": "^5.0.4",
     "type-fest": "^4.26.1"
   },
   "scripts": {

package/src/components/Accordion.vue

@@ -2,7 +2,7 @@
 import { provide, reactive } from 'vue'
 
 const state = reactive({
-	openItem: null as string | null,
+	openItem: undefined as string | undefined,
 })
 
 provide('accordionState', state)

package/src/components/AccordionItem.vue

@@ -25,11 +25,11 @@ onMounted(() => {
 })
 
 interface AccordionState {
-	openItem: string | null
+	openItem?: string
 }
 
-const accordionState = inject<AccordionState | null>('accordionState', null)
-const id = props.id || Math.random().toString(36).substring(7)
+const accordionState = inject<AccordionState | undefined>('accordionState')
+const id = props.id || Math.random().toString(36).slice(7)
 
 if (accordionState) {
 	watch(
@@ -47,7 +47,7 @@ function toggle() {
 		if (isOpen) {
 			accordionState.openItem = id
 		} else if (accordionState.openItem === id) {
-			accordionState.openItem = null
+			accordionState.openItem = undefined
 		}
 	}
 }

package/src/components/AddressSearch.vue

@@ -18,7 +18,7 @@ function emitAddress(address: MapMarker) {
 }
 
 async function searchAddresses() {
-	const addressURL = addressInput.replace(/\s+/g, '+')
+	const addressURL = addressInput.replaceAll(/\s+/g, '+')
 	const geocodeUrl = `https://nominatim.openstreetmap.org/search?format=json&q=${encodeURI(addressURL)}`
 	const res = await fetch(geocodeUrl)
 	searchResults = await res.json() || []

package/src/components/BglVideo.vue

@@ -14,12 +14,11 @@ const aspectRatio = $computed(
 	() => props.aspectRatio?.replace(':', '/') || '16/9',
 )
 
-const embedType = $computed<'YouTube' | 'Vimeo' | null>(() => {
+const embedType = $computed<'YouTube' | 'Vimeo' | undefined>(() => {
 	const youtubeRegex = /youtube\.com|youtu\.be/
 	if (youtubeRegex.test(props.src || '')) return 'YouTube'
 	const vimeoRegex = /vimeo\.com/
 	if (vimeoRegex.test(props.src || '')) return 'Vimeo'
-	return null
 })
 
 const videoUrl = $computed(() => {

package/src/components/DataPreview.vue

@@ -16,7 +16,7 @@ const props = defineProps<{
 	excludeUnset?: boolean
 }>()
 
-const itemData = defineModel<Record<string, any>>('data', { default: {} })
+const itemData = defineModel<{ [key: string]: any }>('data', { default: {} })
 
 function dataTransform(dataValue: any): any {
 	if (!dataValue) return dataValue

package/src/components/MapEmbed.vue

@@ -30,16 +30,14 @@ const props = withDefaults(
 let L = $ref<any>()
 let map = $ref<Map>()
 const _markers = $ref<Marker[]>([])
-const id = $ref(Math.random().toString(36).substring(2, 10))
+const id = $ref(Math.random().toString(36).slice(2, 10))
 
 const defaultMarkerSVG = '<svg id="eCJDQPwuXje1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 36 36" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" project-id="ac827abc0a8c4922b76bac4df7bd7646" export-id="2cc86932ccbc4825a31fd063b3e75478" cached="false"><style><![CDATA[#eCJDQPwuXje3_ts {animation: eCJDQPwuXje3_ts__ts 3000ms linear infinite normal forwards}@keyframes eCJDQPwuXje3_ts__ts { 0% {transform: translate(18px,18px) scale(1,1)} 3.333333% {transform: translate(18px,18px) scale(1,1);animation-timing-function: cubic-bezier(0.42,0,0.58,1)} 100% {transform: translate(18px,18px) scale(1.8,1.8)}} #eCJDQPwuXje3 {animation: eCJDQPwuXje3_c_o 3000ms linear infinite normal forwards}@keyframes eCJDQPwuXje3_c_o { 0% {opacity: 0} 3.333333% {opacity: 1;animation-timing-function: cubic-bezier(0.42,0,0.58,1)} 100% {opacity: 0}}]]></style><ellipse rx="10.049312" ry="10.049312" transform="translate(18 18)" fill="#2e5bff" stroke-width="0"/><g id="eCJDQPwuXje3_ts" transform="translate(18,18) scale(1,1)"><ellipse id="eCJDQPwuXje3" rx="10.049312" ry="10.049312" transform="translate(0,0)" opacity="0" fill="#2e5bff" stroke-width="0"/></g></svg>'
 const leafletScriptUrl = 'https://unpkg.com/leaflet@1.9.4/dist/leaflet.js'
 
-function loadGlobalL() {
-	return new Promise(async (resolve) => {
-		while (!window.L) await sleep(100)
-		resolve(window.L)
-	})
+async function loadGlobalL() {
+	while (!window.L) await sleep(100)
+	return window.L
 }
 
 async function initializeMap() {

package/src/components/ModalForm.vue

@@ -24,7 +24,7 @@ const props = defineProps<{
 
 	onError?: (err: any) => void
 
-	modelValue?: Record<string, any>
+	modelValue?: { [key: string]: any }
 }>()
 
 const emit = defineEmits(['update:visible'])
@@ -38,7 +38,7 @@ const computedFormSchema = $computed(() => {
 	return props.schema
 })
 
-const formData = defineModel<Record<string, any>>('modelValue', {
+const formData = defineModel<{ [key: string]: any }>('modelValue', {
 	default: {},
 })
 const form = $ref<InstanceType<typeof BagelForm>>()
@@ -65,7 +65,7 @@ function runDelete() {
 	closeModal()
 }
 
-function setFormValues(values: Record<string, any>) {
+function setFormValues(values: { [key: string]: any }) {
 	Object.assign(formData, values)
 }
 

package/src/components/NavBar.vue

@@ -21,16 +21,19 @@ withDefaults(
 )
 
 let isOpen = $ref(true)
+
 function calcIsOpen() {
-	isOpen
-		= window.innerWidth < 1100
-		|| [null, 'true'].includes(localStorage.getItem('navOpen'))
+	isOpen = window.innerWidth < 1100
+
+	const storedNavOpenVal = localStorage.getItem('navOpen')
+	if (storedNavOpenVal === 'true' || storedNavOpenVal === null) isOpen = true
 }
 
 function toggleMenu() {
 	isOpen = !isOpen
 	localStorage.setItem('navOpen', `${isOpen}`)
 }
+
 onMounted(calcIsOpen)
 </script>
 

package/src/components/TableSchema.vue

@@ -64,7 +64,7 @@ const computedSchema = $computed(() => useBglSchema<T>({
 }))
 
 function transform(rowData: any) {
-	const obj: Record<string, any> = { ...rowData }
+	const obj: { [key: string]: any } = { ...rowData }
 	const fields = computedSchema.filter(f => f.id)
 
 	for (const field of fields) {
@@ -97,8 +97,8 @@ const computedData = computed(() => {
 						bValue = new Date(bValue).getTime()
 					}
 
-					const numAValue = Number.parseInt(`${aValue}`.replace(/[^\d.-]/g, ''), 10)
-					const numBValue = Number.parseInt(`${bValue}`.replace(/[^\d.-]/g, ''), 10)
+					const numAValue = Number.parseInt(`${aValue}`.replaceAll(/[^\d.-]/g, ''), 10)
+					const numBValue = Number.parseInt(`${bValue}`.replaceAll(/[^\d.-]/g, ''), 10)
 
 					if (!Number.isNaN(numAValue) && !Number.isNaN(numBValue)) {
 						if (sortDirection === 'ASC') return numAValue - numBValue
@@ -148,7 +148,7 @@ watch(
 // #endregion ? VIRTUAL LIST
 
 // #region ? SELECT COLUMN
-const allSelector = $ref<HTMLInputElement | null>(null)
+const allSelector = $ref<HTMLInputElement | undefined>()
 const computedSelectedItems = $computed(() => selectedItems.value)
 
 function updateAllSelectorState() {
@@ -160,8 +160,8 @@ function updateAllSelectorState() {
 	allSelector.indeterminate = !allSelected && computedSelectedItems.length > 0
 }
 
-function toggleSelectItem(item: Record<string, any>) {
-	if (!computedSelectedItems.length) {
+function toggleSelectItem(item: { [key: string]: any }) {
+	if (computedSelectedItems.length === 0) {
 		const obj = { ...item }
 		Object.keys(obj).forEach((key) => {
 			if (key.startsWith('_transformed_')) delete obj[key]

package/src/components/Zoomer.vue

@@ -35,7 +35,7 @@ const {
 
 const emit = defineEmits(['update:zoom'])
 // Reactive state using $ref (vue-macros)
-const zoomElement = $ref<HTMLElement | null>()
+const zoomElement = $ref<HTMLElement | undefined>()
 let containerWidth = $ref(1)
 let containerHeight = $ref(1)
 let containerLeft = $ref(0)
@@ -62,8 +62,8 @@ let pointerPosX = $ref(-1)
 let pointerPosY = $ref(-1)
 let twoFingerInitDist = $ref(0)
 let panLocked = $ref(true)
-let raf = $ref<number | null>(null)
-let tapDetector = $ref<TapDetector | null>(null)
+let raf = $ref<number | undefined>()
+let tapDetector = $ref<TapDetector | undefined>()
 
 const wrapperStyle = $computed(() => {
 	const translateXValue = containerWidth * animTranslateX
@@ -172,12 +172,11 @@ function calcTranslateLimit() {
 		let translateLimitY = (scale * imageToContainerRatio - 1) / 2
 		if (translateLimitY < 0) translateLimitY = 0
 		return { x: (scale - 1) / 2, y: translateLimitY }
-	} else {
-		const imageToContainerRatio = containerHeight * aspectRatio / containerWidth
-		let translateLimitX = (scale * imageToContainerRatio - 1) / 2
-		if (translateLimitX < 0) translateLimitX = 0
-		return { x: translateLimitX, y: (scale - 1) / 2 }
 	}
+	const imageToContainerRatio = containerHeight * aspectRatio / containerWidth
+	let translateLimitX = (scale * imageToContainerRatio - 1) / 2
+	if (translateLimitX < 0) translateLimitX = 0
+	return { x: translateLimitX, y: (scale - 1) / 2 }
 }
 
 function getMarginDirection() {

package/src/components/dashboard/Lineart.vue

@@ -58,7 +58,7 @@ const tooltipConfiguration = {
 }
 
 // Refs
-let chartSize = $ref<Size | null>(null)
+let chartSize = $ref<Size | undefined>()
 const chartContainer = $ref<HTMLElement>()
 const displayMarker = $ref(true)
 const chartMargin = $ref({
@@ -70,7 +70,7 @@ const chartMargin = $ref({
 
 // Functions
 function adjustChartSize() {
-	chartSize = null
+	chartSize = undefined
 	const el = chartContainer
 	if (!el) return
 	const { width, height } = el.getBoundingClientRect()
@@ -93,7 +93,7 @@ onUnmounted(() => {
 })
 
 // Style Configurations
-function dotStyling(ctx: Record<string, any>) {
+function dotStyling(ctx: { [key: string]: any }) {
 	return {
 		r: ctx.active ? 5 : 1,
 		fill: BRAND_COLOR,

package/src/components/form/BglField.vue

@@ -15,7 +15,7 @@ import {
 const props = withDefaults(
 	defineProps<{
 		field: Field<T>
-		modelValue: Record<string, any>
+		modelValue: { [key: string]: any }
 	}>(),
 	{
 		modelValue: () => ({}),
@@ -24,7 +24,7 @@ const props = withDefaults(
 
 const emit = defineEmits(['update:modelValue'])
 
-const customAttrs = $ref<Record<string, any>>({})
+const customAttrs = $ref<{ [key: string]: any }>({})
 
 const is = $computed(() => {
 	if (props.field.$el === 'text') return TextInput

package/src/components/form/BglFieldSet.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-const fieldSet = $ref<HTMLFieldSetElement | null>(null)
+const fieldSet = $ref<HTMLFieldSetElement | undefined>()
 const isDirty = $ref(false)
 const validateForm = () => fieldSet?.reportValidity()
 defineExpose({ validateForm, isDirty })

package/src/components/form/BglForm.vue

@@ -9,7 +9,7 @@ const props = withDefaults(
 		label?: string
 		id?: string
 		schema: BglFormSchemaFnT<any>
-		modelValue?: Record<string, any>
+		modelValue?: { [key: string]: any }
 		onDelete?: (id: string) => void
 		onSubmit?: (data: any) => void
 		status?: FormStatus
@@ -26,7 +26,7 @@ const slots = useSlots()
 const { showModal } = useModal()
 
 const instAt = new Date()
-const timeSinceInst = () => new Date().getTime() - instAt.getTime()
+const timeSinceInst = () => Date.now() - instAt.getTime()
 let formData = $ref(props.modelValue || {})
 let isDirty = $ref(false)
 let data = $computed({

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

@@ -11,7 +11,7 @@ const props = withDefaults(defineProps<{
 	value?: any
 }>(), { defaultValue: false })
 
-const inputId = $computed(() => props.id || Math.random().toString(36).substring(7))
+const inputId = $computed(() => props.id || Math.random().toString(36).slice(7))
 
 const checked = defineModel<boolean | undefined | any[]>('modelValue', { default: undefined })
 

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

@@ -10,7 +10,7 @@ const props = withDefaults(
 		editMode?: boolean
 		small?: boolean
 		required?: boolean
-		nativeInputAttrs?: Record<string, any>
+		nativeInputAttrs?: { [key: string]: any }
 	}>(),
 	{
 		editMode: true,

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

@@ -5,7 +5,7 @@ import '@vuepic/vue-datepicker/dist/main.css'
 const props = defineProps<{
 	label?: string
 	id?: string
-	options?: Record<string, any>
+	options?: { [key: string]: any }
 	showTimeWrap?: boolean
 	modelValue?: Date
 	allowedDates?: string[] | Date[]

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

@@ -45,9 +45,9 @@ async function fetchFiles() {
 
 onMounted(() => {
 	if (props.topic) fetchFiles()
-	if (!props.files && [file_bindkeys].flat().length) {
-		const ids = [file_bindkeys].flat().filter(Boolean)
-		if (!ids.length) return
+	if (!props.files && [file_bindkeys].flat().length > 0) {
+		const ids = [file_bindkeys].flat().filter(Boolean) as (string | number)[] | undefined
+		if (!ids?.length) return
 		if (props.multiple) {
 			ids.forEach((id) => {
 				void bagel
@@ -74,7 +74,7 @@ watch(
 		if (newFiles) {
 			const filesToAdd = [newFiles]
 				.flat()
-				.filter(f => !storageFiles.find(sf => sf[bindKey] === f[bindKey]))
+				.filter(f => !storageFiles.some(sf => sf[bindKey] === f[bindKey]))
 			for (const file of filesToAdd) {
 				storageFiles.push(file)
 			}

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

@@ -4,14 +4,14 @@ 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 digits = reactive<(number | string | undefined)[]>([])
 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('')
+	const pastedText = clipboardData?.getData('text').replaceAll(/\D/g, '') // Ensure only numeric digits are pasted
+	const pastedDigits = [...(pastedText ?? '')]
 	if (!pastedDigits) return
 	for (let i = 0; i < pastedDigits.length; i++) {
 		const digit = pastedDigits[i]
@@ -37,7 +37,7 @@ function handleKeyDown(event: KeyboardEvent, index: number) {
 	}
 
 	if (event.key === 'Backspace') {
-		digits[index] = null
+		digits[index] = undefined
 
 		if (index !== 0) {
 			const prevDigit = otpCont?.children[index - 1] as any
@@ -67,13 +67,13 @@ if (props.default && props.default.length === props.digitCount) {
 	}
 } else {
 	for (let i = 0; i < props.digitCount; i++) {
-		digits[i] = null
+		digits[i] = undefined
 	}
 }
 
 function isDigitsFull() {
 	for (const elem of digits) {
-		if (elem == null || elem == undefined) {
+		if (elem === undefined) {
 			return false
 		}
 	}

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

@@ -13,7 +13,7 @@ export interface TextInputProps {
 	pattern?: string
 	shrink?: boolean
 	disabled?: boolean
-	nativeInputAttrs?: Record<string, any>
+	nativeInputAttrs?: { [key: string]: any }
 	icon?: MaterialIcons
 	iconStart?: MaterialIcons
 	multiline?: boolean

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

@@ -12,7 +12,7 @@ const props = withDefaults(
 	}>(),
 	{
 		modelValue: '',
-		id: () => `radio-pill-${Math.random().toString(36).substring(2, 9)}`,
+		id: () => `radio-pill-${Math.random().toString(36).slice(2, 9)}`,
 		label: '',
 	},
 )

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

@@ -50,7 +50,7 @@ const config: {
 	name: string
 	command: any
 	icon: MaterialIcons
-	option?: Record<string, any>
+	option?: { [key: string]: any }
 	disabled?: () => boolean
 }[] = [
 	{

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

@@ -6,8 +6,8 @@ import SelectInput from '../SelectInput.vue'
 defineProps<{ config: ToolbarConfig }>()
 const emit = defineEmits(['action'])
 
-// const colorPicker = $ref<HTMLInputElement | null>(null)
-// const fontSizeInput = $ref<HTMLInputElement | null>(null)
+// const colorPicker = $ref<HTMLInputElement | undefined>()
+// const fontSizeInput = $ref<HTMLInputElement | undefined>()
 
 interface toolbarOption {
 	name: ToolbarConfigOption | 'separator'

package/src/components/form/inputs/RichText2/formatting.ts

@@ -104,7 +104,7 @@ function increaseFontSize() {
 }
 
 function decreaseFontSize() {
-
+// TODO:
 }
 
 function removeFormatting() {
@@ -135,7 +135,7 @@ function insertList(type: string) {
 		const list = document.createElement(type)
 		const listItem = document.createElement('li')
 		listItem.textContent = range.toString()
-		list.appendChild(listItem)
+		list.append(listItem)
 		range.deleteContents()
 		range.insertNode(list)
 	}
@@ -158,7 +158,9 @@ export function insertImage() {
 	console.log('image')
 	const { showModalForm } = useModal()
 	console.log(showModalForm)
-	showModalForm({ title: 'Upload Image', schema: [{ id: 'image', type: 'file' }], onSubmit: (data) => {} })
+	showModalForm({ title: 'Upload Image', schema: [{ id: 'image', type: 'file' }], onSubmit: (_data) => {
+		//
+	} })
 	// const url = prompt('Enter the image URL:')
 	// if (url) {
 	// 	const selection = window.getSelection()

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

@@ -7,7 +7,7 @@ import Toolbar from './Toolbar.vue'
 const props = defineProps<{ modelValue: string, toolbarConfig?: ToolbarConfig }>()
 const emit = defineEmits(['update:modelValue'])
 
-const editableContent = $ref<HTMLElement | null>(null)
+const editableContent = $ref<HTMLElement | undefined>()
 const defaultConfig: ToolbarConfig = [
 	'bold',
 	'italic',

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

@@ -32,14 +32,14 @@ const emit = defineEmits(['update:modelValue'])
 
 const searchPlaceholder = $computed(() => props.searchPlaceholder || 'Search')
 
-const searchInput = $ref<HTMLInputElement | null>(null)
+const searchInput = $ref<HTMLInputElement | undefined>()
 
 let selectedItems = $ref<Option[]>([])
 
 const selectedItemCount = $computed(() => selectedItems.length ?? 0)
 let search = $ref<string>('')
 
-const dropdown = $ref<InstanceType<typeof Dropdown> | null>(null)
+const dropdown = $ref<InstanceType<typeof Dropdown> | undefined>()
 let selected = $ref(false)
 let open = $ref(false)
 
@@ -64,7 +64,7 @@ const filteredOptions = $computed(() =>	props.options.filter((option) => {
 	const searchTerm = search
 		.split(/\s+/)
 		.filter(Boolean)
-		.map(t => new RegExp(t.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'), 'gi'))
+		.map(t => new RegExp(t.replaceAll(/[.*+?^${}()|[\]\\]/g, '\\$&'), 'gi'))
 	return (
 		Boolean(option)
 		&& (searchTerm.every(s => getLabel(option).match(s))
@@ -72,7 +72,7 @@ const filteredOptions = $computed(() =>	props.options.filter((option) => {
 	)
 }))
 
-const isSelected = (option: Option) => selectedItems.find(item => getValue(option) === getValue(item)) !== undefined
+const isSelected = (option: Option) => selectedItems.some(item => getValue(option) === getValue(item)) !== undefined
 
 function updateOpen(visible: boolean) {
 	open = visible
@@ -87,7 +87,7 @@ function updateOpen(visible: boolean) {
 		if (props.searchable && !props.multiselect && selectedItemCount) search = selectedLabel as string
 		setTimeout(
 			() => (searchInput as any)?.$el?.querySelector('input')?.focus(),
-			150,
+			350,
 		)
 	}
 }
@@ -100,7 +100,7 @@ function getLabel(option: Option) {
 }
 
 function getValue(option?: Option) {
-	if (!option) return undefined
+	if (!option) return
 	if (typeof option === 'string') return option
 	if (typeof option === 'number') return option
 	return option.value

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

@@ -121,8 +121,8 @@ function draw() {
 		if (!isEmpty()) url = save()
 		const ratio = props.ratio ?? 1 / 2
 		const { width } = c.getBoundingClientRect()
-		c.width = props.width ? Number(props.width.replace(/px/g, '')) : width
-		c.height = props.height ? Number(props.height.replace(/px/g, '')) : width * ratio
+		c.width = props.width ? Number(props.width.replaceAll('px', '')) : width
+		c.height = props.height ? Number(props.height.replaceAll('px', '')) : width * ratio
 		clear()
 		if (!props.clearOnResize && url !== undefined) fromDataURL(url)
 		if (props.waterMark) addWaterMark(props.waterMark)

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

@@ -6,14 +6,14 @@ import { VueDraggableNext } from 'vue-draggable-next'
 const props = withDefaults(
 	defineProps<{
 		description?: string
-		meta: Record<string, any> /* EntityMeta */
+		meta: { [key: string]: any } /* EntityMeta */
 		fieldname: string
 		bagelApp?: any
 		modelValue: any
 	}>(),
 	{
 		description: '',
-		bagelApp: null,
+		bagelApp: undefined,
 	},
 )
 const emits = defineEmits(['update:modelValue'])
@@ -21,10 +21,10 @@ let bagel: any
 let api: any
 const listRef = ref(props.modelValue)
 const fieldMeta = props.meta.doc_meta.fields.find(
-	(field: Record<string, any>) => field.fieldname === props.fieldname,
+	(field: { [key: string]: any }) => field.fieldname === props.fieldname,
 )
 const entityMeta = props.meta.links.find(
-	(link: Record<string, any>) => link.id === fieldMeta?.options,
+	(link: { [key: string]: any }) => link.id === fieldMeta?.options,
 )
 
 function handleUpdateModelValue(value: any, index: number, fieldname: string) {
@@ -58,7 +58,7 @@ function removeRow(idx: number) {
 }
 
 function ended() {
-	listRef.value.forEach((item: Record<string, any>, index: number) => {
+	listRef.value.forEach((item: { [key: string]: any }, index: number) => {
 		item.idx = index + 1
 	})
 	emits('update:modelValue', listRef.value)