@webitel/ui-sdk 23.12.17 → 23.12.19

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "23.12.17",
+  "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

@@ -1,14 +1,13 @@
 <template>
   <div
+    v-clickaway="atClickaway"
     class="wt-button-select"
-    v-clickaway="away"
   >
-
     <wt-button
       v-bind="$attrs"
-      class="wt-button-select__button"
       :color="color"
       :disabled="disabled"
+      class="wt-button-select__button"
       @click="$emit('click', $event)"
     >
       <slot></slot>
@@ -22,18 +21,18 @@
       <template v-slot:activator>
         <wt-button
           v-bind="$attrs"
-          class="wt-button-select__select-btn"
           :color="color"
           :disabled="disabled"
           :loading="false"
+          class="wt-button-select__select-btn"
           @click="isOpened = !isOpened"
         >
           <wt-icon
-            class="wt-button-select__select-arrow"
             :class="{'wt-button-select__select-arrow--active': isOpened}"
-            icon="arrow-down"
             :color="color === 'primary' ? 'on-primary' : 'default'"
             :disabled="disabled"
+            class="wt-button-select__select-arrow"
+            icon="arrow-down"
           ></wt-icon>
         </wt-button>
       </template>
@@ -41,58 +40,58 @@
   </div>
 </template>
 
-<script>
-export default {
-  name: 'wt-button-select',
-  data: () => ({
-    isOpened: false,
-  }),
-  props: {
-    /**
-     * See context-menu component docs
-     */
-    options: {
-      type: Array,
-      required: true,
-    },
-    /**
-     * @values 'primary', 'secondary'
-     * @example <wt-button color="secondary"></wt-button>
-     */
-    color: {
-      type: String,
-      default: 'primary',
-    },
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
+<script setup>
+import { ref } from 'vue';
+
+const props = defineProps({
+  /**
+   * See context-menu component docs
+   */
+  options: {
+    type: Array,
+    required: true,
+  },
+  /**
+   * @values 'primary', 'secondary'
+   * @example <wt-button color="secondary"></wt-button>
+   */
+  color: {
+    type: String,
+    default: 'primary',
   },
-  emits: [
-    /**
-     * @event click
-     */
-    'click',
-    /**
-     * Click on option in context-menu
-     *
-     * @event click:option
-     *
-     * @property {object} option clicked option object
-     * @property {index} index clicked option index in options list
-     */
-    'click:option',
-  ],
-  methods: {
-    selectOption({ option, index }) {
-      this.$emit('click:option', option, index);
-      this.isOpened = false;
-    },
-    away() {
-      this.isOpened = false;
-    },
+  disabled: {
+    type: Boolean,
+    default: false,
   },
-};
+});
+
+const emit = defineEmits([
+  /**
+   * @event click
+   */
+  'click',
+  /**
+   * Click on option in context-menu
+   *
+   * @event click:option
+   *
+   * @property {object} option clicked option object
+   * @property {index} index clicked option index in options list
+   */
+  'click:option',
+]);
+
+const isOpened = ref(false);
+
+function selectOption({ option, index }) {
+  emit('click:option', option, index);
+  isOpened.value = false;
+}
+
+function atClickaway() {
+  isOpened.value = false;
+}
+
 </script>
 
 <style lang="scss">

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>