@milaboratories/uikit 2.10.15 → 2.10.16

package/src/components/PlChartStackedBar/StackedRowCompact.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import { computed } from 'vue';
-import type { PlChartStackedBarSegment } from './types';
+import { computed } from "vue";
+import type { PlChartStackedBarSegment } from "./types";
 
 const props = defineProps<{
   value: PlChartStackedBarSegment[];
@@ -8,8 +8,8 @@ const props = defineProps<{
 }>();
 
 const style = computed(() => ({
-  height: props.height ?? '100%',
-  minHeight: '24px',
+  height: props.height ?? "100%",
+  minHeight: "24px",
 }));
 
 const parts = computed(() => {
@@ -29,9 +29,7 @@ const parts = computed(() => {
 </script>
 
 <template>
-  <div
-    :class="[$style.component]" :style="style"
-  >
+  <div :class="[$style.component]" :style="style">
     <div :class="$style.container">
       <div v-if="!parts.length" :class="$style.notReady">Not ready</div>
       <div
@@ -40,7 +38,7 @@ const parts = computed(() => {
         :title.prop="p.description ?? p.label"
         :style="{
           width: `${p.fraction}%`,
-          backgroundColor: p.color
+          backgroundColor: p.color,
         }"
       />
     </div>

package/src/components/PlChartStackedBar/index.ts

@@ -1,4 +1,4 @@
-export { default as PlChartStackedBar } from './PlChartStackedBar.vue';
-export { default as PlChartStackedBarCompact } from './PlChartStackedBarCompact.vue';
+export { default as PlChartStackedBar } from "./PlChartStackedBar.vue";
+export { default as PlChartStackedBarCompact } from "./PlChartStackedBarCompact.vue";
 
-export * from './types';
+export * from "./types";

package/src/components/PlChartStackedBar/types.ts

@@ -1,4 +1,4 @@
-import type { Color } from '../../colors';
+import type { Color } from "../../colors";
 
 export type PlChartStackedBarSegment = {
   value: number;

package/src/components/PlCheckbox/PlCheckbox.vue

@@ -1,20 +1,20 @@
 <script lang="ts">
 /** Component for boolean model manipulation */
 export default {
-  name: 'PlCheckbox',
+  name: "PlCheckbox",
 };
 </script>
 
 <script lang="ts" setup>
-import { useSlots } from 'vue';
-import './pl-checkbox.scss';
-import PlCheckboxBase from './PlCheckboxBase.vue';
+import { useSlots } from "vue";
+import "./pl-checkbox.scss";
+import PlCheckboxBase from "./PlCheckboxBase.vue";
 
 defineEmits<{
   /**
    * Emitted when the model value is updated.
    */
-  (e: 'update:modelValue', value: boolean): void;
+  (e: "update:modelValue", value: boolean): void;
 }>();
 
 const props = defineProps<{

package/src/components/PlCheckbox/PlCheckboxBase.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
-import './pl-checkbox-base.scss';
+import "./pl-checkbox-base.scss";
 
-defineEmits(['update:modelValue']);
+defineEmits(["update:modelValue"]);
 
 const props = defineProps<{
   modelValue: boolean;
@@ -15,9 +15,7 @@ const props = defineProps<{
     tabindex="0"
     class="pl-checkbox-base"
     :class="{
-      ...(props.indeterminate
-        ? { indeterminate: true }
-        : { checked: props.modelValue }),
+      ...(props.indeterminate ? { indeterminate: true } : { checked: props.modelValue }),
       disabled,
     }"
     @click="$emit('update:modelValue', !modelValue)"

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

@@ -1,29 +1,29 @@
-import { describe, it, expect } from 'vitest';
+import { describe, it, expect } from "vitest";
 
-import { mount } from '@vue/test-utils';
-import PlCheckbox from '../PlCheckbox.vue';
+import { mount } from "@vue/test-utils";
+import PlCheckbox from "../PlCheckbox.vue";
 
-describe('PlCheckbox', () => {
-  it('renders properly', async () => {
+describe("PlCheckbox", () => {
+  it("renders properly", async () => {
     const wrapper = mount(PlCheckbox, {
       slots: {
-        default: 'Slot text',
+        default: "Slot text",
       },
       props: {
-        'modelValue': false,
-        'onUpdate:modelValue': (e) => wrapper.setProps({ modelValue: e }),
+        modelValue: false,
+        "onUpdate:modelValue": (e) => wrapper.setProps({ modelValue: e }),
       },
     });
 
-    expect(wrapper.text()).toContain('Slot text');
+    expect(wrapper.text()).toContain("Slot text");
 
-    await wrapper.find('.pl-checkbox-base').trigger('click');
-    expect(wrapper.props('modelValue')).toBe(true);
+    await wrapper.find(".pl-checkbox-base").trigger("click");
+    expect(wrapper.props("modelValue")).toBe(true);
 
-    await wrapper.find('.pl-checkbox-base').trigger('click');
-    expect(wrapper.props('modelValue')).toBe(false);
+    await wrapper.find(".pl-checkbox-base").trigger("click");
+    expect(wrapper.props("modelValue")).toBe(false);
 
-    await wrapper.find('.pl-checkbox-base').trigger('click');
-    expect(wrapper.props('modelValue')).toBe(true);
+    await wrapper.find(".pl-checkbox-base").trigger("click");
+    expect(wrapper.props("modelValue")).toBe(true);
   });
 });

package/src/components/PlCheckbox/index.ts

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

package/src/components/PlCheckbox/pl-checkbox-base.scss

@@ -1,10 +1,10 @@
 .pl-checkbox-base {
-  --enabled-unchecked-icon: url('../../assets/images/24_checkbox-light-enabled-unchecked.svg');
-  --enabled-checked-icon: url('../../assets/images/24_checkbox-light-enabled-checked.svg');
-  --enabled-indeterminate-icon: url('../../assets/images/24_checkbox-light-enabled-indeterminate.svg');
-  --disabled-unchecked-icon: url('../../assets/images/24_checkbox-light-disabled-unchecked.svg');
-  --disabled-checked-icon: url('../../assets/images/24_checkbox-light-disabled-checked.svg');
-  --disabled-indeterminate-icon: url('../../assets/images/24_checkbox-light-disabled-indeterminate.svg');
+  --enabled-unchecked-icon: url("../../assets/images/24_checkbox-light-enabled-unchecked.svg");
+  --enabled-checked-icon: url("../../assets/images/24_checkbox-light-enabled-checked.svg");
+  --enabled-indeterminate-icon: url("../../assets/images/24_checkbox-light-enabled-indeterminate.svg");
+  --disabled-unchecked-icon: url("../../assets/images/24_checkbox-light-disabled-unchecked.svg");
+  --disabled-checked-icon: url("../../assets/images/24_checkbox-light-disabled-checked.svg");
+  --disabled-indeterminate-icon: url("../../assets/images/24_checkbox-light-disabled-indeterminate.svg");
 
   cursor: pointer;
   outline: none;
@@ -36,11 +36,11 @@
   }
 
   [data-theme="dark"] & {
-    --enabled-unchecked-icon: url('../../assets/images/24_checkbox-dark-enabled-unchecked.svg');
-    --enabled-checked-icon: url('../../assets/images/24_checkbox-dark-enabled-checked.svg');
-    --enabled-indeterminate-icon: url('../../assets/images/24_checkbox-dark-enabled-indeterminate.svg');
-    --disabled-unchecked-icon: url('../../assets/images/24_checkbox-dark-disabled-unchecked.svg');
-    --disabled-checked-icon: url('../../assets/images/24_checkbox-dark-disabled-checked.svg');
-    --disabled-indeterminate-icon: url('../../assets/images/24_checkbox-dark-disabled-indeterminate.svg');
+    --enabled-unchecked-icon: url("../../assets/images/24_checkbox-dark-enabled-unchecked.svg");
+    --enabled-checked-icon: url("../../assets/images/24_checkbox-dark-enabled-checked.svg");
+    --enabled-indeterminate-icon: url("../../assets/images/24_checkbox-dark-enabled-indeterminate.svg");
+    --disabled-unchecked-icon: url("../../assets/images/24_checkbox-dark-disabled-unchecked.svg");
+    --disabled-checked-icon: url("../../assets/images/24_checkbox-dark-disabled-checked.svg");
+    --disabled-indeterminate-icon: url("../../assets/images/24_checkbox-dark-disabled-indeterminate.svg");
   }
-}
+}

package/src/components/PlCheckbox/pl-checkbox.scss

@@ -4,7 +4,7 @@
   display: flex;
   align-items: center;
   gap: 8px;
-  
+
   &.disabled {
     --color-label: var(--color-dis-01);
     --cursor-label: default;
@@ -19,4 +19,4 @@
     display: inline-flex;
     align-items: center;
   }
-}
+}

package/src/components/PlCheckboxGroup/PlCheckboxGroup.vue

@@ -3,21 +3,21 @@
  * Component for selecting multiple values from a list of options
  */
 export default {
-  name: 'PlCheckboxGroup',
+  name: "PlCheckboxGroup",
 };
 </script>
 
 <script lang="ts" setup generic="M = unknown">
-import './pl-checkbox-group.scss';
-import type { SimpleOption } from '../../types';
-import PlCheckboxBase from '../PlCheckbox/PlCheckboxBase.vue';
-import { PlTooltip } from '../PlTooltip';
-import { useSlots } from 'vue';
+import "./pl-checkbox-group.scss";
+import type { SimpleOption } from "../../types";
+import PlCheckboxBase from "../PlCheckbox/PlCheckboxBase.vue";
+import { PlTooltip } from "../PlTooltip";
+import { useSlots } from "vue";
 
 const slots = useSlots();
 
 const emit = defineEmits<{
-  (e: 'update:modelValue', v: M[]): void;
+  (e: "update:modelValue", v: M[]): void;
 }>();
 
 const props = defineProps<{
@@ -45,7 +45,10 @@ const hasValue = (value: M) => {
 
 const updateModel = (value: M) => {
   const values = props.modelValue ?? [];
-  emit('update:modelValue', hasValue(value) ? values.filter((v) => v !== value) : [...values, value]);
+  emit(
+    "update:modelValue",
+    hasValue(value) ? values.filter((v) => v !== value) : [...values, value],
+  );
 };
 </script>
 
@@ -59,8 +62,19 @@ const updateModel = (value: M) => {
         </template>
       </PlTooltip>
     </label>
-    <div v-for="(opt, i) in options.map((it) => ({ label: 'label' in it ? it.label : it.text, value: it.value }))" :key="i">
-      <PlCheckboxBase :disabled="disabled" :label="opt.label" :model-value="hasValue(opt.value)" @update:model-value="() => updateModel(opt.value)" />
+    <div
+      v-for="(opt, i) in options.map((it) => ({
+        label: 'label' in it ? it.label : it.text,
+        value: it.value,
+      }))"
+      :key="i"
+    >
+      <PlCheckboxBase
+        :disabled="disabled"
+        :label="opt.label"
+        :model-value="hasValue(opt.value)"
+        @update:model-value="() => updateModel(opt.value)"
+      />
       <label @click.stop="() => updateModel(opt.value)">{{ opt.label }}</label>
     </div>
   </div>

package/src/components/PlCheckboxGroup/index.ts

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

package/src/components/PlCheckboxGroup/pl-checkbox-group.scss

@@ -31,4 +31,4 @@
       font-weight: 500;
     }
   }
-}
+}

package/src/components/PlChip/PlChip.vue

@@ -1,9 +1,9 @@
 <script lang="ts" setup>
-import './pl-chip.scss';
-import { onMounted, ref } from 'vue';
-import { PlTooltip } from '../PlTooltip';
+import "./pl-chip.scss";
+import { onMounted, ref } from "vue";
+import { PlTooltip } from "../PlTooltip";
 
-defineEmits(['close']);
+defineEmits(["close"]);
 
 defineProps<{
   closeable?: boolean;
@@ -29,7 +29,13 @@ onMounted(() => {
       <div class="pl-chip__text">
         <slot />
       </div>
-      <div v-if="closeable" tabindex="0" class="pl-chip__close" @keydown.enter="$emit('close')" @click.stop="$emit('close')">
+      <div
+        v-if="closeable"
+        tabindex="0"
+        class="pl-chip__close"
+        @keydown.enter="$emit('close')"
+        @click.stop="$emit('close')"
+      >
         <div class="pl-chip__close--icon" />
       </div>
     </div>

package/src/components/PlChip/index.ts

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

package/src/components/PlChip/pl-chip.scss

@@ -64,7 +64,7 @@
 
     &--icon {
       background: var(--mask-color);
-      @include mask(url('../../assets/images/16_close.svg'), 16px);
+      @include mask(url("../../assets/images/16_close.svg"), 16px);
     }
   }
-}
+}

package/src/components/PlClipboard/PlClipboard.vue

@@ -1,30 +1,30 @@
 <script lang="ts">
 export default {
-  name: 'PlClipboard',
+  name: "PlClipboard",
 };
 </script>
 
 <script lang="ts" setup>
-import { PlMaskIcon16 } from '../PlMaskIcon16';
-import type { Size } from '../../types.ts';
-import { computed, onUnmounted, ref } from 'vue';
+import { PlMaskIcon16 } from "../PlMaskIcon16";
+import type { Size } from "../../types.ts";
+import { computed, onUnmounted, ref } from "vue";
 
 const props = defineProps<{
   size?: Size;
 }>();
 
-const emit = defineEmits(['copy']);
+const emit = defineEmits(["copy"]);
 
 const copyEffect = ref<boolean>(false);
 
-const iconName = computed(() => copyEffect.value ? 'clipboard-copied' : 'clipboard');
+const iconName = computed(() => (copyEffect.value ? "clipboard-copied" : "clipboard"));
 
 let timeoutId: undefined | number;
 
 function onCopy() {
   clearTimeout(timeoutId);
   copyEffect.value = true;
-  emit('copy');
+  emit("copy");
   timeoutId = window.setTimeout(() => {
     copyEffect.value = false;
   }, 1000);

package/src/components/PlClipboard/index.ts

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

package/src/components/PlConfirmDialog.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { PlBtnPrimary } from './PlBtnPrimary';
-import { PlBtnSecondary } from './PlBtnSecondary';
-import { PlDialogModal } from './PlDialogModal';
+import { PlBtnPrimary } from "./PlBtnPrimary";
+import { PlBtnSecondary } from "./PlBtnSecondary";
+import { PlDialogModal } from "./PlDialogModal";
 
 const props = withDefaults(
   defineProps<{
@@ -12,7 +12,8 @@ const props = withDefaults(
     cancelLabel: string;
     onConfirm?: () => void;
     onCancel?: () => void;
-  }>(), {
+  }>(),
+  {
     opened: true,
     onCancel: undefined,
     onConfirm: undefined,
@@ -25,12 +26,12 @@ const emits = defineEmits<{
 }>();
 
 const handleConfirm = () => {
-  emits('confirm');
+  emits("confirm");
   props.onConfirm?.();
 };
 
 const handleCancel = () => {
-  emits('cancel');
+  emits("cancel");
   props.onCancel?.();
 };
 </script>

package/src/components/PlDialogModal/PlDialogModal.vue

@@ -5,11 +5,11 @@ export default {
 </script>
 
 <script lang="ts" setup>
-import { useEventListener } from '../../composition/useEventListener';
-import './pl-dialog-modal.scss';
-import { computed, ref } from 'vue';
-import PlCloseModalBtn from '../../utils/PlCloseModalBtn.vue';
-import type { Size } from '../../types';
+import { useEventListener } from "../../composition/useEventListener";
+import "./pl-dialog-modal.scss";
+import { computed, ref } from "vue";
+import PlCloseModalBtn from "../../utils/PlCloseModalBtn.vue";
+import type { Size } from "../../types";
 
 const slots = defineSlots<{
   title?: () => unknown;
@@ -17,7 +17,7 @@ const slots = defineSlots<{
   actions?: () => unknown;
 }>();
 
-const emit = defineEmits(['update:modelValue']);
+const emit = defineEmits(["update:modelValue"]);
 
 const props = withDefaults(
   defineProps<{
@@ -67,10 +67,10 @@ const props = withDefaults(
     size?: Size | undefined;
   }>(),
   {
-    width: '448px',
-    minHeight: 'auto',
-    maxHeight: 'auto',
-    height: 'auto',
+    width: "448px",
+    minHeight: "auto",
+    maxHeight: "auto",
+    height: "auto",
     closable: true,
     noContentGutters: false,
     actionsHasTopBorder: true,
@@ -83,30 +83,30 @@ const modal = ref<HTMLElement>();
 const style = computed(() => {
   const { width, height, minHeight, maxHeight, size } = props;
 
-  if (size === 'small') {
+  if (size === "small") {
     return {
-      width: '448px',
-      height: '440px',
-      minHeight: 'auto',
-      maxHeight: 'auto',
+      width: "448px",
+      height: "440px",
+      minHeight: "auto",
+      maxHeight: "auto",
     };
   }
 
-  if (size === 'medium') {
+  if (size === "medium") {
     return {
-      width: '720px',
-      height: '720px',
-      minHeight: 'auto',
-      maxHeight: 'auto',
+      width: "720px",
+      height: "720px",
+      minHeight: "auto",
+      maxHeight: "auto",
     };
   }
 
-  if (size === 'large') {
+  if (size === "large") {
     return {
-      width: '1080px',
-      height: '880px',
-      minHeight: 'auto',
-      maxHeight: 'auto',
+      width: "1080px",
+      height: "880px",
+      minHeight: "auto",
+      maxHeight: "auto",
     };
   }
 
@@ -114,14 +114,19 @@ const style = computed(() => {
 });
 
 function onClickShadow(ev: Event) {
-  if (modal.value && props.closeOnOutsideClick && document.contains(ev.target as Node) && !modal.value.contains(ev.target as Node)) {
-    emit('update:modelValue', false);
+  if (
+    modal.value &&
+    props.closeOnOutsideClick &&
+    document.contains(ev.target as Node) &&
+    !modal.value.contains(ev.target as Node)
+  ) {
+    emit("update:modelValue", false);
   }
 }
 
-useEventListener(document.body, 'keyup', (ev) => {
-  if (props.modelValue && ev.code === 'Escape') {
-    emit('update:modelValue', false);
+useEventListener(document.body, "keyup", (ev) => {
+  if (props.modelValue && ev.code === "Escape") {
+    emit("update:modelValue", false);
   }
 });
 </script>
@@ -137,14 +142,28 @@ useEventListener(document.body, 'keyup', (ev) => {
           :class="{ 'has-title': slots.title, 'has-content': slots.default }"
           :style="style"
         >
-          <PlCloseModalBtn v-if="closable" class="close-modal-btn" @click.stop="emit('update:modelValue', false)" />
+          <PlCloseModalBtn
+            v-if="closable"
+            class="close-modal-btn"
+            @click.stop="emit('update:modelValue', false)"
+          />
           <div v-if="slots.title" class="pl-dialog-modal__title">
             <slot name="title" />
           </div>
-          <div class="pl-dialog-modal__content" :class="{ 'no-content-gutters': noContentGutters, 'no-top-content-gutter': noTopContentGutter }">
+          <div
+            class="pl-dialog-modal__content"
+            :class="{
+              'no-content-gutters': noContentGutters,
+              'no-top-content-gutter': noTopContentGutter,
+            }"
+          >
             <slot />
           </div>
-          <div v-if="slots.actions" class="pl-dialog-modal__actions" :class="{ 'has-top-border': actionsHasTopBorder }">
+          <div
+            v-if="slots.actions"
+            class="pl-dialog-modal__actions"
+            :class="{ 'has-top-border': actionsHasTopBorder }"
+          >
             <slot name="actions" />
           </div>
         </div>

package/src/components/PlDialogModal/index.ts

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

package/src/components/PlDialogModal/pl-dialog-modal.scss

@@ -1,4 +1,4 @@
-@use '../../assets/mixins' as *;
+@use "../../assets/mixins" as *;
 
 .pl-dialog-modal {
   --padding-top: 24px;
@@ -107,4 +107,4 @@
     top: 4px;
     right: 4px;
   }
-}
+}

package/src/components/PlDropdown/OptionList.vue

@@ -1,19 +1,19 @@
 <script lang="ts" setup>
-import DropdownListItem from '../DropdownListItem.vue';
-import { DropdownOverlay } from '../../utils/DropdownOverlay';
-import TextLabel from '../../utils/TextLabel.vue';
-import { computed, useTemplateRef } from 'vue';
-import type { LOption } from './types';
+import DropdownListItem from "../DropdownListItem.vue";
+import { DropdownOverlay } from "../../utils/DropdownOverlay";
+import TextLabel from "../../utils/TextLabel.vue";
+import { computed, useTemplateRef } from "vue";
+import type { LOption } from "./types";
 
 const props = defineProps<{
   rootRef: HTMLElement;
   groups: Map<string, LOption[]>;
   rest: LOption[];
-  optionSize: 'small' | 'medium';
+  optionSize: "small" | "medium";
   selectOption: (v: unknown) => void;
 }>();
 
-const overlay = useTemplateRef('overlay');
+const overlay = useTemplateRef("overlay");
 
 const listRef = computed(() => overlay.value?.listRef);
 
@@ -38,8 +38,18 @@ defineExpose({
 </script>
 
 <template>
-  <DropdownOverlay ref="overlay" :root="rootRef" class="pl-dropdown__options" tabindex="-1" :gap="3">
-    <div v-for="[group, items] in groups.entries()" :key="group" :class="{ 'group-container': hasGroups }">
+  <DropdownOverlay
+    ref="overlay"
+    :root="rootRef"
+    class="pl-dropdown__options"
+    tabindex="-1"
+    :gap="3"
+  >
+    <div
+      v-for="[group, items] in groups.entries()"
+      :key="group"
+      :class="{ 'group-container': hasGroups }"
+    >
       <TextLabel>{{ group }}</TextLabel>
       <div>
         <DropdownListItem
@@ -58,7 +68,8 @@ defineExpose({
       <div>
         <DropdownListItem
           v-for="(item, index) in rest"
-          :key="index" :option="item"
+          :key="index"
+          :option="item"
           :is-selected="item.isSelected"
           :is-hovered="item.isActive"
           :size="optionSize"