plain-design 1.0.0-beta.87 → 1.0.0-beta.89
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/plain-design.commonjs.min.js +2 -2
- package/dist/plain-design.min.css +1 -0
- package/dist/plain-design.min.js +2 -2
- package/dist/report.html +2 -2
- package/package.json +1 -1
- package/src/packages/components/Corner/corner.scss +14 -0
- package/src/packages/components/Corner/index.tsx +80 -0
- package/src/packages/components/ThemeEditor/index.tsx +1 -9
- package/src/packages/entry.tsx +2 -1
package/package.json
CHANGED
@@ -0,0 +1,80 @@
|
|
1
|
+
import {designComponent, getComponentCls, PropType, useClassCache, useStyleCache} from "plain-design-composition";
|
2
|
+
import {StyleProps, useStyle} from "../../uses/useStyle";
|
3
|
+
import {unit} from "plain-utils/string/unit";
|
4
|
+
import './corner.scss';
|
5
|
+
import {createEnum} from "plain-utils/utils/createEnum";
|
6
|
+
|
7
|
+
const eCornerType = createEnum([
|
8
|
+
'bottom-left',
|
9
|
+
'bottom-right',
|
10
|
+
'top-left',
|
11
|
+
'top-right',
|
12
|
+
|
13
|
+
'left-top',
|
14
|
+
'left-bottom',
|
15
|
+
'right-top',
|
16
|
+
'right-bottom',
|
17
|
+
] as const);
|
18
|
+
|
19
|
+
export const Corner = designComponent({
|
20
|
+
name: 'corner',
|
21
|
+
props: {
|
22
|
+
...StyleProps,
|
23
|
+
customSize: { type: String },
|
24
|
+
type: { type: String as PropType<typeof eCornerType.TYPE>, required: true },
|
25
|
+
color: { type: String },
|
26
|
+
},
|
27
|
+
setup({ props }) {
|
28
|
+
|
29
|
+
const { styleComputed } = useStyle();
|
30
|
+
|
31
|
+
const classes = useClassCache(() => [
|
32
|
+
getComponentCls('corner'),
|
33
|
+
{
|
34
|
+
[`corner-status-${props.status}`]: !!props.status,
|
35
|
+
[`corner-size-${styleComputed.value.size}`]: !props.customSize,
|
36
|
+
},
|
37
|
+
]);
|
38
|
+
|
39
|
+
const styles = useStyleCache((style) => {
|
40
|
+
if (!!props.customSize) {
|
41
|
+
style.height = unit(props.customSize);
|
42
|
+
style.width = unit(props.customSize);
|
43
|
+
}
|
44
|
+
if (!!props.color) {
|
45
|
+
style.color = props.color;
|
46
|
+
}
|
47
|
+
});
|
48
|
+
|
49
|
+
return () => {
|
50
|
+
return (
|
51
|
+
<svg viewBox="0 0 100 100" className={classes.value} style={styles.value}>
|
52
|
+
<path d={pathDValues[type2key[props.type]]}></path>
|
53
|
+
</svg>
|
54
|
+
);
|
55
|
+
};
|
56
|
+
},
|
57
|
+
});
|
58
|
+
|
59
|
+
const pathDValues = {
|
60
|
+
1: 'M 100 0 L 100 100 L 0 100 A 100 100 0 0 0 100 0 Z',
|
61
|
+
2: 'M 0 0 L 0 100 L 100 100 A 100 100 0 0 1 0 0 Z',
|
62
|
+
3: 'M 0 0 L 100 0 L 100 100 A 100 100 0 0 0 0 0',
|
63
|
+
4: 'M 100 0 L 0 0 L 0 100 A 100 100 0 0 1 100 0',
|
64
|
+
};
|
65
|
+
|
66
|
+
const type2key: Record<typeof eCornerType.TYPE, keyof typeof pathDValues> = {
|
67
|
+
[eCornerType["bottom-left"]]: 1 as const,
|
68
|
+
[eCornerType["right-top"]]: 1 as const,
|
69
|
+
|
70
|
+
[eCornerType["bottom-right"]]: 2 as const,
|
71
|
+
[eCornerType["left-top"]]: 2 as const,
|
72
|
+
|
73
|
+
[eCornerType["top-left"]]: 3 as const,
|
74
|
+
[eCornerType["right-bottom"]]: 3 as const,
|
75
|
+
|
76
|
+
[eCornerType["top-right"]]: 4 as const,
|
77
|
+
[eCornerType["left-bottom"]]: 4 as const,
|
78
|
+
};
|
79
|
+
|
80
|
+
export default Corner;
|
@@ -54,15 +54,7 @@ export const ThemeEditor = designComponent({
|
|
54
54
|
ClientZoom.set(state.zoom);
|
55
55
|
},
|
56
56
|
onDarkChange: () => {
|
57
|
-
|
58
|
-
PageThemeUtils.toggle(val);
|
59
|
-
if (val && state.primaryKey === 'dark') {
|
60
|
-
state.primaryKey = 'light';
|
61
|
-
handler.onPrimaryChange();
|
62
|
-
} else if (!val && state.primaryKey === 'light') {
|
63
|
-
state.primaryKey = 'dark';
|
64
|
-
handler.onPrimaryChange();
|
65
|
-
}
|
57
|
+
PageThemeUtils.toggle(state.dark == 'dark');
|
66
58
|
},
|
67
59
|
onPrimaryChange: () => {PageThemeUtils.primary(state.primaryKey);},
|
68
60
|
onInputModeChange: () => {PageThemeUtils.inputMode(state.inputMode);},
|
package/src/packages/entry.tsx
CHANGED
@@ -125,6 +125,7 @@ export {RollingNumber} from './components/RollingNumber';
|
|
125
125
|
export {Paragraph} from './components/Paragraph';
|
126
126
|
export {ParagraphItem} from './components/ParagraphItem';
|
127
127
|
export {ImagePreviewer} from './components/ImagePreviewer/ImagePreviewer';
|
128
|
+
export {Corner} from './components/Corner';
|
128
129
|
|
129
130
|
export {VirtualTable} from './components/VirtualTable';
|
130
131
|
export {Table} from './components/Table';
|
@@ -277,7 +278,7 @@ export type{iRequestInterceptor} from './components/createRequestInterceptor';
|
|
277
278
|
export {createVirtualDraggier} from './components/createVirtualDraggier';
|
278
279
|
export {createWebDraggier} from './components/createWebDraggier';
|
279
280
|
export {createScrollDraggier} from './components/createScrollDraggier';
|
280
|
-
export {loadFile} from './components/loadFile'
|
281
|
+
export {loadFile} from './components/loadFile';
|
281
282
|
|
282
283
|
// @ts-ignore
|
283
284
|
setComponentPrefix(globalComponentPrefix);
|