plain-design 1.0.0-beta.64 → 1.0.0-beta.66
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 +5 -0
- package/dist/plain-design.min.js +2 -2
- package/dist/report.html +2 -2
- package/package.json +1 -1
- package/src/packages/components/ThemeColorSelector/index.tsx +8 -2
- package/src/packages/components/ThemeDarkSelector/index.tsx +6 -2
- package/src/packages/components/ThemeLocaleSelector/index.tsx +6 -2
- package/src/packages/components/ThemeShapeSelector/index.tsx +7 -2
- package/src/packages/components/ThemeSizeSelector/index.tsx +6 -2
- package/src/packages/entry.tsx +6 -0
package/package.json
CHANGED
@@ -1,4 +1,4 @@
|
|
1
|
-
import {designComponent} from "plain-design-composition";
|
1
|
+
import {designComponent, getComponentCls, useClassCache} from "plain-design-composition";
|
2
2
|
import Dropdown from "../Dropdown";
|
3
3
|
import {ThemeColor} from "../ThemeColor";
|
4
4
|
import PageThemeUtils from "../PageThemeUtils";
|
@@ -9,6 +9,12 @@ export const ThemeColorSelector = designComponent({
|
|
9
9
|
name: 'theme-color-selector',
|
10
10
|
inheritPropsType: Dropdown,
|
11
11
|
setup({}) {
|
12
|
+
|
13
|
+
const classes = useClassCache(() => [
|
14
|
+
getComponentCls('theme-selector'),
|
15
|
+
getComponentCls('theme-color-selector'),
|
16
|
+
]);
|
17
|
+
|
12
18
|
return () => (
|
13
19
|
<Dropdown
|
14
20
|
trigger="hover"
|
@@ -16,7 +22,7 @@ export const ThemeColorSelector = designComponent({
|
|
16
22
|
placement="bottom"
|
17
23
|
v-slots={{
|
18
24
|
default: () => (
|
19
|
-
<div className=
|
25
|
+
<div className={classes.value}>
|
20
26
|
<ThemeColor primaryKey={PageThemeUtils.state.primaryKey!}/>
|
21
27
|
</div>
|
22
28
|
),
|
@@ -1,4 +1,4 @@
|
|
1
|
-
import {designComponent, getComponentCls} from "plain-design-composition";
|
1
|
+
import {designComponent, getComponentCls, useClassCache} from "plain-design-composition";
|
2
2
|
import i18n from "../i18n";
|
3
3
|
import Tooltip from "../Tooltip";
|
4
4
|
import PageThemeUtils from "../PageThemeUtils";
|
@@ -9,9 +9,13 @@ export const ThemeDarkSelector = designComponent({
|
|
9
9
|
name: 'theme-dark-selector',
|
10
10
|
setup() {
|
11
11
|
const toggleDarkTheme = () => {PageThemeUtils.toggle();};
|
12
|
+
const classes = useClassCache(() => [
|
13
|
+
getComponentCls('theme-selector'),
|
14
|
+
getComponentCls('theme-dark-selector'),
|
15
|
+
]);
|
12
16
|
return () => (
|
13
17
|
<Tooltip message={i18n.$it('theme.darkOrLight').d("深浅主题")}>
|
14
|
-
<div className={
|
18
|
+
<div className={classes.value} onClick={toggleDarkTheme}>
|
15
19
|
<Icon icon={PageThemeUtils.state.dark ? 'pi-sun' : 'pi-moon'}/>
|
16
20
|
</div>
|
17
21
|
</Tooltip>
|
@@ -1,4 +1,4 @@
|
|
1
|
-
import {designComponent, getComponentCls} from "plain-design-composition";
|
1
|
+
import {designComponent, getComponentCls, useClassCache} from "plain-design-composition";
|
2
2
|
import Dropdown from "../Dropdown";
|
3
3
|
import DropdownOption from "../DropdownOption";
|
4
4
|
import Icon from "../Icon";
|
@@ -11,13 +11,17 @@ export const ThemeLocaleSelector = designComponent({
|
|
11
11
|
i18nManager: {},
|
12
12
|
},
|
13
13
|
setup({}) {
|
14
|
+
const classes = useClassCache(() => [
|
15
|
+
getComponentCls('theme-selector'),
|
16
|
+
getComponentCls('theme-locale-selector'),
|
17
|
+
]);
|
14
18
|
return () => (
|
15
19
|
<Dropdown trigger="hover" align="center" placement="bottom" hideOnClickReference={false} v-slots={{
|
16
20
|
popper: () => i18n.state.localeOptions.map(opt => (
|
17
21
|
<DropdownOption label={opt.label} key={opt.label} onClick={() => i18n.switchTo(opt.key, () => opt.lang)}/>
|
18
22
|
)),
|
19
23
|
default: () => (
|
20
|
-
<div className={
|
24
|
+
<div className={classes.value}>
|
21
25
|
<Icon icon="pi-language"/>
|
22
26
|
</div>
|
23
27
|
)
|
@@ -1,4 +1,4 @@
|
|
1
|
-
import {computed, designComponent, getComponentCls} from "plain-design-composition";
|
1
|
+
import {computed, designComponent, getComponentCls, useClassCache} from "plain-design-composition";
|
2
2
|
import Dropdown from "../Dropdown";
|
3
3
|
import DropdownOption from "../DropdownOption";
|
4
4
|
import i18n from "../i18n";
|
@@ -19,6 +19,11 @@ export const ThemeShapeSelector = designComponent({
|
|
19
19
|
|
20
20
|
const toggleShape = (val: any) => {PageThemeUtils.shape(val);};
|
21
21
|
|
22
|
+
const classes = useClassCache(() => [
|
23
|
+
getComponentCls('theme-selector'),
|
24
|
+
getComponentCls('theme-shape-selector'),
|
25
|
+
]);
|
26
|
+
|
22
27
|
return () => (
|
23
28
|
<Dropdown
|
24
29
|
trigger="hover"
|
@@ -26,7 +31,7 @@ export const ThemeShapeSelector = designComponent({
|
|
26
31
|
placement="bottom"
|
27
32
|
v-slots={{
|
28
33
|
default: () => (
|
29
|
-
<div className={
|
34
|
+
<div className={classes.value}>
|
30
35
|
<Icon icon="pi-copy"/>
|
31
36
|
</div>
|
32
37
|
),
|
@@ -1,4 +1,4 @@
|
|
1
|
-
import {computed, designComponent, getComponentCls} from "plain-design-composition";
|
1
|
+
import {computed, designComponent, getComponentCls, useClassCache} from "plain-design-composition";
|
2
2
|
import Dropdown from "../Dropdown";
|
3
3
|
import DropdownOption from "../DropdownOption";
|
4
4
|
import i18n from "../i18n";
|
@@ -20,13 +20,17 @@ export const ThemeSizeSelector = designComponent({
|
|
20
20
|
|
21
21
|
const toggleSize = (val: any) => {PageThemeUtils.size(val);};
|
22
22
|
|
23
|
+
const classes = useClassCache(() => [
|
24
|
+
getComponentCls('theme-selector'),
|
25
|
+
getComponentCls('theme-size-selector'),
|
26
|
+
]);
|
23
27
|
return () => (
|
24
28
|
<Dropdown trigger="hover" align="center" placement="bottom" hideOnClickReference={false} v-slots={{
|
25
29
|
popper: () => sizeOptions.value.map(opt => (
|
26
30
|
<DropdownOption label={opt.label} val={opt.val} key={opt.val} onClick={() => toggleSize(opt.val)}/>
|
27
31
|
)),
|
28
32
|
default: () => (
|
29
|
-
<div className={
|
33
|
+
<div className={classes.value}>
|
30
34
|
<Icon icon="pi-font-colors"/>
|
31
35
|
</div>
|
32
36
|
)
|
package/src/packages/entry.tsx
CHANGED
@@ -167,6 +167,12 @@ export {eAddressTypeEnum} from './components/$address/address.utils';
|
|
167
167
|
export type {iAddressSyncMeta, iAddressLazyMeta} from './components/$address/address.utils';
|
168
168
|
export type {iPlainAddressData} from './components/createPlainAddressService';
|
169
169
|
export {Empty} from './components/Empty';
|
170
|
+
export {ThemeColor} from './components/ThemeColor';
|
171
|
+
export {ThemeColorSelector} from './components/ThemeColorSelector';
|
172
|
+
export {ThemeLocaleSelector} from './components/ThemeLocaleSelector';
|
173
|
+
export {ThemeDarkSelector} from './components/ThemeDarkSelector';
|
174
|
+
export {ThemeSizeSelector} from './components/ThemeSizeSelector';
|
175
|
+
export {ThemeShapeSelector} from './components/ThemeShapeSelector';
|
170
176
|
|
171
177
|
export {FormInput} from './components/FormInput';
|
172
178
|
export {FormSelect} from './components/FormSelect';
|