@milaboratories/uikit 2.2.46 → 2.2.47

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@milaboratories/uikit",
-  "version": "2.2.46",
+  "version": "2.2.47",
   "type": "module",
   "main": "dist/pl-uikit.umd.js",
   "module": "dist/pl-uikit.js",
@@ -34,9 +34,9 @@
     "yarpm": "^1.2.0",
     "svgo": "^3.3.2",
     "@types/d3": "^7.4.3",
+    "@milaboratories/helpers": "^1.6.11",
     "@milaboratories/eslint-config": "^1.0.1",
-    "@platforma-sdk/model": "^1.21.20",
-    "@milaboratories/helpers": "^1.6.11"
+    "@platforma-sdk/model": "^1.21.20"
   },
   "scripts": {
     "dev": "vite",

package/src/components/PlDialogModal/PlDialogModal.vue

@@ -7,8 +7,9 @@ export default {
 <script lang="ts" setup>
 import { useEventListener } from '@/composition/useEventListener';
 import './pl-dialog-modal.scss';
-import { ref, useAttrs, useSlots } from 'vue';
+import { computed, ref, useAttrs, useSlots } from 'vue';
 import PlCloseModalBtn from '@/utils/PlCloseModalBtn.vue';
+import type { Size } from '@/types';
 
 const slots = useSlots();
 
@@ -56,6 +57,10 @@ const props = withDefaults(
      * If `true`, the modal window closes when clicking outside the modal area (default: `true`)
      */
     closeOnOutsideClick?: boolean;
+    /**
+     * Predefined size (standard small | medium | large). Takes precedence over (min|max)(width|height) properties. Not defined by default.
+     */
+    size?: Size | undefined;
   }>(),
   {
     width: '448px',
@@ -65,11 +70,45 @@ const props = withDefaults(
     closable: true,
     noContentGutters: false,
     actionsHasTopBorder: true,
+    size: undefined,
   },
 );
 
 const modal = ref<HTMLElement>();
 
+const style = computed(() => {
+  const { width, height, minHeight, maxHeight, size } = props;
+
+  if (size === 'small') {
+    return {
+      width: '448px',
+      height: '440px',
+      minHeight: 'auto',
+      maxHeight: 'auto',
+    };
+  }
+
+  if (size === 'medium') {
+    return {
+      width: '720px',
+      height: '720px',
+      minHeight: 'auto',
+      maxHeight: 'auto',
+    };
+  }
+
+  if (size === 'large') {
+    return {
+      width: '1080px',
+      height: '880px',
+      minHeight: 'auto',
+      maxHeight: 'auto',
+    };
+  }
+
+  return { width, height, minHeight, maxHeight };
+});
+
 const $attrs = useAttrs();
 
 function onClickShadow(ev: Event) {
@@ -94,7 +133,7 @@ useEventListener(document.body, 'keyup', (ev) => {
           ref="modal"
           class="pl-dialog-modal"
           :class="{ 'has-title': slots.title, 'has-content': slots.default }"
-          :style="{ width, height, minHeight, maxHeight }"
+          :style="style"
         >
           <PlCloseModalBtn v-if="closable" class="close-modal-btn" @click.stop="emit('update:modelValue', false)" />
           <div v-if="slots.title" class="pl-dialog-modal__title">

package/src/components/PlDropdownMulti/PlDropdownMulti.vue

@@ -73,6 +73,7 @@ const props = withDefaults(
     placeholder: '...',
     required: false,
     disabled: false,
+    options: undefined,
   },
 );
 

package/src/components/PlDropdownMultiRef/PlDropdownMultiRef.vue

@@ -53,6 +53,7 @@ const props = withDefaults(
     placeholder: '...',
     required: false,
     disabled: false,
+    options: undefined,
   },
 );