@milaboratories/uikit 2.15.37 → 2.15.38

package/src/components/PlConfirmDialog.vue

@@ -37,7 +37,12 @@ const handleCancel = () => {
 </script>
 
 <template>
-  <PlDialogModal v-model="props.opened" :closable="false" @click.stop>
+  <PlDialogModal
+    data-testid="pl-confirm-dialog"
+    v-model="props.opened"
+    :closable="false"
+    @click.stop
+  >
     <template #title>
       {{ title }}
     </template>
@@ -45,10 +50,10 @@ const handleCancel = () => {
       {{ message }}
     </template>
     <template #actions>
-      <PlBtnPrimary @click.stop="handleConfirm">
+      <PlBtnPrimary data-testid="pl-confirm-dialog-confirm" @click.stop="handleConfirm">
         {{ props.confirmLabel }}
       </PlBtnPrimary>
-      <PlBtnSecondary @click.stop="handleCancel">
+      <PlBtnSecondary data-testid="pl-confirm-dialog-cancel" @click.stop="handleCancel">
         {{ props.cancelLabel }}
       </PlBtnSecondary>
     </template>

package/src/components/PlDialogModal/PlDialogModal.vue

@@ -135,8 +135,14 @@ useEventListener(document.body, "keyup", (ev) => {
 <template>
   <Teleport to="body">
     <Transition name="dialog">
-      <div v-if="modelValue" class="pl-dialog-modal__shadow" @click="onClickShadow">
+      <div
+        v-if="modelValue"
+        data-testid="pl-dialog-modal-shadow"
+        class="pl-dialog-modal__shadow"
+        @click="onClickShadow"
+      >
         <div
+          data-testid="pl-dialog-modal"
           v-bind="$attrs"
           ref="modal"
           class="pl-dialog-modal"
@@ -145,13 +151,19 @@ useEventListener(document.body, "keyup", (ev) => {
         >
           <PlCloseModalBtn
             v-if="closable"
+            data-testid="pl-dialog-modal-close"
             class="close-modal-btn"
             @click.stop="emit('update:modelValue', false)"
           />
-          <div v-if="slots.title" class="pl-dialog-modal__title">
+          <div
+            v-if="slots.title"
+            data-testid="pl-dialog-modal-title"
+            class="pl-dialog-modal__title"
+          >
             <slot name="title" />
           </div>
           <div
+            data-testid="pl-dialog-modal-content"
             class="pl-dialog-modal__content"
             :class="{
               'no-content-gutters': noContentGutters,
@@ -162,6 +174,7 @@ useEventListener(document.body, "keyup", (ev) => {
           </div>
           <div
             v-if="slots.actions"
+            data-testid="pl-dialog-modal-actions"
             class="pl-dialog-modal__actions"
             :class="{ 'has-top-border': actionsHasTopBorder }"
           >

package/src/components/PlDropdown/OptionList.vue

@@ -42,6 +42,7 @@ defineExpose({
     ref="overlay"
     :root="rootRef"
     class="pl-dropdown__options"
+    data-testid="pl-dropdown-options"
     tabindex="-1"
     :gap="3"
   >
@@ -49,8 +50,9 @@ defineExpose({
       v-for="[group, items] in groups.entries()"
       :key="group"
       :class="{ 'group-container': hasGroups }"
+      data-testid="pl-dropdown-option-group"
     >
-      <TextLabel>{{ group }}</TextLabel>
+      <TextLabel data-testid="pl-dropdown-option-group-label">{{ group }}</TextLabel>
       <div>
         <DropdownListItem
           v-for="(item, index) in items"
@@ -59,11 +61,16 @@ defineExpose({
           :is-selected="item.isSelected"
           :is-hovered="item.isActive"
           :size="optionSize"
+          data-testid="pl-dropdown-option"
           @click.stop="selectOption(item.value)"
         />
       </div>
     </div>
-    <div v-if="rest.length" :class="{ 'group-container': hasGroups }">
+    <div
+      v-if="rest.length"
+      :class="{ 'group-container': hasGroups }"
+      data-testid="pl-dropdown-option-group"
+    >
       <TextLabel />
       <div>
         <DropdownListItem
@@ -73,10 +80,13 @@ defineExpose({
           :is-selected="item.isSelected"
           :is-hovered="item.isActive"
           :size="optionSize"
+          data-testid="pl-dropdown-option"
           @click.stop="selectOption(item.value)"
         />
       </div>
     </div>
-    <div v-if="!optionsLength" class="nothing-found">Nothing found</div>
+    <div v-if="!optionsLength" class="nothing-found" data-testid="pl-dropdown-options-empty">
+      Nothing found
+    </div>
   </DropdownOverlay>
 </template>

package/src/components/PlDropdown/PlDropdown.vue

@@ -356,11 +356,12 @@ watchPostEffect(() => {
 </script>
 
 <template>
-  <div class="pl-dropdown__envelope" @click="setFocusOnInput">
+  <div class="pl-dropdown__envelope" @click="setFocusOnInput" data-testid="pl-dropdown">
     <div
       ref="rootRef"
       :tabindex="tabindex"
       class="pl-dropdown"
+      data-testid="pl-dropdown-control"
       :class="{ open: data.open, error: error || errorStatus, disabled: isDisabled }"
       @keydown="handleKeydown"
       @focusout="onFocusOut"
@@ -376,11 +377,16 @@ watchPostEffect(() => {
             :placeholder="computedPlaceholder"
             spellcheck="false"
             autocomplete="chrome-off"
+            data-testid="pl-dropdown-input"
             @focus="onInputFocus"
           />
 
-          <div v-if="!data.open" class="input-value">
-            <LongText v-if="isMissing" class="input-value--missing">
+          <div v-if="!data.open" class="input-value" data-testid="pl-dropdown-value">
+            <LongText
+              v-if="isMissing"
+              class="input-value--missing"
+              data-testid="pl-dropdown-value-missing"
+            >
               {{ missingValueLabel }}
             </LongText>
             <LongText v-else-if="textValue !== undefined">
@@ -389,25 +395,35 @@ watchPostEffect(() => {
           </div>
 
           <div class="pl-dropdown__controls">
-            <PlIcon24 v-if="showLoadingSpinner" name="loading" />
+            <PlIcon24 v-if="showLoadingSpinner" name="loading" data-testid="pl-dropdown-loading" />
             <PlIcon16
               v-if="clearable && hasValue"
               class="clear"
+              data-testid="pl-dropdown-clear"
               name="delete-clear"
               @click.stop="clear"
             />
             <slot name="append" />
-            <div class="pl-dropdown__arrow-wrapper" @click.stop="toggleOpen">
+            <div
+              class="pl-dropdown__arrow-wrapper"
+              data-testid="pl-dropdown-arrow"
+              @click.stop="toggleOpen"
+            >
               <PlIcon24 v-if="arrowIconLarge" :name="arrowIconLarge" class="arrow-icon" />
               <PlIcon16 v-else-if="arrowIcon" :name="arrowIcon" class="arrow-icon" />
               <PlIcon16 v-else name="chevron-down" class="arrow-icon arrow-icon-default" />
             </div>
           </div>
         </div>
-        <label v-if="label">
-          <PlSvg v-if="required" :uri="SvgRequired" />
+        <label v-if="label" data-testid="pl-dropdown-label">
+          <PlSvg v-if="required" :uri="SvgRequired" data-testid="pl-dropdown-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-dropdown-tooltip"
+          >
             <template #tooltip>
               <slot name="tooltip" />
             </template>
@@ -425,10 +441,18 @@ watchPostEffect(() => {
         <DoubleContour class="pl-dropdown__contour" :group-position="groupPosition" />
       </div>
     </div>
-    <div v-if="computedError" class="pl-dropdown__error">{{ computedError }}</div>
-    <div v-else-if="showLoadingSpinner && loadingOptionsHelper" class="pl-dropdown__helper">
+    <div v-if="computedError" class="pl-dropdown__error" data-testid="pl-dropdown-error">
+      {{ computedError }}
+    </div>
+    <div
+      v-else-if="showLoadingSpinner && loadingOptionsHelper"
+      class="pl-dropdown__helper"
+      data-testid="pl-dropdown-helper"
+    >
       {{ loadingOptionsHelper }}
     </div>
-    <div v-else-if="helper" class="pl-dropdown__helper">{{ helper }}</div>
+    <div v-else-if="helper" class="pl-dropdown__helper" data-testid="pl-dropdown-helper">
+      {{ helper }}
+    </div>
   </div>
 </template>

package/src/components/PlDropdownLegacy/PlDropdownLegacy.vue

@@ -317,11 +317,12 @@ watchPostEffect(() => {
 </script>
 
 <template>
-  <div class="ui-dropdown__envelope">
+  <div class="ui-dropdown__envelope" data-testid="pl-dropdown-legacy">
     <div
       ref="root"
       :tabindex="tabindex"
       class="ui-dropdown"
+      data-testid="pl-dropdown-legacy-control"
       :class="{ open: data.open, error, disabled: isDisabled }"
       @keydown="handleKeydown"
       @focusout="onFocusOut"
@@ -337,18 +338,24 @@ watchPostEffect(() => {
             :placeholder="computedPlaceholder"
             spellcheck="false"
             autocomplete="chrome-off"
+            data-testid="pl-dropdown-legacy-input"
             @focus="onInputFocus"
           />
 
-          <div v-if="!data.open" @click="setFocusOnInput">
+          <div v-if="!data.open" data-testid="pl-dropdown-legacy-value" @click="setFocusOnInput">
             <LongText class="input-value"> {{ textValue }} </LongText>
           </div>
 
           <div class="ui-dropdown__controls">
-            <PlMaskIcon24 v-if="isLoadingOptions" name="loading" />
+            <PlMaskIcon24
+              v-if="isLoadingOptions"
+              name="loading"
+              data-testid="pl-dropdown-legacy-loading"
+            />
             <PlIcon16
               v-if="clearable && hasValue"
               class="clear"
+              data-testid="pl-dropdown-legacy-clear"
               name="delete-clear"
               @click.stop="clear"
             />
@@ -356,28 +363,45 @@ watchPostEffect(() => {
             <div
               v-if="arrowIconLarge"
               class="arrow-icon"
+              data-testid="pl-dropdown-legacy-arrow"
               :class="[`icon-24 ${arrowIconLarge}`]"
               @click.stop="toggleOpen"
             />
             <div
               v-else-if="arrowIcon"
               class="arrow-icon"
+              data-testid="pl-dropdown-legacy-arrow"
               :class="[`icon-16 ${arrowIcon}`]"
               @click.stop="toggleOpen"
             />
-            <div v-else class="arrow-icon arrow-icon-default" @click.stop="toggleOpen" />
+            <div
+              v-else
+              class="arrow-icon arrow-icon-default"
+              data-testid="pl-dropdown-legacy-arrow"
+              @click.stop="toggleOpen"
+            />
           </div>
         </div>
-        <label v-if="label">
-          <PlSvg v-if="required" :uri="SvgRequired" />
+        <label v-if="label" data-testid="pl-dropdown-legacy-label">
+          <PlSvg v-if="required" :uri="SvgRequired" data-testid="pl-dropdown-legacy-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-dropdown-legacy-tooltip"
+          >
             <template #tooltip>
               <slot name="tooltip" />
             </template>
           </PlTooltip>
         </label>
-        <div v-if="data.open" ref="list" class="ui-dropdown__options">
+        <div
+          v-if="data.open"
+          ref="list"
+          class="ui-dropdown__options"
+          data-testid="pl-dropdown-legacy-options"
+        >
           <DropdownListItem
             v-for="(item, index) in filteredRef"
             :key="index"
@@ -385,17 +409,32 @@ watchPostEffect(() => {
             :is-selected="item.isSelected"
             :is-hovered="item.isActive"
             :size="optionSize"
+            data-testid="pl-dropdown-legacy-option"
             @click.stop="selectOption(item.value)"
           />
-          <div v-if="!filteredRef.length" class="nothing-found">Nothing found</div>
+          <div
+            v-if="!filteredRef.length"
+            class="nothing-found"
+            data-testid="pl-dropdown-legacy-options-empty"
+          >
+            Nothing found
+          </div>
         </div>
         <DoubleContour class="ui-dropdown__contour" />
       </div>
     </div>
-    <div v-if="computedError" class="ui-dropdown__error">{{ computedError }}</div>
-    <div v-else-if="isLoadingOptions && loadingOptionsHelper" class="ui-dropdown__helper">
+    <div v-if="computedError" class="ui-dropdown__error" data-testid="pl-dropdown-legacy-error">
+      {{ computedError }}
+    </div>
+    <div
+      v-else-if="isLoadingOptions && loadingOptionsHelper"
+      class="ui-dropdown__helper"
+      data-testid="pl-dropdown-legacy-helper"
+    >
       {{ loadingOptionsHelper }}
     </div>
-    <div v-else-if="helper" class="ui-dropdown__helper">{{ helper }}</div>
+    <div v-else-if="helper" class="ui-dropdown__helper" data-testid="pl-dropdown-legacy-helper">
+      {{ helper }}
+    </div>
   </div>
 </template>

package/src/components/PlDropdownLine/PlDropdownLine.vue

@@ -262,11 +262,14 @@ useElementPosition(container, (pos) => {
     tabindex="0"
     :class="classes"
     class="pl-line-dropdown uc-pointer"
+    data-testid="pl-dropdown-line"
     @keydown="handleKeydown"
     @focusout="onFocusOut"
     @click="toggleList"
   >
-    <div class="pl-line-dropdown__prefix">{{ props?.prefix }}</div>
+    <div class="pl-line-dropdown__prefix" data-testid="pl-dropdown-line-prefix">
+      {{ props?.prefix }}
+    </div>
 
     <ResizableInput
       v-model="inputModel"
@@ -276,8 +279,17 @@ useElementPosition(container, (pos) => {
     />
 
     <div class="pl-line-dropdown__icon-wrapper">
-      <div v-show="!canShowClearBtn" class="pl-line-dropdown__icon" />
-      <div v-show="canShowClearBtn" class="pl-line-dropdown__icon-clear" @click="clearModel" />
+      <div
+        v-show="!canShowClearBtn"
+        class="pl-line-dropdown__icon"
+        data-testid="pl-dropdown-line-arrow"
+      />
+      <div
+        v-show="canShowClearBtn"
+        class="pl-line-dropdown__icon-clear"
+        data-testid="pl-dropdown-line-clear"
+        @click="clearModel"
+      />
     </div>
     <Teleport v-if="data.isOpen" to="body">
       <div
@@ -286,6 +298,7 @@ useElementPosition(container, (pos) => {
         :style="optionsStyle"
         tabindex="-1"
         class="pl-line-dropdown__items"
+        data-testid="pl-dropdown-line-options"
         @focusout="onFocusOut"
         @click.stop
       >
@@ -304,12 +317,17 @@ useElementPosition(container, (pos) => {
               :is-selected="isItemSelected(item)"
               :is-hovered="data.activeOption == index"
               size="medium"
+              data-testid="pl-dropdown-line-option"
               @click.stop="selectItem(item)"
             />
           </slot>
         </template>
 
-        <div v-if="options.length === 0" class="pl-line-dropdown__no-item">
+        <div
+          v-if="options.length === 0"
+          class="pl-line-dropdown__no-item"
+          data-testid="pl-dropdown-line-options-empty"
+        >
           <div class="pl-line-dropdown__no-item-title text-s">
             Didn't find anything that matched
           </div>
@@ -321,6 +339,7 @@ useElementPosition(container, (pos) => {
         :style="optionsStyle"
         tabindex="-1"
         class="pl-line-dropdown__items-tabs"
+        data-testid="pl-dropdown-line-options"
         @focusout="onFocusOut"
         @click.stop
       >
@@ -336,11 +355,16 @@ useElementPosition(container, (pos) => {
               :option="item"
               :is-selected="isItemSelected(item)"
               :is-hovered="data.activeOption == index"
+              data-testid="pl-dropdown-line-option"
               @click.stop="selectItem(item)"
             />
           </slot>
         </template>
-        <div v-if="options.length === 0" class="pl-line-dropdown__no-item">
+        <div
+          v-if="options.length === 0"
+          class="pl-line-dropdown__no-item"
+          data-testid="pl-dropdown-line-options-empty"
+        >
           <div class="pl-line-dropdown__no-item-title text-s">
             Didn't find anything that matched
           </div>

package/src/components/PlDropdownLine/ResizableInput.vue

@@ -36,9 +36,10 @@ function handleInput(event: Event) {
 </script>
 
 <template>
-  <div class="resizable-input">
+  <div class="resizable-input" data-testid="pl-resizable-input">
     <span :style="styles" class="resizable-input__size-span">{{ text }}</span>
     <input
+      data-testid="pl-dropdown-line-input"
       v-bind="$attrs"
       :placeholder="placeholder"
       :value="props.modelValue"

package/src/components/PlDropdownMulti/PlDropdownMulti.vue

@@ -292,11 +292,12 @@ watchPostEffect(() => {
 </script>
 
 <template>
-  <div class="pl-dropdown-multi__envelope" @click="setFocusOnInput">
+  <div class="pl-dropdown-multi__envelope" @click="setFocusOnInput" data-testid="pl-dropdown-multi">
     <div
       ref="rootRef"
       :tabindex="tabindex"
       class="pl-dropdown-multi"
+      data-testid="pl-dropdown-multi-control"
       :class="{ open: data.open, error, disabled: isDisabled }"
       @keydown="handleKeydown"
       @focusout="onFocusOut"
@@ -312,14 +313,16 @@ watchPostEffect(() => {
             :placeholder="placeholderRef"
             spellcheck="false"
             autocomplete="chrome-off"
+            data-testid="pl-dropdown-multi-input"
             @focus="data.open = true"
           />
-          <div v-if="!data.open" class="chips-container">
+          <div v-if="!data.open" class="chips-container" data-testid="pl-dropdown-multi-chips">
             <PlChip
               v-for="(opt, i) in selectedOptionsRef"
               :key="i"
               :class="{ 'pl-dropdown-multi__chip--missing': opt.isMissing }"
               closeable
+              data-testid="pl-dropdown-multi-chip"
               small
               @click.stop="data.open = true"
               @close="unselectOption(opt.value)"
@@ -329,17 +332,30 @@ watchPostEffect(() => {
           </div>
 
           <div class="pl-dropdown-multi__controls">
-            <PlIcon24 v-if="showLoadingSpinner" name="loading" />
+            <PlIcon24
+              v-if="showLoadingSpinner"
+              name="loading"
+              data-testid="pl-dropdown-multi-loading"
+            />
             <slot name="append" />
-            <div class="pl-dropdown-multi__arrow-wrapper" @click.stop="toggleModel">
+            <div
+              class="pl-dropdown-multi__arrow-wrapper"
+              data-testid="pl-dropdown-multi-arrow"
+              @click.stop="toggleModel"
+            >
               <div class="arrow-icon arrow-icon-default" />
             </div>
           </div>
         </div>
-        <label v-if="label">
-          <PlSvg v-if="required" :uri="SvgRequired" />
+        <label v-if="label" data-testid="pl-dropdown-multi-label">
+          <PlSvg v-if="required" :uri="SvgRequired" data-testid="pl-dropdown-multi-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-dropdown-multi-tooltip"
+          >
             <template #tooltip>
               <slot name="tooltip" />
             </template>
@@ -350,16 +366,21 @@ watchPostEffect(() => {
           ref="overlay"
           :root="rootRef"
           class="pl-dropdown-multi__options"
+          data-testid="pl-dropdown-multi-options"
           :gap="5"
           tabindex="-1"
           @focusout="onFocusOut"
         >
-          <div class="pl-dropdown-multi__open-chips-container">
+          <div
+            class="pl-dropdown-multi__open-chips-container"
+            data-testid="pl-dropdown-multi-chips"
+          >
             <PlChip
               v-for="(opt, i) in selectedOptionsRef"
               :key="i"
               :class="{ 'pl-dropdown-multi__chip--missing': opt.isMissing }"
               closeable
+              data-testid="pl-dropdown-multi-chip"
               small
               @close="unselectOption(opt.value)"
             >
@@ -375,14 +396,29 @@ watchPostEffect(() => {
             :is-hovered="data.activeOption == index"
             size="medium"
             use-checkbox
+            data-testid="pl-dropdown-multi-option"
             @click.stop="selectOption(item.value)"
           />
-          <div v-if="!filteredOptionsRef.length" class="nothing-found">Nothing found</div>
+          <div
+            v-if="!filteredOptionsRef.length"
+            class="nothing-found"
+            data-testid="pl-dropdown-multi-options-empty"
+          >
+            Nothing found
+          </div>
         </DropdownOverlay>
         <DoubleContour class="pl-dropdown-multi__contour" :group-position="groupPosition" />
       </div>
     </div>
-    <div v-if="error" class="pl-dropdown-multi__error">{{ getErrorMessage(error) }}</div>
-    <div v-else-if="helper" class="pl-dropdown-multi__helper">{{ helper }}</div>
+    <div v-if="error" class="pl-dropdown-multi__error" data-testid="pl-dropdown-multi-error">
+      {{ getErrorMessage(error) }}
+    </div>
+    <div
+      v-else-if="helper"
+      class="pl-dropdown-multi__helper"
+      data-testid="pl-dropdown-multi-helper"
+    >
+      {{ helper }}
+    </div>
   </div>
 </template>

package/src/components/PlDropdownMultiRef/PlDropdownMultiRef.vue

@@ -76,6 +76,7 @@ const options = computed(() =>
 
 <template>
   <PlDropdownMulti
+    data-testid="pl-dropdown-multi-ref"
     v-bind="props"
     :options="options"
     @update:model-value="$emit('update:modelValue', $event)"

package/src/components/PlDropdownRef/PlDropdownRef.vue

@@ -105,6 +105,7 @@ const options = computed(() =>
 
 <template>
   <PlDropdown
+    data-testid="pl-dropdown-ref"
     v-bind="props"
     :options="options"
     :loading-options-helper="loadingOptionsHelper"

package/src/components/PlEditableTitle/PlEditableTitle.vue

@@ -98,18 +98,26 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="pl-editable-title" :class="style.component" :style="computedStyle">
+  <div
+    class="pl-editable-title"
+    :class="style.component"
+    :style="computedStyle"
+    data-testid="pl-editable-title"
+  >
     <div :class="style.container" @click="() => inputRef?.focus()">
-      <span v-if="prefix">{{ prefix.trim() }}&nbsp;</span>
+      <span v-if="prefix" data-testid="pl-editable-title-prefix">{{ prefix.trim() }}&nbsp;</span>
       <input
         ref="inputRef"
         v-model="local.value"
         :placeholder="placeholder"
+        data-testid="pl-editable-title-input"
         @focusout="save"
         @keydown.escape="local.reset"
         @keydown.enter="(ev) => (ev.target as HTMLInputElement)?.blur()"
       />
     </div>
-    <div v-if="local.error" :class="style.error">{{ local.error }}</div>
+    <div v-if="local.error" :class="style.error" data-testid="pl-editable-title-error">
+      {{ local.error }}
+    </div>
   </div>
 </template>

package/src/components/PlElementList/PlElementList.vue

@@ -297,8 +297,8 @@ const getItemClassAfter = getClassFunction(props.itemClassAfter);
 </script>
 
 <template>
-  <div :class="$style.root">
-    <div ref="pinnedContainerRef" :class="$style.list">
+  <div data-testid="pl-element-list" :class="$style.root">
+    <div ref="pinnedContainerRef" data-testid="pl-element-list-pinned" :class="$style.list">
       <PlElementListItem
         v-for="([originalIndex, item], pinnedIndex) in pinnedItemsRef"
         :key="pinnedKeysRef[pinnedIndex]"
@@ -339,7 +339,12 @@ const getItemClassAfter = getClassFunction(props.itemClassAfter);
         </template>
       </PlElementListItem>
     </div>
-    <div v-if="hasUnpinnedItems" ref="unpinnedContainerRef" :class="$style.list">
+    <div
+      v-if="hasUnpinnedItems"
+      ref="unpinnedContainerRef"
+      data-testid="pl-element-list-unpinned"
+      :class="$style.list"
+    >
       <PlElementListItem
         v-for="([originalIndex, item], unpinnedIndex) in unpinnedItemsRef"
         :key="unpinnedKeysRef[unpinnedIndex]"