@todovue/tv-ui 0.1.0 → 0.1.2

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

@@ -1,466 +0,0 @@
-<p align="center"><img width="150" src="https://res.cloudinary.com/dcdfhi8qz/image/upload/v1763663056/uqqtkgp1lg3xdplutpga.png" alt="TODOvue logo">
-</p>
-
-# TODOvue Modal (TvModal)
-A flexible, customizable Vue 3 modal component with multiple variants (success, error, warning, info), animations, theme support, and accessibility features. Works seamlessly in Single Page Apps and Server-Side Rendered (SSR) environments like Nuxt 3.
-
-[![npm](https://img.shields.io/npm/v/@todovue/tv-modal.svg)](https://www.npmjs.com/package/@todovue/tv-modal)
-[![npm downloads](https://img.shields.io/npm/dm/@todovue/tv-modal.svg)](https://www.npmjs.com/package/@todovue/tv-modal)
-[![npm total downloads](https://img.shields.io/npm/dt/@todovue/tv-modal.svg)](https://www.npmjs.com/package/@todovue/tv-modal)
-![License](https://img.shields.io/github/license/TODOvue/tv-modal)
-![Release Date](https://img.shields.io/github/release-date/TODOvue/tv-modal)
-![Bundle Size](https://img.shields.io/bundlephobia/minzip/@todovue/tv-modal)
-![Node Version](https://img.shields.io/node/v/@todovue/tv-modal)
-![Last Commit](https://img.shields.io/github/last-commit/TODOvue/tv-modal)
-![Stars](https://img.shields.io/github/stars/TODOvue/tv-modal?style=social)
-
-> Demo: https://ui.todovue.blog/modal
-
-## 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)
-- [Configuration Object](#configuration-object)
-- [Theme Support](#theme-support)
-- [Theme Support](#theme-support)
-- [Slots](#slots)
-- [Usage Examples](#usage-examples)
-- [Animations](#animations)
-- [Accessibility](#accessibility)
-- [SSR Notes](#ssr-notes)
-- [Development](#development)
-- [Contributing](#contributing)
-- [License](#license)
-
-## Features
-- Multiple visual variants: success, error, warning, info
-- Configurable title, description, and action buttons
-- Built-in animations (scale-up, scale-down, rotate shake on overlay click)
-- Theme support: auto-detect dark/light mode or manual override
-- Uses Vue Teleport for proper modal rendering
-- Keyboard navigation (ESC to close)
-- Focus management and restoration
-- Accessible (ARIA attributes, role="dialog")
-- Works in SPA and SSR (Nuxt 3) contexts
-- Integrates with @todovue/tv-button for action buttons
-- Tree-shake friendly (Vue marked external in library build)
-
-## Installation
-Using npm:
-```bash
-npm install @todovue/tv-modal
-```
-Using yarn:
-```bash
-yarn add @todovue/tv-modal
-```
-Using pnpm:
-```bash
-pnpm add @todovue/tv-modal
-```
-
-### Importing Styles
-**Important:** Starting from version 1.0.0+, TvModal no longer injects CSS automatically. 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-modal/style.css'
-import '@todovue/tv-button/style.css'
-import { TvModal } from '@todovue/tv-modal'
-
-const app = createApp(App)
-app.component('TvModal', TvModal)
-app.mount('#app')
-```
-
-#### For Nuxt 3/4:
-```ts
-// nuxt.config.ts
-export default defineNuxtConfig({
-  modules: [
-    '@todovue/tv-modal/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-modal/style.css'
-import TvModal from '@todovue/tv-modal'
-
-createApp(App)
-  .use(TvModal) // enables <TvModal /> globally
-  .mount('#app')
-```
-Local import inside a component:
-```vue
-<script setup>
-import { ref } from 'vue'
-import { TvModal } from '@todovue/tv-modal'
-
-const modal = ref()
-
-const modalConfig = {
-  title: "Confirm Action",
-  description: "Are you sure you want to proceed?",
-  confirmButtonText: "Yes",
-  cancelButtonText: "No",
-  icon: "warning"
-}
-
-const openModal = () => {
-  modal.value.openModal()
-}
-
-const handleAccepted = () => {
-  console.log('User confirmed')
-}
-
-const handleCanceled = () => {
-  console.log('User canceled')
-}
-</script>
-
-<template>
-  <button @click="openModal">Open Modal</button>
-  
-  <TvModal
-    :config-modal="modalConfig"
-    @accepted="handleAccepted"
-    @canceled="handleCanceled"
-    ref="modal"
-  />
-</template>
-```
-**Note:** Don't forget to import the CSS in your main entry file as shown above.
-
-## Nuxt 4 / SSR Usage
-First, add the CSS to your `nuxt.config.ts`:
-```ts
-// nuxt.config.ts
-export default defineNuxtConfig({
-  css: ['@todovue/tv-modal/style.css'],
-})
-```
-
-Then create a plugin file: `plugins/tv-modal.client.ts`:
-```ts
-import { defineNuxtPlugin } from '#app'
-import TvModal from '@todovue/tv-modal'
-
-export default defineNuxtPlugin(nuxtApp => {
-  nuxtApp.vueApp.use(TvModal)
-})
-```
-Use anywhere in your Nuxt app:
-```vue
-<template>
-  <button @click="modal.openModal()">Show Modal</button>
-  
-  <TvModal
-    :config-modal="config"
-    @accepted="handleAccept"
-    ref="modal"
-  />
-</template>
-
-<script setup>
-import { ref } from 'vue'
-
-const modal = ref()
-const config = {
-  title: "Success!",
-  description: "Operation completed",
-  confirmButtonText: "OK",
-  icon: "success"
-}
-
-const handleAccept = () => {
-  // Handle acceptance
-}
-</script>
-```
-Optional direct import (no plugin):
-```vue
-<script setup>
-import { TvModal } from '@todovue/tv-modal'
-</script>
-```
-
-## Component Registration Options
-| Approach                                                        | When to use                                    |
-|-----------------------------------------------------------------|------------------------------------------------|
-| Global via `app.use(TvModal)`                                   | Many usages across app / design system install |
-| Local named import `{ TvModal }`                                | Isolated / code-split contexts                 |
-| Direct default import `import TvModal from '@todovue/tv-modal'` | Single usage or manual registration            |
-
-## Props
-| Prop            | Type    | Default | Description                                                                   |
-|-----------------|---------|---------|-------------------------------------------------------------------------------|
-| configModal     | Object  | —       | **Required.** Configuration object for modal content and buttons (see below). |
-| theme           | String  | ''      | Theme override: `''` (auto-detect), `'dark-mode'`, or `'light-mode'`.         |
-| closeOnBackdrop | Boolean | `false` | If `true`, clicking the backdrop closes the modal. Default is `false`.        |
-
-## Events
-| Event name | Payload | Description                                      |
-|------------|---------|--------------------------------------------------|
-| `accepted` | —       | Emitted when user clicks the confirm button.     |
-| `canceled` | —       | Emitted when user clicks cancel or presses ESC.  |
-
-Usage:
-```vue
-<TvModal
-  :config-modal="config"
-  @accepted="onAccept"
-  @canceled="onCancel"
-  ref="modal"
-/>
-```
-
-## Configuration Object
-The `configModal` prop accepts an object with the following properties:
-
-| Property             | Type   | Required | Description                                                            |
-|----------------------|--------|----------|------------------------------------------------------------------------|
-| title                | String | No*      | Modal title text.                                                      |
-| description          | String | No*      | Modal description/body text.                                           |
-| confirmButtonText    | String | No       | Text for the confirm button. If omitted, button won't show.            |
-| confirmButtonVariant | String | No       | Variant for confirm button (e.g. `success`, `danger`). Def: `success`. |
-| cancelButtonText     | String | No       | Text for the cancel button. If omitted, button won't show.             |
-| cancelButtonVariant  | String | No       | Variant for cancel button. (e.g. `success`, `danger`). Def: `success`. |
-| icon                 | String | No       | Icon variant: `'success'`, `'error'`, `'warning'`, or `'info'`.        |
-
-\* At least one of `title` or `description` is required (validated by prop validator).
-
-Example:
-```js
-const modalConfig = {
-  title: "Delete Item",
-  description: "This action cannot be undone. Are you sure?",
-  confirmButtonText: "Delete",
-  cancelButtonText: "Cancel",
-  icon: "warning"
-}
-```
-
-## Theme Support
-TvModal automatically detects the theme from your application:
-- Checks `document.body` for `.dark-mode` or `.light-mode` classes
-- Checks `#app` element for theme classes
-- Falls back to searching for any `.dark-mode` or `.light-mode` element
-- Observes DOM changes to update theme dynamically
-
-Manual override:
-```vue
-<TvModal :config-modal="config" theme="dark-mode" ref="modal" />
-```
-
-<TvModal :config-modal="config" theme="dark-mode" ref="modal" />
-```
-
-## Slots
-TvModal provides slots for full content customization, allowing you to go beyond simple text and standard structures.
-
-| Slot Name | Description                                                                  |
-|-----------|------------------------------------------------------------------------------|
-| `header`  | Replaces the default icon and title area.                                    |
-| `default` | The main body of the modal. Replaces the standard description text.          |
-| `footer`  | Replaces the default action buttons. You must handle closing logic manually. |
-
-*Note: You can mix and match configuration props with slots. For example, use `configModal.title` for the title and the `default` slot for a custom form body.*
-
-## Usage Examples
-
-### Success Modal
-```vue
-<script setup>
-import { ref } from 'vue'
-import { TvModal } from '@todovue/tv-modal'
-
-const modal = ref()
-const config = {
-  title: "Success!",
-  description: "Your operation was completed successfully",
-  confirmButtonText: "Great!",
-  icon: "success"
-}
-</script>
-
-<template>
-  <button @click="modal.openModal()">Show Success</button>
-  <TvModal :config-modal="config" @accepted="() => {}" ref="modal" />
-</template>
-```
-
-### Error Modal
-```vue
-<script setup>
-import { ref } from 'vue'
-import { TvModal } from '@todovue/tv-modal'
-
-const modal = ref()
-const config = {
-  title: "Error occurred",
-  description: "Something went wrong. Please try again later.",
-  confirmButtonText: "OK",
-  cancelButtonText: "Cancel",
-  icon: "error"
-}
-</script>
-
-<template>
-  <button @click="modal.openModal()">Show Error</button>
-  <TvModal
-    :config-modal="config"
-    @accepted="handleRetry"
-    @canceled="handleCancel"
-    ref="modal"
-  />
-</template>
-```
-
-### Warning Modal
-```vue
-<script setup>
-import { ref } from 'vue'
-import { TvModal } from '@todovue/tv-modal'
-
-const modal = ref()
-const config = {
-  title: "Are you sure?",
-  description: "If you delete it there is no step back",
-  confirmButtonText: "Yes, delete it",
-  cancelButtonText: "No, keep it",
-  icon: "warning"
-}
-</script>
-
-<template>
-  <button @click="modal.openModal()">Delete Item</button>
-  <TvModal
-    :config-modal="config"
-    @accepted="deleteItem"
-    @canceled="() => {}"
-    ref="modal"
-  />
-</template>
-```
-
-### Info Modal
-```vue
-<script setup>
-import { ref } from 'vue'
-import { TvModal } from '@todovue/tv-modal'
-
-const modal = ref()
-const config = {
-  title: "Information",
-  description: "Here is some important information you should know about.",
-  confirmButtonText: "Got it",
-  icon: "info"
-}
-</script>
-
-<template>
-  <button @click="modal.openModal()">Show Info</button>
-  <TvModal :config-modal="config" @accepted="() => {}" ref="modal" />
-</template>
-```
-
-### With Slots (Custom Content)
-```vue
-<script setup>
-import { ref } from 'vue'
-import { TvModal } from '@todovue/tv-modal'
-import { TvButton } from '@todovue/tv-button'
-
-const modal = ref()
-// Config is minimal if using full slots, or you can mix them
-const config = { title: "Custom Form" }
-
-const handleSave = () => {
-  // Logic here
-  modal.value.acceptModal() // Manually trigger close/animate
-}
-</script>
-
-<template>
-  <button @click="modal.openModal()">Open Custom Modal</button>
-  
-  <TvModal :config-modal="config" ref="modal">
-    <template #header>
-      <h3 class="custom-title">My Custom Header</h3>
-    </template>
-    
-    <div class="my-form">
-      <input type="text" placeholder="Enter name" />
-    </div>
-
-    <template #footer>
-      <TvButton @click="handleSave">Save</TvButton>
-      <TvButton variant="danger" @click="modal.cancelModal()">Close</TvButton>
-    </template>
-  </TvModal>
-</template>
-```
-
-## Animations
-TvModal includes built-in animations:
-- **Scale up**: When modal opens
-- **Scale down**: When modal closes
-- **Rotate shake**: When user clicks the overlay (attention grabber)
-
-Animations are managed internally via the `useModal` composable and applied via CSS classes.
-
-## Accessibility
-- Uses Vue `<Teleport>` to render modal at the body level
-- Proper ARIA attributes: `role="dialog"`, `aria-modal="true"`
-- Dynamic `aria-labelledby` and `aria-describedby` based on title/description
-- Keyboard support: ESC key to close/cancel
-- Focus management:
-  - Focuses modal on open
-  - Restores focus to triggering element on close
-- Action buttons use the accessible `@todovue/tv-button` component
-
-## SSR Notes
-- Safe for SSR (no direct `window`/`document` access during module evaluation)
-- Uses `onMounted` for theme detection and DOM observers
-- Teleport target is `body` (ensure it exists in SSR context)
-- Theme detection gracefully handles `typeof document === 'undefined'`
-- Works seamlessly with Nuxt 3
-
-## Development
-```bash
-git clone https://github.com/TODOvue/tv-modal.git
-cd tv-modal
-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).
-
-### Dependencies
-- **Runtime**: `@todovue/tv-button` (for action buttons)
-- **Peer**: `vue@^3.0.0`
-
-## License
-MIT © TODOvue
-
-### Attributions
-Crafted for the TODOvue component ecosystem

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

@@ -1,125 +0,0 @@
-# Changelog
-
-All notable changes to `@todovue/tv-pagination` 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 `@todovue/tv-button` to `^1.2.5`.
-- Updated `vue` to `^3.5.27`.
-- Updated `sass` to `^1.97.3`.
-
-## [1.1.3] - 2026-01-21
-
-### Added
-- Introduced a summary display feature to provide a condensed overview of component data.
-- Added size customization options, allowing users to adjust component dimensions to fit specific layout requirements.
-
-### Dependencies
-- Updated `@todovue/tv-demo` to `^1.4.4`.
-- Updated `@todovue/tv-button` to `^1.2.4`.
-- Updated `sass` to `^1.97.2`.
-- Updated `vite` 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-25
-
-### Changed
-- Changed theme colors in the button styles to match the latest design guidelines.
-
-### Fixed
-- Fixed export path for `./style.css` in `package.json` to ensure proper resolution.
-
-### 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 `TvPagination` component.
-- The `@todovue/tv-pagination` 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.1] - 2025-11-15
-
-### Changed
-- Styles are now served as a separate CSS file (`dist/tv-pagination.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-pagination/style.css'` in `main.ts`
-  - For Nuxt 3/4: Add `'@todovue/tv-pagination/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-09
-
-### Added
-* First stable version of the `TvPagination` component.
-* Automatic calculation of total pages (`totalItems` + `pageSize`).
-* Dynamic range with `siblingCount` and `boundaryCount`.
-* Conditional left/right ellipsis rendering.
-* Optional buttons: first/last (`showFirstLast`) and previous/next (`showPrevNext`).
-* Navigation icon support (`showIcons`).
-* Customizable styles for active and inactive pages (`activeStyle`, `inactiveStyle`).
-* Propagation of `buttonProps` to each internal `TvButton`.
-* `page-label` slot to customize each page’s label.
-* Controlled API through `v-model` (syncs `modelValue`).
-* Emission of `update:modelValue` and `change` events only on actual page changes.
-* Invalid range protection (min/max normalization in watcher and composable).
-* Global disabled state (`disabled`).
-* Configurable accessible label (`ariaLabel`) and `aria-current` on active page.
-* Built as ES/CJS library with types (`vite-plugin-dts`).
-* Automatic injection of compiled SCSS styles (via `vite-plugin-css-injected-by-js`).
-* Prepared for SSR environments (no direct DOM access).
-
-[1.1.4]: https://github.com/TODOvue/tv-pagination/pull/7/files
-[1.1.3]: https://github.com/TODOvue/tv-pagination/pull/6/files
-[1.1.2]: https://github.com/TODOvue/tv-pagination/pull/5/files
-[1.1.1]: https://github.com/TODOvue/tv-pagination/pull/4/files
-[1.1.0]: https://github.com/TODOvue/tv-pagination/pull/3/files
-[1.0.1]: https://github.com/TODOvue/tv-pagination/pull/2/files
-[1.0.0]: https://github.com/TODOvue/tv-pagination/pull/1/files