[4.x] Translatable displays (#9450)

resources/js/components/Breadcrumb.vue

@@ -2,7 +2,7 @@
     <div class="breadcrumb flex">
         <a :href="url" class="flex-initial flex p-2 -m-2 items-center text-xs text-gray-700 hover:text-gray-900">
             <svg-icon name="micro/chevron-right" class="h-6 w-4 rotate-180" />
-            <span v-text="title" />
+            <span v-text="__(title)" />
         </a>
     </div>
 </template>

resources/js/components/ResourceDeleter.vue

@@ -45,7 +45,7 @@ export default {
         },
 
         modalTitle() {
-            return __('Delete :resource', {resource: this.title});
+            return __('Delete :resource', {resource: __(this.title)});
         },
 
         modalBody() {

resources/js/components/SiteSelector.vue

@@ -5,7 +5,7 @@
         :value="site"
         :clearable="false"
         :searchable="false"
-        :get-option-label="site => site.name"
+        :get-option-label="site => __(site.name)"
         :options="sites"
         @input="$emit('input', $event)"
     />

resources/js/components/assets/Browser/Browser.vue

@@ -23,7 +23,7 @@
 
                 <div class="publish-tabs tabs rounded-none rounded-t mb-3 shadow-none" v-if="showContainerTabs">
                     <button class="tab-button" v-for="item in containers" :key="item.id"
-                        v-text="item.title"
+                        v-text="__(item.title)"
                         :class="{
                             active: item.id === container.id,
                             'border-b border-gray-300': item.id !== container.id

resources/js/components/blueprints/LinkFields.vue

@@ -111,8 +111,8 @@ export default {
                 .filter(field => field.type !== 'import')
                 .map(field => ({
                     value: `${fieldset.handle}.${field.handle}`,
-                    label: field.config.display,
-                    fieldset: fieldset.title,
+                    label: __(field.config.display),
+                    fieldset: __(fieldset.title),
                 }));
         });
 
@@ -124,7 +124,7 @@ export default {
             fieldSuggestions,
             fieldsetSuggestions: fieldsets.map(fieldset => ({
                 value: fieldset.handle,
-                label: fieldset.title,
+                label: __(fieldset.title),
             })),
             fieldsets,
         }

resources/js/components/blueprints/Listing.vue

@@ -8,7 +8,7 @@
                 <template slot="cell-title" slot-scope="{ row: blueprint }">
                     <div class="flex items-center">
                         <div class="little-dot mr-2" :class="[blueprint.hidden ? 'hollow' : 'bg-green-600']" />
-                        <a :href="blueprint.edit_url">{{ blueprint.title }}</a>
+                        <a :href="blueprint.edit_url">{{ __(blueprint.title) }}</a>
                     </div>
                 </template>
                 <template slot="cell-handle" slot-scope="{ value }">

resources/js/components/blueprints/RegularField.vue

@@ -6,7 +6,7 @@
             <div class="flex flex-1 items-center justify-between">
                 <div class="flex items-center flex-1 pr-4 py-2 pl-2">
                     <svg-icon class="text-gray-800 mr-2 h-4 w-4 flex-none" :name="field.icon.startsWith('<svg') ? field.icon : `light/${field.icon}`" v-tooltip="tooltipText" default="light/generic-field" />
-                    <a class="break-all" v-text="labelText" @click="$emit('edit')" />
+                    <a class="break-all" v-text="__(labelText)" @click="$emit('edit')" />
                     <svg-icon name="light/hyperlink" v-if="isReferenceField" class="text-gray-600 text-3xs ml-2 h-4 w-4" v-tooltip="__('Imported from fieldset') + ': ' + field.field_reference" />
                 </div>
                 <div class="flex-none pr-2 flex">

resources/js/components/blueprints/Section.vue

@@ -8,7 +8,7 @@
                 <div class="p-2 flex-1 flex items-center">
                     <a class="flex items-center flex-1 group" @click="edit">
                         <svg-icon :name="iconName(section.icon)" :directory="iconBaseDirectory" class="h-4 w-4 mr-2 text-gray-700 group-hover:text-blue-500" />
-                        <div class="mr-2" v-text="section.display" />
+                        <div class="mr-2" v-text="__(section.display)" />
                     </a>
                     <button class="flex items-center text-gray-700 hover:text-gray-950 mr-3" @click="edit">
                         <svg-icon class="h-4 w-4" name="pencil" />

resources/js/components/blueprints/Tab.vue

@@ -13,7 +13,7 @@
     >
         <svg-icon v-if="tab.icon" :name="iconName(tab.icon)" :directory="iconBaseDirectory" class="w-4 h-4 mr-1" />
 
-        {{ tab.display }}
+        {{ __(tab.display) }}
 
         <dropdown-list v-if="isActive" ref="dropdown" placement="bottom-start" class="text-left">
             <template #trigger>

resources/js/components/collections/OneOrManySitesField.vue

@@ -20,7 +20,7 @@
                 </thead>
                 <tbody>
                     <tr v-for="site in sites" :key="site.handle">
-                        <td class="align-middle" v-text="site.name" />
+                        <td class="align-middle" v-text="__(site.name)" />
                         <td>
                             <text-input
                                 class="slug-field"

resources/js/components/collections/View.vue

@@ -133,7 +133,7 @@
                         v-for="blueprint in blueprints"
                         :key="blueprint.handle"
                         @click="createEntry(blueprint.handle, branch.id)"
-                        v-text="blueprints.length > 1 ? blueprint.title : __('Create Child Entry')" />
+                        v-text="blueprints.length > 1 ? __(blueprint.title) : __('Create Child Entry')" />
                 </template>
                 <template v-if="branch.can_delete">
                     <li class="divider"></li>

resources/js/components/data-list/ColumnPicker.vue

@@ -24,7 +24,7 @@
                             <div class="column-picker-item" v-for="column in hiddenColumns" :key="column.field" v-if="hiddenColumns.length">
                                 <label class="flex items-center cursor-pointer">
                                     <input type="checkbox" class="mr-2" v-model="column.visible" @change="columnToggled(column) "/>
-                                    {{ column.label }}
+                                    {{ __(column.label) }}
                                 </label>
                             </div>
                         </div>
@@ -48,7 +48,7 @@
                                         <div class="item-move py-1">&nbsp;</div>
                                         <div class="flex flex-1 ml-2 items-center p-0">
                                             <input type="checkbox" class="mr-2" v-model="column.visible" @change="columnToggled(column)" :disabled="selectedColumns.length === 1" />
-                                            {{ column.label }}
+                                            {{ __(column.label) }}
                                         </div>
                                     </div>
                                 </div>

resources/js/components/data-list/Table.vue

@@ -17,7 +17,7 @@
                     class="group"
                     @click.prevent="changeSortColumn(column.field)"
                 >
-                    <span v-text="column.label" />
+                    <span v-text="__(column.label)" />
                     <svg v-if="column.sortable" :class="[sharedState.sortDirection, {'opacity-100 pointer-events-none': sharedState.sortColumn === column.field}]" height="8" width="8" viewBox="0 0 10 6.5" class="ml-1 opacity-0 group-hover:opacity-100">
                         <path d="M9.9,1.4L5,6.4L0,1.4L1.4,0L5,3.5L8.5,0L9.9,1.4z" fill="currentColor"/>
                     </svg>

resources/js/components/entries/PublishForm.vue

@@ -6,8 +6,8 @@
         <div class="flex items-center mb-6">
             <h1 class="flex-1">
                 <div class="flex items-center">
-                    <span v-if="! isCreating" class="little-dot mr-2" :class="activeLocalization.status" v-tooltip="activeLocalization.status" />
-                    <span v-html="$options.filters.striptags(title)" />
+                    <span v-if="! isCreating" class="little-dot mr-2" :class="activeLocalization.status" v-tooltip="__(activeLocalization.status)" />
+                    <span v-html="$options.filters.striptags(__(title))" />
                 </div>
             </h1>
 
@@ -176,7 +176,7 @@
                                                 'bg-gray-500': !option.published,
                                                 'bg-red-500': !option.exists
                                             }" />
-                                            {{ option.name }}
+                                            {{ __(option.name) }}
                                             <loading-graphic
                                                 :size="14"
                                                 text=""

resources/js/components/field-validation/Builder.vue

@@ -59,7 +59,7 @@
                     />
                 </template>
                 <template #option="{ value, display }">
-                    {{ display }} <code class="ml-2">{{ valueWithoutTrailingColon(value) }}</code>
+                    {{ __(display) }} <code class="ml-2">{{ valueWithoutTrailingColon(value) }}</code>
                 </template>
                 <template #no-options="{ search }">
                     <div class="vs__dropdown-option text-left">{{ __('Add') }} <code class="ml-2">{{ search }}</code></div>

resources/js/components/fields/Settings.vue

@@ -8,7 +8,7 @@
 
         <header v-if="!loading" class="flex items-center sticky top-0 inset-x-0 bg-white shadow px-8 py-2 z-1 h-13">
             <h1 class="flex-1 flex items-center text-xl">
-                {{ values.display || config.display || config.handle }}
+                {{ __(values.display) || __(config.display) || config.handle }}
                 <small class="badge-pill bg-gray-100 ml-4 border text-xs text-gray-700 font-medium leading-none flex items-center">
                     <svg-icon class="h-4 w-4 mr-2 inline-block text-gray-700" :name="fieldtype.icon.startsWith('<svg') ? fieldtype.icon : `light/${fieldtype.icon}`"></svg-icon>
                     {{ fieldtype.title }}

resources/js/components/fieldsets/EditForm.vue

@@ -5,7 +5,7 @@
         <header class="mb-6">
             <breadcrumb :url="breadcrumbUrl" :title="__('Fieldsets')" />
             <div class="flex items-center justify-between">
-                <h1>{{ initialTitle }}</h1>
+                <h1>{{ __(initialTitle) }}</h1>
                 <button type="submit" class="btn-primary" @click.prevent="save" v-text="__('Save')" />
             </div>
         </header>

resources/js/components/fieldsets/FieldsetDeleter.vue

@@ -67,7 +67,7 @@ export default {
         },
 
         modalTitle() {
-            return __('Delete :resource', {resource: this.title});
+            return __('Delete :resource', {resource: __(this.title)});
         },
 
         deleteUrl() {

resources/js/components/fieldsets/Listing.vue

@@ -4,7 +4,7 @@
             <div class="overflow-x-auto overflow-y-hidden">
                 <data-list-table>
                     <template slot="cell-title" slot-scope="{ row: fieldset }">
-                        <a :href="fieldset.edit_url">{{ fieldset.title }}</a>
+                        <a :href="fieldset.edit_url">{{ __(fieldset.title) }}</a>
                     </template>
                     <template slot="cell-handle" slot-scope="{ value }">
                         <span class="font-mono text-xs">{{ value }}</span>

resources/js/components/globals/Sites.vue

@@ -13,7 +13,7 @@
                     <td>
                         <div class="flex items-center text-sm">
                             <toggle-input v-model="site.enabled" class="mr-4" />
-                            {{ site.name }}
+                            {{ __(site.name) }}
                         </div>
                     </td>
                     <td class="text-sm">
@@ -60,7 +60,7 @@ export default {
 
         siteOriginOptions(site) {
             return this.sites
-                .map(s => ({ value: s.handle, label: s.name }))
+                .map(s => ({ value: s.handle, label: __(s.name) }))
                 .filter(s => s.value !== site.handle)
         }
 

resources/js/components/inputs/Text.vue

@@ -17,7 +17,7 @@
                 :step="step"
                 :disabled="disabled"
                 :readonly="isReadOnly"
-                :placeholder="placeholder"
+                :placeholder="__(placeholder)"
                 :autocomplete="autocomplete"
                 :autofocus="focus"
                 :min="min"

resources/js/components/inputs/relationship/Item.vue

@@ -11,12 +11,12 @@
             <div
                 v-if="item.invalid"
                 v-tooltip.top="__('An item with this ID could not be found')"
-                v-text="item.title" />
+                v-text="__(item.title)" />
 
 
-            <a v-if="!item.invalid && editable" @click.prevent="edit" v-text="item.title" class="truncate" v-tooltip="item.title" :href="item.edit_url" />
+            <a v-if="!item.invalid && editable" @click.prevent="edit" v-text="__(item.title)" class="truncate" v-tooltip="item.title" :href="item.edit_url" />
 
-            <div v-if="!item.invalid && !editable" v-text="item.title" />
+            <div v-if="!item.invalid && !editable" v-text="__(item.title)" />
 
             <inline-edit-form
                 v-if="isEditing"

resources/js/components/inputs/relationship/SelectField.vue

@@ -11,7 +11,7 @@
             :multiple="multiple"
             :options="options"
             :get-option-key="(option) => option.id"
-            :get-option-label="(option) => option.title"
+            :get-option-label="(option) => __(option.title)"
             :create-option="(value) => ({ title: value, id: value })"
             :placeholder="__(config.placeholder) || __('Choose...')"
             :searchable="true"
@@ -46,7 +46,7 @@
                 >
                     <div class="vs__selected-options-outside flex flex-wrap">
                         <span v-for="item in items" :key="item.id" class="vs__selected mt-2" :class="{ 'sortable-item': !readOnly }">
-                            {{ item.title }}
+                            {{ __(item.title) }}
                             <button v-if="!readOnly" @click="deselect(item)" type="button" :aria-label="__('Deselect option')" class="vs__deselect">
                                 <span>×</span>
                             </button>

resources/js/components/nav/Builder.vue

@@ -6,7 +6,7 @@
             <breadcrumb v-if="indexUrl" :url="indexUrl" :title="__('CP Nav Preferences')" />
 
             <div class="flex items-center">
-                <h1 class="flex-1">{{ title }}</h1>
+                <h1 class="flex-1">{{ __(title) }}</h1>
 
                 <dropdown-list class="mr-2">
                     <dropdown-item :text="__('Reset Nav Customizations')" class="warning" @click="confirmingReset = true"></dropdown-item>
@@ -43,7 +43,7 @@
                         <dropdown-item v-for="option in saveAsOptions" :key="option.url" @click="saveAs(option.url)" class="group">
                             <div class="flex items-start pr-4">
                                 <svg-icon :name="option.icon" class="text-gray shrink-0 mr-2 w-4 group-hover:text-white" />
-                                <span class="whitespace-normal">{{ option.label }}</span>
+                                <span class="whitespace-normal">{{ __(option.label) }}</span>
                             </div>
                         </dropdown-item>
                     </dropdown-list>

resources/js/components/navigation/Listing.vue

@@ -3,7 +3,7 @@
         <div class="card p-0" slot-scope="{ filteredRows: rows }">
             <data-list-table :rows="rows">
                 <template slot="cell-title" slot-scope="{ row: structure }">
-                    <a :href="structure.show_url" class="flex items-center" v-text="structure.title" />
+                    <a :href="structure.show_url" class="flex items-center" v-text="__(structure.title)" />
                 </template>
                 <template slot="actions" slot-scope="{ row: structure, index }">
                     <dropdown-list>

resources/js/components/roles/Listing.vue

@@ -3,7 +3,7 @@
         <div class="card p-0" slot-scope="{ }">
             <data-list-table>
                 <template slot="cell-title" slot-scope="{ row: role, index }">
-                    <a :href="role.edit_url">{{ role.title }}</a>
+                    <a :href="role.edit_url">{{ __(role.title) }}</a>
                 </template>
                 <template slot="cell-handle" slot-scope="{ value: handle }">
                     <span class="font-mono text-xs">{{ handle }}</span>

resources/js/components/roles/PublishForm.vue

@@ -4,7 +4,7 @@
             <header class="mb-6">
                 <breadcrumb :url="breadcrumbUrl" :title="__('Roles & Permissions')" />
                 <div class="flex items-center justify-between">
-                    <h1 v-text="initialTitle || __('Create Role')" />
+                    <h1 v-text="__(initialTitle) || __('Create Role')" />
                     <button type="submit" class="btn-primary" @click="save">{{ __('Save') }}</button>
                 </div>
             </header>

resources/js/components/terms/PublishForm.vue

@@ -175,7 +175,7 @@
                                                 'bg-gray-500': !option.published,
                                                 'bg-red-500': !option.exists
                                             }" />
-                                            {{ option.name }}
+                                            {{ __(option.name) }}
                                             <loading-graphic :size="14" text="" class="ml-2" v-if="localizing === option.handle" />
                                         </div>
                                         <div class="badge-sm bg-orange" v-if="option.origin" v-text="__('Origin')" />

resources/js/components/user-groups/Listing.vue

@@ -3,7 +3,7 @@
         <div class="card p-0" slot-scope="{ }">
             <data-list-table>
                 <template slot="cell-title" slot-scope="{ row: group, index }">
-                    <a :href="group.show_url">{{ group.title }}</a>
+                    <a :href="group.show_url">{{ __(group.title) }}</a>
                 </template>
                 <template slot="cell-handle" slot-scope="{ value: handle }">
                     <span class="font-mono text-xs">{{ handle }}</span>

resources/js/components/users/Listing.vue

@@ -83,12 +83,12 @@
                                 <div class="role-index-field">
                                     <div v-if="user.super" class="role-index-field-item mr-1 mb-1.5">{{ __('Super Admin') }}</div>
                                     <div v-if="!roles || roles.length === 0" />
-                                    <div v-for="(role, i) in (roles || [])" class="role-index-field-item mr-1 mb-1.5">{{ role.title }}</div>
+                                    <div v-for="(role, i) in (roles || [])" class="role-index-field-item mr-1 mb-1.5">{{ __(role.title) }}</div>
                                 </div>
                             </template>
                             <template slot="cell-groups" slot-scope="{ row: user, value: groups }">
                                 <div class="groups-index-field">
-                                    <div v-for="group in (groups || [])" class="groups-index-field-item mr-1 mb-1.5">{{ group.title }}</div>
+                                    <div v-for="group in (groups || [])" class="groups-index-field-item mr-1 mb-1.5">{{ __(group.title) }}</div>
                                 </div>
                             </template>
                             <template slot="actions" slot-scope="{ row: user, index }">