@webitel/ui-sdk 23.12.2 → 23.12.5-1

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

@@ -1,40 +1,46 @@
 <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>
+      <span
+        v-if="key !== 0"
+        class="wt-headline-nav__indicator"
+      />
       <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"
-        >{{ singlePath.name }}
+          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>
+        <span
+          v-else
+          class="wt-headline-nav__text"
+        >{{ singlePath.name }}</span>
       </h1>
     </div>
   </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 +48,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(--headline-nav-indicator-color);
+  }
 }
 
 .wt-headline-nav__title {
@@ -69,23 +84,21 @@ export default {
 }
 
 .wt-headline-nav__text {
-  color: var(--text-outline-color);
+  color: var(--text-main-color);
 }
 
 .wt-headline-nav__wrapper:last-child {
   min-width: 0;
 
   .wt-headline-nav__indicator {
-    background: var(--icon-color-accent);
+    &:before {
+      background: var(--headline-nav-accent-indicator-color);
+    }
   }
 
   .wt-headline-nav__title {
     overflow: hidden;
     text-overflow: ellipsis;
   }
-
-  .wt-headline-nav__text {
-    color: var(--text-primary-color);
-  }
 }
 </style>

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

@@ -1,24 +1,23 @@
 <template>
   <wt-tooltip class="wt-hint">
-    <template v-slot:activator>
+    <template #activator>
       <wt-icon-btn
         icon="rounded-info"
         :color="iconColor"
-      ></wt-icon-btn>
+      />
     </template>
-    <slot></slot>
+    <slot />
   </wt-tooltip>
 </template>
 
 <script>
 export default {
-  name: 'wt-hint',
+  name: 'WtHint',
   props: {
     iconColor: {
       type: String,
-      default: 'outline',
     },
-  }
+  },
 };
 </script>
 

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

@@ -9,28 +9,23 @@
   --icon-xs-size: 8px;
 
   --icon-color: var(--grey-darken-2);
+  --icon-active-color: var(--grey-darken-4);
+  --icon-primary-color: var(--primary-color);
   --icon-error-color: var(--error-color);
   --icon-success-color: var(--success-color);
   --icon-warning-color: var(--warning-color);
   --icon-on-dark-color: var(--white);
   --icon-on-light-color: var(--grey-darken-3);
-  --icon-on-primary-color: var(--on-primary-color);
+  --icon-on-primary-color: var(--primary-on-color);
   --icon-info-color: var(--info-color);
   --icon-chat-color: var(--chat-color);
   --icon-transfer-color: var(--transfer-color);
+  --icon-job-color: var(--job-color);
   --icon-disabled-color: var(--grey-lighten-4);
 }
 
 :root.theme--dark {
   --icon-color: var(--grey-lighten-2);
+  --icon-active-color: var(--grey-lighten-4);
   --icon-disabled-color: var(--grey-darken-2);
-  --icon-error-color: var(--error-color);
-  --icon-success-color: var(--success-color);
-  --icon-warning-color: var(--warning-color);
-  --icon-on-dark-color: var(--white);
-  --icon-on-light-color: var(--grey-darken-3);
-  --icon-on-primary-color: var(--on-primary-color);
-  --icon-info-color: var(--info-color);
-  --icon-chat-color: var(--chat-color);
-  --icon-transfer-color: var(--transfer-color);
 }

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

@@ -2,13 +2,13 @@
   <i
     class="wt-icon"
     :class="[
-       `wt-icon--size-${size}`,
-       `wt-icon--color-${color}`,
-       { 'wt-icon--disabled': disabled },
-     ]"
+      `wt-icon--size-${size}`,
+      `wt-icon--color-${color}`,
+      { 'wt-icon--disabled': disabled },
+    ]"
   >
     <svg class="wt-icon__icon">
-      <use :xlink:href="iconName"></use>
+      <use :xlink:href="iconName" />
     </svg>
   </i>
 </template>
@@ -35,7 +35,7 @@ const props = defineProps({
     default: 'md',
   },
   /**
-   * @values 'default', 'disabled', 'error', 'success', 'warning', 'on-dark', 'on-light', 'on-primary', 'info', 'chat', 'transfer'
+   * @values 'default', 'active', 'disabled', 'primary', 'error', 'success', 'warning', 'on-dark', 'on-light', 'on-primary', 'info', 'chat', 'transfer', 'job'
    */
   color: {
     type: String,
@@ -88,6 +88,12 @@ svg {
   &-default .wt-icon__icon {
     fill: var(--icon-color);
   }
+  &-active .wt-icon__icon {
+    fill: var(--icon-active-color);
+  }
+  &-primary .wt-icon__icon {
+    fill: var(--icon-primary-color);
+  }
   &-error .wt-icon__icon {
     fill: var(--icon-error-color);
   }
@@ -115,6 +121,9 @@ svg {
   &-transfer .wt-icon__icon {
     fill: var(--icon-transfer-color);
   }
+  &-job .wt-icon__icon {
+    fill: var(--icon-job-color);
+  }
   &-disabled .wt-icon__icon {
     fill: var(--icon-disabled-color);
   }

package/src/components/wt-icon-action/_internals/wt-add-icon-action.vue

@@ -1,11 +1,11 @@
 <template>
   <wt-tooltip>
-    <template v-slot:activator>
+    <template #activator>
       <wt-icon-btn
         icon="plus"
         :disabled="disabled"
         @click="emit('click')"
-      ></wt-icon-btn>
+      />
     </template>
     {{ $t('webitelUI.iconAction.addActionHint') }}
   </wt-tooltip>

package/src/components/wt-icon-action/_internals/wt-delete-icon-action.vue

@@ -1,11 +1,11 @@
 <template>
   <wt-tooltip>
-    <template v-slot:activator>
+    <template #activator>
       <wt-icon-btn
         icon="bucket"
         :disabled="disabled"
         @click="emit('click')"
-      ></wt-icon-btn>
+      />
     </template>
     {{ $t('webitelUI.iconAction.deleteActionHint') }}
   </wt-tooltip>

package/src/components/wt-icon-action/_internals/wt-download-icon-action.vue

@@ -1,11 +1,11 @@
 <template>
   <wt-tooltip>
-    <template v-slot:activator>
+    <template #activator>
       <wt-icon-btn
         icon="download"
         :disabled="disabled"
         @click="emit('click')"
-      ></wt-icon-btn>
+      />
     </template>
     {{ $t('webitelUI.iconAction.downloadActionHint') }}
   </wt-tooltip>

package/src/components/wt-icon-action/_internals/wt-edit-icon-action.vue

@@ -1,11 +1,11 @@
 <template>
   <wt-tooltip>
-    <template v-slot:activator>
+    <template #activator>
       <wt-icon-btn
         icon="edit"
         :disabled="disabled"
         @click="emit('click')"
-      ></wt-icon-btn>
+      />
     </template>
     {{ $t('webitelUI.iconAction.editActionHint') }}
   </wt-tooltip>

package/src/components/wt-icon-action/_internals/wt-history-icon-action.vue

@@ -1,11 +1,11 @@
 <template>
   <wt-tooltip>
-    <template v-slot:activator>
+    <template #activator>
       <wt-icon-btn
         icon="history"
         :disabled="disabled"
         @click="emit('click')"
-      ></wt-icon-btn>
+      />
     </template>
     {{ $t('webitelUI.iconAction.historyActionHint') }}
   </wt-tooltip>

package/src/components/wt-icon-action/_internals/wt-refresh-icon-action.vue

@@ -1,11 +1,11 @@
 <template>
   <wt-tooltip>
-    <template v-slot:activator>
+    <template #activator>
       <wt-icon-btn
         icon="refresh"
         :disabled="disabled"
         @click="emit('click')"
-      ></wt-icon-btn>
+      />
     </template>
     {{ $t('reusable.refresh') }}
   </wt-tooltip>

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

@@ -3,7 +3,7 @@
     :is="actionComponent"
     :disabled="disabled"
     @click="emit('click')"
-  ></component>
+  />
 </template>
 
 <script setup>

package/src/components/wt-icon-btn/wt-icon-btn.vue

@@ -5,10 +5,11 @@
     type="button"
     @click="emit('click', $event)"
   >
+<!--    prevent icon-btn classes to fall to wt-icon -->
     <wt-icon
-      v-bind="$attrs"
+      v-bind="{ ...$attrs, class: '' }"
       :disabled="disabled"
-    ></wt-icon>
+    />
   </button>
 </template>
 
@@ -33,6 +34,7 @@ const emit = defineEmits(['click']);
 .wt-icon-btn {
   position: relative;
   display: block;
+  width: fit-content;
   line-height: 0;
 
   &:hover .wt-icon--color-default :deep .wt-icon__icon {

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

@@ -1,22 +1,17 @@
 :root {
-  --indicator-dot-size--size-sm: var(--spacing-xs);
-  --indicator-dot-size--size-md: var(--spacing-sm);
-  --indicator-dot-size: var(--indicator-size--size-md);
-  --indicator-dot-offset: var(--spacing-2xs);
+  --wt-indicator-dot-size--size-sm: var(--spacing-xs);
+  --wt-indicator-dot-size--size-md: var(--spacing-sm);
+  --wt-indicator-dot-size: var(--wt-indicator-size--size-md);
+  --wt-indicator-dot-offset: var(--spacing-2xs);
 
-  --indicator-text-margin: var(--spacing-2xs);
-  
-  --indicator-primary-color: var(--accent-color);
+  --wt-indicator-text-margin: var(--spacing-2xs);
 
-  --indicator-secondary-color: var(--secondary-color);
-
-  --indicator-disabled-color: var(--disabled-color);
-
-  --indicator-true-color: var(--true-color);
-
-  --indicator-false-color: var(--false-color);
-
-  --indicator-transfer-color: var(--transfer-color);
-
-  --indicator-break-out-color: hsla(36, 90%, 50%, 1);
-}
+  --wt-indicator-text-color: var(--text-main-color);
+  --wt-indicator-primary-color: var(--primary-color);
+  --wt-indicator-secondary-color: var(--dp-1-surface-color);
+  --wt-indicator-disabled-color: var(--dp-10-surface-color);
+  --wt-indicator-success-color: var(--success-color);
+  --wt-indicator-error-color: var(--error-color);
+  --wt-indicator-transfer-color: var(--transfer-color);
+  --wt-indicator-break-out-color: var(--warning-color);
+}

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

@@ -10,8 +10,11 @@
       :class="[
         `wt-indicator__indicator--${color}`,
       ]"
-    ></span>
-    <div v-if="isText" class="wt-indicator__text">
+    />
+    <div
+      v-if="isText"
+      class="wt-indicator__text"
+    >
       {{ text }}
     </div>
   </div>
@@ -19,12 +22,12 @@
 
 <script>
 export default {
-  name: 'wt-indicator',
+  name: 'WtIndicator',
   props: {
     color: {
       type: String,
       default: 'secondary',
-      options: ['primary', 'secondary', 'accent', 'disabled', 'success', 'danger', 'transfer', 'break-out', 'job'],
+      options: ['primary', 'secondary', 'disabled', 'success', 'error', 'transfer', 'break-out'],
     },
     text: {
       type: [String, Number],
@@ -57,55 +60,51 @@ export default {
 
 .wt-indicator__text {
   @extend %typo-body-1;
-  margin-left: var(--indicator-text-margin);
+  margin-left: var(--wt-indicator-text-margin);
+  color: var(--wt-indicator-text-color);
 }
 
 .wt-indicator__indicator {
-  min-width: var(--indicator-dot-size);
-  height: var(--indicator-dot-size);
-  margin: var(--indicator-dot-offset);
-  background: var(--indicator-disabled-color);
+  min-width: var(--wt-indicator-dot-size);
+  height: var(--wt-indicator-dot-size);
+  margin: var(--wt-indicator-dot-offset);
+  background: var(--wt-indicator-disabled-color);
   border-radius: 50%;
 
-  &--primary,
-  &--accent {
-    background: var(--indicator-primary-color);
+  &--primary {
+    background: var(--wt-indicator-primary-color);
   }
 
   &--secondary {
-    background: var(--indicator-secondary-color);
+    background: var(--wt-indicator-secondary-color);
   }
 
   &--disabled {
-    background: var(--indicator-disabled-color);
+    background: var(--wt-indicator-disabled-color);
   }
 
   &--success {
-    background: var(--indicator-true-color);
+    background: var(--wt-indicator-success-color);
   }
 
-  &--danger {
-    background: var(--indicator-false-color);
+  &--error {
+    background: var(--wt-indicator-error-color);
   }
 
   &--transfer {
-    background: var(--indicator-transfer-color);
+    background: var(--wt-indicator-transfer-color);
   }
 
   &--break-out {
-    background: var(--indicator-break-out-color);
-  }
-
-  &--job {
-    background: var(--job-color);
+    background: var(--wt-indicator-break-out-color);
   }
 }
 
 .wt-indicator--size {
   &-sm {
     .wt-indicator__indicator {
-      min-width: var(--indicator-dot-size--size-sm);
-      height: var(--indicator-dot-size--size-sm);
+      min-width: var(--wt-indicator-dot-size--size-sm);
+      height: var(--wt-indicator-dot-size--size-sm);
     }
     .wt-indicator__text {
       @extend %typo-caption;
@@ -113,8 +112,8 @@ export default {
   }
   &-md {
     .wt-indicator__indicator {
-      min-width: var(--indicator-dot-size--size-md);
-      height: var(--indicator-dot-size--size-md);
+      min-width: var(--wt-indicator-dot-size--size-md);
+      height: var(--wt-indicator-dot-size--size-md);
     }
     .wt-indicator__text {
       @extend %typo-body-1;