@webitel/ui-sdk 25.12.17 → 25.12.19

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

@@ -1,11 +1,9 @@
 <template>
   <div
+    class="wt-textarea"
     :class="{
-      'wt-textarea--disabled': disabled,
-      'wt-textarea--invalid': invalid,
-      'wt-textarea--autoresize': autoresize,
+      'wt-textarea--hidden-scrollbar': isScrollHidden,
     }"
-    class="wt-textarea"
   >
     <wt-label
       :disabled="disabled"
@@ -23,32 +21,22 @@
       </slot>
     </wt-label>
     <div class="wt-textarea__wrapper">
-      <textarea
+      <p-textarea
         :id="name"
-        ref="wt-textarea"
-        :disabled="disabled"
+        ref="textarea-wrapper"
+        v-model="model"
         :placeholder="placeholder || label"
-        :value="value"
+        :invalid="invalid"
+        :disabled="disabled"
         :rows="rows"
+        :auto-resize="autoresize"
         :readonly="readonly"
         class="wt-textarea__textarea"
-        v-on="listeners"
-        @input="autoGrow"
+        @paste="emit('paste', $event)"
+        @keydown="handleKeypress"
+        @input="handleInput"
+        @blur="emit('blur')"
       />
-      <div
-        ref="after-wrapper"
-        class="wt-textarea__after-wrapper"
-      >
-        <slot name="after-input" />
-        <wt-icon-btn
-          :class="{ hidden: !value }"
-          :disabled="disabled"
-          class="wt-textarea__reset-icon-btn"
-          icon="close--filled"
-          size="sm"
-          @click="$emit('input', '')"
-        />
-      </div>
     </div>
     <wt-input-info
       v-if="isValidation"
@@ -59,134 +47,108 @@
   </div>
 </template>
 
-<script>
-import validationMixin from '../../mixins/validationMixin/validationMixin.js';
-import WtLabel from '../wt-label/wt-label.vue';
+<script setup lang="ts">
+import type { TextareaProps } from 'primevue/textarea';
+import { defineModel, onMounted, ref,useTemplateRef } from 'vue';
+
+import { useValidation } from '../../mixins/validationMixin/useValidation';
+
+interface Props extends /* @vue-ignore */ TextareaProps {
+  /**
+   * textarea label
+   */
+  label?: string;
+  /**
+   * textarea placeholder
+   */
+  placeholder?: string;
+  /**
+   * Native textarea readonly attribute
+   */
+  readonly?: boolean;
+  /**
+   * Native textarea disabled attribute
+   */
+  disabled?: boolean;
+  required?: boolean;
+  /**
+   * textarea name
+   */
+  name?: string;
+  /**
+   * Number of rows in textarea
+   */
+  rows?: number;
+  labelProps?: Record<string, any>;
+  autoresize?: boolean;
+  // validation rules
+  v?: any;
+  customValidators?: Array<{ name: string; text: string }>;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  label: '',
+  placeholder: undefined,
+  readonly: false,
+  disabled: false,
+  required: false,
+  name: '',
+  rows: 1,
+  labelProps: undefined,
+  autoresize: false,
+  v: undefined,
+  customValidators: () => [],
+});
 
-export default {
-  name: 'WtTextarea',
-  components: {
-    WtLabel,
-  },
-  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
-     */
-    readonly: {
-      type: Boolean,
-      default: false,
-      description: 'Native textarea readonly attribute',
-    },
-    /**
-     * Native textarea disabled attribute
-     */
-    disabled: {
-      type: Boolean,
-      default: false,
-      description: 'Native textarea disabled attribute',
-    },
-    required: {
-      type: Boolean,
-      default: false,
-    },
-    /**
-     * textarea name
-     */
-    name: {
-      type: String,
-      default: '',
-    },
-    /**
-     * Number of rows in textarea
-     */
-    rows: {
-      type: Number,
-      default: 1,
-      description: 'Number of rows for textarea',
-    },
-    labelProps: {
-      type: Object,
-      description: 'Object with props, passed down to wt-label as props',
-    },
-    autoresize: {
-      type: Boolean,
-      default: false,
-      description: 'enables auto-grow for text-area',
-    },
-  },
-  emits: ['input', 'enter'],
-  computed: {
-    listeners() {
-      return {
-        ...this.$listeners,
-        input: (event) => this.$emit('input', event.target.value),
-        keypress: (event) => this.handleKeypress(event),
-      };
-    },
-  },
-  mounted() {
-    this.updateInputPaddings();
-  },
-  updated() {
-    if (this.autoresize && !this.value) this.resetGrow();
-  },
+const model = defineModel<string>();
 
-  methods: {
-    handleKeypress(event) {
-      if (!this.autoresize) return;
+const textareaWrapperRef = useTemplateRef('textarea-wrapper');
 
-      if (event.key === 'Enter' && !event.shiftKey) {
-        this.$emit('enter');
-        event.preventDefault();
-      }
-    },
+const emit = defineEmits(['enter', 'paste', 'blur', 'keydown']);
 
-    autoGrow() {
-      if (!this.autoresize) return;
-      const inputEl = this.$refs['wt-textarea'];
-      const bordersSize = 2; // + 2px for height because of --rounded-action-border-size
+const isScrollHidden = ref(false);
 
-      inputEl.style.height = 'auto';
-      inputEl.style.height = inputEl.scrollHeight + bordersSize + 'px';
-    },
+const { isValidation, invalid, validationText } = useValidation({
+  v: props.v,
+  customValidators: props.customValidators,
+} as any);
 
-    resetGrow() {
-      const inputEl = this.$refs['wt-textarea'];
-      inputEl.style.height = 'auto'; // reset text-area height
-    },
+const handleKeypress = (event: KeyboardEvent) => {
+  emit('keydown', event);
+  if (!props.autoresize) return;
 
-    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)`;
-    },
-  },
+  if (event.key === 'Enter' && !event.shiftKey) {
+    emit('enter');
+    event.preventDefault();
+  }
+};
+
+const handleInput = () => {
+  checkTextareaHeight();
+};
+
+/**
+ * @author YeHlukhov
+ * 
+ * Primevue by default shows scrollbar for autoresize textarea with overflow: auto,
+ * so this function checks textarea height and adds/removes wt-hidden-scrollbar class
+ */
+const checkTextareaHeight = async () => {
+  if (!props.autoresize) return;
+
+  const textareaEl = textareaWrapperRef.value?.$el;
+
+  // firstly textarea renders widths are equal, then clientHeight changes for 2px by primevue extra space
+  if (textareaEl?.scrollHeight === textareaEl?.clientHeight || textareaEl?.scrollHeight === (textareaEl?.clientHeight + 2)) {
+    isScrollHidden.value = true;
+  } else {
+    isScrollHidden.value = false;
+  }
 };
+
+onMounted(() => {
+  checkTextareaHeight()
+})
 </script>
 
 <style lang="scss">
@@ -196,29 +158,8 @@ export default {
 <style lang="scss" scoped>
 @use '../../css/styleguide/styleguide' as *;
 
-.wt-textarea {
-  cursor: text;
-  max-height: 100%;
-
-  &--disabled {
-    pointer-events: none;
-  }
-
-  &--autoresize {
-    .wt-textarea__textarea {
-      transition: none;
-      min-height: auto;
-      max-height: 100%;
-    }
-
-    .wt-textarea__wrapper {
-      height: 100%;
-    }
-  }
-}
-
 .wt-textarea__wrapper {
-  position: relative;
+  height: 100%;
 }
 
 .wt-textarea__textarea {
@@ -226,42 +167,12 @@ export default {
   @extend %wt-scrollbar;
   @include wt-placeholder;
 
-  display: block;
-  transition: var(--transition);
   box-sizing: border-box;
-  border: var(--input-border);
-  border-color: var(--wt-text-field-input-border-color);
-  border-radius: var(--border-radius);
-  background: transparent;
-  padding: var(--textarea-padding);
   width: 100%;
-  min-height: var(--textarea-min-height);
   resize: none;
-  color: var(--wt-text-field-text-color);
-
-  .wt-textarea--disabled & {
-    @include wt-placeholder('disabled');
-
-    border-color: var(--wt-text-field-input-border-disabled-color);
-    background: var(--wt-text-field-input-background-disabled-color);
-  }
-
-  .wt-textarea--invalid &,
-  .wt-textarea--invalid:hover & {
-    outline: none; // prevent outline overlapping false color
-    border-color: var(--wt-text-field-input-border-error-color);
-    color: var(--wt-text-field-error-text-color);
-    @include wt-placeholder('error');
-  }
 }
 
-.wt-textarea__after-wrapper {
-  display: flex;
-  position: absolute;
-  top: var(--input-icon-margin);
-  right: var(--input-icon-margin);
-  align-items: center;
-  gap: var(--input-after-wrapper-gap);
-  pointer-events: auto; // override --disabled p-events none
+.wt-textarea--hidden-scrollbar textarea::-webkit-scrollbar {
+  display: none;
 }
 </style>

package/src/modules/AgentStatusSelect/components/_internals/wt-cc-pause-cause-popup.vue

@@ -39,8 +39,7 @@
               <div v-if="selected && option.id === selected?.id" class="wt-cc-pause-cause-popup-option__comment">
                 <wt-textarea
                   :label="$t('reusable.comment')"
-                  :value="selected.statusComment"
-                  @input="selected.statusComment = $event"
+                  :v-model="selected.statusComment"
                 />
               </div>
           </li>

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

@@ -21,10 +21,10 @@
 
     <wt-textarea
       v-if="mode === AuditFormMode.Fill"
-      :value="resultCommentModel"
+      :model-value="resultCommentModel"
       class="call-evaluation-form__comment"
       :label="$t('reusable.comment')"
-      @input="handleResultCommentUpdate"
+      @update:model-value="handleResultCommentUpdate"
     />
 
     <audit-form-footer

package/src/modules/Userinfo/v2/api/UserSettingsAPI.ts

@@ -0,0 +1,38 @@
+import { getDefaultInstance } from '@webitel/api-services/api/defaults';
+import {
+  applyTransform,
+  notify,
+  snakeToCamel,
+} from '@webitel/api-services/api/transformers';
+
+const instance = getDefaultInstance();
+
+const BASE_URL = '/user/settings';
+
+const getUserTimezone = async (): Promise<{timezone: string}> => {
+  try {
+    const response = await instance.get(`${BASE_URL}/timezone`);
+    return applyTransform(response.data, [snakeToCamel()]);
+  } catch (err) {
+    throw applyTransform(err, [notify]);
+  }
+};
+
+const setUserTimezone = async (timezone: string) => {
+  const url = `${BASE_URL}/timezone`;
+  try {
+    const response = await instance.put(url, { timezone });
+    return applyTransform(response.data, [
+      snakeToCamel(),
+    ]);
+  } catch (err) {
+    throw applyTransform(err, [
+      notify,
+    ]);
+  }
+};
+
+export default {
+  getUserTimezone,
+  setUserTimezone,
+}

package/src/modules/Userinfo/v2/api/UserinfoAPI.ts

@@ -62,4 +62,9 @@ const logout = async () => {
   }
 };
 
-export { getSession, getUiVisibilityAccess, logout, setInstance };
+export {
+  getSession,
+  getUiVisibilityAccess,
+  logout,
+  setInstance,
+};

package/src/modules/Userinfo/v2/constants/UserSettingsConstants.ts

@@ -0,0 +1 @@
+export const TIMEZONE_STORAGE_KEY = 'user-timezone-setting';

package/src/modules/Userinfo/v2/stores/settingsStore.ts

@@ -0,0 +1,33 @@
+import { defineStore } from 'pinia';
+import { ref } from 'vue';
+
+import UserSettingsAPI from '../api/UserSettingsAPI';
+import { TIMEZONE_STORAGE_KEY } from '../constants/UserSettingsConstants';
+
+export const createSettingsStore = ({ namespace = 'userinfo' } = {}) => {
+  return defineStore(`${namespace}/settings`, () => {
+    const timezone = ref<string | null>(null);
+
+    const initializeTimezone = async () => {
+      const storedTimezone = localStorage.getItem(TIMEZONE_STORAGE_KEY);
+      if (storedTimezone) {
+        timezone.value = storedTimezone;
+      } else {
+        const { timezone: userTimezone } =
+          await UserSettingsAPI.getUserTimezone();
+        timezone.value = userTimezone;
+        localStorage.setItem(TIMEZONE_STORAGE_KEY, userTimezone);
+      }
+    };
+
+    const initialize = async () => {
+      await initializeTimezone();
+    };
+
+    return {
+      timezone,
+
+      initialize,
+    };
+  });
+};

package/src/modules/Userinfo/v2/stores/userinfoStore.ts

@@ -4,12 +4,16 @@ import { ref } from 'vue';
 
 import { getSession, getUiVisibilityAccess, logout } from '../api/UserinfoAPI';
 import { createUserAccessStore } from './accessStore';
+import { createSettingsStore } from './settingsStore';
 
 export const createUserinfoStore = () => {
   const namespace = 'userinfo';
   const useAccessStore = createUserAccessStore({
     namespace,
   });
+  const useSettingsStore = createSettingsStore({
+    namespace,
+  });
 
   const store = defineStore(namespace, () => {
     const accessStore = useAccessStore();
@@ -24,6 +28,7 @@ export const createUserinfoStore = () => {
       hasSectionVisibility,
       hasApplicationVisibility,
     } = accessStore;
+    const { initialize: initializeSettingsStore, timezone } = useSettingsStore();
 
     const userId = ref();
     const userInfo = ref(null);
@@ -48,6 +53,8 @@ export const createUserinfoStore = () => {
         permissions: session.permissions,
         access,
       });
+
+      await initializeSettingsStore();
     };
 
     const logoutUser = async () => {
@@ -62,6 +69,7 @@ export const createUserinfoStore = () => {
     return {
       userId,
       userInfo,
+      timezone,
       initialize,
 
       hasReadAccess,

package/src/plugins/primevue/primevue.plugin.js

@@ -14,7 +14,8 @@ import PInputText from 'primevue/inputtext';
 import PMenubar from 'primevue/menubar';
 import PPopover from 'primevue/popover';
 import PRadio from 'primevue/radiobutton';
-import PSlider from 'primevue/slider'
+import PSlider from 'primevue/slider';
+import PTextarea from 'primevue/textarea';
 import PToggleSwitch from 'primevue/toggleswitch';
 import PToolbar from 'primevue/toolbar';
 import Tooltip from 'primevue/tooltip';
@@ -49,6 +50,7 @@ const initPrimevue = (app) => {
   app.component('PColumn', changeComponentCompatMode(PColumn));
   app.component('PRadio', changeComponentCompatMode(PRadio));
   app.component('PChip', changeComponentCompatMode(PChip));
+  app.component('PTextarea', changeComponentCompatMode(PTextarea));
   app.component('PToggleSwitch', changeComponentCompatMode(PToggleSwitch));
   app.component('PBreadcrumb', changeComponentCompatMode(PBreadcrumb));
   app.component('PSlider', changeComponentCompatMode(PSlider));

package/src/plugins/primevue/theme/components/components.js

@@ -13,6 +13,7 @@ import radio from './radio/radio.js';
 import slider from './slider/slider.js';
 import switcher from './switcher/switcher.js';
 import table from './table/table.js';
+import textarea from './textarea/textarea.js';
 import toolbar from './toolbar/toolbar.js';
 import tooltip from './tooltip/tooltip.js';
 
@@ -23,6 +24,7 @@ const components = {
   button,
   chip,
   checkbox,
+  textarea,
   toggleswitch: switcher,
   divider,
   image,

package/src/plugins/primevue/theme/components/textarea/textarea.js

@@ -0,0 +1,14 @@
+import { TextareaScheme } from '@webitel/styleguide/component-schemes';
+
+const textarea = {
+  ...TextareaScheme.sizes,
+  colorScheme: TextareaScheme.colorScheme,
+
+  css: ({ dt }) => `
+      .wt-textarea__textarea {
+        min-height: ${dt('textarea.minHeight')};
+      }
+  `,
+};
+
+export default textarea;

package/types/components/wt-table/wt-table.vue.d.ts

@@ -85,27 +85,32 @@ declare const virtualScroll: import("vue").ComputedRef<{
     numToleratedItems: number;
 }>;
 declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
-declare var __VLS_68: string, __VLS_69: {
+declare var __VLS_60: `header-${string}`, __VLS_61: {
+    index: number;
+    header: WtTableHeader;
+}, __VLS_72: string, __VLS_73: {
     index: any;
     item: any;
-}, __VLS_72: `${string}-footer`, __VLS_73: {}, __VLS_79: {}, __VLS_81: {
+}, __VLS_76: `${string}-footer`, __VLS_77: {}, __VLS_83: {}, __VLS_85: {
     index: any;
     item: any;
-}, __VLS_83: {
+}, __VLS_87: {
     item: any;
-}, __VLS_85: {};
+}, __VLS_89: {};
 type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
-    [K in NonNullable<typeof __VLS_68>]?: (props: typeof __VLS_69) => any;
+    [K in NonNullable<typeof __VLS_60>]?: (props: typeof __VLS_61) => any;
 } & {
     [K in NonNullable<typeof __VLS_72>]?: (props: typeof __VLS_73) => any;
 } & {
-    'actions-header'?: (props: typeof __VLS_79) => any;
+    [K in NonNullable<typeof __VLS_76>]?: (props: typeof __VLS_77) => any;
 } & {
-    actions?: (props: typeof __VLS_81) => any;
+    'actions-header'?: (props: typeof __VLS_83) => any;
 } & {
-    expansion?: (props: typeof __VLS_83) => any;
+    actions?: (props: typeof __VLS_85) => any;
 } & {
-    footer?: (props: typeof __VLS_85) => any;
+    expansion?: (props: typeof __VLS_87) => any;
+} & {
+    footer?: (props: typeof __VLS_89) => any;
 }>;
 declare const __VLS_self: import("vue").DefineComponent<Props, {
     emit: typeof emit;