rappel-ui 1.0.31 → 1.0.33

package/es/components/button/src/button.vue_vue_type_script_setup_true_lang.mjs

@@ -1,16 +1,16 @@
 import { _buttonGroupProps as e, buttonSizes as t, buttonTypes as n } from "./constants.mjs";
 import { useNamespace as r } from "../../../composables/use-namespace/index.mjs";
 import "../../../composables/index.mjs";
-import { Fragment as i, computed as a, createBlock as o, createCommentVNode as s, createElementBlock as c, defineComponent as l, inject as u, mergeProps as d, normalizeClass as f, openBlock as p, renderSlot as m, resolveDynamicComponent as h, unref as g, useTemplateRef as _ } from "vue";
-import { computedAsync as v } from "@vueuse/core";
-import { Loading as y, getAsyncIcon as b } from "@rappel-ui/svg-icons";
+import { Fragment as i, computed as a, createBlock as o, createCommentVNode as s, createElementBlock as c, defineComponent as l, inject as u, normalizeClass as d, openBlock as f, renderSlot as p, resolveDynamicComponent as m, unref as h, useTemplateRef as g } from "vue";
+import { computedAsync as _ } from "@vueuse/core";
+import { Loading as v, getAsyncIcon as y } from "@rappel-ui/svg-icons";
 //#region packages/components/button/src/button.vue?vue&type=script&setup=true&lang.ts
-var x = [
+var b = [
 	"type",
 	"disabled",
 	"autofocus",
 	"aria-disabled"
-], S = l({
+], x = l({
 	name: "ReButton",
 	__name: "button",
 	props: {
@@ -41,7 +41,7 @@ var x = [
 			type: Boolean,
 			default: () => void 0
 		},
-		loadingIcon: { default: () => y },
+		loadingIcon: { default: () => v },
 		text: {
 			type: Boolean,
 			default: () => void 0
@@ -67,73 +67,77 @@ var x = [
 		nativeType: { default: "button" }
 	},
 	emits: ["click"],
-	setup(l, { expose: y, emit: S }) {
-		let C = S, { n: w, nm: T, ns: E, is: D } = r("button"), O = u(e, null), k = a(() => {
+	setup(l, { expose: v, emit: x }) {
+		let S = x, { n: C, nm: w, ns: T, is: E, has: D } = r("button"), O = u(e, null), k = a(() => {
 			var e;
 			return l.type || (O == null || (e = O.type) == null ? void 0 : e.value) || "";
 		}), A = a(() => {
 			var e;
 			return l.size || (O == null || (e = O.size) == null ? void 0 : e.value) || "";
-		}), j = a(() => [
-			w(),
-			k.value && n.includes(k.value) ? T(k.value) : "",
-			A.value && t.includes(A.value) ? T(A.value) : "",
-			D("text", l.text),
-			D("text-padding", l.text && l.padding),
-			D("text-bg", l.text && l.bg),
-			D("link", l.link),
-			D("plain", l.plain),
-			D("round", l.round),
-			D("circle", l.circle),
-			D("dashed", l.dashed),
-			D("loading", l.loading),
-			D("disabled", l.disabled)
-		]), M = v(async () => await b(l.loadingIcon)), N = v(async () => await b(l.icon));
-		function P(e) {
+		}), j = a(() => {
+			var e;
+			return (O == null || (e = O.gap) == null ? void 0 : e.value) || "";
+		}), M = a(() => [
+			C(),
+			k.value && n.includes(k.value) ? w(k.value) : "",
+			A.value && t.includes(A.value) ? w(A.value) : "",
+			E("text", l.text),
+			E("text-padding", l.text && l.padding),
+			E("text-bg", l.text && l.bg),
+			E("link", l.link),
+			E("plain", l.plain),
+			E("round", l.round),
+			E("circle", l.circle),
+			E("dashed", l.dashed),
+			E("loading", l.loading),
+			E("disabled", l.disabled),
+			D("group-gap", !!j.value)
+		]), N = _(async () => await y(l.loadingIcon)), P = _(async () => await y(l.icon));
+		function F(e) {
 			if (l.disabled || l.loading) {
 				e.stopPropagation();
 				return;
 			}
-			C("click", e);
+			S("click", e);
 		}
-		let F = _("ref");
-		return y({ ref: F }), (e, t) => {
+		let I = g("ref");
+		return v({ ref: I }), (e, t) => {
 			var n;
-			return p(), c("button", d(e.$attrs, {
+			return f(), c("button", {
 				ref_key: "ref",
-				ref: F,
-				class: j.value,
+				ref: I,
+				class: d(M.value),
 				type: l.nativeType,
 				disabled: l.disabled || l.loading,
 				autofocus: l.autofocus,
 				"aria-disabled": l.disabled,
-				onClick: P
-			}), [
-				m(e.$slots, "loading", {}, () => [l.loading ? (p(), c(i, { key: 0 }, [typeof g(M) == "string" ? (p(), c("i", {
+				onClick: F
+			}, [
+				p(e.$slots, "loading", {}, () => [l.loading ? (f(), c(i, { key: 0 }, [typeof h(N) == "string" ? (f(), c("i", {
 					key: 0,
-					class: f([g(E)("loading"), g(M)]),
+					class: d([h(T)("loading"), h(N)]),
 					"aria-hidden": "true"
-				}, null, 2)) : (p(), o(h(g(M)), {
+				}, null, 2)) : (f(), o(m(h(N)), {
 					key: 1,
-					class: f([g(E)("loading")]),
+					class: d([h(T)("loading")]),
 					"aria-hidden": "true"
 				}, null, 8, ["class"]))], 64)) : s("", !0)]),
-				m(e.$slots, "icon", {}, () => [l.icon ? (p(), c(i, { key: 0 }, [typeof g(N) == "string" ? (p(), c("i", {
+				p(e.$slots, "icon", {}, () => [l.icon ? (f(), c(i, { key: 0 }, [typeof h(P) == "string" ? (f(), c("i", {
 					key: 0,
-					class: f([g(E)("icon"), g(N)]),
+					class: d([h(T)("icon"), h(P)]),
 					"aria-hidden": "true"
-				}, null, 2)) : (p(), o(h(g(N)), {
+				}, null, 2)) : (f(), o(m(h(P)), {
 					key: 1,
-					class: f([g(E)("icon")]),
+					class: d([h(T)("icon")]),
 					"aria-hidden": "true"
 				}, null, 8, ["class"]))], 64)) : s("", !0)]),
-				(n = e.$slots) != null && n.default ? (p(), c("span", {
+				(n = e.$slots) != null && n.default ? (f(), c("span", {
 					key: 0,
-					class: f([g(E)("content")])
-				}, [m(e.$slots, "default")], 2)) : s("", !0)
-			], 16, x);
+					class: d([h(T)("content")])
+				}, [p(e.$slots, "default")], 2)) : s("", !0)
+			], 10, b);
 		};
 	}
 });
 //#endregion
-export { S as default };
+export { x as default };

package/es/components/button/src/types.d.ts

@@ -24,6 +24,7 @@ export interface ButtonProps {
 export interface ButtonGroupProps {
     size?: ButtonProps['size'];
     type?: ButtonProps['type'];
+    gap?: string | number;
     direction?: 'horizontal' | 'vertical';
 }
 export interface ButtonEmits {

package/es/components/neutral-color/src/neutral-color.vue_vue_type_script_setup_true_lang.mjs

@@ -30,7 +30,7 @@ var y = c({
 					color: s == null ? void 0 : s.toString().toUpperCase(),
 					text: u,
 					extraclass: l === "transparent" ? x.value ? b("grids is-dark") : b("grids") : void 0,
-					bordercolor: l === "blank" ? n(Object.values(t("re-color-primary-base"))[0], .4, x.value) : void 0
+					bordercolor: l === "blank" ? n(Object.values(t("re-color-primary-base"))[0], Object.values(t("re-color-theme-bgcolor"))[0], .4) : void 0
 				};
 			}
 			return a[o.replace(`--${r}-`, "")] = c, a;
@@ -44,7 +44,7 @@ var y = c({
 		]) => {
 			let r = S(e, t);
 			return n.reduce((e, t) => (e.push(r[t]), e), []);
-		}, w = m([]), T = (e) => {
+		}, w = m([]), T = () => {
 			l(() => {
 				w.value = [
 					{ shades: C("re-color-text", "text") },
@@ -76,17 +76,17 @@ var y = c({
 						.3,
 						.2,
 						.1
-					].map((r) => ({
-						color: n(Object.values(t("re-color-primary-base"))[0], r, e),
-						text: `Primary Alpha ${r * 100}% Fill`
+					].map((e) => ({
+						color: n(Object.values(t("re-color-primary-base"))[0], Object.values(t("re-color-theme-bgcolor"))[0], e),
+						text: `Primary Alpha ${e * 100}% Fill`
 					})) }
 				];
 			});
 		};
-		return v(x, (e) => {
-			T(e);
+		return v(x, () => {
+			T();
 		}), f(() => {
-			T(x.value);
+			T();
 		}), (e, t) => (p(), o("div", { class: u([_(y)("neutral")]) }, [(p(!0), o(a, null, h(w.value, (e) => (p(), o("div", {
 			key: e.shades[0].color,
 			class: u([_(b)("group")])

package/es/components/popconfirm/src/popconfirm.vue_vue_type_script_setup_true_lang.mjs

@@ -39,6 +39,7 @@ var D = ["innerHTML"], O = d({
 			type: Boolean,
 			default: () => void 0
 		},
+		clickToToggle: { type: Boolean },
 		showDelay: { default: 0 },
 		hideDelay: { default: 200 },
 		showArrow: {
@@ -91,7 +92,7 @@ var D = ["innerHTML"], O = d({
 			type: Boolean,
 			default: !0
 		},
-		cssDuration: { default: 0 },
+		cssDuration: { default: 450 },
 		arrowSize: { default: 8 },
 		arrowOffset: { default: 4 },
 		arrowOptions: { default: () => void 0 },
@@ -207,14 +208,14 @@ var D = ["innerHTML"], O = d({
 						class: m([b(A)("icon")]),
 						"aria-hidden": "true"
 					}, null, 8, ["class"]))], 64)) : o("", !0)]), g(e.$slots, "title", { title: d.title }, () => [c("div", { class: m([b(A)("title")]) }, y(d.title), 3)])], 2)]),
-					g(e.$slots, "content", { content: d.content }, () => [d.isHtml ? (h(), s("div", {
+					g(e.$slots, "content", { content: d.content }, () => [d.content ? (h(), s(r, { key: 0 }, [d.isHtml ? (h(), s("div", {
 						key: 0,
 						class: m([b(A)("content")]),
 						innerHTML: d.content
 					}, null, 10, D)) : (h(), s("div", {
 						key: 1,
 						class: m([b(A)("content")])
-					}, y(d.content), 3))]),
+					}, y(d.content), 3))], 64)) : o("", !0)]),
 					g(e.$slots, "footer", {
 						cancel: K,
 						cancelSize: d.cancelSize,

package/es/components/popover/src/popover.vue_vue_type_script_setup_true_lang.mjs

@@ -26,6 +26,7 @@ var b = ["innerHTML"], x = s({
 			type: Boolean,
 			default: () => void 0
 		},
+		clickToToggle: { type: Boolean },
 		showDelay: { default: 0 },
 		hideDelay: { default: 200 },
 		showArrow: {
@@ -78,7 +79,7 @@ var b = ["innerHTML"], x = s({
 			type: Boolean,
 			default: !0
 		},
-		cssDuration: { default: 0 },
+		cssDuration: { default: 450 },
 		arrowSize: { default: 8 },
 		arrowOffset: { default: 4 },
 		arrowOptions: { default: () => void 0 },

package/es/components/primary-color/src/primary-color.vue_vue_type_script_setup_true_lang.mjs

@@ -10,19 +10,19 @@ var v = ["innerHTML"], y = s({
 	__name: "primary-color",
 	props: { codeHtml: { default: "" } },
 	setup(s) {
-		let { nm: y, ns: b } = n("colors"), { isDark: x } = r(), S = p([]), C = (n) => {
-			let r = Object.values(t("--re-color-primary-base"))[0];
+		let { nm: y, ns: b } = n("colors"), { isDark: x } = r(), S = p([]), C = () => {
+			let n = Object.values(t("--re-color-primary-base"))[0], r = Object.values(t("--re-color-theme-bgcolor"))[0], i = Object.values(t("--re-color-theme-reverse-bgcolor"))[0];
 			S.value = [{
-				base: r,
-				shades: e(r, n)
+				base: n,
+				shades: e(n, r, x.value ? r : i)
 			}];
 		};
-		return _(x, (e) => {
+		return _(x, () => {
 			c(() => {
-				C(e);
+				C();
 			});
 		}), d(() => {
-			C(x.value);
+			C();
 		}), (e, t) => (f(!0), a(i, null, m(S.value, (e) => (f(), a("div", {
 			key: e.base,
 			class: l([g(y)("primary")])

package/es/components/secondary-color/src/secondary-color.vue_vue_type_script_setup_true_lang.mjs

@@ -15,41 +15,41 @@ var y = ["innerHTML"], b = c({
 		infoCodeHtml: { default: "" }
 	},
 	setup(c) {
-		let { nm: b, ns: x } = n("colors"), { isDark: S } = r(), C = m([]), w = (n) => {
-			let r = Object.values(t("re-color-success-base"))[0], i = Object.values(t("re-color-warning-base"))[0], o = Object.values(t("re-color-danger-base"))[0], s = Object.values(t("re-color-info-base"))[0];
+		let { nm: b, ns: x } = n("colors"), { isDark: S } = r(), C = m([]), w = () => {
+			let n = Object.values(t("re-color-success-base"))[0], r = Object.values(t("re-color-warning-base"))[0], i = Object.values(t("re-color-danger-base"))[0], o = Object.values(t("re-color-info-base"))[0], s = Object.values(t("--re-color-theme-bgcolor"))[0], l = Object.values(t("--re-color-theme-reverse-bgcolor"))[0];
 			C.value = [
 				{
-					base: r,
+					base: n,
 					text: "Success",
-					shades: e(r, n),
+					shades: e(n, s, S.value ? s : l),
 					codeHtml: a(() => c.successCodeHtml)
 				},
 				{
-					base: i,
+					base: r,
 					text: "Warning ",
-					shades: e(i, n),
+					shades: e(r, s, S.value ? s : l),
 					codeHtml: a(() => c.warningCodeHtml)
 				},
 				{
-					base: o,
+					base: i,
 					text: "Danger/Error",
-					shades: e(o, n),
+					shades: e(i, s, S.value ? s : l),
 					codeHtml: a(() => c.dangerCodeHtml)
 				},
 				{
-					base: s,
+					base: o,
 					text: "Info",
-					shades: e(s, n),
+					shades: e(o, s, S.value ? s : l),
 					codeHtml: a(() => c.infoCodeHtml)
 				}
 			];
 		};
-		return v(S, (e) => {
+		return v(S, () => {
 			l(() => {
-				w(e);
+				w();
 			});
 		}), f(() => {
-			w(S.value);
+			w();
 		}), (e, t) => (p(), o("div", { class: u([_(b)("secondary")]) }, [(p(!0), o(i, null, h(C.value, (e) => (p(), o("div", {
 			key: e.base,
 			class: u([_(x)("panel")])

package/es/components/svg-icon/src/svg-icon.vue_vue_type_script_setup_true_lang.mjs

@@ -22,7 +22,7 @@ var l = [
 		size: { default: 16 },
 		fill: { default: () => void 0 },
 		fillRule: { default: () => void 0 },
-		color: { default: "currentColor" },
+		stroke: { default: () => void 0 },
 		spin: {
 			type: Boolean,
 			default: !1
@@ -39,7 +39,7 @@ var l = [
 			"stroke-linecap": "round",
 			"stroke-linejoin": "round",
 			"stroke-width": "2",
-			stroke: a.fill ? void 0 : a.color,
+			stroke: a.stroke,
 			xmlns: "http://www.w3.org/2000/svg",
 			"aria-hidden": "true"
 		}, [i("path", {

package/es/components/svg-icon/src/types.d.ts

@@ -4,6 +4,6 @@ export interface SvgIconProps {
     size?: string | number;
     fill?: string;
     fillRule?: 'inherit' | 'nonzero' | 'evenodd';
-    color?: string;
+    stroke?: string;
     spin?: boolean;
 }

package/es/components/tooltip/src/tooltip.vue_vue_type_script_setup_true_lang.mjs

@@ -32,6 +32,10 @@ var D = ["innerHTML"], O = ["data-placement"], k = u({
 			type: Boolean,
 			default: () => void 0
 		},
+		clickToToggle: {
+			type: Boolean,
+			default: !0
+		},
 		showDelay: { default: 0 },
 		hideDelay: { default: 200 },
 		showArrow: {
@@ -84,7 +88,7 @@ var D = ["innerHTML"], O = ["data-placement"], k = u({
 			type: Boolean,
 			default: !0
 		},
-		cssDuration: { default: 0 },
+		cssDuration: { default: 450 },
 		arrowSize: { default: 8 },
 		arrowOffset: { default: 4 },
 		arrowOptions: { default: () => void 0 },
@@ -172,8 +176,9 @@ var D = ["innerHTML"], O = ["data-placement"], k = u({
 			trigger: u.trigger,
 			floatingRef: u.persistent ? W : void 0,
 			open: J,
-			showDelay: u.showDelay,
-			hideDelay: u.hideDelay,
+			clickToToggle: u.clickToToggle,
+			showDelay: parseFloat(u.showDelay),
+			hideDelay: parseFloat(u.hideDelay),
 			disabled: o(() => u.disabled)
 		}), { scope: Z } = _e(), be = () => {
 			ge(), Z == null || Z.stop();
@@ -182,7 +187,8 @@ var D = ["innerHTML"], O = ["data-placement"], k = u({
 			height: e(u.height),
 			maxWidth: e(u.maxWidth),
 			maxHeight: e(u.maxHeight),
-			zIndex: $.value
+			zIndex: $.value,
+			transition: `opacity ${u.cssDuration}ms ease, visibility ${u.cssDuration}ms ease`
 		}]), $ = _(0), { zIndex: Se } = n(), { stop: Ce } = le(J, (e) => {
 			e && ($.value = u.zIndex || Se.value);
 		});

package/es/components/tooltip/src/types.d.ts

@@ -14,8 +14,9 @@ export interface TooltipProps {
     maxHeight?: number | string;
     trigger?: Trigger;
     disabled?: boolean;
-    showDelay?: number;
-    hideDelay?: number;
+    clickToToggle?: boolean;
+    showDelay?: number | string;
+    hideDelay?: number | string;
     showArrow?: boolean;
     floatingClass?: MaybeClass;
     floatingStyle?: StyleValue;
@@ -57,6 +58,7 @@ export interface TriggerOptions {
     trigger: string;
     floatingRef?: ShallowRef<HTMLElement | null>;
     open: ShallowRef<boolean>;
+    clickToToggle?: boolean;
     showDelay?: number;
     hideDelay?: number;
     disabled?: ShallowRef<boolean | undefined> | ComputedRef<boolean | undefined>;

package/es/components/tooltip/src/use-tooltip.d.ts

@@ -1,6 +1,6 @@
 import { EffectScope } from 'vue';
 import { TriggerOptions } from './types';
-export declare function useTooltip({ triggerRef, isExternal, externalActiveRef, externalRef, trigger, floatingRef, open, showDelay, hideDelay, disabled }: TriggerOptions): {
+export declare function useTooltip({ triggerRef, isExternal, externalActiveRef, externalRef, trigger, floatingRef, open, clickToToggle, showDelay, hideDelay, disabled }: TriggerOptions): {
     start: () => void;
     stop: () => void;
     setup: () => {

package/es/components/tooltip/src/use-tooltip.mjs

@@ -1,96 +1,98 @@
 import { effectScope as e, unref as t, watch as n } from "vue";
 import { onClickOutside as r, useDebounceFn as i, useElementHover as a, useEventListener as o } from "@vueuse/core";
 //#region packages/components/tooltip/src/use-tooltip.ts
-function s({ triggerRef: s, isExternal: c, externalActiveRef: l, externalRef: u, trigger: d, floatingRef: f, open: p, showDelay: m = 0, hideDelay: h = 0, disabled: g }) {
-	let _ = [], v = i(() => {
+function s({ triggerRef: s, isExternal: c, externalActiveRef: l, externalRef: u, trigger: d, floatingRef: f, open: p, clickToToggle: m, showDelay: h = 0, hideDelay: g = 0, disabled: _ }) {
+	let v = [], y = i(() => {
 		p.value = !0;
-	}, c ? 0 : m), y = i((e) => {
+	}, c ? 0 : h), b = i((e) => {
 		p.value = !1, typeof e == "function" && e();
-	}, c ? 0 : h), b = () => {
+	}, c ? 0 : g), x = () => {
 		if (s.value) switch (d) {
 			case "click": {
-				let e = o(s, "click", v), t = a(f, {
+				let e = o(s, "click", () => {
+					m && p.value ? b() : y();
+				}), t = a(f, {
 					delayEnter: 0,
 					delayLeave: 0,
 					triggerOnRemoval: !0
 				}), n = r(s, () => {
-					!t.value && y();
+					!t.value && b();
 				});
-				_.push(e, n);
+				v.push(e, n);
 				break;
 			}
 			case "hover": {
 				let e = {
-					delayEnter: m,
-					delayLeave: h,
+					delayEnter: h,
+					delayLeave: g,
 					triggerOnRemoval: !0
 				}, t = a(s, e), r = a(f, e);
 				c && p.value && (t.value = !0);
 				let { stop: i } = n(() => [t.value, r.value], ([e, t]) => {
 					p.value = e || t;
 				});
-				_.push(i);
+				v.push(i);
 				break;
 			}
 			case "focus": {
-				let e = o(s, "focus", v), t = a(f, {
+				let e = o(s, "focus", y), t = a(f, {
 					delayEnter: 0,
 					delayLeave: 0,
 					triggerOnRemoval: !0
-				}), n = o(s, "blur", () => !t.value && y()), i = r(s, () => !t.value && y());
-				_.push(e, n, i);
+				}), n = o(s, "blur", () => !t.value && b()), i = r(s, () => !t.value && b());
+				v.push(e, n, i);
 				break;
 			}
 			case "contextmenu": {
 				let e = o(s, "contextmenu", (e) => {
-					e.preventDefault(), v();
+					e.preventDefault(), y();
 				}), t = a(f, {
 					delayEnter: 0,
 					delayLeave: 0,
 					triggerOnRemoval: !0
-				}), n = r(s, () => !t.value && y());
-				_.push(e, n);
+				}), n = r(s, () => !t.value && b());
+				v.push(e, n);
 				break;
 			}
 		}
-	}, x = () => {
-		_.forEach((e) => e());
 	}, S = () => {
-		p.value = !1, x();
+		v.forEach((e) => e());
+	}, C = () => {
+		p.value = !1, S();
 	};
 	return c && n(() => u == null ? void 0 : u.value, (e) => {
 		if (!(["click", "contextmenu"].includes(d) && l.value === e)) {
 			if (!l.value || !p.value) {
-				l.value = e, v();
+				l.value = e, y();
 				return;
 			}
-			y(() => {
-				l.value = e, v();
+			b(() => {
+				l.value = e, y();
 			});
 		}
 	}), {
-		start: b,
-		stop: S,
+		start: x,
+		stop: C,
 		setup: () => {
 			let r = e();
 			return r.run(() => {
 				if (p.value) {
-					x();
+					S();
 					return;
 				}
-				if (t(g)) {
-					S();
+				if (t(_)) {
+					C();
 					return;
 				}
-				b(), n(() => t(g), (e) => {
-					e ? S() : b();
+				x(), n(() => t(_), (e) => {
+					e ? C() : x();
 				}), n(s, (e) => {
-					e && (x(), b());
+					e && (S(), x());
 				});
 			}), { scope: r };
 		},
-		delayHide: y,
-		delayShow: v
+		delayHide: b,
+		delayShow: y
 	};
 }
 //#endregion

package/es/composables/use-namespace/index.d.ts

@@ -2,6 +2,8 @@ export declare function useNamespace(compName: string): {
     libName: string;
     prefix: string;
     statePrefix: string;
+    hasPrefix: string;
+    has: (feature: string, bool?: boolean | undefined) => string;
     n: (name?: string) => string;
     ng: (groupName: string) => string;
     nm: (modifier: string) => string;

package/es/composables/use-namespace/index.mjs

@@ -8,6 +8,8 @@ function e(e) {
 		libName: "rappel-ui",
 		prefix: "re",
 		statePrefix: "is",
+		hasPrefix: "has",
+		has: (e, t = void 0) => t ? `has-${e}` : "",
 		n: (e = "") => t(e),
 		ng: (e) => t("", e),
 		nm: (e) => t("", "", e),