@bagelink/vue 1.0.54 → 1.0.60

package/src/plugins/bagel.ts

@@ -2,7 +2,8 @@ import type { InjectionKey, Plugin } from 'vue'
 import { Bagel } from '@bagelink/sdk'
 import FloatingVue from 'floating-vue'
 import { inject } from 'vue'
-import Lightbox from '../components/lightbox'
+
+import lightboxPlugin from '../components/lightbox/index'
 import { ripple, pattern } from '../directives'
 import { useLang } from '../utils'
 import clickOutside from '../utils/clickOutside'
@@ -10,17 +11,15 @@ import clickOutside from '../utils/clickOutside'
 export const bagelInjectionKey = Symbol('bagel') as InjectionKey<Bagel>
 export const i18nTInjectionKey = Symbol('bagel') as InjectionKey<(key: string) => string>
 
-export function useBagel() {
-	const bagel = inject(bagelInjectionKey)
+export function useBagel(injectionKey: InjectionKey<Bagel> = bagelInjectionKey): Bagel {
+	const bagel = inject(injectionKey)
 	if (!bagel) throw new Error('No bagel provided')
-
 	return bagel
 }
 
-export function useI18nT() {
-	const i18nT = inject(i18nTInjectionKey)
+export function useI18nT(injectionKey: typeof i18nTInjectionKey = i18nTInjectionKey) {
+	const i18nT = inject(injectionKey)
 	if (!i18nT) throw new Error('No i18nT provided')
-
 	return i18nT
 }
 
@@ -34,13 +33,13 @@ export interface BagelOptions {
 
 	i18nT?: (key: string) => string
 }
-export const BagelVue: Plugin = {
-	install: (app, options: BagelOptions) => {
+export const BagelVue: Plugin<BagelOptions> = {
+	install: (app, options) => {
 		const bagel = new Bagel({ host: options.host, fileBaseUrl: options.fileBaseUrl, onError: options.onError })
 		app.directive('click-outside', clickOutside)
 		app.directive('ripple', ripple)
 		app.directive('pattern', pattern)
-		app.use(Lightbox)
+		app.use(lightboxPlugin)
 		app.use(FloatingVue, {
 			themes: {
 				'bgl-theme': {

package/src/utils/BagelFormUtils.ts

@@ -12,7 +12,12 @@ interface InputOptions {
 	vIf?: boolean | ((item: any, row: any) => boolean)
 }
 
-type DateOptions = InputOptions
+interface DateOptions extends InputOptions {
+	enableTime?: boolean
+	mode?: 'day' | 'month' | 'year'
+	locale?: string
+	timezone?: string
+}
 
 interface TextInputOptions extends InputOptions {
 	type?: 'text' | 'tel' | 'email'
@@ -151,6 +156,10 @@ export function dateField<T extends { [key: string]: any }>(
 		attrs: {
 			disabled: options?.disabled,
 			autocomplete: options?.autocomplete,
+			enableTime: options?.enableTime,
+			mode: options?.mode,
+			locale: options?.locale,
+			timezone: options?.timezone,
 		},
 	}
 }

package/src/utils/timeAgo.ts

@@ -138,12 +138,6 @@ export function formatDate(date?: string | Date, format: string = 'dd.mm.yy', lo
 			return ''
 		}
 
-		// Extract the separator from the format string
-		const separator = format.match(/[^\w\s]/)?.[0] || '.'
-
-		// Split by any non-alphanumeric character (except spaces)
-		const formatParts = format.split(/[^\w\s]/)
-
 		// Create a map of all date parts
 		const datePartsMap: Record<string, string> = {
 			dd: String(d.getDate()).padStart(2, '0'),
@@ -195,18 +189,16 @@ export function formatDate(date?: string | Date, format: string = 'dd.mm.yy', lo
 			datePartsMap.ampm = partsMap.dayPeriod
 		}
 
-		// Build the formatted date string following the exact format pattern
-		let formattedDate = ''
-		for (let i = 0; i < formatParts.length; i++) {
-			const part = formatParts[i]
-			if (datePartsMap[part]) {
-				formattedDate += datePartsMap[part]
-			}
+		// Process the format string by replacing each token with its value
+		let formattedDate = format
 
-			// Add separator between parts (except after the last part)
-			if (i < formatParts.length - 1) {
-				formattedDate += separator
-			}
+		// Sort tokens by length (longest first) to avoid partial replacements
+		const tokens = Object.keys(datePartsMap).sort((a, b) => b.length - a.length)
+
+		// Replace each token with its value
+		for (const token of tokens) {
+			const regex = new RegExp(token, 'g')
+			formattedDate = formattedDate.replace(regex, datePartsMap[token])
 		}
 
 		return formattedDate

package/tsconfig.json

@@ -21,12 +21,14 @@
 		"declarationMap": true,
 		"useDefineForClassFields": true,
 		"allowSyntheticDefaultImports": true,
+		"forceConsistentCasingInFileNames": true,
 		"lib": [
 			"ESNext",
 			"DOM"
 		],
 		"types": [
 			"vite/client",
+			"vitest/globals",
 			"@vue-macros/reactivity-transform/macros-global"
 		],
 		"paths": {
@@ -47,6 +49,6 @@
 		"**/**/*.vue",
 		"**/**/*.d.ts",
 		"./vite.config.ts",
-		"src/directives/pattern"
+		"src/directives/pattern",
 	]
 }

package/vite.config.ts

@@ -1,19 +1,26 @@
 import { resolve } from 'node:path'
-import { fileURLToPath, URL } from 'node:url'
+// import { fileURLToPath, URL } from 'node:url'
 import vue from '@vitejs/plugin-vue'
 import ReactivityTransform from '@vue-macros/reactivity-transform/vite'
 import { defineConfig } from 'vite'
 import dts from 'vite-plugin-dts'
+import tsconfigPaths from 'vite-tsconfig-paths'
 
 const indexDir = resolve(import.meta.dirname, 'src')
 
 export default defineConfig(() => ({
-	plugins: [ReactivityTransform(), vue(), dts({
-		entryRoot: indexDir,
-	})],
+	plugins: [
+		tsconfigPaths(),
+		ReactivityTransform(),
+		vue(),
+		dts({
+			entryRoot: indexDir,
+		}),
+	],
 	resolve: {
 		alias: {
-			'@bagelink/vue': fileURLToPath(new URL('./src/', import.meta.url)),
+			'@bagelink/vue': resolve(indexDir, 'index.ts'),
+			'@bagelink/vue/*': `${indexDir}/*`,
 		},
 	},
 	build: {
@@ -21,7 +28,8 @@ export default defineConfig(() => ({
 		lib: {
 			entry: resolve(indexDir, 'index.ts'),
 			formats: ['es', 'cjs'],
-			fileName: (module, entry) => `${entry}.${module === 'es' ? 'mjs' : module}`,
+			fileName: (module, entry) =>
+				`${entry}.${module === 'es' ? 'mjs' : module}`,
 			cssFileName: 'style',
 		},
 		rollupOptions: {