plain-design 1.0.0-beta.63 → 1.0.0-beta.64

package/package.json

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

package/src/packages/components/Button/button.scss

@@ -169,7 +169,7 @@
     }
   }
 
-  .#{componentName(icon)} {
+  .#{componentName(icon)}, .#{componentName(loading)} {
     //vertical-align: text-top;
     position: relative;
     top: 1px;

package/src/packages/components/Loading/loading.scss

@@ -1,4 +1,6 @@
 @include prefix(loading) {
+  transform: scale(0.88);
+  transform-origin: center;
   @include statusMixin(loading) {
     color: $color-6;
   }

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

@@ -0,0 +1,22 @@
+import {computed, designComponent, getComponentCls, useClasses, useStyles} from "plain-design-composition";
+import {getPrimaryColor} from "../PageThemeUtils";
+import './theme-color.scss';
+
+export const ThemeColor = designComponent({
+  name: 'theme-color',
+  props: {
+    primaryKey: { type: String }
+  },
+  setup({ props }) {
+    const classes = useClasses(() => [getComponentCls('theme-color')]);
+    const primaryColor = computed(() => getPrimaryColor(props.primaryKey));
+    const style1 = useStyles(styles => {styles.backgroundColor = primaryColor.value.light;});
+    const style2 = useStyles(styles => {styles.backgroundColor = primaryColor.value.dark;});
+    return () => (
+      <div className={classes.value}>
+        <div style={style1.value}/>
+        <div style={style2.value}/>
+      </div>
+    );
+  },
+});

package/src/packages/components/ThemeColor/theme-color.scss

@@ -0,0 +1,36 @@
+@include comp(theme-color) {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  background-color: plv(secondary-2);
+  transform: rotate(45deg);
+  transform-origin: center;
+
+  $size: 24px;
+  $inset: 4px;
+
+  border-radius: $size;
+  height: $size;
+  width: $size;
+
+  & > div:first-child {
+    border-top-left-radius: $size;
+    border-bottom-left-radius: $size;
+    position: absolute;
+    top: $inset;
+    left: $inset;
+    height: calc(100% - #{$inset} * 2);
+    width: calc((100% - #{$inset} * 2) / 2 + 1px);
+  }
+  & > div:last-child {
+    border-top-right-radius: $size;
+    border-bottom-right-radius: $size;
+    position: absolute;
+    top: $inset;
+    right: $inset;
+    height: calc(100% - #{$inset} * 2);
+    width: calc((100% - #{$inset} * 2) / 2);
+
+  }
+}

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

@@ -0,0 +1,34 @@
+import {designComponent} from "plain-design-composition";
+import Dropdown from "../Dropdown";
+import {ThemeColor} from "../ThemeColor";
+import PageThemeUtils from "../PageThemeUtils";
+import ThemePrimaryColors from "../ThemePrimaryColors";
+import DropdownOption from "../DropdownOption";
+
+export const ThemeColorSelector = designComponent({
+  name: 'theme-color-selector',
+  inheritPropsType: Dropdown,
+  setup({}) {
+    return () => (
+      <Dropdown
+        trigger="hover"
+        align="center"
+        placement="bottom"
+        v-slots={{
+          default: () => (
+            <div className="theme-color-selector">
+              <ThemeColor primaryKey={PageThemeUtils.state.primaryKey!}/>
+            </div>
+          ),
+          popper: () => Object.entries(ThemePrimaryColors).map(([key]) => (
+            <DropdownOption key={key} onClick={() => PageThemeUtils.primary(key)}>
+              <ThemeColor className="dropdown-theme-color" primaryKey={key}/>
+            </DropdownOption>
+          ))
+        }}
+      />
+    );
+  },
+});
+
+export default ThemeColorSelector;

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

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

package/src/packages/components/ThemeDarkSelector/theme-dark-selector.scss

@@ -0,0 +1,5 @@
+@include comp(theme-dark-selector) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}

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

@@ -0,0 +1,27 @@
+import {designComponent, getComponentCls} from "plain-design-composition";
+import Dropdown from "../Dropdown";
+import DropdownOption from "../DropdownOption";
+import Icon from "../Icon";
+import i18n from "../i18n";
+import './theme-locale-selector.scss';
+
+export const ThemeLocaleSelector = designComponent({
+  name: 'theme-locale-selector',
+  props: {
+    i18nManager: {},
+  },
+  setup({}) {
+    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')}>
+            <Icon icon="pi-language"/>
+          </div>
+        )
+      }}/>
+    );
+  },
+});

package/src/packages/components/ThemeLocaleSelector/theme-locale-selector.scss

@@ -0,0 +1,5 @@
+@include comp(theme-locale-selector) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}

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

@@ -0,0 +1,40 @@
+import {computed, designComponent, getComponentCls} from "plain-design-composition";
+import Dropdown from "../Dropdown";
+import DropdownOption from "../DropdownOption";
+import i18n from "../i18n";
+import Icon from "../Icon";
+import {ThemeShape} from "../../uses/useStyle";
+import PageThemeUtils from "../PageThemeUtils";
+import './theme-shape-selector.scss';
+
+export const ThemeShapeSelector = designComponent({
+  name: 'theme-shape-selector',
+  setup() {
+
+    const radiusOptions = computed((): { label: string, val: string | undefined }[] => [
+      { label: i18n.$it('theme.radiusOptions.round').d('圆角'), val: undefined },
+      { label: i18n.$it('theme.radiusOptions.square').d('小圆角'), val: ThemeShape.square },
+      { label: i18n.$it('theme.radiusOptions.none').d('无圆角'), val: ThemeShape.none },
+    ]);
+
+    const toggleShape = (val: any) => {PageThemeUtils.shape(val);};
+
+    return () => (
+      <Dropdown
+        trigger="hover"
+        align="center"
+        placement="bottom"
+        v-slots={{
+          default: () => (
+            <div className={getComponentCls('theme-shape-selector')}>
+              <Icon icon="pi-copy"/>
+            </div>
+          ),
+          popper: () => radiusOptions.value.map(opt => (
+            <DropdownOption label={opt.label} val={opt.val} key={opt.val || ""} onClick={() => toggleShape(opt.val)}/>
+          )),
+        }}
+      />
+    );
+  },
+});

package/src/packages/components/ThemeShapeSelector/theme-shape-selector.scss

@@ -0,0 +1,5 @@
+@include comp(theme-shape-selector) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}

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

@@ -0,0 +1,36 @@
+import {computed, designComponent, getComponentCls} from "plain-design-composition";
+import Dropdown from "../Dropdown";
+import DropdownOption from "../DropdownOption";
+import i18n from "../i18n";
+import Icon from "../Icon";
+import PageThemeUtils from "../PageThemeUtils";
+import './theme-size-selector.scss';
+
+export const ThemeSizeSelector = designComponent({
+  name: 'theme-size-selector',
+  props: {},
+  setup() {
+
+    const sizeOptions = computed((): { label: string, val: string }[] => [
+      { label: i18n.$it('theme.sizeOptions.large').d('大'), val: 'large' },
+      { label: i18n.$it('theme.sizeOptions.normal').d('中'), val: 'normal' },
+      { label: i18n.$it('theme.sizeOptions.small').d('小'), val: 'small' },
+      { label: i18n.$it('theme.sizeOptions.mini').d('极小'), val: 'mini' },
+    ]);
+
+    const toggleSize = (val: any) => {PageThemeUtils.size(val);};
+
+    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')}>
+            <Icon icon="pi-font-colors"/>
+          </div>
+        )
+      }}/>
+    );
+  },
+});

package/src/packages/components/ThemeSizeSelector/theme-size-selector.scss

@@ -0,0 +1,5 @@
+@include comp(theme-size-selector) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}

package/src/packages/i18n/i18n.utils.ts

@@ -2,6 +2,7 @@ import {createSyncHooks, reactive} from "plain-design-composition";
 import {ZhCnLocale} from './lang/zh-cn';
 import {deepmerge} from "../components/PageThemeUtils/deepmerge";
 import {PlainObject} from "plain-utils/utils/event";
+import {createCache} from "../utils/createCache";
 
 /**
  /**
@@ -11,15 +12,6 @@ import {PlainObject} from "plain-utils/utils/event";
  */
 const DEFAULT_LANG = 'zh-cn';
 
-/**
- * 组件内置中文以及英文
- * @author  韦胜健
- * @date    2023/10/12 15:14
- */
-const LANGS = {
-  [DEFAULT_LANG]: ZhCnLocale,
-};
-
 /**
  * 根据中文解析出来允许访问的编码类型
  * @author  韦胜健
@@ -47,9 +39,15 @@ type iFormat<
 type iStandardLangPath = iFormat<typeof ZhCnLocale>;
 
 export const i18n = (() => {
+
   const state = reactive({
     currentLang: DEFAULT_LANG,
-    langs: LANGS as any
+    langs: {
+      [DEFAULT_LANG]: ZhCnLocale,
+    } as any,
+    localeOptions: [
+      { label: '中文', key: DEFAULT_LANG, lang: ZhCnLocale }
+    ] as { label: string, key: string, lang: PlainObject }[]
   });
 
   const hooks = {
@@ -215,6 +213,10 @@ export const i18n = (() => {
     return result;
   };
 
+  const cache = createCache<string>('@@I18N_LANG');
+
+  if (cache.get()) {switchTo(cache.get()!);}
+
   return {
     $t,
     $intl,

package/src/packages/i18n/lang/en-us.ts

@@ -274,6 +274,18 @@ export const EnUsLocale: tZhCnLocale = {
     radiusModeNone: 'None',
     scale: 'SCALE',
     reset: 'RESET',
+    darkOrLight: '深浅主题',
+    sizeOptions: {
+      large: '大',
+      normal: '中',
+      small: '小',
+      mini: '极小',
+    },
+    radiusOptions: {
+      round: '圆角',
+      square: '小圆角',
+      none: '无圆角',
+    }
   },
   colorName: {
     默认主题: 'Default',

package/src/packages/i18n/lang/zh-cn.ts

@@ -272,6 +272,18 @@ export const ZhCnLocale = {
     radiusModeNone: '无圆角',
     scale: '大小缩放',
     reset: '重置',
+    darkOrLight: '深浅主题',
+    sizeOptions: {
+      large: '大',
+      normal: '中',
+      small: '小',
+      mini: '极小',
+    },
+    radiusOptions: {
+      round: '圆角',
+      square: '小圆角',
+      none: '无圆角',
+    }
   },
   colorName: {
     默认主题: '默认主题',