@todovue/tv-footer 1.0.0 → 1.1.1

package/src/assets/scss/style.scss

@@ -0,0 +1,396 @@
+@use "variables" as *;
+@use "sass:color";
+
+.tv-footer {
+  width: 100%;
+  padding: 3rem 1.5rem;
+  box-sizing: border-box;
+  transition: background-color 0.4s ease, color 0.4s ease;
+  position: relative;
+
+  background-color: $dark-card-bg;
+  color: $dark-text;
+  border-top: 1px solid rgba($dark-text, 0.05);
+
+  &,
+  .dark-mode & {
+
+    .tv-footer__logo,
+    .tv-footer__section-title {
+      color: #fff;
+    }
+
+    .tv-footer__social-link {
+      background-color: rgba(255, 255, 255, 0.03);
+      color: inherit;
+      border: 1px solid rgba(255, 255, 255, 0.05);
+
+      &:hover {
+        background-color: $primary-color;
+        border-color: $primary-color;
+        color: white;
+        box-shadow: 0 0 15px rgba($primary-color, 0.4);
+      }
+    }
+  }
+
+  .light-mode & {
+    background-color: $light-card-bg;
+    color: $light-text;
+    border-top-color: rgba($light-text, 0.05);
+
+    .tv-footer__logo,
+    .tv-footer__section-title {
+      color: $light-text;
+    }
+
+    .tv-footer__social-link {
+      background-color: rgba(255, 255, 255, 0.5);
+      color: inherit;
+      border: 1px solid rgba(0, 0, 0, 0.05);
+      backdrop-filter: blur(4px);
+
+      &:hover {
+        background-color: $primary-color;
+        border-color: $primary-color;
+        color: $light-button-text;
+        box-shadow: 0 4px 12px rgba($primary-color, 0.3);
+      }
+    }
+
+    .tv-footer__link:hover {
+      color: $primary-color;
+    }
+
+    .tv-footer__newsletter-input {
+      background-color: rgba(255, 255, 255, 0.6);
+      border-color: rgba(0, 0, 0, 0.05);
+      color: $light-text;
+      backdrop-filter: blur(8px);
+
+      &:focus {
+        background-color: rgba(255, 255, 255, 0.9);
+        border-color: $primary-color;
+        box-shadow: 0 0 0 4px rgba($primary-color, 0.1);
+      }
+    }
+  }
+}
+
+.tv-footer__container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4rem;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.tv-footer__left-column {
+  flex: 1 1 250px;
+  max-width: 400px;
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+}
+
+.tv-footer__brand {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.tv-footer__logo {
+  font-weight: 800;
+  font-size: 1.5rem;
+  text-decoration: none;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.75rem;
+  letter-spacing: -0.02em;
+
+  img {
+    height: 100px;
+    width: auto;
+  }
+}
+
+.tv-footer__version {
+  font-size: 0.75rem;
+  opacity: 0.6;
+  font-weight: 500;
+  background: rgba(127, 127, 127, 0.1);
+  padding: 0.125rem 0.5rem;
+  border-radius: 12px;
+  align-self: flex-start;
+}
+
+.tv-footer__nav-definitions {
+  display: flex;
+  flex: 999 1 400px;
+  flex-wrap: wrap;
+  gap: 3rem;
+
+  @media (max-width: 768px) {
+    gap: 2rem;
+    flex-basis: 100%;
+  }
+}
+
+.tv-footer__section {
+  min-width: 140px;
+}
+
+.tv-footer__section-title {
+  font-weight: 700;
+  margin-bottom: 1.25rem;
+  font-size: 0.9rem;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  opacity: 1;
+  position: relative;
+
+  &::after {
+    content: '';
+    display: block;
+    width: 20px;
+    height: 2px;
+    background-color: $primary-color;
+    margin-top: 0.5rem;
+    border-radius: 2px;
+  }
+}
+
+.tv-footer__links {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.875rem;
+}
+
+.tv-footer__link {
+  color: inherit;
+  text-decoration: none;
+  font-size: 0.95rem;
+  transition: all 0.2s ease;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  opacity: 0.75;
+  width: fit-content;
+
+  &:hover {
+    color: $primary-color;
+    opacity: 1;
+    transform: translateX(4px);
+  }
+
+  &::before {
+    content: '';
+    display: block;
+    width: 4px;
+    height: 4px;
+    background-color: currentColor;
+    border-radius: 50%;
+    opacity: 0;
+    transition: opacity 0.2s;
+  }
+
+  &:hover::before {
+    opacity: 1;
+  }
+}
+
+.tv-footer__social-section {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  padding-top: 0.5rem;
+  flex: 0 0 auto;
+}
+
+.tv-footer__social {
+  display: flex;
+  gap: 0.75rem;
+  flex-wrap: wrap;
+}
+
+.tv-footer__social-link {
+  font-size: 1.1rem;
+  text-decoration: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: 50%;
+  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+
+  &:hover {
+    transform: translateY(-4px) scale(1.1);
+  }
+
+  img {
+    width: 1.25rem;
+    height: 1.25rem;
+    object-fit: contain;
+    display: block;
+  }
+}
+
+.tv-footer__bottom {
+  border-top: 1px solid rgba(127, 127, 127, 0.1);
+  margin-top: 3rem;
+  padding-top: 1.5rem;
+  text-align: center;
+  font-size: 0.85rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
+  max-width: 1200px;
+  margin-left: auto;
+  margin-right: auto;
+  opacity: 0.7;
+
+  @media (min-width: 640px) {
+    flex-direction: row;
+    justify-content: space-between;
+  }
+
+  .tv-footer__links {
+    flex-direction: row;
+    gap: 1.5rem;
+    flex-wrap: wrap;
+    justify-content: center;
+
+    li {
+      display: inline-block;
+    }
+
+    .tv-footer__link {
+      font-size: 0.8rem;
+
+      &:hover {
+        transform: none;
+        text-decoration: underline;
+      }
+
+      &::before {
+        display: none;
+      }
+    }
+  }
+}
+
+.tv-footer__newsletter {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  margin-top: 1rem;
+  width: 100%;
+}
+
+.tv-footer__newsletter-title {
+  font-weight: 700;
+  font-size: 1rem;
+  margin: 0;
+}
+
+.tv-footer__newsletter-text {
+  font-size: 0.9rem;
+  line-height: 1.5;
+  opacity: 0.8;
+  margin: 0;
+}
+
+.tv-footer__newsletter-form {
+  display: flex;
+  gap: 0.5rem;
+  flex-direction: column;
+
+  @media(min-width: 400px) {
+    flex-direction: row;
+  }
+}
+
+.tv-footer__newsletter-input {
+  flex: 1;
+  min-width: 0;
+  padding: 0.75rem 1.25rem;
+  border-radius: 9999px;
+  border: 1px solid transparent;
+  background-color: rgba(255, 255, 255, 0.05);
+  color: inherit;
+  font-size: 0.9rem;
+  outline: none;
+  transition: all 0.3s ease;
+
+  &:focus {
+    background-color: rgba(255, 255, 255, 0.1);
+    border-color: $primary-color;
+    box-shadow: 0 0 0 4px rgba($primary-color, 0.2);
+  }
+
+  &::placeholder {
+    opacity: 0.5;
+  }
+}
+
+.tv-footer__newsletter-button {
+  padding: 0.75rem 1.5rem;
+  border-radius: 9999px;
+  border: none;
+  background-color: $primary-color;
+  color: #fff;
+  font-weight: 600;
+  font-size: 0.9rem;
+  cursor: pointer;
+  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  white-space: nowrap;
+
+  &:hover {
+    background-color: color.adjust($primary-color, $lightness: -5%);
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba($primary-color, 0.4);
+  }
+
+  &:active {
+    transform: translateY(0);
+  }
+}
+
+.tv-footer__back-to-top {
+  position: fixed;
+  bottom: 2.5rem;
+  right: 2.5rem;
+  width: 3.5rem;
+  height: 3.5rem;
+  border-radius: 50%;
+  background-color: $primary-color;
+  color: #fff;
+  border: none;
+  font-size: 1.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
+  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  z-index: 1000;
+
+  &:hover {
+    transform: translateY(-4px) scale(1.05);
+    background-color: color.adjust($primary-color, $lightness: -5%);
+    box-shadow: 0 12px 20px rgba($primary-color, 0.3);
+  }
+
+  &:active {
+    transform: translateY(-1px);
+  }
+}

package/src/components/TvFooter.vue

@@ -0,0 +1,101 @@
+<script setup>
+import { useFooter } from '../composables/useFooter.js'
+import { ref } from 'vue'
+
+const props = defineProps({
+  config: {
+    type: Object,
+    default: () => ({})
+  }
+})
+
+const { brand, navigation, social, legal, version, copyright, newsletter } = useFooter(props.config)
+const email = ref('')
+const emit = defineEmits(['subscribe'])
+
+const handleSubscribe = () => {
+  if (email.value) {
+    emit('subscribe', email.value)
+    email.value = ''
+  }
+}
+</script>
+
+<template>
+  <footer class="tv-footer">
+    <div class="tv-footer__container">
+      <div class="tv-footer__left-column">
+        <slot name="brand" :brand="brand" :version="version">
+          <div v-if="brand" class="tv-footer__brand">
+            <a :href="brand.url || '/'" class="tv-footer__logo">
+              <img v-if="brand.logo" :src="brand.logo" :alt="brand.name" />
+              <span v-if="brand.name">{{ brand.name }}</span>
+            </a>
+            <span v-if="version" class="tv-footer__version">{{ version }}</span>
+          </div>
+        </slot>
+
+        <slot name="newsletter" :newsletter="newsletter">
+          <div v-if="newsletter" class="tv-footer__newsletter">
+            <h3 v-if="newsletter.title" class="tv-footer__newsletter-title">{{ newsletter.title }}</h3>
+            <p v-if="newsletter.description" class="tv-footer__newsletter-text">{{ newsletter.description }}</p>
+            <form class="tv-footer__newsletter-form" @submit.prevent="handleSubscribe">
+              <input
+                v-model="email"
+                type="email"
+                :placeholder="newsletter.placeholder || 'Enter your email'"
+                class="tv-footer__newsletter-input"
+                required
+              />
+              <button type="submit" class="tv-footer__newsletter-button">
+                {{ newsletter.buttonText || 'Subscribe' }}
+              </button>
+            </form>
+          </div>
+        </slot>
+      </div>
+
+      <div class="tv-footer__nav-definitions">
+        <div v-for="(group, index) in navigation" :key="index" class="tv-footer__section">
+          <h3 v-if="group.title" class="tv-footer__section-title">{{ group.title }}</h3>
+          <ul class="tv-footer__links">
+            <li v-for="(link, i) in group.items" :key="i">
+              <a :href="link.url" class="tv-footer__link">
+                {{ link.label }}
+              </a>
+            </li>
+          </ul>
+        </div>
+      </div>
+
+      <div v-if="social && social.length" class="tv-footer__social-section">
+        <div class="tv-footer__social">
+          <a v-for="(item, index) in social" :key="index" :href="item.url" class="tv-footer__social-link" target="_blank" rel="noopener noreferer">
+            <img v-if="item.iconUrl" :src="item.iconUrl" :alt="item.label" class="tv-footer__social-icon-img" />
+            <i v-else-if="item.icon" :class="item.icon"></i>
+            <span v-else>{{ item.label }}</span>
+          </a>
+        </div>
+      </div>
+    </div>
+
+    <slot name="bottom" :copyright="copyright" :legal="legal">
+      <div class="tv-footer__bottom">
+        <div v-if="copyright">{{ copyright }}</div>
+        <div v-if="legal && legal.length" class="tv-footer__legal">
+          <ul class="tv-footer__links" style="flex-direction: row; gap: 1.5rem;">
+            <li v-for="(link, index) in legal" :key="index">
+              <a :href="link.url" class="tv-footer__link">
+                {{ link.label }}
+              </a>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </slot>
+  </footer>
+</template>
+
+<style scoped>
+
+</style>

package/src/composables/useFooter.js

@@ -0,0 +1,45 @@
+import { computed } from 'vue'
+
+export function useFooter(config) {
+  const brand = computed(() => config?.brand || null)
+
+  const navigation = computed(() => {
+    if (!config?.navigation || !Array.isArray(config.navigation)) return []
+    return config.navigation
+  })
+
+  const social = computed(() => {
+    if (!config?.social || !Array.isArray(config.social)) return []
+    return config.social
+  })
+
+  const legal = computed(() => {
+    if (!config?.legal || !Array.isArray(config.legal)) return []
+    return config.legal
+  })
+
+  const version = computed(() => config?.version || '')
+
+  const copyright = computed(() => config?.copyright || '')
+
+  const newsletter = computed(() => {
+    return config?.newsletter || null
+  })
+
+  const currentYear = new Date().getFullYear()
+
+  const formattedCopyright = computed(() => {
+    const text = copyright.value
+    return text.replace('{year}', currentYear)
+  })
+
+  return {
+    brand,
+    navigation,
+    social,
+    legal,
+    version,
+    copyright: formattedCopyright,
+    newsletter
+  }
+}

package/src/demo/Demo.vue

@@ -0,0 +1,21 @@
+<script setup>
+import { defineAsyncComponent } from 'vue'
+import { demos } from './utils/mocks.js'
+import { TvDemo } from '@todovue/tv-demo'
+
+const TvFooter = defineAsyncComponent(/* webpackChunkName: "tvFooter" */() => import('../components/TvFooter.vue'))
+</script>
+
+<template>
+  <TvDemo
+    hide-background
+    :component="TvFooter"
+    :variants="demos"
+    :manual-emits="['subscribe']"
+    component-name="TvFooter"
+    npm-install="@todovue/tv-footer"
+    source-link="https://github.com/TODOvue/tv-footer"
+    url-clone="https://github.com/TODOvue/tv-footer.git"
+    version="1.1.1"
+  />
+</template>

package/src/demo/utils/demos/default.vue

@@ -0,0 +1,68 @@
+<template>
+  <TvFooter :config="conf" />
+</template>
+
+<script setup>
+import { TvFooter } from '@todovue/tv-footer'
+import '@todovue/tv-footer/style.css'
+import FacebookIcon from './utils/icons/facebook.png'
+import GitHubWithIcon from "../icons/github-white.svg";
+import TODOvue from "../icons/todovue.png";
+
+const conf = {
+  brand: {
+    logo: 'https://res.cloudinary.com/denj4fg7f/image/upload/v1766199952/logo_ohpadg.png', // Optional
+    url: '/'
+  },
+  version: 'v2.4.0',
+  navigation: [
+    {
+      title: 'Product',
+      items: [
+        { label: 'Features', url: '/#' },
+        { label: 'Pricing', url: '/#' },
+        { label: 'Showcase', url: '/#' }
+      ]
+    },
+    {
+      title: 'Resources',
+      items: [
+        { label: 'Documentation', url: '/#' },
+        { label: 'API Reference', url: '/#' },
+        { label: 'Community', url: '/#' }
+      ]
+    },
+    {
+      title: 'Company',
+      items: [
+        { label: 'About Us', url: '/#' },
+        { label: 'Blog', url: '/#' },
+        { label: 'Careers', url: '/#' }
+      ]
+    }
+  ],
+  social: [
+    {
+      label: 'GitHub',
+      url: 'https://github.com/TODOvue',
+      iconUrl: GitHubWithIcon // Icon library class (e.g. FontAwesome, UnoCSS) use /icon
+    },
+    {
+      label: 'Facebook',
+      url: 'https://facebook.com',
+      iconUrl: FacebookIcon
+    },
+    {
+      label: 'TODOvue',
+      url: 'https://todovue.blog',
+      iconUrl: TODOvue
+    }
+  ],
+  legal: [
+    { label: 'Privacy', url: '/#' },
+    { label: 'Terms', url: '/#' },
+    { label: 'Cookies', url: '/#' }
+  ],
+  copyright: '© {year} TvFooter. All rights reserved.'
+}
+</script>

package/src/demo/utils/demos/newsletter.vue

@@ -0,0 +1,79 @@
+<template>
+  <TvFooter :config="conf" @subscribe="handleSubscribe" />
+</template>
+
+<script setup>
+import { TvFooter } from '@todovue/tv-footer'
+import '@todovue/tv-footer/style.css'
+import FacebookIcon from './utils/icons/facebook.png'
+import GitHubWithIcon from "../icons/github-white.svg";
+import TODOvue from "../icons/todovue.png";
+
+const handleSubscribe = (email) => {
+  console.log('Subscribe event received:', email);
+  alert(`Subscribed with: ${email}`);
+}
+
+const conf = {
+  newsletter: {
+    title: 'Subscribe to our newsletter',
+    description: 'Get the latest news and updates right to your inbox.',
+    placeholder: 'Your email address',
+    buttonText: 'Subscribe'
+  },
+  brand: {
+    logo: 'https://res.cloudinary.com/denj4fg7f/image/upload/v1766199952/logo_ohpadg.png', // Optional
+    url: '/'
+  },
+  version: 'v2.4.0',
+  navigation: [
+    {
+      title: 'Product',
+      items: [
+        { label: 'Features', url: '/#' },
+        { label: 'Pricing', url: '/#' },
+        { label: 'Showcase', url: '/#' }
+      ]
+    },
+    {
+      title: 'Resources',
+      items: [
+        { label: 'Documentation', url: '/#' },
+        { label: 'API Reference', url: '/#' },
+        { label: 'Community', url: '/#' }
+      ]
+    },
+    {
+      title: 'Company',
+      items: [
+        { label: 'About Us', url: '/#' },
+        { label: 'Blog', url: '/#' },
+        { label: 'Careers', url: '/#' }
+      ]
+    }
+  ],
+  social: [
+    {
+      label: 'GitHub',
+      url: 'https://github.com/TODOvue',
+      iconUrl: GitHubWithIcon // Icon library class (e.g. FontAwesome, UnoCSS) use /icon
+    },
+    {
+      label: 'Facebook',
+      url: 'https://facebook.com',
+      iconUrl: FacebookIcon
+    },
+    {
+      label: 'TODOvue',
+      url: 'https://todovue.blog',
+      iconUrl: TODOvue
+    }
+  ],
+  legal: [
+    { label: 'Privacy', url: '/#' },
+    { label: 'Terms', url: '/#' },
+    { label: 'Cookies', url: '/#' }
+  ],
+  copyright: '© {year} TvFooter. All rights reserved.'
+}
+</script>