Added <PillNav /> Component

2026-03-08 16:09:31 -06:00 · 2025-08-13 23:59:16 +05:30
parent 1ebff8aef0
commit d341c73210
6 changed files with 667 additions and 1 deletions
--- a/src/demo/Components/PillNavDemo.vue
+++ b/src/demo/Components/PillNavDemo.vue
@@ -0,0 +1,193 @@
+<template>
+  <TabbedLayout>
+    <template #preview>
+      <div
+        class="relative overflow-hidden demo-container demo-container-dots"
+        :style="{
+          backgroundColor: currentTheme.backgroundColor,
+          minHeight: '300px',
+          height: 'auto'
+        }"
+      >
+        <PillNav
+          :key="key"
+          :logo="currentTheme.logo"
+          :baseColor="currentTheme.baseColor"
+          :pillColor="currentTheme.pillColor"
+          :hoveredPillTextColor="currentTheme.hoveredPillTextColor"
+          :pillTextColor="currentTheme.pillTextColor"
+          :initialLoadAnimation="initialLoadAnimation"
+          :items="[{ label: 'Home' }, { label: 'About' }, { label: 'Contact' }]"
+          activeHref="/"
+        />
+      </div>
+
+      <Customize>
+        <PreviewSelect title="Example" :options="themeOptions" v-model="theme" />
+        <PreviewSwitch title="Initial Load Animation" v-model="initialLoadAnimation" />
+      </Customize>
+
+      <PropTable :data="propData" />
+      <Dependencies :dependency-list="['gsap']" />
+    </template>
+
+    <template #code>
+      <CodeExample :code-object="pillNav" />
+    </template>
+
+    <template #cli>
+      <CliInstallation :command="pillNav.cli" />
+    </template>
+  </TabbedLayout>
+</template>
+
+<script setup lang="ts">
+import { useForceRerender } from '@/composables/useForceRerender';
+import { computed, ref, watch } from 'vue';
+import logoDark from '../../assets/logos/vue-bits-logo-small-dark.svg';
+import logoLight from '../../assets/logos/vue-bits-logo-small.svg';
+import CliInstallation from '../../components/code/CliInstallation.vue';
+import CodeExample from '../../components/code/CodeExample.vue';
+import Dependencies from '../../components/code/Dependencies.vue';
+import Customize from '../../components/common/Customize.vue';
+import PreviewSelect from '../../components/common/PreviewSelect.vue';
+import PreviewSwitch from '../../components/common/PreviewSwitch.vue';
+import PropTable from '../../components/common/PropTable.vue';
+import TabbedLayout from '../../components/common/TabbedLayout.vue';
+import { pillNav } from '../../constants/code/Components/PillNavCode';
+import PillNav from '../../content/Components/PillNav/PillNav.vue';
+
+const { rerenderKey: key, forceRerender } = useForceRerender();
+
+type ThemeKey = 'light' | 'dark' | 'color';
+
+interface ThemeConfig {
+  logo: string;
+  baseColor: string;
+  pillColor: string;
+  hoveredPillTextColor: string;
+  pillTextColor: string;
+  backgroundColor: string;
+}
+
+const theme = ref<ThemeKey>('light');
+const initialLoadAnimation = ref(false);
+
+const themeConfigs: Record<ThemeKey, ThemeConfig> = {
+  light: {
+    logo: logoLight,
+    baseColor: '#000',
+    pillColor: '#f0f0f0',
+    hoveredPillTextColor: '#fff',
+    pillTextColor: '#000',
+    backgroundColor: '#f0f0f0'
+  },
+  dark: {
+    logo: logoDark,
+    baseColor: '#fff',
+    pillColor: '#060010',
+    hoveredPillTextColor: '#000',
+    pillTextColor: '#fff',
+    backgroundColor: '#060010'
+  },
+  color: {
+    logo: logoDark,
+    baseColor: '#27FF64',
+    pillColor: '#060010',
+    hoveredPillTextColor: '#060010',
+    pillTextColor: '#fff',
+    backgroundColor: '#060010'
+  }
+};
+
+const themeOptions = [
+  { value: 'light', label: 'Light' },
+  { value: 'dark', label: 'Dark' },
+  { value: 'color', label: 'Color' }
+];
+
+const currentTheme = computed(() => themeConfigs[theme.value]);
+
+watch(
+  [currentTheme, initialLoadAnimation],
+  () => {
+    forceRerender();
+  },
+  { immediate: true }
+);
+
+const propData = [
+  {
+    name: 'logo',
+    type: 'string',
+    default: '-',
+    description: 'URL for the logo image'
+  },
+  {
+    name: 'logoAlt',
+    type: 'string',
+    default: 'Logo',
+    description: 'Alt text for the logo image'
+  },
+  {
+    name: 'items',
+    type: 'PillNavItem[]',
+    default: '-',
+    description: 'Array of navigation items with label, href, and optional ariaLabel'
+  },
+  {
+    name: 'activeHref',
+    type: 'string',
+    default: 'undefined',
+    description: 'The href of the currently active navigation item'
+  },
+  {
+    name: 'className',
+    type: 'string',
+    default: "''",
+    description: 'Additional CSS classes for the navigation container'
+  },
+  {
+    name: 'ease',
+    type: 'string',
+    default: 'power3.easeOut',
+    description: 'GSAP easing function for animations'
+  },
+  {
+    name: 'baseColor',
+    type: 'string',
+    default: '#fff',
+    description: 'Base background color for the navigation'
+  },
+  {
+    name: 'pillColor',
+    type: 'string',
+    default: '#060010',
+    description: 'Background color for navigation pills'
+  },
+  {
+    name: 'hoveredPillTextColor',
+    type: 'string',
+    default: '#060010',
+    description: 'Text color when hovering over pills'
+  },
+  {
+    name: 'pillTextColor',
+    type: 'string',
+    default: 'baseColor',
+    description: 'Text color for navigation pills'
+  },
+  {
+    name: 'onMobileMenuClick',
+    type: '() => void',
+    default: 'undefined',
+    description: 'Callback function triggered when mobile menu button is clicked'
+  },
+  {
+    name: 'initialLoadAnimation',
+    type: 'boolean',
+    default: 'false',
+    description: 'Enable initial load animation for logo scale and nav items reveal'
+  }
+];
+</script>