niuma-ui 1.1.11 → 1.2.0

package/dist/components/RsSelect.impl.js

@@ -0,0 +1,506 @@
+import { useRsI18n } from "../composables/useRsI18n.js";
+import RsIcon_default from "./RsIcon.js";
+import { RS_COMPONENT_SIZE_ICON_PX } from "../theme/types.js";
+import { buildLocalInputRules, runFormFieldRules } from "./form-rules.js";
+import { isRsFormItemBoundControl, useRsFormContext, useRsFormField, useRsFormItemContext } from "./form-utils.js";
+import { useResolvedRsComponentSize } from "./resolve-size.js";
+import { rsRadiusCss, useResolvedRsRadius } from "./resolve-radius.js";
+import { ComboboxAnchor, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxItemIndicator, ComboboxLabel, ComboboxPortal, ComboboxRoot, ComboboxTrigger, ComboboxViewport, ComboboxVirtualizer } from "./reka.js";
+import { isSelectOptionGroup, toComboboxValue } from "./select-utils.js";
+import { useRsSelect } from "./use-rs-select.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, isRef, mergeModels, mergeProps, normalizeClass, normalizeStyle, openBlock, ref, renderList, renderSlot, toDisplayString, unref, useAttrs, useModel, withCtx, withModifiers } from "vue";
+//#region src/components/RsSelect.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = {
+	key: 0,
+	class: "rs-select__prefix"
+};
+var _hoisted_2 = {
+	key: 1,
+	class: "rs-select__value rs-select__value--multiple"
+};
+var _hoisted_3 = { class: "rs-select__tag-label" };
+var _hoisted_4 = ["aria-label", "onClick"];
+var _hoisted_5 = ["title"];
+var _hoisted_6 = {
+	key: 1,
+	class: "rs-select__placeholder"
+};
+var _hoisted_7 = {
+	key: 2,
+	class: "rs-select__value"
+};
+var _hoisted_8 = {
+	key: 0,
+	class: "rs-select__single-label"
+};
+var _hoisted_9 = {
+	key: 1,
+	class: "rs-select__placeholder"
+};
+var _hoisted_10 = { class: "rs-select__actions" };
+var _hoisted_11 = ["aria-label"];
+var _hoisted_12 = {
+	key: 1,
+	class: "rs-select__suffix"
+};
+var _hoisted_13 = {
+	key: 1,
+	class: "rs-select__search-bar"
+};
+var _hoisted_14 = { class: "rs-select__search-wrap" };
+var _hoisted_15 = {
+	key: 2,
+	class: "rs-select__status"
+};
+var _hoisted_16 = { class: "rs-select__item-label" };
+var _hoisted_17 = { class: "rs-select__item-label" };
+var _hoisted_18 = { class: "rs-select__item-label" };
+var _hoisted_19 = { class: "rs-select__item-label" };
+var RsSelect_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	inheritAttrs: false,
+	__name: "RsSelect",
+	props: /*@__PURE__*/ mergeModels({
+		options: {},
+		placeholder: {},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		id: {},
+		searchable: {
+			type: Boolean,
+			default: false
+		},
+		creatable: {
+			type: Boolean,
+			default: false
+		},
+		multiple: {},
+		required: {
+			type: Boolean,
+			default: false
+		},
+		name: {},
+		clearable: {
+			type: Boolean,
+			default: false
+		},
+		virtual: {
+			type: Boolean,
+			default: false
+		},
+		virtualThreshold: { default: 50 },
+		remote: {
+			type: Boolean,
+			default: false
+		},
+		loading: {
+			type: Boolean,
+			default: false
+		},
+		searchPlaceholder: {},
+		emptyText: {},
+		loadingText: {},
+		size: {},
+		radius: {},
+		matchTriggerWidth: {
+			type: Boolean,
+			default: false
+		},
+		block: {
+			type: Boolean,
+			default: false
+		},
+		invalid: { type: Boolean },
+		showValidateMessage: { type: Boolean },
+		filterOption: {
+			type: [Function, Boolean],
+			default: true
+		},
+		optionFilterProp: { default: "label" },
+		maxTagCount: {},
+		maxTagPlaceholder: {},
+		multipleLimit: {},
+		labelInValue: {},
+		filterSort: {},
+		maxTagTextLength: {},
+		maxTagTooltip: {
+			type: Boolean,
+			default: true
+		},
+		tokenSeparators: {},
+		autoClearSearchValue: {
+			type: Boolean,
+			default: true
+		},
+		fillSearchWithValue: {
+			type: Boolean,
+			default: false
+		},
+		showArrow: {
+			type: Boolean,
+			default: true
+		},
+		listHeight: { default: 256 },
+		placement: { default: "bottom" },
+		popupClassName: {},
+		status: { default: "" },
+		fieldNames: {},
+		optionLabelProp: { default: "label" },
+		getPopupContainer: {}
+	}, {
+		"modelValue": { default: "" },
+		"modelModifiers": {},
+		"open": {
+			type: Boolean,
+			default: false
+		},
+		"openModifiers": {},
+		"searchValue": { default: "" },
+		"searchValueModifiers": {}
+	}),
+	emits: /*@__PURE__*/ mergeModels([
+		"search",
+		"select",
+		"deselect",
+		"clear"
+	], [
+		"update:modelValue",
+		"update:open",
+		"update:searchValue"
+	]),
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const model = useModel(__props, "modelValue");
+		const open = useModel(__props, "open");
+		const searchQuery = useModel(__props, "searchValue");
+		const props = __props;
+		const emit = __emit;
+		const { t } = useRsI18n();
+		const attrs = useAttrs();
+		const formContext = useRsFormContext();
+		const formItem = useRsFormItemContext();
+		const boundToItem = computed(() => isRsFormItemBoundControl(formItem, {
+			id: props.id,
+			name: props.name
+		}));
+		const anchorRef = ref(null);
+		const { resolvedPlaceholder, resolvedSearchPlaceholder, resolvedEmptyText, resolvedLoadingText, isSearchable, labelMap, useVirtual, useManualFilter, displayOptions, createValue, canCreate, createOptionLabel, virtualValues, selectedValues, hasValue, visibleTagTokens, omittedTagCount, omittedTagLabel, omittedTagTitle, singleDisplayLabel, comboboxModel, tokenLabel, truncateTagLabel, optionFromToken, optionOrCreate, isOptionLimited, isTokenDisabled, restoreTokenValue, onSearchKeydown, onClear, removeTag, setValue, resetSearch } = useRsSelect(props, model, open, searchQuery, emit, t);
+		const resolvedDisabled = computed(() => props.disabled || formContext?.disabled.value || false);
+		const resolvedSize = useResolvedRsComponentSize(() => props.size);
+		const resolvedRadius = useResolvedRsRadius(() => props.radius, "sm");
+		const triggerIconSize = computed(() => RS_COMPONENT_SIZE_ICON_PX[resolvedSize.value]);
+		const rootStyle = computed(() => ({
+			"--rs-select-radius": rsRadiusCss(resolvedRadius.value),
+			"--rs-select-list-height": `${props.listHeight}px`
+		}));
+		const portalTo = computed(() => {
+			if (!props.getPopupContainer) return void 0;
+			const raw = anchorRef.value;
+			const el = raw instanceof HTMLElement ? raw : raw?.$el;
+			return props.getPopupContainer(el instanceof HTMLElement ? el : void 0);
+		});
+		const autoMessage = ref("");
+		const isInvalid = computed(() => Boolean(props.invalid || props.status === "error" || boundToItem.value && formItem?.invalid.value || autoMessage.value));
+		const isWarning = computed(() => props.status === "warning" && !isInvalid.value);
+		function clearValidation() {
+			resetSearch();
+			autoMessage.value = "";
+		}
+		async function runValidate(trigger = "submit") {
+			const formRules = formContext?.getFieldRules(props.name) ?? [];
+			const localRules = buildLocalInputRules({ required: props.required });
+			const rules = [...formRules, ...localRules];
+			if (!rules.length) {
+				autoMessage.value = "";
+				return {
+					valid: true,
+					name: props.name
+				};
+			}
+			const result = await runFormFieldRules(model.value, rules, { trigger });
+			autoMessage.value = result.message ?? "";
+			return {
+				valid: result.valid,
+				message: result.message,
+				name: props.name
+			};
+		}
+		useRsFormField(() => ({
+			get name() {
+				return props.name;
+			},
+			getValue: () => model.value,
+			setValue,
+			validate: (trigger) => runValidate(trigger ?? "submit"),
+			clearValidation,
+			setError: (message) => {
+				autoMessage.value = message;
+			}
+		}));
+		__expose({
+			setValue,
+			clearValidation,
+			validate: runValidate
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(ComboboxRoot), {
+				modelValue: unref(comboboxModel),
+				"onUpdate:modelValue": _cache[6] || (_cache[6] = ($event) => isRef(comboboxModel) ? comboboxModel.value = $event : null),
+				open: open.value,
+				"onUpdate:open": _cache[7] || (_cache[7] = ($event) => open.value = $event),
+				class: normalizeClass(["rs-select", {
+					"rs-select--multiple": __props.multiple,
+					"rs-select--searchable": unref(isSearchable),
+					"rs-select--creatable": __props.creatable,
+					"rs-select--block": __props.block,
+					[`rs-select--${unref(resolvedSize)}`]: true
+				}]),
+				style: normalizeStyle(rootStyle.value),
+				multiple: __props.multiple,
+				disabled: resolvedDisabled.value,
+				"ignore-filter": unref(useManualFilter),
+				"reset-search-term-on-select": __props.autoClearSearchValue,
+				"open-on-click": ""
+			}, {
+				default: withCtx(() => [createVNode(unref(ComboboxAnchor), {
+					ref_key: "anchorRef",
+					ref: anchorRef,
+					"as-child": ""
+				}, {
+					default: withCtx(() => [createVNode(unref(ComboboxTrigger), mergeProps(unref(attrs), {
+						id: __props.id,
+						class: ["rs-select__trigger", {
+							"rs-select__trigger--invalid": isInvalid.value,
+							"rs-select__trigger--warning": isWarning.value
+						}],
+						"aria-invalid": isInvalid.value || void 0
+					}), {
+						default: withCtx(() => [
+							_ctx.$slots.prefix ? (openBlock(), createElementBlock("span", _hoisted_1, [renderSlot(_ctx.$slots, "prefix", {}, void 0, true)])) : createCommentVNode("", true),
+							__props.multiple ? (openBlock(), createElementBlock("span", _hoisted_2, [unref(hasValue) ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(visibleTagTokens), (value) => {
+								return openBlock(), createElementBlock("span", {
+									key: value,
+									class: "rs-select__tag"
+								}, [renderSlot(_ctx.$slots, "tag", {
+									value: unref(restoreTokenValue)(value),
+									label: unref(tokenLabel)(value),
+									closable: true
+								}, () => [createElementVNode("span", _hoisted_3, toDisplayString(unref(truncateTagLabel)(unref(tokenLabel)(value))), 1), createElementVNode("button", {
+									type: "button",
+									class: "rs-select__tag-remove",
+									"aria-label": unref(t)("select.clear"),
+									onPointerdown: _cache[0] || (_cache[0] = withModifiers(() => {}, ["stop"])),
+									onClick: ($event) => unref(removeTag)(value, $event)
+								}, [createVNode(RsIcon_default, {
+									name: "x",
+									size: 12
+								})], 40, _hoisted_4)], true)]);
+							}), 128)), unref(omittedTagCount) > 0 ? (openBlock(), createElementBlock("span", {
+								key: 0,
+								class: "rs-select__tag rs-select__tag--rest",
+								title: unref(omittedTagTitle)
+							}, [renderSlot(_ctx.$slots, "maxTagPlaceholder", { omitted: unref(omittedTagCount) }, () => [createTextVNode(toDisplayString(unref(omittedTagLabel)), 1)], true)], 8, _hoisted_5)) : createCommentVNode("", true)], 64)) : (openBlock(), createElementBlock("span", _hoisted_6, toDisplayString(unref(resolvedPlaceholder)), 1))])) : (openBlock(), createElementBlock("span", _hoisted_7, [unref(hasValue) ? (openBlock(), createElementBlock("span", _hoisted_8, toDisplayString(unref(singleDisplayLabel)), 1)) : (openBlock(), createElementBlock("span", _hoisted_9, toDisplayString(unref(resolvedPlaceholder)), 1))])),
+							createElementVNode("span", _hoisted_10, [__props.clearable && unref(hasValue) && !resolvedDisabled.value ? (openBlock(), createElementBlock("button", {
+								key: 0,
+								type: "button",
+								class: "rs-select__clear",
+								"aria-label": unref(t)("select.clear"),
+								onPointerdown: _cache[1] || (_cache[1] = withModifiers(() => {}, ["stop"])),
+								onClick: _cache[2] || (_cache[2] = (...args) => unref(onClear) && unref(onClear)(...args))
+							}, [renderSlot(_ctx.$slots, "clearIcon", {}, () => [createVNode(RsIcon_default, {
+								name: "x",
+								size: 14
+							})], true)], 40, _hoisted_11)) : createCommentVNode("", true), __props.showArrow ? (openBlock(), createElementBlock("span", _hoisted_12, [renderSlot(_ctx.$slots, "suffixIcon", {}, () => [createVNode(RsIcon_default, {
+								name: "chevron-down",
+								size: triggerIconSize.value,
+								class: "rs-select__icon"
+							}, null, 8, ["size"])], true)])) : createCommentVNode("", true)])
+						]),
+						_: 3
+					}, 16, [
+						"id",
+						"class",
+						"aria-invalid"
+					])]),
+					_: 3
+				}, 512), createVNode(unref(ComboboxPortal), { to: portalTo.value }, {
+					default: withCtx(() => [createVNode(unref(ComboboxContent), {
+						class: normalizeClass(["rs-select__content", [__props.popupClassName, { "rs-select__content--match-trigger": __props.matchTriggerWidth }]]),
+						style: normalizeStyle({ "--rs-select-list-height": `${__props.listHeight}px` }),
+						align: "start",
+						side: __props.placement,
+						"side-offset": 4,
+						position: "popper"
+					}, {
+						default: withCtx(() => [renderSlot(_ctx.$slots, "dropdownRender", {}, () => [
+							_ctx.$slots.header ? (openBlock(), createElementBlock("div", {
+								key: 0,
+								class: "rs-select__panel-header",
+								onMousedown: _cache[3] || (_cache[3] = withModifiers(() => {}, ["prevent"]))
+							}, [renderSlot(_ctx.$slots, "header", {}, void 0, true)], 32)) : createCommentVNode("", true),
+							unref(isSearchable) ? (openBlock(), createElementBlock("div", _hoisted_13, [createElementVNode("div", _hoisted_14, [createVNode(RsIcon_default, {
+								name: "search",
+								size: 14,
+								class: "rs-select__search-icon",
+								"aria-hidden": "true"
+							}), createVNode(unref(ComboboxInput), {
+								modelValue: searchQuery.value,
+								"onUpdate:modelValue": _cache[4] || (_cache[4] = ($event) => searchQuery.value = $event),
+								class: "rs-select__search",
+								placeholder: unref(resolvedSearchPlaceholder),
+								"auto-focus": "",
+								onKeydown: unref(onSearchKeydown)
+							}, null, 8, [
+								"modelValue",
+								"placeholder",
+								"onKeydown"
+							])])])) : createCommentVNode("", true),
+							__props.loading ? (openBlock(), createElementBlock("div", _hoisted_15, [renderSlot(_ctx.$slots, "loading", {}, () => [createTextVNode(toDisplayString(unref(resolvedLoadingText)), 1)], true)])) : createCommentVNode("", true),
+							!__props.loading && !unref(canCreate) ? (openBlock(), createBlock(unref(ComboboxEmpty), {
+								key: 3,
+								class: "rs-select__empty"
+							}, {
+								default: withCtx(() => [renderSlot(_ctx.$slots, "empty", {}, () => [createTextVNode(toDisplayString(unref(resolvedEmptyText)), 1)], true)]),
+								_: 3
+							})) : createCommentVNode("", true),
+							createVNode(unref(ComboboxViewport), { class: "rs-select__viewport" }, {
+								default: withCtx(() => [unref(useVirtual) ? (openBlock(), createBlock(unref(ComboboxVirtualizer), {
+									key: 0,
+									options: unref(virtualValues),
+									"text-content": (value) => unref(labelMap).get(String(value)) ?? String(value),
+									"estimate-size": 36
+								}, {
+									default: withCtx(({ option }) => [createVNode(unref(ComboboxItem), {
+										value: option,
+										disabled: unref(isTokenDisabled)(String(option)),
+										"text-value": unref(labelMap).get(String(option)) ?? String(option),
+										class: normalizeClass(["rs-select__item", { "rs-select__item--create": unref(canCreate) && String(option) === unref(createValue) }]),
+										title: unref(optionFromToken)(String(option))?.title
+									}, {
+										default: withCtx(() => [createElementVNode("span", _hoisted_16, [renderSlot(_ctx.$slots, "option", {
+											option: unref(optionOrCreate)(String(option)),
+											selected: unref(selectedValues).includes(String(option))
+										}, () => [createTextVNode(toDisplayString(unref(canCreate) && String(option) === unref(createValue) ? unref(createOptionLabel) : unref(labelMap).get(String(option)) ?? String(option)), 1)], true)]), createVNode(unref(ComboboxItemIndicator), { class: "rs-select__item-check" }, {
+											default: withCtx(() => [createVNode(RsIcon_default, {
+												name: "check",
+												size: 14
+											})]),
+											_: 1
+										})]),
+										_: 2
+									}, 1032, [
+										"value",
+										"disabled",
+										"text-value",
+										"class",
+										"title"
+									])]),
+									_: 3
+								}, 8, ["options", "text-content"])) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [unref(canCreate) ? (openBlock(), createBlock(unref(ComboboxItem), {
+									key: 0,
+									value: unref(createValue),
+									"text-value": unref(createValue),
+									class: "rs-select__item rs-select__item--create"
+								}, {
+									default: withCtx(() => [createElementVNode("span", _hoisted_17, toDisplayString(unref(createOptionLabel)), 1), createVNode(unref(ComboboxItemIndicator), { class: "rs-select__item-check" }, {
+										default: withCtx(() => [createVNode(RsIcon_default, {
+											name: "check",
+											size: 14
+										})]),
+										_: 1
+									})]),
+									_: 1
+								}, 8, ["value", "text-value"])) : createCommentVNode("", true), (openBlock(true), createElementBlock(Fragment, null, renderList(unref(displayOptions), (entry, index) => {
+									return openBlock(), createElementBlock(Fragment, { key: index }, [unref(isSelectOptionGroup)(entry) ? (openBlock(), createBlock(unref(ComboboxGroup), {
+										key: 0,
+										class: "rs-select__group"
+									}, {
+										default: withCtx(() => [createVNode(unref(ComboboxLabel), { class: "rs-select__group-label" }, {
+											default: withCtx(() => [createTextVNode(toDisplayString(entry.label), 1)]),
+											_: 2
+										}, 1024), (openBlock(true), createElementBlock(Fragment, null, renderList(entry.options, (opt) => {
+											return openBlock(), createBlock(unref(ComboboxItem), {
+												key: unref(toComboboxValue)(opt.value),
+												value: unref(toComboboxValue)(opt.value),
+												disabled: opt.disabled || unref(isOptionLimited)(opt),
+												"text-value": opt.label,
+												class: "rs-select__item",
+												title: opt.title
+											}, {
+												default: withCtx(() => [createElementVNode("span", _hoisted_18, [renderSlot(_ctx.$slots, "option", {
+													option: opt,
+													selected: unref(selectedValues).includes(unref(toComboboxValue)(opt.value))
+												}, () => [createTextVNode(toDisplayString(opt.label), 1)], true)]), createVNode(unref(ComboboxItemIndicator), { class: "rs-select__item-check" }, {
+													default: withCtx(() => [createVNode(RsIcon_default, {
+														name: "check",
+														size: 14
+													})]),
+													_: 1
+												})]),
+												_: 2
+											}, 1032, [
+												"value",
+												"disabled",
+												"text-value",
+												"title"
+											]);
+										}), 128))]),
+										_: 2
+									}, 1024)) : (openBlock(), createBlock(unref(ComboboxItem), {
+										key: unref(toComboboxValue)(entry.value),
+										value: unref(toComboboxValue)(entry.value),
+										disabled: entry.disabled || unref(isOptionLimited)(entry),
+										"text-value": entry.label,
+										class: "rs-select__item",
+										title: entry.title
+									}, {
+										default: withCtx(() => [createElementVNode("span", _hoisted_19, [renderSlot(_ctx.$slots, "option", {
+											option: entry,
+											selected: unref(selectedValues).includes(unref(toComboboxValue)(entry.value))
+										}, () => [createTextVNode(toDisplayString(entry.label), 1)], true)]), createVNode(unref(ComboboxItemIndicator), { class: "rs-select__item-check" }, {
+											default: withCtx(() => [createVNode(RsIcon_default, {
+												name: "check",
+												size: 14
+											})]),
+											_: 1
+										})]),
+										_: 2
+									}, 1032, [
+										"value",
+										"disabled",
+										"text-value",
+										"title"
+									]))], 64);
+								}), 128))], 64))]),
+								_: 3
+							}),
+							_ctx.$slots.footer ? (openBlock(), createElementBlock("div", {
+								key: 4,
+								class: "rs-select__panel-footer",
+								onMousedown: _cache[5] || (_cache[5] = withModifiers(() => {}, ["prevent"]))
+							}, [renderSlot(_ctx.$slots, "footer", {}, void 0, true)], 32)) : createCommentVNode("", true)
+						], true)]),
+						_: 3
+					}, 8, [
+						"class",
+						"style",
+						"side"
+					])]),
+					_: 3
+				}, 8, ["to"])]),
+				_: 3
+			}, 8, [
+				"modelValue",
+				"open",
+				"class",
+				"style",
+				"multiple",
+				"disabled",
+				"ignore-filter",
+				"reset-search-term-on-select"
+			]);
+		};
+	}
+});
+//#endregion
+export { RsSelect_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/RsSelect.js

@@ -0,0 +1,8 @@
+import './RsSelect.css'
+import _plugin_vue_export_helper_default from "../_virtual/_plugin-vue_export-helper.js";
+import RsSelect_vue_vue_type_script_setup_true_lang_default from "./RsSelect.impl.js";
+
+//#region src/components/RsSelect.vue
+var RsSelect_default = /*#__PURE__*/ _plugin_vue_export_helper_default(RsSelect_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-48ee70c4"]]);
+//#endregion
+export { RsSelect_default as default };

package/dist/components/RsSidebar.css

@@ -0,0 +1,61 @@
+
+.rs-sidebar[data-v-34a6555a] {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  border: 1px solid var(--rs-border-subtle);
+  background: color-mix(in srgb, var(--rs-surface) 88%, transparent);
+  color: var(--rs-text);
+}
+.rs-sidebar--sm[data-v-34a6555a] {
+  width: 14rem;
+}
+.rs-sidebar--md[data-v-34a6555a] {
+  width: 17rem;
+}
+.rs-sidebar--lg[data-v-34a6555a] {
+  width: 21rem;
+}
+.rs-sidebar--collapsed[data-v-34a6555a] {
+  width: 4rem;
+}
+.rs-sidebar__header[data-v-34a6555a],
+.rs-sidebar__footer[data-v-34a6555a] {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--rs-space-sm);
+  padding: var(--rs-space-md);
+  border-bottom: 1px solid var(--rs-border-subtle);
+}
+.rs-sidebar__footer[data-v-34a6555a] {
+  border-top: 1px solid var(--rs-border-subtle);
+  border-bottom: 0;
+}
+.rs-sidebar__body[data-v-34a6555a] {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  padding: var(--rs-space-sm);
+}
+.rs-sidebar__title-wrap[data-v-34a6555a] {
+  min-width: 0;
+}
+.rs-sidebar__title[data-v-34a6555a],
+.rs-sidebar__subtitle[data-v-34a6555a] {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.rs-sidebar__subtitle[data-v-34a6555a] {
+  color: var(--rs-muted);
+  font-size: var(--rs-font-size-xs);
+}
+.rs-sidebar__collapse[data-v-34a6555a] {
+  border: 1px solid var(--rs-border);
+  border-radius: var(--rs-radius-sm);
+  background: var(--rs-surface);
+  color: var(--rs-muted);
+  cursor: pointer;
+}

package/dist/components/RsSidebar.d.ts

@@ -0,0 +1,44 @@
+export type RsSidebarOrientation = 'vertical' | 'horizontal';
+export type RsSidebarPlacement = 'left' | 'right';
+type __VLS_Props = {
+    title?: string;
+    subtitle?: string;
+    collapsible?: boolean;
+    width?: 'sm' | 'md' | 'lg';
+    orientation?: RsSidebarOrientation;
+    placement?: RsSidebarPlacement;
+};
+type __VLS_ModelProps = {
+    'collapsed'?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_1: {}, __VLS_3: {
+    collapsed: boolean;
+}, __VLS_5: {
+    collapsed: boolean;
+};
+type __VLS_Slots = {} & {
+    header?: (props: typeof __VLS_1) => any;
+} & {
+    default?: (props: typeof __VLS_3) => any;
+} & {
+    footer?: (props: typeof __VLS_5) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:collapsed": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:collapsed"?: ((value: boolean) => any) | undefined;
+}>, {
+    width: "sm" | "md" | "lg";
+    orientation: RsSidebarOrientation;
+    placement: RsSidebarPlacement;
+    collapsible: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/RsSidebar.impl.js

@@ -0,0 +1,63 @@
+import { createCommentVNode, createElementBlock, createElementVNode, defineComponent, mergeModels, normalizeClass, openBlock, renderSlot, toDisplayString, useModel } from "vue";
+//#region src/components/RsSidebar.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = {
+	key: 0,
+	class: "rs-sidebar__header"
+};
+var _hoisted_2 = { class: "rs-sidebar__title-wrap" };
+var _hoisted_3 = {
+	key: 0,
+	class: "rs-sidebar__title"
+};
+var _hoisted_4 = {
+	key: 1,
+	class: "rs-sidebar__subtitle"
+};
+var _hoisted_5 = { class: "rs-sidebar__body" };
+var _hoisted_6 = {
+	key: 1,
+	class: "rs-sidebar__footer"
+};
+var RsSidebar_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "RsSidebar",
+	props: /*@__PURE__*/ mergeModels({
+		title: {},
+		subtitle: {},
+		collapsible: {
+			type: Boolean,
+			default: false
+		},
+		width: { default: "md" },
+		orientation: { default: "vertical" },
+		placement: { default: "left" }
+	}, {
+		"collapsed": {
+			type: Boolean,
+			default: false
+		},
+		"collapsedModifiers": {}
+	}),
+	emits: ["update:collapsed"],
+	setup(__props) {
+		const collapsed = useModel(__props, "collapsed");
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("aside", { class: normalizeClass(["rs-sidebar", [
+				`rs-sidebar--${__props.width}`,
+				`rs-sidebar--${__props.orientation}`,
+				`rs-sidebar--${__props.placement}`,
+				{ "rs-sidebar--collapsed": collapsed.value }
+			]]) }, [
+				__props.title || __props.subtitle || __props.collapsible || _ctx.$slots.header ? (openBlock(), createElementBlock("header", _hoisted_1, [renderSlot(_ctx.$slots, "header", {}, () => [createElementVNode("div", _hoisted_2, [__props.title ? (openBlock(), createElementBlock("strong", _hoisted_3, toDisplayString(__props.title), 1)) : createCommentVNode("", true), __props.subtitle && !collapsed.value ? (openBlock(), createElementBlock("span", _hoisted_4, toDisplayString(__props.subtitle), 1)) : createCommentVNode("", true)]), __props.collapsible ? (openBlock(), createElementBlock("button", {
+					key: 0,
+					type: "button",
+					class: "rs-sidebar__collapse",
+					onClick: _cache[0] || (_cache[0] = ($event) => collapsed.value = !collapsed.value)
+				}, toDisplayString(collapsed.value ? ">" : "<"), 1)) : createCommentVNode("", true)], true)])) : createCommentVNode("", true),
+				createElementVNode("div", _hoisted_5, [renderSlot(_ctx.$slots, "default", { collapsed: collapsed.value }, void 0, true)]),
+				_ctx.$slots.footer ? (openBlock(), createElementBlock("footer", _hoisted_6, [renderSlot(_ctx.$slots, "footer", { collapsed: collapsed.value }, void 0, true)])) : createCommentVNode("", true)
+			], 2);
+		};
+	}
+});
+//#endregion
+export { RsSidebar_vue_vue_type_script_setup_true_lang_default as default };