@sdata/web-vue 5.1.1 → 5.2.1

package/es/config-provider/config-provider.vue.d.ts

@@ -3,7 +3,7 @@ import type { SpinProps } from '../spin';
 import { VirtualListProps } from '../_components/virtual-list/interface';
 import { Size } from '../_utils/constant';
 import { SdLang } from '../locale/interface';
-import { ConfigProviderColorPicker, ConfigProviderDatePicker, ConfigProviderDrawer, type JsonFormProviderConfig, ConfigProviderModal, ConfigProviderPagination } from './context';
+import { ConfigProviderColorPicker, ConfigProviderDatePicker, ConfigProviderDrawer, type JsonFormProviderConfig, ConfigProviderModal, ConfigProviderPagination, ConfigProviderTable } from './context';
 import { SdThemeConfig, SdThemeMode } from './theme';
 declare var __VLS_8: {};
 type __VLS_Slots = {} & {
@@ -70,6 +70,9 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     colorPicker: {
         type: PropType<ConfigProviderColorPicker>;
     };
+    table: {
+        type: PropType<ConfigProviderTable>;
+    };
     spinProps: {
         type: PropType<SpinProps>;
     };
@@ -173,6 +176,9 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     colorPicker: {
         type: PropType<ConfigProviderColorPicker>;
     };
+    table: {
+        type: PropType<ConfigProviderTable>;
+    };
     spinProps: {
         type: PropType<SpinProps>;
     };

package/es/config-provider/config-provider.vue_vue_type_script_setup_true_lang.js

@@ -125,6 +125,11 @@ var config_provider_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 		*/
 		colorPicker: { type: Object },
 		/**
+		* @zh Table 组件默认配置
+		* @en Default config for Table
+		*/
+		table: { type: Object },
+		/**
 		* @zh Spin 组件默认属性
 		* @en Default props for Spin
 		*/
@@ -211,7 +216,7 @@ var config_provider_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 		* @version 2.28.0
 		*/
 		const slots = useSlots();
-		const { prefixCls, locale, size, allowClear, autoInsertSpaceInButton, allowSearch, virtualListProps, updateAtScroll, scrollToClose, exchangeTime, rtl, datePicker, modal, drawer, pagination, colorPicker, spinProps, basicCrudTableSpinProps, cardSpinProps, cascaderSpinProps, listSpinProps, qrCodeSpinProps, selectSpinProps, tableSpinProps, timelineSpinProps, toolbarSpinProps, treeSelectSpinProps, jsonForm } = toRefs(props);
+		const { prefixCls, locale, size, allowClear, autoInsertSpaceInButton, allowSearch, virtualListProps, updateAtScroll, scrollToClose, exchangeTime, rtl, datePicker, modal, drawer, pagination, colorPicker, table, spinProps, basicCrudTableSpinProps, cardSpinProps, cascaderSpinProps, listSpinProps, qrCodeSpinProps, selectSpinProps, tableSpinProps, timelineSpinProps, toolbarSpinProps, treeSelectSpinProps, jsonForm } = toRefs(props);
 		const config = reactive({
 			slots,
 			prefixCls,
@@ -230,6 +235,7 @@ var config_provider_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 			drawer,
 			pagination,
 			colorPicker,
+			table,
 			spinProps,
 			basicCrudTableSpinProps,
 			cardSpinProps,

package/es/config-provider/context.d.ts

@@ -7,8 +7,11 @@ import type { ShortcutType, WeekStart } from '../date-picker/interface';
 import type { EllipsisTooltipProps } from '../ellipsis';
 import type { JsonFormProviderConfig } from '../json-form/types';
 import type { SdLang } from '../locale/interface';
+import type { PaginationProps } from '../pagination';
 import type { PaginationSelectProps } from '../pagination/interface';
+import type { ScrollbarProps } from '../scrollbar';
 import type { SpinProps } from '../spin';
+import type { TableBorder, TablePagePosition } from '../table/interface';
 import type { SDThemeNormalized, SdThemeMode } from './theme';
 export interface ConfigProviderModal {
     mask?: boolean;
@@ -70,6 +73,23 @@ export interface ConfigProviderPagination {
 export interface ConfigProviderColorPicker {
     swatchColors?: string[];
 }
+export interface ConfigProviderTable {
+    bordered?: boolean | TableBorder;
+    hoverable?: boolean;
+    stripe?: boolean;
+    tableLayoutFixed?: boolean;
+    pagination?: boolean | PaginationProps;
+    pagePosition?: TablePagePosition;
+    indentSize?: number;
+    showHeader?: boolean;
+    filterIconAlignLeft?: boolean;
+    hideExpandButtonOnEmpty?: boolean;
+    columnResizable?: boolean;
+    summaryText?: string;
+    stickyHeader?: boolean | number;
+    scrollbar?: boolean | ScrollbarProps;
+    showEmptyTree?: boolean;
+}
 export interface ConfigProvider {
     slots: Slots;
     prefixCls?: string;
@@ -88,6 +108,7 @@ export interface ConfigProvider {
     drawer?: ConfigProviderDrawer;
     pagination?: ConfigProviderPagination;
     colorPicker?: ConfigProviderColorPicker;
+    table?: ConfigProviderTable;
     spinProps?: SpinProps;
     basicCrudTableSpinProps?: SpinProps;
     cardSpinProps?: SpinProps;

package/es/config-provider/index.d.ts

@@ -63,6 +63,9 @@ declare const ConfigProvider: {
         colorPicker: {
             type: import("vue").PropType<import("./context").ConfigProviderColorPicker>;
         };
+        table: {
+            type: import("vue").PropType<import("./context").ConfigProviderTable>;
+        };
         spinProps: {
             type: import("vue").PropType<import("..").SpinProps>;
         };
@@ -183,6 +186,9 @@ declare const ConfigProvider: {
         colorPicker: {
             type: import("vue").PropType<import("./context").ConfigProviderColorPicker>;
         };
+        table: {
+            type: import("vue").PropType<import("./context").ConfigProviderTable>;
+        };
         spinProps: {
             type: import("vue").PropType<import("..").SpinProps>;
         };
@@ -300,6 +306,9 @@ declare const ConfigProvider: {
     colorPicker: {
         type: import("vue").PropType<import("./context").ConfigProviderColorPicker>;
     };
+    table: {
+        type: import("vue").PropType<import("./context").ConfigProviderTable>;
+    };
     spinProps: {
         type: import("vue").PropType<import("..").SpinProps>;
     };
@@ -362,5 +371,5 @@ declare const ConfigProvider: {
 export type ConfigProviderInstance = InstanceType<typeof _ConfigProvider>;
 export type { SdThemeConfig, SdThemeMeta, SdThemeMode, ThemeTokenMap, ThemeTokenValue, } from './theme';
 export type { JsonFormProviderConfig as ConfigProviderJsonFormConfig } from '../json-form';
-export type { ConfigProviderColorPicker } from './context';
+export type { ConfigProviderColorPicker, ConfigProviderTable } from './context';
 export default ConfigProvider;

package/es/index.css

@@ -6602,6 +6602,9 @@ body.sd-tour-active .sd-tour-popover * {
 .sd-table-checkbox .sd-checkbox, .sd-table-radio .sd-radio {
   padding-left: 0;
 }
+.sd-table-th.sd-table-checkbox .sd-checkbox-label:empty {
+  display: none;
+}
 .sd-table-selection-checkbox-col, .sd-table-selection-radio-col {
   width: var(--component-table-table-size-selection-col-width, var(--component-table-size-selection-col-width, 40px));
   min-width: var(--component-table-table-size-selection-col-width, var(--component-table-size-selection-col-width, 40px));
@@ -11064,15 +11067,52 @@ body.sd-tour-active .sd-tour-popover * {
   margin-top: 6px;
 }
 .sd-model-selector-group-heading {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  box-sizing: border-box;
+  width: 100%;
   padding: 6px 12px;
   color: var(--sd-color-text-3);
   font-weight: 500;
   font-size: 12px;
+  text-align: left;
+  background: none;
+  border: 0;
+  cursor: pointer;
+}
+.sd-model-selector-group-heading-text {
+  flex: 1;
+  min-width: 0;
+}
+.sd-model-selector-group-chevron {
+  flex: none;
+  transition: transform 180ms ease;
+}
+.sd-model-selector-group-chevron--expanded {
+  transform: rotate(90deg);
 }
 .sd-model-selector-group-content {
+  display: grid;
+  grid-template-rows: 1fr;
+  opacity: 1;
+  transition: grid-template-rows 180ms ease, opacity 180ms ease;
+}
+.sd-model-selector-group-content--collapsed {
+  grid-template-rows: 0fr;
+  opacity: 0;
+}
+.sd-model-selector-group-content-inner {
   display: flex;
   flex-direction: column;
   gap: 2px;
+  min-height: 0;
+  overflow: hidden;
+}
+@media (prefers-reduced-motion: reduce) {
+  .sd-model-selector-group-chevron, .sd-model-selector-group-content {
+    transition: none;
+  }
 }
 .sd-model-selector-item {
   display: flex;

package/es/index.d.ts

@@ -47,7 +47,7 @@ export type { CommentInstance } from './comment';
 export { default as ColorPicker } from './color-picker';
 export type { ColorPickerInstance } from './color-picker';
 export { default as ConfigProvider } from './config-provider';
-export type { ConfigProviderInstance, SdThemeConfig, SdThemeMeta, SdThemeMode, ThemeTokenMap, ThemeTokenValue, } from './config-provider';
+export type { ConfigProviderInstance, ConfigProviderTable, SdThemeConfig, SdThemeMeta, SdThemeMode, ThemeTokenMap, ThemeTokenValue, } from './config-provider';
 export { default as ThemeProvider } from './theme-provider';
 export { normalizeTheme, getThemeCSSVariables, normalizeTokenKey } from './config-provider/theme';
 export type { SdThemeSeed } from './config-provider/algorithms';

package/es/model-selector/context.d.ts

@@ -3,17 +3,20 @@ import type { ModelSelectorItemData } from './types';
 export interface ModelSelectorContext {
     activeDescendant: ComputedRef<string | undefined>;
     activeId: Ref<symbol | undefined>;
+    defaultExpanded: boolean;
     getVisibleItems: (groupId?: symbol) => ModelSelectorItemData[];
     itemsVersion: Ref<number>;
     listId: string;
     moveActive: (offset: number) => void;
     query: Ref<string>;
+    registerGroup: (id: symbol, expanded: Ref<boolean>) => void;
     registerItem: (item: ModelSelectorItemData) => void;
     selectActive: (event: Event) => void;
     selectItem: (item: ModelSelectorItemData, event: Event) => void;
     setActive: (id?: symbol) => void;
     setVisible: (visible: boolean) => void;
     unregisterItem: (id: symbol) => void;
+    unregisterGroup: (id: symbol) => void;
     updateItem: (item: ModelSelectorItemData) => void;
     visible: ComputedRef<boolean>;
     visibleItemCount: ComputedRef<number>;

package/es/model-selector/index.d.ts

@@ -17,6 +17,7 @@ import _ModelSelector from './model-selector.vue';
 declare const ModelSelector: {
     new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<{
         defaultVisible?: boolean;
+        defaultExpanded?: boolean;
         closeOnSelect?: boolean;
         resetQueryOnClose?: boolean;
     } & {
@@ -38,6 +39,7 @@ declare const ModelSelector: {
         Defaults: {};
     }, Readonly<{
         defaultVisible?: boolean;
+        defaultExpanded?: boolean;
         closeOnSelect?: boolean;
         resetQueryOnClose?: boolean;
     } & {
@@ -52,6 +54,7 @@ declare const ModelSelector: {
     __isSuspense?: never;
 } & import("vue").ComponentOptionsBase<Readonly<{
     defaultVisible?: boolean;
+    defaultExpanded?: boolean;
     closeOnSelect?: boolean;
     resetQueryOnClose?: boolean;
 } & {
@@ -142,6 +145,7 @@ declare const ModelSelector: {
     Dialog: {
         new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<{
             defaultVisible?: boolean;
+            defaultExpanded?: boolean;
             closeOnSelect?: boolean;
             resetQueryOnClose?: boolean;
             title?: string;
@@ -169,6 +173,7 @@ declare const ModelSelector: {
             Defaults: {};
         }, Readonly<{
             defaultVisible?: boolean;
+            defaultExpanded?: boolean;
             closeOnSelect?: boolean;
             resetQueryOnClose?: boolean;
             title?: string;
@@ -189,6 +194,7 @@ declare const ModelSelector: {
         __isSuspense?: never;
     } & import("vue").ComponentOptionsBase<Readonly<{
         defaultVisible?: boolean;
+        defaultExpanded?: boolean;
         closeOnSelect?: boolean;
         resetQueryOnClose?: boolean;
         title?: string;

package/es/model-selector/model-selector-dialog.vue.d.ts

@@ -1,5 +1,6 @@
 type __VLS_Props = {
     defaultVisible?: boolean;
+    defaultExpanded?: boolean;
     closeOnSelect?: boolean;
     resetQueryOnClose?: boolean;
     title?: string;

package/es/model-selector/model-selector-dialog.vue_vue_type_script_setup_true_lang.js

@@ -10,6 +10,10 @@ var model_selector_dialog_vue_vue_type_script_setup_true_lang_default = /*@__PUR
 			type: Boolean,
 			default: false
 		},
+		defaultExpanded: {
+			type: Boolean,
+			default: true
+		},
 		closeOnSelect: {
 			type: Boolean,
 			default: true
@@ -60,6 +64,7 @@ var model_selector_dialog_vue_vue_type_script_setup_true_lang_default = /*@__PUR
 			return openBlock(), createBlock(model_selector_default, {
 				visible: mergedVisible.value,
 				"default-visible": __props.defaultVisible,
+				"default-expanded": __props.defaultExpanded,
 				"close-on-select": __props.closeOnSelect,
 				"reset-query-on-close": __props.resetQueryOnClose,
 				"onUpdate:visible": handleVisibleUpdate,
@@ -88,6 +93,7 @@ var model_selector_dialog_vue_vue_type_script_setup_true_lang_default = /*@__PUR
 			}, 8, [
 				"visible",
 				"default-visible",
+				"default-expanded",
 				"close-on-select",
 				"reset-query-on-close"
 			]);

package/es/model-selector/model-selector-group.vue.d.ts

@@ -1,11 +1,11 @@
 type __VLS_Props = {
     heading?: string;
 };
-declare var __VLS_1: {}, __VLS_3: {};
+declare var __VLS_1: {}, __VLS_8: {};
 type __VLS_Slots = {} & {
     heading?: (props: typeof __VLS_1) => any;
 } & {
-    default?: (props: typeof __VLS_3) => any;
+    default?: (props: typeof __VLS_8) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/es/model-selector/model-selector-group.vue_vue_type_script_setup_true_lang.js

@@ -1,9 +1,12 @@
 import _objectSpread2 from "../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/objectSpread2.js";
 import { getPrefixCls } from "../_utils/global-config.js";
+import IconRight from "../icon/icon-right/index.js";
 import { modelSelectorGroupInjectionKey } from "./context.js";
 import { useModelSelectorContext } from "./use-model-selector-context.js";
-import { computed, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, defineComponent, getCurrentInstance, normalizeClass, openBlock, provide, renderSlot, toDisplayString, unref, vShow, withDirectives } from "vue";
+import { computed, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, getCurrentInstance, normalizeClass, onBeforeUnmount, openBlock, provide, renderSlot, shallowRef, toDisplayString, unref, useSlots, vShow, watch, withDirectives } from "vue";
 //#region components/model-selector/model-selector-group.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["aria-expanded"];
+var _hoisted_2 = ["aria-hidden", "inert"];
 var model_selector_group_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent(_objectSpread2(_objectSpread2({}, { name: "ModelSelectorGroup" }), {}, {
 	__name: "model-selector-group",
 	props: { heading: {} },
@@ -11,20 +14,50 @@ var model_selector_group_vue_vue_type_script_setup_true_lang_default = /*@__PURE
 		const context = useModelSelectorContext("ModelSelectorGroup");
 		const prefixCls = getPrefixCls("model-selector-group");
 		const uid = getCurrentInstance().uid;
+		const slots = useSlots();
 		const id = Symbol(`model-selector-group-${uid}`);
 		const headingId = `${context.listId}-group-${uid}`;
+		const contentId = `${headingId}-content`;
+		const expanded = shallowRef(__props.heading || slots.heading ? context.defaultExpanded : true);
+		const searchExpanded = shallowRef();
+		const isSearching = computed(() => context.query.value.trim().length > 0);
+		const isExpanded = computed(() => {
+			var _searchExpanded$value;
+			return isSearching.value ? (_searchExpanded$value = searchExpanded.value) !== null && _searchExpanded$value !== void 0 ? _searchExpanded$value : true : expanded.value;
+		});
 		const hasVisibleItems = computed(() => context.getVisibleItems(id).length > 0);
+		function toggleExpanded() {
+			if (isSearching.value) searchExpanded.value = !isExpanded.value;
+			else expanded.value = !expanded.value;
+		}
+		watch(() => context.query.value.trim(), () => {
+			searchExpanded.value = void 0;
+		}, { flush: "sync" });
+		context.registerGroup(id, isExpanded);
+		onBeforeUnmount(() => context.unregisterGroup(id));
 		provide(modelSelectorGroupInjectionKey, { id });
 		return (_ctx, _cache) => {
 			return withDirectives((openBlock(), createElementBlock("section", {
 				class: normalizeClass(unref(prefixCls)),
 				role: "group",
 				"aria-labelledby": headingId
-			}, [__props.heading || _ctx.$slots.heading ? (openBlock(), createElementBlock("div", {
+			}, [__props.heading || _ctx.$slots.heading ? (openBlock(), createElementBlock("button", {
 				key: 0,
 				id: headingId,
-				class: normalizeClass(`${unref(prefixCls)}-heading`)
-			}, [renderSlot(_ctx.$slots, "heading", {}, () => [createTextVNode(toDisplayString(__props.heading), 1)])], 2)) : createCommentVNode("", true), createElementVNode("div", { class: normalizeClass(`${unref(prefixCls)}-content`) }, [renderSlot(_ctx.$slots, "default")], 2)], 2)), [[vShow, hasVisibleItems.value]]);
+				type: "button",
+				class: normalizeClass(`${unref(prefixCls)}-heading`),
+				"aria-controls": contentId,
+				"aria-expanded": isExpanded.value,
+				onClick: toggleExpanded
+			}, [createElementVNode("span", { class: normalizeClass(`${unref(prefixCls)}-heading-text`) }, [renderSlot(_ctx.$slots, "heading", {}, () => [createTextVNode(toDisplayString(__props.heading), 1)])], 2), createVNode(unref(IconRight), {
+				class: normalizeClass([`${unref(prefixCls)}-chevron`, { [`${unref(prefixCls)}-chevron--expanded`]: isExpanded.value }]),
+				"aria-hidden": "true"
+			}, null, 8, ["class"])], 10, _hoisted_1)) : createCommentVNode("", true), createElementVNode("div", {
+				id: contentId,
+				class: normalizeClass([`${unref(prefixCls)}-content`, { [`${unref(prefixCls)}-content--collapsed`]: !isExpanded.value }]),
+				"aria-hidden": !isExpanded.value,
+				inert: !isExpanded.value
+			}, [createElementVNode("div", { class: normalizeClass(`${unref(prefixCls)}-content-inner`) }, [renderSlot(_ctx.$slots, "default")], 2)], 10, _hoisted_2)], 2)), [[vShow, hasVisibleItems.value]]);
 		};
 	}
 }));

package/es/model-selector/model-selector.vue.d.ts

@@ -1,5 +1,6 @@
 type __VLS_Props = {
     defaultVisible?: boolean;
+    defaultExpanded?: boolean;
     closeOnSelect?: boolean;
     resetQueryOnClose?: boolean;
 };

package/es/model-selector/model-selector.vue_vue_type_script_setup_true_lang.js

@@ -10,6 +10,10 @@ var model_selector_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ d
 			type: Boolean,
 			default: false
 		},
+		defaultExpanded: {
+			type: Boolean,
+			default: true
+		},
 		closeOnSelect: {
 			type: Boolean,
 			default: true
@@ -74,6 +78,7 @@ var model_selector_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ d
 		const activeId = shallowRef();
 		const itemsVersion = shallowRef(0);
 		const items = /* @__PURE__ */ new Map();
+		const groups = /* @__PURE__ */ new Map();
 		const listId = `sd-model-selector-list-${instance.uid}`;
 		const normalizedQuery = computed(() => query.value.trim().toLocaleLowerCase());
 		function isItemVisible(item) {
@@ -90,6 +95,10 @@ var model_selector_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ d
 			return [...items.values()].filter((item) => (groupId === void 0 || item.groupId === groupId) && isItemVisible(item));
 		}
 		const visibleItems = computed(() => getVisibleItems());
+		const navigableItems = computed(() => visibleItems.value.filter((item) => {
+			var _groups$get;
+			return !item.groupId || ((_groups$get = groups.get(item.groupId)) === null || _groups$get === void 0 ? void 0 : _groups$get.value) !== false;
+		}));
 		const visibleItemCount = computed(() => visibleItems.value.length);
 		const activeDescendant = computed(() => {
 			var _items$get;
@@ -99,7 +108,7 @@ var model_selector_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ d
 			passive: false,
 			onEventFired(event) {
 				if (event.type !== "keydown" || event.repeat || !mergedVisible.value) return;
-				const item = visibleItems.value.find(({ disabled, shortcut }) => !disabled && shortcut && isShortcutPressed(shortcut, event, magicKeys.current));
+				const item = navigableItems.value.find(({ disabled, shortcut }) => !disabled && shortcut && isShortcutPressed(shortcut, event, magicKeys.current));
 				if (!item) return;
 				event.preventDefault();
 				event.stopPropagation();
@@ -116,6 +125,12 @@ var model_selector_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ d
 			items.set(item.id, item);
 			itemsVersion.value += 1;
 		}
+		function registerGroup(id, expanded) {
+			groups.set(id, expanded);
+		}
+		function unregisterGroup(id) {
+			groups.delete(id);
+		}
 		function updateItem(item) {
 			items.set(item.id, item);
 			itemsVersion.value += 1;
@@ -130,7 +145,7 @@ var model_selector_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ d
 		}
 		function moveActive(offset) {
 			var _nextItem$element;
-			const enabledItems = visibleItems.value.filter((item) => !item.disabled);
+			const enabledItems = navigableItems.value.filter((item) => !item.disabled);
 			if (!enabledItems.length) {
 				activeId.value = void 0;
 				return;
@@ -147,12 +162,18 @@ var model_selector_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ d
 		}
 		function selectActive(event) {
 			if (!activeId.value) return;
-			const item = items.get(activeId.value);
+			const item = navigableItems.value.find((item) => item.id === activeId.value);
 			if (item) selectItem(item, event);
 		}
 		watch(query, () => {
-			var _visibleItems$value$f;
-			activeId.value = (_visibleItems$value$f = visibleItems.value.find((item) => !item.disabled)) === null || _visibleItems$value$f === void 0 ? void 0 : _visibleItems$value$f.id;
+			var _navigableItems$value;
+			activeId.value = (_navigableItems$value = navigableItems.value.find((item) => !item.disabled)) === null || _navigableItems$value === void 0 ? void 0 : _navigableItems$value.id;
+		});
+		watch(navigableItems, (availableItems) => {
+			if (activeId.value && !availableItems.some((item) => item.id === activeId.value)) {
+				var _availableItems$find;
+				activeId.value = (_availableItems$find = availableItems.find((item) => !item.disabled)) === null || _availableItems$find === void 0 ? void 0 : _availableItems$find.id;
+			}
 		});
 		watch(mergedVisible, (visible) => {
 			if (!visible && __props.resetQueryOnClose) {
@@ -163,17 +184,20 @@ var model_selector_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ d
 		provide(modelSelectorInjectionKey, {
 			activeDescendant,
 			activeId,
+			defaultExpanded: __props.defaultExpanded,
 			getVisibleItems,
 			itemsVersion,
 			listId,
 			moveActive,
 			query,
+			registerGroup,
 			registerItem,
 			selectActive,
 			selectItem,
 			setActive,
 			setVisible,
 			unregisterItem,
+			unregisterGroup,
 			updateItem,
 			visible: mergedVisible,
 			visibleItemCount

package/es/model-selector/style/index.css

@@ -67,15 +67,52 @@
   margin-top: 6px;
 }
 .sd-model-selector-group-heading {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  box-sizing: border-box;
+  width: 100%;
   padding: 6px 12px;
   color: var(--sd-color-text-3);
   font-weight: 500;
   font-size: 12px;
+  text-align: left;
+  background: none;
+  border: 0;
+  cursor: pointer;
+}
+.sd-model-selector-group-heading-text {
+  flex: 1;
+  min-width: 0;
+}
+.sd-model-selector-group-chevron {
+  flex: none;
+  transition: transform 180ms ease;
+}
+.sd-model-selector-group-chevron--expanded {
+  transform: rotate(90deg);
 }
 .sd-model-selector-group-content {
+  display: grid;
+  grid-template-rows: 1fr;
+  opacity: 1;
+  transition: grid-template-rows 180ms ease, opacity 180ms ease;
+}
+.sd-model-selector-group-content--collapsed {
+  grid-template-rows: 0fr;
+  opacity: 0;
+}
+.sd-model-selector-group-content-inner {
   display: flex;
   flex-direction: column;
   gap: 2px;
+  min-height: 0;
+  overflow: hidden;
+}
+@media (prefers-reduced-motion: reduce) {
+  .sd-model-selector-group-chevron, .sd-model-selector-group-content {
+    transition: none;
+  }
 }
 .sd-model-selector-item {
   display: flex;

package/es/model-selector/style/index.scss

@@ -66,16 +66,62 @@ $model-selector-prefix-cls: string.unquote('#{theme.$prefix}-model-selector');
     }
 
     &-heading {
+      display: flex;
+      gap: $model-selector-gap;
+      align-items: center;
+      box-sizing: border-box;
+      width: 100%;
       padding: $model-selector-padding $model-selector-padding-horizontal;
       color: $model-selector-color-text-secondary;
       font-weight: theme.$font-weight-500;
       font-size: $model-selector-font-size-secondary;
+      text-align: left;
+      background: none;
+      border: 0;
+      cursor: pointer;
+
+      &-text {
+        flex: 1;
+        min-width: 0;
+      }
+    }
+
+    &-chevron {
+      flex: none;
+      transition: transform 180ms ease;
+
+      &--expanded {
+        transform: rotate(90deg);
+      }
     }
 
     &-content {
-      display: flex;
-      flex-direction: column;
-      gap: theme.$spacing-1;
+      display: grid;
+      grid-template-rows: 1fr;
+      opacity: 1;
+      transition:
+        grid-template-rows 180ms ease,
+        opacity 180ms ease;
+
+      &--collapsed {
+        grid-template-rows: 0fr;
+        opacity: 0;
+      }
+
+      &-inner {
+        display: flex;
+        flex-direction: column;
+        gap: theme.$spacing-1;
+        min-height: 0;
+        overflow: hidden;
+      }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      &-chevron,
+      &-content {
+        transition: none;
+      }
     }
   }