@bagelink/vue 1.5.15 → 1.5.20

package/src/components/form/inputs/Upload/UploadInput.vue

@@ -5,7 +5,7 @@ import { watch, ref } from 'vue'
 
 import { useFileUpload } from './useFileUpload'
 
-const props = withDefaults(defineProps<UploadInputProps & { showIcon?: boolean; icon?: string }>(), {
+const props = withDefaults(defineProps<UploadInputProps & { showIcon?: boolean, icon?: string }>(), {
 	height: '215px',
 	theme: 'dropzone',
 	accept: '*',
@@ -44,16 +44,16 @@ const isDragOver = ref(false)
 function handleDrag(e: DragEvent, isDragging = false) {
 	e.preventDefault()
 	e.stopPropagation()
-	if (!props.disabled) isDragOver.value = isDragging
+	if (!props.disabled) { isDragOver.value = isDragging }
 }
 
 function updateModelValue() {
-	if (props.multiple) emit('update:modelValue', pathKeys.value)
-	else emit('update:modelValue', pathKeys.value[0] || undefined)
+	if (props.multiple) { emit('update:modelValue', pathKeys.value) }
+	else { emit('update:modelValue', pathKeys.value[0] || undefined) }
 }
 
 async function handleDrop(e: DragEvent) {
-	if (props.disabled) return
+	if (props.disabled) { return }
 	e.preventDefault()
 	e.stopPropagation()
 	emit('addFileStart')
@@ -62,114 +62,167 @@ async function handleDrop(e: DragEvent) {
 }
 
 function fileName(pathKey: string) {
-	if (!pathKey || typeof pathKey !== 'string') return 'file'
+	if (!pathKey || typeof pathKey !== 'string') { return 'file' }
 	return pathKey.split('/').pop() || 'file'
 }
 </script>
 
 <template>
-<div class="bagel-input">
-	<label v-if="label">{{ label }}</label>
-	<input v-if="required && !pathKeys.length" placeholder="required" type="text" required class="pixel">
-	<Card v-if="theme === 'basic'" outline class="flex p-05 gap-1" @dragover="(e) => handleDrag(e, true)" @drop="handleDrop">
-		<Btn v-if="!pathKeys.length && !fileQueue.length" class="px-1-5" icon="upload" outline :value="btnPlaceholder || 'Upload'" @click="browse()" />
-		<!-- Loading state during upload -->
-		<div v-if="fileQueue.length > 0" class="flex align-items-center gap-1 p-05">
-			<Loading size="20" />
-			<span class="txt-gray txt-12">
-				Uploading {{ fileQueue.length }} file{{ fileQueue.length > 1 ? 's' : '' }}...
-			</span>
-		</div>
+	<div class="bagel-input">
+		<label v-if="label">{{ label }}</label>
+		<input v-if="required && !pathKeys.length" placeholder="required" type="text" required class="pixel">
+		<Card
+			v-if="theme === 'basic'" outline class="flex p-05 gap-1" @dragover="(e) => handleDrag(e, true)"
+			@drop="handleDrop"
+		>
+			<Btn
+				v-if="!pathKeys.length && !fileQueue.length" class="px-1-5" icon="upload" outline
+				:value="btnPlaceholder || 'Upload'" @click="browse()"
+			/>
+			<!-- Loading state during upload -->
+			<div v-if="fileQueue.length > 0" class="flex align-items-center gap-1 p-05">
+				<Loading size="20" />
+				<span class="txt-gray txt-12">
+					Uploading {{ fileQueue.length }} file{{ fileQueue.length > 1 ? 's' : '' }}...
+				</span>
+			</div>
 
-		<template v-for="path_key in pathKeys" :key="path_key">
-			<div class="txt-gray txt-12 flex">
-				<div class="m-05 flex opacity-8 z-99 gap-025">
-					<Btn v-tooltip="'Delete'" color="gray" thin icon="delete" @click="removeFile(path_key)" />
-					<Btn v-tooltip="'Replace'" color="gray" thin icon="autorenew" @click="browse()" />
-					<Btn icon="download" color="gray" thin :href="pathKeyToURL(path_key)" :download="fileName(path_key)" />
-					<div class="flex gap-025 rounded pe-1 ps-05 py-025 -my-1 ">
-						<Icon icon="draft" :size="1.5" />
-						<p v-lightbox="{ src: pathKeyToURL(path_key), download: true }" class="ellipsis-1 word-break-all h-20 m-0 color-black txt16">
-							{{ fileName(path_key) }}
-						</p>
+			<template v-for="path_key in pathKeys" :key="path_key">
+				<div class="txt-gray txt-12 flex">
+					<div class="m-05 flex opacity-8 z-99 gap-025">
+						<Btn v-tooltip="'Delete'" color="gray" thin icon="delete" @click="removeFile(path_key)" />
+						<Btn v-tooltip="'Replace'" color="gray" thin icon="autorenew" @click="browse()" />
+						<Btn
+							icon="download" color="gray" thin :href="pathKeyToURL(path_key)"
+							:download="fileName(path_key)"
+						/>
+						<div class="flex gap-025 rounded pe-1 ps-05 py-025 -my-1 ">
+							<Icon icon="draft" :size="1.5" />
+							<p
+								v-lightbox="{ src: pathKeyToURL(path_key), download: true }"
+								class="ellipsis-1 word-break-all h-20 m-0 color-black txt16"
+							>
+								{{ fileName(path_key) }}
+							</p>
 						</div>
+					</div>
+				</div>
+			</template>
+
+			<span v-if="!pathKeys.length && !fileQueue.length" class="txt-gray txt-12">
+				{{ noFilePlaceholder || 'No file selected' }}
+			</span>
+		</Card>
+
+		<div
+			v-else class="fileUploadWrap" :class="{
+				'fileDropZone': !pathKeys.length && !fileQueue.length,
+				'dragover': isDragOver,
+				'bgl_oval-upload': oval,
+			}" :style="{ width, height }" @click="browse()" @dragover="(e) => handleDrag(e, true)" @drop="handleDrop"
+			@dragleave="(e) => handleDrag(e)"
+		>
+			<slot name="files" :files="pathKeys" :fileQueue>
+				<div v-if="multiple" class="bgl-multi-preview">
+					<!-- Show uploaded files only if showFileList is true (default) -->
+					<template v-if="showFileList !== false">
+						<div
+							v-for="path_key in pathKeys" :key="path_key"
+							v-lightbox="{ src: pathKeyToURL(path_key), download: true }"
+							class="multi-image-item-preview" :class="{ 'bgl_fill-image': fill }"
+						>
+							<Image v-if="isImage(path_key)" :pathKey="path_key" class="multi-preview" />
+							<Icon v-else icon="description" class="multi-preview" />
+							<p class="m-0">
+								{{ fileName(path_key) }}
+							</p>
+							<Btn thin flat icon="delete" color="red" @click="removeFile(path_key)" />
 						</div>
+					</template>
+					<!-- File count indicator when showFileList is false and multiple files -->
+					<div v-if="showFileList === false && pathKeys.length > 0" class="flex column gap-05 pt-1">
+						<p class="color-primary">
+							{{ pathKeys.length }} file{{ pathKeys.length > 1 ? 's' : '' }} uploaded
+						</p>
+						<Btn color="primary" thin icon="autorenew" value="Replace files" @click="browse()" />
+					</div>
+					<div
+						v-for="file in fileQueue" :key="file.name" class="multi-image-item-preview"
+						:class="{ 'bgl_fill-image': fill }"
+					>
+						<img v-if="isImage(file.file.type)" class="multi-preview" :src="file.url" alt="">
+						<Icon v-else icon="description" class="multi-preview" />
+						<p class="no-margin multi-preview-txt">
+							{{ file.name }}
+						</p>
+						<div
+							class="pie" :style="{ '--p': file.progress }" style="--b: 2px"
+							:class="{ complete: file.progress === 100 }"
+						>
+							<span v-if="file.progress < 100" class="progress">
+								{{ file.progress.toFixed(0) }}
+							</span>
+							<Icon class="success" icon="check_circle" />
 						</div>
-						</template>
-						
-						<span v-if="!pathKeys.length && !fileQueue.length" class="txt-gray txt-12">
-							{{ noFilePlaceholder || 'No file selected' }}
-						</span>
-						</Card>
-						
-						<div v-else class="fileUploadWrap" :class="{
-							'fileDropZone': !pathKeys.length && !fileQueue.length,
-							'dragover': isDragOver,
-								'bgl_oval-upload': oval,
-							}" :style="{ width, height }" @click="browse()" @dragover="(e) => handleDrag(e, true)" @drop="handleDrop" @dragleave="(e) => handleDrag(e)">
-							<slot name="files" :files="pathKeys" :fileQueue>
-								<div v-if="multiple" class="bgl-multi-preview">
-									<!-- Show uploaded files only if showFileList is true (default) -->
-									<div v-if="showFileList !== false" v-for="path_key in pathKeys" :key="path_key" v-lightbox="{ src: pathKeyToURL(path_key), download: true }" class="multi-image-item-preview"
-										:class="{ 'bgl_fill-image': fill }">
-										<Image v-if="isImage(path_key)" :pathKey="path_key" class="multi-preview" />
-										<Icon v-else icon="description" class="multi-preview" />
-										<p class="m-0">
-											{{ fileName(path_key) }}
-										</p>
-										<Btn thin flat icon="delete" color="red" @click="removeFile(path_key)" />
-									</div>
-									<!-- File count indicator when showFileList is false and multiple files -->
-									<div v-if="showFileList === false && pathKeys.length > 0" class="flex column gap-05 pt-1">
-										<p class="color-primary">
-											{{ pathKeys.length }} file{{ pathKeys.length > 1 ? 's' : '' }} uploaded
-										</p>
-										<Btn color="primary" thin icon="autorenew" value="Replace files" @click="browse()" />
-									</div>
-									<div v-for="file in fileQueue" :key="file.name" class="multi-image-item-preview" :class="{ 'bgl_fill-image': fill }">
-										<img v-if="isImage(file.file.type)" class="multi-preview" :src="file.url" alt="">
-										<Icon v-else icon="description" class="multi-preview" />
-										<p class="no-margin multi-preview-txt">
-											{{ file.name }}
-										</p>
-										<div class="pie" :style="{ '--p': file.progress }" style="--b: 2px" :class="{ complete: file.progress === 100 }">
-											<span v-if="file.progress < 100" class="progress">
-												{{ file.progress.toFixed(0) }}
-											</span>
-											<Icon class="success" icon="check_circle" />
-										</div>
-									</div>
-								</div>
-						
-								<div v-else-if="pathKeys.length > 0 || fileQueue.length > 0" class="bgl-single-preview">
-									<div v-for="path_key in pathKeys" :key="path_key" class="single-image-item-preview" :class="{ 'bgl_fill-image': fill }">
-										<div class="flex opacity-8 z-99 gap-025 absolute top-0 start-0" :class="{ 'mx-auto end-0 mt-1 justify-content-center': oval, 'm-05': !oval }">
-											<Btn v-tooltip="'Delete'" color="white" frame thin icon="delete" @click="removeFile(path_key)" />
-											<Btn v-tooltip="'Replace'" color="white" frame thin icon="autorenew" @click="browse()" />
-											<Btn v-tooltip="'Download'" color="white" frame thin icon="download" :href="pathKeyToURL(path_key)" :download="fileName(path_key)" />
-										</div>
-										<div v-if="isImage(path_key)" class="h-100">
-											<Image v-lightbox="{ src: pathKeyToURL(path_key), download: true }" class="single-preview" :pathKey="path_key" alt="" />
-										</div>
-										<Icon v-else v-lightbox="{ src: pathKeyToURL(path_key), download: true }" :size="4" weight="2" icon="description" class="color-primary w-100" />
-									</div>
-									<div v-for="file in fileQueue" :key="file.name" class="single-image-item-preview" :class="{ 'bgl_fill-image': fill }">
-										<Loading type="bar" :progress="file.progress" class="absolute bottom-05 end start w-100px mx-auto rounded overflow-hidden" />
-										<img v-if="isImage(file.file.type)" class="single-preview opacity-5" :src="file.url" alt="">
-									</div>
-								</div>
-							</slot>
-						
-							<slot v-if="(!pathKeys.length && !fileQueue.length) || multiple" name="placeholder" :files="pathKeys" :fileQueue :browse>
-								<p class="p-1 flex column hover fileUploadPlaceHolder justify-content-center mb-05 ">
-									<Icon v-if="showIcon" :name="icon" class="user-select-none" />
-									<span class=" pretty balance user-select-none ">
-										{{ dropPlaceholder || 'Drag and Drop files here or click to upload' }}
-									</span>
-								</p>
-							</slot>
+					</div>
+				</div>
+
+				<div v-else-if="pathKeys.length > 0 || fileQueue.length > 0" class="bgl-single-preview">
+					<div
+						v-for="path_key in pathKeys" :key="path_key" class="single-image-item-preview"
+						:class="{ 'bgl_fill-image': fill }"
+					>
+						<div
+							class="flex opacity-8 z-99 gap-025 absolute top-0 start-0"
+							:class="{ 'mx-auto end-0 mt-1 justify-content-center': oval, 'm-05': !oval }"
+						>
+							<Btn
+								v-tooltip="'Delete'" color="white" frame thin icon="delete"
+								@click="removeFile(path_key)"
+							/>
+							<Btn v-tooltip="'Replace'" color="white" frame thin icon="autorenew" @click="browse()" />
+							<Btn
+								v-tooltip="'Download'" color="white" frame thin icon="download"
+								:href="pathKeyToURL(path_key)" :download="fileName(path_key)"
+							/>
 						</div>
+						<div v-if="isImage(path_key)" class="h-100">
+							<Image
+								v-lightbox="{ src: pathKeyToURL(path_key), download: true }" class="single-preview"
+								:pathKey="path_key" alt=""
+							/>
 						</div>
+						<Icon
+							v-else v-lightbox="{ src: pathKeyToURL(path_key), download: true }" :size="4" weight="2"
+							icon="description" class="color-primary w-100"
+						/>
+					</div>
+					<div
+						v-for="file in fileQueue" :key="file.name" class="single-image-item-preview"
+						:class="{ 'bgl_fill-image': fill }"
+					>
+						<Loading
+							type="bar" :progress="file.progress"
+							class="absolute bottom-05 end start w-100px mx-auto rounded overflow-hidden"
+						/>
+						<img v-if="isImage(file.file.type)" class="single-preview opacity-5" :src="file.url" alt="">
+					</div>
+				</div>
+			</slot>
+
+			<slot
+				v-if="(!pathKeys.length && !fileQueue.length) || multiple" name="placeholder" :files="pathKeys"
+				:fileQueue :browse
+			>
+				<p class="p-1 flex column hover fileUploadPlaceHolder justify-content-center mb-05 ">
+					<Icon v-if="showIcon" :name="icon" class="user-select-none" />
+					<span class=" pretty balance user-select-none ">
+						{{ dropPlaceholder || 'Drag and Drop files here or click to upload' }}
+					</span>
+				</p>
+			</slot>
+		</div>
+	</div>
 </template>
 
 <style src="./upload.css" scoped></style>

package/src/components/form/inputs/Upload/upload.ts

@@ -8,7 +8,7 @@ const getFileVersion = () => getBagelInstance()?.fileVersion ?? 'files_v2'
 
 export const files = {
 	setBaseUrl: (baseUrl?: string) => {
-		if (baseUrl === undefined || baseUrl === '') return
+		if (baseUrl === undefined || '' === baseUrl) {return}
 		baseUrl = baseUrl.replace(/\/$/, '')
 		axios.defaults.baseURL = baseUrl
 	},

package/src/components/form/inputs/Upload/useFileUpload.ts

@@ -32,7 +32,7 @@ export function useFileUpload(props: UseFileUploadProps = {}) {
 	const fileToUrl = (file: File) => URL.createObjectURL(file)
 
 	function addFile(file?: File | File[] | FileList | null) {
-		if (!file) return
+		if (!file) {return}
 
 		let filesToAdd: File[] = []
 
@@ -58,18 +58,18 @@ export function useFileUpload(props: UseFileUploadProps = {}) {
 		}
 
 		// Call the onFilesQueued callback if provided
-		if (props.onFileQueued && newQueueFiles.length > 0) {
+		if (props.onFileQueued && 0 < newQueueFiles.length) {
 			props.onFileQueued(newQueueFiles)
 		}
 	}
 
 	async function removeFile(pathKeyOrFile: string | File | QueueFile) {
-		if (typeof pathKeyOrFile === 'string') {
+		if ('string' === typeof pathKeyOrFile) {
 			// Remove from both lists
 			storageFiles.value = storageFiles.value.filter(file => file.path_key !== pathKeyOrFile)
 
 			const pathKeyIndex = pk.value.indexOf(pathKeyOrFile)
-			if (pathKeyIndex !== -1) {
+			if (-1 !== pathKeyIndex) {
 				pk.value.splice(pathKeyIndex, 1)
 			}
 
@@ -88,7 +88,7 @@ export function useFileUpload(props: UseFileUploadProps = {}) {
 				&& queueFile.namespace === namespace
 			)
 
-			if (index !== -1) {
+			if (-1 !== index) {
 				fileQueue.value.splice(index, 1)
 			}
 		}
@@ -124,7 +124,7 @@ export function useFileUpload(props: UseFileUploadProps = {}) {
 
 	// UI interaction
 	function browse(autoFlush = false) {
-		if (props.disabled) return
+		if (props.disabled) {return}
 
 		const input = document.createElement('input')
 		input.type = 'file'

package/src/components/form/useBagelFormState.ts

@@ -13,11 +13,11 @@ export interface BagelFormState<T> {
 
 // Helper function to safely clone objects without circular references
 function safeClone(obj: any): any {
-	if (obj === null || typeof obj !== 'object') return obj
+	if (null === obj || 'object' !== typeof obj) {return obj}
 
 	const seen = new WeakSet()
 	return JSON.parse(JSON.stringify(obj, (key, value) => {
-		if (typeof value === 'object' && value !== null) {
+		if ('object' === typeof value && null !== value) {
 			if (seen.has(value)) {
 				return undefined // Remove circular reference
 			}
@@ -37,7 +37,7 @@ export function provideBagelFormState<T>(initialData: T) {
 		const keys = path.split(/[.[]/)
 
 		// Initialize the root if it's not an object
-		if (typeof data.value !== 'object' || data.value === null) {
+		if ('object' !== typeof data.value || null === data.value) {
 			data.value = {} as T
 		}
 
@@ -46,7 +46,7 @@ export function provideBagelFormState<T>(initialData: T) {
 		// Build the path, ensuring each level is an object
 		for (let i = 0; i < keys.length - 1; i++) {
 			const key = keys[i]
-			if (!(key in current) || typeof current[key] !== 'object' || current[key] === null) {
+			if (!(key in current) || 'object' !== typeof current[key] || null === current[key]) {
 				current[key] = {}
 			}
 			current = current[key]
@@ -71,6 +71,6 @@ export function provideBagelFormState<T>(initialData: T) {
 
 export function useBagelFormState<T>(injectionKey: typeof FORM_STATE_KEY = FORM_STATE_KEY): BagelFormState<T> {
 	const state = inject<BagelFormState<T>>(injectionKey)
-	if (!state) throw new Error('BagelFormState must be provided')
+	if (!state) {throw new Error('BagelFormState must be provided')}
 	return state
 }

package/src/components/layout/AppContent.vue

@@ -31,7 +31,7 @@ const sidebarCardStyle = inject('sidebarCardStyle', { value: false })
 const hasSidebarCard = computed(() => {
 	// Check if there's an AppSidebar with card class in the DOM
 	const sidebar = document.querySelector('.app-sidebar .card')
-	return sidebar !== null || sidebarCardStyle?.value
+	return null !== sidebar || sidebarCardStyle?.value
 })
 </script>
 

package/src/components/layout/AppLayout.vue

@@ -17,7 +17,7 @@ const isMobile = ref(false)
 
 // Check if mobile
 function checkMobile() {
-	isMobile.value = window.innerWidth < 910
+	isMobile.value = 910 > window.innerWidth
 	if (isMobile.value) {
 		isOpen.value = false
 	}

package/src/components/layout/Layout.vue

@@ -20,19 +20,19 @@ const props = withDefaults(defineProps<LayoutProrps>(), {
 
 })
 
-const gridTemplateRows = $computed(() => (props.rows.length > 0 ? props.rows.join(' ') : 'auto'))
+const gridTemplateRows = $computed(() => (0 < props.rows.length ? props.rows.join(' ') : 'auto'))
 const gapSize = $computed(() => `${props.gap}rem`)
 const mGapSize = $computed(() => props.mGap !== undefined ? `${props.mGap}rem` : gapSize)
 
 const mGridTemplateRows = $computed(() => {
-	if (props.mRows?.length) return props.mRows.join(' ')
+	if (props.mRows?.length) {return props.mRows.join(' ')}
 	return gridTemplateRows
 })
 
-const gridTemplateColumns = $computed(() => (props.columns.length > 0 ? props.columns.join(' ') : 'auto'))
+const gridTemplateColumns = $computed(() => (0 < props.columns.length ? props.columns.join(' ') : 'auto'))
 
 const mGridTemplateColumns = $computed(() => {
-	if (props.mColumns?.length) return props.mColumns.join(' ')
+	if (props.mColumns?.length) {return props.mColumns.join(' ')}
 	return gridTemplateColumns
 })
 </script>

package/src/components/layout/TabbedLayout.vue

@@ -17,7 +17,7 @@ let activeTab = $ref<string>()
 function changeTab(tab: string) {
 	activeTab = tab
 	emit('update:modelValue', activeTab)
-	if (!props.router) return
+	if (!props.router) {return}
 	void props.router.push({
 		path: props.router.currentRoute.value.path,
 		query: { ...props.router.currentRoute.value.query, t: tab },

package/src/components/layout/Tabs.vue

@@ -17,7 +17,7 @@ const slots: SetupContext['slots'] = useSlots()
 const group = Math.random().toString(36).slice(7)
 const { currentTab } = useTabs(group)
 
-const tabValue = (tab: Tab) => (typeof tab === 'string' ? tab : tab.id)
+const tabValue = (tab: Tab) => ('string' === typeof tab ? tab : tab.id)
 
 const slctTab = $computed({
 	get: () => props.modelValue || tabValue(props.tabs[0]),
@@ -31,7 +31,7 @@ const tabComponent = defineComponent({
 		const currentTabIndex = props.tabs.findIndex(
 			tab => tabValue(tab) === currentTab.value
 		)
-		if (currentTabIndex === -1) return
+		if (-1 === currentTabIndex) {return}
 		const slotChildren = slots.default?.()[1]?.children
 
 		return h('div', (slotChildren as VNode[])[currentTabIndex])

package/src/components/layout/TabsNav.vue

@@ -23,7 +23,7 @@ const props = defineProps<{
 const emit = defineEmits(['update:modelValue'])
 const { currentTab } = useTabs(props.group)
 currentTab.value
-  = props.modelValue || typeof props.tabs[0] === 'string'
+  = props.modelValue || 'string' === typeof props.tabs[0]
 		? props.tabs[0]
 		: props.tabs[0].id
 
@@ -32,13 +32,13 @@ const tabs = ref<HTMLElement[]>([])
 
 function updateIndicator() {
 	nextTick(() => {
-		if (!tabsWrap.value) return
+		if (!tabsWrap.value) {return}
 		const activeTab = tabs.value.find(tab => tab.classList.contains('active'))
 		if (activeTab) {
 			// Wait a bit more to ensure CSS is fully loaded and elements are properly sized
 			setTimeout(() => {
 				const { offsetLeft, offsetWidth } = activeTab
-				if (offsetLeft >= 0 && offsetWidth > 0) { // Ensure valid measurements
+				if (0 <= offsetLeft && 0 < offsetWidth) { // Ensure valid measurements
 					tabsWrap.value?.style.setProperty('--indicator-left', `${offsetLeft}px`)
 					tabsWrap.value?.style.setProperty('--indicator-width', `${offsetWidth}px`)
 					tabsWrap.value?.style.setProperty('--indicator-opacity', '1')
@@ -49,25 +49,25 @@ function updateIndicator() {
 }
 
 function selectTab(tab: TabType | string) {
-	currentTab.value = typeof tab === 'string' ? tab : tab.id
+	currentTab.value = 'string' === typeof tab ? tab : tab.id
 	emit('update:modelValue', currentTab.value)
 	nextTick(() => { updateIndicator() })
 }
 
 function isActive(tab: TabType | string) {
-	if (typeof tab === 'string') return currentTab.value === tab
+	if ('string' === typeof tab) {return currentTab.value === tab}
 	return currentTab.value === tab.id
 }
 
 function tabLabel(tab: TabType | string) {
-	if (typeof tab === 'string') return tab
+	if ('string' === typeof tab) {return tab}
 	return tab.label
 }
 
 watch(
 	() => props.modelValue,
 	(value) => {
-		if (value && !isActive(value)) currentTab.value = value
+		if (value && !isActive(value)) {currentTab.value = value}
 		nextTick(() => { updateIndicator() })
 	},
 	{ immediate: true }

package/src/components/lightbox/Lightbox.vue

@@ -22,14 +22,14 @@ function close() {
 }
 
 function next() {
-	if (group.length > 1) {
+	if (1 < group.length) {
 		currentIndex = (currentIndex + 1) % group.length
 		currentItem = group[currentIndex]
 	}
 }
 
 function prev() {
-	if (group.length > 1) {
+	if (1 < group.length) {
 		currentIndex = (currentIndex - 1 + group.length) % group.length
 		currentItem = group[currentIndex]
 	}
@@ -41,16 +41,16 @@ function selectItem(index: number) {
 }
 
 watch(() => isOpen, (val) => {
-	if (val) document.body.style.overflow = 'hidden'
-	else document.body.style.overflow = ''
+	if (val) {document.body.style.overflow = 'hidden'}
+	else {document.body.style.overflow = ''}
 })
 
 function handleKeydown(event: KeyboardEvent) {
-	if (event.key === 'Escape') {
+	if ('Escape' === event.key) {
 		close()
-	} else if (event.key === 'ArrowLeft') {
+	} else if ('ArrowLeft' === event.key) {
 		prev()
-	} else if (event.key === 'ArrowRight') {
+	} else if ('ArrowRight' === event.key) {
 		next()
 	}
 }
@@ -58,7 +58,7 @@ function handleKeydown(event: KeyboardEvent) {
 const zoom = $ref(1)
 
 function clickOutside() {
-	if (zoom === 1) close()
+	if (1 === zoom) {close()}
 }
 
 defineExpose({ open, close })

package/src/components/lightbox/index.ts

@@ -32,9 +32,9 @@ const lightboxDirective: Directive = {
 
 function groupHandler(item: LightboxItem) {
 	if (item.group) {
-		if (!groups[item.group]) groups[item.group] = []
+		if (!groups[item.group]) {groups[item.group] = []}
 		const currentIndex = groups[item.group].findIndex(i => i.src === item.src)
-		if (currentIndex === -1) groups[item.group].push(item)
+		if (-1 === currentIndex) {groups[item.group].push(item)}
 	}
 }
 
@@ -42,7 +42,7 @@ function openClickHandler(e: MouseEvent, el: HTMLElement, binding: DirectiveBind
 	e.stopPropagation()
 	const item = bindingToItem(binding, el)
 	const lightboxInstance = getLightboxInstance()
-	if (!lightboxInstance || !lightboxInstance.open) return
+	if (!lightboxInstance || !lightboxInstance.open) {return}
 	const open = lightboxInstance.open as OpenFunction
 	const group = item && item.group ? groups[item.group] : undefined
 	open(item, group)
@@ -60,18 +60,18 @@ const youtubeRegex = /youtube\.com|youtu\.be/
 const vimeoRegex = /vimeo\.com/
 
 function urlToName(url: string): string {
-	if (!url || typeof url !== 'string') return ''
+	if (!url || 'string' !== typeof url) {return ''}
 	const name = url.split('/').pop() || ''
 	return name.replace(/\.[^/.]+$/, '')
 }
 
 function determineFileType(url: any): string {
-	if (typeof url !== 'string' || !url) return 'unknown'
+	if ('string' !== typeof url || !url) {return 'unknown'}
 	const extension = (url.split('.').pop() || '').toLowerCase()
 	const altExtension = url.split('?')[0].split('.').pop()?.toLowerCase() || ''
-	if (IMAGE_FORMATS_REGEXP.test(extension) || IMAGE_FORMATS_REGEXP.test(altExtension)) return 'image'
-	if (VIDEO_FORMATS_REGEXP.test(extension) || youtubeRegex.test(url) || vimeoRegex.test(url)) return 'video'
-	if (['pdf'].includes(extension)) return 'pdf'
+	if (IMAGE_FORMATS_REGEXP.test(extension) || IMAGE_FORMATS_REGEXP.test(altExtension)) {return 'image'}
+	if (VIDEO_FORMATS_REGEXP.test(extension) || youtubeRegex.test(url) || vimeoRegex.test(url)) {return 'video'}
+	if (['pdf'].includes(extension)) {return 'pdf'}
 	return extension ?? 'unknown'
 }
 

package/src/composables/index.ts

@@ -24,7 +24,7 @@ export function useBglSchema<T = { [key: string]: unknown }>(
 
 	if (_schema) {
 		return (
-			_columns && _columns.length > 0
+			_columns && 0 < _columns.length
 				? _schema.filter(f => _columns.includes(f.id as string))
 				: _schema
 		) as BglFormSchemaT<T>
@@ -39,7 +39,7 @@ export function localRef<T>(
 		IfAny<T, Ref<T, T>, T> :
 		Ref<UnwrapRef<T>, T | UnwrapRef<T>> {
 	const storedValue = localStorage.getItem(key)
-	const initial = storedValue !== null ? JSON.parse(storedValue) : initialValue
+	const initial = null !== storedValue ? JSON.parse(storedValue) : initialValue
 	const value = ref<T>(initial)
 
 	watch(() => value.value, (val) => {