vxe-table 4.2.8 → 4.3.0-beta.0

package/styles/input.scss

@@ -237,6 +237,9 @@ $iconWidth: 1.6em;
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%);
+    &[class*="vxe-icon-"] {
+      font-size: 1.5em;
+    }
   }
 
   .vxe-input--date-picker-suffix {
@@ -258,6 +261,7 @@ $iconWidth: 1.6em;
   }
   .vxe-input--number-prev-icon,
   .vxe-input--number-next-icon {
+    line-height: 0.8em;
     position: absolute;
     left: 50%;
     transform: translateX(-50%);
@@ -676,6 +680,7 @@ $iconWidth: 1.6em;
 .vxe-input {
   font-size: $vxe-font-size;
   height: $vxe-input-height-default;
+  line-height: $vxe-input-height-default;
   .vxe-input--inner {
     &[type="date"]::-webkit-inner-spin-button,
     &[type="month"]::-webkit-inner-spin-button,
@@ -692,6 +697,7 @@ $iconWidth: 1.6em;
   &.size--medium {
     font-size: $vxe-font-size-medium;
     height: $vxe-input-height-medium;
+    line-height: $vxe-input-height-medium;
     .vxe-input--inner {
       &[type="date"]::-webkit-inner-spin-button,
       &[type="month"]::-webkit-inner-spin-button,
@@ -703,6 +709,7 @@ $iconWidth: 1.6em;
   &.size--small {
     font-size: $vxe-font-size-small;
     height: $vxe-input-height-small;
+    line-height: $vxe-input-height-small;
     .vxe-input--inner {
       &[type="date"]::-webkit-inner-spin-button,
       &[type="month"]::-webkit-inner-spin-button,
@@ -714,6 +721,7 @@ $iconWidth: 1.6em;
   &.size--mini {
     font-size: $vxe-font-size-mini;
     height: $vxe-input-height-mini;
+    line-height: $vxe-input-height-mini;
     .vxe-input--inner {
       &[type="date"]::-webkit-inner-spin-button,
       &[type="month"]::-webkit-inner-spin-button,

package/styles/modal.scss

@@ -259,7 +259,6 @@
   .vxe-modal--close-btn {
     position: absolute;
     right: 14px;
-    top: 0.85em;
     z-index: 1;
     cursor: pointer;
     &:hover {

package/styles/pager.scss

@@ -39,6 +39,7 @@
   .vxe-pager--jump-next {
     color: inherit;
     outline: 0;
+    padding: 0;
     border: 1px solid transparent;
     &:not(.is--disabled) {
       &:focus {
@@ -153,6 +154,7 @@
   .vxe-pager--jump .vxe-pager--goto,
   .vxe-pager--sizes > .vxe-input {
     height: 2.15em;
+    line-height: 2.15em;
   }
   .vxe-pager--sizes > .vxe-select--panel .vxe-select-option {
     text-align: center;

package/styles/select.scss

@@ -29,6 +29,7 @@
   & > .vxe-input {
     width: 100%;
     .vxe-input--suffix-icon {
+      display: inline-block;
       @include animatTransition(transform, .2s);
     }
   }

package/styles/table.scss

@@ -311,6 +311,142 @@
   }
 }
 
+/*header*/
+.vxe-table {
+  .vxe-table--header-wrapper {
+    color: $vxe-table-header-font-color;
+    .vxe-table--header-border-line {
+      position: absolute;
+      left: 0;
+      bottom: 0;
+      height: 0;
+      border-bottom: $vxe-table-border-width solid $vxe-table-border-color;
+    }
+  }
+  /*排序*/
+  .vxe-cell--sort {
+    width: 1.5em;
+    height: 1.35em;
+    vertical-align: middle;
+    text-align: center;
+    display: inline-block;
+    position: relative;
+  }
+  .vxe-sort--asc-btn,
+  .vxe-sort--desc-btn {
+    position: absolute;
+    left: 0.1em;
+    color: $vxe-table-column-icon-border-color;
+    width: 1em;
+    text-align: center;
+    height: 0.8em;
+    line-height: 0.8em;
+    cursor: pointer;
+    &:hover {
+      color: $vxe-table-font-color;
+    }
+    &.sort--active {
+      color: $vxe-primary-color;
+    }
+  }
+  .vxe-sort--asc-btn {
+    top: -0.2em;
+  }
+  .vxe-sort--desc-btn {
+    bottom: -0.2em;
+  }
+}
+
+.vxe-header--column {
+  position: relative;
+  font-weight: $vxe-table-header-font-weight;
+  // user-select: none;
+  &.col--ellipsis {
+    & > .vxe-cell {
+      display: flex;
+      align-items: center;
+      .vxe-cell--title {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      & > i,
+      & > span {
+        &:not(.vxe-cell--title) {
+          flex-shrink: 0;
+        }
+      }
+    }
+  }
+  .vxe-cell--required-icon {
+    display: inline-block;
+    color: $vxe-table-validate-error-color;
+    width: 0.8em;
+    height: 1em;
+    line-height: 1em;
+    font-family: $vxe-icon-font-family;
+    font-weight: normal;
+    position: relative;
+    &:before {
+      content: "*";
+      position: absolute;
+      left: 0;
+      top: 0.2em;
+    }
+  }
+  // .vxe-cell--required-icon,
+  // .vxe-cell--edit-icon,
+  // .vxe-cell-help-icon,
+  // .vxe-cell--title {
+  //   vertical-align: middle;
+  // }
+  .vxe-cell--required-icon {
+    margin-right: 0.1em;
+  }
+  .vxe-cell--edit-icon,
+  .vxe-cell-help-icon {
+    margin-right: 0.2em;
+  }
+  .vxe-cell-help-icon {
+    cursor: help;
+  }
+  .vxe-resizable {
+    position: absolute;
+    right: -7px;
+    bottom: 0;
+    width: 14px;
+    height: 100%;
+    text-align: center;
+    z-index: 1;
+    cursor: col-resize;
+    &.is--line {
+      &:before,
+      &:after {
+        content: "";
+        display: inline-block;
+        vertical-align: middle;
+      }
+      &:before {
+        width: 1px;
+        height: 50%;
+        background-color: $vxe-table-resizable-line-color;
+      }
+      &:after {
+        width: 0;
+        height: 100%;
+      }
+    }
+  }
+}
+.vxe-table--fixed-right-wrapper {
+  .vxe-header--column {
+    .vxe-resizable {
+      right: auto;
+      left: -7px;
+    }
+  }
+}
+
 /*table*/
 .vxe-table--render-default {
   position: relative;

package/styles/variable.scss

@@ -108,7 +108,7 @@ $vxe-table-menu-item-width: 178px !default;
 $vxe-table-menu-background-color: #fff !default;
 
 /*loading*/
-$vxe-loading-background-color: rgba(0, 0, 0, 0.2) !default;
+$vxe-loading-background-color: rgba(0, 0, 0, 0.3) !default;
 $vxe-loading-z-index: 999 !default;
 
 /*validate*/

package/types/all.d.ts

@@ -61,6 +61,12 @@ declare module 'vue' {
   }
 }
 
+declare global {
+  interface Window {
+    VXETable: VXETableCore;
+  }
+}
+
 // Constructor
 export * from './v-x-e-table'
 export * from './component'

package/types/column.d.ts

@@ -1,5 +1,5 @@
 import { VNode } from 'vue'
-import { VXEComponent } from './component'
+import { VXEComponent, SlotVNodeType } from './component'
 import { VxeTableConstructor, VxeTableDefines, VxeTablePropTypes } from './table'
 import { VxeGlobalRendererHandles } from './v-x-e-table'
 import { VxeFilterPanel } from './filter'
@@ -208,16 +208,16 @@ export namespace VxeColumnPropTypes {
   interface IconSlotParams extends DefaultSlotParams { }
 
   export type Slots = {
-    title?: string | ((params: HeaderSlotParams) => JSX.Element[] | VNode[] | string[]) | null
-    radio?: string | ((params: DefaultSlotParams) => JSX.Element[] | VNode[] | string[]) | null
-    checkbox?: string | ((params: DefaultSlotParams) => JSX.Element[] | VNode[] | string[]) | null
-    default?: string | ((params: DefaultSlotParams) => JSX.Element[] | VNode[] | string[]) | null
-    header?: string | ((params: HeaderSlotParams) => JSX.Element[] | VNode[] | string[]) | null
-    footer?: string | ((params: FooterSlotParams) => JSX.Element[] | VNode[] | string[]) | null
-    content?: string | ((params: ContentSlotParams) => JSX.Element[] | VNode[] | string[]) | null
-    filter?: string | ((params: FilterSlotParams) => JSX.Element[] | VNode[] | string[]) | null
-    edit?: string | ((params: EditSlotParams) => JSX.Element[] | VNode[] | string[]) | null
-    icon?: string | ((params: IconSlotParams) => JSX.Element[] | VNode[] | string[]) | null
+    title?: string | ((params: HeaderSlotParams) => SlotVNodeType[] | SlotVNodeType) | null
+    radio?: string | ((params: DefaultSlotParams) => SlotVNodeType[] | SlotVNodeType) | null
+    checkbox?: string | ((params: DefaultSlotParams) => SlotVNodeType[] | SlotVNodeType) | null
+    default?: string | ((params: DefaultSlotParams) => SlotVNodeType[] | SlotVNodeType) | null
+    header?: string | ((params: HeaderSlotParams) => SlotVNodeType[] | SlotVNodeType) | null
+    footer?: string | ((params: FooterSlotParams) => SlotVNodeType[] | SlotVNodeType) | null
+    content?: string | ((params: ContentSlotParams) => SlotVNodeType[] | SlotVNodeType) | null
+    filter?: string | ((params: FilterSlotParams) => SlotVNodeType[] | SlotVNodeType) | null
+    edit?: string | ((params: EditSlotParams) => SlotVNodeType[] | SlotVNodeType) | null
+    icon?: string | ((params: IconSlotParams) => SlotVNodeType[] | SlotVNodeType) | null
   }
 }
 

package/types/component.d.ts

@@ -1,4 +1,4 @@
-import { App, ComponentPublicInstance } from 'vue'
+import { App, ComponentPublicInstance, VNode } from 'vue'
 
 export type SizeType = null | 'medium' | 'small' | 'mini'
 export type ValueOf<T> = T extends any[] ? T[number] : T[keyof T]
@@ -27,3 +27,5 @@ export interface VxeEvent {
 export type VNodeStyle = {
   [key: string]: string | number
 }
+
+export type SlotVNodeType = JSX.Element | VNode | string | number

package/types/form-item.d.ts

@@ -105,6 +105,7 @@ export namespace VxeFormItemPropTypes {
     property: string
   }
   export type ClassName = string | ((params: ClassNameParams) => string)
+  export type Readonly = boolean
 
   interface PrefixOption {
     useHTML?: VxeTooltipPropTypes.UseHTML

package/types/form.d.ts

@@ -1,5 +1,5 @@
 import { RenderFunction, SetupContext, ComponentPublicInstance, Ref, ComputedRef, VNode } from 'vue'
-import { VXEComponent, VxeComponentBase, VxeEvent, SizeType, ValueOf } from './component'
+import { VXEComponent, VxeComponentBase, VxeEvent, SizeType, ValueOf, SlotVNodeType } from './component'
 import { VxeFormItemProps, VxeFormItemPropTypes } from './form-item'
 
 /**
@@ -77,6 +77,8 @@ export namespace VxeFormPropTypes {
 
   export type Items = VxeFormItemProps[]
 
+  export type Readonly = boolean
+
   /**
    * 校验规则配置项
    */
@@ -118,6 +120,7 @@ export type VxeFormProps<D = any> = {
   titleAsterisk?: VxeFormPropTypes.TitleAsterisk
   titleOverflow?: VxeFormPropTypes.TitleOverflow
   className?: VxeFormPropTypes.ClassName
+  readonly?: VxeFormPropTypes.Readonly
   items?: VxeFormPropTypes.Items
   rules?: VxeFormPropTypes.Rules
   preventSubmit?: VxeFormPropTypes.PreventSubmit
@@ -180,7 +183,7 @@ export interface FormMethods {
 export interface VxeFormMethods extends FormMethods { }
 
 export interface FormPrivateMethods {
-  callSlot<T>(slotFunc: ((params: T) => any[]) | string | null, params: T): VNode[]
+  callSlot<T>(slotFunc: ((params: T) => SlotVNodeType | SlotVNodeType[]) | string | null, params: T): SlotVNodeType[]
   triggerItemEvent(evnt: Event | { type: string }, field: string, itemValue?: any): Promise<any>
   toggleCollapseEvent(evnt: Event): void
   triggerTitleTipEvent(evnt: MouseEvent, params: {
@@ -211,6 +214,7 @@ export namespace VxeFormDefines {
     folding: VxeFormItemPropTypes.Folding
     collapseNode: VxeFormItemPropTypes.CollapseNode
     className: VxeFormItemPropTypes.ClassName
+    readonly: VxeFormItemPropTypes.Readonly
     itemRender: VxeFormItemPropTypes.ItemRender
     // 渲染属性
     showError: boolean

package/types/grid.d.ts

@@ -3,7 +3,7 @@ import { VxeFormInstance, VxeFormProps, VxeFormDefines } from './form'
 import { VxeFormItemProps } from './form-item'
 import { VxeToolbarInstance, VxeToolbarProps, VxeToolbarPropTypes } from './toolbar'
 import { VxePagerInstance, VxePagerProps, VxePagerDefines } from './pager'
-import { VXEComponent, VxeComponentBase, VxeEvent, SizeType, ValueOf } from './component'
+import { VXEComponent, VxeComponentBase, VxeEvent, SizeType, ValueOf, SlotVNodeType } from './component'
 import { VxeTableInstance, VxeTableDefines, VxeTableEmits, VxeTableConstructor, VxeTableProps, VxeTablePropTypes, TablePublicMethods, VxeTableMethods, VxeTablePrivateMethods } from './table'
 
 /**
@@ -126,7 +126,7 @@ export interface GridPublicMethods {
 export interface VxeGridMethods extends GridMethods, TablePublicMethods { }
 
 export interface GridPrivateMethods {
-  callSlot<T>(slotFunc: ((params: T) => any[]) | string | null, params: T): VNode[]
+  callSlot<T>(slotFunc: ((params: T) => SlotVNodeType | SlotVNodeType[]) | string | null, params: T): SlotVNodeType[]
   extendTableMethods<T>(methodKeys: T[]): any
   triggerToolbarBtnEvent(button: VxeToolbarPropTypes.ButtonConfig, evnt: Event): void
   triggerToolbarTolEvent(button: VxeToolbarPropTypes.ToolConfig, evnt: Event): void
@@ -232,8 +232,8 @@ export namespace VxeGridPropTypes {
       iconOut?: string
     }
     slots?: {
-      buttons?: string | ((params: {}) => VNode[] | string[] | JSX.Element[])
-      tools?: string | ((params: {}) => VNode[] | string[] | JSX.Element[])
+      buttons?: string | ((params: {}) => VNode[] | string[] | JSX.Element | JSX.Element[])
+      tools?: string | ((params: {}) => VNode[] | string[] | JSX.Element | JSX.Element[])
     }
   }
 

package/types/table.d.ts

@@ -1,5 +1,5 @@
 import { RenderFunction, SetupContext, Ref, ComputedRef, ComponentPublicInstance, ComponentInternalInstance, VNode } from 'vue'
-import { VXEComponent, VxeComponentBase, VxeEvent, RecordInfo, SizeType, ValueOf, VNodeStyle } from './component'
+import { VXEComponent, VxeComponentBase, VxeEvent, RecordInfo, SizeType, ValueOf, VNodeStyle, SlotVNodeType } from './component'
 import { VxeTableProEmits, VxeTableProDefines } from './plugins/pro'
 import { VxeColumnPropTypes, VxeColumnProps } from './column'
 import { VXETableSetupOptions, VxeGlobalRendererHandles } from './v-x-e-table'
@@ -675,7 +675,7 @@ export interface VxeTableMethods extends TableMethods { }
 export interface TablePrivateMethods {
   getSetupOptions(): VXETableSetupOptions
   updateAfterDataIndex(): void
-  callSlot<T>(slotFunc: ((params: T) => any[]) | string | null, params: T): VNode[]
+  callSlot<T>(slotFunc: ((params: T) => SlotVNodeType | SlotVNodeType[]) | string | null, params: T): SlotVNodeType[]
   getParentElem(): Element | null
   getParentHeight(): number
   getExcludeHeight(): number

package/types/v-x-e-table/renderer.d.ts

@@ -1,4 +1,5 @@
 import { VNode } from 'vue'
+import { SlotVNodeType } from '../component'
 import { VxeTableDefines, VxeTableConstructor, VxeTablePrivateMethods, VxeTablePropTypes } from '../table'
 import { VxeGridConstructor } from '../grid'
 import { VxeColumnPropTypes } from '../column'
@@ -6,7 +7,7 @@ import { VxeFilterPanel } from '../filter'
 import { VxeToolbarPropTypes } from '../toolbar'
 import { FormItemRenderOptions, FormItemTitleRenderParams, FormItemContentRenderParams, FormItemVisibleParams, FormItemResetParams } from '../form-item'
 
-type RendererOptions = DefineRendererOption<VxeGlobalRendererHandles.RenderResult | JSX.Element[]>
+type RendererOptions = DefineRendererOption<VxeGlobalRendererHandles.RenderResult>
 
 export interface DefineRendererOption<T> {
   // 筛选渲染
@@ -53,7 +54,7 @@ export interface DefineRendererOption<T> {
 }
 
 export namespace VxeGlobalRendererHandles {
-  export type RenderResult = VNode[] | string[]
+  export type RenderResult = SlotVNodeType | SlotVNodeType[]
 
   export interface RenderFilterOptions extends VxeColumnPropTypes.FilterRender {}