@antdv-next1/pro-card 2.0.5 → 2.0.7
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/README.md +83 -0
- package/dist/ProCard.js +14 -2
- package/dist/components/CheckCard/CheckCard.js +9 -2
- package/dist/components/StatisticCard/index.js +13 -1
- package/dist/pro-card.esm.js +5307 -5307
- package/dist/pro-card.js +65 -65
- package/package.json +10 -5
package/README.md
ADDED
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
# @antdv-next1/pro-card
|
|
2
|
+
|
|
3
|
+
Flexible card component with split layout, grid support, check cards, and statistics for Pro Components.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install @antdv-next1/pro-card
|
|
9
|
+
# or
|
|
10
|
+
pnpm add @antdv-next1/pro-card
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
## Peer Dependencies
|
|
14
|
+
|
|
15
|
+
- `vue` >= 3.5.30
|
|
16
|
+
- `antdv-next` >= 1.3.4
|
|
17
|
+
|
|
18
|
+
## Components
|
|
19
|
+
|
|
20
|
+
| Component | Description |
|
|
21
|
+
|-----------|-------------|
|
|
22
|
+
| `ProCard` | Main card component with split and grid layout |
|
|
23
|
+
| `Statistic` | Statistic display component |
|
|
24
|
+
| `StatisticCard` | Card with built-in statistic display |
|
|
25
|
+
| `ProCheckCard` | Selectable check card |
|
|
26
|
+
| `ProCheckCardGroup` | Group of check cards with single/multi select |
|
|
27
|
+
|
|
28
|
+
## Usage
|
|
29
|
+
|
|
30
|
+
```vue
|
|
31
|
+
<script setup lang="ts">
|
|
32
|
+
import { ProCard } from '@antdv-next1/pro-card'
|
|
33
|
+
</script>
|
|
34
|
+
|
|
35
|
+
<template>
|
|
36
|
+
<ProCard title="Card Title" :bordered="true">
|
|
37
|
+
<ProCard title="Left" split="vertical" :col-span="12">
|
|
38
|
+
Left content
|
|
39
|
+
</ProCard>
|
|
40
|
+
<ProCard title="Right" :col-span="12">
|
|
41
|
+
Right content
|
|
42
|
+
</ProCard>
|
|
43
|
+
</ProCard>
|
|
44
|
+
</template>
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
### Statistic Card
|
|
48
|
+
|
|
49
|
+
```vue
|
|
50
|
+
<script setup lang="ts">
|
|
51
|
+
import { StatisticCard } from '@antdv-next1/pro-card'
|
|
52
|
+
</script>
|
|
53
|
+
|
|
54
|
+
<template>
|
|
55
|
+
<StatisticCard
|
|
56
|
+
:statistic="{ title: 'Total Sales', value: 126560 }"
|
|
57
|
+
/>
|
|
58
|
+
</template>
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
### Check Card
|
|
62
|
+
|
|
63
|
+
```vue
|
|
64
|
+
<script setup lang="ts">
|
|
65
|
+
import { ProCheckCard, ProCheckCardGroup } from '@antdv-next1/pro-card'
|
|
66
|
+
</script>
|
|
67
|
+
|
|
68
|
+
<template>
|
|
69
|
+
<ProCheckCardGroup v-model="selected" multiple>
|
|
70
|
+
<ProCheckCard title="Option A" value="A" />
|
|
71
|
+
<ProCheckCard title="Option B" value="B" />
|
|
72
|
+
</ProCheckCardGroup>
|
|
73
|
+
</template>
|
|
74
|
+
```
|
|
75
|
+
|
|
76
|
+
## Dependencies
|
|
77
|
+
|
|
78
|
+
- `@antdv-next1/pro-provider` — Theme and configuration context
|
|
79
|
+
- `@antdv-next1/pro-utils` — Shared utilities
|
|
80
|
+
|
|
81
|
+
## License
|
|
82
|
+
|
|
83
|
+
[MIT](../../LICENSE)
|
package/dist/ProCard.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import useStyle from "./style/index.js";
|
|
2
2
|
import { Fragment, computed, createTextVNode, createVNode, defineComponent, isVNode, mergeProps, ref, watch } from "vue";
|
|
3
|
-
import { InfoCircleOutlined } from "@antdv-next/icons";
|
|
4
3
|
import { childrenToArray, isSpecialNode } from "@antdv-next1/pro-utils";
|
|
4
|
+
import { InfoCircleOutlined } from "@antdv-next/icons";
|
|
5
5
|
import { classNames } from "@v-c/util";
|
|
6
6
|
import { BorderBeam, Card, Col, Collapse, Row, Tooltip, useBreakpoint } from "antdv-next";
|
|
7
7
|
import { responsiveArray } from "antdv-next/dist/_util/responsiveObserver";
|
|
@@ -180,7 +180,19 @@ const ProCard = /* @__PURE__ */ defineComponent((props, { slots, attrs }) => {
|
|
|
180
180
|
};
|
|
181
181
|
}, {
|
|
182
182
|
props: {
|
|
183
|
-
tooltip: {
|
|
183
|
+
tooltip: {
|
|
184
|
+
type: [
|
|
185
|
+
Object,
|
|
186
|
+
Function,
|
|
187
|
+
String,
|
|
188
|
+
Number,
|
|
189
|
+
null,
|
|
190
|
+
Boolean,
|
|
191
|
+
Array
|
|
192
|
+
],
|
|
193
|
+
required: false,
|
|
194
|
+
default: void 0
|
|
195
|
+
},
|
|
184
196
|
split: {
|
|
185
197
|
type: String,
|
|
186
198
|
required: false
|
|
@@ -214,7 +214,10 @@ const ProCheckCard = /* @__PURE__ */ defineComponent((props, { slots, attrs }) =
|
|
|
214
214
|
required: false,
|
|
215
215
|
default: void 0
|
|
216
216
|
},
|
|
217
|
-
size: {
|
|
217
|
+
size: {
|
|
218
|
+
type: String,
|
|
219
|
+
required: false
|
|
220
|
+
},
|
|
218
221
|
checked: {
|
|
219
222
|
type: Boolean,
|
|
220
223
|
required: false,
|
|
@@ -255,7 +258,11 @@ const ProCheckCard = /* @__PURE__ */ defineComponent((props, { slots, attrs }) =
|
|
|
255
258
|
type: Function,
|
|
256
259
|
required: false
|
|
257
260
|
},
|
|
258
|
-
collapsible: {
|
|
261
|
+
collapsible: {
|
|
262
|
+
type: [String, Boolean],
|
|
263
|
+
required: false,
|
|
264
|
+
default: void 0
|
|
265
|
+
}
|
|
259
266
|
},
|
|
260
267
|
name: "ProCheckCard",
|
|
261
268
|
inheritAttrs: false
|
|
@@ -64,7 +64,19 @@ const StatisticCard = /* @__PURE__ */ defineComponent((props, { attrs, slots })
|
|
|
64
64
|
required: false,
|
|
65
65
|
default: void 0
|
|
66
66
|
},
|
|
67
|
-
tooltip: {
|
|
67
|
+
tooltip: {
|
|
68
|
+
type: [
|
|
69
|
+
Object,
|
|
70
|
+
Function,
|
|
71
|
+
String,
|
|
72
|
+
Number,
|
|
73
|
+
null,
|
|
74
|
+
Boolean,
|
|
75
|
+
Array
|
|
76
|
+
],
|
|
77
|
+
required: false,
|
|
78
|
+
default: void 0
|
|
79
|
+
},
|
|
68
80
|
split: {
|
|
69
81
|
type: String,
|
|
70
82
|
required: false
|