@webitel/ui-sdk 23.12.18 → 23.12.19

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "23.12.18",
+  "version": "23.12.19",
   "private": false,
   "scripts": {
     "build": "vue-cli-service build --target lib --name ui-sdk ./src/install.js",

package/src/components/wt-button-select/__tests__/WtButtonSelect.spec.js

@@ -24,15 +24,16 @@ describe('WtSelectButton', () => {
     expect(wrapper.find('.wt-button-select__button').text()).toBe(content);
   });
 
-  it('should rotate the arrow', () => {
+  it('should rotate the arrow', async () => {
     const wrapper = mount(WtSelectButton, {
-      data: () => ({
-        isOpened: true,
-      }),
       props: {
         options: [],
       },
     });
+    const arrowBtn = wrapper.findAllComponents({ name: 'wt-button' })
+           .find((component) => component.classes().includes('wt-button-select__select-btn'));
+    arrowBtn.vm.$emit('click');
+    await wrapper.vm.$nextTick();
     const wtIcon = wrapper.find('.wt-button-select__select-arrow');
     expect(wtIcon.classes()).toContain('wt-button-select__select-arrow--active');
   });

package/src/components/wt-button-select/wt-button-select.vue

@@ -15,7 +15,7 @@
 
     <wt-context-menu
       :options="options"
-      :visible="isContextMenuVisible"
+      :visible="isOpened"
       @click="selectOption"
     >
       <template v-slot:activator>
@@ -41,7 +41,7 @@
 </template>
 
 <script setup>
-import { computed, ref } from 'vue';
+import { ref } from 'vue';
 
 const props = defineProps({
   /**
@@ -83,11 +83,6 @@ const emit = defineEmits([
 
 const isOpened = ref(false);
 
-const isContextMenuVisible = computed(() => {
-  if (props.disabled) return false;
-  return isOpened.value;
-});
-
 function selectOption({ option, index }) {
   emit('click:option', option, index);
   isOpened.value = false;

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/_variables.scss

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

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

@@ -1,16 +1,16 @@
 <template>
   <nav class="wt-headline-nav">
     <div
-      class="wt-headline-nav__wrapper"
       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"
-          class="wt-headline-nav__text wt-headline-nav__title-link"
           :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>
@@ -19,22 +19,21 @@
   </nav>
 </template>
 
-<script>
-export default {
-  name: 'wt-headline-nav',
-  props: {
-    path: {
-      type: Array,
-      required: true,
-      // PATH EXAMPLE
-      // default: () => [
-      //   { name: 'directory' },
-      //   { name: 'users', route: '/directory/users' },
-      //   { name: 'adm', route: '/directory/users/3' },
-      // ],
-    },
+<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">
@@ -42,26 +41,35 @@ export default {
 </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: inline-block;
-  width: var(--headline-nav-indicator-size);
-  height: var(--headline-nav-indicator-size);
-  margin: 0 var(--headline-nav-indicator-margin);
-  background: var(--icon-color);
-  border-radius: 50%;
+  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(--icon-color);
+  }
 }
 
 .wt-headline-nav__title {
@@ -69,23 +77,21 @@ export default {
 }
 
 .wt-headline-nav__text {
-  color: var(--text-outline-color);
+  color: var(--main-text-color);
 }
 
 .wt-headline-nav__wrapper:last-child {
   min-width: 0;
 
   .wt-headline-nav__indicator {
-    background: var(--icon-color-accent);
+    &:before {
+      background: var(--icon-primary-color);
+    }
   }
 
   .wt-headline-nav__title {
     overflow: hidden;
     text-overflow: ellipsis;
   }
-
-  .wt-headline-nav__text {
-    color: var(--text-primary-color);
-  }
 }
 </style>