srcdev-nuxt-components 0.0.28 → 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 +133 -108
  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,128 +67,155 @@ onMounted(() => {
69
67
  </script>
70
68
 
71
69
  <style lang="css">
72
- .tabs-list {
73
- --_default-text: light-dark(var(--gray-12), var(--gray-0));
74
- --_active-bg: light-dark(var(--gray-12), var(--gray-0));
75
- --_active-text: light-dark(var(--gray-0), var(--gray-12));
76
- --_active-indicator: light-dark(var(--gray-12), var(--gray-0));
77
- --_hovered-bg: light-dark(var(--gray-7), var(--gray-3));
78
- --_hovered-text: light-dark(var(--gray-0), var(--gray-12));
79
- --_border-bottom: light-dark(var(--gray-12), var(--gray-0));
80
-
81
- position: relative;
82
- display: flex;
83
- width: fit-content;
84
- z-index: 1;
85
-
86
- list-style-type: none;
87
- margin: 0;
88
- padding: 0;
89
-
90
- .nav__hovered {
91
- content: '';
92
- position: absolute;
93
- left: 0;
94
- right: 0;
95
- bottom: 0;
96
- top: 0;
97
- scale: var(--_width-hovered, 0.125) 1;
98
- translate: var(--_left-hovered, 0) 0;
99
- transform-origin: left;
100
- transition: scale var(--_transition-duration), translate var(--_transition-duration);
70
+ .tabs {
71
+ /*
72
+ * CSS var within /assets/styles/components/tabs.css
73
+ */
74
+ --_tabs-default-text: var(--tabs-default-text, light-dark(var(--gray-12), var(--gray-0)));
75
+ --_tabs-active-bg: var(--tabs-active-bg, light-dark(var(--gray-12), var(--gray-0)));
76
+ --_tabs-active-text: var(--tabs-active-text, light-dark(var(--gray-0), var(--gray-12)));
77
+ --_tabs-active-indicator: var(--tabs-active-indicator, light-dark(var(--gray-12), var(--gray-0)));
78
+ --_tabs-hovered-bg: var(--tabs-hovered-bg, light-dark(var(--gray-7), var(--gray-3)));
79
+ --_tabs-hovered-text: var(--tabs-hovered-text, light-dark(var(--gray-0), var(--gray-12)));
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;
101
93
  z-index: 1;
102
- }
103
94
 
104
- .nav__active {
105
- content: '';
106
- position: absolute;
107
- left: 0;
108
- right: 0;
109
- bottom: 0;
110
- top: 0;
111
- scale: var(--_width-active, 0.125) 1;
112
- translate: var(--_left-active, 0) 0;
113
- transform-origin: left;
114
- transition: scale var(--_transition-duration), translate var(--_transition-duration);
115
- z-index: 2;
116
- }
117
-
118
- .nav__active-indicator {
119
- content: '';
120
- position: absolute;
121
- left: 0;
122
- right: 0;
123
- bottom: 0;
124
- scale: var(--_width-active, 0.125) 1;
125
- translate: var(--_left-active, 0) 0;
126
- transform-origin: left;
127
- transition: scale var(--_transition-duration), translate var(--_transition-duration);
128
- z-index: 3;
129
- }
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
+ }
130
112
 
131
- .tabs-list-item {
132
- opacity: 0.7;
133
- position: relative;
134
- transition: color 0.2s;
135
- z-index: 4;
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;
125
+ }
136
126
 
137
- &:hover {
138
- 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;
139
138
  }
140
139
 
141
- &[aria-selected='true'] {
142
- opacity: 1;
140
+ .tabs-list-item {
141
+ opacity: 0.7;
142
+ position: relative;
143
+ transition: color 0.2s;
144
+ z-index: 4;
145
+
146
+ &:hover {
147
+ opacity: 1;
148
+ }
149
+
150
+ &[aria-selected='true'] {
151
+ opacity: 1;
152
+ }
143
153
  }
144
- }
145
- /*
146
- * User configurable variables
147
- */
148
- border-bottom: 1px solid var(--_border-bottom);
149
- margin-block: 3rem;
150
-
151
- .nav__hovered {
152
- background: var(--_hovered-bg);
153
- color: var(--_hovered-text);
154
- }
155
154
 
156
- .nav__active {
157
- background: var(--_active-bg);
158
- color: var(--_active-text);
159
- }
155
+ border-bottom: var(--_tabs-border-bottom);
160
156
 
161
- .nav__active-indicator {
162
- background: var(--_active-indicator);
163
- height: 4px;
164
- }
157
+ .nav__hovered {
158
+ background: var(--_tabs-hovered-bg);
159
+ color: var(--_tabs-hovered-text);
160
+ }
165
161
 
166
- .tabs-list-item {
167
- background: transparent;
168
- border: 0;
169
- color: var(--_default-text);
170
- cursor: pointer;
171
- font: inherit;
172
- text-transform: uppercase;
173
- font-weight: 500;
174
- margin: 0;
175
- padding: 1em 2em;
162
+ .nav__active {
163
+ background: var(--_tabs-active-bg);
164
+ color: var(--_tabs-active-text);
165
+ }
176
166
 
177
- &:hover {
178
- color: var(--_hovered-text);
167
+ .nav__active-indicator {
168
+ background: var(--_tabs-active-indicator);
169
+ height: 4px;
179
170
  }
180
171
 
181
- &[aria-selected='true'] {
182
- color: var(--_active-text);
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
+ }
183
190
  }
184
191
  }
185
- }
186
192
 
187
- .tab-content-wrapper {
188
- display: grid;
189
- 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);
190
216
 
191
- .tab-content {
192
- grid-area: element-stack;
193
- display: none;
217
+ /* .tab-content {
218
+ } */
194
219
  }
195
220
  }
196
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.28",
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",