Merge pull request #18793 from craftcms/bugfix/settings-timezone

[6.x] Bugfix/settings timezone

Author: brandonkelly

resources/js/components/Combobox.vue

@@ -2,29 +2,24 @@
   import {t} from '@craftcms/cp';
   import InputCombobox from '@/components/form/InputCombobox.vue';
   import type {SelectItem} from '@/types';
-  import {computed} from 'vue';
+  import {computed, useSlots} from 'vue';
 
-  const emit = defineEmits<{
-    (e: 'update:modelValue', value: string): void;
-  }>();
+  const modelValue = defineModel<string | number | boolean>();
   const props = defineProps<{
-    modelValue: string;
     label: string;
     id?: string;
     name?: string;
     disabled?: boolean;
     options?: Array<SelectItem>;
     callouts?: Array<string>;
     error?: string;
+    requireOptionMatch?: boolean;
   }>();
 
-  const valueProxy = computed({
-    get() {
-      return props.modelValue;
-    },
-    set(newValue) {
-      emit('update:modelValue', newValue);
-    },
+  const slots = useSlots();
+  const forwardedSlots = computed(() => {
+    const {default: _, ...rest} = slots;
+    return rest;
   });
 </script>
 
@@ -35,14 +30,20 @@
     :name="name"
     :disabled="disabled"
     :has-feedback-for="error ? 'error' : ''"
+    :require-options-match="requireOptionMatch"
     v-bind="$attrs"
   >
     <InputCombobox
       slot="input"
-      v-model="valueProxy"
+      v-model="modelValue"
       :options="options"
       :label="label"
-    />
+    >
+      <!-- Forward all other slots -->
+      <template v-for="(_, name) in forwardedSlots" #[name]="slotData">
+        <slot :name="name" v-bind="slotData || {}"></slot>
+      </template>
+    </InputCombobox>
 
     <div slot="after">
       <slot name="after">

resources/js/components/form/CraftCombobox.vue

@@ -18,13 +18,13 @@
   import InputComboboxOption from '@/components/form/InputComboboxOption.vue';
 
   const emit = defineEmits<{
-    (e: 'update:modelValue', value: string): void;
+    (e: 'update:modelValue', value: string | number): void;
   }>();
   const props = withDefaults(
     defineProps<{
       label?: string;
       options?: Array<SelectItem>;
-      modelValue?: string;
+      modelValue?: string | number | boolean;
       requireOptionMatch?: boolean;
       transformModelValue?: (newValue: SelectOption | null) => string;
       class?: HTMLAttributes['class'];
@@ -60,7 +60,7 @@
 
       if (!selectedItem && !props.requireOptionMatch) {
         selectedItem = {
-          label: props.modelValue,
+          label: String(props.modelValue),
           value: props.modelValue,
         };
       }
@@ -76,7 +76,7 @@
   });
 
   const reference = useTemplateRef<HTMLElement | null>('reference');
-  const query = ref(props.modelValue ?? '');
+  const query = ref(String(props.modelValue ?? ''));
 
   const referenceCoordinates = computed(() => {
     const coordinates = reference.value?.getBoundingClientRect();
@@ -88,12 +88,12 @@
   });
 
   function matchesQuery(query: MaybeRef<string>, item: MaybeRef<SelectOption>) {
-    const lowerQuery = unref(query).toLowerCase();
+    const lowerQuery = String(unref(query)).toLowerCase();
     const option = unref(item);
 
     return (
       option.label.toLowerCase().includes(lowerQuery) ||
-      option.value.toLowerCase().includes(lowerQuery) ||
+      option.value.toString().toLowerCase().includes(lowerQuery) ||
       (option.data?.keywords?.toLowerCase().includes(lowerQuery) ?? false)
     );
   }

resources/js/components/form/InputCombobox.vue

@@ -15,16 +15,21 @@
         :checked="selected"
         :hint="option.data?.hint"
       >
-        <template
-          v-if="option.label.startsWith('$') || option.label.startsWith('@')"
-        >
-          <code>
+        <div class="flex gap-2 items-center">
+          <template v-if="option.data?.indicator">
+            <craft-indicator v-bind="option.data.indicator"></craft-indicator>
+          </template>
+          <template
+            v-if="option.label.startsWith('$') || option.label.startsWith('@')"
+          >
+            <code>
+              {{ option.label }}
+            </code>
+          </template>
+          <template v-else>
             {{ option.label }}
-          </code>
-        </template>
-        <template v-else>
-          {{ option.label }}
-        </template>
+          </template>
+        </div>
       </craft-option>
     </slot>
   </ComboboxOption>