arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-23 00:15:05 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat(Input/InputMenu/Select/SelectMenu): handle avatar prop

Browse Source
This commit is contained in:
Benjamin Canac
2024-10-17 18:21:12 +02:00
parent df2013ca92
commit 53a3796d1b
42 changed files with 618 additions and 842 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/runtime/components/Input.vue
View File

@@ -5,6 +5,7 @@ import type { AppConfig } from '@nuxt/schema'
import _appConfig from '#build/app.config'
import theme from '#build/ui/input'
import type { UseComponentIconsProps } from '../composables/useComponentIcons'
import type { AvatarProps } from '../types'
import type { PartialString } from '../types/utils'
const appConfig = _appConfig as AppConfig & { ui: { input: Partial<typeof theme> } }
@@ -79,7 +80,7 @@ const ui = computed(() => input({
size: inputSize?.value,
loading: props.loading,
highlight: highlight.value,
leading: isLeading.value || !!slots.leading,
leading: isLeading.value || !!props.avatar || !!slots.leading,
trailing: isTrailing.value || !!slots.trailing,
buttonGroup: orientation.value
}))
@@ -165,9 +166,10 @@ onMounted(() => {
<slot />
<span v-if="isLeading || !!slots.leading" :class="ui.leading({ class: props.ui?.leading })">
<span v-if="isLeading || !!avatar || !!slots.leading" :class="ui.leading({ class: props.ui?.leading })">
<slot name="leading">
<UIcon v-if="leadingIconName" :name="leadingIconName" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
<UIcon v-if="isLeading && leadingIconName" :name="leadingIconName" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
<UAvatar v-else-if="!!avatar" :size="((props.ui?.leadingAvatarSize || ui.leadingAvatarSize()) as AvatarProps['size'])" v-bind="avatar" :class="ui.leadingAvatar({ class: props.ui?.leadingAvatar })" />
</slot>
</span>

7
src/runtime/components/InputMenu.vue
View File

@@ -163,7 +163,7 @@ const ui = computed(() => inputMenu({
size: inputSize?.value,
loading: props.loading,
highlight: highlight.value,
leading: isLeading.value || !!slots.leading,
leading: isLeading.value || !!props.avatar || !!slots.leading,
trailing: isTrailing.value || !!slots.trailing,
multiple: props.multiple,
buttonGroup: orientation.value
@@ -306,9 +306,10 @@ defineExpose({
@blur="onBlur"
/>
<span v-if="isLeading || !!slots.leading" :class="ui.leading({ class: props.ui?.leading })">
<span v-if="isLeading || !!avatar || !!slots.leading" :class="ui.leading({ class: props.ui?.leading })">
<slot name="leading" :model-value="(modelValue as T)" :open="open" :ui="ui">
<UIcon v-if="leadingIconName" :name="leadingIconName" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
<UIcon v-if="isLeading && leadingIconName" :name="leadingIconName" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
<UAvatar v-else-if="!!avatar" :size="((props.ui?.itemLeadingAvatarSize || ui.itemLeadingAvatarSize()) as AvatarProps['size'])" v-bind="avatar" :class="ui.itemLeadingAvatar({ class: props.ui?.itemLeadingAvatar })" />
</slot>
</span>

7
src/runtime/components/Select.vue
View File

@@ -131,7 +131,7 @@ const ui = computed(() => select({
size: selectSize?.value,
loading: props.loading,
highlight: highlight.value,
leading: isLeading.value || !!slots.leading,
leading: isLeading.value || !!props.avatar || !!slots.leading,
trailing: isTrailing.value || !!slots.trailing,
buttonGroup: orientation.value
}))
@@ -169,9 +169,10 @@ function onUpdateOpen(value: boolean) {
@update:open="onUpdateOpen"
>
<SelectTrigger :class="ui.base({ class: [props.class, props.ui?.base] })">
<span v-if="isLeading || !!slots.leading" :class="ui.leading({ class: props.ui?.leading })">
<span v-if="isLeading || !!avatar || !!slots.leading" :class="ui.leading({ class: props.ui?.leading })">
<slot name="leading" :model-value="modelValue" :open="open" :ui="ui">
<UIcon v-if="leadingIconName" :name="leadingIconName" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
<UIcon v-if="isLeading && leadingIconName" :name="leadingIconName" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
<UAvatar v-else-if="!!avatar" :size="((props.ui?.itemLeadingAvatarSize || ui.itemLeadingAvatarSize()) as AvatarProps['size'])" v-bind="avatar" :class="ui.itemLeadingAvatar({ class: props.ui?.itemLeadingAvatar })" />
</slot>
</span>

7
src/runtime/components/SelectMenu.vue
View File

@@ -152,7 +152,7 @@ const ui = computed(() => selectMenu({
size: selectSize?.value,
loading: props.loading,
highlight: highlight.value,
leading: isLeading.value || !!slots.leading,
leading: isLeading.value || !!props.avatar || !!slots.leading,
trailing: isTrailing.value || !!slots.trailing,
buttonGroup: orientation.value
}))
@@ -228,9 +228,10 @@ function onUpdateOpen(value: boolean) {
>
<ComboboxAnchor as-child>
<ComboboxTrigger :class="ui.base({ class: [props.class, props.ui?.base] })" tabindex="0">
<span v-if="isLeading || !!slots.leading" :class="ui.leading({ class: props.ui?.leading })">
<span v-if="isLeading || !!avatar || !!slots.leading" :class="ui.leading({ class: props.ui?.leading })">
<slot name="leading" :model-value="(modelValue as T)" :open="open" :ui="ui">
<UIcon v-if="leadingIconName" :name="leadingIconName" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
<UIcon v-if="isLeading && leadingIconName" :name="leadingIconName" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
<UAvatar v-else-if="!!avatar" :size="((props.ui?.itemLeadingAvatarSize || ui.itemLeadingAvatarSize()) as AvatarProps['size'])" v-bind="avatar" :class="ui.itemLeadingAvatar({ class: props.ui?.itemLeadingAvatar })" />
</slot>
</span>

6
src/theme/input.ts
View File

@@ -8,6 +8,7 @@ export default (options: Required<ModuleOptions>) => ({
leading: 'absolute inset-y-0 start-0 flex items-center',
leadingIcon: 'shrink-0 text-[var(--ui-text-dimmed)]',
leadingAvatar: 'shrink-0',
leadingAvatarSize: '',
trailing: 'absolute inset-y-0 end-0 flex items-center',
trailingIcon: 'shrink-0 text-[var(--ui-text-dimmed)]'
},
@@ -19,6 +20,7 @@ export default (options: Required<ModuleOptions>) => ({
leading: 'pl-2',
trailing: 'pr-2',
leadingIcon: 'size-4',
leadingAvatarSize: '3xs',
trailingIcon: 'size-4'
},
sm: {
@@ -26,6 +28,7 @@ export default (options: Required<ModuleOptions>) => ({
leading: 'pl-2.5',
trailing: 'pr-2.5',
leadingIcon: 'size-4',
leadingAvatarSize: '3xs',
trailingIcon: 'size-4'
},
md: {
@@ -33,6 +36,7 @@ export default (options: Required<ModuleOptions>) => ({
leading: 'pl-2.5',
trailing: 'pr-2.5',
leadingIcon: 'size-5',
leadingAvatarSize: '2xs',
trailingIcon: 'size-5'
},
lg: {
@@ -40,6 +44,7 @@ export default (options: Required<ModuleOptions>) => ({
leading: 'pl-3',
trailing: 'pr-3',
leadingIcon: 'size-5',
leadingAvatarSize: '2xs',
trailingIcon: 'size-5'
},
xl: {
@@ -47,6 +52,7 @@ export default (options: Required<ModuleOptions>) => ({
leading: 'pl-3',
trailing: 'pr-3',
leadingIcon: 'size-6',
leadingAvatarSize: 'xs',
trailingIcon: 'size-6'
}
},