@webitel/ui-sdk 23.12.45 → 23.12.47

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "23.12.45",
+  "version": "23.12.47",
   "private": false,
   "scripts": {
     "dev": "vite",
@@ -35,7 +35,6 @@
   ],
   "dependencies": {
     "@floating-ui/vue": "^1.0.1",
-    "@vue/compat": "^3.3.8",
     "@vuelidate/core": "^2.0.3",
     "@vuelidate/validators": "^2.0.4",
     "@vuepic/vue-datepicker": "^4.4.0",
@@ -54,7 +53,6 @@
     "query-string": "^8.1.0",
     "sortablejs": "^1.15.0",
     "tiny-emitter": "^2.1.0",
-    "vue": "^3.3.8",
     "vue-i18n": "^9.2.2",
     "vue-multiselect": "^3.0.0-beta.1",
     "vue-observe-visibility": "^2.0.0-alpha.1",
@@ -63,6 +61,8 @@
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "4.4.1",
+    "@vue/compat": "^3.3.8",
+    "vue": "^3.3.8",
     "@vitest/coverage-v8": "^0.34.6",
     "@vue/compiler-sfc": "^3.2.47",
     "@vue/test-utils": "^2.3.0",

package/src/components/wt-app-header/wt-app-header.vue

@@ -4,12 +4,6 @@
   </header>
 </template>
 
-<script>
-export default {
-  name: 'WtAppHeader',
-};
-</script>
-
 <style lang="scss">
 @import './variables.scss';
 </style>

package/src/components/wt-progress-bar/_variables.scss

@@ -1,11 +1,13 @@
 
 :root {
-  --progress-bar-height: 12px;
-  --progress-bar-padding: var(--spacing-3xs);
-  --progress-bar-border-radius: var(--progress-bar-padding);
+  --wt-progress-bar-height: 12px;
+  --wt-progress-bar-padding: var(--spacing-3xs);
+  --wt-progress-bar-border-radius: var(--wt-progress-bar-padding);
 
-  --progress-bar-bg-color--primary: var(--primary-color);
-  --progress-bar-bg-color--secondary: var(--secondary-color);
-  --progress-bar-bg-color--success: var(--true-color);
-  --progress-bar-bg-color--danger: var(--false-color);
+  --wt-progress-bar-background-color: var(--dp-1-surface-color);
+  --wt-progress-bar-background-primary-color: var(--primary-color);
+  --wt-progress-bar-background-secondary-color: var(--dp-20-surface-color);
+  --wt-progress-bar-background-success-color: var(--success-color);
+  --wt-progress-bar-background-error-color: var(--error-color);
+  --wt-progress-bar-background-warning-color: var(--warning-color);
 }

package/src/components/wt-progress-bar/wt-progress-bar.vue

@@ -29,7 +29,7 @@ export default {
     color: {
       type: String,
       default: 'primary',
-      options: ['primary', 'secondary', 'success', 'danger'],
+      options: ['primary', 'secondary', 'success', 'error'],
     },
   },
   computed: {
@@ -56,38 +56,43 @@ export default {
   box-sizing: border-box;
   width: 100%;
   position: relative;
-  padding: var(--progress-bar-padding);
+  padding: var(--wt-progress-bar-padding);
   line-height: 0;
+  background: var(--wt-progress-bar-background-color);
   border-radius: var(--border-radius);
   box-shadow: var(--elevation-1);
 }
 
 .wt-progress-bar__progress {
   display: inline-block;
-  height: var(--progress-bar-height);
+  height: var(--wt-progress-bar-height);
   will-change: width;
-  background: var(--primary-color);
-  border-radius: var(--progress-bar-border-radius) 0 0 var(--progress-bar-border-radius);
+  background: var(--wt-progress-bar-background-primary-color);
+  border-radius: var(--wt-progress-bar-border-radius) 0 0 var(--wt-progress-bar-border-radius);
   transition: var(--transition);
 }
 
 .wt-progress-bar--primary .wt-progress-bar__progress {
-  background: var(--progress-bar-bg-color--primary);
+  background: var(--wt-progress-bar-background-primary-color);
 }
 
 .wt-progress-bar--secondary .wt-progress-bar__progress {
-  background: var(--progress-bar-bg-color--secondary);
+  background: var(--wt-progress-bar-background-secondary-color);
 }
 
 .wt-progress-bar--success .wt-progress-bar__progress {
-  background: var(--progress-bar-bg-color--success);
+  background: var(--wt-progress-bar-background-success-color);
 }
 
-.wt-progress-bar--danger .wt-progress-bar__progress {
-  background: var(--progress-bar-bg-color--danger);
+.wt-progress-bar--error .wt-progress-bar__progress {
+  background: var(--wt-progress-bar-background-error-color);
+}
+
+.wt-progress-bar--warning .wt-progress-bar__progress {
+  background: var(--wt-progress-bar-background-warning-color);
 }
 
 .wt-progress-bar--overflow .wt-progress-bar__progress {
-  border-radius: var(--progress-bar-border-radius);
+  border-radius: var(--wt-progress-bar-border-radius);
 }
 </style>

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

@@ -71,6 +71,7 @@ export default {
       default: false,
     },
   },
+  emits: ['input'],
   computed: {
     isChecked() {
       return this.value === this.selected;
@@ -87,9 +88,11 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
-
+<style lang="scss">
 @import './variables.scss';
+</style>
+
+<style lang="scss" scoped>
 
 /* Customize the label (the container) */
 .wt-radio {
@@ -128,61 +131,22 @@ export default {
 }
 
 .wt-radio:hover {
-  .wt-radio__label {
-    color: var(--form-label--hover-color);
-  }
-
-  ::v-deep .wt-icon__icon {
-    fill: var(--icon-color--hover);
+  :deep .wt-icon__icon {
+    fill: var(--icon-btn-hover-color);
   }
 }
 
 .wt-radio--active {
-  .wt-radio__label {
-    color: var(--form-label--active-color);
-  }
-
-  ::v-deep .wt-icon__icon {
-    fill: var(--icon-color-active);
-  }
-}
-
-.wt-radio--outline {
-  .wt-radio__label {
-    color: var(--form-outline-label-color);
-  }
-
-  ::v-deep .wt-icon__icon {
-    fill: var(--icon-outline-color);
-  }
-
-  &.wt-radio--active {
-    .wt-radio__label {
-      color: var(--form-label--active-color);
-    }
-
-    ::v-deep .wt-icon__icon {
-      fill: var(--icon-outline--active-color);
-    }
-  }
-
-  &:hover {
-
-    ::v-deep .wt-icon__icon {
-      fill: var(--icon-outline--hover-color);
-    }
+  :deep .wt-icon__icon {
+    fill: var(--icon-active-color);
   }
 }
 
 .wt-radio--disabled {
   pointer-events: none;
 
-  .wt-radio__label {
-    color: var(--form-label--disabled-color);
-  }
-
-  ::v-deep .wt-icon__icon {
-    fill: var(--icon-color-disabled);
+  :deep .wt-icon__icon {
+    fill: var(--icon-disabled-color);
   }
 }
 </style>

package/src/components/wt-search-bar/wt-search-bar.vue

@@ -1,7 +1,6 @@
 <template>
   <div
     :class="{
-      'wt-search-bar--outline': outline,
       'wt-search-bar--invalid': invalid,
     }"
     class="wt-search-bar"
@@ -75,10 +74,6 @@ const props = defineProps({
   placeholder: {
     type: String,
   },
-  outline: {
-    type: Boolean,
-    default: false,
-  },
   hint: {
     type: String,
     description: 'Adds hint icon + tooltip with text, passed as "hint" prop',
@@ -128,12 +123,13 @@ function handleKeyup(event) {
 
   &.wt-search-bar--invalid {
     .wt-search-bar__wrapper {
-      border-color: var(--false-color);
+      border-color: var(--wt-text-field-input-border-error-color);
       outline: none; // prevent outline overlapping false color
     }
 
     .wt-search-bar__input {
-      color: var(--false-color);
+      @include wt-placeholder('error');
+      color: var(--wt-text-field-error-text-color);
     }
   }
 
@@ -142,7 +138,7 @@ function handleKeyup(event) {
     align-items: center;
     padding: calc(var(--spacing-xs) - 1px) var(--spacing-xs);
     border: var(--input-border);
-    border-color: var(--form-border-color);
+    border-color: var(--wt-text-field-input-border-color);
     border-radius: var(--border-radius);
     gap: var(--spacing-xs);
   }
@@ -167,23 +163,9 @@ function handleKeyup(event) {
     width: 100%;
     padding: 0;
     transition: var(--transition);
-    color: var(--form-input-color);
+    color: var(--wt-text-field-placeholder-color);
     border: none;
     outline: none;
-
-    &:focus {
-      @include wt-placeholder('focus');
-      border-color: var(--form-border--hover-color);
-    }
-
-    .wt-search-bar--outline & {
-      border-color: var(--form-outline-border-color);
-    }
-
-    .wt-search-bar--outline:hover &,
-    .wt-search-bar--outline &:focus {
-      border-color: var(--form-outline-border--hover-color);
-    }
   }
 
   /* clears the 'X' from Internet Explorer */

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

@@ -6,6 +6,10 @@
   --wt-slider-width: 100%;
   --wt-slider-input-height: 8px;
   --wt-slider-border: 1px solid var(--secondary-color);
+  --wt-slider-background-color: var(--secondary-color);
+  --wt-slider-background-completed-color: var(--primary-color);
+
+  --wt-slider-pointer-background-color: var(--white);
 
   --wt-slider-pointer-radius: 50%;
 

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

@@ -24,7 +24,7 @@ and swapping height/width of this component in order to have the correct output.
     class="wt-slider"
   >
     <div
-      :style="{ width: !vertical && verticalHeight }"
+      :style="{ width: vertical && verticalHeight }"
       class="wt-slider__wrapper"
     >
       <!-- The row above is needed in order to set correct component width when slider is vertical -->
@@ -77,10 +77,11 @@ export default {
       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(--primary-color) ${progressPercent}%, var(--secondary-color) 0%)`;
+      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%';
@@ -123,7 +124,7 @@ export default {
     height: var(--wt-slider-pointer-size);
     border: var(--wt-slider-border);
     border-radius: var(--wt-slider-pointer-radius);
-    background: var(--main-color);
+    background: var(--wt-slider-pointer-background-color);
     -webkit-appearance: none;
   }
 
@@ -136,7 +137,7 @@ export default {
     height: var(--wt-slider-pointer-size);
     border: var(--wt-slider-border);
     border-radius: var(--wt-slider-pointer-radius);
-    background: var(--main-color);
+    background: var(--wt-slider-pointer-background-color);
     -moz-appearance: none;
   }
 

package/src/components/wt-status-select/_variables.scss

@@ -1,6 +1,8 @@
 
 :root {
-  --status-select-padding: 0 calc(var(--icon-size-md) + var(--spacing-xs)) 0 0; // reset wt-select padding, but preserve arrow icon padding
-  --status-select-option-color: var(--form-input-color);
-  --status-select-bg--hover-color: var(--secondary-color);
-}
+  --wt-status-select-padding: 0 calc(var(--icon-size-md) + var(--spacing-xs)) 0 0; // reset wt-select padding, but preserve arrow icon padding
+
+  --wt-status-select-option-text-color: var(--form-input-color);
+  --wt-status-select-option-background-hover-color: var(--secondary-color);
+  --wt-status-select-option-background-selected-color: var(--secondary-color);
+}

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

@@ -52,6 +52,7 @@ export default {
     //   options: ['sm', 'md'],
     // },
   },
+  emits: ['change'],
   computed: {
     selectedOption() {
       return this.statusOptions.find((option) => option.value === this.status);
@@ -107,7 +108,7 @@ export default {
 
     .multiselect__tags {
       min-height: 0;
-      padding: var(--status-select-padding);
+      padding: var(--wt-status-select-padding);
       border: none;
     }
 
@@ -122,11 +123,15 @@ export default {
       .multiselect__option {
         min-height: 0;
         padding: 0;
-        color: var(--status-select-option-color);
+        color: var(--wt-status-select-option-text-color);
       }
 
       .multiselect__option--highlight {
-        background: var(--status-select-bg--hover-color);
+        background: var(--wt-status-select-option-background-hover-color);
+      }
+
+      .multiselect__option--selected {
+        background: var(--wt-status-select-option-background-selected-color);
       }
     }
   }