@bagelink/vue 0.0.805 → 0.0.809

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

@@ -2,6 +2,10 @@
 import { Btn, IMAGE_FORMATS_REGEXP, Icon, type StorageFile, useBagel } from '@bagelink/vue'
 import { onMounted, watch } from 'vue'
 
+type StrKey = keyof StorageFile
+
+type FSValue = string[] | string | number
+
 const props = defineProps<{
 	label?: string
 	multiple?: boolean
@@ -17,6 +21,8 @@ const props = defineProps<{
 
 const emit = defineEmits(['update:modelValue', 'addFileStart'])
 
+const bindKey: StrKey = props.bindkey || 'id'
+
 const bagel = useBagel()
 
 interface QueueFile {
@@ -27,12 +33,6 @@ interface QueueFile {
 	uploaded?: boolean
 }
 
-type StrKey = keyof StorageFile
-
-type FSValue = string[] | string | number
-
-const bindKey: StrKey = props.bindkey || 'id'
-
 const isImage = (str: string) => IMAGE_FORMATS_REGEXP.test(str)
 
 let file_bindkeys = $ref<FSValue>(props.modelValue || [])
@@ -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,15 +32,15 @@ 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('')
-
-const dropdown = $ref<InstanceType<typeof Dropdown> | null>(null)
+let search = $ref<string>('')
 
+const dropdown = $ref<InstanceType<typeof Dropdown> | undefined>()
+let selected = $ref(false)
 let open = $ref(false)
 
 function openOptions() {
@@ -48,18 +48,7 @@ function openOptions() {
 	// updateOpen(true);
 }
 
-function updateOpen(visible: boolean) {
-	open = visible
-	if (!open) { search = '' }
-	else {
-		setTimeout(
-			() => (searchInput as any)?.$el?.querySelector('input')?.focus(),
-			100,
-		)
-	}
-}
-
-const selectedLabel = $computed(() => {
+const selectedLabel = $computed((): string => {
 	if (selectedItemCount === 0) return props.placeholder || 'Select'
 	if (selectedItemCount > 4) {
 		const str = selectedItems
@@ -71,6 +60,38 @@ const selectedLabel = $computed(() => {
 	return selectedItems.map(item => getLabel(item)).join(', ')
 })
 
+const filteredOptions = $computed(() =>	props.options.filter((option) => {
+	const searchTerm = search
+		.split(/\s+/)
+		.filter(Boolean)
+		.map(t => new RegExp(t.replaceAll(/[.*+?^${}()|[\]\\]/g, '\\$&'), 'gi'))
+	return (
+		Boolean(option)
+		&& (searchTerm.every(s => getLabel(option).match(s))
+		)
+	)
+}))
+
+const isSelected = (option: Option) => selectedItems.some(item => getValue(option) === getValue(item)) !== undefined
+
+function updateOpen(visible: boolean) {
+	open = visible
+	if (!open) {
+		if (props.searchable && !props.multiselect && !search && !selected) selectedItems = []
+		if (props.searchable && !props.multiselect && search && filteredOptions.length === 1 && !isSelected(filteredOptions[0])) {
+			select(filteredOptions[0])
+		}
+		search = ''
+	}
+	else {
+		if (props.searchable && !props.multiselect && selectedItemCount) search = selectedLabel as string
+		setTimeout(
+			() => (searchInput as any)?.$el?.querySelector('input')?.focus(),
+			150,
+		)
+	}
+}
+
 function getLabel(option: Option) {
 	if (!option) return ''
 	if (typeof option === 'string') return option
@@ -79,27 +100,14 @@ 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
 }
 
-const isSelected = (option: Option) => selectedItems.find(item => getValue(option) === getValue(item)) !== undefined
-
-const filteredOptions = $computed(() =>	props.options.filter((option) => {
-	const searchTerm = search
-		.split(/\s+/)
-		.filter(Boolean)
-		.map(t => new RegExp(t, 'gi'))
-	return (
-		Boolean(option)
-		&& (searchTerm.every(s => getLabel(option).match(s))
-		)
-	)
-}))
-
 function select(option: Option) {
+	selected = true
 	const existingIndex = selectedItems.findIndex(
 		item => getValue(item) === getValue(option),
 	)
@@ -191,7 +199,18 @@ onMounted(() => {
 			<label>
 				{{ label }}
 				<div class="flex gap-05">
+					<TextInput
+						v-if="searchable && open"
+						ref="searchInput"
+						v-model="search"
+						class="mb-0"
+						dense
+						:placeholder="searchPlaceholder"
+						icon="search"
+						@input="selected = false"
+					/>
 					<button
+						v-else
 						:disabled="disabled"
 						type="button"
 						class="selectinput-btn"
@@ -234,14 +253,6 @@ onMounted(() => {
 			class="p-05"
 			:style="{ width: fullWidth ? '100%' : 'auto' }"
 		>
-			<TextInput
-				v-if="searchable"
-				ref="searchInput"
-				v-model="search"
-				dense
-				:placeholder="searchPlaceholder"
-				icon="search"
-			/>
 			<div class="selectinput-options" :class="{ multiselect }">
 				<div
 					v-for="(option, i) in filteredOptions"

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)

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

@@ -121,7 +121,7 @@ let selectedIndex = $ref<number>()
 const dropdownOpenDirection = $ref('below')
 const searchQuery = $ref('')
 
-// const refInput = $ref<HTMLInputElement | null>(null)
+// const refInput = $ref<HTMLInputElement | undefined>()
 
 // Computed: activeCountry
 const activeCountry = $computed(() => props.allCountries.find(
@@ -132,11 +132,11 @@ const activeCountry = $computed(() => props.allCountries.find(
 const isPreferred = (country?: Country) => props.preferredCountries.includes(country?.iso2 as CountryCode)
 
 const filteredCountries = $computed(() => {
-	if (props.onlyCountries.length) {
+	if (props.onlyCountries.length > 0) {
 		return props.allCountries.filter(({ iso2 }) => props.onlyCountries.some(c => c.toUpperCase() === iso2),
 		)
 	}
-	if (props.excludeCountries.length) {
+	if (props.excludeCountries.length > 0) {
 		return props.allCountries.filter(
 			({ iso2 }) => !props.excludeCountries.includes(iso2.toUpperCase())
 				&& !props.excludeCountries.includes(iso2.toLowerCase()),
@@ -149,7 +149,7 @@ const sortedCountries = $computed(() => {
 	const preferredCountries = getCountries(props.preferredCountries)
 
 	const countriesList = [...preferredCountries, ...filteredCountries]
-	const cleanInput = searchQuery.replace(
+	const cleanInput = searchQuery.replaceAll(
 		// eslint-disable-next-line regexp/no-obscure-range
 		/[~`!#$%&*()+={};:'"<>.,/?-_]/g,
 		'',

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

@@ -21,7 +21,7 @@ const props = withDefaults(
 		shrink?: boolean
 		disabled?: boolean
 		type?: string
-		nativeInputAttrs?: Record<string, any>
+		nativeInputAttrs?: { [key: string]: any }
 		icon?: MaterialIcons
 		iconStart?: MaterialIcons
 		multiline?: boolean

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

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

package/src/components/formkit/FileUploader.vue

@@ -15,7 +15,7 @@ import { onMounted, onUnmounted } from 'vue'
 
 const props = withDefaults(
 	defineProps<{
-		context: Record<string, any>
+		context: { [key: string]: any }
 		dragDropLabel?: string
 		browseLabel?: string
 		multiple?: boolean

package/src/components/formkit/MiscFields.vue

@@ -2,7 +2,7 @@
 import { Btn } from '@bagelink/vue'
 
 const props = defineProps<{
-	context: Record<string, any>
+	context: { [key: string]: any }
 	addBtnLabel: string
 }>()
 

package/src/components/layout/BottomMenu.vue

@@ -21,8 +21,8 @@ defineProps<{
 			v-for="(nav, i) in navLinks" :key="i" :to="nav.to" class="m_h-auto"
 			@click="nav.onClick"
 		>
-			<Icon :icon="nav.icon" :size="1.4" class="m-0" />
-			<p class="m-0 pb-025  txt14 line-height-1">
+			<Icon :icon="nav.icon" :size="1.4" class="m-0 line-height-14" />
+			<p class="m-0 pb-025 txt14 line-height-1">
 				{{ nav.label }}
 			</p>
 		</Btn>

package/src/components/layout/Layout.vue

@@ -17,14 +17,14 @@ const props = withDefaults(defineProps<LayoutProrps>(), {
 	mRows: () => ([]),
 })
 
-const gridTemplateRows = $computed(() => (props.rows.length ? props.rows.join(' ') : 'auto'))
+const gridTemplateRows = $computed(() => (props.rows.length > 0 ? props.rows.join(' ') : 'auto'))
 const gapSize = $computed(() => `${props.gap}rem`)
 const mGridTemplateRows = $computed(() => {
 	if (props.mRows?.length) return props.mRows.join(' ')
 	return gridTemplateRows
 })
 
-const gridTemplateColumns = $computed(() => (props.columns.length ? props.columns.join(' ') : 'auto'))
+const gridTemplateColumns = $computed(() => (props.columns.length > 0 ? props.columns.join(' ') : 'auto'))
 
 const mGridTemplateColumns = $computed(() => {
 	if (props.mColumns?.length) return props.mColumns.join(' ')

package/src/components/layout/Tabs.vue

@@ -13,7 +13,7 @@ const props = defineProps<{
 
 const emit = defineEmits(['update:modelValue'])
 const slots = useSlots()
-const group = Math.random().toString(36).substring(7)
+const group = Math.random().toString(36).slice(7)
 const { currentTab } = useTabs(group)
 
 const tabValue = (tab: Tab) => (typeof tab === 'string' ? tab : tab.id)
@@ -30,7 +30,7 @@ const tabComponent = defineComponent({
 		const currentTabIndex = props.tabs.findIndex(
 			tab => tabValue(tab) === currentTab.value
 		)
-		if (currentTabIndex === -1) return null
+		if (currentTabIndex === -1) return
 		const slotChildren = slots.default?.()[1]?.children
 
 		return h('div', (slotChildren as VNode[])[currentTabIndex])

package/src/components/layout/TabsNav.vue

@@ -26,7 +26,7 @@ currentTab.value
 		? props.tabs[0]
 		: props.tabs[0].id
 
-const tabsWrap = ref<HTMLElement | null>(null)
+const tabsWrap = ref<HTMLElement | undefined>(undefined)
 const tabs = ref<HTMLElement[]>([])
 
 function updateIndicator() {

package/src/components/layout/tabsManager.ts

@@ -4,7 +4,7 @@ const state = reactive(new Map())
 
 export function useTabs(group: string) {
 	if (!state.has(group)) {
-		state.set(group, reactive({ currentTab: null }))
+		state.set(group, reactive({ currentTab: undefined }))
 	}
 
 	const currentTab = computed({

package/src/components/lightbox/Lightbox.vue

@@ -9,10 +9,10 @@ let currentItem = $ref<LightboxItem>()
 let group = $ref<LightboxItem[]>([])
 let currentIndex = $ref(0)
 
-function open(item: LightboxItem, groupItems: LightboxItem[] = []) {
+function open(item: LightboxItem, groupItems?: LightboxItem[]) {
 	isOpen = true
 	currentItem = item
-	if (!groupItems.length) return
+	if (groupItems === undefined) return
 	group = groupItems
 	currentIndex = groupItems.findIndex(({ src }) => item.src === src)
 	document.addEventListener('keydown', handleKeydown)

package/src/components/lightbox/index.ts

@@ -5,22 +5,28 @@ import { createApp } from 'vue'
 import Lightbox from './Lightbox.vue'
 
 type OpenFunction = (item: LightboxItem, groupItems?: LightboxItem[]) => void
-const groups: Record<string, LightboxItem[]> = {}
+const groups: { [key: string]: LightboxItem[] } = {}
+
+let clickHandler: ((e: MouseEvent) => any) = (_e: MouseEvent) => void 0
+
 const lightboxDirective: Directive = {
 	mounted(el: HTMLElement, binding) {
 		el.classList.add('hover')
 		const item = bindingToItem(binding, el)
 		groupHandler(item)
-		el.addEventListener('click', (e) => { openClickHandler(e, el, binding) })
+		clickHandler = (e: MouseEvent) => { openClickHandler(e, el, binding) }
+		el.addEventListener('click', clickHandler)
 	},
 	updated(el: HTMLElement, binding) {
 		const item = bindingToItem(binding, el)
 		groupHandler(item)
-		el.removeEventListener('click', (e) => { openClickHandler(e, el, binding) })
-		el.addEventListener('click', (e) => { openClickHandler(e, el, binding) })
+
+		el.removeEventListener('click', clickHandler)
+		clickHandler = (e: MouseEvent) => { openClickHandler(e, el, binding) }
+		el.addEventListener('click', clickHandler)
 	},
-	unmounted(el: HTMLElement, binding) {
-		el.removeEventListener('click', (e) => { openClickHandler(e, el, binding) })
+	unmounted(el: HTMLElement) {
+		el.removeEventListener('click', clickHandler)
 	}
 }
 
@@ -60,7 +66,7 @@ function determineFileType(url: string): string {
 	return 'unknown'
 }
 
-let lightboxInstance: InstanceType<typeof Lightbox> | null = null
+let lightboxInstance: InstanceType<typeof Lightbox> | undefined
 
 function getLightboxInstance(): InstanceType<typeof Lightbox> {
 	if (!lightboxInstance) {

package/src/composables/index.ts

@@ -9,7 +9,7 @@ interface useBglSchemaParamsT<T> {
 	data?: any[]
 }
 
-export function useBglSchema<T = Record<string, unknown>>(
+export function useBglSchema<T = { [key: string]: unknown }>(
 	{ schema, showFields, data }: useBglSchemaParamsT<T> = {}
 ): BglFormSchemaT<T> {
 	let _schema = schema
@@ -18,7 +18,7 @@ export function useBglSchema<T = Record<string, unknown>>(
 	}
 	if (_schema) {
 		return (
-			showFields && showFields.length
+			showFields && showFields.length > 0
 				? _schema.filter(f => showFields.includes(f.id as string))
 				: _schema
 		) as BglFormSchemaT<T>