vignesh/trypost
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: render tone and language select values via computed labels

Browse source 
Reka UI's SelectValue extracts the displayed text from the slot of
the currently-selected SelectItem. When that slot is a reactive
{{ $t('onboarding.brand.tone_professional') }} expression, the
library reads the DOM content before Vue applies the translation,
leaving the raw key visible in the trigger even after the list has
rendered correctly.

Bypass the lookup by rendering the translated label directly inside
<SelectValue> via a computed that maps the current v-model value to
its localized string. The SelectItem slots keep their translations
for the dropdown menu itself, but the closed-state trigger no longer
depends on DOM introspection.

Applied to both the onboarding Brand form and Settings → Workspace.
This commit is contained in:
Paulo Castellano 2026-04-16 11:25:22 -03:00
parent f0b5a5ae4d
commit 5fd448bf7f
2 changed files with 41 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
resources/js/pages/onboarding/Brand.vue
View file

@ -2,7 +2,7 @@
import { Head, useForm } from '@inertiajs/vue3';
import { IconLoader2, IconSparkles } from '@tabler/icons-vue';
import { trans } from 'laravel-vue-i18n';
import { ref } from 'vue';
import { computed, ref } from 'vue';
import { toast } from 'vue-sonner';
import { autofillBrand, skipBrand, storeBrand } from '@/actions/App/Http/Controllers/App/OnboardingController';
@ -47,6 +47,19 @@ const skipForm = useForm({});
const isAutofilling = ref(false);
const logoPreview = ref<string | null>(null);
const toneLabel = computed(() =>
form.brand_tone ? trans(`onboarding.brand.tone_${form.brand_tone}`) : '',
);
const languageLabel = computed(() => {
const map: Record<string, string> = {
en: 'English',
'pt-BR': 'Português (Brasil)',
es: 'Español',
};
return map[form.content_language] ?? '';
});
const csrfToken = document.querySelector<HTMLMetaElement>('meta[name="csrf-token"]')?.content ?? '';
const submit = () => {
@ -160,7 +173,9 @@ const runAutofill = async () => {
<Label for="brand_tone">{{ $t('onboarding.brand.tone') }}</Label>
<Select v-model="form.brand_tone">
<SelectTrigger id="brand_tone" class="w-full">
<SelectValue :placeholder="$t('onboarding.brand.tone')" />
<SelectValue :placeholder="$t('onboarding.brand.tone')">
{{ toneLabel }}
</SelectValue>
</SelectTrigger>
<SelectContent>
<SelectItem value="professional">{{ $t('onboarding.brand.tone_professional') }}</SelectItem>
@ -179,7 +194,9 @@ const runAutofill = async () => {
<Label for="content_language">{{ $t('onboarding.brand.content_language') }}</Label>
<Select v-model="form.content_language">
<SelectTrigger id="content_language" class="w-full">
<SelectValue :placeholder="$t('onboarding.brand.content_language')" />
<SelectValue :placeholder="$t('onboarding.brand.content_language')">
{{ languageLabel }}
</SelectValue>
</SelectTrigger>
<SelectContent>
<SelectItem value="en">English</SelectItem>

24
resources/js/pages/settings/Workspace.vue
View file

@ -1,7 +1,8 @@
<script setup lang="ts">
import { Form, Head, router } from '@inertiajs/vue3';
import { IconClock, IconDots, IconShield, IconTrash, IconUser } from '@tabler/icons-vue';
import { ref } from 'vue';
import { trans } from 'laravel-vue-i18n';
import { computed, ref } from 'vue';
import WorkspaceController from '@/actions/App/Http/Controllers/App/WorkspaceController';
import { WorkspaceRole } from '@/enums/workspace-role';
@ -78,6 +79,19 @@ const props = defineProps<{
const timezone = ref(props.workspace.timezone);
const brandTone = ref(props.workspace.brand_tone ?? 'professional');
const contentLanguage = ref(props.workspace.content_language ?? 'en');
const toneLabel = computed(() =>
brandTone.value ? trans(`settings.brand.tone_${brandTone.value}`) : '',
);
const languageLabel = computed(() => {
const map: Record<string, string> = {
en: 'English',
'pt-BR': 'Português (Brasil)',
es: 'Español',
};
return map[contentLanguage.value] ?? '';
});
const inviteDialogOpen = ref(false);
const removeMemberModal = ref<InstanceType<typeof ConfirmDeleteModal> | null>(null);
@ -193,7 +207,9 @@ const changeRole = (member: Member, role: string) => {
<Label for="brand_tone">{{ $t('settings.brand.tone') }}</Label>
<Select v-model="brandTone" name="brand_tone">
<SelectTrigger id="brand_tone" class="w-full">
<SelectValue :placeholder="$t('settings.brand.tone')" />
<SelectValue :placeholder="$t('settings.brand.tone')">
{{ toneLabel }}
</SelectValue>
</SelectTrigger>
<SelectContent>
<SelectItem value="professional">{{ $t('settings.brand.tone_professional') }}</SelectItem>
@ -213,7 +229,9 @@ const changeRole = (member: Member, role: string) => {
<Label for="content_language">{{ $t('settings.brand.content_language') }}</Label>
<Select v-model="contentLanguage" name="content_language">
<SelectTrigger id="content_language" class="w-full">
<SelectValue :placeholder="$t('settings.brand.content_language')" />
<SelectValue :placeholder="$t('settings.brand.content_language')">
{{ languageLabel }}
</SelectValue>
</SelectTrigger>
<SelectContent>
<SelectItem value="en">English</SelectItem>