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

chore(Breadcrumb): improve theme config

Browse Source
This commit is contained in:
Benjamin Canac
2024-05-27 14:50:40 +02:00
parent 51f4ffc953
commit c9c685a01c
2 changed files with 14 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/runtime/components/Breadcrumb.vue
View File

@@ -55,15 +55,15 @@ const ui = computed(() => tv({ extend: breadcrumb, slots: props.ui })())
<Primitive :as="as" aria-label="breadcrumb" :class="ui.root({ class: props.class })"> <Primitive :as="as" aria-label="breadcrumb" :class="ui.root({ class: props.class })">
<ol :class="ui.list()"> <ol :class="ui.list()">
<template v-for="(item, index) in items" :key="index"> <template v-for="(item, index) in items" :key="index">
<li :class="ui.itemWrapper()"> <li :class="ui.item()">
<ULink v-bind="pickLinkProps(item)" as="span" :aria-current="index === items!.length - 1 ? 'page' : undefined" :class="ui.item({ active: index === items!.length - 1, disabled: !!item.disabled, to: !!item.to })" raw> <ULink v-bind="pickLinkProps(item)" as="span" :aria-current="index === items!.length - 1 ? 'page' : undefined" :class="ui.link({ active: index === items!.length - 1, disabled: !!item.disabled, to: !!item.to })" raw>
<slot :name="item.slot || 'item'" :item="item" :index="index"> <slot :name="item.slot || 'item'" :item="item" :index="index">
<slot :name="item.slot ? `${item.slot}-leading`: 'item-leading'" :item="item" :active="index === items!.length - 1" :index="index"> <slot :name="item.slot ? `${item.slot}-leading`: 'item-leading'" :item="item" :active="index === items!.length - 1" :index="index">
<UAvatar v-if="item.avatar" size="2xs" v-bind="item.avatar" :class="ui.itemLeadingAvatar({ active: index === items!.length - 1 })" /> <UAvatar v-if="item.avatar" size="2xs" v-bind="item.avatar" :class="ui.linkLeadingAvatar({ active: index === items!.length - 1 })" />
<UIcon v-else-if="item.icon" :name="item.icon" :class="ui.itemLeadingIcon({ active: index === items!.length - 1 })" /> <UIcon v-else-if="item.icon" :name="item.icon" :class="ui.linkLeadingIcon({ active: index === items!.length - 1 })" />
</slot> </slot>
<span v-if="item.label || !!slots[item.slot ? `${item.slot}-label`: 'item-label']" :class="ui.itemLabel()"> <span v-if="item.label || !!slots[item.slot ? `${item.slot}-label`: 'item-label']" :class="ui.linkLabel()">
<slot :name="item.slot ? `${item.slot}-label`: 'item-label'" :item="item" :active="index === items!.length - 1" :index="index"> <slot :name="item.slot ? `${item.slot}-label`: 'item-label'" :item="item" :active="index === items!.length - 1" :index="index">
{{ item.label }} {{ item.label }}
</slot> </slot>

18
src/theme/breadcrumb.ts
View File

@@ -2,26 +2,26 @@ export default {
slots: { slots: {
root: 'relative min-w-0', root: 'relative min-w-0',
list: 'flex items-center gap-1.5', list: 'flex items-center gap-1.5',
itemWrapper: 'flex min-w-0', item: 'flex min-w-0',
item: 'group relative flex items-center gap-1.5 font-medium text-sm min-w-0', link: 'group relative flex items-center gap-1.5 font-medium text-sm min-w-0',
itemLeadingIcon: 'shrink-0 size-5', linkLeadingIcon: 'shrink-0 size-5',
itemLeadingAvatar: 'shrink-0', linkLeadingAvatar: 'shrink-0',
itemLabel: 'truncate', linkLabel: 'truncate',
separator: 'flex', separator: 'flex',
separatorIcon: 'shrink-0 size-5 text-gray-500 dark:text-gray-400' separatorIcon: 'shrink-0 size-5 text-gray-500 dark:text-gray-400'
}, },
variants: { variants: {
active: { active: {
true: { true: {
item: 'text-primary-500 dark:text-primary-400' link: 'text-primary-500 dark:text-primary-400'
}, },
false: { false: {
item: 'text-gray-500 dark:text-gray-400' link: 'text-gray-500 dark:text-gray-400'
} }
}, },
disabled: { disabled: {
true: { true: {
item: 'cursor-not-allowed opacity-75' link: 'cursor-not-allowed opacity-75'
} }
}, },
to: { to: {
@@ -33,7 +33,7 @@ export default {
active: false, active: false,
to: true, to: true,
class: { class: {
item: 'hover:text-gray-700 dark:hover:text-gray-200 transition-colors' link: 'hover:text-gray-700 dark:hover:text-gray-200 transition-colors'
} }
}] }]
} }