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

chore(DropdownMenu/ContextMenu): handle external icon

Browse Source
This commit is contained in:
Benjamin Canac
2024-05-27 14:49:22 +02:00
parent a8dfa0ff29
commit 51f4ffc953
6 changed files with 120 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/runtime/components/ContextMenuContent.vue
View File

@@ -48,15 +48,17 @@ const groups = computed(() => props.items?.length ? (Array.isArray(props.items[0
<UIcon v-else-if="item.icon" :name="item.icon" :class="ui.itemLeadingIcon({ active })" />
</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.itemLabel({ active })">
<slot :name="item.slot ? `${item.slot}-label`: 'item-label'" :item="item" :active="active" :index="index">
{{ item.label }}
</slot>
<UIcon v-if="item.target === '_blank'" :name="appConfig.ui.icons.external" :class="ui.itemLabelExternalIcon({ active })" />
</span>
<span v-if="item.children?.length || item.kbds?.length || !!slots[item.slot ? `${item.slot}-trailing`: 'item-trailing']" :class="ui.itemTrailing()">
<slot :name="item.slot ? `${item.slot}-trailing`: 'item-trailing'" :item="item" :active="active" :index="index">
<UIcon v-if="item.children?.length" :name="appConfig.ui.icons.chevronRight" :class="ui.itemTrailingIcon()" />
<UIcon v-if="item.children?.length" :name="appConfig.ui.icons.chevronRight" :class="ui.itemTrailingIcon({ active })" />
<span v-else-if="item.kbds?.length" :class="ui.itemTrailingKbds()">
<UKbd v-for="(kbd, kbdIndex) in item.kbds" :key="kbdIndex" size="md" v-bind="typeof kbd === 'string' ? { value: kbd } : kbd" />
</span>

6
src/runtime/components/DropdownMenuContent.vue
View File

@@ -48,15 +48,17 @@ const groups = computed(() => props.items?.length ? (Array.isArray(props.items[0
<UIcon v-else-if="item.icon" :name="item.icon" :class="ui.itemLeadingIcon({ active })" />
</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.itemLabel({ active })">
<slot :name="item.slot ? `${item.slot}-label`: 'item-label'" :item="item" :active="active" :index="index">
{{ item.label }}
</slot>
<UIcon v-if="item.target === '_blank'" :name="appConfig.ui.icons.external" :class="ui.itemLabelExternalIcon({ active })" />
</span>
<span v-if="item.children?.length || item.kbds?.length || !!slots[item.slot ? `${item.slot}-trailing`: 'item-trailing']" :class="ui.itemTrailing()">
<slot :name="item.slot ? `${item.slot}-trailing`: 'item-trailing'" :item="item" :active="active" :index="index">
<UIcon v-if="item.children?.length" :name="appConfig.ui.icons.chevronRight" :class="ui.itemTrailingIcon()" />
<UIcon v-if="item.children?.length" :name="appConfig.ui.icons.chevronRight" :class="ui.itemTrailingIcon({ active })" />
<span v-else-if="item.kbds?.length" :class="ui.itemTrailingKbds()">
<UKbd v-for="(kbd, kbdIndex) in item.kbds" :key="kbdIndex" size="md" v-bind="typeof kbd === 'string' ? { value: kbd } : kbd" />
</span>

3
src/theme/context-menu.ts
View File

@@ -10,7 +10,8 @@ export default {
itemTrailing: 'ms-auto inline-flex',
itemTrailingIcon: 'shrink-0 size-5',
itemTrailingKbds: 'hidden lg:inline-flex items-center shrink-0 gap-0.5',
itemLabel: 'truncate'
itemLabel: 'truncate',
itemLabelExternalIcon: 'size-3 align-top text-gray-400 dark:text-gray-500'
},
variants: {
active: {

3
src/theme/dropdown-menu.ts
View File

@@ -11,7 +11,8 @@ export default {
itemTrailing: 'ms-auto inline-flex',
itemTrailingIcon: 'shrink-0 size-5',
itemTrailingKbds: 'hidden lg:inline-flex items-center shrink-0 gap-0.5',
itemLabel: 'truncate'
itemLabel: 'truncate',
itemLabelExternalIcon: 'size-3 align-top text-gray-400 dark:text-gray-500'
},
variants: {
active: {

1
src/theme/icons.ts
View File

@@ -8,6 +8,7 @@ export default {
close: 'i-heroicons-x-mark-20-solid',
ellipsis: 'i-heroicons-ellipsis-horizontal-20-solid',
empty: 'i-heroicons-circle-stack-20-solid',
external: 'i-heroicons-arrow-up-right-20-solid',
loading: 'i-heroicons-arrow-path-20-solid',
minus: 'i-heroicons-minus-20-solid',
search: 'i-heroicons-magnifying-glass-20-solid'