plain-design 1.0.0-beta.85 → 1.0.0-beta.87

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "plain-design",
-  "version": "1.0.0-beta.85",
+  "version": "1.0.0-beta.87",
   "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,13 +8,26 @@ import DropdownOption from "../DropdownOption";
 export const ThemeColorSelector = designComponent({
   name: 'theme-color-selector',
   inheritPropsType: Dropdown,
-  setup() {
+  props: {
+    reloadOnChange: { type: Boolean },
+    onlyCache: { type: Boolean },
+  },
+  emits: {
+    onChange: (primaryKey: string) => true,
+  },
+  setup({ props, event: { emit } }) {
 
     const classes = useClassCache(() => [
       getComponentCls('theme-selector'),
       getComponentCls('theme-color-selector'),
     ]);
 
+    const change = (key: string) => {
+      PageThemeUtils.primary(key, props.onlyCache || props.reloadOnChange);
+      emit.onChange(key);
+      props.reloadOnChange && window.location.reload();
+    };
+
     return () => (
       <Dropdown
         trigger="hover"
@@ -27,7 +40,7 @@ export const ThemeColorSelector = designComponent({
             </div>
           ),
           popper: () => Object.entries(ThemePrimaryColors).map(([key]) => (
-            <DropdownOption key={key} onClick={() => PageThemeUtils.primary(key)}>
+            <DropdownOption key={key} onClick={() => change(key)}>
               <ThemeColor className="dropdown-theme-color" primaryKey={key}/>
             </DropdownOption>
           ))

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

@@ -7,15 +7,29 @@ import './theme-dark-selector.scss';
 
 export const ThemeDarkSelector = designComponent({
   name: 'theme-dark-selector',
-  setup() {
-    const toggleDarkTheme = () => {PageThemeUtils.toggle();};
+  props: {
+    reloadOnChange: { type: Boolean },
+    onlyCache: { type: Boolean },
+  },
+  emits: {
+    onChange: (dark: boolean) => true,
+  },
+  setup({ props, event: { emit } }) {
+
     const classes = useClassCache(() => [
       getComponentCls('theme-selector'),
       getComponentCls('theme-dark-selector'),
     ]);
+
+    const change = () => {
+      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("深浅主题")}>
-        <div className={classes.value} onClick={toggleDarkTheme}>
+        <div className={classes.value} onClick={change}>
           <Icon icon={PageThemeUtils.state.dark ? 'pi-sun' : 'pi-moon'}/>
         </div>
       </Tooltip>

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

@@ -7,15 +7,29 @@ import './theme-locale-selector.scss';
 
 export const ThemeLocaleSelector = designComponent({
   name: 'theme-locale-selector',
-  setup() {
+  props: {
+    reloadOnChange: { type: Boolean },
+    onlyCache: { type: Boolean },
+  },
+  emits: {
+    onChange: (locale: string) => true,
+  },
+  setup({ props, event: { emit } }) {
     const classes = useClassCache(() => [
       getComponentCls('theme-selector'),
       getComponentCls('theme-locale-selector'),
     ]);
+
+    const change = (key: string, fn: () => any) => {
+      i18n.switchTo(key, fn);
+      emit.onChange(key);
+      props.reloadOnChange && window.location.reload();
+    };
+
     return () => (
       <Dropdown trigger="hover" align="center" placement="bottom" hideOnClickReference={false} v-slots={{
         popper: () => i18n.state.localeOptions.map(opt => (
-          <DropdownOption label={opt.label} key={opt.label} onClick={() => i18n.switchTo(opt.key, () => opt.lang)}/>
+          <DropdownOption label={opt.label} key={opt.label} onClick={() => change(opt.key, () => opt.lang)}/>
         )),
         default: () => (
           <div className={classes.value}>

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

@@ -9,7 +9,14 @@ import './theme-shape-selector.scss';
 
 export const ThemeShapeSelector = designComponent({
   name: 'theme-shape-selector',
-  setup() {
+  props: {
+    reloadOnChange: { type: Boolean },
+    onlyCache: { type: Boolean },
+  },
+  emits: {
+    onChange: (shape: typeof ThemeShape.TYPE) => true,
+  },
+  setup({ props, event: { emit } }) {
 
     const radiusOptions = computed((): { label: string, val: string | undefined }[] => [
       { label: i18n.$it('theme.radiusOptions.round').d('圆角'), val: undefined },
@@ -17,7 +24,11 @@ export const ThemeShapeSelector = designComponent({
       { label: i18n.$it('theme.radiusOptions.none').d('无圆角'), val: ThemeShape.none },
     ]);
 
-    const toggleShape = (val: any) => {PageThemeUtils.shape(val);};
+    const change = (shape: typeof ThemeShape.TYPE) => {
+      PageThemeUtils.shape(shape, props.onlyCache || props.reloadOnChange);
+      emit.onChange(shape);
+      props.reloadOnChange && window.location.reload();
+    };
 
     const classes = useClassCache(() => [
       getComponentCls('theme-selector'),
@@ -36,7 +47,7 @@ export const ThemeShapeSelector = designComponent({
             </div>
           ),
           popper: () => radiusOptions.value.map(opt => (
-            <DropdownOption label={opt.label} val={opt.val} key={opt.val || ""} onClick={() => toggleShape(opt.val)}/>
+            <DropdownOption label={opt.label} val={opt.val} key={opt.val || ""} onClick={() => change(opt.val as any)}/>
           )),
         }}
       />

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

@@ -5,11 +5,18 @@ import i18n from "../i18n";
 import Icon from "../Icon";
 import PageThemeUtils from "../PageThemeUtils";
 import './theme-size-selector.scss';
+import {ThemeSize} from "../../uses/useStyle";
 
 export const ThemeSizeSelector = designComponent({
   name: 'theme-size-selector',
-  props: {},
-  setup() {
+  props: {
+    reloadOnChange: { type: Boolean },
+    onlyCache: { type: Boolean },
+  },
+  emits: {
+    onChange: (size: typeof ThemeSize.TYPE) => true,
+  },
+  setup({ props, event: { emit } }) {
 
     const sizeOptions = computed((): { label: string, val: string }[] => [
       { label: i18n.$it('theme.sizeOptions.large').d('大'), val: 'large' },
@@ -18,7 +25,11 @@ export const ThemeSizeSelector = designComponent({
       { label: i18n.$it('theme.sizeOptions.mini').d('极小'), val: 'mini' },
     ]);
 
-    const toggleSize = (val: any) => {PageThemeUtils.size(val);};
+    const change = (size: typeof ThemeSize.TYPE) => {
+      PageThemeUtils.size(size, props.onlyCache || props.reloadOnChange);
+      emit.onChange(size);
+      props.reloadOnChange && window.location.reload();
+    };
 
     const classes = useClassCache(() => [
       getComponentCls('theme-selector'),
@@ -27,7 +38,7 @@ export const ThemeSizeSelector = designComponent({
     return () => (
       <Dropdown trigger="hover" align="center" placement="bottom" hideOnClickReference={false} v-slots={{
         popper: () => sizeOptions.value.map(opt => (
-          <DropdownOption label={opt.label} val={opt.val} key={opt.val} onClick={() => toggleSize(opt.val)}/>
+          <DropdownOption label={opt.label} val={opt.val} key={opt.val} onClick={() => change(opt.val as any)}/>
         )),
         default: () => (
           <div className={classes.value}>