@v1nt1248/3nclient-lib 0.3.21 → 0.3.23

package/dist/ui3n-components.d.ts

@@ -29,6 +29,8 @@ import { default as Ui3nEditable } from './components/ui3n-editable/ui3n-editabl
 import { default as Ui3nAutocomplete } from './components/ui3n-autocomplete/ui3n-autocomplete.vue';
 import { default as Ui3nSlider } from './components/ui3n-slider/ui3n-slider.vue';
 import { default as Ui3nSelector } from './components/ui3n-selector/ui3n-selector.vue';
+import { default as Ui3nMobileMenu } from './components/ui3n-mobile-menu/ui3n-mobile-menu.vue';
+import { default as Ui3nMobileMenuItem } from './components/ui3n-mobile-menu-item/ui3n-mobile-menu-item.vue';
 import { default as Ui3nHtml } from './directives/ui3n-html';
 import { default as Ui3nClickOutside } from './directives/ui3n-click-outside';
 import { default as Ui3nResize } from './directives/ui3n-resize';
@@ -72,6 +74,8 @@ declare module 'vue' {
         Ui3nText: typeof Ui3nText;
         Ui3nVirtualScroll: typeof Ui3nVirtualScroll;
         Ui3nTooltip: typeof Ui3nTooltip;
+        Ui3nMobileMenu: typeof Ui3nMobileMenu;
+        Ui3nMobileMenuItem: typeof Ui3nMobileMenuItem;
     }
     interface GlobalDirectives {
         Ui3nHtml: typeof Ui3nHtml;

package/dist/ui3n-components.js

@@ -20596,10 +20596,96 @@ var Qu = /* @__PURE__ */ Q(/* @__PURE__ */ d({
 	item: "_item_11ric_91",
 	itemSelected: "_itemSelected_11ric_105",
 	itemDisabled: "_itemDisabled_11ric_109"
+} }]]), Rd = /* @__PURE__ */ Q(/* @__PURE__ */ d({
+	__name: "ui3n-mobile-menu",
+	props: {
+		modelValue: { type: Boolean },
+		width: {},
+		withBlur: { type: Boolean }
+	},
+	emits: ["update:modelValue"],
+	setup(e, { emit: n }) {
+		M((e) => ({
+			v5ec41730: f.value,
+			v06b55ad7: p.value
+		}));
+		let l = e, d = n, f = i(() => l.width || "240px"), p = i(() => l.withBlur ? "2px" : "0");
+		function m() {
+			d("update:modelValue", !l.modelValue);
+		}
+		return (n, i) => (x(), s(t, null, [c("div", { class: g(n.$style.ui3nMobileMenu) }, [e.modelValue ? o("", !0) : (x(), a(Gl, {
+			key: 0,
+			type: "icon",
+			class: g(n.$style.menuButton),
+			color: "var(--color-bg-block-primary-default)",
+			icon: "round-menu",
+			"icon-color": "var(--color-icon-block-primary-default)",
+			"icon-size": "32",
+			onClick: B(m, ["stop", "prevent"])
+		}, null, 8, ["class"])), u(r, { name: "slide-fade" }, {
+			default: L(() => [e.modelValue ? (x(), s("div", {
+				key: 0,
+				class: g(n.$style.appMenu)
+			}, [
+				c("div", { class: g(n.$style.appMenuHeader) }, [T(n.$slots, "header")], 2),
+				c("div", { class: g(n.$style.appMenuBody) }, [T(n.$slots, "menuBody")], 2),
+				c("div", { class: g(n.$style.appMenuFooter) }, [T(n.$slots, "footer")], 2),
+				u(Gl, {
+					type: "icon",
+					icon: "round-close",
+					color: "transparent",
+					"icon-color": "var(--color-icon-block-secondary-default)",
+					"icon-size": "32",
+					class: g(n.$style.closeBtn),
+					onClick: B(m, ["stop", "prevent"])
+				}, null, 8, ["class"])
+			], 2)) : o("", !0)]),
+			_: 3
+		})], 2), e.modelValue ? (x(), s("div", {
+			key: 0,
+			class: g(n.$style.overlay)
+		}, null, 2)) : o("", !0)], 64));
+	}
+}), [["__cssModules", { $style: {
+	ui3nMobileMenu: "_ui3nMobileMenu_b61ep_1",
+	appMenu: "_appMenu_b61ep_6",
+	appMenuHeader: "_appMenuHeader_b61ep_25",
+	appMenuBody: "_appMenuBody_b61ep_30",
+	appMenuFooter: "_appMenuFooter_b61ep_38",
+	menuButton: "_menuButton_b61ep_43",
+	closeBtn: "_closeBtn_b61ep_48",
+	overlay: "_overlay_b61ep_57"
+} }]]), zd = /* @__PURE__ */ Q(/* @__PURE__ */ d({
+	__name: "ui3n-mobile-menu-item",
+	props: {
+		item: {},
+		isActive: { type: Boolean }
+	},
+	emits: ["selectItem"],
+	setup(e, { emit: t }) {
+		let n = e, r = t;
+		async function i() {
+			r("selectItem", n.item);
+		}
+		return (t, n) => (x(), s("div", {
+			class: g([t.$style.menuItem, e.isActive && t.$style.menuItemSelected]),
+			onClick: i
+		}, [e.item.icon ? (x(), a(Hl, {
+			key: 0,
+			icon: e.item.icon,
+			size: "20",
+			color: "var(--color-icon-control-secondary-default)"
+		}, null, 8, ["icon"])) : o("", !0), c("span", { class: g(t.$style.menuItemName) }, D(e.item.name), 3)], 2));
+	}
+}), [["__cssModules", { $style: {
+	menuItem: "_menuItem_1a8ao_2",
+	menuItemName: "_menuItemName_1a8ao_13",
+	menuItemSelected: "_menuItemSelected_1a8ao_19",
+	bounceOnce: "_bounceOnce_1a8ao_1"
 } }]]);
 //#endregion
 //#region src/composables/useDblClickHandler.ts
-function Rd(e, t, n = 250) {
+function Bd(e, t, n = 250) {
 	let r = 0, i = null;
 	function a(a) {
 		r++, i && clearTimeout(i), i = setTimeout(() => {
@@ -20609,4 +20695,4 @@ function Rd(e, t, n = 250) {
 	return { handleDblClick: a };
 }
 //#endregion
-export { Pd as Ui3nAutocomplete, ad as Ui3nBadge, od as Ui3nBreadcrumb, sd as Ui3nBreadcrumbs, Gl as Ui3nButton, Ou as Ui3nCheckbox, Kl as Ui3nChip, Ho as Ui3nClickOutside, Bu as Ui3nDialog, Lu as Ui3nDialogProvider, Jl as Ui3nDropFiles, Ad as Ui3nEditable, Xl as Ui3nEmoji, Bo as Ui3nHtml, Hl as Ui3nIcon, Ql as Ui3nInput, Su as Ui3nInputFile, ed as Ui3nList, Rl as Ui3nLongPress, Qu as Ui3nMenu, Au as Ui3nNotification, yd as Ui3nProgressCircular, md as Ui3nProgressLinear, Td as Ui3nRadio, Ed as Ui3nRadioGroup, Yo as Ui3nResize, es as Ui3nRipple, Ld as Ui3nSelector, Fd as Ui3nSlider, ud as Ui3nStepLineBar, ld as Ui3nSwitch, Pu as Ui3nTable, ju as Ui3nTableSortIcon, rd as Ui3nTabs, wu as Ui3nText, jl as Ui3nTitle, xd as Ui3nTooltip, nd as Ui3nVirtualScroll, Rd as useDblClickHandler };
+export { Pd as Ui3nAutocomplete, ad as Ui3nBadge, od as Ui3nBreadcrumb, sd as Ui3nBreadcrumbs, Gl as Ui3nButton, Ou as Ui3nCheckbox, Kl as Ui3nChip, Ho as Ui3nClickOutside, Bu as Ui3nDialog, Lu as Ui3nDialogProvider, Jl as Ui3nDropFiles, Ad as Ui3nEditable, Xl as Ui3nEmoji, Bo as Ui3nHtml, Hl as Ui3nIcon, Ql as Ui3nInput, Su as Ui3nInputFile, ed as Ui3nList, Rl as Ui3nLongPress, Qu as Ui3nMenu, Rd as Ui3nMobileMenu, zd as Ui3nMobileMenuItem, Au as Ui3nNotification, yd as Ui3nProgressCircular, md as Ui3nProgressLinear, Td as Ui3nRadio, Ed as Ui3nRadioGroup, Yo as Ui3nResize, es as Ui3nRipple, Ld as Ui3nSelector, Fd as Ui3nSlider, ud as Ui3nStepLineBar, ld as Ui3nSwitch, Pu as Ui3nTable, ju as Ui3nTableSortIcon, rd as Ui3nTabs, wu as Ui3nText, jl as Ui3nTitle, xd as Ui3nTooltip, nd as Ui3nVirtualScroll, Bd as useDblClickHandler };

package/dist/variables.css

@@ -6,6 +6,7 @@
   --spacing-l: 32px;
   --spacing-xl: 40px;
   --spacing-xxl: 48px;
+  --spacing-xxxl: 64px;
   --white-inf: oklch(100% 0.000 0.0deg / 0.000);
   --white-100: oklch(100% 0.000 0.0deg);
   --white-4: oklch(98.5% 0.000 0.0deg / 0.040);
@@ -119,6 +120,7 @@
   --font-20: 20px;
   --font-24: 24px;
   --font-32: 32px;
+
 }
 
 .default-theme {

package/package.json

@@ -2,7 +2,7 @@
   "name": "@v1nt1248/3nclient-lib",
   "license": "AGPL-3.0-or-later",
   "author": "v1nt1248",
-  "version": "0.3.21",
+  "version": "0.3.23",
   "description": "Library for 3NWeb clients",
   "type": "module",
   "files": [

package/src/components/index.ts

@@ -112,6 +112,14 @@ import type {
   Ui3nSelectorSlots,
   Ui3nSelectorItemDisplayingFunction,
 } from './ui3n-selector/types';
+import Ui3nMobileMenu from './ui3n-mobile-menu/ui3n-mobile-menu.vue';
+import type { Ui3nMobileMenuProps, Ui3nMobileMenuEmits, Ui3nMobileMenuSlots } from './ui3n-mobile-menu/types';
+import Ui3nMobileMenuItem from './ui3n-mobile-menu-item/ui3n-mobile-menu-item.vue';
+import type {
+  Ui3nMobileMenuItemBase,
+  Ui3nMobileMenuItemProps,
+  Ui3nMobileMenuItemEmits,
+} from './ui3n-mobile-menu-item/types';
 
 export {
   Ui3nIcon,
@@ -233,4 +241,12 @@ export {
   Ui3nSelectorSlots,
   Ui3nSelectorOptionBase,
   Ui3nSelectorItemDisplayingFunction,
+  Ui3nMobileMenu,
+  Ui3nMobileMenuProps,
+  Ui3nMobileMenuEmits,
+  Ui3nMobileMenuSlots,
+  Ui3nMobileMenuItem,
+  Ui3nMobileMenuItemBase,
+  Ui3nMobileMenuItemProps,
+  Ui3nMobileMenuItemEmits,
 };

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

@@ -134,12 +134,12 @@
     v-on="
       draggable
         ? {
-            dragstart: onDragstart,
-            mousedown: onMousedown,
-            mouseup: onMouseup,
-            mousemove: onMousemove,
-            keydown: onKeydown,
-          }
+          dragstart: onDragstart,
+          mousedown: onMousedown,
+          mouseup: onMouseup,
+          mousemove: onMousemove,
+          keydown: onKeydown,
+        }
         : { keydown: onKeydown }
     "
   >

package/src/components/ui3n-mobile-menu/types.ts

@@ -0,0 +1,38 @@
+import type { VNode } from 'vue';
+
+/**
+ * Menu component properties
+ */
+export interface Ui3nMobileMenuProps {
+  modelValue: boolean;
+  width?: string;
+  withBlur?: boolean;
+}
+
+/**
+ * Menu component emits
+ */
+export interface Ui3nMobileMenuEmits {
+  /**
+   * Emitted when model value updates
+   */
+  (event: 'update:modelValue', value: boolean): void;
+}
+
+/**
+ * Menu component slots
+ */
+export interface Ui3nMobileMenuSlots {
+  /**
+   * Menu Header slot - section to add custom data on top of the menu
+   */
+  header: () => VNode;
+  /**
+   * Menu body slot - The section is where your menu items are placed
+   */
+  menuBody: () => VNode;
+  /**
+   * Menu footer slot - section to add custm data on the bottom of menu
+   */
+  footer: () => VNode;
+}

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

@@ -0,0 +1,151 @@
+<script lang="ts" setup>
+  import { computed } from 'vue';
+  import type { Ui3nMobileMenuProps, Ui3nMobileMenuEmits, Ui3nMobileMenuSlots } from './types';
+  import Ui3nButton from '../ui3n-button/ui3n-button.vue';
+
+  const props = defineProps<Ui3nMobileMenuProps>();
+  const emits = defineEmits<Ui3nMobileMenuEmits>();
+  defineSlots<Ui3nMobileMenuSlots>();
+
+  const widthCss = computed(() => props.width || '240px');
+  const blurValue = computed(() => (props.withBlur ? '2px' : '0'));
+
+  function toggleMenu() {
+    emits('update:modelValue', !props.modelValue);
+  }
+</script>
+
+<template>
+  <div :class="$style.ui3nMobileMenu">
+    <ui3n-button
+      v-if="!modelValue"
+      type="icon"
+      :class="$style.menuButton"
+      color="var(--color-bg-block-primary-default)"
+      icon="round-menu"
+      icon-color="var(--color-icon-block-primary-default)"
+      icon-size="32"
+      @click.stop.prevent="toggleMenu"
+    />
+
+    <transition name="slide-fade">
+      <div
+        v-if="modelValue"
+        :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>
+
+        <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>
+    </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);
+
+    width: max-content;
+  }
+
+  .appMenu {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: var(--ui3n-menu-width-custom);
+    max-width: 80vw;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+    min-height: 100dvh;
+    max-height: 100dvh;
+    color: var(--color-text-block-primary-default);
+    background-color: var(--color-bg-block-primary-default);
+    overflow-x: hidden;
+    overflow-y: auto;
+    z-index: 1050;
+  }
+
+  .appMenuHeader {
+    position: relative;
+    width: 100%;
+  }
+
+  .appMenuBody {
+    position: relative;
+    width: 100%;
+    flex-grow: 1;
+    overflow-x: hidden;
+    overflow-y: auto;
+  }
+
+  .appMenuFooter {
+    position: relative;
+    width: 100%;
+  }
+
+  .menuButton {
+    min-width: 48px !important;
+    height: 48px;
+  }
+
+  .closeBtn {
+    position: fixed;
+    min-width: 48px !important;
+    height: 48px;
+    top: 8px;
+    left: calc(var(--ui3n-menu-width-custom) + 8px);
+    z-index: 1005;
+  }
+
+  .overlay {
+    position: fixed;
+    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;
+  }
+</style>
+
+<style lang="scss">
+  .slide-fade-enter-active,
+  .slide-fade-leave-active {
+    transition:
+      transform 0.2s ease-in-out,
+      opacity 0.2s ease-in-out;
+  }
+
+  .slide-fade-enter-from,
+  .slide-fade-leave-to {
+    transform: translateX(calc(var(--ui3n-menu-width-custom) * -1));
+    opacity: 0;
+  }
+
+  .slide-fade-enter-to,
+  .slide-fade-leave-from {
+    transform: translateX(0);
+    opacity: 1;
+  }
+</style>

package/src/components/ui3n-mobile-menu-item/types.ts

@@ -0,0 +1,23 @@
+export interface Ui3nMobileMenuItemBase {
+  id: string | number;
+  name: string;
+  icon?: string;
+}
+
+/**
+ * Menu Item component properties
+ */
+export interface Ui3nMobileMenuItemProps<T extends Ui3nMobileMenuItemBase> {
+  item: T;
+  isActive?: boolean;
+}
+
+/**
+ * Menu Item component emits
+ */
+export interface Ui3nMobileMenuItemEmits<T extends Ui3nMobileMenuItemBase> {
+  /**
+   * Emitted when an item is selected on the menu
+   */
+  (event: 'selectItem', item: T): void;
+}

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

@@ -0,0 +1,73 @@
+<script lang="ts" setup generic="T extends Ui3nMobileMenuItemBase">
+  import type { Ui3nMobileMenuItemBase, Ui3nMobileMenuItemProps, Ui3nMobileMenuItemEmits } from './types';
+  import Ui3nIcon from '../ui3n-icon/ui3n-icon.vue';
+
+  const props = defineProps<Ui3nMobileMenuItemProps<T>>();
+  const emits = defineEmits<Ui3nMobileMenuItemEmits<T>>();
+
+  async function selectMenuItem() {
+    emits('selectItem', props.item);
+  }
+</script>
+
+<template>
+  <div
+    :class="[$style.menuItem, isActive && $style.menuItemSelected]"
+    @click="selectMenuItem"
+  >
+    <ui3n-icon
+      v-if="item.icon"
+      :icon="item.icon"
+      size="20"
+      color="var(--color-icon-control-secondary-default)"
+    />
+    <span :class="$style.menuItemName">
+      {{ item.name }}
+    </span>
+  </div>
+</template>
+
+<style lang="scss" module>
+  @use '../../assets/styles/mixins' as mixins;
+
+  .menuItem {
+    display: flex;
+    width: 100%;
+    height: var(--spacing-xxl);
+    border-radius: var(--spacing-s);
+    justify-content: flex-start;
+    align-items: center;
+    column-gap: var(--spacing-s);
+    padding: 0 var(--spacing-s);
+    cursor: pointer;
+
+    .menuItemName {
+      font-size: var(--font-14);
+      font-weight: 600;
+      line-height: var(--font-20);
+      color: var(--color-text-control-primary-default);
+    }
+
+    &:hover,
+    &.menuItemSelected {
+      background-color: var(--color-bg-control-primary-hover);
+
+      & > div {
+        color: var(--color-icon-control-accent-default);
+        animation: bounceOnce 0.4s ease-in-out forwards;
+      }
+    }
+  }
+
+  @keyframes bounceOnce {
+    0% {
+      transform: scale(1);
+    }
+    50% {
+      transform: scale(1.25); /* Пик увеличения */
+    }
+    100% {
+      transform: scale(1); /* Финал анимации */
+    }
+  }
+</style>