@todovue/tv-footer 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Cristhian Daza
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,732 @@
+<p align="center"><img width="150" src="https://res.cloudinary.com/dcdfhi8qz/image/upload/v1763663056/uqqtkgp1lg3xdplutpga.png" alt="TODOvue logo">
+</p>
+
+# TODOvue Footer (TvFooter)
+A simple, customizable, and responsive Vue 3 footer component with support for branding, navigation sections, social links, legal links, and SSR compatibility. Perfect for building professional footers in Single Page Apps and Server-Side Rendered environments like Nuxt 3.
+
+[![npm](https://img.shields.io/npm/v/@todovue/tv-footer.svg)](https://www.npmjs.com/package/@todovue/tv-footer)
+[![npm downloads](https://img.shields.io/npm/dm/@todovue/tv-footer.svg)](https://www.npmjs.com/package/@todovue/tv-footer)
+[![npm total downloads](https://img.shields.io/npm/dt/@todovue/tv-footer.svg)](https://www.npmjs.com/package/@todovue/tv-footer)
+![License](https://img.shields.io/github/license/TODOvue/tv-footer)
+![Release Date](https://img.shields.io/github/release-date/TODOvue/tv-footer)
+![Bundle Size](https://img.shields.io/bundlephobia/minzip/@todovue/tv-footer)
+![Node Version](https://img.shields.io/node/v/@todovue/tv-footer)
+![Last Commit](https://img.shields.io/github/last-commit/TODOvue/tv-footer)
+![Stars](https://img.shields.io/github/stars/TODOvue/tv-footer?style=social)
+
+> Demo: https://ui.todovue.blog/footer
+
+---
+## Table of Contents
+- [Features](#features)
+- [Installation](#installation)
+- [Quick Start (SPA)](#quick-start-spa)
+- [Nuxt 3 / SSR Usage](#nuxt-3--ssr-usage)
+- [Component Registration Options](#component-registration-options)
+- [Props](#props)
+- [Configuration Object](#configuration-object)
+- [Composable API](#composable-api)
+- [Usage Examples](#usage-examples)
+- [Styling](#styling)
+- [Accessibility](#accessibility)
+- [SSR Notes](#ssr-notes)
+- [Development](#development)
+- [Contributing](#contributing)
+- [License](#license)
+
+---
+## Features
+- Fully responsive grid layout (1 column on mobile, 2 on tablet, 4 on desktop)
+- Customizable brand section with logo and version display
+- Multiple navigation sections with titles and links
+- Social media links with icon support
+- Legal links section (Privacy, Terms, etc.)
+- Dynamic copyright with automatic year replacement
+- Light/Dark mode support built-in
+- SSR-safe (works with Nuxt 3 and other SSR frameworks)
+- Composable API (`useFooter`) for custom implementations
+- Accessible and semantic HTML
+- Lightweight and tree-shakeable
+- TypeScript support
+
+---
+## Installation
+Using npm:
+```bash
+npm install @todovue/tv-footer
+```
+Using yarn:
+```bash
+yarn add @todovue/tv-footer
+```
+Using pnpm:
+```bash
+pnpm add @todovue/tv-footer
+```
+
+### Importing Styles
+**Important:** 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-footer/style.css'
+import { TvFooter } from '@todovue/tv-footer'
+
+const app = createApp(App)
+app.component('TvFooter', TvFooter)
+app.mount('#app')
+```
+
+#### For Nuxt 3/4:
+```ts
+// nuxt.config.ts
+export default defineNuxtConfig({
+  modules: [
+    '@todovue/tv-footer/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-footer/style.css'
+import TvFooter from '@todovue/tv-footer'
+
+createApp(App)
+  .use(TvFooter) // enables <TvFooter /> globally
+  .mount('#app')
+```
+Local import inside a component:
+```vue
+<script setup>
+import { TvFooter } from '@todovue/tv-footer'
+import '@todovue/tv-footer/style.css'
+
+const footerConfig = {
+  brand: {
+    logo: 'https://example.com/logo.png',
+    name: 'My Company',
+    url: '/'
+  },
+  navigation: [
+    {
+      title: 'Product',
+      items: [
+        { label: 'Features', url: '/features' },
+        { label: 'Pricing', url: '/pricing' }
+      ]
+    }
+  ],
+  copyright: '© {year} My Company. All rights reserved.'
+}
+</script>
+
+<template>
+  <div>
+    <!-- Your page content -->
+    
+    <!-- Footer at the bottom -->
+    <TvFooter :config="footerConfig" />
+  </div>
+</template>
+```
+**Note:** Don't forget to import the CSS in your main entry file as shown above.
+
+---
+## Nuxt 3 / SSR Usage
+First, add the module to your `nuxt.config.ts`:
+```ts
+// nuxt.config.ts
+export default defineNuxtConfig({
+  modules: ['@todovue/tv-footer/nuxt']
+})
+```
+
+Alternatively, you can manually add the CSS:
+```ts
+// nuxt.config.ts
+export default defineNuxtConfig({
+  css: ['@todovue/tv-footer/style.css'],
+})
+```
+
+Then create a plugin file: `plugins/tv-footer.client.ts`:
+```ts
+import { defineNuxtPlugin } from '#app'
+import TvFooter from '@todovue/tv-footer'
+
+export default defineNuxtPlugin(nuxtApp => {
+  nuxtApp.vueApp.use(TvFooter)
+})
+```
+Use anywhere in your Nuxt app:
+```vue
+<template>
+  <div>
+    <NuxtPage />
+    
+    <!-- Footer -->
+    <TvFooter :config="footerConfig" />
+  </div>
+</template>
+
+<script setup>
+const footerConfig = {
+  brand: {
+    logo: 'https://example.com/logo.png',
+    url: '/'
+  },
+  navigation: [
+    {
+      title: 'Product',
+      items: [
+        { label: 'Features', url: '/features' }
+      ]
+    }
+  ],
+  copyright: '© {year} My Company. All rights reserved.'
+}
+</script>
+```
+Optional direct import (no plugin):
+```vue
+<script setup>
+import { TvFooter } from '@todovue/tv-footer'
+</script>
+```
+
+---
+## Component Registration Options
+| Approach                                                                 | When to use                                    |
+|--------------------------------------------------------------------------|------------------------------------------------|
+| Global via `app.use(TvFooter)`                                           | Many usages across app / design system install |
+| Local named import `{ TvFooter }`                                        | Isolated / code-split contexts                 |
+| Direct default import `import TvFooter from '@todovue/tv-footer'`        | Single usage or manual registration            |
+
+---
+## Props
+| Prop   | Type   | Default | Description                                                    |
+|--------|--------|---------|----------------------------------------------------------------|
+| config | Object | `{}`    | Configuration object containing all footer data and settings.  |
+
+### Prop Details
+
+#### `config`
+The main configuration object that defines all footer content including brand, navigation, social links, legal links, and copyright information. See [Configuration Object](#configuration-object) for detailed structure.
+
+Example:
+```vue
+<TvFooter :config="myFooterConfig" />
+```
+
+---
+## Configuration Object
+The `config` prop accepts an object with the following structure:
+
+### Brand Section
+```ts
+{
+  brand: {
+    logo: string,      // URL to logo image (optional)
+    name: string,      // Brand name (optional, shown if no logo or alongside logo)
+    url: string        // URL for brand link (default: '/')
+  }
+}
+```
+
+### Version Display
+```ts
+{
+  version: string      // Version string to display (e.g., 'v2.4.0')
+}
+```
+
+### Navigation Sections
+```ts
+{
+  navigation: [
+    {
+      title: string,   // Section title
+      items: [
+        {
+          label: string,  // Link text
+          url: string     // Link URL
+        }
+      ]
+    }
+  ]
+}
+```
+
+### Social Links
+```ts
+{
+  social: [
+    {
+      label: string,     // Accessible label for the link
+      url: string,       // Social media URL
+      iconUrl: string,   // URL to icon image (optional)
+      icon: string       // CSS class for icon (e.g., 'fab fa-github') (optional)
+    }
+  ]
+}
+```
+
+### Legal Links
+```ts
+{
+  legal: [
+    {
+      label: string,     // Link text (e.g., 'Privacy Policy')
+      url: string        // Link URL
+    }
+  ]
+}
+```
+
+### Copyright
+```ts
+{
+  copyright: string    // Copyright text. Use {year} for automatic year replacement
+}
+```
+
+### Complete Configuration Example
+```js
+const footerConfig = {
+  brand: {
+    logo: 'https://example.com/logo.png',
+    name: 'MyApp',
+    url: '/'
+  },
+  version: 'v2.4.0',
+  navigation: [
+    {
+      title: 'Product',
+      items: [
+        { label: 'Features', url: '/features' },
+        { label: 'Pricing', url: '/pricing' },
+        { label: 'Showcase', url: '/showcase' }
+      ]
+    },
+    {
+      title: 'Resources',
+      items: [
+        { label: 'Documentation', url: '/docs' },
+        { label: 'API Reference', url: '/api' },
+        { label: 'Community', url: '/community' }
+      ]
+    },
+    {
+      title: 'Company',
+      items: [
+        { label: 'About Us', url: '/about' },
+        { label: 'Blog', url: '/blog' },
+        { label: 'Careers', url: '/careers' }
+      ]
+    }
+  ],
+  social: [
+    {
+      label: 'GitHub',
+      url: 'https://github.com/mycompany',
+      iconUrl: '/icons/github.svg'
+    },
+    {
+      label: 'Twitter',
+      url: 'https://twitter.com/mycompany',
+      icon: 'fab fa-twitter'
+    }
+  ],
+  legal: [
+    { label: 'Privacy Policy', url: '/privacy' },
+    { label: 'Terms of Service', url: '/terms' },
+    { label: 'Cookie Policy', url: '/cookies' }
+  ],
+  copyright: '© {year} MyApp. All rights reserved.'
+}
+```
+
+---
+## Composable API
+TvFooter includes a composable `useFooter` that you can use to process footer configuration and build custom footer implementations.
+
+### `useFooter(config)`
+```js
+import { useFooter } from '@todovue/tv-footer'
+
+const { brand, navigation, social, legal, version, copyright } = useFooter(config)
+```
+
+**Parameters:**
+- `config` (Object): Footer configuration object
+
+**Returns:**
+- `brand` (ComputedRef): Processed brand configuration
+- `navigation` (ComputedRef): Array of navigation sections
+- `social` (ComputedRef): Array of social links
+- `legal` (ComputedRef): Array of legal links
+- `version` (ComputedRef): Version string
+- `copyright` (ComputedRef): Copyright text with {year} replaced by current year
+
+**Example:**
+```vue
+<script setup>
+import { useFooter } from '@todovue/tv-footer'
+
+const config = {
+  brand: { name: 'MyApp', url: '/' },
+  copyright: '© {year} MyApp. All rights reserved.'
+}
+
+const { brand, copyright } = useFooter(config)
+</script>
+
+<template>
+  <footer>
+    <div>
+      <a :href="brand.url">{{ brand.name }}</a>
+    </div>
+    <div>{{ copyright }}</div>
+  </footer>
+</template>
+```
+
+**Features:**
+- Automatic current year replacement in copyright text
+- Safe defaults for missing configuration
+- Reactive computed properties
+- Type-safe array validation
+
+---
+## Usage Examples
+
+### Minimal Footer
+```vue
+<script setup>
+import { TvFooter } from '@todovue/tv-footer'
+import '@todovue/tv-footer/style.css'
+
+const config = {
+  copyright: '© {year} My Company. All rights reserved.'
+}
+</script>
+
+<template>
+  <TvFooter :config="config" />
+</template>
+```
+
+### Footer with Brand and Navigation
+```vue
+<script setup>
+import { TvFooter } from '@todovue/tv-footer'
+import '@todovue/tv-footer/style.css'
+
+const config = {
+  brand: {
+    logo: 'https://example.com/logo.png',
+    name: 'MyApp',
+    url: '/'
+  },
+  version: 'v1.0.0',
+  navigation: [
+    {
+      title: 'Product',
+      items: [
+        { label: 'Features', url: '/features' },
+        { label: 'Pricing', url: '/pricing' }
+      ]
+    },
+    {
+      title: 'Support',
+      items: [
+        { label: 'Help Center', url: '/help' },
+        { label: 'Contact', url: '/contact' }
+      ]
+    }
+  ],
+  copyright: '© {year} MyApp. All rights reserved.'
+}
+</script>
+
+<template>
+  <TvFooter :config="config" />
+</template>
+```
+
+### Complete Footer with Social & Legal Links
+```vue
+<script setup>
+import { TvFooter } from '@todovue/tv-footer'
+import '@todovue/tv-footer/style.css'
+import GitHubIcon from './assets/github.svg'
+import TwitterIcon from './assets/twitter.svg'
+
+const config = {
+  brand: {
+    logo: 'https://example.com/logo.png',
+    name: 'MyApp',
+    url: '/'
+  },
+  version: 'v2.4.0',
+  navigation: [
+    {
+      title: 'Product',
+      items: [
+        { label: 'Features', url: '/features' },
+        { label: 'Pricing', url: '/pricing' },
+        { label: 'Showcase', url: '/showcase' }
+      ]
+    },
+    {
+      title: 'Resources',
+      items: [
+        { label: 'Documentation', url: '/docs' },
+        { label: 'API Reference', url: '/api' },
+        { label: 'Community', url: '/community' }
+      ]
+    },
+    {
+      title: 'Company',
+      items: [
+        { label: 'About Us', url: '/about' },
+        { label: 'Blog', url: '/blog' },
+        { label: 'Careers', url: '/careers' }
+      ]
+    }
+  ],
+  social: [
+    {
+      label: 'GitHub',
+      url: 'https://github.com/mycompany',
+      iconUrl: GitHubIcon
+    },
+    {
+      label: 'Twitter',
+      url: 'https://twitter.com/mycompany',
+      iconUrl: TwitterIcon
+    }
+  ],
+  legal: [
+    { label: 'Privacy Policy', url: '/privacy' },
+    { label: 'Terms of Service', url: '/terms' },
+    { label: 'Cookie Policy', url: '/cookies' }
+  ],
+  copyright: '© {year} MyApp. All rights reserved.'
+}
+</script>
+
+<template>
+  <div>
+    <!-- Your page content -->
+    <main>
+      <!-- ... -->
+    </main>
+    
+    <!-- Footer -->
+    <TvFooter :config="config" />
+  </div>
+</template>
+```
+
+### Using Icon Libraries (Font Awesome, etc.)
+```vue
+<script setup>
+import { TvFooter } from '@todovue/tv-footer'
+import '@todovue/tv-footer/style.css'
+
+const config = {
+  social: [
+    {
+      label: 'GitHub',
+      url: 'https://github.com/mycompany',
+      icon: 'fab fa-github'  // Font Awesome class
+    },
+    {
+      label: 'Twitter',
+      url: 'https://twitter.com/mycompany',
+      icon: 'fab fa-twitter'  // Font Awesome class
+    },
+    {
+      label: 'LinkedIn',
+      url: 'https://linkedin.com/company/mycompany',
+      icon: 'fab fa-linkedin'  // Font Awesome class
+    }
+  ],
+  copyright: '© {year} MyApp. All rights reserved.'
+}
+</script>
+
+<template>
+  <TvFooter :config="config" />
+</template>
+```
+
+### Custom Implementation with Composable
+```vue
+<script setup>
+import { useFooter } from '@todovue/tv-footer'
+
+const config = {
+  brand: {
+    name: 'MyApp',
+    url: '/'
+  },
+  navigation: [
+    {
+      title: 'Links',
+      items: [
+        { label: 'Home', url: '/' },
+        { label: 'About', url: '/about' }
+      ]
+    }
+  ],
+  copyright: '© {year} MyApp. All rights reserved.'
+}
+
+const { brand, navigation, copyright } = useFooter(config)
+</script>
+
+<template>
+  <footer class="custom-footer">
+    <div class="custom-footer__brand">
+      <a :href="brand.url">{{ brand.name }}</a>
+    </div>
+    
+    <nav v-for="(section, index) in navigation" :key="index">
+      <h4>{{ section.title }}</h4>
+      <ul>
+        <li v-for="(link, i) in section.items" :key="i">
+          <a :href="link.url">{{ link.label }}</a>
+        </li>
+      </ul>
+    </nav>
+    
+    <div class="custom-footer__copyright">
+      {{ copyright }}
+    </div>
+  </footer>
+</template>
+
+<style scoped>
+.custom-footer {
+  /* Your custom styles */
+}
+</style>
+```
+
+---
+## Styling
+TvFooter comes with built-in responsive styles and light/dark mode support.
+
+### Built-in Features
+- **Responsive Grid Layout**:
+  - Mobile (< 640px): 1 column
+  - Tablet (≥ 640px): 2 columns
+  - Desktop (≥ 1024px): 4 columns
+- **Dark Mode Support**: Automatically adapts to `.dark-mode` class on parent
+- **Light Mode Support**: Adapts to `.light-mode` class on parent
+- **Hover Effects**: Smooth transitions on links and social icons
+- **Backdrop Blur**: Modern glassmorphism effect on social icons
+
+### Customization
+You can override the default styles by targeting the CSS classes:
+
+```css
+/* Override brand logo size */
+.tv-footer__logo img {
+  height: 80px;
+}
+
+/* Change link colors */
+.tv-footer__link {
+  color: #your-color;
+}
+
+.tv-footer__link:hover {
+  color: #your-hover-color;
+}
+
+/* Customize social icons */
+.tv-footer__social-link {
+  background-color: #your-background;
+}
+
+/* Adjust spacing */
+.tv-footer {
+  padding: 3rem 1rem;
+}
+
+/* Customize container max-width */
+.tv-footer__container {
+  max-width: 1400px;
+}
+```
+
+### Available CSS Classes
+- `.tv-footer` - Main footer container
+- `.tv-footer__container` - Inner grid container
+- `.tv-footer__brand` - Brand section
+- `.tv-footer__logo` - Brand logo/name link
+- `.tv-footer__version` - Version display
+- `.tv-footer__section` - Navigation or social section
+- `.tv-footer__section-title` - Section title
+- `.tv-footer__links` - List of links
+- `.tv-footer__link` - Individual link
+- `.tv-footer__social` - Social links container
+- `.tv-footer__social-link` - Individual social link
+- `.tv-footer__social-icon-img` - Social icon image
+- `.tv-footer__bottom` - Bottom section with copyright and legal
+- `.tv-footer__legal` - Legal links container
+
+---
+## Accessibility
+- **Semantic HTML**: Uses proper `<footer>`, `<nav>`, `<ul>`, and `<a>` elements
+- **ARIA Labels**: Social links include accessible labels
+- **External Link Safety**: Social links include `rel="noopener noreferrer"` for security
+- **Keyboard Navigation**: All links are keyboard accessible
+- **Focus States**: Clear focus indicators for keyboard navigation
+- **Screen Reader Friendly**: Proper heading hierarchy and semantic structure
+- **Alternative Text**: Images include alt attributes
+
+---
+## SSR Notes
+- **SSR-Safe**: No direct `window`/`document` access during module evaluation
+- **Nuxt 3 Compatible**: Works seamlessly with Nuxt 3 out of the box
+- **Hydration Safe**: No hydration mismatches
+- **Universal Rendering**: Works in both client and server contexts
+- **Vue 3 Composition API**: Uses modern Vue 3 composables
+
+---
+## Development
+```bash
+git clone https://github.com/TODOvue/tv-footer.git
+cd tv-footer
+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).
+
+---
+## License
+MIT © TODOvue
+
+---
+### Attributions
+Crafted for the TODOvue component ecosystem

package/dist/entry.d.ts

@@ -0,0 +1,11 @@
+import { Plugin } from 'vue';
+import { default as _TvFooter } from './components/TvFooter.vue';
+declare const TvFooter: typeof _TvFooter & Plugin;
+export { TvFooter };
+export declare const TvFooterPlugin: Plugin;
+export default TvFooter;
+declare module 'vue' {
+    interface GlobalComponents {
+        TvFooter: typeof TvFooter;
+    }
+}

package/dist/tv-footer.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue");function f(t){const u=e.computed(()=>t?.brand||null),r=e.computed(()=>!t?.navigation||!Array.isArray(t.navigation)?[]:t.navigation),_=e.computed(()=>!t?.social||!Array.isArray(t.social)?[]:t.social),n=e.computed(()=>!t?.legal||!Array.isArray(t.legal)?[]:t.legal),l=e.computed(()=>t?.version||""),a=e.computed(()=>t?.copyright||""),i=new Date().getFullYear(),d=e.computed(()=>a.value.replace("{year}",i));return{brand:u,navigation:r,social:_,legal:n,version:l,copyright:d}}const v={class:"tv-footer"},B={class:"tv-footer__container"},h={key:0,class:"tv-footer__brand"},y=["href"],g=["src","alt"],E={key:1},N={key:0,class:"tv-footer__version"},V={key:0,class:"tv-footer__section-title"},b={class:"tv-footer__links"},F=["href"],C={key:1,class:"tv-footer__section"},S={class:"tv-footer__social"},D=["href"],T=["src","alt"],A={key:2},x={class:"tv-footer__bottom"},L={key:0},P={key:1,class:"tv-footer__legal"},j={class:"tv-footer__links",style:{"flex-direction":"row",gap:"1.5rem"}},w=["href"],M={__name:"TvFooter",props:{config:{type:Object,default:()=>({})}},setup(t){const u=t,{brand:r,navigation:_,social:n,legal:l,version:a,copyright:i}=f(u.config);return(d,k)=>(e.openBlock(),e.createElementBlock("footer",v,[e.createElementVNode("div",B,[e.unref(r)?(e.openBlock(),e.createElementBlock("div",h,[e.createElementVNode("a",{href:e.unref(r).url||"/",class:"tv-footer__logo"},[e.unref(r).logo?(e.openBlock(),e.createElementBlock("img",{key:0,src:e.unref(r).logo,alt:e.unref(r).name},null,8,g)):e.createCommentVNode("",!0),e.unref(r).name?(e.openBlock(),e.createElementBlock("span",E,e.toDisplayString(e.unref(r).name),1)):e.createCommentVNode("",!0)],8,y),e.unref(a)?(e.openBlock(),e.createElementBlock("span",N,e.toDisplayString(e.unref(a)),1)):e.createCommentVNode("",!0)])):e.createCommentVNode("",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(_),(o,c)=>(e.openBlock(),e.createElementBlock("div",{key:c,class:"tv-footer__section"},[o.title?(e.openBlock(),e.createElementBlock("h3",V,e.toDisplayString(o.title),1)):e.createCommentVNode("",!0),e.createElementVNode("ul",b,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(o.items,(m,p)=>(e.openBlock(),e.createElementBlock("li",{key:p},[e.createElementVNode("a",{href:m.url,class:"tv-footer__link"},e.toDisplayString(m.label),9,F)]))),128))])]))),128)),e.unref(n)&&e.unref(n).length?(e.openBlock(),e.createElementBlock("div",C,[e.createElementVNode("div",S,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(n),(o,c)=>(e.openBlock(),e.createElementBlock("a",{key:c,href:o.url,class:"tv-footer__social-link",target:"_blank",rel:"noopener noreferer"},[o.iconUrl?(e.openBlock(),e.createElementBlock("img",{key:0,src:o.iconUrl,alt:o.label,class:"tv-footer__social-icon-img"},null,8,T)):o.icon?(e.openBlock(),e.createElementBlock("i",{key:1,class:e.normalizeClass(o.icon)},null,2)):(e.openBlock(),e.createElementBlock("span",A,e.toDisplayString(o.label),1))],8,D))),128))])])):e.createCommentVNode("",!0)]),e.createElementVNode("div",x,[e.unref(i)?(e.openBlock(),e.createElementBlock("div",L,e.toDisplayString(e.unref(i)),1)):e.createCommentVNode("",!0),e.unref(l)&&e.unref(l).length?(e.openBlock(),e.createElementBlock("div",P,[e.createElementVNode("ul",j,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(l),(o,c)=>(e.openBlock(),e.createElementBlock("li",{key:c},[e.createElementVNode("a",{href:o.url,class:"tv-footer__link"},e.toDisplayString(o.label),9,w)]))),128))])])):e.createCommentVNode("",!0)])]))}},s=M;s.install=t=>{t.component("TvFooter",s)};const O={install:s.install};exports.TvFooter=s;exports.TvFooterPlugin=O;exports.default=s;

package/dist/tv-footer.css

@@ -0,0 +1 @@
+@charset "UTF-8";.tv-footer{width:100%;padding:4rem 1.5rem;font-family:system-ui,-apple-system,sans-serif;box-sizing:border-box;transition:background-color .3s ease,color .3s ease;background-color:#0e131f;color:#cbd5e1;border-top:1px solid rgba(203,213,225,.1)}.tv-footer .tv-footer__logo,.tv-footer .tv-footer__section-title,.dark-mode .tv-footer .tv-footer__logo,.dark-mode .tv-footer .tv-footer__section-title{color:#fff}.tv-footer .tv-footer__social-link,.dark-mode .tv-footer .tv-footer__social-link{background-color:#ffffff0d;color:inherit}.tv-footer .tv-footer__social-link:hover,.dark-mode .tv-footer .tv-footer__social-link:hover{background-color:#ef233c;color:#fff}.light-mode .tv-footer{background-color:#b9c4df;color:#1e293b;border-top-color:#1e293b1a}.light-mode .tv-footer .tv-footer__logo,.light-mode .tv-footer .tv-footer__section-title{color:#1e293b}.light-mode .tv-footer .tv-footer__social-link{background-color:#0000000d;color:inherit}.light-mode .tv-footer .tv-footer__social-link:hover{background-color:#ef233c;color:#f1f9f9}.light-mode .tv-footer .tv-footer__link:hover{color:#d00f27}.tv-footer__container{display:grid;grid-template-columns:1fr;gap:2.5rem;max-width:1200px;margin:0 auto}@media(min-width:640px){.tv-footer__container{grid-template-columns:repeat(2,1fr)}}@media(min-width:1024px){.tv-footer__container{grid-template-columns:repeat(4,1fr)}}.tv-footer__brand{display:flex;flex-direction:column;gap:1rem}.tv-footer__logo{font-weight:700;font-size:1.5rem;text-decoration:none;display:inline-flex;align-items:center;gap:.5rem}.tv-footer__logo img{height:100px;width:auto}.tv-footer__version{font-size:.875rem;opacity:.7}.tv-footer__section-title{font-weight:600;margin-bottom:1.25rem;font-size:1rem}.tv-footer__links{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.75rem}.tv-footer__link{color:inherit;text-decoration:none;font-size:.95rem;transition:color .2s;cursor:pointer}.tv-footer__link:hover{color:#ef233c}.tv-footer__social{display:flex;gap:1rem;flex-wrap:wrap}.tv-footer__social-link{font-size:1.25rem;text-decoration:none;display:flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;border-radius:50%;transition:all .2s;transform:translateY(0)}.tv-footer__social-link:hover{transform:translateY(-2px)}.tv-footer__social-link img{width:1.25rem;height:1.25rem;object-fit:contain;display:block}.tv-footer__bottom{border-top-style:solid;border-top-width:1px;margin-top:4rem;padding-top:2rem;text-align:center;font-size:.875rem;display:flex;flex-direction:column;align-items:center;gap:1rem;max-width:1200px;margin-left:auto;margin-right:auto}@media(min-width:640px){.tv-footer__bottom{flex-direction:row;justify-content:space-between}}

package/dist/tv-footer.d.ts

@@ -0,0 +1,6 @@
+export * from './entry'
+export {}
+import TvFooter from './entry'
+export default TvFooter
+export * from './entry'
+export {}

package/dist/tv-footer.es.js

@@ -0,0 +1,119 @@
+import { computed as c, createElementBlock as t, openBlock as e, createElementVNode as l, createCommentVNode as a, unref as o, toDisplayString as i, Fragment as y, renderList as f, normalizeClass as x } from "vue";
+function T(r) {
+  const k = c(() => r?.brand || null), n = c(() => !r?.navigation || !Array.isArray(r.navigation) ? [] : r.navigation), p = c(() => !r?.social || !Array.isArray(r.social) ? [] : r.social), _ = c(() => !r?.legal || !Array.isArray(r.legal) ? [] : r.legal), u = c(() => r?.version || ""), v = c(() => r?.copyright || ""), h = (/* @__PURE__ */ new Date()).getFullYear(), m = c(() => v.value.replace("{year}", h));
+  return {
+    brand: k,
+    navigation: n,
+    social: p,
+    legal: _,
+    version: u,
+    copyright: m
+  };
+}
+const C = { class: "tv-footer" }, w = { class: "tv-footer__container" }, B = {
+  key: 0,
+  class: "tv-footer__brand"
+}, D = ["href"], E = ["src", "alt"], N = { key: 1 }, U = {
+  key: 0,
+  class: "tv-footer__version"
+}, V = {
+  key: 0,
+  class: "tv-footer__section-title"
+}, Y = { class: "tv-footer__links" }, j = ["href"], z = {
+  key: 1,
+  class: "tv-footer__section"
+}, L = { class: "tv-footer__social" }, O = ["href"], P = ["src", "alt"], S = { key: 2 }, q = { class: "tv-footer__bottom" }, G = { key: 0 }, H = {
+  key: 1,
+  class: "tv-footer__legal"
+}, I = {
+  class: "tv-footer__links",
+  style: { "flex-direction": "row", gap: "1.5rem" }
+}, J = ["href"], K = {
+  __name: "TvFooter",
+  props: {
+    config: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  setup(r) {
+    const k = r, { brand: n, navigation: p, social: _, legal: u, version: v, copyright: h } = T(k.config);
+    return (m, F) => (e(), t("footer", C, [
+      l("div", w, [
+        o(n) ? (e(), t("div", B, [
+          l("a", {
+            href: o(n).url || "/",
+            class: "tv-footer__logo"
+          }, [
+            o(n).logo ? (e(), t("img", {
+              key: 0,
+              src: o(n).logo,
+              alt: o(n).name
+            }, null, 8, E)) : a("", !0),
+            o(n).name ? (e(), t("span", N, i(o(n).name), 1)) : a("", !0)
+          ], 8, D),
+          o(v) ? (e(), t("span", U, i(o(v)), 1)) : a("", !0)
+        ])) : a("", !0),
+        (e(!0), t(y, null, f(o(p), (s, d) => (e(), t("div", {
+          key: d,
+          class: "tv-footer__section"
+        }, [
+          s.title ? (e(), t("h3", V, i(s.title), 1)) : a("", !0),
+          l("ul", Y, [
+            (e(!0), t(y, null, f(s.items, (b, A) => (e(), t("li", { key: A }, [
+              l("a", {
+                href: b.url,
+                class: "tv-footer__link"
+              }, i(b.label), 9, j)
+            ]))), 128))
+          ])
+        ]))), 128)),
+        o(_) && o(_).length ? (e(), t("div", z, [
+          l("div", L, [
+            (e(!0), t(y, null, f(o(_), (s, d) => (e(), t("a", {
+              key: d,
+              href: s.url,
+              class: "tv-footer__social-link",
+              target: "_blank",
+              rel: "noopener noreferer"
+            }, [
+              s.iconUrl ? (e(), t("img", {
+                key: 0,
+                src: s.iconUrl,
+                alt: s.label,
+                class: "tv-footer__social-icon-img"
+              }, null, 8, P)) : s.icon ? (e(), t("i", {
+                key: 1,
+                class: x(s.icon)
+              }, null, 2)) : (e(), t("span", S, i(s.label), 1))
+            ], 8, O))), 128))
+          ])
+        ])) : a("", !0)
+      ]),
+      l("div", q, [
+        o(h) ? (e(), t("div", G, i(o(h)), 1)) : a("", !0),
+        o(u) && o(u).length ? (e(), t("div", H, [
+          l("ul", I, [
+            (e(!0), t(y, null, f(o(u), (s, d) => (e(), t("li", { key: d }, [
+              l("a", {
+                href: s.url,
+                class: "tv-footer__link"
+              }, i(s.label), 9, J)
+            ]))), 128))
+          ])
+        ])) : a("", !0)
+      ])
+    ]));
+  }
+}, g = K;
+g.install = (r) => {
+  r.component("TvFooter", g);
+};
+const Q = {
+  install: g.install
+};
+export {
+  g as TvFooter,
+  Q as TvFooterPlugin,
+  g as default
+};

package/nuxt.js

@@ -0,0 +1,15 @@
+
+import { defineNuxtModule } from '@nuxt/kit'
+
+export default defineNuxtModule({
+  meta: {
+    name: '@todovue/tv-footer',
+    configKey: 'tvFooter'
+  },
+  setup(_options, nuxt) {
+    const cssPath = '@todovue/tv-footer/style.css';
+    if (!nuxt.options.css.includes(cssPath)) {
+      nuxt.options.css.push(cssPath);
+    }
+  }
+})

package/package.json

@@ -0,0 +1,69 @@
+{
+  "name": "@todovue/tv-footer",
+  "private": false,
+  "author": "Cristhian Daza",
+  "description": "A simple and customizable footer component for Vue.js applications, perfect for enhancing your web projects with ease.",
+  "license": "MIT",
+  "version": "1.0.0",
+  "type": "module",
+  "homepage": "https://ui.todovue.blog/footer",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/TODOvue/tv-footer.git"
+  },
+  "bugs": {
+    "url": "https://github.com/TODOvue/tv-footer/issues"
+  },
+  "keywords": [
+    "todovue",
+    "front-end",
+    "web",
+    "vue",
+    "vuejs",
+    "vue-js",
+    "footer",
+    "show-footer",
+    "vue-footer",
+    "vue-footer-component"
+  ],
+  "exports": {
+    ".": {
+      "import": "./dist/tv-footer.es.js",
+      "require": "./dist/tv-footer.cjs.js"
+    },
+    "./style.css": "./dist/tv-footer.css",
+    "./nuxt": "./nuxt.js"
+  },
+  "main": "dist/tv-footer.cjs.js",
+  "module": "dist/tv-footer.es.js",
+  "types": "dist/tv-footer.d.ts",
+  "files": [
+    "dist",
+    "LICENSE",
+    "README.md",
+    "nuxt.js"
+  ],
+  "engines": {
+    "node": ">=20.19.0"
+  },
+  "sideEffects": [
+    "*.css",
+    "*.scss",
+    "dist/*.css"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "build:demo": "cp README.md public/ && cp CHANGELOG.md public/ && VITE_BUILD_TARGET=demo vite build"
+  },
+  "peerDependencies": {
+    "vue": "^3.5.26"
+  },
+  "devDependencies": {
+    "@todovue/tv-demo": "^1.2.7",
+    "@vitejs/plugin-vue": "^6.0.3",
+    "sass": "^1.97.1",
+    "vite": "^7.3.0",
+    "vite-plugin-dts": "^4.5.4"
+  }
+}