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

fix(ContextMenu/DropdownMenu): handle RTL mode (#3744)

Browse Source
This commit is contained in:
Malik
2025-03-31 23:07:40 +02:00
committed by GitHub
parent 9d2fed1250
commit 1ae5cc09cb
2 changed files with 8 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -38,6 +38,7 @@ import { ContextMenu } from 'reka-ui/namespaced'
import { useForwardPropsEmits } from 'reka-ui' import { useForwardPropsEmits } from 'reka-ui'
import { reactiveOmit, createReusableTemplate } from '@vueuse/core' import { reactiveOmit, createReusableTemplate } from '@vueuse/core'
import { useAppConfig } from '#imports' import { useAppConfig } from '#imports'
import { useLocale } from '../composables/useLocale'
import { omit, get, isArrayOfArray } from '../utils' import { omit, get, isArrayOfArray } from '../utils'
import { pickLinkProps } from '../utils/link' import { pickLinkProps } from '../utils/link'
import ULinkBase from './LinkBase.vue' import ULinkBase from './LinkBase.vue'
@@ -53,11 +54,13 @@ const emits = defineEmits<ContextMenuContentEmits>()
const slots = defineSlots<ContextMenuSlots<T>>() const slots = defineSlots<ContextMenuSlots<T>>()
const appConfig = useAppConfig() const appConfig = useAppConfig()
const { dir } = useLocale()
const contentProps = useForwardPropsEmits(reactiveOmit(props, 'sub', 'items', 'portal', 'labelKey', 'checkedIcon', 'loadingIcon', 'externalIcon', 'class', 'ui', 'uiOverride'), emits) const contentProps = useForwardPropsEmits(reactiveOmit(props, 'sub', 'items', 'portal', 'labelKey', 'checkedIcon', 'loadingIcon', 'externalIcon', 'class', 'ui', 'uiOverride'), emits)
const proxySlots = omit(slots, ['default']) const proxySlots = omit(slots, ['default'])
const [DefineItemTemplate, ReuseItemTemplate] = createReusableTemplate<{ item: ContextMenuItem, active?: boolean, index: number }>() const [DefineItemTemplate, ReuseItemTemplate] = createReusableTemplate<{ item: ContextMenuItem, active?: boolean, index: number }>()
const childrenIcon = computed(() => dir.value === 'rtl' ? appConfig.ui.icons.chevronLeft : appConfig.ui.icons.chevronRight)
const groups = computed<ContextMenuItem[][]>(() => const groups = computed<ContextMenuItem[][]>(() =>
props.items?.length props.items?.length
? isArrayOfArray(props.items) ? isArrayOfArray(props.items)
@@ -86,7 +89,7 @@ const groups = computed<ContextMenuItem[][]>(() =>
<span :class="ui.itemTrailing({ class: uiOverride?.itemTrailing })"> <span :class="ui.itemTrailing({ class: uiOverride?.itemTrailing })">
<slot :name="((item.slot ? `${item.slot}-trailing`: 'item-trailing') as keyof ContextMenuSlots<T>)" :item="item" :active="active" :index="index"> <slot :name="((item.slot ? `${item.slot}-trailing`: 'item-trailing') as keyof ContextMenuSlots<T>)" :item="item" :active="active" :index="index">
<UIcon v-if="item.children?.length" :name="appConfig.ui.icons.chevronRight" :class="ui.itemTrailingIcon({ class: uiOverride?.itemTrailingIcon, color: item?.color, active })" /> <UIcon v-if="item.children?.length" :name="childrenIcon" :class="ui.itemTrailingIcon({ class: uiOverride?.itemTrailingIcon, color: item?.color, active })" />
<span v-else-if="item.kbds?.length" :class="ui.itemTrailingKbds({ class: uiOverride?.itemTrailingKbds })"> <span v-else-if="item.kbds?.length" :class="ui.itemTrailingKbds({ class: uiOverride?.itemTrailingKbds })">
<UKbd v-for="(kbd, kbdIndex) in item.kbds" :key="kbdIndex" :size="((props.uiOverride?.itemTrailingKbdsSize || ui.itemTrailingKbdsSize()) as KbdProps['size'])" v-bind="typeof kbd === 'string' ? { value: kbd } : kbd" /> <UKbd v-for="(kbd, kbdIndex) in item.kbds" :key="kbdIndex" :size="((props.uiOverride?.itemTrailingKbdsSize || ui.itemTrailingKbdsSize()) as KbdProps['size'])" v-bind="typeof kbd === 'string' ? { value: kbd } : kbd" />
</span> </span>

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

@@ -44,6 +44,7 @@ import { DropdownMenu } from 'reka-ui/namespaced'
import { useForwardPropsEmits } from 'reka-ui' import { useForwardPropsEmits } from 'reka-ui'
import { reactiveOmit, createReusableTemplate } from '@vueuse/core' import { reactiveOmit, createReusableTemplate } from '@vueuse/core'
import { useAppConfig } from '#imports' import { useAppConfig } from '#imports'
import { useLocale } from '../composables/useLocale'
import { omit, get, isArrayOfArray } from '../utils' import { omit, get, isArrayOfArray } from '../utils'
import { pickLinkProps } from '../utils/link' import { pickLinkProps } from '../utils/link'
import ULinkBase from './LinkBase.vue' import ULinkBase from './LinkBase.vue'
@@ -59,11 +60,13 @@ const emits = defineEmits<DropdownMenuContentEmits>()
const slots = defineSlots<DropdownMenuContentSlots<T>>() const slots = defineSlots<DropdownMenuContentSlots<T>>()
const appConfig = useAppConfig() const appConfig = useAppConfig()
const { dir } = useLocale()
const contentProps = useForwardPropsEmits(reactiveOmit(props, 'sub', 'items', 'portal', 'labelKey', 'checkedIcon', 'loadingIcon', 'externalIcon', 'class', 'ui', 'uiOverride'), emits) const contentProps = useForwardPropsEmits(reactiveOmit(props, 'sub', 'items', 'portal', 'labelKey', 'checkedIcon', 'loadingIcon', 'externalIcon', 'class', 'ui', 'uiOverride'), emits)
const proxySlots = omit(slots, ['default']) const proxySlots = omit(slots, ['default'])
const [DefineItemTemplate, ReuseItemTemplate] = createReusableTemplate<{ item: DropdownMenuItem, active?: boolean, index: number }>() const [DefineItemTemplate, ReuseItemTemplate] = createReusableTemplate<{ item: DropdownMenuItem, active?: boolean, index: number }>()
const childrenIcon = computed(() => dir.value === 'rtl' ? appConfig.ui.icons.chevronLeft : appConfig.ui.icons.chevronRight)
const groups = computed<DropdownMenuItem[][]>(() => const groups = computed<DropdownMenuItem[][]>(() =>
props.items?.length props.items?.length
? isArrayOfArray(props.items) ? isArrayOfArray(props.items)
@@ -92,7 +95,7 @@ const groups = computed<DropdownMenuItem[][]>(() =>
<span :class="ui.itemTrailing({ class: uiOverride?.itemTrailing })"> <span :class="ui.itemTrailing({ class: uiOverride?.itemTrailing })">
<slot :name="((item.slot ? `${item.slot}-trailing`: 'item-trailing') as keyof DropdownMenuContentSlots<T>)" :item="(item as Extract<NestedItem<T>, { slot: string; }>)" :active="active" :index="index"> <slot :name="((item.slot ? `${item.slot}-trailing`: 'item-trailing') as keyof DropdownMenuContentSlots<T>)" :item="(item as Extract<NestedItem<T>, { slot: string; }>)" :active="active" :index="index">
<UIcon v-if="item.children?.length" :name="appConfig.ui.icons.chevronRight" :class="ui.itemTrailingIcon({ class: uiOverride?.itemTrailingIcon, color: item?.color, active })" /> <UIcon v-if="item.children?.length" :name="childrenIcon" :class="ui.itemTrailingIcon({ class: uiOverride?.itemTrailingIcon, color: item?.color, active })" />
<span v-else-if="item.kbds?.length" :class="ui.itemTrailingKbds({ class: uiOverride?.itemTrailingKbds })"> <span v-else-if="item.kbds?.length" :class="ui.itemTrailingKbds({ class: uiOverride?.itemTrailingKbds })">
<UKbd v-for="(kbd, kbdIndex) in item.kbds" :key="kbdIndex" :size="((props.uiOverride?.itemTrailingKbdsSize || ui.itemTrailingKbdsSize()) as KbdProps['size'])" v-bind="typeof kbd === 'string' ? { value: kbd } : kbd" /> <UKbd v-for="(kbd, kbdIndex) in item.kbds" :key="kbdIndex" :size="((props.uiOverride?.itemTrailingKbdsSize || ui.itemTrailingKbdsSize()) as KbdProps['size'])" v-bind="typeof kbd === 'string' ? { value: kbd } : kbd" />
</span> </span>
@@ -131,7 +134,6 @@ const groups = computed<DropdownMenuItem[][]>(() =>
:ui-override="uiOverride" :ui-override="uiOverride"
:portal="portal" :portal="portal"
:items="(item.children as T)" :items="(item.children as T)"
side="right"
align="start" align="start"
:align-offset="-4" :align-offset="-4"
:side-offset="3" :side-offset="3"