@bagelink/vue 1.9.56 → 1.9.61

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "1.9.56",
+  "version": "1.9.61",
   "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,12 +1,13 @@
-import type { BglFormSchemaT, IfAny } from '@bagelink/vue'
+import type { BglFormSchemaT } from '@bagelink/vue'
 
-import type { MaybeRefOrGetter, Ref, UnwrapRef } from 'vue'
+import type { MaybeRefOrGetter } from 'vue'
 import { getFallbackSchema } from '@bagelink/vue'
-import { computed, ref, toValue, watch } from 'vue'
+import { computed, toValue } from 'vue'
 
 export { useAddToCalendar } from './useAddToCalendar'
 export { useDevice } from './useDevice'
 export { useExcel } from './useExcel'
+export { useLocalStore } from './useLocalStore'
 export { usePolling } from './usePolling'
 export { useTheme } from './useTheme'
 interface UseBglSchemaParamsT<T> {
@@ -31,22 +32,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'

package/src/composables/useLocalStore.ts

@@ -0,0 +1,43 @@
+import type { Ref } from 'vue'
+import { ref, watch } from 'vue'
+
+type LocalStoreDefaults = Record<string, unknown>
+type LocalStoreResult<T extends LocalStoreDefaults> = { [K in keyof T]: Ref<T[K]> }
+type LocalStoreTyped<T extends LocalStoreDefaults> = { [K in keyof T]: Ref<T[K] | null> }
+
+const _localStoreCache: Record<string, Ref> = {}
+let _storageListenerRegistered = false
+
+function _ensureListener() {
+	if (_storageListenerRegistered) return
+	_storageListenerRegistered = true
+	window.addEventListener('storage', (e) => {
+		if (e.key !== null && e.key in _localStoreCache) {
+			_localStoreCache[e.key].value = e.newValue !== null ? JSON.parse(e.newValue) : null
+		}
+	})
+}
+
+function _getRef<T>(key: string, defaultValue: T | null = null): Ref<T | null> {
+	if (!(key in _localStoreCache)) {
+		const stored = localStorage.getItem(key)
+		_localStoreCache[key] = ref(stored !== null ? JSON.parse(stored) : defaultValue)
+		watch(_localStoreCache[key], (val) => {
+			localStorage.setItem(key, JSON.stringify(val))
+		})
+	}
+	return _localStoreCache[key] as Ref<T | null>
+}
+
+export function useLocalStore<T extends LocalStoreDefaults>(defaults: T): LocalStoreResult<T>
+// eslint-disable-next-line no-redeclare
+export function useLocalStore<T extends LocalStoreDefaults>(): LocalStoreTyped<T>
+// eslint-disable-next-line no-redeclare
+export function useLocalStore<T extends LocalStoreDefaults>(defaults?: T) {
+	_ensureListener()
+	return new Proxy({} as Record<string, Ref>, {
+		get(_, key: string) {
+			return _getRef(key, defaults?.[key] ?? null)
+		},
+	})
+}