[6.x] Combobox 2.0

.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 cleanCodeSnippet from './clean-code-snippet';
@@ -23,6 +23,7 @@ router.on('before', (event) => {
 
 setup(async (app) => {
   window.__ = translate;
+  window.__n = translateChoice;
 
   window.Statamic = {
       $config: {
@@ -54,6 +55,7 @@ setup(async (app) => {
   };
 
   app.config.globalProperties.__ = translate;
+  app.config.globalProperties.__n = translateChoice;
   app.config.globalProperties.$date = new DateFormatter;
   app.config.globalProperties.cp_url = (url) => url;
   app.config.globalProperties.$portals = portals;

.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-dark-150"
+                            class="font-mono text-2xs text-gray-500 dark:text-dark-150 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

@@ -32,7 +32,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>
@@ -42,18 +42,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')"
+                                :aria-label="__('Remove :label', { label: getOptionLabel(option) })"
                                 @click="deselect(option.value)"
                             >
                                 <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"