feather-k-demo-utils 0.1.0 → 0.1.2

package/DEMO-UTILS.md

@@ -227,7 +227,9 @@ This ensures demo-utils styles and features work as intended and matches the fea
 
 # Multi-Demo Navigation with DemoSelection
 
-For projects with multiple demos, use the `DemoSelection` component (available locally or from `feather-k-demo-utils` in future releases) to provide a consistent, accessible demo picker and slot-based rendering for your demo components.
+For projects with multiple demos, use the `DemoSelection` component from `feather-k-demo-utils` to provide a consistent, accessible demo picker and slot-based rendering for your demo components.
+
+**Important:** Always import `DemoSelection` from `feather-k-demo-utils`. Do not use a local `DemoSelection.vue` file. The package provides the official, up-to-date version.
 
 ## DemoSelection Component
 
@@ -236,6 +238,8 @@ For projects with multiple demos, use the `DemoSelection` component (available l
 ### Props
 - `options: Array<{ text: string; value: string }>` — List of demo options to display in the DropDownList.
 - `modelValue: string` — The currently selected demo value (for v-model binding).
+- `syncQueryParam?: boolean` — Optional. Defaults to `true`. Syncs the selected demo to a query parameter and initializes from it.
+- `queryParamName?: string` — Optional. Defaults to `"demo"`. Query parameter key used when `syncQueryParam` is enabled.
 
 ### Emits
 - `update:modelValue` — Emitted when the user selects a new demo.
@@ -246,10 +250,11 @@ For projects with multiple demos, use the `DemoSelection` component (available l
 
 ### Example Usage
 
+
 ```vue
 <script setup lang="ts">
 import { ref } from "vue";
-import DemoSelection from "./DemoSelection.vue";
+import { DemoSelection } from "feather-k-demo-utils";
 import BasicGrid from "./basic/BasicGrid.vue";
 import DetailsGrid from "./details/DetailsGrid.vue";
 // ...other imports
@@ -277,11 +282,14 @@ const selectedDemo = ref("Basic");
 - The DropDownList is only rendered if slot content is provided.
 - The selected value is always kept in sync with the parent via v-model.
 - The slot prop `selected` is the current value, so you can use it for conditional rendering.
+- By default, the component reads `?demo=<value>` on load and uses it when the value exists in `options`.
+- Query matching is case-insensitive, so values like `?demo=basic`, `?demo=Basic`, and `?demo=BASIC` resolve to the same option.
+- When the selection changes, the component updates the query parameter with `history.replaceState` (no page reload).
 
 ### Benefits
 - Consistent demo navigation UI across projects.
 - Keeps demo selection logic and rendering decoupled and reusable.
-- Easy to migrate to `feather-k-demo-utils` package in the future.
+- No need to maintain a local DemoSelection.vue; always use the package version for updates and bugfixes.
 
 # Multi-Demo Navigation with DropDownList
 

package/README.md

@@ -77,6 +77,13 @@ const demoOptions = [
 ];
 ```
 
+By default, `DemoSelection` also keeps the selected demo in the URL query string using `demo` (for example, `?demo=demo2`), and initializes selection from that query value when valid. Query matching is case-insensitive, so `?demo=DEMO2` and `?demo=demo2` both resolve.
+
+Optional props:
+
+- `syncQueryParam?: boolean` (default `true`) - Enable/disable URL query synchronization.
+- `queryParamName?: string` (default `"demo"`) - Change the query key used for sync.
+
 ### DemoDebug
 
 Collapsible debug panel. Slot content is only shown if provided.