@sdata/web-vue 3.30.0 → 4.0.0

package/es/card/card.js

@@ -1,182 +1,5 @@
-import { configProviderInjectionKey } from "../config-provider/context.js";
-import _objectSpread2 from "../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/objectSpread2.js";
-import { getPrefixCls } from "../_utils/global-config.js";
-import { getAllElements } from "../_utils/vue-utils.js";
-import { useSize } from "../_hooks/use-size.js";
-import { useScrollbar } from "../_hooks/use-scrollbar.js";
-import Scrollbar from "../scrollbar/index.js";
-import Spin from "../spin/index.js";
-import { cardInjectionKey } from "./context.js";
-import { computed, createVNode, defineComponent, inject, mergeProps, provide, reactive, toRef, toRefs } from "vue";
-//#region components/card/card.tsx
-var card_default = /* @__PURE__ */ defineComponent({
-	name: "Card",
-	components: {
-		Spin,
-		Scrollbar
-	},
-	props: {
-		/**
-		* @zh 是否有边框
-		* @en Whether to render the border
-		*/
-		bordered: {
-			type: Boolean,
-			default: true
-		},
-		/**
-		* @zh 是否为加载中
-		* @en Loading status
-		*/
-		loading: {
-			type: Boolean,
-			default: false
-		},
-		/**
-		* @zh 传递给加载中 Spin 的属性
-		* @en Props passed to the loading Spin
-		*/
-		spinProps: { type: Object },
-		/**
-		* @zh 是否可悬浮
-		* @en Can be hovered
-		*/
-		hoverable: {
-			type: Boolean,
-			default: false
-		},
-		/**
-		* @zh 卡片尺寸
-		* @en Size of card
-		* @values 'medium', 'small'
-		* @defaultValue 'medium'
-		*/
-		size: { type: String },
-		/**
-		* @zh 自定义标题区域样式
-		* @en The additional css style to apply to card head
-		*/
-		headerStyle: {
-			type: Object,
-			default: () => ({})
-		},
-		/**
-		* @zh 内容区域自定义样式
-		* @en The additional css style to apply to card content
-		*/
-		bodyStyle: {
-			type: Object,
-			default: () => ({})
-		},
-		/**
-		* @zh 卡片标题
-		* @en Title of card
-		*/
-		title: { type: String },
-		/**
-		* @zh 卡片右上角的操作区域
-		* @en Content to render in the top-right corner of the card
-		*/
-		extra: { type: String },
-		/**
-		* @zh 是否高度撑满父容器（内容区域自动滚动，仅在父容器有确定高度时生效）
-		* @en Whether to fill the height of the parent container (the content area scrolls automatically, only effective when the parent container has a determinate height)
-		*/
-		fullHeight: {
-			type: Boolean,
-			default: false
-		},
-		/**
-		* @zh 内容区域是否使用 Scrollbar 组件滚动，可传入对象自定义滚动条配置。为 false 时使用原生 overflow 滚动。仅 `full-height` 为 true 时生效
-		* @en Whether the content area uses the Scrollbar component for scrolling, an object can be passed to customize the scrollbar. When false, native overflow scrolling is used. Only effective when `full-height` is true
-		* @defaultValue true
-		*/
-		scrollbar: {
-			type: [Boolean, Object],
-			default: true
-		}
-	},
-	/**
-	* @zh 卡片标题
-	* @en Title of card
-	* @slot title
-	*/
-	/**
-	* @zh 卡片右上角的操作区域
-	* @en Content to render in the top-right corner of the card
-	* @slot extra
-	*/
-	/**
-	* @zh 卡片封面
-	* @en Cover of card
-	* @slot cover
-	*/
-	/**
-	* @zh 卡片底部的操作组
-	* @en The action list which shows at the bottom of the Card
-	* @slot actions
-	*/
-	setup(props, { slots }) {
-		const configCtx = inject(configProviderInjectionKey, void 0);
-		const mergedSpinProps = computed(() => _objectSpread2(_objectSpread2({}, configCtx === null || configCtx === void 0 ? void 0 : configCtx.cardSpinProps), props.spinProps));
-		const prefixCls = getPrefixCls("card");
-		const { size } = toRefs(props);
-		const { mergedSize: _mergedSize } = useSize(size);
-		const mergedSize = computed(() => {
-			if (_mergedSize.value === "small" || _mergedSize.value === "mini") return "small";
-			return "medium";
-		});
-		const { scrollbarProps } = useScrollbar(toRef(props, "scrollbar"));
-		const scrollEnabled = computed(() => props.fullHeight && props.scrollbar !== false);
-		const renderActions = (vns) => {
-			const actions = getAllElements(vns);
-			return createVNode("div", { "class": `${prefixCls}-actions` }, [createVNode("div", { "class": `${prefixCls}-actions-right` }, [actions.map((action, index) => createVNode("span", {
-				"key": `action-${index}`,
-				"class": `${prefixCls}-actions-item`
-			}, [action]))])]);
-		};
-		const cardContext = reactive({
-			hasMeta: false,
-			hasGrid: false,
-			slots,
-			renderActions
-		});
-		provide(cardInjectionKey, cardContext);
-		const cls = computed(() => [
-			prefixCls,
-			`${prefixCls}-size-${mergedSize.value}`,
-			{
-				[`${prefixCls}-loading`]: props.loading,
-				[`${prefixCls}-bordered`]: props.bordered,
-				[`${prefixCls}-hoverable`]: props.hoverable,
-				[`${prefixCls}-contain-grid`]: cardContext.hasGrid,
-				[`${prefixCls}-full-height`]: props.fullHeight
-			}
-		]);
-		const bodyCls = computed(() => [`${prefixCls}-body`, {
-			[`${prefixCls}-body-scroll`]: scrollEnabled.value,
-			[`${prefixCls}-body-native`]: props.fullHeight && props.scrollbar === false
-		}]);
-		return () => {
-			var _slots$title, _slots$extra, _slots$title2, _slots$title3, _slots$extra2, _slots$extra3, _slots$default2;
-			const hasTitle = Boolean((_slots$title = slots.title) !== null && _slots$title !== void 0 ? _slots$title : props.title);
-			const hasExtra = Boolean((_slots$extra = slots.extra) !== null && _slots$extra !== void 0 ? _slots$extra : props.extra);
-			return createVNode("div", { "class": cls.value }, [
-				(hasTitle || hasExtra) && createVNode("div", {
-					"class": [`${prefixCls}-header`, { [`${prefixCls}-header-no-title`]: !hasTitle }],
-					"style": props.headerStyle
-				}, [hasTitle && createVNode("div", { "class": `${prefixCls}-header-title` }, [(_slots$title2 = (_slots$title3 = slots.title) === null || _slots$title3 === void 0 ? void 0 : _slots$title3.call(slots)) !== null && _slots$title2 !== void 0 ? _slots$title2 : props.title]), hasExtra && createVNode("div", { "class": `${prefixCls}-header-extra` }, [(_slots$extra2 = (_slots$extra3 = slots.extra) === null || _slots$extra3 === void 0 ? void 0 : _slots$extra3.call(slots)) !== null && _slots$extra2 !== void 0 ? _slots$extra2 : props.extra])]),
-				slots.cover && createVNode("div", { "class": `${prefixCls}-cover` }, [slots.cover()]),
-				createVNode("div", {
-					"class": bodyCls.value,
-					"style": props.bodyStyle
-				}, [props.loading ? createVNode(Spin, mergedSpinProps.value, null) : scrollEnabled.value ? createVNode(Scrollbar, mergeProps(scrollbarProps.value, { "outerClass": `${prefixCls}-body-scrollbar` }), { default: () => {
-					var _slots$default;
-					return [(_slots$default = slots.default) === null || _slots$default === void 0 ? void 0 : _slots$default.call(slots)];
-				} }) : (_slots$default2 = slots.default) === null || _slots$default2 === void 0 ? void 0 : _slots$default2.call(slots), slots.actions && !cardContext.hasMeta && renderActions(slots.actions())])
-			]);
-		};
-	}
-});
+import card_vue_vue_type_script_setup_true_lang_default from "./card.vue_vue_type_script_setup_true_lang.js";
+//#region components/card/card.vue
+var card_default = card_vue_vue_type_script_setup_true_lang_default;
 //#endregion
 export { card_default as default };

package/es/card/card.vue.d.ts

@@ -0,0 +1,40 @@
+import type { CSSProperties, VNode } from 'vue';
+import type { ScrollbarProps } from '../scrollbar';
+import type { SpinProps } from '../spin';
+type __VLS_Props = {
+    bordered?: boolean;
+    loading?: boolean;
+    spinProps?: SpinProps;
+    hoverable?: boolean;
+    size?: 'medium' | 'small';
+    headerStyle?: CSSProperties;
+    bodyStyle?: CSSProperties;
+    title?: string;
+    extra?: string;
+    fullHeight?: boolean;
+    scrollbar?: boolean | ScrollbarProps;
+};
+type __VLS_Slots = {
+    default?: () => VNode[];
+    title?: () => VNode[];
+    extra?: () => VNode[];
+    cover?: () => VNode[];
+    actions?: () => VNode[];
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    scrollbar: boolean | ScrollbarProps;
+    loading: boolean;
+    bordered: boolean;
+    hoverable: boolean;
+    bodyStyle: CSSProperties;
+    fullHeight: boolean;
+    headerStyle: CSSProperties;
+}, {}, {}, {}, 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/es/card/card.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,116 @@
+import { configProviderInjectionKey } from "../config-provider/context.js";
+import _objectSpread2 from "../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/objectSpread2.js";
+import { getPrefixCls } from "../_utils/global-config.js";
+import { useSize } from "../_hooks/use-size.js";
+import { useScrollbar } from "../_hooks/use-scrollbar.js";
+import Scrollbar from "../scrollbar/index.js";
+import Spin from "../spin/index.js";
+import { cardInjectionKey } from "./context.js";
+import card_actions_default from "./card-actions.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, defineComponent, inject, mergeProps, normalizeClass, normalizeProps, normalizeStyle, openBlock, provide, reactive, renderSlot, toDisplayString, toRef, unref, useSlots, withCtx } from "vue";
+//#region components/card/card.vue?vue&type=script&setup=true&lang.ts
+var card_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent(_objectSpread2(_objectSpread2({}, {
+	name: "Card",
+	inheritAttrs: false
+}), {}, {
+	__name: "card",
+	props: {
+		bordered: {
+			type: Boolean,
+			default: true
+		},
+		loading: {
+			type: Boolean,
+			default: false
+		},
+		spinProps: {},
+		hoverable: {
+			type: Boolean,
+			default: false
+		},
+		size: {},
+		headerStyle: { default: () => ({}) },
+		bodyStyle: { default: () => ({}) },
+		title: {},
+		extra: {},
+		fullHeight: {
+			type: Boolean,
+			default: false
+		},
+		scrollbar: {
+			type: [Boolean, Object],
+			default: true
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const slots = useSlots();
+		const configCtx = inject(configProviderInjectionKey, void 0);
+		const mergedSpinProps = computed(() => _objectSpread2(_objectSpread2({}, configCtx === null || configCtx === void 0 ? void 0 : configCtx.cardSpinProps), props.spinProps));
+		const prefixCls = getPrefixCls("card");
+		const { mergedSize: resolvedSize } = useSize(toRef(props, "size"));
+		const mergedSize = computed(() => resolvedSize.value === "small" || resolvedSize.value === "mini" ? "small" : "medium");
+		const { scrollbarProps } = useScrollbar(toRef(props, "scrollbar"));
+		const scrollEnabled = computed(() => props.fullHeight && props.scrollbar !== false);
+		const cardContext = reactive({
+			hasMeta: false,
+			hasGrid: false,
+			slots
+		});
+		provide(cardInjectionKey, cardContext);
+		const hasTitle = computed(() => {
+			var _slots$title;
+			return Boolean((_slots$title = slots.title) !== null && _slots$title !== void 0 ? _slots$title : props.title);
+		});
+		const hasExtra = computed(() => {
+			var _slots$extra;
+			return Boolean((_slots$extra = slots.extra) !== null && _slots$extra !== void 0 ? _slots$extra : props.extra);
+		});
+		const cls = computed(() => [
+			prefixCls,
+			`${prefixCls}-size-${mergedSize.value}`,
+			{
+				[`${prefixCls}-loading`]: props.loading,
+				[`${prefixCls}-bordered`]: props.bordered,
+				[`${prefixCls}-hoverable`]: props.hoverable,
+				[`${prefixCls}-contain-grid`]: cardContext.hasGrid,
+				[`${prefixCls}-full-height`]: props.fullHeight
+			}
+		]);
+		const bodyCls = computed(() => [`${prefixCls}-body`, {
+			[`${prefixCls}-body-scroll`]: scrollEnabled.value,
+			[`${prefixCls}-body-native`]: props.fullHeight && props.scrollbar === false
+		}]);
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", mergeProps(_ctx.$attrs, { class: cls.value }), [
+				hasTitle.value || hasExtra.value ? (openBlock(), createElementBlock("div", {
+					key: 0,
+					class: normalizeClass([`${unref(prefixCls)}-header`, { [`${unref(prefixCls)}-header-no-title`]: !hasTitle.value }]),
+					style: normalizeStyle(__props.headerStyle)
+				}, [hasTitle.value ? (openBlock(), createElementBlock("div", {
+					key: 0,
+					class: normalizeClass(`${unref(prefixCls)}-header-title`)
+				}, [_ctx.$slots.title ? renderSlot(_ctx.$slots, "title", {}, void 0, void 0, 0) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createTextVNode(toDisplayString(__props.title), 1)], 64))], 2)) : createCommentVNode("", true), hasExtra.value ? (openBlock(), createElementBlock("div", {
+					key: 1,
+					class: normalizeClass(`${unref(prefixCls)}-header-extra`)
+				}, [_ctx.$slots.extra ? renderSlot(_ctx.$slots, "extra", {}, void 0, void 0, 0) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createTextVNode(toDisplayString(__props.extra), 1)], 64))], 2)) : createCommentVNode("", true)], 6)) : createCommentVNode("", true),
+				_ctx.$slots.cover ? (openBlock(), createElementBlock("div", {
+					key: 1,
+					class: normalizeClass(`${unref(prefixCls)}-cover`)
+				}, [renderSlot(_ctx.$slots, "cover")], 2)) : createCommentVNode("", true),
+				createElementVNode("div", {
+					class: normalizeClass(bodyCls.value),
+					style: normalizeStyle(__props.bodyStyle)
+				}, [__props.loading ? (openBlock(), createBlock(unref(Spin), normalizeProps(mergeProps({ key: 0 }, mergedSpinProps.value)), null, 16)) : scrollEnabled.value ? (openBlock(), createBlock(unref(Scrollbar), mergeProps({ key: 1 }, unref(scrollbarProps), { "outer-class": `${unref(prefixCls)}-body-scrollbar` }), {
+					default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+					_: 3
+				}, 16, ["outer-class"])) : renderSlot(_ctx.$slots, "default", {}, void 0, void 0, 2), _ctx.$slots.actions && !cardContext.hasMeta ? (openBlock(), createBlock(card_actions_default, {
+					key: 3,
+					actions: _ctx.$slots.actions()
+				}, null, 8, ["actions"])) : createCommentVNode("", true)], 6)
+			], 16);
+		};
+	}
+}));
+//#endregion
+export { card_vue_vue_type_script_setup_true_lang_default as default };

package/es/card/context.d.ts

@@ -1,8 +1,7 @@
-import { InjectionKey, Slots, VNode } from 'vue';
+import type { InjectionKey, Slots } from 'vue';
 export interface CardContext {
     hasMeta: boolean;
     hasGrid: boolean;
     slots: Slots;
-    renderActions: (vns: VNode[]) => JSX.Element;
 }
 export declare const cardInjectionKey: InjectionKey<CardContext>;