@milaboratories/uikit 2.10.27 → 2.10.28

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@milaboratories/uikit",
-  "version": "2.10.27",
+  "version": "2.10.28",
   "type": "module",
   "main": "dist/index.js",
   "exports": {
@@ -41,8 +41,8 @@
     "svgo": "^3.3.2",
     "typescript": "~5.6.3",
     "vitest": "^4.0.16",
-    "@milaboratories/ts-builder": "1.2.10",
     "@milaboratories/build-configs": "1.4.4",
+    "@milaboratories/ts-builder": "1.2.10",
     "@milaboratories/ts-configs": "1.2.1"
   },
   "scripts": {

package/src/components/PlSearchField/PlSearchField.vue

@@ -2,47 +2,52 @@
 import { PlIcon16 } from "../PlIcon16";
 import { PlIcon24 } from "../PlIcon24";
 import { computed } from "vue";
+import PlTooltip from "../PlTooltip/PlTooltip.vue";
 
-const emit = defineEmits(["update:modelValue"]);
+const model = defineModel<string>({ required: true });
 
 const props = defineProps<{
   modelValue?: string;
   clearable?: boolean;
   placeholder?: string;
   disabled?: boolean;
+  helper?: string;
+}>();
+const slots = defineSlots<{
+  helper: () => unknown;
 }>();
 
-const value = computed({
-  get() {
-    return props.modelValue ?? "";
-  },
-  set(v) {
-    emit("update:modelValue", v);
-  },
-});
-
-const nonEmpty = computed(() => !!props.modelValue);
+const nonEmpty = computed(() => model.value != null && model.value.length > 0);
+const hasHelper = computed(() => props.helper != null || slots.helper != null);
 
-const clear = () => emit("update:modelValue", "");
+const clear = () => (model.value = "");
 </script>
 
 <template>
-  <div ref="root" class="pl-search-field" :class="[$style.component]">
+  <div ref="root" :class="$style.component">
     <PlIcon24 name="search" />
     <input
       ref="input"
-      v-model="value"
-      :disabled="disabled"
-      :placeholder="placeholder || 'Find...'"
+      v-model="model"
+      :disabled="props.disabled"
+      :placeholder="props.placeholder || 'Find...'"
       type="text"
       spellcheck="false"
     />
     <PlIcon16
-      v-if="clearable && nonEmpty"
+      v-if="props.clearable && nonEmpty"
       :class="$style.clear"
       name="delete-clear"
       @click.stop="clear"
     />
+
+    <PlTooltip v-if="hasHelper" class="info" position="bottom">
+      <template #tooltip>
+        <slot name="helper">
+          {{ props.helper }}
+        </slot>
+      </template>
+    </PlTooltip>
   </div>
 </template>
 

package/src/components/PlTooltip/PlTooltip.vue

@@ -6,11 +6,11 @@ export default {
 </script>
 
 <script lang="ts" setup>
+import { uniqueId } from "@milaboratories/helpers";
 import { onUnmounted, reactive, ref, watch } from "vue";
+import { tMap } from "./global";
 import * as utils from "../../helpers/utils";
 import { useClickOutside } from "../../composition/useClickOutside";
-import { tMap } from "./global";
-import { uniqueId } from "@milaboratories/helpers";
 
 const emit = defineEmits(["tooltip:close"]);
 
@@ -189,7 +189,7 @@ const anchorName = `--anchor-${uniqueId()}`;
             '--anchorName': anchorName,
             '--gap': gap + 'px',
             '--offsetToTheEdge': offsetToTheEdge + 'px',
-            '--pl-tooltip-max-width': maxWidth,
+            '--plTooltipMaxWidth': maxWidth,
           }"
         >
           <div :class="$style.plTooltipBox" @click.stop>
@@ -226,7 +226,7 @@ const anchorName = `--anchor-${uniqueId()}`;
 }
 
 .plTooltipContainer {
-  --pl-tooltip-max-width: 300px;
+  --plTooltipMaxWidth: 300px;
   --gap: 8px;
   --tailWidth: 8px;
   --tailHeight: calc(var(--gap) + 2px);
@@ -252,7 +252,7 @@ const anchorName = `--anchor-${uniqueId()}`;
   border-radius: 6px;
   width: max-content;
   word-break: normal;
-  max-width: var(--pl-tooltip-max-width);
+  max-width: var(--plTooltipMaxWidth);
   color: #fff;
 }