@v1nt1248/3nclient-lib 0.3.49 → 0.3.51

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

@@ -0,0 +1,272 @@
+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 };

package/dist/mixins.scss

@@ -31,29 +31,6 @@
   box-shadow: 0 0 2px 0 var(--shadow-key-1), 0 2px 5px 0 var(--shadow-key-2);
 }
 
-@mixin ripple($color) {
-  @if & {
-    background-position: center;
-    transition: background 0.35s ease-in-out;
-
-    &:not([disabled]) {
-      cursor: pointer;
-
-      &:hover {
-        background: $color radial-gradient(circle, transparent 1%, $color 1%) center/15000%;
-      }
-
-      &:active {
-        opacity: 1;
-        background-color: var(--grey-20);
-        background-size: 100%;
-        transition: background 0s;
-      }
-    }
-  }
-}
-
-
 /* stylelint-disable nesting-selector-no-missing-scoping-root */
 @mixin scrollbar($size: 100px) {
   @supports (-moz-appearance: none) {

package/dist/src/components/ui3n-input/ui3n-input.d.ts

@@ -22,10 +22,10 @@ declare const __VLS_component: import('vue').DefineComponent<Ui3nInputProps, {
         shiftKey: boolean;
         metaKey: boolean;
     }) => any;
-    keydown: (value: KeyboardEvent) => any;
     blur: (value: Event) => any;
     change: (value: string) => any;
     focus: (value: Event) => any;
+    keydown: (value: KeyboardEvent) => any;
     init: (value: HTMLInputElement) => any;
     "update:modelValue": (value: string) => any;
     clear: () => any;
@@ -40,10 +40,10 @@ declare const __VLS_component: import('vue').DefineComponent<Ui3nInputProps, {
         shiftKey: boolean;
         metaKey: boolean;
     }) => any) | undefined;
-    onKeydown?: ((value: KeyboardEvent) => any) | undefined;
     onBlur?: ((value: Event) => any) | undefined;
     onChange?: ((value: string) => any) | undefined;
     onFocus?: ((value: Event) => any) | undefined;
+    onKeydown?: ((value: KeyboardEvent) => any) | undefined;
     onInit?: ((value: HTMLInputElement) => any) | undefined;
     "onUpdate:modelValue"?: ((value: string) => any) | undefined;
     onClear?: (() => any) | undefined;

package/dist/src/components/ui3n-notification/types.d.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
      */

package/dist/src/components/ui3n-notification/ui3n-notification.d.ts

@@ -6,5 +6,6 @@ declare const _default: import('vue').DefineComponent<Ui3nNotificationProps, {},
     withIcon: boolean;
     onOpen: () => void;
     position: "left" | "center" | "right";
+    borderRadius: number | string;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
 export default _default;

package/dist/src/components/ui3n-text/ui3n-text.d.ts

@@ -10,10 +10,10 @@ declare const _default: import('vue').DefineComponent<Ui3nTextProps, {
         shiftKey: boolean;
         metaKey: boolean;
     }) => any;
-    keydown: (value: KeyboardEvent) => any;
     blur: (value: Event) => any;
     change: (value: string) => any;
     focus: (value: Event) => any;
+    keydown: (value: KeyboardEvent) => any;
     init: (value: HTMLTextAreaElement) => any;
     "update:modelValue": (value: string) => any;
     escape: (value: Event) => any;
@@ -27,10 +27,10 @@ declare const _default: import('vue').DefineComponent<Ui3nTextProps, {
         shiftKey: boolean;
         metaKey: boolean;
     }) => any) | undefined;
-    onKeydown?: ((value: KeyboardEvent) => any) | undefined;
     onBlur?: ((value: Event) => any) | undefined;
     onChange?: ((value: string) => any) | undefined;
     onFocus?: ((value: Event) => any) | undefined;
+    onKeydown?: ((value: KeyboardEvent) => any) | undefined;
     onInit?: ((value: HTMLTextAreaElement) => any) | undefined;
     "onUpdate:modelValue"?: ((value: string) => any) | undefined;
     onEscape?: ((value: Event) => any) | undefined;

package/dist/src/components/ui3n-tooltip/ui3n-tooltip.d.ts

@@ -25,9 +25,9 @@ declare const __VLS_component: import('vue').DefineComponent<Ui3nTooltipProps, {
 }>, {
     color: string;
     disabled: boolean;
-    textColor: string;
     offsetX: string | number;
     offsetY: string | number;
+    textColor: string;
     positionStrategy: "absolute" | "fixed";
     placement: import('./types').Ui3nTooltipPlacement;
     maxContentWidth: number | string;

package/dist/src/constants/plugins-keys.d.ts

@@ -2,6 +2,8 @@ import { InjectionKey } from 'vue';
 import { DialogsPlugin } from '../plugins/dialogs/types';
 import { NotificationsPlugin } from '../plugins/notifications/types';
 import { VueBusPlugin } from '../plugins/vue-bus/types';
+import { ThemePlugin } from '../plugins/theme/types';
 export declare const DIALOGS_KEY: InjectionKey<DialogsPlugin>;
 export declare const NOTIFICATIONS_KEY: InjectionKey<NotificationsPlugin>;
 export declare const VUEBUS_KEY: InjectionKey<VueBusPlugin<any>>;
+export declare const THEME_KEY: InjectionKey<ThemePlugin>;

package/dist/src/directives/ui3n-ripple.d.ts

@@ -8,6 +8,7 @@ export interface Ui3nRippleDirectiveProps {
 export type Ui3nRippleDirectiveBinding = DirectiveBinding<Ui3nRippleDirectiveProps>;
 declare const _default: {
     mounted(el: HTMLElement, binding: Ui3nRippleDirectiveBinding): void;
-    beforeUnmount(): void;
+    updated(el: HTMLElement, binding: Ui3nRippleDirectiveBinding): void;
+    beforeUnmount(el: HTMLElement): void;
 };
 export default _default;

package/dist/src/directives/ui3n-title.d.ts

@@ -17,6 +17,6 @@ export type Ui3nTitleDirectiveBinding = DirectiveBinding<Ui3nTitleDirectiveProps
 declare const _default: {
     mounted(el: HTMLElement, binding: Ui3nTitleDirectiveBinding): void;
     updated(el: HTMLElement, binding: Ui3nTitleDirectiveBinding): void;
-    beforeUnmount(el: HTMLElement, binding: Ui3nTitleDirectiveBinding): void;
+    beforeUnmount(el: HTMLElement): void;
 };
 export default _default;

package/dist/src/plugins/index.d.ts

@@ -7,4 +7,7 @@ import { DialogsPlugin, DialogOptions } from './dialogs/types';
 import { storeNotifications } from './notifications/store-notifications';
 import { storeVueBus } from './vue-bus/store-vue-bus';
 import { storeDialogs } from './dialogs/store-dialog';
-export { notifications, NotificationsPlugin, vueBus, VueBusPlugin, dialogs, DialogsPlugin, DialogOptions, storeNotifications, storeVueBus, storeDialogs, };
+import { theme } from './theme/theme';
+import { storeTheme } from './theme/store-theme';
+import { ThemePlugin, ThemePluginOptions, ThemeId } from './theme/types';
+export { notifications, NotificationsPlugin, vueBus, VueBusPlugin, dialogs, DialogsPlugin, DialogOptions, theme, ThemePlugin, ThemePluginOptions, ThemeId, storeNotifications, storeVueBus, storeDialogs, storeTheme, };

package/dist/src/plugins/theme/store-theme.d.ts

@@ -0,0 +1,4 @@
+import { ThemePlugin } from './types';
+export declare function storeTheme(context: any): {
+    $theme: ThemePlugin;
+};

package/dist/src/plugins/theme/theme.d.ts

@@ -0,0 +1,10 @@
+import { App } from 'vue';
+import { ThemePlugin, ThemePluginOptions } from './types';
+export declare const theme: {
+    install(app: App, options?: ThemePluginOptions): void;
+};
+declare module '@vue/runtime-core' {
+    interface ComponentCustomProperties {
+        $theme: ThemePlugin;
+    }
+}

package/dist/src/plugins/theme/types.d.ts

@@ -0,0 +1,12 @@
+import { Ref } from 'vue';
+export type ThemeId = 'light' | 'dark' | 'midnight';
+export interface ThemePluginOptions {
+    theme?: ThemeId;
+    persist?: boolean;
+    storageKey?: string;
+    target?: HTMLElement;
+}
+export interface ThemePlugin {
+    theme: Ref<ThemeId>;
+    setTheme: (id: ThemeId) => void;
+}

package/dist/src/ui3n-plugins.d.ts

@@ -2,9 +2,9 @@ import { Component, Ref } from 'vue';
 import { ExtractComponentProps } from './types';
 import { Ui3nNotificationProps } from './components/ui3n-notification/types';
 import { Ui3nDialogEvent } from './components/ui3n-dialog/types';
-import { notifications, storeNotifications, NotificationsPlugin, dialogs, storeDialogs, DialogOptions, DialogsPlugin, vueBus, storeVueBus, VueBusPlugin } from './plugins';
+import { notifications, storeNotifications, NotificationsPlugin, dialogs, storeDialogs, DialogOptions, DialogsPlugin, vueBus, storeVueBus, VueBusPlugin, theme, storeTheme, ThemePlugin, ThemePluginOptions, ThemeId } from './plugins';
 import { CbFunction, VueEventBus } from './plugins/vue-bus/types';
-import { NOTIFICATIONS_KEY, DIALOGS_KEY, VUEBUS_KEY } from './constants';
+import { NOTIFICATIONS_KEY, DIALOGS_KEY, VUEBUS_KEY, THEME_KEY } from './constants';
 declare module 'vue' {
     interface ComponentCustomProperties {
         $openDialog: <V>(component: Component, props: ExtractComponentProps<Component>) => Promise<{
@@ -19,12 +19,14 @@ declare module 'vue' {
         dialogStack: Ref<DialogOptions<any>[]>;
         $createNotice: (params: Ui3nNotificationProps) => void;
         $emitter: VueEventBus<any>;
+        $theme: ThemePlugin;
     }
 }
 declare module 'pinia' {
     interface PiniaCustomProperties {
         $createNotice: (params: Ui3nNotificationProps) => void;
         $emitter: VueEventBus<any>;
+        $theme: ThemePlugin;
         $dialogs: {
             open: <V>(component: Component, props: ExtractComponentProps<Component>) => Promise<{
                 event: Ui3nDialogEvent;
@@ -39,4 +41,4 @@ declare module 'pinia' {
         };
     }
 }
-export { notifications, storeNotifications, NOTIFICATIONS_KEY, NotificationsPlugin, dialogs, storeDialogs, DIALOGS_KEY, DialogsPlugin, DialogOptions, vueBus, storeVueBus, VUEBUS_KEY, CbFunction, VueBusPlugin, VueEventBus, };
+export { notifications, storeNotifications, NOTIFICATIONS_KEY, NotificationsPlugin, dialogs, storeDialogs, DIALOGS_KEY, DialogsPlugin, DialogOptions, vueBus, storeVueBus, VUEBUS_KEY, CbFunction, VueBusPlugin, VueEventBus, theme, storeTheme, ThemePlugin, ThemePluginOptions, ThemeId, THEME_KEY, };

package/dist/src/utils/index.d.ts

@@ -20,6 +20,7 @@ export * from './ui/invert-color';
 export * from './ui/html2text';
 export * from './ui/prepare-date-as-string';
 export * from './ui/capitalize';
+export * from './ui/to-css-length';
 export * from './files/format-file-size';
 export * from './files/get-file-extension';
 export * from './files/is-file-image';

package/dist/src/utils/ui/to-css-length.d.ts

@@ -0,0 +1 @@
+export declare function toCssLength(size: number | string, fallback?: string): string;