@milaboratories/uikit 2.2.4 → 2.2.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@milaboratories/uikit",
-  "version": "2.2.4",
+  "version": "2.2.5",
   "type": "module",
   "main": "dist/pl-uikit.umd.js",
   "module": "dist/pl-uikit.js",
@@ -32,8 +32,8 @@
     "vue-tsc": "^2.1.6",
     "yarpm": "^1.2.0",
     "svgo": "^3.3.2",
-    "@platforma-sdk/model": "^1.10.2",
-    "@milaboratories/helpers": "^1.6.6"
+    "@milaboratories/helpers": "^1.6.6",
+    "@platforma-sdk/model": "^1.10.2"
   },
   "scripts": {
     "dev": "vite",

package/src/components/PlDialogModal/PlDialogModal.vue

@@ -52,6 +52,10 @@ const props = withDefaults(
      * Actions slot has a top border (default: `true`)
      */
     actionsHasTopBorder?: boolean;
+    /**
+     * If `true`, the modal window closes when clicking outside the modal area (default: `true`)
+     */
+    closeOnOutsideClick?: boolean;
   }>(),
   {
     width: '448px',
@@ -69,7 +73,7 @@ const modal = ref<HTMLElement>();
 const $attrs = useAttrs();
 
 function onClickShadow(ev: Event) {
-  if (modal.value && document.contains(ev.target as Node) && !modal.value.contains(ev.target as Node)) {
+  if (modal.value && props.closeOnOutsideClick && document.contains(ev.target as Node) && !modal.value.contains(ev.target as Node)) {
     emit('update:modelValue', false);
   }
 }

package/src/components/PlDropdown/PlDropdown.vue

@@ -321,9 +321,13 @@ watch(list, (el) => {
   }
 });
 
+const top = ref(0);
+
 useElementPosition(root, (pos) => {
   const focusWidth = 3; // see css
 
+  top.value = pos.top;
+
   const downTopOffset = pos.top + pos.height + focusWidth;
 
   if (downTopOffset + data.optionsHeight > pos.clientHeight) {
@@ -376,7 +380,7 @@ useElementPosition(root, (pos) => {
         </div>
         <label v-if="label">
           <i v-if="required" class="required-icon" />
-          <span>{{ label }}</span>
+          <span>{{ label }}: {{ top }}</span>
           <PlTooltip v-if="slots.tooltip" class="info" position="top">
             <template #tooltip>
               <slot name="tooltip" />

package/src/components/PlFileDialog/PlFileDialog.vue

@@ -32,11 +32,13 @@ const props = withDefaults(
     multi?: boolean;
     title?: string;
     autoSelectStorage?: boolean;
+    closeOnOutsideClick?: boolean;
   }>(),
   {
     extensions: undefined,
     title: undefined,
     autoSelectStorage: true,
+    closeOnOutsideClick: true,
   },
 );
 
@@ -302,6 +304,7 @@ const vTextOverflown = {
 <template>
   <PlDialogModal
     :no-content-gutters="true"
+    :close-on-outside-click="closeOnOutsideClick"
     class="split"
     :model-value="modelValue"
     width="688px"

package/src/components/PlFileInput/PlFileInput.vue

@@ -44,10 +44,6 @@ const props = withDefaults(
      * Allowed file extensions (should start with `.`)
      */
     extensions?: string[];
-    /**
-     * File dialog title
-     */
-    fileDialogTitle?: string;
     /**
      * Placeholder text
      */
@@ -68,11 +64,18 @@ const props = withDefaults(
      * If `true`, only the file name is displayed, not the full path to it.
      */
     showFilenameOnly?: boolean;
-
     /**
      * Remove rounded border and change styles
      */
     cellStyle?: boolean;
+    /**
+     * File dialog title
+     */
+    fileDialogTitle?: string;
+    /**
+     * If `true`, the file dialog window closes when clicking outside the modal area (default: `true`)
+     */
+    fileDialogCloseOnOutsideClick?: boolean;
   }>(),
   {
     label: undefined,
@@ -83,6 +86,7 @@ const props = withDefaults(
     error: undefined,
     helper: undefined,
     cellStyle: false,
+    fileDialogCloseOnOutsideClick: true,
   },
 );
 
@@ -182,5 +186,11 @@ if (!props.cellStyle) {
     </div>
     <div v-else-if="helper" class="upl-file-input__helper">{{ helper }}</div>
   </div>
-  <PlFileDialog v-model="data.fileDialogOpen" :extensions="extensions" :title="fileDialogTitle" @import:files="onImport" />
+  <PlFileDialog
+    v-model="data.fileDialogOpen"
+    :extensions="extensions"
+    :title="fileDialogTitle"
+    :close-on-outside-click="fileDialogCloseOnOutsideClick"
+    @import:files="onImport"
+  />
 </template>

package/src/components/PlSlideModal/PlSlideModal.vue

@@ -32,7 +32,7 @@ const props = withDefaults(
      */
     shadow?: boolean;
     /**
-     * If `true`, the modal window closes when clicking outside the modal area.
+     * If `true`, the modal window closes when clicking outside the modal area (default: `true`)
      */
     closeOnOutsideClick?: boolean;
   }>(),