@sdata/web-vue 2.6.0 → 2.8.0

package/es/layout/interface.d.ts

@@ -1,5 +1,6 @@
 import type { CSSProperties } from 'vue';
 import type { SiderBreakpoint } from '../_utils/responsive-observe';
+import type { DrawerProps } from '../drawer';
 import type { ScrollbarProps } from '../scrollbar';
 export type SiderTheme = 'light' | 'dark';
 export type CollapseType = 'clickTrigger' | 'responsive';
@@ -18,4 +19,7 @@ export interface SiderProps {
     breakpoint?: SiderBreakpoint;
     theme?: SiderTheme;
     scrollbar?: boolean | ScrollbarProps;
+    temporary?: boolean;
+    drawerProps?: SiderTemporaryDrawerProps;
 }
+export type SiderTemporaryDrawerProps = Omit<DrawerProps, 'visible' | 'defaultVisible' | 'width' | 'footer' | 'okText' | 'cancelText' | 'okLoading' | 'okButtonProps' | 'cancelButtonProps' | 'hideCancel' | 'onBeforeOk' | 'onBeforeCancel'>;

package/es/layout/sider.vue.d.ts

@@ -1,18 +1,26 @@
 import { type PropType } from 'vue';
 import type { SiderBreakpoint } from '../_utils/responsive-observe';
-import type { CollapseType } from './interface';
+import type { CollapseType, SiderTemporaryDrawerProps } from './interface';
 import { type ScrollbarProps } from '../scrollbar';
-declare var __VLS_1: {}, __VLS_3: {}, __VLS_11: {}, __VLS_13: {}, __VLS_20: {};
+declare var __VLS_9: {}, __VLS_11: {}, __VLS_19: {}, __VLS_21: {}, __VLS_28: {}, __VLS_30: {}, __VLS_38: {}, __VLS_40: {}, __VLS_47: {};
 type __VLS_Slots = {} & {
-    header?: (props: typeof __VLS_1) => any;
-} & {
-    default?: (props: typeof __VLS_3) => any;
+    header?: (props: typeof __VLS_9) => any;
 } & {
     default?: (props: typeof __VLS_11) => any;
 } & {
-    trigger?: (props: typeof __VLS_13) => any;
+    default?: (props: typeof __VLS_19) => any;
+} & {
+    trigger?: (props: typeof __VLS_21) => any;
+} & {
+    header?: (props: typeof __VLS_28) => any;
+} & {
+    default?: (props: typeof __VLS_30) => any;
 } & {
-    trigger?: (props: typeof __VLS_20) => any;
+    default?: (props: typeof __VLS_38) => any;
+} & {
+    trigger?: (props: typeof __VLS_40) => any;
+} & {
+    trigger?: (props: typeof __VLS_47) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     collapsible: {
@@ -59,6 +67,14 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         type: PropType<boolean | ScrollbarProps>;
         default: undefined;
     };
+    temporary: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    drawerProps: {
+        type: PropType<SiderTemporaryDrawerProps>;
+        default: undefined;
+    };
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     collapse: (collapsed: boolean, type: CollapseType) => any;
     breakpoint: (broken: boolean) => any;
@@ -107,6 +123,14 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         type: PropType<boolean | ScrollbarProps>;
         default: undefined;
     };
+    temporary: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    drawerProps: {
+        type: PropType<SiderTemporaryDrawerProps>;
+        default: undefined;
+    };
 }>> & Readonly<{
     onCollapse?: ((collapsed: boolean, type: CollapseType) => any) | undefined;
     onBreakpoint?: ((broken: boolean) => any) | undefined;
@@ -122,6 +146,8 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     zeroWidthTriggerStyle: Record<string, any>;
     collapsedWidth: string | number;
     breakpoint: SiderBreakpoint;
+    temporary: boolean;
+    drawerProps: SiderTemporaryDrawerProps;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/es/layout/sider.vue_vue_type_script_setup_true_lang.js

@@ -6,6 +6,7 @@ import Scrollbar from "../scrollbar/index.js";
 import IconRight from "../icon/icon-right/index.js";
 import { useThemeMode } from "../_hooks/use-theme-mode.js";
 import IconLeft from "../icon/icon-left/index.js";
+import Drawer from "../drawer/index.js";
 import { LayoutContextInjectionKey, SiderContextInjectionKey } from "./context.js";
 import IconMenu from "../icon/icon-menu/index.js";
 import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createVNode, defineComponent, inject, mergeProps, normalizeClass, normalizeStyle, onMounted, onUnmounted, openBlock, provide, reactive, ref, renderSlot, resolveDynamicComponent, toRef, unref, watch, withCtx } from "vue";
@@ -100,6 +101,22 @@ var sider_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComp
 		scrollbar: {
 			type: [Object, Boolean],
 			default: void 0
+		},
+		/**
+		* @zh 临时模式：使用 Drawer 渲染悬浮菜单，由 collapsed 控制开合（collapsed=true 关闭，false 展开）
+		* @en Temporary mode: render as a floating Drawer, opened/closed via collapsed (collapsed=true closes, false opens)
+		*/
+		temporary: {
+			type: Boolean,
+			default: false
+		},
+		/**
+		* @zh temporary 模式下透传给 Drawer 的配置（仅 temporary=true 时生效）
+		* @en Drawer passthrough config (only effective when temporary=true)
+		*/
+		drawerProps: {
+			type: Object,
+			default: void 0
 		}
 	},
 	emits: ["collapse", "breakpoint"],
@@ -193,6 +210,7 @@ var sider_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComp
 		});
 		const reverseIcon = computed(() => rtl.value === !props.reverseArrow);
 		const defaultTriggerComponent = computed(() => {
+			if (props.temporary) return IconMenu;
 			const expandedIcon = reverseIcon.value ? IconRight : IconLeft;
 			const collapsedIcon = reverseIcon.value ? IconLeft : IconRight;
 			return mergedCollapsed.value ? collapsedIcon : expandedIcon;
@@ -200,15 +218,24 @@ var sider_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComp
 		const rawWidth = computed(() => mergedCollapsed.value ? props.collapsedWidth : props.width);
 		const siderWidth = computed(() => toSiderWidth(rawWidth.value));
 		const hasZeroWidth = computed(() => Number.parseFloat(String(props.collapsedWidth || 0)) === 0);
-		const renderTrigger = computed(() => (props.collapsible || below.value && hasZeroWidth.value) && !props.hideTrigger);
+		const renderTrigger = computed(() => {
+			if (props.temporary) return !props.hideTrigger;
+			return (props.collapsible || below.value && hasZeroWidth.value) && !props.hideTrigger;
+		});
 		const { scrollbarProps } = useScrollbar(toRef(props, "scrollbar"));
 		const useNativeScrollbar = computed(() => props.scrollbar === false);
-		const divStyle = computed(() => ({
-			flex: `0 0 ${siderWidth.value}`,
-			maxWidth: siderWidth.value,
-			minWidth: siderWidth.value,
-			width: siderWidth.value
-		}));
+		const divStyle = computed(() => {
+			if (props.temporary) return {
+				flex: "0 0 auto",
+				width: "auto"
+			};
+			return {
+				flex: `0 0 ${siderWidth.value}`,
+				maxWidth: siderWidth.value,
+				minWidth: siderWidth.value,
+				width: siderWidth.value
+			};
+		});
 		const siderCls = computed(() => [
 			prefixCls,
 			`${prefixCls}-${mergedTheme.value}`,
@@ -216,9 +243,19 @@ var sider_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComp
 				[`${prefixCls}-collapsed`]: mergedCollapsed.value,
 				[`${prefixCls}-has-trigger`]: props.collapsible && !props.hideTrigger && !hasZeroWidth.value,
 				[`${prefixCls}-below`]: below.value,
-				[`${prefixCls}-zero-width`]: Number.parseFloat(siderWidth.value) === 0
+				[`${prefixCls}-zero-width`]: Number.parseFloat(siderWidth.value) === 0,
+				[`${prefixCls}-temporary`]: props.temporary
 			}
 		]);
+		const mergedDrawerProps = computed(() => _objectSpread2({
+			placement: "left",
+			width: siderWidth.value,
+			header: false,
+			footer: false
+		}, props.drawerProps));
+		const onDrawerVisibleChange = (visible) => {
+			if (visible !== !mergedCollapsed.value) handleSetCollapsed(!visible, "clickTrigger");
+		};
 		const siderContext = reactive({
 			siderCollapsed: mergedCollapsed.value,
 			theme: mergedTheme.value
@@ -236,7 +273,29 @@ var sider_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComp
 				ref: rootEl,
 				class: normalizeClass(siderCls.value),
 				style: normalizeStyle(divStyle.value)
-			}, [
+			}, [__props.temporary ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [createVNode(unref(Drawer), mergeProps(mergedDrawerProps.value, {
+				visible: !mergedCollapsed.value,
+				"onUpdate:visible": onDrawerVisibleChange
+			}), {
+				default: withCtx(() => [_ctx.$slots.header ? (openBlock(), createElementBlock("div", {
+					key: 0,
+					class: normalizeClass(`${unref(prefixCls)}-header`)
+				}, [renderSlot(_ctx.$slots, "header")], 2)) : createCommentVNode("", true), useNativeScrollbar.value ? (openBlock(), createElementBlock("div", {
+					key: 1,
+					class: normalizeClass([`${unref(prefixCls)}-children`, `${unref(prefixCls)}-children-scroll`])
+				}, [renderSlot(_ctx.$slots, "default")], 2)) : (openBlock(), createBlock(unref(Scrollbar), mergeProps({
+					key: 2,
+					"outer-class": `${unref(prefixCls)}-children`
+				}, unref(scrollbarProps)), {
+					default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+					_: 3
+				}, 16, ["outer-class"]))]),
+				_: 3
+			}, 16, ["visible"]), renderTrigger.value ? (openBlock(), createElementBlock("span", {
+				key: 0,
+				class: normalizeClass(`${unref(prefixCls)}-temporary-trigger`),
+				onClick: toggle
+			}, [renderSlot(_ctx.$slots, "trigger", {}, () => [createVNode(unref(IconMenu))])], 2)) : createCommentVNode("", true)], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
 				_ctx.$slots.header ? (openBlock(), createElementBlock("div", {
 					key: 0,
 					class: normalizeClass(`${unref(prefixCls)}-header`)
@@ -262,7 +321,7 @@ var sider_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComp
 					style: normalizeStyle({ width: siderWidth.value }),
 					onClick: toggle
 				}, [renderSlot(_ctx.$slots, "trigger", {}, () => [(openBlock(), createBlock(resolveDynamicComponent(defaultTriggerComponent.value)))])], 6))], 64)) : createCommentVNode("", true)
-			], 6);
+			], 64))], 6);
 		};
 	}
 }));

package/es/layout/style/index.css

@@ -162,4 +162,24 @@
   background: var(--sd-color-bg-1);
   border: 1px solid var(--sd-color-fill-1);
   border-inline-start: 0;
+}
+.sd-layout-sider-temporary {
+  flex: 0 0 auto;
+  width: auto;
+  background: transparent;
+}
+.sd-layout-sider-temporary-trigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  color: var(--sd-color-text-1);
+  font-size: 18px;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+}
+.sd-layout-sider-temporary-trigger:hover {
+  background: var(--sd-color-fill-2);
 }

package/es/layout/style/index.scss

@@ -171,4 +171,28 @@ $text-color: var(string.unquote('#{theme.$sd-cssvars-prefix}-color-text-1'));
       border-inline-start: 0;
     }
   }
+
+  // Temporary: aside 退化为触发器宿主，菜单内容交给 Drawer 渲染。
+  &-temporary {
+    flex: 0 0 auto;
+    width: auto;
+    background: transparent;
+  }
+
+  &-temporary-trigger {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: $layout-sider-zero-trigger-width;
+    height: $layout-sider-zero-trigger-width;
+    color: $text-color;
+    font-size: $layout-sider-zero-trigger-font-size;
+    border-radius: $layout-radius-lg;
+    cursor: pointer;
+    transition: background-color $layout-motion-duration-mid ease;
+
+    &:hover {
+      background: var(string.unquote('#{theme.$sd-cssvars-prefix}-color-fill-2'));
+    }
+  }
 }

package/es/modal/modal.vue.d.ts

@@ -2,13 +2,13 @@ import type { CSSProperties, PropType, StyleValue } from 'vue';
 import type { EllipsisTooltipProps } from '../ellipsis';
 import { MessageType } from '../_utils/constant';
 import { ButtonProps } from '../button';
-declare var __VLS_54: {}, __VLS_67: {}, __VLS_69: {};
+declare var __VLS_55: {}, __VLS_68: {}, __VLS_70: {};
 type __VLS_Slots = {} & {
-    title?: (props: typeof __VLS_54) => any;
+    title?: (props: typeof __VLS_55) => any;
 } & {
-    default?: (props: typeof __VLS_67) => any;
+    default?: (props: typeof __VLS_68) => any;
 } & {
-    footer?: (props: typeof __VLS_69) => any;
+    footer?: (props: typeof __VLS_70) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     visible: {

package/es/resize-box/resize-box.vue.d.ts

@@ -1,16 +1,16 @@
 import { PropType } from 'vue';
 export type DirectionType = 'left' | 'right' | 'top' | 'bottom';
-declare var __VLS_9: {}, __VLS_19: {
+declare var __VLS_9: {}, __VLS_20: {
     direction: "top" | "bottom" | "left" | "right";
-}, __VLS_22: {
+}, __VLS_23: {
     direction: "top" | "bottom" | "left" | "right";
 };
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_9) => any;
 } & {
-    'resize-trigger'?: (props: typeof __VLS_19) => any;
+    'resize-trigger'?: (props: typeof __VLS_20) => any;
 } & {
-    'resize-trigger-icon'?: (props: typeof __VLS_22) => any;
+    'resize-trigger-icon'?: (props: typeof __VLS_23) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     width: {

package/es/split/split.vue.d.ts

@@ -1,13 +1,13 @@
 import { PropType } from 'vue';
-declare var __VLS_9: {}, __VLS_20: {}, __VLS_23: {}, __VLS_25: {};
+declare var __VLS_9: {}, __VLS_21: {}, __VLS_24: {}, __VLS_26: {};
 type __VLS_Slots = {} & {
     first?: (props: typeof __VLS_9) => any;
 } & {
-    'resize-trigger'?: (props: typeof __VLS_20) => any;
+    'resize-trigger'?: (props: typeof __VLS_21) => any;
 } & {
-    'resize-trigger-icon'?: (props: typeof __VLS_23) => any;
+    'resize-trigger-icon'?: (props: typeof __VLS_24) => any;
 } & {
-    second?: (props: typeof __VLS_25) => any;
+    second?: (props: typeof __VLS_26) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     component: {

package/es/tag/tag.vue.d.ts

@@ -1,6 +1,6 @@
 import type { PropType } from 'vue';
 import type { EllipsisTooltipProps } from '../ellipsis';
-declare var __VLS_1: {}, __VLS_9: {}, __VLS_12: {}, __VLS_14: {}, __VLS_24: {};
+declare var __VLS_1: {}, __VLS_9: {}, __VLS_12: {}, __VLS_14: {}, __VLS_25: {};
 type __VLS_Slots = {} & {
     icon?: (props: typeof __VLS_1) => any;
 } & {
@@ -10,7 +10,7 @@ type __VLS_Slots = {} & {
 } & {
     default?: (props: typeof __VLS_14) => any;
 } & {
-    'close-icon'?: (props: typeof __VLS_24) => any;
+    'close-icon'?: (props: typeof __VLS_25) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     color: {

package/es/time-picker/time-picker.vue.d.ts

@@ -1,13 +1,13 @@
 import { PropType } from 'vue';
 import { Size } from '../_utils/constant';
 import { TriggerProps } from '../trigger';
-declare var __VLS_21: {}, __VLS_24: {}, __VLS_41: {};
+declare var __VLS_21: {}, __VLS_24: {}, __VLS_42: {};
 type __VLS_Slots = {} & {
     prefix?: (props: typeof __VLS_21) => any;
 } & {
     'suffix-icon'?: (props: typeof __VLS_24) => any;
 } & {
-    extra?: (props: typeof __VLS_41) => any;
+    extra?: (props: typeof __VLS_42) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     type: {

package/es/tree/expand-transition.vue.d.ts

@@ -1,6 +1,6 @@
-declare var __VLS_9: {};
+declare var __VLS_11: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_9) => any;
+    default?: (props: typeof __VLS_11) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     expanded: BooleanConstructor;

package/es/tree-select/tree-select.vue.d.ts

@@ -5,25 +5,25 @@ import { ScrollbarProps } from '../scrollbar';
 import { TreeFieldNames, TreeNodeData, TreeProps } from '../tree/interface';
 import { TriggerProps } from '../trigger';
 import { LabelValue, TreeSelectValue } from './interface';
-declare var __VLS_10: {}, __VLS_23: {}, __VLS_26: any, __VLS_29: {
+declare var __VLS_10: {}, __VLS_26: {}, __VLS_29: any, __VLS_32: {
     data: any;
-}, __VLS_32: {}, __VLS_34: {}, __VLS_41: {}, __VLS_55: {};
+}, __VLS_35: {}, __VLS_37: {}, __VLS_44: {}, __VLS_58: {};
 type __VLS_Slots = {} & {
     trigger?: (props: typeof __VLS_10) => any;
 } & {
-    prefix?: (props: typeof __VLS_23) => any;
+    prefix?: (props: typeof __VLS_26) => any;
 } & {
-    label?: (props: typeof __VLS_26) => any;
+    label?: (props: typeof __VLS_29) => any;
 } & {
-    tag?: (props: typeof __VLS_29) => any;
+    tag?: (props: typeof __VLS_32) => any;
 } & {
-    header?: (props: typeof __VLS_32) => any;
+    header?: (props: typeof __VLS_35) => any;
 } & {
-    loader?: (props: typeof __VLS_34) => any;
+    loader?: (props: typeof __VLS_37) => any;
 } & {
-    empty?: (props: typeof __VLS_41) => any;
+    empty?: (props: typeof __VLS_44) => any;
 } & {
-    footer?: (props: typeof __VLS_55) => any;
+    footer?: (props: typeof __VLS_58) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     disabled: {

package/json/vetur-attributes.json

@@ -1891,6 +1891,13 @@
   "sd-sider/scrollbar": {
     "description": "Scroll config, use the component Scrollbar by default; set to false for native overflow:auto, pass an object to configure Scrollbar"
   },
+  "sd-sider/temporary": {
+    "description": "Temporary mode: render as a floating Drawer, opened/closed via collapsed (collapsed=true closes, false opens)",
+    "type": "boolean"
+  },
+  "sd-sider/drawer-props": {
+    "description": "Drawer passthrough config (only effective when temporary=true)"
+  },
   "sd-link/click": {
     "description": "Emitted when the link is clicked"
   },

package/json/vetur-tags.json

@@ -787,7 +787,9 @@
       "width",
       "collapsed-width",
       "theme",
-      "scrollbar"
+      "scrollbar",
+      "temporary",
+      "drawer-props"
     ]
   },
   "sd-link": {

package/json/web-types.json

@@ -2,7 +2,7 @@
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "framework": "vue",
   "name": "@sdata/web-vue",
-  "version": "2.3.1",
+  "version": "2.6.0",
   "contributions": {
     "html": {
       "types-syntax": "typescript",
@@ -4609,6 +4609,22 @@
                 "type": "boolean | ScrollbarProps",
                 "kind": "expression"
               }
+            },
+            {
+              "name": "temporary",
+              "description": "Temporary mode: render as a floating Drawer, opened/closed via collapsed (collapsed=true closes, false opens)",
+              "value": {
+                "type": "boolean",
+                "kind": "expression"
+              }
+            },
+            {
+              "name": "drawer-props",
+              "description": "Drawer passthrough config (only effective when temporary=true)",
+              "value": {
+                "type": "SiderTemporaryDrawerProps",
+                "kind": "expression"
+              }
             }
           ],
           "events": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sdata/web-vue",
-  "version": "2.6.0",
+  "version": "2.8.0",
   "description": "SD Design Vue: A Vue.js 3 UI Library",
   "keywords": [
     "sd",
@@ -59,14 +59,14 @@
     "copy-to-clipboard": "^4.0.2",
     "cropperjs": "^2.1.1",
     "dayjs": "^1.11.21",
-    "es-toolkit": "^1.47.0",
+    "es-toolkit": "^1.47.1",
     "motion-v": "^2.3.0",
     "number-precision": "^1.6.0",
     "overlayscrollbars": "^2.16.0",
     "qrcode": "^1.5.4",
     "resize-observer-polyfill": "^1.5.1",
     "scroll-into-view-if-needed": "^3.1.0",
-    "vue": "^3.5.35",
+    "vue": "^3.5.38",
     "vue-virtual-scroller": "^3.0.4"
   },
   "devDependencies": {
@@ -88,19 +88,19 @@
     "glob": "^13.0.6",
     "jest-serializer-vue": "^3.1.0",
     "jsdom": "^29.1.1",
-    "sass": "^1.100.0",
+    "sass": "^1.101.0",
     "semantic-release": "^25.0.5",
     "svgo": "^4.0.1",
     "type-fest": "^5.7.0",
     "typescript": "^6.0.3",
     "vite": "^8.0.16",
     "vite-plus": "^0.1.24",
-    "vitest": "^4.1.8",
+    "vitest": "^4.1.9",
     "vue-docgen-api": "4.79.2",
-    "vue-tsc": "^3.3.4"
+    "vue-tsc": "^3.3.5"
   },
   "peerDependencies": {
-    "vue": "^3.5.35"
+    "vue": "^3.5.38"
   },
   "vetur": {
     "tags": "json/vetur-tags.json",