plain-design 1.0.0-beta.4 → 1.0.0-beta.40

package/package.json

@@ -1,13 +1,14 @@
 {
   "name": "plain-design",
-  "version": "1.0.0-beta.4",
+  "version": "1.0.0-beta.40",
   "description": "",
   "main": "dist/plain-design.min.js",
   "module": "dist/plain-design.commonjs.min.js",
   "typings": "src/index.ts",
   "files": [
     "dist",
-    "src"
+    "src/packages",
+    "src/index.ts"
   ],
   "scripts": {
     "dev": "cross-env APP_ENV=prod vue-cli-service serve",
@@ -19,9 +20,9 @@
   "peerDependencies": {
     "exceljs": "^4.2.1",
     "file-saver": "^2.0.5",
-    "plain-design-composition": "^0.0.167",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1"
+    "plain-design-composition": "^0.0.185",
+    "react": "^18.0.1",
+    "react-dom": "^18.0.1"
   },
   "resolutions": {
     "@types/react": "18.2.4",
@@ -32,8 +33,8 @@
     "@types/react-transition-group": "^4.4.1",
     "color": "^4.2.3",
     "dayjs": "^1.10.4",
-    "plain-icons": "0.0.6",
-    "plain-utils": "^0.1.48",
+    "plain-icons": "0.0.7",
+    "plain-utils": "0.1.56",
     "react-flip-move": "^3.0.4",
     "react-transition-group": "^4.4.1"
   },
@@ -68,7 +69,7 @@
     "fork-ts-checker-webpack-plugin": "^6.2.4",
     "mini-css-extract-plugin": "^1.4.1",
     "mockjs": "^1.1.0",
-    "plain-design-composition": "^0.0.167",
+    "plain-design-composition": "^0.0.185",
     "postcss": "^8.2.13",
     "postcss-loader": "^4.2.0",
     "qs": "^6.10.1",

package/src/packages/build.ts

@@ -1,15 +1,7 @@
 import Plain from './index';
-// @ts-ignore
-import allIcons from 'plain-icons/dist/icons.js';
+import {installAllIcon} from "./utils/installAllIcons";
 
-// @ts-ignore
-Plain.Icon.PlainIcon.use.options.props.getIcon.default = (icon: string) => {
-  const iconMeta = (allIcons as any)[icon];
-  if (!iconMeta) {
-    throw new Error(`getIcon: can't find icon match ${icon}`);
-  }
-  return iconMeta;
-};
+installAllIcon();
 
 export * from './index';
 export default Plain;

package/src/packages/components/$object/createObjectService.tsx

@@ -19,23 +19,27 @@ import {ClientZoom} from "../../utils/ClientZoom";
 export function createObjectService(defaultConfig: iObjectServiceDefaultConfig) {
 
   const publicDialogOption: iDialogServiceOption = {
+    headAlign: 'left',
     title: i18n('base.selectData').d('选择数据'),
     confirmButton: true,
     cancelButton: true,
     maxHeight: ' ',
-    maxWidth: '60vw',
+    maxWidth: ' ',
+    width: '50vw'
   };
 
   function processShowRows(option: TableOptionSpace.iTableOption) {
-    const { clientHeight } = ClientZoom.getClientSize();
-    const availableHeight = clientHeight * 0.8 - 48 - 44 - 40 - 40 - 28;
-    const { bodyRowHeight } = getTableRowHeight(option.config.size, option.config);
-    const showRows = Math.floor(availableHeight / bodyRowHeight) - 1;
-
-    option.config.showRows = showRows;
-    option.pagination.state.size = option.config.showRows;
-    option.pagination.state.pageSizeOptions.indexOf(showRows) === -1 && (option.pagination.state.pageSizeOptions.unshift(showRows));
-    option.fill.state.showRows = showRows;
+    if (option.useConfig.showRows == null) {
+      const { clientHeight } = ClientZoom.getClientSize();
+      const availableHeight = clientHeight * 0.8 - 48 - 44 - 40 - 40 - 28;
+      const { bodyRowHeight } = getTableRowHeight(option.config.size, option.config);
+      const showRows = Math.floor(availableHeight / bodyRowHeight) - 1;
+
+      option.config.showRows = showRows;
+      option.pagination.state.size = option.config.showRows;
+      option.pagination.state.pageSizeOptions.indexOf(showRows) === -1 && (option.pagination.state.pageSizeOptions.unshift(showRows));
+      option.fill.state.showRows = showRows;
+    }
   }
 
   function processPermit(option: TableOptionSpace.iTableOption) {
@@ -92,7 +96,7 @@ export function createObjectService(defaultConfig: iObjectServiceDefaultConfig)
       },
     };
 
-    effects.push(
+    !serviceConfig.readonly && effects.push(
       config.option.hooks.onRenderColumns.use({
         processor: ({ list, render }) => {list.push({ render, key: 'object-check', seq: 0 });},
         render: () => (
@@ -101,16 +105,11 @@ export function createObjectService(defaultConfig: iObjectServiceDefaultConfig)
       })
     );
 
-    (!config.option.permission.permit.value.show.update || config.option.permission.permit.value.disabled.update) &&
-    effects.push(
-      config.option.hooks.onDblclickRow.use(async () => {
-        await delay();
-        handler.handleConfirm();
-      })
-    );
-
     const close = $dialog({
       ...publicDialogOption,
+      ...serviceConfig.dialogProps,
+      ...serviceConfig.readonly ? { confirmButton: false, cancelButton: false } : {},
+      title: serviceConfig.option.config.title || publicDialogOption.title,
       onClose: () => {effects.clear();},
       onOpen: () => config.option.methods.pageMethods.reload(),
       handleConfirm: handler.handleConfirm,
@@ -124,6 +123,14 @@ export function createObjectService(defaultConfig: iObjectServiceDefaultConfig)
       }
     });
 
+    !serviceConfig.readonly && (!config.option.permission.permit.value.show.update || config.option.permission.permit.value.disabled.update) &&
+    effects.push(
+      config.option.hooks.onDblclickRow.use(async () => {
+        await delay();
+        handler.handleConfirm();
+      })
+    );
+
     return dfd.promise;
   }
 
@@ -145,7 +152,7 @@ export function createObjectService(defaultConfig: iObjectServiceDefaultConfig)
       selected: (!config.selected ? undefined : deepcopy(convertRowToSelected(config.selected, config.map))) as undefined | PlainObject[]
     });
 
-    effects.push(
+    !serviceConfig.readonly && effects.push(
       config.option.hooks.onRenderColumns.use({
         processor: ({ list, render }) => {list.push({ render, key: 'object-check', seq: 0 });},
         render: () => (
@@ -155,7 +162,11 @@ export function createObjectService(defaultConfig: iObjectServiceDefaultConfig)
     );
 
     $dialog({
+      headAlign: 'left',
       ...publicDialogOption,
+      ...serviceConfig.dialogProps,
+      ...serviceConfig.readonly ? { confirmButton: false, cancelButton: false } : {},
+      title: serviceConfig.option.config.title || publicDialogOption.title,
       onClose: () => {effects.clear();},
       onOpen: () => config.option.methods.pageMethods.reload(),
       handleConfirm: async () => {

package/src/packages/components/$object/object.service.utils.ts

@@ -1,6 +1,8 @@
 import {PlainObject} from "plain-utils/utils/event";
 import {iObjectConverter} from "./object.conver";
 import {TableOptionSpace} from "../AutoTable/utils/TableOption.space";
+import {ComponentPropsType} from "plain-design-composition";
+import {Dialog} from "../Dialog";
 
 /**
  * 创建Object服务需要的默认的配置参数
@@ -17,9 +19,11 @@ export interface iObjectServiceDefaultConfig {
  * @date    2023.1.24 20:14
  */
 export interface iObjectServicePickPublicConfig extends Partial<iObjectServiceDefaultConfig> {
-  option: TableOptionSpace.iTableOption,                                                       // TableOption对象
-  map?: Record<string, string> | [iObjectConverter, iObjectConverter],         // 用来转化选中行与目标行对象的规则
-  beforeCancel?: () => void | boolean | Promise<void | boolean>,              // 取消之前的动作
+  option: TableOptionSpace.iTableOption,                                                        // TableOption对象
+  map?: Record<string, string> | [iObjectConverter, iObjectConverter],                          // 用来转化选中行与目标行对象的规则
+  beforeCancel?: () => void | boolean | Promise<void | boolean>,                                // 取消之前的动作
+  readonly?: boolean,                                                                           // 只读，不需要选择数据，只需要关闭
+  dialogProps?: Partial<ComponentPropsType<typeof Dialog>>                                       // dialog属性
 }
 
 /**

package/src/packages/components/$previewer/ImagePreviewerFixedContainer.tsx

@@ -0,0 +1,108 @@
+import {designComponent, getComponentCls, iHTMLDivElement, nextIndex, onBeforeUnmount, onMounted, PropType, reactive, useClasses, useRefs, useStyles} from "plain-design-composition";
+import {getCenterRect, iImagePreviewerOption, ImagePreviewerHooks} from "../ImagePreviewer/image-previewer.utils";
+import {ImagePreviewer} from "../ImagePreviewer";
+import {getRectAutoFormat} from "../../utils/getRectAutoFormat";
+import {unit} from "plain-utils/string/unit";
+import {createEffects} from "plain-utils/utils/createEffects";
+import {addElementListener} from "plain-utils/dom/addElementListener";
+import {delay} from "plain-utils/utils/delay";
+import './image-previewer-fixed-container.scss';
+
+export const ImagePreviewerFixedContainer = designComponent({
+  name: 'image-previewer-fixed-container',
+  props: {
+    option: { type: Object as PropType<iImagePreviewerOption>, required: true }
+  },
+  setup({ props }) {
+
+    const { refs, onRef } = useRefs({ el: iHTMLDivElement });
+
+    const state = reactive({
+      ready: false,
+    });
+
+    const classes = useClasses(() => [
+      getComponentCls('image-previewer-fixed-container')
+    ]);
+
+    const styles = useStyles(style => {style.zIndex = nextIndex();});
+
+    const { effects: setupEffects } = createEffects();
+
+    onMounted(async () => {
+      const containerWidth = Math.floor(refs.el!.offsetWidth);
+      const containerHeight = Math.floor(refs.el!.offsetHeight - props.option.galleryHeight - props.option.separatorHeight);
+      const containerRatio = Number((containerWidth / containerHeight).toFixed(1));
+
+      const imageElement = props.option.imageElement;
+
+      if (!imageElement) {
+        state.ready = true;
+        return;
+      }
+      /**
+       * 如果原始imageElement存在，则创建一个影子图片元素展示过度动画
+       * @author  韦胜健
+       * @date    2024/1/5 11:22
+       */
+      const shadowImageElement = imageElement.cloneNode(true) as HTMLImageElement;
+      const imageElementRect = getRectAutoFormat(imageElement);
+      props.option.oldSourceImageOpacity = imageElement.style.opacity;
+      imageElement.style.opacity = "0";
+
+      shadowImageElement.style.position = 'fixed';
+      shadowImageElement.style.top = unit(imageElementRect.top)!;
+      shadowImageElement.style.left = unit(imageElementRect.left)!;
+      shadowImageElement.style.width = unit(imageElementRect.width)!;
+      shadowImageElement.style.height = unit(imageElementRect.height)!;
+      shadowImageElement.style.transition = 'all ease 300ms';
+      shadowImageElement.style.zIndex = '999999';
+      shadowImageElement.style.objectFit = window.getComputedStyle(imageElement).objectFit
+
+      /*开启动画时阻止页面滚动*/
+      setupEffects.push(
+        addElementListener(shadowImageElement, 'wheel', e => {
+          e.preventDefault();
+          e.stopPropagation();
+        })
+      );
+
+      const newRect = getCenterRect({ containerElement: { containerHeight, containerWidth, containerRatio }, imageElement });
+
+      document.body.appendChild(shadowImageElement);
+      setupEffects.push(() => {document.body.removeChild(shadowImageElement);});
+      await delay();
+      shadowImageElement.style.top = unit(newRect.top.toFixed(0))!;
+      shadowImageElement.style.left = unit(newRect.left.toFixed(0))!;
+      shadowImageElement.style.height = unit(newRect.height.toFixed(0))!;
+      shadowImageElement.style.width = unit(newRect.width.toFixed(0))!;
+      const clearListener = addElementListener(shadowImageElement, 'transitionend', () => {
+        state.ready = true;
+        const clearHook = ImagePreviewerHooks.onImagePreviewerReady.use(async (data) => {
+          if (data.option.id !== props.option.id) {
+            return;
+          }
+          await delay();
+          clearHook();
+          setupEffects.clear();
+        });
+        setupEffects.push(clearHook);
+      });
+      setupEffects.push(clearListener);
+    });
+
+    onBeforeUnmount(setupEffects.clear);
+
+    return () => (
+      <div className={classes.value} ref={onRef.el}>
+        {state.ready && (
+          <ImagePreviewer
+            closable
+            option={props.option}
+            style={styles.value}
+          />
+        )}
+      </div>
+    );
+  },
+});

package/src/packages/components/$previewer/image-previewer-fixed-container.scss

@@ -0,0 +1,18 @@
+@include comp(image-previewer-fixed-container) {
+  position: fixed;
+  inset: 0;
+
+  @include comp(carousel) {
+    position: absolute;
+    top: 0;
+    right: 0;
+    left: 0;
+  }
+
+  .image-previewer-component-gallery {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+  }
+}

package/src/packages/components/$previewer/index.tsx

@@ -0,0 +1,52 @@
+import {reactive} from "plain-design-composition";
+import {createImagePreviewerOption, iImagePreviewerOption, iImagePreviewerParamOption} from "../ImagePreviewer/image-previewer.utils";
+import {ImagePreviewerFixedContainer} from "./ImagePreviewerFixedContainer";
+import {getDeviceInfo} from "../../utils/getDeviceInfo";
+
+/**
+ * 图片预览服务
+ * @author  韦胜健
+ * @date    2024/1/8 10:04
+ */
+export const $previewer = (() => {
+
+  const state = reactive({
+    /*有service option不同，image previewer同时只能显示一个*/
+    option: null as null | iImagePreviewerOption,
+  });
+
+  /**
+   * 大图查看图片
+   * @author  韦胜健
+   * @date    2024/1/5 11:22
+   */
+  const preview = async (param: iImagePreviewerParamOption, imageElement?: HTMLImageElement) => {
+
+    const isMobile = getDeviceInfo().deviceType === 'mobile';
+
+    state.option = createImagePreviewerOption(param, imageElement, {
+      autoHeight: false,
+      mask: true,
+      globalKeyboardEvent: true,
+      button: true,
+      ...isMobile ? {
+        gallery: false,
+        button: false,
+        swipeButton: false,
+        galleryHeight: 0,
+      } : {},
+    });
+  };
+
+  const close = (optionOrId: string | iImagePreviewerOption) => {
+    const optionId = typeof optionOrId === "string" ? optionOrId : optionOrId.id;
+    if (!!state.option && state.option.id === optionId) {state.option = null;}
+  };
+
+  const render = () => !!state.option && <ImagePreviewerFixedContainer option={state.option}/>;
+
+  return { preview, render, close };
+
+})();
+
+export default $previewer;

package/src/packages/components/Alert/alert.scss

@@ -7,12 +7,12 @@
 
   .alert-label {
     font-size: plv(font-size-small);
-    line-height: 1.5715;
+    line-height: plv(line-height);
   }
 
   .alert-desc {
     font-size: plv(font-size-small);
-    line-height: 1.5715;
+    line-height: plv(line-height);
   }
 
   &.alert-has-icon {
@@ -125,7 +125,7 @@
   &.alert-theme-deep {
     @include statusMixin(alert) {
       background-color: $color-6;
-      color: white;
+      color: plv(pbfc);
       .alert-close {
         &:hover {
           background-color: $color-8;

package/src/packages/components/Application/service/useApplicationService.tsx

@@ -2,6 +2,7 @@ import {getComponentCls, getCurrentDesignInstance, markRaw, onBeforeUnmount, Por
 import {defer, DFD} from 'plain-utils/utils/defer';
 import {createCounter} from "plain-utils/utils/createCounter";
 import {APPLICATION_SERVICE_CONTAINER_CLASS, ApplicationHooks} from "../utils/application.utils";
+import {$previewer} from "../../$previewer";
 
 /**
  * applications渲染manager数组的时候，给manager传递的 getManagerData函数的返回值类型
@@ -104,6 +105,7 @@ export function useApplicationService() {
       render: () => (
         <Portal to="body">
           <div className={getComponentCls(APPLICATION_SERVICE_CONTAINER_CLASS)}>
+            {$previewer.render()}
             {state.managers.map(({ getManagerData, RenderComponent, dfd, id }, index) => {
               return (
                 <RenderComponent

package/src/packages/components/Application/theme/theme.ts

@@ -75,6 +75,7 @@ function createOtherVars(prefix: string | null, referenceVariable: (name: string
     'background-hover': referenceVariable("gray-2"),
     'scrollbar-color': referenceVariable("gray-3"),
     'loading-mask-color': 'rgba(255,255,255,0.5)',
+    'line-height': 'plv(line-height)',
 
     'font-size-mini': '12px',
     'font-size-small': '12px',
@@ -128,9 +129,7 @@ function createOtherVars(prefix: string | null, referenceVariable: (name: string
     'dialog-foot-padding': '8px 16px',
     'dialog-head-size': '48px',
     /*---------------------------------------message-------------------------------------------*/
-    'message-padding': '12px 20px',
     'message-box-shadow': '0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05)',
-    'message-font-size': referenceVariable('font-size-normal'),
     /*---------------------------------------notice-------------------------------------------*/
     'notice-padding': '20px 24px',
     'notice-box-shadow': '0 3px 6px -4px rgba(0, 0, 0, .12), 0 6px 16px 0 rgba(0, 0, 0, .08), 0 9px 28px 8px rgba(0, 0, 0, .05)',
@@ -203,7 +202,7 @@ export function createThemeConfigurationData(prefix: string | null, config?: Dee
 
   const baseColorList: Record<tGenerateBaseColorList<iThemeBaseColors>, string> = (() => {
     const colors = {} as any;
-    Object.keys(BaseColors).forEach((colorName) => {
+    Object.keys(base).forEach((colorName) => {
       const baseColor = (base as any)[colorName];
       if (!baseColor) {return;}
       ThemeColorNum.forEach(i => {
@@ -232,6 +231,7 @@ export function createThemeConfigurationData(prefix: string | null, config?: Dee
       ...secondaryColorList,
       ...createGrayColors(dark, false),
       ...createGrayColors(dark, true),
+      ...base.primary === '#ffffff' ? { 'pbfc': 'black' } : { 'pbfc': 'white' },
       ...dark ? {
         'background-hover': '#3c3c4d',
         'scrollbar-color': '#141414',

package/src/packages/components/ArrowStepGroup/arrow-step.scss

@@ -32,7 +32,7 @@
       align-items: center;
       justify-content: center;
       padding: 0 16px;
-      color: white;
+      color: plv(pbfc);
     }
 
     .#{componentName(triangle)} {
@@ -73,7 +73,7 @@
     &.arrow-step-status-process, &.arrow-step-status-finish {
       .arrow-step-content {
         background-color: plv(primary-6);
-        color: white;
+        color: plv(pbfc);
       }
 
       .#{componentName(triangle)} {
@@ -84,7 +84,7 @@
     &.arrow-step-status-success {
       .arrow-step-content {
         background-color: plv(success-6);
-        color: white;
+        color: plv(pbfc);
       }
 
       .#{componentName(triangle)} {
@@ -95,7 +95,7 @@
     &.arrow-step-status-error {
       .arrow-step-content {
         background-color: plv(error-6);
-        color: white;
+        color: plv(pbfc);
       }
 
       .#{componentName(triangle)} {

package/src/packages/components/AutoTable/filter/useTableOption.filter.form.tsx

@@ -171,6 +171,7 @@ export const useTableOptionFilterForm = AutoModule.createRegistration((
         initialState={state.data}
         onSearch={handler.onNormalSearch}
         column={config.filterFormColumn}
+        searchButtonAttrs={{ mode: 'flat' }}
         v-slots={{
           operation: () => (
             <Button label={i18n('base.collapse').d('收起')} icon="pi-shrink" onClick={methods.toggleShow}/>

package/src/packages/components/AutoTable/use/useTableOption.methods.tsx

@@ -161,6 +161,7 @@ export const useTableOptionMethods = AutoModule.createRegistration((
       }
     };
     const reload = async (reloadParam?: { size?: number }) => {
+      if (!state.isInit) {state.isInit = true;}
       await load({
         page: 1,
         size: reloadParam?.size,
@@ -488,6 +489,7 @@ export const useTableOptionMethods = AutoModule.createRegistration((
   })();
 
   hooks.onTableSetup.use(() => {
+    if (state.isInit) {return;}
     if (config.loadOnStart !== false) {pageMethods.reload();}
   });
 

package/src/packages/components/AutoTable/use/useTableOption.state.tsx

@@ -14,6 +14,7 @@ declare module '../utils/TableOption.space' {
 
 export const useTableOptionState = AutoModule.createRegistration(({ config, hooks }) => {
   const state: TableOptionSpace.iTableOptionState = reactive({
+    isInit: false,
     getTable: () => null,
     getAutoTable: () => null,
     list: [],

package/src/packages/components/AutoTable/use/useTableOption.table.tsx

@@ -5,7 +5,7 @@ import {PlainObject} from "plain-utils/utils/event";
 import '../utils/TableOption.space';
 import {PlcIndex} from "../../Table/standard/PlcIndex";
 import {AutoModule} from "../utils/AutoModule";
-import {iMouseEvent} from "plain-design-composition";
+import {Fragment, iMouseEvent} from "plain-design-composition";
 
 declare module '../utils/TableOption.space' {
   namespace TableOptionSpace {
@@ -46,8 +46,8 @@ export const useTableOptionTable = AutoModule.createRegistration((
   hooks.onRenderColumns.use({
     processor: ({ list, render }) => {list.push({ key: 'index', seq: 0, render });},
     render: () => <>
-      {config.indexing != false && <PlcIndex start={(pagination.state.page - 1) * pagination.state.size}/>}
-      {render.default()}
+      {config.indexing != false && <PlcIndex start={(pagination.state.page - 1) * pagination.state.size} key="key_standard_index"/>}
+      <Fragment key="key_option_render">{render.default()}</Fragment>
     </>
   });
 

package/src/packages/components/AutoTable/utils/TableOption.space.tsx

@@ -50,6 +50,7 @@ export namespace TableOptionSpace {
    * @date    2022.12.20 10:47
    */
   export interface iTableOptionCustomConfig {
+    title?: string,                                                     // 表格标题
     url?: iUrl,                                                         // 请求配置
     data?: any[],                                                       // 默认数据
     fill?: boolean,                                                     // 是否自动计算高度
@@ -118,6 +119,7 @@ export namespace TableOptionSpace {
    * @date    2023/2/7 9:47
    */
   export interface iTableOptionState {
+    isInit: boolean,
     getTable: () => null | iTableRefer,
     getAutoTable: () => null | iAutoTableRefer;
     list: PlainObject[],
@@ -160,6 +162,8 @@ export namespace TableOptionSpace {
    */
   export interface iTableOption {
     config: iTableOptionConfig;
+    useConfig: iTableOptionUseConfig,
+    defaultConfig: iTableOptionDefaultConfig,
     clone: iTableOptionClone;
   }
 

package/src/packages/components/Badge/badge.scss

@@ -18,7 +18,7 @@
     @include statusMixin(badge-content) {
       background-color: $color-6;
       border-radius: 100px;
-      color: white;
+      color: plv(pbfc);
     }
 
     &.badge-content-top {

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

@@ -7,7 +7,7 @@
   outline: none;
   position: relative;
   text-align: center;
-  line-height: 1.5715;
+  line-height: plv(line-height);
   white-space: nowrap;
   display: inline-block;
   user-select: none;
@@ -37,7 +37,7 @@
     @include statusMixin(button) {
       background-color: $color-6;
       border-color: $color-6;
-      color: white;
+      color: plv(pbfc);
       @include hover(button) {
         background-color: $color-4;
         border-color: $color-4;

package/src/packages/components/Card/card.scss

@@ -48,7 +48,7 @@
     width: 100%;
     color: plv(text-2);
     padding: 9px 12px;
-    line-height: 1.5715;
+    line-height: plv(line-height);
   }
 
   .card-poster {