@webitel/ui-sdk 0.1.2 → 0.1.3-vite

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

@@ -1,306 +0,0 @@
-<template>
-  <div
-    class="wt-datetimepicker"
-    :class="{
-      'wt-datetimepicker--active': isOpened,
-      'wt-datetimepicker--disabled': disabled,
-    }"
-    v-clickaway="close"
-  >
-    <wt-label :disabled="disabled">
-      <!-- @slot Custom input label -->
-      <slot name="label" v-bind="{ label }">{{ label }}</slot>
-    </wt-label>
-    <div
-      class="wt-datetimepicker__preview"
-      :class="{'wt-datetimepicker__preview--opened': isOpened}"
-      tabindex="0"
-      @click="isOpened = !isOpened"
-      @keyup.enter="isOpened = !isOpened"
-      @keyup.esc="isOpened = false"
-    >
-      <wt-icon class="wt-datetimepicker__calendar-icon" icon="calendar"></wt-icon>
-      <input
-        class="wt-datetimepicker__preview__input"
-        :value="displayValue"
-        autocomplete="off"
-        readonly
-      >
-      <wt-icon class="wt-datetimepicker__arrow-icon" icon="arrow-down"></wt-icon>
-    </div>
-
-    <div
-      class="wt-datetimepicker__form"
-      v-show="isOpened"
-    >
-      <div class="wt-datetimepicker__quick-filters-wrapper">
-        <span class="wt-datetimepicker__quick-filter" @click="setLastHour">
-          {{$t('webitelUI.datetimepicker.lastHour')}}
-        </span>
-        <span class="wt-datetimepicker__quick-filter" @click="setLastDay">
-                {{$t('webitelUI.datetimepicker.lastDay')}}
-        </span>
-      </div>
-      <div class="wt-datetimepicker__form-wrapper">
-        <datepicker
-          class="wt-datetimepicker__datepicker"
-          :value="draft"
-          :maximum-view="'day'"
-          monday-first
-          inline
-          @input="setDraft($event.getTime())"
-        ></datepicker>
-        <wt-timepicker
-          class="wt-datetimepicker__timepicker"
-          v-model="draft"
-          format="hh:mm"
-        ></wt-timepicker>
-      </div>
-      <div class="wt-datetimepicker__actions">
-        <wt-button color="primary" @click.native="input">
-          {{$t('reusable.add')}}
-        </wt-button>
-        <wt-button color="secondary" @click.native="close">
-          {{$t('reusable.cancel')}}
-        </wt-button>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-  import Datepicker from 'vuejs-datepicker';
-
-  export default {
-    name: 'wt-datetimepicker',
-    components: {
-      Datepicker,
-    },
-
-    props: {
-      value: {
-        type: [String, Number],
-      },
-      label: {
-        type: String,
-      },
-      disabled: {
-        type: Boolean,
-        default: false,
-      },
-    },
-    model: {
-      prop: 'value',
-      event: 'change',
-    },
-
-    watch: {
-      isOpened: {
-        handler() {
-          this.draft = this.value;
-        },
-        immediate: true,
-      },
-    },
-
-    data: () => ({
-      isOpened: false,
-      draft: 0,
-    }),
-
-    computed: {
-      // prop value representation on picker preview
-      displayValue() {
-        const date = new Date(+this.value).toLocaleDateString();
-        const time = new Date(+this.value).toTimeString()
-          .slice(0, 5);
-        return `${date} ${time}`;
-      },
-    },
-
-    methods: {
-      setLastHour() {
-        const value = Date.now() - 60 * 60 * 10 ** 3; // 60 min x 60 sec x 1000 ms
-        this.$emit('change', value);
-        this.close();
-      },
-      setLastDay() {
-        const value = Date.now() - 24 * 60 * 60 * 10 ** 3; // 24hour x 60 min x 60 sec x 1000 ms
-        this.$emit('change', value);
-        this.close();
-      },
-
-      input() {
-        this.$emit('change', this.draft);
-        this.close();
-      },
-
-      setDraft(value) {
-        this.draft = value;
-      },
-
-      close() {
-        this.isOpened = false;
-      },
-    },
-  };
-</script>
-
-<style lang="scss" scoped>
-  .wt-datetimepicker {
-    position: relative;
-  }
-
-  .wt-label {
-    margin-bottom: var(--label-margin);
-    cursor: text;
-  }
-
-  .wt-datetimepicker__preview {
-    position: relative;
-    cursor: text;
-    outline: none;
-
-    &__input {
-      @extend %typo-body-lg;
-      display: block;
-      width: 100%;
-      box-sizing: border-box;
-      padding: var(--datetimepicker-padding);
-      border: var(--datetimepicker-border);
-      border-color: var(--form-border-color);
-      border-radius: var(--border-radius);
-    }
-
-    .wt-datetimepicker__calendar-icon {
-      position: absolute;
-      top: 50%;
-      left: var(--datetimepicker-icon-margin);
-      transform: translateY(-50%);
-      pointer-events: none;
-    }
-
-    .wt-datetimepicker__arrow-icon {
-      position: absolute;
-      top: 50%;
-      right: var(--datetimepicker-icon-margin);
-      transform: translateY(-50%);
-      pointer-events: none;
-    }
-  }
-
-  .wt-datetimepicker__form {
-    position: absolute;
-    top: 100%;
-    right: 0;
-    padding: var(--datetimepicker-form-padding);
-    background: var(--datetimepicker-form-bg-color);
-    box-sizing: border-box;
-    border: var(--datetimepicker-border);
-    border-color: var(--form-border-color);
-    border-radius: var(--border-radius);
-    z-index: var(--datetimepicker-form-z-index);
-  }
-
-  .wt-datetimepicker__quick-filters-wrapper {
-    text-align: center;
-    display: flex;
-    justify-content: space-evenly;
-    margin-bottom: var(--datetimepicker-form-content-margin);
-  }
-
-  .wt-datetimepicker__quick-filter {
-    @extend %typo-body-sm;
-    text-decoration: underline;
-    cursor: pointer;
-  }
-
-  .wt-datetimepicker__form-wrapper {
-    display: flex;
-    flex-direction: column;
-
-    .wt-datetimepicker__datepicker {
-      input {
-        display: none;
-      }
-
-      ::v-deep {
-        @import '../../../css/components/molecules/wt-datepicker/datepicker-calendar';
-
-        .vdp-datepicker__calendar {
-          margin: auto;
-          border: none;
-        }
-      }
-    }
-
-    .wt-datetimepicker__timepicker {
-      margin: var(--datetimepicker-form-content-margin) auto 0;
-    }
-  }
-
-  .wt-datetimepicker__actions {
-    display: flex;
-    justify-content: center;
-    margin-top: var(--datetimepicker-form-content-margin);
-
-    .wt-button {
-      &.secondary {
-        margin-left: var(--datetimepicker-form-content-margin);
-      }
-    }
-  }
-
-  .wt-datetimepicker:hover {
-    .wt-label {
-      color: var(--form-label--hover-color);
-    }
-
-    .wt-datetimepicker__preview__input {
-      border-color: var(--form-border--hover-color);
-    }
-
-    .wt-datetimepicker__arrow-icon {
-      transform: translateY(-50%) rotate(180deg);
-    }
-
-    .wt-datetimepicker__calendar-icon ::v-deep .wt-icon__icon,
-    .wt-datetimepicker__arrow-icon ::v-deep .wt-icon__icon {
-      fill: var(--icon--hover-color);
-    }
-  }
-
-  .wt-datetimepicker:focus-within,
-  .wt-datetimepicker--active {
-    .wt-label {
-      color: var(--form-label--active-color);
-    }
-
-    .wt-datetimepicker__preview__input {
-      border-color: var(--form-border--active-color);
-    }
-
-    .wt-datetimepicker__arrow-icon {
-      transform: translateY(-50%) rotate(180deg);
-    }
-
-    .wt-datetimepicker__calendar-icon ::v-deep .wt-icon__icon,
-    .wt-datetimepicker__arrow-icon ::v-deep .wt-icon__icon {
-      fill: var(--icon--active-color);
-    }
-  }
-
-  .wt-datetimepicker--disabled {
-    pointer-events: none;
-
-    .wt-datetimepicker__preview__input {
-      border-color: var(--form-border--disabled-color);
-      background: var(--form-border--disabled-color);
-    }
-
-    .wt-datetimepicker__calendar-icon ::v-deep .wt-icon__icon,
-    .wt-datetimepicker__arrow-icon ::v-deep .wt-icon__icon {
-      fill: var(--icon--disabled-color);
-    }
-  }
-</style>

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

@@ -1,69 +0,0 @@
-<template>
-  <div class="wt-icon-btn" :class="{ 'wt-icon-btn--disabled': disabled }">
-    <button class="wt-icon-btn__button">
-      <wt-icon :icon="icon" :size="size" :color="color"></wt-icon>
-    </button>
-    <wt-tooltip v-if="tooltip">{{tooltip}}</wt-tooltip>
-  </div>
-</template>
-
-<script>
-  export default {
-    name: 'wt-icon-btn',
-    props: {
-      icon: {
-        type: String,
-        required: true,
-      },
-      size: {
-        type: String,
-      },
-      tooltip: {
-        type: String,
-      },
-      disabled: {
-        type: Boolean,
-        default: false,
-      },
-      color: {
-        type: String,
-      },
-    },
-  };
-</script>
-
-<style lang="scss" scoped>
-  .wt-icon-btn {
-    position: relative;
-    display: inline-block;
-
-    &:hover ::v-deep .wt-icon__icon {
-      fill: var(--icon--hover-color);
-    }
-
-    &.active ::v-deep .wt-icon__icon,
-    &.opened ::v-deep .wt-icon__icon {
-      fill: var(--icon--actvie-color);
-    }
-
-    &--disabled {
-      pointer-events: none;
-
-      ::v-deep .wt-icon__icon {
-        fill: var(--icon--disabled-color);
-      }
-    }
-
-    .wt-tooltip {
-      position: absolute;
-      top: calc(100% + 11px); // icon height + 11px margin
-      left: 50%;
-      transform: translateX(-50%);
-    }
-
-    &:hover .wt-tooltip {
-      opacity: 1;
-      pointer-events: auto;
-    }
-  }
-</style>

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

@@ -1,300 +0,0 @@
-<template>
-  <div
-    class="wt-input"
-    :class="{
-      'wt-input--outline': outline,
-      'wt-input--disabled': disabled,
-      'wt-input--invalid': invalid,
-    }"
-  >
-    <wt-label
-      v-if="hasLabel"
-      :for="name"
-      :outline="outline"
-      :disabled="disabled"
-      :invalid="invalid"
-    >
-      <!-- @slot Custom input label -->
-      <slot name="label" v-bind="{ label }">{{ label }}</slot>
-    </wt-label>
-    <div class="wt-input__wrapper">
-      <input
-        :id="name"
-        class="wt-input__input"
-        :class="{
-          'wt-input--is-password': isPassword,
-        }"
-        :value="value"
-        :type="inputType"
-        :placeholder="placeholder || label"
-        :disabled="disabled"
-        :min="numberMin"
-        :max="numberMax"
-        @input="inputHandler"
-      >
-      <slot
-        v-if="isPassword"
-        name="show-password"
-        v-bind="{
-          isPasswordVisible,
-          switchVisibilityPassword,
-        }"
-      >
-        <wt-icon-btn
-          class="wt-input__password-button"
-          :icon="showPasswordIcon"
-          @click.native="switchVisibilityPassword"
-        ></wt-icon-btn>
-      </slot>
-    </div>
-    <wt-input-info
-      v-if="isValidation"
-      :invalid="invalid"
-    >{{validationText}}
-    </wt-input-info>
-  </div>
-</template>
-
-<script>
-  import validationMixin from '../../../mixins/validationMixin/validationMixin';
-
-  export default {
-    name: 'wt-input',
-    mixins: [validationMixin],
-    props: {
-      /**
-       * Current input value (`v-model`)
-       */
-      value: {
-        type: [String, Number],
-        default: '',
-      },
-      /**
-       * Form input label
-       */
-      label: {
-        type: String,
-        default: '',
-      },
-      /**
-       * Form input placeholder
-       */
-      placeholder: {
-        type: String,
-      },
-      /**
-       * Form input name
-       */
-      name: {
-        type: String,
-        default: '',
-      },
-      /**
-       * Form input type
-       */
-      type: {
-        type: String,
-        default: 'text',
-      },
-      /**
-       * 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',
-      },
-      /**
-       * Status of show password icon display
-       */
-      hasShowPassword: {
-        type: Boolean,
-        default: false,
-      },
-
-      /**
-       * Native number input restrictions
-       */
-      numberMin: {
-        type: Number,
-        default: 0,
-      },
-
-      /**
-       * Native number input restrictions
-       */
-      numberMax: {
-        type: Number,
-      },
-
-      outline: {
-        type: Boolean,
-        default: false,
-      },
-    },
-
-    data: () => ({
-      inputType: '',
-      isPasswordVisible: false,
-    }),
-
-    watch: {
-      type: {
-        immediate: true,
-        handler(type) {
-          let inputType = type;
-          // Safari has bug for number input
-          if (typeof window !== 'undefined' || typeof document !== 'undefined') {
-            const ua = navigator.userAgent.toLocaleLowerCase();
-            if (
-              ua.indexOf('safari') !== -1
-              && ua.indexOf('chrome') === -1
-              && type === 'number'
-            ) {
-              this.isNumberTypeSafari = true;
-              inputType = 'text';
-            }
-          }
-          this.inputType = inputType;
-        },
-      },
-    },
-
-    computed: {
-      hasLabel() {
-        return !!(this.label || this.$slots.label);
-      },
-
-      isPassword() {
-        return this.type === 'password' && this.hasShowPassword;
-      },
-
-      showPasswordIcon() {
-        return this.isPasswordVisible ? 'eye-closed' : 'eye-opened';
-      },
-    },
-    methods: {
-      inputHandler(event) {
-        if (this.invalid) this.v.$touch(); // if value is wrong, always check it
-        this.$emit('input', event.target.value);
-      },
-
-      switchVisibilityPassword() {
-        this.isPasswordVisible = !this.isPasswordVisible;
-        this.inputType = this.isPasswordVisible ? 'text' : 'password';
-      },
-    },
-  };
-</script>
-
-<style lang="scss" scoped>
-  .wt-input {
-    cursor: text;
-
-    &--disabled {
-      pointer-events: none;
-    }
-  }
-
-  .wt-input__wrapper {
-    position: relative;
-  }
-
-  .wt-label {
-    margin-bottom: var(--label-margin);
-    cursor: text;
-
-    .wt-input:hover &,
-    .wt-input:focus-within & {
-      color: var(--form-label--hover-color);
-    }
-
-    .wt-input--invalid:hover &,
-    .wt-input--invalid:focus-within & {
-      color: var(--label--invalid-color);
-    }
-  }
-
-  .wt-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);
-
-    &::placeholder {
-      color: var(--form-placeholder-color);
-    }
-
-    .wt-input:hover &,
-    &:focus {
-      border-color: var(--form-border--hover-color);
-
-      &::placeholder {
-        color: var(--form-placeholder--hover-color)
-      }
-    }
-
-    .wt-input--outline & {
-      border-color: var(--form-outline-border-color);
-
-      &::placeholder {
-        color: var(--form-outline-placeholder-color);
-      }
-    }
-
-    .wt-input--outline:hover &,
-    .wt-input--outline &:focus {
-      border-color: var(--form-outline-border--hover-color);
-
-      &::placeholder {
-        color: var(--form-outline-placeholder--hover-color)
-      }
-    }
-
-    .wt-input--invalid &,
-    .wt-input--invalid:hover & {
-      border-color: var(--false-color);
-      outline: none; // prevent outline overlapping false color
-    }
-
-    .wt-input--disabled & {
-      background: var(--form-border--disabled-color);
-      border-color: var(--form-border--disabled-color);
-
-      &::placeholder {
-        color: var(--form-placeholder--disabled-color);
-      }
-    }
-  }
-
-  .wt-input__password-button {
-    position: absolute;
-    top: 50%;
-    right: var(--input-icon-margin);
-    transform: translateY(-50%);
-
-    .wt-input--disabled & ::v-deep .wt-icon__icon {
-      fill: var(--icon--disabled-color);
-    }
-
-    .wt-input:hover & ::v-deep .wt-icon__icon,
-    .wt-input:focus-within & ::v-deep .wt-icon__icon {
-      fill: var(--icon--hover-color);
-    }
-  }
-</style>