Răsfoiți Sursa

[frontend] UI components not working as expected

- Fix usage of slots in Dropdown, DateRangePicker & FacetSelector
- Fix value emit in SearchInput
sreenaths 4 ani în urmă
părinte
comite
d691efcae2

+ 1 - 1
desktop/core/src/desktop/js/components/DateRangePicker.vue

@@ -18,7 +18,7 @@
 
 <template>
   <dropdown-panel :text="selectedRange.title" :inline="inline">
-    <template #contents="{ closePanel }">
+    <template #default="{ closePanel }">
       <div class="date-range-picker-panel">
         <div class="date-range-picker-body">
           <div class="date-range-picker-preset">

+ 3 - 3
desktop/core/src/desktop/js/components/FacetSelector.vue

@@ -18,7 +18,7 @@
 
 <template>
   <dropdown-panel :text="label" :disabled="disabled">
-    <template #contents="{ closePanel }">
+    <template #default="slotProps">
       <div class="facet-selector">
         <div v-if="facet.values.length > 1" class="facet-select-all">
           <div class="facet-list-entry">
@@ -39,12 +39,12 @@
           </div>
         </div>
         <div class="facet-selector-actions">
-          <hue-link @click="cancel(closePanel)">{{ I18n('Cancel') }}</hue-link>
+          <hue-link @click="cancel(slotProps.closePanel)">{{ I18n('Cancel') }}</hue-link>
           <hue-button
             :small="true"
             :primary="true"
             :disabled="applyDisabled"
-            @click="apply(closePanel)"
+            @click="apply(slotProps.closePanel)"
           >
             {{ I18n('Apply') }}
           </hue-button>

+ 1 - 1
desktop/core/src/desktop/js/components/SearchInput.vue

@@ -35,7 +35,7 @@
           @input="$emit('input', $event.target.value)"
           @focusin="hasFocus = true"
           @focusout="hasFocus = false"
-          @keyup.enter="$emit('search', value)"
+          @keyup.enter="$emit('search', $event.target.value)"
         />
         <input
           v-model="autocomplete"

+ 4 - 1
desktop/core/src/desktop/js/components/dropdown/DropdownDrawer.vue

@@ -98,6 +98,7 @@
           this.position.left = '';
           this.position.right = `${rightOffset}px`;
         }
+
         defer(() => {
           addClickOutsideHandler(this.$el, event => {
             if (this.triggerElement !== event.target) {
@@ -105,6 +106,8 @@
             }
           });
         });
+
+        this.$forceUpdate();
       }
     },
     methods: {
@@ -123,7 +126,7 @@
 
   .hue-dropdown-drawer {
     position: fixed;
-    z-index: 1061;
+    z-index: 10610;
 
     &.open {
       .hue-dropdown-drawer-inner {

+ 7 - 2
desktop/core/src/desktop/js/components/dropdown/DropdownPanel.vue

@@ -24,8 +24,13 @@
     <hue-button v-else ref="triggerButtonElement" :disabled="disabled" @click="toggleDrawer">
       {{ text }} <i class="fa fa-caret-down" />
     </hue-button>
-    <DropdownDrawer :open="open" :trigger-element="triggerElement" @close="closeDrawer">
-      <slot />
+    <DropdownDrawer
+      :open="open"
+      :trigger-element="triggerElement"
+      :close-on-click="false"
+      @close="closeDrawer"
+    >
+      <slot :close-panel="closeDrawer" />
     </DropdownDrawer>
   </div>
 </template>