@webitel/ui-sdk 26.2.11 → 26.2.13

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

@@ -0,0 +1,145 @@
+<template>
+  <div class="wt-password">
+    <wt-label
+      v-if="hasLabel"
+      :disabled="disabled"
+      :for="inputId"
+      :invalid="invalid"
+    >
+      <slot
+        name="label"
+        v-bind="{ label }"
+      >
+        {{ requiredLabel }}
+      </slot>
+    </wt-label>
+    <p-input-group>
+      <p-password
+        :id="inputId"
+        ref="password"
+        v-model="model"
+        :disabled="disabled"
+        :invalid="invalid"
+        :placeholder="placeholder || label"
+        :toggle-mask="false"
+        :feedback="false"
+        :input-props="{ type: inputType }"
+        input-class="wt-password__input"
+        v-bind="$attrs"
+        @keyup="handleKeyup"
+      >
+      </p-password>
+      <p-input-group-addon v-if="toggleMask">
+        <wt-icon-btn
+          :disabled="disabled"
+          :icon="showPasswordIcon"
+          @click="togglePassword"
+        />    
+      </p-input-group-addon>
+    </p-input-group>
+    <wt-message
+      v-if="isValidation && validationText"
+      :color="getMessageColor"
+      :variant="MessageVariant.SIMPLE"
+      :size="ComponentSize.SM"
+    >
+      {{ validationText }}
+    </wt-message>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { RegleFieldStatus } from '@regle/core';
+import type { PasswordProps } from 'primevue';
+import { computed, defineModel, ref, toRefs, useSlots,useTemplateRef } from 'vue';
+
+import { useInputControl } from '../../composables';
+import { ComponentSize,MessageColor, MessageVariant } from '../../enums';
+import { useValidation } from '../../mixins/validationMixin/useValidation';
+
+interface WtPasswordProps extends /* @vue-ignore */ PasswordProps {
+  label?: string;
+  placeholder?: string;
+  disabled?: boolean;
+  required?: boolean;
+  toggleMask?: boolean;
+  v?: Record<string, unknown>;
+  regleValidation?: RegleFieldStatus<string>;
+  customValidators?: unknown[];
+}
+
+const props = withDefaults(defineProps<WtPasswordProps>(), {
+  label: '',
+  placeholder: '',
+  disabled: false,
+  required: false,
+  toggleMask: true,
+  v: null,
+  regleValidation: null,
+  customValidators: () => [],
+});
+
+const model = defineModel<string>({ default: '' });
+
+const password = useTemplateRef('password');
+
+const inputId = `password-${Math.random().toString(36).slice(2, 11)}`;
+
+const slots = useSlots();
+
+const { v, customValidators, regleValidation } = toRefs(props);
+
+const {
+  isValidation,
+  invalid,
+  validationText,
+} = useValidation({
+  v,
+  customValidators,
+  regleValidation,
+});
+
+const { 
+  focus,
+  handleKeyup
+} = useInputControl(password);
+
+const isPasswordVisible = ref(false);
+
+const hasLabel = computed(() => {
+  return props.label || slots.label;
+});
+
+const requiredLabel = computed(() => {
+  return props.required ? `${props.label}*` : props.label;
+});
+
+const showPasswordIcon = computed(() => {
+  return isPasswordVisible.value ? 'eye--closed' : 'eye--opened';
+});
+
+const inputType = computed(() => {
+  return isPasswordVisible.value ? 'text' : 'password';
+});
+
+const getMessageColor = computed(() => {
+  return invalid.value ? MessageColor.ERROR : MessageColor.SECONDARY;
+});
+
+const togglePassword = () => {
+  isPasswordVisible.value = !isPasswordVisible.value;
+};
+
+defineExpose({
+  focus,
+});
+</script>
+
+<style lang="scss" scoped>
+@use '../../css/styleguide/styleguide' as *;
+
+:deep(.wt-password__input) {
+  @extend %typo-body-1;
+  @include wt-placeholder;
+}
+</style>

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

@@ -9,6 +9,7 @@
     :row-style="rowStyle"
     :show-headers="!headless"
     :value="data"
+    :data-key="props.dataKey"
     class="wt-table"
     column-resize-mode="expand"
     lazy
@@ -261,6 +262,16 @@ interface Props extends DataTableProps{
    * 'If true, allows to reorder rows.'
    */
   rowReorder?: boolean;
+  /**
+   * @author @Oleksandr Palonnyi
+   *
+   * [WTEL-8629](https://webitel.atlassian.net/browse/WTEL-8629)
+   *
+   * Unique field name used to identify a row.
+   * Required for selection, expansion, and virtual scrolling to work correctly.
+   * The value must be stable and unique across all rows.
+   */
+  dataKey?: string;
   /**
    * 'If true, restrict sprecific row reorder.'
    */
@@ -296,7 +307,8 @@ const props = withDefaults(defineProps<Props>(), {
   reorderableColumns: false,
   rowExpansionDisabled: () => false,
   lazy: false,
-  itemSize: DEFAULT_ITEM_SIZE
+  itemSize: DEFAULT_ITEM_SIZE,
+  dataKey: '',
 });
 
 const { t } = useI18n();

package/src/composables/index.ts

@@ -7,6 +7,7 @@ export * from './useClose/useClose';
 export * from './useDestroyableSortable/useDestroyableSortable';
 export * from './useGalleriaFullscreen/useGalleriaFullscreen';
 export * from './useGalleriaMaskClick/useGalleriaMaskClick';
+export * from './useInputControl/useInputControl';
 export * from './useRepresentableAgentPauseCause/useRepresentableAgentPauseCause';
 export * from './useTableColumnDrag/useTableColumnDrag'
 export * from './useValidate/useValidate';

package/src/composables/useInputControl/useInputControl.ts

@@ -0,0 +1,15 @@
+import { computed } from 'vue';
+
+export const useInputControl = (input) => {
+  const inputEl = computed(() => input.value?.$el?.querySelector('input'));
+
+  const focus = () => inputEl.value?.focus() 
+
+  // prevent double triggering
+  const handleKeyup = (e) => e.stopPropagation();
+
+  return { 
+    focus,
+    handleKeyup
+  };
+};

package/src/enums/MessageColor/MessageColor.ts

@@ -0,0 +1,10 @@
+export const MessageColor = {
+  SECONDARY: 'secondary',
+  SUCCESS: 'success',
+  ERROR: 'error',
+  WARN: 'warn',
+  INFO: 'info',
+  CONTRAST: 'contrast',
+} as const;
+
+export type MessageColor = keyof typeof MessageColor;

package/src/enums/MessageVariant/MessageVariant.ts

@@ -0,0 +1,7 @@
+export const MessageVariant = {
+  FILLED: 'filled',
+  OUTLINED: 'outlined',
+  SIMPLE: 'simple',
+} as const;
+
+export type MessageVariant = keyof typeof MessageVariant;

package/src/enums/index.ts

@@ -12,6 +12,8 @@ import { EmptyCause } from './EmptyCause/EmptyCause';
 import { FormatDateMode } from './FormatDateMode/FormatDateMode';
 import IconAction from './IconAction/IconAction.enum.js';
 import { IconColor } from './IconColor/IconColor';
+import { MessageColor } from './MessageColor/MessageColor';
+import { MessageVariant } from './MessageVariant/MessageVariant';
 import { MimeTypes } from './MimeTypes/MimeTypes.enum';
 import { ProcessingTableColumnType } from './ProcessingTableColumnType/ProcessingTableColumnType';
 import { QueueType, QueueTypeName } from './QueueType/QueueType.enum';
@@ -44,6 +46,8 @@ export {
   FormatDateMode,
   IconAction,
   IconColor,
+  MessageColor,
+  MessageVariant,
   MimeTypes,
   ProcessingTableColumnType,
   ProviderIconType,

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

@@ -11,8 +11,13 @@ import PTable from 'primevue/datatable';
 import PDivider from 'primevue/divider';
 import PGalleria from 'primevue/galleria';
 import PImage from 'primevue/image';
+import PInputGroup from 'primevue/inputgroup';
+import PInputGroupAddon from 'primevue/inputgroupaddon';
+import PInputNumber from 'primevue/inputnumber';
 import PInputText from 'primevue/inputtext';
 import PMenubar from 'primevue/menubar';
+import PMessage from 'primevue/message';
+import PPassword from 'primevue/password';
 import PPopover from 'primevue/popover';
 import PRadio from 'primevue/radiobutton';
 import PSlider from 'primevue/slider';
@@ -59,6 +64,11 @@ const initPrimevue = (app) => {
   app.component('PImage', changeComponentCompatMode(PImage));
   app.component('PGalleria', changeComponentCompatMode(PGalleria));
   app.component('PBadge', changeComponentCompatMode(PBadge));
+  app.component('PInputGroup', changeComponentCompatMode(PInputGroup));
+  app.component('PInputNumber', changeComponentCompatMode(PInputNumber));
+  app.component('PPassword', changeComponentCompatMode(PPassword));
+  app.component('PInputGroupAddon', changeComponentCompatMode(PInputGroupAddon));
+  app.component('PMessage', changeComponentCompatMode(PMessage));
 
   app.directive('tooltip', Tooltip);
 };

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

@@ -8,7 +8,12 @@ import chip from './chip/chip.js';
 import divider from './divider/divider.js';
 import galleria from './galleria/galleria.js';
 import image from './image/image.js';
+import inputGroup from './input-group/input-group.js';
+import inputNumber from './input-number/input-number.js';
+import inputText from './input-text/input-text.js';
 import menubar from './menubar/menubar.js';
+import message from './message/message.js';
+import password from './password/password.js';
 import popover from './popover/popover.js';
 import radio from './radio/radio.js';
 import slider from './slider/slider.js';
@@ -30,7 +35,12 @@ const components = {
   toggleswitch: switcher,
   divider,
   image,
+  inputgroup: inputGroup,
+  inputnumber: inputNumber,
+  inputtext: inputText,
   menubar,
+  message,
+  password,
   popover,
   radiobutton: radio,
   slider,

package/src/plugins/primevue/theme/components/input-group/input-group.js

@@ -0,0 +1,8 @@
+import { InputGroupScheme } from '@webitel/styleguide/component-schemes';
+
+const inputGroup = {
+  ...InputGroupScheme.sizes,
+  colorScheme: InputGroupScheme.colorScheme,
+};
+
+export default inputGroup;

package/src/plugins/primevue/theme/components/input-number/input-number.js

@@ -0,0 +1,8 @@
+import { InputNumberScheme } from '@webitel/styleguide/component-schemes';
+
+const inputNumber = {
+  ...InputNumberScheme.sizes,
+  colorScheme: InputNumberScheme.colorScheme,
+};
+
+export default inputNumber;

package/src/plugins/primevue/theme/components/input-text/input-text.js

@@ -0,0 +1,8 @@
+import { InputTextScheme } from '@webitel/styleguide/component-schemes';
+
+const inputText = {
+  ...InputTextScheme.sizes,
+  colorScheme: InputTextScheme.colorScheme,
+};
+
+export default inputText;

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

@@ -0,0 +1,37 @@
+import { MessageScheme } from '@webitel/styleguide/component-schemes';
+
+import { MessageColor } from '../../../../../enums';
+
+const generateCustomColorCss = ({ colorName, dt }) => `
+  .p-message-${colorName} .p-message-close-button svg {
+    fill: ${dt(`message.${colorName}.color`)};
+  }
+
+  .p-message-${colorName}.p-message-outlined .p-message-close-button svg {
+    fill: ${dt(`message.${colorName}.outlined.color`)};
+  }
+
+  .p-message-${colorName}.p-message-outlined .p-message-close-button:hover {
+    background: ${dt(`message.${colorName}.outlined.closeButton.hoverBackground`)};
+  }
+
+  .p-message-${colorName}.p-message-simple .p-message-close-button svg {
+    fill: ${dt(`message.${colorName}.simple.color`)};
+  }
+`
+
+const message = {
+  ...MessageScheme.sizes,
+  colorScheme: MessageScheme.colorScheme,
+
+  css: ({ dt }) => `
+    ${generateCustomColorCss({ colorName: MessageColor.INFO, dt })}
+    ${generateCustomColorCss({ colorName: MessageColor.ERROR, dt })}
+    ${generateCustomColorCss({ colorName: MessageColor.SECONDARY, dt })}
+    ${generateCustomColorCss({ colorName: MessageColor.SUCCESS, dt })}
+    ${generateCustomColorCss({ colorName: MessageColor.WARN, dt })}
+    ${generateCustomColorCss({ colorName: MessageColor.CONTRAST, dt })}
+  `,
+};
+
+export default message;

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

@@ -0,0 +1,14 @@
+import { PasswordScheme } from '@webitel/styleguide/component-schemes';
+
+const password = {
+  ...PasswordScheme.sizes,
+  colorScheme: PasswordScheme.colorScheme,
+
+  css: ({ dt }) => `
+    .wt-password .wt-icon {
+      fill: ${dt('password.icon.color')};
+    }
+  `,
+};
+
+export default password;

package/types/components/index.d.ts

@@ -34,12 +34,16 @@ import WtImage from './wt-image/wt-image.vue';
 import WtIndicator from './wt-indicator/wt-indicator.vue';
 import WtInput from './wt-input/wt-input.vue';
 import WtInputInfo from './wt-input-info/wt-input-info.vue';
+import WtInputNumber from './wt-input-number/wt-input-number.vue';
+import WtInputText from './wt-input-text/wt-input-text.vue';
 import WtIntersectionObserver from './wt-intersection-observer/wt-intersection-observer.vue';
 import WtItemLink from './wt-item-link/wt-item-link.vue';
+import WtPassword from './wt-password/wt-password.vue';
 import WtLabel from './wt-label/wt-label.vue';
 import WtLoadBar from './wt-load-bar/wt-load-bar.vue';
 import WtLoader from './wt-loader/wt-loader.vue';
 import WtLogo from './wt-logo/wt-logo.vue';
+import WtMessage from './wt-message/wt-message.vue';
 import WtNavigationBar from './wt-navigation-bar/wt-navigation-bar.vue';
 import WtNavigationMenu from './on-demand/wt-navigation-menu/components/wt-navigation-menu.vue';
 import WtNotification from './wt-notification/wt-notification.vue';
@@ -86,6 +90,10 @@ declare namespace Components {
     export { WtIcon };
     export { WtIndicator };
     export { WtInputInfo };
+    export { WtInputNumber };
+    export { WtInputText };
+    export { WtPassword };
+    export { WtMessage };
     export { WtButton };
     export { WtChip };
     export { WtConfirmDialog };
@@ -152,4 +160,4 @@ declare namespace Components {
     export { WtVidstackPlayer };
     export { WtChatEmoji };
 }
-export { WtActionBar, WtAppHeader, WtAppNavigator, WtAvatar, WtBadge, WtBadgeNew, WtBreadcrumb, WtButton, WtButtonSelect, WtChatEmoji, WtCheckbox, WtChip, WtConfirmDialog, WtContextMenu, WtCopyAction, WtDatepicker, WtDisplayChipItems, WtDivider, WtDualPanel, WtDummy, WtEmpty, WtErrorPage, WtExpansionPanel, WtFiltersPanelWrapper, WtGalleria, WtHeaderActions, WtHeadline, WtHint, WtIcon, WtIconAction, WtIconBtn, WtImage, WtIndicator, WtInput, WtInputInfo, WtIntersectionObserver, WtItemLink, WtLabel, WtLoadBar, WtLoader, WtLogo, WtNavigationBar, WtNavigationMenu, WtNotification, WtNotificationsBar, WtPageHeader, WtPageWrapper, WtPagination, WtPlayer, WtPopover, WtPopup, WtProgressBar, WtRadio, WtReplaceTransition, WtRoundedAction, WtSearchBar, WtSelect, WtSelectionPopup, WtSlider, WtStartPage, WtStatusSelect, WtStepper, WtSwitcher, WtTable, WtTableActions, WtTableColumnSelect, WtTabs, WtTagsInput, WtTextarea, WtTimeInput, WtTimepicker, WtTooltip, WtTree, WtTreeTable, WtTypeExtensionValueInput, WtVidstackPlayer };
+export { WtActionBar, WtAppHeader, WtAppNavigator, WtAvatar, WtBadge, WtBadgeNew, WtBreadcrumb, WtButton, WtButtonSelect, WtChatEmoji, WtCheckbox, WtChip, WtConfirmDialog, WtContextMenu, WtCopyAction, WtDatepicker, WtDisplayChipItems, WtDivider, WtDualPanel, WtDummy, WtEmpty, WtErrorPage, WtExpansionPanel, WtFiltersPanelWrapper, WtGalleria, WtHeaderActions, WtHeadline, WtHint, WtIcon, WtIconAction, WtIconBtn, WtImage, WtIndicator, WtInput, WtInputInfo, WtInputNumber, WtInputText, WtIntersectionObserver, WtItemLink, WtPassword, WtLabel, WtLoadBar, WtLoader, WtLogo, WtMessage, WtNavigationBar, WtNavigationMenu, WtNotification, WtNotificationsBar, WtPageHeader, WtPageWrapper, WtPagination, WtPlayer, WtPopover, WtPopup, WtProgressBar, WtRadio, WtReplaceTransition, WtRoundedAction, WtSearchBar, WtSelect, WtSelectionPopup, WtSlider, WtStartPage, WtStatusSelect, WtStepper, WtSwitcher, WtTable, WtTableActions, WtTableColumnSelect, WtTabs, WtTagsInput, WtTextarea, WtTimeInput, WtTimepicker, WtTooltip, WtTree, WtTreeTable, WtTypeExtensionValueInput, WtVidstackPlayer };

package/types/components/wt-input-number/wt-input-number.vue.d.ts

@@ -0,0 +1,59 @@
+import type { InputNumberProps } from 'primevue';
+import type { RegleFieldStatus } from '@regle/core';
+interface WtInputNumberProps extends /* @vue-ignore */ InputNumberProps {
+    label?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    required?: boolean;
+    min?: number;
+    max?: number;
+    step?: number;
+    minFractionDigits?: number;
+    maxFractionDigits?: number;
+    showButtons?: boolean;
+    v?: Record<string, unknown>;
+    regleValidation?: RegleFieldStatus<number>;
+    customValidators?: unknown[];
+}
+type __VLS_Props = WtInputNumberProps;
+type __VLS_PublicProps = __VLS_Props & {
+    modelValue?: number | null;
+};
+declare var __VLS_5: {
+    label: string;
+}, __VLS_15: {}, __VLS_39: {};
+type __VLS_Slots = {} & {
+    label?: (props: typeof __VLS_5) => any;
+} & {
+    prefix?: (props: typeof __VLS_15) => any;
+} & {
+    suffix?: (props: typeof __VLS_39) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps, {
+    focus: () => any;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: number) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: (value: number) => any;
+}>, {
+    disabled: boolean;
+    required: boolean;
+    label: string;
+    placeholder: string;
+    step: number;
+    v: Record<string, unknown>;
+    customValidators: unknown[];
+    regleValidation: RegleFieldStatus<number>;
+    max: number;
+    min: number;
+    minFractionDigits: number;
+    maxFractionDigits: number;
+    showButtons: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/types/components/wt-input-text/wt-input-text.vue.d.ts

@@ -0,0 +1,49 @@
+import type { InputTextProps } from 'primevue';
+import type { RegleFieldStatus } from '@regle/core';
+interface WtInputTextProps extends /* @vue-ignore */ InputTextProps {
+    label?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    required?: boolean;
+    preventTrim?: boolean;
+    v?: Record<string, unknown>;
+    regleValidation?: RegleFieldStatus<string>;
+    customValidators?: unknown[];
+}
+type __VLS_Props = WtInputTextProps;
+type __VLS_PublicProps = __VLS_Props & {
+    modelValue?: string;
+};
+declare var __VLS_5: {
+    label: string;
+}, __VLS_15: {}, __VLS_32: {};
+type __VLS_Slots = {} & {
+    label?: (props: typeof __VLS_5) => any;
+} & {
+    prefix?: (props: typeof __VLS_15) => any;
+} & {
+    suffix?: (props: typeof __VLS_32) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps, {
+    focus: () => any;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: (...args: any[]) => any;
+}>, {
+    disabled: boolean;
+    required: boolean;
+    label: string;
+    placeholder: string;
+    v: Record<string, unknown>;
+    customValidators: unknown[];
+    preventTrim: boolean;
+    regleValidation: RegleFieldStatus<string>;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,23 @@
+import type { MessageProps } from 'primevue';
+import { MessageColor, MessageVariant, ComponentSize } from '../../enums';
+interface WtMessageProps extends /* @vue-ignore */ MessageProps {
+    color?: MessageColor;
+    variant?: MessageVariant;
+    size?: ComponentSize;
+}
+declare var __VLS_6: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_6) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<WtMessageProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<WtMessageProps> & Readonly<{}>, {
+    size: ComponentSize;
+    color: MessageColor;
+    variant: MessageVariant;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,45 @@
+import type { PasswordProps } from 'primevue';
+import type { RegleFieldStatus } from '@regle/core';
+interface WtPasswordProps extends /* @vue-ignore */ PasswordProps {
+    label?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    required?: boolean;
+    toggleMask?: boolean;
+    v?: Record<string, unknown>;
+    regleValidation?: RegleFieldStatus<string>;
+    customValidators?: unknown[];
+}
+type __VLS_Props = WtPasswordProps;
+type __VLS_PublicProps = __VLS_Props & {
+    modelValue?: string;
+};
+declare var __VLS_5: {
+    label: string;
+};
+type __VLS_Slots = {} & {
+    label?: (props: typeof __VLS_5) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps, {
+    focus: () => any;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: (value: string) => any;
+}>, {
+    disabled: boolean;
+    required: boolean;
+    label: string;
+    placeholder: string;
+    v: Record<string, unknown>;
+    customValidators: unknown[];
+    regleValidation: RegleFieldStatus<string>;
+    toggleMask: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -98,6 +98,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
 }>, {
     download: string | boolean | Function;
     position: string;
+    closable: boolean;
     autoplay: boolean;
     loop: boolean;
     hideDuration: boolean;
@@ -105,6 +106,5 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     resetOnEnd: boolean;
     invertTime: boolean;
     resetVolume: boolean;
-    closable: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

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

@@ -35,6 +35,16 @@ interface Props extends DataTableProps {
      * 'If true, allows to reorder rows.'
      */
     rowReorder?: boolean;
+    /**
+     * @author @Oleksandr Palonnyi
+     *
+     * [WTEL-8629](https://webitel.atlassian.net/browse/WTEL-8629)
+     *
+     * Unique field name used to identify a row.
+     * Required for selection, expansion, and virtual scrolling to work correctly.
+     * The value must be stable and unique across all rows.
+     */
+    dataKey?: string;
     /**
      * 'If true, restrict sprecific row reorder.'
      */
@@ -101,6 +111,7 @@ declare const __VLS_component: import("vue").DefineComponent<Props, {}, {}, {},
     fixedActions: boolean;
     headless: boolean;
     rowReorder: boolean;
+    dataKey: string;
     isRowReorderDisabled: (row: any) => boolean;
     rowExpansion: boolean;
     rowClass: () => string;

package/types/components/wt-vidstack-player/wt-vidstack-player.vue.d.ts

@@ -40,9 +40,9 @@ declare const __VLS_component: import("vue").DefineComponent<Props, {}, {}, {},
 }>, {
     title: string;
     username: string;
+    closable: boolean;
     autoplay: boolean;
     mime: string;
-    closable: boolean;
     muted: boolean;
     static: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/types/composables/index.d.ts

@@ -7,6 +7,7 @@ export * from './useClose/useClose';
 export * from './useDestroyableSortable/useDestroyableSortable';
 export * from './useGalleriaFullscreen/useGalleriaFullscreen';
 export * from './useGalleriaMaskClick/useGalleriaMaskClick';
+export * from './useInputControl/useInputControl';
 export * from './useRepresentableAgentPauseCause/useRepresentableAgentPauseCause';
 export * from './useTableColumnDrag/useTableColumnDrag';
 export * from './useValidate/useValidate';

package/types/composables/useInputControl/useInputControl.d.ts

@@ -0,0 +1,4 @@
+export declare const useInputControl: (input: any) => {
+    focus: () => any;
+    handleKeyup: (e: any) => any;
+};