@webitel/ui-sdk 0.1.2 → 0.1.3-vite

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

@@ -1,141 +0,0 @@
-<template>
-  <div
-    class="wt-textarea"
-    :class="{
-    }"
-  >
-    <wt-label :for="name">
-      <!-- @slot Custom input label -->
-      <slot name="label" v-bind="{ label }">{{ label }}</slot>
-    </wt-label>
-    <div class="wt-textarea__wrapper">
-      <textarea
-        :id="name"
-        class="wt-textarea__textarea"
-        :value="value"
-        :placeholder="placeholder || label"
-        @input="$emit('input', $event.target.value)"
-      ></textarea>
-      <wt-icon-btn
-        class="wt-textarea__reset-icon-btn"
-        :class="{ 'hidden': !value }"
-        icon="remove-rounded"
-        size="sm"
-        @click.native="$emit('input', '')"
-      ></wt-icon-btn>
-    </div>
-  </div>
-</template>
-
-<script>
-  export default {
-    name: 'wt-textarea',
-    props: {
-      /**
-       * Current textarea value (`v-model`)
-       */
-      value: {
-        type: String,
-        default: '',
-      },
-      /**
-       * textarea label
-       */
-      label: {
-        type: String,
-        default: '',
-      },
-      /**
-       * textarea placeholder
-       */
-      placeholder: {
-        type: String,
-      },
-      /**
-       * textarea name
-       */
-      name: {
-        type: String,
-        default: '',
-      },
-    },
-
-    data: () => ({
-    }),
-
-    mounted() {
-    },
-
-    computed: {
-    },
-
-    methods: {
-    },
-  };
-</script>
-
-<style lang="scss" scoped>
-  .wt-textarea {
-    cursor: text;
-  }
-
-  .wt-textarea__wrapper {
-    position: relative;
-  }
-
-  .wt-label {
-    margin-bottom: var(--label-margin);
-    cursor: text;
-
-    .wt-textarea:hover &,
-    .wt-textarea:focus-within & {
-      color: var(--form-label--hover-color);
-    }
-  }
-
-  .wt-textarea__reset-icon-btn {
-    position: absolute;
-    top: var(--input-icon-margin);
-    right: var(--input-icon-margin);
-
-    .wt-textarea:not(:focus-within) & {
-      opacity: 0;
-      pointer-events: none;
-    }
-  }
-
-  .wt-textarea__textarea {
-    @extend %typo-body-lg;
-
-    display: block;
-    width: 100%;
-    min-height: var(--textarea-min-height);
-    box-sizing: border-box;
-    padding: var(--textarea-padding);
-    color: var(--form-input-color);
-    border: var(--input-border);
-    border-color: var(--form-border-color);
-    border-radius: var(--border-radius);
-    transition: var(--transition);
-    resize: none;
-
-    &::placeholder {
-      color: var(--form-placeholder-color)
-    }
-
-    .wt-textarea:hover &,
-    &:focus {
-      border-color: var(--form-border--hover-color);
-
-      &::placeholder {
-        color: var(--form-placeholder--hover-color)
-      }
-    }
-  }
-
-  /* make icons black */
-  .wt-textarea:hover ::v-deep .wt-icon__icon,
-  .wt-textarea:focus-within ::v-deep .wt-icon__icon {
-    fill: var(--icon--hover-color);
-  }
-</style>

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

@@ -1,141 +0,0 @@
-<template>
-  <div
-    class="wt-time-input"
-    :class="{
-      'wt-time-input--outline': outline,
-      'wt-time-input--disabled': disabled,
-    }"
-  >
-    <wt-label :for="name" :outline="outline" :disabled="disabled">
-      <!-- @slot Custom input label -->
-      <slot name="label" v-bind="{ label }">{{ label }}</slot>
-    </wt-label>
-    <div class="wt-time-input__wrapper">
-      <input
-        :id="name"
-        class="wt-time-input__input"
-        :value="value"
-        :min="0"
-        :max="maxValue"
-        :disabled="disabled"
-        type="number"
-        @input="$emit('input', $event.target.value)"
-      >
-    </div>
-  </div>
-</template>
-
-<script>
-  export default {
-    name: 'wt-time-input',
-    props: {
-      /**
-       * Current input value (`v-model`)
-       */
-      value: {
-        type: [String, Number],
-        default: 0,
-      },
-      /**
-       * Form input label
-       */
-      label: {
-        type: String,
-        default: '',
-      },
-      /**
-       * Form input name
-       */
-      name: {
-        type: String,
-        default: '',
-      },
-      /**
-       * Time type: day, minute, second
-       */
-      maxValue: {
-        type: Number,
-      },
-      /**
-       * Native input required attribute
-       */
-      required: {
-        type: Boolean,
-        default: false,
-        description: 'Native input required attribute',
-      },
-      /**
-       * Native input disabled attribute
-       */
-      disabled: {
-        type: Boolean,
-        default: false,
-        description: 'Native input disabled attribute',
-      },
-
-      outline: {
-        type: Boolean,
-        default: false,
-      },
-    },
-  };
-</script>
-
-<style lang="scss" scoped>
-  .wt-time-input {
-    display: inline-block;
-    cursor: text;
-
-    &--disabled {
-      pointer-events: none;
-    }
-  }
-
-  .wt-time-input__wrapper {
-    position: relative;
-  }
-
-  .wt-label {
-    text-align: center;
-    margin-bottom: var(--label-margin);
-    cursor: text;
-
-    .wt-time-input:hover &,
-    .wt-time-input:focus-within & {
-      color: var(--form-label--hover-color);
-    }
-  }
-
-  .wt-time-input__input {
-    @extend %typo-body-lg;
-
-    display: block;
-    width: 100%;
-    box-sizing: border-box;
-    padding: var(--input-padding);
-    color: var(--form-input-color);
-    border: var(--input-border);
-    border-color: var(--form-border-color);
-    border-radius: var(--border-radius);
-    transition: var(--transition);
-
-    .wt-time-input:hover &,
-    &:focus {
-      border-color: var(--form-border--hover-color);
-    }
-
-    .wt-time-input--outline & {
-      border-color: var(--form-outline-border-color);
-    }
-
-    .wt-time-input--outline:hover &,
-    .wt-time-input--outline &:focus {
-      border-color: var(--form-outline-border--hover-color);
-    }
-
-    .wt-time-input--disabled & {
-      background: var(--form-border--disabled-color);
-      border-color: var(--form-border--disabled-color);
-    }
-  }
-</style>

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

@@ -1,110 +0,0 @@
-<template>
-  <div class="wt-timepicker">
-    <wt-time-input
-      v-if="isHour"
-      v-model="hour"
-      :label="$t('webitelUI.timepicker.hour')"
-      :maxValue="23"
-      :disabled="disabled"
-    ></wt-time-input>
-    <wt-time-input
-      v-if="isMin"
-      v-model="min"
-      :label="$t('webitelUI.timepicker.min')"
-      :maxValue="59"
-      :disabled="disabled"
-    ></wt-time-input>
-    <wt-time-input
-      v-if="isSec"
-      v-model="sec"
-      :label="$t('webitelUI.timepicker.sec')"
-      :maxValue="59"
-      :disabled="disabled"
-    ></wt-time-input>
-  </div>
-</template>
-
-<script>
-  export default {
-    name: 'wt-timepicker',
-    props: {
-      value: {
-        type: [String, Number],
-        default: 0,
-      },
-      label: {
-        type: String,
-      },
-      format: {
-        type: String,
-        default: 'hh:mm:ss',
-      },
-      disabled: {
-        type: Boolean,
-        default: false,
-      },
-    },
-    model: {
-      prop: 'value',
-      event: 'change',
-    },
-
-    created() {
-    },
-
-    computed: {
-      isHour() {
-        return this.format.includes('hh');
-      },
-      isMin() {
-        return this.format.includes('mm');
-      },
-      isSec() {
-        return this.format.includes('ss');
-      },
-      hour: {
-        get() {
-          return new Date(+this.value).getHours();
-        },
-        set(value) {
-          const newValue = new Date(this.value).setHours(value);
-          this.$emit('change', newValue);
-        },
-      },
-      min: {
-        get() {
-          return new Date(+this.value).getMinutes();
-        },
-        set(value) {
-          const newValue = new Date(this.value).setMinutes(value);
-          this.$emit('change', newValue);
-        },
-      },
-      sec: {
-        get() {
-          return new Date(+this.value).getSeconds();
-        },
-        set(value) {
-          const newValue = new Date(this.value).setSeconds(value);
-          this.$emit('change', newValue);
-        },
-      },
-    },
-
-    methods: {},
-  };
-</script>
-
-<style lang="scss" scoped>
-  .wt-timepicker {
-    display: flex;
-  }
-
-  .wt-time-input {
-    margin-right: var(--timepicker-input-margin);
-
-    &:last-child {
-      margin-right: 0;
-    }
-  }
-</style>

package/src/components/organisms/wt-pagination/wt-pagination.vue

@@ -1,122 +0,0 @@
-<template>
-  <footer class="wt-pagination">
-    <div class="wt-pagination__size">
-      <div class="wt-pagination__size-text">{{$t('webitelUI.pagination.sizeText')}}</div>
-      <wt-input
-        class="wt-pagination__size-input"
-        :value="size"
-        type="number"
-        :number-min="1"
-        :number-max="1000"
-        @input="changeSize"
-      ></wt-input>
-    </div>
-    <div class="wt-pagination__page-controls">
-      <wt-icon-btn
-        class="wt-pagination__page-control"
-        :icon="'arrow-left'"
-        :tooltip="$t('webitelUI.pagination.prev')"
-        :disabled="!prev"
-        @click.native="goPrev"
-      ></wt-icon-btn>
-      <wt-icon-btn
-        class="wt-pagination__page-control"
-        :icon="'arrow-right'"
-        :tooltip="$t('webitelUI.pagination.next')"
-        :disabled="!next"
-        @click.native="goNext"
-      ></wt-icon-btn>
-    </div>
-  </footer>
-</template>
-
-<script>
-  import debounce from '../../../scripts/debounce';
-
-  export default {
-    name: 'wt-pagination',
-    props: {
-      size: {
-        type: [String, Number],
-        required: true,
-      },
-      next: {
-        type: Boolean,
-        required: true,
-      },
-      prev: {
-        type: Boolean,
-        required: true,
-      },
-    },
-    model: {
-      prop: 'size',
-      event: 'change',
-    },
-
-    watch: {
-      value() {
-        this.changeSize.call(this);
-      },
-    },
-
-    data: () => ({
-      defaultSize: '10',
-    }),
-
-    created() {
-      this.changeSize = debounce(this.changeSize);
-    },
-
-    methods: {
-      changeSize(value) {
-        const size = (value > 0 && value <= 1000)
-          ? value
-          : this.defaultSize;
-        this.$emit('change', size);
-      },
-      goNext() {
-        this.$emit('next');
-      },
-      goPrev() {
-        this.$emit('prev');
-      },
-    },
-  };
-</script>
-
-<style lang="scss" scoped>
-  .wt-pagination {
-    @extend %typo-body-md;
-
-    display: inline-flex;
-    align-items: center;
-    margin-left: auto;
-  }
-
-  .wt-pagination__size {
-    display: flex;
-    align-items: center;
-    margin-right: var(--pagination-margin-right);
-  }
-
-  .wt-pagination__size-text {
-    margin-right: var(--pagination-size-text-margin-right);
-  }
-
-  .wt-pagination__size-input {
-    width: var(--pagination-size-input-width);
-  }
-
-  .wt-pagination__page-controls {
-    display: flex;
-    align-items: center;
-  }
-
-  .wt-pagination__page-control {
-    margin-left: var(--pagination-page-controls-margin);
-    &:first-child {
-      margin-left: 0;
-    }
-  }
-</style>

package/src/css/colors/_colors.scss

@@ -1,67 +0,0 @@
-:root {
-  // MAIN COLORS
-  --main-primary-color: #fff;
-  --main-primary-accent-color: #171A2A;
-  --main-ouline-color: #EAEAEA;
-
-  --main-secondary-color: #000;
-  --main-secondary-accent-color: #FFE69C;
-
-  --main-accent-color: #FFC107;
-  --main-page-bg-color: #F1F4F6;
-
-  // SEMANTIC COLORS
-  --disabled-color: #F3F4F4;
-
-  --true-color: #4CAF50;
-  --true--hover-color: #43A146;
-
-  --false-color: #FF4444;
-  --false--hover-color: #F03D3D;
-
-  --hold-color: #FFC107;
-  --hold--hover-color: #EFB917;
-
-  --transfer-color: #708FFF;
-  --transfer--hover-color: #6582EB;
-
-  // SUBORDINATE COLORS
-  // table colors
-  --table-primary-color: var(--main-primary-color);
-  --table--hover-color: var(--main-secondary-accent-color);
-  --table-secondary-color: #F9F9F9; // zebra
-
-  // other colors
-  --tag-bg-color: var(--main-secondary-accent-color);
-
-  // FORM COLORS
-  --form-input-color: #000; // user input color
-
-  --form-label-color: #ACACAC;
-  --form-label--active-color: #000;
-  --form-label--hover-color: #000;
-  --form-label--disabled-color: #EAEAEA;
-
-  --form-border-color: #ACACAC;
-  --form-border--hover-color: #000;
-  --form-border--disabled-color: #f5f5f5;
-
-  --form-placeholder-color: #ACACAC;
-  --form-placeholder--hover-color: #000;
-  --form-placeholder--disabled-color: #E3E3E3;
-
-  // outline
-  --form-outline-label-color: #EAEAEA;
-
-  --form-outline-border-color: #EAEAEA;
-  --form-outline-border--hover-color: #ACACAC;
-
-  --form-outline-placeholder-color: #EAEAEA;
-  --form-outline-placeholder--hover-color: #ACACAC;
-
-  // TEXT COLORS
-  --text-primary-color: #000;
-  --text-outline-color: #ACACAC;
-  --text-contrast-color: #fff;
-  --text--disabled-color: var(--disabled-color);
-}

package/src/css/components/_components.scss

@@ -1,25 +0,0 @@
-@import "atoms/wt-badge/variables";
-@import "atoms/wt-button/variables";
-@import "atoms/wt-icon/variables";
-@import "atoms/wt-input-info/variables";
-@import "atoms/wt-divider/variables";
-@import "atoms/wt-label/variables";
-@import "atoms/wt-loader/variables";
-@import "atoms/wt-tooltip/variables";
-
-@import "molecules/wt-icon-btn/variables";
-@import "molecules/wt-popup/variables";
-@import "molecules/wt-radio/variables";
-@import "molecules/wt-checkbox/variables";
-@import "molecules/wt-datepicker/variables";
-@import "molecules/wt-datetimepicker/variables";
-@import "molecules/wt-input/variables";
-@import "molecules/wt-notification/variables";
-@import "molecules/wt-search-bar/variables";
-@import "molecules/wt-select/variables";
-@import "molecules/wt-switcher/variables";
-@import "molecules/wt-tabs/variables";
-@import "molecules/wt-textarea/variables";
-@import "molecules/wt-timepicker/variables";
-
-@import "organisms/wt-pagination/variables";

package/src/css/components/atoms/wt-badge/_variables.scss

@@ -1,6 +0,0 @@
-
-:root {
-  --badge-padding: 5px 10px;
-  --badge-border-radius: 20px;
-  --badge-bg-color: var(--main-secondary-accent-color);
-}

package/src/css/components/atoms/wt-badge/wt-badge.scss

@@ -1,8 +0,0 @@
-.wt-badge {
-  @extend %typo-body-md;
-
-  display: inline-block;
-  padding: var(--badge-padding);
-  background: var(--badge-bg-color);
-  border-radius: var(--badge-border-radius);
-}

package/src/css/components/atoms/wt-button/_variables.scss

@@ -1,47 +0,0 @@
-%typo-btn {
-  font: {
-    family: 'Montserrat Semi', monospace;
-    size: 12px;
-  }
-  line-height: 14px;
-}
-
-%typo-btn-lg {
-  font: {
-    family: 'Montserrat Semi', monospace;
-    size: 20px;
-  }
-  line-height: 24px;
-}
-
-:root {
-  --btn-padding: 11px 19px;
-  --btn-lg-padding: 10px 29px;
-  --btn-border: 1px solid;
-
-  // BUTTON COLORS
-  --btn-dark-font-color: #000;
-  --btn-light-font-color: #fff;
-
-  --btn-primary-color: var(--main-accent-color);
-  --btn-primary--hover-color: #EFB917;
-
-  --btn-secondary-color: #808080;
-  --btn-secondary-bg-color: transparent;
-  --btn-secondary--hover-color: #000;
-
-  --btn-disabled-color: var(--disabled-color);
-  --btn-disabled-bg-color: transparent;
-
-  --btn-true-color: var(--true-color);
-  --btn-true--hover-color: var(--true--hover-color);
-
-  --btn-false-color: var(--false-color);
-  --btn-false--hover-color: var(--false--hover-color);
-
-  --btn-hold-color: var(--hold-color);
-  --btn-hold--hover-color: var(--hold--hover-color);
-
-  --btn-transfer-color: var(--transfer-color);
-  --btn-transfer--hover-color: var(--transfer--hover-color);
-}

package/src/css/components/atoms/wt-divider/_variables.scss

@@ -1,5 +0,0 @@
-
-:root {
-  --divider-border: 1px solid;
-  --divider-border-color: var(--main-page-bg-color);
-}

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

@@ -1,29 +0,0 @@
-
-:root {
-  --icon-xl-size: 50px;
-  --icon-lg-size: 32px;
-  --icon-md-size: 24px;
-  --icon-sm-size: 16px;
-  --icon-xs-size: 8px;
-
-  // ICON COLORS
-  --icon-primary-color: #808080;
-  --icon--active-color: #000;
-  --icon--hover-color: #000;
-  --icon-outline-color: var(--main-ouline-color);
-  --icon-outline--active-color: #808080;
-  --icon-outline--hover-color: #808080;
-  --icon--disabled-color: #EAEAEA;
-
-  --icon-hold-color: var(--hold-color);
-  --icon-hold--hover-color: var(--hold--hover-color);
-
-  --icon-true-color: var(--true-color);
-  --icon-true--hover-color: var(--true--hover-color);
-
-  --icon-false-color: var(--false-color);
-  --icon-false--hover-color: var(--false--hover-color);
-
-  --icon-transfer-color: var(--transfer-color);
-  --icon-transfer--hover-color: var(--transfer--hover-color);
-}