@webitel/ui-sdk 0.1.13 → 0.1.100

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,18 @@
+<template>
+  <wt-icon-btn
+    icon="bucket"
+    :tooltip="$t('webitelUI.table.tableCells.deleteActionHint')"
+    tooltip-position="left"
+    @click="$emit('click')"
+  ></wt-icon-btn>
+</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,19 @@
+<template>
+  <wt-icon-btn
+    class="table-action"
+    icon="edit"
+    :tooltip="$t('webitelUI.table.tableCells.editActionHint')"
+    tooltip-position="left"
+    @click="$emit('click')"
+  ></wt-icon-btn>
+</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,241 @@
+<template>
+  <div class="wt-table">
+    <table class="wt-table__table">
+      <thead class="wt-table__head">
+      <tr class="wt-table__tr wt-table__tr__head" :style="columnsStyle">
+        <th class="wt-table__th__checkbox" v-if="selectable">
+          <wt-checkbox
+            :selected="isAllSelected"
+            @change="selectAll"
+          ></wt-checkbox>
+        </th>
+        <th
+          class="wt-table__th"
+          :class="[
+           {'wt-table__th--sortable': sortable},
+           `wt-table__th--sort-${col.sort}`,
+        ]"
+          v-for="(col, key) of dataHeaders"
+          :key="key"
+          @click="sort(col)"
+        >
+          <div class="wt-table__th__text">{{ col.text }}</div>
+          <wt-icon
+            class="wt-table__th__sort-arrow wt-table__th__sort-arrow--asc"
+            v-if="sortable"
+            icon="sort-arrow-up"
+          ></wt-icon>
+          <wt-icon
+            class="wt-table__th__sort-arrow wt-table__th__sort-arrow--desc"
+            v-if="sortable"
+            icon="sort-arrow-down"
+          ></wt-icon>
+        </th>
+        <th class="wt-table__th__actions" v-if="gridActions">
+          <slot name="actions-header"></slot>
+        </th>
+      </tr>
+      </thead>
+
+      <tbody class="wt-table__body">
+      <tr
+        class="wt-table__tr wt-table__tr__body"
+        v-for="(row, dataKey) of data"
+        :class="`wt-table__tr__${row.id || dataKey}`"
+        :key="dataKey"
+        :style="columnsStyle"
+      >
+        <td class="wt-table__td__checkbox" v-if="selectable">
+          <wt-checkbox
+            v-model="row._isSelected"
+          ></wt-checkbox>
+        </td>
+
+        <td
+          class="wt-table__td"
+          v-for="(col, headerKey) of dataHeaders"
+          :key="headerKey"
+        >
+          <slot :name="col.value" :item="row" :index="dataKey">
+            <div>{{ row[col.value] }}</div>
+          </slot>
+        </td>
+
+        <td class="wt-table__td__actions" v-if="gridActions">
+          <slot name="actions" :item="row" :index="dataKey"></slot>
+        </td>
+      </tr>
+      </tbody>
+
+      <tfoot class="wt-table__foot" v-if="isTableFooter">
+      <tr class="wt-table__tr wt-table__tr__foot" :style="columnsStyle">
+<!--        empty checkbox column -->
+        <th class="wt-table__th__checkbox" v-if="selectable"></th>
+        <td
+          class="wt-table__td"
+          v-for="(col, headerKey) of dataHeaders"
+          :key="headerKey"
+        >
+          <slot :name="`${col.value}-footer`" :header="col" :index="headerKey"></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) {
+      const nextSort = getNextSortOrder(col.sort);
+      if (this.sortable) this.$emit('sort', col, nextSort);
+    },
+
+    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 {
+  border-collapse: collapse;
+  width: 100%;
+}
+
+.wt-table__head {
+  //display: block;
+  border-bottom: var(--table-head-borer-bottom);
+  border-color: var(--table-head-borer-color);
+}
+
+//.wt-table__head {
+//  display: block;
+//}
+
+.wt-table__tr {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, var(--table-col-min-width));
+  grid-column-gap: var(--table-column-gap);
+  min-height: var(--table-min-height);
+  padding: var(--table-row-padding);
+  transition: var(--transition);
+
+  &:nth-child(2n) {
+    background: var(--table-secondary-color);
+  }
+}
+
+.wt-table__th,
+.wt-table__td {
+  @extend %typo-body-md;
+  display: flex;
+  align-items: center;
+  padding: 0;
+  width: 100%;
+  max-width: 100%;
+  overflow-wrap: break-word;
+  word-break: break-all;
+
+  &__actions {
+    display: flex;
+    align-items: flex-start;
+    justify-content: flex-end;
+  }
+}
+
+.wt-table__th {
+  min-height: 24px; // prevent sort arrow toggling layout shift
+  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-top: var(--table-head-borer-bottom);
+  border-color: var(--table-head-borer-color);
+}
+</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,90 @@
+<template>
+  <aside class="wt-table-actions">
+    <slot></slot>
+    <wt-icon-btn
+      v-if="isImport"
+      icon="download"
+      :tooltip="$t('reusable.import')"
+      @click="$emit('input', 'import')"
+    ></wt-icon-btn>
+    <wt-icon-btn
+      v-if="isExport"
+      icon="upload"
+      :tooltip="$t('reusable.export')"
+      @click="$emit('input', 'export')"
+    ></wt-icon-btn>
+    <wt-icon-btn
+      v-if="isFilterReset"
+      icon="clear"
+      :tooltip="$t('webitelUI.tableActions.filterReset')"
+      @click="$emit('input', 'filterReset')"
+    ></wt-icon-btn>
+    <wt-icon-btn
+      v-if="isColumnSelect"
+      icon="column-select"
+      :tooltip="$t('webitelUI.tableActions.columnSelect')"
+      @click="$emit('input', 'columnSelect')"
+    ></wt-icon-btn>
+    <wt-icon-btn
+      v-if="isRefresh"
+      icon="refresh"
+      :tooltip="$t('webitelUI.tableActions.refreshTable')"
+      @click="$emit('input', 'refresh')"
+    ></wt-icon-btn>
+    <wt-icon-btn
+      v-if="isSettings"
+      :class="{'active': isSettingsActive}"
+      icon="filter"
+      :tooltip="$t('webitelUI.tableActions.expandFilters')"
+      @click="$emit('input', 'settings')"
+    ></wt-icon-btn>
+  </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;
+  flex-wrap: wrap;
+
+  & > * {
+    margin-left: var(--table-actions-icon-gap);
+  }
+}
+</style>

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

@@ -0,0 +1,31 @@
+import { 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 = shallowMount(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);
+  });
+});

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

@@ -0,0 +1,116 @@
+<template>
+  <div class="wt-table-column-select">
+    <wt-icon-btn
+      icon="column-select"
+      :tooltip="$t('webitelUI.tableColumnSelect.title')"
+      @click="openPopup"
+    ></wt-icon-btn>
+    <wt-popup
+      v-if="isColumnSelectPopup"
+      class="wt-table-column-select__popup"
+      @close="close"
+    >
+      <template slot="title">
+        {{ $t('webitelUI.tableColumnSelect.title') }}
+      </template>
+      <template slot="main">
+        <ul class="wt-table-column-select__popup__list">
+          <li
+            class="wt-table-column-select__popup__item"
+            v-for="(col, key) of changeableDraft"
+            :key="key"
+            @click.capture.prevent="col.show = !col.show"
+          >
+            <wt-checkbox v-model="col.show" :label="col.text"/>
+          </li>
+        </ul>
+      </template>
+      <template 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));
+    },
+  },
+  methods: {
+    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>
+.wt-table-column-select {
+  line-height: 0; // prevent 24x28 icon heght :/
+}
+
+.wt-table-column-select__popup__list {
+  @extend %wt-scrollbar;
+  max-height: 35vh; // fixme popup fixed sizes
+  width: 550px; // fixme popup fixed sizes
+  overflow: auto;
+}
+
+.wt-table-column-select__popup__item {
+  margin-bottom: var(--component-spacing);
+}
+</style>

package/src/components/transitions/__tests__/ExpandTransition.spec.js

@@ -0,0 +1,9 @@
+import { shallowMount } from '@vue/test-utils';
+import ExpandTransition from '../expand-transition.vue';
+
+describe('ExpandTransition', () => {
+  it('renders a component', () => {
+    const wrapper = shallowMount(ExpandTransition);
+    expect(wrapper.exists()).toBe(true);
+  });
+});

package/src/components/transitions/expand-transition.vue

@@ -0,0 +1,70 @@
+<script>
+/* eslint-disable no-param-reassign */
+// https://markus.oberlehner.net/blog/transition-to-height-auto-with-vue/
+export default {
+  name: 'expand-transition',
+  functional: true,
+  render(createElement, context) {
+    const data = {
+      props: {
+        name: 'expand',
+      },
+      on: {
+        afterEnter(element) {
+          element.style.height = 'auto';
+        },
+        enter(element) {
+          const { width } = getComputedStyle(element);
+          element.style.width = width;
+          element.style.position = 'absolute';
+          element.style.visibility = 'hidden';
+          element.style.height = 'auto';
+
+          const { height } = getComputedStyle(element);
+          element.style.width = null;
+          element.style.position = null;
+          element.style.visibility = null;
+          element.style.height = 0;
+
+          // Force repaint to make sure the
+          // animation is triggered correctly.
+          // eslint-disable-next-line no-unused-expressions
+          getComputedStyle(element).height;
+
+          // eslint-disable-next-line no-return-assign
+          requestAnimationFrame(() => element.style.height = height);
+        },
+        leave(element) {
+          const { height } = getComputedStyle(element);
+          element.style.height = height;
+          // eslint-disable-next-line no-unused-expressions
+          getComputedStyle(element).height;
+
+          // eslint-disable-next-line no-return-assign
+          requestAnimationFrame(() => element.style.height = 0);
+        },
+      },
+    };
+    return createElement('transition', data, context.children);
+  },
+};
+</script>
+
+<style lang="scss">
+.expand-enter-active,
+.expand-leave-active {
+  transition: height var(--transition);
+  overflow: hidden;
+}
+
+.expand-enter,
+.expand-leave-to {
+  height: 0;
+}
+/*
+  // expand animation optimization
+  transform: translateZ(0);
+  backface-visibility: hidden;
+  perspective: 1000px;
+ */
+</style>