@milaboratories/uikit 2.2.32 → 2.2.33

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@milaboratories/uikit",
-  "version": "2.2.32",
+  "version": "2.2.33",
   "type": "module",
   "main": "dist/pl-uikit.umd.js",
   "module": "dist/pl-uikit.js",
@@ -33,8 +33,8 @@
     "yarpm": "^1.2.0",
     "svgo": "^3.3.2",
     "@milaboratories/eslint-config": "^1.0.0",
-    "@milaboratories/helpers": "^1.6.9",
-    "@platforma-sdk/model": "^1.18.0"
+    "@milaboratories/helpers": "^1.6.10",
+    "@platforma-sdk/model": "^1.20.0"
   },
   "scripts": {
     "dev": "vite",

package/src/components/LongText.vue

@@ -41,7 +41,6 @@ function mouseoutHandler() {
 
 <style lang="scss">
 .ui-lt-container {
-  outline: 1px solid red;
   min-width: 0;
   white-space: nowrap;
   overflow: hidden;

package/src/components/PlCheckbox/pl-checkbox-base.scss

@@ -9,6 +9,8 @@
   outline: none;
   border-radius: 4px;
   @include icon(var(--base-icon), 24px);
+  min-width: 24px;
+  min-height: 24px;
 
   &.checked {
     @include icon(var(--checked-icon), 24px);

package/src/components/PlDropdown/PlDropdown.vue

@@ -321,8 +321,8 @@ watchPostEffect(() => {
             @focus="onInputFocus"
           />
 
-          <div v-if="!data.open" @click="setFocusOnInput">
-            <LongText class="input-value"> {{ textValue }} </LongText>
+          <div v-if="!data.open" class="input-value" @click="setFocusOnInput">
+            <LongText> {{ textValue }} </LongText>
           </div>
 
           <div class="pl-dropdown__controls">

package/src/components/PlDropdown/pl-dropdown.scss

@@ -121,26 +121,30 @@
     display: flex;
     flex-direction: row;
     align-items: center;
+    cursor: pointer;
 
     .input-value {
-      outline: 1px solid red;
       position: absolute;
       top: 0;
       left: 0;
       bottom: 0;
       right: 0;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
       padding: 0 60px 0 11px; // @TODO padding-right based on controls width
       pointer-events: none;
-      line-height: var(--control-height);
+      line-height: 20px;
       color: var(--txt-01);
       overflow: hidden;
       white-space: pre;
       text-overflow: ellipsis;
+      cursor: inherit;
     }
 
     input {
       min-height: calc(var(--control-height) - 2px);
-      line-height: calc(var(--control-height) - 2px);
+      line-height: 20px;
       font-family: inherit;
       font-size: inherit;
       background-color: transparent;

package/src/components/PlDropdownMulti/PlDropdownMulti.vue

@@ -218,17 +218,17 @@ watchPostEffect(() => {
 </script>
 
 <template>
-  <div class="pl-multi-dropdown__envelope">
+  <div class="pl-dropdown-multi__envelope">
     <div
       ref="rootRef"
       :tabindex="tabindex"
-      class="pl-multi-dropdown"
+      class="pl-dropdown-multi"
       :class="{ open: data.open, error, disabled }"
       @keydown="handleKeydown"
       @focusout="onFocusOut"
     >
-      <div class="pl-multi-dropdown__container">
-        <div class="pl-multi-dropdown__field">
+      <div class="pl-dropdown-multi__container">
+        <div class="pl-dropdown-multi__field">
           <input
             ref="input"
             v-model="data.search"
@@ -246,7 +246,7 @@ watchPostEffect(() => {
             </PlChip>
           </div>
           <div class="arrow" @click.stop="toggleModel" />
-          <div class="pl-multi-dropdown__append">
+          <div class="pl-dropdown-multi__append">
             <slot name="append" />
           </div>
         </div>
@@ -263,12 +263,12 @@ watchPostEffect(() => {
           v-if="data.open"
           ref="overlay"
           :root="rootRef"
-          class="pl-multi-dropdown__options"
-          :gap="3"
+          class="pl-dropdown-multi__options"
+          :gap="5"
           tabindex="-1"
           @focusout="onFocusOut"
         >
-          <div class="pl-multi-dropdown__open-chips-container">
+          <div class="pl-dropdown-multi__open-chips-container">
             <PlChip v-for="(opt, i) in selectedOptionsRef" :key="i" closeable small @close="unselectOption(opt.value)">
               {{ opt.label || opt.value }}
             </PlChip>
@@ -286,10 +286,10 @@ watchPostEffect(() => {
           />
           <div v-if="!filteredOptionsRef.length" class="nothing-found">Nothing found</div>
         </DropdownOverlay>
-        <DoubleContour class="pl-multi-dropdown__contour" />
+        <DoubleContour class="pl-dropdown-multi__contour" />
       </div>
     </div>
-    <div v-if="error" class="pl-multi-dropdown__error">{{ error }}</div>
-    <div v-else-if="helper" class="pl-multi-dropdown__helper">{{ helper }}</div>
+    <div v-if="error" class="pl-dropdown-multi__error">{{ error }}</div>
+    <div v-else-if="helper" class="pl-dropdown-multi__helper">{{ helper }}</div>
   </div>
 </template>

package/src/components/PlDropdownMulti/pl-dropdown-multi.scss

@@ -1,6 +1,6 @@
 @import "@/assets/mixins";
 
-.pl-multi-dropdown {
+.pl-dropdown-multi {
   $root: &;
 
   --contour-color: var(--txt-01);
@@ -66,7 +66,7 @@
     .nothing-found {
       padding: 0 10px;
       height: var(--control-height);
-      line-height: var(--control-height);
+      line-height: 20px;
       background-color: #fff;
       opacity: 0.5;
       font-style: italic;
@@ -76,7 +76,7 @@
       position: relative;
       padding: 0 10px;
       height: var(--control-height);
-      line-height: var(--control-height);
+      line-height: 20px;
       cursor: pointer;
       user-select: none;
       display: flex;
@@ -86,7 +86,7 @@
       --base-icon: url('@/assets/images/24_checkbox-base.svg');
       --checked-icon: url('@/assets/images/24_checkbox-checked.svg');
 
-      .pl-multi-dropdown__checkmark {
+      .pl-dropdown-multi__checkmark {
         cursor: pointer;
         outline: none;
         border-radius: 4px;
@@ -109,7 +109,7 @@
       &.selected {
         background-color: var(--color-active-select);
 
-        .pl-multi-dropdown__checkmark {
+        .pl-dropdown-multi__checkmark {
           @include icon(var(--checked-icon), 24px);
         }
       }
@@ -132,7 +132,8 @@
     padding: 0 11px;
 
     min-height: var(--control-height);
-    line-height: var(--control-height);
+    line-height: 20px;
+    cursor: pointer;
 
     display: flex;
     flex-direction: row;
@@ -146,7 +147,7 @@
       right: 30px;
       overflow: hidden;
       padding: 0 11px;
-      line-height: var(--control-height);
+      line-height: 20px;
       color: var(--contour-color);
       display: flex;
       gap: 8px;
@@ -155,7 +156,7 @@
 
     input {
       min-height: calc(var(--control-height) - 2px);
-      line-height: calc(var(--control-height) - 2px);
+      line-height: 20px;
       font-family: inherit;
       font-size: inherit;
       background-color: transparent;

package/src/components/PlSearchField/PlSearchField.vue

@@ -51,7 +51,7 @@ const clear = () => emit('update:modelValue', '');
   line-height: calc(var(--control-height) - 2px);
   background-color: var(--pl-search-field-bg);
   padding: 0 0 0 0;
-  border-bottom: 2px solid var(--pl-search-field-border-bottom-color);
+  border-bottom: 1px solid var(--pl-search-field-border-bottom-color);
 
   input {
     margin-left: 8px;

package/src/components/PlTextField/PlTextField.vue

@@ -77,7 +77,7 @@ const props = defineProps<{
   /**
    * The string specifies whether the field should be a password or not, value could be "password" or undefined.
    */
-  type?: 'password' | 'number';
+  type?: 'password';
 }>();
 
 const rootRef = ref<HTMLInputElement | undefined>(undefined);
@@ -168,6 +168,8 @@ const onFocusOut = () => {
   data.cached = undefined;
 };
 
+const setFocusOnInput = () => inputRef.value?.focus();
+
 useLabelNotch(rootRef);
 </script>
 
@@ -204,9 +206,9 @@ useLabelNotch(rootRef);
         spellcheck="false"
         @focusout="onFocusOut"
       />
-      <div class="pl-text-field__append">
-        <PlIcon16 v-if="canShowClearable" class="pl-text-field__clearable" name="delete-clear" @click="clear" />
-        <PlMaskIcon24 v-if="type === 'password'" :name="passwordIcon" style="cursor: pointer" @click="togglePasswordVisibility" />
+      <div class="pl-text-field__append" @click="setFocusOnInput">
+        <PlIcon16 v-if="canShowClearable" class="pl-text-field__clearable" name="delete-clear" @click.stop="clear" />
+        <PlMaskIcon24 v-if="type === 'password'" :name="passwordIcon" style="cursor: pointer" @click.stop="togglePasswordVisibility" />
         <slot name="append" />
       </div>
       <DoubleContour class="pl-text-field__contour" />

package/src/components/PlTextField/pl-text-field.scss

@@ -31,7 +31,7 @@
     font-family: var(--font-family-base);
     font-weight: 500;
     min-height: calc(var(--control-height) - 2px);
-    line-height: calc(var(--control-height) - 2px);
+    line-height: 20px;
     width: 100%;
     padding: 0 12px;
     border: none;
@@ -82,6 +82,7 @@
     flex-direction: row;
     align-items: center;
     gap: 4px;
+    cursor: text;
     .icon-16 {
       cursor: pointer;
     }