@milaboratories/uikit 2.10.15 → 2.10.17

package/src/components/PlAutocompleteMulti/PlAutocompleteMulti.vue

@@ -33,41 +33,40 @@
  * }
  */
 export default {
-  name: 'PlAutocompleteMulti',
+  name: "PlAutocompleteMulti",
 };
 
 export interface OptionsSearch<T> {
-  (s: string, type: 'label'): Promise<Readonly<ListOptionBase<T>[]>>;
-  (s: T[], type: 'value'): Promise<Readonly<ListOptionBase<T>[]>>;
+  (s: string, type: "label"): Promise<Readonly<ListOptionBase<T>[]>>;
+  (s: T[], type: "value"): Promise<Readonly<ListOptionBase<T>[]>>;
 }
-
 </script>
 
 <script lang="ts" setup generic="M extends string | number = string">
-import './pl-autocomplete-multi.scss';
-
-import type { ListOptionBase } from '@platforma-sdk/model';
-import canonicalize from 'canonicalize';
-import { computed, reactive, ref, toRef, unref, useSlots, useTemplateRef, watch } from 'vue';
-import { useWatchFetch } from '../../composition/useWatchFetch.ts';
-import { getErrorMessage } from '../../helpers/error.ts';
-import { deepEqual, deepIncludes } from '../../helpers/objects';
-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 { PlMaskIcon24 } from '../PlMaskIcon24';
-import { PlTooltip } from '../PlTooltip';
-
-import SvgRequired from '../../assets/images/required.svg?raw';
-import { PlSvg } from '../PlSvg';
+import "./pl-autocomplete-multi.scss";
+
+import type { ListOptionBase } from "@platforma-sdk/model";
+import canonicalize from "canonicalize";
+import { computed, reactive, ref, toRef, unref, useSlots, useTemplateRef, watch } from "vue";
+import { useWatchFetch } from "../../composition/useWatchFetch.ts";
+import { getErrorMessage } from "../../helpers/error.ts";
+import { deepEqual, deepIncludes } from "../../helpers/objects";
+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 { PlMaskIcon24 } from "../PlMaskIcon24";
+import { PlTooltip } from "../PlTooltip";
+
+import SvgRequired from "../../assets/images/required.svg?raw";
+import { PlSvg } from "../PlSvg";
 
 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();
 
@@ -124,18 +123,27 @@ 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,
     debounce: 300,
-    emptyOptionsText: 'Nothing found',
+    emptyOptionsText: "Nothing found",
     sourceId: undefined,
     groupPosition: undefined,
   },
@@ -144,20 +152,24 @@ const props = withDefaults(
 const rootRef = ref<HTMLElement | undefined>();
 const inputRef = ref<HTMLInputElement | undefined>();
 
-const overlay = useTemplateRef('overlay');
+const overlay = useTemplateRef("overlay");
 
 const data = reactive({
-  search: '',
+  search: "",
   activeOption: -1,
   open: false,
   optionsHeight: 0,
 });
 
-watch(() => data.open, (v) => {
-  if (!v) {
-    data.search = '';
-  }
-}, { flush: 'sync' });
+watch(
+  () => data.open,
+  (v) => {
+    if (!v) {
+      data.search = "";
+    }
+  },
+  { flush: "sync" },
+);
 
 const selectedValuesRef = computed(() => (Array.isArray(props.modelValue) ? props.modelValue : []));
 
@@ -166,23 +178,31 @@ const placeholderRef = computed(() => {
     return props.placeholder;
   }
 
-  return props.modelValue.length > 0 ? '' : props.placeholder;
+  return props.modelValue.length > 0 ? "" : props.placeholder;
 });
 
-const debounce = toRef(props, 'debounce');
+const debounce = toRef(props, "debounce");
 
-const searchOptionsRef = useWatchFetch(() => [data.search, data.open, props.sourceId] as const, async ([search, _open]) => {
-  return props.optionsSearch(search, 'label');
-}, {
-  filterWatchResult: ([_search, open]) => open,
-  debounce,
-});
+const searchOptionsRef = useWatchFetch(
+  () => [data.search, data.open, props.sourceId] as const,
+  async ([search, _open]) => {
+    return props.optionsSearch(search, "label");
+  },
+  {
+    filterWatchResult: ([_search, open]) => open,
+    debounce,
+  },
+);
 
-const modelOptionsRef = useWatchFetch(() => [props.modelValue, props.sourceId] as const, async ([v]) => {
-  return props.optionsSearch(v, 'value');
-}, {
-  debounce,
-});
+const modelOptionsRef = useWatchFetch(
+  () => [props.modelValue, props.sourceId] as const,
+  async ([v]) => {
+    return props.optionsSearch(v, "value");
+  },
+  {
+    debounce,
+  },
+);
 
 const allOptionsRef = computed(() => {
   const modelOptions = modelOptionsRef.value ?? [];
@@ -208,9 +228,9 @@ const allOptionsRef = computed(() => {
 });
 
 const selectedOptionsRef = computed(() => {
-  return selectedValuesRef.value.map((v) =>
-    allOptionsRef.value.find((opt) => deepEqual(opt.value, v))).filter((v) => v !== undefined,
-  );
+  return selectedValuesRef.value
+    .map((v) => allOptionsRef.value.find((opt) => deepEqual(opt.value, v)))
+    .filter((v) => v !== undefined);
 });
 
 const filteredOptionsRef = computed(() => {
@@ -234,7 +254,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;
@@ -244,16 +264,17 @@ const selectOption = (v: M) => {
   const values = unref(selectedValuesRef);
   emitModel(deepIncludes(values, v) ? values.filter((it) => !deepEqual(it, v)) : [...values, v]);
   if (props.resetSearchOnSelect) {
-    data.search = '';
+    data.search = "";
   }
   inputRef.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 = () => inputRef.value?.focus();
 
-const toggleOpen = () => data.open = !data.open;
+const toggleOpen = () => (data.open = !data.open);
 
 const onFocusOut = (event: FocusEvent) => {
   const relatedTarget = event.relatedTarget as Node | null;
@@ -267,13 +288,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;
     inputRef.value?.focus();
   }
@@ -286,15 +307,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;
 
@@ -327,7 +348,7 @@ const computedError = computed(() => {
   }
 
   if (props.modelValue.length && selectedOptionsRef.value.length !== props.modelValue.length) {
-    return 'The selected values are not one of the options';
+    return "The selected values are not one of the options";
   }
 
   return undefined;
@@ -358,7 +379,14 @@ const computedError = computed(() => {
             @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>
@@ -411,7 +439,9 @@ const computedError = computed(() => {
             use-checkbox
             @click.stop="selectOption(item.value)"
           />
-          <div v-if="!filteredOptionsRef.length && !isOptionsLoading" class="nothing-found">{{ emptyOptionsText }}</div>
+          <div v-if="!filteredOptionsRef.length && !isOptionsLoading" class="nothing-found">
+            {{ emptyOptionsText }}
+          </div>
         </DropdownOverlay>
         <DoubleContour class="pl-autocomplete-multi__contour" :group-position="groupPosition" />
       </div>

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

@@ -1,30 +1,31 @@
-import { describe, it, expect } from 'vitest';
+import { describe, it, expect } from "vitest";
 
-import { mount } from '@vue/test-utils';
-import PlAutocompleteMulti from '../PlAutocompleteMulti.vue';
-import { delay } from '@milaboratories/helpers';
+import { mount } from "@vue/test-utils";
+import PlAutocompleteMulti from "../PlAutocompleteMulti.vue";
+import { delay } from "@milaboratories/helpers";
 
-describe('PlAutocompleteMulti', () => {
-  it('modelValue', async () => {
+describe("PlAutocompleteMulti", () => {
+  it("modelValue", async () => {
     const wrapper = mount(PlAutocompleteMulti, {
       props: {
-        'modelValue': [1],
-        'onUpdate:modelValue': (e) => wrapper.setProps({ modelValue: e }),
-        'debounce': 0,
-        'optionsSearch': async () => {
+        modelValue: [1],
+        "onUpdate:modelValue": (e) => wrapper.setProps({ modelValue: e }),
+        debounce: 0,
+        optionsSearch: async () => {
           return [
-            { label: 'Option 1', value: 1 },
-            { label: 'Option 2', value: 2 },
+            { label: "Option 1", value: 1 },
+            { label: "Option 2", value: 2 },
           ];
         },
       },
     });
 
     await delay(10);
-    await wrapper.find('.pl-autocomplete-multi__envelope').trigger('click');
-    await wrapper.find('input').trigger('focus');
+    await wrapper.find(".pl-autocomplete-multi__envelope").trigger("click");
+    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[];
 
     await delay(1);
 
@@ -36,7 +37,7 @@ describe('PlAutocompleteMulti', () => {
 
     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/PlAutocompleteMulti/index.ts

@@ -1 +1,4 @@
-export { default as PlAutocompleteMulti, type OptionsSearch as PlAutocompleteMultiOptionsSearch } from './PlAutocompleteMulti.vue';
+export {
+  default as PlAutocompleteMulti,
+  type OptionsSearch as PlAutocompleteMultiOptionsSearch,
+} from "./PlAutocompleteMulti.vue";

package/src/components/PlAutocompleteMulti/pl-autocomplete-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/PlBtnAccent/PlBtnAccent.vue

@@ -3,14 +3,14 @@
  * Accent button
  */
 export default {
-  name: 'PlBtnAccent',
+  name: "PlBtnAccent",
 };
 </script>
 
 <script lang="ts" setup>
-import './pl-btn-accent.scss';
-import type { MaskIconName16, Size } from '../../types';
-import BtnBase from '../../base/BtnBase.vue';
+import "./pl-btn-accent.scss";
+import type { MaskIconName16, Size } from "../../types";
+import BtnBase from "../../base/BtnBase.vue";
 
 const props = defineProps<{
   /**

package/src/components/PlBtnAccent/index.ts

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

package/src/components/PlBtnDanger/PlBtnDanger.vue

@@ -3,14 +3,14 @@
  * Danger button
  */
 export default {
-  name: 'PlBtnDanger',
+  name: "PlBtnDanger",
 };
 </script>
 
 <script lang="ts" setup>
-import './pl-btn-danger.scss';
-import type { MaskIconName16, Size } from '../../types';
-import BtnBase from '../../base/BtnBase.vue';
+import "./pl-btn-danger.scss";
+import type { MaskIconName16, Size } from "../../types";
+import BtnBase from "../../base/BtnBase.vue";
 
 const props = defineProps<{
   /**

package/src/components/PlBtnDanger/index.ts

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

package/src/components/PlBtnDanger/pl-btn-danger.scss

@@ -5,7 +5,7 @@
 
   & {
     --color-btn-background: var(--txt-error);
-    --color-btn-hover: #FF5C5C;
+    --color-btn-hover: #ff5c5c;
 
     background-color: var(--color-btn-background);
     border: none;

package/src/components/PlBtnGhost/PlBtnGhost.vue

@@ -3,16 +3,16 @@
  * Ghost button
  */
 export default {
-  name: 'PlBtnGhost',
+  name: "PlBtnGhost",
 };
 </script>
 
 <script lang="ts" setup>
-import './pl-btn-ghost.scss';
-import type { MaskIconName24, Size } from '../../types';
-import { PlMaskIcon24 } from '../PlMaskIcon24';
-import { computed, ref, useSlots } from 'vue';
-import { useRipple } from '../../composition/useRipple';
+import "./pl-btn-ghost.scss";
+import type { MaskIconName24, Size } from "../../types";
+import { PlMaskIcon24 } from "../PlMaskIcon24";
+import { computed, ref, useSlots } from "vue";
+import { useRipple } from "../../composition/useRipple";
 
 const props = withDefaults(
   defineProps<{
@@ -48,8 +48,8 @@ const props = withDefaults(
   },
 );
 
-const small = computed(() => props.size === 'small');
-const large = computed(() => props.size === 'large');
+const small = computed(() => props.size === "small");
+const large = computed(() => props.size === "large");
 
 const btnRef = ref();
 

package/src/components/PlBtnGhost/index.ts

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

package/src/components/PlBtnGroup/PlBtnGroup.vue

@@ -3,17 +3,17 @@
  * A component for selecting one value from a list of options
  */
 export default {
-  name: 'PlBtnGroup',
+  name: "PlBtnGroup",
 };
 </script>
 
 <script lang="ts" setup generic="M = unknown">
-import './pl-btn-group.scss';
-import { computed, useSlots } from 'vue';
-import { PlTooltip } from '../PlTooltip';
-import InnerBorder from '../../utils/InnerBorder.vue';
-import type { SimpleOption } from '../../types';
-import { getErrorMessage } from '../../helpers/error.ts';
+import "./pl-btn-group.scss";
+import { computed, useSlots } from "vue";
+import { PlTooltip } from "../PlTooltip";
+import InnerBorder from "../../utils/InnerBorder.vue";
+import type { SimpleOption } from "../../types";
+import { getErrorMessage } from "../../helpers/error.ts";
 
 const slots = useSlots();
 
@@ -21,10 +21,10 @@ const emit = defineEmits<{
   /**
    * Emitted when the model value is updated.
    */
-  (e: 'update:modelValue', value: M): void;
+  (e: "update:modelValue", value: M): void;
 }>();
 
-const emitModel = (v: M) => emit('update:modelValue', v);
+const emitModel = (v: M) => emit("update:modelValue", v);
 
 const props = defineProps<{
   /**
@@ -59,7 +59,7 @@ const props = defineProps<{
 
 const normalizedOptions = computed(() =>
   props.options.map((it) => ({
-    label: 'label' in it ? it.label : it.text,
+    label: "label" in it ? it.label : it.text,
     value: it.value,
   })),
 );

package/src/components/PlBtnGroup/index.ts

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

package/src/components/PlBtnGroup/pl-btn-group.scss

@@ -84,9 +84,9 @@
       }
     }
 
-    &:not(.active)+.pl-btn-group__option:not(.active) {
+    &:not(.active) + .pl-btn-group__option:not(.active) {
       &::before {
-        content: '';
+        content: "";
         position: absolute;
         width: 1px;
         height: 24px;
@@ -109,7 +109,7 @@
   }
 
   &.compact {
-    --pl-btn-group-height: 32px; 
+    --pl-btn-group-height: 32px;
   }
 
   &.disabled {
@@ -122,4 +122,4 @@
     // @TODO
     tab-index: unset !important;
   }
-}
+}

package/src/components/PlBtnLink/PlBtnLink.vue

@@ -1,8 +1,8 @@
 <script lang="ts" setup>
-import './pl-btn-link.scss';
-import type { MaskIconName16, Size } from '../../types';
-import BtnSecondary from '../PlBtnSecondary/PlBtnSecondary.vue';
-import { ref } from 'vue';
+import "./pl-btn-link.scss";
+import type { MaskIconName16, Size } from "../../types";
+import BtnSecondary from "../PlBtnSecondary/PlBtnSecondary.vue";
+import { ref } from "vue";
 
 const props = defineProps<{
   /**
@@ -35,7 +35,12 @@ const hover = ref(false);
 </script>
 
 <template>
-  <div class="ui-btn-link" :class="{ disabled, loading, hover }" @mouseover="hover = true" @mouseleave="hover = false">
+  <div
+    class="ui-btn-link"
+    :class="{ disabled, loading, hover }"
+    @mouseover="hover = true"
+    @mouseleave="hover = false"
+  >
     <BtnSecondary round :hover="hover" v-bind="props" />
     <slot />
   </div>

package/src/components/PlBtnLink/index.ts

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

package/src/components/PlBtnLink/pl-btn-link.scss

@@ -7,7 +7,8 @@
   gap: 12px;
   --color-text: var(--txt-01);
   color: var(--txt-01);
-  &.disabled,&.loading {
+  &.disabled,
+  &.loading {
     color: var(--color-dis-01);
   }
   &:hover {

package/src/components/PlBtnPrimary/PlBtnPrimary.vue

@@ -3,14 +3,14 @@
  * Primary button
  */
 export default {
-  name: 'PlBtnPrimary',
+  name: "PlBtnPrimary",
 };
 </script>
 
 <script lang="ts" setup>
-import './pl-btn-primary.scss';
-import type { MaskIconName16, Size } from '../../types';
-import BtnBase from '../../base/BtnBase.vue';
+import "./pl-btn-primary.scss";
+import type { MaskIconName16, Size } from "../../types";
+import BtnBase from "../../base/BtnBase.vue";
 
 const props = defineProps<{
   /**

package/src/components/PlBtnPrimary/__tests__/BtnPrimary.spec.ts

@@ -1,15 +1,15 @@
-import { describe, it, expect } from 'vitest';
+import { describe, it, expect } from "vitest";
 
-import { mount } from '@vue/test-utils';
-import BtnPrimary from '../PlBtnPrimary.vue';
+import { mount } from "@vue/test-utils";
+import BtnPrimary from "../PlBtnPrimary.vue";
 
-describe('BtnPrimary', () => {
-  it('renders properly', () => {
+describe("BtnPrimary", () => {
+  it("renders properly", () => {
     const wrapper = mount(BtnPrimary, {
       slots: {
-        default: 'Button text',
+        default: "Button text",
       },
     });
-    expect(wrapper.text()).toContain('Button text');
+    expect(wrapper.text()).toContain("Button text");
   });
 });

package/src/components/PlBtnPrimary/index.ts

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