plain-design 1.0.0-beta.1 → 1.0.0-beta.100

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

@@ -0,0 +1,262 @@
+import {computed, getComponentCls, reactive} from "plain-design-composition";
+import {createCache} from "../../utils/createCache";
+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 = (() => {
+
+  const darkCache = createCache<boolean>(getComponentCls('@@PAGE_THEME_IS_DARK'));
+  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<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({
+    dark: darkCache.get(),
+    primaryKey: primaryCache.get(),
+    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 = {};}
+    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 (!!size) {
+      config.default.size = size;
+    }
+    if (!!shape) {
+      config.default.shape = shape;
+      if (!config.theme!.vars) {
+        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 (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',
+          'box-size-large-border-radius': '0',
+        });
+      }
+    }
+    if (!!inputMode) {
+      config.default.inputMode = inputMode;
+    }
+    if (!!buttonMode) {
+      config.default.buttonMode = buttonMode;
+    }
+    return config;
+  });
+
+  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, onlyCache?: boolean) => {
+    !onlyCache && (state.primaryKey = val);
+    primaryCache.set(val);
+  };
+
+  const size = (val: typeof ThemeSize.TYPE | null, onlyCache?: boolean) => {
+    !onlyCache && (state.size = val);
+    sizeCache.set(val);
+  };
+
+  const shape = (val: typeof ThemeShape.TYPE | null, onlyCache?: boolean) => {
+    !onlyCache && (state.shape = val);
+    shapeCache.set(val);
+  };
+
+  const inputMode = (val: typeof InputMode.TYPE | null, onlyCache?: boolean) => {
+    !onlyCache && (state.inputMode = val);
+    inputModeCache.set(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,
+    state,
+    primary,
+    size,
+    shape,
+    inputMode,
+    buttonMode,
+    zoom,
+    clear,
+    variable,
+  };
+})();
+
+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/index.tsx

@@ -1,4 +1,4 @@
-import {ComponentPropsType, computed, designComponent, getComponentCls, onBeforeUnmount, PropType, reactive, RenderNode, useClassCache, useModel, useStyleCache, watch, watchEffect} from "plain-design-composition";
+import {ComponentPropsType, computed, designComponent, Fragment, getComponentCls, onBeforeUnmount, PropType, reactive, RenderNode, useClassCache, useModel, useStyleCache, watch, watchEffect} from "plain-design-composition";
 import {iPopupAnimation, iPopupCustomOption, iPopupDefaultOption, iPopupPlacement, iPopupTrigger, iPopupUseOption, PopupItemProvide} from "../usePopup/utils/popup.utils";
 import {Reference} from "../Reference";
 import {usePopup} from "../usePopup";
@@ -34,7 +34,8 @@ export const Popup = designComponent({
     beforeHide: { type: Function as PropType<iPopupCustomOption['beforeHide']> },         // 隐藏之前处理动作，返回false则阻止隐藏
     destroyOnClose: { type: Boolean, default: true, },                                                    // 是否在关闭的时候销毁内容
     type: { type: String as PropType<iPopupDefaultOption['type']> },                      // 类型，在打开一个popup的时候，会将同类型的popup自动关闭
-    to: { type: String as PropType<iPopupDefaultOption['to']> },                          // 挂载到某个dom节点下
+    appendToBody: { type: Boolean as PropType<iPopupDefaultOption['appendToBody']>, default: true },  // 挂载到某个dom节点下
+    transformRefreshOnScroll: { type: Boolean as PropType<iPopupDefaultOption['transformRefreshOnScroll']>, default: true },// scroll的时候refresh使用transform来优化
     offset: { type: Number as PropType<iPopupDefaultOption['offset']> },                  // 在direction方向上的距离
     autoSwitchDirection: { type: Boolean as PropType<iPopupDefaultOption['autoSwitchDirection']>, default: true },// 当空间不够时，是否自动切换direction
     size: { type: String as PropType<iPopupDefaultOption['size']> },                      // popup内容尺寸
@@ -50,6 +51,10 @@ export const Popup = designComponent({
     noArrow: { type: Boolean, default: null },                                            // 是否去掉箭头
     minWidth: { type: [Number, String] },                                                 // 最小宽度
     minHeight: { type: [Number, String] },                                                // 最小高度
+    maxTop: { type: [Number, Function] as PropType<iPopupUseOption['maxTop']> },          // 最大top
+    minTop: { type: [Number, Function] as PropType<iPopupUseOption['minTop']> },          // 最小top
+    maxLeft: { type: [Number, Function] as PropType<iPopupUseOption['maxLeft']> },        // 最大left
+    minLeft: { type: [Number, Function] as PropType<iPopupUseOption['minLeft']> },        // 最小left
     noBackground: { type: Boolean },                                                      // 透明背景色
     cover: { type: Boolean },                                                             // 覆盖reference
     noBorder: { type: Boolean },                                                          // 无边框
@@ -139,7 +144,9 @@ export const Popup = designComponent({
     const reference = computed(() => {
       let reference: any = props.reference || state.getReference();
       if (!!reference) {
-        if (typeof reference === "function") {reference = reference();}
+        if (typeof reference === "function") {
+          reference = reference();
+        }
         if (!!reference && !!reference.$el) {
           reference = reference.$el;
         }
@@ -155,7 +162,9 @@ export const Popup = designComponent({
     const stickyReference = computed(() => {
       let reference: any = props.stickyReference;
       if (!!reference) {
-        if (typeof reference === "function") {reference = reference();}
+        if (typeof reference === "function") {
+          reference = reference();
+        }
         if (!!reference && !!reference.$el) {
           reference = reference.$el;
         }
@@ -226,7 +235,8 @@ export const Popup = designComponent({
         noPadding: props.noPadding,
         destroyOnClose: props.destroyOnClose,
         type: props.type,
-        to: props.to,
+        appendToBody: props.appendToBody,
+        transformRefreshOnScroll: props.transformRefreshOnScroll,
         offset: props.offset,
         autoSwitchDirection: props.autoSwitchDirection,
         refreshOnScroll: props.refreshOnScroll,
@@ -241,6 +251,10 @@ export const Popup = designComponent({
         noArrow: props.noArrow,
         minHeight: props.minHeight,
         minWidth: props.minWidth,
+        maxTop: props.maxTop,
+        minTop: props.minTop,
+        maxLeft: props.maxLeft,
+        minLeft: props.minLeft,
         noBackground: props.noBackground,
         cover: props.cover,
         noBorder: props.noBorder,
@@ -266,12 +280,16 @@ export const Popup = designComponent({
         },
         /*开启之前检查，如果已经禁用则禁止显示*/
         beforeShow: () => {
-          if (props.disabled || props.readonly) {return false;}
+          if (props.disabled || props.readonly) {
+            return false;
+          }
           return props.beforeShow?.();
         },
         /*关闭之前检查，如果已经禁用则禁止关闭*/
         beforeHide: () => {
-          if (props.disabled || props.readonly) {return false;}
+          if (props.disabled || props.readonly) {
+            return false;
+          }
           return props.beforeHide?.();
         },
 
@@ -284,7 +302,7 @@ export const Popup = designComponent({
               {(slots.head.isExist() || !!props.title) && (
                 <div className="popper-head">{slots.head(typeof props.title === "function" ? props.title() : props.title)}</div>
               )}
-              {slots.popper(typeof props.message === "function" ? props.message() : props.message)}
+              <Fragment key="popper">{slots.popper(typeof props.message === "function" ? props.message() : props.message)}</Fragment>
             </div>
           );
 
@@ -346,14 +364,18 @@ export const Popup = designComponent({
      */
     if (!!model.value) {
       const unwatch = watch(() => reference.value, reference => {
-        if (!reference) {return;}
+        if (!reference) {
+          return;
+        }
         unwatch();
         $popup.show(state.getOption());
       });
     }
 
     onBeforeUnmount(
-      watch(() => props.watchData, () => {$popup.update(state.getOption());})
+      watch(() => props.watchData, () => {
+        $popup.update(state.getOption());
+      })
     );
 
     const refresh = () => {

package/src/packages/components/ProgressBar/progress-bar.scss

@@ -32,7 +32,7 @@
         text-align: right;
 
         span {
-          color: white;
+         color: plv(pbfc);
         }
       }
     }

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

@@ -5,6 +5,7 @@ import {Icon} from "../Icon";
 import './rate.scss';
 import {EditProps, useEdit} from "../../uses/useEdit";
 import {StyleProps, ThemeStatus, useStyle} from "../../uses/useStyle";
+import {ClientZoom} from "../ClientZoom";
 
 export const Rate = designComponent({
   name: 'rate',
@@ -79,7 +80,8 @@ export const Rate = designComponent({
 
     const methods = {
       reset: (e: MouseEvent | iMouseEvent) => {
-        let dur = e.clientX - (elLeft.value || 0);
+        const { clientX } = ClientZoom.getClientPosition(e);
+        let dur = clientX - (elLeft.value || 0);
         let start = 0;
         let end = totalWidth.value;
         let step = end / props.count;