@milaboratories/uikit 2.2.49 → 2.2.51

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@milaboratories/uikit",
-  "version": "2.2.49",
+  "version": "2.2.51",
   "type": "module",
   "main": "dist/pl-uikit.umd.js",
   "module": "dist/pl-uikit.js",
@@ -23,7 +23,7 @@
   },
   "devDependencies": {
     "@vue/test-utils": "^2.4.6",
-    "@vueuse/core": "^12.0.0",
+    "@vueuse/core": "^12.4.0",
     "jsdom": "^25.0.1",
     "resize-observer-polyfill": "^1.5.1",
     "@vitejs/plugin-vue": "^5.2.1",
@@ -36,7 +36,7 @@
     "@types/d3": "^7.4.3",
     "@milaboratories/eslint-config": "^1.0.1",
     "@milaboratories/helpers": "^1.6.11",
-    "@platforma-sdk/model": "^1.21.20"
+    "@platforma-sdk/model": "^1.22.2"
   },
   "scripts": {
     "dev": "vite",

package/src/assets/dropdown-list-item.scss

@@ -1,4 +1,4 @@
-@import "./mixins";
+@use "./mixins" as *;
 
 .dropdown-list-item {
     padding: 8px 12px;

package/src/assets/icons/icons-set.scss

@@ -1,6 +1,6 @@
-@import '../mixins.scss';
-@import './icons-16-generated.scss';
-@import './icons-24-generated.scss';
+@use '../mixins.scss' as *;
+@use './icons-16-generated.scss' as *;
+@use './icons-24-generated.scss' as *;
 
 .icon-16 {
   --icon-size: 16px;

package/src/assets/icons.scss

@@ -1,4 +1,4 @@
-@import "./mixins";
+@use "./mixins" as *;
 
 .icon {
   --icon-size: 16px;

package/src/assets/masks.scss

@@ -1,4 +1,4 @@
-@import "./mixins";
+@use "./mixins" as *;
 
 .mask {
   --mask-size: 16px;

package/src/assets/mixins.scss

@@ -1,4 +1,4 @@
-@import './base-btn';
+@forward './base-btn';
 
 @mixin mask-var($bg) {
   -webkit-mask-image: $bg;

package/src/assets/slider.scss

@@ -1,4 +1,4 @@
-@import "./mixins";
+@use "./mixins" as *;
 
 .ui-slider {
   --progress-bg: linear-gradient(to right, #A1E59C, #D0F5B0);

package/src/assets/theme-switcher.scss

@@ -1,4 +1,4 @@
-@import "./mixins";
+@use "./mixins" as *;
 
 .ui-theme-switcher {
   $root: &;

package/src/assets/utils.scss

@@ -1,4 +1,4 @@
-@import "./mixins";
+@use "./mixins" as *;
 
 .pl-scrollable {
   @include scrollbar(true, true);

package/src/components/DataTable/assets/data-table-style.scss

@@ -1,4 +1,4 @@
-@import "@/assets/mixins.scss";
+@use "@/assets/mixins" as *;
 
 .data-table {
   --cell-font-family: var(--font-family-base);

package/src/components/GridTable/assets/style.scss

@@ -1,4 +1,4 @@
-@import "@/assets/mixins.scss";
+@use "@/assets/mixins" as *;
 
 .grid-table {
   --cell-font-family: var(--font-family-base);

package/src/components/PlAlert/pl-alert.scss

@@ -1,4 +1,4 @@
-@import '@/assets/mixins.scss';
+@use "@/assets/mixins" as *;
 
 .pl-alert {
   --text-font-family: var(--font-family-base);

package/src/components/PlBtnAccent/pl-btn-accent.scss

@@ -1,4 +1,4 @@
-@import "@/assets/mixins";
+@use "@/assets/mixins" as *;
 
 .pl-btn-accent {
   @include base-btn;

package/src/components/PlBtnDanger/pl-btn-danger.scss

@@ -1,4 +1,4 @@
-@import "@/assets/mixins";
+@use "@/assets/mixins" as *;
 
 .pl-btn-danger {
   @include base-btn;

package/src/components/PlBtnGhost/pl-btn-ghost.scss

@@ -1,4 +1,4 @@
-@import "@/assets/mixins";
+@use "@/assets/mixins" as *;
 
 .pl-btn-ghost {
   @include base-btn;

package/src/components/PlBtnGroup/pl-btn-group.scss

@@ -1,4 +1,4 @@
-@import "@/assets/mixins";
+@use "@/assets/mixins" as *;
 
 .pl-btn-group {
   --pl-btn-group-height: 40px;

package/src/components/PlBtnLink/pl-btn-link.scss

@@ -1,4 +1,4 @@
-@import "@/assets/mixins";
+@use "@/assets/mixins" as *;
 
 .ui-btn-link {
   display: flex;

package/src/components/PlBtnPrimary/pl-btn-primary.scss

@@ -1,4 +1,4 @@
-@import "@/assets/mixins";
+@use "@/assets/mixins" as *;
 
 .pl-btn-primary {
   @include base-btn;

package/src/components/PlBtnSecondary/pl-btn-secondary.scss

@@ -1,4 +1,4 @@
-@import "@/assets/mixins";
+@use "@/assets/mixins" as *;
 
 .pl-btn-secondary {
   @include base-btn;

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

@@ -1,4 +1,4 @@
-@import "@/assets/mixins";
+@use "@/assets/mixins" as *;
 
 .pl-checkbox-base {
   --base-icon: url('@/assets/images/24_checkbox-base.svg');

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

@@ -1,4 +1,4 @@
-@import "@/assets/mixins";
+@use "@/assets/mixins" as *;
 
 .pl-checkbox-base {
   --base-icon: url('@/assets/images/24_checkbox-base.svg');

package/src/components/PlChip/pl-chip.scss

@@ -1,4 +1,4 @@
-@import "@/assets/mixins";
+@use "@/assets/mixins" as *;
 
 .pl-chip-tooltip {
   display: inline-flex;

package/src/components/PlDialogModal/pl-dialog-modal.scss

@@ -1,4 +1,4 @@
-@import '@/assets/mixins';
+@use '@/assets/mixins' as *;
 
 .pl-dialog-modal {
   --padding-top: 24px;

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

@@ -1,4 +1,4 @@
-@import "@/assets/mixins";
+@use "@/assets/mixins" as *;
 
 .pl-dropdown__options {
   --option-hover-bg: var(--btn-sec-hover-grey);

package/src/components/PlDropdownLegacy/pl-dropdown-legacy.scss

@@ -1,4 +1,4 @@
-@import "@/assets/mixins";
+@use "@/assets/mixins" as *;
 
 .pl-dropdown-legacy {
   $root: &;

package/src/components/PlDropdownLine/pl-dropdown-line.scss

@@ -1,4 +1,4 @@
-@import "@/assets/mixins";
+@use "@/assets/mixins" as *;
 
 .pl-line-dropdown {
     display: flex;

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

@@ -1,4 +1,4 @@
-@import "@/assets/mixins";
+@use "@/assets/mixins" as *;
 
 .pl-dropdown-multi {
   $root: &;

package/src/components/PlEditableTitle/pl-editable-title.module.scss

@@ -1,4 +1,4 @@
-@import "@/assets/mixins.scss";
+@use "@/assets/mixins" as *;
 
 .component {
   position: relative;

package/src/components/PlFileDialog/pl-file-dialog.module.scss

@@ -1,4 +1,4 @@
-@import "@/assets/mixins";
+@use "@/assets/mixins" as *;
 
 .component {
   .local {

package/src/components/PlFileInput/pl-file-input.scss

@@ -1,4 +1,4 @@
-@import '@/assets/mixins.scss';
+@use "@/assets/mixins" as *;
 
 .pl-file-input {
   $root: &;

package/src/components/PlLogView/pl-log-view.scss

@@ -1,4 +1,4 @@
-@import "@/assets/mixins";
+@use "@/assets/mixins" as *;
 
 .pl-log-view {
   --log-background: var(--bg-base-light);

package/src/components/PlSlideModal/PlSlideModal.vue

@@ -75,7 +75,9 @@ useEventListener(document, 'keydown', (evt: KeyboardEvent) => {
       >
         <div class="close-dialog-btn" @click="emit('update:modelValue', false)" />
         <div v-if="slots.title" class="pl-slide-modal__title">
-          <slot name="title" />
+          <span class="pl-slide-modal__title-content">
+            <slot name="title" />
+          </span>
         </div>
         <div class="pl-slide-modal__content">
           <slot />

package/src/components/PlSlideModal/pl-slide-modal.scss

@@ -1,4 +1,4 @@
-@import '@/assets/mixins.scss';
+@use "@/assets/mixins" as *;
 
 .pl-slide-modal {
   --padding-top: 24px;
@@ -34,6 +34,7 @@
     cursor: pointer;
     background-color: #d3d7e0;
     @include mask(url('@/assets/images/24_close.svg'), 24px);
+
     &:hover {
       background-color: var(--main-dark-color);
     }
@@ -54,9 +55,22 @@
     font-size: 28px;
     font-style: normal;
     font-weight: 500;
-    line-height: 32px; /* 114.286% */
+    line-height: 32px;
+    /* 114.286% */
     letter-spacing: -0.56px;
     padding: 24px;
+
+    width: 100%;
+    overflow: hidden;
+  }
+
+  &__title-content {
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    word-break: break-word;
   }
 
   &__actions {
@@ -66,6 +80,7 @@
     padding: 0;
     min-height: 88px;
     padding: 0 24px;
+
     button {
       min-width: 160px;
     }

package/src/components/PlTabs/pl-tabs.module.scss

@@ -1,4 +1,4 @@
-@import "@/assets/mixins";
+@use "@/assets/mixins" as *;
 
 .component {
   --pl-tabs-height: 40px;

package/src/components/PlTextArea/pl-textarea.scss

@@ -1,4 +1,4 @@
-@import '@/assets/mixins';
+@use '@/assets/mixins' as *;
 
 .ui-text-area {
   $root: &;

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

@@ -1,4 +1,4 @@
-@import "@/assets/mixins";
+@use "@/assets/mixins" as *;
 
 .pl-text-field {
   $root: &;

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

@@ -1,4 +1,4 @@
-@import "@/assets/mixins";
+@use "@/assets/mixins" as *;
 
 .pl-block-page {
   --pl-block-page-body-padding: var(--main-spacing, 24px);

package/src/utils/PlCloseModalBtn.vue

@@ -5,7 +5,7 @@
 </template>
 
 <style lang="scss" module>
-@import '@/assets/mixins';
+@use '@/assets/mixins' as *;
 
 .component {
   display: flex;

package/vite.config.ts

@@ -58,4 +58,11 @@ export default defineConfig({
       },
     },
   },
+  css: {
+    preprocessorOptions: {
+      scss: {
+        api: 'modern-compiler',
+      },
+    },
+  },
 });