@webitel/ui-sdk 0.1.2 → 0.1.3-vite

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

@@ -0,0 +1,343 @@
+<template>
+  <div
+    :class="{
+      'wt-input--outline': outline,
+      'wt-input--disabled': disabled,
+      'wt-input--invalid': invalid,
+    }"
+    class="wt-input"
+  >
+    <wt-label
+      v-bind="labelProps"
+      v-if="hasLabel"
+      :disabled="disabled"
+      :for="name"
+      :invalid="invalid"
+      :outline="outline"
+    >
+      <!-- @slot Custom input label -->
+      <slot
+        v-bind="{ label }"
+        name="label"
+      >{{ requiredLabel }}</slot>
+    </wt-label>
+    <div class="wt-input__wrapper">
+      <input
+        v-bind="$attrs"
+        :id="name"
+        ref="wt-input"
+        :class="{
+          'wt-input--is-password': isPassword,
+        }"
+        :disabled="disabled"
+        :max="numberMax"
+        :min="numberMin"
+        :placeholder="placeholder || label"
+        :type="inputType"
+        :value="inputValue"
+        class="wt-input__input"
+        @input="inputHandler"
+        @keyup="$emit('keyup', $event)"
+      >
+      <div
+        ref="after-wrapper"
+        class="wt-input__after-wrapper"
+      >
+        <slot
+          name="after-input"
+        ></slot>
+        <slot
+          v-bind="{
+          isPasswordVisible,
+          switchVisibilityPassword,
+        }"
+          v-if="isPassword"
+          name="show-password"
+        >
+          <wt-icon-btn
+            :icon="showPasswordIcon"
+            class="wt-input__password-button"
+            @click="switchVisibilityPassword"
+          ></wt-icon-btn>
+        </slot>
+      </div>
+    </div>
+    <wt-input-info
+      v-if="isValidation"
+      :invalid="invalid"
+    >{{ validationText }}
+    </wt-input-info>
+  </div>
+</template>
+
+<script>
+import validationMixin from '../../mixins/validationMixin/validationMixin';
+
+/*
+* IMPORTANT: WT-INPUT SHOULD SUPPORT VUE 3 AND VUE 2 V-MODEL INTERFACES SO THAT THERE'S
+* TWO PROPS: VALUE AND MODELVALUE, AND 2 EVENTS: @UPDATE:MODELVALUE AND @INPUT
+* */
+export default {
+  name: 'wt-input',
+  mixins: [validationMixin],
+  props: {
+    value: {
+      type: [String, Number],
+    },
+    /**
+     * Current input modelValue (`v-model`)
+     */
+    modelValue: {
+      type: [String, Number],
+    },
+    /**
+     * 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,
+    },
+
+    labelProps: {
+      type: Object,
+      description: 'Object with props, passed down to wt-label as props',
+    },
+
+    preventTrim: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  emits: ['update:modelValue', 'input', 'keyup'],
+  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: {
+    inputValue() {
+      return this.value !== undefined ? this.value : this.modelValue;
+    },
+
+    hasLabel() {
+      return !!(this.label || this.$slots.label);
+    },
+
+    requiredLabel() {
+      return this.required ? `${this.label}*` : this.label;
+    },
+
+    isPassword() {
+      return this.type === 'password' && this.hasShowPassword;
+    },
+
+    showPasswordIcon() {
+      return this.isPasswordVisible ? 'eye--closed' : 'eye--opened';
+    },
+  },
+  methods: {
+    inputHandler(event) {
+      const value = this.preventTrim ? event.target.value : event.target.value.trim();
+      this.$emit('update:modelValue', value);
+      this.$emit('input', value);
+    },
+
+    switchVisibilityPassword() {
+      this.isPasswordVisible = !this.isPasswordVisible;
+      this.inputType = this.isPasswordVisible ? 'text' : 'password';
+    },
+
+    async updateInputPaddings() {
+      // cant test this thing cause vue test utils doesnt render elements width :/
+      const afterWrapperWidth = this.$refs['after-wrapper'].offsetWidth;
+      const inputEl = this.$refs['wt-input'];
+      const defaultInputPadding = getComputedStyle(document.documentElement)
+        .getPropertyValue('--input-padding');
+      if (afterWrapperWidth >= inputEl.offsetWidth) return; // fixes https://my.webitel.com/browse/WTEL-2635
+      inputEl.style.paddingRight = `calc(${defaultInputPadding} * 2 + ${afterWrapperWidth}px)`;
+    },
+  },
+  mounted() {
+    this.updateInputPaddings();
+  },
+};
+</script>
+
+<style lang="scss">
+@import './variables.scss';
+</style>
+
+<style lang="scss" scoped>
+
+.wt-input {
+  cursor: text;
+
+  &--disabled {
+    pointer-events: none;
+  }
+}
+
+.wt-input__wrapper {
+  position: relative;
+}
+
+.wt-label {
+  .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-1;
+  @include wt-placeholder;
+
+  display: block;
+  box-sizing: border-box;
+  width: 100%;
+  padding: var(--input-padding);
+  transition: var(--transition);
+  color: var(--form-input-color);
+  border: var(--input-border);
+  border-color: var(--form-border-color);
+  border-radius: var(--border-radius);
+
+  &:focus {
+    @include wt-placeholder('focus');
+    border-color: var(--form-border--hover-color);
+  }
+
+  .wt-input--outline & {
+    border-color: var(--form-outline-border-color);
+  }
+
+  .wt-input--outline:hover &,
+  .wt-input--outline &:focus {
+    border-color: var(--form-outline-border--hover-color);
+  }
+
+  .wt-input--invalid &,
+  .wt-input--invalid:hover & {
+    border-color: var(--false-color);
+    outline: none; // prevent outline overlapping false color
+  }
+
+  .wt-input--disabled & {
+    @include wt-placeholder('disabled');
+    border-color: var(--form-border--disabled-color);
+    background: var(--form-border--disabled-color);
+  }
+}
+
+.wt-input__after-wrapper {
+  position: absolute;
+  top: 50%;
+  right: var(--input-icon-margin);
+  display: flex;
+  align-items: center;
+  transform: translateY(-50%);
+  pointer-events: auto; // override --disabled p-events none
+  gap: var(--input-after-wrapper-gap);
+
+  .wt-input__password-button {
+    .wt-input--disabled & ::v-deep .wt-icon__icon {
+      fill: var(--icon-color-disabled);
+    }
+
+    .wt-input:hover & ::v-deep .wt-icon__icon,
+    .wt-input:focus-within & ::v-deep .wt-icon__icon {
+      fill: var(--icon-color--hover);
+    }
+  }
+}
+</style>

package/src/components/wt-input-info/__tests__/WtInputInfo.spec.js

@@ -0,0 +1,9 @@
+import { shallowMount } from '@vue/test-utils';
+import WtInputInfo from '../wt-input-info.vue';
+
+describe('WtInputInfo', () => {
+  it('renders a component', () => {
+    const wrapper = shallowMount(WtInputInfo);
+    expect(wrapper.classes('wt-input-info')).toBe(true);
+  });
+});

package/src/{css/components/atoms → components}/wt-input-info/_variables.scss

@@ -1,6 +1,7 @@
-
-:root {
-  --input-info-margin: 5px;
-  --input-info-color: var(--form-label-color);
-  --input-info--invalid-color: var(--false-color);
-}
+
+:root {
+  --input-info-min-height: var(--spacing-sm);
+  --input-info-margin: 5px;
+  --input-info-color: var(--form-label-color);
+  --input-info--invalid-color: var(--false-color);
+}

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

@@ -0,0 +1,40 @@
+<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">
+@import './variables.scss';
+</style>
+
+<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>

package/src/components/wt-item-link/__tests__/WtItemLink.spec.js

@@ -0,0 +1,9 @@
+import { shallowMount } from '@vue/test-utils';
+import WtItemLink from '../wt-item-link.vue';
+
+describe('WtItemLink', () => {
+  it('renders a component', () => {
+    const wrapper = shallowMount(WtItemLink);
+    expect(wrapper.exists()).toBe(true);
+  });
+});

package/src/components/wt-item-link/wt-item-link.vue

@@ -0,0 +1,57 @@
+<template>
+  <router-link
+    :target="target"
+    :to="to"
+    :class="{ 'wt-item-link--disabled': disabled }"
+    class="wt-item-link"
+  >
+    <slot></slot>
+  </router-link>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+
+const props = defineProps({
+  link: {
+    type: [String, Object],
+    default: '',
+  },
+  target: {
+    type: String,
+    default: '_self',
+  },
+  routeName: {
+    type: String,
+  },
+  id: {
+    type: [String, Number],
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const to = computed(() => props.link || {
+    name: `${props.routeName}-edit`,
+    params: { id: props.id },
+  });
+</script>
+
+<style lang="scss" scoped>
+.wt-item-link {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  transition: var(--transition);
+
+  &:hover {
+    text-decoration: underline;
+  }
+
+  &--disabled {
+    pointer-events: none;
+  }
+}
+</style>

package/src/components/wt-label/__tests__/WtLabel.spec.js

@@ -0,0 +1,9 @@
+import { shallowMount } from '@vue/test-utils';
+import WtLabel from '../wt-label.vue';
+
+describe('WtLabel', () => {
+  it('renders a component', () => {
+    const wrapper = shallowMount(WtLabel);
+    expect(wrapper.classes('wt-label')).toBe(true);
+  });
+});

package/src/{css/components/atoms → components}/wt-label/_variables.scss

@@ -1,5 +1,4 @@
-
-:root {
-  --label-margin: 10px;
-  --label--invalid-color: var(--false-color);
+
+:root {
+  --label--invalid-color: var(--false-color);
 }

package/src/components/wt-label/mixins/labelUsageMixin.js

@@ -0,0 +1,21 @@
+export default {
+  props: {
+    label: {
+      type: String,
+      default: '',
+    },
+    labelProps: {
+      type: Object,
+      description: 'Object with props, passed down to wt-label as props',
+    },
+  },
+  computed: {
+    hasLabel() {
+      return !!(this.label || this.$slots.label);
+    },
+
+    requiredLabel() {
+      return this.required ? `${this.label}*` : this.label;
+    },
+  },
+};

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

@@ -0,0 +1,77 @@
+<template>
+  <label
+    class="wt-label"
+    :class="{
+      'wt-label--outline': outline,
+      'wt-label--invalid': invalid,
+      'wt-label--disabled': disabled,
+    }"
+    :for="this.for"
+  >
+    <slot></slot>
+    <wt-hint
+      v-if="hint"
+    >{{ hint }}
+    </wt-hint>
+  </label>
+</template>
+
+<script>
+export default {
+  name: 'wt-label',
+  props: {
+    for: {
+      type: String,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    outline: {
+      type: Boolean,
+      default: false,
+    },
+    invalid: {
+      type: Boolean,
+      default: false,
+    },
+    hint: {
+      type: String,
+      description: 'Adds hint icon + tooltip with text, passed as "hint" prop',
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+@import './variables.scss';
+</style>
+
+<style lang="scss" scoped>
+
+.wt-label {
+  @extend %typo-body-1;
+
+  display: flex;
+  align-items: center;
+  color: var(--form-label-color);
+  transition: var(--transition);
+  cursor: text;
+
+  &--outline {
+    color: var(--form-outline-label-color);
+  }
+
+  &--invalid {
+    color: var(--label--invalid-color);
+  }
+
+  &--disabled {
+    color: var(--form-label--disabled-color);
+  }
+}
+
+.wt-hint {
+  margin-left: var(--spacing-xs);
+}
+</style>

package/src/components/wt-load-bar/__tests__/WtLoadBar.spec.js

@@ -0,0 +1,9 @@
+import { shallowMount } from '@vue/test-utils';
+import WtLoadBar from '../wt-load-bar.vue';
+
+describe('WtLoadBar', () => {
+  it('renders a component', () => {
+    const wrapper = shallowMount(WtLoadBar);
+    expect(wrapper.exists()).toBe(true);
+  });
+});

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

@@ -0,0 +1,6 @@
+
+:root {
+  --load-bar-height: 6px;
+  --load-bar-padding: 1px;
+  --load-bar-border-radius: 50px;
+}

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

@@ -0,0 +1,55 @@
+<template>
+  <div class="wt-load-bar">
+    <span :style="`width: ${this.progressWidth}%;`" class="wt-load-bar__progress"></span>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'wt-load-bar',
+  props: {
+    max: {
+      type: [Number, String],
+      default: 100,
+    },
+    value: {
+      type: [Number, String],
+      default: 0,
+    },
+  },
+  computed: {
+    progress() {
+      return (this.value * 100) / this.max;
+    },
+    progressWidth() {
+      return this.isOverflow ? 100 : this.progress;
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+@import './variables.scss';
+</style>
+
+<style lang="scss" scoped>
+
+.wt-load-bar {
+  position: relative;
+  box-sizing: border-box;
+  width: 100%;
+  padding: var(--load-bar-padding);
+  line-height: 0;
+  border: 1px solid var(--primary-color);
+  border-radius: var(--border-radius);
+}
+
+.wt-load-bar__progress {
+  display: inline-block;
+  height: var(--load-bar-height);
+  transition: var(--transition);
+  border-radius: var(--load-bar-border-radius);
+  background: var(--primary-color);
+  will-change: width;
+}
+</style>

package/src/components/wt-loader/__tests__/WtLoader.spec.js

@@ -0,0 +1,9 @@
+import { shallowMount } from '@vue/test-utils';
+import WtLoader from '../wt-loader.vue';
+
+describe('WtLoader', () => {
+  it('renders a component', () => {
+    const wrapper = shallowMount(WtLoader);
+    expect(wrapper.classes('wt-loader')).toBe(true);
+  });
+});