LeadMagnet/leadchat
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

feat: Add Teleport component to fix RTL/LTR utility classes (#11455)

Browse Source 
# Pull Request Template

## Description

This PR introduces a `CustomTeleport` component that wraps Vue's
Teleport to preserve directionality context (ltr / rtl) when teleporting
content outside the app’s root container.

### Problem
Currently, the app sets the text direction (`[dir="ltr"]` or
`[dir="rtl"]`) on a container `div` inside `<body>`, not on `<body>`
itself. When content is teleported directly into `body`, it no longer
inherits the correct direction context. As a result, direction-aware
utility classes like `ltr:pl-2`, `rtl:ml-1`, etc., break because CSS
selectors like `[dir="ltr"] .ltr\:pl-2` no longer match. Identified this
issue when working on this
[PR](https://github.com/chatwoot/chatwoot/pull/11382)

### Solution
The `CustomTeleport` component automatically applies the correct `[dir]`
attribute (`ltr` or `rtl`) on the teleported content's wrapper based on
the current `isRTL` setting from the store. This ensures that
direction-specific Tailwind utility classes continue to work as
expected, even when the content is rendered outside the app root.

## Type of change

- [x] New feature (non-breaking change which adds functionality)


## Checklist:

- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my code
- [x] I have commented on my code, particularly in hard-to-understand
areas
- [ ] I have made corresponding changes to the documentation
- [x] My changes generate no new warnings
- [ ] I have added tests that prove my fix is effective or that my
feature works
- [x] New and existing unit tests pass locally with my changes
- [ ] Any dependent changes have been merged and published in downstream
modules

---------

Co-authored-by: Pranav <pranavrajs@gmail.com>
This commit is contained in:
Sivin Varghese
2025-05-13 00:19:23 +05:30
committed by GitHub
parent 1b45eb70c9
commit 696611ae63
5 changed files with 51 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
app/javascript/dashboard/components-next/TeleportWithDirection.vue Normal file
View File

@@ -0,0 +1,28 @@
<!--
* Preserves RTL/LTR context when teleporting content
* Ensures direction-specific classes (ltr:tailwind-class, rtl:tailwind-class) work correctly
* when content is teleported outside the app's container with [dir] attribute
-->
<script setup>
import { computed } from 'vue';
import { useMapGetter } from 'dashboard/composables/store';
defineProps({
to: {
type: String,
default: 'body',
},
});
const isRTL = useMapGetter('accounts/isRTL');
const contentDirection = computed(() => (isRTL.value ? 'rtl' : 'ltr'));
</script>
<template>
<Teleport :to="to">
<div :dir="contentDirection">
<slot />
</div>
</Teleport>
</template>

9
app/javascript/dashboard/components-next/dialog/Dialog.vue
View File

@@ -2,9 +2,9 @@
import { ref, computed } from 'vue'; import { ref, computed } from 'vue';
import { OnClickOutside } from '@vueuse/components'; import { OnClickOutside } from '@vueuse/components';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import { useMapGetter } from 'dashboard/composables/store.js';
import Button from 'dashboard/components-next/button/Button.vue'; import Button from 'dashboard/components-next/button/Button.vue';
import TeleportWithDirection from 'dashboard/components-next/TeleportWithDirection.vue';
const props = defineProps({ const props = defineProps({
type: { type: {
@@ -59,8 +59,6 @@ const emit = defineEmits(['confirm', 'close']);
const { t } = useI18n(); const { t } = useI18n();
const isRTL = useMapGetter('accounts/isRTL');
const dialogRef = ref(null); const dialogRef = ref(null);
const dialogContentRef = ref(null); const dialogContentRef = ref(null);
@@ -94,7 +92,7 @@ defineExpose({ open, close });
</script> </script>
<template> <template>
<Teleport to="body"> <TeleportWithDirection to="body">
<dialog <dialog
ref="dialogRef" ref="dialogRef"
class="w-full transition-all duration-300 ease-in-out shadow-xl rounded-xl" class="w-full transition-all duration-300 ease-in-out shadow-xl rounded-xl"
@@ -102,7 +100,6 @@ defineExpose({ open, close });
maxWidthClass, maxWidthClass,
overflowYAuto ? 'overflow-y-auto' : 'overflow-visible', overflowYAuto ? 'overflow-y-auto' : 'overflow-visible',
]" ]"
:dir="isRTL ? 'rtl' : 'ltr'"
@close="close" @close="close"
> >
<OnClickOutside @trigger="close"> <OnClickOutside @trigger="close">
@@ -152,7 +149,7 @@ defineExpose({ open, close });
</form> </form>
</OnClickOutside> </OnClickOutside>
</dialog> </dialog>
</Teleport> </TeleportWithDirection>
</template> </template>
<style scoped> <style scoped>

15
app/javascript/dashboard/components/ChatList.vue
View File

@@ -30,6 +30,7 @@ import ConversationItem from './ConversationItem.vue';
import DeleteCustomViews from 'dashboard/routes/dashboard/customviews/DeleteCustomViews.vue'; import DeleteCustomViews from 'dashboard/routes/dashboard/customviews/DeleteCustomViews.vue';
import ConversationBulkActions from './widgets/conversation/conversationBulkActions/Index.vue'; import ConversationBulkActions from './widgets/conversation/conversationBulkActions/Index.vue';
import IntersectionObserver from './IntersectionObserver.vue'; import IntersectionObserver from './IntersectionObserver.vue';
import TeleportWithDirection from 'dashboard/components-next/TeleportWithDirection.vue';
import { useUISettings } from 'dashboard/composables/useUISettings'; import { useUISettings } from 'dashboard/composables/useUISettings';
import { useAlert } from 'dashboard/composables'; import { useAlert } from 'dashboard/composables';
@@ -840,14 +841,17 @@ watch(conversationFilters, (newVal, oldVal) => {
@basic-filter-change="onBasicFilterChange" @basic-filter-change="onBasicFilterChange"
/> />
<Teleport v-if="showAddFoldersModal" to="#saveFilterTeleportTarget"> <TeleportWithDirection
v-if="showAddFoldersModal"
to="#saveFilterTeleportTarget"
>
<SaveCustomView <SaveCustomView
v-model="appliedFilter" v-model="appliedFilter"
:custom-views-query="foldersQuery" :custom-views-query="foldersQuery"
:open-last-saved-item="openLastSavedItemInFolder" :open-last-saved-item="openLastSavedItemInFolder"
@close="onCloseAddFoldersModal" @close="onCloseAddFoldersModal"
/> />
</Teleport> </TeleportWithDirection>
<DeleteCustomViews <DeleteCustomViews
v-if="showDeleteFoldersModal" v-if="showDeleteFoldersModal"
@@ -944,7 +948,10 @@ watch(conversationFilters, (newVal, oldVal) => {
</template> </template>
</DynamicScroller> </DynamicScroller>
</div> </div>
<Teleport v-if="showAdvancedFilters" to="#conversationFilterTeleportTarget"> <TeleportWithDirection
v-if="showAdvancedFilters"
to="#conversationFilterTeleportTarget"
>
<ConversationFilter <ConversationFilter
v-model="appliedFilter" v-model="appliedFilter"
:folder-name="activeFolderName" :folder-name="activeFolderName"
@@ -953,6 +960,6 @@ watch(conversationFilters, (newVal, oldVal) => {
@update-folder="onUpdateSavedFilter" @update-folder="onUpdateSavedFilter"
@close="closeAdvanceFiltersModal" @close="closeAdvanceFiltersModal"
/> />
</Teleport> </TeleportWithDirection>
</div> </div>
</template> </template>

6
app/javascript/dashboard/components/ui/ContextMenu.vue
View File

@@ -2,6 +2,8 @@
import { computed, onMounted, nextTick, useTemplateRef } from 'vue'; import { computed, onMounted, nextTick, useTemplateRef } from 'vue';
import { useWindowSize, useElementBounding } from '@vueuse/core'; import { useWindowSize, useElementBounding } from '@vueuse/core';
import TeleportWithDirection from 'dashboard/components-next/TeleportWithDirection.vue';
const props = defineProps({ const props = defineProps({
x: { type: Number, default: 0 }, x: { type: Number, default: 0 },
y: { type: Number, default: 0 }, y: { type: Number, default: 0 },
@@ -57,7 +59,7 @@ onMounted(() => {
</script> </script>
<template> <template>
<Teleport to="body"> <TeleportWithDirection to="body">
<div <div
ref="menuRef" ref="menuRef"
class="fixed outline-none z-[9999] cursor-pointer" class="fixed outline-none z-[9999] cursor-pointer"
@@ -67,5 +69,5 @@ onMounted(() => {
> >
<slot /> <slot />
</div> </div>
</Teleport> </TeleportWithDirection>
</template> </template>

9
app/javascript/dashboard/components/widgets/conversation/components/GalleryView.vue
View File

@@ -11,6 +11,7 @@ import { downloadFile } from '@chatwoot/utils';
import NextButton from 'dashboard/components-next/button/Button.vue'; import NextButton from 'dashboard/components-next/button/Button.vue';
import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue'; import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
import TeleportWithDirection from 'dashboard/components-next/TeleportWithDirection.vue';
const props = defineProps({ const props = defineProps({
attachment: { attachment: {
@@ -166,7 +167,7 @@ onMounted(() => {
</script> </script>
<template> <template>
<Teleport to="body"> <TeleportWithDirection to="body">
<woot-modal <woot-modal
v-model:show="show" v-model:show="show"
full-width full-width
@@ -258,7 +259,7 @@ onMounted(() => {
<div class="flex items-center justify-center w-16 shrink-0"> <div class="flex items-center justify-center w-16 shrink-0">
<NextButton <NextButton
v-if="hasMoreThanOneAttachment" v-if="hasMoreThanOneAttachment"
icon="i-lucide-chevron-left" icon="ltr:i-lucide-chevron-left rtl:i-lucide-chevron-right"
class="z-10" class="z-10"
blue blue
faded faded
@@ -324,7 +325,7 @@ onMounted(() => {
<div class="flex items-center justify-center w-16 shrink-0"> <div class="flex items-center justify-center w-16 shrink-0">
<NextButton <NextButton
v-if="hasMoreThanOneAttachment" v-if="hasMoreThanOneAttachment"
icon="i-lucide-chevron-right" icon="ltr:i-lucide-chevron-right rtl:i-lucide-chevron-left"
class="z-10" class="z-10"
blue blue
faded faded
@@ -351,5 +352,5 @@ onMounted(() => {
</footer> </footer>
</div> </div>
</woot-modal> </woot-modal>
</Teleport> </TeleportWithDirection>
</template> </template>