plain-design 1.0.0-beta.65 → 1.0.0-beta.66

package/package.json

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

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

@@ -1,4 +1,4 @@
-import {designComponent} from "plain-design-composition";
+import {designComponent, getComponentCls, useClassCache} from "plain-design-composition";
 import Dropdown from "../Dropdown";
 import {ThemeColor} from "../ThemeColor";
 import PageThemeUtils from "../PageThemeUtils";
@@ -9,6 +9,12 @@ export const ThemeColorSelector = designComponent({
   name: 'theme-color-selector',
   inheritPropsType: Dropdown,
   setup({}) {
+
+    const classes = useClassCache(() => [
+      getComponentCls('theme-selector'),
+      getComponentCls('theme-color-selector'),
+    ]);
+
     return () => (
       <Dropdown
         trigger="hover"
@@ -16,7 +22,7 @@ export const ThemeColorSelector = designComponent({
         placement="bottom"
         v-slots={{
           default: () => (
-            <div className="theme-color-selector">
+            <div className={classes.value}>
               <ThemeColor primaryKey={PageThemeUtils.state.primaryKey!}/>
             </div>
           ),

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

@@ -1,4 +1,4 @@
-import {designComponent, getComponentCls} from "plain-design-composition";
+import {designComponent, getComponentCls, useClassCache} from "plain-design-composition";
 import i18n from "../i18n";
 import Tooltip from "../Tooltip";
 import PageThemeUtils from "../PageThemeUtils";
@@ -9,9 +9,13 @@ export const ThemeDarkSelector = designComponent({
   name: 'theme-dark-selector',
   setup() {
     const toggleDarkTheme = () => {PageThemeUtils.toggle();};
+    const classes = useClassCache(() => [
+      getComponentCls('theme-selector'),
+      getComponentCls('theme-dark-selector'),
+    ]);
     return () => (
       <Tooltip message={i18n.$it('theme.darkOrLight').d("深浅主题")}>
-        <div className={getComponentCls('theme-dark-selector')} onClick={toggleDarkTheme}>
+        <div className={classes.value} onClick={toggleDarkTheme}>
           <Icon icon={PageThemeUtils.state.dark ? 'pi-sun' : 'pi-moon'}/>
         </div>
       </Tooltip>

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

@@ -1,4 +1,4 @@
-import {designComponent, getComponentCls} from "plain-design-composition";
+import {designComponent, getComponentCls, useClassCache} from "plain-design-composition";
 import Dropdown from "../Dropdown";
 import DropdownOption from "../DropdownOption";
 import Icon from "../Icon";
@@ -11,13 +11,17 @@ export const ThemeLocaleSelector = designComponent({
     i18nManager: {},
   },
   setup({}) {
+    const classes = useClassCache(() => [
+      getComponentCls('theme-selector'),
+      getComponentCls('theme-locale-selector'),
+    ]);
     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)}/>
         )),
         default: () => (
-          <div className={getComponentCls('theme-locale-selector')}>
+          <div className={classes.value}>
             <Icon icon="pi-language"/>
           </div>
         )

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

@@ -1,4 +1,4 @@
-import {computed, designComponent, getComponentCls} from "plain-design-composition";
+import {computed, designComponent, getComponentCls, useClassCache} from "plain-design-composition";
 import Dropdown from "../Dropdown";
 import DropdownOption from "../DropdownOption";
 import i18n from "../i18n";
@@ -19,6 +19,11 @@ export const ThemeShapeSelector = designComponent({
 
     const toggleShape = (val: any) => {PageThemeUtils.shape(val);};
 
+    const classes = useClassCache(() => [
+      getComponentCls('theme-selector'),
+      getComponentCls('theme-shape-selector'),
+    ]);
+
     return () => (
       <Dropdown
         trigger="hover"
@@ -26,7 +31,7 @@ export const ThemeShapeSelector = designComponent({
         placement="bottom"
         v-slots={{
           default: () => (
-            <div className={getComponentCls('theme-shape-selector')}>
+            <div className={classes.value}>
               <Icon icon="pi-copy"/>
             </div>
           ),

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

@@ -1,4 +1,4 @@
-import {computed, designComponent, getComponentCls} from "plain-design-composition";
+import {computed, designComponent, getComponentCls, useClassCache} from "plain-design-composition";
 import Dropdown from "../Dropdown";
 import DropdownOption from "../DropdownOption";
 import i18n from "../i18n";
@@ -20,13 +20,17 @@ export const ThemeSizeSelector = designComponent({
 
     const toggleSize = (val: any) => {PageThemeUtils.size(val);};
 
+    const classes = useClassCache(() => [
+      getComponentCls('theme-selector'),
+      getComponentCls('theme-size-selector'),
+    ]);
     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)}/>
         )),
         default: () => (
-          <div className={getComponentCls('theme-size-selector')}>
+          <div className={classes.value}>
             <Icon icon="pi-font-colors"/>
           </div>
         )