@sdata/web-vue 2.3.1 → 2.8.0

package/es/layout/index.js

@@ -7,16 +7,16 @@ import sider_default from "./sider.js";
 //#region components/layout/index.ts
 var Layout = Object.assign(layout_default, {
 	Header: header_default,
-	Content: content_default,
 	Footer: footer_default,
+	Content: content_default,
 	Sider: sider_default,
 	install: (app, options) => {
 		setGlobalConfig(app, options);
 		const componentPrefix = getComponentPrefix(options);
 		app.component(componentPrefix + layout_default.name, layout_default);
 		app.component(componentPrefix + header_default.name, header_default);
-		app.component(componentPrefix + content_default.name, content_default);
 		app.component(componentPrefix + footer_default.name, footer_default);
+		app.component(componentPrefix + content_default.name, content_default);
 		app.component(componentPrefix + sider_default.name, sider_default);
 	}
 });

package/es/layout/interface.d.ts

@@ -1,55 +1,25 @@
+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';
 export interface LayoutProps {
     hasSider?: boolean;
 }
-export type LayoutHeaderDensity = 'default' | 'prominent' | 'comfortable' | 'compact';
-export type LayoutHeaderScrollBehavior = 'hide' | 'fully-hide' | 'inverted' | 'collapse' | 'elevate' | 'fade-image';
-export interface LayoutHeaderProps {
-    title?: string;
-    image?: string;
-    modelValue?: boolean;
-    defaultVisible?: boolean;
-    height?: number | string;
-    density?: LayoutHeaderDensity;
-    extended?: boolean;
-    extensionHeight?: number | string;
-    collapse?: boolean;
-    flat?: boolean;
-    floating?: boolean;
-    fixed?: boolean;
-    sticky?: boolean;
-    absolute?: boolean;
-    location?: 'top' | 'bottom';
-    scrollBehavior?: string;
-    scrollTarget?: string;
-    scrollThreshold?: number | string;
-}
 export interface SiderProps {
-    theme?: 'dark' | 'light';
-    modelValue?: boolean;
-    defaultVisible?: boolean;
+    collapsible?: boolean;
     collapsed?: boolean;
     defaultCollapsed?: boolean;
-    collapsible?: boolean;
-    rail?: boolean;
-    defaultRail?: boolean;
-    railWidth?: number | string;
-    expandOnHover?: boolean;
-    disableResizeWatcher?: boolean;
-    disableRouteWatcher?: boolean;
-    width?: number | string;
-    height?: number | string;
-    collapsedWidth?: number;
-    temporary?: boolean;
-    permanent?: boolean;
-    persistent?: boolean;
-    mask?: boolean;
-    maskClosable?: boolean;
-    escToClose?: boolean;
-    location?: 'start' | 'end' | 'left' | 'right' | 'top' | 'bottom';
-    floating?: boolean;
-    sticky?: boolean;
     reverseArrow?: boolean;
-    breakpoint?: 'xxl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs';
-    resizeDirections?: string[];
+    zeroWidthTriggerStyle?: CSSProperties;
     hideTrigger?: boolean;
+    width?: number | string;
+    collapsedWidth?: number | string;
+    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/layout.vue.d.ts

@@ -1,14 +1,16 @@
-declare var __VLS_1: {};
+declare var __VLS_8: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_1) => any;
+    default?: (props: typeof __VLS_8) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     hasSider: {
         type: BooleanConstructor;
+        default: undefined;
     };
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     hasSider: {
         type: BooleanConstructor;
+        default: undefined;
     };
 }>> & Readonly<{}>, {
     hasSider: boolean;

package/es/layout/layout.vue_vue_type_script_setup_true_lang.js

@@ -1,29 +1,53 @@
+import { configProviderInjectionKey } from "../config-provider/context.js";
 import { _objectSpread2 } from "../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/objectSpread2.js";
 import { getPrefixCls } from "../_utils/global-config.js";
-import { LayoutSiderInjectionKey } from "./context.js";
-import { computed, createElementBlock, defineComponent, normalizeClass, openBlock, provide, ref, renderSlot } from "vue";
-//#region components/layout/layout.vue?vue&type=script&setup=true&lang.tsx
+import { LayoutContextInjectionKey } from "./context.js";
+import { useHasSider } from "./hooks/use-has-sider.js";
+import { computed, createBlock, defineComponent, inject, normalizeClass, openBlock, provide, ref, renderSlot, resolveDynamicComponent, useSlots, withCtx } from "vue";
+//#region components/layout/layout.vue?vue&type=script&setup=true&lang.ts
+var tagName = "div";
 var layout_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent(_objectSpread2(_objectSpread2({}, { name: "Layout" }), {}, {
 	__name: "layout",
 	props: { 
 	/**
-	* @zh 表示子元素里有 Sider，一般不用指定。可用于服务端渲染时避免样式闪动
-	* @en Indicates that there is a Sider in the sub-element, which generally does not need to be specified. Used to avoid style flicker when rendering on the server side.
+	* @zh 是否包含 Sider，设为布尔值时会覆盖自动检测
+	* @en Whether contains Sider, overrides auto detection when set to a boolean
 	*/
-hasSider: { type: Boolean } },
+hasSider: {
+		type: Boolean,
+		default: void 0
+	} },
 	setup(__props) {
 		const props = __props;
-		const siderIds = ref([]);
 		const prefixCls = getPrefixCls("layout");
-		const classNames = computed(() => [prefixCls, { [`${prefixCls}-has-sider`]: props.hasSider || siderIds.value.length }]);
-		provide(LayoutSiderInjectionKey, {
-			onSiderMount: (id) => siderIds.value.push(id),
-			onSiderUnMount: (id) => {
-				siderIds.value = siderIds.value.filter((_id) => _id !== id);
-			}
+		const slots = useSlots();
+		const siders = ref([]);
+		const mergedHasSider = useHasSider(siders, computed(() => {
+			var _slots$default;
+			return (_slots$default = slots.default) === null || _slots$default === void 0 ? void 0 : _slots$default.call(slots);
+		}), computed(() => props.hasSider));
+		const configProvider = inject(configProviderInjectionKey, void 0);
+		const rtl = computed(() => {
+			var _configProvider$rtl;
+			return (_configProvider$rtl = configProvider === null || configProvider === void 0 ? void 0 : configProvider.rtl) !== null && _configProvider$rtl !== void 0 ? _configProvider$rtl : false;
 		});
+		const classNames = computed(() => [prefixCls, {
+			[`${prefixCls}-has-sider`]: mergedHasSider.value,
+			[`${prefixCls}-rtl`]: rtl.value
+		}]);
+		provide(LayoutContextInjectionKey, { siderHook: {
+			addSider(id) {
+				siders.value = [...siders.value, id];
+			},
+			removeSider(id) {
+				siders.value = siders.value.filter((currentId) => currentId !== id);
+			}
+		} });
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("section", { class: normalizeClass(classNames.value) }, [renderSlot(_ctx.$slots, "default")], 2);
+			return openBlock(), createBlock(resolveDynamicComponent(tagName), { class: normalizeClass(classNames.value) }, {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 8, ["class"]);
 		};
 	}
 }));

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

@@ -1,29 +1,29 @@
-import { PropType } from 'vue';
-import { SIDER_LOCATIONS } from './utils';
-declare var __VLS_11: {}, __VLS_13: {}, __VLS_15: {}, __VLS_17: {}, __VLS_19: {
-    collapsed: boolean;
-};
+import { type PropType } from 'vue';
+import type { SiderBreakpoint } from '../_utils/responsive-observe';
+import type { CollapseType, SiderTemporaryDrawerProps } from './interface';
+import { type ScrollbarProps } from '../scrollbar';
+declare var __VLS_9: {}, __VLS_11: {}, __VLS_19: {}, __VLS_21: {}, __VLS_28: {}, __VLS_30: {}, __VLS_38: {}, __VLS_40: {}, __VLS_47: {};
 type __VLS_Slots = {} & {
-    image?: (props: typeof __VLS_11) => any;
+    header?: (props: typeof __VLS_9) => any;
+} & {
+    default?: (props: typeof __VLS_11) => any;
+} & {
+    default?: (props: typeof __VLS_19) => any;
 } & {
-    prepend?: (props: typeof __VLS_13) => any;
+    trigger?: (props: typeof __VLS_21) => any;
 } & {
-    default?: (props: typeof __VLS_15) => any;
+    header?: (props: typeof __VLS_28) => any;
 } & {
-    append?: (props: typeof __VLS_17) => any;
+    default?: (props: typeof __VLS_30) => any;
 } & {
-    trigger?: (props: typeof __VLS_19) => 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<{
-    theme: {
-        type: PropType<"dark" | "light">;
-        default: string;
-    };
-    modelValue: {
-        type: BooleanConstructor;
-        default: undefined;
-    };
-    defaultVisible: {
+    collapsible: {
         type: BooleanConstructor;
         default: boolean;
     };
@@ -35,103 +35,51 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         type: BooleanConstructor;
         default: boolean;
     };
-    collapsible: {
+    reverseArrow: {
         type: BooleanConstructor;
+        default: boolean;
     };
-    rail: {
-        type: BooleanConstructor;
+    zeroWidthTriggerStyle: {
+        type: ObjectConstructor;
         default: undefined;
     };
-    defaultRail: {
+    hideTrigger: {
         type: BooleanConstructor;
         default: boolean;
     };
-    railWidth: {
-        type: (StringConstructor | NumberConstructor)[];
-        default: number;
-    };
-    expandOnHover: {
-        type: BooleanConstructor;
-    };
-    disableResizeWatcher: {
-        type: BooleanConstructor;
-    };
-    disableRouteWatcher: {
-        type: BooleanConstructor;
-    };
     width: {
         type: (StringConstructor | NumberConstructor)[];
         default: number;
     };
-    height: {
-        type: (StringConstructor | NumberConstructor)[];
-        default: undefined;
-    };
     collapsedWidth: {
-        type: NumberConstructor;
+        type: (StringConstructor | NumberConstructor)[];
         default: number;
     };
-    temporary: {
-        type: BooleanConstructor;
-    };
-    permanent: {
-        type: BooleanConstructor;
-    };
-    persistent: {
-        type: BooleanConstructor;
+    breakpoint: {
+        type: PropType<SiderBreakpoint>;
+        default: undefined;
     };
-    mask: {
-        type: BooleanConstructor;
-        default: boolean;
+    theme: {
+        type: () => "light" | "dark";
+        default: undefined;
     };
-    maskClosable: {
-        type: BooleanConstructor;
-        default: boolean;
+    scrollbar: {
+        type: PropType<boolean | ScrollbarProps>;
+        default: undefined;
     };
-    escToClose: {
+    temporary: {
         type: BooleanConstructor;
         default: boolean;
     };
-    location: {
-        type: PropType<(typeof SIDER_LOCATIONS)[number]>;
-        default: string;
-        validator: (value: string) => boolean;
-    };
-    floating: {
-        type: BooleanConstructor;
-    };
-    sticky: {
-        type: BooleanConstructor;
-    };
-    reverseArrow: {
-        type: BooleanConstructor;
-    };
-    breakpoint: {
-        type: PropType<"xxl" | "xl" | "lg" | "md" | "sm" | "xs">;
-    };
-    resizeDirections: {
-        type: PropType<Array<"left" | "right" | "top" | "bottom">>;
+    drawerProps: {
+        type: PropType<SiderTemporaryDrawerProps>;
         default: undefined;
     };
-    hideTrigger: {
-        type: BooleanConstructor;
-    };
-}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    collapse: (_collapsed: boolean, _type: "responsive" | "clickTrigger") => any;
-    "update:modelValue": (_value: boolean) => any;
-    breakpoint: (_collapsed: boolean) => any;
-    "update:rail": (_value: boolean) => any;
-    "update:collapsed": (_collapsed: boolean) => any;
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    collapse: (collapsed: boolean, type: CollapseType) => any;
+    breakpoint: (broken: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    theme: {
-        type: PropType<"dark" | "light">;
-        default: string;
-    };
-    modelValue: {
-        type: BooleanConstructor;
-        default: undefined;
-    };
-    defaultVisible: {
+    collapsible: {
         type: BooleanConstructor;
         default: boolean;
     };
@@ -143,121 +91,63 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         type: BooleanConstructor;
         default: boolean;
     };
-    collapsible: {
+    reverseArrow: {
         type: BooleanConstructor;
+        default: boolean;
     };
-    rail: {
-        type: BooleanConstructor;
+    zeroWidthTriggerStyle: {
+        type: ObjectConstructor;
         default: undefined;
     };
-    defaultRail: {
+    hideTrigger: {
         type: BooleanConstructor;
         default: boolean;
     };
-    railWidth: {
-        type: (StringConstructor | NumberConstructor)[];
-        default: number;
-    };
-    expandOnHover: {
-        type: BooleanConstructor;
-    };
-    disableResizeWatcher: {
-        type: BooleanConstructor;
-    };
-    disableRouteWatcher: {
-        type: BooleanConstructor;
-    };
     width: {
         type: (StringConstructor | NumberConstructor)[];
         default: number;
     };
-    height: {
-        type: (StringConstructor | NumberConstructor)[];
-        default: undefined;
-    };
     collapsedWidth: {
-        type: NumberConstructor;
+        type: (StringConstructor | NumberConstructor)[];
         default: number;
     };
-    temporary: {
-        type: BooleanConstructor;
-    };
-    permanent: {
-        type: BooleanConstructor;
-    };
-    persistent: {
-        type: BooleanConstructor;
+    breakpoint: {
+        type: PropType<SiderBreakpoint>;
+        default: undefined;
     };
-    mask: {
-        type: BooleanConstructor;
-        default: boolean;
+    theme: {
+        type: () => "light" | "dark";
+        default: undefined;
     };
-    maskClosable: {
-        type: BooleanConstructor;
-        default: boolean;
+    scrollbar: {
+        type: PropType<boolean | ScrollbarProps>;
+        default: undefined;
     };
-    escToClose: {
+    temporary: {
         type: BooleanConstructor;
         default: boolean;
     };
-    location: {
-        type: PropType<(typeof SIDER_LOCATIONS)[number]>;
-        default: string;
-        validator: (value: string) => boolean;
-    };
-    floating: {
-        type: BooleanConstructor;
-    };
-    sticky: {
-        type: BooleanConstructor;
-    };
-    reverseArrow: {
-        type: BooleanConstructor;
-    };
-    breakpoint: {
-        type: PropType<"xxl" | "xl" | "lg" | "md" | "sm" | "xs">;
-    };
-    resizeDirections: {
-        type: PropType<Array<"left" | "right" | "top" | "bottom">>;
+    drawerProps: {
+        type: PropType<SiderTemporaryDrawerProps>;
         default: undefined;
     };
-    hideTrigger: {
-        type: BooleanConstructor;
-    };
 }>> & Readonly<{
-    onCollapse?: ((_collapsed: boolean, _type: "responsive" | "clickTrigger") => any) | undefined;
-    "onUpdate:modelValue"?: ((_value: boolean) => any) | undefined;
-    onBreakpoint?: ((_collapsed: boolean) => any) | undefined;
-    "onUpdate:rail"?: ((_value: boolean) => any) | undefined;
-    "onUpdate:collapsed"?: ((_collapsed: boolean) => any) | undefined;
+    onCollapse?: ((collapsed: boolean, type: CollapseType) => any) | undefined;
+    onBreakpoint?: ((broken: boolean) => any) | undefined;
 }>, {
-    mask: boolean;
-    height: string | number;
-    sticky: boolean;
-    modelValue: boolean;
-    defaultVisible: boolean;
+    scrollbar: boolean | ScrollbarProps;
     width: string | number;
     hideTrigger: boolean;
     collapsed: boolean;
-    location: "top" | "bottom" | "left" | "right" | "end" | "start";
-    maskClosable: boolean;
-    escToClose: boolean;
     theme: "dark" | "light";
-    floating: boolean;
-    defaultCollapsed: boolean;
     collapsible: boolean;
-    rail: boolean;
-    defaultRail: boolean;
-    railWidth: string | number;
-    expandOnHover: boolean;
-    disableResizeWatcher: boolean;
-    disableRouteWatcher: boolean;
-    collapsedWidth: number;
-    temporary: boolean;
-    permanent: boolean;
-    persistent: boolean;
+    defaultCollapsed: boolean;
     reverseArrow: boolean;
-    resizeDirections: ("top" | "bottom" | "left" | "right")[];
+    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;