@indielayer/ui 1.18.1 → 2.0.0

package/lib/components/button/ButtonGroup.vue.d.ts

@@ -5,11 +5,13 @@ declare const buttonGroupProps: {
         type: StringConstructor;
         default: string;
     };
-    outlined: BooleanConstructor;
-    rounded: BooleanConstructor;
-    ghost: BooleanConstructor;
-    light: BooleanConstructor;
-    flat: BooleanConstructor;
+    outlined: import("vue").Prop<boolean | undefined>;
+    rounded: import("vue").Prop<boolean | undefined>;
+    glow: import("vue").Prop<boolean | undefined>;
+    ghost: import("vue").Prop<boolean | undefined>;
+    light: import("vue").Prop<boolean | undefined>;
+    flat: import("vue").Prop<boolean | undefined>;
+    block: import("vue").Prop<boolean | undefined>;
     disabled: BooleanConstructor;
     loading: BooleanConstructor;
     loadingLabel: StringConstructor;
@@ -43,11 +45,13 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<im
         type: StringConstructor;
         default: string;
     };
-    outlined: BooleanConstructor;
-    rounded: BooleanConstructor;
-    ghost: BooleanConstructor;
-    light: BooleanConstructor;
-    flat: BooleanConstructor;
+    outlined: import("vue").Prop<boolean | undefined>;
+    rounded: import("vue").Prop<boolean | undefined>;
+    glow: import("vue").Prop<boolean | undefined>;
+    ghost: import("vue").Prop<boolean | undefined>;
+    light: import("vue").Prop<boolean | undefined>;
+    flat: import("vue").Prop<boolean | undefined>;
+    block: import("vue").Prop<boolean | undefined>;
     disabled: BooleanConstructor;
     loading: BooleanConstructor;
     loadingLabel: StringConstructor;
@@ -69,11 +73,13 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<im
         type: StringConstructor;
         default: string;
     };
-    outlined: BooleanConstructor;
-    rounded: BooleanConstructor;
-    ghost: BooleanConstructor;
-    light: BooleanConstructor;
-    flat: BooleanConstructor;
+    outlined: import("vue").Prop<boolean | undefined>;
+    rounded: import("vue").Prop<boolean | undefined>;
+    glow: import("vue").Prop<boolean | undefined>;
+    ghost: import("vue").Prop<boolean | undefined>;
+    light: import("vue").Prop<boolean | undefined>;
+    flat: import("vue").Prop<boolean | undefined>;
+    block: import("vue").Prop<boolean | undefined>;
     disabled: BooleanConstructor;
     loading: BooleanConstructor;
     loadingLabel: StringConstructor;
@@ -92,14 +98,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<im
     };
 }>> & Readonly<{}>, {
     disabled: boolean;
-    flat: boolean;
     tag: string;
-    light: boolean;
-    outlined: boolean;
     color: string;
-    rounded: boolean;
     size: import("../../composables/useCommon").Size;
-    ghost: boolean;
     loading: boolean;
     loadingStatus: import("../loader/Loader.vue").LoaderStatus;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, {

package/lib/components/button/ButtonGroup.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,45 @@
+import { injectButtonGroupKey as e } from "../../composables/keys.js";
+import { useResolvedComponentProps as t } from "../../composables/resolveComponentDefaults.js";
+import { useColors as n } from "../../composables/useColors.js";
+import { useTheme as r } from "../../composables/useTheme.js";
+import { variantBooleanProps as i } from "../../common/props.js";
+import { useCommon as a } from "../../composables/useCommon.js";
+import { useInteractive as o } from "../../composables/useInteractive.js";
+import { createBlock as s, defineComponent as c, normalizeClass as l, normalizeStyle as u, openBlock as d, provide as f, renderSlot as p, resolveDynamicComponent as m, unref as h, withCtx as g } from "vue";
+//#region src/components/button/ButtonGroup.vue?vue&type=script&setup=true&lang.ts
+var _ = {
+	...a.props(),
+	...n.props(),
+	...o.props(),
+	...i(),
+	tag: {
+		type: String,
+		default: "div"
+	}
+}, v = /* @__PURE__ */ c({
+	name: "XButtonGroup",
+	validators: { ...a.validators() },
+	props: _,
+	setup(n) {
+		let i = n, a = t("ButtonGroup", i);
+		f(e, {
+			groupProps: i,
+			isButtonGroup: !0
+		});
+		let { className: o, classes: c, styles: _ } = r("ButtonGroup", {}, a);
+		return (e, t) => (d(), s(m(e.tag), {
+			style: u(h(_)),
+			class: l([
+				h(o),
+				e.$style["button-group"],
+				h(a).rounded ? e.$style["button-group--rounded"] : "",
+				h(c).wrapper
+			])
+		}, {
+			default: g(() => [p(e.$slots, "default")]),
+			_: 3
+		}, 8, ["style", "class"]));
+	}
+});
+//#endregion
+export { v as default };

package/lib/components/button/ButtonGroup.vue_vue_type_style_index_0_lang.module.js

@@ -0,0 +1,7 @@
+//#region src/components/button/ButtonGroup.vue?vue&type=style&index=0&lang.module.css
+var e = {
+	"button-group": "_button-group_1s8c3_2",
+	"button-group--rounded": "_button-group--rounded_1s8c3_2"
+};
+//#endregion
+export { e as default };

package/lib/components/button/theme/Button.base.theme.js

@@ -1,141 +1,140 @@
-const g = {
-  classes: {
-    wrapper({ props: e, slots: n, data: i }) {
-      const d = ["relative transition duration-150 focus-visible:outline-secondary-300 outline-transparent outline outline-1 outline-offset-2 inline-flex items-center justify-center font-medium whitespace-nowrap overflow-hidden align-middle active:!shadow-none border appearance-none shrink-0"];
-      return i.isButtonGroup || d.push(e.rounded ? "rounded-full" : "rounded-md"), !e.flat && !e.light && !e.ghost && !e.disabled && !e.loading && d.push("shadow-sm"), e.size === "xs" ? d.push(n.default ? `py-1 text-xs ${e.icon, "px-2"}` : "leading-none p-1") : e.size === "sm" ? d.push(n.default ? `py-1.5 text-sm ${e.icon, "px-3"}` : "leading-none p-1.5") : e.size === "lg" ? d.push(n.default ? `py-3 text-lg ${e.icon ? "px-4" : "px-5"}` : "leading-none p-3") : e.size === "xl" ? d.push(n.default ? "py-4 text-xl px-6" : "leading-none p-3.5") : d.push(n.default ? "py-2 px-4" : "leading-none p-[0.532rem]"), e.disabled ? d.push("cursor-not-allowed") : e.loading ? d.push("cursor-default") : d.push("cursor-pointer"), d;
-    },
-    iconLeft: ({ slots: e }) => e.default ? "mr-2" : "m-0.5",
-    iconRight: ({ slots: e }) => e.default ? "ml-2" : "m-0.5"
-  },
-  styles({ props: e, colors: n, css: i, data: d }) {
-    const a = n.getPalette("gray"), t = e.color ? n.getPalette(e.color) : a, l = [], r = e.color && e.light, b = !e.color && !e.ghost;
-    return e.glow && l.push(i.get("glow", n.getColorOpacity(e.color ? t[500] : a[500], 0.5))), b ? e.disabled ? l.push(i.variables({
-      bg: a[50],
-      text: a[300],
-      border: a[200],
-      dark: {
-        bg: a[900],
-        text: a[600],
-        border: a[700]
-      }
-    })) : l.push(i.variables({
-      bg: "white",
-      text: a[800],
-      border: a[300],
-      hover: { bg: e.loading ? "" : a[100] },
-      active: { bg: e.loading ? "" : a[200] },
-      dark: {
-        bg: a[800],
-        text: "white",
-        border: a[700],
-        hover: { bg: e.loading ? "" : a[700], border: a[600] },
-        active: { bg: e.loading ? "" : a[600], border: a[500] }
-      }
-    })) : r ? ((!e.outlined || e.disabled) && l.push(i.get("border", "transparent")), e.disabled ? l.push(i.variables({
-      bg: t[50],
-      text: t[200],
-      border: "transparent",
-      dark: {
-        bg: a[800],
-        text: t[900],
-        border: "transparent"
-      }
-    })) : l.push(i.variables({
-      bg: t[50],
-      text: t[600],
-      border: e.outlined ? t[500] : "transparent",
-      hover: { bg: e.loading ? "" : t[100] },
-      active: { bg: e.loading ? "" : t[200] },
-      dark: {
-        bg: t[900],
-        text: t[200],
-        border: e.outlined ? t[500] : "transparent",
-        hover: { bg: e.loading ? "" : t[800] },
-        active: { bg: e.loading ? "" : t[700] }
-      }
-    }))) : e.ghost ? (e.outlined || l.push(i.get("border", "transparent")), e.color ? e.disabled ? l.push(i.variables({
-      text: t[200],
-      dark: {
-        text: t[700]
-      }
-    })) : (l.push(i.variables({
-      text: t[600],
-      dark: {
-        text: t[500]
-      }
-    })), e.loading || l.push(i.variables({
-      hover: { bg: t[50] },
-      active: { bg: t[100] },
-      dark: {
-        hover: { bg: a[800] },
-        active: { bg: a[700] }
-      }
-    }))) : e.disabled ? l.push(i.variables({
-      text: a[200],
-      dark: {
-        text: a[700]
-      }
-    })) : (l.push(i.variables({
-      text: a[800],
-      dark: {
-        text: "white"
-      }
-    })), e.loading || l.push(i.variables({
-      hover: { bg: a[100] },
-      active: { bg: a[200] },
-      dark: {
-        hover: { bg: a[800] },
-        active: { bg: a[700] }
-      }
-    })))) : e.outlined ? e.disabled ? l.push(i.variables({
-      text: t[200],
-      border: t[200],
-      dark: {
-        text: t[700],
-        border: t[700]
-      }
-    })) : (l.push(i.variables({
-      text: t[600],
-      border: t[600],
-      dark: {
-        text: t[500],
-        border: t[500]
-      }
-    })), e.loading || l.push(i.variables({
-      hover: { bg: t[100] },
-      active: { bg: t[200] },
-      dark: {
-        hover: { bg: a[800] },
-        active: { bg: a[700] }
-      }
-    }))) : (l.push(i.variables({
-      text: "#fff",
-      border: t[600],
-      dark: {
-        text: "#fff",
-        border: t[500]
-      }
-    })), e.disabled ? l.push(i.variables({
-      bg: a[100],
-      border: a[300],
-      text: a[400],
-      dark: {
-        text: a[700],
-        border: a[700],
-        bg: a[800]
-      }
-    })) : l.push(i.variables({
-      bg: t[500],
-      hover: { bg: e.loading ? "" : t[600] },
-      active: { bg: e.loading ? "" : t[800] },
-      dark: {
-        bg: t[600],
-        hover: { bg: e.loading ? "" : t[700] },
-        active: { bg: e.loading ? "" : t[800] }
-      }
-    }))), l;
-  }
-}, o = g;
-export {
-  o as default
+import { inputGroupRadiusClasses as e } from "../../../common/inputGroupRadius.js";
+//#region src/components/button/theme/Button.base.theme.ts
+var t = {
+	classes: {
+		wrapper({ props: t, slots: n, data: r }) {
+			let i = ["relative transition duration-150 focus-visible:outline-secondary-300 outline-transparent outline outline-1 outline-offset-2 inline-flex items-center justify-center font-medium whitespace-nowrap overflow-hidden align-middle active:!shadow-none border appearance-none shrink-0"];
+			return r.isInsideInputGroup ? i.push(...e(r.inputGroupPosition)) : r.isButtonGroup || i.push(t.rounded ? "rounded-full" : "rounded-md"), !t.flat && !t.light && !t.ghost && !t.disabled && !t.loading && i.push("shadow-xs"), t.size === "xs" ? i.push(n.default ? `py-1 text-xs ${t.icon, "px-2"}` : "leading-none p-1") : t.size === "sm" ? i.push(n.default ? `py-1.5 text-sm ${t.icon, "px-3"}` : "leading-none p-1.5") : t.size === "lg" ? i.push(n.default ? `py-3 text-lg ${t.icon ? "px-4" : "px-5"}` : "leading-none p-3") : t.size === "xl" ? i.push(n.default ? "py-4 text-xl px-6" : "leading-none p-3.5") : i.push(n.default ? "py-2 px-4" : "leading-none p-[0.532rem]"), t.disabled ? i.push("cursor-not-allowed") : t.loading ? i.push("cursor-default") : i.push("cursor-pointer"), i;
+		},
+		iconLeft: ({ slots: e }) => e.default ? "mr-2" : "m-0.5",
+		iconRight: ({ slots: e }) => e.default ? "ml-2" : "m-0.5"
+	},
+	styles({ props: e, colors: t, css: n, data: r }) {
+		let i = t.getPalette("gray"), a = e.color ? t.getPalette(e.color) : i, o = [], s = e.color && e.light, c = !e.color && !e.ghost;
+		return e.glow && o.push(n.get("glow", t.getColorOpacity(e.color ? a[500] : i[500], .5))), c ? e.disabled ? o.push(n.variables({
+			bg: i[50],
+			text: i[300],
+			border: i[200],
+			dark: {
+				bg: i[900],
+				text: i[600],
+				border: i[700]
+			}
+		})) : o.push(n.variables({
+			bg: "white",
+			text: i[800],
+			border: i[300],
+			hover: { bg: e.loading ? "" : i[100] },
+			active: { bg: e.loading ? "" : i[200] },
+			dark: {
+				bg: i[800],
+				text: "white",
+				border: i[700],
+				hover: {
+					bg: e.loading ? "" : i[700],
+					border: i[600]
+				},
+				active: {
+					bg: e.loading ? "" : i[600],
+					border: i[500]
+				}
+			}
+		})) : s ? ((!e.outlined || e.disabled) && o.push(n.get("border", "transparent")), e.disabled ? o.push(n.variables({
+			bg: a[50],
+			text: a[200],
+			border: "transparent",
+			dark: {
+				bg: i[800],
+				text: a[900],
+				border: "transparent"
+			}
+		})) : o.push(n.variables({
+			bg: a[50],
+			text: a[600],
+			border: e.outlined ? a[500] : "transparent",
+			hover: { bg: e.loading ? "" : a[100] },
+			active: { bg: e.loading ? "" : a[200] },
+			dark: {
+				bg: a[900],
+				text: a[200],
+				border: e.outlined ? a[500] : "transparent",
+				hover: { bg: e.loading ? "" : a[800] },
+				active: { bg: e.loading ? "" : a[700] }
+			}
+		}))) : e.ghost ? (e.outlined || o.push(n.get("border", "transparent")), e.color ? e.disabled ? o.push(n.variables({
+			text: a[200],
+			dark: { text: a[700] }
+		})) : (o.push(n.variables({
+			text: a[600],
+			dark: { text: a[500] }
+		})), e.loading || o.push(n.variables({
+			hover: { bg: a[50] },
+			active: { bg: a[100] },
+			dark: {
+				hover: { bg: i[800] },
+				active: { bg: i[700] }
+			}
+		}))) : e.disabled ? o.push(n.variables({
+			text: i[200],
+			dark: { text: i[700] }
+		})) : (o.push(n.variables({
+			text: i[800],
+			dark: { text: "white" }
+		})), e.loading || o.push(n.variables({
+			hover: { bg: i[100] },
+			active: { bg: i[200] },
+			dark: {
+				hover: { bg: i[800] },
+				active: { bg: i[700] }
+			}
+		})))) : e.outlined ? e.disabled ? o.push(n.variables({
+			text: a[200],
+			border: a[200],
+			dark: {
+				text: a[700],
+				border: a[700]
+			}
+		})) : (o.push(n.variables({
+			text: a[600],
+			border: a[600],
+			dark: {
+				text: a[500],
+				border: a[500]
+			}
+		})), e.loading || o.push(n.variables({
+			hover: { bg: a[100] },
+			active: { bg: a[200] },
+			dark: {
+				hover: { bg: i[800] },
+				active: { bg: i[700] }
+			}
+		}))) : (o.push(n.variables({
+			text: "#fff",
+			border: a[600],
+			dark: {
+				text: "#fff",
+				border: a[500]
+			}
+		})), e.disabled ? o.push(n.variables({
+			bg: i[100],
+			border: i[300],
+			text: i[400],
+			dark: {
+				text: i[700],
+				border: i[700],
+				bg: i[800]
+			}
+		})) : o.push(n.variables({
+			bg: a[500],
+			hover: { bg: e.loading ? "" : a[600] },
+			active: { bg: e.loading ? "" : a[800] },
+			dark: {
+				bg: a[600],
+				hover: { bg: e.loading ? "" : a[700] },
+				active: { bg: e.loading ? "" : a[800] }
+			}
+		}))), o;
+	}
 };
+//#endregion
+export { t as default };