feather-k-demo-utils 0.1.1 → 0.1.2

package/DEMO-UTILS.md

@@ -238,6 +238,8 @@ For projects with multiple demos, use the `DemoSelection` component from `feathe
 ### 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.
@@ -280,6 +282,9 @@ 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.

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.