@bagelink/vue 1.9.56 → 1.9.59

package/package.json

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

package/src/components/Spreadsheet/Index.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { Btn, CheckInput, TextInput, ToggleInput, localRef, ListItem, Dropdown, useI18n } from '@bagelink/vue'
+import { Btn, CheckInput, TextInput, ToggleInput, useLocalStore, ListItem, Dropdown, useI18n } from '@bagelink/vue'
 import { computed, ref, watch, nextTick, onUnmounted } from 'vue'
 import SpreadsheetTable from './SpreadsheetTable.vue'
 
@@ -229,7 +229,7 @@ interface CellPosition {
 const isSelecting = ref(false)
 const selectionStart = ref<CellPosition | null>(null)
 const selectionEnd = ref<CellPosition | null>(null)
-const wrapText = localRef('wrapText', false)
+const { wrapText } = useLocalStore()
 
 // Reactive variable to track the currently editing cell
 const editingCell = ref<CellPosition | null>(null)

package/src/composables/index.ts

@@ -1,6 +1,6 @@
-import type { BglFormSchemaT, IfAny } from '@bagelink/vue'
+import type { BglFormSchemaT } from '@bagelink/vue'
 
-import type { MaybeRefOrGetter, Ref, UnwrapRef } from 'vue'
+import type { MaybeRefOrGetter, Ref } from 'vue'
 import { getFallbackSchema } from '@bagelink/vue'
 import { computed, ref, toValue, watch } from 'vue'
 
@@ -9,6 +9,32 @@ export { useDevice } from './useDevice'
 export { useExcel } from './useExcel'
 export { usePolling } from './usePolling'
 export { useTheme } from './useTheme'
+
+const _localStoreCache: Record<string, Ref> = {}
+let _storageListenerRegistered = false
+
+export function useLocalStore() {
+	if (!_storageListenerRegistered) {
+		_storageListenerRegistered = true
+		window.addEventListener('storage', (e) => {
+			if (e.key && _localStoreCache[e.key]) {
+				_localStoreCache[e.key].value = e.newValue !== null ? JSON.parse(e.newValue) : null
+			}
+		})
+	}
+	return new Proxy({} as Record<string, Ref>, {
+		get(_, key: string) {
+			if (!_localStoreCache[key]) {
+				const stored = localStorage.getItem(key)
+				_localStoreCache[key] = ref(stored !== null ? JSON.parse(stored) : null)
+				watch(_localStoreCache[key], (val) => {
+					localStorage.setItem(key, JSON.stringify(val))
+				})
+			}
+			return _localStoreCache[key]
+		},
+	})
+}
 interface UseBglSchemaParamsT<T> {
 	schema?: MaybeRefOrGetter<BglFormSchemaT<T>>
 	columns?: MaybeRefOrGetter<string[]>
@@ -31,22 +57,4 @@ export function useBglSchema<T = { [key: string]: unknown }>(
 	return getFallbackSchema(data, _columns.value)
 }
 
-export function localRef<T>(
-	key: string,
-	initialValue: T
-): [T] extends [Ref<any, any>] ?
-		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 value = ref<T>(initial)
-
-	watch(() => value.value, (val) => {
-		localStorage.setItem(key, JSON.stringify(val))
-	}, { immediate: true, deep: true })
-
-	return value as any
-}
-
-export const useLocalStorage = localRef
 export { useValidateFieldValue } from './useValidateFieldValue'