feather-k-demo-utils

Shared demo utilities for Feather K Vue component demo repositories.

Purpose

feather-k-demo-utils centralizes common demo functionality used across feather-k- demo projects, including:

• Shared demo styles
• Shared demo UI components (such as DemoStats, DemoDebug, and DemoSettings)
• Shared utility helpers (for example, CDN/version helpers)

This package is intended for internal/demo scenarios and consistency across Feather K demos, not as a general-purpose application UI library.

What's Included

• feather-k-demo-utils (root exports)
  • Demo components and top-level exports
• feather-k-demo-utils/components
  • Component-focused exports:
    • DemoStats: Demo stats footer
    • DemoDebug: Collapsible debug panel (slot-based)
    • DemoSettings: Collapsible settings panel (slot-based)
    • DemoNotes: Notes/info panel (slot-based)
    • DemoSelection: Demo selector dropdown (slot-based, enables switching between demos)
• feather-k-demo-utils/utils
  • Utility helpers used by demo apps
• feather-k-demo-utils/styles/demo.css
  • Demo-only stylesheet for shared demo layout and component styling

Quick Usage

Install:

npm install feather-k-demo-utils

Import demo styles once in your app entry:

import "feather-k-demo-utils/styles/demo.css";

Import what you need:

import { DemoStats, DemoDebug, DemoSettings, DemoNotes, DemoSelection } from "feather-k-demo-utils";
import { getFeatherkStylesVersionFromUrl } from "feather-k-demo-utils/utils";

DemoSelection

Dropdown selector for switching between multiple demos. Uses a slot to render the selected demo. Example:

<DemoSelection :options="demoOptions" v-model="selectedDemo">
	<template #default="{ selected }">
		<Demo1 v-if="selected === 'demo1'" />
		<Demo2 v-else-if="selected === 'demo2'" />
	</template>
</DemoSelection>

Where demoOptions is an array like:

const demoOptions = [
	{ text: "Demo 1", value: "demo1" },
	{ text: "Demo 2", value: "demo2" },
];

DemoDebug

Collapsible debug panel. Slot content is only shown if provided.

<DemoDebug>
	<pre>{{ debugInfo }}</pre>
</DemoDebug>

DemoSettings

Collapsible settings panel. Slot content is only shown if provided.

<DemoSettings>
	<div>Settings content here</div>
</DemoSettings>

DemoNotes

Panel for displaying notes or additional information. Slot content is only shown if provided.

<DemoNotes>
	<h3>Notes</h3>
	<p>Some information about this demo.</p>
</DemoNotes>

For full integration steps (Vite env setup, stylesheet injection, and component usage), see DEMO-UTILS.md.

Publishing

Package publishing is handled via npm.

npm login
npm run build
npm publish

Build-Time Publish Date

This package does not export an in-package PUBLISH_DATE. If a consuming demo needs publish date display, inject it at build time (for example via Vite define) in the consuming app.