@webitel/ui-sdk 0.1.2 → 0.1.3-vite

package/src/components/wt-filters-panel-wrapper/wt-filters-panel-wrapper.vue

@@ -0,0 +1,146 @@
+<template>
+  <article class="filters-panel-wrapper" :class="{ 'filters-panel-wrapper--opened': isOpened }">
+    <div class="filters-wrap">
+      <slot></slot>
+    </div>
+    <div class="actions-wrap">
+      <wt-table-actions
+        :icons="['filter-reset', 'settings']"
+        @input="tableActionsHandler"
+      ></wt-table-actions>
+    </div>
+  </article>
+</template>
+
+<script>
+export default {
+  name: 'filters-panel-wrapper',
+  data: () => ({
+    isOpened: false,
+    filtersCount: 0,
+  }),
+  methods: {
+    tableActionsHandler(eventName) {
+      switch (eventName) {
+        case 'filterReset':
+          this.resetFilters();
+          break;
+        case 'settings':
+          this.toggleFiltersExpansion();
+          break;
+        default:
+      }
+    },
+    toggleFiltersExpansion() {
+      this.isOpened = !this.isOpened;
+    },
+    resetFilters() {
+      this.$emit('reset');
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+$actions-width: calc(2 * (var(--icon-md-size) + var(--table-actions-icon-gap)));
+
+.filters-panel-wrapper {
+  display: flex;
+
+  .filters-wrap {
+    flex: 1;
+  }
+
+  .actions-wrap {
+    display: flex;
+    margin-left: auto;
+    margin-top: 24px;
+    flex: 0 0 $actions-width;
+
+    .wt-table-actions {
+      height: fit-content;
+    }
+  }
+}
+
+// 30px*2 outer paddings, 30px*2 inner paddings, table actions var value
+// -- sass doesnt work with css variables :(
+$width-except-filters: 60px + 60px + 88px;
+$filter-width: 230px;
+$filter-gap: 10px; // var(--spacing-xs)
+@function filters-width($num) {
+  // 1px corrects max width
+  @return ($filter-width * $num) + $filter-gap * $num + $width-except-filters - 1px;
+}
+
+.filters-wrap {
+  display: grid;
+  flex-wrap: wrap;
+  grid-gap: var(--spacing-xs);
+
+  .filters-panel-wrapper & > * {
+  }
+
+  & {
+    grid-template-columns: repeat(6, 1fr);
+
+    > *:nth-child(n+7) {
+      display: none;
+    }
+  }
+
+  @media (max-width: filters-width(6)) {
+    & {
+      grid-template-columns: repeat(5, 1fr);
+
+      :deep(> *:nth-child(n+6)) {
+        display: none;
+      }
+    }
+  }
+
+  @media (max-width: filters-width(5)) {
+    & {
+      grid-template-columns: repeat(4, 1fr);
+
+      :deep(> *:nth-child(n+5)) {
+        display: none;
+      }
+    }
+  }
+
+  @media (max-width: filters-width(4)) {
+    & {
+      grid-template-columns: repeat(3, 1fr);
+
+      :deep(> *:nth-child(n+4)) {
+        display: none;
+      }
+    }
+  }
+
+  @media (max-width: filters-width(3)) {
+    & {
+      grid-template-columns: repeat(2, 1fr);
+
+      :deep(> *:nth-child(n+3)) {
+        display: none;
+      }
+    }
+  }
+
+  @media (max-width: filters-width(2)) {
+    & {
+      grid-template-columns: repeat(1, 1fr);
+
+      :deep(> *:nth-child(n+2)) {
+        display: none;
+      }
+    }
+  }
+}
+
+.filters-panel-wrapper--opened .filters-wrap :deep(> *) {
+  display: block;
+}
+</style>

package/src/components/wt-headline/__tests__/WtHeadline.spec.js

@@ -0,0 +1,47 @@
+import { shallowMount } from '@vue/test-utils';
+import WtHeadline from '../wt-headline.vue';
+
+describe('WtHeadline', () => {
+  it('renders a component', () => {
+    const wrapper = shallowMount(WtHeadline, {
+      stubs: { WtIconBtn: true },
+    });
+    expect(wrapper.classes('wt-headline')).toBe(true);
+  });
+
+  it('renders headline main content via title-wrapper slot', () => {
+    const content = 'Headline title';
+    const wrapper = shallowMount(WtHeadline, {
+      stubs: { WtIconBtn: true },
+      slots: { 'title-wrapper': content },
+    });
+    expect(wrapper.find('.wt-headline').text()).toBe(content);
+  });
+
+  it('renders headline title via title slot', () => {
+    const content = 'Headline title';
+    const wrapper = shallowMount(WtHeadline, {
+      stubs: { WtIconBtn: true },
+      slots: { title: content },
+    });
+    expect(wrapper.find('.wt-headline__title').text()).toBe(content);
+  });
+
+  it('renders headline search via search slot', () => {
+    const content = 'Headline search content';
+    const wrapper = shallowMount(WtHeadline, {
+      stubs: { WtIconBtn: true },
+      slots: { search: content },
+    });
+    expect(wrapper.find('.wt-headline__actions-wrapper').text()).toBe(content);
+  });
+
+  it('renders headline actions via actions slot', () => {
+    const content = 'Headline actions';
+    const wrapper = shallowMount(WtHeadline, {
+      stubs: { WtIconBtn: true },
+      slots: { actions: content },
+    });
+    expect(wrapper.find('.wt-headline__actions-wrapper').text()).toBe(content);
+  });
+});

package/src/components/wt-headline/_variables.scss

@@ -0,0 +1,6 @@
+
+:root {
+  --headline-min-height: 40px; // button/search-bar height
+  --headline-title-margin: var(--spacing-sm);
+  --headline-background: var(--main-color);
+}

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

@@ -0,0 +1,50 @@
+<template>
+  <header class="wt-headline">
+    <slot>
+      <slot name="title-wrapper">
+        <h1 class="wt-headline__title">
+          <slot name="title"></slot>
+        </h1>
+      </slot>
+      <div class="wt-headline__actions-wrapper">
+        <slot name="search"></slot>
+        <slot name="actions"></slot>
+      </div>
+    </slot>
+  </header>
+</template>
+
+<script>
+export default {
+  name: 'wt-headline',
+};
+</script>
+
+<style lang="scss">
+@import './variables.scss';
+</style>
+
+<style lang="scss" scoped>
+
+.wt-headline {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  min-height: var(--headline-min-height);
+  box-sizing: border-box;
+  background: var(--headline-background);
+  border-radius: var(--border-radius);
+}
+
+.wt-headline__title {
+  @extend %typo-heading-2;
+  margin-right: var(--headline-title-margin);
+}
+
+.wt-headline__actions-wrapper {
+  display: flex;
+  align-items: center;
+  position: relative;
+}
+</style>

package/src/components/wt-headline-nav/Readme.md

@@ -0,0 +1,9 @@
+```vue
+<wt-headline-nav
+  :path="[
+              { name: 'Admin' },
+              { name: 'Contact-center' },
+              { name: 'Queues', route: 'https://dev.webitel.com/contact-center/queues' },
+          ]"
+></wt-headline-nav>
+```

package/src/components/wt-headline-nav/__tests__/wt-headline-nav.spec.js

@@ -0,0 +1,13 @@
+import { shallowMount } from '@vue/test-utils';
+import WtHeadlineNav from '../wt-headline-nav.vue';
+
+describe('WtHeadlineNav', () => {
+  it('renders a component', () => {
+    const wrapper = shallowMount(WtHeadlineNav, {
+      props: {
+        path: [],
+      },
+    });
+    expect(wrapper.isVisible()).toBe(true);
+  });
+});

package/src/components/wt-headline-nav/_variables.scss

@@ -0,0 +1,8 @@
+
+:root {
+  --headline-nav-indicator-size: 4px;
+  --headline-nav-gap: var(--spacing-sm);
+  --headline-nav-dot-gap: var(--spacing-2xs);
+  --headline-nav-indicator-color: var(--icon-color);
+  --headline-nav-accent-indicator-color: var(--primary-color);
+}

package/src/components/wt-headline-nav/wt-headline-nav.vue

@@ -0,0 +1,97 @@
+<template>
+  <nav class="wt-headline-nav">
+    <div
+      v-for="(singlePath, key) of path"
+      :key="key"
+      class="wt-headline-nav__wrapper"
+    >
+      <span v-if="key !== 0" class="wt-headline-nav__indicator"></span>
+      <h1 class="wt-headline-nav__title">
+        <router-link
+          v-if="singlePath.route"
+          :to="singlePath.route"
+          class="wt-headline-nav__text wt-headline-nav__text--link"
+        >{{ singlePath.name }}
+        </router-link>
+        <span v-else class="wt-headline-nav__text">{{ singlePath.name }}</span>
+      </h1>
+    </div>
+  </nav>
+</template>
+
+<script setup>
+const props = defineProps({
+  /**
+   * PATH EXAMPLE
+   *  default: () => [
+   *      { name: 'directory' },
+   *      { name: 'users', route: '/directory/users' },
+   *      { name: 'adm', route: '/directory/users/3' },
+   *    ],
+   */
+  path: {
+    type: Array,
+    required: true,
+  },
+});
+</script>
+
+<style lang="scss">
+@import './variables.scss';
+</style>
+
+<style lang="scss" scoped>
+.wt-headline-nav {
+  display: flex;
+  align-items: center;
+  max-width: 100%;
+  gap: var(--headline-nav-gap);
+}
+
+.wt-headline-nav__wrapper {
+  display: flex;
+  align-items: center;
+  gap: var(--headline-nav-dot-gap);
+}
+
+.wt-headline-nav__indicator {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  justify-content: center;
+  width: var(--icon-md-size);
+  height: var(--icon-md-size);
+
+  &:before {
+    display: block;
+    width: var(--headline-nav-indicator-size);
+    height: var(--headline-nav-indicator-size);
+    content: '';
+    border-radius: 50%;
+    background: var(--headline-nav-indicator-color);
+  }
+}
+
+.wt-headline-nav__title {
+  @extend %typo-subtitle-1;
+}
+
+.wt-headline-nav__text {
+  color: var(--main-text-color);
+}
+
+.wt-headline-nav__wrapper:last-child {
+  min-width: 0;
+
+  .wt-headline-nav__indicator {
+    &:before {
+      background: var(--headline-nav-accent-indicator-color);
+    }
+  }
+
+  .wt-headline-nav__title {
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}
+</style>

package/src/components/wt-hint/__tests__/WtHint.spec.js

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

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

@@ -0,0 +1,27 @@
+<template>
+  <wt-tooltip class="wt-hint">
+    <template v-slot:activator>
+      <wt-icon-btn
+        icon="rounded-info"
+        :color="iconColor"
+      ></wt-icon-btn>
+    </template>
+    <slot></slot>
+  </wt-tooltip>
+</template>
+
+<script>
+export default {
+  name: 'wt-hint',
+  props: {
+    iconColor: {
+      type: String,
+      default: 'outline',
+    },
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+
+</style>