@milaboratories/uikit 2.2.48 → 2.2.49

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@milaboratories/uikit",
-  "version": "2.2.48",
+  "version": "2.2.49",
   "type": "module",
   "main": "dist/pl-uikit.umd.js",
   "module": "dist/pl-uikit.js",

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/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">