plain-design 1.0.0-beta.72 → 1.0.0-beta.74

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

@@ -1,201 +1,201 @@
-import './theme-editor.scss';
-import {designComponent, getComponentCls, iHTMLDivElement, onBeforeUnmount, reactive, useClasses, useRefs, useStyles} from "plain-design-composition";
-import Icon from "../Icon";
-import ApplicationConfigurationProvider from "../ApplicationConfigurationProvider";
-import {unit} from "plain-utils/string/unit";
-import {Select} from '../Select';
-import {SelectOption} from "../SelectOption";
-import PageThemeUtils, {ThemePrimaryColors} from "../PageThemeUtils";
-import ClientZoom from "../ClientZoom";
-import {addWindowListener} from 'plain-utils/dom/addWindowListener';
-import i18n from "../i18n";
-import Button from "../Button";
-
-export const ThemeEditor = designComponent({
-  name: 'theme-editor',
-  props: {
-    bottom: { type: Number, default: 55 }
-  },
-  setup({ props }) {
-
-    const { refs, onRef } = useRefs({ el: iHTMLDivElement });
-
-    const state = reactive({
-      isExpand: false,
-
-      size: PageThemeUtils.state.size || 'normal',
-      dark: PageThemeUtils.state.dark ? 'dark' : 'light',
-      shape: PageThemeUtils.state.shape || 'square',
-      zoom: PageThemeUtils.state.zoom || null,
-      primaryKey: PageThemeUtils.state.primaryKey as string || 'default',
-      inputMode: PageThemeUtils.state.inputMode || 'flat',
-      buttonMode: PageThemeUtils.state.buttonMode || 'flat',
-    });
-
-    const applicationConfiguration = ApplicationConfigurationProvider.inject();
-
-    const classes = useClasses(() => [
-      getComponentCls('theme-editor'),
-      {
-        'is-expand': state.isExpand
-      }
-    ]);
-
-    const styles = useStyles((style) => {
-      style.bottom = unit(props.bottom);
-    });
-
-    const handler = {
-      handleClickInner: () => {state.isExpand = !state.isExpand;},
-      onSizeChange: () => {PageThemeUtils.size(state.size);},
-      onShapeChange: () => {PageThemeUtils.shape(state.shape);},
-      onZoomChange: () => {
-        PageThemeUtils.zoom(state.zoom);
-        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();
-        }
-      },
-      onPrimaryChange: () => {PageThemeUtils.primary(state.primaryKey);},
-      onInputModeChange: () => {PageThemeUtils.inputMode(state.inputMode);},
-      onButtonModeChange: () => {PageThemeUtils.buttonMode(state.buttonMode);},
-    };
-
-    const publicPopperAttrs = {};
-
-    onBeforeUnmount(
-      addWindowListener('click', (e) => {
-        if (!refs.el?.contains(e.target as HTMLElement) && !!state.isExpand) {
-          state.isExpand = false;
-        }
-      })
-    );
-
-    const publicBlockStyles = { height: '1em', width: '1em', display: 'inline-block', marginRight: '4px', border: `solid 1px var(--${getComponentCls('secondary-3')})` };
-
-    return () => (
-      <div className={classes.value} style={styles.value} ref={onRef.el}>
-        <div className="theme-editor-inner" onClick={handler.handleClickInner}>
-          <div className="theme-editor-inner-cover"/>
-          <Icon icon={state.isExpand ? 'pi-close' : applicationConfiguration.value.theme.dark ? 'pi-moon-fill' : 'pi-sun-fill'}/>
-        </div>
-        {state.isExpand && (
-          <div className="theme-editor-form">
-            <div>
-              <div>{i18n.$it('theme.inputMode').d('输入框类型')}</div>
-              <div>
-                <Select v-model={state.inputMode} onChange={handler.onInputModeChange} size="mini" popperAttrs={publicPopperAttrs}>
-                  <SelectOption label={i18n.$it('theme.inputModeFlat').d('输入框:填充')} val="flat"/>
-                  <SelectOption label={i18n.$it('theme.inputModelStroke').d('输入框:描边')} val="stroke"/>
-                </Select>
-              </div>
-            </div>
-
-            <div>
-              <div>{i18n.$it('theme.buttonMode').d('按钮类型')}</div>
-              <div>
-                <Select v-model={state.buttonMode} onChange={handler.onButtonModeChange} size="mini" popperAttrs={publicPopperAttrs}>
-                  <SelectOption label={i18n.$it('theme.buttonModeFlat').d('扁平')} val="flat"/>
-                  <SelectOption label={i18n.$it('theme.buttonModeFill').d('填充')} val="fill"/>
-                  <SelectOption label={i18n.$it('theme.buttonModeOutline').d('线框')} val="outline"/>
-                  <SelectOption label={i18n.$it('theme.buttonModeStroke').d('描边')} val="stroke"/>
-                  <SelectOption label={i18n.$it('theme.buttonModeText').d('文字')} val="text"/>
-                </Select>
-              </div>
-            </div>
-
-            <div>
-              <div>{i18n.$it('theme.primaryColor').d('主题颜色')}</div>
-              <div>
-                <Select v-model={state.primaryKey} onChange={handler.onPrimaryChange} size="mini" popperAttrs={publicPopperAttrs}>
-                  {Object.entries(ThemePrimaryColors).map(([key, value]) => (
-                    <SelectOption label={i18n.$it('colorName.' + value!.label as any).d(value!.label)} val={key} key={key}>
-                      <div className={getComponentCls('theme-editor-block-item')}>
-                        {(() => {
-                          let themeConfig = value!.themeConfig;
-                          if (!themeConfig) {return null;}
-                          let primary = typeof themeConfig === "string" ? themeConfig : themeConfig[PageThemeUtils.state.dark ? 'dark' : 'light'].base?.primary;
-                          return !!primary && <span style={{ ...publicBlockStyles, background: primary }}/>;
-                        })()}
-                        <span>{i18n.$it('colorName.' + value!.label as any).d(value!.label)}</span>
-                      </div>
-                    </SelectOption>
-                  ))}
-                </Select>
-              </div>
-            </div>
-
-            <div>
-              <div>{i18n.$it('theme.size').d('大小尺寸')}</div>
-              <div>
-                <Select v-model={state.size} onChange={handler.onSizeChange} size="mini" popperAttrs={publicPopperAttrs}>
-                  <SelectOption label={i18n.$it('theme.sizeLarge').d('大尺寸')} val="large"/>
-                  <SelectOption label={i18n.$it('theme.sizeNormal').d('中等尺寸')} val="normal"/>
-                  <SelectOption label={i18n.$it('theme.sizeSmall').d('小尺寸')} val="small"/>
-                  <SelectOption label={i18n.$it('theme.sizeMini').d('极小尺寸')} val="mini"/>
-                </Select>
-              </div>
-            </div>
-
-            <div>
-              <div>{i18n.$it('theme.darkMode').d('黑白主题')}</div>
-              <div>
-                <Select v-model={state.dark} onChange={handler.onDarkChange} size="mini" popperAttrs={publicPopperAttrs}>
-                  <SelectOption label={i18n.$it('theme.darkModeOn').d('黑色主题')} val="dark"/>
-                  <SelectOption label={i18n.$it('theme.darkModeOff').d('白色主题')} val="light"/>
-                </Select>
-              </div>
-            </div>
-
-            <div>
-              <div>{i18n.$it('theme.radiusMode').d('圆角类型')}</div>
-              <div>
-                <Select v-model={state.shape} onChange={handler.onShapeChange} size="mini" popperAttrs={publicPopperAttrs}>
-                  <SelectOption label={i18n.$it('theme.radiusModeRound').d('圆角')} val="round"/>
-                  <SelectOption label={i18n.$it('theme.radiusModeNormal').d('小圆角')} val="square"/>
-                  <SelectOption label={i18n.$it('theme.radiusModeNone').d('无圆角')} val="none"/>
-                </Select>
-              </div>
-            </div>
-
-            <div>
-              <div>{i18n.$it('theme.scale').d('大小缩放')}</div>
-              <Select v-model={state.zoom} onChange={handler.onZoomChange} size="mini" placeholder="页面缩放" popperAttrs={publicPopperAttrs}>
-                <SelectOption label="0.6" val={0.6}/>
-                <SelectOption label="0.7" val={0.7}/>
-                <SelectOption label="0.8" val={0.8}/>
-                <SelectOption label="0.9" val={0.9}/>
-                <SelectOption label="1.0" val={null}/>
-                <SelectOption label="1.1" val={1.1}/>
-                <SelectOption label="1.2" val={1.2}/>
-                <SelectOption label="1.3" val={1.3}/>
-                <SelectOption label="1.4" val={1.4}/>
-                <SelectOption label="1.5" val={1.5}/>
-                <SelectOption label="1.6" val={1.6}/>
-                <SelectOption label="1.7" val={1.7}/>
-                <SelectOption label="1.8" val={1.8}/>
-                <SelectOption label="1.9" val={1.9}/>
-                <SelectOption label="2.0" val={2.0}/>
-              </Select>
-            </div>
-
-            <div>
-              <div>&nbsp;</div>
-              <Button block size="mini" label={i18n.$it('theme.reset').d('重置')} onClick={() => {
-                PageThemeUtils.clear();
-              }}/>
-            </div>
-          </div>
-        )}
-      </div>
-    );
-  },
-});
+import './theme-editor.scss';
+import {designComponent, getComponentCls, iHTMLDivElement, onBeforeUnmount, reactive, useClasses, useRefs, useStyles} from "plain-design-composition";
+import Icon from "../Icon";
+import ApplicationConfigurationProvider from "../ApplicationConfigurationProvider";
+import {unit} from "plain-utils/string/unit";
+import {Select} from '../Select';
+import {SelectOption} from "../SelectOption";
+import PageThemeUtils, {ThemePrimaryColors} from "../PageThemeUtils";
+import ClientZoom from "../ClientZoom";
+import {addWindowListener} from 'plain-utils/dom/addWindowListener';
+import i18n from "../i18n";
+import Button from "../Button";
+
+export const ThemeEditor = designComponent({
+  name: 'theme-editor',
+  props: {
+    bottom: { type: Number, default: 55 }
+  },
+  setup({ props }) {
+
+    const { refs, onRef } = useRefs({ el: iHTMLDivElement });
+
+    const state = reactive({
+      isExpand: false,
+
+      size: PageThemeUtils.state.size || 'normal',
+      dark: PageThemeUtils.state.dark ? 'dark' : 'light',
+      shape: PageThemeUtils.state.shape || 'square',
+      zoom: PageThemeUtils.state.zoom || null,
+      primaryKey: PageThemeUtils.state.primaryKey as string || 'default',
+      inputMode: PageThemeUtils.state.inputMode || 'flat',
+      buttonMode: PageThemeUtils.state.buttonMode || 'flat',
+    });
+
+    const applicationConfiguration = ApplicationConfigurationProvider.inject();
+
+    const classes = useClasses(() => [
+      getComponentCls('theme-editor'),
+      {
+        'is-expand': state.isExpand
+      }
+    ]);
+
+    const styles = useStyles((style) => {
+      style.bottom = unit(props.bottom);
+    });
+
+    const handler = {
+      handleClickInner: () => {state.isExpand = !state.isExpand;},
+      onSizeChange: () => {PageThemeUtils.size(state.size);},
+      onShapeChange: () => {PageThemeUtils.shape(state.shape);},
+      onZoomChange: () => {
+        PageThemeUtils.zoom(state.zoom);
+        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();
+        }
+      },
+      onPrimaryChange: () => {PageThemeUtils.primary(state.primaryKey);},
+      onInputModeChange: () => {PageThemeUtils.inputMode(state.inputMode);},
+      onButtonModeChange: () => {PageThemeUtils.buttonMode(state.buttonMode);},
+    };
+
+    const publicPopperAttrs = {};
+
+    onBeforeUnmount(
+      addWindowListener('click', (e) => {
+        if (!refs.el?.contains(e.target as HTMLElement) && !!state.isExpand) {
+          state.isExpand = false;
+        }
+      })
+    );
+
+    const publicBlockStyles = { height: '1em', width: '1em', display: 'inline-block', marginRight: '4px', border: `solid 1px var(--${getComponentCls('secondary-3')})` };
+
+    return () => (
+      <div className={classes.value} style={styles.value} ref={onRef.el}>
+        <div className="theme-editor-inner" onClick={handler.handleClickInner}>
+          <div className="theme-editor-inner-cover"/>
+          <Icon icon={state.isExpand ? 'pi-close' : applicationConfiguration.value.theme.dark ? 'pi-moon-fill' : 'pi-sun-fill'}/>
+        </div>
+        {state.isExpand && (
+          <div className="theme-editor-form">
+            <div>
+              <div>{i18n.$it('theme.inputMode').d('输入框类型')}</div>
+              <div>
+                <Select v-model={state.inputMode} onChange={handler.onInputModeChange} size="mini" popperAttrs={publicPopperAttrs}>
+                  <SelectOption label={i18n.$it('theme.inputModeFlat').d('输入框:填充')} val="flat"/>
+                  <SelectOption label={i18n.$it('theme.inputModelStroke').d('输入框:描边')} val="stroke"/>
+                </Select>
+              </div>
+            </div>
+
+            <div>
+              <div>{i18n.$it('theme.buttonMode').d('按钮类型')}</div>
+              <div>
+                <Select v-model={state.buttonMode} onChange={handler.onButtonModeChange} size="mini" popperAttrs={publicPopperAttrs}>
+                  <SelectOption label={i18n.$it('theme.buttonModeFlat').d('扁平')} val="flat"/>
+                  <SelectOption label={i18n.$it('theme.buttonModeFill').d('填充')} val="fill"/>
+                  <SelectOption label={i18n.$it('theme.buttonModeOutline').d('线框')} val="outline"/>
+                  <SelectOption label={i18n.$it('theme.buttonModeStroke').d('描边')} val="stroke"/>
+                  <SelectOption label={i18n.$it('theme.buttonModeText').d('文字')} val="text"/>
+                </Select>
+              </div>
+            </div>
+
+            <div>
+              <div>{i18n.$it('theme.primaryColor').d('主题颜色')}</div>
+              <div>
+                <Select v-model={state.primaryKey} onChange={handler.onPrimaryChange} size="mini" popperAttrs={publicPopperAttrs}>
+                  {Object.entries(ThemePrimaryColors).map(([key, value]) => (
+                    <SelectOption label={i18n.$it('colorName.' + value!.label as any).d(value!.label)} val={key} key={key}>
+                      <div className={getComponentCls('theme-editor-block-item')}>
+                        {(() => {
+                          let themeConfig = value!.themeConfig;
+                          if (!themeConfig) {return null;}
+                          let primary = typeof themeConfig === "string" ? themeConfig : themeConfig[PageThemeUtils.state.dark ? 'dark' : 'light'].base?.primary;
+                          return !!primary && <span style={{ ...publicBlockStyles, background: primary }}/>;
+                        })()}
+                        <span>{i18n.$it('colorName.' + value!.label as any).d(value!.label)}</span>
+                      </div>
+                    </SelectOption>
+                  ))}
+                </Select>
+              </div>
+            </div>
+
+            <div>
+              <div>{i18n.$it('theme.size').d('大小尺寸')}</div>
+              <div>
+                <Select v-model={state.size} onChange={handler.onSizeChange} size="mini" popperAttrs={publicPopperAttrs}>
+                  <SelectOption label={i18n.$it('theme.sizeLarge').d('大尺寸')} val="large"/>
+                  <SelectOption label={i18n.$it('theme.sizeNormal').d('中等尺寸')} val="normal"/>
+                  <SelectOption label={i18n.$it('theme.sizeSmall').d('小尺寸')} val="small"/>
+                  <SelectOption label={i18n.$it('theme.sizeMini').d('极小尺寸')} val="mini"/>
+                </Select>
+              </div>
+            </div>
+
+            <div>
+              <div>{i18n.$it('theme.darkMode').d('黑白主题')}</div>
+              <div>
+                <Select v-model={state.dark} onChange={handler.onDarkChange} size="mini" popperAttrs={publicPopperAttrs}>
+                  <SelectOption label={i18n.$it('theme.darkModeOn').d('黑色主题')} val="dark"/>
+                  <SelectOption label={i18n.$it('theme.darkModeOff').d('白色主题')} val="light"/>
+                </Select>
+              </div>
+            </div>
+
+            <div>
+              <div>{i18n.$it('theme.radiusMode').d('圆角类型')}</div>
+              <div>
+                <Select v-model={state.shape} onChange={handler.onShapeChange} size="mini" popperAttrs={publicPopperAttrs}>
+                  <SelectOption label={i18n.$it('theme.radiusModeRound').d('圆角')} val="round"/>
+                  <SelectOption label={i18n.$it('theme.radiusModeNormal').d('小圆角')} val="square"/>
+                  <SelectOption label={i18n.$it('theme.radiusModeNone').d('无圆角')} val="none"/>
+                </Select>
+              </div>
+            </div>
+
+            <div>
+              <div>{i18n.$it('theme.scale').d('大小缩放')}</div>
+              <Select v-model={state.zoom} onChange={handler.onZoomChange} size="mini" placeholder="页面缩放" popperAttrs={publicPopperAttrs}>
+                <SelectOption label="0.6" val={0.6}/>
+                <SelectOption label="0.7" val={0.7}/>
+                <SelectOption label="0.8" val={0.8}/>
+                <SelectOption label="0.9" val={0.9}/>
+                <SelectOption label="1.0" val={null}/>
+                <SelectOption label="1.1" val={1.1}/>
+                <SelectOption label="1.2" val={1.2}/>
+                <SelectOption label="1.3" val={1.3}/>
+                <SelectOption label="1.4" val={1.4}/>
+                <SelectOption label="1.5" val={1.5}/>
+                <SelectOption label="1.6" val={1.6}/>
+                <SelectOption label="1.7" val={1.7}/>
+                <SelectOption label="1.8" val={1.8}/>
+                <SelectOption label="1.9" val={1.9}/>
+                <SelectOption label="2.0" val={2.0}/>
+              </Select>
+            </div>
+
+            <div>
+              <div>&nbsp;</div>
+              <Button block size="mini" label={i18n.$it('theme.reset').d('重置')} onClick={() => {
+                PageThemeUtils.clear();
+              }}/>
+            </div>
+          </div>
+        )}
+      </div>
+    );
+  },
+});

package/src/packages/components/ThemeEditor/theme-editor.scss

@@ -1,105 +1,105 @@
-@include comp(theme-editor) {
-  position: fixed;
-  right: 0;
-  border-right: none;
-  padding: 5px 10px 5px 5px;
-  border-top-left-radius: 999px;
-  border-bottom-left-radius: 999px;
-  box-sizing: border-box;
-  transition: all ease 300ms;
-  overflow-y: hidden;
-  z-index: 1500;
-
-  &:before {
-    content: '';
-    background-color: plv(primary-light-2);
-    border-radius: inherit;
-    position: absolute;
-    inset: 0;
-    pointer-events: none;
-  }
-
-  .theme-editor-inner {
-    position: absolute;
-    z-index: 1;
-    bottom: 5px;
-    right: 10px;
-    cursor: pointer;
-    height: calc(#{plv(box-size-normal-height)} * 1.5);
-    width: calc(#{plv(box-size-normal-height)} * 1.5);
-    border-radius: calc(#{plv(box-size-normal-height)} * 1.5);
-    background-color: plv(primary-6);
-    color: plv(pbfc);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 24px;
-    transition: all ease 300ms;
-
-    .theme-editor-inner-cover {
-      position: absolute;
-      inset: 0;
-      user-select: none;
-    }
-  }
-
-  &.is-expand {
-    width: 300px;
-    height: 330px;
-    border-top-left-radius: plv(box-size-normal-border-radius);
-    border-bottom-left-radius: plv(box-size-normal-border-radius);
-
-    &:before {
-      background-color: plv(background-color);
-      border: solid 1px plv(border-color);
-    }
-
-    .theme-editor-inner {
-      border-radius: plv(box-size-normal-border-radius);
-      background-color: transparent;
-      color: plv(text-2);
-
-      &:hover {
-        background-color: plv(secondary-2);
-      }
-    }
-  }
-
-  &:not(.is-expand) {
-    width: calc(#{plv(box-size-normal-height)} * 1.5 + 15px);
-    height: calc(#{plv(box-size-normal-height)} * 1.5 + 10px);
-  }
-
-  .theme-editor-form {
-    padding: 8px;
-    box-sizing: border-box;
-    position: relative;
-    z-index: 2;
-    display: flex;
-    flex-wrap: wrap;
-    flex-direction: row;
-
-    & > div {
-      width: calc(50% - 4px);
-      font-size: 12px;
-      color: plv(text-2);
-      margin-bottom: 20px;
-
-      &:nth-child(2n) {
-        margin-left: 8px;
-      }
-
-      & > div {
-        &:first-child {
-          margin-left: 10px;
-          margin-bottom: 4px;
-        }
-      }
-    }
-  }
-}
-
-@include comp(theme-editor-block-item){
-  display: flex;
-  align-items: center;
-}
+@include comp(theme-editor) {
+  position: fixed;
+  right: 0;
+  border-right: none;
+  padding: 5px 10px 5px 5px;
+  border-top-left-radius: 999px;
+  border-bottom-left-radius: 999px;
+  box-sizing: border-box;
+  transition: all ease 300ms;
+  overflow-y: hidden;
+  z-index: 1500;
+
+  &:before {
+    content: '';
+    background-color: plv(primary-light-2);
+    border-radius: inherit;
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+  }
+
+  .theme-editor-inner {
+    position: absolute;
+    z-index: 1;
+    bottom: 5px;
+    right: 10px;
+    cursor: pointer;
+    height: calc(#{plv(box-size-normal-height)} * 1.5);
+    width: calc(#{plv(box-size-normal-height)} * 1.5);
+    border-radius: calc(#{plv(box-size-normal-height)} * 1.5);
+    background-color: plv(primary-6);
+    color: plv(pbfc);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 24px;
+    transition: all ease 300ms;
+
+    .theme-editor-inner-cover {
+      position: absolute;
+      inset: 0;
+      user-select: none;
+    }
+  }
+
+  &.is-expand {
+    width: 300px;
+    height: 330px;
+    border-top-left-radius: plv(box-size-normal-border-radius);
+    border-bottom-left-radius: plv(box-size-normal-border-radius);
+
+    &:before {
+      background-color: plv(background-color);
+      border: solid 1px plv(border-color);
+    }
+
+    .theme-editor-inner {
+      border-radius: plv(box-size-normal-border-radius);
+      background-color: transparent;
+      color: plv(text-2);
+
+      &:hover {
+        background-color: plv(secondary-2);
+      }
+    }
+  }
+
+  &:not(.is-expand) {
+    width: calc(#{plv(box-size-normal-height)} * 1.5 + 15px);
+    height: calc(#{plv(box-size-normal-height)} * 1.5 + 10px);
+  }
+
+  .theme-editor-form {
+    padding: 8px;
+    box-sizing: border-box;
+    position: relative;
+    z-index: 2;
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: row;
+
+    & > div {
+      width: calc(50% - 4px);
+      font-size: 12px;
+      color: plv(text-2);
+      margin-bottom: 20px;
+
+      &:nth-child(2n) {
+        margin-left: 8px;
+      }
+
+      & > div {
+        &:first-child {
+          margin-left: 10px;
+          margin-bottom: 4px;
+        }
+      }
+    }
+  }
+}
+
+@include comp(theme-editor-block-item){
+  display: flex;
+  align-items: center;
+}