@bagelink/vue 0.0.807 → 0.0.813

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/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>

package/src/plugins/modal.ts

@@ -19,7 +19,7 @@ export interface ModalFormOptions extends ModalOptions {
 	'onSubmit'?: (formData: any) => any
 	'onDelete'?: (id: string) => Promise<void>
 	'onError'?: (err: any) => void
-	'modelValue'?: Record<string, any>
+	'modelValue'?: { [key: string]: any }
 	'onUpdate:modelValue'?: (val: any) => void
 }
 
@@ -39,7 +39,7 @@ type ModalType = 'modal' | 'modalForm' | 'confirmModal'
 type ConfirmModalUserOptions = string | { title: string, message: string, confirmText?: string, cancelText?: string, confirmBtnColor?: string, cancelBtnColor?: string }
 
 export interface ModalComponentProps {
-	componentSlots: Record<string, any>
+	componentSlots: { [key: string]: any }
 	modalType: ModalType
 	modalOptions: ModalOptions | ModalFormOptions | ModalConfirmOptions
 }
@@ -50,8 +50,8 @@ export interface ModalFormComponentProps extends ModalComponentProps {
 }
 
 export interface ModalApi {
-	showModal: (options: ModalOptions, slots?: Record<string, any>) => ModalComponentProps | undefined
-	showModalForm: (options: ModalFormOptions, slots?: Record<string, any>) => ModalFormComponentProps | undefined
+	showModal: (options: ModalOptions, slots?: { [key: string]: any }) => ModalComponentProps | undefined
+	showModalForm: (options: ModalFormOptions, slots?: { [key: string]: any }) => ModalFormComponentProps | undefined
 	hideModal: (index?: number) => void
 	confirmModal: (options: ConfirmModalUserOptions) => Promise<boolean>
 }
@@ -86,7 +86,7 @@ export const ModalPlugin: Plugin = {
 		const showModal = (
 			modalType: ModalType,
 			options: ModalOptions | ModalFormOptions,
-			slots: Record<string, any> = {}
+			slots: { [key: string]: any } = {}
 		): ModalComponentProps | ModalFormComponentProps | undefined => {
 			const modalComponent = {
 				modalOptions: options,
@@ -102,9 +102,9 @@ export const ModalPlugin: Plugin = {
 		}
 
 		app.provide(ModalSymbol, {
-			showModal: (options: ModalOptions, slots?: Record<string, any>) => showModal('modal', options, slots),
+			showModal: (options: ModalOptions, slots?: { [key: string]: any }) => showModal('modal', options, slots),
 
-			showModalForm: (options: ModalFormOptions, slots?: Record<string, any>) => showModal('modalForm', options, slots) as ModalFormComponentProps,
+			showModalForm: (options: ModalFormOptions, slots?: { [key: string]: any }) => showModal('modalForm', options, slots) as ModalFormComponentProps,
 
 			confirmModal: (options: ConfirmModalUserOptions) => confirmModal(options),
 

package/src/styles/appearance.css

@@ -478,6 +478,20 @@
     object-fit: scale-down;
 }
 
+
+.shadow-10 {
+    box-shadow: 0 0 10px 0 var(--bgl-shadow) !important;
+}
+
+.shadow-20,
+.shadow {
+    box-shadow: 0 0 20px 0 var(--bgl-shadow) !important;
+}
+
+.shadow-30 {
+    box-shadow: 0 0 30px 0 var(--bgl-shadow) !important;
+}
+
 .shadow-light {
     box-shadow: 0 1px 5px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1) !important;
 }
@@ -1118,4 +1132,26 @@
     .m_user-select-all {
         user-select: all;
     }
+
+    .m_shadow-10 {
+        box-shadow: 0 0 10px 0 var(--bgl-shadow) !important;
+    }
+
+    .m_shadow-20,
+    .m_shadow {
+        box-shadow: 0 0 20px 0 var(--bgl-shadow) !important;
+    }
+
+    .m_shadow-30 {
+        box-shadow: 0 0 30px 0 var(--bgl-shadow) !important;
+    }
+
+    .m_shadow-light {
+        box-shadow: 0 1px 5px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1) !important;
+    }
+
+    .m_shadow-txt {
+        filter: drop-shadow(0 0 10px var(--bgl-black-tint));
+    }
+
 }

package/src/styles/buttons.css

@@ -73,10 +73,22 @@
     border: 1px solid var(--bgl-primary);
 }
 
+.rotate-270 {
+    transform: rotate(270deg);
+}
+
 .rotate-180 {
     transform: rotate(180deg);
 }
 
+.rotate-90 {
+    transform: rotate(90deg);
+}
+
+.rotate-0 {
+    transform: rotate(0deg);
+}
+
 @media screen and (max-width: 910px) {
     .bgl_btn {
         padding: 0 20px;
@@ -86,7 +98,19 @@
         border: 1px solid var(--border-color);
     }
 
+    .m_rotate-270 {
+        transform: rotate(270deg);
+    }
+
     .m_rotate-180 {
         transform: rotate(180deg);
     }
+
+    .m_rotate-90 {
+        transform: rotate(90deg);
+    }
+
+    .m_rotate-0 {
+        transform: rotate(0deg);
+    }
 }