vue-context-storage 0.1.1 → 0.1.2

package/README.md

@@ -47,9 +47,9 @@ Then use components without importing:
 
 ```vue
 <template>
-  <ContextStorageRoot>
+  <ContextStorage>
     <router-view />
-  </ContextStorageRoot>
+  </ContextStorage>
 </template>
 ```
 
@@ -59,13 +59,13 @@ Import components individually when needed:
 
 ```vue
 <template>
-  <ContextStorageRoot>
+  <ContextStorage>
     <router-view />
-  </ContextStorageRoot>
+  </ContextStorage>
 </template>
 
 <script setup lang="ts">
-import { ContextStorageRoot } from 'vue-context-storage/components'
+import { ContextStorage } from 'vue-context-storage/components'
 </script>
 ```
 
@@ -87,12 +87,12 @@ interface Filters {
 const filters = ref<Filters>({
   search: '',
   status: 'active',
-  page: 1
+  page: 1,
 })
 
 // Automatically syncs filters with URL query
 useContextStorageQueryHandler(filters, {
-  prefix: 'filters' // URL will be: ?filters[search]=...&filters[status]=...
+  prefix: 'filters', // URL will be: ?filters[search]=...&filters[status]=...
 })
 </script>
 ```
@@ -116,7 +116,7 @@ interface TableState {
 const state = ref<TableState>({
   page: 1,
   search: '',
-  perPage: 25
+  perPage: 25,
 })
 
 useContextStorageQueryHandler(state, {
@@ -124,8 +124,8 @@ useContextStorageQueryHandler(state, {
   transform: (deserialized, initial) => ({
     page: asNumber(deserialized.page, { fallback: 1 }),
     search: asString(deserialized.search, { fallback: '' }),
-    perPage: asNumber(deserialized.perPage, { fallback: 25 })
-  })
+    perPage: asNumber(deserialized.perPage, { fallback: 25 }),
+  }),
 })
 ```
 
@@ -144,7 +144,7 @@ Keep empty state in URL to prevent resetting on reload:
 ```typescript
 useContextStorageQueryHandler(filters, {
   prefix: 'filters',
-  preserveEmptyState: true
+  preserveEmptyState: true,
   // Empty filters will show as: ?filters
   // Without this option, empty filters would clear the URL completely
 })
@@ -157,14 +157,11 @@ Customize global behavior:
 ```typescript
 import { ContextStorageQueryHandler } from 'vue-context-storage'
 
-const CustomQueryHandler = ContextStorageQueryHandler.configure({
+ContextStorageQueryHandler.configure({
   mode: 'push', // 'replace' (default) or 'push' for history
   preserveUnusedKeys: true, // Keep other query params
-  preserveEmptyState: false
+  preserveEmptyState: false,
 })
-
-// Use in ContextStorageRoot
-<ContextStorageRoot :handlers="[CustomQueryHandler]">
 ```
 
 ## API Reference
@@ -206,7 +203,7 @@ All transform helpers support nullable and missable options:
 asNumber(value, {
   fallback: 0,      // Default value
   nullable: false,  // Allow null return
-  missable: false   // Allow undefined return
+  missable: false,   // Allow undefined return
 })
 ```
 
@@ -220,7 +217,7 @@ import type {
   ContextStorageHandlerConstructor,
   IContextStorageQueryHandler,
   QueryValue,
-  SerializeOptions
+  SerializeOptions,
 } from 'vue-context-storage'
 ```
 
@@ -235,7 +232,7 @@ import { useContextStorageQueryHandler, asNumber } from 'vue-context-storage'
 const pagination = ref({
   page: 1,
   perPage: 25,
-  total: 0
+  total: 0,
 })
 
 useContextStorageQueryHandler(pagination, {
@@ -243,7 +240,7 @@ useContextStorageQueryHandler(pagination, {
   transform: (data, initial) => ({
     page: asNumber(data.page, { fallback: 1 }),
     perPage: asNumber(data.perPage, { fallback: 25 }),
-    total: initial.total // Don't sync total from URL
+    total: initial.total, // Don't sync total from URL
   })
 })
 ```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-context-storage",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "Vue 3 context storage system with URL query synchronization support",
   "repository": {
     "type": "git",

package/src/components/ContextStorageCollection.vue

@@ -4,12 +4,13 @@ import { ContextStorageHandlerConstructor } from '../handlers'
 import { contextStorageCollectionInjectKey } from '../injectionSymbols'
 import { computed, defineComponent, PropType, provide } from 'vue'
 import { useRouter } from 'vue-router'
+import { defaultHandlers } from '../index.ts'
 
 export default defineComponent({
   props: {
     handlers: {
       type: Object as PropType<ContextStorageHandlerConstructor[]>,
-      required: true,
+      default: () => defaultHandlers,
     },
   },
   setup({ handlers }, { slots }) {

package/src/components.ts

@@ -2,4 +2,4 @@
 export { default as ContextStorageActivator } from './components/ContextStorageActivator.vue'
 export { default as ContextStorageCollection } from './components/ContextStorageCollection.vue'
 export { default as ContextStorageProvider } from './components/ContextStorageProvider.vue'
-export { default as ContextStorageRoot } from './components/ContextStorageRoot.vue'
+export { default as ContextStorage } from './components/ContextStorage.vue'

package/src/plugin.ts

@@ -2,14 +2,14 @@ import type { App, Plugin } from 'vue'
 import ContextStorageActivator from './components/ContextStorageActivator.vue'
 import ContextStorageCollection from './components/ContextStorageCollection.vue'
 import ContextStorageProvider from './components/ContextStorageProvider.vue'
-import ContextStorageRoot from './components/ContextStorageRoot.vue'
+import ContextStorage from './components/ContextStorage.vue'
 
 export const VueContextStoragePlugin: Plugin = {
   install(app: App) {
     app.component('ContextStorageActivator', ContextStorageActivator)
     app.component('ContextStorageCollection', ContextStorageCollection)
     app.component('ContextStorageProvider', ContextStorageProvider)
-    app.component('ContextStorageRoot', ContextStorageRoot)
+    app.component('ContextStorage', ContextStorage)
   },
 }