@todovue/tv-ui 0.1.0 → 0.1.2

package/dist/demos/tv-pagination/README.md

@@ -1,275 +0,0 @@
-<p align="center"><img width="150" src="https://res.cloudinary.com/dcdfhi8qz/image/upload/v1763663056/uqqtkgp1lg3xdplutpga.png" alt="TODOvue logo" /></p>
-
-# TODOvue Pagination (TvPagination)
-
-A pagination component for Vue 3, flexible and customizable, with support for smart ranges (sibling pages and boundaries), ellipsis, optional navigation buttons, icons, custom styles, and a slot for labels. Designed for SPAs and SSR environments (e.g. Nuxt 3) without assuming DOM details.
-
-[![npm](https://img.shields.io/npm/v/@todovue/tv-pagination.svg)](https://www.npmjs.com/package/@todovue/tv-pagination)
-[![npm downloads](https://img.shields.io/npm/dm/@todovue/tv-pagination.svg)](https://www.npmjs.com/package/@todovue/tv-pagination)
-[![npm total downloads](https://img.shields.io/npm/dt/@todovue/tv-pagination.svg)](https://www.npmjs.com/package/@todovue/tv-pagination)
-![License](https://img.shields.io/github/license/TODOvue/tv-pagination)
-![Release Date](https://img.shields.io/github/release-date/TODOvue/tv-pagination)
-![Bundle Size](https://img.shields.io/bundlephobia/minzip/@todovue/tv-pagination)
-![Node Version](https://img.shields.io/node/v/@todovue/tv-pagination)
-![Last Commit](https://img.shields.io/github/last-commit/TODOvue/tv-pagination)
-![Stars](https://img.shields.io/github/stars/TODOvue/tv-pagination?style=social)
-
-> Demo: https://ui.todovue.blog/pagination
-
-## Table of Contents
-
-* [Features](#features)
-* [Installation](#installation)
-* [Quick Start (SPA)](#quick-start-spa)
-* [Usage in Nuxt 4 / SSR](#usage-in-nuxt-4--ssr)
-* [Component Registration Options](#component-registration-options)
-* [Props](#props)
-* [Events](#events)
-* [Slots](#slots)
-* [Customization (Styles / Theming)](#customization-styles--theming)
-* [Accessibility](#accessibility)
-* [SSR Notes](#ssr-notes)
-* [Development](#development)
-* [Contribute](#contribute)
-* [License](#license)
-* [Attributions](#attributions)
-
-## Features
-
-* Automatic calculation of total pages from `totalItems` and `pageSize`.
-* Dynamic range with sibling pages (`siblingCount`) and boundaries (`boundaryCount`).
-* Conditional left / right ellipsis when large jumps exist.
-* Optional buttons: first / last (`showFirstLast`) and previous / next (`showPrevNext`).
-* Navigation icons (internally uses `@todovue/tv-button`).
-* Custom styles for active / inactive pages (`activeStyle`, `inactiveStyle`).
-* Slot to customize each page label (`page-label`).
-* Controlled via `v-model` (current page) + semantic change event.
-* Ready for SSR (no direct access to `window` / `document`).
-* No heavy dependencies (only `vue` as peer + `@todovue/tv-button`).
-* Easy integration in TODOvue design systems.
-
-## Installation
-
-Using npm:
-
-```bash
-npm install @todovue/tv-pagination
-```
-
-Using yarn:
-
-```bash
-yarn add @todovue/tv-pagination
-```
-
-Using pnpm:
-
-```bash
-pnpm add @todovue/tv-pagination
-```
-
-> Requires `vue@^3`. `@todovue/tv-button` installs as a dependency.
-
-## Quick Start (SPA)
-
-Global registration (main.js / main.ts):
-
-```js
-import { createApp } from 'vue'
-import App from './App.vue'
-import { TvPagination } from '@todovue/tv-pagination'
-import '@todovue/tv-pagination/style.css' // import styles
-import '@todovue/tv-button/style.css' // import styles
-
-createApp(App)
-  .use(TvPagination) // enables <TvPagination /> globally
-  .mount('#app')
-```
-
-Local usage inside a component:
-
-```vue
-<script setup>
-import { ref } from 'vue'
-import { TvPagination } from '@todovue/tv-pagination'
-import '@todovue/tv-pagination/style.css' // import styles
-import '@todovue/tv-button/style.css' // import styles
-
-const page = ref(1)
-</script>
-
-<template>
-  <TvPagination v-model="page" :total-items="500" :sibling-count="2" :boundary-count="2" />
-</template>
-```
-
-## Usage in Nuxt 4 / SSR
-```ts
-// nuxt.config.ts
-export default defineNuxtConfig({
-  modules: [
-    '@todovue/tv-card/nuxt'
-  ]
-})
-```
-
-Use anywhere:
-
-```vue
-<TvPagination v-model="page" :total-items="120" />
-```
-
-## Component Registration Options
-
-| Approach                                      | When to use                         |
-|-----------------------------------------------|-------------------------------------|
-| Global `app.use(TvPagination)`                | Frequent use in many views          |
-| Local import `{ TvPagination }`               | Isolated contexts / code-splitting  |
-| Default import `import TvPagination from ...` | Single usage or manual registration |
-| Nuxt plugin                                   | SSR / design consistency            |
-
-## Props
-
-| Prop          | Type    | Default                                                    | Required | Description                                                    |
-|---------------|---------|------------------------------------------------------------|----------|----------------------------------------------------------------|
-| modelValue    | Number  | 1                                                          | No       | Current page (v-model). Normalized to valid range.             |
-| totalItems    | Number  | —                                                          | Yes      | Total items being paginated.                                   |
-| pageSize      | Number  | 10                                                         | No       | Page size to calculate `totalPages`.                           |
-| siblingCount  | Number  | 1                                                          | No       | Number of visible pages next to the active one.                |
-| boundaryCount | Number  | 1                                                          | No       | Number of always-visible starting and ending pages.            |
-| showFirstLast | Boolean | true                                                       | No       | Shows first/last page buttons.                                 |
-| showPrevNext  | Boolean | true                                                       | No       | Shows previous/next buttons.                                   |
-| showIcons     | Boolean | false                                                      | No       | Uses icons on navigation buttons (arrows).                     |
-| disabled      | Boolean | false                                                      | No       | Disables all interaction.                                      |
-| ariaLabel     | String  | 'Pagination'                                               | No       | Accessible label for `<nav>`.                                  |
-| labels        | Object  | `{ first:'First', prev:'Prev', next:'Next', last:'Last' }` | No       | Text for navigation buttons.                                   |
-| buttonProps   | Object  | `{}`                                                       | No       | Additional props (and styles) passed to each `TvButton`.       |
-| activeStyle   | Object  | `{}`                                                       | No       | Inline styles for active pages (`{ backgroundColor, color }`). |
-| inactiveStyle | Object  | `{ backgroundColor:'#ffffff', color:'#000000' }`           | No       | Inline styles for inactive pages.                              |
-| square        | Boolean | `false`                                                    | No       | Controls if buttons are square.                                |
-| size          | String  | `'small'`                                                  | No       | Button size (`'small'`, `'md'`, `'large'`).                    |
-| showSummary   | Boolean | `false`                                                    | No       | Displays text showing the current range of items.              |
-| textSummary   | String  | `'Showing {from} to {to} of {total} items'`                | No       | Template for summary text (uses `{from}`, `{to}`, `{total}`).  |
-
-> Note: If `activeStyle` is empty, TvButton default styling is used. `inactiveStyle` always provides white/black fallback if omitted.
-
-## Events
-
-| Name (kebab)        | Payload  | Description                                                         |
-|---------------------|----------|---------------------------------------------------------------------|
-| `update:modelValue` | `number` | Emits new page number for v-model.                                  |
-| `change`            | `number` | Semantic event triggered when the page changes (only if different). |
-
-Example:
-
-```vue
-<TvPagination v-model="page" :total-items="300" @change="onPage" />
-```
-
-```js
-function onPage(newPage) {
-  console.log('Current page:', newPage)
-}
-```
-
-## Slots
-
-| Slot         | Exposed props      | Description                            |
-|--------------|--------------------|----------------------------------------|
-| `page-label` | `{ page, active }` | Customize content of each page button. |
-
-Example:
-
-```vue
-<TvPagination
-  v-model="page"
-  :total-items="100"
->
-  <template #page-label="{ page, active }">
-    <span :style="active ? 'font-weight:600' : ''">Pg {{ page }}</span>
-  </template>
-</TvPagination>
-```
-
-## Customization (Styles / Theming)
-
-Active styles with `activeStyle`:
-
-```vue
-<TvPagination
-  v-model="page"
-  :total-items="300"
-  :active-style="{ backgroundColor: '#10b981', color: '#ffffff' }"
-/>
-```
-
-Inactive styles:
-
-```vue
-<TvPagination
-  v-model="page"
-  :total-items="300"
-  :inactive-style="{ backgroundColor: '#f1f5f9', color: '#0f172a' }"
-/>
-```
-
-Passing styles / variants to base button via `buttonProps`:
-
-```vue
-<TvPagination
-  v-model="page"
-  :total-items="120"
-  :button-props="{ outlined: true, small: true }"
-/>
-```
-
-> All `buttonProps` values are passed to each `TvButton` instance (including variants like `success`, `outlined`, `small`, etc.).
-
-## Accessibility
-
-* `nav` container with configurable `aria-label` (`ariaLabel`).
-* Active page receives `aria-current="page"`.
-* Ellipsis marked with `aria-hidden="true"` and are not focusable.
-* Disabled buttons use `disabled` attribute (inherited from `TvButton`).
-* If icons are used (`showIcons=true`) accessible text is preserved (or empty for icon-only). Ensure `labels.*` describe the action.
-
-## SSR Notes
-
-* No direct DOM access → safe for server rendering.
-* Styles are served as a separate CSS file (`dist/tv-pagination.css`) that must be explicitly imported (see [Importing Styles](#importing-styles)).
-* `vue` is marked as external in the library build (tree-shake friendly).
-* Compatible with Nuxt 3/4 by adding the stylesheet to the `css` array in `nuxt.config.ts`.
-
-## Development
-
-```bash
-git clone https://github.com/TODOvue/tv-pagination.git
-cd tv-pagination
-npm install
-npm run dev        # runs playground demo (Vite)
-npm run build      # builds the library
-```
-
-Build demo (uses environment variable):
-
-```bash
-npm run build:demo  # generates dist-demo with README in public/
-```
-
-Output structure:
-
-* `dist/tv-pagination.es.js`
-* `dist/tv-pagination.cjs.js`
-* Types: `dist/tv-pagination.d.ts`
-
-## Contribute
-
-PRs and issues are welcome! See [CONTRIBUTING.md](./CONTRIBUTING.md) and [CODE_OF_CONDUCT.md](./CODE_OF_CONDUCT.md).
-
-## License
-
-MIT © TODOvue
-
-## Attributions
-
-Created for the TODOvue component ecosystem.

package/dist/demos/tv-progress-bar/CHANGELOG.md

@@ -1,84 +0,0 @@
-# Changelog
-
-All notable changes to `@todovue/tv-progress-bar` will be documented in this file.
-
-The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
-and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
-
-## [1.1.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.1.0] - 2026-01-21
-
-### Added
-- **Gradient Support**: New `gradient` prop (Array) to create modern, multicolor progress bars.
-- **Glow Effect**: New `glow` prop (Boolean) and `glowColor` (String) to add a neon-like depth effect.
-- **Customizable Transitions**: New `duration` and `easing` props to control the progress bar animation smoothness and feel.
-- New demo variants in the documentation showcasing gradients, glow effects, and custom easing functions.
-- - **Vertical Orientation**: New `orientation` prop to support side progress bars (left/right). Perfect for modern documentation or blogs.
-- **Reading Checkpoints**: New `checkpoints` prop (Array) to show indicators at specific progress points (e.g., [25, 50, 75]).
-- **Progress Labels**: New `showLabel` and `labelPosition` props to display the percentage inside the bar or as a floating bubble.
-- **Configurable Positioning**: New `position` prop to fix the bar at the `top`, `bottom`, `left`, `right`, or even use `sticky` behavior.
-- **Custom Width**: New `width` prop for vertical orientation (default: '4px').
-
-### Updated
-- `TvProgressBar` internal styles now use dynamic transitions and backgrounds via `:style` for better flexibility.
-- Documentation updated with detailed prop descriptions and usage examples for new aesthetic features.
-- Refactored internal structure to support both horizontal and vertical layouts.
-- Enhanced CSS for track background and checkpoint indicators.
-- Added new demo variants in the documentation.
-
-### Dependencies
-- Updated `@todovue/tv-demo` to `^1.4.4`.
-- Updated `sass` to `^1.97.2`.
-- Updated `vite` to `^7.3.1`.
-
-## [1.0.0] - 2026-01-06
-
-### Added
-- Initial release of TvProgressBar component
-- Real-time reading progress tracking based on scroll position
-- Flexible target selection (CSS selector, element reference, or DOM element)
-- Configurable `height` prop for progress bar thickness (default: '4px')
-- Configurable `color` prop for custom progress bar colors
-- `offsetTop` prop to account for fixed headers (default: 0)
-- `offsetBottom` prop to account for fixed footers (default: 0)
-- `zIndex` prop for controlling stacking order (default: 1200)
-- `disabled` prop to conditionally show/hide the progress bar (default: false)
-- Smooth linear transitions with 120ms duration
-- Reduced motion support via `prefers-reduced-motion` media query
-- SSR-safe implementation with proper window/document guards
-- `useProgressBar` composable for custom progress implementations
-- ResizeObserver support for responsive content tracking
-- RequestAnimationFrame optimization for smooth performance
-- Automatic recalculation on window scroll, resize, and load events
-- Template ref support for target element selection
-- `recalculate()` exposed method for manual progress updates
-- Proper cleanup of event listeners and observers on unmount
-- ARIA accessibility attributes (role, aria-label, aria-valuemin, aria-valuemax, aria-valuenow)
-- Pointer-events: none to avoid interference with page interactions
-- TypeScript support with type definitions
-- Nuxt 3/4 module support
-- Comprehensive documentation and usage examples
-- Demo playground with multiple configuration examples
-
-[1.1.1]: https://github.com/TODOvue/tv-progress-bar/pull/3/files
-[1.1.0]: https://github.com/TODOvue/tv-progress-bar/pull/2/files
-[1.0.0]: https://github.com/TODOvue/tv-progress-bar/pull/1/files