Thanks to visit codestin.com
Credit goes to github.com

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

Commit 774600d

Browse files
SelemondevSelemondev
Selemondev
authored and
Selemondev
committed
fix(app): components' variant
This pull request is intended to fix the components' variants
1 parent 4aca769 commit 774600d

File tree

13 files changed

+91
-44
lines changed

13 files changed

+91
-44
lines changed

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

+40-20
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,50 @@
11
<script setup lang="ts">
22
import { ref } from 'vue'
3-
import { useToast } from '@/composables/useToast'
43
5-
const toast = useToast()
4+
const people = [{
5+
id: 'benjamincanac',
6+
label: 'benjamincanac',
7+
href: 'https://github.com/benjamincanac',
8+
target: '_blank',
9+
avatar: { src: 'https://avatars.githubusercontent.com/u/739984?v=4' },
10+
},
11+
{
12+
id: 'Atinux',
13+
label: 'Atinux',
14+
href: 'https://github.com/Atinux',
15+
target: '_blank',
16+
avatar: { src: 'https://avatars.githubusercontent.com/u/904724?v=4' },
17+
},
18+
{
19+
id: 'smarroufin',
20+
label: 'smarroufin',
21+
href: 'https://github.com/smarroufin',
22+
target: '_blank',
23+
avatar: { src: 'https://avatars.githubusercontent.com/u/7547335?v=4' },
24+
},
25+
{
26+
id: 'nobody',
27+
label: 'Nobody',
28+
icon: 'heroicons:user-circle',
29+
}]
630
7-
const show = ref(true)
8-
9-
function handleClose() {
10-
return show.value = false
11-
}
31+
const selected = ref(people[0])
1232
</script>
1333

1434
<template>
15-
<div class="grid place-items-center w-full min-h-screen bg-gray-400">
16-
<div class="flex items-center space-x-4">
17-
<USkeleton
18-
class="h-12 w-12" :variants="{
19-
'my-variant': {
20-
rounded: 'rounded-full',
21-
},
22-
}" :variant="['my-variant']"
23-
/>
24-
<div class="space-y-2">
25-
<USkeleton class="h-4 w-[250px]" />
26-
<USkeleton class="h-4 w-[200px]" />
27-
</div>
35+
{{ selected }}
36+
<div class="grid place-items-center w-full min-h-screen">
37+
<div class="">
38+
<USelectMenu
39+
v-model="selected" :options="people"
40+
>
41+
<template #label>
42+
<UIcon v-if="selected.icon" :name="selected.icon" class="w-4 h-4" />
43+
<UAvatar v-else-if="selected.avatar" v-bind="selected.avatar" size="3xs" />
44+
45+
{{ selected.label }}
46+
</template>
47+
</USelectMenu>
2848
</div>
2949
</div>
3050
</template>

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

-1
Original file line numberDiff line numberDiff line change
@@ -102,7 +102,6 @@ export default defineComponent({
102102
</script>
103103

104104
<template>
105-
{{ variant }}
106105
<div :class="alertClass">
107106
<div class="flex gap-3" :class="{ 'items-start': (description || $slots.description), 'items-center': !description && !$slots.description }">
108107
<UIcon v-if="icon" :name="icon" :class="variant.iconBase" />

‎packages/nuxtlabs-ui-vue/src/components/elements/Avatar/UAvatarGroup.vue

+1
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,7 @@ export default defineComponent({
5252
size: props.size,
5353
text: `${children.value.length - max.value}`,
5454
name: `${children.value.length - max.value}`,
55+
alt: `${children.value.length - max.value}`,
5556
})
5657
}
5758

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

+3-3
Original file line numberDiff line numberDiff line change
@@ -108,7 +108,7 @@ const variant = computed(() => {
108108
)
109109
})
110110
111-
const bind = Object.assign({}, useAttrs(), props.to ? { href: props.to } : {})
111+
const bind = Object.assign({}, useAttrs(), props.to ? { href: props.to, target: props.target } : {})
112112
113113
const isLeading = computed(() => {
114114
return (props.icon && props.leading) || (props.icon && !props.trailing) || (props.loading && !props.trailing) || props.leadingIcon
@@ -160,7 +160,7 @@ const buttonClass = computed(() => {
160160
nuxtLabsTheme.UButton.base.gap[props.size],
161161
props.padded && nuxtLabsTheme.UButton.base[isSquare.value ? 'square' : 'padding'][props.size],
162162
variants.replaceAll('{color}', props.color),
163-
props.block ? 'w-full flex justify-center items-center' : 'inline-flex items-center',
163+
props.block ? variant.value.block : variant.value.normal,
164164
)
165165
})
166166
</script>
@@ -179,7 +179,7 @@ export default defineComponent({
179179
</slot>
180180

181181
<slot>
182-
<span v-if="label" :class="[props.truncate ? 'text-left break-all line-clamp-1' : '']">
182+
<span v-if="label" :class="[props.truncate ? variant.truncate : '']">
183183
{{ label }}
184184
</span>
185185
</slot>

‎packages/nuxtlabs-ui-vue/src/components/elements/Dropdown/UDropdown.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -141,7 +141,7 @@ export default defineComponent({
141141
ref="trigger"
142142
as="div"
143143
:disabled="props.disabled"
144-
class="inline-flex w-full"
144+
:class="variant.inline"
145145
role="button"
146146
@mouseover="onMouseOver"
147147
>

‎packages/nuxtlabs-ui-vue/src/components/forms/SelectMenu/USelectMenu.vue

+9-8
Original file line numberDiff line numberDiff line change
@@ -165,10 +165,11 @@ export default defineComponent({
165165
const variant = computed(() => {
166166
const customProps = {
167167
...props,
168+
variant: props.variant,
168169
}
169170
return useVariants<USelectMenu>(
170171
Components.USelectMenu,
171-
customProps as unknown as VariantJSWithClassesListProps<USelectMenu>,
172+
customProps as VariantJSWithClassesListProps<USelectMenu>,
172173
)
173174
})
174175
const popper = computed<PopperOptions>(() => defu({}, props.popper, variant.value.popper as PopperOptions))
@@ -334,7 +335,7 @@ export default defineComponent({
334335
v-if="required"
335336
:value="modelValue"
336337
:required="required"
337-
class="absolute inset-0 w-px opacity-0 cursor-default"
338+
:class="variant.selectInput"
338339
tabindex="-1"
339340
aria-hidden="true"
340341
>
@@ -344,7 +345,7 @@ export default defineComponent({
344345
ref="trigger"
345346
as="div"
346347
role="button"
347-
class="inline-flex w-full"
348+
:class="variant.component"
348349
>
349350
<slot :open="open" :disabled="disabled" :loading="loading">
350351
<button :class="selectClass" :disabled="disabled || loading" type="button" v-bind="$attrs">
@@ -355,9 +356,9 @@ export default defineComponent({
355356
</span>
356357

357358
<slot name="label">
358-
<span v-if="multiple && Array.isArray(modelValue) && modelValue.length" class="block truncate">{{ modelValue.length }} selected</span>
359-
<span v-else-if="!multiple && modelValue" class="block truncate">{{ typeof modelValue === 'string' ? modelValue : modelValue[optionAttribute] }}</span>
360-
<span v-else class="block truncate" :class="nuxtLabsTheme.USelect.base.placeholder">{{ placeholder || '&nbsp;' }}</span>
359+
<span v-if="multiple && Array.isArray(modelValue) && modelValue.length" :class="variant.blockTruncate">{{ modelValue.length }} selected</span>
360+
<span v-else-if="!multiple && modelValue" :class="variant.blockTruncate">{{ typeof modelValue === 'string' ? modelValue : modelValue[optionAttribute] }}</span>
361+
<span v-else :class="[nuxtLabsTheme.USelect.base.placeholder, variant.blockTruncate]">{{ placeholder || '&nbsp;' }}</span>
361362
</slot>
362363

363364
<span v-if="(isTrailing && trailingIconName) || $slots.trailing" :class="trailingWrapperIconClass">
@@ -405,7 +406,7 @@ export default defineComponent({
405406
/>
406407
<span v-else-if="option.chip" :class="variant.optionChipBase" :style="{ background: `#${option.chip}` }" />
407408

408-
<span class="truncate">{{ typeof option === 'string' ? option : option[optionAttribute] }}</span>
409+
<span :class="variant.truncate">{{ typeof option === 'string' ? option : option[optionAttribute] }}</span>
409410
</slot>
410411
</div>
411412

@@ -419,7 +420,7 @@ export default defineComponent({
419420
<li :class="[variant.optionBase, variant.optionRounded, variant.optionPadding, variant.optionSize, variant.optionColor, active ? variant.optionActive : variant.optionInactive]">
420421
<div :class="variant.optionContainer">
421422
<slot name="option-create" :option="queryOption" :active="active" :selected="selected">
422-
<span class="block truncate">Create "{{ queryOption[optionAttribute] }}"</span>
423+
<span :class="variant.blockTruncate">Create "{{ queryOption[optionAttribute] }}"</span>
423424
</slot>
424425
</div>
425426
</li>

‎packages/nuxtlabs-ui-vue/src/components/navigation/Command-Palette/CommandPalette.vue

+1
Original file line numberDiff line numberDiff line change
@@ -115,6 +115,7 @@ export default defineComponent({
115115
const variant = computed(() => {
116116
const customProps = {
117117
...props,
118+
variant: props.variant,
118119
}
119120
return useVariants<UCommandPalette>(
120121
Components.UCommandPalette,

‎packages/nuxtlabs-ui-vue/src/components/navigation/Command-Palette/CommandPaletteGroup.vue

+1
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@ const props = defineProps({
3535
const variant = computed(() => {
3636
const customProps = {
3737
...props,
38+
variant: props.variant,
3839
}
3940
return useVariants<UCommandPalette>(
4041
Components.UCommandPalette,

‎packages/nuxtlabs-ui-vue/src/components/overlays/Modal/UModal.vue

+4-4
Original file line numberDiff line numberDiff line change
@@ -122,10 +122,10 @@ export default defineComponent({
122122
variant.background,
123123
variant.ring,
124124
variant.shadow,
125-
fullscreen ? 'w-screen' : variant.width,
126-
fullscreen ? 'h-screen' : variant.height,
127-
fullscreen ? 'rounded-none' : variant.rounded,
128-
fullscreen ? 'm-0' : variant.margin,
125+
fullscreen ? variant.widthScreen : variant.width,
126+
fullscreen ? variant.heightScreen : variant.height,
127+
fullscreen ? variant.roundedNone : variant.rounded,
128+
fullscreen ? variant.marginNone : variant.margin,
129129
]"
130130
>
131131
<slot />

‎packages/nuxtlabs-ui-vue/src/components/overlays/Notification/UNotification.vue

+10-5
Original file line numberDiff line numberDiff line change
@@ -180,11 +180,16 @@ export default defineComponent({
180180
<div :class="wrapperClass" v-bind="attrsOmitted" @mouseover="onMouseover" @mouseleave="onMouseleave">
181181
<div :class="[variant.container, variant.rounded, variant.ring]">
182182
<div :class="variant.padding">
183-
<div class="flex gap-3" :class="{ 'items-start': description || $slots.description, 'items-center': !description && !$slots.description }">
183+
<div
184+
:class="[
185+
{ 'items-start': description || $slots.description, 'items-center': !description && !$slots.description },
186+
variant.flexGap,
187+
]"
188+
>
184189
<UIcon v-if="icon" :name="icon" :class="iconClass" />
185190
<UAvatar v-if="avatar" v-bind="{ size: variant.avatarSize, ...avatar }" :class="variant.avatarBase" />
186191

187-
<div class="w-0 flex-1">
192+
<div :class="variant.flexTitle">
188193
<p :class="variant.title">
189194
<slot name="title" :title="title">
190195
{{ title }}
@@ -196,12 +201,12 @@ export default defineComponent({
196201
</slot>
197202
</p>
198203

199-
<div v-if="(description || $slots.description) && actions.length" class="mt-3 flex items-center gap-2">
204+
<div v-if="(description || $slots.description) && actions.length" :class="variant.notificationButtonDescription">
200205
<UButton v-for="(action, index) of actions" :key="index" v-bind="{ ...nuxtLabsTheme.UNotification.base.default.actionButton, ...action }" @click.stop="onAction(action)" />
201206
</div>
202207
</div>
203-
<div class="flex-shrink-0 flex items-center gap-3">
204-
<div v-if="!description && !$slots.description && actions.length" class="flex items-center gap-2">
208+
<div :class="variant.flexDescription">
209+
<div v-if="!description && !$slots.description && actions.length" :class="variant.flexDescriptionLength">
205210
<UButton v-for="(action, index) of actions" :key="index" v-bind="{ ...nuxtLabsTheme.UNotification.base.default.actionButton, ...action }" @click.stop="onAction(action)" />
206211
</div>
207212

‎packages/nuxtlabs-ui-vue/src/components/overlays/Popover/UPopover.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -144,7 +144,7 @@ export default defineComponent({
144144
ref="trigger"
145145
as="div"
146146
:disabled="disabled"
147-
class="inline-flex w-full"
147+
:class="variant.popover"
148148
role="button"
149149
@mouseover="onMouseOver"
150150
>

‎packages/nuxtlabs-ui-vue/src/components/overlays/Tooltip/UTooltip.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -132,7 +132,7 @@ export default defineComponent({
132132
</slot>
133133

134134
<span v-if="shortcuts?.length" :class="variant.shortcuts">
135-
<span class="mx-1 text-gray-700 dark:text-gray-200">&middot;</span>
135+
<span :class="variant.toolTip">&middot;</span>
136136
<UKbd v-for="shortcut of shortcuts" :key="shortcut" size="xs">
137137
{{ shortcut }}
138138
</Ukbd>

‎packages/nuxtlabs-ui-vue/src/theme/nuxtLabsTheme.ts

+19
Original file line numberDiff line numberDiff line change
@@ -215,6 +215,9 @@ export default {
215215
root: 'focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0',
216216
font: 'font-medium',
217217
rounded: 'rounded-md',
218+
block: 'w-full flex justify-center items-center',
219+
normal: 'inline-flex items-center',
220+
truncate: 'text-left break-all line-clamp-1',
218221
size: {
219222
'2xs': 'text-xs',
220223
'xs': 'text-xs',
@@ -528,6 +531,7 @@ export default {
528531
container: 'z-20',
529532
width: 'w-48',
530533
height: '',
534+
inline: 'inline-flex w-full',
531535
background: 'bg-white dark:bg-gray-800',
532536
shadow: 'shadow-lg',
533537
rounded: 'rounded-md',
@@ -786,6 +790,10 @@ export default {
786790
container: 'flex min-h-full items-end sm:items-center justify-center text-center',
787791
padding: 'p-4 sm:p-0',
788792
margin: 'sm:my-8',
793+
widthScreen: 'w-screen',
794+
heightScreen: 'h-screen',
795+
roundedNone: 'rounded-none',
796+
marginNone: 'm-0',
789797
base: 'relative text-left rtl:text-right overflow-hidden w-full flex flex-col',
790798
overlayBase: 'fixed inset-0 transition-opacity',
791799
overlayBackground: 'bg-gray-200/75 dark:bg-gray-800/75',
@@ -823,6 +831,11 @@ export default {
823831
base: {
824832
root: 'w-full pointer-events-auto',
825833
container: 'relative overflow-hidden',
834+
flexGap: 'flex gap-3',
835+
flexTitle: 'w-0 flex-1',
836+
notificationButtonDescription: 'mt-3 flex items-center gap-2',
837+
flexDescription: 'flex-shrink-0 flex items-center gap-3',
838+
flexDescriptionLength: 'flex items-center gap-2',
826839
title: 'text-sm font-medium text-gray-900 dark:text-white',
827840
description: 'mt-1 text-sm leading-4 text-gray-500 dark:text-gray-400',
828841
background: 'bg-white dark:bg-gray-900',
@@ -908,6 +921,7 @@ export default {
908921
base: {
909922
root: 'relative',
910923
container: 'z-20',
924+
popover: 'inline-flex w-full',
911925
width: '',
912926
background: 'bg-white dark:bg-gray-900',
913927
shadow: 'shadow-lg',
@@ -1262,6 +1276,7 @@ export default {
12621276
root: 'relative inline-flex',
12631277
container: 'z-20',
12641278
width: 'max-w-xs',
1279+
toolTip: 'mx-1 text-gray-700 dark:text-gray-200',
12651280
background: 'bg-white dark:bg-gray-900',
12661281
color: 'text-gray-900 dark:text-white',
12671282
shadow: 'shadow',
@@ -1425,6 +1440,10 @@ export default {
14251440
root: 'relative',
14261441
container: 'z-20',
14271442
width: 'w-full',
1443+
selectInput: 'absolute inset-0 w-px opacity-0 cursor-default',
1444+
component: 'inline-flex w-full',
1445+
truncate: 'truncate',
1446+
blockTruncate: 'block truncate',
14281447
height: 'max-h-60',
14291448
base: 'relative focus:outline-none overflow-y-auto scroll-py-1',
14301449
background: 'dark:bg-gray-800',

0 commit comments

Comments
 (0)