srcdev-nuxt-components 0.0.29 → 0.0.30

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 (2) hide show
  1. package/components/presentation/tabs/TabsCore.vue +123 -101
  2. package/package.json +1 -1
package/components/presentation/tabs/TabsCore.vue CHANGED
@@ -18,9 +18,7 @@
18
18
  </ul>
19
19
  <div class="tab-content-wrapper">
20
20
  <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">
21
- <div>
22
- <slot :name="`tab-${key}-content`"></slot>
23
- </div>
21
+ <slot :name="`tab-${key}-content`"></slot>
24
22
  </div>
25
23
  </div>
26
24
  </div>
@@ -69,7 +67,7 @@ onMounted(() => {
69
67
  </script>
70
68
 
71
69
  <style lang="css">
72
- .tabs-list {
70
+ .tabs {
73
71
  /*
74
72
  * CSS var within /assets/styles/components/tabs.css
75
73
  */
@@ -79,121 +77,145 @@ onMounted(() => {
79
77
  --_tabs-active-indicator: var(--tabs-active-indicator, light-dark(var(--gray-12), var(--gray-0)));
80
78
  --_tabs-hovered-bg: var(--tabs-hovered-bg, light-dark(var(--gray-7), var(--gray-3)));
81
79
  --_tabs-hovered-text: var(--tabs-hovered-text, light-dark(var(--gray-0), var(--gray-12)));
82
- --_tabs-border-bottom: var(--tabs-border-bottom, light-dark(var(--gray-12), var(--gray-0)));
83
-
84
- position: relative;
85
- display: flex;
86
- width: fit-content;
87
- z-index: 1;
88
-
89
- list-style-type: none;
90
- margin: 0;
91
- padding: 0;
92
-
93
- .nav__hovered {
94
- content: '';
95
- position: absolute;
96
- left: 0;
97
- right: 0;
98
- bottom: 0;
99
- top: 0;
100
- scale: var(--_width-hovered, 0.125) 1;
101
- translate: var(--_left-hovered, 0) 0;
102
- transform-origin: left;
103
- transition: scale var(--_transition-duration), translate var(--_transition-duration);
80
+ --_tabs-border-bottom: var(--tabs-border-bottom, 1px solid var(--gray-6));
81
+ --_tabs-content-border: var(--tabs-content-border, 1px solid var(--gray-6));
82
+ --_tabs-content-outline: var(--tabs-content-outline, 1px solid var(--gray-6));
83
+ --_tabs-content-bg: var(--tabs-content-bg, light-dark(var(--gray-12), var(--gray-0)));
84
+ --_tabs-content-start-start-radius: var(--tabs-content-start-start-radius, 0);
85
+ --_tabs-content-start-end-radius: var(--tabs-content-start-end-radius, 0);
86
+ --_tabs-content-end-start-radius: var(--tabs-content-end-start-radius, 0);
87
+ --_tabs-content-end-end-radius: var(--tabs-content-end-end-radius, 0);
88
+
89
+ .tabs-list {
90
+ position: relative;
91
+ display: flex;
92
+ width: fit-content;
104
93
  z-index: 1;
105
- }
106
-
107
- .nav__active {
108
- content: '';
109
- position: absolute;
110
- left: 0;
111
- right: 0;
112
- bottom: 0;
113
- top: 0;
114
- scale: var(--_width-active, 0.125) 1;
115
- translate: var(--_left-active, 0) 0;
116
- transform-origin: left;
117
- transition: scale var(--_transition-duration), translate var(--_transition-duration);
118
- z-index: 2;
119
- }
120
94
 
121
- .nav__active-indicator {
122
- content: '';
123
- position: absolute;
124
- left: 0;
125
- right: 0;
126
- bottom: 0;
127
- scale: var(--_width-active, 0.125) 1;
128
- translate: var(--_left-active, 0) 0;
129
- transform-origin: left;
130
- transition: scale var(--_transition-duration), translate var(--_transition-duration);
131
- z-index: 3;
132
- }
133
-
134
- .tabs-list-item {
135
- opacity: 0.7;
136
- position: relative;
137
- transition: color 0.2s;
138
- z-index: 4;
95
+ list-style-type: none;
96
+ margin: 0;
97
+ padding: 0;
98
+
99
+ .nav__hovered {
100
+ content: '';
101
+ position: absolute;
102
+ left: 0;
103
+ right: 0;
104
+ bottom: 0;
105
+ top: 0;
106
+ scale: var(--_width-hovered, 0.125) 1;
107
+ translate: var(--_left-hovered, 0) 0;
108
+ transform-origin: left;
109
+ transition: scale var(--_transition-duration), translate var(--_transition-duration);
110
+ z-index: 1;
111
+ }
139
112
 
140
- &:hover {
141
- opacity: 1;
113
+ .nav__active {
114
+ content: '';
115
+ position: absolute;
116
+ left: 0;
117
+ right: 0;
118
+ bottom: 0;
119
+ top: 0;
120
+ scale: var(--_width-active, 0.125) 1;
121
+ translate: var(--_left-active, 0) 0;
122
+ transform-origin: left;
123
+ transition: scale var(--_transition-duration), translate var(--_transition-duration);
124
+ z-index: 2;
142
125
  }
143
126
 
144
- &[aria-selected='true'] {
145
- opacity: 1;
127
+ .nav__active-indicator {
128
+ content: '';
129
+ position: absolute;
130
+ left: 0;
131
+ right: 0;
132
+ bottom: 0;
133
+ scale: var(--_width-active, 0.125) 1;
134
+ translate: var(--_left-active, 0) 0;
135
+ transform-origin: left;
136
+ transition: scale var(--_transition-duration), translate var(--_transition-duration);
137
+ z-index: 3;
146
138
  }
147
- }
148
- /*
149
- * User configurable variables
150
- */
151
- border-bottom: 1px solid var(--_tabs-border-bottom);
152
- margin-block: 3rem;
153
-
154
- .nav__hovered {
155
- background: var(--_tabs-hovered-bg);
156
- color: var(--_tabs-hovered-text);
157
- }
158
139
 
159
- .nav__active {
160
- background: var(--_tabs-active-bg);
161
- color: var(--_tabs-active-text);
162
- }
140
+ .tabs-list-item {
141
+ opacity: 0.7;
142
+ position: relative;
143
+ transition: color 0.2s;
144
+ z-index: 4;
163
145
 
164
- .nav__active-indicator {
165
- background: var(--_tabs-active-indicator);
166
- height: 4px;
167
- }
146
+ &:hover {
147
+ opacity: 1;
148
+ }
168
149
 
169
- .tabs-list-item {
170
- background: transparent;
171
- border: 0;
172
- color: var(--_tabs-default-text);
173
- cursor: pointer;
174
- font: inherit;
175
- text-transform: uppercase;
176
- font-weight: 500;
177
- margin: 0;
178
- padding: 1em 2em;
150
+ &[aria-selected='true'] {
151
+ opacity: 1;
152
+ }
153
+ }
154
+
155
+ border-bottom: var(--_tabs-border-bottom);
179
156
 
180
- &:hover {
157
+ .nav__hovered {
158
+ background: var(--_tabs-hovered-bg);
181
159
  color: var(--_tabs-hovered-text);
182
160
  }
183
161
 
184
- &[aria-selected='true'] {
162
+ .nav__active {
163
+ background: var(--_tabs-active-bg);
185
164
  color: var(--_tabs-active-text);
186
165
  }
166
+
167
+ .nav__active-indicator {
168
+ background: var(--_tabs-active-indicator);
169
+ height: 4px;
170
+ }
171
+
172
+ .tabs-list-item {
173
+ background: transparent;
174
+ border: 0;
175
+ color: var(--_tabs-default-text);
176
+ cursor: pointer;
177
+ font: inherit;
178
+ text-transform: uppercase;
179
+ font-weight: 500;
180
+ margin: 0;
181
+ padding: 1em 2em;
182
+
183
+ &:hover {
184
+ color: var(--_tabs-hovered-text);
185
+ }
186
+
187
+ &[aria-selected='true'] {
188
+ color: var(--_tabs-active-text);
189
+ }
190
+ }
187
191
  }
188
- }
189
192
 
190
- .tab-content-wrapper {
191
- display: grid;
192
- grid-template-areas: 'element-stack';
193
+ .tab-content-wrapper {
194
+ display: grid;
195
+ grid-template-areas: 'element-stack';
196
+
197
+ .tab-content {
198
+ grid-area: element-stack;
199
+ display: none;
200
+ }
201
+ }
202
+
203
+ /*
204
+ * User configurable variables
205
+ */
206
+
207
+ .tab-content-wrapper {
208
+ background: var(--_tabs-content-bg);
209
+ border: var(--_tabs-content-border);
210
+ border-start-start-radius: var(--_tabs-content-start-start-radius);
211
+ border-start-end-radius: var(--_tabs-content-start-end-radius);
212
+ border-end-start-radius: var(--_tabs-content-end-start-radius);
213
+ border-end-end-radius: var(--_tabs-content-end-end-radius);
214
+
215
+ outline: var(--_tabs-content-outline);
193
216
 
194
- .tab-content {
195
- grid-area: element-stack;
196
- display: none;
217
+ /* .tab-content {
218
+ } */
197
219
  }
198
220
  }
199
221
  </style>
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "srcdev-nuxt-components",
3
3
  "type": "module",
4
- "version": "0.0.29",
4
+ "version": "0.0.30",
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",