plain-design 1.0.0-beta.11 → 1.0.0-beta.111

package/src/packages/components/PageCard/page-card.scss

@@ -0,0 +1,124 @@
+@include comp(page-card) {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+
+  & > * {
+    background-color: plv(bg-2);
+
+    & + * {
+      border-top: solid 1px plv(border-color);
+    }
+  }
+
+  &.page-card-full {
+    height: 100%;
+    width: 100%;
+  }
+
+  .#{componentName(page-card-title)} {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .page-card-title-left {
+      display: flex;
+      align-items: center;
+
+      .page-card-title-icon {
+        color: plv(primary-6);
+        height: 1em;
+        width: 1em;
+        position: relative;
+        margin-right: 0.75em;
+
+        .page-card-title-icon-inner {
+          position: absolute;
+          inset: -4px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          background-color: plv(primary-1);
+        }
+
+        &.page-card-title-icon-collapse {
+          .page-card-title-icon-inner {
+            cursor: pointer;
+            user-select: none;
+            background-color: transparent;
+          }
+        }
+      }
+    }
+
+    .page-card-title-right {
+      color: plv(primary-6);
+      cursor: pointer;
+    }
+  }
+
+  /*@formatter:off*/
+  @include comp(page-card-content) {
+    box-sizing: border-box;
+    &.page-card-content-align-left{text-align: left}
+    &.page-card-content-align-center{text-align: center}
+    &.page-card-content-align-right{text-align: right}
+    @include sizeMixin(page-card-content, ()) {}
+    &.page-card-content-full {
+      flex: 1;
+      position: relative;
+      .page-card-content-full-inner{
+        position: absolute;
+        inset: 0;
+        padding: inherit;
+      }
+    }
+  }
+  @include comp(page-card-title) {
+    box-sizing: border-box;
+    @include sizeMixin(page-card-title, ()) {}
+  }
+  /*@formatter:on*/
+
+  @include sizeMixin(page-card, (font-size)) {
+    & + * {
+      margin-top: $margin;
+    }
+
+    & > *:not(.no-padding) {
+      padding: $margin;
+    }
+
+    & > * {
+      &:first-child {
+        border-top-left-radius: $border-radius;
+        border-top-right-radius: $border-radius;
+      }
+
+      &:last-child {
+        border-bottom-left-radius: $border-radius;
+        border-bottom-right-radius: $border-radius;
+      }
+    }
+
+    .#{componentName(page-card-title)} {
+
+      .page-card-title-left {
+        .page-card-title-icon-inner {
+          border-radius: $border-radius;
+        }
+      }
+
+      .page-card-title-right {
+        & > * + * {
+          margin-left: $margin;
+        }
+      }
+    }
+
+    .#{componentName(page-card-content)} {
+    }
+  }
+
+
+}

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

@@ -0,0 +1,44 @@
+import {designComponent, getComponentCls, PropType, useClassCache} from "@peryl/react-compose";
+import {StyleProps, useStyle} from "../../uses/useStyle";
+import PageCard from "../PageCard";
+
+export const PageCardContent = designComponent({
+  name: 'page-card-content',
+  props: {
+    align: { type: String as PropType<'left' | 'center' | 'right'> },
+    full: { type: Boolean },
+    noPadding: { type: Boolean },
+    ...StyleProps,
+  },
+  slots: ['default'],
+  setup({ props, slots }) {
+
+    const pageCard = PageCard.use.inject();
+
+    const { styleComputed } = useStyle();
+
+    const classes = useClassCache(() => [
+      getComponentCls('page-card-content'),
+      `page-card-content-size-${styleComputed.value.size}`,
+      {
+        [`page-card-content-align-${props.align}`]: !!props.align,
+        'page-card-content-full': props.full,
+        'no-padding': props.noPadding,
+      }
+    ]);
+
+    return () => (
+      pageCard.model.value != false && (
+        <div className={classes.value}>
+          {
+            props.full ?
+              (<div className="page-card-content-full-inner">
+                {slots.default()}
+              </div>) :
+              slots.default()
+          }
+        </div>
+      )
+    );
+  },
+});

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

@@ -0,0 +1,51 @@
+import {designComponent, getComponentCls, useClassCache} from "@peryl/react-compose";
+import {StyleProps, useStyle} from "../../uses/useStyle";
+import Icon from "../Icon";
+import PageCard from "../PageCard";
+
+export const PageCardTitle = designComponent({
+  name: 'page-card-title',
+  props: {
+    title: { type: String },
+    icon: { type: String },
+    ...StyleProps,
+  },
+  slots: ['default', 'titleContent'],
+  setup({ props, slots }) {
+
+    const pageCard = PageCard.use.inject();
+
+    const { styleComputed } = useStyle();
+
+    const classes = useClassCache(() => [
+      getComponentCls('page-card-title'),
+      `page-card-title-size-${styleComputed.value.size}`
+    ]);
+
+    return () => (
+      <div className={classes.value}>
+        <div className="page-card-title-left">
+          {pageCard.props.collapsable && (
+            <div className="page-card-title-icon page-card-title-icon-collapse">
+              <div className="page-card-title-icon-inner" onClick={() => pageCard.model.value = pageCard.model.value === false}>
+                <Icon icon={pageCard.model.value == false ? 'pi-caret-right' : 'pi-caret-down'}/>
+              </div>
+            </div>
+          )}
+          {!!props.icon && (
+            <div className="page-card-title-icon">
+              <div className="page-card-title-icon-inner">
+                <Icon icon={props.icon}/>
+              </div>
+            </div>
+          )}
+          <span>{slots.titleContent(props.title)}</span>
+        </div>
+        <div className="page-card-title-right">
+          {slots.default()}
+        </div>
+      </div>
+    );
+
+  },
+});

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

@@ -0,0 +1,22 @@
+import {designComponent, onBeforeUnmount} from "@peryl/react-compose";
+import {usePageRenderContext} from "../usePageRenderContext";
+
+export const PageRenderList = designComponent({
+  name: 'page-render-list',
+  props: {},
+  slots: ['default'],
+  setup({ props, slots }) {
+
+    const pageRenderContext = usePageRenderContext();
+
+    onBeforeUnmount(pageRenderContext.renderHook.use({
+      separate: false,
+      processor: ({ list, render }) => {list.push({ render, key: '', seq: 1 });},
+      render: () => slots.default()
+    }));
+
+    return () => {
+      return pageRenderContext.renderHook.exec();
+    };
+  },
+});

package/src/packages/components/PageThemeUtils/deepmerge.ts

@@ -0,0 +1,21 @@
+export function deepmerge(...list: any[]): any {
+  list = list.filter(i => i != null);
+  if (!list.length || list.length == 1) {
+    return list[0];
+  }
+  let result: any = {};
+  list.forEach((item) => {
+    for (let key in item) {
+      if (typeof item[key] !== "object") {
+        result[key] = item[key];
+      } else {
+        if (result[key] == undefined) {
+          result[key] = item[key];
+        } else {
+          result[key] = deepmerge(result[key], item[key]);
+        }
+      }
+    }
+  });
+  return result;
+}

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

@@ -1,8 +1,11 @@
-import {computed, getComponentCls, reactive} from "plain-design-composition";
+import {getComponentCls, globalComputed, reactive} from "@peryl/react-compose";
 import {createCache} from "../../utils/createCache";
-import {ThemeShape, ThemeSize} from "../../uses/useStyle";
+import {InputMode, ThemeMode, ThemeShape, ThemeSize} from "../../uses/useStyle";
 import {DeepPartial} from "../../utils/type";
 import {iApplicationConfiguration} from "../Application/utils/application.utils";
+import {BaseColors, iThemeConfiguration} from "../Application/theme/theme";
+import {deepmerge} from "./deepmerge";
+import {PlainObject} from "@peryl/utils/event";
 
 export const PageThemeUtils = (() => {
 
@@ -10,7 +13,8 @@ export const PageThemeUtils = (() => {
   const primaryCache = createCache<string>(getComponentCls('@@PAGE_THEME_PRIMARY'));
   const sizeCache = createCache<typeof ThemeSize.TYPE>(getComponentCls('@@PAGE_THEME_SIZE'));
   const shapeCache = createCache<typeof ThemeShape.TYPE>(getComponentCls('@@PAGE_THEME_SHAPE'));
-  const inputModeCache = createCache<'flat' | 'stroke'>(getComponentCls('@@PAGE_THEME_INPUT_MODE'));
+  const inputModeCache = createCache<typeof InputMode.TYPE>(getComponentCls('@@PAGE_THEME_INPUT_MODE'));
+  const buttonModeCache = createCache<typeof ThemeMode.TYPE>(getComponentCls('@@PAGE_THEME_BUTTON_MODE'));
   const zoomCache = createCache<number | undefined>(getComponentCls('@@PAGE_THEME_ZOOM'));
 
   const state = reactive({
@@ -19,40 +23,55 @@ export const PageThemeUtils = (() => {
     size: sizeCache.get(),
     shape: shapeCache.get(),
     inputMode: inputModeCache.get(),
+    buttonMode: buttonModeCache.get(),
     zoom: zoomCache.get(),
   });
 
-  const configuration = computed((): DeepPartial<iApplicationConfiguration> => {
+  const configuration = globalComputed((): DeepPartial<iApplicationConfiguration> => {
     const config: DeepPartial<iApplicationConfiguration> = {};
-    if (!config.theme) {
-      config.theme = {};
-    }
-    if (!config.theme.base) {
-      config.theme.base = {};
-    }
-    config.theme.dark = !!state.dark;
-    config.theme.base.primary = !state.primaryKey ? undefined : ThemePrimaryColors[state.primaryKey]?.primary;
+    if (!config.theme) {config.theme = {};}
+    if (!config.theme.base) {config.theme.base = {};}
+    if (!config.theme.vars) {config.theme.vars = {};}
+
+    let { dark, primaryKey, size, shape, inputMode, buttonMode, zoom } = state;
+
+    config.theme.dark = !!dark;
+
+    const themeConfig = !primaryKey ? undefined : ((): DeepPartial<Omit<iThemeConfiguration, 'dark'>> | undefined => {
+      let themeConfig = ThemePrimaryColors[primaryKey]?.themeConfig;
+      if (themeConfig == undefined) {return undefined;}
+      if (typeof themeConfig === "string") {
+        return {
+          base: { primary: themeConfig }
+        };
+      } else {
+        return themeConfig[dark ? 'dark' : 'light'];
+      }
+    })();
+
+    config.theme = deepmerge(config.theme, themeConfig) as PlainObject;
+
     if (!config.default) {
       config.default = {};
     }
-    if (!!state.size) {
-      config.default.size = state.size;
+    if (!!size) {
+      config.default.size = size;
     }
-    if (!!state.shape) {
-      config.default.shape = state.shape;
-      if (!config.theme.vars) {
-        config.theme.vars = {};
+    if (!!shape) {
+      config.default.shape = shape;
+      if (!config.theme!.vars) {
+        config.theme!.vars = {};
       }
-      if (state.shape === 'square') {
-        Object.assign(config.theme.vars, {
+      if (shape === 'square') {
+        Object.assign(config.theme!.vars, {
           'box-size-mini-border-radius': '2px',
           'box-size-small-border-radius': '2px',
           'box-size-normal-border-radius': '4px',
           'box-size-large-border-radius': '4px',
         });
       }
-      if (state.shape === 'none') {
-        Object.assign(config.theme.vars, {
+      if (shape === 'none') {
+        Object.assign(config.theme!.vars, {
           'box-size-mini-border-radius': '0',
           'box-size-small-border-radius': '0',
           'box-size-normal-border-radius': '0',
@@ -60,42 +79,58 @@ export const PageThemeUtils = (() => {
         });
       }
     }
-    if (!!state.inputMode) {
-      config.default.inputMode = state.inputMode;
+    if (!!inputMode) {
+      config.default.inputMode = inputMode;
+    }
+    if (!!buttonMode) {
+      config.default.buttonMode = buttonMode;
     }
     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: 'flat' | 'stroke' | null) => {
-    state.inputMode = val;
+  const inputMode = (val: typeof InputMode.TYPE | null, onlyCache?: boolean) => {
+    !onlyCache && (state.inputMode = val);
     inputModeCache.set(val);
   };
 
-  const zoom = (val: number | null) => {
-    state.zoom = val;
+  const buttonMode = (val: typeof ThemeMode.TYPE | null, onlyCache?: boolean) => {
+    !onlyCache && (state.buttonMode = val);
+    buttonModeCache.set(val);
+  };
+
+  const zoom = (val: number | null, onlyCache?: boolean) => {
+    !onlyCache && (state.zoom = val);
     zoomCache.set(val);
   };
 
+  const clear = () => {
+    window.localStorage.clear();
+    window.location.reload();
+  };
+
+  const variable = (varName: string) => `var(--${getComponentCls(varName)})`;
+
   return {
     configuration,
     toggle,
@@ -104,24 +139,124 @@ export const PageThemeUtils = (() => {
     size,
     shape,
     inputMode,
+    buttonMode,
     zoom,
+    clear,
+    variable,
   };
 })();
 
-export const ThemePrimaryColors: Record<string, { label: string, primary: string | undefined } | undefined> = {
-  default: { label: '默认主题', primary: undefined, },
-  dustRed: { label: '薄暮', primary: '#f5222d', },
-  volcano: { label: '火山', primary: '#fa541c', },
-  subset: { label: '日暮', primary: '#fa8c16', },
-  gold: { label: '金盏花', primary: '#faad14', },
-  sunrise: { label: '日出', primary: '#fadb14', },
-  lime: { label: '青柠', primary: '#a0d911', },
-  polar: { label: '极光绿', primary: '#52c41a', },
-  cyan: { label: '明青', primary: '#13c2c2', },
-  daybreak: { label: '拂晓蓝', primary: '#1677ff', },
-  geek: { label: '极客蓝', primary: '#2f54eb', },
-  purple: { label: '酱紫', primary: '#722ed1', },
-  magenta: { label: '洋红', primary: '#eb2f96', },
+export const ThemePrimaryColors: Record<string, {
+  label: string,
+  themeConfig: {
+    dark: DeepPartial<Omit<iThemeConfiguration, 'dark'>>,
+    light: DeepPartial<Omit<iThemeConfiguration, 'dark'>>
+  } | undefined | string
+} | undefined> = {
+  default: { label: '默认主题', themeConfig: undefined, },
+  dustRed: {
+    label: '薄暮', themeConfig: '#f5222d'
+  },
+  volcano: {
+    label: '火山', themeConfig: '#fa541c'
+  },
+  subset: {
+    label: '日暮', themeConfig: '#fa8c16'
+  },
+  gold: {
+    label: '金盏花', themeConfig: '#faad14'
+  },
+  sunrise: {
+    label: '日出', themeConfig: '#fadb14'
+  },
+  lime: {
+    label: '青柠', themeConfig: '#a0d911'
+  },
+  polar: {
+    label: '极光绿', themeConfig: '#42b883'
+  },
+  cyan: {
+    label: '明青', themeConfig: '#13c2c2'
+  },
+  daybreak: {
+    label: '拂晓蓝', themeConfig: '#1677ff'
+  },
+  geek: {
+    label: '极客蓝', themeConfig: '#2f54eb'
+  },
+  purple: {
+    label: '酱紫', themeConfig: {
+      dark: {
+        base: { primary: '#7643ff', }
+      },
+      light: {
+        base: { primary: '#6a00ff', }
+      },
+    }
+  },
+  magenta: {
+    label: '洋红', themeConfig: {
+      dark: {
+        base: { primary: '#eb2f96', }
+      },
+      light: {
+        base: { primary: '#d90178', }
+      },
+    }
+  },
+  dark: {
+    label: '极夜', themeConfig: {
+      dark: {
+        base: { primary: '#FFFFFF', },
+      },
+      light: {
+        base: { primary: '#000000', },
+        vars: {
+          'primary-light-1': '#f2f3f5',
+          'primary-1': '#f2f3f5',
+          'primary-light-2': '#e1e2e7',
+          'primary-2': '#e1e2e7',
+          'primary-light-3': '#c9cdd4',
+          'primary-3': '#c9cdd4',
+          'primary-light-4': '#a9aeb8',
+          'primary-4': '#a9aeb8',
+          'primary-light-5': '#86909c',
+          'primary-5': '#86909c',
+          'primary-light-6': '#0c0e10',
+          'primary-6': '#0b0b0b',
+          'primary-light-7': '#464f5e',
+          'primary-7': '#464f5e',
+          'primary-light-8': '#272e3b',
+          'primary-8': '#272e3b',
+          'primary-light-9': '#1d2129',
+          'primary-9': '#111318',
+          'primary-light-10': '#0c0e10',
+          'primary-10': '#0b0b0b',
+        }
+      },
+    }
+  },
 };
 
 export default PageThemeUtils;
+
+export function getPrimaryColor(primaryKey?: string | undefined): { light: string, dark: string } {
+  const baseColor = {
+    light: BaseColors.light.primary,
+    dark: BaseColors.dark.primary,
+  };
+  if (!primaryKey) {
+    return baseColor;
+  }
+  const themeConfig = ThemePrimaryColors[primaryKey]?.themeConfig;
+
+  if (!themeConfig) {return baseColor;}
+
+  return typeof themeConfig === "string" ? {
+    dark: themeConfig,
+    light: themeConfig,
+  } : {
+    dark: themeConfig.dark.base!.primary!,
+    light: themeConfig.light.base!.primary!
+  };
+}

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

@@ -1,8 +1,8 @@
-import {computed, designComponent, getComponentCls, PropType, ref, useClasses, useNumber, watch} from "plain-design-composition";
+import {computed, designComponent, getComponentCls, PropType, ref, useClasses, useNumber, watch} from "@peryl/react-compose";
 import {StyleProps, useStyle} from "../../uses/useStyle";
 import {EditProps, useEdit} from "../../uses/useEdit";
-import {classnames} from "plain-utils/dom/classnames";
-import {delay} from "plain-utils/utils/delay";
+import {classnames} from "@peryl/utils/classnames";
+import {delay} from "@peryl/utils/delay";
 import {Select} from "../Select";
 import {SelectOption} from "../SelectOption";
 import {Icon} from "../Icon";
@@ -67,9 +67,9 @@ export const Pagination = designComponent({
         return props.jumperNumberWidth;
       } else {
         return {
-          large: 140,
-          normal: 130,
-          small: 120,
+          large: 150,
+          normal: 140,
+          small: 130,
           mini: 120,
         }[styleComputed.value.size];
       }
@@ -252,7 +252,7 @@ export const Pagination = designComponent({
             onChange={emit.onSizeChange as any}
           >
             {(props.pageSizes || []).map((item) => (
-              <SelectOption label={i18n('table.rowPerPage', { num: item }).d(`${item} 条/页`)} val={item} key={item}/>
+              <SelectOption label={i18n.$it('table.rowPerPage', { num: item }).d(`${item} 条/页`)} val={item} key={item}/>
             ))}
           </Select>
         );
@@ -270,8 +270,8 @@ export const Pagination = designComponent({
               onEnter={handler.onJumperChange}
             >
               {{
-                prefix: () => <span style={{ whiteSpace: 'nowrap' }}>{i18n('base.go').d('前往')}</span>,
-                suffix: () => <span>{i18n('base.page').d('页')}</span>,
+                prefix: () => <span style={{ whiteSpace: 'nowrap' }}>{i18n.$it('base.go').d('前往')}</span>,
+                suffix: () => <span>{i18n.$it('base.page').d('页')}</span>,
               }}
             </InputNumber>
           </div>
@@ -303,7 +303,7 @@ export const Pagination = designComponent({
         );
 
         const blank = (<div className="pagination-blank" key="blank"/>);
-        const total = props.total == null ? null : (<div className="pagination-total" key="total"><span>{i18n('base.totalPage', { total: props.total }).d(`总共${props.total}条数据`)}</span></div>);
+        const total = props.total == null ? null : (<div className="pagination-total" key="total"><span>{i18n.$it('base.totalPage', { total: props.total }).d(`总共${props.total}条数据`)}</span></div>);
         const slot = !slots.default.isExist() ? null : (<div className="pagination-slot" key="slot">{slots.default()}</div>);
         const loading = !editComputed.value.loading ? null : (
           <div className="pagination-loading" key="loading">

package/src/packages/components/Pagination/pagination.scss

@@ -41,13 +41,14 @@
     box-sizing: border-box;
 
     &:hover {
-      background-color: plv(primary-2)
+      border-color: plv(primary-6);
+      color: plv(primary-6);
     }
 
     &:active, &.pagination-pager-button-active {
       background-color: plv(primary-6);
       border-color: plv(primary-6);
-      color: white;
+      color: plv(pbfc);
     }
   }
 
@@ -118,7 +119,7 @@
       &.pagination-pager-button-active {
         background-color: plv(gray-light-6);
         border-color: plv(gray-light-6);
-        color: white;
+        color: plv(pbfc);
       }
     }
   }