@antdv-next1/pro-card 2.0.10 → 2.0.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/Card.d.ts CHANGED
@@ -5,6 +5,7 @@ import { CSSProperties, VNode } from "vue";
5
5
  import { VueNode } from "@antdv-next1/pro-utils";
6
6
  import * as _$antdv_next0 from "antdv-next";
7
7
  import { ColProps } from "antdv-next";
8
+ import * as _$antdv_next_dist_form_FormItemLabel0 from "antdv-next/dist/form/FormItemLabel";
8
9
  import { CustomSlotsType } from "@v-c/util/dist/type";
9
10
  import { Gutter } from "antdv-next/dist/grid/row";
10
11
 
@@ -14,7 +15,7 @@ declare const InternalProCard: _$vue.DefineSetupFnComponent<ProCardProps, {}, Cu
14
15
  extra?: () => VueNode;
15
16
  title?: () => VueNode;
16
17
  }>, _$antdv_next0.CardProps & _$antdv_next0.RowProps & {
17
- tooltip?: VueNode;
18
+ tooltip?: _$antdv_next_dist_form_FormItemLabel0.FormItemTooltipType;
18
19
  split?: "vertical" | "horizontal";
19
20
  direction?: "column" | "row";
20
21
  gutter?: Gutter | [Gutter, Gutter];
@@ -26,7 +27,6 @@ declare const InternalProCard: _$vue.DefineSetupFnComponent<ProCardProps, {}, Cu
26
27
  headerBordered?: boolean;
27
28
  ghost?: boolean;
28
29
  collapsible?: CollapsibleType;
29
- collapsed?: boolean;
30
30
  collapsibleIconRender?: ({
31
31
  collapsed
32
32
  }: {
package/dist/Card.js CHANGED
@@ -1,22 +1,35 @@
1
1
  import useStyle from "./style/index.js";
2
- import { Fragment, computed, createTextVNode, createVNode, defineComponent, isVNode, mergeProps, ref, watch } from "vue";
3
- import { childrenToArray, isSpecialNode } from "@antdv-next1/pro-utils";
4
- import { InfoCircleOutlined } from "@antdv-next/icons";
2
+ import { Fragment, cloneVNode, computed, createVNode, defineComponent, isVNode, mergeProps, shallowRef } from "vue";
3
+ import { LabelIconTip, childrenToArray, isSpecialNode } from "@antdv-next1/pro-utils";
5
4
  import { classNames } from "@v-c/util";
6
- import { BorderBeam, Card, Col, Collapse, Row, Tooltip, useBreakpoint } from "antdv-next";
5
+ import { BorderBeam, Card, Col, Collapse, Row, useBreakpoint } from "antdv-next";
7
6
  import { responsiveArray } from "antdv-next/dist/_util/responsiveObserver";
8
7
  import { useConfig } from "antdv-next/dist/config-provider/context";
9
8
  //#region src/Card.tsx
10
9
  function _isSlot(s) {
11
10
  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
12
11
  }
13
- const InternalProCard = /* @__PURE__ */ defineComponent((props, { slots, attrs }) => {
12
+ const breakpointKeyList = [
13
+ "span",
14
+ "flex",
15
+ "offset",
16
+ "order",
17
+ "pull",
18
+ "push",
19
+ "xs",
20
+ "sm",
21
+ "md",
22
+ "lg",
23
+ "xl",
24
+ "xxl"
25
+ ];
26
+ const InternalProCard = /* @__PURE__ */ defineComponent((props, { slots, expose, attrs }) => {
14
27
  const config = useConfig();
15
28
  const prefixCls = computed(() => props.prefixCls || config.value.getPrefixCls("pro"));
16
29
  const baseClassName = computed(() => `${prefixCls.value}-card`);
17
30
  const { wrapSSR, hashId } = useStyle(baseClassName);
18
- const activeKey = ref();
19
31
  const screens = useBreakpoint();
32
+ const collapsed = shallowRef(props.defaultCollapsed || false);
20
33
  /**
21
34
  * 根据响应式获取 gutter, 参考 antd 实现
22
35
  * @param gut
@@ -36,7 +49,7 @@ const InternalProCard = /* @__PURE__ */ defineComponent((props, { slots, attrs }
36
49
  return results;
37
50
  };
38
51
  /**
39
- * 根据条件返回 style.ts,负责返回空对象
52
+ * 根据条件返回 style 负责返回空对象
40
53
  *
41
54
  * @param withStyle 是否符合条件
42
55
  * @param appendStyle 如果符合条件要返回的 style.ts 属性
@@ -44,49 +57,25 @@ const InternalProCard = /* @__PURE__ */ defineComponent((props, { slots, attrs }
44
57
  const getStyle = (withStyle, appendStyle) => {
45
58
  return withStyle ? appendStyle : {};
46
59
  };
47
- watch(() => props.defaultCollapsed, (next) => {
48
- if (!next) activeKey.value = ["collapseCard"];
49
- }, { immediate: true });
50
60
  let containProCard = false;
51
- const slotTitleProps = computed(() => {
52
- if (props.title && props.tooltip || slots.title && props.tooltip) return { title: () => createVNode(Fragment, null, [props.title || slots.title?.(), createVNode(Tooltip, null, {
53
- default: () => [createVNode(InfoCircleOutlined, { "style": {
54
- marginInlineStart: "4px",
55
- cursor: "pointer"
56
- } }, null)],
57
- title: () => props.tooltip
58
- })]) };
59
- if (slots.title && !props.tooltip) return { title: slots.title };
60
- return {};
61
- });
61
+ expose({});
62
62
  return () => {
63
- const { ghost, direction, boxShadow, colSpan, split, align, borderBeam, colStyle, headerBordered = false, collapsible = false, collapsibleIconRender, collapsed: controlCollapsed, defaultCollapsed = false, onChecked, checked, onCollapse, justify, colLg, colFlex, colMd, colXl, colXxl, colSm, colPush, colPull, colXs, disabled, gutter = 0, title, tooltip, ...rest } = props;
63
+ const { ghost = false, direction, boxShadow, colSpan, split, align, borderBeam, colStyle, headerBordered = false, collapsible = false, collapsibleIconRender, defaultCollapsed = false, onChecked, checked, onCollapse, justify, colLg, colFlex, colMd, colXl, colXxl, colSm, colPush, colPull, colOrder, colOffset, colXs, disabled, bordered, gutter = 0, onClick, title, type, tooltip, layout, wrap, ...rest } = props;
64
+ const hasBorderBeamDom = rest.variant !== "borderless" && borderBeam && !disabled;
64
65
  const [horizontalGutter, verticalGutter] = getNormalizedGutter(gutter);
65
66
  const { default: children, title: slotTitle, ...restSlots } = slots;
66
- const childrenDom = childrenToArray(children?.())?.map((element) => {
67
- if (isVNode(element) && !isSpecialNode(element)) {
68
- if (element.props && element.type.isProCard && direction === "column") {
69
- const colBreakpointKeyList = [
70
- "span",
71
- "flex",
72
- "offset",
73
- "order",
74
- "pull",
75
- "push",
76
- "xs",
77
- "sm",
78
- "md",
79
- "lg",
80
- "xl",
81
- "xxl"
82
- ];
67
+ const childrenArray = childrenToArray(children?.());
68
+ const childrenDom = childrenArray.map((element, index) => {
69
+ if (isVNode(element) && !isSpecialNode(element) && element.props && element.type.isProCard) {
70
+ let _slot;
71
+ containProCard = true;
72
+ if (direction === "column" || split === "horizontal") {
83
73
  const colPropsClass = Object.entries(element.props).reduce((prev, [key, value]) => {
84
74
  const keys = key.split("-");
85
- if (colBreakpointKeyList.includes(keys[keys.length - 1])) if (["span", "flex"].includes(keys[keys.length - 1])) prev[`${baseClassName.value}-${keys[keys.length - 2]}-${value}`] = true;
75
+ if (breakpointKeyList.includes(keys[keys.length - 1])) if (["span", "flex"].includes(keys[keys.length - 1])) prev[`${baseClassName.value}-${keys[keys.length - 2]}-${value}`] = true;
86
76
  else prev[`${baseClassName.value}-${key}-${value}`] = true;
87
77
  return prev;
88
78
  }, {});
89
- containProCard = true;
90
79
  return createVNode("div", {
91
80
  "style": {
92
81
  ...getStyle(horizontalGutter > 0, {
@@ -96,87 +85,134 @@ const InternalProCard = /* @__PURE__ */ defineComponent((props, { slots, attrs }
96
85
  ...getStyle(verticalGutter > 0, {
97
86
  paddingBlockStart: `${verticalGutter / 2}px`,
98
87
  paddingBlockEnd: `${verticalGutter / 2}px`
99
- })
88
+ }),
89
+ ...colStyle
100
90
  },
101
- "class": classNames([`${baseClassName.value}-col`], colPropsClass)
102
- }, [element]);
103
- }
104
- if (element.type.isProCard) {
105
- containProCard = true;
106
- return createVNode(Col, [
107
- "span",
108
- "flex",
109
- "offset",
110
- "order",
111
- "pull",
112
- "push",
113
- "xs",
114
- "sm",
115
- "md",
116
- "lg",
117
- "xl",
118
- "xxl"
119
- ].reduce((prev, key) => {
120
- if (element.props?.[`col-${key}`] !== void 0) prev[key] = element.props?.[`col-${key}`];
121
- return prev;
122
- }, {}), _isSlot(element) ? element : { default: () => [element] });
91
+ "key": index,
92
+ "class": classNames([`${baseClassName.value}-col`], colPropsClass, hashId.value, {
93
+ [`${baseClassName.value}-split-horizontal`]: split === "horizontal" && index !== childrenArray.length - 1,
94
+ [`${baseClassName.value}-split-vertical`]: split === "vertical" && index !== childrenArray.length - 1
95
+ })
96
+ }, [cloneVNode(element, {
97
+ size: rest.size,
98
+ type,
99
+ ...element.props
100
+ })]);
123
101
  }
102
+ const colProps = breakpointKeyList.reduce((prev, key) => {
103
+ if (element.props?.[`col-${key}`] !== void 0) {
104
+ const value = element.props?.[`col-${key}`];
105
+ prev[key] = !Number.isNaN(Number(value)) ? Number(value) : value;
106
+ }
107
+ return prev;
108
+ }, {});
109
+ return createVNode(Col, mergeProps(Object.keys(colProps).length ? colProps : wrap ? {} : { flex: 1 }, {
110
+ "style": { ...colStyle },
111
+ "class": classNames({ [`${baseClassName.value}-split-vertical`]: split === "vertical" && index !== childrenArray.length - 1 }, hashId.value),
112
+ "key": index
113
+ }), _isSlot(_slot = cloneVNode(element, {
114
+ size: rest.size,
115
+ type,
116
+ ...element.props
117
+ })) ? _slot : { default: () => [_slot] });
124
118
  }
119
+ containProCard = false;
125
120
  return element;
126
121
  });
127
- return wrapSSR(createVNode(Fragment, null, [collapsible ? createVNode(Collapse, mergeProps({ "bordered": rest.variant !== "borderless" }, defaultCollapsed ? {} : { activeKey: activeKey.value }, {
128
- "class": classNames(baseClassName.value, attrs.class, hashId.value),
129
- "ghost": !ghost
130
- }), { default: () => [createTextVNode("asdsa")] }) : createVNode(Fragment, null, [rest.variant !== "borderless" && borderBeam && !disabled ? createVNode(BorderBeam, typeof borderBeam === "boolean" ? {} : borderBeam, { default: () => [createVNode(Card, mergeProps(attrs, rest, { "class": classNames(baseClassName.value, attrs.class, hashId.value, {
131
- [`${baseClassName.value}-direction-column`]: split === "horizontal" || direction === "column",
132
- [`${baseClassName.value}-ghost`]: ghost,
133
- [`${baseClassName.value}-box-shadow`]: boxShadow,
134
- [`${baseClassName.value}-contain-card`]: containProCard
135
- }) }, title && !tooltip && !slotTitle ? { title } : {}, { "styles": {
136
- header: headerBordered ? {} : { borderBlockEnd: "none" },
137
- ...rest.styles
138
- } }), {
139
- default: () => [direction !== "column" && containProCard ? createVNode(Row, { "gutter": gutter }, _isSlot(childrenDom) ? childrenDom : { default: () => [childrenDom] }) : ghost && containProCard ? createVNode("div", {
140
- "class": `${baseClassName.value}-column`,
141
- "style": {
142
- ...getStyle(horizontalGutter > 0, {
143
- marginInlineEnd: `-${horizontalGutter / 2}px`,
144
- marginInlineStart: `-${horizontalGutter / 2}px`
145
- }),
146
- ...getStyle(verticalGutter > 0, {
147
- marginBlockStart: `-${verticalGutter / 2}px`,
148
- marginBlockEnd: `-${verticalGutter / 2}px`
149
- })
150
- }
151
- }, [childrenDom]) : childrenDom],
152
- ...restSlots,
153
- ...slotTitleProps.value
154
- })] }) : createVNode(Card, mergeProps(attrs, rest, { "class": classNames(baseClassName.value, attrs.class, hashId.value, {
155
- [`${baseClassName.value}-direction-column`]: split === "horizontal" || direction === "column",
156
- [`${baseClassName.value}-ghost`]: ghost,
157
- [`${baseClassName.value}-disabled`]: disabled,
158
- [`${baseClassName.value}-box-shadow`]: boxShadow,
159
- [`${baseClassName.value}-contain-card`]: containProCard
160
- }) }, title && !tooltip && !slotTitle ? { title } : {}, { "styles": {
161
- header: headerBordered ? {} : { borderBlockEnd: "none" },
122
+ const collapseCardDom = createVNode(Collapse, mergeProps({
123
+ "bordered": rest.variant !== "borderless",
124
+ "size": rest.size === "small" ? "small" : "large",
125
+ "ghost": ghost
126
+ }, collapsibleIconRender ? { expandIcon: (panelProps) => collapsibleIconRender({ collapsed: panelProps.isActive || false }) } : {}, {
127
+ "collapsible": typeof collapsible !== "boolean" && collapsible !== "header" ? collapsible : void 0,
128
+ "defaultActiveKey": defaultCollapsed ? void 0 : ["collapseCard"],
129
+ "class": classNames(baseClassName.value, attrs.class, hashId.value, {
130
+ [`${baseClassName.value}-headerBordered`]: headerBordered,
131
+ [`${baseClassName.value}-type-inner`]: type === "inner",
132
+ [`${baseClassName.value}-ghost`]: ghost,
133
+ [`${baseClassName.value}-split`]: split,
134
+ [`${baseClassName.value}-split`]: collapsible,
135
+ [`${baseClassName.value}-disabled`]: disabled,
136
+ [`${baseClassName.value}-box-shadow`]: boxShadow,
137
+ [`${baseClassName.value}-contain-card`]: containProCard
138
+ }),
139
+ "style": attrs.style,
140
+ "classes": {
141
+ body: classNames({
142
+ [`${baseClassName.value}-body-direction-column`]: direction === "column",
143
+ [`${baseClassName.value}-body-layout-center`]: layout === "center"
144
+ }, hashId.value),
145
+ ...rest.classes
146
+ },
147
+ "styles": {
148
+ header: type !== "inner" && rest.size !== "small" ? { paddingBlockEnd: 0 } : {},
149
+ body: { ...containProCard && split && rest.size !== "small" ? { padding: 0 } : split !== void 0 && containProCard && rest.size !== "small" && type !== "inner" || !headerBordered && (slotTitle?.() || props.title) && rest.size !== "small" && split !== void 0 && type !== "inner" ? { paddingBlockStart: 0 } : {} },
150
+ ...rest.styles
151
+ },
152
+ "activeKey": collapsed.value ? void 0 : ["collapseCard"],
153
+ "items": [{
154
+ key: "collapseCard",
155
+ label: createVNode(LabelIconTip, {
156
+ "label": slotTitle?.() || props.title,
157
+ "tooltip": props.tooltip
158
+ }, null),
159
+ content: containProCard ? direction !== "column" && split !== "horizontal" ? createVNode(Row, { "gutter": gutter }, _isSlot(childrenDom) ? childrenDom : { default: () => [childrenDom] }) : createVNode("div", {
160
+ "class": classNames(`${baseClassName.value}-col`, hashId.value, {}),
161
+ "style": {
162
+ ...getStyle(horizontalGutter > 0, {
163
+ marginInlineEnd: `-${horizontalGutter / 2}px`,
164
+ marginInlineStart: `-${horizontalGutter / 2}px`
165
+ }),
166
+ ...getStyle(verticalGutter > 0, {
167
+ marginBlockStart: `-${verticalGutter / 2}px`,
168
+ marginBlockEnd: `-${verticalGutter / 2}px`
169
+ })
170
+ }
171
+ }, [childrenDom]) : childrenDom,
172
+ extra: rest.extra
173
+ }]
174
+ }), null);
175
+ const cardDom = createVNode(Card, mergeProps(attrs, rest, {
176
+ "type": containProCard ? void 0 : type,
177
+ "class": classNames(baseClassName.value, attrs.class, hashId.value, {
178
+ [`${baseClassName.value}-ghost`]: ghost,
179
+ [`${baseClassName.value}-split`]: split,
180
+ [`${baseClassName.value}-disabled`]: disabled,
181
+ [`${baseClassName.value}-box-shadow`]: boxShadow,
182
+ [`${baseClassName.value}-contain-card`]: containProCard
183
+ })
184
+ }, { onClick: (e) => onClick?.(e) }, {
185
+ "style": attrs.style,
186
+ "classes": {
187
+ body: classNames(`${baseClassName.value}-body`, {
188
+ [`${baseClassName.value}-body-direction-column`]: direction === "column",
189
+ [`${baseClassName.value}-body-layout-center`]: layout === "center"
190
+ }, hashId.value),
191
+ ...rest.classes
192
+ }
193
+ }, title && !tooltip && !slotTitle ? { title } : {}, { "styles": {
194
+ header: headerBordered || type ? {} : {
195
+ borderBlockEnd: "none",
196
+ ...type !== "inner" && split === "horizontal" || split === "vertical" ? { paddingBlockEnd: 0 } : {}
197
+ },
198
+ body: {
199
+ ...containProCard && split && rest.size !== "small" ? { padding: 0 } : !split && containProCard && rest.size !== "small" && type !== "inner" || !headerBordered && (slotTitle?.() || props.title) && type !== "inner" ? { paddingBlockStart: 0 } : {},
200
+ ...!containProCard && layout === "center" ? {
201
+ display: "flex",
202
+ justifyContent: "center",
203
+ alignItems: "center"
204
+ } : {}
205
+ },
162
206
  ...rest.styles
163
207
  } }), {
164
- default: () => [direction !== "column" && containProCard ? createVNode(Row, { "gutter": gutter }, _isSlot(childrenDom) ? childrenDom : { default: () => [childrenDom] }) : ghost && containProCard ? createVNode("div", {
165
- "class": `${baseClassName.value}-column`,
166
- "style": {
167
- ...getStyle(horizontalGutter > 0, {
168
- marginInlineEnd: `-${horizontalGutter / 2}px`,
169
- marginInlineStart: `-${horizontalGutter / 2}px`
170
- }),
171
- ...getStyle(verticalGutter > 0, {
172
- marginBlockStart: `-${verticalGutter / 2}px`,
173
- marginBlockEnd: `-${verticalGutter / 2}px`
174
- })
175
- }
176
- }, [childrenDom]) : childrenDom],
208
+ default: () => [containProCard ? direction !== "column" && split !== "horizontal" ? createVNode(Row, { "gutter": gutter }, _isSlot(childrenDom) ? childrenDom : { default: () => [childrenDom] }) : createVNode("div", { "class": classNames(`${baseClassName.value}-row`, hashId.value) }, [childrenDom]) : childrenDom],
177
209
  ...restSlots,
178
- ...slotTitleProps.value
179
- })])]));
210
+ ...slotTitle || tooltip ? { title: () => createVNode(LabelIconTip, {
211
+ "label": slotTitle?.() || props.title,
212
+ "tooltip": props.tooltip
213
+ }, null) } : {}
214
+ });
215
+ return wrapSSR(createVNode(Fragment, null, [typeof collapsible !== "boolean" ? hasBorderBeamDom ? createVNode(BorderBeam, typeof borderBeam === "boolean" ? {} : borderBeam, _isSlot(collapseCardDom) ? collapseCardDom : { default: () => [collapseCardDom] }) : collapseCardDom : hasBorderBeamDom ? createVNode(BorderBeam, typeof borderBeam === "boolean" ? {} : borderBeam, _isSlot(cardDom) ? cardDom : { default: () => [cardDom] }) : cardDom]));
180
216
  };
181
217
  }, {
182
218
  props: {
@@ -207,7 +243,7 @@ const InternalProCard = /* @__PURE__ */ defineComponent((props, { slots, attrs }
207
243
  bordered: {
208
244
  type: Boolean,
209
245
  required: false,
210
- default: void 0
246
+ default: false
211
247
  },
212
248
  headStyle: {
213
249
  type: Object,
@@ -225,7 +261,7 @@ const InternalProCard = /* @__PURE__ */ defineComponent((props, { slots, attrs }
225
261
  hoverable: {
226
262
  type: Boolean,
227
263
  required: false,
228
- default: void 0
264
+ default: false
229
265
  },
230
266
  id: {
231
267
  type: String,
@@ -318,7 +354,8 @@ const InternalProCard = /* @__PURE__ */ defineComponent((props, { slots, attrs }
318
354
  Object,
319
355
  Array
320
356
  ],
321
- required: false
357
+ required: false,
358
+ default: 0
322
359
  },
323
360
  align: {
324
361
  type: [String, Object],
@@ -331,7 +368,7 @@ const InternalProCard = /* @__PURE__ */ defineComponent((props, { slots, attrs }
331
368
  wrap: {
332
369
  type: Boolean,
333
370
  required: false,
334
- default: void 0
371
+ default: false
335
372
  },
336
373
  tooltip: {
337
374
  type: [
@@ -340,8 +377,7 @@ const InternalProCard = /* @__PURE__ */ defineComponent((props, { slots, attrs }
340
377
  String,
341
378
  Number,
342
379
  null,
343
- Boolean,
344
- Array
380
+ Boolean
345
381
  ],
346
382
  required: false,
347
383
  default: void 0
@@ -370,7 +406,7 @@ const InternalProCard = /* @__PURE__ */ defineComponent((props, { slots, attrs }
370
406
  boxShadow: {
371
407
  type: Boolean,
372
408
  required: false,
373
- default: void 0
409
+ default: false
374
410
  },
375
411
  disabled: {
376
412
  type: Boolean,
@@ -380,23 +416,18 @@ const InternalProCard = /* @__PURE__ */ defineComponent((props, { slots, attrs }
380
416
  headerBordered: {
381
417
  type: Boolean,
382
418
  required: false,
383
- default: void 0
419
+ default: false
384
420
  },
385
421
  ghost: {
386
422
  type: Boolean,
387
423
  required: false,
388
- default: void 0
424
+ default: false
389
425
  },
390
426
  collapsible: {
391
427
  type: [String, Boolean],
392
428
  required: false,
393
429
  default: void 0
394
430
  },
395
- collapsed: {
396
- type: Boolean,
397
- required: false,
398
- default: void 0
399
- },
400
431
  collapsibleIconRender: {
401
432
  type: Function,
402
433
  required: false
@@ -404,7 +435,7 @@ const InternalProCard = /* @__PURE__ */ defineComponent((props, { slots, attrs }
404
435
  defaultCollapsed: {
405
436
  type: Boolean,
406
437
  required: false,
407
- default: void 0
438
+ default: false
408
439
  },
409
440
  onCollapse: {
410
441
  type: Function,
package/dist/ProCard.d.ts CHANGED
@@ -1,14 +1,15 @@
1
1
  import { CollapsibleType } from "./typing.js";
2
2
  import * as _$vue from "vue";
3
- import { CSSProperties, Plugin, VNode } from "vue";
3
+ import { CSSProperties, Plugin } from "vue";
4
4
  import { VueNode } from "@antdv-next1/pro-utils";
5
- import { BorderBeamProps, CardProps, ColProps, RowProps } from "antdv-next";
5
+ import { BorderBeamProps, CardGrid, CardMeta, CardProps, ColProps, RowProps } from "antdv-next";
6
+ import { FormItemTooltipType } from "antdv-next/dist/form/FormItemLabel";
6
7
  import { CustomSlotsType } from "@v-c/util/dist/type";
7
8
  import { Gutter } from "antdv-next/dist/grid/row";
8
9
 
9
10
  //#region src/ProCard.d.ts
10
11
  type ProCardProps = CardProps & RowProps & {
11
- /** 标题说明 */tooltip?: VueNode; /** 拆分卡片方式 */
12
+ /** 标题说明 */tooltip?: FormItemTooltipType; /** 拆分卡片方式 */
12
13
  split?: 'vertical' | 'horizontal'; /** 指定 Flex 方向,仅在嵌套子卡片时有效 */
13
14
  direction?: 'column' | 'row'; /** 栅格间距 */
14
15
  gutter?: Gutter | [Gutter, Gutter];
@@ -19,8 +20,9 @@ type ProCardProps = CardProps & RowProps & {
19
20
  disabled?: boolean; /** 头部是否有分割线 */
20
21
  headerBordered?: boolean; /** 幽灵模式,即是否取消卡片内容区域的 padding 和 背景颜色。 */
21
22
  ghost?: boolean;
22
- collapsible?: CollapsibleType; /** 受控 collapsed 属性 */
23
- collapsed?: boolean; /** 折叠按钮自定义节点 */
23
+ collapsible?: CollapsibleType;
24
+ /** 受控 collapsed 属性 */
25
+ /** 折叠按钮自定义节点 */
24
26
  collapsibleIconRender?: ({
25
27
  collapsed
26
28
  }: {
@@ -45,11 +47,11 @@ type ProCardProps = CardProps & RowProps & {
45
47
  onClick?: (e: MouseEvent) => void;
46
48
  };
47
49
  declare const _ProCard: _$vue.DefineSetupFnComponent<ProCardProps, {}, CustomSlotsType<{
48
- default?: () => VNode[];
50
+ default?: () => VueNode;
49
51
  extra?: () => VueNode;
50
52
  title?: () => VueNode;
51
53
  }>, CardProps & RowProps & {
52
- /** 标题说明 */tooltip?: VueNode; /** 拆分卡片方式 */
54
+ /** 标题说明 */tooltip?: FormItemTooltipType; /** 拆分卡片方式 */
53
55
  split?: "vertical" | "horizontal"; /** 指定 Flex 方向,仅在嵌套子卡片时有效 */
54
56
  direction?: "column" | "row"; /** 栅格间距 */
55
57
  gutter?: Gutter | [Gutter, Gutter];
@@ -60,8 +62,9 @@ declare const _ProCard: _$vue.DefineSetupFnComponent<ProCardProps, {}, CustomSlo
60
62
  disabled?: boolean; /** 头部是否有分割线 */
61
63
  headerBordered?: boolean; /** 幽灵模式,即是否取消卡片内容区域的 padding 和 背景颜色。 */
62
64
  ghost?: boolean;
63
- collapsible?: CollapsibleType; /** 受控 collapsed 属性 */
64
- collapsed?: boolean; /** 折叠按钮自定义节点 */
65
+ collapsible?: CollapsibleType;
66
+ /** 受控 collapsed 属性 */
67
+ /** 折叠按钮自定义节点 */
65
68
  collapsibleIconRender?: ({
66
69
  collapsed
67
70
  }: {
@@ -87,6 +90,8 @@ declare const _ProCard: _$vue.DefineSetupFnComponent<ProCardProps, {}, CustomSlo
87
90
  } & {}, _$vue.PublicProps>;
88
91
  declare const ProCard: typeof _ProCard & Plugin & {
89
92
  isProCard?: boolean;
93
+ CardGrid: typeof CardGrid;
94
+ CardMeta: typeof CardMeta;
90
95
  };
91
96
  //#endregion
92
97
  export { ProCardProps, ProCard as default };
package/dist/ProCard.js CHANGED
@@ -1,8 +1,10 @@
1
1
  import InternalProCard from "./Card.js";
2
2
  import { createVNode, defineComponent, mergeProps } from "vue";
3
+ import { CardGrid, CardMeta } from "antdv-next";
3
4
  import ProConfigProvider from "@antdv-next1/pro-provider";
4
5
  //#region src/ProCard.tsx
5
- const ProCard = /* @__PURE__ */ defineComponent((props, { slots, attrs }) => {
6
+ const ProCard = /* @__PURE__ */ defineComponent((props, { slots, expose, attrs }) => {
7
+ expose({});
6
8
  return () => createVNode(ProConfigProvider, { "needDeps": true }, { default: () => [createVNode(InternalProCard, mergeProps(attrs, props), slots)] });
7
9
  }, {
8
10
  props: {
@@ -166,8 +168,7 @@ const ProCard = /* @__PURE__ */ defineComponent((props, { slots, attrs }) => {
166
168
  String,
167
169
  Number,
168
170
  null,
169
- Boolean,
170
- Array
171
+ Boolean
171
172
  ],
172
173
  required: false,
173
174
  default: void 0
@@ -218,11 +219,6 @@ const ProCard = /* @__PURE__ */ defineComponent((props, { slots, attrs }) => {
218
219
  required: false,
219
220
  default: void 0
220
221
  },
221
- collapsed: {
222
- type: Boolean,
223
- required: false,
224
- default: void 0
225
- },
226
222
  collapsibleIconRender: {
227
223
  type: Function,
228
224
  required: false
@@ -266,8 +262,12 @@ const ProCard = /* @__PURE__ */ defineComponent((props, { slots, attrs }) => {
266
262
  inheritAttrs: false
267
263
  });
268
264
  ProCard.isProCard = true;
265
+ ProCard.CardGrid = CardGrid;
266
+ ProCard.CardMeta = CardMeta;
269
267
  ProCard.install = (app) => {
270
268
  app.component(ProCard.name, ProCard);
269
+ app.component(ProCard.CardGrid.name, CardGrid);
270
+ app.component(ProCard.CardMeta.name, CardMeta);
271
271
  return app;
272
272
  };
273
273
  //#endregion
@@ -1,7 +1,7 @@
1
1
  import { ProCardProps } from "../../ProCard.js";
2
2
  import ProCheckCardGroup from "./Group.js";
3
3
  import * as _$vue from "vue";
4
- import { VNode } from "vue";
4
+ import { Plugin, VNode } from "vue";
5
5
  import { VueNode } from "@v-c/util";
6
6
  import { BorderBeamProps, CardMetaProps, CardProps } from "antdv-next";
7
7
  import { CustomSlotsType } from "@v-c/util/dist/type";
@@ -27,7 +27,7 @@ declare const _ProCheckCard: _$vue.DefineSetupFnComponent<ProCheckCardProps, {},
27
27
  extra?: () => VueNode[];
28
28
  cover?: () => VueNode[];
29
29
  description?: () => VNode[];
30
- }>, CardMetaProps & Omit<CardProps, "size" | "title" | "onTabChange" | "activeTabKey" | "defaultActiveTabKey" | "headStyle" | "bodyStyle" | "tabBarExtraContent" | "tabList" | "type"> & {
30
+ }>, CardMetaProps & Omit<CardProps, "size" | "title" | "type" | "headStyle" | "bodyStyle" | "tabList" | "tabBarExtraContent" | "activeTabKey" | "defaultActiveTabKey" | "onTabChange"> & {
31
31
  /** 边框流光 */borderBeam?: BorderBeamProps | boolean;
32
32
  size?: CardProps["size"] | "large";
33
33
  checked?: boolean;
@@ -42,6 +42,6 @@ declare const _ProCheckCard: _$vue.DefineSetupFnComponent<ProCheckCardProps, {},
42
42
  } & {}, _$vue.PublicProps>;
43
43
  declare const ProCheckCard: typeof _ProCheckCard & {
44
44
  Group?: typeof ProCheckCardGroup;
45
- };
45
+ } & Plugin;
46
46
  //#endregion
47
47
  export { ProCheckCardProps, ProCheckCard as default };
@@ -22,6 +22,7 @@ const ProCheckCard = /* @__PURE__ */ defineComponent((props, { slots, attrs }) =
22
22
  const checkCardProps = reactive({});
23
23
  const [stateChecked, setStateChecked] = useMountMergeState(props.defaultChecked || false, {
24
24
  value: toRef(() => props.checked),
25
+ defaultValue: props.defaultChecked,
25
26
  onChange: (checked) => {
26
27
  props["onUpdate:checked"]?.(checked);
27
28
  props.onChange?.(checked);
@@ -86,15 +87,18 @@ const ProCheckCard = /* @__PURE__ */ defineComponent((props, { slots, attrs }) =
86
87
  "src": cover,
87
88
  "alt": "checkcard"
88
89
  }, null) : coverDom
89
- }), { ...headerDom || avatarDom || descriptionDom || cardLoading ? { default: () => createVNode(CardMeta, {
90
- "title": headerDom,
91
- "description": descriptionDom,
92
- "class": classNames(`${baseClassName.value}-meta`, hashId.value, {
93
- [`${baseClassName.value}-meta-avatar-header`]: avatarDom && headerDom && !descriptionDom,
94
- [`${baseClassName.value}-meta-extra-header`]: !isNil(extraDom)
95
- }),
96
- "avatar": avatarDom
97
- }, null) } : {} }));
90
+ }), {
91
+ ...slots,
92
+ default: () => createVNode(Fragment, null, [(headerDom || avatarDom || descriptionDom || cardLoading) && createVNode(CardMeta, {
93
+ "title": headerDom,
94
+ "description": descriptionDom,
95
+ "class": classNames(`${baseClassName.value}-meta`, hashId.value, {
96
+ [`${baseClassName.value}-meta-avatar-header`]: avatarDom && headerDom && !descriptionDom,
97
+ [`${baseClassName.value}-meta-extra-header`]: !isNil(extraDom)
98
+ }),
99
+ "avatar": avatarDom
100
+ }, null), slots.default?.() && createVNode("div", { "class": classNames(`${baseClassName.value}-body`, hashId.value) }, [slots.default?.()])])
101
+ }));
98
102
  };
99
103
  }, {
100
104
  props: {
@@ -258,11 +262,19 @@ const ProCheckCard = /* @__PURE__ */ defineComponent((props, { slots, attrs }) =
258
262
  type: Function,
259
263
  required: false
260
264
  },
261
- collapsible: { required: false }
265
+ collapsible: {
266
+ type: [String, Boolean],
267
+ required: false,
268
+ default: void 0
269
+ }
262
270
  },
263
271
  name: "ProCheckCard",
264
272
  inheritAttrs: false
265
273
  });
266
274
  ProCheckCard.Group = ProCheckCardGroup;
275
+ ProCheckCard.install = (app) => {
276
+ app.component(ProCheckCard.name, ProCheckCard);
277
+ app.component(ProCheckCardGroup.name, ProCheckCardGroup);
278
+ };
267
279
  //#endregion
268
280
  export { ProCheckCard as default };
@@ -35,6 +35,7 @@ const genProCheckCardStyle = (token) => {
35
35
  cursor: "pointer",
36
36
  transition: "all 0.3s",
37
37
  verticalAlign: "top",
38
+ "&-body": { paddingBlockStart: token.padding },
38
39
  "&:not(:last-child)": {
39
40
  marginInlineEnd: token.margin,
40
41
  marginBlockEnd: token.margin
@@ -1,9 +1,9 @@
1
1
  import { useStyle } from "./style/index.js";
2
2
  import { Fragment, computed, createVNode, defineComponent, mergeProps } from "vue";
3
- import { QuestionCircleOutlined } from "@antdv-next/icons";
4
3
  import { classNames } from "@v-c/util";
5
4
  import { Badge, Statistic as Statistic$1, Tooltip } from "antdv-next";
6
5
  import { useConfig } from "antdv-next/dist/config-provider/context";
6
+ import { QuestionCircleOutlined } from "@antdv-next/icons";
7
7
  //#region src/components/Statistic/index.tsx
8
8
  const Statistic = /* @__PURE__ */ defineComponent((props, { attrs }) => {
9
9
  const config = useConfig();