8000 feat(CDropdown, CPopover, CTooltip): add RTL support · coreui/coreui-vue@6abec5b · GitHub
[go: up one dir, main page]
Skip to content

Commit 6abec5b

Browse files
mrholekmrholek
committed
feat(CDropdown, CPopover, CTooltip): add RTL support
1 parent 3ae4ec4 commit 6abec5b

File tree

5 files changed

+77
-28
lines changed

5 files changed

+77
-28
lines changed

‎packages/coreui-vue/src/components/dropdown/CDropdown.ts

Lines changed: 28 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
1-
import { defineComponent, h, ref, provide, watch, PropType } from 'vue'
1+
import { defineComponent, h, ref, provide, watch, PropType, onMounted } from 'vue'
22
import { createPopper, Placement } from '@popperjs/core'
33

44
import { Triggers } from '../../types'
5+
import { isRTL } from '../../utils'
56

67
const CDropdown = defineComponent({
78
name: 'CDropdown',
@@ -149,30 +150,6 @@ const CDropdown = defineComponent({
149150
provide('dropdownToggleRef', dropdownToggleRef)
150151
provide('dropdownMenuRef', dropdownMenuRef)
151152

152-
if (props.direction === 'center') {
153-
placement.value = 'bottom'
154-
}
155-
156-
if (props.direction === 'dropup') {
157-
placement.value = 'top-start'
158-
}
159-
160-
if (props.direction === 'dropup-center') {
161-
placement.value = 'top'
162-
}
163-
164-
if (props.direction === 'dropend') {
165-
placement.value = 'right-start'
166-
}
167-
168-
if (props.direction === 'dropstart') {
169-
placement.value = 'left-start'
170-
}
171-
172-
if (props.alignment === 'end') {
173-
placement.value = 'bottom-end'
174-
}
175-
176153
const initPopper = () => {
177154
// Disable popper if responsive aligment is set.
178155
if (typeof props.alignment === 'object') {
@@ -228,6 +205,32 @@ const CDropdown = defineComponent({
228205
visible.value ? emit('show') : emit('hide')
229206
})
230207

208+
onMounted(() => {
209+
if (props.direction === 'center') {
210+
placement.value = 'bottom'
211+
}
212+
213+
if (props.direction === 'dropup') {
214+
placement.value = isRTL(dropdownMenuRef.value) ? 'top-end' : 'top-start'
215+
}
216+
217+
if (props.direction === 'dropup-center') {
218+
placement.value = 'top'
219+
}
220+
221+
if (props.direction === 'dropend') {
222+
placement.value = isRTL(dropdownMenuRef.value) ? 'left-start' : 'right-start'
223+
}
224+
225+
if (props.direction === 'dropstart') {
226+
placement.value = isRTL(dropdownMenuRef.value) ? 'right-start' : 'left-start'
227+
}
228+
229+
if (props.alignment === 'end') {
230+
placement.value = isRTL(dropdownMenuRef.value) ? 'bottom-start' : 'bottom-end'
231+
}
232+
})
233+
231234
return () =>
232235
props.variant === 'input-group'
233236
? [slots.default && slots.default()]

‎packages/coreui-vue/src/components/popover/CPopover.ts

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,22 @@ import { defineComponent, h, PropType, ref, RendererElement, Teleport, Transitio
22
import { createPopper, Placement } from '@popperjs/core'
33

44
import { executeAfterTransition } from '../../utils/transition'
5+
import { isRTL } from '../../utils'
6+
7+
const getPlacement = (placement: string, element: HTMLDivElement | null): Placement => {
8+
console.log(element)
9+
switch (placement) {
10+
case 'right': {
11+
return isRTL(element) ? 'left' : 'right'
12+
}
13+
case 'left': {
14+
return isRTL(element) ? 'right' : 'left'
15+
}
16+
default: {
17+
return placement as Placement
18+
}
19+
}
20+
}
521

622
const CPopover = defineComponent({
723
name: 'CPopover',
@@ -94,7 +110,7 @@ const CPopover = defineComponent({
94110
const initPopper = () => {
95111
if (togglerRef.value) {
96112
popper.value = createPopper(togglerRef.value, popoverRef.value, {
97-
placement: props.placement,
113+
placement: getPlacement(props.placement, togglerRef.value),
98114
modifiers: [
99115
{
100116
name: 'offset',

‎packages/coreui-vue/src/components/tooltip/CTooltip.ts

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,22 @@ import { defineComponent, h, PropType, ref, RendererElement, Teleport, Transitio
22
import { createPopper, Placement } from '@popperjs/core'
33

44
import { executeAfterTransition } from '../../utils/transition'
5+
import { isRTL } from '../../utils'
6+
7+
const getPlacement = (placement: < F438 span class=pl-smi>string, element: HTMLDivElement | null): Placement => {
8+
console.log(element)
9+
switch (placement) {
10+
case 'right': {
11+
return isRTL(element) ? 'left' : 'right'
12+
}
13+
case 'left': {
14+
return isRTL(element) ? 'right' : 'left'
15+
}
16+
default: {
17+
return placement as Placement
18+
}
19+
}
20+
}
521

622
const CTooltip = defineComponent({
723
name: 'CTooltip',
@@ -90,7 +106,7 @@ const CTooltip = defineComponent({
90106
const initPopper = () => {
91107
if (togglerRef.value) {
92108
popper.value = createPopper(togglerRef.value, tooltipRef.value, {
93-
placement: props.placement,
109+
placement: getPlacement(props.placement, togglerRef.value),
94110
modifiers: [
95111
{
96112
name: 'offset',

‎packages/coreui-vue/src/utils/index.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
import isInViewport from './isInViewport'
2+
import isRTL from './isRTL'
23

3-
export { isInViewport }
4+
export { isInViewport, isRTL }

‎packages/coreui-vue/src/utils/isRTL.ts

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
const isRTL = (element?: HTMLElement | HTMLDivElement | null) => {
2+
if (typeof document !== 'undefined' && document.documentElement.dir === 'rtl') {
3+
return true
4+
}
5+
6+
if (element) {
7+
return element.closest('[dir="rtl"]') !== null
8+
}
9+
10+
return false
11+
}
12+
13+
export default isRTL

0 commit comments

Comments
 (0)
0