@milaboratories/uikit 1.2.9 → 1.2.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@milaboratories/uikit",
-  "version": "1.2.9",
+  "version": "1.2.10",
   "type": "module",
   "main": "dist/pl-uikit.umd.js",
   "module": "dist/pl-uikit.js",

package/src/components/PlLogView/PlLogView.vue

@@ -32,7 +32,7 @@ const scrollDown = () => {
   tapIf(contentRef.value, (el) => {
     // 100px from bottom (temp)
     if (el.clientHeight + el.scrollTop + 100 > el.scrollHeight) {
-      el.scrollTo(0, el.scrollHeight);
+      el.scrollTo(el.scrollLeft, el.scrollHeight);
     }
   });
 };

package/src/components/PlSlideModal/PlSlideModal.vue

@@ -1,26 +1,45 @@
 <script lang="ts">
 export default {
+  name: 'PlSlideModal',
   inheritAttrs: false,
 };
 </script>
 
 <script lang="ts" setup>
-import { computed, ref, useAttrs } from 'vue';
+import { computed, ref, useAttrs, useSlots } from 'vue';
 import TransitionSlidePanel from '@/components/TransitionSlidePanel.vue';
 import { useClickOutside, useEventListener } from '@/index';
 
-const emit = defineEmits(['update:modelValue']);
+const slots = useSlots(); // title & actions
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: boolean): void;
+}>();
 
 const props = withDefaults(
   defineProps<{
+    /**
+     * Determines whether the modal is open
+     */
     modelValue: boolean;
+    /**
+     * Css `width` value (px, %, em etc)
+     */
     width?: string;
+    /**
+     * If `true`, then show shadow (default value `false`)
+     */
     shadow?: boolean;
+    /**
+     * If `true`, the modal window closes when clicking outside the modal area.
+     */
+    closeOnOutsideClick?: boolean;
   }>(),
   {
     modelValue: false,
-    width: undefined,
+    width: '368px',
     shadow: false,
+    closeOnOutsideClick: true,
   },
 );
 
@@ -31,7 +50,7 @@ const modal = ref();
 const $attrs = useAttrs();
 
 useClickOutside(modal, () => {
-  if (props.modelValue) {
+  if (props.modelValue && props.closeOnOutsideClick) {
     emit('update:modelValue', false);
   }
 });
@@ -46,37 +65,54 @@ useEventListener(document, 'keydown', (evt: KeyboardEvent) => {
 <template>
   <Teleport to="body">
     <TransitionSlidePanel>
-      <div v-if="modelValue" ref="modal" :style="{ width }" v-bind="$attrs" class="slide-modal" @keyup.esc="emit('update:modelValue', false)">
+      <div
+        v-if="modelValue"
+        ref="modal"
+        :style="{ width }"
+        v-bind="$attrs"
+        class="pl-slide-modal"
+        :class="{ 'has-title': slots.title }"
+        @keyup.esc="emit('update:modelValue', false)"
+      >
         <div class="close-dialog-btn" @click="emit('update:modelValue', false)" />
-        <div class="slide-modal__content">
+        <div v-if="slots.title" class="pl-slide-modal__title">
+          <slot name="title" />
+        </div>
+        <div class="pl-slide-modal__content">
           <slot />
         </div>
+        <div v-if="slots.actions" class="pl-slide-modal__actions">
+          <slot name="actions" />
+        </div>
       </div>
     </TransitionSlidePanel>
-    <div v-if="modelValue && shadow" class="dialog-modal__shadow" @keyup.esc="emit('update:modelValue', false)" />
+    <div v-if="modelValue && shadow" class="pl-dialog-modal__shadow" @keyup.esc="emit('update:modelValue', false)" />
   </Teleport>
 </template>
 
-<style lang="scss" scoped>
+<style lang="scss">
 @import '@/assets/mixins.scss';
 
-.slide-modal {
+.pl-slide-modal {
+  --padding-top: 24px;
   position: absolute;
   top: var(--title-bar-height);
   right: 0;
   bottom: 0;
   z-index: 3;
-  padding: 24px;
+  display: flex;
+  flex-direction: column;
+  padding-top: var(--padding-top);
 
   will-change: transform;
 
   background-color: #fff;
 
-  border-left: 1px solid var(--txt-01);
-  border-top: 1px solid var(--txt-01);
-
-  box-shadow: var(--shadow-l);
-  border-radius: 24px 0 0 0;
+  border-left: 1px solid var(--div-grey);
+  /* Shadow L */
+  box-shadow:
+    0px 8px 16px -4px rgba(15, 36, 77, 0.16),
+    0px 12px 32px -4px rgba(15, 36, 77, 0.16);
 
   .close-dialog-btn {
     position: absolute;
@@ -90,15 +126,43 @@ useEventListener(document, 'keydown', (evt: KeyboardEvent) => {
     }
   }
 
-  &.collapse-padding {
+  &.has-title {
+    --padding-top: 0;
+  }
+
+  &__title {
+    display: flex;
+    align-items: center;
+    font-family: var(--font-family-base);
+    font-size: 28px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 32px; /* 114.286% */
+    letter-spacing: -0.56px;
+    padding: 24px;
+  }
+
+  &__actions {
+    display: flex;
+    align-items: center;
+    gap: 6px;
     padding: 0;
-    border-radius: 0;
-    border-top: 0;
+    min-height: 88px;
+    padding: 0 24px;
+    button {
+      min-width: 160px;
+    }
   }
 
+  // Closes modal too
+
   &__content {
-    height: 100%;
-    overflow: auto;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+    padding: 16px 0;
+    margin: 0 24px;
   }
 }
 </style>

package/src/composition/useClickOutside.ts

@@ -6,10 +6,14 @@ type HtmlRef = Ref<HTMLElement | undefined>;
 
 export function useClickOutside(el: HtmlRef | HtmlRef[], cb: () => void) {
   useEventListener(document, 'click', (event) => {
+    if (!document.contains(event.target as Node)) {
+      return;
+    }
+
     const values = flatValue(el)
       .map((e) => e.value)
       .filter((v) => !!v) as HTMLElement[];
-    if (!values.some((v) => v?.contains(event.target as HTMLElement))) {
+    if (!values.some((v) => v?.contains(event.target as Node))) {
       cb();
     }
   });