@webitel/ui-sdk 0.1.3-vue3 → 0.1.4-vite

package/src/validators/decimalValidator.js

@@ -0,0 +1,9 @@
+/* [WTEL-3791] */
+/* Check value is an integer or has n* decimal places */
+import { helpers } from '@vuelidate/validators';
+
+const decimalValidator = (count) => helpers.withParams(
+    { count },
+    (value) => value % 1 == 0 || value.toString().split('.')[1].length <= count);
+
+export default decimalValidator;

package/src/validators/domainValidator.js

@@ -0,0 +1,5 @@
+import isValidDomain from 'is-valid-domain';
+
+const domainValidator = (value) => isValidDomain(value);
+
+export default domainValidator;

package/src/components/atoms/wt-avatar/wt-avatar.vue

@@ -1,102 +0,0 @@
-<template>
-  <div
-    class="wt-avatar"
-    :class="[`wt-avatar--size-${size}`]"
-  >
-    <wt-badge
-      v-if="badge"
-      :color-variable="badgeColorVar"
-      :icon-badge="isDnd ? 'dnd' : null"
-    ></wt-badge>
-    <img
-      class="wt-avatar__img"
-      :src="imgSrc"
-      alt="avatar"
-    >
-  </div>
-</template>
-
-<script>
-import defaultAvatar from '../../../assets/components/atoms/wt-avatar/default-avatar.svg';
-import AbstractUserStatus from '../../../enums/AbstractUserStatus/AbstractUserStatus.enum';
-
-export default {
-  name: 'wt-avatar',
-  props: {
-    src: {
-      type: String,
-    },
-    size: {
-      type: String,
-      default: 'md',
-      options: ['md'],
-    },
-    badge: {
-      type: Boolean,
-      default: false,
-    },
-    status: {
-      type: String,
-      options: AbstractUserStatus,
-      default: AbstractUserStatus.OFFLINE,
-    },
-  },
-  computed: {
-    imgSrc() {
-      return this.src || defaultAvatar;
-    },
-    isDnd() {
-      return this.status === AbstractUserStatus.DND;
-    },
-    badgeColorVar() {
-      switch (this.status) {
-        case AbstractUserStatus.ACTIVE: return 'online-color';
-        case AbstractUserStatus.DND: return 'dnd-color';
-        case AbstractUserStatus.BUSY: return 'busy-color';
-        case AbstractUserStatus.OFFLINE: return 'offline-color';
-        default: return 'offline-color';
-      }
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-  .wt-avatar {
-    position: relative;
-    width: var(--avatar-size);
-    height: var(--avatar-size);
-    user-select: none;
-
-    &__img {
-      width: 100%;
-      height: 100%;
-      border-radius: 50%;
-    }
-
-    &--size-xs {
-      width: var(--avatar-size--size-xs);
-      height: var(--avatar-size--size-xs);
-    }
-
-    &--size-sm {
-      width: var(--avatar-size--size-sm);
-      height: var(--avatar-size--size-sm);
-    }
-
-    &--size-md {
-      width: var(--avatar-size--size-md);
-      height: var(--avatar-size--size-md);
-    }
-
-    &--size-lg {
-      width: var(--avatar-size--size-lg);
-      height: var(--avatar-size--size-lg);
-    }
-
-    &--size-xl {
-      width: var(--avatar-size--size-xl);
-      height: var(--avatar-size--size-xl);
-    }
-  }
-</style>

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

@@ -1,288 +0,0 @@
-<template>
-  <button
-    class="wt-button"
-    :class="[
-      colorClass,
-      `wt-button--size-${size}`,
-      {
-        'wt-button--contains-icon': containsIcon,
-        'wt-button--outline': outline,
-        'wt-button--wide': wide,
-        'wt-button--rounded': rounded,
-        'wt-button--disabled': disabled,
-        'wt-button--loading': loading,
-      }
-    ]"
-    type="button"
-    :disabled="disabled"
-    @click="$emit('click', $event)"
-  >
-    <wt-loader
-      v-if="loading"
-      size="sm"
-      :color="loaderColor"
-    ></wt-loader>
-    <slot v-else></slot>
-  </button>
-</template>
-
-<script>
-export default {
-  name: 'wt-button',
-  props: {
-    color: {
-      type: String,
-      default: 'accent',
-      options: ['accent', 'secondary', 'success', 'danger', 'transfer', 'job'],
-    },
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-    outline: {
-      type: Boolean,
-      default: false,
-    },
-    loading: {
-      type: Boolean,
-      default: false,
-    },
-    size: {
-      type: String,
-      default: 'md',
-      options: ['sm', 'md'],
-    },
-    wide: {
-      type: Boolean,
-      default: false,
-    },
-    rounded: {
-      type: Boolean,
-      default: false,
-    },
-    containsIcon: {
-      type: Boolean,
-      default: false,
-      description: 'https://stackoverflow.com/a/11126701',
-    },
-  },
-  computed: {
-    colorClass() {
-      if (!this.disabled) return `${this.color}`;
-      return '';
-    },
-    loaderColor() {
-      if (['success', 'transfer', 'danger', 'job'].includes(this.color)) return 'main';
-      return 'contrast';
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.wt-button {
-  @extend %typo-button;
-  box-sizing: border-box;
-  position: relative;
-  display: inline-block;
-  min-width: var(--btn-min-width);
-  padding: var(--btn-padding);
-  color: var(--btn-dark-font-color);
-  background-color: var(--btn-accent-color);
-  background-clip: padding-box;
-  border-radius: var(--border-radius);
-  transition: var(--transition);
-  cursor: pointer;
-
-  &--wide {
-    width: 100%;
-  }
-
-  &--rounded {
-    border-radius: var(--border-radius--pill);
-  }
-
-  // https://stackoverflow.com/a/11126701
-  &--contains-icon {
-    line-height: 0;
-  }
-
-  &--size {
-    &-sm {
-      padding: var(--btn-padding--size-sm);
-    }
-
-    &-md {
-      padding: var(--btn-padding--size-md);
-    }
-  }
-
-  &--loading {
-    pointer-events: none;
-  }
-
-  &:hover,
-  &:active {
-    background-color: var(--btn-accent--hover-color);
-    border-color: var(--btn-accent--hover-color);
-  }
-
-  &.secondary {
-    color: var(--btn-dark-font-color);
-    border-color: var(--btn-secondary-color);
-    background-color: var(--btn-secondary-color);
-
-    &:hover,
-    &:active {
-      color: var(--btn-dark-font-color);
-      border-color: var(--btn-secondary--hover-color);
-      background-color: var(--btn-secondary--hover-color);
-    }
-  }
-
-  &.success {
-    color: var(--btn-light-font-color);
-    background-color: var(--btn-true-color);
-    border-color: var(--btn-true-color);
-
-    &:hover,
-    &:active {
-      background-color: var(--btn-true--hover-color);
-      border-color: var(--btn-true--hover-color);
-    }
-  }
-
-  &.transfer {
-    color: var(--btn-light-font-color);
-    background-color: var(--btn-transfer-color);
-    border-color: var(--btn-transfer-color);
-
-    &:hover,
-    &:active {
-      background-color: var(--btn-transfer--hover-color);
-      border-color: var(--btn-transfer--hover-color);
-    }
-  }
-
-  &.job {
-    color: var(--btn-light-font-color);
-    background-color: var(--btn-job-color);
-    border-color: var(--btn-job-color);
-
-    &:hover,
-    &:active {
-      background-color: var(--btn-job--hover-color);
-      border-color: var(--btn-job--hover-color);
-    }
-  }
-
-  &.danger {
-    color: var(--btn-light-font-color);
-    background-color: var(--btn-false-color);
-    border-color: var(--btn-false-color);
-
-    &:hover,
-    &:active {
-      background-color: var(--btn-false--hover-color);
-      border-color: var(--btn-false--hover-color);
-    }
-  }
-
-  &.wt-button--outline {
-    border: var(--btn-border);
-    padding: var(--btn-padding--outline);
-    background-color: transparent;
-    color: var(--btn-accent-color);
-    border-color: var(--btn-accent-color);
-
-    &.wt-button--size {
-      &-sm {
-        padding: var(--btn-padding--size-sm--outline);
-      }
-
-      &-md {
-        padding: var(--btn-padding--size-md--outline);
-      }
-    }
-
-    &:hover,
-    &:active {
-      color: var(--btn-accent--hover-color);
-      border-color: var(--btn-accent--hover-color);
-      background-color: transparent;
-    }
-
-    &.secondary {
-      color: var(--btn-dark-font-color);
-      border-color: var(--btn-secondary-color);
-
-      &:hover,
-      &:active {
-        border-color: var(--btn-secondary--hover-color);
-        background-color: transparent;
-      }
-    }
-
-    &.success {
-      color: var(--btn-true-color);
-      border-color: var(--btn-true-color);
-
-      &:hover,
-      &:active {
-        color: var(--btn-true--hover-color);
-        border-color: var(--btn-true--hover-color);
-        background-color: transparent;
-      }
-    }
-
-    &.transfer {
-      color: var(--btn-transfer-color);
-      border-color: var(--btn-transfer-color);
-
-      &:hover,
-      &:active {
-        color: var(--btn-transfer--hover-color);
-        border-color: var(--btn-transfer--hover-color);
-        background-color: transparent;
-      }
-    }
-
-    &.job {
-      color: var(--btn-job-color);
-      border-color: var(--btn-job-color);
-
-      &:hover,
-      &:active {
-        color: var(--btn-job--hover-color);
-        border-color: var(--btn-job--hover-color);
-        background-color: transparent;
-      }
-    }
-
-    &.danger {
-      color: var(--btn-false-color);
-      border-color: var(--btn-false-color);
-
-      &:hover,
-      &:active {
-        color: var(--btn-false--hover-color);
-        border-color: var(--btn-false--hover-color);
-        background-color: transparent;
-      }
-    }
-  }
-
-  &.wt-button--disabled {
-    color: var(--btn-disabled-font-color);
-    background-color: var(--btn-disabled-color);
-    border-color: var(--btn-disabled-color);
-    cursor: auto;
-    pointer-events: none;
-    box-shadow: none;
-  }
-
-  .wt-loader {
-    margin: auto;
-  }
-}
-</style>

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

@@ -1,23 +0,0 @@
-<template>
-  <span class="wt-chip" :class="`wt-chip--${color}-color`">
-    <slot></slot>
-  </span>
-</template>
-
-<script>
-  export default {
-    name: 'wt-chip',
-    props: {
-      color: {
-        type: String,
-        default: 'main',
-        options: ['main', 'outline', 'accent', 'secondary', 'secondary-50', 'success', 'danger', 'transfer'],
-        notes: '"main" and "outline" are chip-specific colors',
-      },
-    },
-  };
-</script>
-
-<style lang="scss" scoped>
-  @import '../../../css/components/atoms/wt-chip/wt-chip';
-</style>

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

@@ -1,25 +0,0 @@
-<template>
-  <hr class="wt-divider">
-</template>
-
-<script>
-  export default {
-    name: 'wt-divider',
-  };
-</script>
-
-<style lang="scss" scoped>
-  .wt-divider {
-    display: block;
-    box-sizing: border-box;
-    width: 100%;
-    max-width: 100%;
-    height: 0;
-    max-height: 0;
-    padding: 0;
-    margin: 0;
-    border: var(--divider-border);
-    border-color: var(--divider-border-color);
-    border-top-width: thin;
-  }
-</style>

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

@@ -1,150 +0,0 @@
-<!-- eslint-disable -->
-<template>
-  <i
-    class="wt-icon"
-    :class="[
-       `wt-icon--size-${size}`,
-       `wt-icon--color-${color}`,
-       { 'wt-icon--disabled': disabled }
-     ]"
-  >
-    <svg class="wt-icon__icon">
-      <use :xlink:href="iconName"></use>
-    </svg>
-  </i>
-</template>
-
-<script>
-export default {
-  name: 'wt-icon',
-  props: {
-    icon: {
-      type: String,
-      required: true,
-    },
-    size: {
-      type: String,
-      default: 'md',
-    },
-    color: {
-      type: String,
-      default: 'default',
-      options: ['default', 'contrast', 'active', 'accent', 'secondary', 'disabled', 'success', 'danger', 'transfer', 'job', 'hold', 'secondary-50', 'icon-secondary'],
-    },
-    iconPrefix: {
-      type: String,
-      default: '',
-    },
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  computed: {
-    iconName() {
-      let name = '#';
-      if (this.iconPrefix) name += `${this.iconPrefix}-`;
-      return `${name}${this.icon}`;
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.wt-icon {
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  transition: var(--transition);
-}
-
-/*svg instead of .icon to override styles by .icon-icon-name-size without any other seelectors*/
-svg {
-  display: block;
-  width: 100%;
-  height: 100%;
-  stroke-width: 0;
-  fill: var(--icon-color);
-  transition: var(--transition);
-}
-
-.wt-icon--color {
-  &-default .wt-icon__icon {
-    fill: var(--icon-color);
-  }
-
-  &-accent .wt-icon__icon {
-    fill: var(--icon-color-accent);
-  }
-
-  &-contrast .wt-icon__icon {
-    fill: var(--icon-color-contrast);
-  }
-
-  &-active .wt-icon__icon {
-    fill: var(--icon-color-active);
-  }
-
-  &-secondary .wt-icon__icon {
-    fill: var(--secondary-color);
-  }
-
-  &-success .wt-icon__icon {
-    fill: var(--icon-color-success);
-  }
-
-  &-danger .wt-icon__icon {
-    fill: var(--icon-color-danger);
-  }
-
-  &-transfer .wt-icon__icon {
-    fill: var(--icon-color-transfer);
-  }
-
-  &-job .wt-icon__icon {
-    fill: var(--job-color);
-  }
-
-  &-hold .wt-icon__icon {
-    fill: var(--icon-color-hold);
-  }
-
-  &-secondary-50 .wt-icon__icon {
-    fill: var(--icon-color-secondary-50);
-  }
-
-  &-icon-secondary .wt-icon__icon {
-    fill: var(--icon-color-secondary);
-  }
-
-  &-disabled .wt-icon__icon {
-    fill: var(--icon-color-disabled);
-  }
-}
-
-.wt-icon.wt-icon--disabled .wt-icon__icon {
-  fill: var(--icon-color-disabled);
-}
-
-.wt-icon--size {
-  &-xl {
-    width: var(--icon-xl-size);
-    height: var(--icon-xl-size);
-  }
-
-  &-lg {
-    width: var(--icon-lg-size);
-    height: var(--icon-lg-size);
-  }
-
-  &-md {
-    width: var(--icon-md-size);
-    height: var(--icon-md-size);
-  }
-
-  &-sm {
-    width: var(--icon-sm-size);
-    height: var(--icon-sm-size);
-  }
-}
-</style>

package/src/components/atoms/wt-input-info/wt-input-info.vue

@@ -1,35 +0,0 @@
-<template>
-  <div
-    class="wt-input-info"
-    :class="{
-      'wt-input-info--invalid': invalid,
-    }"
-  >
-    <slot></slot>
-  </div>
-</template>
-
-<script>
-  export default {
-    name: 'wt-input-info',
-    props: {
-      invalid: {
-        type: Boolean,
-        default: false,
-      },
-    },
-  };
-</script>
-
-<style lang="scss" scoped>
-  .wt-input-info {
-    @extend %typo-caption;
-    margin-top: var(--input-info-margin);
-    color: var(--input-info-color);
-    min-height: var(--input-info-min-height);
-
-    &--invalid {
-      color: var(--input-info--invalid-color);
-    }
-  }
-</style>