vxe-table 4.2.8 → 4.3.0-beta.10

package/styles/radio.scss

@@ -1,6 +1,7 @@
 /**Variable**/
 @import './helpers/mixin.scss';
 @import './base/common.scss';
+@import './base/checked.scss';
 
 /*radio-group*/
 .vxe-radio-group {
@@ -15,13 +16,11 @@
 
 /*radio*/
 .vxe-radio {
+  @extend %XERadioIcon;
   display: inline-block;
   vertical-align: middle;
   white-space: nowrap;
-  user-select: none;
   line-height: 1;
-  cursor: pointer;
-  color: $vxe-font-color;
   > input {
     &[type="radio"] {
       position: absolute;
@@ -30,75 +29,20 @@
       border: 0;
       appearance: none;
     }
-    &+.vxe-radio--icon {
-      position: relative;
-      display: inline-block;
-      width: 1em;
-      height: 1em;
-      border: $vxe-radio-border-width solid $vxe-input-border-color;
-      background-color: $vxe-radio-icon-background-color;
-      vertical-align: middle;
-      border-radius: 50%;
-    }
-    &:checked+.vxe-radio--icon {
-      background-color: $vxe-primary-color;
-      border-color: $vxe-primary-color;
-      &:before {
-        content: "";
-        position: absolute;
-        background-color: $vxe-radio-checked-icon-background-color;
-        border-radius: 50%;
-        height: 0.25em;
-        width: 0.25em;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%,-50%);
-      }
-      &+.vxe-radio--label {
-        color: $vxe-primary-color;
-      }
-    }
-  }
-  &:not(.is--disabled) {
-    & > input {
-      &:focus {
-        &+.vxe-radio--icon {
-          border-color: $vxe-primary-color;
-          box-shadow: 0 0 0.2em 0 $vxe-primary-color;
-        }
-      }
-    }
-    &:hover {
-      > input {
-        &+.vxe-radio--icon {
-          border-color: $vxe-primary-color;
-        }
-      }
-    }
-  }
-  &.is--disabled {
-    cursor: not-allowed;
-    > input {
-      &+.vxe-radio--icon {
-        border-color: $vxe-input-disabled-color;
-        background-color: $vxe-input-disabled-background-color;
-        &:before {
-          border-color: $vxe-primary-disabled-color;
-          background-color: $vxe-primary-disabled-color;
-        }
-        &+.vxe-radio--label {
-          color: $vxe-disabled-color;
-        }
-      }
-    }
   }
   .vxe-radio--label {
-    padding-left: 0.5em;
     vertical-align: middle;
     display: inline-block;
     max-width: 50em;
     @extend %TextEllipsis;
   }
+  &:not(.is--disabled) {
+    > input {
+      &:focus+.vxe-radio--icon {
+        color: $vxe-primary-color;
+      }
+    }
+  }
   &:not(.vxe-radio-button) {
     &+.vxe-radio {
       margin-left: 10px;
@@ -192,25 +136,13 @@
 
 .vxe-radio {
   font-size: $vxe-font-size;
-  .vxe-radio--icon {
-    font-size: $vxe-radio-font-size-default;
-  }
   &.size--medium {
     font-size: $vxe-font-size-medium;
-    .vxe-radio--icon {
-      font-size: $vxe-radio-font-size-medium;
-    }
   }
   &.size--small {
     font-size: $vxe-font-size-small;
-    .vxe-radio--icon {
-      font-size: $vxe-radio-font-size-small;
-    }
   }
   &.size--mini {
     font-size: $vxe-font-size-mini;
-    .vxe-radio--icon {
-      font-size: $vxe-radio-font-size-mini;
-    }
   }
 }

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.2em;
+    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.1em;
+  }
+  .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;
@@ -690,23 +826,10 @@
 
   // 单选框和复选框
   .vxe-cell--radio {
-    @extend %XERadio;
-  }
-  .vxe-cell--checkbox {
-    @extend %XECheckbox;
-  }
-  .vxe-cell--radio .vxe-radio--icon,
-  .vxe-cell--checkbox .vxe-checkbox--icon {
-    left: 0;
-    top: 0.1em;
-  }
-  .vxe-cell--radio .vxe-radio--label,
-  .vxe-cell--checkbox .vxe-checkbox--label {
-    padding-left: 0.5em;
+    @extend %XERadioIcon;
   }
-  .vxe-cell--radio,
   .vxe-cell--checkbox {
-    padding-left: 1.2em;
+    @extend %XECheckboxIcon;
   }
 
   .fixed--hidden {
@@ -958,10 +1081,10 @@
         }
       }
     }
-    .vxe-cell--checkbox .vxe-checkbox--icon {
+    .vxe-cell--checkbox {
       font-size: $vxe-checkbox-font-size-medium;
     }
-    .vxe-cell--radio .vxe-radio--icon {
+    .vxe-cell--radio {
       font-size: $vxe-radio-font-size-medium;
     }
   }
@@ -976,10 +1099,10 @@
         }
       }
     }
-    .vxe-cell--checkbox .vxe-checkbox--icon {
+    .vxe-cell--checkbox {
       font-size: $vxe-checkbox-font-size-small;
     }
-    .vxe-cell--radio .vxe-radio--icon {
+    .vxe-cell--radio {
       font-size: $vxe-radio-font-size-small;
     }
   }
@@ -994,10 +1117,10 @@
         }
       }
     }
-    .vxe-cell--checkbox .vxe-checkbox--icon {
+    .vxe-cell--checkbox {
       font-size: $vxe-checkbox-font-size-mini;
     }
-    .vxe-cell--radio .vxe-radio--icon {
+    .vxe-cell--radio {
       font-size: $vxe-radio-font-size-mini;
     }
   }

package/styles/toolbar.scss

@@ -120,7 +120,7 @@
       & > li {
         max-width: 16em;
         min-width: 12.5em;
-        padding: 0.2em 1em 0.2em 2.3em;
+        padding: 0.2em 1em 0.2em 1em;
         @for $i from 2 through 8 {
           $interval: $i - 1 + 0.2;
           &.level--#{$i}{
@@ -170,42 +170,18 @@
 }
 
 .vxe-custom--option {
-  @extend %XECheckbox;
-  .vxe-checkbox--icon {
-    left: 0.6em;
-    top: 0.38em;
-  }
+  @extend %XECheckboxIcon;
 }
 
 .vxe-toolbar {
   font-size: $vxe-font-size;
-  .vxe-custom--option {
-    & > .vxe-checkbox--icon {
-      font-size: $vxe-checkbox-font-size-default;
-    }
-  }
   &.size--medium {
     font-size: $vxe-font-size-medium;
-    .vxe-custom--option {
-      & > .vxe-checkbox--icon {
-        font-size: $vxe-checkbox-font-size-medium;
-      }
-    }
   }
   &.size--small {
     font-size: $vxe-font-size-small;
-    .vxe-custom--option {
-      & > .vxe-checkbox--icon {
-        font-size: $vxe-checkbox-font-size-small;
-      }
-    }
   }
   &.size--mini {
     font-size: $vxe-font-size-mini;
-    .vxe-custom--option {
-      & > .vxe-checkbox--icon {
-        font-size: $vxe-checkbox-font-size-mini;
-      }
-    }
   }
 }

package/styles/variable.scss

@@ -142,10 +142,10 @@ $vxe-modal-body-background-color: #fff !default;
 $vxe-modal-border-color: #ebeef5 !default;
 
 /*checkbox*/
-$vxe-checkbox-font-size-default: 16px !default;
-$vxe-checkbox-font-size-medium: 15px !default;
-$vxe-checkbox-font-size-small: 14px !default;
-$vxe-checkbox-font-size-mini: 14px !default;
+$vxe-checkbox-font-size-default: 15px !default;
+$vxe-checkbox-font-size-medium: 14px !default;
+$vxe-checkbox-font-size-small: 13px !default;
+$vxe-checkbox-font-size-mini: 12px !default;
 $vxe-checkbox-checked-width: 0.32em !default;
 $vxe-checkbox-checked-height: 0.64em !default;
 $vxe-checkbox-indeterminate-width: 0.6em !default;

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/button.d.ts

@@ -3,7 +3,11 @@ import { VXEComponent, VxeComponentBase, VxeEvent, SizeType, ValueOf, VNodeStyle
 
 /**
  * 组件 - 按钮
- * @example import { Button as VxeButton } from 'vxe-table'
+ * @example import { VxeButton } from 'vxe-table'
+ */
+export const VxeButton: VXEComponent<VxeButtonProps, VxeButtonEventProps>
+/**
+ * 组件 - 按钮
  */
 export const Button: VXEComponent<VxeButtonProps, VxeButtonEventProps>
 

package/types/checkbox-group.d.ts

@@ -4,7 +4,11 @@ import { VxeCheckboxEvents, VxeCheckboxPropTypes } from './checkbox'
 
 /**
  * 组件 - 复选框组
- * @example import { CheckboxGroup as VxeCheckboxGroup } from 'vxe-table'
+ * @example import { VxeCheckboxGroup } from 'vxe-table'
+ */
+export const VxeCheckboxGroup: VXEComponent<VxeCheckboxGroupProps, VxeCheckboxGroupEventProps>
+/**
+ * 组件 - 复选框组
  */
 export const CheckboxGroup: VXEComponent<VxeCheckboxGroupProps, VxeCheckboxGroupEventProps>
 

package/types/checkbox.d.ts

@@ -3,7 +3,11 @@ import { VXEComponent, VxeComponentBase, VxeEvent, SizeType, ValueOf } from './c
 
 /**
  * 组件 - 复选框
- * @example import { Checkbox as VxeCheckbox } from 'vxe-table'
+ * @example import { VxeCheckbox } from 'vxe-table'
+ */
+export const VxeCheckbox: VXEComponent<VxeCheckboxProps, VxeCheckboxEventProps>
+/**
+ * 组件 - 复选框
  */
 export const Checkbox: VXEComponent<VxeCheckboxProps, VxeCheckboxEventProps>
 

package/types/colgroup.d.ts

@@ -3,7 +3,11 @@ import { VxeColumnPropTypes } from './column'
 
 /**
  * 组件 - 表格分组列
- * @example import { Colgroup as VxeColgroup } from 'vxe-table'
+ * @example import { VxeColgroup } from 'vxe-table'
+ */
+export const VxeColgroup: VXEComponent<VxeColgroupProps>
+/**
+ * 组件 - 表格分组列
  */
 export const Colgroup: VXEComponent<VxeColgroupProps>
 

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'
@@ -7,7 +7,11 @@ import { VxeTooltipPropTypes } from './tooltip'
 
 /**
  * 组件 - 表格列
- * @example import { Column as VxeColumn } from 'vxe-table'
+ * @example import { VxeColumn } from 'vxe-table'
+ */
+export const VxeColumn: VXEComponent<VxeColumnProps>
+/**
+ * 组件 - 表格列
  */
 export const Column: VXEComponent<VxeColumnProps>
 
@@ -208,16 +212,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/edit.d.ts

@@ -1,6 +1,10 @@
 import { VXEComponent, RecordInfo } from './component'
 import { VxeTableDefines } from './table'
 
+/**
+ * 表格扩展 - 编辑
+ */
+export const VxeModuleEdit: VXEComponent<{}>
 /**
  * 表格扩展 - 编辑
  */

package/types/export.d.ts

@@ -2,6 +2,10 @@ import { VXEComponent } from './component'
 import { VxeTablePropTypes, VxeTableDefines, VxeTableConstructor, VxeTableMethods, VxeTablePrivateMethods } from './table'
 import { VxeGridConstructor } from './grid'
 
+/**
+ * 表格扩展 - 导出、导入、打印
+ */
+export const VxeModuleExport: VXEComponent<{}>
 /**
  * 表格扩展 - 导出、导入、打印
  */

package/types/filter.d.ts

@@ -2,6 +2,10 @@ import { VXEComponent } from './component'
 import { VxeTableDefines, VxeTableMethods, VxeTablePrivateMethods } from './table'
 import { VxeColumnPropTypes } from './column'
 
+/**
+ * 表格扩展 - 筛选
+ */
+export const VxeModuleFilter: VXEComponent<{}>
 /**
  * 表格扩展 - 筛选
  */

package/types/footer.d.ts

@@ -2,6 +2,7 @@ import { VXEComponent } from './component'
 import { VxeTableDefines } from './table'
 
 /**
- * 表格扩展 - 表尾
+ * 已废弃
+ * @deprecated
  */
 export const Footer: VXEComponent<{}>

package/types/form-gather.d.ts

@@ -4,7 +4,11 @@ import { VxeFormItemPropTypes } from './form-item'
 
 /**
  * 组件 - 表单项集合
- * @example import { FormGather as VxeFormGather } from 'vxe-table'
+ * @example import { VxeFormGather } from 'vxe-table'
+ */
+export const VxeFormGather: VXEComponent<VxeFormGatherProps>
+/**
+ * 组件 - 表单项集合
  */
 export const FormGather: VXEComponent<VxeFormGatherProps>
 

package/types/form-item.d.ts

@@ -6,7 +6,11 @@ import { VxeGlobalRendererHandles } from './v-x-e-table'
 
 /**
  * 组件 - 表单项
- * @example import { FormItem as VxeFormItem } from 'vxe-table'
+ * @example import { VxeFormItem } from 'vxe-table'
+ */
+export const VxeFormItem: VXEComponent<VxeFormItemProps>
+/**
+ * 组件 - 表单项
  */
 export const FormItem: VXEComponent<VxeFormItemProps>
 
@@ -105,6 +109,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,10 +1,14 @@
 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'
 
 /**
  * 组件 - 表单
- * @example import { Form as VxeForm } from 'vxe-table'
+ * @example import { VxeForm } from 'vxe-table'
+ */
+export const VxeForm: VXEComponent<VxeFormProps, VxeFormEventProps>
+/**
+ * 组件 - 表单
  */
 export const Form: VXEComponent<VxeFormProps, VxeFormEventProps>
 
@@ -77,6 +81,8 @@ export namespace VxeFormPropTypes {
 
   export type Items = VxeFormItemProps[]
 
+  export type Readonly = boolean
+
   /**
    * 校验规则配置项
    */
@@ -118,6 +124,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 +187,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 +218,7 @@ export namespace VxeFormDefines {
     folding: VxeFormItemPropTypes.Folding
     collapseNode: VxeFormItemPropTypes.CollapseNode
     className: VxeFormItemPropTypes.ClassName
+    readonly: VxeFormItemPropTypes.Readonly
     itemRender: VxeFormItemPropTypes.ItemRender
     // 渲染属性
     showError: boolean