@milaboratories/uikit 2.10.14 → 2.10.16

package/src/components/PlDropdownLine/resizable-input.scss

@@ -1,41 +1,41 @@
 .resizable-input {
-    position: relative;
-    box-sizing: border-box;
-    padding: 0px 8px;
-    display: inline-block;
-    max-width: 100%;
-    text-overflow: ellipsis;
-    overflow: hidden;
+  position: relative;
+  box-sizing: border-box;
+  padding: 0px 8px;
+  display: inline-block;
+  max-width: 100%;
+  text-overflow: ellipsis;
+  overflow: hidden;
 
-    &__size-span {
-        font-family: inherit;
-        white-space: pre;
-        display: inline-block;
-        font-size: inherit;
-        line-height: inherit;
-        box-sizing: border-box;
-        position: relative;
-        left: 0px;
-        opacity: 0;
-        min-width: 2px;
-        user-select: none;
-        vertical-align: top;
-    }
+  &__size-span {
+    font-family: inherit;
+    white-space: pre;
+    display: inline-block;
+    font-size: inherit;
+    line-height: inherit;
+    box-sizing: border-box;
+    position: relative;
+    left: 0px;
+    opacity: 0;
+    min-width: 2px;
+    user-select: none;
+    vertical-align: top;
+  }
 
-    input {
-        border: none;
-        outline: none;
-        height: 100%;
-        text-overflow: ellipsis;
-        font-family: inherit;
-        background: none;
-        color: inherit;
-        top: 0;
-        left: 0;
-        right: 0;
-        font-size: inherit;
-        line-height: inherit;
-        position: absolute;
-        box-sizing: border-box;
-    }
-}
+  input {
+    border: none;
+    outline: none;
+    height: 100%;
+    text-overflow: ellipsis;
+    font-family: inherit;
+    background: none;
+    color: inherit;
+    top: 0;
+    left: 0;
+    right: 0;
+    font-size: inherit;
+    line-height: inherit;
+    position: absolute;
+    box-sizing: border-box;
+  }
+}

package/src/components/PlDropdownMulti/PlDropdownMulti.vue

@@ -3,32 +3,41 @@
  * A component for selecting multiple values from a list of options
  */
 export default {
-  name: 'PlDropdownMulti',
+  name: "PlDropdownMulti",
 };
 </script>
 
 <script lang="ts" setup generic="M = unknown">
-import { computed, reactive, ref, unref, useSlots, useTemplateRef, watch, watchPostEffect } from 'vue';
-import SvgRequired from '../../assets/images/required.svg?raw';
-import { getErrorMessage } from '../../helpers/error.ts';
-import { deepEqual, deepIncludes } from '../../helpers/objects';
-import { normalizeListOptions } from '../../helpers/utils';
-import type { ListOption } from '../../types';
-import DoubleContour from '../../utils/DoubleContour.vue';
-import DropdownOverlay from '../../utils/DropdownOverlay/DropdownOverlay.vue';
-import { useLabelNotch } from '../../utils/useLabelNotch';
-import DropdownListItem from '../DropdownListItem.vue';
-import { PlChip } from '../PlChip';
-import { PlIcon24 } from '../PlIcon24';
-import { PlSvg } from '../PlSvg';
-import { PlTooltip } from '../PlTooltip';
-import './pl-dropdown-multi.scss';
+import {
+  computed,
+  reactive,
+  ref,
+  unref,
+  useSlots,
+  useTemplateRef,
+  watch,
+  watchPostEffect,
+} from "vue";
+import SvgRequired from "../../assets/images/required.svg?raw";
+import { getErrorMessage } from "../../helpers/error.ts";
+import { deepEqual, deepIncludes } from "../../helpers/objects";
+import { normalizeListOptions } from "../../helpers/utils";
+import type { ListOption } from "../../types";
+import DoubleContour from "../../utils/DoubleContour.vue";
+import DropdownOverlay from "../../utils/DropdownOverlay/DropdownOverlay.vue";
+import { useLabelNotch } from "../../utils/useLabelNotch";
+import DropdownListItem from "../DropdownListItem.vue";
+import { PlChip } from "../PlChip";
+import { PlIcon24 } from "../PlIcon24";
+import { PlSvg } from "../PlSvg";
+import { PlTooltip } from "../PlTooltip";
+import "./pl-dropdown-multi.scss";
 
 const emit = defineEmits<{
-  (e: 'update:modelValue', v: M[]): void;
+  (e: "update:modelValue", v: M[]): void;
 }>();
 
-const emitModel = (v: M[]) => emit('update:modelValue', v);
+const emitModel = (v: M[]) => emit("update:modelValue", v);
 
 const slots = useSlots();
 
@@ -69,14 +78,23 @@ const props = withDefaults(
     /**
      * 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";
   }>(),
   {
     modelValue: () => [],
     label: undefined,
     helper: undefined,
     error: undefined,
-    placeholder: '...',
+    placeholder: "...",
     required: false,
     disabled: false,
     options: undefined,
@@ -87,10 +105,10 @@ const props = withDefaults(
 const rootRef = ref<HTMLElement | undefined>();
 const input = ref<HTMLInputElement | undefined>();
 
-const overlay = useTemplateRef('overlay');
+const overlay = useTemplateRef("overlay");
 
 const data = reactive({
-  search: '',
+  search: "",
   activeOption: -1,
   open: false,
   optionsHeight: 0,
@@ -103,13 +121,15 @@ const placeholderRef = computed(() => {
     return props.placeholder;
   }
 
-  return props.modelValue.length > 0 ? '' : props.placeholder;
+  return props.modelValue.length > 0 ? "" : props.placeholder;
 });
 
 const normalizedOptionsRef = computed(() => normalizeListOptions(props.options ?? []));
 
 const selectedOptionsRef = computed(() => {
-  return selectedValuesRef.value.map((v) => normalizedOptionsRef.value.find((opt) => deepEqual(opt.value, v))).filter((v) => v !== undefined);
+  return selectedValuesRef.value
+    .map((v) => normalizedOptionsRef.value.find((opt) => deepEqual(opt.value, v)))
+    .filter((v) => v !== undefined);
 });
 
 const filteredOptionsRef = computed(() => {
@@ -120,18 +140,18 @@ const filteredOptionsRef = computed(() => {
   return (
     data.search
       ? options.filter((opt) => {
-        const search = data.search.toLowerCase();
+          const search = data.search.toLowerCase();
 
-        if (opt.label.toLowerCase().includes(search)) {
-          return true;
-        }
+          if (opt.label.toLowerCase().includes(search)) {
+            return true;
+          }
 
-        if (typeof opt.value === 'string') {
-          return opt.value.toLowerCase().includes(search);
-        }
+          if (typeof opt.value === "string") {
+            return opt.value.toLowerCase().includes(search);
+          }
 
-        return opt.value === data.search;
-      })
+          return opt.value === data.search;
+        })
       : [...options]
   ).map((opt) => ({
     ...opt,
@@ -155,7 +175,7 @@ const isDisabled = computed(() => {
   return props.disabled;
 });
 
-const tabindex = computed(() => (isDisabled.value ? undefined : '0'));
+const tabindex = computed(() => (isDisabled.value ? undefined : "0"));
 
 const updateActiveOption = () => {
   data.activeOption = 0;
@@ -164,18 +184,19 @@ const updateActiveOption = () => {
 const selectOption = (v: M) => {
   const values = unref(selectedValuesRef);
   emitModel(deepIncludes(values, v) ? values.filter((it) => !deepEqual(it, v)) : [...values, v]);
-  data.search = '';
+  data.search = "";
   rootRef?.value?.focus();
 };
 
-const unselectOption = (d: M) => emitModel(unref(selectedValuesRef).filter((v) => !deepEqual(v, d)));
+const unselectOption = (d: M) =>
+  emitModel(unref(selectedValuesRef).filter((v) => !deepEqual(v, d)));
 
 const setFocusOnInput = () => input.value?.focus();
 
 const toggleModel = () => {
   data.open = !data.open;
   if (!data.open) {
-    data.search = '';
+    data.search = "";
   }
 };
 
@@ -183,7 +204,7 @@ const onFocusOut = (event: FocusEvent) => {
   const relatedTarget = event.relatedTarget as Node | null;
 
   if (!rootRef.value?.contains(relatedTarget) && !overlay.value?.listRef?.contains(relatedTarget)) {
-    data.search = '';
+    data.search = "";
     data.open = false;
   }
 };
@@ -192,13 +213,13 @@ const handleKeydown = (e: { code: string; preventDefault(): void }) => {
   const { open, activeOption } = 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();
   }
@@ -211,15 +232,15 @@ const handleKeydown = (e: { code: string; preventDefault(): void }) => {
     return;
   }
 
-  if (['ArrowDown', 'ArrowUp', 'Enter'].includes(e.code)) {
+  if (["ArrowDown", "ArrowUp", "Enter"].includes(e.code)) {
     e.preventDefault();
   }
 
-  if (e.code === 'Enter') {
+  if (e.code === "Enter") {
     selectOption(filteredOptions[activeOption].value);
   }
 
-  const d = e.code === 'ArrowDown' ? 1 : e.code === 'ArrowUp' ? -1 : 0;
+  const d = e.code === "ArrowDown" ? 1 : e.code === "ArrowUp" ? -1 : 0;
 
   data.activeOption = Math.abs(activeOption + d + length) % length;
 
@@ -268,7 +289,14 @@ watchPostEffect(() => {
             @focus="data.open = true"
           />
           <div v-if="!data.open" class="chips-container">
-            <PlChip v-for="(opt, i) in selectedOptionsRef" :key="i" closeable small @click.stop="data.open = true" @close="unselectOption(opt.value)">
+            <PlChip
+              v-for="(opt, i) in selectedOptionsRef"
+              :key="i"
+              closeable
+              small
+              @click.stop="data.open = true"
+              @close="unselectOption(opt.value)"
+            >
               {{ opt.label || opt.value }}
             </PlChip>
           </div>
@@ -300,7 +328,13 @@ watchPostEffect(() => {
           @focusout="onFocusOut"
         >
           <div class="pl-dropdown-multi__open-chips-container">
-            <PlChip v-for="(opt, i) in selectedOptionsRef" :key="i" closeable small @close="unselectOption(opt.value)">
+            <PlChip
+              v-for="(opt, i) in selectedOptionsRef"
+              :key="i"
+              closeable
+              small
+              @close="unselectOption(opt.value)"
+            >
               {{ opt.label || opt.value }}
             </PlChip>
           </div>

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

@@ -1,25 +1,26 @@
-import { describe, it, expect } from 'vitest';
+import { describe, it, expect } from "vitest";
 
-import { mount } from '@vue/test-utils';
-import PlDropdown from '../PlDropdownMulti.vue';
-import { delay } from '@milaboratories/helpers';
+import { mount } from "@vue/test-utils";
+import PlDropdown from "../PlDropdownMulti.vue";
+import { delay } from "@milaboratories/helpers";
 
-describe('PlDropdownMulti', () => {
-  it('modelValue', async () => {
+describe("PlDropdownMulti", () => {
+  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 getOptions = () => [...document.body.querySelectorAll('.dropdown-list-item')] as HTMLElement[];
+    const getOptions = () =>
+      [...document.body.querySelectorAll(".dropdown-list-item")] as HTMLElement[];
 
     const options = getOptions();
 
@@ -29,7 +30,7 @@ describe('PlDropdownMulti', () => {
 
     await delay(20);
 
-    expect(wrapper.props('modelValue')).toEqual([1, 2]);
+    expect(wrapper.props("modelValue")).toEqual([1, 2]);
 
     expect(getOptions().length).toBe(2); // options are not closed after click
   });

package/src/components/PlDropdownMulti/index.ts

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

package/src/components/PlDropdownMulti/pl-dropdown-multi.scss

@@ -21,7 +21,7 @@
   font-weight: var(--font-weigh-base);
 
   [data-theme="dark"] & {
-    --options-bg: #1B1B1F;
+    --options-bg: #1b1b1f;
   }
 
   &__envelope {
@@ -59,7 +59,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;
 
     .nothing-found {
@@ -163,11 +165,11 @@
   .arrow-icon {
     cursor: pointer;
 
-    // Default "arrow" icon (16x16) 
+    // Default "arrow" icon (16x16)
     &.arrow-icon-default {
-      transition: transform .2s;
+      transition: transform 0.2s;
       background-color: var(--control-mask-fill);
-      @include mask(url('../../assets/images/16_chevron-down.svg'), 16px);
+      @include mask(url("../../assets/images/16_chevron-down.svg"), 16px);
     }
   }
 
@@ -266,4 +268,4 @@
       margin-bottom: 4px;
     }
   }
-}
+}

package/src/components/PlDropdownMultiRef/PlDropdownMultiRef.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
-import type { ModelRef, RefOption } from '../../types';
-import PlDropdownMulti from '../PlDropdownMulti/PlDropdownMulti.vue';
-import { computed, useSlots } from 'vue';
+import type { ModelRef, RefOption } from "../../types";
+import PlDropdownMulti from "../PlDropdownMulti/PlDropdownMulti.vue";
+import { computed, useSlots } from "vue";
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const slots: any = useSlots();
@@ -10,7 +10,7 @@ defineEmits<{
   /**
    * Emitted when the model value is updated.
    */
-  (e: 'update:modelValue', value: ModelRef[] | undefined): void;
+  (e: "update:modelValue", value: ModelRef[] | undefined): void;
 }>();
 
 const props = withDefaults(
@@ -53,7 +53,7 @@ const props = withDefaults(
     label: undefined,
     helper: undefined,
     error: undefined,
-    placeholder: '...',
+    placeholder: "...",
     required: false,
     disabled: false,
     options: undefined,

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

@@ -1,45 +1,46 @@
-import { describe, it, expect } from 'vitest';
+import { describe, it, expect } from "vitest";
 
-import { mount } from '@vue/test-utils';
-import PlDropdown from '../PlDropdownMultiRef.vue';
-import { delay } from '@milaboratories/helpers';
+import { mount } from "@vue/test-utils";
+import PlDropdown from "../PlDropdownMultiRef.vue";
+import { delay } from "@milaboratories/helpers";
 
-describe('PlDropdownMultiRef', () => {
-  it('modelValue', async () => {
+describe("PlDropdownMultiRef", () => {
+  it("modelValue", async () => {
     const wrapper = mount(PlDropdown, {
       props: {
-        'modelValue': [
+        modelValue: [
           {
             __isRef: true as const,
-            blockId: '2',
-            name: 'Block 2 Ref',
+            blockId: "2",
+            name: "Block 2 Ref",
           },
         ],
-        'onUpdate:modelValue': (e) => wrapper.setProps({ modelValue: e }),
-        'options': [
+        "onUpdate:modelValue": (e) => wrapper.setProps({ modelValue: e }),
+        options: [
           {
-            label: 'Block 1 label Ref',
+            label: "Block 1 label Ref",
             ref: {
               __isRef: true as const,
-              blockId: '1',
-              name: 'Block 1 Ref',
+              blockId: "1",
+              name: "Block 1 Ref",
             },
           },
           {
-            label: 'Block 2 label Ref',
+            label: "Block 2 label Ref",
             ref: {
               __isRef: true as const,
-              blockId: '2',
-              name: 'Block 2 Ref',
+              blockId: "2",
+              name: "Block 2 Ref",
             },
           },
         ],
       },
     });
 
-    await wrapper.find('input').trigger('focus');
+    await wrapper.find("input").trigger("focus");
 
-    const getOptions = () => [...document.body.querySelectorAll('.dropdown-list-item')] as HTMLElement[];
+    const getOptions = () =>
+      [...document.body.querySelectorAll(".dropdown-list-item")] as HTMLElement[];
 
     const options = getOptions();
 
@@ -50,16 +51,16 @@ describe('PlDropdownMultiRef', () => {
 
     await delay(20);
 
-    expect(wrapper.props('modelValue')).toEqual([
+    expect(wrapper.props("modelValue")).toEqual([
       {
         __isRef: true,
-        blockId: '2',
-        name: 'Block 2 Ref',
+        blockId: "2",
+        name: "Block 2 Ref",
       },
       {
         __isRef: true,
-        blockId: '1',
-        name: 'Block 1 Ref',
+        blockId: "1",
+        name: "Block 1 Ref",
       },
     ]);
 

package/src/components/PlDropdownMultiRef/index.ts

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

package/src/components/PlDropdownRef/PlDropdownRef.vue

@@ -3,14 +3,14 @@
  * A component for selecting one value from a list of options
  */
 export default {
-  name: 'PlDropdownRef',
+  name: "PlDropdownRef",
 };
 </script>
 
 <script lang="ts" setup generic="M = ModelRef">
-import { computed, useSlots } from 'vue';
-import type { ListOption, ModelRef, RefOption } from '../../types';
-import { PlDropdown } from '../PlDropdown';
+import { computed, useSlots } from "vue";
+import type { ListOption, ModelRef, RefOption } from "../../types";
+import { PlDropdown } from "../PlDropdown";
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const slots: any = useSlots();
@@ -19,7 +19,7 @@ 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(
@@ -67,31 +67,31 @@ 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,
-    optionSize: 'small',
+    optionSize: "small",
     options: undefined,
   },
 );
 
 const options = computed(() =>
   props.options?.map((opt) =>
-    'ref' in opt
-      ? {
+    "ref" in opt
+      ? ({
           label: opt.label,
           value: opt.ref,
           group: opt.group,
-        } as ListOption<M>
+        } as ListOption<M>)
       : opt,
   ),
 );