@todovue/tv-ui 0.1.0 → 0.1.2

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

@@ -1,258 +0,0 @@
-<p align="center"><img width="150" src="https://res.cloudinary.com/dcdfhi8qz/image/upload/v1763663056/uqqtkgp1lg3xdplutpga.png" alt="TODOvue logo"></p>
-
-# TODOvue Article (TvArticle)
-A Vue 3 component to display rich article content with polished typography, optional cover image, metadata (date, reading time, tags), and copyable heading anchors. Works in SPA and SSR (e.g., Nuxt 4) and injects styles automatically.
-
-[![npm](https://img.shields.io/npm/v/@todovue/tv-article.svg)](https://www.npmjs.com/package/@todovue/tv-article)
-[![npm downloads](https://img.shields.io/npm/dm/@todovue/tv-article.svg)](https://www.npmjs.com/package/@todovue/tv-article)
-[![npm total downloads](https://img.shields.io/npm/dt/@todovue/tv-article.svg)](https://www.npmjs.com/package/@todovue/tv-article)
-![License](https://img.shields.io/github/license/TODOvue/tv-article)
-![Release Date](https://img.shields.io/github/release-date/TODOvue/tv-article)
-![Bundle Size](https://img.shields.io/bundlephobia/minzip/@todovue/tv-article)
-![Node Version](https://img.shields.io/node/v/@todovue/tv-article)
-![Last Commit](https://img.shields.io/github/last-commit/TODOvue/tv-article)
-![Stars](https://img.shields.io/github/stars/TODOvue/tv-article?style=social)
-> Demo: https://ui.todovue.blog/article
-
-## 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)
-- [Events](#events)
-- [Slots](#slots)
-- [Customization (Styles / UI)](#customization-styles--ui)
-- [Accessibility](#accessibility)
-- [SSR Notes](#ssr-notes)
-- [Examples](#examples)
-- [Development](#development)
-- [Contributing](#contributing)
-- [License](#license)
-
-## Features
-- Polished prose typography for long content (paragraphs, lists, tables, quotes, code, images, etc.).
-- H2–H4 headings get a “copy link” anchor button with localized feedback text.
-- Optional metadata: date (rendered with relative-time component), reading time (estimated or forced), and colored tags.
-- Cover image with `loading`, `decoding`, `fetchpriority` and aspect ratio control.
-- Configurable layout: centered container and prose width (`sm`, `base`, `md`, `lg`, `full`).
-- Slots for header/before/after/footer; default slot used when `content.body` is not provided.
-- External links safety: open in a new tab with `rel="noopener noreferrer"` automatically.
-- CSS auto-injected via JS: no manual CSS import required.
-
-Internal deps: uses `@todovue/tv-label` (tags) and `@todovue/tv-relative-time` (date). You only need to install `@todovue/tv-article`.
-
-## Installation
-Using npm:
-```bash
-npm install @todovue/tv-article
-```
-Using yarn:
-```bash
-yarn add @todovue/tv-article
-```
-Using pnpm:
-```bash
-pnpm add @todovue/tv-article
-```
-Peer: Vue ^3.
-
-## Quick Start (SPA)
-**Important**: You must explicitly import the stylesheet in your application.
-
-Global registration (main.js / main.ts):
-```js
-import { createApp } from 'vue'
-import App from './App.vue'
-
-import { TvArticle } from '@todovue/tv-article'
-import '@todovue/tv-article/style.css' // import styles
-import '@todovue/tv-label/style.css' // tv-article depends on tv-label
-
-const app = createApp(App)
-app.component('TvArticle', TvArticle)
-app.mount('#app')
-```
-Local import inside a component:
-```vue
-<script setup>
-import { TvArticle } from '@todovue/tv-article'
-import '@todovue/tv-article/style.css'
-
-const article = {
-  title: 'Introduction to Vue 3',
-  description: 'Key concepts and the Composition API',
-  date: '2025-10-15',
-  readingTime: 8, // optional; if missing, it is estimated from body
-  tags: [ 'Vue', { tag: 'JavaScript', color: '#F7DF1E' } ],
-  body: `
-    <h2 id="what-is-vue">What is Vue?</h2>
-    <p>Provide safe HTML to v-html…</p>
-  `
-}
-</script>
-
-<template>
-  <TvArticle :content="article" lang="en"></TvArticle>
-</template>
-```
-
-## Nuxt 4 / SSR Usage
-Create a plugin file: `plugins/tv-article.client.ts` (or without suffix; SSR-safe since DOM access happens in `onMounted`):
-```ts
-// nuxt.config.ts
-export default defineNuxtConfig({
-  modules: [
-    '@todovue/tv-card/nuxt'
-  ]
-})
-```
-Use anywhere:
-```vue
-<TvArticle :content="{ title: 'Post', body: '<p>Hello</p>' }"></TvArticle>
-```
-
-## Component Registration Options
-| Approach                                 | When to use                                    |
-|------------------------------------------|------------------------------------------------|
-| Global via `app.use(TvArticle)`          | Many usages across app / design system install |
-| Local named import `{ TvArticle }`       | Isolated or code-split contexts                |
-| Direct default import `import TvArticle` | Single usage or manual registration            |
-
-## Props
-All content is expected to be safe HTML for `content.body` (it is rendered via `v-html`).
-
-- Prop: `content` (Object) [default: `{ title: '', body: '' }`]
-  - title: string
-  - description: string
-  - date: string | Date (rendered relatively via `@todovue/tv-relative-time`)
-  - readingTime: number (minutes; if omitted, estimated at ~200 wpm)
-  - tags: Array<string | { tag: string, color?: string }>
-  - cover: string (image URL)
-  - coverAlt: string
-  - coverCaption: string
-  - body: string (HTML)
-
-- Prop: `ui` (Object) [defaults below]
-  - showTitle: boolean (true)
-  - showMeta: boolean (true)
-  - showCover: boolean (true)
-  - center: boolean (true)
-  - proseSize: 'sm' | 'base' | 'md' | 'lg' | 'full' ('full')
-  - coverLoading: 'lazy' | 'eager' ('lazy')
-  - coverDecoding: 'async' | 'sync' ('async')
-  - coverFetchPriority: 'auto' | 'high' | 'low' ('auto')
-  - coverAspect: string | null (e.g., '16 / 9')
-
-- Prop: `lang` (String) [default: 'en']
-  - Affects reading time text and anchor button labels ('en', 'es', 'fr', 'pt').
-
-## Events
-| Event (kebab)    | Payload             | Description                                |
-|------------------|---------------------|--------------------------------------------|
-| `anchor-copied`  | `string` (anchorId) | Emitted when a heading link is copied      |
-
-Usage:
-```vue
-<TvArticle @anchor-copied="onCopied"></TvArticle>
-```
-```js
-function onCopied(id) {
-  console.log('Anchor copied:', id)
-}
-```
-
-## Slots
-- `header`: Replace the entire header (title, description, meta, cover). If not provided, TvArticle renders the header based on `ui` and `content`.
-- `before`: Content before the article body.
-- `after`: Content after the article body.
-- `footer`: Footer area (author, share, etc.).
-- default: When `content.body` is missing, the default slot is rendered inside the prose container.
-
-## Customization (Styles / UI)
-- Styles: the package injects CSS automatically when you import the component (no extra CSS import needed).
-- Layout: control width with `ui.proseSize` and centering with `ui.center`.
-- Cover: adjust `ui.coverAspect`, `coverLoading`, `coverDecoding`, and `coverFetchPriority`.
-- Tags: `content.tags` accepts strings or `{ tag, color }` objects.
-- For deeper theming, override the `.tv-article*` classes in your app.
-
-## Accessibility
-- `aria-labelledby` is applied to `<article>` when a title is present.
-- Anchor button on H2–H4 with localized `aria-label`/`title` and copied feedback.
-- External links are marked with `target="_blank"` and `rel="noopener noreferrer"` for safety.
-
-## SSR Notes
-- No DOM access during `setup`; enhancements (anchors/links) happen in `onMounted`, making it SSR-safe.
-- Styles are injected on the client via JS; no need to import CSS manually.
-
-## Examples
-Basic:
-```vue
-<TvArticle :content="{
-  title: 'Introduction to Vue 3',
-  date: '2025-10-15',
-  readingTime: 8,
-  tags: ['Vue', 'JavaScript'],
-  body: '<h2 id=&quot;what-is&quot;>What is it?</h2><p>…</p>'
-}" lang="en"></TvArticle>
-```
-With cover and aspect ratio:
-```vue
-<TvArticle
-  :content="{
-    title: 'Nuxt Content Guide',
-    description: 'Build blogs and docs',
-    date: '2025-10-20',
-    readingTime: 12,
-    tags: ['Nuxt', 'Markdown'],
-    cover: 'https://images.unsplash.com/photo-1499750310107-5fef28a66643?w=1200&h=675&fit=crop',
-    coverAlt: 'Laptop with code',
-    coverCaption: 'Content with cover image',
-    body: '<h2 id=&quot;intro&quot;>Introduction</h2><p>…</p>'
-  }"
-  :ui="{ coverAspect: '16 / 9', center: true }"
-></TvArticle>
-```
-Custom UI + footer slot:
-```vue
-<TvArticle
-  :content="{ title: 'Typography', body: '<h2 id=&quot;h2&quot;>H2</h2><p>…</p>' }"
-  :ui="{ proseSize: 'lg', center: true }"
-  @anchor-copied="id => console.log(id)"
->
-  <template #footer>
-    <hr />
-    <small>Author: TvArticle Team</small>
-  </template>
-</TvArticle>
-```
-Minimal:
-```vue
-<TvArticle :content="{ title: 'Minimal', body: '<p>Only content</p>' }" :ui="{ showMeta: false, showCover: false, proseSize: 'base' }"></TvArticle>
-```
-
-## Development
-```bash
-git clone https://github.com/TODOvue/tv-article.git
-cd tv-article
-npm install
-npm run dev      # demo playground with Vite
-npm run build    # library build (ESM/CJS + d.ts)
-npm run build:demo  # demo site build (dist-demo)
-```
-The library marks `vue` as external and generates `dist/tv-article.es.js`, `dist/tv-article.cjs.js`, `dist/tv-article.css`, and type definitions.
-
-### Notes
-- `content.body` is rendered with `v-html`: provide sanitized HTML if it comes from Markdown or external sources.
-- Reading time falls back to an estimation of ~200 wpm when `readingTime` is not provided.
-- Supported internal locales for UI text: `en`, `es`, `fr`, `pt`.
-
-## 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-breadcrumbs/CHANGELOG.md

@@ -1,135 +0,0 @@
-# Changelog
-
-All notable changes to `@todovue/tv-breadcrumbs` 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.4] - 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.3] - 2026-01-20
-
-### Added
-- Added support for icons in breadcrumb items via the `icon` property.
-- Added interactive dropdown for truncated items (when using `maxItems`), allowing users to access hidden links.
-- Added `activeLink` prop to optionally render the current page item as a clickable link.
-
-### Dependencies
-- Updated the `@todovue/tv-demo` dependency to `^1.4.4`.
-- Updated the `sass` dependency to `^1.97.2`.
-- Updated the `vite` dependency to `^7.3.1`.
-
-## [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.
-- Removed `_variables.scss` file as it is no longer needed.
-
-### 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 `TvBreadcrumbs` component.
-- The `@todovue/tv-breadcrumbs` 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.0.1] - 2025-11-15
-
-### Changed
-- Styles are now served as a separate CSS file (`dist/tv-breadcrumbs.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-breadcrumbs/style.css'` in `main.ts`
-  - For Nuxt 3/4: Add `'@todovue/tv-breadcrumbs/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.0] - 2025-11-08
-
-### Added
-- Initial release of TvBreadcrumbs component
-- Manual breadcrumb items via `items` prop
-- Auto-generation mode from Vue Router routes (`autoGenerate` prop)
-- Custom separator support via `separator` prop (default: `›`)
-- Max items control with ellipsis collapse (`maxItems` prop)
-- Customizable home label for auto-generated breadcrumbs (`homeLabel` prop)
-- ARIA accessibility label customization (`ariaLabel` prop)
-- `item-click` event emitted when breadcrumb item is clicked
-- `navigate` event emitted when router navigation occurs
-- Three customizable slots:
-  - `item` - Customize breadcrumb link rendering
-  - `current` - Customize current (last) item rendering
-  - `separator` - Customize separator rendering
-- Full Vue Router integration with automatic detection
-- Route meta breadcrumb support (string, array, or function)
-- Disabled item state support
-- Full ARIA accessibility support:
-  - Semantic HTML structure (`<nav>`, `<ol>`, `<li>`)
-  - `aria-current="page"` for current item
-  - `aria-disabled` for disabled items
-  - `aria-hidden` for separators
-- Schema.org structured data markup for SEO
-- SSR-ready implementation (works with Nuxt 3)
-- BEM-style CSS classes for easy customization
-- Keyboard navigation support
-- Responsive SCSS styling
-- TypeScript definitions
-- Plugin installation support
-- Composable architecture with `useBreadcrumb`
-- Auto-normalization of breadcrumb items
-- Path segment humanization (converts kebab-case to Title Case)
-
-[1.1.4]: https://github.com/TODOvue/tv-breadcrumbs/pull/7/files
-[1.1.3]: https://github.com/TODOvue/tv-breadcrumbs/pull/6/files
-[1.1.2]: https://github.com/TODOvue/tv-breadcrumbs/pull/5/files
-[1.1.1]: https://github.com/TODOvue/tv-breadcrumbs/pull/4/files
-[1.1.0]: https://github.com/TODOvue/tv-breadcrumbs/pull/3/files
-[1.0.1]: https://github.com/TODOvue/tv-breadcrumbs/pull/2/files
-[1.0.0]: https://github.com/TODOvue/tv-breadcrumbs/pull/1/files