plain-design 1.0.0-beta.86 → 1.0.0-beta.88

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "plain-design",
-  "version": "1.0.0-beta.86",
+  "version": "1.0.0-beta.88",
   "description": "",
   "main": "dist/plain-design.min.js",
   "module": "dist/plain-design.commonjs.min.js",

package/src/packages/components/PageThemeUtils/index.tsx

@@ -88,38 +88,39 @@ export const PageThemeUtils = (() => {
     return config;
   });
 
-  const toggle = (isDark?: boolean) => {
-    state.dark = isDark == null ? !state.dark : isDark;
-    darkCache.set(state.dark);
+  const toggle = (isDark?: boolean, onlyCache?: boolean) => {
+    const dark: boolean = isDark == null ? !isDark : isDark;
+    !onlyCache && (state.dark = dark);
+    darkCache.set(dark);
   };
 
-  const primary = (val: string | null) => {
-    state.primaryKey = val;
+  const primary = (val: string | null, onlyCache?: boolean) => {
+    !onlyCache && (state.primaryKey = val);
     primaryCache.set(val);
   };
 
-  const size = (val: typeof ThemeSize.TYPE | null) => {
-    state.size = val;
+  const size = (val: typeof ThemeSize.TYPE | null, onlyCache?: boolean) => {
+    !onlyCache && (state.size = val);
     sizeCache.set(val);
   };
 
-  const shape = (val: typeof ThemeShape.TYPE | null) => {
-    state.shape = val;
+  const shape = (val: typeof ThemeShape.TYPE | null, onlyCache?: boolean) => {
+    !onlyCache && (state.shape = val);
     shapeCache.set(val);
   };
 
-  const inputMode = (val: typeof InputMode.TYPE | null) => {
-    state.inputMode = val;
+  const inputMode = (val: typeof InputMode.TYPE | null, onlyCache?: boolean) => {
+    !onlyCache && (state.inputMode = val);
     inputModeCache.set(val);
   };
 
-  const buttonMode = (val: typeof ThemeMode.TYPE | null) => {
-    state.buttonMode = val;
+  const buttonMode = (val: typeof ThemeMode.TYPE | null, onlyCache?: boolean) => {
+    !onlyCache && (state.buttonMode = val);
     buttonModeCache.set(val);
   };
 
-  const zoom = (val: number | null) => {
-    state.zoom = val;
+  const zoom = (val: number | null, onlyCache?: boolean) => {
+    !onlyCache && (state.zoom = val);
     zoomCache.set(val);
   };
 

package/src/packages/components/ThemeColorSelector/index.tsx

@@ -8,10 +8,14 @@ import DropdownOption from "../DropdownOption";
 export const ThemeColorSelector = designComponent({
   name: 'theme-color-selector',
   inheritPropsType: Dropdown,
+  props: {
+    reloadOnChange: { type: Boolean },
+    onlyCache: { type: Boolean },
+  },
   emits: {
     onChange: (primaryKey: string) => true,
   },
-  setup({ event: { emit } }) {
+  setup({ props, event: { emit } }) {
 
     const classes = useClassCache(() => [
       getComponentCls('theme-selector'),
@@ -19,8 +23,9 @@ export const ThemeColorSelector = designComponent({
     ]);
 
     const change = (key: string) => {
-      PageThemeUtils.primary(key);
+      PageThemeUtils.primary(key, props.onlyCache || props.reloadOnChange);
       emit.onChange(key);
+      props.reloadOnChange && window.location.reload();
     };
 
     return () => (

package/src/packages/components/ThemeDarkSelector/index.tsx

@@ -7,10 +7,14 @@ import './theme-dark-selector.scss';
 
 export const ThemeDarkSelector = designComponent({
   name: 'theme-dark-selector',
+  props: {
+    reloadOnChange: { type: Boolean },
+    onlyCache: { type: Boolean },
+  },
   emits: {
     onChange: (dark: boolean) => true,
   },
-  setup({ event: { emit } }) {
+  setup({ props, event: { emit } }) {
 
     const classes = useClassCache(() => [
       getComponentCls('theme-selector'),
@@ -18,8 +22,10 @@ export const ThemeDarkSelector = designComponent({
     ]);
 
     const change = () => {
-      PageThemeUtils.toggle();
-      emit.onChange(!!PageThemeUtils.state.dark);
+      const dark = !(PageThemeUtils.state.dark == null ? false : PageThemeUtils.state.dark);
+      PageThemeUtils.toggle(dark, props.onlyCache || props.reloadOnChange);
+      emit.onChange(dark);
+      props.reloadOnChange && window.location.reload();
     };
     return () => (
       <Tooltip message={i18n.$it('theme.darkOrLight').d("深浅主题")}>

package/src/packages/components/ThemeEditor/index.tsx

@@ -54,15 +54,7 @@ export const ThemeEditor = designComponent({
         ClientZoom.set(state.zoom);
       },
       onDarkChange: () => {
-        const val = !state.dark ? false : state.dark === 'dark';
-        PageThemeUtils.toggle(val);
-        if (val && state.primaryKey === 'dark') {
-          state.primaryKey = 'light';
-          handler.onPrimaryChange();
-        } else if (!val && state.primaryKey === 'light') {
-          state.primaryKey = 'dark';
-          handler.onPrimaryChange();
-        }
+        PageThemeUtils.toggle(state.dark == 'dark');
       },
       onPrimaryChange: () => {PageThemeUtils.primary(state.primaryKey);},
       onInputModeChange: () => {PageThemeUtils.inputMode(state.inputMode);},

package/src/packages/components/ThemeLocaleSelector/index.tsx

@@ -7,10 +7,14 @@ import './theme-locale-selector.scss';
 
 export const ThemeLocaleSelector = designComponent({
   name: 'theme-locale-selector',
+  props: {
+    reloadOnChange: { type: Boolean },
+    onlyCache: { type: Boolean },
+  },
   emits: {
     onChange: (locale: string) => true,
   },
-  setup({ event: { emit } }) {
+  setup({ props, event: { emit } }) {
     const classes = useClassCache(() => [
       getComponentCls('theme-selector'),
       getComponentCls('theme-locale-selector'),
@@ -19,6 +23,7 @@ export const ThemeLocaleSelector = designComponent({
     const change = (key: string, fn: () => any) => {
       i18n.switchTo(key, fn);
       emit.onChange(key);
+      props.reloadOnChange && window.location.reload();
     };
 
     return () => (

package/src/packages/components/ThemeShapeSelector/index.tsx

@@ -9,10 +9,14 @@ import './theme-shape-selector.scss';
 
 export const ThemeShapeSelector = designComponent({
   name: 'theme-shape-selector',
+  props: {
+    reloadOnChange: { type: Boolean },
+    onlyCache: { type: Boolean },
+  },
   emits: {
     onChange: (shape: typeof ThemeShape.TYPE) => true,
   },
-  setup({ event: { emit } }) {
+  setup({ props, event: { emit } }) {
 
     const radiusOptions = computed((): { label: string, val: string | undefined }[] => [
       { label: i18n.$it('theme.radiusOptions.round').d('圆角'), val: undefined },
@@ -21,8 +25,9 @@ export const ThemeShapeSelector = designComponent({
     ]);
 
     const change = (shape: typeof ThemeShape.TYPE) => {
-      PageThemeUtils.shape(shape);
+      PageThemeUtils.shape(shape, props.onlyCache || props.reloadOnChange);
       emit.onChange(shape);
+      props.reloadOnChange && window.location.reload();
     };
 
     const classes = useClassCache(() => [

package/src/packages/components/ThemeSizeSelector/index.tsx

@@ -9,10 +9,14 @@ import {ThemeSize} from "../../uses/useStyle";
 
 export const ThemeSizeSelector = designComponent({
   name: 'theme-size-selector',
+  props: {
+    reloadOnChange: { type: Boolean },
+    onlyCache: { type: Boolean },
+  },
   emits: {
     onChange: (size: typeof ThemeSize.TYPE) => true,
   },
-  setup({ event: { emit } }) {
+  setup({ props, event: { emit } }) {
 
     const sizeOptions = computed((): { label: string, val: string }[] => [
       { label: i18n.$it('theme.sizeOptions.large').d('大'), val: 'large' },
@@ -22,8 +26,9 @@ export const ThemeSizeSelector = designComponent({
     ]);
 
     const change = (size: typeof ThemeSize.TYPE) => {
-      PageThemeUtils.size(size);
+      PageThemeUtils.size(size, props.onlyCache || props.reloadOnChange);
       emit.onChange(size);
+      props.reloadOnChange && window.location.reload();
     };
 
     const classes = useClassCache(() => [