@v1nt1248/3nclient-lib 0.3.48 → 0.3.50

package/dist/ui3n-plugins.js

@@ -1,35 +1,35 @@
-import { B as e, n as t, r as n, t as r } from "./chunks/plugins-keys-CmrMlx3F.js";
-import { i, t as a } from "./chunks/ui3n-notification-DPC5Ke4b.js";
-import { Fragment as o, createApp as s, createBlock as c, createElementBlock as l, defineComponent as u, markRaw as d, mergeProps as f, normalizeClass as p, openBlock as m, ref as h, renderList as g } from "vue";
+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-o0tuhTpO.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 "pinia";
-import _ from "mitt";
-var v = /* @__PURE__ */ i(/* @__PURE__ */ u({
+import v from "mitt";
+var y = /* @__PURE__ */ a(/* @__PURE__ */ d({
 	__name: "ui3n-notification-container",
 	setup(e, { expose: t }) {
-		let n = h([]);
+		let n = g([]);
 		function r(e) {
 			n.value.push(e);
 		}
 		function i(e) {
 			n.value = n.value.filter((t) => t.id !== e);
 		}
-		function s(e) {
+		function a(e) {
 			e.onClose && e.onClose(), i(e.id);
 		}
 		return t({
 			add: r,
 			remove: i
-		}), (e, t) => (m(), l("div", {
+		}), (e, t) => (h(), u("div", {
 			id: "ui3n-notifications-container",
-			class: p(e.$style.ui3nNotificationsWrapper)
-		}, [(m(!0), l(o, null, g(n.value, (e) => (m(), c(a, f({ key: e.id }, { ref_for: !0 }, e, { "on-close": () => s(e) }), null, 16, ["on-close"]))), 128))], 2));
+			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));
 	}
-}), [["__cssModules", { $style: { ui3nNotificationsWrapper: "_ui3nNotificationsWrapper_1vwg2_1" } }]]), y = { install: (n) => {
+}), [["__cssModules", { $style: { ui3nNotificationsWrapper: "_ui3nNotificationsWrapper_1vwg2_1" } }]]), b = { install: (t) => {
 	if (typeof window > "u") return;
 	let r = document.createElement("div");
 	document.body.appendChild(r);
-	let i = s(v);
-	i._context.provides = n._context.provides;
+	let i = c(y);
+	i._context.provides = t._context.provides;
 	let a = i.mount(r), o = (t) => {
 		let n = t.id || e(6), r = t.duration === void 0 ? 1500 : t.duration;
 		a.add({
@@ -38,27 +38,27 @@ var v = /* @__PURE__ */ i(/* @__PURE__ */ u({
 			duration: r
 		});
 	};
-	n.config.globalProperties.$createNotice = o, n.provide(t, { $createNotice: o });
-} }, b = _(), x = {
-	on: b.on.bind(b),
+	t.config.globalProperties.$createNotice = o, t.provide(n, { $createNotice: o });
+} }, x = v(), S = {
+	on: x.on.bind(x),
 	once: (e, t) => {
 		function n() {
-			b.off(e, n), t.apply(null, arguments);
+			x.off(e, n), t.apply(null, arguments);
 		}
-		b.on(e, n);
+		x.on(e, n);
 	},
-	off: b.off.bind(b),
-	emit: b.emit.bind(b),
-	clear: b.all.clear.bind(b)
-}, S = { install: (e) => {
-	e.config.globalProperties.$emitter = x, e.provide(n, { $emitter: x });
-} }, C = { install(t) {
-	let n = h([]);
-	function i(t, r) {
+	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([]);
+	function r(t, r) {
 		return new Promise((i) => {
 			n.value.push({
 				id: e(5),
-				component: d(t),
+				component: f(t),
 				props: r,
 				resolve: i
 			});
@@ -73,31 +73,31 @@ var v = /* @__PURE__ */ i(/* @__PURE__ */ u({
 	}
 	t.config.globalProperties.$dialog = {
 		dialogStack: n,
-		$openDialog: i,
+		$openDialog: r,
 		$closeDialog: a,
 		$closeDialogs: o
-	}, t.provide(r, {
+	}, t.provide(i, {
 		dialogStack: n,
-		$openDialog: i,
+		$openDialog: r,
 		$closeDialog: a,
 		$closeDialogs: o
 	});
 } };
 //#endregion
 //#region src/plugins/notifications/store-notifications.ts
-function w(e) {
+function T(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 T(e) {
+function E(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 E(e) {
+function D(e) {
 	let { app: t = {} } = e, { config: n = {} } = t, { globalProperties: r = {} } = n, { $dialog: i } = r;
 	return { $dialogs: {
 		open: i.$openDialog,
@@ -107,4 +107,53 @@ function E(e) {
 	} };
 }
 //#endregion
-export { r as DIALOGS_KEY, t as NOTIFICATIONS_KEY, n as VUEBUS_KEY, C as dialogs, y as notifications, E as storeDialogs, w as storeNotifications, T as storeVueBus, S as vueBus };
+//#region src/plugins/theme/theme.ts
+var O = [
+	"light",
+	"dark",
+	"midnight"
+], k = [
+	"light-theme",
+	"dark-theme",
+	"midnight-theme"
+];
+function A(e) {
+	return typeof e == "string" && O.includes(e);
+}
+function j(e, t) {
+	e.classList.add("colors");
+	for (let t of k) e.classList.remove(t);
+	e.classList.add(`${t}-theme`);
+}
+function M(e) {
+	if (e.persist) {
+		let t = e.storageKey ?? "ui3n-theme";
+		try {
+			let e = localStorage.getItem(t);
+			if (A(e)) return e;
+		} catch {}
+	}
+	return A(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));
+	function o(e) {
+		if (A(e) && (a.value = e, !(typeof document > "u") && (j(t.target ?? document.documentElement, e), n))) try {
+			localStorage.setItem(i, e);
+		} catch {}
+	}
+	typeof document < "u" && o(a.value);
+	let s = {
+		theme: a,
+		setTheme: o
+	};
+	e.provide(r, s), e.config.globalProperties.$theme = s;
+} };
+//#endregion
+//#region src/plugins/theme/store-theme.ts
+function P(e) {
+	let { app: t = {} } = e, { config: n = {} } = t, { globalProperties: r = {} } = n, { $theme: i } = r;
+	return { $theme: 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 };

package/dist/ui3n-utils.js

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

package/dist/variables.css

@@ -123,6 +123,8 @@
 
 }
 
+:root,
+.light-theme,
 .default-theme {
   --ripple: var(--white-48);
   --shadow-key-1: var(--black-12);
@@ -290,7 +292,7 @@
   --info-outline-disabled: var(--blue-5);
 }
 
-.dark-theme {
+.midnight-theme {
   --ripple: var(--black-48);
   --shadow-key-1: var(--white-12);
   --shadow-key-2: var(--white-8);
@@ -457,7 +459,7 @@
   --info-outline-disabled: var(--blue-85);
 }
 
-.dark2-theme {
+.dark-theme {
   --ripple: var(--black-48);
   --shadow-key-1: var(--white-12);
   --shadow-key-2: var(--white-8);
@@ -624,6 +626,7 @@
   --info-outline-disabled: var(--blue-85);
 }
 
+:root,
 .colors {
   --color-bg-button-primary-default: var(--accent-fill-default);
   --color-bg-button-primary-hover: var(--accent-fill-hover);
@@ -930,92 +933,3 @@
   --color-icon-chat-bubble-other-selected: var(--accent-content-selected);
   --effect-dropdown-shadow: 0 0 4px 0 var(--shadow-close), 0 4px 12px 0 var(--shadow-far);
 }
-
-html {
-  overflow: hidden;
-  font-family: Inter, system-ui, sans-serif;
-}
-
-section,
-div {
-  box-sizing: border-box;
-}
-
-::-webkit-scrollbar-button {
-  background-image: url("");
-  background-repeat: no-repeat;
-  width: var(--spacing-xs);
-  height: 0;
-}
-
-::-webkit-scrollbar-track {
-  background-color: transparent;
-}
-
-::-webkit-scrollbar-thumb {
-  border-radius: 4px;
-  height: 50px;
-  background-color: var(--default-fill-pressed);
-}
-
-::-webkit-scrollbar-thumb:hover {
-  background-color: var(--t-default-fill-default);
-}
-
-::-webkit-resizer {
-  background-image: url("");
-  background-repeat: no-repeat;
-  width: var(--spacing-xs);
-  height: 0;
-}
-
-::-webkit-scrollbar {
-  width: 5px;
-}
-
-/* other CSS style classes */
-.fade-enter-active,
-.fade-leave-active {
-  transition: opacity 0.15s ease;
-}
-
-.fade-enter,
-.fade-leave-active {
-  opacity: 0;
-}
-
-@keyframes ripple {
-  to {
-    transform: scale(4);
-    opacity: 0;
-  }
-}
-
-.ui3n-ripple {
-  --ui3n-ripple-duration: 400ms;
-  --ui3n-ripple-bg-color: var(--ripple);
-
-  position: absolute;
-  border-radius: 50%;
-  transform: scale(0);
-  animation: ripple var(--ui3n-ripple-duration) linear;
-  background-color: var(--ui3n-ripple-bg-color);
-}
-
-.ui3n-title {
-  position: fixed;
-  width: max-content;
-  top: 0;
-  left: 0;
-  padding: var(--spacing-xs) var(--spacing-s);
-  border-radius: var(--spacing-xs);
-  font-size: var(--font-11);
-  line-height: var(--font-12);
-  font-weight: 400;
-  overflow-wrap: break-word;
-  white-space: break-spaces;
-  box-shadow: 0 2px 1px -1px var(--shadow-key-1),
-  0 1px 1px 0 var(--shadow-key-2),
-  0 1px 3px 0 var(--shadow-key-3);
-  z-index: 1000;
-}

package/package.json

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

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

@@ -48,6 +48,18 @@ export interface Ui3nAutocompleteProps<T extends Ui3nAutocompleteOptionBase> {
    * @default false
    */
   disabled?: boolean;
+  /**
+   * Whether an individual item cannot be picked.
+   *
+   * A disabled item is still listed, greyed out and inert to both the pointer
+   * and the keyboard. Use it when leaving the item out would be worse than
+   * showing it: an absence explains nothing, while a disabled row - with a
+   * reason rendered through the `item` slot - does.
+   *
+   * A predicate rather than a flag on the item itself, so that a caller can
+   * answer from state of its own without copying or mutating its data.
+   */
+  itemDisabled?: (item: T) => boolean;
   /**
    * Filter keys
    */

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

@@ -81,6 +81,33 @@
       });
   });
 
+  /**
+   * Whether this item is listed but cannot be picked.
+   *
+   * Asked in one place, because the pointer and the keyboard have to agree: an
+   * item that cannot be clicked must not be reachable with arrows and Enter
+   * either.
+   */
+  function isItemDisabled(item: T | undefined): boolean {
+    return !!item && !!props.itemDisabled?.(item);
+  }
+
+  /**
+   * Index of the nearest item that can be picked, looking from `from` in the
+   * direction of `step`.
+   *
+   * @returns null when there is none that way, so that the caller can leave the
+   *          highlight where it is rather than moving it onto a dead row.
+   */
+  function nearestEnabledIndex(from: number, step: 1 | -1): number | null {
+    for (let i = from; (i >= 0) && (i < size(filteredItems.value)); i += step) {
+      if (!isItemDisabled(filteredItems.value[i])) {
+        return i;
+      }
+    }
+    return null;
+  }
+
   function onInput() {
     isLastChipHighlighted.value = false;
     emits('update:search', query.value);
@@ -146,7 +173,7 @@
   }
 
   function onItemClick(item: T) {
-    if (props.disabled) return;
+    if (props.disabled || isItemDisabled(item)) return;
 
     if (!props.multiple) {
       const newValue = props.returnObject ? [item] : [item[props.itemValue]];
@@ -183,25 +210,33 @@
 
   function handlePressingDownKey() {
     if (activeItemsIndex.value === null) {
-      activeItemsIndex.value = 0;
+      activeItemsIndex.value = nearestEnabledIndex(0, 1);
       menuBodyEl.value && menuBodyEl.value.focus({ preventScroll: true });
       return;
     }
 
     if (activeItemsIndex.value >= 0 && activeItemsIndex.value < size(filteredItems.value) - 1) {
-      activeItemsIndex.value += 1;
+      // Past the disabled ones rather than onto them: the highlight stays put
+      // when everything below cannot be picked.
+      const next = nearestEnabledIndex(activeItemsIndex.value + 1, 1);
+      if (next !== null) {
+        activeItemsIndex.value = next;
+      }
     }
   }
 
   function handlePressingUpKey() {
     if (activeItemsIndex.value === null) {
-      activeItemsIndex.value = size(filteredItems.value) - 1;
+      activeItemsIndex.value = nearestEnabledIndex(size(filteredItems.value) - 1, -1);
       menuBodyEl.value && menuBodyEl.value.focus({ preventScroll: true });
       return;
     }
 
     if (activeItemsIndex.value > 0 && activeItemsIndex.value < size(filteredItems.value)) {
-      activeItemsIndex.value -= 1;
+      const previous = nearestEnabledIndex(activeItemsIndex.value - 1, -1);
+      if (previous !== null) {
+        activeItemsIndex.value = previous;
+      }
     }
   }
 
@@ -228,6 +263,12 @@
   function handlePressingEnterKey() {
     if (activeItemsIndex.value !== null) {
       const item = filteredItems.value[activeItemsIndex.value!];
+      // Nothing happens on a disabled item, and nothing is cleared either: the
+      // query and the highlight are the user's place in the list, and taking
+      // them away would read as though the item had been taken.
+      if (isItemDisabled(item)) {
+        return;
+      }
       onItemClick(item);
       activeItemsIndex.value = null;
       props.clearOnSelect && (query.value = '');
@@ -241,7 +282,7 @@
 
     if (!isMenuOpen.value) {
       isMenuOpen.value = true;
-      activeItemsIndex.value = 0;
+      activeItemsIndex.value = nearestEnabledIndex(0, 1);
       menuBodyEl.value && menuBodyEl.value.focus({ preventScroll: true });
     }
   }
@@ -467,8 +508,9 @@
                 :class="[
                   $style.item,
                   activeItemsIndex === index && $style.itemSelected,
-                  disabled && $style.itemDisabled,
+                  (disabled || isItemDisabled(item)) && $style.itemDisabled,
                 ]"
+                :aria-disabled="disabled || isItemDisabled(item)"
                 @mousedown="onItemMouseDown"
                 @click.stop.prevent="onItemClick(item)"
               >

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

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
   import { computed, onBeforeMount, ref, useCssModule, useSlots, watch } from 'vue';
   import Ui3nRipple from '../../directives/ui3n-ripple';
+  import { toCssLength } from '../../utils/ui/to-css-length';
   import type {
     Ui3nCheckboxEmits,
     Ui3nCheckboxExpose,
@@ -52,7 +53,7 @@
   });
 
   const inlineStyles = computed(() => ({
-    '--ui3n-checkbox-size': typeof props.size === 'number' ? `${props.size}px` : props.size,
+    '--ui3n-checkbox-size': toCssLength(props.size),
     '--ui3n-checkbox-color': props.color,
   }));
 
@@ -205,8 +206,6 @@
 </template>
 
 <style lang="scss" module>
-  @use '../../assets/styles/mixins' as mixins;
-
   .ui3nCheckbox {
     --ui3n-checkbox-size: 16px;
     --ui3n-checkbox-gap: 4px;
@@ -248,17 +247,15 @@
     background-color: var(--ui3n-checkbox-color);
 
     &:hover {
-      border-color: oklch(from var(--ui3n-checkbox-color) calc(l - 0.1) c h);
-      background-color: oklch(from var(--ui3n-checkbox-color) calc(l - 0.1) c h);
-      @include mixins.ripple(oklch(from var(--ui3n-checkbox-color) calc(l - 0.1) c h));
+      border-color: color-mix(in oklch, var(--ui3n-checkbox-color), black 12%);
+      background-color: color-mix(in oklch, var(--ui3n-checkbox-color), black 12%);
     }
   }
 
   .unfilled {
     &:hover {
-      border-color: oklch(from var(--ui3n-checkbox-color) calc(l - 0.1) c h);
-      background-color: oklch(from transparent calc(l - 0.1) c h);
-      @include mixins.ripple(oklch(from transparent calc(l - 0.1) c h));
+      border-color: color-mix(in oklch, var(--ui3n-checkbox-color) 84%, black);
+      background-color: color-mix(in oklch, var(--ui3n-checkbox-color) 16%, transparent);
     }
   }
 

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

@@ -24,6 +24,11 @@ export interface Ui3nNotificationProps {
    * @default false
    */
   withIcon?: boolean;
+  /**
+   * Notification border radius in pixels or css length
+   * @default 8
+   */
+  borderRadius?: number | string;
   /**
    * Called when notification opens
    */