@milaboratories/uikit 2.15.36 → 2.15.38

package/src/components/SliderRangeTriple.vue

@@ -244,15 +244,21 @@ onMounted(() => {
 
 <template>
   <div
+    data-testid="pl-slider-range-triple"
     :class="props.disabled ? 'ui-slider__disabled' : undefined"
     class="ui-slider__envelope ui-slider__triple"
   >
     <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-triple-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-triple-tooltip"
+              class="info"
+              position="top"
+            >
               <template #tooltip>
                 <slot name="tooltip" />
               </template>
@@ -261,8 +267,12 @@ onMounted(() => {
         </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-triple-bar" class="ui-slider__bar">
+              <div
+                data-testid="pl-slider-range-triple-progress"
+                class="ui-slider__progress"
+                :style="progressStyle"
+              />
             </div>
           </div>
           <div class="ui-slider__container ui-slider__container-thumb">
@@ -270,12 +280,14 @@ onMounted(() => {
               <div
                 v-for="(item, index) in breakpointsRef"
                 :key="index"
+                data-testid="pl-slider-range-triple-step"
                 :style="{ right: `${item}%` }"
                 class="ui-slider__thumb-step"
               />
             </template>
             <div
               ref="thumbRef1"
+              data-testid="pl-slider-range-triple-thumb"
               :style="thumbStyle1"
               :data-percent="props.modelValue[0] + '%'"
               class="ui-slider__thumb ui-slider__triple-thumb"
@@ -287,6 +299,7 @@ onMounted(() => {
             </div>
             <div
               ref="thumbRef2"
+              data-testid="pl-slider-range-triple-thumb"
               :style="thumbStyle2"
               :data-percent="props.modelValue[1] + '%'"
               class="ui-slider__thumb ui-slider__triple-thumb"
@@ -298,6 +311,7 @@ onMounted(() => {
             </div>
             <div
               ref="thumbRef3"
+              data-testid="pl-slider-range-triple-thumb"
               :style="thumbStyle3"
               :data-percent="props.modelValue[2] + '%'"
               class="ui-slider__thumb ui-slider__triple-thumb"
@@ -319,7 +333,7 @@ onMounted(() => {
     <!-- <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-triple-error" class="ui-slider__error">
       {{ error }}
     </div>
   </div>

package/src/components/TabItem.vue

@@ -28,8 +28,8 @@ const classes = computed<string>(() => {
 });
 </script>
 <template>
-  <div :class="classes" class="dropdown-tab-item">
-    <div class="dropdown-tab-item__title text-caps13">
+  <div data-testid="pl-tab-item" :class="classes" class="dropdown-tab-item">
+    <div data-testid="pl-tab-item-title" class="dropdown-tab-item__title text-caps13">
       {{ label }}
     </div>
   </div>

package/src/components/contextMenu/Menu.vue

@@ -14,9 +14,14 @@ const onClickOption = (opt: ContextOption) => {
 </script>
 
 <template>
-  <div class="context-menu">
-    <div v-for="(opt, i) in options" :key="i" @click.stop="onClickOption(opt)">
-      <span>{{ opt.text }}</span>
+  <div class="context-menu" data-testid="pl-context-menu">
+    <div
+      v-for="(opt, i) in options"
+      :key="i"
+      data-testid="pl-context-menu-item"
+      @click.stop="onClickOption(opt)"
+    >
+      <span data-testid="pl-context-menu-item-text">{{ opt.text }}</span>
     </div>
   </div>
 </template>

package/src/layout/PlBlockPage/PlBlockPage.vue

@@ -53,27 +53,56 @@ watchEffect(() => {
 </script>
 
 <template>
-  <div class="pl-layout-component pl-block-page" :class="{ noBodyGutters: props.noBodyGutters }">
-    <div v-if="slots.title || props.title" :class="styles.header">
+  <div
+    class="pl-layout-component pl-block-page"
+    data-testid="pl-block-page"
+    :class="{ noBodyGutters: props.noBodyGutters }"
+  >
+    <div
+      v-if="slots.title || props.title"
+      data-testid="pl-block-page-header"
+      :class="styles.header"
+    >
       <div class="pl-block-page__title">
         <div class="pl-block-page__title__default">
-          <span v-if="slots.title"><slot name="title" /></span>
-          <span v-else>{{ props.title }}</span>
+          <span v-if="slots.title" data-testid="pl-block-page-title"><slot name="title" /></span>
+          <span v-else data-testid="pl-block-page-title">{{ props.title }}</span>
           <slot name="after-title" />
         </div>
-        <div class="pl-block-page__title__append">
-          <div ref="teleportTarget" class="pl-block-page__title__append__teleport" />
+        <div class="pl-block-page__title__append" data-testid="pl-block-page-append">
+          <div
+            ref="teleportTarget"
+            class="pl-block-page__title__append__teleport"
+            data-testid="pl-block-page-append-teleport"
+          />
           <slot name="append" />
         </div>
       </div>
-      <div v-if="subtitle !== undefined" :class="styles.subtitle">
-        <input v-model.lazy.trim="subtitle" :placeholder="props.subtitlePlaceholder" />
-        <PlIcon24 :class="styles.editIcon" name="edit" color="var(--ic-02)" />
+      <div
+        v-if="subtitle !== undefined"
+        data-testid="pl-block-page-subtitle"
+        :class="styles.subtitle"
+      >
+        <input
+          v-model.lazy.trim="subtitle"
+          data-testid="pl-block-page-subtitle-input"
+          :placeholder="props.subtitlePlaceholder"
+        />
+        <PlIcon24
+          data-testid="pl-block-page-subtitle-edit-icon"
+          :class="styles.editIcon"
+          name="edit"
+          color="var(--ic-02)"
+        />
       </div>
     </div>
     <div v-else />
-    <div class="pl-block-page__body">
-      <PlPlaceholder v-show="loadingPlaceholder" v-bind="loadingPlaceholder" />
+    <div class="pl-block-page__body" data-testid="pl-block-page-body">
+      <PlPlaceholder
+        v-show="loadingPlaceholder"
+        data-testid="pl-block-page-loading-placeholder"
+        v-bind="loadingPlaceholder"
+      />
       <div :style="{ display: loadingPlaceholder ? 'none' : 'contents' }">
         <slot />
       </div>

package/src/layout/PlContainer/PlContainer.vue

@@ -35,6 +35,7 @@ const style = computed(() => ({
     :loading="loading"
     :loading-text="loadingText"
     class="pl-container pl-layout-component"
+    data-testid="pl-container"
     :style="style"
   >
     <slot />

package/src/layout/PlGrid/PlGrid.vue

@@ -21,7 +21,7 @@ const style = computed(() => {
 </script>
 
 <template>
-  <div class="pl-layout-component pl-grid" :style="style">
+  <div class="pl-layout-component pl-grid" data-testid="pl-grid" :style="style">
     <slot />
   </div>
 </template>

package/src/layout/PlPlaceholder/PlPlaceholder.vue

@@ -27,8 +27,9 @@ const styles = useCssModule();
 </script>
 
 <template>
-  <div :class="styles.root">
+  <div data-testid="pl-placeholder" :class="styles.root">
     <div
+      data-testid="pl-placeholder-background"
       :class="[
         styles.background,
         {
@@ -37,15 +38,26 @@ const styles = useCssModule();
         },
       ]"
     />
-    <div :class="styles.content">
-      <PlLoaderLogo :size="64" color="var(--color-div-grey)" />
-      <div v-if="props.title || props.subtitle" :class="styles.text">
-        <div v-if="props.title" :class="styles.title">{{ props.title }}</div>
-        <div v-if="props.subtitle" :class="styles.subtitle">
+    <div data-testid="pl-placeholder-content" :class="styles.content">
+      <PlLoaderLogo data-testid="pl-placeholder-loader" :size="64" color="var(--color-div-grey)" />
+      <div
+        v-if="props.title || props.subtitle"
+        data-testid="pl-placeholder-text"
+        :class="styles.text"
+      >
+        <div v-if="props.title" data-testid="pl-placeholder-title" :class="styles.title">
+          {{ props.title }}
+        </div>
+        <div v-if="props.subtitle" data-testid="pl-placeholder-subtitle" :class="styles.subtitle">
           <template v-if="Array.isArray(props.subtitle)">
-            <span v-for="(item, key) of props.subtitle" :key>{{ item }}</span>
+            <span
+              v-for="(item, key) of props.subtitle"
+              :key
+              data-testid="pl-placeholder-subtitle-item"
+              >{{ item }}</span
+            >
           </template>
-          <span v-else>{{ props.subtitle }}</span>
+          <span v-else data-testid="pl-placeholder-subtitle-item">{{ props.subtitle }}</span>
         </div>
       </div>
     </div>

package/src/layout/PlRow/PlRow.vue

@@ -16,7 +16,11 @@ defineProps<{
 </script>
 
 <template>
-  <div class="pl-layout-component pl-row" :class="{ wrap, 'align-center': alignCenter }">
+  <div
+    class="pl-layout-component pl-row"
+    data-testid="pl-row"
+    :class="{ wrap, 'align-center': alignCenter }"
+  >
     <slot />
   </div>
 </template>

package/src/layout/PlSpacer/PlSpacer.vue

@@ -10,5 +10,5 @@ export default {
 </script>
 
 <template>
-  <div class="pl-layout-component" style="flex-grow: 1" />
+  <div class="pl-layout-component" data-testid="pl-spacer" style="flex-grow: 1" />
 </template>