@milaboratories/uikit 2.2.47 → 2.2.49

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@milaboratories/uikit",
-  "version": "2.2.47",
+  "version": "2.2.49",
   "type": "module",
   "main": "dist/pl-uikit.umd.js",
   "module": "dist/pl-uikit.js",
@@ -34,8 +34,8 @@
     "yarpm": "^1.2.0",
     "svgo": "^3.3.2",
     "@types/d3": "^7.4.3",
-    "@milaboratories/helpers": "^1.6.11",
     "@milaboratories/eslint-config": "^1.0.1",
+    "@milaboratories/helpers": "^1.6.11",
     "@platforma-sdk/model": "^1.21.20"
   },
   "scripts": {

package/src/components/LongText.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue';
-import { debounce, notEmpty } from '../helpers/utils';
+import { debounce, notEmpty } from '@milaboratories/helpers';
 
 const hasElementEllipsis = ref(false);
 

package/src/components/PlCheckboxGroup/PlCheckboxGroup.vue

@@ -11,6 +11,10 @@ export default {
 import './pl-checkbox-group.scss';
 import type { SimpleOption } from '@/types';
 import PlCheckboxBase from '@/components/PlCheckbox/PlCheckboxBase.vue';
+import { PlTooltip } from '../PlTooltip';
+import { useSlots } from 'vue';
+
+const slots = useSlots();
 
 const emit = defineEmits<{
   (e: 'update:modelValue', v: M[]): void;
@@ -46,8 +50,15 @@ const updateModel = (value: M) => {
 </script>
 
 <template>
-  <div class="ui-checkbox-group" :class="{ disabled }">
-    <label v-if="label">{{ label }}</label>
+  <div class="pl-checkbox-group" :class="{ disabled }">
+    <label v-if="label">
+      <span>{{ label }}</span>
+      <PlTooltip v-if="slots.tooltip" class="info" position="top">
+        <template #tooltip>
+          <slot name="tooltip" />
+        </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)" />
       <label @click.stop="() => updateModel(opt.value)">{{ opt.label }}</label>

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

@@ -1,4 +1,4 @@
-.ui-checkbox-group {
+.pl-checkbox-group {
   --color-label: var(--color-text);
   --cursor-label: pointer;
   display: flex;
@@ -9,11 +9,12 @@
     --cursor-label: default;
     pointer-events: none;
   }
-  label {
+  > label {
     color: var(--color-label);
     cursor: var(--cursor-label);
-  }
-  > label {
+    display: flex;
+    align-items: center;
+    gap: 4px;
     margin-bottom: 6px;
     font-size: 14px;
     font-weight: 600;

package/src/components/PlDialogModal/PlDialogModal.vue

@@ -7,7 +7,7 @@ export default {
 <script lang="ts" setup>
 import { useEventListener } from '@/composition/useEventListener';
 import './pl-dialog-modal.scss';
-import { computed, ref, useAttrs, useSlots } from 'vue';
+import { computed, ref, useSlots } from 'vue';
 import PlCloseModalBtn from '@/utils/PlCloseModalBtn.vue';
 import type { Size } from '@/types';
 
@@ -109,8 +109,6 @@ const style = computed(() => {
   return { width, height, minHeight, maxHeight };
 });
 
-const $attrs = useAttrs();
-
 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);

package/src/components/PlDropdownMultiRef/PlDropdownMultiRef.vue

@@ -1,7 +1,10 @@
 <script lang="ts" setup>
 import type { ModelRef, RefOption } from '@/types';
 import PlDropdownMulti from '../PlDropdownMulti/PlDropdownMulti.vue';
-import { computed } from 'vue';
+import { computed, useSlots } from 'vue';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const slots: any = useSlots();
 
 defineEmits<{
   /**
@@ -70,5 +73,9 @@ const options = computed(() =>
     v-bind="props"
     :options="options"
     @update:model-value="$emit('update:modelValue', $event)"
-  />
+  >
+    <template v-if="slots.tooltip" #tooltip>
+      <slot name="tooltip" />
+    </template>
+  </PlDropdownMulti>
 </template>

package/src/components/PlDropdownRef/PlDropdownRef.vue

@@ -10,7 +10,10 @@ export default {
 <script lang="ts" setup>
 import type { ModelRef, RefOption } from '@/types';
 import { PlDropdown } from '../PlDropdown';
-import { computed } from 'vue';
+import { computed, useSlots } from 'vue';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const slots: any = useSlots();
 
 defineEmits<{
   /**
@@ -98,5 +101,9 @@ const arrowIcon = computed(() => (props.disabled ? 'icon-link-disabled' : 'icon-
     :loading-options-helper="loadingOptionsHelper"
     :arrow-icon-large="arrowIcon"
     @update:model-value="$emit('update:modelValue', $event)"
-  />
+  >
+    <template v-if="slots.tooltip" #tooltip>
+      <slot name="tooltip" />
+    </template>
+  </PlDropdown>
 </template>

package/src/components/PlLogView/PlLogView.vue

@@ -8,7 +8,7 @@ export default {
 </script>
 
 <script lang="ts" setup>
-import { computed, ref, watch } from 'vue';
+import { computed, ref, useSlots, watch } from 'vue';
 import { PlMaskIcon24 } from '../PlMaskIcon24';
 import './pl-log-view.scss';
 import { okOptional, tapIf } from '@milaboratories/helpers';
@@ -24,6 +24,8 @@ const getOutputError = <T>(o?: ValueOrErrors<T>) => {
   }
 };
 
+const slots = useSlots();
+
 const props = defineProps<{
   /**
    * String contents
@@ -114,7 +116,14 @@ const onContentScroll = (ev: Event) => {
 
 <template>
   <div ref="root" class="pl-log-view" :class="{ 'has-error': computedError }">
-    <label v-if="label"> {{ label }} </label>
+    <label v-if="label">
+      <span>{{ label }}</span>
+      <PlTooltip v-if="slots.tooltip" class="info" position="top">
+        <template #tooltip>
+          <slot name="tooltip" />
+        </template>
+      </PlTooltip>
+    </label>
     <DoubleContour class="pl-log-view__contour" />
     <div class="pl-log-view__copy">
       <PlTooltip :close-delay="800" position="top">

package/src/composition/useLocalStorage.ts

@@ -1,6 +1,6 @@
 import type { Ref } from 'vue';
 import { ref, watch } from 'vue';
-import { notEmpty } from '@/helpers/utils';
+import { notEmpty } from '@milaboratories/helpers';
 
 const $store = new Map<string, Ref<string | null>>();
 

package/src/helpers/utils.ts

@@ -4,14 +4,6 @@ export function call<R>(f: () => R): R {
   return f();
 }
 
-export function notEmpty<T>(v: T | null | undefined, message: string): T {
-  if (v === null || v === undefined) {
-    throw Error(message);
-  }
-
-  return v;
-}
-
 export function requestTick<P>(cb: (...args: P[]) => void) {
   let tick = false;
 
@@ -108,17 +100,6 @@ export function animateInfinite(options: { getFraction: (dt: number) => number;
 /* eslint-disable @typescript-eslint/no-explicit-any */
 type AnyFunction = (...args: any[]) => any;
 
-export function debounce<F extends AnyFunction>(func: F, delay: number) {
-  let timerId = -1;
-  return (...args: Parameters<F>) => {
-    if (timerId !== -1) {
-      clearTimeout(timerId);
-      timerId = -1;
-    }
-    timerId = window.setTimeout(() => func(...args), delay);
-  };
-}
-
 export function throttle<F extends AnyFunction>(callback: F, ms: number, trailing = true): (...args: Parameters<F>) => void {
   let t = 0,
     call: AnyFunction | null;
@@ -142,6 +123,10 @@ export function listToOptions<T>(list: T[] | readonly T[]): ListOption<T>[] {
 }
 
 export function normalizeListOptions<V = unknown>(options: Readonly<ListOption<V>[]>) {
+  if (!Array.isArray(options)) {
+    throw Error('Invalid component options: ' + String(options));
+  }
+
   return options.map((it) => ({
     label: 'label' in it ? it.label : it.text,
     value: it.value,

package/vite.config.ts

@@ -40,8 +40,8 @@ export default defineConfig({
     },
   },
   build: {
-    sourcemap: process.env.DEV_SOURCE_MAP === '1',
-    emptyOutDir: false,
+    sourcemap: true,
+    emptyOutDir: true,
     lib: {
       // Could also be a dictionary or array of multiple entry points
       entry: [resolve(__dirname, 'src/index.ts')],