@v1nt1248/3nclient-lib 0.3.25 → 0.3.28

package/dist/chunks/ui3n-notification-DlDM-u-R.js

@@ -0,0 +1,276 @@
+import { computed as e, createBlock as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, createVNode as a, defineComponent as o, normalizeClass as s, normalizeStyle as c, onMounted as l, openBlock as u, ref as d, renderSlot as f, toDisplayString as p, unref as m, useCssModule as h, useCssVars 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 = ["data-icon", "title"], E = /* @__PURE__ */ o({
+	__name: "ui3n-icon",
+	props: {
+		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 }) {
+		g((e) => ({
+			v170e4988: e.color,
+			v4efed7e4: d.value,
+			v33baaab5: f.value
+		}));
+		let i = t, a = n, o = e(() => i.size || i.width || 16), l = e(() => i.size || i.height || 16), d = e(() => `${o.value}px`), f = e(() => `${l.value}px`), p = e(() => {
+			let e = {}, 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 m(e) {
+			a("click", e);
+		}
+		return (e, n) => (u(), r("div", {
+			class: s(e.$style.ui3nIcon),
+			"data-icon": t.icon,
+			title: t.title,
+			style: c(p.value),
+			onClick: m
+		}, null, 14, T));
+	}
+}), D = { ui3nIcon: "_ui3nIcon_zqqfa_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 = ["disabled"], M = /* @__PURE__ */ O(/* @__PURE__ */ o({
+	__name: "ui3n-button",
+	props: {
+		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, c = i, p = a, g = h(), b = d(null), x = e(() => {
+			let e = [
+				g.ui3nButton,
+				g[c.size],
+				g[c.type]
+			];
+			return c.block && c.type !== "icon" && e.push(g.block), c.square && e.push(g.square), c.icon && e.push(g[`withIcon-${c.iconPosition}`]), c.elevation && e.push(g.elevation), e;
+		}), S = e(() => c.iconSize ? c.iconSize : A[c.size]), C = e(() => c.iconColor ? c.iconColor : "inherit");
+		async function T(e, t) {
+			["init", "enter"].includes(e) ? p(e, b.value) : p(e, t);
+		}
+		return _([() => c.color, () => c.textColor], (e, t) => {
+			if (!b.value) return;
+			let [n, r] = t, [i, a] = e;
+			(c.type === "custom" || c.type === "icon") && i !== n && b.value.style.setProperty("--ui3n-button-bg-color", i ?? "var(--color-bg-button-primary-default)"), (c.type === "custom" || c.type === "icon") && a !== r && b.value.style.setProperty("--ui3n-button-text-color", a ?? "var(--color-text-button-primary-default)");
+		}), l(() => {
+			b.value && ((c.type === "custom" || c.type === "icon") && c.color && b.value.style.setProperty("--ui3n-button-bg-color", c.color), c.type === "custom" && c.textColor && b.value.style.setProperty("--ui3n-button-text-color", c.textColor), T("init"));
+		}), (e, a) => v((u(), r("button", {
+			ref_key: "buttonEl",
+			ref: b,
+			class: s(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 ? (u(), t(k, {
+			key: 0,
+			class: s(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) : (u(), r("span", {
+			key: 1,
+			class: s(e.$style.text)
+		}, [f(e.$slots, "default")], 2))], 42, j)), [[m(o)]]);
+	}
+}), [["__cssModules", { $style: {
+	ui3nButton: "_ui3nButton_ih1y4_3",
+	"withIcon-left": "_withIcon-left_ih1y4_31",
+	"withIcon-right": "_withIcon-right_ih1y4_34",
+	square: "_square_ih1y4_37",
+	regular: "_regular_ih1y4_44",
+	small: "_small_ih1y4_51",
+	large: "_large_ih1y4_58",
+	block: "_block_ih1y4_65",
+	primary: "_primary_ih1y4_69",
+	elevation: "_elevation_ih1y4_92",
+	text: "_text_ih1y4_97",
+	secondary: "_secondary_ih1y4_129",
+	tertiary: "_tertiary_ih1y4_183",
+	outline: "_outline_ih1y4_238",
+	icon: "_icon_ih1y4_266",
+	custom: "_custom_ih1y4_286",
+	buttonIcon: "_buttonIcon_ih1y4_315"
+} }]]), 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
+		},
+		teleport: {},
+		onOpen: {
+			type: Function,
+			default: () => void 0
+		},
+		onClose: {
+			type: Function,
+			default: () => void 0
+		}
+	},
+	setup(o) {
+		let c = o, d = {
+			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
+			}
+		}, f = h(), m = e(() => {
+			let e = [
+				f.ui3nNotification,
+				f[`${c.type}Type`],
+				f[`${c.position}Position`]
+			];
+			return c.withIcon && e.push(f.withIcon), e;
+		});
+		function g() {
+			c.onClose();
+		}
+		return l(() => {
+			c.duration > 500 && setTimeout(() => {
+				c.onClose();
+			}, c.duration);
+		}), (e, c) => (u(), r("div", {
+			id: o.id,
+			class: s(m.value)
+		}, [
+			o.withIcon ? (u(), r("div", {
+				key: 0,
+				class: s(e.$style.ui3nNotificationIcon)
+			}, [a(k, {
+				icon: d[o.type].icon,
+				width: "16",
+				height: "16",
+				rotate: d[o.type].iconRotate,
+				color: d[o.type].iconColor
+			}, null, 8, [
+				"icon",
+				"rotate",
+				"color"
+			])], 2)) : n("", !0),
+			i("div", { class: s(e.$style.ui3nNotificationContent) }, p(o.content), 3),
+			o.duration ? n("", !0) : (u(), t(M, {
+				key: 1,
+				type: "icon",
+				size: "small",
+				color: "transparent",
+				icon: "round-close",
+				"icon-color": d[o.type].color,
+				class: s(e.$style.closeBtn),
+				onClick: g
+			}, null, 8, ["icon-color", "class"]))
+		], 10, N));
+	}
+}), [["__cssModules", { $style: {
+	ui3nNotification: "_ui3nNotification_1tbbz_1",
+	withIcon: "_withIcon_1tbbz_16",
+	ui3nNotificationIcon: "_ui3nNotificationIcon_1tbbz_20",
+	ui3nNotificationContent: "_ui3nNotificationContent_1tbbz_32",
+	closeBtn: "_closeBtn_1tbbz_40",
+	infoType: "_infoType_1tbbz_47",
+	successType: "_successType_1tbbz_57",
+	warningType: "_warningType_1tbbz_67",
+	errorType: "_errorType_1tbbz_77",
+	leftPosition: "_leftPosition_1tbbz_87",
+	centerPosition: "_centerPosition_1tbbz_92",
+	rightPosition: "_rightPosition_1tbbz_97"
+} }]]);
+//#endregion
+export { w as a, O as i, M as n, k as r, P as t };

package/dist/components/index.d.ts

@@ -1,63 +1,67 @@
-import { default as Ui3nIcon } from './ui3n-icon/ui3n-icon.vue';
+import { default as Ui3nIcon } from './ui3n-icon/ui3n-icon';
 import { Ui3nIconProps, Ui3nIconEmits } from './ui3n-icon/types';
-import { default as Ui3nButton } from './ui3n-button/ui3n-button.vue';
+import { default as Ui3nButton } from './ui3n-button/ui3n-button';
 import { Ui3nButtonProps, Ui3nButtonEmits } from './ui3n-button/types';
-import { default as Ui3nChip } from './ui3n-chip/ui3n-chip.vue';
+import { default as Ui3nChip } from './ui3n-chip/ui3n-chip';
 import { Ui3nChipProps, Ui3nChipEmits, Ui3nChipSlots } from './ui3n-chip/types';
-import { default as Ui3nDropFiles } from './ui3n-drop-files/ui3n-drop-files.vue';
+import { default as Ui3nDropFiles } from './ui3n-drop-files/ui3n-drop-files';
 import { Ui3nDropFilesProps, Ui3nDropFilesEmits, Ui3nDropFilesSlots } from './ui3n-drop-files/types';
-import { default as Ui3nEmoji } from './ui3n-emoji/ui3n-emoji.vue';
+import { default as Ui3nEmoji } from './ui3n-emoji/ui3n-emoji';
 import { Ui3nEmojiProps, Ui3nEmojiEmits } from './ui3n-emoji/types';
-import { default as Ui3nInput } from './ui3n-input/ui3n-input.vue';
+import { default as Ui3nInput } from './ui3n-input/ui3n-input';
 import { Ui3nInputProps, Ui3nInputEmits, Ui3nInputSlots, Ui3nInputExpose } from './ui3n-input/types';
-import { default as Ui3nInputFile } from './ui3n-input-file/ui3n-input-file.vue';
+import { default as Ui3nInputFile } from './ui3n-input-file/ui3n-input-file';
 import { Ui3nInputFileProps, Ui3nInputFileEmits } from './ui3n-input-file/types';
-import { default as Ui3nText } from './ui3n-text/ui3n-text.vue';
+import { default as Ui3nText } from './ui3n-text/ui3n-text';
 import { Ui3nTextProps, Ui3nTextEmits } from './ui3n-text/types';
-import { default as Ui3nCheckbox } from './ui3n-checkbox/ui3n-checkbox.vue';
+import { default as Ui3nCheckbox } from './ui3n-checkbox/ui3n-checkbox';
 import { Ui3nCheckboxProps, Ui3nCheckboxEmits, Ui3nCheckboxSlots, Ui3nCheckboxValue } from './ui3n-checkbox/types';
-import { default as Ui3nNotification } from './ui3n-notification/ui3n-notification.vue';
-import { default as Ui3nTableSortIcon } from './ui3n-table/ui3n-table-sort-icon.vue';
-import { default as Ui3nTable } from './ui3n-table/ui3n-table.vue';
+import { default as Ui3nNotification } from './ui3n-notification/ui3n-notification';
+import { default as Ui3nTableSortIcon } from './ui3n-table/ui3n-table-sort-icon';
+import { default as Ui3nTable } from './ui3n-table/ui3n-table';
 import { Ui3nTableSortIconProps, Ui3nTableSort, Ui3nTableConfig, Ui3nTableHeadProps, Ui3nTableBodyProps, Ui3nTableGroupActionsSlot, Ui3nTableHeaderCellSlot, Ui3nTableBodyRowSlotScope, Ui3nTableBodyRowSlot, Ui3nTableBodyRowCellSlotScope, Ui3nTableBodyRowCellSlot, Ui3nTableSlots, Ui3nTableProps, Ui3nTableEmits, Ui3nTableExpose } from './ui3n-table/types';
-import { default as Ui3nDialogProvider } from './ui3n-dialog/ui3n-dialog-provider.vue';
-import { default as Ui3nDialog } from './ui3n-dialog/ui3n-dialog.vue';
+import { default as Ui3nDialogProvider } from './ui3n-dialog/ui3n-dialog-provider';
+import { default as Ui3nDialog } from './ui3n-dialog/ui3n-dialog';
 import { Ui3nDialogComponentProps, Ui3nDialogComponentEmits, Ui3nDialogComponentSlots, Ui3nDialogEvent } from './ui3n-dialog/types';
-import { default as Ui3nMenu } from './ui3n-menu/ui3n-menu.vue';
+import { default as Ui3nMenu } from './ui3n-menu/ui3n-menu';
 import { Ui3nMenuProps, Ui3nMenuEmits, Ui3nMenuSlots } from './ui3n-menu/types';
-import { default as Ui3nList } from './ui3n-list/ui3n-list.vue';
+import { default as Ui3nList } from './ui3n-list/ui3n-list';
 import { Ui3nListProps, Ui3nListEmits, Ui3nListSlots } from './ui3n-list/types';
-import { default as Ui3nVirtualScroll } from './ui3n-virtual-scroll/ui3n-virtual-scroll.vue';
+import { default as Ui3nVirtualScroll } from './ui3n-virtual-scroll/ui3n-virtual-scroll';
 import { Ui3nVirtualScrollProps, Ui3nVirtualScrollSlots } from './ui3n-virtual-scroll/types';
-import { default as Ui3nTabs } from './ui3n-tabs/ui3n-tabs.vue';
+import { default as Ui3nTabs } from './ui3n-tabs/ui3n-tabs';
 import { Ui3nTabsProps, Ui3nTabsEmits, Ui3nTabsSlots } from './ui3n-tabs/types';
-import { default as Ui3nBadge } from './ui3n-badge/ui3n-badge.vue';
+import { default as Ui3nBadge } from './ui3n-badge/ui3n-badge';
 import { Ui3nBadgeProps } from './ui3n-badge/types';
-import { default as Ui3nBreadcrumb } from './ui3n-breadcrumbs/ui3n-breadcrumb.vue';
-import { default as Ui3nBreadcrumbs } from './ui3n-breadcrumbs/ui3n-breadcrumbs.vue';
+import { default as Ui3nBreadcrumb } from './ui3n-breadcrumbs/ui3n-breadcrumb';
+import { default as Ui3nBreadcrumbs } from './ui3n-breadcrumbs/ui3n-breadcrumbs';
 import { Ui3nBreadcrumbProps, Ui3nBreadcrumbEmits, Ui3nBreadcrumbSlots, Ui3nBreadcrumbsProps } from './ui3n-breadcrumbs/types';
-import { default as Ui3nSwitch } from './ui3n-switch/ui3n-switch.vue';
+import { default as Ui3nSwitch } from './ui3n-switch/ui3n-switch';
 import { Ui3nSwitchProps, Ui3nSwitchEmits, Ui3nSwitchSlots } from './ui3n-switch/types';
-import { default as Ui3nStepLineBar } from './ui3n-step-line-bar/ui3n-step-line-bar.vue';
+import { default as Ui3nStepLineBar } from './ui3n-step-line-bar/ui3n-step-line-bar';
 import { Ui3nStepLineBarProps } from './ui3n-step-line-bar/types';
-import { default as Ui3nProgressLinear } from './ui3n-progress/ui3n-progress-linear.vue';
-import { default as Ui3nProgressCircular } from './ui3n-progress/ui3n-progress-circular.vue';
+import { default as Ui3nProgressLinear } from './ui3n-progress/ui3n-progress-linear';
+import { default as Ui3nProgressCircular } from './ui3n-progress/ui3n-progress-circular';
 import { Ui3nProgressCircularProps, Ui3nProgressLinearProps } from './ui3n-progress/types';
-import { default as Ui3nTooltip } from './ui3n-tooltip/ui3n-tooltip.vue';
+import { default as Ui3nTooltip } from './ui3n-tooltip/ui3n-tooltip';
 import { Ui3nTooltipEmits, Ui3nTooltipProps, Ui3nTooltipSlots, Ui3nTooltipPlacement } from './ui3n-tooltip/types';
-import { default as Ui3nRadio } from './ui3n-radio-group/ui3n-radio.vue';
-import { default as Ui3nRadioGroup } from './ui3n-radio-group/ui3n-radio-group.vue';
+import { default as Ui3nRadio } from './ui3n-radio-group/ui3n-radio';
+import { default as Ui3nRadioGroup } from './ui3n-radio-group/ui3n-radio-group';
 import { Ui3nRadioEmits, Ui3nRadioProps, Ui3nRadioSlots, Ui3nRadioGroupEmits, Ui3nRadioGroupProps, Ui3nRadioGroupSlots, Ui3nRadioValue } from './ui3n-radio-group/types';
-import { default as Ui3nEditable } from './ui3n-editable/ui3n-editable.vue';
+import { default as Ui3nEditable } from './ui3n-editable/ui3n-editable';
 import { Ui3nEditableProps, Ui3nEditableEmits } from './ui3n-editable/types';
-import { default as Ui3nAutocomplete } from './ui3n-autocomplete/ui3n-autocomplete.vue';
+import { default as Ui3nAutocomplete } from './ui3n-autocomplete/ui3n-autocomplete';
 import { Ui3nAutocompleteProps, Ui3nAutocompleteEmits, Ui3nAutocompleteSlots, Ui3nAutocompleteOptionBase } from './ui3n-autocomplete/types';
-import { default as Ui3nSlider } from './ui3n-slider/ui3n-slider.vue';
+import { default as Ui3nSlider } from './ui3n-slider/ui3n-slider';
 import { UI3nSliderProps, UI3nSliderEmits } from './ui3n-slider/types';
-import { default as Ui3nSelector } from './ui3n-selector/ui3n-selector.vue';
+import { default as Ui3nSelector } from './ui3n-selector/ui3n-selector';
 import { Ui3nSelectorOptionBase, Ui3nSelectorProps, Ui3nSelectorEmits, Ui3nSelectorSlots, Ui3nSelectorItemDisplayingFunction } from './ui3n-selector/types';
-import { default as Ui3nMobileMenu } from './ui3n-mobile-menu/ui3n-mobile-menu.vue';
+import { default as Ui3nMobileMenu } from './ui3n-mobile-menu/ui3n-mobile-menu';
 import { Ui3nMobileMenuProps, Ui3nMobileMenuEmits, Ui3nMobileMenuSlots } from './ui3n-mobile-menu/types';
-import { default as Ui3nMobileMenuItem } from './ui3n-mobile-menu-item/ui3n-mobile-menu-item.vue';
+import { default as Ui3nMobileMenuItem } from './ui3n-mobile-menu-item/ui3n-mobile-menu-item';
 import { Ui3nMobileMenuItemBase, Ui3nMobileMenuItemProps, Ui3nMobileMenuItemEmits } from './ui3n-mobile-menu-item/types';
-export { Ui3nIcon, Ui3nIconProps, Ui3nIconEmits, Ui3nButton, Ui3nButtonProps, Ui3nButtonEmits, Ui3nChip, Ui3nChipProps, Ui3nChipEmits, Ui3nChipSlots, Ui3nDropFiles, Ui3nDropFilesProps, Ui3nDropFilesEmits, Ui3nDropFilesSlots, Ui3nEmoji, Ui3nEmojiProps, Ui3nEmojiEmits, Ui3nInput, Ui3nInputProps, Ui3nInputEmits, Ui3nInputSlots, Ui3nInputExpose, Ui3nInputFile, Ui3nInputFileProps, Ui3nInputFileEmits, Ui3nText, Ui3nTextProps, Ui3nTextEmits, Ui3nCheckbox, Ui3nCheckboxProps, Ui3nCheckboxEmits, Ui3nCheckboxSlots, Ui3nCheckboxValue, Ui3nNotification, Ui3nTableSortIcon, Ui3nTableSortIconProps, Ui3nTable, Ui3nTableSort, Ui3nTableConfig, Ui3nTableHeadProps, Ui3nTableBodyProps, Ui3nTableGroupActionsSlot, Ui3nTableHeaderCellSlot, Ui3nTableBodyRowSlotScope, Ui3nTableBodyRowSlot, Ui3nTableBodyRowCellSlotScope, Ui3nTableBodyRowCellSlot, Ui3nTableSlots, Ui3nTableProps, Ui3nTableEmits, Ui3nTableExpose, Ui3nDialogProvider, Ui3nDialog, Ui3nDialogComponentProps, Ui3nDialogComponentEmits, Ui3nDialogComponentSlots, Ui3nDialogEvent, Ui3nMenu, Ui3nMenuProps, Ui3nMenuEmits, Ui3nMenuSlots, Ui3nList, Ui3nListProps, Ui3nListEmits, Ui3nListSlots, Ui3nVirtualScroll, Ui3nVirtualScrollProps, Ui3nVirtualScrollSlots, Ui3nTabs, Ui3nTabsProps, Ui3nTabsEmits, Ui3nTabsSlots, Ui3nBadge, Ui3nBadgeProps, Ui3nBreadcrumb, Ui3nBreadcrumbProps, Ui3nBreadcrumbEmits, Ui3nBreadcrumbSlots, Ui3nBreadcrumbs, Ui3nBreadcrumbsProps, Ui3nSwitch, Ui3nSwitchProps, Ui3nSwitchEmits, Ui3nSwitchSlots, Ui3nStepLineBar, Ui3nStepLineBarProps, Ui3nProgressLinear, Ui3nProgressLinearProps, Ui3nProgressCircular, Ui3nProgressCircularProps, Ui3nTooltip, Ui3nTooltipEmits, Ui3nTooltipProps, Ui3nTooltipSlots, Ui3nTooltipPlacement, Ui3nRadio, Ui3nRadioGroup, Ui3nRadioValue, Ui3nRadioEmits, Ui3nRadioProps, Ui3nRadioSlots, Ui3nRadioGroupEmits, Ui3nRadioGroupProps, Ui3nRadioGroupSlots, Ui3nEditable, Ui3nEditableProps, Ui3nEditableEmits, Ui3nAutocomplete, Ui3nAutocompleteProps, Ui3nAutocompleteEmits, Ui3nAutocompleteSlots, Ui3nAutocompleteOptionBase, Ui3nSlider, UI3nSliderProps, UI3nSliderEmits, Ui3nSelector, Ui3nSelectorProps, Ui3nSelectorEmits, Ui3nSelectorSlots, Ui3nSelectorOptionBase, Ui3nSelectorItemDisplayingFunction, Ui3nMobileMenu, Ui3nMobileMenuProps, Ui3nMobileMenuEmits, Ui3nMobileMenuSlots, Ui3nMobileMenuItem, Ui3nMobileMenuItemBase, Ui3nMobileMenuItemProps, Ui3nMobileMenuItemEmits, };
+import { default as Ui3nScrollbarVertical } from './ui3n-scrollbar-vertical/ui3n-scrollbar-vertical';
+import { Ui3nScrollbarVerticalProps, Ui3nScrollbarVerticalEmits, Ui3nScrollbarVerticalSlots, Ui3nScrollbarVerticalExpose } from './ui3n-scrollbar-vertical/types';
+import { default as Ui3nScrollbarHorizontal } from './ui3n-scrollbar-horizontal/ui3n-scroolbar-horizontal';
+import { Ui3nScrollbarHorizontalProps, Ui3nScrollbarHorizontalEmits, Ui3nScrollbarHorizontalSlots, Ui3nScrollbarHorizontalExpose } from './ui3n-scrollbar-horizontal/types';
+export { Ui3nIcon, Ui3nIconProps, Ui3nIconEmits, Ui3nButton, Ui3nButtonProps, Ui3nButtonEmits, Ui3nChip, Ui3nChipProps, Ui3nChipEmits, Ui3nChipSlots, Ui3nDropFiles, Ui3nDropFilesProps, Ui3nDropFilesEmits, Ui3nDropFilesSlots, Ui3nEmoji, Ui3nEmojiProps, Ui3nEmojiEmits, Ui3nInput, Ui3nInputProps, Ui3nInputEmits, Ui3nInputSlots, Ui3nInputExpose, Ui3nInputFile, Ui3nInputFileProps, Ui3nInputFileEmits, Ui3nText, Ui3nTextProps, Ui3nTextEmits, Ui3nCheckbox, Ui3nCheckboxProps, Ui3nCheckboxEmits, Ui3nCheckboxSlots, Ui3nCheckboxValue, Ui3nNotification, Ui3nTableSortIcon, Ui3nTableSortIconProps, Ui3nTable, Ui3nTableSort, Ui3nTableConfig, Ui3nTableHeadProps, Ui3nTableBodyProps, Ui3nTableGroupActionsSlot, Ui3nTableHeaderCellSlot, Ui3nTableBodyRowSlotScope, Ui3nTableBodyRowSlot, Ui3nTableBodyRowCellSlotScope, Ui3nTableBodyRowCellSlot, Ui3nTableSlots, Ui3nTableProps, Ui3nTableEmits, Ui3nTableExpose, Ui3nDialogProvider, Ui3nDialog, Ui3nDialogComponentProps, Ui3nDialogComponentEmits, Ui3nDialogComponentSlots, Ui3nDialogEvent, Ui3nMenu, Ui3nMenuProps, Ui3nMenuEmits, Ui3nMenuSlots, Ui3nList, Ui3nListProps, Ui3nListEmits, Ui3nListSlots, Ui3nVirtualScroll, Ui3nVirtualScrollProps, Ui3nVirtualScrollSlots, Ui3nTabs, Ui3nTabsProps, Ui3nTabsEmits, Ui3nTabsSlots, Ui3nBadge, Ui3nBadgeProps, Ui3nBreadcrumb, Ui3nBreadcrumbProps, Ui3nBreadcrumbEmits, Ui3nBreadcrumbSlots, Ui3nBreadcrumbs, Ui3nBreadcrumbsProps, Ui3nSwitch, Ui3nSwitchProps, Ui3nSwitchEmits, Ui3nSwitchSlots, Ui3nStepLineBar, Ui3nStepLineBarProps, Ui3nProgressLinear, Ui3nProgressLinearProps, Ui3nProgressCircular, Ui3nProgressCircularProps, Ui3nTooltip, Ui3nTooltipEmits, Ui3nTooltipProps, Ui3nTooltipSlots, Ui3nTooltipPlacement, Ui3nRadio, Ui3nRadioGroup, Ui3nRadioValue, Ui3nRadioEmits, Ui3nRadioProps, Ui3nRadioSlots, Ui3nRadioGroupEmits, Ui3nRadioGroupProps, Ui3nRadioGroupSlots, Ui3nEditable, Ui3nEditableProps, Ui3nEditableEmits, Ui3nAutocomplete, Ui3nAutocompleteProps, Ui3nAutocompleteEmits, Ui3nAutocompleteSlots, Ui3nAutocompleteOptionBase, Ui3nSlider, UI3nSliderProps, UI3nSliderEmits, Ui3nSelector, Ui3nSelectorProps, Ui3nSelectorEmits, Ui3nSelectorSlots, Ui3nSelectorOptionBase, Ui3nSelectorItemDisplayingFunction, Ui3nMobileMenu, Ui3nMobileMenuProps, Ui3nMobileMenuEmits, Ui3nMobileMenuSlots, Ui3nMobileMenuItem, Ui3nMobileMenuItemBase, Ui3nMobileMenuItemProps, Ui3nMobileMenuItemEmits, Ui3nScrollbarVertical, Ui3nScrollbarVerticalProps, Ui3nScrollbarVerticalEmits, Ui3nScrollbarVerticalSlots, Ui3nScrollbarVerticalExpose, Ui3nScrollbarHorizontal, Ui3nScrollbarHorizontalProps, Ui3nScrollbarHorizontalEmits, Ui3nScrollbarHorizontalSlots, Ui3nScrollbarHorizontalExpose, };

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

@@ -0,0 +1,22 @@
+import { VNode } from 'vue';
+export interface Ui3nScrollbarHorizontalProps {
+    thumbMinWidth?: number | string;
+    thumbWidth?: number | string | 'auto';
+    thumbRadius?: number | string;
+    thumbColor?: string;
+    thumbHoverColor?: string;
+    thumbActiveColor?: string;
+    trackHeight?: number | string;
+    trackRadius?: number | string;
+    trackColor?: string;
+}
+export interface Ui3nScrollbarHorizontalEmits {
+    (ev: 'scroll', value: Event): void;
+}
+export interface Ui3nScrollbarHorizontalSlots {
+    default: () => VNode;
+}
+export interface Ui3nScrollbarHorizontalExpose {
+    scrollTo(options: ScrollToOptions): void;
+    getContainer(): HTMLDivElement;
+}

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

@@ -0,0 +1,41 @@
+import { Ui3nScrollbarHorizontalProps, Ui3nScrollbarHorizontalSlots } from './types';
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: Readonly<Ui3nScrollbarHorizontalSlots> & Ui3nScrollbarHorizontalSlots;
+    refs: {
+        containerRef: HTMLDivElement;
+        trackRef: HTMLDivElement;
+        thumbRef: HTMLDivElement;
+    };
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<Ui3nScrollbarHorizontalProps, {
+    scrollTo(options: ScrollToOptions): void;
+    getContainer(): HTMLDivElement;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    scroll: (value: Event) => any;
+}, 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, {
+    containerRef: HTMLDivElement;
+    trackRef: HTMLDivElement;
+    thumbRef: HTMLDivElement;
+}, HTMLDivElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,34 @@
+import { VNode } from 'vue';
+/**
+ * ScrollbarVertical component properties
+ */
+export interface Ui3nScrollbarVerticalProps {
+    thumbMinHeight?: number | string;
+    thumbHeight?: number | string | 'auto';
+    thumbRadius?: number | string;
+    thumbColor?: string;
+    thumbHoverColor?: string;
+    thumbActiveColor?: string;
+    trackWidth?: number;
+    trackRadius?: number | string;
+    trackColor?: string;
+}
+/**
+ * ScrollbarVertical component emits
+ */
+export interface Ui3nScrollbarVerticalEmits {
+    (ev: 'scroll', value: Event): void;
+}
+/**
+ * ScrollbarVertical component slots
+ */
+export interface Ui3nScrollbarVerticalSlots {
+    /**
+     * Default slot
+     */
+    default: () => VNode;
+}
+export interface Ui3nScrollbarVerticalExpose {
+    scrollTo(options: ScrollToOptions): void;
+    getContainer(): HTMLDivElement;
+}

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

@@ -0,0 +1,41 @@
+import { Ui3nScrollbarVerticalProps, Ui3nScrollbarVerticalSlots } from './types';
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: Readonly<Ui3nScrollbarVerticalSlots> & Ui3nScrollbarVerticalSlots;
+    refs: {
+        containerRef: HTMLDivElement;
+        trackRef: HTMLDivElement;
+        thumbRef: HTMLDivElement;
+    };
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<Ui3nScrollbarVerticalProps, {
+    scrollTo(options: ScrollToOptions): void;
+    getContainer(): HTMLDivElement;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    scroll: (value: Event) => any;
+}, string, import('vue').PublicProps, Readonly<Ui3nScrollbarVerticalProps> & Readonly<{
+    onScroll?: ((value: Event) => any) | undefined;
+}>, {
+    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;
+    thumbRef: HTMLDivElement;
+}, HTMLDivElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/index.d.ts

@@ -1,38 +1,40 @@
 import { Component, Ref } from 'vue';
-import { default as Ui3nButton } from './components/ui3n-button/ui3n-button.vue';
-import { default as Ui3nChip } from './components/ui3n-chip/ui3n-chip.vue';
-import { default as Ui3nCheckbox } from './components/ui3n-checkbox/ui3n-checkbox.vue';
-import { default as Ui3nDialog } from './components/ui3n-dialog/ui3n-dialog.vue';
+import { default as Ui3nButton } from './components/ui3n-button/ui3n-button';
+import { default as Ui3nChip } from './components/ui3n-chip/ui3n-chip';
+import { default as Ui3nCheckbox } from './components/ui3n-checkbox/ui3n-checkbox';
+import { default as Ui3nDialog } from './components/ui3n-dialog/ui3n-dialog';
 import { Ui3nDialogEvent } from './components/ui3n-dialog/types';
-import { default as Ui3nDropFiles } from './components/ui3n-drop-files/ui3n-drop-files.vue';
-import { default as Ui3nEmoji } from './components/ui3n-emoji/ui3n-emoji.vue';
-import { default as Ui3nIcon } from './components/ui3n-icon/ui3n-icon.vue';
-import { default as Ui3nInput } from './components/ui3n-input/ui3n-input.vue';
-import { default as Ui3nInputFile } from './components/ui3n-input-file/ui3n-input-file.vue';
-import { default as Ui3nList } from './components/ui3n-list/ui3n-list.vue';
-import { default as Ui3nMenu } from './components/ui3n-menu/ui3n-menu.vue';
-import { default as Ui3nNotification } from './components/ui3n-notification/ui3n-notification.vue';
+import { default as Ui3nDropFiles } from './components/ui3n-drop-files/ui3n-drop-files';
+import { default as Ui3nEmoji } from './components/ui3n-emoji/ui3n-emoji';
+import { default as Ui3nIcon } from './components/ui3n-icon/ui3n-icon';
+import { default as Ui3nInput } from './components/ui3n-input/ui3n-input';
+import { default as Ui3nInputFile } from './components/ui3n-input-file/ui3n-input-file';
+import { default as Ui3nList } from './components/ui3n-list/ui3n-list';
+import { default as Ui3nMenu } from './components/ui3n-menu/ui3n-menu';
+import { default as Ui3nNotification } from './components/ui3n-notification/ui3n-notification';
 import { Ui3nNotificationProps } from './components/ui3n-notification/types';
-import { default as Ui3nTableSortIcon } from './components/ui3n-table/ui3n-table-sort-icon.vue';
-import { default as Ui3nTable } from './components/ui3n-table/ui3n-table.vue';
-import { default as Ui3nText } from './components/ui3n-text/ui3n-text.vue';
-import { default as Ui3nVirtualScroll } from './components/ui3n-virtual-scroll/ui3n-virtual-scroll.vue';
-import { default as Ui3nTabs } from './components/ui3n-tabs/ui3n-tabs.vue';
-import { default as Ui3nBadge } from './components/ui3n-badge/ui3n-badge.vue';
-import { default as Ui3nBreadcrumb } from './components/ui3n-breadcrumbs/ui3n-breadcrumb.vue';
-import { default as Ui3nBreadcrumbs } from './components/ui3n-breadcrumbs/ui3n-breadcrumbs.vue';
-import { default as Ui3nSwitch } from './components/ui3n-switch/ui3n-switch.vue';
-import { default as Ui3nStepLineBar } from './components/ui3n-step-line-bar/ui3n-step-line-bar.vue';
-import { default as Ui3nProgressLinear } from './components/ui3n-progress/ui3n-progress-linear.vue';
-import { default as Ui3nProgressCircular } from './components/ui3n-progress/ui3n-progress-circular.vue';
-import { default as Ui3nRadio } from './components/ui3n-radio-group/ui3n-radio.vue';
-import { default as Ui3nRadioGroup } from './components/ui3n-radio-group/ui3n-radio-group.vue';
-import { default as Ui3nEditable } from './components/ui3n-editable/ui3n-editable.vue';
-import { default as Ui3nAutocomplete } from './components/ui3n-autocomplete/ui3n-autocomplete.vue';
-import { default as Ui3nSlider } from './components/ui3n-slider/ui3n-slider.vue';
-import { default as Ui3nSelector } from './components/ui3n-selector/ui3n-selector.vue';
-import { default as Ui3nMobileMenu } from './components/ui3n-mobile-menu/ui3n-mobile-menu.vue';
-import { default as Ui3nMobileMenuItem } from './components/ui3n-mobile-menu-item/ui3n-mobile-menu-item.vue';
+import { default as Ui3nTableSortIcon } from './components/ui3n-table/ui3n-table-sort-icon';
+import { default as Ui3nTable } from './components/ui3n-table/ui3n-table';
+import { default as Ui3nText } from './components/ui3n-text/ui3n-text';
+import { default as Ui3nVirtualScroll } from './components/ui3n-virtual-scroll/ui3n-virtual-scroll';
+import { default as Ui3nTabs } from './components/ui3n-tabs/ui3n-tabs';
+import { default as Ui3nBadge } from './components/ui3n-badge/ui3n-badge';
+import { default as Ui3nBreadcrumb } from './components/ui3n-breadcrumbs/ui3n-breadcrumb';
+import { default as Ui3nBreadcrumbs } from './components/ui3n-breadcrumbs/ui3n-breadcrumbs';
+import { default as Ui3nSwitch } from './components/ui3n-switch/ui3n-switch';
+import { default as Ui3nStepLineBar } from './components/ui3n-step-line-bar/ui3n-step-line-bar';
+import { default as Ui3nProgressLinear } from './components/ui3n-progress/ui3n-progress-linear';
+import { default as Ui3nProgressCircular } from './components/ui3n-progress/ui3n-progress-circular';
+import { default as Ui3nRadio } from './components/ui3n-radio-group/ui3n-radio';
+import { default as Ui3nRadioGroup } from './components/ui3n-radio-group/ui3n-radio-group';
+import { default as Ui3nEditable } from './components/ui3n-editable/ui3n-editable';
+import { default as Ui3nAutocomplete } from './components/ui3n-autocomplete/ui3n-autocomplete';
+import { default as Ui3nSlider } from './components/ui3n-slider/ui3n-slider';
+import { default as Ui3nSelector } from './components/ui3n-selector/ui3n-selector';
+import { default as Ui3nMobileMenu } from './components/ui3n-mobile-menu/ui3n-mobile-menu';
+import { default as Ui3nMobileMenuItem } from './components/ui3n-mobile-menu-item/ui3n-mobile-menu-item';
+import { default as Ui3nScrollbarVertical } from './components/ui3n-scrollbar-vertical/ui3n-scrollbar-vertical';
+import { default as Ui3nScrollbarHorizontal } from './components/ui3n-scrollbar-horizontal/ui3n-scroolbar-horizontal';
 import { default as Ui3nHtml } from './directives/ui3n-html';
 import { default as Ui3nClickOutside } from './directives/ui3n-click-outside';
 import { default as Ui3nResize } from './directives/ui3n-resize';
@@ -40,7 +42,7 @@ import { default as Ui3nRipple } from './directives/ui3n-ripple';
 import { default as Ui3nTitle } from './directives/ui3n-title';
 import { default as Ui3nLongPress } from './directives/ui3n-long-press';
 import { VueEventBus } from './plugins/vue-bus/types';
-import { ExtractComponentProps } from './types';
+import { ExtractComponentProps } from './types/components.types';
 import { DialogOptions } from './plugins/dialogs/types';
 export * from './constants';
 export * from './utils';
@@ -96,6 +98,8 @@ declare module 'vue' {
         Ui3nVirtualScroll: typeof Ui3nVirtualScroll;
         Ui3nMobileMenu: typeof Ui3nMobileMenu;
         Ui3nMobileMenuMenuItem: typeof Ui3nMobileMenuItem;
+        Ui3nScrollbarVertical: typeof Ui3nScrollbarVertical;
+        Ui3nScrollbarHorizontal: typeof Ui3nScrollbarHorizontal;
     }
     interface GlobalDirectives {
         Ui3nHtml: typeof Ui3nHtml;