@todovue/tv-ui 0.1.0

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

@@ -0,0 +1,466 @@
+<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

@@ -0,0 +1,125 @@
+# 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