@milaboratories/uikit 2.2.28 → 2.2.30

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@milaboratories/uikit",
-  "version": "2.2.28",
+  "version": "2.2.30",
   "type": "module",
   "main": "dist/pl-uikit.umd.js",
   "module": "dist/pl-uikit.js",
@@ -32,9 +32,9 @@
     "vue-tsc": "^2.1.10",
     "yarpm": "^1.2.0",
     "svgo": "^3.3.2",
-    "@milaboratories/helpers": "^1.6.9",
     "@milaboratories/eslint-config": "^1.0.0",
-    "@platforma-sdk/model": "^1.17.0"
+    "@platforma-sdk/model": "^1.18.0",
+    "@milaboratories/helpers": "^1.6.9"
   },
   "scripts": {
     "dev": "vite",

package/src/components/PlDropdownLine/PlDropdownLine.vue

@@ -80,6 +80,10 @@ const modelText = computed<string>(() => {
 
 const inputModel = ref(modelText.value);
 
+watch(modelText, (v) => {
+  inputModel.value = v;
+});
+
 const placeholderVal = computed(() => {
   if (data.isOpen) {
     if (searchPhrase.value && searchPhrase.value.length >= modelText.value.length - 1) {
@@ -136,7 +140,6 @@ function updateSelected() {
     }),
     (v) => (v < 0 ? 0 : v),
   );
-  inputModel.value = modelText.value;
 }
 
 function resetSearchPhrase() {
@@ -256,7 +259,6 @@ useElementPosition(container, (pos) => {
 </script>
 
 <template>
-  <!-- {{ inputModel }} -->
   <div
     ref="container"
     tabindex="0"

package/src/components/PlDropdownLine/ResizableInput.vue

@@ -5,19 +5,18 @@ import { computed } from 'vue';
 const props = defineProps<{
   modelValue?: string;
   placeholder?: string;
-  value?: string;
   disabled?: boolean;
   maxWidth?: string;
   width?: string;
 }>();
 
-const emit = defineEmits(['input', 'update:modelValue']);
+const emit = defineEmits(['update:modelValue']);
 
 const text = computed(() => {
   if (props.placeholder) {
     return props.placeholder;
   }
-  return (props.modelValue || props.value)?.replace('"', '');
+  return (props.modelValue)?.replace('"', '');
 });
 
 const styles = computed(() => {
@@ -32,8 +31,7 @@ const styles = computed(() => {
 });
 
 function handleInput(event: Event) {
-  const value = (event.target as HTMLInputElement).value;
-  emit('update:modelValue', value);
+  emit('update:modelValue', (event.target as HTMLInputElement).value);
 }
 </script>
 

package/src/layout/PlBlockPage/PlBlockPage.vue

@@ -14,12 +14,27 @@ const slots = useSlots();
 defineProps<{
   noBodyGutters?: boolean;
 }>();
+
+const setTitleIfNeeded = (el: HTMLElement) => {
+  el.removeAttribute('title');
+  if (el.clientWidth < el.scrollWidth) {
+    el.setAttribute('title', el.innerText);
+  }
+};
+
+const vTextOverflownTitle = {
+  mounted: setTitleIfNeeded,
+  updated: setTitleIfNeeded,
+};
 </script>
 
 <template>
   <div class="pl-layout-component pl-block-page" :class="{ noBodyGutters }">
     <div v-if="slots.title" class="pl-block-page__title">
-      <div class="pl-block-page__title__default"><slot name="title" /></div>
+      <div class="pl-block-page__title__default">
+        <span v-text-overflown-title><slot name="title" /></span>
+        <slot name="after-title" />
+      </div>
       <div class="pl-block-page__title__append">
         <slot name="append" />
       </div>

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

@@ -20,19 +20,32 @@
     align-items: center;
     gap: 12px;
     padding: 20px 24px;
+    min-width: 0;
+    max-width: 100%;
 
     &__default {
       flex: 1;
+      min-width: 0;
+      max-width: 100%;
       margin: 0;
       color: var(--txt-01);
-      font-size: 28px;
-      font-weight: 500;
-      line-height: 32px;
-      letter-spacing: -0.56px;
       display: flex;
       flex-direction: row;
       align-items: center;
       gap: 12px;
+
+      > span {
+        font-size: 28px;
+        font-weight: 500;
+        line-height: 36px;
+        letter-spacing: -0.56px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        min-width: 0;
+        max-width: 100%;
+        display: inline-block;
+      }
     }
 
     &__append {