desktop version supports rtl

src/components/desktop/IconSelect.vue

@@ -16,7 +16,7 @@
         </template>
 
         <template #no-data>
-            <div class="icon-select-dropdown" ref="dropdownMenu">
+            <div class="icon-select-dropdown px-2" ref="dropdownMenu">
                 <div class="icon-item" :class="{ 'row-has-selected-item': hasSelectedIcon(row) }"
                      :style="`grid-template-columns: repeat(${itemPerRow}, minmax(0, 1fr));`"
                      :key="idx" v-for="(row, idx) in allIconRows">
@@ -24,7 +24,9 @@
                         <div class="cursor-pointer" @click="icon = iconInfo.id">
                             <ItemIcon class="ma-2" icon-type="fixed" :icon-id="iconInfo.icon" :color="color" v-if="!modelValue || modelValue !== iconInfo.id" />
                             <v-badge class="right-bottom-icon" color="primary"
-                                     location="bottom right" offset-x="8" offset-y="10" :icon="mdiCheck"
+                                     offset-x="8" offset-y="10"
+                                     :location="`bottom ${textDirection === TextDirection.LTR ? 'right' : 'left'}`"
+                                     :icon="mdiCheck"
                                      v-if="modelValue && modelValue === iconInfo.id">
                                 <ItemIcon class="ma-2" icon-type="fixed" :icon-id="iconInfo.icon" :color="color" />
                             </v-badge>
@@ -39,6 +41,9 @@
 <script setup lang="ts">
 import { ref, computed, useTemplateRef, nextTick } from 'vue';
 
+import { useI18n } from '@/locales/helpers.ts';
+
+import { TextDirection } from '@/core/text.ts';
 import type { ColorValue } from '@/core/color.ts';
 import type { IconInfo, IconInfoWithId } from '@/core/icon.ts';
 import { arrayContainsFieldValue } from '@/lib/common.ts';
@@ -63,9 +68,12 @@ const emit = defineEmits<{
     (e: 'update:modelValue', value: string): void;
 }>();
 
+const { getCurrentLanguageTextDirection } = useI18n();
+
 const dropdownMenu = useTemplateRef<HTMLElement>('dropdownMenu');
 const itemPerRow = ref<number>(props.columnCount || 7);
 
+const textDirection = computed<TextDirection>(() => getCurrentLanguageTextDirection());
 const allIconRows = computed<IconInfoWithId[][]>(() => getIconsInRows(props.allIconInfos, itemPerRow.value));
 
 const icon = computed<string>({
@@ -89,11 +97,6 @@ function onMenuStateChanged(state: boolean): void {
 </script>
 
 <style>
-.icon-select-dropdown {
-    padding-left: 8px;
-    padding-right: 8px;
-}
-
 .icon-select-dropdown .icon-item {
     display: grid;
 }