@v1nt1248/3nclient-lib 0.3.48 → 0.3.50

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

@@ -1,7 +1,8 @@
 <script lang="ts" setup>
-  import { computed, onMounted, onBeforeUnmount, ref, useCssModule } from 'vue';
+  import { computed, onMounted, onBeforeUnmount, useCssModule } from 'vue';
   import Ui3nIcon from '../ui3n-icon/ui3n-icon.vue';
   import Ui3nButton from '../ui3n-button/ui3n-button.vue';
+  import { toCssLength } from '../../utils/ui/to-css-length';
   import type { Ui3nNotificationProps } from './types';
 
   const props = withDefaults(defineProps<Ui3nNotificationProps>(), {
@@ -9,6 +10,7 @@
     position: 'center',
     duration: 0,
     withIcon: true,
+    borderRadius: 8,
     onOpen: () => {},
     onClose: () => {},
   });
@@ -20,25 +22,21 @@
   const currentTypeConfig = computed(() => {
     const stylesByTypes = {
       success: {
-        color: 'var(--success-content-default)',
         icon: 'round-check-circle',
         iconColor: 'var(--success-fill-default)',
         iconRotate: 0,
       },
       warning: {
-        color: 'var(--warning-content-default)',
         icon: 'round-warning',
         iconColor: 'var(--warning-fill-default)',
         iconRotate: 0,
       },
       info: {
-        color: 'var(--info-content-default)',
         icon: 'round-info',
         iconColor: 'var(--info-fill-default)',
         iconRotate: 180,
       },
       error: {
-        color: 'var(--error-content-default)',
         icon: 'round-info',
         iconColor: 'var(--error-fill-default)',
         iconRotate: 180,
@@ -53,6 +51,10 @@
     return val;
   });
 
+  const inlineStyles = computed(() => ({
+    '--ui3n-notification-border-radius': toCssLength(props.borderRadius, '8px'),
+  }));
+
   function closeNotification() {
     if (props.onClose) {
       props.onClose();
@@ -82,6 +84,7 @@
   <div
     :id="id"
     :class="mainCssClasses"
+    :style="inlineStyles"
   >
     <div
       v-if="withIcon"
@@ -105,7 +108,6 @@
       size="small"
       color="transparent"
       icon="round-close"
-      :icon-color="currentTypeConfig.color"
       icon-size="16"
       :class="$style.closeBtn"
       @click="closeNotification"
@@ -117,22 +119,24 @@
   .ui3nNotification {
     --ui3n-notification-width: 380px;
     --ui3n-notification-font-size: 12px;
-    --ui3n-notification-border-radius: 4px;
+    --ui3n-notification-border-radius: 8px;
     --ui3n-notification-margin-bottom: 4px;
     --ui3n-notification-icon-size: 32px;
+    --ui3n-notification-text-color: var(--default-content-default);
 
     display: flex;
     position: relative;
     box-sizing: border-box;
     z-index: 5000;
     border-radius: var(--ui3n-notification-border-radius);
-    outline: 1px solid var(--color-border-control-tritery-default);
+    outline: 1px solid var(--color-border-block-primary-default);
     padding: var(--spacing-m);
     max-width: var(--ui3n-notification-width);
     margin-bottom: var(--ui3n-notification-margin-bottom);
     justify-content: center;
     align-items: center;
     gap: 8px;
+    color: var(--ui3n-notification-text-color);
   }
 
   .withIcon {
@@ -159,6 +163,7 @@
     font-weight: 500;
     line-height: 1.33;
     padding-right: 20px;
+    color: var(--ui3n-notification-text-color);
   }
 
   .closeBtn {
@@ -166,53 +171,70 @@
     z-index: 1;
     top: 6px;
     right: 6px;
+    color: var(--ui3n-notification-text-color);
   }
 
   .infoType {
+    --ui3n-notification-text-color: var(--info-content-default);
+
     background-color: var(--info-fill-default);
 
     .ui3nNotificationIcon {
       background-color: var(--info-content-default);
     }
 
-    .ui3nNotificationContent {
-      color: var(--info-content-default);
+    :global(.dark-theme) &,
+    :global(.midnight-theme) &,
+    :global(.dark2-theme) & {
+      --ui3n-notification-text-color: oklch(from var(--info-content-default) calc(l + 0.15) c h);
     }
   }
 
   .successType {
+    --ui3n-notification-text-color: var(--success-content-default);
+
     background-color: var(--success-fill-default);
 
     .ui3nNotificationIcon {
       background-color: var(--success-content-default);
     }
 
-    .ui3nNotificationContent {
-      color: var(--success-content-default);
+    :global(.dark-theme) &,
+    :global(.midnight-theme) &,
+    :global(.dark2-theme) & {
+      --ui3n-notification-text-color: oklch(from var(--success-content-default) calc(l + 0.15) c h);
     }
   }
 
   .warningType {
+    --ui3n-notification-text-color: var(--warning-content-default);
+
     background-color: var(--warning-fill-default);
 
     .ui3nNotificationIcon {
       background-color: var(--warning-content-default);
     }
 
-    .ui3nNotificationContent {
-      color: var(--warning-content-default);
+    :global(.dark-theme) &,
+    :global(.midnight-theme) &,
+    :global(.dark2-theme) & {
+      --ui3n-notification-text-color: color-mix(in oklch, var(--warning-content-default) 45%, white);
     }
   }
 
   .errorType {
+    --ui3n-notification-text-color: var(--error-content-default);
+
     background-color: var(--error-fill-default);
 
     .ui3nNotificationIcon {
       background-color: var(--error-content-default);
     }
 
-    .ui3nNotificationContent {
-      color: var(--error-content-default);
+    :global(.dark-theme) &,
+    :global(.midnight-theme) &,
+    :global(.dark2-theme) & {
+      --ui3n-notification-text-color: color-mix(in oklch, var(--error-content-default) 45%, white);
     }
   }
 

package/src/components/ui3n-radio-group/ui3n-radio.vue

@@ -1,8 +1,12 @@
 <script lang="ts" setup>
-  import { computed, getCurrentInstance, inject, onBeforeMount, ref, useSlots, watch } from 'vue';
+  import { computed, inject, onBeforeMount, ref, useSlots, watch } from 'vue';
   import type { ComputedRef } from 'vue';
+  import Ui3nRipple from '../../directives/ui3n-ripple';
+  import { toCssLength } from '../../utils/ui/to-css-length';
   import type { Ui3nRadioEmits, Ui3nRadioProps, Ui3nRadioSlots, Ui3nRadioValue, Ui3nRadioExpose } from './types';
 
+  const vUi3nRipple = Ui3nRipple;
+
   const props = withDefaults(defineProps<Ui3nRadioProps>(), {
     name: undefined,
     modelValue: false,
@@ -38,7 +42,7 @@
   });
 
   const radioStyle = computed(() => ({
-    '--ui3n-radio-size': `${props.size}px`,
+    '--ui3n-radio-size': toCssLength(props.size),
     '--ui3n-radio-color': props.color,
   }));
 
@@ -120,6 +124,7 @@
     />
 
     <div
+      v-ui3n-ripple
       :class="[$style.body, disabled && $style.bodyDisabled]"
       :tabindex="disabled ? -1 : 0"
       @keydown.enter="change"
@@ -168,8 +173,6 @@
 </template>
 
 <style lang="scss" module>
-  @use '../../assets/styles/mixins' as mixins;
-
   .ui3nRadio {
     --ui3n-radio-min-height: 24px;
 
@@ -206,11 +209,11 @@
     justify-content: center;
     align-items: center;
     border-radius: 50%;
+    overflow: hidden;
 
     &:hover {
       cursor: pointer;
-      background-color: oklch(from transparent calc(l - 0.1) c h);
-      @include mixins.ripple(oklch(from transparent calc(l - 0.1) c h));
+      background-color: color-mix(in oklch, var(--ui3n-radio-color) 16%, transparent);
     }
   }
 

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

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
   import { computed, ref, watch, useSlots } from 'vue';
+  import { toCssLength } from '../../utils/ui/to-css-length';
   import type { Ui3nSwitchEmits, Ui3nSwitchProps, Ui3nSwitchSlots, Ui3nSwitchExpose } from './types';
 
   const props = withDefaults(defineProps<Ui3nSwitchProps>(), {
@@ -17,7 +18,7 @@
 
   const switchStyle = computed(() => ({
     '--ui3n-switch-color': props.color,
-    '--ui3n-switch-size': `${props.size}px`,
+    '--ui3n-switch-size': toCssLength(props.size),
   }));
 
   function change(ev: Event) {

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

@@ -98,8 +98,6 @@
 </template>
 
 <style lang="scss" module>
-  @use '../../assets/styles/mixins' as mixins;
-
   .ui3nTabs {
     --ui3n-tabs-height: 48px;
 
@@ -116,7 +114,6 @@
     position: relative;
     user-select: none;
     color: var(--ui3n-tabs-inactive-color);
-    @include mixins.ripple(var(--color-bg-control-secondary-default));
 
     &:hover {
       background-color: var(--color-bg-control-secondary-default);

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

@@ -1,278 +0,0 @@
-import { computed as e, createBlock as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, createVNode as a, defineComponent as o, mergeProps as s, normalizeClass as c, onBeforeUnmount as l, onMounted as u, openBlock as d, ref as f, renderSlot as p, toDisplayString as m, unref as h, useCssModule as g, watch as _, withDirectives as v, withKeys as y } from "vue";
-//#region src/directives/ui3n-ripple.ts
-var b = {}, x = "";
-function S({ el: e, duration: t }) {
-	let n = document.createElement("div"), r = Math.max(e.clientWidth, e.clientHeight), i = r / 2;
-	n.style.width = n.style.height = `${r}px`, n.style.left = `${Math.round(e.clientWidth / 2 - i)}px`, n.style.top = `${Math.round(e.clientHeight / 2 - i)}px`, n.classList.add("ui3n-ripple"), x && n.style.setProperty("--ui3n-ripple-bg-color", x), t && n.style.setProperty("--ui3n-ripple-duration", `${t}ms`);
-	let a = e.getElementsByClassName("ui3n-ripple")[0];
-	a && a.remove(), e.appendChild(n);
-}
-function C({ eventName: e, el: t, duration: n }) {
-	["click", "keydown"].includes(e) && (b[e] = new AbortController(), t.addEventListener(e, function() {
-		S({
-			el: t,
-			duration: n
-		});
-	}, { signal: b[e].signal }));
-}
-var w = {
-	mounted(e, t) {
-		let { color: n, duration: r, eventsTriggers: i = [], disabled: a = !1 } = t.value || {};
-		x = n || "", !a && ((!i.length || i.length && i.includes("click")) && C({
-			eventName: "click",
-			el: e,
-			duration: r
-		}), i.length && i.includes("enter") && C({
-			eventName: "keydown",
-			el: e,
-			duration: r
-		}));
-	},
-	beforeUnmount() {
-		Object.keys(b).forEach((e) => {
-			b[e].abort();
-		});
-	}
-}, T = ["id", "title"], E = /* @__PURE__ */ o({
-	__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(t, { emit: n }) {
-		let i = t, a = n, o = e(() => i.size || i.width || 16), c = e(() => i.size || i.height || 16), l = e(() => {
-			let e = {
-				"--ui3n-icon-width": u(o.value),
-				"--ui3n-icon-height": u(c.value),
-				"--ui3n-icon-color": i.color
-			}, t = [];
-			return i.horizontalFlip && t.push("rotateY(180deg)"), i.verticalFlip && t.push("rotateX(180deg)"), i.rotate && t.push(`rotate(${i.rotate}deg)`), t.length && (e.transform = t.join(" ")), e;
-		});
-		function u(e) {
-			return isNaN(Number(e)) ? String(e) : `${e}px`;
-		}
-		return (e, n) => (d(), r("div", s({
-			id: t.id,
-			class: e.$style.ui3nIcon,
-			title: t.title,
-			style: l.value
-		}, { "data-icon": t.icon }, { onClick: n[0] ||= (e) => a("click", e) }), null, 16, T));
-	}
-}), D = { ui3nIcon: "_ui3nIcon_10yhz_1" }, O = (e, t) => {
-	let n = e.__vccOpts || e;
-	for (let [e, r] of t) n[e] = r;
-	return n;
-}, k = /* @__PURE__ */ O(E, [["__cssModules", { $style: D }]]), A = {
-	small: 12,
-	regular: 16,
-	large: 24
-}, j = ["id", "disabled"], M = /* @__PURE__ */ O(/* @__PURE__ */ o({
-	__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(i, { emit: a }) {
-		let o = w, s = i, l = a, m = g(), b = f(null), x = e(() => {
-			let e = [
-				m.ui3nButton,
-				m[s.size],
-				m[s.type]
-			];
-			return s.block && s.type !== "icon" && e.push(m.block), s.square && e.push(m.square), s.icon && e.push(m[`withIcon-${s.iconPosition}`]), s.elevation && e.push(m.elevation), e;
-		}), S = e(() => s.iconSize ? s.iconSize : A[s.size]), C = e(() => s.iconColor ? s.iconColor : "inherit");
-		async function T(e, t) {
-			["init", "enter"].includes(e) ? l(e, b.value) : l(e, t);
-		}
-		return _([() => s.color, () => s.textColor], (e, t) => {
-			if (!b.value) return;
-			let [n, r] = t, [i, a] = e;
-			(s.type === "custom" || s.type === "icon") && i !== n && b.value.style.setProperty("--ui3n-button-bg-color", i ?? "var(--color-bg-button-primary-default)"), (s.type === "custom" || s.type === "icon") && a !== r && b.value.style.setProperty("--ui3n-button-text-color", a ?? "var(--color-text-button-primary-default)");
-		}), u(() => {
-			b.value && ((s.type === "custom" || s.type === "icon") && s.color && b.value.style.setProperty("--ui3n-button-bg-color", s.color), s.type === "custom" && s.textColor && b.value.style.setProperty("--ui3n-button-text-color", s.textColor), T("init"));
-		}), (e, a) => v((d(), r("button", {
-			ref_key: "buttonEl",
-			ref: b,
-			id: i.id,
-			class: c(x.value),
-			type: "button",
-			disabled: i.disabled,
-			onClick: a[0] ||= (e) => T("click", e),
-			onFocusin: a[1] ||= (e) => T("focus", e),
-			onFocusout: a[2] ||= (e) => T("blur", e),
-			onKeydown: a[3] ||= y((e) => T("enter"), ["enter"])
-		}, [i.icon ? (d(), t(k, {
-			key: 0,
-			class: c(e.$style.buttonIcon),
-			icon: i.icon,
-			size: S.value,
-			color: C.value
-		}, null, 8, [
-			"class",
-			"icon",
-			"size",
-			"color"
-		])) : n("", !0), i.type === "icon" ? n("", !0) : (d(), r("span", {
-			key: 1,
-			class: c(e.$style.text)
-		}, [p(e.$slots, "default")], 2))], 42, j)), [[h(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"
-} }]]), N = ["id"], P = /* @__PURE__ */ O(/* @__PURE__ */ o({
-	__name: "ui3n-notification",
-	props: {
-		id: {},
-		type: { default: "info" },
-		content: {},
-		position: { default: "center" },
-		duration: { default: 0 },
-		withIcon: {
-			type: Boolean,
-			default: !0
-		},
-		onOpen: {
-			type: Function,
-			default: () => {}
-		},
-		onClose: {
-			type: Function,
-			default: () => {}
-		}
-	},
-	setup(o) {
-		let s = o, f = null, p = g(), _ = e(() => ({
-			success: {
-				color: "var(--success-content-default)",
-				icon: "round-check-circle",
-				iconColor: "var(--success-fill-default)",
-				iconRotate: 0
-			},
-			warning: {
-				color: "var(--warning-content-default)",
-				icon: "round-warning",
-				iconColor: "var(--warning-fill-default)",
-				iconRotate: 0
-			},
-			info: {
-				color: "var(--info-content-default)",
-				icon: "round-info",
-				iconColor: "var(--info-fill-default)",
-				iconRotate: 180
-			},
-			error: {
-				color: "var(--error-content-default)",
-				icon: "round-info",
-				iconColor: "var(--error-fill-default)",
-				iconRotate: 180
-			}
-		})[s.type || "info"]), v = e(() => {
-			let e = [
-				p.ui3nNotification,
-				p[`${s.type}Type`],
-				p[`${s.position}Position`]
-			];
-			return s.withIcon && e.push(p.withIcon), e;
-		});
-		function y() {
-			s.onClose && s.onClose();
-		}
-		return u(() => {
-			s.onOpen && s.onOpen(), s.duration > 0 && (f = setTimeout(() => {
-				y();
-			}, s.duration));
-		}), l(() => {
-			f && clearTimeout(f);
-		}), (e, s) => (d(), r("div", {
-			id: o.id,
-			class: c(v.value)
-		}, [
-			o.withIcon ? (d(), r("div", {
-				key: 0,
-				class: c(h(p).ui3nNotificationIcon)
-			}, [a(k, {
-				icon: _.value.icon,
-				size: "16",
-				rotate: _.value.iconRotate,
-				color: _.value.iconColor
-			}, null, 8, [
-				"icon",
-				"rotate",
-				"color"
-			])], 2)) : n("", !0),
-			i("div", { class: c(h(p).ui3nNotificationContent) }, m(o.content), 3),
-			o.duration ? n("", !0) : (d(), t(M, {
-				key: 1,
-				type: "icon",
-				size: "small",
-				color: "transparent",
-				icon: "round-close",
-				"icon-color": _.value.color,
-				"icon-size": "16",
-				class: c(h(p).closeBtn),
-				onClick: y
-			}, null, 8, ["icon-color", "class"]))
-		], 10, N));
-	}
-}), [["__cssModules", { $style: {
-	ui3nNotification: "_ui3nNotification_1iczq_1",
-	withIcon: "_withIcon_1iczq_21",
-	ui3nNotificationIcon: "_ui3nNotificationIcon_1iczq_25",
-	ui3nNotificationContent: "_ui3nNotificationContent_1iczq_38",
-	closeBtn: "_closeBtn_1iczq_47",
-	infoType: "_infoType_1iczq_54",
-	successType: "_successType_1iczq_64",
-	warningType: "_warningType_1iczq_74",
-	errorType: "_errorType_1iczq_84",
-	leftPosition: "_leftPosition_1iczq_94",
-	centerPosition: "_centerPosition_1iczq_99",
-	rightPosition: "_rightPosition_1iczq_104"
-} }]]);
-//#endregion
-export { w as a, O as i, M as n, k as r, P as t };