srcdev-nuxt-components 0.0.17 → 0.0.18

package/assets/styles/utils/_padding-helpers.css

@@ -0,0 +1,308 @@
+/* Padding */
+.p-0 {
+  padding: 0;
+}
+.pbs-0 {
+  padding-block-start: 0;
+}
+.pbe-0 {
+  padding-block-end: 0;
+}
+.pis-0 {
+  padding-inline-start: 0;
+}
+.pie-0 {
+  padding-inline-end: 0;
+}
+.pi-0 {
+  padding-inline: 0;
+}
+.pb-0 {
+  padding-block: 0;
+}
+
+.p-1 {
+  padding: 1px;
+}
+.pbs-1 {
+  padding-block-start: 1px;
+}
+.pbe-1 {
+  padding-block-end: 1px;
+}
+.pis-1 {
+  padding-inline-start: 1px;
+}
+.pie-1 {
+  padding-inline-end: 1px;
+}
+.pi-1 {
+  padding-inline: 1px;
+}
+.pb-1 {
+  padding-block: 1px;
+}
+
+.p-2 {
+  padding: 2px;
+}
+.pbs-2 {
+  padding-block-start: 2px;
+}
+.pbe-2 {
+  padding-block-end: 2px;
+}
+.pis-2 {
+  padding-inline-start: 2px;
+}
+.pie-2 {
+  padding-inline-end: 2px;
+}
+.pi-2 {
+  padding-inline: 2px;
+}
+.pb-2 {
+  padding-block: 2px;
+}
+
+.p-4 {
+  padding: 4px;
+}
+.pbs-4 {
+  padding-block-start: 4px;
+}
+.pbe-4 {
+  padding-block-end: 4px;
+}
+.pis-4 {
+  padding-inline-start: 4px;
+}
+.pie-4 {
+  padding-inline-end: 4px;
+}
+.pi-4 {
+  padding-inline: 4px;
+}
+.pb-4 {
+  padding-block: 4px;
+}
+
+.p-6 {
+  padding: 6px;
+}
+.pbs-6 {
+  padding-block-start: 6px;
+}
+.pbe-6 {
+  padding-block-end: 6px;
+}
+.pis-6 {
+  padding-inline-start: 6px;
+}
+.pie-6 {
+  padding-inline-end: 6px;
+}
+.pi-6 {
+  padding-inline: 6px;
+}
+.pb-6 {
+  padding-block: 6px;
+}
+
+.p-8 {
+  padding: 8px;
+}
+.pbs-8 {
+  padding-block-start: 8px;
+}
+.pbe-8 {
+  padding-block-end: 8px;
+}
+.pis-8 {
+  padding-inline-start: 8px;
+}
+.pie-8 {
+  padding-inline-end: 8px;
+}
+.pi-8 {
+  padding-inline: 8px;
+}
+.pb-8 {
+  padding-block: 8px;
+}
+
+.p-10 {
+  padding: 10px;
+}
+.pbs-10 {
+  padding-block-start: 10px;
+}
+.pbe-10 {
+  padding-block-end: 10px;
+}
+.pis-10 {
+  padding-inline-start: 10px;
+}
+.pie-10 {
+  padding-inline-end: 10px;
+}
+.pi-10 {
+  padding-inline: 10px;
+}
+.pb-10 {
+  padding-block: 10px;
+}
+
+.p-12 {
+  padding: 12px;
+}
+.pbs-12 {
+  padding-block-start: 12px;
+}
+.pbe-12 {
+  padding-block-end: 12px;
+}
+.pis-12 {
+  padding-inline-start: 12px;
+}
+.pie-12 {
+  padding-inline-end: 12px;
+}
+.pi-12 {
+  padding-inline: 12px;
+}
+.pb-12 {
+  padding-block: 12px;
+}
+
+.p-18 {
+  padding: 18px;
+}
+.pbs-18 {
+  padding-block-start: 18px;
+}
+.pbe-18 {
+  padding-block-end: 18px;
+}
+.pis-18 {
+  padding-inline-start: 18px;
+}
+.pie-18 {
+  padding-inline-end: 18px;
+}
+.pi-18 {
+  padding-inline: 18px;
+}
+.pb-18 {
+  padding-block: 18px;
+}
+
+.p-20 {
+  padding: 20px;
+}
+.pbs-20 {
+  padding-block-start: 20px;
+}
+.pbe-20 {
+  padding-block-end: 20px;
+}
+.pis-20 {
+  padding-inline-start: 20px;
+}
+.pie-20 {
+  padding-inline-end: 20px;
+}
+.pi-20 {
+  padding-inline: 20px;
+}
+.pb-20 {
+  padding-block: 20px;
+}
+
+.p-24 {
+  padding: 24px;
+}
+.pbs-24 {
+  padding-block-start: 24px;
+}
+.pbe-24 {
+  padding-block-end: 24px;
+}
+.pis-24 {
+  padding-inline-start: 24px;
+}
+.pie-24 {
+  padding-inline-end: 24px;
+}
+.pi-24 {
+  padding-inline: 24px;
+}
+.pb-24 {
+  padding-block: 24px;
+}
+
+.p-32 {
+  padding: 32px;
+}
+.pbs-32 {
+  padding-block-start: 32px;
+}
+.pbe-32 {
+  padding-block-end: 32px;
+}
+.pis-32 {
+  padding-inline-start: 32px;
+}
+.pie-32 {
+  padding-inline-end: 32px;
+}
+.pi-32 {
+  padding-inline: 32px;
+}
+.pb-32 {
+  padding-block: 32px;
+}
+
+.p-40 {
+  padding: 40px;
+}
+.pbs-40 {
+  padding-block-start: 40px;
+}
+.pbe-40 {
+  padding-block-end: 40px;
+}
+.pis-40 {
+  padding-inline-start: 40px;
+}
+.pie-40 {
+  padding-inline-end: 40px;
+}
+.pi-40 {
+  padding-inline: 40px;
+}
+.pb-40 {
+  padding-block: 40px;
+}
+
+.p-60 {
+  padding: 60px;
+}
+.pbs-60 {
+  padding-block-start: 60px;
+}
+.pbe-60 {
+  padding-block-end: 60px;
+}
+.pis-60 {
+  padding-inline-start: 60px;
+}
+.pie-60 {
+  padding-inline-end: 60px;
+}
+.pi-60 {
+  padding-inline: 60px;
+}
+.pb-60 {
+  padding-block: 60px;
+}

package/assets/styles/utils/_page.css

@@ -0,0 +1,23 @@
+:root {
+  color-scheme: light dark;
+}
+
+html {
+  /* background-color: var(--body-background-color); */
+  background-color: var(--page-bg);
+
+  font-size: 62.5%;
+}
+body,
+p,
+pre,
+code,
+div,
+fieldset,
+legend,
+li,
+a {
+  color: var(--grayscale-text-body);
+  font-family: var(--font-family);
+  font-size: var(--step-1);
+}

package/assets/styles/utils/index.css

@@ -0,0 +1,3 @@
+@import './_page.css';
+@import './_margin-helpers.css';
+@import './_padding-helpers.css';

package/assets/styles/variables/colors/_blue.css

@@ -0,0 +1,15 @@
+:root {
+  --blue-0: #e7f5ff;
+  --blue-1: #d0ebff;
+  --blue-2: #a5d8ff;
+  --blue-3: #74c0fc;
+  --blue-4: #4dabf7;
+  --blue-5: #339af0;
+  --blue-6: #228be6;
+  --blue-7: #1c7ed6;
+  --blue-8: #1971c2;
+  --blue-9: #1864ab;
+  --blue-10: #145591;
+  --blue-11: #114678;
+  --blue-12: #0e01cd;
+}

package/assets/styles/variables/colors/_gray.css

@@ -0,0 +1,16 @@
+:root {
+  --gray-00: #ffffff;
+  --gray-0: #f8f9fa;
+  --gray-1: #f1f3f5;
+  --gray-2: #e9ecef;
+  --gray-3: #dee2e6;
+  --gray-4: #ced4da;
+  --gray-5: #adb5bd;
+  --gray-6: #868e96;
+  --gray-7: #495057;
+  --gray-8: #343a40;
+  --gray-9: #212529;
+  --gray-10: #16191d;
+  --gray-11: #0d0f12;
+  --gray-12: #030507;
+}

package/assets/styles/variables/colors/_green.css

@@ -0,0 +1,15 @@
+:root {
+  --green-0: #ebfbee;
+  --green-1: #d3f9d8;
+  --green-2: #b2f2bb;
+  --green-3: #8ce99a;
+  --green-4: #69db7c;
+  --green-5: #51cf66;
+  --green-6: #40c057;
+  --green-7: #37b24d;
+  --green-8: #2f9e44;
+  --green-9: #2b8a3e;
+  --green-10: #237032;
+  --green-11: #1b5727;
+  --green-12: #017f18;
+}

package/assets/styles/variables/colors/_orange.css

@@ -0,0 +1,15 @@
+:root {
+  --orange-0: #fff4e6;
+  --orange-1: #ffe8cc;
+  --orange-2: #ffd8a8;
+  --orange-3: #ffc078;
+  --orange-4: #ffa94d;
+  --orange-5: #ff922b;
+  --orange-6: #ff7400;
+  --orange-7: #f76707;
+  --orange-8: #e8590c;
+  --orange-9: #d9480f;
+  --orange-10: #bf400d;
+  --orange-11: #99330b;
+  --orange-12: #c23903;
+}

package/assets/styles/variables/colors/_red.css

@@ -0,0 +1,15 @@
+:root {
+  --red-0: #fff5f5;
+  --red-1: #ffe3e3;
+  --red-2: #ffc9c9;
+  --red-3: #ffa8a8;
+  --red-4: #ff8787;
+  --red-5: #ff6b6b;
+  --red-6: #fa5252;
+  --red-7: #f03e3e;
+  --red-8: #e03131;
+  --red-9: #ff0b0b;
+  --red-10: #b02525;
+  --red-11: #962020;
+  --red-12: #cc0000;
+}

package/assets/styles/variables/colors/_yellow.css

@@ -0,0 +1,15 @@
+:root {
+  --yellow-0: #fff9db;
+  --yellow-1: #fff3bf;
+  --yellow-2: #ffec99;
+  --yellow-3: #ffe066;
+  --yellow-4: #ffd43b;
+  --yellow-5: #fcc419;
+  --yellow-6: #fab005;
+  --yellow-7: #f59f00;
+  --yellow-8: #f08c00;
+  --yellow-9: #e67700;
+  --yellow-10: #b35c00;
+  --yellow-11: #804200;
+  --yellow-12: #663500;
+}

package/assets/styles/variables/colors/colors.css

@@ -0,0 +1,6 @@
+@import './_red.css';
+@import './_green.css';
+@import './_blue.css';
+@import './_orange.css';
+@import './_gray.css';
+@import './_yellow.css';

package/assets/styles/variables/index.css

@@ -0,0 +1 @@
+@import './colors/colors.css';

package/components/presentation/tabs/Tabs.vue

@@ -0,0 +1,99 @@
+<template>
+  <div role="tablist" aria-labelledby="channel-name" ref="navContainerRef" @mouseleave="resetHoverToActivePosition()">
+    <button @click.prevent="navItemClicked($event)" @mouseover="navItemHovered($event)" data-tab-index="1" data-nav-item role="tab" aria-selected="true">Home</button>
+    <button @click.prevent="navItemClicked($event)" @mouseover="navItemHovered($event)" data-tab-index="2" data-nav-item role="tab" aria-selected="false">Functional Components</button>
+    <button @click.prevent="navItemClicked($event)" @mouseover="navItemHovered($event)" data-tab-index="3" data-nav-item role="tab" aria-selected="false">Static UI Components</button>
+    <button @click.prevent="navItemClicked($event)" @mouseover="navItemHovered($event)" data-tab-index="4" data-nav-item role="tab" aria-selected="false">Example Form</button>
+    <button @click.prevent="navItemClicked($event)" @mouseover="navItemHovered($event)" data-tab-index="5" data-nav-item role="tab" aria-selected="false">Buttons</button>
+    <button @click.prevent="navItemClicked($event)" @mouseover="navItemHovered($event)" data-tab-index="6" data-nav-item role="tab" aria-selected="false">Typography</button>
+  </div>
+</template>
+
+<script setup lang="ts">
+const navContainerRef = ref<HTMLElement | null>(null);
+
+const { initNavDecorators, navItemClicked, navItemHovered, resetHoverToActivePosition } = useNavDecoration(navContainerRef);
+
+onMounted(() => {
+  initNavDecorators();
+});
+</script>
+
+<style lang="css">
+[role='tablist'] {
+  position: relative;
+  display: flex;
+  width: fit-content;
+  border-bottom: 1px solid hsl(0 0% 30%);
+  margin-block: 3rem;
+  z-index: 1;
+}
+
+[role='tablist'] .nav__hovered {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  scale: var(--_width-hovered, 0.125) 1;
+  translate: var(--_left-hovered, 0) 0;
+  transform-origin: left;
+  transition: scale var(--_transition-duration), translate var(--_transition-duration);
+  background: green;
+  z-index: 1;
+}
+
+[role='tablist'] .nav__active {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  scale: var(--_width-active, 0.125) 1;
+  translate: var(--_left-active, 0) 0;
+  transform-origin: left;
+  transition: scale var(--_transition-duration), translate var(--_transition-duration);
+  background: lightseagreen;
+  z-index: 2;
+}
+
+[role='tablist'] .nav__active-indicator {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 4px;
+  scale: var(--_width-active, 0.125) 1;
+  translate: var(--_left-active, 0) 0;
+  transform-origin: left;
+  transition: scale var(--_transition-duration), translate var(--_transition-duration);
+  background: white;
+  z-index: 3;
+}
+
+[role='tab'] {
+  color: #fff;
+  background: lightblue;
+  background: transparent;
+  padding: 1em 2em;
+  border: 0;
+  font: inherit;
+  text-transform: uppercase;
+  font-weight: 500;
+  opacity: 0.7;
+  cursor: pointer;
+  position: relative;
+  z-index: 4;
+}
+
+[role='tab']:hover {
+  opacity: 1;
+}
+
+[role='tab'][aria-selected='true'] {
+  opacity: 1;
+}
+</style>

package/composables/useNavDecoration.ts

@@ -0,0 +1,132 @@
+import { useResizeObserver } from '@vueuse/core';
+
+const useNavDecoration = (navContainerRef: Ref<HTMLElement | null>, duration: number = 200) => {
+  const navItems = ref<HTMLElement[] | null>(null);
+  const previousActiveTab = ref<HTMLElement>();
+  const currentActiveTab = ref<HTMLElement>();
+
+  const previousHoveredTab = ref<HTMLElement>();
+  const currentHoveredTab = ref<HTMLElement>();
+
+  const initNavDecorators = () => {
+    navItems.value = navContainerRef.value ? (Array.from(navContainerRef.value.querySelectorAll('[data-nav-item')) as HTMLElement[]) : [];
+    previousActiveTab.value = navItems.value[0];
+    currentActiveTab.value = navItems.value[0];
+    previousHoveredTab.value = navItems.value[0];
+    currentHoveredTab.value = navItems.value[0];
+
+    addNavDecorators();
+  };
+
+  const addNavDecorators = () => {
+    const elementClasses = ['nav__active-indicator', 'nav__active', 'nav__hovered'];
+    if (navContainerRef.value) {
+      for (let i = 0; i < 3; i++) {
+        const div = document.createElement('div');
+        div.classList.add(elementClasses[i]);
+        navContainerRef.value.appendChild(div);
+      }
+    }
+  };
+
+  const navItemHovered = (event: Event) => {
+    const target = event.target as HTMLElement;
+    const newTabPosition = currentHoveredTab.value ? currentHoveredTab.value.compareDocumentPosition(target) : 0;
+
+    if (newTabPosition !== 0) {
+      previousHoveredTab.value = currentHoveredTab.value;
+      currentHoveredTab.value = target;
+      moveHoveredIndicator();
+    }
+  };
+
+  const resetHoverToActivePosition = () => {
+    previousHoveredTab.value = currentHoveredTab.value;
+    currentHoveredTab.value = currentActiveTab.value;
+    moveHoveredIndicator();
+  };
+
+  const navItemClicked = (event: Event) => {
+    const target = event.target as HTMLElement;
+
+    previousActiveTab.value = currentActiveTab.value;
+    currentActiveTab.value = target;
+
+    navItems.value?.forEach((tab) => {
+      tab.setAttribute('aria-selected', currentActiveTab.value === tab ? 'true' : 'false');
+    });
+
+    moveActiveIndicator();
+  };
+
+  const setFinalHoveredPositions = (resized: boolean = false) => {
+    const setDuration = resized ? 0 : duration;
+    const newTabWidth = currentHoveredTab.value && navContainerRef.value ? currentHoveredTab.value.offsetWidth / navContainerRef.value.offsetWidth : 0;
+    navContainerRef.value?.style.setProperty('--_transition-duration', setDuration + 'ms');
+    navContainerRef.value?.style.setProperty('--_left-hovered', currentHoveredTab.value?.offsetLeft + 'px');
+    navContainerRef.value?.style.setProperty('--_width-hovered', newTabWidth?.toString());
+  };
+
+  const setFinalActivePositions = (resized: boolean = false) => {
+    const setDuration = resized ? 0 : duration;
+    const newTabWidth = currentActiveTab.value && navContainerRef.value ? currentActiveTab.value.offsetWidth / navContainerRef.value.offsetWidth : 0;
+    navContainerRef.value?.style.setProperty('--_transition-duration', setDuration + 'ms');
+    navContainerRef.value?.style.setProperty('--_left-active', currentActiveTab.value?.offsetLeft + 'px');
+    navContainerRef.value?.style.setProperty('--_width-active', newTabWidth?.toString());
+  };
+
+  const moveActiveIndicator = () => {
+    navContainerRef.value?.style.setProperty('--_transition-duration', duration + 'ms');
+
+    const newTabPosition = previousActiveTab.value && currentActiveTab.value ? previousActiveTab.value.compareDocumentPosition(currentActiveTab.value) : 0;
+    let transitionWidth;
+
+    if (newTabPosition === 4) {
+      transitionWidth = currentActiveTab.value && previousActiveTab.value ? currentActiveTab.value.offsetLeft + currentActiveTab.value.offsetWidth - previousActiveTab.value.offsetLeft : 0;
+    } else {
+      transitionWidth = previousActiveTab.value && currentActiveTab.value ? previousActiveTab.value.offsetLeft + previousActiveTab.value.offsetWidth - currentActiveTab.value.offsetLeft : 0;
+      navContainerRef.value?.style.setProperty('--_left-active', currentActiveTab.value ? currentActiveTab.value.offsetLeft + 'px' : '0');
+    }
+
+    navContainerRef.value?.style.setProperty('--_width-active', String(transitionWidth / navContainerRef.value.offsetWidth));
+
+    setTimeout(() => {
+      setFinalActivePositions();
+    }, Math.floor(duration + 20));
+  };
+
+  const moveHoveredIndicator = () => {
+    navContainerRef.value?.style.setProperty('--_transition-duration', duration + 'ms');
+
+    const newTabPosition = previousHoveredTab.value && currentHoveredTab.value ? previousHoveredTab.value.compareDocumentPosition(currentHoveredTab.value) : 0;
+    let transitionWidth;
+
+    if (newTabPosition === 4) {
+      transitionWidth = currentHoveredTab.value && previousHoveredTab.value ? currentHoveredTab.value.offsetLeft + currentHoveredTab.value.offsetWidth - previousHoveredTab.value.offsetLeft : 0;
+    } else {
+      transitionWidth = previousHoveredTab.value && currentHoveredTab.value ? previousHoveredTab.value.offsetLeft + previousHoveredTab.value.offsetWidth - currentHoveredTab.value.offsetLeft : 0;
+      navContainerRef.value?.style.setProperty('--_left-hovered', currentHoveredTab.value ? currentHoveredTab.value.offsetLeft + 'px' : '0');
+    }
+
+    navContainerRef.value?.style.setProperty('--_width-hovered', String(transitionWidth / navContainerRef.value.offsetWidth));
+
+    setTimeout(() => {
+      setFinalHoveredPositions();
+    }, Math.floor(duration + 20));
+  };
+
+  useResizeObserver(navContainerRef, () => {
+    setFinalActivePositions(true);
+    setFinalHoveredPositions(true);
+  });
+
+  return {
+    initNavDecorators,
+    navContainerRef,
+    navItemClicked,
+    navItemHovered,
+    resetHoverToActivePosition,
+  };
+};
+
+export default useNavDecoration;

package/nuxt.config.ts

@@ -1,6 +1,7 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
   devtools: { enabled: true },
+  css: ['modern-normalize', './assets/styles/main.css'],
   app: {
     head: {
       htmlAttrs: {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "srcdev-nuxt-components",
   "type": "module",
-  "version": "0.0.17",
+  "version": "0.0.18",
   "main": "nuxt.config.ts",
   "scripts": {
     "clean": "rm -rf .nuxt && rm -rf .output && rm -rf .playground/.nuxt && rm -rf .playground/.output",
@@ -25,6 +25,7 @@
   "devDependencies": {
     "@nuxt/eslint-config": "0.7.1",
     "@oddbird/css-anchor-positioning": "0.4.0",
+    "@vueuse/core": "^12.0.0",
     "eslint": "9.15.0",
     "nuxt": "3.14.1592",
     "release-it": "17.10.0",
@@ -42,6 +43,6 @@
   },
   "dependencies": {
     "focus-trap-vue": "^4.0.3",
-    "modern-normalize": "3.0.1"
+    "modern-normalize": "^3.0.1"
   }
 }