@v1nt1248/3nclient-lib 0.3.38 → 0.3.40

package/dist/ui3n-components.js

@@ -3037,6 +3037,7 @@ var ii = ["id"], ai = /* @__PURE__ */ k(/* @__PURE__ */ B({
 	__name: "ui3n-menu",
 	props: {
 		id: {},
+		width: { default: "max-content" },
 		modelValue: { type: Boolean },
 		triggerElement: {},
 		positionStrategy: { default: "absolute" },
@@ -3104,14 +3105,14 @@ var ii = ["id"], ai = /* @__PURE__ */ k(/* @__PURE__ */ B({
 			return {
 				...f.value,
 				"--ui3n-menu-zIndex": String(r.zIndex),
-				...e && { "--ui3n-menu-border-radius": e },
+				...e && { "--ui3n-menu-content-border-radius": e },
 				...r.contentStyles || {}
 			};
-		});
-		function g(e) {
+		}), g = P(() => ({ width: isNaN(Number(r.width)) ? String(r.width) : `${r.width}px` }));
+		function _(e) {
 			e.preventDefault();
 		}
-		function _(e) {
+		function v(e) {
 			if (!e) return document.body;
 			let t = e.parentElement;
 			for (; t && t !== document.body && t !== document.documentElement;) {
@@ -3121,37 +3122,37 @@ var ii = ["id"], ai = /* @__PURE__ */ k(/* @__PURE__ */ B({
 			}
 			return document.body;
 		}
-		function v() {
+		function y() {
 			if (!r.lockScroll) return;
-			let e = _(u.value);
+			let e = v(u.value);
 			if (e) {
 				let t = Number(e.dataset.scrollLocksCount || "0");
-				t === 0 ? (e.dataset.scrollLocksCount = "1", e.dataset.originalOverscroll = e.style.overscrollBehaviorY || "", e.style.overscrollBehaviorY = "contain", e === document.body ? (document.addEventListener("wheel", g, { passive: !1 }), document.addEventListener("touchmove", g, { passive: !1 })) : (e.addEventListener("wheel", g, { passive: !1 }), e.addEventListener("touchmove", g, { passive: !1 }))) : e.dataset.scrollLocksCount = String(t + 1);
+				t === 0 ? (e.dataset.scrollLocksCount = "1", e.dataset.originalOverscroll = e.style.overscrollBehaviorY || "", e.style.overscrollBehaviorY = "contain", e === document.body ? (document.addEventListener("wheel", _, { passive: !1 }), document.addEventListener("touchmove", _, { passive: !1 })) : (e.addEventListener("wheel", _, { passive: !1 }), e.addEventListener("touchmove", _, { passive: !1 }))) : e.dataset.scrollLocksCount = String(t + 1);
 			}
 		}
-		function y() {
-			let e = _(u.value);
+		function b() {
+			let e = v(u.value);
 			if (!e) return;
 			let t = Number(e.dataset.scrollLocksCount || "0");
 			if (t > 0) {
 				let n = t - 1;
 				if (n === 0) {
 					let t = e.dataset.originalOverscroll;
-					t ? e.style.overscrollBehaviorY = t : e.style.removeProperty("overscroll-behavior-y"), e === document.body ? (document.removeEventListener("wheel", g), document.removeEventListener("touchmove", g)) : (e.removeEventListener("wheel", g), e.removeEventListener("touchmove", g)), delete e.dataset.scrollLocksCount, delete e.dataset.originalOverscroll;
+					t ? e.style.overscrollBehaviorY = t : e.style.removeProperty("overscroll-behavior-y"), e === document.body ? (document.removeEventListener("wheel", _), document.removeEventListener("touchmove", _)) : (e.removeEventListener("wheel", _), e.removeEventListener("touchmove", _)), delete e.dataset.scrollLocksCount, delete e.dataset.originalOverscroll;
 				} else e.dataset.scrollLocksCount = String(n);
 			}
 		}
-		function b() {
+		function x() {
 			r.disabled || (s.value = !s.value, s.value ? i("open") : i("close"), i("update:modelValue", s.value));
 		}
-		function x() {
+		function S() {
 			s.value = !1, i("close"), i("update:modelValue", s.value);
 		}
-		function S(e) {
+		function C(e) {
 			u.value?.contains(e.target) || (i("click-outside"), r.closeOnClickOutside && (s.value = !1, i("close"), i("update:modelValue", s.value)));
 		}
 		return X(() => s.value, (e) => {
-			e ? v() : y();
+			e ? y() : b();
 		}), X(() => r.modelValue, (e) => {
 			e !== void 0 && s.value !== e && (s.value = e, i(e ? "open" : "close"));
 		}, { immediate: !0 }), X(() => r.triggerElement, (e) => {
@@ -3159,7 +3160,7 @@ var ii = ["id"], ai = /* @__PURE__ */ k(/* @__PURE__ */ B({
 		}), X([() => r.offsetX, () => r.offsetY], ([e, t], [n, r]) => {
 			(e !== n || t !== r) && m();
 		}), me(() => {
-			y();
+			b();
 		}), t({
 			isPositioned: p,
 			update: m
@@ -3167,23 +3168,24 @@ var ii = ["id"], ai = /* @__PURE__ */ k(/* @__PURE__ */ B({
 			ref: "menu-element",
 			id: e.id,
 			class: V(t.$style.ui3nMenu),
+			style: H(g.value),
 			onClick: n[0] ||= (e) => i("click", e)
 		}, [R("div", {
 			ref: "menu-trigger-element",
 			class: V([t.$style.ui3nMenuTrigger, e.disabled && t.$style.ui3nMenuTriggerDisabled]),
-			onClick: $(b, ["stop"])
+			onClick: $(x, ["stop"])
 		}, [q(t.$slots, "default")], 2), s.value ? we((W(), L("div", ue({
 			key: 0,
 			ref: "menu-content-element",
 			style: h.value,
 			class: t.$style.ui3nMenuContent
-		}, ve(e.closeOnClick ? { click: x } : {}, !0)), [q(t.$slots, "menu")], 16)), [[Y(Dn), S]]) : I("", !0)], 10, oi));
+		}, ve(e.closeOnClick ? { click: S } : {}, !0)), [q(t.$slots, "menu")], 16)), [[Y(Dn), C]]) : I("", !0)], 14, oi));
 	}
 }), [["__cssModules", { $style: {
-	ui3nMenu: "_ui3nMenu_t6wf8_3",
-	ui3nMenuTrigger: "_ui3nMenuTrigger_t6wf8_11",
-	ui3nMenuTriggerDisabled: "_ui3nMenuTriggerDisabled_t6wf8_15",
-	ui3nMenuContent: "_ui3nMenuContent_t6wf8_20"
+	ui3nMenu: "_ui3nMenu_sjqaw_3",
+	ui3nMenuTrigger: "_ui3nMenuTrigger_sjqaw_10",
+	ui3nMenuTriggerDisabled: "_ui3nMenuTriggerDisabled_sjqaw_14",
+	ui3nMenuContent: "_ui3nMenuContent_sjqaw_19"
 } }]]), ci = ["id"], li = ["onClick"], ui = /* @__PURE__ */ k(/* @__PURE__ */ B({
 	__name: "ui3n-list",
 	props: {
@@ -4584,6 +4586,7 @@ var ii = ["id"], ai = /* @__PURE__ */ k(/* @__PURE__ */ B({
 		}, null, 8, Ji))], 2)) : I("", !0), z(si, {
 			modelValue: u.value,
 			"onUpdate:modelValue": n[8] ||= (e) => u.value = e,
+			width: "100%",
 			"lock-scroll": e.lockScroll,
 			"offset-x": 2,
 			"offset-y": 4,
@@ -5026,6 +5029,7 @@ var ii = ["id"], ai = /* @__PURE__ */ k(/* @__PURE__ */ B({
 			z(si, {
 				modelValue: l.value,
 				"onUpdate:modelValue": n[6] ||= (e) => l.value = e,
+				width: "100%",
 				"offset-x": -3,
 				"offset-y": 4,
 				"position-autoupdate": "",
@@ -5115,21 +5119,21 @@ var ii = ["id"], ai = /* @__PURE__ */ k(/* @__PURE__ */ B({
 		], 10, aa));
 	}
 }), [["__cssModules", { $style: {
-	ui3nSelector: "_ui3nSelector_1fmel_3",
-	label: "_label_1fmel_18",
-	menu: "_menu_1fmel_28",
-	trigger: "_trigger_1fmel_38",
-	placeholder: "_placeholder_1fmel_58",
-	triggerDisabled: "_triggerDisabled_1fmel_62",
-	menuIcon: "_menuIcon_1fmel_68",
-	clearable: "_clearable_1fmel_73",
-	clearBtn: "_clearBtn_1fmel_76",
-	triggerFocused: "_triggerFocused_1fmel_81",
-	body: "_body_1fmel_86",
-	noData: "_noData_1fmel_95",
-	item: "_item_1fmel_107",
-	itemSelected: "_itemSelected_1fmel_121",
-	itemDisabled: "_itemDisabled_1fmel_125"
+	ui3nSelector: "_ui3nSelector_1mwql_3",
+	label: "_label_1mwql_18",
+	menu: "_menu_1mwql_28",
+	trigger: "_trigger_1mwql_36",
+	placeholder: "_placeholder_1mwql_56",
+	triggerDisabled: "_triggerDisabled_1mwql_60",
+	menuIcon: "_menuIcon_1mwql_66",
+	clearable: "_clearable_1mwql_71",
+	clearBtn: "_clearBtn_1mwql_74",
+	triggerFocused: "_triggerFocused_1mwql_79",
+	body: "_body_1mwql_84",
+	noData: "_noData_1mwql_93",
+	item: "_item_1mwql_105",
+	itemSelected: "_itemSelected_1mwql_119",
+	itemDisabled: "_itemDisabled_1mwql_123"
 } }]]), ua = /* @__PURE__ */ k(/* @__PURE__ */ B({
 	__name: "ui3n-mobile-menu",
 	props: {

package/package.json

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

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

@@ -323,6 +323,7 @@
 
     <ui3n-menu
       v-model="isMenuOpen"
+      width="100%"
       :lock-scroll="lockScroll"
       :offset-x="2"
       :offset-y="4"

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

@@ -24,6 +24,11 @@ export interface Ui3nMenuProps {
    * Root element id
    */
   id?: string;
+  /**
+   * Root element width
+   * @default 'max-content'
+   */
+  width?: string | number;
   /**
    * Menu open state
    */

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

@@ -16,6 +16,7 @@
     closeOnClick: true,
     closeOnClickOutside: true,
     disabled: false,
+    width: 'max-content',
   });
   const emits = defineEmits<Ui3nMenuEmits>();
   defineSlots<Ui3nMenuSlots>();
@@ -74,22 +75,29 @@
   });
 
   const contentStylesComputed = computed(() => {
-    let borderRadiusStr = '';
+    let contentBorderRadiusStr = '';
     if (typeof props.contentBorderRadius === 'number') {
-      borderRadiusStr = `${props.contentBorderRadius}px`;
+      contentBorderRadiusStr = `${props.contentBorderRadius}px`;
     } else if (Array.isArray(props.contentBorderRadius)) {
       const [tl, tr, br, bl] = props.contentBorderRadius;
-      borderRadiusStr = `${tl}px ${tr}px ${br}px ${bl}px`;
+      contentBorderRadiusStr = `${tl}px ${tr}px ${br}px ${bl}px`;
     }
 
     return {
       ...floatingStyles.value,
       '--ui3n-menu-zIndex': String(props.zIndex),
-      ...(borderRadiusStr && { '--ui3n-menu-border-radius': borderRadiusStr }),
+      ...(contentBorderRadiusStr && { '--ui3n-menu-content-border-radius': contentBorderRadiusStr }),
       ...(props.contentStyles || {}),
     };
   });
 
+  const rootStyles = computed(() => {
+    const numericWidth = !isNaN(Number(props.width));
+    const widthStr = numericWidth ? `${props.width}px` : String(props.width);
+
+    return { width: widthStr };
+  });
+
   function preventScrollEvent(e: Event) {
     e.preventDefault();
   }
@@ -262,6 +270,7 @@
     ref="menu-element"
     :id="id"
     :class="$style.ui3nMenu"
+    :style="rootStyles"
     @click="emits('click', $event)"
   >
     <div
@@ -292,7 +301,6 @@
     --ui3n-menu-content-bg: var(--color-bg-control-secondary-default);
 
     position: relative;
-    width: max-content;
     display: inline-block;
     overflow: visible;
   }

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

@@ -259,6 +259,7 @@
 
     <ui3n-menu
       v-model="isMenuOpen"
+      width="100%"
       :offset-x="-3"
       :offset-y="4"
       position-autoupdate
@@ -399,8 +400,6 @@
   }
 
   .menu {
-    width: 100%;
-    max-width: 100% !important;
     border-radius: var(--ui3n-selector-border-radius);
 
     & > div {