@milaboratories/uikit 2.10.15 → 2.10.16

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

@@ -1,43 +1,43 @@
-import { describe, it, expect } from 'vitest';
+import { describe, it, expect } from "vitest";
 
-import { mount } from '@vue/test-utils';
-import PlDropdownRef from '../PlDropdownRef.vue';
-import { delay } from '@milaboratories/helpers';
+import { mount } from "@vue/test-utils";
+import PlDropdownRef from "../PlDropdownRef.vue";
+import { delay } from "@milaboratories/helpers";
 
-describe('PlDropdownRef', () => {
-  it('modelValue', async () => {
+describe("PlDropdownRef", () => {
+  it("modelValue", async () => {
     const wrapper = mount(PlDropdownRef, {
       props: {
-        'modelValue': {
+        modelValue: {
           __isRef: true as const,
-          blockId: '1',
-          name: 'Ref to block 1',
+          blockId: "1",
+          name: "Ref to block 1",
         },
-        'onUpdate:modelValue': (e) => wrapper.setProps({ modelValue: e }),
-        'options': [
+        "onUpdate:modelValue": (e) => wrapper.setProps({ modelValue: e }),
+        options: [
           {
-            label: 'Ref 1',
+            label: "Ref 1",
             ref: {
               __isRef: true as const,
-              blockId: '1',
-              name: 'Ref to block 1',
+              blockId: "1",
+              name: "Ref to block 1",
             },
           },
           {
-            label: 'Ref 2',
+            label: "Ref 2",
             ref: {
               __isRef: true as const,
-              blockId: '2',
-              name: 'Ref to block 2',
+              blockId: "2",
+              name: "Ref to block 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);
 
@@ -47,12 +47,12 @@ describe('PlDropdownRef', () => {
 
     await delay(20);
 
-    expect(wrapper.props('modelValue')).toStrictEqual({
+    expect(wrapper.props("modelValue")).toStrictEqual({
       __isRef: true as const,
-      blockId: '2',
-      name: 'Ref to block 2',
+      blockId: "2",
+      name: "Ref to block 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/PlDropdownRef/index.ts

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

package/src/components/PlEditableTitle/PlEditableTitle.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
-import { useTransformedModel } from '../../composition/useTransformedModel';
-import style from './pl-editable-title.module.scss';
-import { computed, onMounted, ref } from 'vue';
+import { useTransformedModel } from "../../composition/useTransformedModel";
+import style from "./pl-editable-title.module.scss";
+import { computed, onMounted, ref } from "vue";
 
 const model = defineModel<string>();
 
@@ -45,8 +45,8 @@ const props = withDefaults(
     validate?: (v: string) => unknown;
   }>(),
   {
-    placeholder: 'Title',
-    maxWidth: '80%',
+    placeholder: "Title",
+    maxWidth: "80%",
     prefix: undefined,
     maxLength: 1000,
     minLength: undefined,
@@ -59,8 +59,8 @@ const local = useTransformedModel(model, {
     return false;
   },
   parse: (v): string => {
-    if (typeof v !== 'string') {
-      throw Error('value should be a string');
+    if (typeof v !== "string") {
+      throw Error("value should be a string");
     }
 
     if (props.maxLength && v.length > props.maxLength) {
@@ -71,7 +71,7 @@ const local = useTransformedModel(model, {
       throw Error(`Min title length is ${props.minLength} characters`);
     }
 
-    if (typeof props.validate === 'function') {
+    if (typeof props.validate === "function") {
       props.validate(v);
     }
 
@@ -82,7 +82,7 @@ const local = useTransformedModel(model, {
 const inputRef = ref<HTMLInputElement>();
 
 const computedStyle = computed(() => ({
-  maxWidth: props.maxWidth ?? '80%',
+  maxWidth: props.maxWidth ?? "80%",
 }));
 
 const save = () => {
@@ -95,7 +95,6 @@ onMounted(() => {
     inputRef.value?.focus();
   }
 });
-
 </script>
 
 <template>

package/src/components/PlEditableTitle/index.ts

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

package/src/components/PlEditableTitle/pl-editable-title.module.scss

@@ -10,11 +10,11 @@
   --mask-size: 24px;
 
   &:hover {
-    --mask-icon-bg-color: var(--ic-02);  
+    --mask-icon-bg-color: var(--ic-02);
   }
 
   &:focus-within:not(&:hover) {
-    --mask-icon-bg-color: transparent;  
+    --mask-icon-bg-color: transparent;
   }
 
   .container {
@@ -57,7 +57,7 @@
     }
 
     &::before {
-      content: '';
+      content: "";
       @include mask-var(url(../../assets/icons/icon-assets-min/24_edit.svg));
       position: absolute;
       right: calc((var(--mask-size)) * -1);
@@ -74,4 +74,4 @@
     white-space: nowrap;
     @include field-error();
   }
-}
+}

package/src/components/PlElementList/PlElementList.vue

@@ -1,13 +1,17 @@
-<script generic="T extends unknown = unknown, K extends number | string = number | string" lang="ts" setup>
-import { isFunction, shallowHash } from '@milaboratories/helpers';
-import { useSortable } from '@vueuse/integrations/useSortable';
-import { type SortableEvent } from 'sortablejs';
-import type { ShallowRef } from 'vue';
-import { computed, shallowRef, watch } from 'vue';
-import PlElementListItem from './PlElementListItem.vue';
-import { moveElements } from './utils.ts';
-
-const itemsRef = defineModel<T[]>('items', { required: true });
+<script
+  generic="T extends unknown = unknown, K extends number | string = number | string"
+  lang="ts"
+  setup
+>
+import { isFunction, shallowHash } from "@milaboratories/helpers";
+import { useSortable } from "@vueuse/integrations/useSortable";
+import { type SortableEvent } from "sortablejs";
+import type { ShallowRef } from "vue";
+import { computed, shallowRef, watch } from "vue";
+import PlElementListItem from "./PlElementListItem.vue";
+import { moveElements } from "./utils.ts";
+
+const itemsRef = defineModel<T[]>("items", { required: true });
 
 const props = withDefaults(
   defineProps<{
@@ -43,7 +47,8 @@ const props = withDefaults(
     isPinnable?: (item: T, index: number) => boolean;
     isPinned?: (item: T, index: number) => boolean;
     onPin?: (item: T, index: number) => void | boolean;
-  }>(), {
+  }>(),
+  {
     getItemKey: (item: T) => JSON.stringify(item) as K,
 
     itemClass: undefined,
@@ -80,14 +85,14 @@ const props = withDefaults(
 );
 
 const emits = defineEmits<{
-  (e: 'itemClick', item: T): void;
+  (e: "itemClick", item: T): void;
 }>();
 
 const slots = defineSlots<{
-  ['item-title']: (props: { item: T; index: number }) => unknown;
-  ['item-content']?: (props: { item: T; index: number }) => unknown;
-  ['item-before']?: (props: { item: T; index: number }) => unknown;
-  ['item-after']?: (props: { item: T; index: number }) => unknown;
+  ["item-title"]: (props: { item: T; index: number }) => unknown;
+  ["item-content"]?: (props: { item: T; index: number }) => unknown;
+  ["item-before"]?: (props: { item: T; index: number }) => unknown;
+  ["item-after"]?: (props: { item: T; index: number }) => unknown;
 }>();
 
 const dndSortingEnabled = computed((): boolean => {
@@ -97,7 +102,9 @@ const dndSortingEnabled = computed((): boolean => {
 const pinnedItemsRef = computed(() => itemsRef.value.filter(isPinnedItem));
 const hasPinnedItems = computed(() => pinnedItemsRef.value.length > 0);
 
-const unpinnedItemsRef = computed(() => itemsRef.value.filter((item, index) => !isPinnedItem(item, index)));
+const unpinnedItemsRef = computed(() =>
+  itemsRef.value.filter((item, index) => !isPinnedItem(item, index)),
+);
 const hasUnpinnedItems = computed(() => unpinnedItemsRef.value.length > 0);
 
 const domProjectionItemsRef = shallowRef<undefined | T[]>();
@@ -122,7 +129,8 @@ const versionRef = computed<number>((oldVersion) => {
   const domProjectionKeysSet = new Set(domProjectionKeys);
 
   for (let i = 0; i < currentKeys.length; i++) {
-    const hasInconsistentPosition = domProjectionKeysSet.has(currentKeys[i]) && domProjectionKeys[i] !== currentKeys[i];
+    const hasInconsistentPosition =
+      domProjectionKeysSet.has(currentKeys[i]) && domProjectionKeys[i] !== currentKeys[i];
 
     if (hasInconsistentPosition) {
       return shallowHash(...currentKeys);
@@ -133,9 +141,19 @@ const versionRef = computed<number>((oldVersion) => {
 });
 
 createSortable(hasPinnedItems, pinnedContainerRef, pinnedItemsRef, () => 0);
-createSortable(hasUnpinnedItems, unpinnedContainerRef, unpinnedItemsRef, () => pinnedItemsRef.value.length);
+createSortable(
+  hasUnpinnedItems,
+  unpinnedContainerRef,
+  unpinnedItemsRef,
+  () => pinnedItemsRef.value.length,
+);
 
-function createSortable(toggler: ShallowRef<boolean>, elRef: ShallowRef<undefined | HTMLElement>, itemsRef: ShallowRef<T[]>, getOffset: () => number) {
+function createSortable(
+  toggler: ShallowRef<boolean>,
+  elRef: ShallowRef<undefined | HTMLElement>,
+  itemsRef: ShallowRef<T[]>,
+  getOffset: () => number,
+) {
   const sortable = useSortable(elRef, itemsRef, {
     handle: `[data-draggable="true"]`,
     animation: 150,
@@ -145,7 +163,7 @@ function createSortable(toggler: ShallowRef<boolean>, elRef: ShallowRef<undefine
     forceAutoScrollFallback: true,
     onUpdate: (evt: SortableEvent) => {
       if (evt.oldIndex == null || evt.newIndex == null) {
-        throw new Error('Sortable event has no index');
+        throw new Error("Sortable event has no index");
       }
       if (props.onDragEnd?.(evt.oldIndex, evt.newIndex) !== false) {
         moveItems(getOffset() + evt.oldIndex, getOffset() + evt.newIndex, true);
@@ -187,17 +205,19 @@ function isActiveItem(item: T, index: number): boolean {
 
 function isDraggableItem(item: T, index: number): boolean {
   if (props.disableDragging === true) return false;
-  return (props.isDraggable?.(item, index) ?? true);
+  return props.isDraggable?.(item, index) ?? true;
 }
 
 function isRemovableItem(item: T, index: number): boolean {
   if (props.disableRemoving === true) return false;
-  return (props.isRemovable?.(item, index) ?? true);
+  return props.isRemovable?.(item, index) ?? true;
 }
 
 function isToggableItem(item: T, index: number): boolean {
   if (props.disableToggling === true) return false;
-  return (props.isToggable?.(item, index) ?? (isFunction(props.isToggled) || isFunction(props.onToggle)));
+  return (
+    props.isToggable?.(item, index) ?? (isFunction(props.isToggled) || isFunction(props.onToggle))
+  );
 }
 
 function isToggledItem(item: T, index: number): boolean {
@@ -206,7 +226,7 @@ function isToggledItem(item: T, index: number): boolean {
 
 function isPinnableItem(item: T, index: number): boolean {
   if (props.disablePinning === true) return false;
-  return (props.isPinnable?.(item, index) ?? (isFunction(props.isPinned) || isFunction(props.onPin)));
+  return props.isPinnable?.(item, index) ?? (isFunction(props.isPinned) || isFunction(props.onPin));
 }
 
 function isPinnedItem(item: T, index: number): boolean {
@@ -215,7 +235,10 @@ function isPinnedItem(item: T, index: number): boolean {
 
 function isExpandableItem(item: T, index: number): boolean {
   if (props.disableExpanding === true) return false;
-  return (props.isExpandable?.(item, index) ?? (isFunction(props.isExpanded) || isFunction(props.onExpand)));
+  return (
+    props.isExpandable?.(item, index) ??
+    (isFunction(props.isExpanded) || isFunction(props.onExpand))
+  );
 }
 
 function isExpandedItem(item: T, index: number): boolean {
@@ -232,7 +255,7 @@ function handleToggle(item: T, index: number) {
 
 function handlePin(item: T, index: number) {
   if (index === -1) {
-    throw new Error('Pinnable item not found');
+    throw new Error("Pinnable item not found");
   }
 
   const alreadyPinned = pinnedItemsRef.value.includes(item);
@@ -247,9 +270,11 @@ function handleRemove(item: T, index: number) {
   itemsRef.value.splice(index, 1);
 }
 
-function getClassFunction(propsItemClass: string | string[] | ((item: T, index: number) => string | string[]) | undefined): (item: T, index: number) => null | string | string[] {
+function getClassFunction(
+  propsItemClass: string | string[] | ((item: T, index: number) => string | string[]) | undefined,
+): (item: T, index: number) => null | string | string[] {
   return (item: T, index: number): null | string | string[] => {
-    if (typeof propsItemClass === 'function') {
+    if (typeof propsItemClass === "function") {
       return propsItemClass(item, index);
     }
     return propsItemClass ?? null;
@@ -260,20 +285,19 @@ const getItemClassTitle = getClassFunction(props.itemClassTitle);
 const getItemClassContent = getClassFunction(props.itemClassContent);
 const getItemClassBefore = getClassFunction(props.itemClassBefore);
 const getItemClassAfter = getClassFunction(props.itemClassAfter);
-
 </script>
 
 <template>
   <div :class="$style.root">
     <div ref="pinnedContainerRef" :class="$style.list">
       <PlElementListItem
-        v-for="(pinnedItem, pinnedIndex) in pinnedItemsRef" :key="pinnedKeysRef[pinnedIndex]"
+        v-for="(pinnedItem, pinnedIndex) in pinnedItemsRef"
+        :key="pinnedKeysRef[pinnedIndex]"
         :class="[$style.item, getItemClass(pinnedItem, pinnedIndex)]"
         :titleClass="getItemClassTitle(pinnedItem, pinnedIndex)"
         :contentClass="getItemClassContent(pinnedItem, pinnedIndex)"
         :beforeClass="getItemClassBefore(pinnedItem, pinnedIndex)"
         :afterClass="getItemClassAfter(pinnedItem, pinnedIndex)"
-
         :index="pinnedIndex"
         :item="pinnedItem"
         :showDragHandle="dndSortingEnabled"
@@ -286,7 +310,6 @@ const getItemClassAfter = getClassFunction(props.itemClassAfter);
         :isPinned="true"
         :isExpandable="isExpandableItem(pinnedItem, pinnedIndex)"
         :isExpanded="isExpandedItem(pinnedItem, pinnedIndex)"
-
         @click="emits('itemClick', pinnedItem)"
         @remove="handleRemove"
         @toggle="handleToggle"
@@ -309,13 +332,13 @@ const getItemClassAfter = getClassFunction(props.itemClassAfter);
     </div>
     <div v-if="hasUnpinnedItems" ref="unpinnedContainerRef" :class="$style.list">
       <PlElementListItem
-        v-for="(unpinnedItem, unpinnedIndex) in unpinnedItemsRef" :key="unpinnedKeysRef[unpinnedIndex]"
+        v-for="(unpinnedItem, unpinnedIndex) in unpinnedItemsRef"
+        :key="unpinnedKeysRef[unpinnedIndex]"
         :class="[$style.item, getItemClass(unpinnedItem, unpinnedIndex)]"
         :titleClass="getItemClassTitle(unpinnedItem, unpinnedIndex)"
         :contentClass="getItemClassContent(unpinnedItem, unpinnedIndex)"
         :beforeClass="getItemClassBefore(unpinnedItem, unpinnedIndex)"
         :afterClass="getItemClassAfter(unpinnedItem, unpinnedIndex)"
-
         :index="unpinnedIndex + (pinnedItemsRef?.length ?? 0)"
         :item="unpinnedItem"
         :showDragHandle="dndSortingEnabled"
@@ -328,7 +351,6 @@ const getItemClassAfter = getClassFunction(props.itemClassAfter);
         :isPinned="false"
         :isExpandable="isExpandableItem(unpinnedItem, unpinnedIndex)"
         :isExpanded="isExpandedItem(unpinnedItem, unpinnedIndex)"
-
         @click="emits('itemClick', unpinnedItem)"
         @remove="handleRemove"
         @toggle="handleToggle"
@@ -350,7 +372,8 @@ const getItemClassAfter = getClassFunction(props.itemClassAfter);
 </template>
 
 <style module>
-.root, .list {
+.root,
+.list {
   display: flex;
   flex-direction: column;
   gap: 8px;

package/src/components/PlElementList/PlElementListItem.vue

@@ -1,7 +1,7 @@
 <script generic="T extends unknown = unknown" lang="ts" setup>
-import { computed } from 'vue';
-import { PlIcon16 } from '../PlIcon16';
-import { PlIcon24 } from '../PlIcon24';
+import { computed } from "vue";
+import { PlIcon16 } from "../PlIcon16";
+import { PlIcon24 } from "../PlIcon24";
 
 const props = defineProps<{
   item: T;
@@ -29,16 +29,16 @@ const slots = defineSlots<{
   after?: (props: { item: T; index: number }) => unknown;
   before?: (props: { item: T; index: number }) => unknown;
 }>();
-const hasContentSlot = computed(() => slots['content'] !== undefined);
-const hasAfterSlot = computed(() => slots['after'] !== undefined);
-const hasBeforeSlot = computed(() => slots['before'] !== undefined);
+const hasContentSlot = computed(() => slots["content"] !== undefined);
+const hasAfterSlot = computed(() => slots["after"] !== undefined);
+const hasBeforeSlot = computed(() => slots["before"] !== undefined);
 
 const emit = defineEmits<{
-  (e: 'click', item: MouseEvent): void;
-  (e: 'expand', item: T, index: number): void;
-  (e: 'toggle', item: T, index: number): void;
-  (e: 'pin', item: T, index: number): void;
-  (e: 'remove', item: T, index: number): void;
+  (e: "click", item: MouseEvent): void;
+  (e: "expand", item: T, index: number): void;
+  (e: "toggle", item: T, index: number): void;
+  (e: "pin", item: T, index: number): void;
+  (e: "remove", item: T, index: number): void;
 }>();
 </script>
 
@@ -48,27 +48,39 @@ const emit = defineEmits<{
       <slot name="before" :item="props.item" :index="props.index" />
     </div>
     <div
-      :class="[$style.root, $attrs.class, {
-        [$style.active]: props.isActive,
-        [$style.pinned]: props.isPinned,
-        [$style.opened]: props.isExpanded,
-        [$style.disabled]: props.isToggled,
-      }]"
+      :class="[
+        $style.root,
+        $attrs.class,
+        {
+          [$style.active]: props.isActive,
+          [$style.pinned]: props.isPinned,
+          [$style.opened]: props.isExpanded,
+          [$style.disabled]: props.isToggled,
+        },
+      ]"
     >
       <div
-        :class="[$style.head, titleClass, {
-          [$style.clickable]: hasContentSlot,
-        }]"
+        :class="[
+          $style.head,
+          titleClass,
+          {
+            [$style.clickable]: hasContentSlot,
+          },
+        ]"
         @click="isExpandable && emit('expand', props.item, props.index)"
       >
         <div
           v-if="props.showDragHandle"
-          :class="[$style.action, $style.draggable, { [$style.disable]: !props.isDraggable } ]"
+          :class="[$style.action, $style.draggable, { [$style.disable]: !props.isDraggable }]"
           :data-draggable="props.isDraggable"
         >
           <PlIcon16 name="drag-dots" />
         </div>
-        <PlIcon16 v-if="isExpandable" :class="[$style.contentChevron, { [$style.opened]: props.isExpanded }]" name="chevron-down" />
+        <PlIcon16
+          v-if="isExpandable"
+          :class="[$style.contentChevron, { [$style.opened]: props.isExpanded }]"
+          name="chevron-down"
+        />
 
         <div :class="$style.title">
           <slot name="title" :item="props.item" :index="props.index" />
@@ -84,10 +96,14 @@ const emit = defineEmits<{
           </div>
           <div
             v-if="props.isPinnable"
-            :class="[$style.action, $style.clickable, {
-              [$style.disable]: !props.isPinnable,
-              [$style.activated]: props.isPinned,
-            }]"
+            :class="[
+              $style.action,
+              $style.clickable,
+              {
+                [$style.disable]: !props.isPinnable,
+                [$style.activated]: props.isPinned,
+              },
+            ]"
             @click.stop="emit('pin', props.item, props.index)"
           >
             <PlIcon24 name="pin" size="16" />
@@ -115,7 +131,7 @@ const emit = defineEmits<{
 </template>
 
 <style module>
-@use '../../assets/variables.scss' as *;
+@use "../../assets/variables.scss" as *;
 
 .root {
   --background: rgba(255, 255, 255, 0.8);
@@ -128,7 +144,7 @@ const emit = defineEmits<{
   &:global(.sortable-chosen) {
     --head-background: var(--gradient-light-lime);
     --border-color: var(--border-color-focus);
-    --box-shadow: var(--box-shadow-active)
+    --box-shadow: var(--box-shadow-active);
   }
 }
 .root {
@@ -139,7 +155,7 @@ const emit = defineEmits<{
   border: 1px solid var(--border-color);
   background-color: var(--background);
   transition: box-shadow 0.15s;
-  box-shadow: var(--box-shadow);;
+  box-shadow: var(--box-shadow);
   overflow: hidden;
 
   &:hover {