@todovue/tv-ui 0.1.0 → 0.1.2

package/dist/demos/tv-relative-time/CHANGELOG.md

@@ -1,122 +0,0 @@
-# Changelog
-
-All notable changes to `@todovue/tv-relative-time` will be documented in this file.
-
-This project adheres to [Semantic Versioning](https://semver.org/).
-
-## [1.3.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.3.0] - 2026-01-19
-
-### Added
-- Introduced the `timeZone` property to support date formatting based on specific time zones.
-- Introduced the `nowThreshold` property to allow customizable durations for the "just now" time display.
-
-### Dependencies
-- Updated the `@todovue/tv-demo` dependency to `^1.4.3`.
-- Updated the `sass` dependency to `^1.97.2`.
-- Updated the `vite` dependency to `^4.2.4`.
-
-### Changed
-- Enhanced tooltip behavior and updated cursor styles to dynamically respond to the user's date display preference.
-
-### Removed
-- Eliminated default tooltip text for unavailable dates to improve clarity and reduce UI clutter.
-
-## [1.2.1] - 2025-12-19
-
-### 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.2.0] - 2025-11-21
-
-### Added
-- Added `tsconfig.json` for proper type checking during build.
-- Create `global.d.ts` to declare module for TypeScript users.
-- The `@todovue/tv-label` 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.
-
-## [1.1.2] - 2025-11-15
-
-### Changed
-- Removed CSS injection via `vite-plugin-css-injected-by-js` from the library build. Styles are now provided as a separate CSS file generated by Vite (`dist/*.css`) and must be explicitly imported in the host application (SPA or Nuxt).
-- These changes improve compatibility with SSR/SSG environments, especially Nuxt 3/4, by avoiding runtime CSS injection.
-
-## [1.1.1] - 2025-10-18
-
-### 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-relative-time.css` file optimized for SSR/Nuxt.
-- Changed node-version to workflows release.yml to 20.
-
-### Added
-- Plugin installation support: `app.use(TvRelativeTime)` or `app.use(TvRelativeTimePlugin)`.
-- Explicit export of the style file: `import '@todovue/tv-relative-time/style.css'`.
-- Documentation for usage in SSR and Nuxt 3 applications.
-
-## [1.1.0] - 2025-05-06
-
-### Features
-- Added localization support for relative time formatting (`es`, `fr`, `pt`, and `en` as default)
-
-### Fixed
-- Fixed date formatting issues by enforcing the UTC timezone
-- Watched `date` and other props to ensure reactivity
-- Updated package references and improved documentation consistency
-
-## [1.0.0] - 2025-05-05
-
-### Features
-- Fully functional `<TvRelativeTime />` component.
-- Live update support with customizable `updateInterval`.
-- Compact mode via `compact` prop: displays formats like `2d`, `3w`, `1mo`, `1a`.
-- Optional absolute date display using `showFullDate` prop.
-- Tooltip support with accessible `<time>` tag and `aria-label`.
-- Human-friendly phrasing for relative dates like `yesterday`, `last week` or `this Wednesday`.
-- Detailed breakdown of time differences in years, months, weeks, and days (limited to two units for UI clarity).
-- No external dependencies.
-- Includes `useRelativeTime()` composable for shared logic.
-
-### Accessibility
-- Semantic `<time>` element with `datetime`, `title`, and `aria-label`.
-
-[1.3.1]: https://github.com/TODOvue/tv-relative-time/pull/8/files
-[1.3.0]: https://github.com/TODOvue/tv-relative-time/pull/7/files
-[1.2.1]: https://github.com/TODOvue/tv-relative-time/pull/6/files
-[1.2.0]: https://github.com/TODOvue/tv-relative-time/pull/5/files
-[1.1.2]: https://github.com/TODOvue/tv-relative-time/pull/4/files
-[1.1.1]: https://github.com/TODOvue/tv-relative-time/pull/3/files
-[1.1.0]: https://github.com/TODOvue/tv-relative-time/pull/2/files
-[1.0.0]: https://github.com/TODOvue/tv-relative-time/pull/1/files

package/dist/demos/tv-relative-time/README.md

@@ -1,405 +0,0 @@
-<p align="center"><img width="150" src="https://res.cloudinary.com/dcdfhi8qz/image/upload/v1763663056/uqqtkgp1lg3xdplutpga.png" alt="TODOvue logo">
-</p>
-
-# TODOvue RelativeTime (TvRelativeTime)
-A minimal and customizable Vue 3 component to display human-readable relative dates with live updates, compact formats, and multi-language support. Works seamlessly in Single Page Apps and Server-Side Rendered (SSR) environments (e.g. Nuxt 3).
-
-[![npm](https://img.shields.io/npm/v/@todovue/tv-relative-time.svg)](https://www.npmjs.com/package/@todovue/tv-relative-time)
-[![npm downloads](https://img.shields.io/npm/dm/@todovue/tv-relative-time.svg)](https://www.npmjs.com/package/@todovue/tv-relative-time)
-[![npm total downloads](https://img.shields.io/npm/dt/@todovue/tv-relative-time.svg)](https://www.npmjs.com/package/@todovue/tv-relative-time)
-![License](https://img.shields.io/github/license/TODOvue/tv-relative-time)
-![Release Date](https://img.shields.io/github/release-date/TODOvue/tv-relative-time)
-![Bundle Size](https://img.shields.io/bundlephobia/minzip/@todovue/tv-relative-time)
-![Node Version](https://img.shields.io/node/v/@todovue/tv-relative-time)
-![Last Commit](https://img.shields.io/github/last-commit/TODOvue/tv-relative-time)
-![Stars](https://img.shields.io/github/stars/TODOvue/tv-relative-time?style=social)
-
-> Demo: https://ui.todovue.blog/relativetime
-
-## 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)
-- [Usage Examples](#usage-examples)
-- [Props](#props)
-- [Multi-Language Support](#multi-language-support)
-- [Composable (useRelativeTime)](#composable-userelativetime)
-- [Customization & Formats](#customization--formats)
-- [Accessibility](#accessibility)
-- [SSR Notes](#ssr-notes)
-- [Development](#development)
-- [Changelog](#changelog)
-- [Contributing](#contributing)
-- [License](#license)
-
-## Features
-- **Human-readable formats**: "2 hours ago", "Yesterday", "In 3 days"
-- **Compact mode**: `2h`, `1d`, `3w`, `2mo` for space-constrained UIs
-- **Live updates**: Auto-refresh at configurable intervals (default 60s)
-- **Multi-language**: Built-in support for English, Spanish, French, Portuguese
-- **Full date display**: Optionally show absolute date alongside relative time
-- **SSR-compatible**: Works with Nuxt 3 and other SSR frameworks
-- **Lightweight & tree-shakeable**: Vue 3 marked as external dependency
-- **Semantic HTML**: Renders as `<time>` element with proper `datetime` attribute
-- **Accessible**: Includes `title` and `aria-label` for screen readers
-
-## Installation
-Using npm:
-```bash
-npm install @todovue/tv-relative-time
-```
-Using yarn:
-```bash
-yarn add @todovue/tv-relative-time
-```
-Using pnpm:
-```bash
-pnpm add @todovue/tv-relative-time
-```
-
-## Quick Start (SPA)
-Global registration (main.js / main.ts):
-```js
-import { createApp } from 'vue'
-import App from './App.vue'
-import { TvRelativeTime } from '@todovue/tv-relative-time'
-
-createApp(App)
-  .use(TvRelativeTime) // enables <TvRelativeTime /> globally
-  .mount('#app')
-```
-
-Local import inside a component:
-```vue
-<script setup>
-import { TvRelativeTime } from '@todovue/tv-relative-time'
-
-const publishedDate = '2024-01-15T10:30:00Z'
-</script>
-
-<template>
-  <TvRelativeTime :date="publishedDate" />
-</template>
-```
-
-## Nuxt 4 / SSR Usage
-Create a plugin file: `plugins/tv-relative-time.client.ts` (or without `.client` suffix as it's SSR-safe):
-```ts
-import { defineNuxtPlugin } from '#app'
-import { TvRelativeTime } from '@todovue/tv-relative-time'
-
-export default defineNuxtPlugin(nuxtApp => {
-  nuxtApp.vueApp.use(TvRelativeTime)
-})
-```
-
-Use anywhere in your Nuxt app:
-```vue
-<template>
-  <TvRelativeTime 
-    :date="article.publishedAt" 
-    lang="es" 
-    show-full-date 
-  />
-</template>
-```
-
-Optional direct import (no plugin):
-```vue
-<script setup>
-import { TvRelativeTime } from '@todovue/tv-relative-time'
-</script>
-```
-
-## Component Registration Options
-| Approach                                                                           | When to use                                    |
-|------------------------------------------------------------------------------------|------------------------------------------------|
-| Global via `app.use(TvRelativeTime)`                                               | Many usages across app / design system install |
-| Local named import `{ TvRelativeTime }`                                            | Isolated / code-split contexts                 |
-| Direct default import `import { TvRelativeTime } from '@todovue/tv-relative-time'` | Single usage or manual registration            |
-| Plugin with custom name                                                            | Custom component naming requirements           |
-
-## Usage Examples
-
-### Basic usage
-```vue
-<TvRelativeTime :date="'2024-10-18T08:00:00Z'" />
-<!-- Output: "2 hours ago" (depending on current time) -->
-```
-
-### Compact format
-```vue
-<TvRelativeTime :date="postDate" compact />
-<!-- Output: "2h", "3d", "1w", etc. -->
-```
-
-### Show full date
-```vue
-<TvRelativeTime :date="eventDate" show-full-date />
-<!-- Output: "3 days ago (October 15, 2024)" -->
-```
-
-### Different language
-```vue
-<TvRelativeTime :date="createdAt" lang="es" />
-<!-- Output: "Hace 2 horas" -->
-```
-
-### Custom update interval (every 10 seconds)
-```vue
-<TvRelativeTime :date="lastSeen" :update-interval="10000" />
-```
-
-### Combined features
-```vue
-<TvRelativeTime 
-  :date="article.publishedAt"
-  lang="fr"
-  compact
-  show-full-date
-  :update-interval="30000"
-/>
-<!-- Output: "2h (18 octobre 2024)" -->
-```
-
-### Customizable Thresholds
-```vue
-<!-- "Just now" lasts for 5 minutes (300 seconds) -->
-<TvRelativeTime :date="newPostDate" :now-threshold="300" />
-```
-
-## Props
-
-| Prop             | Type          | Default | Required | Description                                                          |
-|------------------|---------------|---------|----------|----------------------------------------------------------------------|
-| `date`           | String/Number | —       | Yes      | Date string (ISO 8601) or timestamp to format.                       |
-| `updateInterval` | Number        | `60000` | No       | Interval in milliseconds for live updates (60s default).             |
-| `compact`        | Boolean       | `false` | No       | If true, returns compact format (`2h`, `3d`, `1w`, `2mo`).           |
-| `showFullDate`   | Boolean       | `false` | No       | If true, appends the full date next to the relative time.            |
-| `lang`           | String        | `'en'`  | No       | Language code: `'en'`, `'es'`, `'fr'`, `'pt'`.                       |
-| `timeZone`       | String        | `'UTC'` | No       | Target timezone (e.g. `'America/New_York'`).                         |
-| `nowThreshold`   | Number        | `60`    | No       | Seconds threshold to show "A moment ago" instead of "0 minutes ago". |
-
-### Prop Details
-
-#### `date` (required)
-Accepts:
-- ISO 8601 date strings: `'2024-10-18T14:30:00Z'`
-- JavaScript timestamps: `1697635800000`
-- Any valid date string parseable by `new Date()`
-
-#### `updateInterval`
-Controls how often the component recalculates the relative time. Set to `0` to disable auto-updates (not recommended for live data).
-
-#### `compact`
-Perfect for space-constrained UIs like tables, cards, or mobile views:
-- `false` (default): "2 hours ago", "Yesterday", "In 3 days"
-- `true`: "2h", "1d", "3w", "2mo", "1y"
-
-#### `showFullDate`
-Useful for providing context:
-- `false` (default): "2 days ago"
-- `true`: "2 days ago (October 16, 2024)"
-
-#### `lang`
-Supported languages:
-- `'en'`: English (default)
-- `'es'`: Spanish / Español
-- `'fr'`: French / Français
-- `'pt'`: Portuguese / Português
-
-## Multi-Language Support
-
-The component includes built-in translations for 4 languages. Examples:
-
-| Time difference | English (en)      | Spanish (es)        | French (fr)         | Portuguese (pt)      |
-|-----------------|-------------------|---------------------|---------------------|----------------------|
-| < 1 minute      | A moment ago      | Hace un momento     | Il y a un instant   | Há um momento        |
-| 2 hours ago     | 2 hours ago       | Hace 2 horas        | Il y a 2 heures     | Há 2 horas           |
-| Yesterday       | Yesterday         | Ayer                | Hier                | Ontem                |
-| 3 days ago      | 3 days ago        | Hace 3 días         | Il y a 3 jours      | Há 3 dias            |
-| Last week       | Last week         | La semana pasada    | La semaine dernière | Semana passada       |
-| Tomorrow        | Tomorrow          | Mañana              | Demain              | Amanhã               |
-| In 5 days       | In 5 days         | En 5 días           | Dans 5 jours        | Em 5 dias            |
-
-### Compact format (all languages)
-Compact format uses universal abbreviations:
-- Minutes: `m` (e.g., `15m`)
-- Hours: `h` (e.g., `3h`)
-- Days: `d` (e.g., `5d`)
-- Weeks: `w` (e.g., `2w`)
-- Months: `mo` (e.g., `3mo`)
-- Years: `y` (e.g., `1y`)
-
-## Composable (useRelativeTime)
-
-You can also use the underlying composable directly in your own logic:
-
-```js
-import useRelativeTime from '@todovue/tv-relative-time/composable/useRelativeTime'
-
-const { getRelativeTime } = useRelativeTime()
-
-const result = getRelativeTime('2024-10-15T10:00:00Z', false, false, 'en')
-console.log(result.text)    // "3 days ago"
-console.log(result.tooltip) // "October 15, 2024"
-```
-
-### Composable signature
-```js
-getRelativeTime(dateString, isTableQuantity, compact, lang)
-```
-
-| Parameter         | Type    | Description                                    |
-|-------------------|---------|------------------------------------------------|
-| `dateString`      | String  | Date to format                                 |
-| `isTableQuantity` | Boolean | If true, returns '-' when date is invalid      |
-| `compact`         | Boolean | Enable compact format                          |
-| `lang`            | String  | Language code (`'en'`, `'es'`, `'fr'`, `'pt'`) |
-
-Returns:
-```js
-{
-  text: string,    // Formatted relative time
-  tooltip: string  // Full formatted date
-}
-```
-
-## Customization & Formats
-
-### Output Formats
-
-#### Standard format (compact: false)
-- "A moment ago" / "In a moment"
-- "2 minutes ago" / "In 5 minutes"
-- "1 hour ago" / "In 3 hours"
-- "Yesterday" / "Tomorrow"
-- "Last Monday" / "This Friday"
-- "Last week" / "Next week"
-- "3 weeks ago" / "In 2 weeks"
-- "2 months ago" / "In 4 months"
-- "1 year, 2 months ago"
-
-#### Compact format (compact: true)
-- "Now"
-- "15m", "2h"
-- "1d", "5d"
-- "2w", "3w"
-- "2mo", "6mo"
-- "1y", "2y"
-
-### Full Date Format
-When `showFullDate` is enabled, the full date is formatted according to the selected language using `Intl.DateTimeFormat`:
-- **en**: "October 18, 2024"
-- **es**: "18 de octubre de 2024"
-- **fr**: "18 octobre 2024"
-- **pt**: "18 de outubro de 2024"
-
-## Accessibility
-
-The component is built with accessibility in mind:
-
-### Semantic HTML
-```html
-<time 
-  class="tv-relative-time" 
-  datetime="2024-10-18T14:30:00Z"
-  title="October 18, 2024"
-  aria-label="October 18, 2024"
->
-  2 hours ago
-</time>
-```
-
-### Key accessibility features:
-- Uses semantic `<time>` element with `datetime` attribute
-- Includes `title` attribute for tooltip on hover
-- Includes `aria-label` with full date for screen readers
-- Full date always available even when showing relative time
-- Proper language attribute can be set on parent elements
-
-### Best practices:
-```vue
-<!-- Good: Context is clear -->
-<article lang="es">
-  <h2>{{ article.title }}</h2>
-  <TvRelativeTime :date="article.publishedAt" lang="es" />
-</article>
-
-<!-- Better: Additional context -->
-<p>
-  Published <TvRelativeTime :date="publishedAt" show-full-date />
-</p>
-```
-
-## SSR Notes
-
-- **No direct DOM access**: Safe for SSR/Nuxt environments
-- **Hydration-friendly**: Component state syncs properly on client
-- **Universal rendering**: Works identically on server and client
-- **Timezone handling**: Uses UTC by default for consistency
-- **Auto-updates**: Live updates start only after client-side hydration
-
-### Nuxt-specific considerations:
-```vue
-<!-- In Nuxt, this works everywhere -->
-<template>
-  <div>
-    <TvRelativeTime :date="post.createdAt" />
-  </div>
-</template>
-```
-
-The component will render the initial relative time on the server, then activate live updates on the client.
-
-## Development
-
-Clone the repository and install dependencies:
-```bash
-git clone https://github.com/TODOvue/tv-relative-time.git
-cd tv-relative-time
-yarn install
-```
-
-Run the development server with demo playground:
-```bash
-yarn dev
-```
-
-Build the library:
-```bash
-yarn build
-```
-
-Build demo site:
-```bash
-yarn build:demo
-```
-
-### Project structure
-```
-src/
-├── components/
-│   └── TvRelativeTime.vue    # Main component
-├── composable/
-│   └── useRelativeTime.js    # Core logic
-├── locales/
-│   └── relativeTime.js       # Translations
-├── demo/
-│   └── Demo.vue              # Demo playground
-└── entry.ts                  # Library entry point
-```
-
-## Changelog
-See [CHANGELOG.md](https://github.com/TODOvue/tv-relative-time/blob/main/CHANGELOG.md) for release history and updates.
-
-## Contributing
-PRs and issues welcome! Please read our [Contributing Guide](https://github.com/TODOvue/tv-relative-time/blob/main/CONTRIBUTING.md) and [Code of Conduct](https://github.com/TODOvue/tv-relative-time/blob/main/CODE_OF_CONDUCT.md).
-
-## License
-[MIT](https://github.com/TODOvue/tv-relative-time/blob/main/LICENSE) © TODOvue
-
-### Attributions
-Crafted for the TODOvue component ecosystem

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

@@ -1,69 +0,0 @@
-# Changelog
-
-All notable changes to `@todovue/tv-scroll-top` 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.0.3] - 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.0.2] - 2026-01-21
-
-### Added
-- New `showOnScrollUp` prop to only display the button when scrolling up
-- Scroll direction detection in `useScrollTop` composable
-
-### Dependencies
-- Updated `@todovue/tv-demo` to `^1.4.4`.
-- Updated `sass` to `^1.97.2`.
-- Updated `vite` to `^7.3.1`.
-
-## [1.0.0] - 2025-12-30
-
-### Added
-- Initial release of TvScrollTop component
-- Core scroll-to-top button functionality with smooth scroll behavior
-- Configurable visibility `threshold` prop (default: 300px)
-- Position variants: `left` and `right` placement options
-- Beautiful entrance/exit animations with rotation and bounce effects
-- Position-specific animations (right: slides from right with clockwise rotation, left: slides from left with counter-clockwise rotation)
-- Backdrop blur effect for modern glass-morphism UI
-- Hover and active state interactions with scale transforms
-- Shadow elevation effects on hover
-- `useScrollTop` composable for custom implementations
-- SSR-safe implementation with proper window/document guards
-- Nuxt 3 module support (`@todovue/tv-scroll-top/nuxt`)
-- TypeScript support with full type definitions
-- Accessibility features:
-  - ARIA label for screen readers
-  - Keyboard navigation support
-  - Semantic button element
-  - Focus indicators
-- Automatic scroll event listener management with cleanup
-- Vue 3 Transition component integration
-- Zero runtime dependencies
-- Tree-shakeable ES module build
-- CommonJS build for compatibility
-- Comprehensive documentation and examples
-
-[1.0.3]: https://github.com/TODOvue/tv-scroll-top/pull/3/files
-[1.0.2]: https://github.com/TODOvue/tv-scroll-top/pull/2/files
-[1.0.0]: https://github.com/TODOvue/tv-scroll-top/pull/1/files