@bagelink/vue 1.9.75 → 1.9.79

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "1.9.75",
+  "version": "1.9.79",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Bagel Studio",

package/src/components/lightbox/index.ts

@@ -27,7 +27,10 @@ const lightboxDirective: Directive = {
 	},
 	unmounted(el: HTMLElement) {
 		el.removeEventListener('click', clickHandler)
-	}
+	},
+	getSSRProps() {
+		return {}
+	},
 }
 
 function groupHandler(item: LightboxItem) {
@@ -77,7 +80,8 @@ function determineFileType(url: any): string {
 
 let lightboxInstance: InstanceType<typeof Lightbox> | undefined
 
-function getLightboxInstance(): InstanceType<typeof Lightbox> {
+function getLightboxInstance(): InstanceType<typeof Lightbox> | undefined {
+	if (typeof document === 'undefined') { return undefined }
 	if (!lightboxInstance) {
 		const lightboxEl = document.createElement('div')
 		document.body.prepend(lightboxEl)

package/src/composables/useDevice.ts

@@ -1,17 +1,17 @@
 import { onMounted, onUnmounted, ref } from 'vue'
 
 export function useDevice() {
-	const innerWidth = ref(window.innerWidth)
-	const isMobile = ref(window.innerWidth < 768)
-	const scrollY = ref(window.scrollY)
-	const scrollX = ref(window.scrollX)
-	const innerHeight = ref(window.innerHeight)
+	const innerWidth = ref(0)
+	const isMobile = ref(false)
+	const scrollY = ref(0)
+	const scrollX = ref(0)
+	const innerHeight = ref(0)
 
 	// Scroll direction tracking
 	const scrollDirY = ref<'up' | 'down' | null>(null)
 	const scrollDirX = ref<'left' | 'right' | null>(null)
-	const prevScrollY = ref(window.scrollY)
-	const prevScrollX = ref(window.scrollX)
+	const prevScrollY = ref(0)
+	const prevScrollX = ref(0)
 
 	function updateDeviceInfo() {
 		// Store previous scroll positions

package/src/composables/useLocalStore.ts

@@ -8,8 +8,10 @@ type LocalStoreTyped<T extends LocalStoreDefaults> = { [K in keyof T]: Ref<T[K]
 const _localStoreCache: Record<string, Ref> = {}
 let _storageListenerRegistered = false
 
+const isBrowser = typeof window !== 'undefined'
+
 function _ensureListener() {
-	if (_storageListenerRegistered) return
+	if (!isBrowser || _storageListenerRegistered) return
 	_storageListenerRegistered = true
 	window.addEventListener('storage', (e) => {
 		if (e.key !== null && e.key in _localStoreCache) {
@@ -20,10 +22,10 @@ function _ensureListener() {
 
 function _getRef<T>(key: string, defaultValue: T | null = null): Ref<T | null> {
 	if (!(key in _localStoreCache)) {
-		const stored = localStorage.getItem(key)
+		const stored = isBrowser ? localStorage.getItem(key) : null
 		_localStoreCache[key] = ref(stored !== null ? JSON.parse(stored) : defaultValue)
 		watch(_localStoreCache[key], (val) => {
-			localStorage.setItem(key, JSON.stringify(val))
+			if (isBrowser) localStorage.setItem(key, JSON.stringify(val))
 		})
 	}
 	return _localStoreCache[key] as Ref<T | null>

package/src/composables/useTheme.ts

@@ -37,8 +37,10 @@ const STORAGE_KEY = 'color-mode'
 const colorMode = ref<string>('system')
 const isDark = ref(false)
 
+const isBrowser = typeof window !== 'undefined'
+
 function getSystemPrefersDark() {
-	return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
+	return isBrowser && window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
 }
 
 function findTheme(value: string) {
@@ -46,6 +48,7 @@ function findTheme(value: string) {
 }
 
 function applyTheme(themeValue: string) {
+	if (!isBrowser) return
 	const root = document.documentElement
 
 	// Remove all theme classes
@@ -139,7 +142,7 @@ export function useTheme() {
 
 	// Watch for mode changes
 	watch(colorMode, (newMode) => {
-		window.localStorage.setItem(STORAGE_KEY, newMode)
+		if (isBrowser) localStorage.setItem(STORAGE_KEY, newMode)
 		applyTheme(newMode)
 	})
 

package/src/directives/pattern.ts

@@ -228,6 +228,9 @@ const pattern = {
 
 		stateMap.delete(el)
 	},
+	getSSRProps() {
+		return {}
+	},
 }
 
 export default pattern

package/src/directives/ripple.ts

@@ -54,6 +54,9 @@ const ripple: Directive<HTMLElement, boolean> = {
 			delete (el as any).__rippleClickHandler
 		}
 	},
+	getSSRProps() {
+		return {}
+	},
 }
 
 export default ripple

package/src/directives/vResize.ts

@@ -201,5 +201,8 @@ export const vResize: Directive<HTMLElement, ResizeOptions> = {
 			}
 			initResize(el, binding)
 		}
-	}
+	},
+	getSSRProps() {
+		return {}
+	},
 }

package/src/utils/showdown.ts

@@ -675,7 +675,7 @@ showdown.Converter = function (this: any, converterOptions?: ShowdownOptions) {
 		src = src.replace(/>[ \t]+</, '>¨NBSP;<')
 
 		if (!HTMLParser) {
-			if (window && window.document) {
+			if (typeof window !== 'undefined' && window.document) {
 				HTMLParser = window.document
 			} else {
 				throw new Error('HTMLParser is undefined. If in a webworker or nodejs environment, you need to provide a WHATWG DOM and HTML such as JSDOM')