[6.x] Combobox 2.0 (#13843)

Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Co-authored-by: Jason Varga <jason@pixelfear.com>

Author: 3 people

.storybook/preview.ts

@@ -5,7 +5,7 @@ import {router} from '@inertiajs/vue3';
 import {action} from 'storybook/actions';
 import './storybook.css';
 import './theme.css';
-import {translate} from '@/translations/translator';
+import {translate, translateChoice} from '@/translations/translator';
 import registerUiComponents from '@/bootstrap/ui';
 import DateFormatter from '@/components/DateFormatter';
 import NumberFormatter from '@/components/NumberFormatter';
@@ -25,6 +25,7 @@ router.on('before', (event) => {
 
 setup(async (app) => {
   window.__ = translate;
+  window.__n = translateChoice;
 
   window.Statamic = {
       $config: {
@@ -63,6 +64,7 @@ setup(async (app) => {
   };
 
   app.config.globalProperties.__ = translate;
+  app.config.globalProperties.__n = translateChoice;
   app.config.globalProperties.$date = new DateFormatter;
   app.config.globalProperties.$number = new NumberFormatter;
   app.config.globalProperties.cp_url = (url) => url;

.storybook/storybook.css

@@ -9,6 +9,8 @@
 @custom-variant dark (&:where(.dark, .dark *));
 
 :root {
+    --focus-outline-color: var(--color-blue-400);
+
     /* GROUP VARIABLES -- DECORATION -- COLOURS
     =================================================== */
     --color-code-background: hsl(287deg 80% 93.5%);

resources/js/components/SiteSelector.vue

@@ -15,6 +15,8 @@ defineEmits(['update:modelValue']);
         :options="sites"
         option-label="name"
         option-value="handle"
+        align="end"
+        :adaptive-width="true"
         :model-value="modelValue"
         @update:model-value="$emit('update:modelValue', $event)"
     />

resources/js/components/field-conditions/Condition.vue

@@ -15,10 +15,10 @@
                 <template #no-options><div class="hidden" /></template>
                 <template #option="option">
                     <div class="flex items-center">
-                        <span v-text="option.label" />
+                        <span class="flex-shrink-0 truncate" v-text="option.label" />
                         <span
                             v-text="option.value"
-                            class="font-mono text-2xs text-gray-500 dark:text-gray-300"
+                            class="font-mono text-2xs text-gray-500 dark:text-gray-300 truncate"
                             :class="{ 'ml-2': option.label }"
                         />
                     </div>
@@ -29,7 +29,7 @@
             </Combobox>
         </div>
 
-        <div class="w-auto min-w-32">
+        <div class="w-auto min-w-40">
             <Select
                 class="w-full"
                 :model-value="condition.operator"

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

@@ -76,7 +76,7 @@
                             <button
                                 type="button"
                                 class="opacity-75 hover:opacity-100 cursor-pointer"
-                                :aria-label="__('Deselect option')"
+                                :aria-label="__('Remove :label', { label: rule })"
                                 @click="remove(rule)"
                             >
                                 &times;
@@ -236,6 +236,8 @@ export default {
             if (!this.rules.includes(rule)) {
                 this.rules.push(rule);
             }
+
+            this.$nextTick(() => this.$refs.rulesSelect.focus());
         },
 
         add(rule) {
@@ -258,8 +260,6 @@ export default {
             if (this.searchNotFound(rulesSelect) || this.hasUnfinishedParameters(rule)) return;
 
             this.add(rule);
-
-            this.$nextTick(() => this.$refs.searchInput.blur());
         },
 
         remove(rule) {

resources/js/components/fieldtypes/DictionaryFieldtype.vue

@@ -33,7 +33,7 @@
                     <div
                         v-for="option in selectedOptions"
                         :key="getOptionValue(option)"
-                        class="sortable-item cursor-grab"
+                        class="sortable-item cursor-grab active:cursor-grabbing"
                     >
                         <Badge size="lg" color="white">
                             <div v-if="labelHtml" v-html="getOptionLabel(option)"></div>
@@ -43,18 +43,14 @@
                                 v-if="!disabled && !readOnly"
                                 type="button"
                                 class="-mx-3 cursor-pointer px-3 text-gray-400 hover:text-gray-700"
-                                :aria-label="__('Deselect option')"
-                                @click="deselect(option.value)"
+                                :aria-label="__('Remove :label', { label: getOptionLabel(option) })"
+                                @click="deselect(getOptionValue(option))"
                             >
                                 <span>&times;</span>
                             </button>
-                            <button
-                                v-else
-                                type="button"
-                                class="-mx-3 cursor-pointer px-3 text-gray-400 hover:text-gray-700"
-                            >
+                            <span v-else class="-mx-3 cursor-pointer px-3 text-gray-400 hover:text-gray-700">
                                 <span>&times;</span>
-                            </button>
+                            </span>
                         </Badge>
                     </div>
                 </div>

resources/js/components/fieldtypes/SelectFieldtype.vue

@@ -1,5 +1,6 @@
 <template>
     <Combobox
+        :id="id"
         :clearable="config.clearable"
         :disabled="config.disabled"
         :label-html="config.label_html"
@@ -11,7 +12,7 @@
         :read-only="isReadOnly"
         :searchable="config.searchable || config.taggable"
         :taggable="config.taggable"
-        :id="id"
+        :close-on-select="(config.taggable && !options.length) || !config.multiple"
         @update:modelValue="comboboxUpdated"
     />
 </template>

resources/js/components/fieldtypes/TagsFieldtype.vue

@@ -8,6 +8,7 @@
         :placeholder="__(config.placeholder)"
         :read-only="isReadOnly"
         :taggable="true"
+        :should-open-dropdown="(open) => open && options.length > 0"
         @update:modelValue="update"
     />
 </template>

resources/js/components/global-header/SiteSelector.vue

@@ -10,6 +10,8 @@
             size="sm"
             variant="ghost"
             icon="globe-arrow"
+            align="end"
+            :adaptive-width="true"
             class="[&_[data-ui-combobox-trigger]]:text-white/85"
         />
     </div>

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

@@ -11,6 +11,7 @@
             :placeholder="__(config.placeholder) || __('Choose...')"
             :read-only="readOnly"
             :taggable="isTaggable"
+            :close-on-select="isTaggable"
             option-label="title"
             option-value="id"
             @update:modelValue="itemsSelected"
@@ -27,7 +28,7 @@
                 <div v-text="noOptionsText" />
             </template>
             <template #selected-option>
-                <span v-if="items.length === 1" v-text="items[0].title"></span>
+                <span v-if="items.length === 1" v-text="items[0].title" class="truncate"></span>
             </template>
             <template #selected-options>
                 <!-- We don't want to display the selected options here. The RelationshipInput component does that for us. -->