@webitel/ui-sdk 24.10.32 → 24.10.33

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "24.10.32",
+  "version": "24.10.33",
   "private": false,
   "scripts": {
     "dev": "vite",

package/src/components/wt-intersection-observer/__tests__/WtIntersectionObserver.spec.js

@@ -0,0 +1,12 @@
+import { shallowMount } from '@vue/test-utils';
+import WtIntersectionObserver from '../wt-intersection-observer.vue';
+
+describe('WtIntersectionObserver', () => {
+  const next = () => true;
+  it('renders a component', () => {
+    const wrapper = shallowMount(WtIntersectionObserver, {
+      props: { next }
+    });
+    expect(wrapper.exists()).toBe(true);
+  });
+});

package/src/components/wt-intersection-observer/wt-intersection-observer.vue

@@ -0,0 +1,56 @@
+<template>
+  <wt-loader
+    v-if="loading"
+    size="sm"
+  />
+  <div ref="intersectionTarget" />
+</template>
+
+<script setup>
+import { useIntersectionObserver } from '@vueuse/core';
+import { onMounted, onUnmounted, ref } from 'vue';
+
+const props = defineProps({
+  next: {
+    type: Function,
+    required: true,
+  },
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits([
+  'next',
+]);
+
+const intersectionTarget = ref(null);
+
+let stopObs;
+
+onMounted(() => {
+  /**
+   *
+   * Note, observer triggers at init, so it should be used also as init function
+   * however, current filters module version is initializing list by itself, so we need to refactor filters ASAP
+   */
+  const { stop } = useIntersectionObserver(intersectionTarget.value, ([{ isIntersecting }]) => {
+    if (isIntersecting && props.next) {
+      emit('next');
+    }
+  });
+
+  stopObs = stop;
+});
+
+onUnmounted(() => {
+  stopObs();
+});
+</script>
+
+<style scoped lang="scss">
+.wt-loader {
+  margin: var(--spacing-lg) auto;
+}
+</style>

package/src/modules/Filters/classes/BaseFilterSchema.js

@@ -1,6 +1,17 @@
-import { localStorageGetter, queryGetter, valueGetter } from '../scripts/getters/index.js';
-import { localStorageRestore, queryRestore } from '../scripts/restores/index.js';
-import { localStorageSetter, querySetter, valueSetter } from '../scripts/setters/index.js';
+import {
+  localStorageGetter,
+  queryGetter,
+  valueGetter,
+} from '../scripts/getters/index.js';
+import {
+  localStorageRestore,
+  queryRestore,
+} from '../scripts/restores/index.js';
+import {
+  localStorageSetter,
+  querySetter,
+  valueSetter,
+} from '../scripts/setters/index.js';
 
 const convertGetterArray = (context) => (getters) => {
   const availableGetters = ['value', 'query', 'localStorage'];

package/src/modules/Filters/components/filter-select.vue

@@ -3,9 +3,9 @@
     :close-on-select="!filterSchema.multiple"
     :multiple="filterSchema.multiple"
     :options="options"
+    :search-method="search"
     :track-by="trackBy"
     :value="value"
-    :search-method="search"
     v-bind="attrs"
     @input="setValue"
   />
@@ -13,7 +13,7 @@
 
 <script setup>
 
-import { computed, reactive, ref, useAttrs, watch } from 'vue';
+import { computed, reactive, useAttrs } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useStore } from 'vuex';
 import isEmpty from '../../../scripts/isEmpty.js';

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

@@ -166,7 +166,10 @@ export default class FiltersStoreModule extends BaseStoreModule {
       const wildcardListeners = context.state._emitter.all.get('*');
       const eventListeners = context.state._emitter.all.get(event);
 
-      const listeners = [...(wildcardListeners || []), ...(eventListeners || [])];
+      const listeners = [
+        ...(wildcardListeners || []),
+        ...(eventListeners || []),
+      ];
 
       if (!listeners) {
         console.info(`No listeners for ${event} event`);