@webitel/ui-sdk 25.8.55 → 25.8.56

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "25.8.55",
+  "version": "25.8.56",
   "private": false,
   "scripts": {
     "make-all": "npm version patch --git-tag-version false && npm run build && (npm run build:types || true) && (npm run lint:fix || true) && npm run publish-lib",
@@ -56,7 +56,7 @@
     "@vuepic/vue-datepicker": "^4.5.1",
     "@vueuse/components": "^13.0.0",
     "@webitel/api-services": "^0.0.33",
-    "@webitel/styleguide": "^24.12.53",
+    "@webitel/styleguide": "^24.12.57",
     "autosize": "^6.0.1",
     "axios": "^1.8.3",
     "clipboard-copy": "^4.0.1",

package/src/assets/icons/sprite/bread-crumbs.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.3749 6.21871C9.77922 5.89526 10.3578 5.93699 10.7128 6.29879L10.7811 6.37496L15.2802 12L10.7811 17.625C10.4361 18.0562 9.80616 18.1262 9.3749 17.7812C8.94364 17.4362 8.87364 16.8062 9.21865 16.375L12.7186 12L9.21865 7.62496L9.15908 7.54195C8.8839 7.11619 8.97053 6.54221 9.3749 6.21871Z"/>
+</svg>

package/src/assets/icons/sprite/index.js

@@ -20,6 +20,7 @@ import back from './back.svg';
 import bell from './bell.svg';
 import bellBadged from './bell-badged.svg';
 import bot from './bot.svg';
+import breadCrumbs from './bread-crumbs.svg';
 import bucket from './bucket.svg';
 import calendar from './calendar.svg';
 import call from './call.svg';
@@ -227,6 +228,7 @@ export default objCamelToKebab({
   bell,
   bellBadged,
   bucket,
+  breadCrumbs,
   bot,
   calendar,
   darkMode,

package/src/components/index.js

@@ -10,6 +10,7 @@ import WtAppNavigator from './wt-app-header/wt-app-navigator.vue';
 import WtHeaderActions from './wt-app-header/wt-header-actions.vue';
 import WtAvatar from './wt-avatar/wt-avatar.vue';
 import WtBadge from './wt-badge/wt-badge.vue';
+import WtBreadcrumb from './wt-breadcrumb/wt-breadcrumb.vue';
 import WtButton from './wt-button/wt-button.vue';
 import WtButtonSelect from './wt-button-select/wt-button-select.vue';
 import WtCheckbox from './wt-checkbox/wt-checkbox.vue';
@@ -26,7 +27,6 @@ import WtErrorPage from './wt-error-page/wt-error-page.vue';
 import WtExpansionPanel from './wt-expansion-panel/wt-expansion-panel.vue';
 import WtFiltersPanelWrapper from './wt-filters-panel-wrapper/wt-filters-panel-wrapper.vue';
 import WtHeadline from './wt-headline/wt-headline.vue';
-import WtHeadlineNav from './wt-headline-nav/wt-headline-nav.vue';
 import WtHint from './wt-hint/wt-hint.vue';
 import WtIcon from './wt-icon/wt-icon.vue';
 import WtIconAction from './wt-icon-action/wt-icon-action.vue';
@@ -111,7 +111,7 @@ const Components = {
   WtTextarea,
   WtAppHeader,
   WtHeadline,
-  WtHeadlineNav,
+  WtBreadcrumb,
   WtNavigationBar,
   WtAppNavigator,
   WtFiltersPanelWrapper,
@@ -151,6 +151,7 @@ export {
   WtAppNavigator,
   WtAvatar,
   WtBadge,
+  WtBreadcrumb,
   WtButton,
   WtButtonSelect,
   WtCheckbox,
@@ -169,7 +170,6 @@ export {
   WtFiltersPanelWrapper,
   WtHeaderActions,
   WtHeadline,
-  WtHeadlineNav,
   WtHint,
   WtIcon,
   WtIconAction,

package/src/components/{wt-headline-nav/__tests__/wt-headline-nav.spec.js → wt-breadcrumb/__tests__/wt-breadcrumb.spec.js}

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

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

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

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

@@ -0,0 +1,41 @@
+<template>
+  <p-breadcrumb
+    :model="path"
+  >
+    <template #item="{ item }">
+      <router-link
+        v-if="item?.route"
+        :to="item?.route"
+        class="wt-breadcrumb__text"
+        :class="{ 'wt-breadcrumb__text--last': item == lastItem }"
+      >
+        {{ item?.name }}
+      </router-link>
+      <span
+        v-else
+        class="wt-breadcrumb__text"
+        :class="{ 'wt-breadcrumb__text--last': item == lastItem }"
+      >
+        {{ item?.name }}
+      </span>
+    </template>
+    <template #separator>
+      <wt-icon
+        icon="bread-crumbs"
+      />
+    </template>
+  </p-breadcrumb>
+</template>
+
+<script setup lang="ts">
+import type { BreadcrumbProps } from 'primevue';
+import { computed } from 'vue';
+
+interface Props extends BreadcrumbProps {
+  path?: Array<{ name: string; route?: string | object }>;
+}
+
+const props = defineProps<Props>();
+
+const lastItem = computed(() => props?.path?.[props.path.length - 1]);
+</script>

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

@@ -1,20 +1,20 @@
 <template>
-  <hr
-    class="wt-divider"
-    :class="`wt-divider-${variant}`"
+  <p-divider
+    :layout="variant"
   />
 </template>
 
-<script>
-export default {
-  name: 'WtDivider',
-  props: {
-    variant: {
-      type: String,
-      default: 'horizontal',
-    },
-  },
-};
+<script setup lang="ts">
+import type { DividerProps } from 'primevue';
+import { defineProps, withDefaults } from 'vue';
+
+interface Props extends DividerProps {
+  variant?: 'horizontal' | 'vertical';
+}
+
+withDefaults(defineProps<Props>(), {
+  variant: 'horizontal',
+});
 </script>
 
 <style lang="scss">

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

@@ -31,7 +31,7 @@ export default {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  gap: var(--headline-nav-gap);
+  gap: var(--breadcrumb-gap);
   box-sizing: border-box;
   border-radius: var(--border-radius);
   background: var(--wt-headline-background-color);

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

@@ -37,6 +37,7 @@ const emit = defineEmits<{
   position: relative;
   width: fit-content;
   line-height: 0;
+  cursor: pointer;
 
   &:hover .wt-icon--color-default {
     fill: var(--icon-btn-hover-color);

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

@@ -1,26 +1,18 @@
 <template>
-  <div
-    :class="{
-      'wt-radio--active': isChecked,
-      'wt-radio--outline': outline,
-      'wt-radio--disabled': disabled,
-    }"
+  <div 
     class="wt-radio"
   >
-    <wt-label class="wt-radio__wrapper">
-      <input
-        :checked="isChecked"
-        :disabled="disabled"
-        :value="value"
-        class="wt-radio__input"
-        type="radio"
-        @input="inputHandler"
-      />
-      <wt-icon
-        :icon="radioIcon"
-        class="wt-radio__icon"
-      />
-      <!-- @slot Custom input label -->
+    <p-radio
+      v-model="model"
+      :input-id="radioId"
+      :disabled="disabled"
+      :value="value"
+    />
+    <wt-label 
+      :for="radioId"
+      :disabled="disabled"
+    >
+      <!-- @slot Custom label markup -->
       <slot
         name="label"
         v-bind="{ label, isChecked, disabled }"
@@ -36,56 +28,33 @@
   </div>
 </template>
 
-<script>
-export default {
-  name: 'WtRadio',
-  model: {
-    prop: 'selected',
-    event: 'input',
-  },
-  props: {
-    // value, set by radio
-    value: {
-      type: [String, Number, Boolean, Object],
-      default: '',
-    },
-    // currently selected value
-    selected: {
-      type: [String, Number, Boolean, Object],
-      default: '',
-    },
-    label: {
-      type: String,
-      default: '',
-    },
-    required: {
-      type: Boolean,
-      default: false,
-    },
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-    outline: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  emits: ['input'],
-  computed: {
-    isChecked() {
-      return this.value === this.selected;
-    },
-    radioIcon() {
-      return this.isChecked ? 'radio--checked' : 'radio';
-    },
-  },
-  methods: {
-    inputHandler() {
-      this.$emit('input', this.value);
-    },
-  },
-};
+<script setup lang="ts">
+import type { RadioButtonProps } from 'primevue/radiobutton';
+import { computed, defineModel, defineProps } from 'vue';
+
+interface Props extends RadioButtonProps {
+  // value, set by radio
+  value: string | number | boolean | object;
+  label?: string;
+  required?: boolean;
+  disabled?: boolean;
+  outline?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  label: '',
+  required: false,
+  disabled: false,
+  outline: false,
+});
+
+const model = defineModel<string | number | boolean | object>('selected', {required: true});
+
+const radioId = `radio-${Math.random().toString(36).slice(2, 11)}`;
+
+const isChecked = computed(() => {
+  return props.value === model.value;
+});
 </script>
 
 <style lang="scss">
@@ -93,59 +62,18 @@ export default {
 </style>
 
 <style lang="scss" scoped>
-/* Customize the label (the container) */
 .wt-radio {
   box-sizing: border-box;
   width: fit-content;
-
-  .wt-label {
-    cursor: pointer;
-  }
-}
-
-.wt-radio__wrapper {
   display: flex;
   position: relative;
   align-items: center;
-  cursor: pointer;
   user-select: none;
 }
 
 .wt-radio__label {
   transition: var(--transition);
+  cursor: pointer;
   margin-left: var(--radio-icon-margin);
 }
-
-/* Hide the browser's default radio button */
-.wt-radio__input {
-  position: absolute;
-  opacity: 0;
-  width: 0;
-  height: 0;
-  pointer-events: none;
-}
-
-.wt-radio__icon {
-  flex: 0 0 var(--icon-md-size);
-}
-
-.wt-radio:hover {
-  :deep(.wt-icon) {
-    fill: var(--icon-btn-hover-color);
-  }
-}
-
-.wt-radio--active {
-  :deep(.wt-icon) {
-    fill: var(--icon-active-color);
-  }
-}
-
-.wt-radio--disabled {
-  pointer-events: none;
-
-  :deep(.wt-icon) {
-    fill: var(--icon-disabled-color);
-  }
-}
 </style>

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

@@ -1,197 +1,44 @@
-<!-- We were trying to draw our own slider using <div> tags, but realizing all the limitations decided to use
-the native input of type 'range', styling it as per Webitel needs for every of the most popular web browsers.
-
-The biggest issue to solve was the vertical input. At the moment browsers do not support vertical input range having
-custom styling, so we are using css rotation.
-Dealing with rotation we realized rotated element is very hard to position correctly with no fixed height of the parent element.
-Considering the fact parent height is always relative to it's childs height, we are manipulating the child width/height on rotation.
-To achieve correct slider height we:
- 1. Rotate slider by 90deg, so the width of slider becomes 'heigth' of the parent.
- 2. Set the new slider width (which is now positioned from bottom to top) using fixed number of pixels, received with props.
- 3. Set the container element height to 100% so it is always calculated correctly depending on it`s child dimensions.
-
-Until there are no possibility to style input range and position it vertically, we are rotating our slider with css
-and swapping height/width of this component in order to have the correct output.
--->
-
 <template>
-  <div
-    :class="{
-      'wt-slider--disabled': disabled,
-      'wt-slider--vertical': vertical,
-    }"
-    :style="{ height: vertical && verticalHeight }"
-    class="wt-slider"
-  >
-    <div
-      :style="{ width: vertical && verticalHeight }"
-      class="wt-slider__wrapper"
-    >
-      <!-- The row above is needed in order to set correct component width when slider is vertical -->
-      <input
-        :disabled="disabled"
-        :max="max"
-        :min="min"
-        :step="step"
-        :style="{ background: progressStyle }"
-        :value="value"
-        class="wt-slider__slider"
-        type="range"
-        @input="inputHandler"
-      />
-    </div>
-  </div>
+  <p-slider
+    v-model="model"
+    :disabled="disabled"
+    :max="max"
+    :min="min"
+    :step="step"
+    :orientation="orientation"
+    :style="{ 
+      height: vertical ? `${height}px` : '',
+      width: !vertical && width ? `${width}px` : '',
+     }"
+  />
+  
 </template>
 
-<script>
-export default {
-  name: 'WtSlider',
-  props: {
-    value: {
-      type: Number,
-      default: 0,
-    },
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-    vertical: {
-      type: Boolean,
-      default: false,
-    },
-    min: {
-      type: Number,
-      default: 0,
-    },
-    max: {
-      type: Number,
-      default: 100,
-    },
-    step: {
-      type: Number,
-      default: 1,
-    },
-    // Height of vertical slider (px):
-    height: {
-      type: Number,
-      default: 100,
-    },
-  },
-  emits: ['input'],
-  computed: {
-    progressStyle() {
-      // To achieve the correct color styling:
-      const progressPercent =
-        ((this.value - this.min) / (this.max - this.min)) * 100;
-      return `linear-gradient(to right, var(--wt-slider-background-completed-color) ${progressPercent}%, var(--wt-slider-background-color) 0%)`;
-    },
-    verticalHeight() {
-      // in order to have correct parent height after slider rotation
-      return this.vertical ? `${this.height}px` : '100%';
-    },
-  },
-  methods: {
-    inputHandler(event) {
-      this.$emit('input', +event.target.value);
-    },
-  },
-};
-</script>
-
-<style lang="scss">
-@use './variables.scss';
-</style>
-
-<style lang="scss" scoped>
-.wt-slider__wrapper {
-  display: flex;
-  align-items: center;
-  width: var(--wt-slider-width);
-  height: var(--wt-slider-height);
-}
-
-.wt-slider__slider {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  cursor: pointer;
-  box-sizing: border-box;
-  margin: 0;
-  border: var(--wt-slider-border);
-  border-radius: var(--border-radius);
-  width: var(--wt-slider-width);
-  height: var(--wt-slider-input-height);
-
-  &::-webkit-slider-thumb {
-    -webkit-appearance: none;
-    transition: var(--transition);
-    border: var(--wt-slider-border);
-    border-radius: var(--wt-slider-pointer-radius);
-    background: var(--wt-slider-pointer-background-color);
-    width: var(--wt-slider-pointer-size);
-    height: var(--wt-slider-pointer-size);
-  }
-
-  &::-webkit-slider-runnable-track {
-    -webkit-appearance: none;
-  }
-
-  &::-moz-range-thumb {
-    -moz-appearance: none;
-    transition: var(--transition);
-    border: var(--wt-slider-border);
-    border-color: var(--wt-slider-pointer-border-color);
-    border-radius: var(--wt-slider-pointer-radius);
-    background: var(--wt-slider-pointer-background-color);
-    width: var(--wt-slider-pointer-size);
-    height: var(--wt-slider-pointer-size);
-  }
-
-  &::-moz-range-track {
-    -moz-appearance: none;
-  }
-
-  &::-ms-thumb {
-    appearance: none;
-  }
-
-  &::-ms-track {
-    appearance: none;
-  }
-}
-
-.wt-slider:hover {
-  .wt-slider__slider {
-    &::-webkit-slider-thumb {
-      background: var(--wt-slider-pointer-background-hover-color);
-    }
-
-    &::-moz-range-thumb {
-      background: var(--wt-slider-pointer-background-hover-color);
-    }
-  }
+<script setup lang="ts">
+import type { SliderProps } from 'primevue/slider';
+import { computed, defineModel } from 'vue';
+
+interface Props extends SliderProps{
+  disabled?: boolean;
+  vertical?: boolean;
+  min?: number;
+  max?: number;
+  step?: number;
+  height?: number;
+  width?: number;
 }
 
-.wt-slider--disabled {
-  .wt-slider__slider {
-    pointer-events: none;
+const props = withDefaults(defineProps<Props>(), {
+  disabled: false,
+  vertical: false,
+  min: 0,
+  max: 100,
+  step: 1,
+  height: 100,
+  width: undefined,
+});
 
-    &::-webkit-slider-thumb {
-      display: none;
-    }
+const model = defineModel<number>();
 
-    &::-moz-range-thumb {
-      display: none;
-    }
-  }
-}
-
-.wt-slider--vertical {
-  transform: var(--wt-slider-vertical-container-translation);
-  width: var(--wt-slider-height);
-
-  .wt-slider__wrapper {
-    transform: var(--wt-slider-vertical-transform);
-    transform-origin: var(--wt-slider-vertical-transform-origin);
-  }
-}
-</style>
+const orientation = computed(() => (props.vertical ? 'vertical' : 'horizontal'));
+</script>

package/src/modules/AgentStatusSelect/components/_internals/wt-cc-pause-cause-popup.vue

@@ -20,7 +20,7 @@
               :selected="selected.id"
               :value="option.id"
               class="wt-cc-pause-cause-popup-option__radio"
-              @input="select(option)"
+              @update:selected="select(option)"
             />
             <div class="wt-cc-pause-cause-popup-option__limits-wrapper">
               <span

package/src/modules/AuditForm/components/form-questions/options/audit-form-question-options.vue

@@ -31,7 +31,7 @@
         :label="opt.name"
         :selected="answerModel?.score"
         :value="opt.score"
-        @input="updateAnswer"
+        @update:selected="updateAnswer"
       />
     </div>
     <div v-else>Unknown mode: {{ mode }}</div>

package/src/modules/AuditForm/components/form-questions/score/audit-form-question-score.vue

@@ -35,7 +35,7 @@
         :label="`${score}`"
         :selected="answerModel?.score"
         :value="score"
-        @input="updateAnswer"
+        @update:selected="updateAnswer"
       />
     </div>
   </article>

package/src/plugins/primevue/primevue.plugin.js

@@ -1,10 +1,14 @@
 import PAutoComplete from 'primevue/autocomplete';
+import PBreadcrumb from 'primevue/breadcrumb';
 import PButton from 'primevue/button';
 import PCheckbox from 'primevue/checkbox';
 import PChip from 'primevue/chip';
 import PrimeVue from 'primevue/config';
+import PDivider from 'primevue/divider';
 import PInputText from 'primevue/inputtext';
 import PPopover from 'primevue/popover';
+import PRadio from 'primevue/radiobutton';
+import PSlider from 'primevue/slider'
 import Tooltip from 'primevue/tooltip';
 
 import WebitelTheme from './theme/webitel-theme.js';
@@ -30,7 +34,11 @@ const initPrimevue = (app) => {
   app.component('PInputText', changeComponentCompatMode(PInputText));
   app.component('PPopover', changeComponentCompatMode(PPopover));
   app.component('PCheckbox', changeComponentCompatMode(PCheckbox));
+  app.component('PRadio', changeComponentCompatMode(PRadio));
   app.component('PChip', changeComponentCompatMode(PChip));
+  app.component('PBreadcrumb', changeComponentCompatMode(PBreadcrumb));
+  app.component('PSlider', changeComponentCompatMode(PSlider));
+  app.component('PDivider', changeComponentCompatMode(PDivider));
 
   app.directive('tooltip', Tooltip);
 };

package/src/plugins/primevue/primevue.scss

@@ -1,2 +1,3 @@
 @use 'theme/components/tooltip/tooltip.scss' as *;
 @use 'theme/components/chip/chip.scss' as *;
+@use 'theme/components/breadcrumb/breadcrumb.scss' as *;