@webitel/ui-sdk 23.9.1 → 23.12.2

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

@@ -1,162 +1,194 @@
 <template>
-  <wt-button
-    v-bind="{ ...$attrs, ...$props }"
+  <button
     :class="[
       `wt-rounded-action--color-${color}`,
+      `wt-rounded-action--size-${size}`,
       { 'wt-rounded-action--active': active },
       { 'wt-rounded-action--disabled': disabled },
-      { 'wt-rounded-action--filled': filled },
+      { 'wt-rounded-action--rounded': rounded },
+      { 'wt-rounded-action--wide': wide },
     ]"
-    :size="size"
-    color="secondary"
+    type="button"
     class="wt-rounded-action"
-    @click="$emit('click', $event)"
+    @click="emit('click', $event)"
   >
+    <wt-loader
+      v-if="loading"
+      size="sm"
+      :color="loaderColor"
+    ></wt-loader>
     <wt-icon
+      v-else
       :color="iColor"
       :icon="icon"
       :size="size"
     ></wt-icon>
-  </wt-button>
+  </button>
 </template>
 
-<script>
-export default {
-  name: 'wt-rounded-action',
-  props: {
-    icon: {
-      type: String,
-    },
-    color: {
-      type: String,
-      options: ['secondary', 'accent', 'success', 'danger', 'hold', 'transfer'],
-    },
-    iconColor: {
-      type: String,
-      default: null,
-    },
-    size: {
-      type: String,
-      default: 'md',
-      options: ['sm', 'md'],
-    },
-    active: {
-      type: Boolean,
-      default: false,
-    },
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-    filled: {
-      type: Boolean,
-      default: false,
-    },
+<script setup>
+import { computed } from 'vue';
+
+const props = defineProps({
+  icon: {
+    type: String,
+    required: true,
+  },
+  /**
+   * @values 'primary', 'secondary', 'success', 'error', 'transfer'
+   */
+  color: {
+    type: String,
+    options: ['primary', 'secondary', 'success', 'error', 'transfer'],
+    default: 'secondary',
+  },
+  /**
+   * @values 'sm', 'md'
+   */
+  size: {
+    type: String,
+    default: 'md',
+  },
+  active: {
+    type: Boolean,
+    default: false,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  rounded: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * Stretches button to all available width
+   */
+  wide: {
+    type: Boolean,
+    default: false,
   },
-  emits: ['click'],
-  computed: {
-    iColor() {
-      if (this.iconColor) return this.iconColor;
-      if (this.disabled) return 'secondary-50';
-      if (this.color === 'secondary') return null; // dont change icon color
-      if (this.filled && this.color) return 'contrast';
-      return this.color;
-    },
+  loading: {
+    type: Boolean,
+    default: false,
   },
-};
+});
+const emit = defineEmits(['click']);
+
+const iColor = computed(() => {
+  const onDark = ['success', 'error', 'transfer'];
+  const onLight = ['primary'];
+  if (props.disabled) return 'disabled';
+  if (onDark.includes(props.color)) return 'on-dark';
+  if (onLight.includes(props.color)) return 'on-light';
+  if (props.active) return 'default';
+  return 'default';
+});
+const loaderColor = computed(() => {
+  if (['success', 'transfer', 'error'].includes(props.color)) return 'main';
+  return 'contrast';
+});
 </script>
 
 <style lang="scss">
 @import './variables.scss';
 </style>
 
-<!--not scoped to change .icon colors-->
 <style lang="scss" scoped>
-
-.wt-button.wt-rounded-action {
-  min-width: auto;
-  min-height: 0;
-  padding: var(--rounded-action-padding);
+.wt-rounded-action {
+  display: block;
+  width: fit-content;
   line-height: 0;
-  border: var(--btn-border);
-  border-color: transparent;
-  background: var(--rounded-action-bg-color);
+  padding: var(--rounded-action-padding);
   box-shadow: var(--elevation-1);
+  border: var(--rounded-action-border-size) solid;
+  background: var(--rounded-action-secondary-color);
+  border-color: var(--rounded-action-secondary-color);
+  border-radius: var(--border-radius);
+  transition: var(--transition);
 
   &:hover {
-    background: var(--rounded-action-bg-color); // override default wt-button hover
     box-shadow: var(--elevation-2);
   }
 
-  &--active {
-    border-color: var(--icon-color);
-
-    &.wt-rounded-action--color-secondary {
-      border-color: var(--icon-color);
-    }
-
-    &.wt-rounded-action--color-accent {
-      border-color: var(--btn-accent--hover-color);
-    }
+  &--wide {
+    width: 100%;
+  }
 
-    &.wt-rounded-action--color-success {
-      border-color: var(--btn-true--hover-color);
-    }
+  &--rounded {
+    border-radius: var(--rounded-action-rounded-border-radius);
+  }
 
-    &.wt-rounded-action--color-danger {
-      border-color: var(--btn-false--hover-color);
-    }
+  &--color {
+    &-primary {
+      background: var(--rounded-action-primary-color);
+      border-color: var(--rounded-action-primary-color);
 
-    &.wt-rounded-action--color-hold {
-      border-color: var(--btn-hold--hover-color);
+      &:hover {
+        background: var(--rounded-action-primary-hover-color);
+        border-color: var(--rounded-action-primary-hover-color);
+      }
     }
 
-    &.wt-rounded-action--color-transfer {
-      border-color: var(--btn-transfer--hover-color);
-    }
-  }
+    &-secondary {
+      background: var(--rounded-action-secondary-color);
+      border-color: var(--rounded-action-secondary-color);
 
-  &--filled {
+      &:hover {
+        background: var(--rounded-action-secondary-hover-color);
+        border-color: var(--rounded-action-secondary-hover-color);
+      }
 
-    &:hover {
-      box-shadow: var(--elevation-5);
-      border-color: var(--rounded-action-bg-color);
+      &.wt-rounded-action--active {
+        background: transparent;
+        border-color: var(--rounded-action-secondary-active-color);
+      }
     }
 
-    &.wt-rounded-action--color-secondary {
-      background-color: var(--btn-secondary-color);
-      border-color: var(--btn-secondary-color);
-    }
+    &-success {
+      background: var(--rounded-action-success-color);
+      border-color: var(--rounded-action-success-color);
 
-    &.wt-rounded-action--color-accent {
-      background-color: var(--btn-accent--hover-color);
-      border-color: var(--btn-accent--hover-color);
+      &:hover {
+        background: var(--rounded-action-success-hover-color);
+        border-color: var(--rounded-action-success-hover-color);
+      }
     }
 
-    &.wt-rounded-action--color-success {
-      background-color: var(--btn-true--hover-color);
-      border-color: var(--btn-true--hover-color);
-    }
+    &-error {
+      background: var(--rounded-action-error-color);
+      border-color: var(--rounded-action-error-color);
 
-    &.wt-rounded-action--color-danger {
-      background-color: var(--btn-false--hover-color);
-      border-color: var(--btn-false--hover-color);
+      &:hover {
+        background: var(--rounded-action-error-hover-color);
+        border-color: var(--rounded-action-error-hover-color);
+      }
     }
 
-    &.wt-rounded-action--color-hold {
-      background-color: var(--btn-false--hover-color);
-      border-color: var(--btn-false--hover-color);
-    }
+    &-transfer {
+      background: var(--rounded-action-transfer-color);
+      border-color: var(--rounded-action-transfer-color);
 
-    &.wt-rounded-action--color-transfer {
-      background-color: var(--btn-false--hover-color);
-      border-color: var(--btn-false--hover-color);
+      &:hover {
+        background: var(--rounded-action-transfer-hover-color);
+        border-color: var(--rounded-action-transfer-hover-color);
+      }
     }
   }
 
   &.wt-rounded-action--disabled {
-    border-color: transparent;
+    background: var(--rounded-action-disabled-color);
+    border-color: var(--rounded-action-disabled-color);
     box-shadow: none;
+    pointer-events: none;
+  }
+
+  &--size {
+    &-sm {
+    }
+
+    &-md {
+    }
   }
 }
 </style>

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

@@ -10,16 +10,20 @@
     class="wt-select"
   >
     <wt-label
+      v-bind="labelProps"
       v-if="hasLabel"
       :disabled="disabled"
       :invalid="invalid"
       class="wt-select__label"
-      v-bind="labelProps"
     >
       <!-- @slot Custom input label -->
-      <slot name="label" v-bind="{ label }">{{ requiredLabel }}</slot>
+      <slot
+        v-bind="{ label }"
+        name="label"
+      >{{ requiredLabel }}</slot>
     </wt-label>
     <vue-multiselect
+      v-bind="$attrs"
       ref="vue-multiselect"
       :allow-empty="allowEmpty"
       :disabled="disabled"
@@ -33,7 +37,6 @@
       :track-by="trackBy"
       :model-value="selectValue"
       class="wt-select__select"
-      v-bind="$attrs"
       @close="isOpened = false"
       @open="isOpened = true"
       v-on="listeners"
@@ -51,7 +54,10 @@
 
       <!--      Slot for custom label template for single select-->
       <template v-slot:singleLabel="{ option }">
-        <slot name="singleLabel" v-bind="{ option, optionLabel }">
+        <slot
+          v-bind="{ option, optionLabel }"
+          name="singleLabel"
+        >
           <span class="multiselect__single-label">
             {{ getOptionLabel({ option, optionLabel }) }}
           </span>
@@ -60,7 +66,10 @@
 
       <!--      Slot for custom option template -->
       <template v-slot:option="{ option }">
-        <slot name="option" v-bind="{ option, optionLabel }">
+        <slot
+          v-bind="{ option, optionLabel }"
+          name="option"
+        >
           {{ getOptionLabel({ option, optionLabel }) }}
         </slot>
       </template>
@@ -72,7 +81,7 @@
           :disabled="disabled"
           class="multiselect__select"
           icon="arrow-down"
-          @mousedown.native.prevent.stop="toggle"
+          @mousedown.prevent.stop="toggle"
         ></wt-icon-btn>
       </template>
 

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

@@ -8,9 +8,9 @@
     }"
   >
     <wt-label
+      v-bind="labelProps"
       class="wt-switcher__wrapper"
       :class="{'wt-switcher__wrapper--label-left': labelLeft}"
-      v-bind="labelProps"
     >
       <input
         class="wt-switcher__input"
@@ -21,7 +21,10 @@
       >
       <span class="wt-switcher__checkmark"></span>
       <!-- @slot Custom input label -->
-      <slot name="label" v-bind="{ label, value, disabled }">
+      <slot
+        v-bind="{ label, value, disabled }"
+        name="label"
+      >
         <div v-if="label" class="wt-switcher__label">{{ label }}</div>
       </slot>
     </wt-label>

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

@@ -11,7 +11,10 @@
       type="button"
       @click="open(tab)"
     >
-      <slot :name="tab.value" v-bind="{ tab, current }">
+      <slot
+        v-bind="{ tab, current }"
+        :name="tab.value"
+      >
         <span style="display: block;">{{ tab.text }}</span>
       </slot>
     </button>

package/src/components/wt-tags-input/wt-tags-input.vue

@@ -8,17 +8,21 @@
     class="wt-tags-input"
   >
     <wt-label
+      v-bind="labelProps"
       v-if="hasLabel"
       :disabled="disabled"
       :invalid="invalid"
       class="wt-tags-input__label"
-      v-bind="labelProps"
     >
       <!-- @slot Custom input label -->
-      <slot name="label" v-bind="{ label }">{{ requiredLabel }}</slot>
+      <slot
+        v-bind="{ label }"
+        name="label"
+      >{{ requiredLabel }}</slot>
     </wt-label>
 
     <vue-multiselect
+      v-bind="$attrs"
       ref="vue-multiselect"
       :close-on-select="false"
       :disabled="disabled"
@@ -32,7 +36,6 @@
       :model-value="selectValue"
       class="wt-tags-input__select"
       multiple
-      v-bind="$attrs"
       v-on="listeners"
     >
 
@@ -50,7 +53,10 @@
 
       <!--      Slot for custom option template -->
       <template v-slot:option="{ option }">
-        <slot name="option" v-bind="{ option, optionLabel }">
+        <slot
+          v-bind="{ option, optionLabel }"
+          name="option"
+        >
           {{ getTagOptionLabel({ option, optionLabel }) }}
         </slot>
       </template>
@@ -63,7 +69,7 @@
           class="multiselect__select"
           color="active"
           icon="arrow-down"
-          @mousedown.native.prevent.stop="toggle"
+          @mousedown.prevent.stop="toggle"
         ></wt-icon-btn>
       </template>
 

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

@@ -7,13 +7,16 @@
     }"
   >
     <wt-label
+      v-bind="labelProps"
       :for="name"
       :disabled="disabled"
       :invalid="invalid"
-      v-bind="labelProps"
     >
       <!-- @slot Custom input label -->
-      <slot name="label" v-bind="{ label }">{{ requiredLabel }}</slot>
+      <slot
+        v-bind="{ label }"
+        name="label"
+      >{{ requiredLabel }}</slot>
     </wt-label>
     <div class="wt-textarea__wrapper">
       <textarea

package/src/components/wt-time-input/wt-time-input.vue

@@ -8,15 +8,18 @@
     }"
   >
     <wt-label
+      v-bind="labelProps"
       v-if="hasLabel"
       :for="name"
       :outline="outline"
       :disabled="disabled"
       :invalid="invalid"
-      v-bind="labelProps"
     >
       <!-- @slot Custom input label -->
-      <slot name="label" v-bind="{ label }">{{ label }}</slot>
+      <slot
+        v-bind="{ label }"
+        name="label"
+      >{{ label }}</slot>
     </wt-label>
     <div class="wt-time-input__wrapper">
       <input

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

@@ -1,9 +1,9 @@
 <template>
   <div class="wt-timepicker" :class="{'wt-timepicker--invalid': invalid}">
     <wt-label
+      v-bind="labelProps"
       v-if="label"
       :invalid="invalid"
-      v-bind="labelProps"
     >
       {{ `${label} (${format})` }}
     </wt-label>