km-card-layout-component-miniprogram 0.1.5 → 0.1.6
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/example/pages/home/index.js +341 -237
- package/miniprogram_dist/components/card-layout/index.js +209 -29
- package/miniprogram_dist/components/card-layout/index.wxml +21 -5
- package/miniprogram_dist/components/card-layout/index.wxss +26 -5
- package/miniprogram_dist/vendor/km-card-layout-core/index.js +57 -181
- package/miniprogram_dist/vendor/km-card-layout-core/interface/data/payload.js +2 -0
- package/miniprogram_dist/vendor/km-card-layout-core/interface/elements.js +2 -0
- package/miniprogram_dist/vendor/km-card-layout-core/interface/index.js +19 -0
- package/miniprogram_dist/vendor/km-card-layout-core/interface/layout.js +2 -0
- package/miniprogram_dist/vendor/km-card-layout-core/interface/render.js +2 -0
- package/package.json +1 -1
- package/script/sync-core.js +9 -1
- package/src/components/card-layout/index.ts +331 -56
- package/src/components/card-layout/index.wxml +21 -5
- package/src/components/card-layout/index.wxss +26 -5
- package/src/vendor/km-card-layout-core/index.ts +151 -461
- package/src/vendor/km-card-layout-core/interface/data/payload.ts +27 -0
- package/src/vendor/km-card-layout-core/interface/elements.ts +73 -0
- package/src/vendor/km-card-layout-core/interface/index.ts +3 -0
- package/src/vendor/km-card-layout-core/interface/layout.ts +19 -0
- package/src/vendor/km-card-layout-core/interface/render.ts +52 -0
- package/src/vendor/km-card-layout-core/types.d.ts +26 -155
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* 背景项
|
|
3
|
+
*/
|
|
4
|
+
export interface TemplateBackground {
|
|
5
|
+
id: number;
|
|
6
|
+
name: string;
|
|
7
|
+
fileId?: number;
|
|
8
|
+
fontColor?: string;
|
|
9
|
+
fontColorExtra?: { name: string | string[]; color: string }[]
|
|
10
|
+
imgUrl: string;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
/**
|
|
15
|
+
* 元素项
|
|
16
|
+
*/
|
|
17
|
+
export interface TemplateItem {
|
|
18
|
+
id: number;
|
|
19
|
+
name: string;
|
|
20
|
+
bind: string;
|
|
21
|
+
key?: string;
|
|
22
|
+
icon?: string;
|
|
23
|
+
default?: string;
|
|
24
|
+
type: 'text' | 'image';
|
|
25
|
+
cate: number;
|
|
26
|
+
required?: 0 | 1;
|
|
27
|
+
}
|
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
export type CardElementType =
|
|
2
|
+
| 'text'
|
|
3
|
+
| 'image'
|
|
4
|
+
| 'icon'
|
|
5
|
+
| 'custom'
|
|
6
|
+
| 'layout-panel';
|
|
7
|
+
|
|
8
|
+
export interface AbsoluteLayoutDefinition {
|
|
9
|
+
mode: 'absolute';
|
|
10
|
+
x: number;
|
|
11
|
+
y: number;
|
|
12
|
+
width: number;
|
|
13
|
+
height: number;
|
|
14
|
+
zIndex?: number;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
export interface CardElementBase {
|
|
18
|
+
id: string;
|
|
19
|
+
type: CardElementType;
|
|
20
|
+
layout: AbsoluteLayoutDefinition;
|
|
21
|
+
visible?: boolean;
|
|
22
|
+
binding?: string;
|
|
23
|
+
style?: Record<string, string | number | undefined>;
|
|
24
|
+
defaultValue?: string;
|
|
25
|
+
key?: string;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
export interface TextIconConfig {
|
|
29
|
+
name?: string;
|
|
30
|
+
size?: number;
|
|
31
|
+
color?: string;
|
|
32
|
+
gap?: number;
|
|
33
|
+
align?: 'left' | 'right';
|
|
34
|
+
enable?: boolean;
|
|
35
|
+
style?: 'fill' | 'dot' | 'line';
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
export interface TextElement extends CardElementBase {
|
|
39
|
+
type: 'text';
|
|
40
|
+
align?: 'left' | 'center' | 'right';
|
|
41
|
+
icon?: TextIconConfig;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
export interface ImageElement extends CardElementBase {
|
|
45
|
+
type: 'image';
|
|
46
|
+
alt?: string;
|
|
47
|
+
fit?: 'cover' | 'contain';
|
|
48
|
+
defaultUrl?: string;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
export interface IconElement extends CardElementBase {
|
|
52
|
+
type: 'icon';
|
|
53
|
+
name?: string;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
export interface CustomElement extends CardElementBase {
|
|
57
|
+
type: 'custom';
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
export interface LayoutPanelElement extends CardElementBase {
|
|
61
|
+
type: 'layout-panel';
|
|
62
|
+
container: {
|
|
63
|
+
mode: 'absolute';
|
|
64
|
+
};
|
|
65
|
+
children?: CardElement[];
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
export type CardElement =
|
|
69
|
+
| TextElement
|
|
70
|
+
| ImageElement
|
|
71
|
+
| IconElement
|
|
72
|
+
| CustomElement
|
|
73
|
+
| LayoutPanelElement;
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import type { CardElement } from './elements';
|
|
2
|
+
|
|
3
|
+
export interface CardLayoutSchema {
|
|
4
|
+
name?: string;
|
|
5
|
+
container: {
|
|
6
|
+
mode: 'absolute';
|
|
7
|
+
};
|
|
8
|
+
width: number;
|
|
9
|
+
height: number;
|
|
10
|
+
backgroundImage?: string;
|
|
11
|
+
backgroundZIndex?: number;
|
|
12
|
+
fontColor?: string;
|
|
13
|
+
borderRadius?: number;
|
|
14
|
+
padding?: number;
|
|
15
|
+
children: CardElement[];
|
|
16
|
+
thumbnail?: string;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
export type CardLayoutInput = CardLayoutSchema[];
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
import type { CardElementType, CardElement } from './elements';
|
|
2
|
+
import type { CardLayoutInput, CardLayoutSchema } from './layout';
|
|
3
|
+
|
|
4
|
+
export interface RenderNodeIcon {
|
|
5
|
+
name: string;
|
|
6
|
+
text?: string;
|
|
7
|
+
size?: string;
|
|
8
|
+
color?: string;
|
|
9
|
+
gap?: string;
|
|
10
|
+
align?: 'left' | 'right';
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
export interface RenderNode {
|
|
14
|
+
id: string;
|
|
15
|
+
type: CardElementType | 'text';
|
|
16
|
+
wrapperStyle: string;
|
|
17
|
+
contentStyle: string;
|
|
18
|
+
name?: string;
|
|
19
|
+
text?: string;
|
|
20
|
+
src?: string;
|
|
21
|
+
mode?: string;
|
|
22
|
+
children?: RenderNode[];
|
|
23
|
+
visible?: boolean;
|
|
24
|
+
icon?: RenderNodeIcon;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
export interface RenderPageResult {
|
|
28
|
+
renderTree: RenderNode[];
|
|
29
|
+
cardStyle: string;
|
|
30
|
+
backgroundImage: string;
|
|
31
|
+
backgroundStyle: string;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
export type RenderResult = RenderPageResult[];
|
|
35
|
+
|
|
36
|
+
export interface BindingContext {
|
|
37
|
+
/**
|
|
38
|
+
* 当前上下文数据的绑定前缀(预留给嵌套场景)
|
|
39
|
+
*/
|
|
40
|
+
contextBinding?: string;
|
|
41
|
+
/**
|
|
42
|
+
* 当前上下文数据(预留给嵌套场景)
|
|
43
|
+
*/
|
|
44
|
+
contextData?: any;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
export type {
|
|
48
|
+
CardElement,
|
|
49
|
+
CardElementType,
|
|
50
|
+
CardLayoutInput,
|
|
51
|
+
CardLayoutSchema,
|
|
52
|
+
};
|
|
@@ -3,159 +3,23 @@
|
|
|
3
3
|
* Mirrors the exported types/functions from index.ts.
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
|
-
export
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
export interface FlexItemOptions {
|
|
24
|
-
flexGrow?: number;
|
|
25
|
-
flexShrink?: number;
|
|
26
|
-
flexBasis?: number | string;
|
|
27
|
-
order?: number;
|
|
28
|
-
alignSelf?: 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline';
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
export interface FlexItemLayoutDefinition {
|
|
32
|
-
mode: 'flex';
|
|
33
|
-
item?: FlexItemOptions;
|
|
34
|
-
width?: number;
|
|
35
|
-
height?: number;
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
export type ElementLayout = AbsoluteLayoutDefinition | FlexItemLayoutDefinition;
|
|
39
|
-
|
|
40
|
-
export interface CardElementBase {
|
|
41
|
-
id: string;
|
|
42
|
-
type: CardElementType;
|
|
43
|
-
layout: ElementLayout;
|
|
44
|
-
visible?: boolean;
|
|
45
|
-
binding?: string;
|
|
46
|
-
style?: Record<string, string | number | undefined>;
|
|
47
|
-
defaultValue?: string;
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
export interface TextElement extends CardElementBase {
|
|
51
|
-
type: 'text';
|
|
52
|
-
align?: 'left' | 'center' | 'right';
|
|
53
|
-
multiline?: boolean;
|
|
54
|
-
}
|
|
55
|
-
|
|
56
|
-
export interface ImageElement extends CardElementBase {
|
|
57
|
-
type: 'image';
|
|
58
|
-
alt?: string;
|
|
59
|
-
fit?: 'cover' | 'contain';
|
|
60
|
-
defaultUrl?: string;
|
|
61
|
-
}
|
|
62
|
-
|
|
63
|
-
export interface IconElement extends CardElementBase {
|
|
64
|
-
type: 'icon';
|
|
65
|
-
name?: string;
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
export interface CustomElement extends CardElementBase {
|
|
69
|
-
type: 'custom';
|
|
70
|
-
}
|
|
71
|
-
|
|
72
|
-
export interface LayoutPanelElement extends CardElementBase {
|
|
73
|
-
type: 'layout-panel';
|
|
74
|
-
container: {
|
|
75
|
-
mode: 'absolute' | 'flex';
|
|
76
|
-
options?: {
|
|
77
|
-
direction?: 'row' | 'column';
|
|
78
|
-
wrap?: 'nowrap' | 'wrap';
|
|
79
|
-
justifyContent?:
|
|
80
|
-
| 'flex-start'
|
|
81
|
-
| 'flex-end'
|
|
82
|
-
| 'center'
|
|
83
|
-
| 'space-between'
|
|
84
|
-
| 'space-around'
|
|
85
|
-
| 'space-evenly';
|
|
86
|
-
alignItems?: 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline';
|
|
87
|
-
gap?: number | { row: number; column: number };
|
|
88
|
-
padding?: number | [number, number] | [number, number, number, number];
|
|
89
|
-
};
|
|
90
|
-
};
|
|
91
|
-
children?: CardElement[];
|
|
92
|
-
}
|
|
93
|
-
|
|
94
|
-
export interface RepeatableGroupItem {
|
|
95
|
-
id: string;
|
|
96
|
-
elements: CardElement[];
|
|
97
|
-
data?: Record<string, any>;
|
|
98
|
-
}
|
|
99
|
-
|
|
100
|
-
export interface RepeatableGroupElement extends CardElementBase {
|
|
101
|
-
type: 'repeatable-group';
|
|
102
|
-
dataPath: string;
|
|
103
|
-
itemTemplate: CardElement[];
|
|
104
|
-
items: RepeatableGroupItem[];
|
|
105
|
-
maxItems?: number;
|
|
106
|
-
mutualExcludes?: string[];
|
|
107
|
-
}
|
|
108
|
-
|
|
109
|
-
export type CardElement =
|
|
110
|
-
| TextElement
|
|
111
|
-
| ImageElement
|
|
112
|
-
| IconElement
|
|
113
|
-
| CustomElement
|
|
114
|
-
| LayoutPanelElement
|
|
115
|
-
| RepeatableGroupElement;
|
|
116
|
-
|
|
117
|
-
export interface CardLayoutSchema {
|
|
118
|
-
name?: string;
|
|
119
|
-
container: {
|
|
120
|
-
mode: 'absolute';
|
|
121
|
-
};
|
|
122
|
-
width: number;
|
|
123
|
-
height: number;
|
|
124
|
-
backgroundImage?: string;
|
|
125
|
-
backgroundZIndex?: number;
|
|
126
|
-
fontColor?: string;
|
|
127
|
-
borderRadius?: number;
|
|
128
|
-
padding?: number;
|
|
129
|
-
children: CardElement[];
|
|
130
|
-
thumbnail?: string;
|
|
131
|
-
}
|
|
132
|
-
|
|
133
|
-
export interface RenderNode {
|
|
134
|
-
id: string;
|
|
135
|
-
type: CardElementType | 'text';
|
|
136
|
-
wrapperStyle: string;
|
|
137
|
-
contentStyle: string;
|
|
138
|
-
name?: string;
|
|
139
|
-
text?: string;
|
|
140
|
-
src?: string;
|
|
141
|
-
mode?: string;
|
|
142
|
-
children?: RenderNode[];
|
|
143
|
-
visible?: boolean;
|
|
144
|
-
}
|
|
145
|
-
|
|
146
|
-
export interface RenderPageResult {
|
|
147
|
-
renderTree: RenderNode[];
|
|
148
|
-
cardStyle: string;
|
|
149
|
-
backgroundImage: string;
|
|
150
|
-
backgroundStyle: string;
|
|
151
|
-
}
|
|
152
|
-
|
|
153
|
-
export type RenderResult = RenderPageResult[];
|
|
154
|
-
|
|
155
|
-
export interface BindingContext {
|
|
156
|
-
contextBinding?: string;
|
|
157
|
-
contextData?: any;
|
|
158
|
-
}
|
|
6
|
+
export * from './interface';
|
|
7
|
+
|
|
8
|
+
import type {
|
|
9
|
+
BindingContext,
|
|
10
|
+
CardElement,
|
|
11
|
+
CardLayoutInput,
|
|
12
|
+
CardLayoutSchema,
|
|
13
|
+
RenderNode,
|
|
14
|
+
RenderResult,
|
|
15
|
+
} from './interface';
|
|
16
|
+
|
|
17
|
+
export type ItemCollectMeta = {
|
|
18
|
+
id: string | number;
|
|
19
|
+
bind?: string | null;
|
|
20
|
+
default?: string | null;
|
|
21
|
+
key?: string | null;
|
|
22
|
+
};
|
|
159
23
|
|
|
160
24
|
export function addUnit(
|
|
161
25
|
value: string | number | undefined | null,
|
|
@@ -167,8 +31,6 @@ export function styleObjectToString(
|
|
|
167
31
|
unit?: 'px' | 'rpx'
|
|
168
32
|
): string;
|
|
169
33
|
|
|
170
|
-
export type CardLayoutInput = CardLayoutSchema[] | string | null | undefined;
|
|
171
|
-
|
|
172
34
|
export function normalizeLayout(layout: CardLayoutInput): CardLayoutSchema[];
|
|
173
35
|
|
|
174
36
|
export function resolveBindingValue(
|
|
@@ -177,6 +39,15 @@ export function resolveBindingValue(
|
|
|
177
39
|
context?: BindingContext
|
|
178
40
|
): any;
|
|
179
41
|
|
|
42
|
+
export function stripLayoutBindings(
|
|
43
|
+
layouts?: CardLayoutSchema[]
|
|
44
|
+
): CardLayoutSchema[];
|
|
45
|
+
|
|
46
|
+
export function applyItemCollectBindings(
|
|
47
|
+
layouts: CardLayoutSchema[],
|
|
48
|
+
items?: ItemCollectMeta[]
|
|
49
|
+
): CardLayoutSchema[];
|
|
50
|
+
|
|
180
51
|
export function buildRenderNodes(
|
|
181
52
|
children: CardElement[],
|
|
182
53
|
data: Record<string, any>,
|