straw-ui-vue 0.1.62 → 0.1.64

package/dist/components/st-date-picker/types/st-picker-atoms.d.ts

@@ -235,6 +235,10 @@ export interface StPickerQuickRowProps {
 	class?: ClassValue;
 	/** 样式 */
 	style?: StyleValue;
+	/** 快捷预设按钮类名 */
+	shortcutsItemClass?: ClassValue;
+	/** 快捷预设按钮样式 */
+	shortcutsItemStyle?: StyleValue;
 }
 
 /** StPickerQuickRow 事件 */

package/dist/components/st-date-picker/types/st-picker-shared.d.ts

@@ -140,9 +140,13 @@ export interface StPickerClassNames {
 	/** 浮层容器样式 */
 	panelStyle?: StyleValue;
 	/** 快捷预设行 */
-	quickClass?: ClassValue;
+	shortcutsBodyClass?: ClassValue;
 	/** 快捷预设行样式 */
-	quickStyle?: StyleValue;
+	shortcutsBodyStyle?: StyleValue;
+	/** 快捷预设按钮 */
+	shortcutsItemClass?: ClassValue;
+	/** 快捷预设按钮样式 */
+	shortcutsItemStyle?: StyleValue;
 	/** 面板底部工具条 */
 	footerClass?: ClassValue;
 	/** 面板底部工具条样式 */

package/dist/components/st-tree/types/st-tree-group-checkbox.d.ts

@@ -1,5 +1,16 @@
+import type { ClassValue, StyleValue } from 'vue';
+
 /** 树多选框组件属性接口 */
-export interface StTreeGroupCheckboxProps {}
+export interface StTreeGroupCheckboxProps {
+	/** 多选框盒子类名 */
+	boxClass?: ClassValue;
+	/** 多选框盒子样式 */
+	boxStyle?: StyleValue;
+	/** 多选框图标类名 */
+	coreClass?: ClassValue;
+	/** 多选框图标样式 */
+	coreStyle?: StyleValue;
+}
 
 /** 树多选框组件插槽接口 */
 export interface StTreeGroupCheckboxSlots {}
@@ -10,4 +21,4 @@ export interface StTreeGroupCheckboxEmits {
 	change: [event: MouseEvent];
 }
 
-export {};
+export {};

package/dist/components/st-tree/types/st-tree-node.d.ts

@@ -21,6 +21,42 @@ export interface StTreeNodeProps {
 	labelClass?: ClassValue;
 	/** 标签样式 */
 	labelStyle?: StyleValue;
+	/** 节点行类名 */
+	nodeClass?: ClassValue;
+	/** 节点行样式 */
+	nodeStyle?: StyleValue;
+	/** 箭头外层附加区类名 */
+	arrowAddonClass?: ClassValue;
+	/** 箭头外层附加区样式 */
+	arrowAddonStyle?: StyleValue;
+	/** 多选框外层附加区类名 */
+	checkboxAddonClass?: ClassValue;
+	/** 多选框外层附加区样式 */
+	checkboxAddonStyle?: StyleValue;
+	/** 多选框类名 */
+	checkboxClass?: ClassValue;
+	/** 多选框样式 */
+	checkboxStyle?: StyleValue;
+	/** 多选框盒子类名 */
+	checkboxBoxClass?: ClassValue;
+	/** 多选框盒子样式 */
+	checkboxBoxStyle?: StyleValue;
+	/** 多选框图标类名 */
+	checkboxCoreClass?: ClassValue;
+	/** 多选框图标样式 */
+	checkboxCoreStyle?: StyleValue;
+	/** 操作区外层附加区类名 */
+	actionAddonClass?: ClassValue;
+	/** 操作区外层附加区样式 */
+	actionAddonStyle?: StyleValue;
+	/** 子节点容器类名 */
+	childrenClass?: ClassValue;
+	/** 子节点容器样式 */
+	childrenStyle?: StyleValue;
+	/** 子组容器类名 */
+	subGroupClass?: ClassValue;
+	/** 子组容器样式 */
+	subGroupStyle?: StyleValue;
 }
 
 /** 树内部递归渲染器插槽接口 */

package/dist/components/st-tree/types/st-tree.d.ts

@@ -56,6 +56,42 @@ export interface StTreeProps {
 	labelClass?: ClassValue;
 	/** 标签 style */
 	labelStyle?: StyleValue;
+	/** 节点行 class */
+	nodeClass?: ClassValue;
+	/** 节点行 style */
+	nodeStyle?: StyleValue;
+	/** 箭头外层附加区 class */
+	arrowAddonClass?: ClassValue;
+	/** 箭头外层附加区 style */
+	arrowAddonStyle?: StyleValue;
+	/** 多选框外层附加区 class */
+	checkboxAddonClass?: ClassValue;
+	/** 多选框外层附加区 style */
+	checkboxAddonStyle?: StyleValue;
+	/** 多选框 class */
+	checkboxClass?: ClassValue;
+	/** 多选框 style */
+	checkboxStyle?: StyleValue;
+	/** 多选框盒子 class */
+	checkboxBoxClass?: ClassValue;
+	/** 多选框盒子 style */
+	checkboxBoxStyle?: StyleValue;
+	/** 多选框图标 class */
+	checkboxCoreClass?: ClassValue;
+	/** 多选框图标 style */
+	checkboxCoreStyle?: StyleValue;
+	/** 操作区外层附加区 class */
+	actionAddonClass?: ClassValue;
+	/** 操作区外层附加区 style */
+	actionAddonStyle?: StyleValue;
+	/** 子节点容器 class */
+	childrenClass?: ClassValue;
+	/** 子节点容器 style */
+	childrenStyle?: StyleValue;
+	/** 子组容器 class */
+	subGroupClass?: ClassValue;
+	/** 子组容器 style */
+	subGroupStyle?: StyleValue;
 }
 /** 树组件插槽接口 */
 export interface StTreeSlots {

package/dist/straw-ui.js

@@ -4502,23 +4502,23 @@ var En = ["data-index"], Dn = /* @__PURE__ */ I({
 	setup(e, { emit: t }) {
 		let n = J();
 		X();
-		let r = e, i = Vn(), a = Un(), o = O(() => a ? i?.modelValue.value === a.value.value : !1), s = O(() => r.disabled || (a?.disabled.value ?? !1)), c = d({
+		let r = e, i = Vn(), a = Un(), o = O(() => a ? i?.modelValue.value === a.value.value : !1), s = O(() => !a || i?.selection.value ? !1 : i?.modelValue.value === a.value.value), c = O(() => !a || !i?.selection.value ? !1 : i?.selectedKeys?.value.includes(a.value.value) ?? !1), u = O(() => r.disabled || (a?.disabled.value ?? !1)), f = d({
 			base: "flex items-center gap-default rounded",
 			variants: { selected: {
 				true: "bg-primary/10 text-primary",
 				false: "text-foreground hover:bg-accent"
 			} }
-		}), u = O(() => l(c({ selected: o.value }), n.class)), f = O(() => {
+		}), p = O(() => l(f({ selected: o.value }), s.value && "is-active", c.value && "is-checked", n.class)), m = O(() => {
 			let e = a?.indentOffset.value ?? 0;
 			return [n.style, { paddingLeft: e > 0 ? `${e}px` : void 0 }];
 		});
-		function p() {
-			a && !s.value && i?.setSelected(a.value.value);
+		function h() {
+			a && !u.value && i?.setSelected(a.value.value);
 		}
 		return (e, t) => (H(), j("div", {
-			class: B(["st-tree-group-node", u.value]),
-			style: V(f.value),
-			onClick: p
+			class: B(["st-tree-group-node", p.value]),
+			style: V(m.value),
+			onClick: h
 		}, [G(e.$slots, "default")], 6));
 	}
 }), Kn = /* @__PURE__ */ I({
@@ -4787,34 +4787,72 @@ var Qn = ["for"], $n = /* @__PURE__ */ I({
 	name: "StTreeGroupCheckbox",
 	inheritAttrs: !1,
 	__name: "st-tree-group-checkbox",
+	props: {
+		boxClass: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		boxStyle: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		coreClass: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		coreStyle: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] }
+	},
 	emits: ["change"],
 	setup(e, { emit: t }) {
 		let n = J();
 		X();
-		let r = t, i = Vn(), a = Un(), o = O(() => a?.value.value), s = O(() => a?.disabled.value ?? !1), c = O(() => i?.indeterminateKeys.value.has(o.value) ?? !1), l = O({
-			get: () => i?.selectedKeys.value.includes(o.value) ? o.value : !1,
+		let r = t, i = e, a = Vn(), o = Un(), s = O(() => o?.value.value), c = O(() => o?.disabled.value ?? !1), l = O(() => a?.indeterminateKeys.value.has(s.value) ?? !1), u = O({
+			get: () => a?.selectedKeys.value.includes(s.value) ? s.value : !1,
 			set: () => {
-				a && i?.toggleChecked(a.value.value);
+				o && a?.toggleChecked(o.value.value);
 			}
 		});
-		function u(e) {
+		function d(e) {
 			r("change", e);
 		}
 		return (e, t) => (H(), j("span", {
 			class: "st-tree-group-checkbox inline-flex",
 			onClick: t[1] ||= Te(() => {}, ["stop"])
 		}, [F(tr, {
-			modelValue: l.value,
-			"onUpdate:modelValue": t[0] ||= (e) => l.value = e,
+			modelValue: u.value,
+			"onUpdate:modelValue": t[0] ||= (e) => u.value = e,
+			"box-class": i.boxClass,
+			"box-style": i.boxStyle,
 			class: B(q(n).class),
-			disabled: s.value,
-			indeterminate: c.value,
+			"core-class": i.coreClass,
+			"core-style": i.coreStyle,
+			disabled: c.value,
+			indeterminate: l.value,
 			style: V(q(n).style),
-			"true-value": o.value,
-			onChange: u
+			"true-value": s.value,
+			onChange: d
 		}, null, 8, [
 			"modelValue",
+			"box-class",
+			"box-style",
 			"class",
+			"core-class",
+			"core-style",
 			"disabled",
 			"indeterminate",
 			"style",
@@ -4907,6 +4945,132 @@ var Qn = ["for"], $n = /* @__PURE__ */ I({
 			String,
 			Object,
 			Array
+		] },
+		nodeClass: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		nodeStyle: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		arrowAddonClass: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		arrowAddonStyle: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		checkboxAddonClass: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		checkboxAddonStyle: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		checkboxClass: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		checkboxStyle: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		checkboxBoxClass: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		checkboxBoxStyle: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		checkboxCoreClass: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		checkboxCoreStyle: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		actionAddonClass: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		actionAddonStyle: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		childrenClass: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		childrenStyle: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		subGroupClass: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		subGroupStyle: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
 		] }
 	},
 	setup(e, { emit: t }) {
@@ -4914,18 +5078,24 @@ var Qn = ["for"], $n = /* @__PURE__ */ I({
 		return (e, t) => {
 			let r = pe("st-tree-node", !0);
 			return H(), k(ar, {
+				class: B(a.subGroupClass),
 				disabled: m.value,
 				indent: a.indent,
+				style: V(a.subGroupStyle),
 				value: o.value
 			}, {
 				default: $(() => [F(Gn, {
-					class: B(["st-tree-node", q(n).class]),
+					class: B(["st-tree-node", [a.nodeClass, q(n).class]]),
 					disabled: m.value,
-					style: V(q(n).style),
+					style: V([a.nodeStyle, q(n).style]),
 					value: o.value
 				}, {
 					default: $(() => [
-						F(nn, { align: "inline-start" }, {
+						F(nn, {
+							class: B(["st-tree-arrow-addon", a.arrowAddonClass]),
+							style: V(a.arrowAddonStyle),
+							align: "inline-start"
+						}, {
 							default: $(() => [F(Kn, {
 								class: B(a.arrowClass),
 								style: V(a.arrowStyle)
@@ -4934,14 +5104,30 @@ var Qn = ["for"], $n = /* @__PURE__ */ I({
 								_: 3
 							}, 8, ["class", "style"])]),
 							_: 3
-						}),
+						}, 8, ["class", "style"]),
 						l.value ? (H(), k(nn, {
 							key: 0,
+							class: B(["st-tree-checkbox-addon", a.checkboxAddonClass]),
+							style: V(a.checkboxAddonStyle),
 							align: "inline-start"
 						}, {
-							default: $(() => [F(nr)]),
+							default: $(() => [F(nr, {
+								"box-class": a.checkboxBoxClass,
+								"box-style": a.checkboxBoxStyle,
+								class: B(a.checkboxClass),
+								"core-class": a.checkboxCoreClass,
+								"core-style": a.checkboxCoreStyle,
+								style: V(a.checkboxStyle)
+							}, null, 8, [
+								"box-class",
+								"box-style",
+								"class",
+								"core-class",
+								"core-style",
+								"style"
+							])]),
 							_: 1
-						})) : A("", !0),
+						}, 8, ["class", "style"])) : A("", !0),
 						F(qn, {
 							class: B(a.labelClass),
 							style: V(a.labelStyle)
@@ -4951,11 +5137,13 @@ var Qn = ["for"], $n = /* @__PURE__ */ I({
 						}, 8, ["class", "style"]),
 						u.value ? (H(), k(nn, {
 							key: 1,
+							class: B(["st-tree-action-addon", a.actionAddonClass]),
+							style: V(a.actionAddonStyle),
 							align: "inline-end"
 						}, {
 							default: $(() => [G(e.$slots, "action", { item: a.node })]),
 							_: 3
-						})) : A("", !0)
+						}, 8, ["class", "style"])) : A("", !0)
 					]),
 					_: 3
 				}, 8, [
@@ -4963,7 +5151,11 @@ var Qn = ["for"], $n = /* @__PURE__ */ I({
 					"disabled",
 					"style",
 					"value"
-				]), p.value ? (H(), k(ir, { key: 0 }, {
+				]), p.value ? (H(), k(ir, {
+					key: 0,
+					class: B(a.childrenClass),
+					style: V(a.childrenStyle)
+				}, {
 					default: $(() => [(H(!0), j(E, null, W(c.value, (t) => (H(), k(r, R({ ref_for: !0 }, a, {
 						key: t[a.valueKey],
 						node: t
@@ -4972,11 +5164,13 @@ var Qn = ["for"], $n = /* @__PURE__ */ I({
 						fn: $((n) => [G(e.$slots, t, R({ ref_for: !0 }, n))])
 					}))]), 1040, ["node"]))), 128))]),
 					_: 3
-				})) : A("", !0)]),
+				}, 8, ["class", "style"])) : A("", !0)]),
 				_: 3
 			}, 8, [
+				"class",
 				"disabled",
 				"indent",
+				"style",
 				"value"
 			]);
 		};
@@ -5152,6 +5346,132 @@ var Qn = ["for"], $n = /* @__PURE__ */ I({
 			String,
 			Object,
 			Array
+		] },
+		nodeClass: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		nodeStyle: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		arrowAddonClass: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		arrowAddonStyle: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		checkboxAddonClass: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		checkboxAddonStyle: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		checkboxClass: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		checkboxStyle: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		checkboxBoxClass: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		checkboxBoxStyle: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		checkboxCoreClass: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		checkboxCoreStyle: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		actionAddonClass: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		actionAddonStyle: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		childrenClass: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		childrenStyle: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		subGroupClass: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		subGroupStyle: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
 		] }
 	}, {
 		modelValue: {},
@@ -5315,7 +5635,25 @@ var Qn = ["for"], $n = /* @__PURE__ */ I({
 			default: $(() => [x.value.length > 0 ? (H(!0), j(E, { key: 0 }, W(x.value, (t) => (H(), k(or, {
 				"arrow-class": o.arrowClass,
 				"arrow-style": o.arrowStyle,
+				"action-addon-class": o.actionAddonClass,
+				"action-addon-style": o.actionAddonStyle,
+				"arrow-addon-class": o.arrowAddonClass,
+				"arrow-addon-style": o.arrowAddonStyle,
+				"checkbox-addon-class": o.checkboxAddonClass,
+				"checkbox-addon-style": o.checkboxAddonStyle,
+				"checkbox-box-class": o.checkboxBoxClass,
+				"checkbox-box-style": o.checkboxBoxStyle,
+				"checkbox-class": o.checkboxClass,
+				"checkbox-core-class": o.checkboxCoreClass,
+				"checkbox-core-style": o.checkboxCoreStyle,
+				"checkbox-style": o.checkboxStyle,
+				"children-class": o.childrenClass,
 				"children-key": o.childrenKey,
+				"children-style": o.childrenStyle,
+				"node-class": o.nodeClass,
+				"node-style": o.nodeStyle,
+				"sub-group-class": o.subGroupClass,
+				"sub-group-style": o.subGroupStyle,
 				indent: o.indent,
 				key: g(t),
 				"label-class": o.labelClass,
@@ -5326,17 +5664,7 @@ var Qn = ["for"], $n = /* @__PURE__ */ I({
 			}, N({ _: 2 }, [W(h.value, (t) => ({
 				name: t,
 				fn: $((n) => [G(e.$slots, t, R({ ref_for: !0 }, n))])
-			}))]), 1032, [
-				"arrow-class",
-				"arrow-style",
-				"children-key",
-				"indent",
-				"label-class",
-				"label-key",
-				"label-style",
-				"node",
-				"value-key"
-			]))), 128)) : i.empty ? G(e.$slots, "empty", {}, void 0, void 0, 1) : (H(), k(ur, { key: 2 }))]),
+			}))]), 1032, /* @__PURE__ */ "arrow-class.arrow-style.action-addon-class.action-addon-style.arrow-addon-class.arrow-addon-style.checkbox-addon-class.checkbox-addon-style.checkbox-box-class.checkbox-box-style.checkbox-class.checkbox-core-class.checkbox-core-style.checkbox-style.children-class.children-key.children-style.node-class.node-style.sub-group-class.sub-group-style.indent.label-class.label-key.label-style.node.value-key".split(".")))), 128)) : i.empty ? G(e.$slots, "empty", {}, void 0, void 0, 1) : (H(), k(ur, { key: 2 }))]),
 			_: 3
 		}, 8, [
 			"modelValue",
@@ -11587,6 +11915,20 @@ var Xo = [
 			String,
 			Object,
 			Array
+		] },
+		shortcutsItemClass: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		shortcutsItemStyle: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
 		] }
 	},
 	emits: ["select"],
@@ -11597,15 +11939,16 @@ var Xo = [
 			class: B(q(l)(i.value, n.class)),
 			style: V(n.style)
 		}, [(H(!0), j(E, null, W(n.shortcuts, (e) => (H(), j("button", {
-			class: B(q(Fo)({
+			class: B(q(l)(q(Fo)({
 				shape: n.shape,
 				tone: n.isActive?.(e) ? "active" : "normal"
-			})),
+			}), n.shortcutsItemClass)),
 			disabled: n.disabled,
 			key: e.label,
+			style: V(n.shortcutsItemStyle),
 			type: "button",
 			onClick: (t) => r("select", e)
-		}, K(e.label), 11, ls))), 128))], 6)) : A("", !0);
+		}, K(e.label), 15, ls))), 128))], 6)) : A("", !0);
 	}
 }), ds = /* @__PURE__ */ I({
 	name: "StPickerWeek",
@@ -11701,14 +12044,28 @@ var Xo = [
 			Object,
 			Array
 		] },
-		quickClass: { type: [
+		shortcutsBodyClass: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		shortcutsBodyStyle: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		shortcutsItemClass: { type: [
 			Boolean,
 			null,
 			String,
 			Object,
 			Array
 		] },
-		quickStyle: { type: [
+		shortcutsItemStyle: { type: [
 			Boolean,
 			null,
 			String,
@@ -11899,14 +12256,18 @@ var Xo = [
 		}, [
 			y.value.length > 0 ? (H(), k(us, {
 				key: 0,
-				class: B(r.quickClass),
+				class: B(r.shortcutsBodyClass),
 				"is-active": P,
 				shortcuts: y.value,
-				style: V(r.quickStyle),
+				"shortcuts-item-class": r.shortcutsItemClass,
+				"shortcuts-item-style": r.shortcutsItemStyle,
+				style: V(r.shortcutsBodyStyle),
 				onSelect: I
 			}, null, 8, [
 				"class",
 				"shortcuts",
+				"shortcuts-item-class",
+				"shortcuts-item-style",
 				"style"
 			])) : A("", !0),
 			M("div", { class: B(r.range ? "flex" : "") }, [(H(!0), j(E, null, W(m.value, (n) => (H(), j("div", {
@@ -12145,14 +12506,28 @@ var hs = /* @__PURE__ */ I({
 			Object,
 			Array
 		] },
-		quickClass: { type: [
+		shortcutsBodyClass: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		shortcutsBodyStyle: { type: [
 			Boolean,
 			null,
 			String,
 			Object,
 			Array
 		] },
-		quickStyle: { type: [
+		shortcutsItemClass: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		shortcutsItemStyle: { type: [
 			Boolean,
 			null,
 			String,
@@ -12274,32 +12649,48 @@ var hs = /* @__PURE__ */ I({
 			content: $(() => [F(fs, {
 				ref_key: "panelRef",
 				ref: u,
+				class: B(i.panelClass),
 				"disabled-date": i.disabledDate,
+				"footer-class": i.footerClass,
+				"footer-style": i.footerStyle,
 				marks: i.marks,
 				"max-date": m.value,
 				"max-span": i.maxSpan,
 				"min-date": p.value,
+				"shortcuts-body-class": i.shortcutsBodyClass,
+				"shortcuts-body-style": i.shortcutsBodyStyle,
 				range: i.range,
 				"range-value": f.value,
 				shortcuts: i.shortcuts,
+				"shortcuts-item-class": i.shortcutsItemClass,
+				"shortcuts-item-style": i.shortcutsItemStyle,
 				"show-clear": i.showClear,
 				"show-footer": i.showFooter,
+				style: V(i.panelStyle),
 				value: d.value,
 				onClear: ee,
 				onRangePreview: D,
 				onSelect: T,
 				onSelectRange: E
 			}, null, 8, [
+				"class",
 				"disabled-date",
+				"footer-class",
+				"footer-style",
 				"marks",
 				"max-date",
 				"max-span",
 				"min-date",
+				"shortcuts-body-class",
+				"shortcuts-body-style",
 				"range",
 				"range-value",
 				"shortcuts",
+				"shortcuts-item-class",
+				"shortcuts-item-style",
 				"show-clear",
 				"show-footer",
+				"style",
 				"value"
 			])]),
 			_: 3
@@ -12431,14 +12822,28 @@ var hs = /* @__PURE__ */ I({
 			Object,
 			Array
 		] },
-		quickClass: { type: [
+		shortcutsBodyClass: { type: [
 			Boolean,
 			null,
 			String,
 			Object,
 			Array
 		] },
-		quickStyle: { type: [
+		shortcutsBodyStyle: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		shortcutsItemClass: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		shortcutsItemStyle: { type: [
 			Boolean,
 			null,
 			String,
@@ -12597,7 +13002,8 @@ var hs = /* @__PURE__ */ I({
 			"onUpdate:modelValue": t[3] ||= (e) => u.value = e,
 			class: B(q(l)("h-auto", i.drawerClass)),
 			closable: !1,
-			"content-class": q(l)("p-0", i.contentClass),
+			"content-class": q(l)("p-0", i.contentClass, i.panelClass),
+			"content-style": i.panelStyle,
 			style: V(i.drawerStyle),
 			title: b.value,
 			placement: "bottom",
@@ -12624,15 +13030,19 @@ var hs = /* @__PURE__ */ I({
 			default: $(() => [
 				y.value.length > 0 ? (H(), k(us, {
 					key: 0,
-					class: B(i.quickClass),
+					class: B(i.shortcutsBodyClass),
 					"is-active": re,
 					shortcuts: y.value,
-					style: V(i.quickStyle),
+					"shortcuts-item-class": i.shortcutsItemClass,
+					"shortcuts-item-style": i.shortcutsItemStyle,
+					style: V(i.shortcutsBodyStyle),
 					shape: "block",
 					onSelect: ie
 				}, null, 8, [
 					"class",
 					"shortcuts",
+					"shortcuts-item-class",
+					"shortcuts-item-style",
 					"style"
 				])) : A("", !0),
 				M("div", _s, [
@@ -12703,6 +13113,7 @@ var hs = /* @__PURE__ */ I({
 			"modelValue",
 			"class",
 			"content-class",
+			"content-style",
 			"style",
 			"title"
 		])], 64));
@@ -12761,14 +13172,28 @@ var hs = /* @__PURE__ */ I({
 			Object,
 			Array
 		] },
-		quickClass: { type: [
+		shortcutsBodyClass: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		shortcutsBodyStyle: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		shortcutsItemClass: { type: [
 			Boolean,
 			null,
 			String,
 			Object,
 			Array
 		] },
-		quickStyle: { type: [
+		shortcutsItemStyle: { type: [
 			Boolean,
 			null,
 			String,
@@ -13233,14 +13658,28 @@ var ks = { class: "px-1.5 pb-1.5" }, As = [
 			Object,
 			Array
 		] },
-		quickClass: { type: [
+		shortcutsBodyClass: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		shortcutsBodyStyle: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		shortcutsItemClass: { type: [
 			Boolean,
 			null,
 			String,
 			Object,
 			Array
 		] },
-		quickStyle: { type: [
+		shortcutsItemStyle: { type: [
 			Boolean,
 			null,
 			String,
@@ -13397,14 +13836,18 @@ var ks = { class: "px-1.5 pb-1.5" }, As = [
 		}, [
 			_.value.length > 0 ? (H(), k(us, {
 				key: 0,
-				class: B(r.quickClass),
+				class: B(r.shortcutsBodyClass),
 				"is-active": ee,
 				shortcuts: _.value,
-				style: V(r.quickStyle),
+				"shortcuts-item-class": r.shortcutsItemClass,
+				"shortcuts-item-style": r.shortcutsItemStyle,
+				style: V(r.shortcutsBodyStyle),
 				onSelect: te
 			}, null, 8, [
 				"class",
 				"shortcuts",
+				"shortcuts-item-class",
+				"shortcuts-item-style",
 				"style"
 			])) : A("", !0),
 			r.range ? (H(), j("div", Ns, [(H(), j(E, null, W(["start", "end"], (e) => M("div", {
@@ -13558,14 +14001,28 @@ var ks = { class: "px-1.5 pb-1.5" }, As = [
 			Object,
 			Array
 		] },
-		quickClass: { type: [
+		shortcutsBodyClass: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		shortcutsBodyStyle: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		shortcutsItemClass: { type: [
 			Boolean,
 			null,
 			String,
 			Object,
 			Array
 		] },
-		quickStyle: { type: [
+		shortcutsItemStyle: { type: [
 			Boolean,
 			null,
 			String,
@@ -13708,24 +14165,30 @@ var ks = { class: "px-1.5 pb-1.5" }, As = [
 			content: $(() => [F(Ps, {
 				ref_key: "panelRef",
 				ref: u,
+				class: B(i.panelClass),
 				date: i.date,
 				disabled: i.disabled,
 				"disabled-time": i.disabledTime,
+				"footer-class": i.footerClass,
+				"footer-style": i.footerStyle,
 				"hour-step": i.hourStep,
 				labels: i.labels,
 				"max-time": i.maxTime,
 				"min-time": i.minTime,
 				"minute-step": i.minuteStep,
-				"quick-class": i.quickClass,
-				"quick-style": i.quickStyle,
+				"shortcuts-body-class": i.shortcutsBodyClass,
+				"shortcuts-body-style": i.shortcutsBodyStyle,
 				range: i.range,
 				"range-value": f.value,
 				"second-step": i.secondStep,
 				shortcuts: i.shortcuts,
+				"shortcuts-item-class": i.shortcutsItemClass,
+				"shortcuts-item-style": i.shortcutsItemStyle,
 				"show-clear": i.showClear,
 				"show-hour": i.showHour,
 				"show-minute": i.showMinute,
 				"show-second": i.showSecond,
+				style: V(i.panelStyle),
 				value: d.value,
 				onClear: j,
 				onConfirm: te,
@@ -13734,24 +14197,30 @@ var ks = { class: "px-1.5 pb-1.5" }, As = [
 				onShortcut: D,
 				onShortcutRange: ee
 			}, null, 8, [
+				"class",
 				"date",
 				"disabled",
 				"disabled-time",
+				"footer-class",
+				"footer-style",
 				"hour-step",
 				"labels",
 				"max-time",
 				"min-time",
 				"minute-step",
-				"quick-class",
-				"quick-style",
+				"shortcuts-body-class",
+				"shortcuts-body-style",
 				"range",
 				"range-value",
 				"second-step",
 				"shortcuts",
+				"shortcuts-item-class",
+				"shortcuts-item-style",
 				"show-clear",
 				"show-hour",
 				"show-minute",
 				"show-second",
+				"style",
 				"value"
 			])]),
 			_: 3
@@ -14058,14 +14527,28 @@ var ks = { class: "px-1.5 pb-1.5" }, As = [
 			Object,
 			Array
 		] },
-		quickClass: { type: [
+		shortcutsBodyClass: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		shortcutsBodyStyle: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		shortcutsItemClass: { type: [
 			Boolean,
 			null,
 			String,
 			Object,
 			Array
 		] },
-		quickStyle: { type: [
+		shortcutsItemStyle: { type: [
 			Boolean,
 			null,
 			String,
@@ -14296,7 +14779,8 @@ var ks = { class: "px-1.5 pb-1.5" }, As = [
 			"onUpdate:modelValue": t[1] ||= (e) => c.value = e,
 			class: B(q(l)("h-auto", i.drawerClass)),
 			closable: !1,
-			"content-class": q(l)("p-0", i.contentClass),
+			"content-class": q(l)("p-0", i.contentClass, i.panelClass),
+			"content-style": i.panelStyle,
 			style: V(i.drawerStyle),
 			title: w.value,
 			placement: "bottom",
@@ -14322,15 +14806,19 @@ var ks = { class: "px-1.5 pb-1.5" }, As = [
 			])]),
 			default: $(() => [x.value.length > 0 ? (H(), k(us, {
 				key: 0,
-				class: B(i.quickClass),
+				class: B(i.shortcutsBodyClass),
 				"is-active": ce,
 				shortcuts: x.value,
-				style: V(i.quickStyle),
+				"shortcuts-item-class": i.shortcutsItemClass,
+				"shortcuts-item-style": i.shortcutsItemStyle,
+				style: V(i.shortcutsBodyStyle),
 				shape: "block",
 				onSelect: le
 			}, null, 8, [
 				"class",
 				"shortcuts",
+				"shortcuts-item-class",
+				"shortcuts-item-style",
 				"style"
 			])) : A("", !0), F(Ws, {
 				class: "px-4",
@@ -14364,6 +14852,7 @@ var ks = { class: "px-1.5 pb-1.5" }, As = [
 			"modelValue",
 			"class",
 			"content-class",
+			"content-style",
 			"style",
 			"title"
 		])], 64));
@@ -14427,14 +14916,28 @@ var ks = { class: "px-1.5 pb-1.5" }, As = [
 			Object,
 			Array
 		] },
-		quickClass: { type: [
+		shortcutsBodyClass: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		shortcutsBodyStyle: { type: [
 			Boolean,
 			null,
 			String,
 			Object,
 			Array
 		] },
-		quickStyle: { type: [
+		shortcutsItemClass: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		shortcutsItemStyle: { type: [
 			Boolean,
 			null,
 			String,
@@ -14619,14 +15122,28 @@ var ks = { class: "px-1.5 pb-1.5" }, As = [
 			Object,
 			Array
 		] },
-		quickClass: { type: [
+		shortcutsBodyClass: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		shortcutsBodyStyle: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		shortcutsItemClass: { type: [
 			Boolean,
 			null,
 			String,
 			Object,
 			Array
 		] },
-		quickStyle: { type: [
+		shortcutsItemStyle: { type: [
 			Boolean,
 			null,
 			String,
@@ -14761,14 +15278,18 @@ var ks = { class: "px-1.5 pb-1.5" }, As = [
 		}, [
 			g.value.length > 0 ? (H(), k(us, {
 				key: 0,
-				class: B(r.quickClass),
+				class: B(r.shortcutsBodyClass),
 				"is-active": N,
 				shortcuts: g.value,
-				style: V(r.quickStyle),
+				"shortcuts-item-class": r.shortcutsItemClass,
+				"shortcuts-item-style": r.shortcutsItemStyle,
+				style: V(r.shortcutsBodyStyle),
 				onSelect: P
 			}, null, 8, [
 				"class",
 				"shortcuts",
+				"shortcuts-item-class",
+				"shortcuts-item-style",
 				"style"
 			])) : A("", !0),
 			F(fs, {
@@ -14968,14 +15489,28 @@ var ks = { class: "px-1.5 pb-1.5" }, As = [
 			Object,
 			Array
 		] },
-		quickClass: { type: [
+		shortcutsBodyClass: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		shortcutsBodyStyle: { type: [
 			Boolean,
 			null,
 			String,
 			Object,
 			Array
 		] },
-		quickStyle: { type: [
+		shortcutsItemClass: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		shortcutsItemStyle: { type: [
 			Boolean,
 			null,
 			String,
@@ -15114,6 +15649,7 @@ var ks = { class: "px-1.5 pb-1.5" }, As = [
 				ref_key: "panelRef",
 				ref: u,
 				"cell-size": d.value.cellSize,
+				class: B(i.panelClass),
 				"confirm-text": i.confirmText,
 				"date-text": i.dateText,
 				disabled: i.disabled,
@@ -15130,17 +15666,20 @@ var ks = { class: "px-1.5 pb-1.5" }, As = [
 				"min-date": d.value.minDate,
 				"min-time": f.value.minTime,
 				"minute-step": f.value.minuteStep,
-				"quick-class": i.quickClass,
-				"quick-style": i.quickStyle,
+				"shortcuts-body-class": i.shortcutsBodyClass,
+				"shortcuts-body-style": i.shortcutsBodyStyle,
 				range: i.range,
 				"range-value": m.value,
 				"second-step": f.value.secondStep,
 				shortcuts: i.shortcuts,
+				"shortcuts-item-class": i.shortcutsItemClass,
+				"shortcuts-item-style": i.shortcutsItemStyle,
 				"show-clear": i.showClear,
 				"show-footer": i.showFooter,
 				"show-hour": f.value.showHour,
 				"show-minute": f.value.showMinute,
 				"show-second": f.value.showSecond,
+				style: V(i.panelStyle),
 				"time-format": f.value.format,
 				"time-size": f.value.timeSize,
 				"time-text": i.timeText,
@@ -15148,7 +15687,7 @@ var ks = { class: "px-1.5 pb-1.5" }, As = [
 				onClear: D,
 				onConfirm: T,
 				onConfirmRange: E
-			}, null, 8, /* @__PURE__ */ "cell-size.confirm-text.date-text.disabled.disabled-date.disabled-time.footer-class.footer-style.format.hour-step.marks.max-date.max-span.max-time.min-date.min-time.minute-step.quick-class.quick-style.range.range-value.second-step.shortcuts.show-clear.show-footer.show-hour.show-minute.show-second.time-format.time-size.time-text.value".split("."))]),
+			}, null, 8, /* @__PURE__ */ "cell-size.class.confirm-text.date-text.disabled.disabled-date.disabled-time.footer-class.footer-style.format.hour-step.marks.max-date.max-span.max-time.min-date.min-time.minute-step.shortcuts-body-class.shortcuts-body-style.range.range-value.second-step.shortcuts.shortcuts-item-class.shortcuts-item-style.show-clear.show-footer.show-hour.show-minute.show-second.style.time-format.time-size.time-text.value".split("."))]),
 			_: 3
 		}, 8, [
 			"visible",
@@ -15239,14 +15778,28 @@ var ks = { class: "px-1.5 pb-1.5" }, As = [
 			Object,
 			Array
 		] },
-		quickClass: { type: [
+		shortcutsBodyClass: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		shortcutsBodyStyle: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		shortcutsItemClass: { type: [
 			Boolean,
 			null,
 			String,
 			Object,
 			Array
 		] },
-		quickStyle: { type: [
+		shortcutsItemStyle: { type: [
 			Boolean,
 			null,
 			String,
@@ -15477,7 +16030,8 @@ var ks = { class: "px-1.5 pb-1.5" }, As = [
 			"onUpdate:modelValue": t[3] ||= (e) => d.value = e,
 			class: B(q(l)("h-auto", i.drawerClass)),
 			closable: !1,
-			"content-class": q(l)("p-0", i.contentClass),
+			"content-class": q(l)("p-0", i.contentClass, i.panelClass),
+			"content-style": i.panelStyle,
 			style: V(i.drawerStyle),
 			title: I.value,
 			placement: "bottom",
@@ -15510,15 +16064,19 @@ var ks = { class: "px-1.5 pb-1.5" }, As = [
 			default: $(() => [
 				f.value === "date" && ee.value.length > 0 ? (H(), k(us, {
 					key: 0,
-					class: B(i.quickClass),
+					class: B(i.shortcutsBodyClass),
 					"is-active": ge,
 					shortcuts: ee.value,
-					style: V(i.quickStyle),
+					"shortcuts-item-class": i.shortcutsItemClass,
+					"shortcuts-item-style": i.shortcutsItemStyle,
+					style: V(i.shortcutsBodyStyle),
 					shape: "block",
 					onSelect: _e
 				}, null, 8, [
 					"class",
 					"shortcuts",
+					"shortcuts-item-class",
+					"shortcuts-item-style",
 					"style"
 				])) : A("", !0),
 				f.value === "time" && te.value.length > 0 ? (H(), k(us, {
@@ -15591,6 +16149,7 @@ var ks = { class: "px-1.5 pb-1.5" }, As = [
 			"modelValue",
 			"class",
 			"content-class",
+			"content-style",
 			"style",
 			"title"
 		])], 64));
@@ -15649,14 +16208,28 @@ var ks = { class: "px-1.5 pb-1.5" }, As = [
 			Object,
 			Array
 		] },
-		quickClass: { type: [
+		shortcutsBodyClass: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		shortcutsBodyStyle: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		shortcutsItemClass: { type: [
 			Boolean,
 			null,
 			String,
 			Object,
 			Array
 		] },
-		quickStyle: { type: [
+		shortcutsItemStyle: { type: [
 			Boolean,
 			null,
 			String,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "straw-ui-vue",
-	"version": "0.1.62",
+	"version": "0.1.64",
 	"type": "module",
 	"main": "./dist/straw-ui.js",
 	"module": "./dist/straw-ui.js",