@webitel/ui-sdk 3.2.124 → 3.2.125

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

@@ -0,0 +1,217 @@
+<template>
+  <div
+    class="wt-textarea"
+    :class="{
+      'wt-textarea--disabled': disabled,
+      'wt-textarea--invalid': invalid,
+    }"
+  >
+    <wt-label
+      :for="name"
+      :disabled="disabled"
+      :invalid="invalid"
+      v-bind="labelProps"
+    >
+      <!-- @slot Custom input label -->
+      <slot name="label" v-bind="{ label }">{{ requiredLabel }}</slot>
+    </wt-label>
+    <div class="wt-textarea__wrapper">
+      <textarea
+        :id="name"
+        ref="wt-textarea"
+        class="wt-textarea__textarea"
+        :value="value"
+        :placeholder="placeholder || label"
+        :disabled="disabled"
+        v-on="listeners"
+      ></textarea>
+      <div class="wt-textarea__after-wrapper" ref="after-wrapper">
+        <slot name="after-input"></slot>
+        <wt-icon-btn
+          class="wt-textarea__reset-icon-btn"
+          :class="{ 'hidden': !value }"
+          icon="close--filled"
+          size="sm"
+          :disabled="disabled"
+          @click="$emit('input', '')"
+        ></wt-icon-btn>
+      </div>
+    </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-textarea',
+  mixins: [validationMixin],
+  props: {
+    /**
+     * Current textarea value (`v-model`)
+     */
+    value: {
+      type: String,
+      default: '',
+    },
+    /**
+     * textarea label
+     */
+    label: {
+      type: String,
+      default: '',
+    },
+    /**
+     * textarea placeholder
+     */
+    placeholder: {
+      type: String,
+    },
+    /**
+     * Native textarea disabled attribute
+     */
+    disabled: {
+      type: Boolean,
+      default: false,
+      description: 'Native textarea disabled attribute',
+    },
+    /**
+     * textarea name
+     */
+    name: {
+      type: String,
+      default: '',
+    },
+    chatMode: {
+      type: Boolean,
+      default: false,
+    },
+    labelProps: {
+      type: Object,
+      description: 'Object with props, passed down to wt-label as props',
+    },
+  },
+  emits: ['input', 'enter'],
+  computed: {
+    listeners() {
+      return {
+        ...this.$listeners,
+        input: (event) => this.$emit('input', event.target.value),
+        keypress: (event) => this.handleKeypress(event),
+      };
+    },
+
+    requiredLabel() {
+      return this.required ? `${this.label}*` : this.label;
+    },
+  },
+
+  methods: {
+    handleKeypress(event) {
+      if (!this.chatMode) return;
+      if (event.key === 'Enter' && !event.shiftKey) {
+        this.$emit('enter');
+        event.preventDefault();
+      }
+    },
+
+    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-textarea'];
+      const defaultInputPadding = getComputedStyle(document.documentElement)
+      .getPropertyValue('--textarea-padding');
+      inputEl.style.paddingRight = `calc(${defaultInputPadding} * 2 + ${afterWrapperWidth}px)`;
+    },
+  },
+  mounted() {
+    this.updateInputPaddings();
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import './variables.scss';
+
+.wt-textarea {
+  cursor: text;
+
+  &--disabled {
+    pointer-events: none;
+  }
+}
+
+.wt-textarea__wrapper {
+  position: relative;
+}
+
+.wt-label {
+  .wt-textarea:hover &,
+  .wt-textarea:focus-within & {
+    color: var(--form-label--hover-color);
+  }
+
+  .wt-textarea--invalid:hover &,
+  .wt-textarea--invalid:focus-within & {
+    color: var(--label--invalid-color);
+  }
+}
+
+.wt-textarea__textarea {
+  @extend %typo-body-1;
+  @extend %wt-scrollbar;
+  @include wt-placeholder;
+
+  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;
+
+  &:focus {
+    @include wt-placeholder('focus');
+
+    border-color: var(--form-border--hover-color);
+  }
+
+  .wt-textarea--disabled & {
+    @include wt-placeholder('disabled');
+
+    background: var(--form-border--disabled-color);
+    border-color: var(--form-border--disabled-color);
+  }
+
+  .wt-textarea--invalid &,
+  .wt-textarea--invalid:hover & {
+    border-color: var(--false-color);
+    outline: none; // prevent outline overlapping false color
+  }
+}
+
+/* make icons black */
+.wt-textarea:hover ::v-deep .wt-icon-btn:not(.wt-textarea__reset-icon-btn) .wt-icon__icon,
+.wt-textarea:focus-within ::v-deep .wt-icon-btn:not(.wt-textarea__reset-icon-btn) .wt-icon__icon {
+  fill: var(--icon-color--hover);
+}
+
+.wt-textarea__after-wrapper {
+  display: flex;
+  gap: var(--input-after-wrapper-gap);
+  align-items: center;
+  position: absolute;
+  top: var(--input-icon-margin);
+  right: var(--input-icon-margin);
+  pointer-events: auto; // override --disabled p-events none
+}
+</style>

package/src/components/{molecules/wt-time-input → wt-time-input}/wt-time-input.vue

@@ -39,7 +39,7 @@
 </template>
 
 <script>
-import validationMixin from '../../../mixins/validationMixin/validationMixin';
+import validationMixin from '../../mixins/validationMixin/validationMixin';
 
 export default {
   name: 'wt-time-input',

package/src/components/{molecules/wt-timepicker → wt-timepicker}/wt-timepicker.vue

@@ -48,12 +48,12 @@
 </template>
 
 <script>
-import validationMixin from '../../../mixins/validationMixin/validationMixin';
+import validationMixin from '../../mixins/validationMixin/validationMixin';
 
 const SEC_IN_HOUR = 60 * 60;
 const SEC_IN_MIN = 60;
 
-export default  {
+export default {
   name: 'wt-timepicker',
   mixins: [validationMixin],
   props: {
@@ -143,6 +143,8 @@ export default  {
 </script>
 
 <style lang="scss" scoped>
+@import './variables.scss';
+
 .wt-timepicker {
   display: flex;
   flex-direction: column;

package/src/components/wt-tooltip/_variables.scss

@@ -0,0 +1,11 @@
+
+:root {
+  --tooltip-padding: var(--spacing-2xs) var(--spacing-xs);
+
+  --tooltip-light-text-color: var(--text-primary-color);
+  --tooltip-light-bg-color: var(--main-color);
+  --tooltip-dark-text-color: var(--text-contrast-color);
+  --tooltip-dark-bg-color: var(--contrast-color);
+
+  --tooltip-elevation: var(--elevation-10);
+}

package/src/components/{atoms/wt-tooltip → wt-tooltip}/wt-tooltip.vue

@@ -117,6 +117,8 @@ onMounted(() => {
 </script>
 
 <style lang="scss" scoped>
+@import './variables.scss';
+
 .wt-tooltip {
   display: inline-block;
   height: fit-content;

package/src/css/main.scss

@@ -1,6 +1,4 @@
 @import 'styleguide/styleguide';
-
-@import 'components/components';
 @import 'styleguide/display-helpers/display-helpers';
 
 

package/src/modules/AuditForm/components/audit-form-question-read-wrapper.vue

@@ -40,7 +40,7 @@ import { EngineAuditQuestionType } from 'webitel-sdk';
 import isEmpty from '../../../scripts/isEmpty';
 import AuditFormQuestionOptions from './questions/options/audit-form-question-options.vue';
 import AuditFormQuestionScore from './questions/score/audit-form-question-score.vue';
-import WtIcon from '../../../components/atoms/wt-icon/wt-icon.vue';
+import WtIcon from '../../../components/wt-icon/wt-icon.vue';
 
 const props = defineProps({
   question: {

package/src/modules/AuditForm/components/audit-form-question-write-wrapper.vue

@@ -63,11 +63,11 @@ import set from 'lodash/set';
 import cloneDeep from 'lodash/cloneDeep';
 import { computed } from 'vue';
 import { EngineAuditQuestionType } from 'webitel-sdk';
-import WtTooltip from '../../../components/atoms/wt-tooltip/wt-tooltip.vue';
-import WtSwitcher from '../../../components/molecules/wt-switcher/wt-switcher.vue';
-import WtIconBtn from '../../../components/molecules/wt-icon-btn/wt-icon-btn.vue';
-import WtInput from '../../../components/molecules/wt-input/wt-input.vue';
-import WtSelect from '../../../components/molecules/wt-select/wt-select.vue';
+import WtTooltip from '../../../components/wt-tooltip/wt-tooltip.vue';
+import WtSwitcher from '../../../components/wt-switcher/wt-switcher.vue';
+import WtIconBtn from '../../../components/wt-icon-btn/wt-icon-btn.vue';
+import WtInput from '../../../components/wt-input/wt-input.vue';
+import WtSelect from '../../../components/wt-select/wt-select.vue';
 
 import AuditFormQuestionOptions from './questions/options/audit-form-question-options.vue';
 import AuditFormQuestionScore from './questions/score/audit-form-question-score.vue';

package/src/modules/AuditForm/components/audit-form.vue

@@ -39,7 +39,7 @@ import {
 import { useVuelidate } from '@vuelidate/core';
 import { useDestroyableSortable } from '../../../composables/useDestroyableSortable/useDestroyableSortable';
 import AuditFormQuestion from './audit-form-question.vue';
-import WtButton from '../../../components/atoms/wt-button/wt-button.vue';
+import WtButton from '../../../components/wt-button/wt-button.vue';
 import { generateQuestionSchema } from '../schemas/AuditFormQuestionSchema';
 
 const props = defineProps({

package/src/modules/AuditForm/components/questions/options/audit-form-question-options-write-row.vue

@@ -31,9 +31,9 @@
 import { useVuelidate } from '@vuelidate/core';
 import { required, minValue, maxValue } from '@vuelidate/validators';
 import { computed, onMounted, toRefs } from 'vue';
-import WtTooltip from '../../../../../components/atoms/wt-tooltip/wt-tooltip.vue';
-import WtIconBtn from '../../../../../components/molecules/wt-icon-btn/wt-icon-btn.vue';
-import WtInput from '../../../../../components/molecules/wt-input/wt-input.vue';
+import WtTooltip from '../../../../../components/wt-tooltip/wt-tooltip.vue';
+import WtIconBtn from '../../../../../components/wt-icon-btn/wt-icon-btn.vue';
+import WtInput from '../../../../../components/wt-input/wt-input.vue';
 
 const props = defineProps({
   option: {

package/src/modules/AuditForm/components/questions/options/audit-form-question-options.vue

@@ -37,8 +37,8 @@
 
 <script setup>
 import OptionsWriteRow from './audit-form-question-options-write-row.vue';
-import WtButton from '../../../../../components/atoms/wt-button/wt-button.vue';
-import WtRadio from '../../../../../components/molecules/wt-radio/wt-radio.vue';
+import WtButton from '../../../../../components/wt-button/wt-button.vue';
+import WtRadio from '../../../../../components/wt-radio/wt-radio.vue';
 import updateObject from '../../../../../scripts/updateObject';
 import { generateOption } from '../../../schemas/AuditFormQuestionOptionsSchema';
 

package/src/modules/AuditForm/components/questions/score/audit-form-question-score.vue

@@ -47,8 +47,8 @@ import { maxValue, minValue, required } from '@vuelidate/validators';
 import { computed, onMounted, toRefs } from 'vue';
 import isEmpty from '../../../../../scripts/isEmpty';
 import updateObject from '../../../../../scripts/updateObject';
-import WtRadio from '../../../../../components/molecules/wt-radio/wt-radio.vue';
-import WtInput from '../../../../../components/molecules/wt-input/wt-input.vue';
+import WtRadio from '../../../../../components/wt-radio/wt-radio.vue';
+import WtInput from '../../../../../components/wt-input/wt-input.vue';
 
 const props = defineProps({
   question: {

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-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>

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

@@ -1,180 +0,0 @@
-<template>
-  <div
-    class="wt-checkbox"
-    :class="{
-      'wt-checkbox--active': isChecked,
-      'wt-checkbox--outline': outline,
-      'wt-checkbox--disabled': disabled,
-    }"
-  >
-    <wt-label class="wt-checkbox__wrapper" v-bind="labelProps">
-      <input
-        class="wt-checkbox__input"
-        type="checkbox"
-        :value="value"
-        :checked="isChecked"
-        :disabled="disabled"
-        @change="inputHandler"
-      >
-      <span class="wt-checkbox__checkmark">
-      <wt-icon
-        :icon="checkboxIcon"
-        :color="iconColor"
-      ></wt-icon>
-    </span>
-      <!-- @slot Custom label markup -->
-      <slot name="label" v-bind="{ label, isChecked, disabled }">
-        <div v-if="label" class="wt-checkbox__label">{{ label }}</div>
-      </slot>
-    </wt-label>
-  </div>
-</template>
-
-<script>
-  export default {
-    name: 'wt-checkbox',
-    model: {
-      prop: 'selected',
-      event: 'change',
-    },
-    props: {
-      value: {
-        type: [String, Boolean],
-        default: '',
-      },
-      selected: {
-        type: [Array, Boolean],
-        default: () => [],
-      },
-      label: {
-        type: String,
-        default: '',
-      },
-      disabled: {
-        type: Boolean,
-        default: false,
-      },
-      outline: {
-        type: Boolean,
-        default: false,
-      },
-      labelProps: {
-        type: Object,
-        description: 'Object with props, passed down to wt-label as props',
-      },
-    },
-    emits: ['change'],
-    computed: {
-      isChecked() {
-        if (typeof this.selected === 'boolean') {
-          return this.selected;
-        }
-        return this.selected.includes(this.value);
-      },
-      checkboxIcon() {
-        return this.isChecked ? 'checkbox--checked' : 'checkbox';
-      },
-      iconColor() {
-        if (this.disabled) return 'disabled';
-        if (this.isChecked) return 'active';
-        return null;
-      },
-    },
-    methods: {
-      inputHandler() {
-        if (typeof this.selected === 'boolean') {
-          this.$emit('change', !this.selected);
-        } else {
-          let selected = [...this.selected];
-          if (selected.includes(this.value)) {
-            selected = selected.filter((value) => value !== this.value);
-          } else {
-            selected.push(this.value);
-          }
-          this.$emit('change', selected);
-        }
-      },
-    },
-  };
-</script>
-
-<style lang="scss" scoped>
-  .wt-checkbox {
-    @include width-fit-content;
-    box-sizing: border-box;
-
-    .wt-label {
-      cursor: pointer;
-    }
-  }
-
-  .wt-checkbox__wrapper {
-    position: relative;
-    display: flex;
-    align-items: center;
-    user-select: none;
-
-    .wt-checkbox__checkmark {
-      line-height: 0; // prevent icon height >> content
-    }
-  }
-
-  .wt-checkbox__label {
-    margin-left: var(--checkbox-icon-margin);
-    transition: var(--transition);
-    cursor: pointer;
-  }
-
-  /* Hide the browser's default checkbox */
-  .wt-checkbox__input {
-    position: absolute;
-    width: 0;
-    height: 0;
-    opacity: 0;
-    pointer-events: none;
-  }
-
-  .wt-checkbox:hover {
-    .wt-checkbox__label {
-      color: var(--form-label--hover-color);
-    }
-
-    ::v-deep .wt-icon__icon {
-      fill: var(--icon-color--hover);
-    }
-  }
-
-  .wt-checkbox--active {
-    .wt-checkbox__label {
-      color: var(--form-label--active-color);
-    }
-  }
-
-  .wt-checkbox--outline {
-    .wt-checkbox__label {
-      color: var(--form-outline-label-color);
-    }
-
-    ::v-deep .wt-icon__icon {
-      fill: var(--icon-outline-color);
-    }
-
-    &.wt-checkbox--active {
-      .wt-checkbox__label {
-        color: var(--form-label--active-color);
-      }
-
-      ::v-deep .wt-icon__icon {
-        fill: var(--icon-outline--active-color);
-      }
-    }
-  }
-
-  .wt-checkbox--disabled {
-    pointer-events: none;
-
-    .wt-checkbox__label {
-      color: var(--form-label--disabled-color);
-    }
-  }
-</style>