@todovue/tv-ui 0.1.0

package/dist/demos/tv-scroll-top/README.md

@@ -0,0 +1,445 @@
+<p align="center"><img width="150" src="https://res.cloudinary.com/dcdfhi8qz/image/upload/v1763663056/uqqtkgp1lg3xdplutpga.png" alt="TODOvue logo">
+</p>
+
+# TODOvue Scroll Top (TvScrollTop)
+A lightweight, customizable Vue 3 "scroll to top" button component with smooth animations, position variants, configurable threshold, and SSR support. Works seamlessly in Single Page Apps and Server-Side Rendered (SSR) environments like Nuxt 3.
+
+[![npm](https://img.shields.io/npm/v/@todovue/tv-scroll-top.svg)](https://www.npmjs.com/package/@todovue/tv-scroll-top)
+[![npm downloads](https://img.shields.io/npm/dm/@todovue/tv-scroll-top.svg)](https://www.npmjs.com/package/@todovue/tv-scroll-top)
+[![npm total downloads](https://img.shields.io/npm/dt/@todovue/tv-scroll-top.svg)](https://www.npmjs.com/package/@todovue/tv-scroll-top)
+![License](https://img.shields.io/github/license/TODOvue/tv-scroll-top)
+![Release Date](https://img.shields.io/github/release-date/TODOvue/tv-scroll-top)
+![Bundle Size](https://img.shields.io/bundlephobia/minzip/@todovue/tv-scroll-top)
+![Node Version](https://img.shields.io/node/v/@todovue/tv-scroll-top)
+![Last Commit](https://img.shields.io/github/last-commit/TODOvue/tv-scroll-top)
+![Stars](https://img.shields.io/github/stars/TODOvue/tv-scroll-top?style=social)
+
+> Demo: https://ui.todovue.blog/scrolltop
+
+## Table of Contents
+- [Features](#features)
+- [Installation](#installation)
+- [Quick Start (SPA)](#quick-start-spa)
+- [Nuxt 4 / SSR Usage](#nuxt-4--ssr-usage)
+- [Component Registration Options](#component-registration-options)
+- [Props](#props)
+- [Composable API](#composable-api)
+- [Usage Examples](#usage-examples)
+- [Animations](#animations)
+- [Accessibility](#accessibility)
+- [SSR Notes](#ssr-notes)
+- [Development](#development)
+- [Contributing](#contributing)
+- [License](#license)
+
+## Features
+- Smooth scroll to top with one click
+- Configurable visibility threshold (show button after X pixels scrolled)
+- Position variants: left or right side
+- Beautiful entrance/exit animations with rotation and bounce effects
+- Backdrop blur effect for modern UI
+- Automatic show/hide based on scroll position
+- SSR-safe (works with Nuxt 3 and other SSR frameworks)
+- Composable API (`useScrollTop`) for custom implementations
+- Keyboard accessible (focus states and ARIA labels)
+- Lightweight and tree-shakeable
+- TypeScript support
+
+## Installation
+Using npm:
+```bash
+npm install @todovue/tv-scroll-top
+```
+Using yarn:
+```bash
+yarn add @todovue/tv-scroll-top
+```
+Using pnpm:
+```bash
+pnpm add @todovue/tv-scroll-top
+```
+
+### Importing Styles
+**Important:** You must explicitly import the stylesheet in your application.
+
+#### For Vue/Vite SPA:
+```ts
+// main.ts
+import { createApp } from 'vue'
+import App from './App.vue'
+
+import '@todovue/tv-scroll-top/style.css'
+import { TvScrollTop } from '@todovue/tv-scroll-top'
+
+const app = createApp(App)
+app.component('TvScrollTop', TvScrollTop)
+app.mount('#app')
+```
+
+#### For Nuxt 3/4:
+```ts
+// nuxt.config.ts
+export default defineNuxtConfig({
+  modules: [
+    '@todovue/tv-scroll-top/nuxt'
+  ]
+})
+```
+
+Then register the component in a plugin as shown in the [Nuxt 3 / SSR Usage](#nuxt-3--ssr-usage) section.
+
+## Quick Start (SPA)
+Global registration (main.js / main.ts):
+```js
+import { createApp } from 'vue'
+import App from './App.vue'
+import '@todovue/tv-scroll-top/style.css'
+import TvScrollTop from '@todovue/tv-scroll-top'
+
+createApp(App)
+  .use(TvScrollTop) // enables <TvScrollTop /> globally
+  .mount('#app')
+```
+Local import inside a component:
+```vue
+<script setup>
+import { TvScrollTop } from '@todovue/tv-scroll-top'
+import '@todovue/tv-scroll-top/style.css'
+</script>
+
+<template>
+  <div>
+    <!-- Your page content -->
+    <div style="height: 2000px">
+      Scroll down to see the button appear...
+    </div>
+    
+    <!-- Scroll to top button (appears after scrolling 300px by default) -->
+    <TvScrollTop />
+  </div>
+</template>
+```
+**Note:** Don't forget to import the CSS in your main entry file as shown above.
+
+## Nuxt 4 / SSR Usage
+First, add the module to your `nuxt.config.ts`:
+```ts
+// nuxt.config.ts
+export default defineNuxtConfig({
+  modules: ['@todovue/tv-scroll-top/nuxt']
+})
+```
+
+Alternatively, you can manually add the CSS:
+```ts
+// nuxt.config.ts
+export default defineNuxtConfig({
+  css: ['@todovue/tv-scroll-top/style.css'],
+})
+```
+
+Then create a plugin file: `plugins/tv-scroll-top.client.ts`:
+```ts
+import { defineNuxtPlugin } from '#app'
+import TvScrollTop from '@todovue/tv-scroll-top'
+
+export default defineNuxtPlugin(nuxtApp => {
+  nuxtApp.vueApp.use(TvScrollTop)
+})
+```
+Use anywhere in your Nuxt app:
+```vue
+<template>
+  <div>
+    <NuxtPage />
+    
+    <!-- Scroll to top button -->
+    <TvScrollTop :threshold="400" position="right" />
+  </div>
+</template>
+```
+Optional direct import (no plugin):
+```vue
+<script setup>
+import { TvScrollTop } from '@todovue/tv-scroll-top'
+</script>
+```
+
+## Component Registration Options
+| Approach                                                                 | When to use                                    |
+|--------------------------------------------------------------------------|------------------------------------------------|
+| Global via `app.use(TvScrollTop)`                                        | Many usages across app / design system install |
+| Local named import `{ TvScrollTop }`                                     | Isolated / code-split contexts                 |
+| Direct default import `import TvScrollTop from '@todovue/tv-scroll-top'` | Single usage or manual registration            |
+
+## Props
+| Prop           | Type    | Default | Description                                                                 |
+|----------------|---------|---------|-----------------------------------------------------------------------------|
+| threshold      | Number  | 300     | Scroll position (in pixels) after which the button becomes visible.         |
+| position       | String  | 'right' | Position of the button: `'left'` or `'right'`.                              |
+| showOnScrollUp | Boolean | false   | When true, the button only appears when scrolling up (not down).            |
+
+### Prop Details
+
+#### `threshold`
+Controls when the scroll-to-top button appears. The button will show when the user has scrolled down more than this value (in pixels).
+
+Example:
+```vue
+<TvScrollTop :threshold="500" />
+```
+
+#### `position`
+Controls the horizontal position of the button on the screen.
+
+Accepted values:
+- `'right'` - Button appears on the right side (default)
+- `'left'` - Button appears on the left side
+
+Example:
+```vue
+<TvScrollTop position="left" />
+```
+
+#### `showOnScrollUp`
+Controls whether the button should only appear when the user is scrolling up. When enabled, the button will hide when scrolling down and show when scrolling up (as long as the threshold is met).
+
+Accepted values:
+- `false` - Button shows whenever scroll position exceeds threshold (default behavior)
+- `true` - Button only shows when scrolling up AND scroll position exceeds threshold
+
+Example:
+```vue
+<!-- Button appears only when scrolling up -->
+<TvScrollTop :show-on-scroll-up="true" />
+```
+
+This is particularly useful for a better user experience, as the button won't obstruct content while the user is reading down the page.
+
+## Composable API
+TvScrollTop includes a composable `useScrollTop` that you can use to build custom scroll-to-top functionality.
+
+### `useScrollTop(threshold, showOnScrollUp)`
+```js
+import { useScrollTop } from '@todovue/tv-scroll-top'
+
+const { isVisible, scrollToTop } = useScrollTop(300, false)
+```
+
+**Parameters:**
+- `threshold` (Number|Ref): Scroll position in pixels (default: 300)
+- `showOnScrollUp` (Boolean|Ref): Whether to show the button only when scrolling up (default: false)
+
+**Returns:**
+- `isVisible` (Ref<Boolean>): Reactive boolean indicating if scroll position is past the threshold (and scrolling direction if enabled)
+- `scrollToTop` (Function): Function to smoothly scroll to the top of the page
+
+**Example:**
+```vue
+<script setup>
+import { useScrollTop } from '@todovue/tv-scroll-top'
+
+const { isVisible, scrollToTop } = useScrollTop(400, true)
+</script>
+
+<template>
+  <button v-if="isVisible" @click="scrollToTop">
+    Custom Scroll Top Button
+  </button>
+</template>
+```
+
+## Usage Examples
+
+### Default (Right Position, 300px Threshold)
+```vue
+<script setup>
+import { TvScrollTop } from '@todovue/tv-scroll-top'
+import '@todovue/tv-scroll-top/style.css'
+</script>
+
+<template>
+  <div>
+    <div style="height: 2000px">
+      <!-- Your content -->
+    </div>
+    
+    <TvScrollTop />
+  </div>
+</template>
+```
+
+### Left Position
+```vue
+<script setup>
+import { TvScrollTop } from '@todovue/tv-scroll-top'
+import '@todovue/tv-scroll-top/style.css'
+</script>
+
+<template>
+  <div>
+    <div style="height: 2000px">
+      <!-- Your content -->
+    </div>
+    
+    <TvScrollTop position="left" />
+  </div>
+</template>
+```
+
+### Low Threshold (100px)
+Perfect for shorter pages or when you want the button to appear quickly.
+```vue
+<script setup>
+import { TvScrollTop } from '@todovue/tv-scroll-top'
+import '@todovue/tv-scroll-top/style.css'
+</script>
+
+<template>
+  <div>
+    <div style="height: 2000px">
+      <!-- Your content -->
+    </div>
+    
+    <TvScrollTop :threshold="100" />
+  </div>
+</template>
+```
+
+### High Threshold (600px)
+For longer pages where you want the button to appear later.
+```vue
+<script setup>
+import { TvScrollTop } from '@todovue/tv-scroll-top'
+import '@todovue/tv-scroll-top/style.css'
+</script>
+
+<template>
+  <div>
+    <div style="height: 3000px">
+      <!-- Your content -->
+    </div>
+    
+    <TvScrollTop :threshold="600" />
+  </div>
+</template>
+```
+
+### Show Only When Scrolling Up
+The button only appears when the user scrolls up, preventing content obstruction while reading down the page.
+```vue
+<script setup>
+import { TvScrollTop } from '@todovue/tv-scroll-top'
+import '@todovue/tv-scroll-top/style.css'
+</script>
+
+<template>
+  <div>
+    <div style="height: 2000px">
+      <!-- Your content -->
+    </div>
+    
+    <TvScrollTop :show-on-scroll-up="true" />
+  </div>
+</template>
+```
+
+### Custom Implementation with Composable
+```vue
+<script setup>
+import { useScrollTop } from '@todovue/tv-scroll-top'
+
+const { isVisible, scrollToTop } = useScrollTop(200, true)
+
+const handleClick = () => {
+  scrollToTop()
+  console.log('Scrolling to top!')
+}
+</script>
+
+<template>
+  <Transition name="fade">
+    <button 
+      v-if="isVisible" 
+      @click="handleClick"
+      class="my-custom-scroll-button"
+    >
+      ↑ Top
+    </button>
+  </Transition>
+</template>
+
+<style scoped>
+.my-custom-scroll-button {
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  padding: 10px 20px;
+  background: #007bff;
+  color: white;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+.fade-enter-active, .fade-leave-active {
+  transition: opacity 0.3s;
+}
+.fade-enter-from, .fade-leave-to {
+  opacity: 0;
+}
+</style>
+```
+
+## Animations
+TvScrollTop includes beautiful built-in animations that differ based on position:
+
+### Right Position Animations
+- **Enter**: Slides in from right with rotation (180° to 0°), bounce effect, and scale
+- **Leave**: Slides out to right with rotation (0° to 180°) and scale down
+
+### Left Position Animations
+- **Enter**: Slides in from left with rotation (-180° to 0°), bounce effect, and scale
+- **Leave**: Slides out to left with rotation (0° to -180°) and scale down
+
+### Visual Effects
+- Smooth cubic-bezier timing functions for natural movement
+- Backdrop blur effect (10px) for modern glass-morphism look
+- Shadow elevation on hover (4px → 8px)
+- Scale transform on hover (1.05x) and active (1.02x)
+
+Animations are implemented using Vue's `<Transition>` component and CSS keyframes.
+
+## Accessibility
+- **ARIA Label**: Button includes `aria-label="Scroll to top"` for screen readers
+- **Keyboard Support**: Fully keyboard accessible (can be focused and activated with Enter/Space)
+- **Focus States**: Clear focus indicators for keyboard navigation
+- **Semantic HTML**: Uses proper `<button>` element
+- **SVG Icon**: Uses semantic SVG with proper stroke and viewBox attributes
+
+## SSR Notes
+- **SSR-Safe**: No direct `window`/`document` access during module evaluation
+- **Smart Guards**: Uses `typeof window !== 'undefined'` checks
+- **Lifecycle Hooks**: Scroll listeners are added in `onMounted` hook
+- **Cleanup**: Automatically removes event listeners in `onUnmounted`
+- **Nuxt 3 Compatible**: Works seamlessly with Nuxt 3 out of the box
+- **Hydration Safe**: No hydration mismatches
+
+## Development
+```bash
+git clone https://github.com/TODOvue/tv-scroll-top.git
+cd tv-scroll-top
+npm install
+npm run dev     # run demo playground
+npm run build   # build library
+```
+Local demo served from Vite using `index.html` and demo examples in `src/demo`.
+
+## Contributing
+PRs and issues welcome. See [CONTRIBUTING.md](./CONTRIBUTING.md) and [CODE_OF_CONDUCT.md](./CODE_OF_CONDUCT.md).
+
+## License
+MIT © TODOvue
+
+### Attributions
+Crafted for the TODOvue component ecosystem

package/dist/demos/tv-search/CHANGELOG.md

@@ -0,0 +1,155 @@
+# Changelog
+
+All notable changes to `@todovue/tv-search` will be documented in this file.
+
+This project adheres to [Semantic Versioning](https://semver.org/).
+
+## [1.2.1] - 2026-01-27
+
+### Changed
+- Simplified the file list in `package.json` to include only essential assets.
+- Simplified the build configuration by removing demo-specific logic.
+- Enhanced GitHub Actions workflows to automate npm package publishing and GitHub release creation.
+- Moved the `@todovue/tv-demo` component import from main.js to `Demo.vue` to localize its usage.
+- Updated build commands to include `README.md` and `CHANGELOG.md` files in the public directory during the build process.
+
+### Added
+- Included the `src` directory in the `package.json` files list to ensure component source files are bundled in the package distribution.
+
+### Removed
+- Eliminated the global import of the `@todovue/tv-demo` component from `main.js`.
+
+### Dependencies
+- Updated `@todovue/tv-demo` to `^1.4.11`.
+- Updated `vue` to `^3.5.27`.
+- Updated `sass` to `^1.97.3`.
+
+## [1.2.0] - 2026-01-20
+
+### Added
+- Added `searchKeys` prop to allow searching by multiple object properties (default is `['title']`).
+- Added `noResultsText` prop for customizable empty state text (default: "No results found for").
+- Added scoped `item` slot for customizing search result rendering.
+- Added `no-results` slot for customizing the empty state.
+
+### Dependencies
+- Updated the `@todovue/tv-demo` dependency to `^1.4.4`.
+- Updated the `@todovue/tv-button` dependency to `^1.2.4`.
+- Updated the `sass` dependency to `^1.97.2`.
+- Updated the `vite` dependency to `^7.3.1`.
+
+## [1.1.3] - 2025-12-27
+
+### Fixed
+- Fixed publish in npm with new token.
+
+## [1.1.2] - 2025-12-27
+
+### Added
+- Added automatic publishing to the TODOvue cPanel in `release.yml` for each release, simplifying package distribution and updates.
+- Added `package-lock.json` to the repository to ensure dependency consistency and facilitate version management across development and production environments.
+
+### Changed
+- Changed the `base` option in `vite.config.js` for website deployment in cpanel.
+
+### Fixed
+- Fixed repository URL in `package.json` to point to the correct GitHub repository.
+- Fixed the token configuration used to generate the package in the GitHub Actions workflow `release.yml`.
+
+### Dependencies
+- Updated dependency versions in `package.json` to maintain compatibility and benefit from improvements and bug fixes in the used libraries.
+
+## [1.1.1] - 2025-11-24
+
+### Changed
+- Updated background and text colors for dark and light themes to improve readability and visual comfort.
+- Deleted unused styles files.
+
+### Dependencies
+- Updated the `@todovue/tv-demo` dependency to `^1.2.2` to ensure compatibility with the latest changes.
+
+## [1.1.0] - 2025-11-21
+
+### Added
+- Added `nux.js` configuration file for Nuxt 4 integration.
+- Added `tsconfig.json` for proper type checking during build.
+- Create `global.d.ts` to declare module for TypeScript users.
+- Added Nuxt module for automatic style injection and auto-registration of the `TvSearch` component.
+- The `@todovue/tv-search` component is now externalized from the final build, reducing bundle size.
+- Added `CHANGELOG.md` in script to generate demo and documentation site.
+
+### Dependencies
+- Updated the `@todovue/tv-demo` dependency to `^1.2.1` to ensure compatibility with the latest changes.
+- Updated the `@todovue/tv-button` dependency to `^1.2.2` to ensure compatibility with the latest changes.
+
+## [1.0.5] - 2025-11-18
+
+### Changed
+- Modified search behavior: pressing Enter or the search button now always emits the input string. The result object is only emitted when explicitly selected from the list.
+
+## [1.0.4] - 2025-11-15
+
+### Changed
+- Styles are now served as a separate CSS file (`dist/tv-search.css`) generated by Vite during the build process.
+- Users must now explicitly import the stylesheet in their application:
+  - For Vue/Vite SPA: `import '@todovue/tv-search/style.css'` in `main.ts`
+  - For Nuxt 3/4: Add `'@todovue/tv-search/style.css'` to the `css` array in `nuxt.config.ts`
+
+### Added
+- Added `sideEffects` field to `package.json` to support proper tree-shaking with CSS files.
+- Added `./style.css` export path in `package.json` for explicit CSS imports.
+- Improved SSR/SSG compatibility, especially for Nuxt 3/4 applications.
+
+### Dependencies
+- Removed dependency on `vite-plugin-css-injected-by-js` from `devDependencies`
+
+## [1.0.3] - 2025-11-13
+
+### Fixed
+- The emit event is fixed to send the selected object and not the input.
+
+### Changed
+- Corrected demo application routes.
+
+## [1.0.2] - 2025-10-17
+
+### Changed
+- The library build now uses `src/entry.ts` (exports both the component and the plugin) instead of directly exporting the `.vue` file.
+- CSS injection via JS has been removed for the library build (it is only kept for the demo), generating a `tv-search.css` file optimized for SSR/Nuxt.
+- Changed node-version to workflows release.yml to 20.
+
+### Added
+- Plugin installation support: `app.use(TvSearch)` or `app.use(TvSearchPlugin)`.
+- Explicit export of the style file: `import '@todovue/tv-search/style.css'`.
+- Documentation for usage in SSR and Nuxt 3 applications.
+
+## [1.0.1] - 2025-05-07
+
+### Fixed
+- Rename `global.scss` to `_global.scss`
+- Update imports in component
+
+## [1.0.0] - 2025-05-06
+
+### Features
+- Initial release of `TvSearch` component.
+- Added support for `Ctrl + K` / `⌘ + K` keyboard shortcuts to open the search modal.
+- Supports customizable search result list via `results` prop.
+- Allows overriding styles with `customStyles` prop.
+- Emits `search` event on form submission.
+- Full keyboard accessibility and responsive design.
+- Easy integration into any Vue 3 application.
+- Published to [npm](https://www.npmjs.com/package/@todovue/tv-search) under the `@todovue` namespace.
+
+[1.2.1]: https://github.com/TODOvue/tv-button/pull/13/files
+[1.2.0]: https://github.com/TODOvue/tv-button/pull/12/files
+[1.1.3]: https://github.com/TODOvue/tv-button/pull/11/files
+[1.1.2]: https://github.com/TODOvue/tv-button/pull/10/files
+[1.1.1]: https://github.com/TODOvue/tv-button/pull/9/files
+[1.1.0]: https://github.com/TODOvue/tv-button/pull/8/files
+[1.0.5]: https://github.com/TODOvue/tv-button/pull/7/files
+[1.0.4]: https://github.com/TODOvue/tv-button/pull/6/files
+[1.0.3]: https://github.com/TODOvue/tv-button/pull/5/files
+[1.0.2]: https://github.com/TODOvue/tv-button/pull/4/files
+[1.0.1]: https://github.com/TODOvue/tv-button/pull/2/files
+[1.0.0]: https://github.com/TODOvue/tv-button/pull/2/files