@bagelink/vue 1.6.49 → 1.6.53

package/dist/types/NavLink.d.ts

@@ -6,6 +6,6 @@ export interface NavLink {
     href?: string;
     localized?: string;
     children?: NavLink[];
-    onClick?: () => void;
+    action?: () => void;
 }
 //# sourceMappingURL=NavLink.d.ts.map

package/dist/types/NavLink.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NavLink.d.ts","sourceRoot":"","sources":["../../src/types/NavLink.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAEvC,MAAM,WAAW,OAAO;IACvB,KAAK,EAAE,MAAM,CAAA;IACb,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,IAAI,EAAE,QAAQ,CAAA;IACd,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,EAAE,CAAA;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CACpB"}
+{"version":3,"file":"NavLink.d.ts","sourceRoot":"","sources":["../../src/types/NavLink.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAEvC,MAAM,WAAW,OAAO;IACvB,KAAK,EAAE,MAAM,CAAA;IACb,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,IAAI,EAAE,QAAQ,CAAA;IACd,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,EAAE,CAAA;IACpB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;CACnB"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "1.6.49",
+  "version": "1.6.53",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Bagel Studio",
@@ -61,8 +61,7 @@
     "@types/leaflet": "^1.9.18",
     "@types/signature_pad": "^4.0.0",
     "vue": "^3.5.16",
-    "vue-component-type-helpers": "^2.2.10",
-    "vue-toastification": "^2.0.0-rc.5"
+    "vue-component-type-helpers": "^2.2.10"
   },
   "peerDependencies": {
     "@bagelink/sdk": "*",
@@ -70,15 +69,11 @@
     "vue-component-type-helpers": "^2.2.10",
     "vue": "*",
     "vue-draggable-next": "^2.2.1",
-    "vue-router": "*",
-    "vue-toastification": "^2"
+    "vue-router": "*"
   },
   "peerDependenciesMeta": {
     "vue-draggable-next": {
       "optional": true
-    },
-    "vue-toastification": {
-      "optional": true
     }
   },
   "publishConfig": {
@@ -89,7 +84,8 @@
     "axios": "^1.9.0",
     "floating-vue": "^5.2.2",
     "libphonenumber-js": "1.12.9",
-    "signature_pad": "^5.0.9"
+    "signature_pad": "^5.0.9",
+    "vue-toastification": "^2.0.0-rc.5"
   },
   "scripts": {
     "dev": "tsx watch src/index.ts",

package/src/components/ListItem.vue

@@ -46,7 +46,7 @@ const bind = computed(() => {
 	const obj: { [key: string]: any } = {}
 	if (props.to !== undefined && props.to !== '') { obj.to = props.to }
 	else if (props.href !== undefined && props.href !== '') { obj.href = props.href }
-	if (props.target !== undefined && props.target !== '' && ((props.to !== undefined && props.to !== '') || (props.href !== undefined && props.href !== ''))) { obj.target = props.target }
+	if (props.target !== undefined && props.target !== undefined && ((props.to !== undefined && props.to !== '') || (props.href !== undefined && props.href !== ''))) { obj.target = props.target }
 
 	obj.class = {
 		'notClickable': !((props.to !== undefined && props.to !== '') || (props.onClick !== undefined)),
@@ -81,7 +81,10 @@ const bind = computed(() => {
 					{{ title }}
 					<slot />
 				</p>
-				<p v-if="subtitle" class="txt12 m-0 m-0 py-0 ps-0 pe-1-5 opacity-7 me-2" :class="{ 'ellipsis-1': ellipsis }">
+				<p
+					v-if="subtitle" class="txt12 m-0 m-0 py-0 ps-0 pe-1-5 opacity-7 me-2"
+					:class="{ 'ellipsis-1': ellipsis }"
+				>
 					{{ subtitle }}
 					<slot name="subtitle" />
 				</p>
@@ -90,7 +93,10 @@ const bind = computed(() => {
 		</component>
 		<slot name="end">
 			<Icon v-if="iconEnd" :icon="iconEnd" class="transition-400" />
-			<p v-if="end" class="txt12 m-0 py-0 ps-0 pe-1-5 opacity-7 " :class="{ 'ellipsis-1': ellipsis }" v-text="end" />
+			<p
+				v-if="end" class="txt12 m-0 py-0 ps-0 pe-1-5 opacity-7 " :class="{ 'ellipsis-1': ellipsis }"
+				v-text="end"
+			/>
 		</slot>
 	</div>
 </template>

package/src/components/Menu.vue

@@ -1,45 +1,38 @@
 <script setup lang="ts">
-import type { IconType } from '@bagelink/vue'
+import type { NavLink } from '@bagelink/vue'
 import { Btn, Icon, Dropdown } from '@bagelink/vue'
 
-export interface MenuItem {
-	icon: IconType
-	value: string
-	to: string
-	items?: MenuItem[]
-}
-
-defineProps<{ items: MenuItem[] }>()
+defineProps<{ items: NavLink[] }>()
 </script>
 
 <template>
 	<div class="flex space-between m_w-100vw overflow m_-ms-1 m_px-05 m_py-025 bglTopMenu">
 		<div class="flex gap-025 m_gap-05">
-			<template v-for="item in items" :key="item.value">
-				<Dropdown v-if="item.items" :value="item.value" iconEnd="keyboard_arrow_down">
+			<template v-for="item in items" :key="item.label">
+				<Dropdown v-if="item.children" :value="item.label" iconEnd="keyboard_arrow_down">
 					<template #trigger="{ show }">
 						<Btn thin flat @click="show()">
 							<Icon :name="item.icon" size="0.8" style="margin-bottom: -0.1rem" />
 							<p class="-ms-025">
-								{{ item.value }}
+								{{ item.label }}
 							</p>
 							<Icon name="keyboard_arrow_down" size="0.8" style="margin-bottom: -0.1rem" />
 						</Btn>
 					</template>
 					<Btn
-						v-for="subItem in item.items" :key="subItem.value" thin flat :to="subItem.to"
+						v-for="subItem in item.children" :key="subItem.label" thin flat :to="subItem.to"
 						class="block m_px-025"
 					>
 						<Icon :name="subItem.icon" size="0.8" style="margin-bottom: -0.1rem" />
 						<p class="-ms-025">
-							{{ subItem.value }}
+							{{ subItem.label }}
 						</p>
 					</Btn>
 				</Dropdown>
 				<Btn v-else thin flat :to="item.to" class="m_px-025">
 					<Icon :name="item.icon" size="0.9" style="margin-bottom: -0.1rem" />
 					<p class="-ms-025">
-						{{ item.value }}
+						{{ item.label }}
 					</p>
 				</Btn>
 			</template>

package/src/components/NavBar.vue

@@ -60,7 +60,7 @@ onMounted(calcIsOpen)
 						:key="link.label"
 						class="nav-button"
 						:to="link.to"
-						@click="link.onClick?.()"
+						@click="link.action?.()"
 					>
 						<Icon :icon="link.icon" />
 						<div class="tooltip">
@@ -77,7 +77,7 @@ onMounted(calcIsOpen)
 					:key="link.label"
 					class="nav-button"
 					:to="link.to"
-					@click="link.onClick?.()"
+					@click="link.action?.()"
 				>
 					<Icon :icon="link.icon" />
 					<div class="tooltip">

package/src/components/Zoomer.vue

@@ -9,7 +9,6 @@ interface Props {
 	maxScale?: number
 	zoom?: number
 	resetTrigger?: number
-	aspectRatio?: number
 	backgroundColor?: string
 	pivot?: string // 'cursor' | 'image-center'
 	zoomingElastic?: boolean
@@ -24,7 +23,6 @@ const {
 	maxScale = 5,
 	zoom,
 	disabled = false,
-	aspectRatio = 1,
 	backgroundColor = 'transparent',
 	pivot = 'cursor',
 	zoomingElastic = true,

package/src/components/layout/AppSidebar.vue

@@ -4,9 +4,8 @@ import { Btn, Icon } from '@bagelink/vue'
 import { inject, computed, ref, watch } from 'vue'
 import { useRoute } from 'vue-router'
 
-// Extended interface for links that can have actions
+// Extended interface for links with active route tracking
 interface LinkWithAction extends NavLink {
-	action?: () => void
 	activeRoutes?: string[] // נתיבים שצריכים להיות מסומנים כאקטיביים עבור הלינק הזה
 }
 

package/src/components/layout/BottomMenu.vue

@@ -20,7 +20,7 @@ defineProps<{
 		<slot name="brand" />
 		<Btn
 			v-for="(nav, i) in navLinks" :key="i" :to="nav.to" class="m_h-auto"
-			@click="nav.onClick"
+			@click="nav.action"
 		>
 			<Icon :icon="nav.icon" :size="1.4" class="m-0 line-height-14" />
 			<p class="m-0 pb-025 txt10 line-height-1 w60 menu-text">

package/src/components/layout/SidebarMenu.vue

@@ -47,7 +47,7 @@ const toggleMenu = useDebounceFn(() => {
 				v-bind="{
 					...(nav.to && { to: nav.to }),
 					...(nav.href && { href: nav.href }),
-					...(nav.onClick && { onClick: nav.onClick }),
+					...(nav.action && { onClick: nav.action }),
 				}"
 				class="nav-button px-075 me-auto w-100"
 			>

package/src/plugins/useToast.ts

@@ -1,10 +1,11 @@
 import type { App, InjectionKey, Plugin } from 'vue'
 import { inject } from 'vue'
-import {
+import Toast, {
 	type PluginOptions as ToastOptions,
-	type ToastInterface,
 	POSITION,
+	useToast as useVueToast,
 } from 'vue-toastification'
+import 'vue-toastification/dist/index.css'
 
 export interface ToastApi {
 	success: (message: string, options?: any) => void
@@ -35,58 +36,62 @@ export function useToast(): ToastApi {
 export type BagelToastOptions = Partial<ToastOptions>
 
 export const ToastPlugin: Plugin<BagelToastOptions[]> = {
-	install: async (app: App, options: BagelToastOptions = {}) => {
-		try {
-			// Dynamically import vue-toastification to avoid bundling if not used
-			const Toast = await import('vue-toastification')
-			const ToastInterface = Toast.default || Toast
-
-			const defaultOptions: ToastOptions = {
-				position: POSITION.TOP_RIGHT,
-				timeout: 3000,
-				closeOnClick: true,
-				pauseOnFocusLoss: true,
-				pauseOnHover: true,
-				draggable: true,
-				draggablePercent: 0.6,
-				showCloseButtonOnHover: false,
-				hideProgressBar: false,
-				closeButton: 'button',
-				icon: true,
-				rtl: false,
-				transition: 'Vue-Toastification__fade',
-				maxToasts: 5,
-				newestOnTop: true,
-				...options,
-			}
-
-			// Install vue-toastification
-			app.use(ToastInterface as Plugin, defaultOptions)
-
-			// Get the toast instance
-			const toast: ToastInterface = app.config.globalProperties.$toast
+	install: (app: App, options: BagelToastOptions = {}) => {
+		const defaultOptions: ToastOptions = {
+			position: POSITION.TOP_RIGHT,
+			timeout: 3000,
+			closeOnClick: true,
+			pauseOnFocusLoss: true,
+			pauseOnHover: true,
+			draggable: true,
+			draggablePercent: 0.6,
+			showCloseButtonOnHover: false,
+			hideProgressBar: false,
+			closeButton: 'button',
+			icon: true,
+			rtl: false,
+			transition: 'Vue-Toastification__fade',
+			maxToasts: 5,
+			newestOnTop: true,
+			...options,
+		}
 
-			// Create the API wrapper
-			const api: ToastApi = {
-				success: (message: string, options?: any) => toast.success(message, options),
-				error: (message: string, options?: any) => toast.error(message, options),
-				info: (message: string, options?: any) => toast.info(message, options),
-				warning: (message: string, options?: any) => toast.warning(message, options),
-				show: (message: string, options?: any) => toast(message, options),
-				clear: () => { toast.clear() },
-			}
+		// Install vue-toastification
+		app.use(Toast, defaultOptions)
 
-			// Set global singleton on first install
-			if (!globalToastApi) {
-				globalToastApi = api
-			}
+		// Create the API wrapper using lazy evaluation
+		const api: ToastApi = {
+			success: (message: string, opts?: any) => {
+				const toast = useVueToast()
+				return toast.success(message, opts)
+			},
+			error: (message: string, opts?: any) => {
+				const toast = useVueToast()
+				return toast.error(message, opts)
+			},
+			info: (message: string, opts?: any) => {
+				const toast = useVueToast()
+				return toast.info(message, opts)
+			},
+			warning: (message: string, opts?: any) => {
+				const toast = useVueToast()
+				return toast.warning(message, opts)
+			},
+			show: (message: string, opts?: any) => {
+				const toast = useVueToast()
+				return toast(message, opts)
+			},
+			clear: () => {
+				const toast = useVueToast()
+				toast.clear()
+			},
+		}
 
-			app.provide(ToastSymbol, api)
-		} catch (error) {
-			console.error('Failed to load vue-toastification. Make sure it is installed:', error)
-			throw new Error(
-				'vue-toastification is required for ToastPlugin. Install it with: pnpm add vue-toastification'
-			)
+		// Set global singleton on first install
+		if (!globalToastApi) {
+			globalToastApi = api
 		}
+
+		app.provide(ToastSymbol, api)
 	},
 }

package/src/types/NavLink.ts

@@ -7,5 +7,5 @@ export interface NavLink {
 	href?: string
 	localized?: string
 	children?: NavLink[]
-	onClick?: () => void
+	action?: () => void
 }