@webitel/ui-sdk 23.12.2 → 23.12.5-1

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

@@ -1,17 +1,16 @@
 <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>
+      <slot />
     </wt-button>
 
     <wt-context-menu
@@ -19,80 +18,80 @@
       :visible="isOpened"
       @click="selectOption"
     >
-      <template v-slot:activator>
+      <template #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"
-          ></wt-icon>
+            class="wt-button-select__select-arrow"
+            icon="arrow-down"
+          />
         </wt-button>
       </template>
     </wt-context-menu>
   </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-checkbox/wt-checkbox.vue

@@ -3,12 +3,12 @@
     class="wt-checkbox"
     :class="{
       'wt-checkbox--active': isChecked,
-      'wt-checkbox--outline': outline,
       'wt-checkbox--disabled': disabled,
     }"
   >
     <wt-label
       v-bind="labelProps"
+      :disabled="disabled"
       class="wt-checkbox__wrapper"
     >
       <input
@@ -20,17 +20,22 @@
         @change="inputHandler"
       >
       <span class="wt-checkbox__checkmark">
-      <wt-icon
-        :icon="checkboxIcon"
-        :color="iconColor"
-      ></wt-icon>
-    </span>
+        <wt-icon
+          :icon="checkboxIcon"
+          :color="iconColor"
+        />
+      </span>
       <!-- @slot Custom label markup -->
       <slot
         v-bind="{ label, isChecked, disabled }"
         name="label"
       >
-        <div v-if="label" class="wt-checkbox__label">{{ label }}</div>
+        <div
+          v-if="label"
+          class="wt-checkbox__label"
+        >
+          {{ label }}
+        </div>
       </slot>
     </wt-label>
   </div>
@@ -38,7 +43,7 @@
 
 <script>
 export default {
-  name: 'wt-checkbox',
+  name: 'WtCheckbox',
   model: {
     prop: 'selected',
     event: 'change',
@@ -60,10 +65,6 @@ export default {
       type: Boolean,
       default: false,
     },
-    outline: {
-      type: Boolean,
-      default: false,
-    },
     labelProps: {
       type: Object,
       description: 'Object with props, passed down to wt-label as props',
@@ -146,46 +147,12 @@ export default {
 }
 
 .wt-checkbox:hover {
-  .wt-checkbox__label {
-    color: var(--form-label--hover-color);
-  }
-
-  ::v-deep .wt-icon__icon {
-    fill: var(--icon-color--hover);
-  }
-}
-
-.wt-checkbox--active {
-  .wt-checkbox__label {
-    color: var(--form-label--active-color);
-  }
-}
-
-.wt-checkbox--outline {
-  .wt-checkbox__label {
-    color: var(--form-outline-label-color);
-  }
-
-  ::v-deep .wt-icon__icon {
-    fill: var(--icon-outline-color);
-  }
-
-  &.wt-checkbox--active {
-    .wt-checkbox__label {
-      color: var(--form-label--active-color);
-    }
-
-    ::v-deep .wt-icon__icon {
-      fill: var(--icon-outline--active-color);
-    }
+  :deep .wt-icon__icon {
+    fill: var(--icon-active-color);
   }
 }
 
 .wt-checkbox--disabled {
   pointer-events: none;
-
-  .wt-checkbox__label {
-    color: var(--form-label--disabled-color);
-  }
 }
 </style>

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

@@ -2,6 +2,25 @@
 :root {
   --chip-padding: var(--spacing-2xs) var(--spacing-sm);
   --chip-border-radius: var(--spacing-lg);
-  --chip-bg-color: var(--accent-secondary-color);
-  --chip-bg-color--outline: var(--secondary-color);
+
+  --wt-chip-main-background-color: var(--primary-light-color);
+  --wt-chip-main-text-color: var(--primary-on-color);
+
+  --wt-chip-primary-background-color: var(--primary-color);
+  --wt-chip-primary-text-color: var(--primary-on-color);
+
+  --wt-chip-secondary-background-color: var(--secondary-color);
+  --wt-chip-secondary-text-color: var(--secondary-on-color);
+
+  --wt-chip-success-background-color: var(--success-color);
+  --wt-chip-success-text-color: var(--success-on-color);
+
+  --wt-chip-warning-background-color: var(--warning-color);
+  --wt-chip-warning-text-color: var(--warning-on-color);
+
+  --wt-chip-error-background-color: var(--error-color);
+  --wt-chip-error-text-color: var(--error-on-color);
+
+  --wt-chip-transfer-background-color: var(--transfer-color);
+  --wt-chip-transfer-text-color: var(--transfer-on-color);
 }

package/src/components/wt-chip/wt-chip.scss

@@ -3,39 +3,42 @@
 
   display: inline-block;
   padding: var(--chip-padding);
-  color: var(--text-primary-color);
+  color: var(--wt-chip-main-text-color);
   border-radius: var(--chip-border-radius);
-  background: var(--chip-bg-color);
+  background: var(--wt-chip-main-background-color);
 
   &--main-color {
-    background: var(--chip-bg-color);
+    background: var(--wt-chip-main-background-color);
+    color: var(--wt-chip-main-text-color);
   }
 
-  &--outline-color {
-    background: var(--chip-bg-color--outline);
-  }
-
-  &--accent-color {
-    background: var(--accent-color);
+  &--primary-color {
+    background: var(--wt-chip-primary-background-color);
+    color: var(--wt-chip-primary-text-color);
   }
 
   &--secondary-color {
-    background: var(--secondary-color);
+    background: var(--wt-chip-secondary-background-color);
+    color: var(--wt-chip-secondary-text-color);
   }
 
-  &--secondary-50-color {
-    background: var(--secondary-color-50);
+  &--success-color {
+    background: var(--wt-chip-success-background-color);
+    color: var(--wt-chip-success-text-color);
   }
 
-  &--success-color {
-    background: var(--true-color);
+  &--warning-color {
+    background: var(--wt-chip-warning-background-color);
+    color: var(--wt-chip-warning-text-color);
   }
 
-  &--danger-color {
-    background: var(--false-color);
+  &--error-color {
+    background: var(--wt-chip-error-background-color);
+    color: var(--wt-chip-error-text-color);
   }
 
   &--transfer-color {
-    background: var(--transfer-color);
+    background: var(--wt-chip-transfer-background-color);
+    color: var(--wt-chip-transfer-text-color);
   }
 }

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

@@ -1,18 +1,23 @@
 <template>
-  <span class="wt-chip" :class="`wt-chip--${color}-color`">
-    <slot></slot>
+  <span
+    class="wt-chip"
+    :class="`wt-chip--${color}-color`"
+  >
+    <slot />
   </span>
 </template>
 
 <script>
 export default {
-  name: 'wt-chip',
+  name: 'WtChip',
   props: {
+    /**
+     * The color of the chip
+     * @values main, primary, secondary, success, warning, error, transfer
+     */
     color: {
       type: String,
       default: 'main',
-      options: ['main', 'outline', 'accent', 'secondary', 'secondary-50', 'success', 'danger', 'transfer'],
-      notes: '"main" and "outline" are chip-specific colors',
     },
   },
 };

package/src/components/wt-context-menu/wt-context-menu.vue

@@ -6,18 +6,18 @@
     placement="bottom-end"
     popper-class="wt-context-menu__floating-wrapper"
   >
-    <template v-slot:activator>
-      <slot name="activator"></slot>
+    <template #activator>
+      <slot name="activator" />
     </template>
-    <template v-slot:default="{ hide }">
+    <template #default="{ hide }">
       <ul
         class="wt-context-menu__menu"
         :style="`width: ${width}; min-width: ${minWidth}; max-width: ${maxWidth};`"
       >
         <li
-          class="wt-context-menu__option-wrapper"
           v-for="(option, index) of options"
           :key="index"
+          class="wt-context-menu__option-wrapper"
         >
           <!--      <a> click.prevent prevents redirect to # -->
           <a

package/src/components/wt-copy-action/wt-copy-action.vue

@@ -1,12 +1,12 @@
 <template>
   <wt-tooltip class="wt-copy-action">
-    <template v-slot:activator>
+    <template #activator>
       <wt-icon-btn
         v-bind="$attrs"
         :icon="copied ? 'done' : 'copy'"
         class="copy-action"
         @click="copy"
-      ></wt-icon-btn>
+      />
     </template>
     {{ copied ? copiedTooltip : copyTooltip }}
   </wt-tooltip>
@@ -18,10 +18,7 @@ import copy from 'clipboard-copy';
 let copiedIdTimeout = null;
 
 export default {
-  name: 'wt-copy-action',
-  data: () => ({
-    copied: false,
-  }),
+  name: 'WtCopyAction',
   props: {
     value: {
       type: String,
@@ -34,6 +31,9 @@ export default {
       }),
     },
   },
+  data: () => ({
+    copied: false,
+  }),
   computed: {
     copyTooltip() {
       return this.tooltips.copy || this.$t('webitelUI.copyAction.copy');

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

@@ -39,7 +39,7 @@
   --dp-hover-color: var(--secondary-color-50);
   --dp-hover-text-color: var(--contrast-color);
   --dp-hover-icon-color: var(--icon-color--hover);
-  --dp-primary-color: var(--accent-color);
+  --dp-primary-color: var(--primary-color);
   --dp-primary-text-color: var(--main-color);
   --dp-secondary-color: var(--secondary-color);
   --dp-border-color: var(--form-border-color);

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

@@ -13,7 +13,9 @@
       <slot
         v-bind="{ label }"
         name="label"
-      >{{ label }}</slot>
+      >
+        {{ label }}
+      </slot>
     </wt-label>
     <vue-datepicker
       v-bind="{ ...$attrs, ...$props }"
@@ -29,46 +31,46 @@
       @open="isOpened = true"
       @update:model-value="emit('input', $event.getTime())"
     >
-      <template v-slot:input-icon>
+      <template #input-icon>
         <wt-icon
           :color="disabled ? 'disabled' : 'default'"
           icon="calendar"
-        ></wt-icon>
+        />
       </template>
-      <template v-slot:clear-icon>
+      <template #clear-icon>
         <wt-icon
           :class="{ 'wt-datepicker__open-arrow--opened': isOpened }"
           :color="disabled ? 'disabled' : 'default'"
           class="wt-datepicker__open-arrow"
           icon="arrow-down"
-        ></wt-icon>
+        />
       </template>
-      <template v-slot:arrow-left>
+      <template #arrow-left>
         <wt-icon-btn
           icon="arrow-left"
-        ></wt-icon-btn>
+        />
       </template>
-      <template v-slot:arrow-right>
+      <template #arrow-right>
         <wt-icon-btn
           icon="arrow-right"
-        ></wt-icon-btn>
+        />
       </template>
       <template
         v-if="isDateTime"
-        v-slot:time-picker="{ time, updateTime }"
+        #time-picker="{ time, updateTime }"
       >
         <div class="datepicker__timepicker">
           <wt-time-input
             :value="time.hours"
             max-value="23"
             @input="updateTime"
-          ></wt-time-input>
+          />
           :
           <wt-time-input
             :value="time.minutes"
             max-value="59"
             @input="updateTime($event, false)"
-          ></wt-time-input>
+          />
         </div>
       </template>
     </vue-datepicker>

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

@@ -4,7 +4,7 @@
 
 <script>
 export default {
-  name: 'wt-divider',
+  name: 'WtDivider',
 };
 </script>
 

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

@@ -10,11 +10,15 @@
     </div>
     <p
       v-if="!hiddenText"
-      class="wt-dummy__text">{{ text || $t('webitelUI.dummy.text') }}</p>
+      class="wt-dummy__text"
+    >
+      {{ text || $t('webitelUI.dummy.text') }}
+    </p>
     <wt-button
       v-if="showAction"
       @click="emits('create')"
-      >{{ buttonText || $t('reusable.add') }}
+    >
+      {{ buttonText || $t('reusable.add') }}
     </wt-button>
   </div>
 </template>

package/src/components/wt-error-page/wt-error-page.vue

@@ -7,12 +7,18 @@
         :alt="errorPic.alt"
       >
       <h2
-        class="wt-error-page__title">{{ errorTitle }}</h2>
-      <p class="wt-error-page__text">{{ errorText }}</p>
+        class="wt-error-page__title"
+      >
+        {{ errorTitle }}
+      </h2>
+      <p class="wt-error-page__text">
+        {{ errorText }}
+      </p>
       <wt-button
         class="wt-error-page__action"
         @click="$emit('back')"
-      >{{ $t('webitelUI.errorPages.goBack') }}
+      >
+        {{ $t('webitelUI.errorPages.goBack') }}
       </wt-button>
     </article>
   </section>
@@ -23,7 +29,7 @@ import pic403 from '../../assets/components/organisms/wt-error-page/403.svg';
 import pic404 from '../../assets/components/organisms/wt-error-page/404.svg';
 
 export default {
-  name: 'wt-error-page',
+  name: 'WtErrorPage',
   props: {
     type: {
       type: String,

package/src/components/wt-expansion-panel/wt-expansion-panel.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     :class="[{'wt-expansion-panel--opened':open},
-    `wt-expansion-panel--${props.size}`]"
+             `wt-expansion-panel--${props.size}`]"
     class="wt-expansion-panel"
   >
     <div
@@ -10,14 +10,14 @@
       @click="open = !open"
       @keypress.enter="open = !open"
     >
-      <slot name="title"></slot>
+      <slot name="title" />
       <wt-icon
         icon="arrow-right"
-      ></wt-icon>
+      />
     </div>
     <wt-expand-transition>
       <div v-show="open">
-        <slot></slot>
+        <slot />
       </div>
     </wt-expand-transition>
   </div>

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

@@ -1,20 +1,23 @@
 <template>
-  <article class="filters-panel-wrapper" :class="{ 'filters-panel-wrapper--opened': isOpened }">
+  <article
+    class="filters-panel-wrapper"
+    :class="{ 'filters-panel-wrapper--opened': isOpened }"
+  >
     <div class="filters-wrap">
-      <slot></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',
+  name: 'FiltersPanelWrapper',
   data: () => ({
     isOpened: false,
     filtersCount: 0,

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

@@ -3,12 +3,12 @@
     <slot>
       <slot name="title-wrapper">
         <h1 class="wt-headline__title">
-          <slot name="title"></slot>
+          <slot name="title" />
         </h1>
       </slot>
       <div class="wt-headline__actions-wrapper">
-        <slot name="search"></slot>
-        <slot name="actions"></slot>
+        <slot name="search" />
+        <slot name="actions" />
       </div>
     </slot>
   </header>
@@ -16,7 +16,7 @@
 
 <script>
 export default {
-  name: 'wt-headline',
+  name: 'WtHeadline',
 };
 </script>
 

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(--icon-color);
+  --headline-nav-accent-indicator-color: var(--primary-color);
 }