plain-design 1.0.0-beta.46 → 1.0.0-beta.48

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "plain-design",
-  "version": "1.0.0-beta.46",
+  "version": "1.0.0-beta.48",
   "description": "",
   "main": "dist/plain-design.min.js",
   "module": "dist/plain-design.commonjs.min.js",
@@ -34,7 +34,7 @@
     "color": "4.2.3",
     "dayjs": "1.11.10",
     "plain-icons": "0.0.7",
-    "plain-utils": "0.1.57",
+    "plain-utils": "^0.1.58",
     "react-flip-move": "3.0.5",
     "react-transition-group": "4.4.5"
   },
@@ -42,7 +42,7 @@
     "@babel/plugin-proposal-optional-chaining": "7.21.0",
     "@babel/plugin-transform-class-properties": "7.23.3",
     "@babel/preset-env": "7.23.7",
-    "@babel/preset-react":"7.23.3",
+    "@babel/preset-react": "7.23.3",
     "@babel/preset-typescript": "7.23.3",
     "@types/classnames": "^2.2.11",
     "@types/react": "18.2.4",

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

@@ -23,6 +23,7 @@ export function createObjectService(defaultConfig: iObjectServiceDefaultConfig)
     title: i18n('base.selectData').d('选择数据'),
     confirmButton: true,
     cancelButton: true,
+    noContentPadding: true,
     maxHeight: ' ',
     maxWidth: ' ',
     width: '50vw'

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

@@ -4,13 +4,15 @@ import {DeepPartial} from "../../utils/type";
 import './application.scss';
 import {useApplicationService} from "./service/useApplicationService";
 import {createThemeConfigurationData} from "./theme/theme";
-import {ThemeShape, ThemeSize} from "../../uses/useStyle";
+import {InputMode, ThemeMode, ThemeShape, ThemeSize} from "../../uses/useStyle";
 import {useApplicationPopup} from "../usePopup/usePopupManager";
 
 export const Application = designComponent({
   name: 'application',
   props: {
-    configuration: { type: Object as PropType<DeepPartial<iApplicationConfiguration>>, }
+    configuration: { type: Object as PropType<DeepPartial<iApplicationConfiguration>>, },
+    defaultInputMode: { type: String as PropType<typeof InputMode.TYPE>, default: InputMode.flat },
+    defaultButtonMode: { type: String as PropType<typeof ThemeMode.TYPE>, default: ThemeMode.stroke },
   },
   slots: ['default'],
   setup({ props, slots }) {
@@ -21,7 +23,8 @@ export const Application = designComponent({
       default: {
         size: ThemeSize.normal,
         shape: ThemeShape.square,
-        inputMode: 'flat',
+        inputMode: props.defaultInputMode,
+        buttonMode: props.defaultButtonMode,
         ...props.configuration?.default,
       },
     }));

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

@@ -131,10 +131,10 @@ function createOtherVars(prefix: string | null, referenceVariable: (name: string
     'box-size-normal-font-size': referenceVariable('font-size-normal'),
     'box-size-large-font-size': referenceVariable('font-size-normal'),
     /*border radius of sizes*/
-    'box-size-mini-border-radius': '4px',
+    'box-size-mini-border-radius': '2px',
     'box-size-small-border-radius': '4px',
-    'box-size-normal-border-radius': '4px',
-    'box-size-large-border-radius': '4px',
+    'box-size-normal-border-radius': '6px',
+    'box-size-large-border-radius': '8px',
     /*---------------------------------------input-------------------------------------------*/
     'input-padding-x-mini': '9px',
     'input-padding-x-small': '11px',

package/src/packages/components/Application/utils/application.utils.ts

@@ -1,13 +1,14 @@
 import {ComputedRef, createRenderHook, inject, provide} from "plain-design-composition";
 import {iThemeConfiguration} from "../theme/theme";
-import {ThemeShape, ThemeSize} from "../../../uses/useStyle";
+import {InputMode, ThemeMode, ThemeShape, ThemeSize} from "../../../uses/useStyle";
 
 export interface iApplicationConfiguration {
   theme: iThemeConfiguration;
   default: {
     size: typeof ThemeSize.TYPE,
     shape: typeof ThemeShape.TYPE,
-    inputMode: 'flat' | 'stroke',
+    inputMode: typeof InputMode.TYPE,
+    buttonMode: typeof ThemeMode.TYPE,
   },
 }
 

package/src/packages/components/AutoTable/AutoTable.tsx

@@ -48,7 +48,7 @@ export const AutoTable = designComponent({
       refer,
       render: () => (
         <div className={classes.value} ref={onRefEl as any}>
-          {props.option.hooks.onTableRender.exec()}
+          {props.option.hooks.onTableOuterRender.exec()}
         </div>
       ),
     };

package/src/packages/components/AutoTable/auto-table.scss

@@ -2,6 +2,7 @@
   position: relative;
 
   @include sizeMixin(auto-table, (font-size)) {
+
     .table-operation-bar {
       .table-operation-bar-left {
         @include comp(input-group) {
@@ -18,48 +19,13 @@
       margin-bottom: $margin;
     }
 
-    .#{componentName(filter-form-multiple)} {
-      /*      & + div {
-              position: relative;
-
-              &:before {
-                position: absolute;
-                left: calc(#{$margin} * -1);
-                right: calc(#{$margin} * -1);
-                bottom: calc(100% + #{$margin});
-                height: $margin;
-                background-color: plv(bg-1);
-                content: '';
-              }
-            }*/
-    }
-
-    .auto-table-filter-form-separator {
-      background-color: plv(bg-1);
-      margin: calc(#{$margin} - #{$border-radius}) calc(#{$margin} * -1);
-      height: calc(#{$margin} + #{$border-radius} * 2);
-      position: relative;
-
-      &:before {
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        height: $border-radius;
-        background-color: plv(bg-2);
-        content: '';
-        border-radius: $border-radius;
-      }
+    & > div {
+      padding: $margin;
+      background-color: plv(background-color);
+      border-radius: $border-radius;
 
-      &:after {
-        position: absolute;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        height: $border-radius;
-        background-color: plv(bg-2);
-        content: '';
-        border-radius: $border-radius;
+      & + div {
+        margin-top: $margin;
       }
     }
   }
@@ -78,6 +44,7 @@
       cursor: pointer;
     }
   }
+
   .table-operation-bar {
     position: relative;
     /*virtual-table-head-table-wrapper的z-index是4*/

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

@@ -159,27 +159,23 @@ export const useTableOptionFilterForm = AutoModule.createRegistration((
     if (state.show) {list.push('filter-form-expanded');}
   });
 
-  hooks.onTableRender.use({
-    processor: ({ list, render }) => {list.push({ seq: 3.5, key: 'form-filter', render, });},
+  hooks.onTableOuterRender.use({
+    processor: ({ list, render }) => {list.push({ seq: 0, key: 'form-filter', render, });},
     render: () => (
       !!filterOptions.value &&
       filterOptions.value.length > 0 &&
-      state.show && <>
-        <FilterFormMultiple
-          ref={onRef.filter}
-          filterOptions={filterOptions.value!}
-          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}/>
-            )
-          }}
-        />
-        <div className="auto-table-filter-form-separator"/>
-      </>
+      state.show && <FilterFormMultiple
+        ref={onRef.filter}
+        filterOptions={filterOptions.value!}
+        initialState={state.data}
+        onSearch={handler.onNormalSearch}
+        column={config.filterFormColumn}
+        v-slots={{
+          operation: () => (
+            <Button label={i18n('base.collapse').d('收起')} icon="pi-shrink" onClick={methods.toggleShow}/>
+          )
+        }}
+      />
     ),
   });
 

package/src/packages/components/AutoTable/use/useTableOption.column.popper.tsx

@@ -259,6 +259,7 @@ export const useTableOptionColumnPopper = AutoModule.createRegistration((
           size: config.size,
           confirmButton: true,
           cancelButton: true,
+          noContentPadding: true,
           handleConfirm: () => {onConfirm(field, openState.data);},
           render: () => {
             return (

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

@@ -29,7 +29,8 @@ export const useTableOptionHooks = AutoModule.createRegistration(() => {
     onRefAutoTableEl: createHooks<(el: HTMLDivElement | null) => void>(), // AutoTable el引用
     onTableSetup: createSyncHooks<() => void>(),          // AutoTable初始化
     onTableDestroy: createSyncHooks<() => void>(),        // AutoTable销毁
-    onTableRender: createRenderHook(),                    // AutoTable渲染主体内容
+    onTableOuterRender: createRenderHook(),               // AutoTable渲染外部内容
+    onTableRender: createRenderHook(),                    // AutoTable渲染内部内容
     onTableClass: createSyncHooks<(list: any[]) => void>(),// AutoTable计算class
     onRefBaseTable: createHooks<(refer: iTableRefer | null) => void>(),// 获取base table的引用
     onBaseTableSetup: createSyncHooks<(refer: iTableRefer) => void>(), // basic table初始化动作
@@ -128,5 +129,12 @@ export const useTableOptionHooks = AutoModule.createRegistration(() => {
     onAfterBatchUpsert: createHooks<(responseData: iUrlResponseData['batchInsert'] | iUrlResponseData['batchUpdate']) => void>(),
   };
   const hooks = _hooks as typeof _hooks & TableOptionSpace.iTableOptionHooks;
+
+  hooks.onTableOuterRender.use({
+    separate: false,
+    processor: ({ list, render }) => {list.push({ render, key: 'table-render', seq: 1 });},
+    render: () => (<div className="auto-table-body">{hooks.onTableRender.exec()}</div>),
+  });
+
   return hooks;
 });

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

@@ -11,6 +11,7 @@
   white-space: nowrap;
   display: inline-block;
   user-select: none;
+  z-index: 1;
 
   @include public-style;
 
@@ -108,6 +109,33 @@
     }
   }
 
+  &.button-mode-stroke {
+    @include statusMixin(button) {
+      background-color: transparent;
+      border-color: plv(secondary-light-3);
+      color: plv(text-2);
+
+      @include active(button) {
+        border-color: $color-6;
+        color: $color-6;
+      }
+
+      &:not(.button-disabled):hover {
+        border-color: $color-6;
+        color: $color-6;
+      }
+
+      &.button-disabled {
+        border-color: $color-2;
+        color: $color-2;
+      }
+    }
+
+    &:after {
+      //display: none !important;
+    }
+  }
+
   &.button-mode-text {
     padding: 0;
     min-width: initial;
@@ -168,4 +196,8 @@
   & > span + .#{componentName(icon)} {
     margin-left: 4px;
   }
+
+  &:hover {
+    z-index: 4;
+  }
 }

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

@@ -53,7 +53,7 @@ export const Button = designComponent({
     });
 
     const group = ButtonGroup.use.inject(null);
-    const mode = computed(() => props.mode || group?.props.mode || 'flat');
+    const mode = computed(() => props.mode || group?.props.mode || styleComputed.value.default.buttonMode);
     const status = computed(() => styleComputed.value.status || (mode.value === ThemeMode.flat ? ThemeStatus.secondary : ThemeStatus.primary));
 
     const state = reactive({

package/src/packages/components/ButtonGroup/button-group.scss

@@ -25,8 +25,8 @@
           }
         }
 
-        &.button-mode-outline {
-          border-right-color: transparent;
+        & + .button-mode-outline, & + .button-mode-stroke {
+          margin-left: -1px;
         }
       }
     }

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

@@ -12,7 +12,7 @@ export const ButtonGroup = designComponent({
   props: {
     ...EditProps,
     ...StyleProps,
-    mode: { type: String as PropType<typeof ThemeMode.TYPE>, default: ThemeMode.flat },         // 按钮类型：fill填充，flat扁平，outline线性以及text文字
+    mode: { type: String as PropType<typeof ThemeMode.TYPE> },                                  // 按钮类型：fill填充，flat扁平，outline线性以及text文字
     vertical: { type: Boolean },                                                                // 按钮组方向
   },
   slots: ['default'],

package/src/packages/components/Checkbox/checkbox.scss

@@ -51,6 +51,10 @@
 
   @include sizeMixin(checkbox, (font-size)) {
     line-height: 1.7em;
+
+    .plain-click-node {
+      border-radius: $border-radius;
+    }
   }
 
   &:focus {

package/src/packages/components/FilterFormMultiple/filter-form-multiple.scss

@@ -6,6 +6,16 @@
     .form-inner {
       width: 100%;
     }
+
+    @include sizeMixin(form, ()) {
+      .filter-form-multiple-operation {
+        @include comp(button) {
+          & + button {
+            margin-left: $margin;
+          }
+        }
+      }
+    }
   }
 
   .filter-form-multiple-first-column {

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

@@ -264,7 +264,6 @@ export const FilterFormMultiple = designComponent({
                     <Button
                       {...mergeAttrs({
                         label: i18n('base.query').d('查询'),
-                        mode: "fill",
                         icon: "pi-search",
                         onClick: methods.search,
                       }, props.searchButtonAttrs)}

package/src/packages/components/Input/input.utils.ts

@@ -1,7 +1,7 @@
 import {tInputHooks} from "./uses/useInputHooks";
 import {ComponentEvent, ExtractPropTypes, iMouseEvent, PropType, SimpleFunction, tRefs, tSlotsType} from "plain-design-composition";
 import {createError} from "../../utils/createError";
-import {StyleProps, tStyleComputed} from "../../uses/useStyle";
+import {InputMode, StyleProps, tStyleComputed} from "../../uses/useStyle";
 import {EditProps, tEditComputed} from "../../uses/useEdit";
 import {iSelectOptionProps} from "../Select/select.utils";
 
@@ -11,7 +11,7 @@ export const InputPropsOption = {
 
   /*public*/
   type: { type: String },                                                       // input type
-  mode: { type: String as PropType<'flat' | 'stroke'> },                        // input的样式类型,flat填充，stroke线型
+  mode: { type: String as PropType<typeof InputMode.TYPE> },                    // input的样式类型,flat填充，stroke线型
   modelValue: {},                                                               // 输入框双向绑定值
   placeValue: {},                                                               // 与modelValue一起判断当前是否有值
   isFocus: { type: Boolean },                                                   // 当前是否为获取焦点的状态

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

@@ -0,0 +1,22 @@
+import {designComponent} 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();
+
+    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/index.tsx

@@ -1,6 +1,6 @@
 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";
 
@@ -10,7 +10,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,6 +20,7 @@ export const PageThemeUtils = (() => {
     size: sizeCache.get(),
     shape: shapeCache.get(),
     inputMode: inputModeCache.get(),
+    buttonMode: buttonModeCache.get(),
     zoom: zoomCache.get(),
   });
 
@@ -28,7 +30,7 @@ export const PageThemeUtils = (() => {
     if (!config.theme.base) {config.theme.base = {};}
     if (!config.theme.vars) {config.theme.vars = {};}
 
-    let { dark, primaryKey, size, shape, inputMode, zoom } = state;
+    let { dark, primaryKey, size, shape, inputMode, buttonMode, zoom } = state;
 
     config.theme.dark = !!dark;
 
@@ -99,6 +101,9 @@ export const PageThemeUtils = (() => {
     if (!!inputMode) {
       config.default.inputMode = inputMode;
     }
+    if (!!buttonMode) {
+      config.default.buttonMode = buttonMode;
+    }
     return config;
   });
 
@@ -122,16 +127,26 @@ export const PageThemeUtils = (() => {
     shapeCache.set(val);
   };
 
-  const inputMode = (val: 'flat' | 'stroke' | null) => {
+  const inputMode = (val: typeof InputMode.TYPE | null) => {
     state.inputMode = val;
     inputModeCache.set(val);
   };
 
+  const buttonMode = (val: typeof ThemeMode.TYPE | null) => {
+    state.buttonMode = val;
+    buttonModeCache.set(val);
+  };
+
   const zoom = (val: number | null) => {
     state.zoom = val;
     zoomCache.set(val);
   };
 
+  const clear = () => {
+    window.localStorage.clear();
+    window.location.reload();
+  };
+
   return {
     configuration,
     toggle,
@@ -140,7 +155,9 @@ export const PageThemeUtils = (() => {
     size,
     shape,
     inputMode,
+    buttonMode,
     zoom,
+    clear,
   };
 })();
 

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];
       }

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

@@ -41,7 +41,8 @@
     box-sizing: border-box;
 
     &:hover {
-      background-color: plv(primary-2)
+      border-color: plv(primary-6);
+      color: plv(primary-6);
     }
 
     &:active, &.pagination-pager-button-active {

package/src/packages/components/Table/table/Table.tsx

@@ -236,6 +236,7 @@ export const Table = designComponent({
     /*---------------------------------------内置hooks-------------------------------------------*/
 
     hooks.onRender.use({
+      separate: false,
       processor: ({ list, render }) => {!bodyNodes.value.length && list.push({ render, key: 'empty', seq: 4 });},
       render: () => (
         <div className="table-empty">

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

@@ -9,6 +9,7 @@ import PageThemeUtils, {ThemePrimaryColors} from "../PageThemeUtils";
 import ClientZoom from "../ClientZoom";
 import {addWindowListener} from 'plain-utils/dom/addWindowListener';
 import i18n from "../i18n";
+import Button from "../Button";
 
 export const ThemeEditor = designComponent({
   name: 'theme-editor',
@@ -28,6 +29,7 @@ export const ThemeEditor = designComponent({
       zoom: PageThemeUtils.state.zoom || null,
       primaryKey: PageThemeUtils.state.primaryKey as string || 'default',
       inputMode: PageThemeUtils.state.inputMode || 'flat',
+      buttonMode: PageThemeUtils.state.buttonMode || 'flat',
     });
 
     const applicationConfiguration = ApplicationConfigurationProvider.inject();
@@ -64,6 +66,7 @@ export const ThemeEditor = designComponent({
       },
       onPrimaryChange: () => {PageThemeUtils.primary(state.primaryKey);},
       onInputModeChange: () => {PageThemeUtils.inputMode(state.inputMode);},
+      onButtonModeChange: () => {PageThemeUtils.buttonMode(state.buttonMode);},
     };
 
     const publicPopperAttrs = {};
@@ -96,6 +99,19 @@ export const ThemeEditor = designComponent({
               </div>
             </div>
 
+            <div>
+              <div>{i18n('theme.buttonMode').d('按钮类型')}</div>
+              <div>
+                <Select v-model={state.buttonMode} onChange={handler.onButtonModeChange} size="mini" popperAttrs={publicPopperAttrs}>
+                  <SelectOption label={i18n('theme.buttonModeFlat').d('扁平')} val="flat"/>
+                  <SelectOption label={i18n('theme.buttonModeFill').d('填充')} val="fill"/>
+                  <SelectOption label={i18n('theme.buttonModeOutline').d('线框')} val="outline"/>
+                  <SelectOption label={i18n('theme.buttonModeStroke').d('描边')} val="stroke"/>
+                  <SelectOption label={i18n('theme.buttonModeText').d('文字')} val="text"/>
+                </Select>
+              </div>
+            </div>
+
             <div>
               <div>{i18n('theme.primaryColor').d('主题颜色')}</div>
               <div>
@@ -165,6 +181,13 @@ export const ThemeEditor = designComponent({
                 <SelectOption label="2.0" val={2.0}/>
               </Select>
             </div>
+
+            <div>
+              <div>&nbsp;</div>
+              <Button block size="mini" label={i18n('theme.reset').d('重置')} onClick={() => {
+                PageThemeUtils.clear();
+              }}/>
+            </div>
           </div>
         )}
       </div>

package/src/packages/components/ThemeEditor/theme-editor.scss

@@ -45,7 +45,7 @@
 
   &.is-expand {
     width: 300px;
-    height: 260px;
+    height: 330px;
     border-top-left-radius: plv(box-size-normal-border-radius);
     border-bottom-left-radius: plv(box-size-normal-border-radius);
 

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

@@ -0,0 +1,3 @@
+export function usePageRender() {
+
+}

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

@@ -0,0 +1,8 @@
+import {createRenderHook} from "plain-design-composition";
+
+export function usePageRenderContext() {
+  const renderHook = createRenderHook();
+  return {
+    renderHook,
+  };
+}

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

@@ -248,6 +248,12 @@ export const EnUsLocale: tZhCnLocale = {
     inputMode: 'INPUT MODE',
     inputModeFlat: 'flat',
     inputModelStroke: 'stroke',
+    buttonMode: 'BUTTON MODE',
+    buttonModeFlat: 'flat',
+    buttonModeFill: 'fill',
+    buttonModeOutline: 'outline',
+    buttonModeStroke: 'stroke',
+    buttonModeText: 'text',
     primaryColor: 'PRIMARY COLOR',
     size: 'SIZE',
     sizeLarge: 'large',
@@ -261,7 +267,8 @@ export const EnUsLocale: tZhCnLocale = {
     radiusModeRound: 'round',
     radiusModeNormal: 'filet',
     radiusModeNone: 'none',
-    scale: 'SCALE'
+    scale: 'SCALE',
+    reset: 'RESET',
   },
   colorName: {
     默认主题: 'Default',