fix(autocomplete): allow empty slot display and formatter prop usage

* fix 719 * remove autocomplete field prop default value ; fix 718
oruga-ui · Jan 4, 2024 · 6c9a60d · 6c9a60d
1 parent bbf8161
commit 6c9a60d
Showing 1 changed file with 28 additions and 11 deletions.
diff --git a/packages/oruga-next/src/components/autocomplete/Autocomplete.vue b/packages/oruga-next/src/components/autocomplete/Autocomplete.vue
@@ -81,7 +81,7 @@ const props = defineProps({
             ["auto", "top", "bottom"].indexOf(value) >= 0,
     },
     /** Property of the object (if data is array of objects) to use as display text, and to keep track of selected option */
-    field: { type: String, default: "value" },
+    field: { type: String, default: undefined },
     /** Property of the object (if `data` is array of objects) to use as display text of group */
     groupField: { type: String, default: undefined },
     /** Property of the object (if `data` is array of objects) to use as key to get items array of each group */
@@ -313,6 +313,14 @@ const emits = defineEmits<{
     (e: "scroll-end"): void;
 }>();
 
+const slots = defineSlots<{
+    header(): any;
+    group(props: { group: object; index: number }): any;
+    default(props: { option: object; value: unknown; index: number }): any;
+    empty(): any;
+    footer(): any;
+}>();
+
 const inputRef = ref<InstanceType<typeof OInput>>();
 const dropdownRef = ref<InstanceType<typeof ODropdown>>();
 const footerRef = ref<HTMLElement>();
@@ -356,7 +364,7 @@ watch(
 
         nextTick(() => {
             // Close dropdown if data is empty
-            if (isEmpty.value) isActive.value = false;
+            if (isEmpty.value && !slots.empty) isActive.value = false;
             // Close dropdown if input is clear or else open it
             else if (isFocused.value && (!props.openOnFocus || value))
                 isActive.value = !!value;
@@ -783,7 +791,8 @@ function itemOptionClasses(option): PropBind {
         :position="position"
         :teleport="teleport"
         :expanded="expanded"
-        @close="onDropdownClose">
+        @close="onDropdownClose"
+    >
         <template #trigger>
             <o-input
                 ref="inputRef"
@@ -812,7 +821,8 @@ function itemOptionClasses(option): PropBind {
                 @keydown.up.prevent="navigateItem(-1)"
                 @keydown.down.prevent="navigateItem(1)"
                 @icon-click="(event) => $emit('icon-click', event)"
-                @icon-right-click="rightIconClick" />
+                @icon-right-click="rightIconClick"
+            />
         </template>
 
         <o-dropdown-item
@@ -822,7 +832,8 @@ function itemOptionClasses(option): PropBind {
             aria-role="button"
             :tabindex="0"
             :class="itemHeaderClasses"
-            @click="(v, e) => selectHeaderOrFoterByClick(e, 'header')">
+            @click="(v, e) => selectHeaderOrFoterByClick(e, 'header')"
+        >
             <!--
                 @slot Define an additional header
             -->
@@ -834,7 +845,8 @@ function itemOptionClasses(option): PropBind {
                 v-if="element.group"
                 :key="groupindex + 'group'"
                 :tag="itemTag"
-                :class="itemGroupClasses">
+                :class="itemGroupClasses"
+            >
                 <!--
                     @slot Override the option grpup
                     @binding {object} group - options group
@@ -844,7 +856,8 @@ function itemOptionClasses(option): PropBind {
                     v-if="$slots.group"
                     name="group"
                     :group="element.group"
-                    :index="groupindex" />
+                    :index="groupindex"
+                />
                 <span v-else>
                     {{ element.group }}
                 </span>
@@ -859,7 +872,8 @@ function itemOptionClasses(option): PropBind {
                 :class="itemOptionClasses(option)"
                 aria-role="button"
                 :tabindex="0"
-                @click="(value, event) => setSelected(value, !keepOpen, event)">
+                @click="(value, event) => setSelected(value, !keepOpen, event)"
+            >
                 <!--
                     @slot Override the select option
                     @binding {object} option - option object
@@ -870,7 +884,8 @@ function itemOptionClasses(option): PropBind {
                     v-if="$slots.default"
                     :option="option"
                     :value="getValue(option)"
-                    :index="index" />
+                    :index="index"
+                />
                 <span v-else>
                     {{ getValue(option) }}
                 </span>
@@ -880,7 +895,8 @@ function itemOptionClasses(option): PropBind {
         <o-dropdown-item
             v-if="isEmpty && $slots.empty"
             :tag="itemTag"
-            :class="itemEmptyClasses">
+            :class="itemEmptyClasses"
+        >
             <!--
                 @slot Define content for empty state 
             -->
@@ -894,7 +910,8 @@ function itemOptionClasses(option): PropBind {
             aria-role="button"
             :tabindex="0"
             :class="itemFooterClasses"
-            @click="(v, e) => selectHeaderOrFoterByClick(e, 'footer')">
+            @click="(v, e) => selectHeaderOrFoterByClick(e, 'footer')"
+        >
             <!--
                 @slot Define an additional footer
             -->