srcdev-nuxt-components 0.0.19 → 0.0.21

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/components/presentation/tabs/Tabs.vue +145 -73
  2. package/composables/useNavDecoration.ts +24 -6
  3. package/nuxt.config.ts +8 -0
  4. package/package.json +1 -1
package/components/presentation/tabs/Tabs.vue CHANGED
@@ -1,15 +1,49 @@
1
1
  <template>
2
- <div role="tablist" aria-labelledby="channel-name" ref="navContainerRef" @mouseleave="resetHoverToActivePosition()">
3
- <button @click.prevent="navItemClicked($event)" @mouseover="navItemHovered($event)" data-tab-index="1" data-nav-item role="tab" aria-selected="true">Home</button>
4
- <button @click.prevent="navItemClicked($event)" @mouseover="navItemHovered($event)" data-tab-index="2" data-nav-item role="tab" aria-selected="false">Functional Components</button>
5
- <button @click.prevent="navItemClicked($event)" @mouseover="navItemHovered($event)" data-tab-index="3" data-nav-item role="tab" aria-selected="false">Static UI Components</button>
6
- <button @click.prevent="navItemClicked($event)" @mouseover="navItemHovered($event)" data-tab-index="4" data-nav-item role="tab" aria-selected="false">Example Form</button>
7
- <button @click.prevent="navItemClicked($event)" @mouseover="navItemHovered($event)" data-tab-index="5" data-nav-item role="tab" aria-selected="false">Buttons</button>
8
- <button @click.prevent="navItemClicked($event)" @mouseover="navItemHovered($event)" data-tab-index="6" data-nav-item role="tab" aria-selected="false">Typography</button>
9
- </div>
2
+ <ul role="tablist" aria-labelledby="channel-name" ref="navContainerRef" @mouseleave="resetHoverToActivePosition()" class="tabs-list" :class="[elementClasses]">
3
+ <li v-for="(item, index) in navItems" class="masonry-grid-ordered-item" ref="gridItemsRefs">
4
+ <button @click.prevent="navItemClicked($event)" @mouseover="navItemHovered($event)" :data-tab-index="index" data-nav-item role="tab" aria-selected="false" class="tabs-list-item">
5
+ {{ item.name }}
6
+ </button>
7
+ </li>
8
+ </ul>
10
9
  </template>
11
10
 
12
11
  <script setup lang="ts">
12
+ interface INavLink {
13
+ action?: string;
14
+ name: string;
15
+ path?: string;
16
+ }
17
+
18
+ const props = defineProps({
19
+ tag: {
20
+ type: String as PropType<string>,
21
+ default: 'button',
22
+ },
23
+ navItems: {
24
+ type: Array as PropType<INavLink[]>,
25
+ required: true,
26
+ },
27
+ trackHover: {
28
+ type: Boolean as PropType<boolean>,
29
+ default: true,
30
+ },
31
+ trackActive: {
32
+ type: Boolean as PropType<boolean>,
33
+ default: true,
34
+ },
35
+ trackIndicator: {
36
+ type: Boolean as PropType<boolean>,
37
+ default: true,
38
+ },
39
+ styleClassPassthrough: {
40
+ type: Array as PropType<string[]>,
41
+ default: () => [],
42
+ },
43
+ });
44
+
45
+ const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
46
+
13
47
  const navContainerRef = ref<HTMLElement | null>(null);
14
48
 
15
49
  const { initNavDecorators, navItemClicked, navItemHovered, resetHoverToActivePosition } = useNavDecoration(navContainerRef);
@@ -20,80 +54,118 @@ onMounted(() => {
20
54
  </script>
21
55
 
22
56
  <style lang="css">
23
- [role='tablist'] {
57
+ .tabs-list {
58
+ --_default-text: light-dark(var(--gray-12), var(--gray-0));
59
+ --_active-bg: light-dark(var(--gray-12), var(--gray-0));
60
+ --_active-text: light-dark(var(--gray-0), var(--gray-12));
61
+ --_active-indicator: light-dark(var(--gray-12), var(--gray-0));
62
+ --_hovered-bg: light-dark(var(--gray-7), var(--gray-3));
63
+ --_hovered-text: light-dark(var(--gray-0), var(--gray-12));
64
+ --_border-bottom: light-dark(var(--gray-12), var(--gray-0));
65
+
24
66
  position: relative;
25
67
  display: flex;
26
68
  width: fit-content;
27
- border-bottom: 1px solid hsl(0 0% 30%);
28
- margin-block: 3rem;
29
69
  z-index: 1;
30
- }
31
70
 
32
- [role='tablist'] .nav__hovered {
33
- content: '';
34
- position: absolute;
35
- left: 0;
36
- right: 0;
37
- bottom: 0;
38
- top: 0;
39
- scale: var(--_width-hovered, 0.125) 1;
40
- translate: var(--_left-hovered, 0) 0;
41
- transform-origin: left;
42
- transition: scale var(--_transition-duration), translate var(--_transition-duration);
43
- background: green;
44
- z-index: 1;
45
- }
71
+ list-style-type: none;
72
+ margin: 0;
73
+ padding: 0;
46
74
 
47
- [role='tablist'] .nav__active {
48
- content: '';
49
- position: absolute;
50
- left: 0;
51
- right: 0;
52
- bottom: 0;
53
- top: 0;
54
- scale: var(--_width-active, 0.125) 1;
55
- translate: var(--_left-active, 0) 0;
56
- transform-origin: left;
57
- transition: scale var(--_transition-duration), translate var(--_transition-duration);
58
- background: lightseagreen;
59
- z-index: 2;
60
- }
75
+ .nav__hovered {
76
+ content: '';
77
+ position: absolute;
78
+ left: 0;
79
+ right: 0;
80
+ bottom: 0;
81
+ top: 0;
82
+ scale: var(--_width-hovered, 0.125) 1;
83
+ translate: var(--_left-hovered, 0) 0;
84
+ transform-origin: left;
85
+ transition: scale var(--_transition-duration), translate var(--_transition-duration);
86
+ z-index: 1;
87
+ }
61
88
 
62
- [role='tablist'] .nav__active-indicator {
63
- content: '';
64
- position: absolute;
65
- left: 0;
66
- right: 0;
67
- bottom: 0;
68
- height: 4px;
69
- scale: var(--_width-active, 0.125) 1;
70
- translate: var(--_left-active, 0) 0;
71
- transform-origin: left;
72
- transition: scale var(--_transition-duration), translate var(--_transition-duration);
73
- background: white;
74
- z-index: 3;
75
- }
89
+ .nav__active {
90
+ content: '';
91
+ position: absolute;
92
+ left: 0;
93
+ right: 0;
94
+ bottom: 0;
95
+ top: 0;
96
+ scale: var(--_width-active, 0.125) 1;
97
+ translate: var(--_left-active, 0) 0;
98
+ transform-origin: left;
99
+ transition: scale var(--_transition-duration), translate var(--_transition-duration);
100
+ z-index: 2;
101
+ }
76
102
 
77
- [role='tab'] {
78
- color: #fff;
79
- background: lightblue;
80
- background: transparent;
81
- padding: 1em 2em;
82
- border: 0;
83
- font: inherit;
84
- text-transform: uppercase;
85
- font-weight: 500;
86
- opacity: 0.7;
87
- cursor: pointer;
88
- position: relative;
89
- z-index: 4;
90
- }
103
+ .nav__active-indicator {
104
+ content: '';
105
+ position: absolute;
106
+ left: 0;
107
+ right: 0;
108
+ bottom: 0;
109
+ scale: var(--_width-active, 0.125) 1;
110
+ translate: var(--_left-active, 0) 0;
111
+ transform-origin: left;
112
+ transition: scale var(--_transition-duration), translate var(--_transition-duration);
113
+ z-index: 3;
114
+ }
91
115
 
92
- [role='tab']:hover {
93
- opacity: 1;
94
- }
116
+ .tabs-list-item {
117
+ opacity: 0.7;
118
+ position: relative;
119
+ transition: color 0.2s;
120
+ z-index: 4;
121
+
122
+ &:hover {
123
+ opacity: 1;
124
+ }
125
+
126
+ &[aria-selected='true'] {
127
+ opacity: 1;
128
+ }
129
+ }
130
+ /*
131
+ * User configurable variables
132
+ */
133
+ border-bottom: 1px solid var(--_border-bottom);
134
+ margin-block: 3rem;
135
+
136
+ .nav__hovered {
137
+ background: var(--_hovered-bg);
138
+ color: var(--_hovered-text);
139
+ }
140
+
141
+ .nav__active {
142
+ background: var(--_active-bg);
143
+ color: var(--_active-text);
144
+ }
145
+
146
+ .nav__active-indicator {
147
+ background: var(--_active-indicator);
148
+ height: 4px;
149
+ }
150
+
151
+ .tabs-list-item {
152
+ background: transparent;
153
+ border: 0;
154
+ color: var(--_default-text);
155
+ cursor: pointer;
156
+ font: inherit;
157
+ text-transform: uppercase;
158
+ font-weight: 500;
159
+ margin: 0;
160
+ padding: 1em 2em;
161
+
162
+ &:hover {
163
+ color: var(--_hovered-text);
164
+ }
95
165
 
96
- [role='tab'][aria-selected='true'] {
97
- opacity: 1;
166
+ &[aria-selected='true'] {
167
+ color: var(--_active-text);
168
+ }
169
+ }
98
170
  }
99
171
  </style>
package/composables/useNavDecoration.ts CHANGED
@@ -2,18 +2,36 @@ import { useResizeObserver } from '@vueuse/core';
2
2
 
3
3
  const useNavDecoration = (navContainerRef: Ref<HTMLElement | null>, duration: number = 200) => {
4
4
  const navItems = ref<HTMLElement[] | null>(null);
5
- const previousActiveTab = ref<HTMLElement>();
5
+ const previousActiveTab = useState<HTMLElement | null>('previousActiveTab', () => null);
6
6
  const currentActiveTab = ref<HTMLElement>();
7
7
 
8
8
  const previousHoveredTab = ref<HTMLElement>();
9
9
  const currentHoveredTab = ref<HTMLElement>();
10
+ const tagName = ref<string>();
10
11
 
11
12
  const initNavDecorators = () => {
12
13
  navItems.value = navContainerRef.value ? (Array.from(navContainerRef.value.querySelectorAll('[data-nav-item')) as HTMLElement[]) : [];
13
- previousActiveTab.value = navItems.value[0];
14
- currentActiveTab.value = navItems.value[0];
15
- previousHoveredTab.value = navItems.value[0];
16
- currentHoveredTab.value = navItems.value[0];
14
+ tagName.value = navItems.value[0].tagName.toLowerCase();
15
+
16
+ const activeIndex = ref(0);
17
+
18
+ // Temporarily set the first nav item as active
19
+ navItems.value[0].setAttribute('aria-selected', 'true');
20
+
21
+ // Test if navItems are hyperlinks
22
+ if (navItems.value[0].tagName.toLowerCase() === 'a') {
23
+ // Find index of element with class "router-link-active"
24
+ activeIndex.value = navItems.value.findIndex((el) => el.classList.contains('router-link-active'));
25
+ }
26
+ // else {
27
+ // Set actve tab
28
+ // }
29
+
30
+ currentActiveTab.value = navItems.value[activeIndex.value];
31
+ currentHoveredTab.value = navItems.value[activeIndex.value];
32
+
33
+ previousActiveTab.value = navItems.value[activeIndex.value];
34
+ previousHoveredTab.value = navItems.value[activeIndex.value];
17
35
 
18
36
  addNavDecorators();
19
37
  };
@@ -49,7 +67,7 @@ const useNavDecoration = (navContainerRef: Ref<HTMLElement | null>, duration: nu
49
67
  const navItemClicked = (event: Event) => {
50
68
  const target = event.target as HTMLElement;
51
69
 
52
- previousActiveTab.value = currentActiveTab.value;
70
+ previousActiveTab.value = currentActiveTab.value || null;
53
71
  currentActiveTab.value = target;
54
72
 
55
73
  navItems.value?.forEach((tab) => {
package/nuxt.config.ts CHANGED
@@ -10,6 +10,14 @@ export default defineNuxtConfig({
10
10
  titleTemplate: '%s - Nuxt Components Layer',
11
11
  meta: [{ charset: 'utf-8' }, { name: 'viewport', content: 'width=device-width, initial-scale=1' }],
12
12
  },
13
+ pageTransition: {
14
+ name: 'page',
15
+ mode: 'out-in',
16
+ },
17
+ layoutTransition: {
18
+ name: 'layout',
19
+ mode: 'out-in',
20
+ },
13
21
  },
14
22
  components: [
15
23
  {
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "srcdev-nuxt-components",
3
3
  "type": "module",
4
- "version": "0.0.19",
4
+ "version": "0.0.21",
5
5
  "main": "nuxt.config.ts",
6
6
  "scripts": {
7
7
  "clean": "rm -rf .nuxt && rm -rf .output && rm -rf .playground/.nuxt && rm -rf .playground/.output",