@milaboratories/uikit 2.10.14 → 2.10.16

package/src/components/PlDropdown/PlDropdown.vue

@@ -3,35 +3,35 @@
  * A component for selecting one value from a list of options
  */
 export default {
-  name: 'PlDropdown',
+  name: "PlDropdown",
 };
 </script>
 
 <script lang="ts" setup generic="M = unknown">
-import { computed, reactive, ref, unref, useTemplateRef, watch, watchPostEffect } from 'vue';
-import SvgRequired from '../../assets/images/required.svg?raw';
-import { getErrorMessage } from '../../helpers/error.ts';
-import { tap } from '../../helpers/functions';
-import { deepEqual } from '../../helpers/objects';
-import { normalizeListOptions } from '../../helpers/utils';
-import type { ListOption, ListOptionNormalized, MaskIconName16, MaskIconName24 } from '../../types';
-import DoubleContour from '../../utils/DoubleContour.vue';
-import { useLabelNotch } from '../../utils/useLabelNotch';
-import LongText from '../LongText.vue';
-import { PlIcon16 } from '../PlIcon16';
-import { PlIcon24 } from '../PlIcon24';
-import { PlSvg } from '../PlSvg';
-import { PlTooltip } from '../PlTooltip';
-import OptionList from './OptionList.vue';
-import './pl-dropdown.scss';
-import type { LOption } from './types';
-import { useGroupBy } from './useGroupBy';
+import { computed, reactive, ref, unref, useTemplateRef, watch, watchPostEffect } from "vue";
+import SvgRequired from "../../assets/images/required.svg?raw";
+import { getErrorMessage } from "../../helpers/error.ts";
+import { tap } from "../../helpers/functions";
+import { deepEqual } from "../../helpers/objects";
+import { normalizeListOptions } from "../../helpers/utils";
+import type { ListOption, ListOptionNormalized, MaskIconName16, MaskIconName24 } from "../../types";
+import DoubleContour from "../../utils/DoubleContour.vue";
+import { useLabelNotch } from "../../utils/useLabelNotch";
+import LongText from "../LongText.vue";
+import { PlIcon16 } from "../PlIcon16";
+import { PlIcon24 } from "../PlIcon24";
+import { PlSvg } from "../PlSvg";
+import { PlTooltip } from "../PlTooltip";
+import OptionList from "./OptionList.vue";
+import "./pl-dropdown.scss";
+import type { LOption } from "./types";
+import { useGroupBy } from "./useGroupBy";
 
 const emit = defineEmits<{
   /**
    * Emitted when the model value is updated.
    */
-  (e: 'update:modelValue', value: M | undefined): void;
+  (e: "update:modelValue", value: M | undefined): void;
 }>();
 
 const props = withDefaults(
@@ -91,25 +91,34 @@ const props = withDefaults(
     /**
      * Option list item size
      */
-    optionSize?: 'small' | 'medium';
+    optionSize?: "small" | "medium";
     /**
      * Makes some of corners not rounded
      * */
-    groupPosition?: 'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'middle';
+    groupPosition?:
+      | "top"
+      | "bottom"
+      | "left"
+      | "right"
+      | "top-left"
+      | "top-right"
+      | "bottom-left"
+      | "bottom-right"
+      | "middle";
   }>(),
   {
-    label: '',
+    label: "",
     helper: undefined,
     loadingOptionsHelper: undefined,
     error: undefined,
     showErrorMessage: true,
-    placeholder: '...',
+    placeholder: "...",
     clearable: false,
     required: false,
     disabled: false,
     arrowIcon: undefined,
     arrowIconLarge: undefined,
-    optionSize: 'small',
+    optionSize: "small",
     options: undefined,
     groupPosition: undefined,
   },
@@ -118,10 +127,10 @@ const props = withDefaults(
 const rootRef = ref<HTMLElement | undefined>();
 const input = ref<HTMLInputElement | undefined>();
 
-const optionListRef = useTemplateRef<InstanceType<typeof OptionList>>('optionListRef');
+const optionListRef = useTemplateRef<InstanceType<typeof OptionList>>("optionListRef");
 
 const data = reactive({
-  search: '',
+  search: "",
   activeIndex: -1,
   open: false,
   optionsHeight: 0,
@@ -169,7 +178,7 @@ const computedError = computed(() => {
   }
 
   if (props.modelValue !== undefined && selectedIndex.value === -1) {
-    return 'The selected value is not one of the options';
+    return "The selected value is not one of the options";
   }
 
   return undefined;
@@ -194,7 +203,7 @@ const textValue = computed(() => {
 
 const computedPlaceholder = computed(() => {
   if (!data.open && props.modelValue !== undefined) {
-    return '';
+    return "";
   }
 
   return props.modelValue ? String(textValue.value) : props.placeholder;
@@ -219,7 +228,7 @@ const filteredRef = computed(() => {
         return true;
       }
 
-      if (typeof o.value === 'string') {
+      if (typeof o.value === "string") {
         return o.value.toLowerCase().includes(search);
       }
 
@@ -230,13 +239,13 @@ const filteredRef = computed(() => {
   return options;
 });
 
-const { orderedRef, groupsRef, restRef } = useGroupBy(filteredRef, 'group');
+const { orderedRef, groupsRef, restRef } = useGroupBy(filteredRef, "group");
 
-const tabindex = computed(() => (isDisabled.value ? undefined : '0'));
+const tabindex = computed(() => (isDisabled.value ? undefined : "0"));
 
 const selectOption = (v: M | undefined) => {
-  emit('update:modelValue', v);
-  data.search = '';
+  emit("update:modelValue", v);
+  data.search = "";
   data.open = false;
   rootRef?.value?.focus();
 };
@@ -245,14 +254,14 @@ const selectOptionWrapper = (v: unknown) => {
   selectOption(v as M | undefined);
 };
 
-const clear = () => emit('update:modelValue', undefined);
+const clear = () => emit("update:modelValue", undefined);
 
 const setFocusOnInput = () => input.value?.focus();
 
 const toggleOpen = () => {
   data.open = !data.open;
   if (!data.open) {
-    data.search = '';
+    data.search = "";
   }
 };
 
@@ -261,14 +270,17 @@ const onInputFocus = () => (data.open = true);
 const onFocusOut = (event: FocusEvent) => {
   const relatedTarget = event.relatedTarget as Node | null;
 
-  if (!rootRef.value?.contains(relatedTarget) && !optionListRef.value?.listRef?.contains(relatedTarget)) {
-    data.search = '';
+  if (
+    !rootRef.value?.contains(relatedTarget) &&
+    !optionListRef.value?.listRef?.contains(relatedTarget)
+  ) {
+    data.search = "";
     data.open = false;
   }
 };
 
 const handleKeydown = (e: { code: string; preventDefault(): void }) => {
-  if (!['ArrowDown', 'ArrowUp', 'Enter', 'Escape'].includes(e.code)) {
+  if (!["ArrowDown", "ArrowUp", "Enter", "Escape"].includes(e.code)) {
     return;
   } else {
     e.preventDefault();
@@ -277,13 +289,13 @@ const handleKeydown = (e: { code: string; preventDefault(): void }) => {
   const { open, activeIndex } = data;
 
   if (!open) {
-    if (e.code === 'Enter') {
+    if (e.code === "Enter") {
       data.open = true;
     }
     return;
   }
 
-  if (e.code === 'Escape') {
+  if (e.code === "Escape") {
     data.open = false;
     rootRef.value?.focus();
   }
@@ -296,13 +308,13 @@ const handleKeydown = (e: { code: string; preventDefault(): void }) => {
     return;
   }
 
-  if (e.code === 'Enter') {
+  if (e.code === "Enter") {
     selectOption(ordered.find((it) => it.index === activeIndex)?.value);
   }
 
   const localIndex = ordered.findIndex((it) => it.index === activeIndex) ?? -1;
 
-  const delta = e.code === 'ArrowDown' ? 1 : e.code === 'ArrowUp' ? -1 : 0;
+  const delta = e.code === "ArrowDown" ? 1 : e.code === "ArrowUp" ? -1 : 0;
 
   const newIndex = Math.abs(localIndex + delta + length) % length;
 
@@ -315,7 +327,7 @@ watch(() => props.modelValue, updateActive, { immediate: true });
 
 watch(
   () => data.open,
-  (open) => (open ? input.value?.focus() : ''),
+  (open) => (open ? input.value?.focus() : ""),
 );
 
 watchPostEffect(() => {
@@ -358,7 +370,12 @@ watchPostEffect(() => {
 
           <div class="pl-dropdown__controls">
             <PlIcon24 v-if="showLoadingSpinner" name="loading" />
-            <PlIcon16 v-if="clearable && hasValue" class="clear" name="delete-clear" @click.stop="clear" />
+            <PlIcon16
+              v-if="clearable && hasValue"
+              class="clear"
+              name="delete-clear"
+              @click.stop="clear"
+            />
             <slot name="append" />
             <div class="pl-dropdown__arrow-wrapper" @click.stop="toggleOpen">
               <PlIcon24 v-if="arrowIconLarge" :name="arrowIconLarge" class="arrow-icon" />
@@ -389,7 +406,9 @@ watchPostEffect(() => {
       </div>
     </div>
     <div v-if="computedError" class="pl-dropdown__error">{{ computedError }}</div>
-    <div v-else-if="showLoadingSpinner && loadingOptionsHelper" class="pl-dropdown__helper">{{ loadingOptionsHelper }}</div>
+    <div v-else-if="showLoadingSpinner && loadingOptionsHelper" class="pl-dropdown__helper">
+      {{ loadingOptionsHelper }}
+    </div>
     <div v-else-if="helper" class="pl-dropdown__helper">{{ helper }}</div>
   </div>
 </template>

package/src/components/PlDropdown/__tests__/PlDropdown.spec.ts

@@ -1,25 +1,25 @@
-import { describe, it, expect } from 'vitest';
+import { describe, it, expect } from "vitest";
 
-import { mount } from '@vue/test-utils';
-import PlDropdown from '../PlDropdown.vue';
-import { delay } from '@milaboratories/helpers';
+import { mount } from "@vue/test-utils";
+import PlDropdown from "../PlDropdown.vue";
+import { delay } from "@milaboratories/helpers";
 
-describe('PlDropdown', () => {
-  it('modelValue', async () => {
+describe("PlDropdown", () => {
+  it("modelValue", async () => {
     const wrapper = mount(PlDropdown, {
       props: {
-        'modelValue': 1,
-        'onUpdate:modelValue': (e) => wrapper.setProps({ modelValue: e }),
-        'options': [
-          { text: 'Option 1', value: 1 },
-          { text: 'Option 2', value: 2 },
+        modelValue: 1,
+        "onUpdate:modelValue": (e) => wrapper.setProps({ modelValue: e }),
+        options: [
+          { text: "Option 1", value: 1 },
+          { text: "Option 2", value: 2 },
         ],
       },
     });
 
-    await wrapper.find('input').trigger('focus');
+    await wrapper.find("input").trigger("focus");
 
-    const options = [...document.body.querySelectorAll('.dropdown-list-item')] as HTMLElement[];
+    const options = [...document.body.querySelectorAll(".dropdown-list-item")] as HTMLElement[];
 
     expect(options.length).toBe(2);
 
@@ -27,8 +27,8 @@ describe('PlDropdown', () => {
 
     await delay(20);
 
-    expect(wrapper.props('modelValue')).toBe(2);
+    expect(wrapper.props("modelValue")).toBe(2);
 
-    expect(await wrapper.findAll('.dropdown-list-item').length).toBe(0); // options are closed after click
+    expect(await wrapper.findAll(".dropdown-list-item").length).toBe(0); // options are closed after click
   });
 });

package/src/components/PlDropdown/index.ts

@@ -1 +1 @@
-export { default as PlDropdown } from './PlDropdown.vue';
+export { default as PlDropdown } from "./PlDropdown.vue";

package/src/components/PlDropdown/pl-dropdown.scss

@@ -1,4 +1,4 @@
-@use '../../assets/mixins.scss' as *;
+@use "../../assets/mixins.scss" as *;
 
 .pl-dropdown__options {
   --option-hover-bg: var(--btn-sec-hover-grey);
@@ -9,7 +9,9 @@
   background-color: var(--pl-dropdown-options-bg);
   border-radius: 6px;
   max-height: 244px;
-  box-shadow: 0px 4px 12px -2px rgba(15, 36, 77, 0.08), 0px 6px 24px -2px rgba(15, 36, 77, 0.08);
+  box-shadow:
+    0px 4px 12px -2px rgba(15, 36, 77, 0.08),
+    0px 6px 24px -2px rgba(15, 36, 77, 0.08);
 
   @include scrollbar;
 

package/src/components/PlDropdown/types.ts

@@ -1,3 +1,7 @@
-import type { ListOptionNormalized } from '../../types';
+import type { ListOptionNormalized } from "../../types";
 
-export type LOption<M = unknown> = ListOptionNormalized<M> & { isSelected: boolean; isActive: boolean; index: number };
+export type LOption<M = unknown> = ListOptionNormalized<M> & {
+  isSelected: boolean;
+  isActive: boolean;
+  index: number;
+};

package/src/components/PlDropdown/useGroupBy.ts

@@ -1,14 +1,14 @@
-import type { Ref } from 'vue';
-import { computed } from 'vue';
+import type { Ref } from "vue";
+import { computed } from "vue";
 
 function groupBy<T, K extends keyof T>(
   list: T[],
   groupBy: K,
 ): {
-    grouped: Map<NonNullable<T[K]>, T[]>;
-    rest: T[];
-    ordered: T[];
-  } {
+  grouped: Map<NonNullable<T[K]>, T[]>;
+  rest: T[];
+  ordered: T[];
+} {
   const grouped: Map<NonNullable<T[K]>, T[]> = new Map();
 
   if (!list) {
@@ -43,10 +43,7 @@ function groupBy<T, K extends keyof T>(
   };
 }
 
-export function useGroupBy<T, K extends keyof T>(
-  list: Ref<T[]>,
-  byKey: K,
-) {
+export function useGroupBy<T, K extends keyof T>(list: Ref<T[]>, byKey: K) {
   const result = computed(() => groupBy(list.value, byKey));
 
   const orderedRef = computed(() => result.value.ordered);

package/src/components/PlDropdownLegacy/PlDropdownLegacy.vue

@@ -3,34 +3,34 @@
  * A component for selecting one value from a list of options
  */
 export default {
-  name: 'PlDropdown',
+  name: "PlDropdown",
 };
 </script>
 
 <script lang="ts" setup generic="M = unknown">
-import './pl-dropdown-legacy.scss';
-import { computed, reactive, ref, unref, useSlots, watch, watchPostEffect } from 'vue';
-import { tap, tapIf } from '../../helpers/functions';
-import { PlTooltip } from '../PlTooltip';
-import DoubleContour from '../../utils/DoubleContour.vue';
-import { useLabelNotch } from '../../utils/useLabelNotch';
-import type { ListOption, ListOptionNormalized } from '../../types';
-import { scrollIntoView } from '../../helpers/dom';
-import { deepEqual } from '../../helpers/objects';
-import DropdownListItem from '../DropdownListItem.vue';
-import LongText from '../LongText.vue';
-import { PlIcon16 } from '../PlIcon16';
-import { PlMaskIcon24 } from '../PlMaskIcon24';
-import { normalizeListOptions } from '../../helpers/utils';
-import { getErrorMessage } from '../../helpers/error.ts';
-import { PlSvg } from '../PlSvg';
-import SvgRequired from '../../assets/images/required.svg?raw';
+import "./pl-dropdown-legacy.scss";
+import { computed, reactive, ref, unref, useSlots, watch, watchPostEffect } from "vue";
+import { tap, tapIf } from "../../helpers/functions";
+import { PlTooltip } from "../PlTooltip";
+import DoubleContour from "../../utils/DoubleContour.vue";
+import { useLabelNotch } from "../../utils/useLabelNotch";
+import type { ListOption, ListOptionNormalized } from "../../types";
+import { scrollIntoView } from "../../helpers/dom";
+import { deepEqual } from "../../helpers/objects";
+import DropdownListItem from "../DropdownListItem.vue";
+import LongText from "../LongText.vue";
+import { PlIcon16 } from "../PlIcon16";
+import { PlMaskIcon24 } from "../PlMaskIcon24";
+import { normalizeListOptions } from "../../helpers/utils";
+import { getErrorMessage } from "../../helpers/error.ts";
+import { PlSvg } from "../PlSvg";
+import SvgRequired from "../../assets/images/required.svg?raw";
 
 const emit = defineEmits<{
   /**
    * Emitted when the model value is updated.
    */
-  (e: 'update:modelValue', value: M | undefined): void;
+  (e: "update:modelValue", value: M | undefined): void;
 }>();
 
 const props = withDefaults(
@@ -86,20 +86,20 @@ const props = withDefaults(
     /**
      * Option list item size
      */
-    optionSize?: 'small' | 'medium';
+    optionSize?: "small" | "medium";
   }>(),
   {
-    label: '',
+    label: "",
     helper: undefined,
     loadingOptionsHelper: undefined,
     error: undefined,
-    placeholder: '...',
+    placeholder: "...",
     clearable: false,
     required: false,
     disabled: false,
     arrowIcon: undefined,
     arrowIconLarge: undefined,
-    optionSize: 'small',
+    optionSize: "small",
     options: undefined,
   },
 );
@@ -111,7 +111,7 @@ const list = ref<HTMLElement | undefined>();
 const input = ref<HTMLInputElement | undefined>();
 
 const data = reactive({
-  search: '',
+  search: "",
   activeIndex: -1,
   open: false,
 });
@@ -150,7 +150,7 @@ const computedError = computed(() => {
   }
 
   if (props.modelValue !== undefined && selectedIndex.value === -1) {
-    return 'The selected value is not one of the options';
+    return "The selected value is not one of the options";
   }
 
   return undefined;
@@ -175,7 +175,7 @@ const textValue = computed(() => {
 
 const computedPlaceholder = computed(() => {
   if (!data.open && props.modelValue) {
-    return '';
+    return "";
   }
 
   return props.modelValue ? String(textValue.value) : props.placeholder;
@@ -200,7 +200,7 @@ const filteredRef = computed(() => {
         return true;
       }
 
-      if (typeof o.value === 'string') {
+      if (typeof o.value === "string") {
         return o.value.toLowerCase().includes(search);
       }
 
@@ -211,16 +211,16 @@ const filteredRef = computed(() => {
   return options;
 });
 
-const tabindex = computed(() => (isDisabled.value ? undefined : '0'));
+const tabindex = computed(() => (isDisabled.value ? undefined : "0"));
 
 const selectOption = (v: M | undefined) => {
-  emit('update:modelValue', v);
-  data.search = '';
+  emit("update:modelValue", v);
+  data.search = "";
   data.open = false;
   root?.value?.focus();
 };
 
-const clear = () => emit('update:modelValue', undefined);
+const clear = () => emit("update:modelValue", undefined);
 
 const setFocusOnInput = () => input.value?.focus();
 
@@ -230,7 +230,7 @@ const onInputFocus = () => (data.open = true);
 
 const onFocusOut = (event: FocusEvent) => {
   if (!root?.value?.contains(event.relatedTarget as Node | null)) {
-    data.search = '';
+    data.search = "";
     data.open = false;
   }
 };
@@ -242,13 +242,13 @@ const scrollIntoActive = () => {
     return;
   }
 
-  tapIf($list.querySelector('.hovered-item') as HTMLElement, (opt) => {
+  tapIf($list.querySelector(".hovered-item") as HTMLElement, (opt) => {
     scrollIntoView($list, opt);
   });
 };
 
 const handleKeydown = (e: { code: string; preventDefault(): void }) => {
-  if (!['ArrowDown', 'ArrowUp', 'Enter', 'Escape'].includes(e.code)) {
+  if (!["ArrowDown", "ArrowUp", "Enter", "Escape"].includes(e.code)) {
     return;
   } else {
     e.preventDefault();
@@ -257,13 +257,13 @@ const handleKeydown = (e: { code: string; preventDefault(): void }) => {
   const { open, activeIndex } = data;
 
   if (!open) {
-    if (e.code === 'Enter') {
+    if (e.code === "Enter") {
       data.open = true;
     }
     return;
   }
 
-  if (e.code === 'Escape') {
+  if (e.code === "Escape") {
     data.open = false;
     root.value?.focus();
   }
@@ -276,13 +276,13 @@ const handleKeydown = (e: { code: string; preventDefault(): void }) => {
     return;
   }
 
-  if (e.code === 'Enter') {
+  if (e.code === "Enter") {
     selectOption(filtered.find((it) => it.index === activeIndex)?.value);
   }
 
   const localIndex = filtered.findIndex((it) => it.index === activeIndex) ?? -1;
 
-  const delta = e.code === 'ArrowDown' ? 1 : e.code === 'ArrowUp' ? -1 : 0;
+  const delta = e.code === "ArrowDown" ? 1 : e.code === "ArrowUp" ? -1 : 0;
 
   const newIndex = Math.abs(localIndex + delta + length) % length;
 
@@ -295,7 +295,7 @@ watch(() => props.modelValue, updateActive, { immediate: true });
 
 watch(
   () => data.open,
-  (open) => (open ? input.value?.focus() : ''),
+  (open) => (open ? input.value?.focus() : ""),
 );
 
 watchPostEffect(() => {
@@ -338,10 +338,25 @@ watchPostEffect(() => {
 
           <div class="ui-dropdown__controls">
             <PlMaskIcon24 v-if="isLoadingOptions" name="loading" />
-            <PlIcon16 v-if="clearable && hasValue" class="clear" name="delete-clear" @click.stop="clear" />
+            <PlIcon16
+              v-if="clearable && hasValue"
+              class="clear"
+              name="delete-clear"
+              @click.stop="clear"
+            />
             <slot name="append" />
-            <div v-if="arrowIconLarge" class="arrow-icon" :class="[`icon-24 ${arrowIconLarge}`]" @click.stop="toggleOpen" />
-            <div v-else-if="arrowIcon" class="arrow-icon" :class="[`icon-16 ${arrowIcon}`]" @click.stop="toggleOpen" />
+            <div
+              v-if="arrowIconLarge"
+              class="arrow-icon"
+              :class="[`icon-24 ${arrowIconLarge}`]"
+              @click.stop="toggleOpen"
+            />
+            <div
+              v-else-if="arrowIcon"
+              class="arrow-icon"
+              :class="[`icon-16 ${arrowIcon}`]"
+              @click.stop="toggleOpen"
+            />
             <div v-else class="arrow-icon arrow-icon-default" @click.stop="toggleOpen" />
           </div>
         </div>
@@ -370,7 +385,9 @@ watchPostEffect(() => {
       </div>
     </div>
     <div v-if="computedError" class="ui-dropdown__error">{{ computedError }}</div>
-    <div v-else-if="isLoadingOptions && loadingOptionsHelper" class="ui-dropdown__helper">{{ loadingOptionsHelper }}</div>
+    <div v-else-if="isLoadingOptions && loadingOptionsHelper" class="ui-dropdown__helper">
+      {{ loadingOptionsHelper }}
+    </div>
     <div v-else-if="helper" class="ui-dropdown__helper">{{ helper }}</div>
   </div>
 </template>

package/src/components/PlDropdownLegacy/__tests__/PlDropdownLegacy.spec.ts

@@ -1,33 +1,33 @@
-import { describe, it, expect } from 'vitest';
+import { describe, it, expect } from "vitest";
 
-import { mount } from '@vue/test-utils';
-import PlDropdown from '../PlDropdownLegacy.vue';
+import { mount } from "@vue/test-utils";
+import PlDropdown from "../PlDropdownLegacy.vue";
 
-describe('PlDropdown', () => {
-  it('modelValue', async () => {
+describe("PlDropdown", () => {
+  it("modelValue", async () => {
     const wrapper = mount(PlDropdown, {
       props: {
-        'modelValue': 1,
-        'onUpdate:modelValue': (e) => wrapper.setProps({ modelValue: e }),
-        'options': [
-          { text: 'Option 1', value: 1 },
-          { text: 'Option 2', value: 2 },
+        modelValue: 1,
+        "onUpdate:modelValue": (e) => wrapper.setProps({ modelValue: e }),
+        options: [
+          { text: "Option 1", value: 1 },
+          { text: "Option 2", value: 2 },
         ],
       },
     });
 
-    await wrapper.find('input').trigger('focus');
+    await wrapper.find("input").trigger("focus");
 
-    expect(await wrapper.findAll('.dropdown-list-item').length).toBe(2);
+    expect(await wrapper.findAll(".dropdown-list-item").length).toBe(2);
 
     await wrapper
-      .findAll('.dropdown-list-item')
+      .findAll(".dropdown-list-item")
       .filter((node) => node.text().match(/Option 2/))
       .at(0)
-      ?.trigger('click');
+      ?.trigger("click");
 
-    expect(wrapper.props('modelValue')).toBe(2);
+    expect(wrapper.props("modelValue")).toBe(2);
 
-    expect(wrapper.findAll('.dropdown-list-item').length).toBe(0); // options are closed after click
+    expect(wrapper.findAll(".dropdown-list-item").length).toBe(0); // options are closed after click
   });
 });

package/src/components/PlDropdownLegacy/index.ts

@@ -1 +1 @@
-export { default as PlDropdownLegacy } from './PlDropdownLegacy.vue';
+export { default as PlDropdownLegacy } from "./PlDropdownLegacy.vue";