Skip to content
This repository was archived by the owner on Sep 24, 2024. It is now read-only.

Commit b28aca1

Browse files
SelemondevSelemondev
Selemondev
authored and
Selemondev
committed
fix(app): component variants
This pull request is intended to fix the components' variants to enable full customization of the components.
1 parent 372c79b commit b28aca1

File tree

15 files changed

+291
-321
lines changed

15 files changed

+291
-321
lines changed

‎packages/nuxtlabs-ui-vue/src/App.vue

Lines changed: 6 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,13 @@
11
<script setup lang="ts">
2-
const links = [{
3-
label: 'Profile',
4-
avatar: {
5-
src: 'https://avatars.githubusercontent.com/u/739984?v=4',
6-
},
7-
badge: 100,
8-
}, {
9-
label: 'Installation',
10-
icon: 'heroicons:home',
11-
to: '/getting-started/installation',
12-
}, {
13-
label: 'Vertical Navigation',
14-
icon: 'heroicons:chart-bar',
15-
to: '/navigation/vertical-navigation',
16-
}, {
17-
label: 'Command Palette',
18-
icon: 'heroicons:command-line',
19-
to: '/navigation/command-palette',
20-
}]
2+
import { ref } from 'vue'
3+
4+
const selected = ref(false)
215
</script>
226

237
<template>
248
<div class="grid place-items-center w-full min-h-screen">
25-
<div>
26-
<UVerticalNavigation
27-
:links="links"
28-
/>
29-
</div>
9+
<UToggle
10+
v-model="selected" on-icon="heroicons:check-20-solid" off-icon="heroicons:x-mark-20-solid"
11+
/>
3012
</div>
3113
</template>

‎packages/nuxtlabs-ui-vue/src/Types/componentsTypes/components.ts

Lines changed: 81 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -80,8 +80,12 @@ interface UComponentRoot extends Record<string, unknown> {
8080
};
8181

8282
export interface UAccordion extends UComponentRoot {
83-
item: ItemStyle
84-
transition: TransitionStyle
83+
itemBase?: string
84+
itemSize?: string
85+
itemColor?: string
86+
itemPadding?: string
87+
itemIcon?: string
88+
transition?: objectProp
8589
default: DefaultStyle
8690
}
8791

@@ -91,13 +95,9 @@ export interface UAlert extends UComponentRoot {
9195
shadow?: string
9296
rounded?: string
9397
padding?: string
94-
icon: {
95-
base?: string
96-
}
97-
avatar: {
98-
base?: string
99-
size?: string
100-
}
98+
iconBase?: string
99+
avatarBase?: string
100+
avatarSize?: string
101101
color?: string
102102
variant?: string
103103
}
@@ -165,7 +165,9 @@ export interface UFormGroup extends UComponentRoot {
165165
help?: string
166166
error?: string
167167
size?: objectProp
168-
label?: objectProp
168+
labelWrapper?: string
169+
labelBase?: string
170+
labelRequired?: string
169171
}
170172

171173
export interface UDropdown extends UComponentRoot {
@@ -179,7 +181,19 @@ export interface UDropdown extends UComponentRoot {
179181
base?: string
180182
divide?: string
181183
padding?: string
182-
item?: objectProp
184+
itemBase: string
185+
itemRounded: string
186+
itemPadding: string
187+
itemSize: string
188+
itemActive: string
189+
itemInActive: string
190+
itemDisabled: string
191+
itemIconBase: string
192+
itemIconActive: string
193+
itemIconInActive: string
194+
itemAvatarBase: string
195+
itemAvatarSize: string
196+
itemShortcuts: string
183197
transition?: objectProp
184198
popper?: objectProp
185199
}
@@ -228,6 +242,9 @@ export interface URange extends UComponentRoot {
228242
rounded?: string
229243
background?: string
230244
ring?: string
245+
progressBase?: string
246+
progressRounded?: string
247+
progressBackground?: string
231248
progress?: objectProp
232249
thumb?: objectProp
233250
track?: objectProp
@@ -246,6 +263,7 @@ export interface USelect extends UComponentRoot {
246263
trailing?: objectProp
247264
color?: objectProp
248265
intent?: objectProp
266+
iconBase?: string
249267
icon?: objectProp
250268
default?: objectProp
251269
}
@@ -261,7 +279,26 @@ export interface USelectMenu extends UComponentRoot {
261279
padding?: string
262280
ring?: string
263281
input?: string
264-
option?: objectProp
282+
optionBase?: string
283+
optionRounded?: string
284+
optionPadding?: string
285+
optionSize?: string
286+
optionColor?: string
287+
optionContainer?: string
288+
optionActive?: string
289+
optionInactive?: string
290+
optionSelected?: string
291+
optionDisabled?: string
292+
optionEmpty?: string
293+
optionIconBase?: string
294+
optionIconActive?: string
295+
optionIconInactive?: string
296+
optionSelectedIconWrapper?: string
297+
optionSelectedIconPadding?: string
298+
optionSelectedIconBase?: string
299+
optionAvatarBase?: string
300+
optionAvatarSize?: string
301+
optionChipBase?: string
265302
transition?: objectProp
266303
popper?: objectProp
267304
default?: objectProp
@@ -273,11 +310,25 @@ export interface UTable extends UComponentRoot {
273310
divide?: string
274311
tHead?: string
275312
tBody?: string
276-
tr?: objectProp
277-
th?: objectProp
278-
td?: objectProp
279-
loadingState?: objectProp
280-
emptyState?: objectProp
313+
trBase?: string
314+
trSelected?: string
315+
trActive?: string
316+
thBase?: string
317+
thPadding?: string
318+
thColor?: string
319+
thFont?: string
320+
thSize?: string
321+
tdBase?: string
322+
tdPadding?: string
323+
tdColor?: string
324+
tdFont?: string
325+
tdSize?: string
326+
loadingStateWrapper?: string
327+
loadingStateLabel?: string
328+
loadingStateIcon?: string
329+
emptyStateWrapper?: string
330+
emptyStateLabel?: string
331+
emptyStateIcon?: string
281332
default?: objectProp
282333
}
283334

@@ -291,6 +342,11 @@ export interface UTextarea extends UComponentRoot {
291342
leading?: LeadingStyles
292343
trailing?: PaddingStyles
293344
color?: objectProp
345+
iconBase?: string
346+
leadingWrapper?: string
347+
leadingPointer?: string
348+
trailingWrapper?: string
349+
trailingPointer?: string
294350
icon?: objectProp
295351
default?: objectProp
296352
}
@@ -300,8 +356,14 @@ export interface UToggle extends UComponentRoot {
300356
ring?: string
301357
active?: string
302358
inactive?: string
303-
container?: objectProp
304-
icon?: objectProp
359+
containerBase?: string
360+
containerActive?: string
361+
containerInactive?: string
362+
iconBase?: string
363+
iconActive?: string
364+
iconInactive?: string
365+
iconOn?: string
366+
iconOff?: string
305367
default?: objectProp
306368
}
307369

‎packages/nuxtlabs-ui-vue/src/Types/variant.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import type { Components } from './enums/Components'
2-
import type { UAccordionVariants, UAlertVariants, UAvatarVariants, UBadgeVariants, UButtonGroupVariants, UButtonVariants, UCheckboxVariants, UDropdownVariants, UFormGroupVariants, UIconVariants, UInputVariants, UKbdVariants, URadioVariants, URangeVariants, USelectVariants, UTextareaVariants, UToggleVariants, UVerticalNavigationVariants } from './componentsTypes/components'
2+
import type { UAccordionVariants, UAlertVariants, UAvatarVariants, UBadgeVariants, UButtonGroupVariants, UButtonVariants, UCheckboxVariants, UDropdownVariants, UFormGroupVariants, UIconVariants, UInputVariants, UKbdVariants, URadioVariants, URangeVariants, USelectMenuVariants, USelectVariants, UTextareaVariants, UToggleVariants, UVerticalNavigationVariants } from './componentsTypes/components'
33

44
export declare interface CSSClassKeyValuePair {
55
[key: string]: any
@@ -46,6 +46,7 @@ export interface NuxtLabsUIConfiguration {
4646
[Components.URadio]?: URadioVariants
4747
[Components.URange]?: URangeVariants
4848
[Components.USelect]?: USelectVariants
49+
[Components.USelectMenu]?: USelectMenuVariants
4950
[Components.UToggle]?: UToggleVariants
5051
[Components.UVerticalNavigation]?: UVerticalNavigationVariants
5152
}

‎packages/nuxtlabs-ui-vue/src/components/data/Table/UTable.vue

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -211,12 +211,12 @@ export default defineComponent({
211211
<div :class="wrapperClass" v-bind="attrs">
212212
<table :class="[variant.base, variant.divide]">
213213
<thead :class="variant.thead">
214-
<tr :class="nuxtLabsTheme.UTable.base.tr?.base">
214+
<tr :class="variant.trBase">
215215
<th v-if="modelValue" scope="col" class="ps-4">
216216
<UCheckbox :checked="indeterminate || selected.length === rows.length" :indeterminate="indeterminate" @change="onChange" />
217217
</th>
218218

219-
<th v-for="(column, index) in columns" :key="index" scope="col" :class="[nuxtLabsTheme.UTable.base.th?.base, nuxtLabsTheme.UTable.base.th?.padding, nuxtLabsTheme.UTable.base.th?.color, nuxtLabsTheme.UTable.base.th?.font, nuxtLabsTheme.UTable.base.th?.size, column.class]">
219+
<th v-for="(column, index) in columns" :key="index" scope="col" :class="[variant.thBase, variant.thPadding, variant.thColor, variant.thFont, variant.thSize, column.class]">
220220
<slot :name="`${column.key}-header`" :column="column" :sort="sort" :on-sort="onSort">
221221
<!-- @vue-ignore -->
222222
<UButton
@@ -235,9 +235,9 @@ export default defineComponent({
235235
<tr v-if="loadingState && loading">
236236
<td :colspan="columns.length + (modelValue ? 1 : 0)">
237237
<slot name="loading-state">
238-
<div :class="nuxtLabsTheme.UTable.base.loadingState?.wrapper">
239-
<UIcon v-if="loadingState.icon" :name="loadingState.icon" :class="nuxtLabsTheme.UTable.base.loadingState?.icon" aria-hidden="true" />
240-
<p :class="nuxtLabsTheme.UTable.base.loadingState?.label">
238+
<div :class="variant.loadingStateWrapper">
239+
<UIcon v-if="loadingState.icon" :name="loadingState.icon" :class="variant.loadingStateIcon" aria-hidden="true" />
240+
<p :class="variant.loadingStateLabel">
241241
{{ loadingState.label }}
242242
</p>
243243
</div>
@@ -248,9 +248,9 @@ export default defineComponent({
248248
<tr v-else-if="emptyState && !rows.length">
249249
<td :colspan="columns.length + (modelValue ? 1 : 0)">
250250
<slot name="empty-state">
251-
<div :class="nuxtLabsTheme.UTable.base.emptyState?.wrapper">
252-
<UIcon v-if="emptyState.icon" :name="emptyState.icon" :class="nuxtLabsTheme.UTable.base.emptyState?.icon" aria-hidden="true" />
253-
<p :class="nuxtLabsTheme.UTable.base.emptyState?.label">
251+
<div :class="variant.emptyStateWrapper">
252+
<UIcon v-if="emptyState.icon" :name="emptyState.icon" :class="variant.emptyStateIcon" aria-hidden="true" />
253+
<p :class="variant.emptyStateLabel">
254254
{{ emptyState.label }}
255255
</p>
256256
</div>
@@ -259,12 +259,12 @@ export default defineComponent({
259259
</tr>
260260

261261
<template v-else>
262-
<tr v-for="(row, index) in rows" :key="index" :class="[nuxtLabsTheme.UTable.base.tr?.base, isSelected(row) && nuxtLabsTheme.UTable.base.tr?.selected, $attrs.onSelect && nuxtLabsTheme.UTable.base.tr?.active]" @click="() => onSelect(row)">
262+
<tr v-for="(row, index) in rows" :key="index" :class="[variant.trBase, isSelected(row) && variant.trSelected, $attrs.onSelect && variant.trActive]" @click="() => onSelect(row)">
263263
<td v-if="modelValue" class="ps-4">
264264
<UCheckbox v-model="selected" :value="row" @click.stop />
265265
</td>
266266

267-
<td v-for="(column, subIndex) in columns" :key="subIndex" :class="[nuxtLabsTheme.UTable.base.td?.base, nuxtLabsTheme.UTable.base.td?.padding, nuxtLabsTheme.UTable.base.td?.color, nuxtLabsTheme.UTable.base.td?.font, nuxtLabsTheme.UTable.base.td?.size]">
267+
<td v-for="(column, subIndex) in columns" :key="subIndex" :class="[variant.tdBase, variant.tdPadding, variant.tdColor, variant.tdFont, variant.tdSize]">
268268
<slot :name="`${column.key}-data`" :column="column" :row="row" :index="index" :get-row-data="(defaultValue) => getRowData(row, column.key, defaultValue)">
269269
{{ getRowData(row, column.key) }}
270270
</slot>

‎packages/nuxtlabs-ui-vue/src/components/elements/Accordion/UAccordion.vue

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { computed, defineComponent, ref } from 'vue'
33
import type { PropType } from 'vue'
44
import { omit } from 'lodash-es'
55
import { Disclosure as HDisclosure, DisclosureButton as HDisclosureButton, DisclosurePanel as HDisclosurePanel } from '@headlessui/vue'
6+
import classNames from 'classnames'
67
import UButton from '../Button/UButton.vue'
78
import UIcon from '../Icon/UIcon.vue'
89
import type { AccordionItem } from '@/Types/components/accordionItem'
@@ -90,9 +91,10 @@ function onLeave(el: HTMLElement, done) {
9091
}
9192
9293
const transitions = computed(() => {
93-
return {
94-
...nuxtLabsTheme.UAccordion.base.transition,
95-
}
94+
return classNames(
95+
variant.value.transitionEnterActiveClass,
96+
variant.value.transitionLeaveActiveClass,
97+
)
9698
})
9799
</script>
98100

@@ -114,7 +116,7 @@ export default defineComponent({
114116
:class="[
115117
open && !closeIcon ? '-rotate-180' : '',
116118
nuxtLabsTheme.UButton.base.icon.size[item.size || nuxtLabsTheme.UButton.base.default.size],
117-
nuxtLabsTheme.UAccordion.base?.item?.icon,
119+
variant.itemIcon,
118120
]"
119121
/>
120122
</template>
@@ -126,14 +128,14 @@ export default defineComponent({
126128

127129
<!-- @vue-ignore -->
128130
<Transition
129-
v-bind="transitions"
131+
:name="transitions"
130132
@enter="onEnter"
131133
@after-enter="onAfterEnter"
132134
@before-leave="onBeforeLeave"
133135
@leave="onLeave"
134136
>
135137
<div v-show="open">
136-
<HDisclosurePanel :class="[nuxtLabsTheme.UAccordion.base.item.base, nuxtLabsTheme.UAccordion.base.item.size, nuxtLabsTheme.UAccordion.base.item.color, nuxtLabsTheme.UAccordion.base.item.padding]" static>
138+
<HDisclosurePanel :class="[variant.itemBase, variant.itemSize, variant.itemColor, variant.itemPadding]" static>
137139
<slot :name="item.slot || 'item'" :item="item" :index="index" :open="open" :close="close">
138140
{{ item.content }}
139141
</slot>
@@ -143,4 +145,3 @@ export default defineComponent({
143145
</HDisclosure>
144146
</div>
145147
</template>
146-
../../../Types/components/accordionItem

‎packages/nuxtlabs-ui-vue/src/components/elements/Alert/UAlert.vue

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@ const variant = computed(() => {
6666
...props,
6767
variant: props.variant,
6868
}
69-
return useVariants(
69+
return useVariants<UAlert>(
7070
Components.UAlert,
7171
customProps as VariantJSWithClassesListProps<UAlert>,
7272
)
@@ -102,11 +102,12 @@ export default defineComponent({
102102
</script>
103103

104104
<template>
105+
{{ variant }}
105106
<div :class="alertClass">
106107
<div class="flex gap-3" :class="{ 'items-start': (description || $slots.description), 'items-center': !description && !$slots.description }">
107-
<UIcon v-if="icon" :name="icon" :class="nuxtLabsTheme.UAlert.base.icon.base" />
108+
<UIcon v-if="icon" :name="icon" :class="variant.iconBase" />
108109

109-
<UAvatar v-if="avatar" v-bind="{ size: nuxtLabsTheme.UAlert.base.avatar.size, ...avatar }" :class="nuxtLabsTheme.UAlert.base.avatar.base" />
110+
<UAvatar v-if="avatar" v-bind="{ size: variant.avatarSize, ...avatar }" :class="variant.avatarBase" />
110111

111112
<div class="w-0 flex-1">
112113
<p :class="nuxtLabsTheme.UAlert.base.title">

‎packages/nuxtlabs-ui-vue/src/components/elements/Badge/UBadge.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -64,11 +64,11 @@ const badgeClass = computed(() => {
6464
<script lang="ts">
6565
export default defineComponent({
6666
name: Components.UBadge,
67+
inheritAttrs: false,
6768
})
6869
</script>
6970

7071
<template>
71-
{{ badgeClass }}
7272
<span :class="badgeClass">
7373
<slot>{{ label }}</slot>
7474
</span>

‎packages/nuxtlabs-ui-vue/src/components/elements/Button/UButton.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ const props = defineProps({
4848
},
4949
intent: {
5050
type: String,
51-
default: () => nuxtLabsTheme.UButton.base.default.variant,
51+
default: () => nuxtLabsTheme.UButton.base.default.intent,
5252
},
5353
icon: {
5454
type: String,
@@ -168,7 +168,7 @@ const buttonClass = computed(() => {
168168
<script lang="ts">
169169
export default defineComponent({
170170
name: Components.UButton,
171-
inheritAttrs: true,
171+
inheritAttrs: false,
172172
})
173173
</script>
174174

0 commit comments

Comments
 (0)