@v1nt1248/3nclient-lib 0.3.51 → 0.4.1

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

@@ -1,17 +1,16 @@
 <script lang="ts" setup>
-  import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
+  import { computed, onBeforeUnmount, onMounted, ref, useSlots, watch } from 'vue';
   import { arrow, autoUpdate, offset, useFloating } from '@floating-ui/vue';
+  import { toCssLength } from '../../utils/ui/to-css-length';
+  import { hasSlotContent } from '../../utils/ui/has-slot-content';
   import type { Nullable } from '../../types';
   import type { Ui3nTooltipProps, Ui3nTooltipEmits, Ui3nTooltipSlots } from './types';
 
-  const baseOffset = 5;
+  const arrowSize = 8;
+  const arrowOffset = Math.round((arrowSize / 2) * Math.SQRT2);
 
   const props = withDefaults(defineProps<Ui3nTooltipProps>(), {
-    maxContentWidth: 400,
-    color: 'var(--color-bg-block-tritery-default)',
-    textColor: 'var(--color-text-block-darkery-default)',
     placement: 'top',
-    positionStrategy: 'absolute',
     offsetX: 0,
     offsetY: 0,
     trigger: 'hover',
@@ -19,6 +18,7 @@
   });
   const emits = defineEmits<Ui3nTooltipEmits>();
   defineSlots<Ui3nTooltipSlots>();
+  const slots = useSlots();
 
   const showTooltip = ref(false);
   const referenceContainer = ref<Nullable<HTMLElement>>(null);
@@ -26,6 +26,38 @@
   const floatingArrowEl = ref<Nullable<HTMLElement>>(null);
 
   const isClient = ref(false);
+  let boundEl: HTMLElement | null = null;
+
+  const showWrapper = computed(() => !props.triggerElement || hasSlotContent(slots.default));
+
+  const positionStrategy = computed(() => {
+    if (props.positionStrategy) {
+      return props.positionStrategy;
+    }
+
+    return props.triggerElement ? 'fixed' : 'absolute';
+  });
+
+  const shouldTeleport = computed(() => !!props.triggerElement || positionStrategy.value === 'fixed');
+
+  const usedReference = computed(() => props.triggerElement || referenceContainer.value);
+
+  const nativeReferenceEl = computed<HTMLElement | null>(() => {
+    const trigger = usedReference.value;
+    if (!trigger) {
+      return null;
+    }
+
+    if (trigger instanceof HTMLElement) {
+      return trigger;
+    }
+
+    if ('contextElement' in trigger && trigger.contextElement instanceof HTMLElement) {
+      return trigger.contextElement;
+    }
+
+    return null;
+  });
 
   const mainPlacement = computed(() => {
     const [part1] = props.placement.split('-');
@@ -36,19 +68,19 @@
     const options = { mainAxis: 0, crossAxis: 0 };
     switch (mainPlacement.value) {
       case 'top':
-        options.mainAxis = -1 * Number(props.offsetY) + baseOffset;
+        options.mainAxis = -1 * Number(props.offsetY) + arrowOffset;
         options.crossAxis = Number(props.offsetX);
         break;
       case 'bottom':
-        options.mainAxis = Number(props.offsetY) + baseOffset;
+        options.mainAxis = Number(props.offsetY) + arrowOffset;
         options.crossAxis = Number(props.offsetX);
         break;
       case 'left':
-        options.mainAxis = -1 * Number(props.offsetX) + baseOffset;
+        options.mainAxis = -1 * Number(props.offsetX) + arrowOffset;
         options.crossAxis = Number(props.offsetY);
         break;
       case 'right':
-        options.mainAxis = Number(props.offsetX) + baseOffset;
+        options.mainAxis = Number(props.offsetX) + arrowOffset;
         options.crossAxis = Number(props.offsetY);
         break;
     }
@@ -60,28 +92,40 @@
     arrow({ element: floatingArrowEl, padding: 8 }),
   ]);
 
-  const { floatingStyles, isPositioned, middlewareData } = useFloating(referenceContainer, floatingEl, {
+  const { floatingStyles, isPositioned, middlewareData, update } = useFloating(usedReference, floatingEl, {
     open: showTooltip,
-    placement: props.placement,
-    strategy: props.positionStrategy,
+    placement: () => props.placement,
+    strategy: positionStrategy,
     middleware: middlewareComputed,
-    whileElementsMounted: props.positionStrategy === 'fixed' ? autoUpdate : undefined,
+    whileElementsMounted: (reference, floating, onUpdate) => {
+      if (positionStrategy.value === 'fixed' || props.triggerElement) {
+        return autoUpdate(reference, floating, onUpdate);
+      }
+
+      onUpdate();
+      return () => undefined;
+    },
   });
 
   const tooltipStylesComputed = computed(() => {
-    const maxWidth =
-      typeof props.maxContentWidth === 'number' || !isNaN(Number(props.maxContentWidth))
-        ? `${props.maxContentWidth}px`
-        : String(props.maxContentWidth);
-
-    return {
+    const styles: Record<string, string> = {
       ...floatingStyles.value,
-      '--ui3n-tooltip-bg-color': props.color,
-      '--ui3n-tooltip-text-color': props.textColor,
-      '--ui3n-tooltip-max-width': maxWidth,
-      '--ui3n-tooltip-arrow-size': `${baseOffset}px`,
-      '--ui3n-tooltip-base-offset': `${-baseOffset}px`,
+      '--ui3n-tooltip-arrow-size': `${arrowSize}px`,
     };
+
+    if (props.color) {
+      styles['--ui3n-tooltip-bg-color'] = props.color;
+    }
+
+    if (props.textColor) {
+      styles['--ui3n-tooltip-text-color'] = props.textColor;
+    }
+
+    if (props.maxContentWidth !== undefined) {
+      styles['--ui3n-tooltip-max-width'] = toCssLength(props.maxContentWidth);
+    }
+
+    return styles;
   });
 
   function onMouseenter() {
@@ -117,26 +161,29 @@
   }
 
   function removeEventListeners() {
-    if (!referenceContainer.value) {
+    if (!boundEl) {
       return;
     }
 
-    referenceContainer.value.removeEventListener('mouseenter', onMouseenter);
-    referenceContainer.value.removeEventListener('mouseleave', onMouseleave);
-    referenceContainer.value.removeEventListener('click', onClick);
+    boundEl.removeEventListener('mouseenter', onMouseenter);
+    boundEl.removeEventListener('mouseleave', onMouseleave);
+    boundEl.removeEventListener('click', onClick);
+    boundEl = null;
   }
 
   function setupEventListeners() {
     removeEventListeners();
-    if (!referenceContainer.value || props.disabled) {
+    if (!nativeReferenceEl.value || props.disabled) {
       return;
     }
 
+    boundEl = nativeReferenceEl.value;
+
     if (props.trigger === 'hover') {
-      referenceContainer.value.addEventListener('mouseenter', onMouseenter);
-      referenceContainer.value.addEventListener('mouseleave', onMouseleave);
+      boundEl.addEventListener('mouseenter', onMouseenter);
+      boundEl.addEventListener('mouseleave', onMouseleave);
     } else if (props.trigger === 'click') {
-      referenceContainer.value.addEventListener('click', onClick);
+      boundEl.addEventListener('click', onClick);
     }
   }
 
@@ -149,10 +196,19 @@
     removeEventListeners();
   });
 
-  watch([() => props.trigger, () => props.disabled], () => {
-    setupEventListeners();
+  watch([() => props.trigger, () => props.disabled, nativeReferenceEl], () => {
+    if (isClient.value) {
+      setupEventListeners();
+    }
   });
 
+  watch(
+    () => props.triggerElement,
+    () => {
+      update();
+    },
+  );
+
   watch(
     () => props.modelValue,
     val => props.trigger === 'manual' && (showTooltip.value = val),
@@ -166,32 +222,40 @@
 
 <template>
   <div
+    v-if="showWrapper"
     ref="referenceContainer"
+    data-ui3n="tooltip"
     :class="$style.container"
   >
     <slot />
   </div>
 
-  <div
-    v-if="showTooltip"
-    ref="floatingEl"
-    :class="$style.floating"
-    :style="tooltipStylesComputed"
+  <Teleport
+    to="body"
+    :disabled="!isClient || !shouldTeleport"
   >
-    <slot name="content">
-      <div :class="$style.content">
-        {{ content }}
+    <div
+      v-if="showTooltip"
+      ref="floatingEl"
+      data-ui3n="tooltip-content"
+      :class="[$style.floating, shouldTeleport && $style.floatingTeleported]"
+      :style="tooltipStylesComputed"
+    >
+      <slot name="content">
         <div
           ref="floatingArrowEl"
           :class="[$style.arrow, $style[`arrow-${mainPlacement}`]]"
           :style="{
-            left: middlewareData.arrow?.x != null ? `${middlewareData.arrow?.x}px` : '',
-            top: middlewareData.arrow?.y != null ? `${middlewareData.arrow?.y}px` : '',
+            left: middlewareData.arrow?.x != null ? `${middlewareData.arrow.x}px` : '',
+            top: middlewareData.arrow?.y != null ? `${middlewareData.arrow.y}px` : '',
           }"
         />
-      </div>
-    </slot>
-  </div>
+        <div :class="$style.content">
+          {{ content }}
+        </div>
+      </slot>
+    </div>
+  </Teleport>
 </template>
 
 <style lang="scss" module>
@@ -202,59 +266,56 @@
   }
 
   .floating {
+    --_tooltip-bg-color: var(--ui3n-tooltip-bg-color, var(--color-bg-block-tritery-default));
+    --_tooltip-text-color: var(--ui3n-tooltip-text-color, var(--color-text-block-darkery-default));
+    --_tooltip-max-width: var(--ui3n-tooltip-max-width, 400px);
+
     width: max-content;
+    overflow: visible;
     z-index: 5;
   }
 
+  .floatingTeleported {
+    z-index: 2000;
+  }
+
   .arrow {
     position: absolute;
-    width: 0;
-    height: 0;
-
-    &-top,
-    &-bottom {
-      border-style: solid;
-      border-width: 0 var(--ui3n-tooltip-arrow-size) var(--ui3n-tooltip-arrow-size) var(--ui3n-tooltip-arrow-size);
-      border-color: transparent transparent var(--ui3n-tooltip-bg-color) transparent;
-    }
+    width: var(--ui3n-tooltip-arrow-size, 8px);
+    height: var(--ui3n-tooltip-arrow-size, 8px);
+    background-color: var(--_tooltip-bg-color);
+    border-radius: 2px;
+    transform: rotate(45deg);
+    z-index: 0;
 
     &-top {
-      bottom: var(--ui3n-tooltip-base-offset);
-      transform: rotate(180deg);
+      bottom: calc(var(--ui3n-tooltip-arrow-size, 8px) / -2);
     }
 
     &-bottom {
-      top: var(--ui3n-tooltip-base-offset);
-      transform: rotate(0deg);
-    }
-
-    &-left,
-    &-right {
-      border-style: solid;
-      border-width: var(--ui3n-tooltip-arrow-size) 0 var(--ui3n-tooltip-arrow-size) var(--ui3n-tooltip-arrow-size);
-      border-color: transparent transparent transparent var(--ui3n-tooltip-bg-color);
+      top: calc(var(--ui3n-tooltip-arrow-size, 8px) / -2);
     }
 
     &-left {
-      right: var(--ui3n-tooltip-base-offset);
-      transform: rotate(0deg);
+      right: calc(var(--ui3n-tooltip-arrow-size, 8px) / -2);
     }
 
     &-right {
-      left: var(--ui3n-tooltip-base-offset);
-      transform: rotate(180deg);
+      left: calc(var(--ui3n-tooltip-arrow-size, 8px) / -2);
     }
   }
 
   .content {
     position: relative;
-    max-width: var(--ui3n-tooltip-max-width);
-    padding: 6px var(--spacing-s);
-    border-radius: 6px;
-    font-size: var(--font-11);
-    line-height: var(--font-12);
+    z-index: 1;
+    overflow: visible;
+    max-width: var(--_tooltip-max-width);
+    padding: var(--ui3n-tooltip-padding, 6px 8px);
+    border-radius: var(--ui3n-tooltip-border-radius, 6px);
+    font-size: var(--ui3n-tooltip-font-size, 11px);
+    line-height: var(--ui3n-tooltip-line-height, 12px);
     font-weight: 400;
-    background-color: var(--ui3n-tooltip-bg-color);
-    color: var(--ui3n-tooltip-text-color);
+    background-color: var(--_tooltip-bg-color);
+    color: var(--_tooltip-text-color);
   }
 </style>

package/dist/chunks/ui3n-notification-o0tuhTpO.js

@@ -1,272 +0,0 @@
-import { b as e } from "./plugins-keys-DdadrIAg.js";
-import { computed as t, createBlock as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, createVNode as o, defineComponent as s, mergeProps as c, normalizeClass as l, normalizeStyle as u, onBeforeUnmount as d, onMounted as f, openBlock as p, ref as m, renderSlot as h, toDisplayString as g, unref as _, useCssModule as v, watch as y, withDirectives as b, withKeys as x } from "vue";
-//#region src/directives/ui3n-ripple.ts
-var S = /* @__PURE__ */ new WeakMap();
-function C(e, t, n) {
-	let r = document.createElement("div"), i = Math.max(e.clientWidth, e.clientHeight), a = i / 2;
-	r.style.width = r.style.height = `${i}px`, r.style.left = `${Math.round(e.clientWidth / 2 - a)}px`, r.style.top = `${Math.round(e.clientHeight / 2 - a)}px`, r.classList.add("ui3n-ripple"), t && r.style.setProperty("--ui3n-ripple-bg-color", t), n && r.style.setProperty("--ui3n-ripple-duration", `${n}ms`);
-	let o = e.getElementsByClassName("ui3n-ripple")[0];
-	o && o.remove(), e.appendChild(r);
-}
-function w(e, t) {
-	S.get(e)?.controller.abort();
-	let { color: n, duration: r, eventsTriggers: i = [], disabled: a = !1 } = t.value || {};
-	if (a) {
-		S.delete(e);
-		return;
-	}
-	let o = new AbortController(), s = { signal: o.signal };
-	(!i.length || i.includes("click")) && e.addEventListener("click", () => C(e, n, r), s), i.length && i.includes("enter") && e.addEventListener("keydown", (t) => {
-		t.key === "Enter" && C(e, n, r);
-	}, s), S.set(e, { controller: o });
-}
-var T = {
-	mounted(e, t) {
-		w(e, t);
-	},
-	updated(e, t) {
-		w(e, t);
-	},
-	beforeUnmount(e) {
-		S.get(e)?.controller.abort(), S.delete(e);
-	}
-}, E = ["id", "title"], D = /* @__PURE__ */ s({
-	__name: "ui3n-icon",
-	props: {
-		id: {},
-		icon: {},
-		title: { default: "" },
-		size: {},
-		width: {},
-		height: {},
-		color: { default: "var(--color-icon-control-primary-default)" },
-		horizontalFlip: { type: Boolean },
-		verticalFlip: { type: Boolean },
-		rotate: { default: 0 }
-	},
-	emits: ["click"],
-	setup(e, { emit: n }) {
-		let r = e, a = n, o = t(() => r.size || r.width || 16), s = t(() => r.size || r.height || 16), l = t(() => {
-			let e = {
-				"--ui3n-icon-width": u(o.value),
-				"--ui3n-icon-height": u(s.value),
-				"--ui3n-icon-color": r.color
-			}, t = [];
-			return r.horizontalFlip && t.push("rotateY(180deg)"), r.verticalFlip && t.push("rotateX(180deg)"), r.rotate && t.push(`rotate(${r.rotate}deg)`), t.length && (e.transform = t.join(" ")), e;
-		});
-		function u(e) {
-			return isNaN(Number(e)) ? String(e) : `${e}px`;
-		}
-		return (t, n) => (p(), i("div", c({
-			id: e.id,
-			class: t.$style.ui3nIcon,
-			title: e.title,
-			style: l.value
-		}, { "data-icon": e.icon }, { onClick: n[0] ||= (e) => a("click", e) }), null, 16, E));
-	}
-}), O = { ui3nIcon: "_ui3nIcon_10yhz_1" }, k = (e, t) => {
-	let n = e.__vccOpts || e;
-	for (let [e, r] of t) n[e] = r;
-	return n;
-}, A = /* @__PURE__ */ k(D, [["__cssModules", { $style: O }]]), j = {
-	small: 12,
-	regular: 16,
-	large: 24
-}, M = ["id", "disabled"], N = /* @__PURE__ */ k(/* @__PURE__ */ s({
-	__name: "ui3n-button",
-	props: {
-		id: {},
-		type: { default: "primary" },
-		size: { default: "regular" },
-		square: { type: Boolean },
-		block: { type: Boolean },
-		textColor: {},
-		color: {},
-		elevation: { type: Boolean },
-		icon: {},
-		iconSize: {},
-		iconColor: {},
-		iconPosition: { default: "right" },
-		disabled: {
-			type: Boolean,
-			default: !1
-		}
-	},
-	emits: [
-		"init",
-		"click",
-		"enter",
-		"focus",
-		"blur"
-	],
-	setup(e, { emit: a }) {
-		let o = T, s = e, c = a, u = v(), d = m(null), g = t(() => {
-			let e = [
-				u.ui3nButton,
-				u[s.size],
-				u[s.type]
-			];
-			return s.block && s.type !== "icon" && e.push(u.block), s.square && e.push(u.square), s.icon && e.push(u[`withIcon-${s.iconPosition}`]), s.elevation && e.push(u.elevation), e;
-		}), S = t(() => s.iconSize ? s.iconSize : j[s.size]), C = t(() => s.iconColor ? s.iconColor : "inherit");
-		async function w(e, t) {
-			["init", "enter"].includes(e) ? c(e, d.value) : c(e, t);
-		}
-		return y([() => s.color, () => s.textColor], (e, t) => {
-			if (!d.value) return;
-			let [n, r] = t, [i, a] = e;
-			(s.type === "custom" || s.type === "icon") && i !== n && d.value.style.setProperty("--ui3n-button-bg-color", i ?? "var(--color-bg-button-primary-default)"), (s.type === "custom" || s.type === "icon") && a !== r && d.value.style.setProperty("--ui3n-button-text-color", a ?? "var(--color-text-button-primary-default)");
-		}), f(() => {
-			d.value && ((s.type === "custom" || s.type === "icon") && s.color && d.value.style.setProperty("--ui3n-button-bg-color", s.color), s.type === "custom" && s.textColor && d.value.style.setProperty("--ui3n-button-text-color", s.textColor), w("init"));
-		}), (t, a) => b((p(), i("button", {
-			ref_key: "buttonEl",
-			ref: d,
-			id: e.id,
-			class: l(g.value),
-			type: "button",
-			disabled: e.disabled,
-			onClick: a[0] ||= (e) => w("click", e),
-			onFocusin: a[1] ||= (e) => w("focus", e),
-			onFocusout: a[2] ||= (e) => w("blur", e),
-			onKeydown: a[3] ||= x((e) => w("enter"), ["enter"])
-		}, [e.icon ? (p(), n(A, {
-			key: 0,
-			class: l(t.$style.buttonIcon),
-			icon: e.icon,
-			size: S.value,
-			color: C.value
-		}, null, 8, [
-			"class",
-			"icon",
-			"size",
-			"color"
-		])) : r("", !0), e.type === "icon" ? r("", !0) : (p(), i("span", {
-			key: 1,
-			class: l(t.$style.text)
-		}, [h(t.$slots, "default")], 2))], 42, M)), [[_(o)]]);
-	}
-}), [["__cssModules", { $style: {
-	ui3nButton: "_ui3nButton_5lm0q_3",
-	"withIcon-left": "_withIcon-left_5lm0q_35",
-	"withIcon-right": "_withIcon-right_5lm0q_38",
-	square: "_square_5lm0q_41",
-	regular: "_regular_5lm0q_48",
-	small: "_small_5lm0q_55",
-	large: "_large_5lm0q_62",
-	block: "_block_5lm0q_69",
-	primary: "_primary_5lm0q_73",
-	elevation: "_elevation_5lm0q_96",
-	text: "_text_5lm0q_101",
-	secondary: "_secondary_5lm0q_133",
-	tertiary: "_tertiary_5lm0q_187",
-	outline: "_outline_5lm0q_242",
-	icon: "_icon_5lm0q_270",
-	custom: "_custom_5lm0q_290",
-	buttonIcon: "_buttonIcon_5lm0q_319"
-} }]]), P = ["id"], F = /* @__PURE__ */ k(/* @__PURE__ */ s({
-	__name: "ui3n-notification",
-	props: {
-		id: {},
-		type: { default: "info" },
-		content: {},
-		position: { default: "center" },
-		duration: { default: 0 },
-		withIcon: {
-			type: Boolean,
-			default: !0
-		},
-		borderRadius: { default: 8 },
-		onOpen: {
-			type: Function,
-			default: () => {}
-		},
-		onClose: {
-			type: Function,
-			default: () => {}
-		}
-	},
-	setup(s) {
-		let c = s, m = null, h = v(), y = t(() => ({
-			success: {
-				icon: "round-check-circle",
-				iconColor: "var(--success-fill-default)",
-				iconRotate: 0
-			},
-			warning: {
-				icon: "round-warning",
-				iconColor: "var(--warning-fill-default)",
-				iconRotate: 0
-			},
-			info: {
-				icon: "round-info",
-				iconColor: "var(--info-fill-default)",
-				iconRotate: 180
-			},
-			error: {
-				icon: "round-info",
-				iconColor: "var(--error-fill-default)",
-				iconRotate: 180
-			}
-		})[c.type || "info"]), b = t(() => {
-			let e = [
-				h.ui3nNotification,
-				h[`${c.type}Type`],
-				h[`${c.position}Position`]
-			];
-			return c.withIcon && e.push(h.withIcon), e;
-		}), x = t(() => ({ "--ui3n-notification-border-radius": e(c.borderRadius, "8px") }));
-		function S() {
-			c.onClose && c.onClose();
-		}
-		return f(() => {
-			c.onOpen && c.onOpen(), c.duration > 0 && (m = setTimeout(() => {
-				S();
-			}, c.duration));
-		}), d(() => {
-			m && clearTimeout(m);
-		}), (e, t) => (p(), i("div", {
-			id: s.id,
-			class: l(b.value),
-			style: u(x.value)
-		}, [
-			s.withIcon ? (p(), i("div", {
-				key: 0,
-				class: l(_(h).ui3nNotificationIcon)
-			}, [o(A, {
-				icon: y.value.icon,
-				size: "16",
-				rotate: y.value.iconRotate,
-				color: y.value.iconColor
-			}, null, 8, [
-				"icon",
-				"rotate",
-				"color"
-			])], 2)) : r("", !0),
-			a("div", { class: l(_(h).ui3nNotificationContent) }, g(s.content), 3),
-			s.duration ? r("", !0) : (p(), n(N, {
-				key: 1,
-				type: "icon",
-				size: "small",
-				color: "transparent",
-				icon: "round-close",
-				"icon-size": "16",
-				class: l(_(h).closeBtn),
-				onClick: S
-			}, null, 8, ["class"]))
-		], 14, P));
-	}
-}), [["__cssModules", { $style: {
-	ui3nNotification: "_ui3nNotification_1pr9s_1",
-	withIcon: "_withIcon_1pr9s_23",
-	ui3nNotificationIcon: "_ui3nNotificationIcon_1pr9s_27",
-	ui3nNotificationContent: "_ui3nNotificationContent_1pr9s_40",
-	closeBtn: "_closeBtn_1pr9s_50",
-	infoType: "_infoType_1pr9s_58",
-	successType: "_successType_1pr9s_69",
-	warningType: "_warningType_1pr9s_80",
-	errorType: "_errorType_1pr9s_91",
-	leftPosition: "_leftPosition_1pr9s_102",
-	centerPosition: "_centerPosition_1pr9s_107",
-	rightPosition: "_rightPosition_1pr9s_112"
-} }]]);
-//#endregion
-export { T as a, k as i, N as n, A as r, F as t };