@webitel/ui-sdk 0.1.1 → 0.1.2-vite

package/src/components/wt-table/wt-table.vue

@@ -0,0 +1,269 @@
+<template>
+  <div class="wt-table">
+    <table class="wt-table__table">
+      <thead class="wt-table__head">
+      <tr :style="columnsStyle" class="wt-table__tr wt-table__tr__head">
+        <th v-if="selectable" class="wt-table__th wt-table__th--checkbox">
+          <wt-checkbox
+            :selected="isAllSelected"
+            @change="selectAll"
+          ></wt-checkbox>
+        </th>
+        <th
+          v-for="(col, key) of dataHeaders"
+          :key="key"
+          :class="[
+           {'wt-table__th--sortable': isColSortable(col)},
+           `wt-table__th--sort-${col.sort}`,
+        ]"
+          class="wt-table__th"
+          @click="sort(col)"
+        >
+          <div class="wt-table__th__text">{{ col.text }}</div>
+          <wt-icon
+            v-if="sortable"
+            class="wt-table__th__sort-arrow wt-table__th__sort-arrow--asc"
+            icon="sort-arrow-up"
+            size="sm"
+          ></wt-icon>
+          <wt-icon
+            v-if="sortable"
+            class="wt-table__th__sort-arrow wt-table__th__sort-arrow--desc"
+            icon="sort-arrow-down"
+            size="sm"
+          ></wt-icon>
+        </th>
+        <th v-if="gridActions" class="wt-table__th__actions">
+          <slot name="actions-header"></slot>
+        </th>
+      </tr>
+      </thead>
+
+      <tbody class="wt-table__body">
+      <tr
+        v-for="(row, dataKey) of data"
+        :key="dataKey"
+        :class="`wt-table__tr__${row.id || dataKey}`"
+        :style="columnsStyle"
+        class="wt-table__tr wt-table__tr__body"
+      >
+        <td v-if="selectable" class="wt-table__td wt-table__td--checkbox">
+          <wt-checkbox
+            :selected="row._isSelected"
+            @change="row._isSelected = !row._isSelected"
+          ></wt-checkbox>
+        </td>
+
+        <td
+          v-for="(col, headerKey) of dataHeaders"
+          :key="headerKey"
+          class="wt-table__td"
+        >
+          <slot :index="dataKey" :item="row" :name="col.value">
+            <div>{{ row[col.value] }}</div>
+          </slot>
+        </td>
+
+        <td v-if="gridActions" class="wt-table__td__actions">
+          <slot :index="dataKey" :item="row" name="actions"></slot>
+        </td>
+      </tr>
+      </tbody>
+
+      <tfoot v-if="isTableFooter" class="wt-table__foot">
+      <tr :style="columnsStyle" class="wt-table__tr wt-table__tr__foot">
+        <!--        empty checkbox column -->
+        <th v-if="selectable" class="wt-table__th__checkbox"></th>
+        <td
+          v-for="(col, headerKey) of dataHeaders"
+          :key="headerKey"
+          class="wt-table__td"
+        >
+          <slot :header="col" :index="headerKey" :name="`${col.value}-footer`"></slot>
+        </td>
+      </tr>
+      </tfoot>
+    </table>
+  </div>
+</template>
+
+<script>
+import getNextSortOrder from './_internals/getSortOrder';
+
+export default {
+  name: 'wt-table',
+  props: {
+    headers: {
+      type: Array,
+      default: () => [],
+    },
+    data: {
+      type: Array,
+      default: () => [],
+    },
+    sortable: {
+      type: Boolean,
+      default: false,
+    },
+    selectable: {
+      type: Boolean,
+      default: true,
+    },
+    gridActions: {
+      type: Boolean,
+      default: true,
+    },
+  },
+
+  data: () => ({}),
+
+  computed: {
+    isAllSelected() {
+      return this.data.every((item) => item._isSelected);
+    },
+
+    dataHeaders() {
+      return this.headers
+      .filter((header) => header.show === undefined || header.show)
+      .map((header) => {
+        if (!header.text && header.locale) {
+          return {
+            ...header,
+            text: typeof header.locale === 'string' ? this.$t(header.locale) : this.$t(...header.locale),
+          };
+        }
+        return header;
+      });
+    },
+
+    columnsStyle() {
+      let gridTemplateColumns = '';
+      if (this.selectable) gridTemplateColumns += '24px '; // checkbox
+
+      const defaultColumnWidth = 'minmax(140px, 1fr)';
+      this.dataHeaders.forEach((header) => {
+        gridTemplateColumns += ` ${(header.width || defaultColumnWidth).trim()}`;
+      });
+
+      if (this.gridActions) gridTemplateColumns += ` ${'112px'}`; // actions
+      return `grid-template-columns: ${gridTemplateColumns}`;
+    },
+
+    isTableFooter() {
+      return Object.keys(this.$slots).some((slotName) => slotName.includes('-footer'));
+    },
+  },
+
+  methods: {
+    sort(col) {
+      if (!this.isColSortable(col)) return;
+      const nextSort = getNextSortOrder(col.sort);
+      this.$emit('sort', col, nextSort);
+    },
+    isColSortable({ sort }) {
+      /*       --sortable = sortable && col.sort === undefined cause there may be some columns we don't want to sort
+            strict check for  === undefined is used because col.sort = null is sort order too (actualu, without sort)
+            so we need to check if this property is present
+    */
+      return this.sortable && sort !== undefined;
+    },
+    selectAll() {
+      const { isAllSelected } = this;
+      // eslint-disable-next-line no-param-reassign,no-return-assign
+      this.data.forEach((item) => item._isSelected = !isAllSelected);
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+@import './variables.scss';
+</style>
+
+<style lang="scss" scoped>
+
+.wt-table {
+  overflow: auto;
+}
+
+.wt-table__table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.wt-table__head {
+  display: block;
+  box-sizing: border-box;
+  background: var(--table-primary-color);
+  border: var(--table-head-border);
+  border-color: var(--table-head-border-color);
+  border-radius: var(--border-radius);
+}
+
+//.wt-table__head {
+//  display: block;
+//}
+
+.wt-table__tr {
+  display: grid;
+  padding: var(--table-row-padding);
+  transition: var(--transition);
+  grid-template-columns: repeat(auto-fit, var(--table-col-min-width));
+  grid-column-gap: var(--table-column-gap);
+
+  &:nth-child(2n) {
+    background: var(--table-secondary-color);
+  }
+}
+
+.wt-table__th,
+.wt-table__td {
+  @extend %typo-body-1;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  max-width: 100%;
+  height: fit-content;
+  min-height: var(--table-min-height);
+  padding: 0;
+  word-break: break-all;
+  overflow-wrap: break-word;
+
+  &__actions {
+    display: flex;
+    align-items: flex-start;
+    justify-content: flex-end;
+    gap: var(--spacing-xs);
+  }
+}
+
+.wt-table__th {
+  font-weight: normal;
+
+  &--sortable {
+    cursor: pointer;
+
+    &:hover ::v-deep .wt-icon__icon {
+      fill: var(--icon-color--hover);
+    }
+  }
+
+  .wt-table__th__sort-arrow {
+    display: none;
+    margin-left: var(--table-head-sort-arrow-margin);
+  }
+
+  &--sort-asc .wt-table__th__sort-arrow--asc {
+    display: block;
+  }
+
+  &--sort-desc .wt-table__th__sort-arrow--desc {
+    display: block;
+  }
+}
+
+.wt-table__foot {
+  border-color: var(--table-head-border-color);
+  border-top: var(--table-head-border);
+}
+</style>

package/src/components/wt-table-actions/__tests__/WtTableActions.spec.js

@@ -0,0 +1,9 @@
+import { shallowMount } from '@vue/test-utils';
+import WtTableActions from '../wt-table-actions.vue';
+
+describe('WtTableActions', () => {
+  it('renders a component', () => {
+    const wrapper = shallowMount(WtTableActions);
+    expect(wrapper.classes('wt-table-actions')).toBe(true);
+  });
+});

package/src/components/wt-table-actions/_variables.scss

@@ -0,0 +1,5 @@
+
+:root {
+  --table-actions-padding: var(--spacing-xs);
+  --table-actions-icon-gap: var(--spacing-xs);
+}

package/src/components/wt-table-actions/wt-table-actions.vue

@@ -0,0 +1,110 @@
+<template>
+  <aside class="wt-table-actions">
+    <slot></slot>
+    <wt-tooltip v-if="isImport">
+      <template v-slot:activator>
+        <wt-icon-btn
+          icon="download"
+          @click="$emit('input', 'import')"
+        ></wt-icon-btn>
+      </template>
+      {{ $t('reusable.import') }}
+    </wt-tooltip>
+    <wt-tooltip v-if="isExport">
+      <template v-slot:activator>
+        <wt-icon-btn
+          icon="upload"
+          @click="$emit('input', 'export')"
+        ></wt-icon-btn>
+      </template>
+      {{ $t('reusable.export') }}
+    </wt-tooltip>
+    <wt-tooltip v-if="isFilterReset">
+      <template v-slot:activator>
+        <wt-icon-btn
+          icon="clear"
+          @click="$emit('input', 'filterReset')"
+        ></wt-icon-btn>
+      </template>
+      {{ $t('webitelUI.tableActions.filterReset') }}
+    </wt-tooltip>
+    <wt-tooltip v-if="isColumnSelect">
+      <template v-slot:activator>
+        <wt-icon-btn
+          icon="column-select"
+          @click="$emit('input', 'columnSelect')"
+        ></wt-icon-btn>
+      </template>
+      {{ $t('webitelUI.tableActions.columnSelect') }}
+    </wt-tooltip>
+    <wt-tooltip v-if="isRefresh">
+      <template v-slot:activator>
+        <wt-icon-btn
+          icon="refresh"
+          @click="$emit('input', 'refresh')"
+        ></wt-icon-btn>
+      </template>
+      {{ $t('webitelUI.tableActions.refreshTable') }}
+    </wt-tooltip>
+    <wt-tooltip v-if="isSettings">
+      <template v-slot:activator>
+        <wt-icon-btn
+          :class="{'active': isSettingsActive}"
+          icon="filter"
+          @click="$emit('input', 'settings')"
+        ></wt-icon-btn>
+      </template>
+      {{ $t('webitelUI.tableActions.expandFilters') }}
+    </wt-tooltip>
+  </aside>
+</template>
+
+<script>
+export default {
+  name: 'wt-table-actions',
+  props: {
+    icons: {
+      type: Array,
+      default: () => ['refresh'],
+    },
+    isSettingsActive: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  computed: {
+    isImport() {
+      return this.icons.indexOf('import') !== -1;
+    },
+    isExport() {
+      return this.icons.indexOf('export') !== -1;
+    },
+    isFilterReset() {
+      return this.icons.indexOf('filter-reset') !== -1;
+    },
+    isColumnSelect() {
+      return this.icons.indexOf('column-select') !== -1;
+    },
+    isRefresh() {
+      return this.icons.indexOf('refresh') !== -1;
+    },
+    isSettings() {
+      return this.icons.indexOf('settings') !== -1;
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+@import './variables.scss';
+</style>
+
+<style lang="scss" scoped>
+
+.wt-table-actions {
+  display: flex;
+  align-items: center;
+  padding: var(--table-actions-padding);
+  gap: var(--table-actions-icon-gap);
+}
+</style>

package/src/components/wt-table-column-select/__tests__/WtTableColumnSelect.spec.js

@@ -0,0 +1,31 @@
+import { mount, shallowMount } from '@vue/test-utils';
+import WtTableColumnSelect from '../wt-table-column-select.vue';
+
+describe('WtTableColumnSelect', () => {
+  it('renders a component', () => {
+    const wrapper = shallowMount(WtTableColumnSelect, {
+      props: {
+        headers: [],
+      },
+    });
+    expect(wrapper.classes('wt-table-column-select')).toBe(true);
+  });
+  it('column select popup is invisible by default', () => {
+    const wrapper = shallowMount(WtTableColumnSelect, {
+      props: {
+        headers: [],
+      },
+    });
+    expect(wrapper.find('wt-table-column-select__popup').exists()).toBe(false);
+  });
+  it('column select popup is opening by icon-btn click', async () => {
+    const wrapper = mount(WtTableColumnSelect, {
+      props: {
+        headers: [],
+      },
+    });
+    wrapper.findComponent({ name: 'wt-icon-btn' }).vm.$emit('click');
+    await wrapper.vm.$nextTick();
+    expect(wrapper.find('.wt-table-column-select__popup').exists()).toBe(true);
+  });
+});

package/src/components/wt-table-column-select/wt-table-column-select.vue

@@ -0,0 +1,178 @@
+<template>
+  <div class="wt-table-column-select">
+    <wt-tooltip>
+      <template v-slot:activator>
+        <wt-icon-btn
+          icon="column-select"
+          @click="openPopup"
+        ></wt-icon-btn>
+      </template>
+      {{ $t('webitelUI.tableColumnSelect.title') }}
+    </wt-tooltip>
+    <wt-popup
+      v-if="isColumnSelectPopup"
+      class="wt-table-column-select__popup"
+      @close="close"
+    >
+      <template v-slot:title>
+        {{ $t('webitelUI.tableColumnSelect.title') }}
+      </template>
+      <template v-slot:main>
+        <div class="wt-table-column-select__popup-list-wrap">
+          <ul
+            class="wt-table-column-select__popup-list"
+            :class="{
+            'wt-table-column-select__popup-list--md':
+            changeableDraft.length > 10 && changeableDraft.length <= 20,
+            'wt-table-column-select__popup-list--lg':
+            changeableDraft.length > 20
+            }"
+          >
+            <li
+              v-for="(column, key) of changeableDraft"
+              :key="key"
+              class="wt-table-column-select__popup-item"
+              @click.capture.prevent="column.show = !column.show"
+            >
+              <wt-checkbox
+                v-model="column.show"
+                :label="shownColLabel(column)"
+              ></wt-checkbox>
+            </li>
+          </ul>
+        </div>
+      </template>
+      <template v-slot:actions>
+        <wt-button
+          @click="setShownColumns"
+        >{{ $t('reusable.add') }}
+        </wt-button>
+        <wt-button
+          color="secondary"
+          @click="close"
+        >{{ $t('reusable.cancel') }}
+        </wt-button>
+      </template>
+    </wt-popup>
+  </div>
+</template>
+
+<script>
+import deepCopy from 'deep-copy';
+
+export default {
+  name: 'wt-table-column-select',
+  props: {
+    headers: {
+      type: Array,
+      required: true,
+      description: 'Each header should have following schema: { value: String, show: Boolean, text: String }',
+    },
+    staticHeaders: {
+      type: Array,
+      default: () => [],
+      description: 'Header values to exclude from selection',
+    },
+  },
+
+  model: {
+    prop: 'headers',
+    event: 'change',
+  },
+
+  data: () => ({
+    draft: [], // headers draft
+    isColumnSelectPopup: false,
+  }),
+
+  watch: {
+    isColumnSelectPopup: {
+      handler() {
+        this.fillHeadersDraft();
+      },
+    },
+  },
+  computed: {
+    changeableDraft() {
+      return this.draft.filter((header) => !this.staticHeaders.includes(header.value)).sort((a, b) => {
+        return this.shownColLabel(a).localeCompare(this.shownColLabel(b));
+        // sorting headers for alphabet just in popup
+      });
+    },
+  },
+  methods: {
+    shownColLabel({ text, locale }) {
+      if (!text && locale) {
+        return typeof locale === 'string' ? this.$t(locale) : this.$t(...locale);
+      }
+      return text;
+    },
+    openPopup() {
+      this.isColumnSelectPopup = true;
+    },
+    close() {
+      this.isColumnSelectPopup = false;
+    },
+    fillHeadersDraft() {
+      this.draft = deepCopy(this.headers);
+    },
+    setShownColumns() {
+      this.$emit('change', this.draft);
+      this.close();
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+$list-height: 400px;
+$list-width-sm: calc(500px - var(--spacing-xl)); // all popup width - (paddings + overflow-padding)
+$list-width-md: calc(800px - var(--spacing-xl)); // all popup width - (paddings + overflow-padding)
+
+.wt-table-column-select {
+  line-height: 0; // prevent 24x28 icon height :/
+}
+.wt-table-column-select {
+  &__heading {
+    text-align: center;
+  }
+
+  &__popup-list-wrap {
+    max-height: $list-height;
+  }
+
+  &__popup-list {
+    @extend %wt-scrollbar;
+    max-height: $list-height;
+    width: $list-width-sm;
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+    overflow-x: hidden;
+
+    // for 10-30 items
+    &--md {
+      width: $list-width-md;
+      display: block;
+      column-count: 2;
+    }
+
+    // for 30+ items
+    &--lg {
+      width: $list-width-md;
+      max-height: none;
+      display: block;
+      column-count: 3;
+      overflow-y: auto;
+    }
+  }
+
+  &__popup-item {
+    display: flex;
+    align-items: center;
+    margin-right: var(--spacing-sm);
+    margin-bottom: var(--spacing-sm);
+  }
+}
+
+</style>

package/src/components/wt-tabs/__tests__/WtTabs.spec.js

@@ -0,0 +1,36 @@
+import { shallowMount } from '@vue/test-utils';
+import WtTabs from '../wt-tabs.vue';
+
+const tabs = [{ value: 'tab1', text: 'default' }];
+describe('WtTabs', () => {
+  it('renders a component', () => {
+    const wrapper = shallowMount(WtTabs);
+    expect(wrapper.classes('wt-tabs')).toBe(true);
+  });
+
+  it('component emits change at tab click', () => {
+    const wrapper = shallowMount(WtTabs, {
+      props: { tabs },
+    });
+    wrapper.find('.wt-tab').trigger('click');
+    expect(wrapper.emitted().change.pop()).toEqual([tabs[0]]);
+  });
+
+  it('renders tab default content', () => {
+    const wrapper = shallowMount(WtTabs, {
+      props: { tabs },
+    });
+    expect(wrapper.find('.wt-tab').text()).toBe(tabs[0].text);
+  });
+
+  it('renders tab custom content via default slot', () => {
+    const custom = 'custom name';
+    const wrapper = shallowMount(WtTabs, {
+      props: { tabs },
+      slots: {
+        tab1: custom,
+      },
+    });
+    expect(wrapper.find('.wt-tab').text()).toBe(custom);
+  });
+});

package/src/{css/components/molecules → components}/wt-tabs/_variables.scss

@@ -1,14 +1,14 @@
-
-:root {
-  --tabs-underiline-height: 1px;
-  --tabs-underiline-color: transparent;
-
-  --tab-padding: 20px 0;
-  --tab-margin: 0 5px;
-  --tab-color: var(--text-outline-color);
-  --tab--hover-color: var(--text-primary-color);
-  --tab--active-color: var(--text-primary-color);
-  --tab-border: 2px solid;
-  --tab--active-border-color: var(--main-accent-color);
-  --tab-z-index: 1;
-}
+
+:root {
+  --tabs-underiline-height: 1px;
+  --tabs-underiline-color: transparent;
+
+  --tab-padding: var(--spacing-2xs);
+  --tab-gap: var(--spacing-2xs);
+  --tab-color: var(--text-outline-color);
+  --tab--hover-color: var(--text-primary-color);
+  --tab--active-color: var(--text-primary-color);
+  --tab-border: 4px solid;
+  --tab--active-border-color: var(--primary-color);
+  --tab-z-index: 1;
+}