@v1nt1248/3nclient-lib 0.3.30 → 0.3.32

package/src/components/ui3n-mobile-menu/ui3n-mobile-menu.vue

@@ -7,8 +7,16 @@
   const emits = defineEmits<Ui3nMobileMenuEmits>();
   defineSlots<Ui3nMobileMenuSlots>();
 
-  const widthCss = computed(() => props.width || '240px');
-  const blurValue = computed(() => (props.withBlur ? '2px' : '0'));
+  const inlineStyles = computed(() => {
+    const numericWidth = !isNaN(Number(props.width));
+    const widthStr = numericWidth ? `${props.width}px` : props.width || '240px';
+    const blurStr = props.withBlur ? '2px' : '0';
+
+    return {
+      '--ui3n-menu-width-custom': widthStr,
+      '--ui3n-menu-blur-custom': blurStr,
+    };
+  });
 
   function toggleMenu() {
     emits('update:modelValue', !props.modelValue);
@@ -16,7 +24,10 @@
 </script>
 
 <template>
-  <div :class="$style.ui3nMobileMenu">
+  <div
+    :class="$style.ui3nMobileMenu"
+    :style="inlineStyles"
+  >
     <ui3n-button
       v-if="!modelValue"
       type="icon"
@@ -31,46 +42,72 @@
     <transition name="slide-fade">
       <div
         v-if="modelValue"
-        :class="$style.appMenu"
+        :class="$style.menuWrapper"
       >
-        <div :class="$style.appMenuHeader">
-          <slot name="header" />
-        </div>
-        <div :class="$style.appMenuBody">
-          <slot name="menuBody" />
-        </div>
-        <div :class="$style.appMenuFooter">
-          <slot name="footer" />
-        </div>
-
-        <ui3n-button
-          type="icon"
-          icon="round-close"
-          color="transparent"
-          icon-color="var(--color-icon-block-secondary-default)"
-          icon-size="32"
-          :class="$style.closeBtn"
-          @click.stop.prevent="toggleMenu"
+        <div
+          :class="$style.overlay"
+          @click="toggleMenu"
         />
+
+        <div :class="$style.menuPanel">
+          <div :class="$style.appMenu">
+            <div :class="$style.appMenuHeader">
+              <slot name="header" />
+            </div>
+            <div :class="$style.appMenuBody">
+              <slot name="menuBody" />
+            </div>
+            <div :class="$style.appMenuFooter">
+              <slot name="footer" />
+            </div>
+          </div>
+
+          <ui3n-button
+            type="icon"
+            icon="round-close"
+            color="transparent"
+            icon-color="var(--color-icon-block-secondary-default)"
+            icon-size="32"
+            :class="$style.closeBtn"
+            @click.stop.prevent="toggleMenu"
+          />
+        </div>
       </div>
     </transition>
   </div>
-  <div
-    v-if="modelValue"
-    :class="$style.overlay"
-  />
 </template>
 
 <style lang="scss" module>
   @use '../../assets/styles/mixins' as mixins;
+
   .ui3nMobileMenu {
-    --ui3n-menu-width-custom: v-bind(widthCss);
+    --ui3n-menu-width-custom: 240px;
 
+    display: inline-block;
     width: max-content;
   }
 
-  .appMenu {
+  .menuWrapper {
     position: fixed;
+    inset: 0;
+    width: 100vw;
+    height: 100dvh;
+    z-index: 1050;
+    pointer-events: auto;
+  }
+
+  .menuPanel {
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: flex;
+    align-items: flex-start;
+    height: 100dvh;
+    z-index: 2;
+  }
+
+  .appMenu {
+    position: relative;
     top: 0;
     left: 0;
     width: var(--ui3n-menu-width-custom);
@@ -79,13 +116,13 @@
     flex-direction: column;
     justify-content: flex-start;
     align-items: stretch;
-    min-height: 100dvh;
-    max-height: 100dvh;
+    height: 100%;
     color: var(--color-text-block-primary-default);
     background-color: var(--color-bg-block-primary-default);
     overflow-x: hidden;
     overflow-y: auto;
-    z-index: 1050;
+    box-shadow: 4px 0 16px var(--shadow-close);
+    flex-shrink: 0;
   }
 
   .appMenuHeader {
@@ -112,20 +149,20 @@
   }
 
   .closeBtn {
-    position: fixed;
+    margin-top: 8px;
+    margin-left: 8px;
     min-width: 48px !important;
     height: 48px;
-    top: 8px;
-    left: calc(var(--ui3n-menu-width-custom) + 8px);
-    z-index: 1005;
+    flex-shrink: 0;
   }
 
   .overlay {
-    position: fixed;
+    position: absolute;
     inset: 0;
     background-color: oklch(from var(--color-bg-block-primary-default) calc(l * 0.1) c h / 0.5);
-    backdrop-filter: blur(v-bind(blurValue));
-    z-index: 1000;
+    backdrop-filter: blur(var(--ui3n-menu-blur-custom, 0px));
+    z-index: 1;
+    cursor: pointer;
   }
 </style>
 
@@ -135,17 +172,29 @@
     transition:
       transform 0.2s ease-in-out,
       opacity 0.2s ease-in-out;
+
+    div[class*='menuPanel'] {
+      transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+    }
   }
 
   .slide-fade-enter-from,
   .slide-fade-leave-to {
     transform: translateX(calc(var(--ui3n-menu-width-custom) * -1));
     opacity: 0;
+
+    div[class*='menuPanel'] {
+      transform: translateX(-100%);
+    }
   }
 
   .slide-fade-enter-to,
   .slide-fade-leave-from {
     transform: translateX(0);
     opacity: 1;
+
+    div[class*='menuPanel'] {
+      transform: translateX(0);
+    }
   }
 </style>

package/src/components/ui3n-notification/types.ts

@@ -24,10 +24,6 @@ export interface Ui3nNotificationProps {
    * @default false
    */
   withIcon?: boolean;
-  /**
-   * Teleport target
-   */
-  teleport?: string;
   /**
    * Called when notification opens
    */

package/src/components/ui3n-notification/ui3n-notification-container.vue

@@ -0,0 +1,62 @@
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import Ui3nNotification from './ui3n-notification.vue';
+  import type { Ui3nNotificationProps } from './types';
+
+  interface IdentifiableNotice extends Ui3nNotificationProps {
+    id: string;
+  }
+
+  const notices = ref<IdentifiableNotice[]>([]);
+
+  function add(notice: IdentifiableNotice) {
+    notices.value.push(notice);
+  }
+
+  function remove(id: string) {
+    notices.value = notices.value.filter(n => n.id !== id);
+  }
+
+  function onClose(notice: IdentifiableNotice) {
+    if (notice.onClose) {
+      notice.onClose();
+    }
+
+    remove(notice.id);
+  }
+
+  defineExpose({ add, remove });
+</script>
+
+<template>
+  <div
+    id="ui3n-notifications-container"
+    :class="$style.ui3nNotificationsWrapper"
+  >
+    <ui3n-notification
+      v-for="notice in notices"
+      :key="notice.id"
+      v-bind="notice"
+      :on-close="() => onClose(notice)"
+    />
+  </div>
+</template>
+
+<style lang="scss" module>
+  .ui3nNotificationsWrapper {
+    position: fixed;
+    top: 24px;
+    right: 24px;
+    z-index: 9999;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    max-width: 380px;
+    width: 100%;
+    pointer-events: none;
+  }
+
+  .ui3nNotificationsWrapper :global([class*='ui3nNotification']) {
+    pointer-events: auto;
+  }
+</style>

package/src/components/ui3n-notification/ui3n-notification.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-  import { computed, onMounted, onBeforeUnmount, useCssModule } from 'vue';
+  import { computed, onMounted, onBeforeUnmount, ref, useCssModule } from 'vue';
   import Ui3nIcon from '../ui3n-icon/ui3n-icon.vue';
   import Ui3nButton from '../ui3n-button/ui3n-button.vue';
   import type { Ui3nNotificationProps } from './types';
@@ -9,58 +9,64 @@
     position: 'center',
     duration: 0,
     withIcon: true,
-    onOpen: () => void 0,
-    onClose: () => void 0,
+    onOpen: () => {},
+    onClose: () => {},
   });
 
-  const $style = useCssModule();
+  let timerId: ReturnType<typeof setTimeout> | null = null;
 
-  const stylesByTypes = {
-    success: {
-      color: 'var(--success-content-default)',
-      icon: 'round-check-circle',
-      iconColor: 'var(--success-fill-default)',
-      iconRotate: 0,
-    },
-    warning: {
-      color: 'var(--warning-content-default)',
-      icon: 'round-warning',
-      iconColor: 'var(--warning-fill-default)',
-      iconRotate: 0,
-    },
-    info: {
-      color: 'var(--info-content-default)',
-      icon: 'round-info',
-      iconColor: 'var(--info-fill-default)',
-      iconRotate: 180,
-    },
-    error: {
-      color: 'var(--error-content-default)',
-      icon: 'round-info',
-      iconColor: 'var(--error-fill-default)',
-      iconRotate: 180,
-    },
-  };
+  const $style = useCssModule();
 
-  let timerId: ReturnType<typeof setTimeout> | null = null;
+  const currentTypeConfig = computed(() => {
+    const stylesByTypes = {
+      success: {
+        color: 'var(--success-content-default)',
+        icon: 'round-check-circle',
+        iconColor: 'var(--success-fill-default)',
+        iconRotate: 0,
+      },
+      warning: {
+        color: 'var(--warning-content-default)',
+        icon: 'round-warning',
+        iconColor: 'var(--warning-fill-default)',
+        iconRotate: 0,
+      },
+      info: {
+        color: 'var(--info-content-default)',
+        icon: 'round-info',
+        iconColor: 'var(--info-fill-default)',
+        iconRotate: 180,
+      },
+      error: {
+        color: 'var(--error-content-default)',
+        icon: 'round-info',
+        iconColor: 'var(--error-fill-default)',
+        iconRotate: 180,
+      },
+    };
+    return stylesByTypes[props.type || 'info'];
+  });
 
   const mainCssClasses = computed(() => {
     const val = [$style.ui3nNotification, $style[`${props.type}Type`], $style[`${props.position}Position`]];
     props.withIcon && val.push($style.withIcon);
-
     return val;
   });
 
   function closeNotification() {
-    props.onClose && props.onClose();
+    if (props.onClose) {
+      props.onClose();
+    }
   }
 
   onMounted(() => {
-    props.onOpen && props.onOpen();
+    if (props.onOpen) {
+      props.onOpen();
+    }
 
     if (props.duration > 0) {
       timerId = setTimeout(() => {
-        props.onClose();
+        closeNotification();
       }, props.duration);
     }
   });
@@ -73,43 +79,38 @@
 </script>
 
 <template>
-  <component
-    :is="teleport ? 'Teleport' : 'div'"
-    :to="teleport"
+  <div
+    :id="id"
+    :class="mainCssClasses"
   >
     <div
-      :id="id"
-      :class="mainCssClasses"
+      v-if="withIcon"
+      :class="$style.ui3nNotificationIcon"
     >
-      <div
-        v-if="withIcon"
-        :class="$style.ui3nNotificationIcon"
-      >
-        <ui3n-icon
-          :icon="stylesByTypes[type!].icon"
-          size="16"
-          :rotate="stylesByTypes[type!].iconRotate"
-          :color="stylesByTypes[type!].iconColor"
-        />
-      </div>
-
-      <div :class="$style.ui3nNotificationContent">
-        {{ content }}
-      </div>
-
-      <ui3n-button
-        v-if="!duration"
-        type="icon"
-        size="small"
-        color="transparent"
-        icon="round-close"
-        :icon-color="stylesByTypes[type!].color"
-        icon-size="16"
-        :class="$style.closeBtn"
-        @click="closeNotification"
+      <ui3n-icon
+        :icon="currentTypeConfig.icon"
+        size="16"
+        :rotate="currentTypeConfig.iconRotate"
+        :color="currentTypeConfig.iconColor"
       />
     </div>
-  </component>
+
+    <div :class="$style.ui3nNotificationContent">
+      {{ content }}
+    </div>
+
+    <ui3n-button
+      v-if="!duration"
+      type="icon"
+      size="small"
+      color="transparent"
+      icon="round-close"
+      :icon-color="currentTypeConfig.color"
+      icon-size="16"
+      :class="$style.closeBtn"
+      @click="closeNotification"
+    />
+  </div>
 </template>
 
 <style lang="scss" module>
@@ -122,6 +123,7 @@
 
     display: flex;
     position: relative;
+    box-sizing: border-box;
     z-index: 5000;
     border-radius: var(--ui3n-notification-border-radius);
     outline: 1px solid var(--color-border-control-tritery-default);
@@ -130,7 +132,7 @@
     margin-bottom: var(--ui3n-notification-margin-bottom);
     justify-content: center;
     align-items: center;
-    gap: 4px;
+    gap: 8px;
   }
 
   .withIcon {
@@ -147,6 +149,7 @@
     display: flex;
     justify-content: center;
     align-items: center;
+    flex-shrink: 0;
   }
 
   .ui3nNotificationContent {
@@ -155,13 +158,14 @@
     font-size: var(--ui3n-notification-font-size);
     font-weight: 500;
     line-height: 1.33;
+    padding-right: 20px;
   }
 
   .closeBtn {
     position: absolute;
     z-index: 1;
-    top: 0;
-    right: 0;
+    top: 6px;
+    right: 6px;
   }
 
   .infoType {