@milaboratories/uikit 2.10.14 → 2.10.16

package/src/components/PlSearchField/PlSearchField.vue

@@ -1,9 +1,9 @@
 <script lang="ts" setup>
-import { PlIcon16 } from '../PlIcon16';
-import { PlIcon24 } from '../PlIcon24';
-import { computed, ref } from 'vue';
+import { PlIcon16 } from "../PlIcon16";
+import { PlIcon24 } from "../PlIcon24";
+import { computed, ref } from "vue";
 
-const emit = defineEmits(['update:modelValue']);
+const emit = defineEmits(["update:modelValue"]);
 
 const props = defineProps<{
   modelValue?: string;
@@ -17,23 +17,35 @@ const input = ref<HTMLInputElement | undefined>();
 
 const value = computed({
   get() {
-    return props.modelValue ?? '';
+    return props.modelValue ?? "";
   },
   set(v) {
-    emit('update:modelValue', v);
+    emit("update:modelValue", v);
   },
 });
 
 const nonEmpty = computed(() => !!props.modelValue);
 
-const clear = () => emit('update:modelValue', '');
+const clear = () => emit("update:modelValue", "");
 </script>
 
 <template>
   <div ref="root" class="pl-search-field" :class="[$style.component]">
     <PlIcon24 name="search" />
-    <input ref="input" v-model="value" :disabled="disabled" type="text" :placeholder="placeholder || 'Find...'" spellcheck="false" />
-    <PlIcon16 v-if="clearable && nonEmpty" :class="$style.clear" name="delete-clear" @click.stop="clear" />
+    <input
+      ref="input"
+      v-model="value"
+      :disabled="disabled"
+      type="text"
+      :placeholder="placeholder || 'Find...'"
+      spellcheck="false"
+    />
+    <PlIcon16
+      v-if="clearable && nonEmpty"
+      :class="$style.clear"
+      name="delete-clear"
+      @click.stop="clear"
+    />
   </div>
 </template>
 

package/src/components/PlSearchField/index.ts

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

package/src/components/PlSectionSeparator/PlSectionSeparator.vue

@@ -49,7 +49,7 @@ defineProps<{
 
 .content::after {
   flex: 1;
-  content: '';
+  content: "";
   height: 1px;
   background-color: var(--pl-separador-divider-color);
   margin-left: 4px;

package/src/components/PlSectionSeparator/index.ts

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

package/src/components/PlSidebar/PlSidebarGroup.vue

@@ -6,7 +6,7 @@ const slots = defineSlots<{
 
 <template>
   <div :class="$style.root">
-    <template v-for="name in Object.keys(slots) as `item-${number}`[]" :key="name" >
+    <template v-for="name in Object.keys(slots) as `item-${number}`[]" :key="name">
       <div :class="$style.item">
         <slot :name="name" />
       </div>
@@ -15,7 +15,7 @@ const slots = defineSlots<{
 </template>
 
 <style lang="scss" module>
-@use '../../assets/variables.scss';
+@use "../../assets/variables.scss";
 
 .root {
   position: relative;

package/src/components/PlSidebar/PlSidebarItem.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
 const slots = defineSlots<{
-  'header'?: () => unknown;
-  'header-content'?: () => unknown;
-  'body'?: () => unknown;
-  'body-content'?: () => unknown;
-  'footer'?: () => unknown;
-  'footer-content'?: () => unknown;
+  header?: () => unknown;
+  "header-content"?: () => unknown;
+  body?: () => unknown;
+  "body-content"?: () => unknown;
+  footer?: () => unknown;
+  "footer-content"?: () => unknown;
 }>();
 </script>
 
@@ -30,7 +30,7 @@ const slots = defineSlots<{
 </template>
 
 <style lang="scss" module>
-@use '../../assets/variables.scss';
+@use "../../assets/variables.scss";
 
 .root {
   position: relative;

package/src/components/PlSidebar/index.ts

@@ -1,2 +1,2 @@
-export { default as PlSidebarGroup } from './PlSidebarGroup.vue';
-export { default as PlSidebarItem } from './PlSidebarItem.vue';
+export { default as PlSidebarGroup } from "./PlSidebarGroup.vue";
+export { default as PlSidebarItem } from "./PlSidebarItem.vue";

package/src/components/PlSlideModal/PlPureSlideModal.vue

@@ -1,38 +1,35 @@
 <script lang="ts">
 export default {
-  name: 'PlPureSlideModal',
+  name: "PlPureSlideModal",
   inheritAttrs: false,
 };
 </script>
 
 <script lang="ts" setup>
-import './pl-slide-modal.scss';
-import { ref, useAttrs } from 'vue';
-import TransitionSlidePanel from '../TransitionSlidePanel.vue';
-import { useClickOutside, useEventListener } from '../../index';
-import type { Props } from './props';
-import { defaultProps } from './props';
+import "./pl-slide-modal.scss";
+import { ref, useAttrs } from "vue";
+import TransitionSlidePanel from "../TransitionSlidePanel.vue";
+import { useClickOutside, useEventListener } from "../../index";
+import type { Props } from "./props";
+import { defaultProps } from "./props";
 
 const emit = defineEmits<{
-  (e: 'update:modelValue', value: boolean): void;
+  (e: "update:modelValue", value: boolean): void;
 }>();
 
 const modal = ref();
 const attrs = useAttrs();
-const props = withDefaults(
-  defineProps<Props>(),
-  defaultProps,
-);
+const props = withDefaults(defineProps<Props>(), defaultProps);
 
 useClickOutside(modal, () => {
   if (props.modelValue && props.closeOnOutsideClick) {
-    emit('update:modelValue', false);
+    emit("update:modelValue", false);
   }
 });
 
-useEventListener(document, 'keydown', (evt: KeyboardEvent) => {
-  if (evt.key === 'Escape') {
-    emit('update:modelValue', false);
+useEventListener(document, "keydown", (evt: KeyboardEvent) => {
+  if (evt.key === "Escape") {
+    emit("update:modelValue", false);
   }
 });
 </script>
@@ -52,6 +49,10 @@ useEventListener(document, 'keydown', (evt: KeyboardEvent) => {
         <slot />
       </div>
     </TransitionSlidePanel>
-    <div v-if="props.modelValue && props.shadow" class="pl-slide-modal__shadow" @keyup.esc="emit('update:modelValue', false)" />
+    <div
+      v-if="props.modelValue && props.shadow"
+      class="pl-slide-modal__shadow"
+      @keyup.esc="emit('update:modelValue', false)"
+    />
   </Teleport>
 </template>

package/src/components/PlSlideModal/PlSlideModal.vue

@@ -1,29 +1,25 @@
 <script lang="ts">
 export default {
-  name: 'PlSlideModal',
+  name: "PlSlideModal",
   inheritAttrs: false,
 };
 </script>
 
 <script lang="ts" setup>
-import './pl-slide-modal.scss';
-import { useAttrs, useSlots } from 'vue';
-import PlPureSlideModal from './PlPureSlideModal.vue';
-import type { Props } from './props';
-import { defaultProps } from './props';
+import "./pl-slide-modal.scss";
+import { useAttrs, useSlots } from "vue";
+import PlPureSlideModal from "./PlPureSlideModal.vue";
+import type { Props } from "./props";
+import { defaultProps } from "./props";
 
 const slots = useSlots();
 const attrs = useAttrs();
-const props = withDefaults(
-  defineProps<Props>(),
-  defaultProps,
-);
-
+const props = withDefaults(defineProps<Props>(), defaultProps);
 </script>
 
 <template>
   <PlPureSlideModal
-    v-bind="{...props, ...attrs}"
+    v-bind="{ ...props, ...attrs }"
     :class="[$style.root, { 'has-title': slots.title, 'has-actions': slots.actions }]"
   >
     <div v-if="slots.title" class="pl-slide-modal__title">

package/src/components/PlSlideModal/index.ts

@@ -1,2 +1,2 @@
-export { default as PlPureSlideModal } from './PlPureSlideModal.vue';
-export { default as PlSlideModal } from './PlSlideModal.vue';
+export { default as PlPureSlideModal } from "./PlPureSlideModal.vue";
+export { default as PlSlideModal } from "./PlSlideModal.vue";

package/src/components/PlSlideModal/pl-slide-modal.scss

@@ -34,7 +34,7 @@
     right: 12px;
     cursor: pointer;
     background-color: #d3d7e0;
-    @include mask(url('../../assets/images/24_close.svg'), 24px);
+    @include mask(url("../../assets/images/24_close.svg"), 24px);
 
     &:hover {
       background-color: var(--main-dark-color);
@@ -107,4 +107,4 @@
     bottom: 0;
     background-color: rgba(0, 0, 0, 0.64);
   }
-}
+}

package/src/components/PlSlideModal/props.ts

@@ -1,25 +1,25 @@
 export type Props = {
   /**
-     * Determines whether the modal is open
-     */
+   * Determines whether the modal is open
+   */
   modelValue: boolean;
   /**
-     * Css `width` value (px, %, em etc)
-     */
+   * Css `width` value (px, %, em etc)
+   */
   width?: string;
   /**
-     * If `true`, then show shadow (default value `false`)
-     */
+   * If `true`, then show shadow (default value `false`)
+   */
   shadow?: boolean;
   /**
-     * If `true`, the modal window closes when clicking outside the modal area (default: `true`)
-     */
+   * If `true`, the modal window closes when clicking outside the modal area (default: `true`)
+   */
   closeOnOutsideClick?: boolean;
 };
 
 export const defaultProps: Props = {
   modelValue: false,
-  width: '368px',
+  width: "368px",
   shadow: false,
   closeOnOutsideClick: true,
 };

package/src/components/PlSpacer/PlSpacer.vue

@@ -1,3 +1,3 @@
 <template>
-  <div class="flex-grow-1"/>
+  <div class="flex-grow-1" />
 </template>

package/src/components/PlSpacer/index.ts

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

package/src/components/PlSplash/PlSplash.vue

@@ -1,25 +1,33 @@
 <script setup lang="ts">
-import style from './pl-splash.module.scss';
-import { PlLoaderCircular } from '../PlLoaderCircular';
+import style from "./pl-splash.module.scss";
+import { PlLoaderCircular } from "../PlLoaderCircular";
 
-withDefaults(defineProps<{
-  /**
-   * Optional string that sets text that will be shown below the PlLoaderCircular.
-   */
-  loadingText?: string;
-  /**
-   * If `true` the loading overlay is shown.
-   */
-  loading?: boolean;
-  /**
-   * @TODO
-   */
-  type?: 'table' | 'transparent';
-}>(), { loadingText: undefined, loading: false, type: undefined });
+withDefaults(
+  defineProps<{
+    /**
+     * Optional string that sets text that will be shown below the PlLoaderCircular.
+     */
+    loadingText?: string;
+    /**
+     * If `true` the loading overlay is shown.
+     */
+    loading?: boolean;
+    /**
+     * @TODO
+     */
+    type?: "table" | "transparent";
+  }>(),
+  { loadingText: undefined, loading: false, type: undefined },
+);
 </script>
 
 <template>
-  <div :class="[style.splash, {[style.table]: type === 'table', [style.transparent]: type === 'transparent'}]">
+  <div
+    :class="[
+      style.splash,
+      { [style.table]: type === 'table', [style.transparent]: type === 'transparent' },
+    ]"
+  >
     <div v-if="loading" :class="[style.overlay]">
       <div>
         <!-- @TODO refactor PlLoaderCircular size property -->

package/src/components/PlSplash/index.ts

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

package/src/components/PlSplash/pl-splash.module.scss

@@ -42,4 +42,4 @@
       }
     }
   }
-}
+}

package/src/components/PlStatusTag/PlStatusTag.vue

@@ -1,21 +1,26 @@
 <script lang="ts" setup>
-import { reactive } from 'vue';
-import './pl-status-tag.scss';
-import type { PlStatusTagType } from './types';
+import { reactive } from "vue";
+import "./pl-status-tag.scss";
+import type { PlStatusTagType } from "./types";
 
 defineProps<{ type?: PlStatusTagType }>();
 
 const data = reactive<{ typeToText: Record<PlStatusTagType, string> }>({
   typeToText: {
-    OK: 'OK',
-    WARN: 'WARN',
-    ALERT: 'ALERT',
-    HOLD: 'HOLD',
+    OK: "OK",
+    WARN: "WARN",
+    ALERT: "ALERT",
+    HOLD: "HOLD",
   },
 });
 </script>
 <template>
-  <div v-if="type" v-bind="$attrs" :class="{[type.toLocaleLowerCase()]: true}" class="pl-status-tag text-caps11 d-flex align-center">
+  <div
+    v-if="type"
+    v-bind="$attrs"
+    :class="{ [type.toLocaleLowerCase()]: true }"
+    class="pl-status-tag text-caps11 d-flex align-center"
+  >
     <slot>
       {{ data.typeToText[type] }}
     </slot>

package/src/components/PlStatusTag/index.ts

@@ -1,3 +1,3 @@
-export { default as PlStatusTag } from './PlStatusTag.vue';
+export { default as PlStatusTag } from "./PlStatusTag.vue";
 
-export * from './types';
+export * from "./types";

package/src/components/PlStatusTag/pl-status-tag.scss

@@ -1,23 +1,23 @@
 .pl-status-tag {
-    border-radius: 4px;
-    border: 1px solid var(--txt-01);
-    padding: 2px 8px;
-    width: fit-content;
-    height: 24px;
+  border-radius: 4px;
+  border: 1px solid var(--txt-01);
+  padding: 2px 8px;
+  width: fit-content;
+  height: 24px;
 
-    &.ok {
-        background: var(--notification-success);
-    }
+  &.ok {
+    background: var(--notification-success);
+  }
 
-    &.warn {
-        background: var(--notification-warning);
-    }
+  &.warn {
+    background: var(--notification-warning);
+  }
 
-    &.alert {
-        background: var(--notification-error);
-    }
+  &.alert {
+    background: var(--notification-error);
+  }
 
-    &.hold {
-        background: var(--notification-neutral);
-    }
-}
+  &.hold {
+    background: var(--notification-neutral);
+  }
+}

package/src/components/PlStatusTag/types.ts

@@ -1 +1 @@
-export type PlStatusTagType = 'ALERT' | 'WARN' | 'OK' | 'HOLD';
+export type PlStatusTagType = "ALERT" | "WARN" | "OK" | "HOLD";

package/src/components/PlSvg/PlSvg.vue

@@ -1,8 +1,8 @@
 <script lang="ts" setup>
-import { computed } from 'vue';
-import { computedAsync } from '@vueuse/core';
-import { registerSvg } from './registry.ts';
-import type { MaskIconName16, MaskIconName24 } from '../../types';
+import { computed } from "vue";
+import { computedAsync } from "@vueuse/core";
+import { registerSvg } from "./registry.ts";
+import type { MaskIconName16, MaskIconName24 } from "../../types";
 
 const props = defineProps<{
   uri?: string;
@@ -14,33 +14,41 @@ const props = defineProps<{
 }>();
 
 const uri = computedAsync(async () => {
-  if (typeof props.uri === 'string') return Promise.resolve(props.uri);
-  if (typeof props.name === 'string') return import(`../../assets/icons/icon-assets-min/${props.name}.svg?raw`).then((m) => m.default);
+  if (typeof props.uri === "string") return Promise.resolve(props.uri);
+  if (typeof props.name === "string")
+    return import(`../../assets/icons/icon-assets-min/${props.name}.svg?raw`).then(
+      (m) => m.default,
+    );
   return undefined;
 });
 
-const svgMeta = computed(() => (uri.value == null ? undefined : registerSvg(uri.value, props.name)));
+const svgMeta = computed(() =>
+  uri.value == null ? undefined : registerSvg(uri.value, props.name),
+);
 
 const toPx = (value: undefined | number | string) => {
-  if (typeof value === 'number') return `${value}px`;
-  if (typeof value === 'string') return value;
+  if (typeof value === "number") return `${value}px`;
+  if (typeof value === "string") return value;
   return;
 };
 
 const styleSize = computed(() => ({
-  '--svg-width': toPx(props.width ?? svgMeta.value?.defaultWidth),
-  '--svg-height': toPx(props.height ?? svgMeta.value?.defaultHeight),
+  "--svg-width": toPx(props.width ?? svgMeta.value?.defaultWidth),
+  "--svg-height": toPx(props.height ?? svgMeta.value?.defaultHeight),
 }));
 
-const styleColor = computed(() => getStyleColor('fill', props.color));
-const styleStroke = computed(() => getStyleColor('stroke', props.stroke));
+const styleColor = computed(() => getStyleColor("fill", props.color));
+const styleStroke = computed(() => getStyleColor("stroke", props.stroke));
 
-function getStyleColor(prop: 'fill' | 'stroke', color: undefined | string | string[]): undefined | string {
+function getStyleColor(
+  prop: "fill" | "stroke",
+  color: undefined | string | string[],
+): undefined | string {
   if (Array.isArray(color)) {
-    return color.reduce((acc, color, i) => acc + `--svg-${prop}-${i}: ${color};`, '');
+    return color.reduce((acc, color, i) => acc + `--svg-${prop}-${i}: ${color};`, "");
   }
 
-  if (typeof color === 'string' && color.length > 0) {
+  if (typeof color === "string" && color.length > 0) {
     return `--svg-${prop}-0: ${color};`;
   }
 

package/src/components/PlSvg/index.ts

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

package/src/components/PlSvg/registry.ts

@@ -1,4 +1,4 @@
-import { uniqueId } from '@milaboratories/helpers';
+import { uniqueId } from "@milaboratories/helpers";
 
 declare global {
   interface Window {
@@ -8,9 +8,9 @@ declare global {
 }
 
 function createSpriteContainer() {
-  const defsElement = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-  defsElement.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
-  defsElement.style.display = 'none';
+  const defsElement = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+  defsElement.setAttribute("xmlns", "http://www.w3.org/2000/svg");
+  defsElement.style.display = "none";
   document.body.prepend(defsElement);
   return defsElement;
 }
@@ -30,7 +30,7 @@ const defsElement = window.SvgRegistryDefsElement;
 
 export function registerSvg(raw: string, name?: string): SvgMeta {
   if (!registeredRaw.has(raw)) {
-    const id = `svg-${name ? `${name}-` : ''}${uniqueId(16)}`;
+    const id = `svg-${name ? `${name}-` : ""}${uniqueId(16)}`;
 
     const openSvgTagMatch = raw.match(/^<svg[^>]*>/i)?.[0];
     const fillMatch = openSvgTagMatch?.match(/fill\s*=\s*"(.*?)"/)?.[1];
@@ -48,28 +48,24 @@ export function registerSvg(raw: string, name?: string): SvgMeta {
 
     let fillIdx = 0;
     let strokeIdx = 0;
-    const fillAttr = fillMatch ? `fill="${fillMatch}"` : '';
-    const strokeAttr = strokeMatch ? `stroke="${strokeMatch}"` : '';
+    const fillAttr = fillMatch ? `fill="${fillMatch}"` : "";
+    const strokeAttr = strokeMatch ? `stroke="${strokeMatch}"` : "";
 
     const preparedSvg = raw
       .replace(/^<svg[^>]*>/i, `<svg id="${id}" viewBox="${viewBox}" ${fillAttr} ${strokeAttr}>`)
-      .replace(/<\/svg>\s*$/, '</svg>')
-      .replace(
-        /\bfill\s*=\s*(['"])(.*?)\1/gi,
-        (_, q, value) =>
-          /^(none|transparent)$/i.test(value)
-            ? `fill=${q}${value}${q}`
-            : `fill=${q}var(--svg-fill-${fillIdx++}, ${value})${q}`,
+      .replace(/<\/svg>\s*$/, "</svg>")
+      .replace(/\bfill\s*=\s*(['"])(.*?)\1/gi, (_, q, value) =>
+        /^(none|transparent)$/i.test(value)
+          ? `fill=${q}${value}${q}`
+          : `fill=${q}var(--svg-fill-${fillIdx++}, ${value})${q}`,
       )
-      .replace(
-        /\bstroke\s*=\s*(['"])(.*?)\1/gi,
-        (_, q, value) =>
-          /^(none|transparent)$/i.test(value)
-            ? `stroke=${q}${value}${q}`
-            : `stroke=${q}var(--svg-stroke-${strokeIdx++}, ${value})${q}`,
+      .replace(/\bstroke\s*=\s*(['"])(.*?)\1/gi, (_, q, value) =>
+        /^(none|transparent)$/i.test(value)
+          ? `stroke=${q}${value}${q}`
+          : `stroke=${q}var(--svg-stroke-${strokeIdx++}, ${value})${q}`,
       );
 
-    const template = document.createElement('template');
+    const template = document.createElement("template");
     template.innerHTML = preparedSvg;
 
     const symbol = template.content.firstElementChild;

package/src/components/PlTabs/PlTabs.vue

@@ -3,23 +3,23 @@
  * A component for selecting one value from a list of options
  */
 export default {
-  name: 'PlTabs',
+  name: "PlTabs",
 };
 </script>
 
 <script lang="ts" setup generic="M extends string">
-import style from './pl-tabs.module.scss';
-import type { TabOption } from './types';
-import Tab from './Tab.vue';
+import style from "./pl-tabs.module.scss";
+import type { TabOption } from "./types";
+import Tab from "./Tab.vue";
 
 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);
 
 defineProps<{
   /**
@@ -52,7 +52,10 @@ defineProps<{
       :key="i"
       :tabindex="modelValue === opt.value || disabled || opt.disabled ? undefined : 0"
       :option="opt"
-      :class="[{ [style.active]: modelValue === opt.value, [style.disabled]: opt.disabled }, style.tab]"
+      :class="[
+        { [style.active]: modelValue === opt.value, [style.disabled]: opt.disabled },
+        style.tab,
+      ]"
       :style="{ '--pl-tabs-item-max-width': opt.maxWidth ?? maxTabWidth }"
       @keydown.enter="emitModel(opt.value)"
       @click="emitModel(opt.value)"