plain-design 1.0.0-beta.10 → 1.0.0-beta.101

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

@@ -0,0 +1,51 @@
+import {designComponent, getComponentCls, useClassCache} from "plain-design-composition";
+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 "plain-design-composition";
+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 {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 "plain-utils/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 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

@@ -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);
       }
     }
   }

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

@@ -0,0 +1,46 @@
+import {designComponent, getComponentCls, PropType, useClasses} from "plain-design-composition";
+import './paragraph.scss';
+import {ParagraphItem} from "../ParagraphItem";
+import {i18n} from "../i18n";
+
+export const Paragraph = designComponent({
+  name: 'paragraph',
+  props: {
+    order: { type: Boolean },
+    list: { type: [String, Array] as PropType<string | string[]> },
+  },
+  slots: ['default'],
+  setup({ props, slots }) {
+
+    const classes = useClasses(() => [
+      getComponentCls('paragraph')
+    ]);
+
+    return () => {
+      const Type = props.order ? 'ol' : 'ul';
+      return (
+        <Type className={classes.value}>
+          {slots.default()}
+          {!!props.list?.length && (() => {
+            let arr: string[] = [];
+            if (typeof props.list === "string") {
+              const i18nResult = i18n.$intl(props.list).d(props.list);
+              if (Array.isArray(i18nResult)) {
+                arr.push(...i18nResult);
+              } else {
+                arr.push(i18nResult);
+              }
+            } else {
+              arr.push(...props.list);
+            }
+            return arr.map((item, index) => (
+              <ParagraphItem key={index}>{item}</ParagraphItem>
+            ));
+          })()}
+        </Type>
+      );
+    };
+  },
+});
+
+export default Paragraph;

package/src/packages/components/Paragraph/paragraph.scss

@@ -0,0 +1,12 @@
+@include comp(paragraph) {
+
+  margin: 0;
+  padding-inline-start: 2em;
+
+  @include comp(paragraph-item) {
+
+    & + .#{componentName(paragraph-item)} {
+      margin-top: 1em;
+    }
+  }
+}

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

@@ -0,0 +1,21 @@
+import {designComponent, getComponentCls, useClasses} from "plain-design-composition";
+
+export const ParagraphItem = designComponent({
+  name: 'paragraph-item',
+  props: {},
+  slots: ['default'],
+  setup({ props, slots }) {
+
+    const classes = useClasses(() => [
+      getComponentCls('paragraph-item')
+    ]);
+
+    return () => (
+      <li className={classes.value}>
+        {slots.default()}
+      </li>
+    );
+  },
+});
+
+export default ParagraphItem

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

@@ -29,8 +29,8 @@ export const PlcImage = designComponent({
     const upload = $configuration.use('upload');
 
     const size = computed(() => {
-      const bodyRowHeight = table.props.bodyRowHeight;
-      return Math.ceil((bodyRowHeight as number) - 20);
+      const bodyRowHeight = table.numberState.bodyRowHeight;
+      return Math.ceil((bodyRowHeight as number) - 8);
     });
 
     const urlPrefix = computed(() => props.urlPrefix || upload?.config.prefix);
@@ -52,6 +52,9 @@ export const PlcImage = designComponent({
             src={row[plc.props.field]}
             height={size.value}
             width={size.value}
+            minWidth={size.value}
+            minHeight={size.value}
+            hideTips
             fit="cover"
             onClick={() => preview(node.state.index)}
           />
@@ -64,6 +67,9 @@ export const PlcImage = designComponent({
             uploadConfig={props.uploadConfig}
             height={size.value}
             width={size.value}
+            minWidth={size.value}
+            minHeight={size.value}
+            hideTips
             handleDelete={() => {
               row[plc.props.field!] = null;
               row[props.imgKeyField!] = null;

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

@@ -3,7 +3,7 @@ import {createPlcPropOptions, PlcEmitsOptions} from "../Table/plc/utils/plc.util
 import {PlcScopeSlotsOptions} from "../Table/plc/utils/plc.scope-slots";
 import {usePlc} from "../Table/plc/use/usePlc";
 import _Object from "../Object";
-import {pick} from "../../utils/pick";
+import {pick} from "plain-utils/object/pick";
 import {ObjectPropsOption} from "../Object/object.utils";
 import {iFilterConfigObject} from "../FilterService/filter/fitler.object";
 

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

@@ -3,17 +3,27 @@ import {OvPropsOption} from "../Ov/ov.utils";
 import {usePublicOv} from "../Ov/usePublicOv";
 import {PlcSelect} from "../Table/editor/PlcSelect";
 import {SelectOption} from "../SelectOption";
+import {PlcScopeSlotsOptions} from "../Table/plc/utils/plc.scope-slots";
+import {inheritSlots} from "../../utils/inheritSlots";
 
 export const PlcOv = designComponent({
   name: 'plc-ov',
   inheritPropsType: PlcSelect,
   props: OvPropsOption,
-  setup({ props }) {
+  scopeSlots: PlcScopeSlotsOptions,
+  slots: ['default'],
+  setup({ props, slots, scopeSlots }) {
     const { state } = usePublicOv({ props });
     return () => (
-      <PlcSelect>
-        {state.ovMetas.map(meta => (<SelectOption label={meta.name} val={meta.code} key={meta.code}/>))}
-      </PlcSelect>
+      <PlcSelect
+        v-slots={inheritSlots({
+          slots,
+          scopeSlots,
+          defaultSlots: {
+            default: () => state.ovMetas.map(meta => (<SelectOption label={meta.name} val={meta.code} key={meta.code}/>))
+          }
+        })}
+      />
     );
   },
 });

package/src/packages/components/Popup/PopupProvider.tsx

@@ -1,5 +1,4 @@
-import {createProvider} from "../../utils/createProvider";
-import {getComponentCls} from "plain-design-composition";
+import {createProvider, getComponentCls} from "plain-design-composition";
 import {iPopupAnimation, iPopupTrigger, iPopupUseOption} from "../usePopup/utils/popup.utils";
 
 /**