plain-design 1.0.0-beta.45 → 1.0.0-beta.47

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "plain-design",
-  "version": "1.0.0-beta.45",
+  "version": "1.0.0-beta.47",
   "description": "",
   "main": "dist/plain-design.min.js",
   "module": "dist/plain-design.commonjs.min.js",

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

@@ -5,12 +5,22 @@ import {clearFields} from "../../../utils/clearFields";
 
 /*默认的基础色*/
 export const BaseColors = {
-  gray: '',
-  secondary: '',
-  primary: '#452feb',
-  success: '#00b42a',
-  warn: '#ff7d00',
-  error: '#f53f3f',
+  dark: {
+    gray: '',
+    secondary: '',
+    primary: '#5e53ff',
+    success: '#00b42a',
+    warn: '#ff7d00',
+    error: '#f53f3f',
+  },
+  light: {
+    gray: '',
+    secondary: '',
+    primary: '#452feb',
+    success: '#00b42a',
+    warn: '#ff7d00',
+    error: '#f53f3f',
+  },
 };
 
 /*基础的灰色*/
@@ -121,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': '2px',
-    'box-size-small-border-radius': '2px',
-    'box-size-normal-border-radius': '2px',
-    'box-size-large-border-radius': '2px',
+    'box-size-mini-border-radius': '4px',
+    'box-size-small-border-radius': '4px',
+    'box-size-normal-border-radius': '4px',
+    'box-size-large-border-radius': '4px',
     /*---------------------------------------input-------------------------------------------*/
     'input-padding-x-mini': '9px',
     'input-padding-x-small': '11px',
@@ -137,8 +147,8 @@ function createOtherVars(prefix: string | null, referenceVariable: (name: string
     'input-clear-size-large': '23px',
     /*---------------------------------------dialog-------------------------------------------*/
     'dialog-mask-color': 'rgba(0,0,0,0.3)',
-    'dialog-head-padding-x': '20px',
-    'dialog-body-padding': '16px 20px',
+    'dialog-head-padding-x': '16px',
+    'dialog-body-padding': '16px 16px',
     'dialog-foot-padding': '8px 16px',
     'dialog-head-size': '48px',
     /*---------------------------------------message-------------------------------------------*/
@@ -190,7 +200,7 @@ function createOtherVars(prefix: string | null, referenceVariable: (name: string
 }
 
 /*基础色*/
-type iThemeBaseColors = keyof typeof BaseColors
+type iThemeBaseColors = keyof typeof BaseColors.dark
 /*其他主题变量*/
 type iThemeOtherVars = keyof ReturnType<typeof createOtherVars>
 /*基础色衍生的变量*/
@@ -205,7 +215,7 @@ export interface iThemeConfiguration {
 
 export function createThemeConfigurationData(prefix: string | null, config?: DeepPartial<iThemeConfiguration>): iThemeConfiguration {
   const dark = config?.dark == undefined ? false : config.dark;
-  const base = { ...BaseColors, ...clearFields(config?.base) };
+  const base = { ...dark ? BaseColors.dark : BaseColors.light, ...clearFields(config?.base) };
   const referenceVariable = (varName: string): string => `var(--${!!prefix ? prefix + '-' : ''}${varName})`;
 
   const baseColorList: Record<tGenerateBaseColorList<iThemeBaseColors>, string> = (() => {

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

@@ -12,6 +12,56 @@
         }
       }
     }
+
+    .#{componentName(auto-table-tips)} .auto-table-tips-item {
+      margin-top: $margin;
+      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;
+      }
+
+      &:after {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        height: $border-radius;
+        background-color: plv(bg-2);
+        content: '';
+        border-radius: $border-radius;
+      }
+    }
   }
 
   .virtual-table-head-table {
@@ -82,12 +132,12 @@
   .auto-table-tips-item {
     display: inline-flex;
     align-items: center;
-    font-size: inherit;
-    background-color: plv(primary-light-1);
-    border: solid 1px plv(primary-2);
-    color: plv(primary-6);
+    font-size: 12px;
+    background-color: plv(bg-2);
+    border: solid 1px plv(border-color);
+    color: plv(text-2);
     cursor: pointer;
-    margin: 4px 8px 4px 0;
+    margin-right: 8px;
     height: 1.8em;
     overflow: hidden;
     border-radius: plv(box-size-small-border-radius);
@@ -99,7 +149,7 @@
       text-overflow: ellipsis;
       white-space: nowrap;
       position: relative;
-      padding: 0 4px;
+      padding: 0 0 0 4px;
 
       &:hover {
         text-decoration: underline;
@@ -112,15 +162,16 @@
       transition: background-color linear 300ms;
 
       &:hover {
-        background-color: plv(primary-2);
+        background-color: plv(secondary-2);
       }
     }
 
-    .auto-table-tips-separator {
-      width: 1px;
-      align-self: stretch;
-      background-color: plv(primary-2);
-    }
+    /*    & + .#{componentName(button)} {
+          @include comp(icon) {
+            position: relative;
+            top: 2px;
+          }
+        }*/
   }
 }
 

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

@@ -160,24 +160,26 @@ export const useTableOptionFilterForm = AutoModule.createRegistration((
   });
 
   hooks.onTableRender.use({
-    processor: ({ list, render }) => {list.push({ seq: 4.5, key: 'form-filter', render, });},
+    processor: ({ list, render }) => {list.push({ seq: 3.5, 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}/>
-          )
-        }}
-      />
+      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"/>
+      </>
     ),
   });
 

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

@@ -79,6 +79,7 @@ export const useTableOptionButtons = AutoModule.createRegistration((
     {
       label: i18n('table.formEdit').d('表单编辑'),
       position: 'outer',
+      dropdown:true,
       type: 'update',
       code: 'outer-update',
       icon: 'pi-edit',
@@ -88,6 +89,7 @@ export const useTableOptionButtons = AutoModule.createRegistration((
     {
       label: i18n('table.batchCreate').d('批量新建'),
       position: 'outer',
+      dropdown:true,
       type: 'insert',
       code: 'outer-batch-insert',
       icon: 'pi-plus',
@@ -97,6 +99,7 @@ export const useTableOptionButtons = AutoModule.createRegistration((
     {
       label: i18n('table.batchEdit').d('批量编辑'),
       position: 'outer',
+      dropdown:true,
       type: 'update',
       code: 'outer-batch-update',
       icon: 'pi-save',
@@ -106,6 +109,7 @@ export const useTableOptionButtons = AutoModule.createRegistration((
     {
       label: i18n('table.batchDelete').d('批量删除'),
       position: 'outer',
+      dropdown:true,
       type: 'delete',
       code: 'outer-batch-delete',
       icon: 'pi-eraser',
@@ -115,6 +119,7 @@ export const useTableOptionButtons = AutoModule.createRegistration((
     {
       label: i18n('table.batchModify').d('批量修改'),
       position: 'outer',
+      dropdown:true,
       type: 'update',
       code: 'outer-batch-modify',
       icon: 'pi-mind-mapping',
@@ -124,6 +129,7 @@ export const useTableOptionButtons = AutoModule.createRegistration((
     {
       label: i18n('table.allFilter').d('所有筛选'),
       position: 'outer',
+      dropdown:true,
       type: 'other',
       code: 'all-filters',
       icon: 'pi-filter',
@@ -133,6 +139,7 @@ export const useTableOptionButtons = AutoModule.createRegistration((
     {
       label: i18n('table.seniorFilter').d('高级筛选'),
       position: 'outer',
+      dropdown:true,
       type: 'other',
       code: 'senior-filters',
       icon: 'pi-find-replace',
@@ -142,6 +149,7 @@ export const useTableOptionButtons = AutoModule.createRegistration((
     {
       label: i18n('table.seniorSort').d('高级排序'),
       position: 'outer',
+      dropdown:true,
       type: 'other',
       code: 'senior-sort',
       icon: 'pi-sort-ascending',
@@ -151,6 +159,7 @@ export const useTableOptionButtons = AutoModule.createRegistration((
     {
       label: i18n('table.customSetting').d('个性设置'),
       position: 'outer',
+      dropdown:true,
       type: 'other',
       code: 'custom-setting',
       icon: 'pi-settings',
@@ -160,6 +169,7 @@ export const useTableOptionButtons = AutoModule.createRegistration((
     {
       label: i18n('table.cacheSetting').d('缓存设置'),
       position: 'outer',
+      dropdown:true,
       type: 'other',
       code: 'cache-setting',
       icon: 'pi-layers',
@@ -169,6 +179,7 @@ export const useTableOptionButtons = AutoModule.createRegistration((
     {
       label: i18n('table.importData').d('导入数据'),
       position: 'outer',
+      dropdown:true,
       type: 'other',
       code: 'import',
       icon: 'pi-import',
@@ -178,6 +189,7 @@ export const useTableOptionButtons = AutoModule.createRegistration((
     {
       label: i18n('table.exportData').d('导出数据'),
       position: 'outer',
+      dropdown:true,
       type: 'other',
       code: 'export',
       icon: 'pi-export',

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

@@ -54,7 +54,7 @@ export const RenderTableOptionTips = designComponent({
           {tips.map((tip, index) => (
             <RenderTableOptionTipItem tip={tip} key={index}/>
           ))}
-          {!props.hideClearButton && <Button mode="text" icon="pi-delete" label={i18n('table.clearAll').d('全部清空')} onClick={emit.onClearAll}/>}
+          {!props.hideClearButton && <Button size="small" mode="text" icon="pi-delete" label={i18n('table.clearAll').d('全部清空')} onClick={emit.onClearAll}/>}
         </div>
       );
     };

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

@@ -3,7 +3,6 @@
   @include comp(form) {
     padding-left: 0 !important;
     padding-right: 0 !important;
-    margin: 0 !important;
     .form-inner {
       width: 100%;
     }

package/src/packages/components/Form/form.scss

@@ -180,7 +180,7 @@
   }
 
   &:not(.form-column-1) {
-    overflow: hidden;
+    //overflow: hidden;
     @include prefix(form-item) {
       display: inline-block;
     }

package/src/packages/components/Form/layout/useFormLayout.tsx

@@ -128,15 +128,15 @@ export const useFormLayout = (() => {
     /*根节点样式*/
     const styles = useStyles((styles) => {
       if (!isSingleColumn.value) {
-        styles.padding = `${rowGutter.value / 2}px ${gutter.value}px`;
+        // styles.padding = `${rowGutter.value / 2}px ${gutter.value}px`;
       }
     });
     /*inner节点样式，有列间距时拓展宽度*/
     const innerStyles = useStyles(style => {
       if (!isSingleColumn.value && !!gutter.value) {
         style.width = `calc(100% + ${unit(gutter.value)})`;
-        style.marginLeft = unit(-gutter.value / 2);
       }
+      style.margin = `${-rowGutter.value / 2}px ${unit(-gutter.value / 2)}`;
     });
     const refer = { props, styles, gutter, rowGutter, innerStyles, isSingleColumn, validateMessagePosition };
     provide(FORM_LAYOUT_PROVIDER, refer);

package/src/packages/components/Table/standard/PlcOperation/OuterOperation.tsx

@@ -62,7 +62,7 @@ export const OuterOperation = designComponent({
       let outerOperationConfigs: iTableOuterOperationConfig[] = props.operations?.filter(i => !i.position || i.position === eTableOperationPosition.outer) as any;
       outerOperationConfigs = props.processOuterOperations?.(outerOperationConfigs) || outerOperationConfigs || [];
       outerOperationConfigs.forEach(i => {
-        const { position, handler, keyboard, render } = i;
+        const { position, handler, keyboard, render, dropdown } = i;
         const type = typeof i.type === "function" ? i.type() : i.type || 'other';
         const operation: iTableOuterOperation = {
           label: typeof i.label === "function" ? i.label() : i.label,
@@ -73,6 +73,7 @@ export const OuterOperation = designComponent({
           type,
           disabled: typeof i.disabled === "function" ? i.disabled() : !!i.disabled,
           position,
+          dropdown,
           handler,
           mode: typeof i.mode === "function" ? i.mode() : i.mode,
           status: typeof i.status === "function" ? i.status() : i.status,
@@ -112,8 +113,8 @@ export const OuterOperation = designComponent({
           <div className="table-operation-bar-right">
             {(() => {
               const outerButtonSize = 3;
-              const exposeOuterButtons = outerOperations.value.slice(0, outerButtonSize);
-              const hiddenOuterButtons = outerOperations.value.slice(outerButtonSize);
+              const exposeOuterButtons = outerOperations.value.filter(i => !i.dropdown);
+              const hiddenOuterButtons = outerOperations.value.filter(i => i.dropdown);
               const renderContent: RenderNode[] = [];
               const exposeOuterButtonsContent = exposeOuterButtons.map(operation => {
                 const btn = operation.render ? operation.render(false) : (

package/src/packages/components/Table/standard/PlcOperation/PlcOperation.utils.tsx

@@ -50,6 +50,8 @@ type iBuildTableOperationConfig<Scope = never, IsConfig = true> = {
       keyboard?: string,
       /*外部按钮可以不用设置position，默认按钮就是外部的*/
       position?: typeof eTableOperationPosition.outer,
+      /*是否放在更多按钮里边*/
+      dropdown?: boolean,
       handler?: () => any,
       render?: (isDropdown: boolean) => RenderNode
     }) :

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

@@ -8,7 +8,7 @@
   box-sizing: border-box;
   transition: all ease 300ms;
   overflow-y: hidden;
-  z-index: 99999;
+  z-index: 1500;
 
   &:before {
     content: '';