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

package/package.json

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

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

@@ -8,13 +8,21 @@ import DropdownOption from "../DropdownOption";
 export const ThemeColorSelector = designComponent({
   name: 'theme-color-selector',
   inheritPropsType: Dropdown,
-  setup() {
+  emits: {
+    onChange: (primaryKey: string) => true,
+  },
+  setup({ event: { emit } }) {
 
     const classes = useClassCache(() => [
       getComponentCls('theme-selector'),
       getComponentCls('theme-color-selector'),
     ]);
 
+    const change = (key: string) => {
+      PageThemeUtils.primary(key);
+      emit.onChange(key);
+    };
+
     return () => (
       <Dropdown
         trigger="hover"
@@ -27,7 +35,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,23 @@ import './theme-dark-selector.scss';
 
 export const ThemeDarkSelector = designComponent({
   name: 'theme-dark-selector',
-  setup() {
-    const toggleDarkTheme = () => {PageThemeUtils.toggle();};
+  emits: {
+    onChange: (dark: boolean) => true,
+  },
+  setup({ event: { emit } }) {
+
     const classes = useClassCache(() => [
       getComponentCls('theme-selector'),
       getComponentCls('theme-dark-selector'),
     ]);
+
+    const change = () => {
+      PageThemeUtils.toggle();
+      emit.onChange(!!PageThemeUtils.state.dark);
+    };
     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,24 @@ import './theme-locale-selector.scss';
 
 export const ThemeLocaleSelector = designComponent({
   name: 'theme-locale-selector',
-  setup() {
+  emits: {
+    onChange: (locale: string) => true,
+  },
+  setup({ 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);
+    };
+
     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,10 @@ import './theme-shape-selector.scss';
 
 export const ThemeShapeSelector = designComponent({
   name: 'theme-shape-selector',
-  setup() {
+  emits: {
+    onChange: (shape: typeof ThemeShape.TYPE) => true,
+  },
+  setup({ event: { emit } }) {
 
     const radiusOptions = computed((): { label: string, val: string | undefined }[] => [
       { label: i18n.$it('theme.radiusOptions.round').d('圆角'), val: undefined },
@@ -17,7 +20,10 @@ 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);
+      emit.onChange(shape);
+    };
 
     const classes = useClassCache(() => [
       getComponentCls('theme-selector'),
@@ -36,7 +42,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,14 @@ 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() {
+  emits: {
+    onChange: (size: typeof ThemeSize.TYPE) => true,
+  },
+  setup({ event: { emit } }) {
 
     const sizeOptions = computed((): { label: string, val: string }[] => [
       { label: i18n.$it('theme.sizeOptions.large').d('大'), val: 'large' },
@@ -18,7 +21,10 @@ 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);
+      emit.onChange(size);
+    };
 
     const classes = useClassCache(() => [
       getComponentCls('theme-selector'),
@@ -27,7 +33,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}>

package/src/packages/styles/global.import.scss

@@ -55,7 +55,7 @@
 }
 
 @mixin hover($component) {
-  &:not(.#{$component}-disabled):not(.#{$component}-loading):not(.#{$component}-readonly) {
+  &:not(.#{$component}-disabled):not(.#{$component}-loading):not(.#{$component}-readonly):not(.#{$component}-focus) {
     &:hover, &.#{$component}-hover {
       @content;
     }