@v1nt1248/3nclient-lib 0.3.51 → 0.4.0

package/README.md

@@ -120,6 +120,8 @@ import '@v1nt1248/3nclient-lib/style.css';
 
 `variables.css` contains design tokens only (palette, theme semantics, `--color-*` mapping). Light tokens and the color mapping are applied on `:root`, so `<html>` classes are **not** required for the default (light) look.
 
+Every component also has CSS variables of its own, which you can set on `:root`, on a container or on the element through its `data-ui3n` attribute. See [Styling](docs/guide/styling.md) for how they work, and a component's documentation page for the ones it has.
+
 `.default-theme` is a deprecated alias of `.light-theme`.
 
 To start with another theme or switch at runtime:

package/dist/chunks/{ui3n-notification-o0tuhTpO.js → ui3n-notification-CTYQV3nR.js}

@@ -39,19 +39,17 @@ var T = {
 		size: {},
 		width: {},
 		height: {},
-		color: { default: "var(--color-icon-control-primary-default)" },
+		color: {},
 		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 = [];
+		let r = e, a = n, o = t(() => r.size || r.width), s = t(() => r.size || r.height), l = t(() => {
+			let e = {};
+			o.value !== void 0 && (e["--ui3n-icon-width"] = u(o.value)), s.value !== void 0 && (e["--ui3n-icon-height"] = u(s.value)), r.color && (e["--ui3n-icon-color"] = r.color);
+			let 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) {
@@ -59,12 +57,13 @@ var T = {
 		}
 		return (t, n) => (p(), i("div", c({
 			id: e.id,
+			"data-ui3n": "icon",
 			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) => {
+}), O = { ui3nIcon: "_ui3nIcon_pfn1q_1" }, k = (e, t) => {
 	let n = e.__vccOpts || e;
 	for (let [e, r] of t) n[e] = r;
 	return n;
@@ -121,6 +120,7 @@ var T = {
 			ref_key: "buttonEl",
 			ref: d,
 			id: e.id,
+			"data-ui3n": "button",
 			class: l(g.value),
 			type: "button",
 			disabled: e.disabled,
@@ -145,23 +145,23 @@ var T = {
 		}, [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"
+	ui3nButton: "_ui3nButton_1y5ej_3",
+	"withIcon-left": "_withIcon-left_1y5ej_43",
+	"withIcon-right": "_withIcon-right_1y5ej_46",
+	square: "_square_1y5ej_49",
+	regular: "_regular_1y5ej_57",
+	small: "_small_1y5ej_67",
+	large: "_large_1y5ej_77",
+	block: "_block_1y5ej_87",
+	primary: "_primary_1y5ej_91",
+	elevation: "_elevation_1y5ej_117",
+	text: "_text_1y5ej_122",
+	secondary: "_secondary_1y5ej_160",
+	tertiary: "_tertiary_1y5ej_232",
+	outline: "_outline_1y5ej_302",
+	icon: "_icon_1y5ej_340",
+	custom: "_custom_1y5ej_360",
+	buttonIcon: "_buttonIcon_1y5ej_392"
 } }]]), P = ["id"], F = /* @__PURE__ */ k(/* @__PURE__ */ s({
 	__name: "ui3n-notification",
 	props: {
@@ -225,6 +225,7 @@ var T = {
 			m && clearTimeout(m);
 		}), (e, t) => (p(), i("div", {
 			id: s.id,
+			"data-ui3n": "notification",
 			class: l(b.value),
 			style: u(x.value)
 		}, [
@@ -255,18 +256,18 @@ var T = {
 		], 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"
+	ui3nNotification: "_ui3nNotification_152ae_1",
+	withIcon: "_withIcon_152ae_24",
+	ui3nNotificationIcon: "_ui3nNotificationIcon_152ae_28",
+	ui3nNotificationContent: "_ui3nNotificationContent_152ae_41",
+	closeBtn: "_closeBtn_152ae_51",
+	infoType: "_infoType_152ae_59",
+	successType: "_successType_152ae_70",
+	warningType: "_warningType_152ae_81",
+	errorType: "_errorType_152ae_92",
+	leftPosition: "_leftPosition_152ae_103",
+	centerPosition: "_centerPosition_152ae_108",
+	rightPosition: "_rightPosition_152ae_113"
 } }]]);
 //#endregion
 export { T as a, k as i, N as n, A as r, F as t };

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

@@ -13,14 +13,9 @@ declare const __VLS_component: import('vue').DefineComponent<Ui3nChipProps, {},
     onClick?: ((value: MouseEvent) => any) | undefined;
     onClose?: (() => any) | undefined;
 }>, {
-    height: number | string;
-    color: string;
-    textColor: string;
-    maxWidth: number | string;
     plain: boolean;
     round: boolean;
     closeable: boolean;
-    textSize: number | string;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;

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

@@ -5,7 +5,6 @@ declare const _default: import('vue').DefineComponent<Ui3nIconProps, {}, {}, {},
     onClick?: ((value: MouseEvent) => any) | undefined;
 }>, {
     title: string;
-    color: string;
     rotate: number;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
 export default _default;

package/dist/src/components/ui3n-progress/ui3n-progress-circular.d.ts

@@ -1,9 +1,7 @@
 import { Ui3nProgressCircularProps } from './types';
 declare const _default: import('vue').DefineComponent<Ui3nProgressCircularProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Ui3nProgressCircularProps> & Readonly<{}>, {
     size: number | string;
-    color: string;
     value: number | string;
-    bgColor: string;
     indeterminate: boolean;
     withText: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;

package/dist/src/components/ui3n-progress/ui3n-progress-linear.d.ts

@@ -1,9 +1,7 @@
 import { Ui3nProgressLinearProps } from './types';
 declare const _default: import('vue').DefineComponent<Ui3nProgressLinearProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Ui3nProgressLinearProps> & Readonly<{}>, {
     height: number | string;
-    color: string;
     value: number | string;
-    bgColor: string;
     indeterminate: boolean;
     withText: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;

package/dist/src/components/ui3n-scrollbar-horizontal/ui3n-scrollbar-horizontal.d.ts

@@ -18,13 +18,6 @@ declare const __VLS_component: import('vue').DefineComponent<Ui3nScrollbarHorizo
 }, string, import('vue').PublicProps, Readonly<Ui3nScrollbarHorizontalProps> & Readonly<{
     onScroll?: ((value: Event) => any) | undefined;
 }>, {
-    thumbRadius: number | string;
-    thumbColor: string;
-    thumbHoverColor: string;
-    thumbActiveColor: string;
-    trackRadius: number | string;
-    trackColor: string;
-    trackHeight: number | string;
     thumbMinWidth: number | string;
     thumbWidth: number | string | "auto";
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {

package/dist/src/components/ui3n-scrollbar-vertical/ui3n-scrollbar-vertical.d.ts

@@ -22,13 +22,6 @@ declare const __VLS_component: import('vue').DefineComponent<Ui3nScrollbarVertic
     autoUpdate: boolean;
     thumbMinHeight: number | string;
     thumbHeight: number | string | "auto";
-    thumbRadius: number | string;
-    thumbColor: string;
-    thumbHoverColor: string;
-    thumbActiveColor: string;
-    trackWidth: number;
-    trackRadius: number | string;
-    trackColor: string;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
     containerRef: HTMLDivElement;
     trackRef: HTMLDivElement;

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

@@ -7,16 +7,11 @@ declare const _default: import('vue').DefineComponent<UI3nSliderProps, {
     "onUpdate:modelValue"?: ((value: number | [number, number]) => any) | undefined;
 }>, {
     name: string;
-    activeColor: string;
-    thumbColor: string;
-    trackColor: string;
     min: string | number;
     max: string | number;
     labelVisible: "always" | "normal" | "never";
     labelTextColor: string;
     labelColor: string;
-    trackHeight: string | number;
-    thumbSize: string | number;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
     sliderEl: HTMLDivElement;
     pointerEl1: HTMLDivElement;

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

@@ -15,10 +15,6 @@ declare const __VLS_component: import('vue').DefineComponent<Ui3nTabsProps, {},
 }>, {
     modelValue: number;
     itemDirection: "horizontal" | "vertical";
-    activeColor: string;
-    inactiveColor: string;
-    indicatorColor: string;
-    indicatorSize: number | string;
     indicatorPosition: "normal" | "reverse";
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
     tabs: HTMLDivElement;

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

@@ -23,14 +23,11 @@ declare const __VLS_component: import('vue').DefineComponent<Ui3nTooltipProps, {
     onOpened?: (() => any) | undefined;
     onClosed?: (() => any) | undefined;
 }>, {
-    color: string;
     disabled: boolean;
     offsetX: string | number;
     offsetY: string | number;
-    textColor: string;
     positionStrategy: "absolute" | "fixed";
     placement: import('./types').Ui3nTooltipPlacement;
-    maxContentWidth: number | string;
     trigger: "click" | "hover" | "manual";
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
     referenceContainer: HTMLDivElement;