@webitel/ui-sdk 0.1.2 → 0.1.3-vue3

package/src/components/organisms/wt-table/__tests__/WtTable.spec.js

@@ -0,0 +1,134 @@
+import { shallowMount } from '@vue/test-utils';
+import WtTable from '../wt-table.vue';
+import WtCheckbox from '../../../molecules/wt-checkbox/wt-checkbox.vue';
+
+const headers = [
+  {
+    text: 'heading 1',
+    value: 'h1',
+    sort: null,
+  },
+  {
+    text: 'heading2',
+    value: 'h2',
+  },
+  {
+    text: 'heading 3',
+    value: 'h3',
+  },
+];
+const data = [
+  {
+    h1: 'value 1',
+    h2: 'value 2',
+    h3: 'value 3',
+    _isSelected: false,
+  },
+  {
+    h1: 'value 1',
+    h2: 'value 2',
+    h3: 'value 3',
+    _isSelected: false,
+  },
+  {
+    h1: 'value 1',
+    h2: 'value 2',
+    h3: 'value 3',
+    _isSelected: false,
+  },
+  {
+    h1: 'value 1',
+    h2: 'value 2',
+    h3: 'value 3',
+    _isSelected: false,
+  }];
+
+describe('WtTable', () => {
+  it('renders a component', () => {
+    const wrapper = shallowMount(WtTable);
+    expect(wrapper.classes('wt-table')).toBe(true);
+  });
+
+  it('renders table data rows', () => {
+    const wrapper = shallowMount(WtTable, {
+      propsData: {
+        headers,
+        data,
+      },
+    });
+    expect(wrapper.findAll('.wt-table__tr__body').length).toBe(data.length);
+  });
+
+  it('renders table headers', () => {
+    const wrapper = shallowMount(WtTable, {
+      propsData: {
+        headers,
+        data,
+        selectable: false,
+        gridActions: false,
+      },
+    });
+    expect(wrapper.findAll('.wt-table__tr__head th').length).toBe(headers.length);
+  });
+
+  it('do not renders table footer by default', () => {
+    const wrapper = shallowMount(WtTable, {
+      propsData: {
+        headers,
+        data,
+      },
+    });
+    expect(wrapper.find('.wt-table__foot').exists()).toBe(false);
+  });
+
+  it('renders table footer if footer slot is passed', () => {
+    const wrapper = shallowMount(WtTable, {
+      propsData: {
+        headers,
+        data,
+      },
+      scopedSlots: {
+        'data-footer': '',
+      },
+    });
+    expect(wrapper.find('.wt-table__foot').isVisible()).toBe(true);
+  });
+
+  it('emits sort event at header click when sortable is true', () => {
+    const wrapper = shallowMount(WtTable, {
+      propsData: {
+        headers,
+        data,
+        sortable: true,
+      },
+    });
+    wrapper.find('.wt-table__th--sortable').trigger('click');
+    expect(wrapper.emitted().sort.pop()).toBeTruthy();
+  });
+
+  it('draws sort arrow, if a column is sorted', () => {
+    headers[0].sort = 'asc';
+    const wrapper = shallowMount(WtTable, {
+      propsData: {
+        headers,
+        data,
+        sortable: true,
+      },
+    });
+    expect(wrapper
+      .find('.wt-table__th--sortable .wt-table__th__sort-arrow')
+      .exists()).toBe(true);
+  });
+
+  it('selects all rows at header checkbox click', async () => {
+    const wrapper = shallowMount(WtTable, {
+      propsData: {
+        headers,
+        data,
+        selectable: true,
+      },
+    });
+    wrapper.findComponent(WtCheckbox).vm.$emit('change');
+    expect(data.every((item) => item._isSelected)).toBe(true);
+  });
+});

package/src/components/organisms/wt-table/__tests__/WtTableDeleteAction.spec.js

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

package/src/components/organisms/wt-table/__tests__/WtTableEditAction.spec.js

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

package/src/components/organisms/wt-table/_internals/getSortOrder.js

@@ -0,0 +1,12 @@
+const getNextSortOrder = (sort) => {
+  switch (sort) {
+    case 'asc':
+      return 'desc';
+    case 'desc':
+      return null;
+    default:
+      return 'asc';
+  }
+};
+
+export default getNextSortOrder;

package/src/components/organisms/wt-table/table-cells/wt-table-delete-action.vue

@@ -0,0 +1,21 @@
+<template>
+  <wt-tooltip>
+    <template v-slot:activator>
+      <wt-icon-btn
+        icon="bucket"
+        @click="$emit('click')"
+      ></wt-icon-btn>
+    </template>
+    {{ $t('webitelUI.table.tableCells.deleteActionHint') }}
+  </wt-tooltip>
+</template>
+
+<script>
+export default {
+  name: 'wt-table-delete-action',
+};
+</script>
+
+<style scoped>
+
+</style>

package/src/components/organisms/wt-table/table-cells/wt-table-edit-action.vue

@@ -0,0 +1,22 @@
+<template>
+  <wt-tooltip>
+    <template v-slot:activator>
+      <wt-icon-btn
+        class="table-action"
+        icon="edit"
+        @click="$emit('click')"
+      ></wt-icon-btn>
+    </template>
+    {{ $t('webitelUI.table.tableCells.editActionHint') }}
+  </wt-tooltip>
+</template>
+
+<script>
+export default {
+  name: 'wt-table-edit-action',
+};
+</script>
+
+<style scoped>
+
+</style>

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

@@ -0,0 +1,252 @@
+<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
+            v-model="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);
+    },
+
+    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.$scopedSlots).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" scoped>
+.wt-table {
+  overflow: auto;
+}
+
+.wt-table__table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.wt-table__head {
+  display: block;
+  box-sizing: border-box;
+  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;
+  }
+}
+
+.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/organisms/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/organisms/wt-table-actions/wt-table-actions.vue

@@ -0,0 +1,105 @@
+<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" scoped>
+.wt-table-actions {
+  display: flex;
+  align-items: center;
+  padding: var(--table-actions-padding);
+  gap: var(--table-actions-icon-gap);
+}
+</style>

package/src/components/organisms/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, {
+      propsData: {
+        headers: [],
+      },
+    });
+    expect(wrapper.classes('wt-table-column-select')).toBe(true);
+  });
+  it('column select popup is invisible by default', () => {
+    const wrapper = shallowMount(WtTableColumnSelect, {
+      propsData: {
+        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, {
+      propsData: {
+        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);
+  });
+});