@milaboratories/uikit 2.15.37 → 2.15.38

package/src/components/PlRadio/PlRadio.vue

@@ -25,9 +25,16 @@ const model = inject<typeof standaloneModel>(radioGroupModelKey, standaloneModel
 </script>
 
 <template>
-  <label :class="$style.container">
-    <input v-model="model" :class="$style.input" type="radio" :name v-bind="props" />
-    <span :class="$style.label"><slot /></span>
+  <label :class="$style.container" data-testid="pl-radio">
+    <input
+      v-model="model"
+      :class="$style.input"
+      type="radio"
+      :name
+      data-testid="pl-radio-input"
+      v-bind="props"
+    />
+    <span :class="$style.label" data-testid="pl-radio-label"><slot /></span>
   </label>
 </template>
 

package/src/components/PlRadio/PlRadioGroup.vue

@@ -41,8 +41,8 @@ provide(radioGroupModelKey, model);
 </script>
 
 <template>
-  <fieldset :class="$style.container">
-    <legend :class="$style.label">
+  <fieldset :class="$style.container" data-testid="pl-radio-group">
+    <legend :class="$style.label" data-testid="pl-radio-group-label">
       <slot name="label" />
     </legend>
     <PlRadio
@@ -50,6 +50,7 @@ provide(radioGroupModelKey, model);
       :key="keyExtractor(option.value, i)"
       :value="option.value"
       :disabled="option.disabled"
+      data-testid="pl-radio-group-option"
     >
       {{ option.label }}
     </PlRadio>

package/src/components/PlSearchField/PlSearchField.vue

@@ -28,8 +28,8 @@ const clear = () => {
 </script>
 
 <template>
-  <div ref="root" :class="$style.component">
-    <PlIcon24 name="search" />
+  <div ref="root" :class="$style.component" data-testid="pl-search-field">
+    <PlIcon24 name="search" data-testid="pl-search-field-icon" />
     <input
       ref="input"
       v-model="model"
@@ -37,15 +37,17 @@ const clear = () => {
       :placeholder="props.placeholder || 'Find...'"
       type="text"
       spellcheck="false"
+      data-testid="pl-search-field-input"
     />
     <PlIcon16
       v-if="props.clearable && nonEmpty"
       :class="$style.clear"
       name="delete-clear"
+      data-testid="pl-search-field-clear"
       @click.stop="clear"
     />
 
-    <PlTooltip v-if="hasHelper" class="info" position="bottom">
+    <PlTooltip v-if="hasHelper" class="info" position="bottom" data-testid="pl-search-field-helper">
       <template #tooltip>
         <slot name="helper">
           {{ props.helper }}

package/src/components/PlSectionSeparator/PlSectionSeparator.vue

@@ -8,8 +8,12 @@ defineProps<{
 </script>
 
 <template>
-  <div class="pl-section-separator" :class="{ [$style.compact]: compact }">
-    <div :class="$style.content"><slot /></div>
+  <div
+    class="pl-section-separator"
+    data-testid="pl-section-separator"
+    :class="{ [$style.compact]: compact }"
+  >
+    <div data-testid="pl-section-separator-content" :class="$style.content"><slot /></div>
   </div>
 </template>
 

package/src/components/PlSidebar/PlSidebarGroup.vue

@@ -5,9 +5,9 @@ const slots = defineSlots<{
 </script>
 
 <template>
-  <div :class="$style.root">
+  <div data-testid="pl-sidebar-group" :class="$style.root">
     <template v-for="name in Object.keys(slots) as `item-${number}`[]" :key="name">
-      <div :class="$style.item">
+      <div data-testid="pl-sidebar-group-item" :class="$style.item">
         <slot :name="name" />
       </div>
     </template>

package/src/components/PlSidebar/PlSidebarItem.vue

@@ -10,19 +10,27 @@ const slots = defineSlots<{
 </script>
 
 <template>
-  <div :class="$style.root">
+  <div data-testid="pl-sidebar-item" :class="$style.root">
     <slot name="header">
-      <div v-if="slots['header-content']" :class="$style.header">
+      <div
+        v-if="slots['header-content']"
+        data-testid="pl-sidebar-item-header"
+        :class="$style.header"
+      >
         <slot name="header-content" />
       </div>
     </slot>
     <slot name="body">
-      <div v-if="slots['body-content']" :class="$style.body">
+      <div v-if="slots['body-content']" data-testid="pl-sidebar-item-body" :class="$style.body">
         <slot name="body-content" />
       </div>
     </slot>
     <slot name="footer">
-      <div v-if="slots['footer-content']" :class="$style.footer">
+      <div
+        v-if="slots['footer-content']"
+        data-testid="pl-sidebar-item-footer"
+        :class="$style.footer"
+      >
         <slot name="footer-content" />
       </div>
     </slot>

package/src/components/PlSlideModal/PlPureSlideModal.vue

@@ -45,15 +45,21 @@ useEventListener(document, "keydown", (evt: KeyboardEvent) => {
         ref="modal"
         class="pl-slide-modal"
         :style="{ width: props.width }"
+        data-testid="pl-pure-slide-modal"
         v-bind="attrs"
         @keyup.esc="emit('update:modelValue', false)"
       >
-        <PlCloseModalBtn class="close-dialog-btn" @click="emit('update:modelValue', false)" />
+        <PlCloseModalBtn
+          data-testid="pl-slide-modal-close"
+          class="close-dialog-btn"
+          @click="emit('update:modelValue', false)"
+        />
         <slot />
       </div>
     </TransitionSlidePanel>
     <div
       v-if="props.modelValue && props.shadow"
+      data-testid="pl-slide-modal-shadow"
       class="pl-slide-modal__shadow"
       @keyup.esc="emit('update:modelValue', false)"
     />

package/src/components/PlSlideModal/PlSlideModal.vue

@@ -19,18 +19,19 @@ const props = withDefaults(defineProps<Props>(), defaultProps);
 
 <template>
   <PlPureSlideModal
+    data-testid="pl-slide-modal"
     v-bind="{ ...props, ...attrs }"
     :class="[$style.root, { 'has-title': slots.title, 'has-actions': slots.actions }]"
   >
-    <div v-if="slots.title" class="pl-slide-modal__title">
+    <div v-if="slots.title" data-testid="pl-slide-modal-title" class="pl-slide-modal__title">
       <span class="pl-slide-modal__title-content">
         <slot name="title" />
       </span>
     </div>
-    <div class="pl-slide-modal__content">
+    <div data-testid="pl-slide-modal-content" class="pl-slide-modal__content">
       <slot />
     </div>
-    <div v-if="slots.actions" class="pl-slide-modal__actions">
+    <div v-if="slots.actions" data-testid="pl-slide-modal-actions" class="pl-slide-modal__actions">
       <slot name="actions" />
     </div>
   </PlPureSlideModal>

package/src/components/PlSpacer/PlSpacer.vue

@@ -1,3 +1,3 @@
 <template>
-  <div class="flex-grow-1" />
+  <div class="flex-grow-1" data-testid="pl-spacer" />
 </template>

package/src/components/PlSplash/PlSplash.vue

@@ -23,16 +23,19 @@ withDefaults(
 
 <template>
   <div
+    data-testid="pl-splash"
     :class="[
       style.splash,
       { [style.table]: type === 'table', [style.transparent]: type === 'transparent' },
     ]"
   >
-    <div v-if="loading" :class="[style.overlay]">
+    <div v-if="loading" data-testid="pl-splash-overlay" :class="[style.overlay]">
       <div>
         <!-- @TODO refactor PlLoaderCircular size property -->
-        <PlLoaderCircular size="48" />
-        <div v-if="loadingText" :class="style.text">{{ loadingText }}</div>
+        <PlLoaderCircular data-testid="pl-splash-loader" size="48" />
+        <div v-if="loadingText" data-testid="pl-splash-text" :class="style.text">
+          {{ loadingText }}
+        </div>
       </div>
     </div>
     <slot />

package/src/components/PlStatusTag/PlStatusTag.vue

@@ -17,6 +17,7 @@ const data = reactive<{ typeToText: Record<PlStatusTagType, string> }>({
 <template>
   <div
     v-if="type"
+    data-testid="pl-status-tag"
     v-bind="$attrs"
     :class="{ [type.toLocaleLowerCase()]: true }"
     class="pl-status-tag text-caps11 d-flex align-center"

package/src/components/PlTabs/PlTabs.vue

@@ -46,10 +46,14 @@ defineProps<{
 </script>
 
 <template>
-  <div :class="[style.component, { [style.disabled]: disabled, [style.topLine]: topLine }]">
+  <div
+    data-testid="pl-tabs"
+    :class="[style.component, { [style.disabled]: disabled, [style.topLine]: topLine }]"
+  >
     <Tab
       v-for="(opt, i) in options"
       :key="i"
+      data-testid="pl-tabs-tab"
       :tabindex="modelValue === opt.value || disabled || opt.disabled ? undefined : 0"
       :option="opt"
       :class="[
@@ -61,7 +65,7 @@ defineProps<{
       @click="emitModel(opt.value)"
     >
       <slot :name="opt.value" :option="opt">
-        <span>{{ opt.label }}</span>
+        <span data-testid="pl-tabs-tab-label">{{ opt.label }}</span>
       </slot>
     </Tab>
   </div>

package/src/components/PlTextArea/PlTextArea.vue

@@ -125,12 +125,22 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="ui-text-area__envelope">
-    <div ref="root" class="ui-text-area" :class="{ error: hasErrors, disabled, dashed, nonEmpty }">
-      <label v-if="label" ref="label">
-        <PlSvg v-if="required" :uri="SvgRequired" />
+  <div class="ui-text-area__envelope" data-testid="pl-text-area">
+    <div
+      ref="root"
+      class="ui-text-area"
+      :class="{ error: hasErrors, disabled, dashed, nonEmpty }"
+      data-testid="pl-text-area-control"
+    >
+      <label v-if="label" ref="label" data-testid="pl-text-area-label">
+        <PlSvg v-if="required" :uri="SvgRequired" data-testid="pl-text-area-required" />
         <span>{{ label }}</span>
-        <PlTooltip v-if="slots.tooltip" class="info" position="top">
+        <PlTooltip
+          v-if="slots.tooltip"
+          class="info"
+          position="top"
+          data-testid="pl-text-area-tooltip"
+        >
           <template #tooltip>
             <slot name="tooltip" />
           </template>
@@ -144,16 +154,19 @@ onMounted(() => {
         :disabled="disabled"
         :placeholder="placeholder ?? '...'"
         spellcheck="false"
+        data-testid="pl-text-area-input"
         @input="adjustHeight"
       />
-      <div class="ui-text-area__append">
+      <div class="ui-text-area__append" data-testid="pl-text-area-append">
         <slot name="append" />
       </div>
       <DoubleContour class="ui-text-area__contour" />
     </div>
-    <div v-if="hasErrors" class="ui-text-area__error">
+    <div v-if="hasErrors" class="ui-text-area__error" data-testid="pl-text-area-error">
       {{ displayErrors.join(" ") }}
     </div>
-    <div v-else-if="helper" class="ui-text-area__helper">{{ helper }}</div>
+    <div v-else-if="helper" class="ui-text-area__helper" data-testid="pl-text-area-helper">
+      {{ helper }}
+    </div>
   </div>
 </template>

package/src/components/PlTextField/PlTextField.vue

@@ -132,10 +132,11 @@ useLabelNotch(rootRef);
 </script>
 
 <template>
-  <div class="pl-text-field__envelope">
+  <div class="pl-text-field__envelope" data-testid="pl-text-field">
     <div
       ref="rootRef"
       class="pl-text-field"
+      data-testid="pl-text-field-control"
       :class="{
         error: hasErrors,
         disabled,
@@ -143,16 +144,21 @@ useLabelNotch(rootRef);
         nonEmpty: !isEmpty,
       }"
     >
-      <label v-if="label" ref="label">
-        <PlSvg v-if="required" :uri="SvgRequired" />
+      <label v-if="label" ref="label" data-testid="pl-text-field-label">
+        <PlSvg v-if="required" :uri="SvgRequired" data-testid="pl-text-field-required" />
         <span>{{ label }}</span>
-        <PlTooltip v-if="slots.tooltip" class="info" position="top">
+        <PlTooltip
+          v-if="slots.tooltip"
+          class="info"
+          position="top"
+          data-testid="pl-text-field-tooltip"
+        >
           <template #tooltip>
             <slot name="tooltip" />
           </template>
         </PlTooltip>
       </label>
-      <div v-if="prefix" class="pl-text-field__prefix">
+      <div v-if="prefix" class="pl-text-field__prefix" data-testid="pl-text-field-prefix">
         {{ prefix }}
       </div>
       <input
@@ -162,11 +168,17 @@ useLabelNotch(rootRef);
         :placeholder="placeholder || '...'"
         :type="fieldType"
         spellcheck="false"
+        data-testid="pl-text-field-input"
       />
-      <div class="pl-text-field__append" @click="setFocusOnInput">
+      <div
+        class="pl-text-field__append"
+        data-testid="pl-text-field-append"
+        @click="setFocusOnInput"
+      >
         <PlIcon16
           v-if="canShowClearable"
           class="pl-text-field__clearable"
+          data-testid="pl-text-field-clear"
           name="delete-clear"
           @click.stop="clear"
         />
@@ -174,15 +186,18 @@ useLabelNotch(rootRef);
           v-if="type === 'password'"
           :name="passwordIcon"
           style="cursor: pointer"
+          data-testid="pl-text-field-password-toggle"
           @click.stop="togglePasswordVisibility"
         />
         <slot name="append" />
       </div>
       <DoubleContour class="pl-text-field__contour" :group-position="groupPosition" />
     </div>
-    <div v-if="hasErrors" class="pl-text-field__error">
+    <div v-if="hasErrors" class="pl-text-field__error" data-testid="pl-text-field-error">
       {{ displayErrors.join(" ") }}
     </div>
-    <div v-else-if="helper" class="pl-text-field__helper">{{ helper }}</div>
+    <div v-else-if="helper" class="pl-text-field__helper" data-testid="pl-text-field-helper">
+      {{ helper }}
+    </div>
   </div>
 </template>

package/src/components/PlToggleSwitch/PlToggleSwitch.vue

@@ -35,13 +35,14 @@ defineProps<{
   <div
     tabindex="0"
     class="ui-toggle-switch"
+    data-testid="pl-toggle-switch"
     :class="{ active: modelValue }"
     @click="$emit('update:modelValue', !modelValue)"
     @keydown.enter="$emit('update:modelValue', !modelValue)"
   >
-    <div class="ui-toggle-switch__body">
-      <div class="ui-toggle-switch__handle" />
+    <div class="ui-toggle-switch__body" data-testid="pl-toggle-switch-body">
+      <div class="ui-toggle-switch__handle" data-testid="pl-toggle-switch-handle" />
     </div>
-    <span v-if="label" class="label">{{ label }}</span>
+    <span v-if="label" class="label" data-testid="pl-toggle-switch-label">{{ label }}</span>
   </div>
 </template>

package/src/components/PlTooltip/PlTooltip.vue

@@ -164,6 +164,7 @@ const anchorName = `--anchor-${uniqueId()}`;
   <component
     :class="$style.plTooltipAnchorWrapper"
     :is="element"
+    data-testid="pl-tooltip"
     v-bind="$attrs"
     ref="rootRef"
     @click="onOver"
@@ -175,6 +176,7 @@ const anchorName = `--anchor-${uniqueId()}`;
     <Transition name="pl-tooltip-fade">
       <Teleport v-if="$slots['tooltip'] && data.tooltipOpen" :to="container">
         <div
+          data-testid="pl-tooltip-popup"
           :class="[
             $style.plTooltipContainer,
             {
@@ -195,6 +197,7 @@ const anchorName = `--anchor-${uniqueId()}`;
           <div :class="$style.plTooltipBox" @click.stop>
             <div
               ref="tooltip"
+              data-testid="pl-tooltip-content"
               :class="[$style.plTooltipContent, position]"
               @mouseover="onOver"
               @mouseleave="onLeave"

package/src/components/Slider.vue

@@ -146,26 +146,43 @@ function handleKeyPress(e: { code: string; preventDefault(): void }) {
 </script>
 
 <template>
-  <div :class="props.disabled ? 'ui-slider__disabled' : undefined" class="ui-slider__envelope">
+  <div
+    data-testid="pl-slider"
+    :class="props.disabled ? 'ui-slider__disabled' : undefined"
+    class="ui-slider__envelope"
+  >
     <div :class="`ui-slider__mode-${props.mode}`" class="ui-slider">
       <div class="ui-slider__wrapper">
         <div class="ui-slider__label-section">
-          <label v-if="label" class="text-s">
+          <label v-if="label" data-testid="pl-slider-label" class="text-s">
             <span>{{ label }}</span>
-            <PlTooltip v-if="slots.tooltip" class="info" position="top">
+            <PlTooltip
+              v-if="slots.tooltip"
+              data-testid="pl-slider-tooltip"
+              class="info"
+              position="top"
+            >
               <template #tooltip>
                 <slot name="tooltip" />
               </template>
             </PlTooltip>
           </label>
-          <div v-if="props.mode === 'text'" class="ui-slider__value-static text-s">
+          <div
+            v-if="props.mode === 'text'"
+            data-testid="pl-slider-value"
+            class="ui-slider__value-static text-s"
+          >
             {{ realtimeVal }}{{ measure }}
           </div>
         </div>
         <div class="ui-slider__base">
           <div class="ui-slider__container">
-            <div ref="barRef" class="ui-slider__bar">
-              <div class="ui-slider__progress" :style="progressStyle" />
+            <div ref="barRef" data-testid="pl-slider-bar" class="ui-slider__bar">
+              <div
+                data-testid="pl-slider-progress"
+                class="ui-slider__progress"
+                :style="progressStyle"
+              />
             </div>
           </div>
           <div class="ui-slider__container ui-slider__container-thumb">
@@ -173,12 +190,14 @@ function handleKeyPress(e: { code: string; preventDefault(): void }) {
               <div
                 v-for="(item, index) in breakpointsRef"
                 :key="index"
+                data-testid="pl-slider-step"
                 :style="{ right: `${item}%` }"
                 class="ui-slider__thumb-step"
               />
             </template>
             <div
               ref="thumbRef"
+              data-testid="pl-slider-thumb"
               tabindex="0"
               class="ui-slider__thumb ui-slider__thumb-active"
               :style="thumbStyle"
@@ -193,6 +212,7 @@ function handleKeyPress(e: { code: string; preventDefault(): void }) {
       <div class="ui-slider__input-wrapper d-flex">
         <input
           v-if="props.mode === 'input'"
+          data-testid="pl-slider-input"
           :value="realtimeVal"
           class="ui-slider__value text-s"
           @change="updateModelValue($event)"
@@ -202,7 +222,7 @@ function handleKeyPress(e: { code: string; preventDefault(): void }) {
     <!-- <div v-if="props.helper" class="ui-slider__helper">
       {{ props.helper }}
     </div> -->
-    <div v-if="error" class="ui-slider__error">
+    <div v-if="error" data-testid="pl-slider-error" class="ui-slider__error">
       {{ error }}
     </div>
   </div>

package/src/components/SliderRange.vue

@@ -193,26 +193,43 @@ function handleKeyPress(e: { code: string; preventDefault(): void }, index: numb
 
 <template>
   <!-- {{ leftDelta }} {{ rightDelta }} -->
-  <div :class="props.disabled ? 'ui-slider__disabled' : undefined" class="ui-slider__envelope">
+  <div
+    data-testid="pl-slider-range"
+    :class="props.disabled ? 'ui-slider__disabled' : undefined"
+    class="ui-slider__envelope"
+  >
     <div :class="`ui-slider__mode-${props.mode}`" class="ui-slider">
       <div class="ui-slider__wrapper">
         <div class="ui-slider__label-section">
-          <label v-if="label" class="text-s">
+          <label v-if="label" data-testid="pl-slider-range-label" class="text-s">
             <span>{{ label }}</span>
-            <PlTooltip v-if="slots.tooltip" class="info" position="top">
+            <PlTooltip
+              v-if="slots.tooltip"
+              data-testid="pl-slider-range-tooltip"
+              class="info"
+              position="top"
+            >
               <template #tooltip>
                 <slot name="tooltip" />
               </template>
             </PlTooltip>
           </label>
-          <div v-if="props.mode === 'text'" class="ui-slider__value-static text-s">
+          <div
+            v-if="props.mode === 'text'"
+            data-testid="pl-slider-range-value"
+            class="ui-slider__value-static text-s"
+          >
             {{ textModelValue }}
           </div>
         </div>
         <div class="ui-slider__base">
           <div class="ui-slider__container">
-            <div ref="barRef" class="ui-slider__bar">
-              <div class="ui-slider__progress" :style="progressStyle" />
+            <div ref="barRef" data-testid="pl-slider-range-bar" class="ui-slider__bar">
+              <div
+                data-testid="pl-slider-range-progress"
+                class="ui-slider__progress"
+                :style="progressStyle"
+              />
             </div>
           </div>
           <div class="ui-slider__container ui-slider__container-thumb">
@@ -220,12 +237,14 @@ function handleKeyPress(e: { code: string; preventDefault(): void }, index: numb
               <div
                 v-for="(item, index) in breakpointsRef"
                 :key="index"
+                data-testid="pl-slider-range-step"
                 :style="{ right: `${item}%` }"
                 class="ui-slider__thumb-step"
               />
             </template>
             <div
               ref="thumbRef1"
+              data-testid="pl-slider-range-thumb"
               :style="thumbStyle1"
               class="ui-slider__thumb"
               tabindex="0"
@@ -235,6 +254,7 @@ function handleKeyPress(e: { code: string; preventDefault(): void }, index: numb
             </div>
             <div
               ref="thumbRef2"
+              data-testid="pl-slider-range-thumb"
               :style="thumbStyle2"
               class="ui-slider__thumb"
               tabindex="0"
@@ -250,6 +270,7 @@ function handleKeyPress(e: { code: string; preventDefault(): void }, index: numb
         <InputRange
           v-if="props.mode === 'input'"
           v-model="inputRange"
+          data-testid="pl-slider-range-input"
           class="ui-focused-border"
           @change="setModelValue"
         />
@@ -258,7 +279,7 @@ function handleKeyPress(e: { code: string; preventDefault(): void }, index: numb
     <!-- <div v-if="helper" class="ui-slider__helper">
       {{ helper }}
     </div> -->
-    <div v-if="error" class="ui-slider__error">
+    <div v-if="error" data-testid="pl-slider-range-error" class="ui-slider__error">
       {{ error }}
     </div>
   </div>