@milaboratories/uikit 2.10.14 → 2.10.16

package/src/helpers/downloadContent.ts

@@ -1,22 +1,22 @@
 type MimeType =
-  | 'text/plain'
-  | 'text/html'
-  | 'text/css'
-  | 'text/javascript'
-  | 'text/csv'
-  | 'application/json'
-  | 'application/xml'
-  | 'application/pdf'
-  | 'application/zip'
-  | 'application/octet-stream'
-  | 'image/png'
-  | 'image/jpeg'
-  | 'image/gif'
-  | 'image/svg+xml'
-  | 'audio/mpeg'
-  | 'audio/wav'
-  | 'video/mp4'
-  | 'video/webm'
+  | "text/plain"
+  | "text/html"
+  | "text/css"
+  | "text/javascript"
+  | "text/csv"
+  | "application/json"
+  | "application/xml"
+  | "application/pdf"
+  | "application/zip"
+  | "application/octet-stream"
+  | "image/png"
+  | "image/jpeg"
+  | "image/gif"
+  | "image/svg+xml"
+  | "audio/mpeg"
+  | "audio/wav"
+  | "video/mp4"
+  | "video/webm"
   | (string & {});
 
 type DownloadableContent =
@@ -44,7 +44,7 @@ export const downloadContent = (content: DownloadableContent, filename: string)
     blob = content;
   } else if (Array.isArray(content) && content.length === 2) {
     const [data, mimeType] = content;
-    if (typeof data === 'string') {
+    if (typeof data === "string") {
       blob = new Blob([data], { type: mimeType });
     } else if (data instanceof ArrayBuffer || ArrayBuffer.isView(data)) {
       blob = new Blob([data], { type: mimeType });
@@ -54,13 +54,15 @@ export const downloadContent = (content: DownloadableContent, filename: string)
       throw new Error(`Unsupported data type for download. Received data of type ${typeof data}.`);
     }
   } else {
-    throw new Error('Invalid content type. Content must be a Blob, File, or [data, mimeType] tuple.');
+    throw new Error(
+      "Invalid content type. Content must be a Blob, File, or [data, mimeType] tuple.",
+    );
   }
 
   const objectUrl = URL.createObjectURL(blob);
 
   try {
-    const link = document.createElement('a');
+    const link = document.createElement("a");
     link.href = objectUrl;
     link.download = filename;
 

package/src/helpers/error.ts

@@ -1,4 +1,4 @@
-import { isErrorLike, tryDo } from '@milaboratories/helpers';
+import { isErrorLike, tryDo } from "@milaboratories/helpers";
 
 // order of errors is important, we will show first
 export function getErrorMessage(...errors: unknown[]): undefined | string {
@@ -10,7 +10,7 @@ export function getErrorMessage(...errors: unknown[]): undefined | string {
 }
 
 function extractMessage(error: unknown): undefined | string {
-  if (typeof error === 'string') {
+  if (typeof error === "string") {
     return error;
   }
 
@@ -19,7 +19,10 @@ function extractMessage(error: unknown): undefined | string {
   }
 
   if (error != null) {
-    const unknownString = tryDo(() => JSON.stringify(error, null, 4), () => String(error));
+    const unknownString = tryDo(
+      () => JSON.stringify(error, null, 4),
+      () => String(error),
+    );
     return `Unknown error message:\n${unknownString}`;
   }
 

package/src/helpers/functions.ts

@@ -20,7 +20,11 @@ export function generate<R>(count: number, cb: (i: number) => R): R[] {
   return r;
 }
 
-export function copyProps<T extends Record<string, unknown>>(target: T, source: T, ...keys: (keyof T)[]) {
+export function copyProps<T extends Record<string, unknown>>(
+  target: T,
+  source: T,
+  ...keys: (keyof T)[]
+) {
   keys.forEach((key) => {
     target[key] = source[key];
   });

package/src/helpers/objects.ts

@@ -1,5 +1,5 @@
 export function isRecord<V, T extends Record<string, V>>(obj: T | unknown): obj is T {
-  return obj !== null && typeof obj === 'object';
+  return obj !== null && typeof obj === "object";
 }
 
 export function deepEqual(a: unknown, b: unknown): boolean {

package/src/helpers/utils.ts

@@ -1,5 +1,5 @@
-import type { ListOptionBase } from '@platforma-sdk/model';
-import type { ListOption } from '../types';
+import type { ListOptionBase } from "@platforma-sdk/model";
+import type { ListOption } from "../types";
 
 export function call<R>(f: () => R): R {
   return f();
@@ -38,7 +38,7 @@ export function randomInt(min: number, max: number) {
 }
 
 export function randomString(length: number) {
-  let s = '';
+  let s = "";
   for (let i = 0; i < length; i++) {
     s += String.fromCharCode(randomInt(65, 91));
   }
@@ -58,7 +58,11 @@ export function makeEaseInOut(timing: (t: number) => number) {
   };
 }
 
-export function animate(options: { duration: number; draw: (p: number) => void; timing: (t: number) => number }) {
+export function animate(options: {
+  duration: number;
+  draw: (p: number) => void;
+  timing: (t: number) => number;
+}) {
   const { duration, draw, timing } = options;
   const start = performance.now();
   let stop = false;
@@ -77,7 +81,11 @@ export function animate(options: { duration: number; draw: (p: number) => void;
   };
 }
 
-export function animateInfinite(options: { getFraction: (dt: number) => number; draw: (p: number) => void; timing: (t: number) => number }) {
+export function animateInfinite(options: {
+  getFraction: (dt: number) => number;
+  draw: (p: number) => void;
+  timing: (t: number) => number;
+}) {
   const { getFraction, draw, timing } = options;
   const start = performance.now();
   let stop = false;
@@ -101,7 +109,11 @@ export function animateInfinite(options: { getFraction: (dt: number) => number;
 /* eslint-disable @typescript-eslint/no-explicit-any */
 type AnyFunction = (...args: any[]) => any;
 
-export function throttle<F extends AnyFunction>(callback: F, ms: number, trailing = true): (...args: Parameters<F>) => void {
+export function throttle<F extends AnyFunction>(
+  callback: F,
+  ms: number,
+  trailing = true,
+): (...args: Parameters<F>) => void {
   let t = 0,
     call: AnyFunction | null;
   return function (this: unknown, ...args: Parameters<F>) {
@@ -123,13 +135,15 @@ export function listToOptions<T>(list: T[] | readonly T[]): ListOption<T>[] {
   return list.map((value) => ({ text: String(value), value }));
 }
 
-export function normalizeListOptions<V = unknown>(options: Readonly<ListOption<V>[]>): Readonly<ListOptionBase<V>[]> {
+export function normalizeListOptions<V = unknown>(
+  options: Readonly<ListOption<V>[]>,
+): Readonly<ListOptionBase<V>[]> {
   if (!Array.isArray(options)) {
-    throw Error('Invalid component options: ' + String(options));
+    throw Error("Invalid component options: " + String(options));
   }
 
   return options.map((it) => ({
-    label: 'label' in it ? it.label : it.text,
+    label: "label" in it ? it.label : it.text,
     value: it.value,
     description: it.description,
     group: it.group,

package/src/index.ts

@@ -1,148 +1,148 @@
-import './assets/ui.scss';
+import "./assets/ui.scss";
 
 // @TODO review
-import * as DataTable from './components/DataTable';
-import ThemeSwitcher from './components/ThemeSwitcher.vue';
+import * as DataTable from "./components/DataTable";
+import ThemeSwitcher from "./components/ThemeSwitcher.vue";
 // @TODO review (may be private)
-import DropdownListItem from './components/DropdownListItem.vue';
+import DropdownListItem from "./components/DropdownListItem.vue";
 
 // @TODO review
-import ContextProvider from './components/ContextProvider.vue';
-import Slider from './components/Slider.vue';
-import { showContextMenu } from './components/contextMenu';
+import ContextProvider from "./components/ContextProvider.vue";
+import Slider from "./components/Slider.vue";
+import { showContextMenu } from "./components/contextMenu";
 // for new version
-import LongText from './components/LongText.vue';
-import Scrollable from './components/Scrollable.vue';
-import SliderRange from './components/SliderRange.vue';
-import SliderRangeTriple from './components/SliderRangeTriple.vue';
+import LongText from "./components/LongText.vue";
+import Scrollable from "./components/Scrollable.vue";
+import SliderRange from "./components/SliderRange.vue";
+import SliderRangeTriple from "./components/SliderRangeTriple.vue";
 
-import { allCssVariables } from './demo-site-data/all-css-variables.ts';
+import { allCssVariables } from "./demo-site-data/all-css-variables.ts";
 
 /**
  * Layout components
  */
 
-export * from './layout/PlBlockPage';
-export * from './layout/PlContainer';
-export * from './layout/PlGrid';
-export * from './layout/PlPlaceholder';
-export * from './layout/PlRow';
-export * from './layout/PlSpacer';
+export * from "./layout/PlBlockPage";
+export * from "./layout/PlContainer";
+export * from "./layout/PlGrid";
+export * from "./layout/PlPlaceholder";
+export * from "./layout/PlRow";
+export * from "./layout/PlSpacer";
 
 /**
  * Components
  */
-export * from './components/PlErrorBoundary';
+export * from "./components/PlErrorBoundary";
 // export * from './components/PlErrorAlert'; // @TODO discuss if we should export it
-export * from './components/PlAccordion';
-export * from './components/PlAlert';
-export * from './components/PlAutocomplete';
-export * from './components/PlAutocompleteMulti';
-export * from './components/PlBtnAccent';
-export * from './components/PlBtnDanger';
-export * from './components/PlBtnGhost';
-export * from './components/PlBtnGroup';
-export * from './components/PlBtnLink';
-export * from './components/PlBtnPrimary';
-export * from './components/PlBtnSecondary';
-export * from './components/PlBtnSplit';
-export * from './components/PlCheckbox';
-export * from './components/PlCheckboxGroup';
-export * from './components/PlChip';
-export * from './components/PlDialogModal';
-export * from './components/PlDropdown';
-export * from './components/PlDropdownLegacy';
-export * from './components/PlDropdownLine';
-export * from './components/PlDropdownMulti';
-export * from './components/PlDropdownMultiRef';
-export * from './components/PlDropdownRef';
-export * from './components/PlEditableTitle';
-export * from './components/PlElementList';
-export * from './components/PlLoaderCircular';
-export * from './components/PlLogView';
-export * from './components/PlNumberField';
-export * from './components/PlProgressBar';
-export * from './components/PlProgressCell';
-export * from './components/PlSearchField';
-export * from './components/PlSectionSeparator';
-export * from './components/PlSlideModal';
-export * from './components/PlSplash';
-export * from './components/PlStatusTag';
-export * from './components/PlTabs';
-export * from './components/PlTextArea';
-export * from './components/PlTextField';
-export * from './components/PlToggleSwitch';
-export * from './components/PlTooltip';
-
-export * from './components/PlFileDialog';
-export * from './components/PlFileInput';
-export * from './components/PlNotificationAlert';
-
-export * from './components/PlSidebar';
-
-export * from './components/PlIcon16';
-export * from './components/PlIcon24';
-export * from './components/PlMaskIcon16';
-export * from './components/PlMaskIcon24';
-export * from './components/PlSvg';
-
-export * from './components/PlChartHistogram';
-export * from './components/PlChartStackedBar';
-
-export * from './components/PlRadio';
-
-export { default as PlLoaderLogo } from './components/PlLoaderLogo.vue';
-
-export * from './colors';
+export * from "./components/PlAccordion";
+export * from "./components/PlAlert";
+export * from "./components/PlAutocomplete";
+export * from "./components/PlAutocompleteMulti";
+export * from "./components/PlBtnAccent";
+export * from "./components/PlBtnDanger";
+export * from "./components/PlBtnGhost";
+export * from "./components/PlBtnGroup";
+export * from "./components/PlBtnLink";
+export * from "./components/PlBtnPrimary";
+export * from "./components/PlBtnSecondary";
+export * from "./components/PlBtnSplit";
+export * from "./components/PlCheckbox";
+export * from "./components/PlCheckboxGroup";
+export * from "./components/PlChip";
+export * from "./components/PlDialogModal";
+export * from "./components/PlDropdown";
+export * from "./components/PlDropdownLegacy";
+export * from "./components/PlDropdownLine";
+export * from "./components/PlDropdownMulti";
+export * from "./components/PlDropdownMultiRef";
+export * from "./components/PlDropdownRef";
+export * from "./components/PlEditableTitle";
+export * from "./components/PlElementList";
+export * from "./components/PlLoaderCircular";
+export * from "./components/PlLogView";
+export * from "./components/PlNumberField";
+export * from "./components/PlProgressBar";
+export * from "./components/PlProgressCell";
+export * from "./components/PlSearchField";
+export * from "./components/PlSectionSeparator";
+export * from "./components/PlSlideModal";
+export * from "./components/PlSplash";
+export * from "./components/PlStatusTag";
+export * from "./components/PlTabs";
+export * from "./components/PlTextArea";
+export * from "./components/PlTextField";
+export * from "./components/PlToggleSwitch";
+export * from "./components/PlTooltip";
+
+export * from "./components/PlFileDialog";
+export * from "./components/PlFileInput";
+export * from "./components/PlNotificationAlert";
+
+export * from "./components/PlSidebar";
+
+export * from "./components/PlIcon16";
+export * from "./components/PlIcon24";
+export * from "./components/PlMaskIcon16";
+export * from "./components/PlMaskIcon24";
+export * from "./components/PlSvg";
+
+export * from "./components/PlChartHistogram";
+export * from "./components/PlChartStackedBar";
+
+export * from "./components/PlRadio";
+
+export { default as PlLoaderLogo } from "./components/PlLoaderLogo.vue";
+
+export * from "./colors";
 
 /**
  * Usables
  */
-export { useClickOutside } from './composition/useClickOutside';
-export { useComponentProp } from './composition/useComponentProp';
-export { useConfirm } from './composition/useConfirm';
-export { useDraggable } from './composition/useDraggable';
-export { useEventListener } from './composition/useEventListener';
-export { useFormState } from './composition/useFormState';
-export { useHover } from './composition/useHover';
-export { useInterval } from './composition/useInterval';
-export { usePollingQuery } from './composition/usePollingQuery';
-export { useLocalStorage } from './composition/useLocalStorage';
-export { useMouse } from './composition/useMouse';
-export { useMouseCapture } from './composition/useMouseCapture';
-export { useElementPosition as usePosition } from './composition/usePosition';
-export { useQuery } from './composition/useQuery.ts';
-export { useResizeObserver } from './composition/useResizeObserver';
-export { useScroll } from './composition/useScroll';
-export { useSortable } from './composition/useSortable';
-export { useSortable2 } from './composition/useSortable2';
-export { useTheme } from './composition/useTheme';
-
-export * from './composition/computedCached';
-export * from './composition/filters';
-export * from './composition/useWatchFetch';
-export * from './composition/watchCached';
+export { useClickOutside } from "./composition/useClickOutside";
+export { useComponentProp } from "./composition/useComponentProp";
+export { useConfirm } from "./composition/useConfirm";
+export { useDraggable } from "./composition/useDraggable";
+export { useEventListener } from "./composition/useEventListener";
+export { useFormState } from "./composition/useFormState";
+export { useHover } from "./composition/useHover";
+export { useInterval } from "./composition/useInterval";
+export { usePollingQuery } from "./composition/usePollingQuery";
+export { useLocalStorage } from "./composition/useLocalStorage";
+export { useMouse } from "./composition/useMouse";
+export { useMouseCapture } from "./composition/useMouseCapture";
+export { useElementPosition as usePosition } from "./composition/usePosition";
+export { useQuery } from "./composition/useQuery.ts";
+export { useResizeObserver } from "./composition/useResizeObserver";
+export { useScroll } from "./composition/useScroll";
+export { useSortable } from "./composition/useSortable";
+export { useSortable2 } from "./composition/useSortable2";
+export { useTheme } from "./composition/useTheme";
+
+export * from "./composition/computedCached";
+export * from "./composition/filters";
+export * from "./composition/useWatchFetch";
+export * from "./composition/watchCached";
 
 /**
  * Utils/Partials
  */
 
-export * from './utils/DropdownOverlay';
-export { default as PlCloseModalBtn } from './utils/PlCloseModalBtn.vue';
+export * from "./utils/DropdownOverlay";
+export { default as PlCloseModalBtn } from "./utils/PlCloseModalBtn.vue";
 
 /**
  * Technical
  * @TODO move it from here maybe
  */
-export { useLabelNotch } from './utils/useLabelNotch.ts';
+export { useLabelNotch } from "./utils/useLabelNotch.ts";
 
-export type * from './types';
+export type * from "./types";
 
-export { icons16, icons24 } from './types';
+export { icons16, icons24 } from "./types";
 
-export * from './helpers/dom';
+export * from "./helpers/dom";
 
-export * from './helpers/utils';
+export * from "./helpers/utils";
 
 /**
  * @TODO review

package/src/layout/PlBlockPage/PlBlockPage.vue

@@ -1,16 +1,16 @@
 <script lang="ts">
 /** Root block page component */
 export default {
-  name: 'PlBlockPage',
+  name: "PlBlockPage",
 };
 </script>
 
 <script lang="ts" setup>
-import { computed, useCssModule, useSlots, useTemplateRef, watchEffect } from 'vue';
-import { PlBlockPageTitleTeleportTarget } from './PlBlockPageTitleTeleportTarget';
-import './pl-block-page.scss';
-import { PlIcon24 } from '../../components/PlIcon24';
-import { type PlPlaceholderProps, PL_PLACEHOLDER_TEXTS, PlPlaceholder } from '../PlPlaceholder';
+import { computed, useCssModule, useSlots, useTemplateRef, watchEffect } from "vue";
+import { PlBlockPageTitleTeleportTarget } from "./PlBlockPageTitleTeleportTarget";
+import "./pl-block-page.scss";
+import { PlIcon24 } from "../../components/PlIcon24";
+import { type PlPlaceholderProps, PL_PLACEHOLDER_TEXTS, PlPlaceholder } from "../PlPlaceholder";
 
 const slots = useSlots();
 
@@ -30,22 +30,22 @@ const props = defineProps<{
   /**
    * If defined, a loading overlay is displayed on the page body (over all default slot content)
    */
-  bodyLoading?: PlPlaceholderProps['variant'] | PlPlaceholderProps;
+  bodyLoading?: PlPlaceholderProps["variant"] | PlPlaceholderProps;
 }>();
 
 /** Page subtitle (editable) */
-const subtitle = defineModel<string>('subtitle');
+const subtitle = defineModel<string>("subtitle");
 
 const styles = useCssModule();
 
 const loadingPlaceholder = computed<PlPlaceholderProps | undefined>(() => {
-  if (typeof props.bodyLoading === 'string') {
+  if (typeof props.bodyLoading === "string") {
     return { variant: props.bodyLoading, ...PL_PLACEHOLDER_TEXTS.LOADING };
   }
   return props.bodyLoading;
 });
 
-const teleportTarget = useTemplateRef('teleportTarget');
+const teleportTarget = useTemplateRef("teleportTarget");
 
 watchEffect(() => {
   PlBlockPageTitleTeleportTarget.value = teleportTarget.value;
@@ -62,18 +62,12 @@ watchEffect(() => {
           <slot name="after-title" />
         </div>
         <div class="pl-block-page__title__append">
-          <div
-            ref="teleportTarget"
-            class="pl-block-page__title__append__teleport"
-          />
+          <div ref="teleportTarget" class="pl-block-page__title__append__teleport" />
           <slot name="append" />
         </div>
       </div>
       <div v-if="subtitle !== undefined" :class="styles.subtitle">
-        <input
-          v-model.lazy.trim="subtitle"
-          :placeholder="props.subtitlePlaceholder"
-        />
+        <input v-model.lazy.trim="subtitle" :placeholder="props.subtitlePlaceholder" />
         <PlIcon24 :class="styles.editIcon" name="edit" color="var(--ic-02)" />
       </div>
     </div>
@@ -130,7 +124,8 @@ watchEffect(() => {
     position-area: center inline-end;
     inset-inline-start: 4px;
   }
-  &:hover, &:focus-within {
+  &:hover,
+  &:focus-within {
     .editIcon {
       visibility: visible;
     }

package/src/layout/PlBlockPage/PlBlockPageTitleTeleportTarget.ts

@@ -1,3 +1,3 @@
-import { ref } from 'vue';
+import { ref } from "vue";
 
 export const PlBlockPageTitleTeleportTarget = ref<HTMLElement | null>();

package/src/layout/PlBlockPage/index.ts

@@ -1,2 +1,2 @@
-export { default as PlBlockPage } from './PlBlockPage.vue';
-export * from './usePlBlockPageTitleTeleportTarget';
+export { default as PlBlockPage } from "./PlBlockPage.vue";
+export * from "./usePlBlockPageTitleTeleportTarget";

package/src/layout/PlBlockPage/pl-block-page.scss

@@ -1,4 +1,4 @@
-@use '../../assets/mixins.scss' as *;
+@use "../../assets/mixins.scss" as *;
 
 .pl-block-page {
   --pl-block-page-body-padding: var(--main-spacing, 24px);

package/src/layout/PlBlockPage/usePlBlockPageTitleTeleportTarget.ts

@@ -1,5 +1,5 @@
-import { nextTick, onMounted, onUpdated } from 'vue';
-import { PlBlockPageTitleTeleportTarget } from './PlBlockPageTitleTeleportTarget';
+import { nextTick, onMounted, onUpdated } from "vue";
+import { PlBlockPageTitleTeleportTarget } from "./PlBlockPageTitleTeleportTarget";
 
 export function usePlBlockPageTitleTeleportTarget(componentName: string) {
   const check = () => {

package/src/layout/PlContainer/PlContainer.vue

@@ -1,14 +1,14 @@
 <script lang="ts">
 /** Container with vertical spacing */
 export default {
-  name: 'PlContainer',
+  name: "PlContainer",
 };
 </script>
 
 <script lang="ts" setup>
-import { computed } from 'vue';
-import './pl-container.scss';
-import PlSplash from '../../components/PlSplash/PlSplash.vue';
+import { computed } from "vue";
+import "./pl-container.scss";
+import PlSplash from "../../components/PlSplash/PlSplash.vue";
 
 const props = defineProps<{
   /**
@@ -31,7 +31,12 @@ const style = computed(() => ({
 </script>
 
 <template>
-  <PlSplash :loading="loading" :loading-text="loadingText" class="pl-container pl-layout-component" :style="style">
+  <PlSplash
+    :loading="loading"
+    :loading-text="loadingText"
+    class="pl-container pl-layout-component"
+    :style="style"
+  >
     <slot />
   </PlSplash>
 </template>

package/src/layout/PlContainer/index.ts

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

package/src/layout/PlContainer/pl-container.scss

@@ -2,4 +2,4 @@
   display: flex;
   flex-direction: column;
   gap: var(--gap-v);
-}
+}

package/src/layout/PlGrid/PlGrid.vue

@@ -1,13 +1,13 @@
 <script lang="ts">
 /** Grid container */
 export default {
-  name: 'PlGrid',
+  name: "PlGrid",
 };
 </script>
 
 <script lang="ts" setup>
-import { computed } from 'vue';
-import './pl-grid.scss';
+import { computed } from "vue";
+import "./pl-grid.scss";
 
 const props = defineProps<{
   columns: number;

package/src/layout/PlGrid/index.ts

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

package/src/layout/PlGrid/pl-grid.scss

@@ -2,4 +2,4 @@
   display: grid;
   row-gap: var(--gap-h);
   column-gap: var(--gap-v);
-}
+}