@webitel/ui-sdk 0.9.64 → 1.0.1

package/src/modules/QueryFilters/mixins/paginationFilterMixin.js

@@ -0,0 +1,76 @@
+import baseFilterMixin from './baseFilterMixin/baseFilterMixin';
+
+export default {
+  mixins: [baseFilterMixin],
+
+  props: {
+    isNext: {
+      type: Boolean,
+      default: true,
+    },
+  },
+
+  computed: {
+    isPrev() {
+      return this.page > 1;
+    },
+  },
+
+  methods: {
+    restore() {
+      this.restorePage();
+      this.restoreSize();
+    },
+
+    restorePage() {
+      const defaultPage = 1;
+      const value = +this.getValueFromQuery({ filterQuery: 'page' }) || defaultPage;
+      this.setPage(value);
+    },
+
+    restoreSize() {
+      const defaultSize = 10;
+      const value = +this.getValueFromQuery({ filterQuery: 'size' }) || defaultSize;
+      this.setSize(value);
+    },
+
+    next() {
+      this.$emit('input');
+      const value = this.page + 1;
+      this.setPage(value);
+      this.setValueToQuery({
+        filterQuery: 'page',
+        value,
+      });
+    },
+
+    prev() {
+      this.$emit('input');
+      const value = this.page - 1;
+      this.setPage(value);
+      this.setValueToQuery({
+        filterQuery: 'page',
+        value,
+      });
+    },
+
+    resetPage() {
+      this.$emit('input');
+      const value = 1;
+      this.setPage(value);
+      this.setValueToQuery({
+        filterQuery: 'page',
+        value,
+      });
+    },
+
+    sizeChange(value) {
+      this.$emit('input');
+      this.setSize(value);
+      this.setValueToQuery({
+        filterQuery: 'size',
+        value,
+      });
+    },
+  },
+};

package/src/modules/QueryFilters/store/QueryFiltersStoreModule.js

@@ -43,12 +43,6 @@ export default class QueryFiltersStoreModule extends BaseStoreModule {
     },
   };
 
-  generateQueryControllerActions(controllerNamespace) {
-    this.actions.SET_VALUE_TO_QUERY = (context, payload) => context.dispatch(`${controllerNamespace}/SET_VALUE_TO_QUERY`, payload, { root: true });
-    this.actions.GET_VALUE_FROM_QUERY = (context, payload) => context.dispatch(`${controllerNamespace}/GET_VALUE_FROM_QUERY`, payload, { root: true });
-    return this;
-  }
-
   constructor({ state = {} } = {}) {
     super();
     this.state = state;

package/src/modules/QueryFilters/store/queryFilters.js

@@ -0,0 +1,6 @@
+import QueryFiltersStoreModule from './QueryFiltersStoreModule';
+/*
+ * @deprecated: PLEASE USE QUERY_FILTERS_STORE_MODULE
+ */
+
+export default () => new QueryFiltersStoreModule().getModule();

package/src/components/atoms/wt-badge/__tests__/WtBadge.spec.js

@@ -1,19 +0,0 @@
-import { shallowMount } from '@vue/test-utils';
-import WtBadge from '../wt-badge.vue';
-
-describe('WtBadge', () => {
-  it('renders a component', () => {
-    const wrapper = shallowMount(WtBadge);
-    expect(wrapper.classes('wt-badge')).toBe(true);
-  });
-
-  it('renders a badge content via default slot', () => {
-    const content = 'badge content';
-    const wrapper = shallowMount(WtBadge, {
-      slots: {
-        default: content,
-      },
-    });
-    expect(wrapper.find('.wt-badge').text()).toBe(content);
-  });
-});

package/src/components/atoms/wt-badge/wt-badge.vue

@@ -1,23 +0,0 @@
-<template>
-  <span class="wt-badge" :class="`wt-badge--${color}-color`">
-    <slot></slot>
-  </span>
-</template>
-
-<script>
-  export default {
-    name: 'wt-badge',
-    props: {
-      color: {
-        type: String,
-        default: 'main',
-        options: ['main', 'outline', 'accent', 'secondary', 'success', 'danger', 'transfer'],
-        notes: '"main" and "outline" are badge-specific colors',
-      },
-    },
-  };
-</script>
-
-<style lang="scss" scoped>
-  @import '../../../css/components/atoms/wt-badge/wt-badge';
-</style>

package/src/css/components/atoms/wt-badge/_variables.scss

@@ -1,7 +0,0 @@
-
-:root {
-  --badge-padding: 5px 10px;
-  --badge-border-radius: 20px;
-  --badge-bg-color: var(--main-secondary-accent-color);
-  --badge-bg-color--outline: var(--main-outline-color);
-}

package/src/css/fonts/_fonts.scss

@@ -1,9 +0,0 @@
-@font-face {
-  font-family: 'Montserrat Semi';
-  src: url('../../assets/fonts/Montserrat/Montserrat-SemiBold.ttf') format('truetype');
-}
-
-@font-face {
-  font-family: 'Montserrat Regular';
-  src: url('../../assets/fonts/Montserrat/Montserrat-Regular.ttf') format('truetype');
-}

package/src/css/shadows/_shadows.scss

@@ -1,7 +0,0 @@
-:root {
-  --shadow-style-down-50: 0px 0px 1px rgba(0, 0, 0, 0.15), inset 1px 1px 1px rgba(0, 0, 0, 0.05);
-  --shadow-style-down-100: 0px 0px 1px rgba(0, 0, 0, 0.15), inset 1px 1px 1px rgba(0, 0, 0, 0.05), inset 0px 0px 8px rgba(0, 0, 0, 0.1);
-  --shadow-style-up-50: 1px 1px 2px rgba(0, 0, 0, 0.08), inset 1px 1px 1px #FFFFFF, inset -1px -1px 1px rgba(0, 0, 0, 0.05);
-  --shadow-style-up-100: 1px 1px 2px rgba(0, 0, 0, 0.05), -1px -1px 5px #FFFFFF, inset 1px 1px 1px #FFFFFF, inset -1px -1px 3px rgba(0, 0, 0, 0.1);
-  --shadow-style-font: 0px 0px 10px rgba(0, 0, 0, 0.1);
-}

package/src/css/sizes/_sizes.scss

@@ -1,2 +0,0 @@
-@import 'viewport-breakpoints';
-@import 'spacing';

package/src/css/sizes/_spacing.scss

@@ -1,33 +0,0 @@
-//@import './viewport-breakpoints';
-
-:root {
-  // Start point
-  --_spacing-multiplicity: 4px;
-
-  // Spacings
-  --spacing--xs: calc(var(--_spacing-multiplicity) * 1);
-  --spacing--sm: calc(var(--_spacing-multiplicity) * 2);
-  --spacing--md: calc(var(--_spacing-multiplicity) * 3);
-  --spacing--lg: calc(var(--_spacing-multiplicity) * 4);
-  --spacing--xl: calc(var(--_spacing-multiplicity) * 5);
-  --spacing--2xl: calc(var(--_spacing-multiplicity) * 6);
-  --spacing--3xl: calc(var(--_spacing-multiplicity) * 7);
-
-  // Border radius
-  --border-radius: var(--spacing--xs);
-
-  // DEPRECATED
-  --component-padding: var(--spacing--lg);
-  --component-spacing: var(--spacing--lg);
-  --icon-spacing: var(--spacing--sm);
-
-  //@media (#{$media} and #{$media-width-sm}) {
-  //  --component-padding: 10px;
-  //  --component-spacing: 10px;
-  //}
-  //
-  //@media (#{$media} and #{$media-width-xs}) {
-  //  --component-padding: 10px;
-  //  --component-spacing: 1px;
-  //}
-}

package/src/css/transitions/_transitions.scss

@@ -1 +0,0 @@
-@import "./fade/fade";

package/src/css/typography/_typography.scss

@@ -1,72 +0,0 @@
-
-%typo-heading-lg {
-  font: {
-    family: 'Montserrat Semi', monospace;
-    size: 24px;
-  }
-  line-height: 30px;
-}
-
-%typo-heading-md {
-  font: {
-    family: 'Montserrat Semi', monospace;
-    size: 20px;
-  }
-  line-height: 30px;
-}
-
-%typo-heading-sm {
-  font: {
-    family: 'Montserrat Semi', monospace;
-    size: 18px;
-  }
-  line-height: 24px;
-}
-
-%typo-strong-lg {
-  font: {
-    family: 'Montserrat Semi', monospace;
-    size: 14px;
-  }
-  line-height: 18px;
-}
-
-%typo-strong-md {
-  font: {
-    family: 'Montserrat Semi', monospace;
-    size: 12px;
-  }
-  line-height: 14px;
-}
-
-%typo-strong-sm {
-  font: {
-    family: 'Montserrat Semi', monospace;
-    size: 10px;
-  }
-  line-height: 12px;
-}
-
-%typo-body-lg {
-  font: {
-    family: 'Montserrat Regular', monospace;
-    size: 14px;
-  }
-  line-height: 18px;
-}
-
-%typo-body-md {
-  font: {
-    family: 'Montserrat Regular', monospace;
-    size: 12px;
-  }
-  line-height: 14px;
-}
-
-%typo-body-sm {
-  font: {
-    family: 'Montserrat Regular', monospace;
-    size: 10px;
-  }
-  line-height: 12px;
-}

package/src/modules/QueryFilters/components/__tests__/filter-pagination.spec.js

@@ -1,71 +0,0 @@
-import { shallowMount } from '@vue/test-utils';
-import BaseFilterSchema from '../../classes/BaseFilterSchema';
-import baseFilterMixin from '../../mixins/baseFilterMixin/baseFilterMixin';
-import FilterPagination from '../filter-pagination.vue';
-
-const pageDefaultValue = 1;
-const page = 2;
-const size = 20;
-
-const pageFilterSchema = new BaseFilterSchema({ value: page, defaultValue: pageDefaultValue });
-const sizeFilterSchema = new BaseFilterSchema({ value: size });
-
-describe('Pagination filter mixin', () => {
-  const setValue = jest.fn();
-  const setValueToQuery = jest.fn();
-  const getValueFromQuery = jest.fn(({ filterQuery }) => (filterQuery === 'page' ? page : size));
-
-  let wrapper;
-
-  jest.spyOn(baseFilterMixin.methods, 'setValue').mockImplementation(setValue);
-  jest.spyOn(baseFilterMixin.methods, 'setValueToQuery').mockImplementation(setValueToQuery);
-  jest.spyOn(baseFilterMixin.methods, 'getValueFromQuery').mockImplementation(getValueFromQuery);
-
-  const computed = {
-    pageFilterSchema() { return pageFilterSchema; },
-    sizeFilterSchema() { return sizeFilterSchema; },
-  };
-
-  beforeEach(() => {
-    setValue.mockClear();
-    setValueToQuery.mockClear();
-    getValueFromQuery.mockClear();
-  });
-
-  it('Correctly sets value from $route query', async () => {
-    wrapper = shallowMount(FilterPagination, {
-      computed,
-    });
-    expect(setValue).toHaveBeenNthCalledWith(1, { filter: 'page', value: page });
-    expect(setValue).toHaveBeenNthCalledWith(2, { filter: 'size', value: size });
-  });
-
-  it('At "prev" page, changes query and emits event', async () => {
-    wrapper = shallowMount(FilterPagination, { computed });
-    wrapper.vm.prev();
-    expect(wrapper.emitted().input).toBeTruthy();
-    expect(setValue).toHaveBeenLastCalledWith({ filter: 'page', value: page - 1 });
-  });
-
-  it('At "next" page, changes query and emits event', async () => {
-    wrapper = shallowMount(FilterPagination, { computed });
-    wrapper.vm.next();
-    expect(wrapper.emitted().input).toBeTruthy();
-    expect(setValue).toHaveBeenLastCalledWith({ filter: 'page', value: page + 1 });
-  });
-
-  it('At "resetPage" method, changes query and emits event', async () => {
-    wrapper = shallowMount(FilterPagination, { computed });
-    wrapper.vm.resetPage();
-    expect(wrapper.emitted().input).toBeTruthy();
-    expect(setValue).toHaveBeenLastCalledWith({ filter: 'page', value: pageDefaultValue });
-  });
-
-  it('At "sizeChange", changes query and emits event', async () => {
-    const newSize = 40;
-    wrapper = shallowMount(FilterPagination, { computed });
-    wrapper.vm.sizeChange(newSize);
-    expect(wrapper.emitted().input).toBeTruthy();
-    expect(setValue).toHaveBeenLastCalledWith({ filter: 'size', value: newSize });
-  });
-});

package/src/modules/QueryFilters/components/filter-pagination.vue

@@ -1,110 +0,0 @@
-<template>
-  <wt-pagination
-    :next="isNext"
-    :prev="isPrev"
-    :size="sizeFilterSchema.value"
-    debounce
-    @change="sizeChange"
-    @next="next"
-    @prev="prev"
-  ></wt-pagination>
-</template>
-
-<script>
-import getNamespacedState from '../../../store/helpers/getNamespacedState';
-import baseFilterMixin from '../mixins/baseFilterMixin/baseFilterMixin';
-
-export default {
-  name: 'filter-pagination',
-  mixins: [baseFilterMixin],
-  props: {
-    isNext: {
-      type: Boolean,
-      default: true,
-    },
-    pageFilterQuery: {
-      type: String,
-      default: 'page',
-    },
-    sizeFilterQuery: {
-      type: String,
-      default: 'size',
-    },
-  },
-
-  computed: {
-    pageFilterSchema() {
-      if (!this.$store) throw new Error('Vuex is required for page filter binding');
-      return getNamespacedState(this.$store.state, this.namespace)[this.pageFilterQuery];
-    },
-    sizeFilterSchema() {
-      if (!this.$store) throw new Error('Vuex is required for size filter binding');
-      return getNamespacedState(this.$store.state, this.namespace)[this.sizeFilterQuery];
-    },
-    isPrev() {
-      return this.pageFilterSchema.value > 1;
-    },
-  },
-
-  methods: {
-    restore() {
-      this.restorePage();
-      this.restoreSize();
-    },
-
-    restorePage() {
-      const value = +this.getValueFromQuery({ filterQuery: this.pageFilterQuery });
-      if (value) this.setValue({ filter: this.pageFilterQuery, value });
-    },
-
-    restoreSize() {
-      const value = +this.getValueFromQuery({ filterQuery: this.sizeFilterQuery });
-      if (value) this.setValue({ filter: this.sizeFilterQuery, value });
-    },
-
-    next() {
-      this.$emit('input');
-      const value = this.pageFilterSchema.value + 1;
-      this.setValue({ filter: this.pageFilterQuery, value });
-      this.setValueToQuery({
-        filterQuery: this.pageFilterQuery,
-        value,
-      });
-    },
-
-    prev() {
-      this.$emit('input');
-      const value = this.pageFilterSchema.value - 1;
-      this.setValue({ filter: this.pageFilterQuery, value });
-      this.setValueToQuery({
-        filterQuery: this.pageFilterQuery,
-        value,
-      });
-    },
-
-    resetPage() {
-      this.$emit('input');
-      const value = this.pageFilterSchema.defaultValue;
-      this.setValue({ filter: this.pageFilterQuery, value });
-      this.setValueToQuery({
-        filterQuery: this.pageFilterQuery,
-        value,
-      });
-    },
-
-    sizeChange(value) {
-      this.$emit('input');
-      this.setValue({ filter: this.sizeFilterQuery, value });
-      this.setValueToQuery({
-        filterQuery: this.sizeFilterQuery,
-        value,
-      });
-    },
-  },
-};
-
-</script>
-
-<style scoped>
-
-</style>

package/src/modules/QueryFilters/store/QueryControllerStoreModule.js

@@ -1,64 +0,0 @@
-import deepEqual from 'deep-equal';
-import BaseStoreModule from '../../../store/BaseStoreModules/BaseStoreModule';
-
-export default class QueryControllerStoreModule extends BaseStoreModule {
-  getters = {
-    GET_VALUE_FROM_QUERY: (state) => ({ filterQuery }) => state.router.currentRoute.query[filterQuery],
-  }
-
-  actions = {
-    // OVERRIDE ME
-    // eslint-disable-next-line no-unused-vars
-    BEFORE_CHANGE_ROUTE_QUERY_HOOK: (context, { query, filterQuery, value }) => query,
-    // OVERRIDE ME
-    AFTER_CHANGE_ROUTE_QUERY_HOOK: (context, { query }) => query,
-    _CHANGE_ROUTE_QUERY: async (context, { filterQuery, value }) => {
-      try {
-        const { router } = context.state;
-        let query = { ...router.currentRoute.query };
-        query[filterQuery] = value;
-        query = await context.dispatch('BEFORE_CHANGE_ROUTE_QUERY_HOOK', { query, filterQuery, value });
-        await router.replace({
-          name: router.currentRoute.name,
-          query,
-        });
-        await context.dispatch('AFTER_CHANGE_ROUTE_QUERY_HOOK', { query });
-      } catch (err) {
-        throw err;
-      }
-    },
-    SET_VALUE_TO_QUERY: async (
-      context,
-      { filterQuery, value, storedProp = 'id' },
-    ) => {
-      try {
-        let newValue = '';
-        if (Array.isArray(value)) {
-          if (value.length && typeof value[0] !== 'object') {
-            newValue = value;
-          } else {
-            newValue = value.map((item) => item[storedProp]);
-          }
-        } else if (typeof value === 'object' && value !== null) {
-          newValue = value[storedProp];
-        } else {
-          newValue = value;
-        }
-        if (!deepEqual(context.state.router.currentRoute.query[filterQuery], newValue)) {
-          await context.dispatch('_CHANGE_ROUTE_QUERY', {
-            value: newValue,
-            filterQuery,
-          });
-        }
-      } catch (err) {
-        throw err;
-      }
-    },
-  };
-
-  constructor({ router } = {}) {
-    super();
-    if (!router) throw new Error('Pass router object to QueryController Store Module');
-    this.state.router = router;
-  }
-}

package/src/modules/QueryFilters/store/__tests__/QueryControllerStoreModule.spec.js

@@ -1,42 +0,0 @@
-import { createLocalVue } from '@vue/test-utils';
-import VueRouter from 'vue-router';
-import Vuex from 'vuex';
-import QueryContrllerStoreModule from '../QueryControllerStoreModule';
-
-const localVue = createLocalVue();
-localVue.use(Vuex);
-localVue.use(VueRouter);
-const router = new VueRouter();
-
-const filterQuery = 'team';
-
-describe('Query Controller Store Module Actions', () => {
-  const store = new Vuex.Store({
-    ...new QueryContrllerStoreModule({ router }).getModule(),
-  });
-
-  beforeEach(() => {
-    router.replace('/');
-  });
-
-  it('Array of objects', async () => {
-    const value = [{ name: 'team 1', id: '1' }, { name: 'team 2', id: '2' }];
-    await store.dispatch('SET_VALUE_TO_QUERY', { filterQuery, value });
-    const queryValue = await store.getters.GET_VALUE_FROM_QUERY({ filterQuery });
-    expect(queryValue).toEqual(['1', '2']);
-  });
-
-  it('Array of values', async () => {
-    const value = ['hello', '1'];
-    await store.dispatch('SET_VALUE_TO_QUERY', { filterQuery, value });
-    const queryValue = await store.getters.GET_VALUE_FROM_QUERY({ filterQuery });
-    expect(queryValue).toEqual(value);
-  });
-
-  it('String value', async () => {
-    const value = 'hello there';
-    await store.dispatch('SET_VALUE_TO_QUERY', { filterQuery, value });
-    const queryValue = await store.getters.GET_VALUE_FROM_QUERY({ filterQuery });
-    expect(queryValue).toEqual(value);
-  });
-});