srcdev-nuxt-components 3.0.0 → 4.0.0

package/components/presentation/tabs/TabsCore.vue

@@ -0,0 +1,308 @@
+<template>
+  <div class="tabs-core" :class="`axis-${axis}`">
+    <ul role="tablist" aria-labelledby="channel-name" ref="tabsNavRef" @mouseleave="resetHoverToActivePosition()" class="tabs-list" :class="[elementClasses]">
+      <li v-for="(index, key) in navItems" :key="key">
+        <button
+          @click.prevent="navItemClicked($event)"
+          @mouseover="navItemHovered($event)"
+          :id="`tab-${key}-trigger`"
+          :data-tab-index="key"
+          data-nav-item
+          role="tab"
+          aria-selected="false"
+          class="tabs-list-item"
+        >
+          <slot :name="`tab-${key}-trigger`"></slot>
+        </button>
+      </li>
+    </ul>
+    <div class="tab-content-wrapper">
+      <div v-for="(item, key) in navItems" :key="key" class="tab-content" :aria-labelledby="`tab-${key}-trigger`" :id="`tab-${key}-content`" role="region" aria-hidden="true" ref="tabsContentRefs">
+        <slot :name="`tab-${key}-content`"></slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { ITabNav } from '@/types/types.tabs';
+
+const props = defineProps({
+  tag: {
+    type: String as PropType<string>,
+    default: 'button',
+  },
+  axis: {
+    type: String as PropType<'x' | 'y'>,
+    default: 'x',
+  },
+  transitionDuration: {
+    type: Number as PropType<number>,
+    default: 200,
+  },
+  navItems: {
+    type: Array as PropType<ITabNav[]>,
+    required: true,
+  },
+  trackHover: {
+    type: Boolean as PropType<boolean>,
+    default: true,
+  },
+  trackActive: {
+    type: Boolean as PropType<boolean>,
+    default: true,
+  },
+  trackIndicator: {
+    type: Boolean as PropType<boolean>,
+    default: true,
+  },
+  styleClassPassthrough: {
+    type: Array as PropType<string[]>,
+    default: () => [],
+  },
+});
+
+const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+
+const tabsNavRef = ref<HTMLElement | null>(null);
+const tabsContentRefs = ref<HTMLElement[] | null>(null);
+
+const { initNavDecorators, navItemClicked, navItemHovered, resetHoverToActivePosition } = useTabs(props.axis, tabsNavRef, tabsContentRefs, props.transitionDuration);
+
+onMounted(() => {
+  initNavDecorators();
+});
+</script>
+
+<style lang="css">
+.tabs-core {
+  /*
+  * CSS var within /assets/styles/components/tabs.css
+  */
+  --_tabs-default-text: var(--tabs-default-text, light-dark(var(--gray-12), var(--gray-0)));
+  --_tabs-active-bg: var(--tabs-active-bg, light-dark(var(--gray-12), var(--gray-0)));
+  --_tabs-active-text: var(--tabs-active-text, light-dark(var(--gray-0), var(--gray-12)));
+  --_tabs-active-indicator: var(--tabs-active-indicator, light-dark(var(--gray-12), var(--gray-0)));
+  --_tabs-hovered-bg: var(--tabs-hovered-bg, light-dark(var(--gray-7), var(--gray-3)));
+  --_tabs-hovered-text: var(--tabs-hovered-text, light-dark(var(--gray-0), var(--gray-12)));
+  --_tabs-border-bottom: var(--tabs-border-bottom, 0.1rem solid var(--gray-6));
+  --_tabs-content-border: var(--tabs-content-border, 0.1rem solid var(--gray-6));
+  --_tabs-content-outline: var(--tabs-content-outline, 0.1rem solid var(--gray-6));
+  --_tabs-content-bg: var(--tabs-content-bg, light-dark(var(--gray-12), var(--gray-0)));
+  --_tabs-content-start-start-radius: var(--tabs-content-start-start-radius, 0);
+  --_tabs-content-start-end-radius: var(--tabs-content-start-end-radius, 0);
+  --_tabs-content-end-start-radius: var(--tabs-content-end-start-radius, 0);
+  --_tabs-content-end-end-radius: var(--tabs-content-end-end-radius, 0);
+
+  .tabs-list {
+    position: relative;
+    display: flex;
+    width: fit-content;
+    z-index: 1;
+
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+
+    .nav__hovered {
+      content: '';
+      position: absolute;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      top: 0;
+      scale: var(--_width-hovered, 0.125) 1;
+      translate: var(--_x-hovered, 0) 0;
+      transform-origin: left;
+      transition: scale var(--_transition-duration), translate var(--_transition-duration);
+      z-index: 1;
+    }
+
+    .nav__active {
+      content: '';
+      position: absolute;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      top: 0;
+      scale: var(--_width-active, 0.125) 1;
+      translate: var(--_x-active, 0) 0;
+      transform-origin: left;
+      transition: scale var(--_transition-duration), translate var(--_transition-duration);
+      z-index: 2;
+    }
+
+    .nav__active-indicator {
+      content: '';
+      position: absolute;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      scale: var(--_width-active, 0.125) 1;
+      translate: var(--_x-active, 0) 0;
+      transform-origin: left;
+      transition: scale var(--_transition-duration), translate var(--_transition-duration);
+      z-index: 3;
+    }
+
+    .tabs-list-item {
+      opacity: 0.7;
+      position: relative;
+      transition: color 100ms;
+      z-index: 4;
+
+      &:hover {
+        opacity: 1;
+      }
+
+      &[aria-selected='true'] {
+        opacity: 1;
+      }
+    }
+
+    border-bottom: var(--_tabs-border-bottom);
+
+    .nav__hovered {
+      background: var(--_tabs-hovered-bg);
+      color: var(--_tabs-hovered-text);
+    }
+
+    .nav__active {
+      background: var(--_tabs-active-bg);
+      color: var(--_tabs-active-text);
+    }
+
+    .nav__active-indicator {
+      background: var(--_tabs-active-indicator);
+      height: 0.4rem;
+    }
+
+    .tabs-list-item {
+      background: transparent;
+      border: 0;
+      color: var(--_tabs-default-text);
+      cursor: pointer;
+      font: inherit;
+      text-transform: uppercase;
+      font-weight: 500;
+      margin: 0;
+      padding: 1em 2em;
+
+      &:hover {
+        /* background: var(--_tabs-hovered-bg); */
+        color: var(--_tabs-hovered-text);
+      }
+
+      &[aria-selected='true'] {
+        color: var(--_tabs-active-text);
+      }
+
+      &.transitioning {
+        color: var(--_tabs-hovered-text);
+      }
+    }
+  }
+
+  .tab-content-wrapper {
+    display: grid;
+    grid-template-areas: 'element-stack';
+
+    .tab-content {
+      grid-area: element-stack;
+      display: none;
+    }
+  }
+
+  /*
+  * User configurable variables
+  */
+
+  .tab-content-wrapper {
+    background: var(--_tabs-content-bg);
+    border: var(--_tabs-content-border);
+    border-start-start-radius: var(--_tabs-content-start-start-radius);
+    border-start-end-radius: var(--_tabs-content-start-end-radius);
+    border-end-start-radius: var(--_tabs-content-end-start-radius);
+    border-end-end-radius: var(--_tabs-content-end-end-radius);
+
+    outline: var(--_tabs-content-outline);
+
+    /* .tab-content {
+    } */
+  }
+}
+
+/*
+* Deal with axis-y
+**/
+
+.tabs-core {
+  &.axis-y {
+    display: flex;
+    flex-direction: row;
+    gap: 2em;
+
+    .tabs-list {
+      flex-direction: column;
+
+      border-bottom: initial;
+      border-left: var(--_tabs-border-bottom);
+      position: relative;
+
+      .tabs-list-item {
+        text-align: left;
+        width: 100%;
+
+        /* &:hover {
+          color: var(--_tabs-hovered-text);
+        }
+
+        &[aria-selected='true'] {
+          color: var(--_tabs-active-text);
+        }
+
+        &.transitioning {
+          color: var(--_tabs-hovered-text);
+        } */
+      }
+
+      .nav__hovered {
+        left: 0;
+        right: initial;
+        bottom: initial;
+        top: 0;
+        height: var(--_y-height);
+        translate: 0 var(--_y-hovered, 0);
+        transform-origin: top;
+        width: var(--_y-width);
+      }
+
+      .nav__active {
+        left: 0;
+        right: initial;
+        bottom: initial;
+        top: 0;
+        height: var(--_y-height);
+        translate: 0 var(--_y-active, 0);
+        transform-origin: top;
+        width: var(--_y-width);
+      }
+
+      .nav__active-indicator {
+        left: 0;
+        right: initial;
+        bottom: initial;
+        top: 0;
+        height: var(--_y-height);
+        scale: var(--_width-active, 0.125) 1;
+        translate: 0 var(--_y-active, 0);
+        transform-origin: top;
+        width: 0.4em;
+      }
+    }
+    .tab-content-wrapper {
+      flex-grow: 1;
+    }
+  }
+}
+</style>

package/components/responsive-header/NavigationItems.vue

@@ -0,0 +1,164 @@
+<template>
+  <div class="overflow-navigation-wrapper" :class="elementClasses">
+    <ul
+      v-for="(navGroup, groupKey) in mainNavigationState.clonedNavLinks"
+      :key="groupKey"
+      class="overflow-navigation-list"
+      :class="[{visible: !mainNavigationState.navListVisibility[groupKey]}]"
+      :style="{ '--_overflow-navigation-list-min-width': widestNavLinkWidthInMainNavigationState + 'px' }"
+    >
+      <template v-for="(link, localIndex) in navGroup" :key="localIndex">
+        <li
+          v-if="link.path"
+          class="overflow-navigation-item"
+          :class="{ 'visible': !mainNavigationState.clonedNavLinks?.[groupKey]?.[localIndex]?.config?.visible }"
+          :style="{ '--_main-navigation-item-width': mainNavigationState.clonedNavLinks?.[groupKey]?.[localIndex]?.config?.width + 'px' }"
+          :data-group-key="groupKey"
+          :data-local-index="localIndex"
+        >
+          <NuxtLink class="overflow-navigation-link" :to="link.path"><span class="overflow-navigation-text">{{ link.name }}</span></NuxtLink>
+        </li>
+        <li
+          v-else
+          class="overflow-navigation-item"
+          :class="{ 'visible': !mainNavigationState.clonedNavLinks?.[groupKey]?.[localIndex]?.config?.visible }"
+          :style="{ '--_main-navigation-item-width': mainNavigationState.clonedNavLinks?.[groupKey]?.[localIndex]?.config?.width + 'px' }"
+          :data-group-key="groupKey"
+          :data-local-index="localIndex"
+        >
+          <DisplayDetailsCore :id="useId()" name="overflow-navigation-group" :animation-duration="detailsAanimationDuration" icon-size="medium" :style-class-passthrough="['overflow-navigation-details']">
+            <template #summary>
+              <span class="overflow-navigation-text">{{ link.childLinksTitle }}</span>
+            </template>
+            <template #summaryIcon>
+              <Icon name="mdi:chevron-down" class="icon" />
+            </template>
+            <template #content>
+              <div class="overflow-navigation-sub-nav-inner">
+                <ul class="overflow-navigation-sub-nav-list">
+                  <li v-for="childLink in link.childLinks" :key="childLink.name" class="overflow-navigation-sub-nav-item">
+                    <NuxtLink :to="childLink.path" class="overflow-navigation-sub-nav-link"><span class="overflow-navigation-sub-nav-text">{{ childLink.name }}</span></NuxtLink>
+                  </li>
+                </ul>
+              </div>
+            </template>
+          </DisplayDetailsCore>
+        </li>
+      </template>
+    </ul>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { ResponsiveHeaderState } from '@/types/responsiveHeader';
+
+const props = defineProps({
+  mainNavigationState: {
+    type: Object as PropType<ResponsiveHeaderState>,
+    default: () => [],
+  },
+  styleClassPassthrough: {
+    type: Array as PropType<string[]>,
+    default: () => [],
+  },
+});
+
+const detailsAanimationDuration = 200;
+const detailsAanimationDurationString = `${detailsAanimationDuration}ms`;
+
+const widestNavLinkWidthInMainNavigationState = computed(() => {
+  return Object.values(props.mainNavigationState.clonedNavLinks || {}).reduce((maxWidth, group) => {
+    return Math.max(
+      maxWidth,
+      ...group.map(link => link.config?.width || 0)
+    );
+  }, 0);
+});
+
+const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+
+watch(
+  () => props.styleClassPassthrough,
+  () => {
+    resetElementClasses(props.styleClassPassthrough);
+  }
+);
+</script>
+
+<style lang="css">
+
+.overflow-navigation-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+
+  .overflow-navigation-list {
+
+    display: none;
+
+    &.visible {
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+      min-width: var(--_overflow-navigation-list-min-width, auto);
+    }
+
+    .overflow-navigation-item {
+
+      display: none;
+
+      &.visible {
+        display: block;
+      }
+
+      .overflow-navigation-link {
+        text-decoration: none;
+        color: inherit;
+      }
+
+      .overflow-navigation-details {
+        --_overflow-navigation-sub-nav-list-margin-block-start: 0;
+
+        &[open] {
+          --_overflow-navigation-sub-nav-list-margin-block-start: 12px;
+        }
+
+        &.display-details {
+          margin-block-end: 0;
+
+          .display-details-summary {
+            .label {
+              .overflow-navigation-text {
+                text-wrap: nowrap;
+              }
+            }
+            /* .icon {} */
+          }
+          .display-details-content {
+            .overflow-navigation-sub-nav-inner {
+              .overflow-navigation-sub-nav-list {
+
+                display: flex;
+                flex-direction: column;
+                gap: 12px;
+                margin-block-start: var(--_overflow-navigation-sub-nav-list-margin-block-start);
+                transition: margin-block-start v-bind(detailsAanimationDurationString) ease;
+
+                .overflow-navigation-sub-nav-item {
+
+                  .overflow-navigation-sub-nav-link {
+                    text-decoration: none;
+                    color: inherit;
+
+                    /* .overflow-navigation-sub-nav-text {} */
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>