@webitel/ui-sdk 3.2.30 → 3.2.32

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "3.2.30",
+  "version": "3.2.32",
   "private": false,
   "scripts": {
     "serve-lib": "vue-cli-service serve",

package/src/components/molecules/wt-search-bar/wt-search-bar.vue

@@ -7,11 +7,12 @@
   >
     <div class="wt-search-bar__wrapper">
       <input
-        :placeholder="searchBarPlaceholder"
+        :placeholder="placeholder || $t('webitelUI.searchBar.placeholder')"
         :value="value"
         class="wt-search-bar__input"
         type="search"
-        v-on="listeners"
+        @input="handleInput($event.target.value)"
+        @keyup="handleKeyup"
       >
       <div class="wt-search-bar__search-icon">
         <slot name="search-icon">
@@ -30,86 +31,67 @@
   </div>
 </template>
 
-<script>
+<script setup>
 import debounce from '../../../scripts/debounce';
 
-export default {
-  name: 'wt-search-bar',
-  props: {
-    /**
-     * Current search-bar value (`v-model`)
-     */
-    value: {
-      type: String,
-      default: '',
-    },
-    /**
-     * search-bar placeholder
-     */
-    placeholder: {
-      type: String,
-    },
-    debounce: {
-      type: Boolean,
-      default: false,
-    },
-    debounceDelay: {
-      type: Number,
-      default: 1000,
-    },
-    outline: {
-      type: Boolean,
-      default: false,
-    },
+const props = defineProps({
+  /**
+   * Current search-bar value (`v-model`)
+   */
+  value: {
+    type: String,
+    default: '',
   },
-
-  watch: {
-    value() {
-      this.search.call(this);
-    },
+  /**
+   * search-bar placeholder
+   */
+  placeholder: {
+    type: String,
   },
-
-  created() {
-    if (this.debounce) {
-      this.search = debounce(this.search, this.debounceDelay);
-    }
+  debounce: {
+    type: Boolean,
+    default: false,
   },
-
-  computed: {
-    listeners() {
-      return {
-        ...this.$listeners,
-        input: (event) => this.$emit('input', event.target.value),
-        keyup: this.handleKeyup,
-      };
-    },
-    searchBarPlaceholder() {
-      return this.placeholder || this.$t('webitelUI.searchBar.placeholder');
-    },
+  debounceDelay: {
+    type: Number,
+    default: 1000,
   },
-
-  methods: {
-    search() {
-      this.$emit('search', this.value);
-    },
-    handleKeyup(event) {
-      if (event.key === 'Enter') {
-        this.$emit('enter');
-        event.preventDefault();
-      } else if (event.key === 'Esc') {
-        this.$emit('input', '');
-        event.preventDefault();
-      }
-    },
+  outline: {
+    type: Boolean,
+    default: false,
   },
-};
+});
+
+const emit = defineEmits([
+  'input',
+  'search',
+  'enter',
+]);
+
+const search = debounce((value) => {
+  emit('search', value);
+});
+
+function handleInput(value) {
+  emit('input', value);
+  search(value);
+}
+
+function handleKeyup(event) {
+  if (event.key === 'Enter') {
+    search(props.value);
+    event.preventDefault();
+  } else if (event.key === 'Esc') {
+    handleInput('');
+    event.preventDefault();
+  }
+}
 </script>
 
 <style lang="scss" scoped>
 .wt-search-bar {
   cursor: text;
 
-
   .wt-search-bar__wrapper {
     position: relative;
   }

package/src/modules/Filters/store/FiltersStoreModule.js

@@ -88,7 +88,7 @@ export default class FiltersStoreModule extends BaseStoreModule {
     RESET_FILTERS: (context) => {
       context.commit('RESET_FILTERS');
     },
-    ON_FILTER_SET: () => debounce((context, { filter, value }) => context.dispatch('LOAD_DATA_LIST'))(),
+    ON_FILTER_SET: debounce((context, { filter, value }) => context.dispatch('LOAD_DATA_LIST')),
 
     LOAD_DATA_LIST: (context) => context.dispatch(
       `${context.getters.TABLE_NAMESPACE}/LOAD_DATA_LIST`,