@v1nt1248/3nclient-lib 0.4.0 → 0.4.2

package/dist/ui3n-plugins.js

@@ -1,12 +1,12 @@
-import { H as e, i as t, n, r, t as i } from "./chunks/plugins-keys-DdadrIAg.js";
-import { i as a, t as o } from "./chunks/ui3n-notification-CTYQV3nR.js";
-import { Fragment as s, createApp as c, createBlock as l, createElementBlock as u, defineComponent as d, markRaw as f, mergeProps as p, normalizeClass as m, openBlock as h, ref as g, renderList as _ } from "vue";
+import { U as e, a as t, i as n, n as r, r as i, t as a } from "./chunks/plugins-keys-DY2USp8H.js";
+import { a as o, n as s, t as c } from "./chunks/ui3n-tooltip-6Z-sRX7U.js";
+import { Fragment as l, createApp as u, createBlock as d, createElementBlock as f, defineComponent as p, markRaw as m, mergeProps as h, normalizeClass as g, openBlock as _, ref as v, renderList as y } from "vue";
 import "pinia";
-import v from "mitt";
-var y = /* @__PURE__ */ a(/* @__PURE__ */ d({
+import b from "mitt";
+var x = /* @__PURE__ */ o(/* @__PURE__ */ p({
 	__name: "ui3n-notification-container",
 	setup(e, { expose: t }) {
-		let n = g([]);
+		let n = v([]);
 		function r(e) {
 			n.value.push(e);
 		}
@@ -19,19 +19,19 @@ var y = /* @__PURE__ */ a(/* @__PURE__ */ d({
 		return t({
 			add: r,
 			remove: i
-		}), (e, t) => (h(), u("div", {
+		}), (e, t) => (_(), f("div", {
 			id: "ui3n-notifications-container",
 			"data-ui3n": "notification-container",
-			class: m(e.$style.ui3nNotificationsWrapper)
-		}, [(h(!0), u(s, null, _(n.value, (e) => (h(), l(o, p({ key: e.id }, { ref_for: !0 }, e, { "on-close": () => a(e) }), null, 16, ["on-close"]))), 128))], 2));
+			class: g(e.$style.ui3nNotificationsWrapper)
+		}, [(_(!0), f(l, null, y(n.value, (e) => (_(), d(s, h({ key: e.id }, { ref_for: !0 }, e, { "on-close": () => a(e) }), null, 16, ["on-close"]))), 128))], 2));
 	}
-}), [["__cssModules", { $style: { ui3nNotificationsWrapper: "_ui3nNotificationsWrapper_n58wk_1" } }]]), b = { install: (t) => {
+}), [["__cssModules", { $style: { ui3nNotificationsWrapper: "_ui3nNotificationsWrapper_n58wk_1" } }]]), S = { install: (t) => {
 	if (typeof window > "u") return;
-	let r = document.createElement("div");
-	document.body.appendChild(r);
-	let i = c(y);
+	let n = document.createElement("div");
+	document.body.appendChild(n);
+	let i = u(x);
 	i._context.provides = t._context.provides;
-	let a = i.mount(r), o = (t) => {
+	let a = i.mount(n), o = (t) => {
 		let n = t.id || e(6), r = t.duration === void 0 ? 1500 : t.duration;
 		a.add({
 			...t,
@@ -39,33 +39,33 @@ var y = /* @__PURE__ */ a(/* @__PURE__ */ d({
 			duration: r
 		});
 	};
-	t.config.globalProperties.$createNotice = o, t.provide(n, { $createNotice: o });
-} }, x = v(), S = {
-	on: x.on.bind(x),
+	t.config.globalProperties.$createNotice = o, t.provide(r, { $createNotice: o });
+} }, C = b(), w = {
+	on: C.on.bind(C),
 	once: (e, t) => {
 		function n() {
-			x.off(e, n), t.apply(null, arguments);
+			C.off(e, n), t.apply(null, arguments);
 		}
-		x.on(e, n);
+		C.on(e, n);
 	},
-	off: x.off.bind(x),
-	emit: x.emit.bind(x),
-	clear: x.all.clear.bind(x)
-}, C = { install: (e) => {
-	e.config.globalProperties.$emitter = S, e.provide(t, { $emitter: S });
-} }, w = { install(t) {
-	let n = g([]);
+	off: C.off.bind(C),
+	emit: C.emit.bind(C),
+	clear: C.all.clear.bind(C.all)
+}, T = { install: (e) => {
+	e.config.globalProperties.$emitter = w, e.provide(t, { $emitter: w });
+} }, E = { install(t) {
+	let n = v([]);
 	function r(t, r) {
 		return new Promise((i) => {
 			n.value.push({
 				id: e(5),
-				component: f(t),
+				component: m(t),
 				props: r,
 				resolve: i
 			});
 		});
 	}
-	function a(e, t) {
+	function i(e, t) {
 		let r = n.value.findIndex((t) => t.id === e);
 		r !== -1 && (n.value[r].resolve(t), n.value.splice(r, 1));
 	}
@@ -75,30 +75,30 @@ var y = /* @__PURE__ */ a(/* @__PURE__ */ d({
 	t.config.globalProperties.$dialog = {
 		dialogStack: n,
 		$openDialog: r,
-		$closeDialog: a,
+		$closeDialog: i,
 		$closeDialogs: o
-	}, t.provide(i, {
+	}, t.provide(a, {
 		dialogStack: n,
 		$openDialog: r,
-		$closeDialog: a,
+		$closeDialog: i,
 		$closeDialogs: o
 	});
 } };
 //#endregion
 //#region src/plugins/notifications/store-notifications.ts
-function T(e) {
+function D(e) {
 	let { app: t = {} } = e, { config: n = {} } = t, { globalProperties: r = {} } = n, { $createNotice: i } = r;
 	return { $createNotice: i };
 }
 //#endregion
 //#region src/plugins/vue-bus/store-vue-bus.ts
-function E(e) {
+function O(e) {
 	let { app: t = {} } = e, { config: n = {} } = t, { globalProperties: r = {} } = n, { $emitter: i } = r;
 	return { $emitter: i };
 }
 //#endregion
 //#region src/plugins/dialogs/store-dialog.ts
-function D(e) {
+function k(e) {
 	let { app: t = {} } = e, { config: n = {} } = t, { globalProperties: r = {} } = n, { $dialog: i } = r;
 	return { $dialogs: {
 		open: i.$openDialog,
@@ -109,38 +109,38 @@ function D(e) {
 }
 //#endregion
 //#region src/plugins/theme/theme.ts
-var O = [
+var A = [
 	"light",
 	"dark",
 	"midnight"
-], k = [
+], j = [
 	"light-theme",
 	"dark-theme",
 	"midnight-theme"
 ];
-function A(e) {
-	return typeof e == "string" && O.includes(e);
+function M(e) {
+	return typeof e == "string" && A.includes(e);
 }
-function j(e, t) {
+function N(e, t) {
 	e.classList.add("colors");
-	for (let t of k) e.classList.remove(t);
+	for (let t of j) e.classList.remove(t);
 	e.classList.add(`${t}-theme`);
 }
-function M(e) {
+function P(e) {
 	if (e.persist) {
 		let t = e.storageKey ?? "ui3n-theme";
 		try {
 			let e = localStorage.getItem(t);
-			if (A(e)) return e;
+			if (M(e)) return e;
 		} catch {}
 	}
-	return A(e.theme) ? e.theme : "light";
+	return M(e.theme) ? e.theme : "light";
 }
-var N = { install(e, t = {}) {
-	let n = t.persist ?? !1, i = t.storageKey ?? "ui3n-theme", a = g(typeof document > "u" ? t.theme ?? "light" : M(t));
+var F = { install(e, t = {}) {
+	let n = t.persist ?? !1, r = t.storageKey ?? "ui3n-theme", a = v(typeof document > "u" ? t.theme ?? "light" : P(t));
 	function o(e) {
-		if (A(e) && (a.value = e, !(typeof document > "u") && (j(t.target ?? document.documentElement, e), n))) try {
-			localStorage.setItem(i, e);
+		if (M(e) && (a.value = e, !(typeof document > "u") && (N(t.target ?? document.documentElement, e), n))) try {
+			localStorage.setItem(r, e);
 		} catch {}
 	}
 	typeof document < "u" && o(a.value);
@@ -148,13 +148,131 @@ var N = { install(e, t = {}) {
 		theme: a,
 		setTheme: o
 	};
-	e.provide(r, s), e.config.globalProperties.$theme = s;
+	e.provide(i, s), e.config.globalProperties.$theme = s;
 } };
 //#endregion
 //#region src/plugins/theme/store-theme.ts
-function P(e) {
+function I(e) {
 	let { app: t = {} } = e, { config: n = {} } = t, { globalProperties: r = {} } = n, { $theme: i } = r;
 	return { $theme: i };
 }
+var L = /* @__PURE__ */ o(/* @__PURE__ */ p({
+	__name: "ui3n-tooltip-container",
+	setup(e, { expose: t }) {
+		let n = v([]);
+		function r(e) {
+			n.value.push(e);
+		}
+		function i(e) {
+			n.value = n.value.filter((t) => t.id !== e);
+		}
+		function a(e) {
+			n.value = n.value.filter((t) => t.kind !== e);
+		}
+		function o(e) {
+			n.value = n.value.filter((t) => !(t.kind === "attach" && t.target === e));
+		}
+		function s(e, t) {
+			let r = n.value.find((t) => t.id === e);
+			r && Object.assign(r, t);
+		}
+		function u() {
+			n.value = [];
+		}
+		function p(e) {
+			return {
+				id: e.id,
+				content: e.content,
+				maxContentWidth: e.maxContentWidth,
+				color: e.color,
+				textColor: e.textColor,
+				placement: e.placement,
+				positionStrategy: e.positionStrategy ?? "fixed",
+				offsetX: e.offsetX,
+				offsetY: e.offsetY,
+				trigger: e.trigger,
+				modelValue: e.modelValue,
+				disabled: e.disabled,
+				triggerElement: e.target
+			};
+		}
+		return t({
+			add: r,
+			remove: i,
+			removeByKind: a,
+			removeByTarget: o,
+			update: s,
+			clearAll: u
+		}), (e, t) => (_(), f("div", {
+			id: "ui3n-tooltips-container",
+			"data-ui3n": "tooltip-container",
+			class: g(e.$style.container)
+		}, [(_(!0), f(l, null, y(n.value, (e) => (_(), d(c, h({ key: e.id }, { ref_for: !0 }, p(e)), null, 16))), 128))], 2));
+	}
+}), [["__cssModules", { $style: { container: "_container_zxf3h_1" } }]]), R = { install: (t) => {
+	if (typeof window > "u") return;
+	let r = document.createElement("div");
+	document.body.appendChild(r);
+	let i = u(L);
+	i._context.provides = t._context.provides;
+	let a = i.mount(r);
+	function o(e, t) {
+		return {
+			id: e,
+			close: () => {
+				t === "show" ? l() : d(e);
+			},
+			update: (t) => a.update(e, t)
+		};
+	}
+	function s(t, n) {
+		a.removeByKind("show");
+		let r = e(6);
+		return a.add({
+			...n,
+			id: r,
+			kind: "show",
+			target: m(t),
+			trigger: "manual",
+			modelValue: !0,
+			positionStrategy: n.positionStrategy ?? "fixed"
+		}), o(r, "show");
+	}
+	function c(t, n) {
+		t instanceof HTMLElement && a.removeByTarget(t);
+		let r = e(6);
+		return a.add({
+			...n,
+			id: r,
+			kind: "attach",
+			target: m(t),
+			trigger: n.trigger ?? "hover",
+			positionStrategy: n.positionStrategy ?? "fixed"
+		}), o(r, "attach");
+	}
+	function l() {
+		a.removeByKind("show");
+	}
+	function d(e) {
+		typeof e == "string" ? a.remove(e) : a.removeByTarget(e);
+	}
+	function f() {
+		a.clearAll();
+	}
+	let p = {
+		show: s,
+		attach: c,
+		hide: l,
+		detach: d,
+		detachAll: f
+	};
+	t.config.globalProperties.$tooltip = p, t.provide(n, p);
+} };
+//#endregion
+//#region src/plugins/tooltips/store-tooltips.ts
+function z(e) {
+	let { app: t = {} } = e, { config: n = {} } = t, { globalProperties: r = {} } = n, { $tooltip: i } = r;
+	return { $tooltip: i };
+}
 //#endregion
-export { i as DIALOGS_KEY, n as NOTIFICATIONS_KEY, r as THEME_KEY, t as VUEBUS_KEY, w as dialogs, b as notifications, D as storeDialogs, T as storeNotifications, P as storeTheme, E as storeVueBus, N as theme, C as vueBus };
+export { a as DIALOGS_KEY, r as NOTIFICATIONS_KEY, i as THEME_KEY, n as TOOLTIPS_KEY, t as VUEBUS_KEY, E as dialogs, S as notifications, k as storeDialogs, D as storeNotifications, I as storeTheme, z as storeTooltips, O as storeVueBus, F as theme, R as tooltips, T as vueBus };

package/dist/ui3n-utils.js

@@ -1,6 +1,6 @@
-import { A as e, C as t, D as n, E as r, F as i, G as a, H as o, I as s, J as c, K as l, L as u, M as d, N as f, O as p, P as m, R as h, S as g, T as _, U as v, V as y, W as b, X as x, Y as S, Z as C, _ as w, a as T, b as E, c as D, d as O, f as k, g as A, h as j, i as M, j as N, k as P, l as F, m as I, n as L, o as R, p as z, q as B, r as V, s as H, t as U, u as W, v as G, w as K, x as q, y as J, z as Y } from "./chunks/plugins-keys-DdadrIAg.js";
-import { t as X } from "./chunks/emoticons-DMgiBINj.js";
+import { A as e, B as t, C as n, D as r, E as i, F as a, G as o, H as s, I as c, J as l, K as u, L as d, M as f, N as p, O as m, P as h, Q as g, R as _, S as v, T as y, U as b, W as x, X as S, Y as C, Z as w, _ as T, a as E, b as D, c as O, d as k, f as A, g as j, h as M, i as N, j as P, k as F, l as I, m as L, n as R, o as z, p as B, q as V, r as H, s as U, t as W, u as G, v as K, w as q, x as J, y as Y, z as X } from "./chunks/plugins-keys-DY2USp8H.js";
+import { t as Z } from "./chunks/emoticons-DMgiBINj.js";
 //#region src/constants/general.ts
-var Z = /[^@]+@[^@]+\.[^@]+/iu;
+var Q = /[^@]+@[^@]+\.[^@]+/iu;
 //#endregion
-export { U as DIALOGS_KEY, L as NOTIFICATIONS_KEY, l as NamedProcs, T as SQLiteOn3NStorage, B as SingleCyclicProc, c as SingleProc, V as THEME_KEY, b as TaskRunner, M as VUEBUS_KEY, z as b64ToBlob, k as blobFromDataURL, I as blobToB64, q as capitalize, m as copyToClipboard, D as createVideoThumbnail, N as debounce, C as defer, X as emoticons, f as executeFunc, F as fileToUint8Array, J as formatFileSize, _ as generateColor, i as getDeliveryErrors, Y as getFileExtension, o as getRandomId, r as hasSlotContent, t as html2text, K as invertColor, j as isFileArchive, A as isFileAudio, G as isFileImage, w as isFileVideo, Z as mailReg, S as makeSyncedFunc, n as markSearch, h as mimeTypes, y as patchTextareaMaxRowsSupport, g as prepareDateAsSting, d as removeWhitespaceInString, W as resizeImage, v as round, a as schedulerYield, p as selectAll, P as selectEnd, e as selectStart, x as sleep, E as toCssLength, s as transformFileToWeb3NFile, u as transformWeb3nFileToFile, R as tryOnScopeDispose, O as uint8ToDataURL, H as unrefElement };
+export { W as DIALOGS_KEY, R as NOTIFICATIONS_KEY, V as NamedProcs, z as SQLiteOn3NStorage, l as SingleCyclicProc, C as SingleProc, H as THEME_KEY, N as TOOLTIPS_KEY, o as TaskRunner, E as VUEBUS_KEY, L as b64ToBlob, B as blobFromDataURL, M as blobToB64, v as capitalize, a as copyToClipboard, I as createVideoThumbnail, f as debounce, g as defer, Z as emoticons, h as executeFunc, G as fileToUint8Array, D as formatFileSize, i as generateColor, c as getDeliveryErrors, t as getFileExtension, b as getRandomId, r as hasSlotContent, q as html2text, y as invertColor, j as isFileArchive, T as isFileAudio, Y as isFileImage, K as isFileVideo, Q as mailReg, S as makeSyncedFunc, m as markSearch, X as mimeTypes, s as patchTextareaMaxRowsSupport, n as prepareDateAsSting, p as removeWhitespaceInString, k as resizeImage, x as round, u as schedulerYield, F as selectAll, e as selectEnd, P as selectStart, w as sleep, J as toCssLength, d as transformFileToWeb3NFile, _ as transformWeb3nFileToFile, U as tryOnScopeDispose, A as uint8ToDataURL, O as unrefElement };

package/package.json

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

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

@@ -48,7 +48,9 @@
   );
 
   const displayValue = computed(() => {
-    if (props.chips) return '';
+    if (props.chips) {
+      return '';
+    }
 
     if (props.returnObject) {
       return (props.modelValue as T[]).map(v => v[props.itemTitle] || '?').join(', ');
@@ -62,7 +64,9 @@
       return props.items
         .filter(item => props.customFilter!(item, query.value))
         .filter(item => {
-          if (!props.hideSelected) return true;
+          if (!props.hideSelected) {
+            return true;
+          }
 
           return props.returnObject
             ? !(ids.value as string[]).includes(item.id as string)
@@ -73,7 +77,9 @@
     return props.items
       .filter(item => (item[props.itemTitle] as string).toLowerCase().includes(query.value.toLowerCase()))
       .filter(item => {
-        if (!props.hideSelected) return true;
+        if (!props.hideSelected) {
+          return true;
+        }
 
         return props.returnObject
           ? !(ids.value as string[]).includes(item.id as string)
@@ -130,14 +136,20 @@
   }
 
   function tryAddNewValue(): boolean {
-    if (!props.addNewValue || props.disabled) return false;
+    if (!props.addNewValue || props.disabled) {
+      return false;
+    }
 
     const text = query.value.trim();
-    if (!text) return false;
+    if (!text) {
+      return false;
+    }
 
     isNewValueValid.value = !props.newValueValidator ? true : props.newValueValidator(text);
     emits('valid:new-value', isNewValueValid.value);
-    if (!isNewValueValid.value) return false;
+    if (!isNewValueValid.value) {
+      return false;
+    }
 
     const item = {
       id: getRandomId(6),
@@ -173,7 +185,9 @@
   }
 
   function onItemClick(item: T) {
-    if (props.disabled || isItemDisabled(item)) return;
+    if (props.disabled || isItemDisabled(item)) {
+      return;
+    }
 
     if (!props.multiple) {
       const newValue = props.returnObject ? [item] : [item[props.itemValue]];
@@ -198,7 +212,9 @@
   }
 
   function onChipClose(item: T | T[keyof T]) {
-    if (props.disabled) return;
+    if (props.disabled) {
+      return;
+    }
 
     const index = props.returnObject
       ? (props.modelValue as T[]).findIndex(v => v.id === (item as T).id)

package/src/components/ui3n-breadcrumbs/ui3n-breadcrumb.vue

@@ -18,7 +18,9 @@
   const parentContext = inject<any>('ui3n-breadcrumbs-context', null);
 
   const separatorValue = computed(() => {
-    if (props.separator) return props.separator;
+    if (props.separator) {
+      return props.separator;
+    }
     return parentContext ? parentContext.separator() : '/';
   });
 

package/src/components/ui3n-editable/useContentEditable.ts

@@ -24,8 +24,12 @@ export function useContentEditable(props: Ui3nContentEditableProps, emits: Ui3nC
   }
 
   function setHtmlFromValue(value: string): void {
+    if (!el.value) {
+      return;
+    }
+
     const sanitizedValue = value ? sanitizeHtml(value) : value;
-    el.value!.innerText = convertValueToHtml(sanitizedValue);
+    el.value.innerText = convertValueToHtml(sanitizedValue);
   }
 
   function getContent(ev: Event): Nullable<string> {

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

@@ -1,4 +1,5 @@
 import { VNode } from 'vue';
+import type { Ui3nVirtualElement } from '../ui3n-menu/types';
 
 /**
  * Tooltip placement types
@@ -49,9 +50,14 @@ export interface Ui3nTooltipProps {
    * Tooltip placement
    */
   placement?: Ui3nTooltipPlacement;
+  /**
+   * External element the tooltip is positioned against.
+   * When set, this node is the floating-ui reference and receives hover/click listeners.
+   */
+  triggerElement?: HTMLElement | Ui3nVirtualElement;
   /**
    * Position strategy
-   * @default 'absolute'
+   * @default 'absolute' (or 'fixed' when triggerElement is set)
    */
   positionStrategy?: 'absolute' | 'fixed';
   /**
@@ -107,7 +113,7 @@ export interface Ui3nTooltipSlots {
   /**
    * Default slot
    */
-  default: () => VNode;
+  default?: () => VNode;
   /**
    * Content slot
    */

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

@@ -0,0 +1,79 @@
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import Ui3nTooltip from './ui3n-tooltip.vue';
+  import type { TooltipInstance, Ui3nTooltipShowOptions } from '../../plugins/tooltips/types';
+
+  const items = ref<TooltipInstance[]>([]);
+
+  function add(item: TooltipInstance) {
+    items.value.push(item);
+  }
+
+  function remove(id: string) {
+    items.value = items.value.filter(item => item.id !== id);
+  }
+
+  function removeByKind(kind: 'show' | 'attach') {
+    items.value = items.value.filter(item => item.kind !== kind);
+  }
+
+  function removeByTarget(target: HTMLElement) {
+    items.value = items.value.filter(item => !(item.kind === 'attach' && item.target === target));
+  }
+
+  function update(id: string, patch: Partial<Ui3nTooltipShowOptions>) {
+    const item = items.value.find(entry => entry.id === id);
+    if (item) {
+      Object.assign(item, patch);
+    }
+  }
+
+  function clearAll() {
+    items.value = [];
+  }
+
+  function tooltipBind(item: TooltipInstance) {
+    return {
+      id: item.id,
+      content: item.content,
+      maxContentWidth: item.maxContentWidth,
+      color: item.color,
+      textColor: item.textColor,
+      placement: item.placement,
+      positionStrategy: item.positionStrategy ?? 'fixed',
+      offsetX: item.offsetX,
+      offsetY: item.offsetY,
+      trigger: item.trigger,
+      modelValue: item.modelValue,
+      disabled: item.disabled,
+      triggerElement: item.target,
+    };
+  }
+
+  defineExpose({ add, remove, removeByKind, removeByTarget, update, clearAll });
+</script>
+
+<template>
+  <div
+    id="ui3n-tooltips-container"
+    data-ui3n="tooltip-container"
+    :class="$style.container"
+  >
+    <ui3n-tooltip
+      v-for="item in items"
+      :key="item.id"
+      v-bind="tooltipBind(item)"
+    />
+  </div>
+</template>
+
+<style lang="scss" module>
+  .container {
+    position: absolute;
+    width: 0;
+    height: 0;
+    overflow: visible;
+    pointer-events: none;
+    z-index: 2000;
+  }
+</style>