vxe-table 4.2.8 → 4.3.0-beta.2

package/packages/table/src/table.ts

@@ -15,6 +15,7 @@ import tableProps from './props'
 import tableEmits from './emits'
 import VxeLoading from '../../loading/index'
 import { getRowUniqueId, clearTableAllStatus, getRowkey, getRowid, rowToVisible, colToVisible, getCellValue, setCellValue, handleFieldOrColumn, toTreePathSeq, restoreScrollLocation, restoreScrollListener, XEBodyScrollElement } from './util'
+import { getSlotVNs } from '../../tools/vn'
 
 import { VxeGridConstructor, VxeGridPrivateMethods, VxeTableConstructor, TableReactData, TableInternalData, VxeTablePropTypes, VxeToolbarConstructor, VxeTooltipInstance, TablePrivateMethods, VxeTablePrivateRef, VxeTablePrivateComputed, VxeTablePrivateMethods, VxeTableMethods, TableMethods, VxeMenuPanelInstance, VxeTableDefines, VxeTableProps } from '../../../types/all'
 
@@ -2618,7 +2619,7 @@ export default defineComponent({
       createData (records) {
         const { treeConfig } = props
         const treeOpts = computeTreeOpts.value
-        const handleRrecord = (record: any) => reactive(tablePrivateMethods.defineField(Object.assign({}, record)))
+        const handleRrecord = (record: any) => reactive(tablePrivateMethods.defineField(record || {}))
         const rows = treeConfig ? XEUtils.mapTree(records, handleRrecord, treeOpts) : records.map(handleRrecord)
         return nextTick().then(() => rows)
       },
@@ -4088,7 +4089,7 @@ export default defineComponent({
                       // 如果点击了当前表格之外
                       !getEventTargetNode(evnt, el).flag
                   ) {
-                    setTimeout(() => $xetable.clearActived(evnt))
+                    setTimeout(() => $xetable.clearEdit(evnt))
                   }
                 })
               }
@@ -4164,7 +4165,7 @@ export default defineComponent({
               // 如果是激活编辑状态，则取消编辑
               if (actived.row) {
                 const params = actived.args
-                $xetable.clearActived(evnt)
+                $xetable.clearEdit(evnt)
                 // 如果配置了选中功能，则为选中状态
                 if (mouseOpts.selected) {
                   nextTick(() => $xetable.handleSelected(params, evnt))
@@ -4237,7 +4238,7 @@ export default defineComponent({
               // 如果是激活编辑状态，则取消编辑
               if (actived.row) {
                 const params = actived.args
-                $xetable.clearActived(evnt)
+                $xetable.clearEdit(evnt)
                 // 如果配置了选中功能，则为选中状态
                 if (mouseOpts.selected) {
                   nextTick(() => $xetable.handleSelected(params, evnt))
@@ -4273,7 +4274,7 @@ export default defineComponent({
               // 如果是激活编辑状态，则取消编辑
               if (actived.row) {
                 params = actived.args
-                $xetable.clearActived(evnt)
+                $xetable.clearEdit(evnt)
                 // 如果配置了选中功能，则为选中状态
                 if (mouseOpts.selected) {
                   nextTick(() => $xetable.handleSelected(params, evnt))
@@ -4529,7 +4530,7 @@ export default defineComponent({
             return $xegrid.callSlot(slotFunc, params)
           }
           if (XEUtils.isFunction(slotFunc)) {
-            return slotFunc(params)
+            return getSlotVNs(slotFunc(params))
           }
         }
         return []
@@ -4579,7 +4580,7 @@ export default defineComponent({
         const rowkey = getRowkey($xetable)
         internalData.tableFullColumn.forEach(column => {
           const { field, editRender } = column
-          if (field && !XEUtils.has(record, field)) {
+          if (field && !XEUtils.has(record, field) && !record[field]) {
             let cellValue = null
             if (editRender) {
               const { defaultValue } = editRender
@@ -4875,7 +4876,7 @@ export default defineComponent({
               XEUtils.eachTree([row], (item) => {
                 if ($xetable.eqRow(item, row) || (!checkMethod || checkMethod({ row: item }))) {
                   XEUtils.set(item, checkField, value)
-                  XEUtils.remove(treeIndeterminates, half => half === item)
+                  XEUtils.remove(treeIndeterminates, half => $xetable.eqRow(half, item))
                   handleCheckboxReserveRow(row, value)
                 }
               }, treeOpts)
@@ -4914,9 +4915,9 @@ export default defineComponent({
                   if (value) {
                     selection.push(item)
                   } else {
-                    XEUtils.remove(selection, select => select === item)
+                    XEUtils.remove(selection, select => $xetable.eqRow(select, item))
                   }
-                  XEUtils.remove(treeIndeterminates, half => half === item)
+                  XEUtils.remove(treeIndeterminates, half => $xetable.eqRow(half, item))
                   handleCheckboxReserveRow(row, value)
                 }
               }, treeOpts)

package/packages/toolbar/src/toolbar.ts

@@ -7,6 +7,7 @@ import { getEventTargetNode } from '../../tools/dom'
 import { formatText } from '../../tools/utils'
 import { warnLog, errLog } from '../../tools/log'
 import { GlobalEvent } from '../../tools/event'
+import { getSlotVNs } from '../../tools/vn'
 
 import { VxeGridConstructor, GridPrivateMethods, ToolbarMethods, VxeToolbarConstructor, VxeToolbarEmits, VxeToolbarPropTypes, VxeTableConstructor, ToolbarPrivateRef, VxeTableMethods, VxeTablePrivateMethods, ToolbarReactData, VxeTableDefines } from '../../../types/all'
 
@@ -374,7 +375,7 @@ export default defineComponent({
       const { buttons } = props
       const buttonsSlot = slots.buttons
       if (buttonsSlot) {
-        return buttonsSlot({ $grid: $xegrid, $table: $xetable })
+        return getSlotVNs(buttonsSlot({ $grid: $xegrid, $table: $xetable }))
       }
       const btnVNs: VNode[] = []
       if (buttons) {
@@ -421,7 +422,7 @@ export default defineComponent({
       const { tools } = props
       const toolsSlot = slots.tools
       if (toolsSlot) {
-        return toolsSlot({ $grid: $xegrid, $table: $xetable })
+        return getSlotVNs(toolsSlot({ $grid: $xegrid, $table: $xetable }))
       }
       const btnVNs: VNode[] = []
       if (tools) {
@@ -498,12 +499,14 @@ export default defineComponent({
         const isColGroup = column.children && column.children.length
         const isDisabled = checkMethod ? !checkMethod({ column }) : false
         if (isColGroup || colKey) {
+          const isChecked = column.visible
+          const isIndeterminate = column.halfVisible
           colVNs.push(
             h('li', {
               class: ['vxe-custom--option', `level--${column.level}`, {
                 'is--group': isColGroup,
-                'is--checked': column.visible,
-                'is--indeterminate': column.halfVisible,
+                'is--checked': isChecked,
+                'is--indeterminate': isIndeterminate,
                 'is--disabled': isDisabled
               }],
               title: colTitle,
@@ -514,13 +517,7 @@ export default defineComponent({
               }
             }, [
               h('span', {
-                class: 'vxe-checkbox--icon vxe-checkbox--checked-icon'
-              }),
-              h('span', {
-                class: 'vxe-checkbox--icon vxe-checkbox--unchecked-icon'
-              }),
-              h('span', {
-                class: 'vxe-checkbox--icon vxe-checkbox--indeterminate-icon'
+                class: ['vxe-checkbox--icon', isIndeterminate ? GlobalConfig.icon.TABLE_CHECKBOX_INDETERMINATE : (isChecked ? GlobalConfig.icon.TABLE_CHECKBOX_CHECKED : GlobalConfig.icon.TABLE_CHECKBOX_UNCHECKED)]
               }),
               h('span', {
                 class: 'vxe-checkbox--label'
@@ -529,6 +526,8 @@ export default defineComponent({
           )
         }
       })
+      const isAllChecked = customStore.isAll
+      const isAllIndeterminate = customStore.isIndeterminate
       return h('div', {
         class: ['vxe-custom--wrapper', {
           'is--active': customStore.visible
@@ -549,20 +548,14 @@ export default defineComponent({
           }, [
             h('li', {
               class: ['vxe-custom--option', {
-                'is--checked': customStore.isAll,
-                'is--indeterminate': customStore.isIndeterminate
+                'is--checked': isAllChecked,
+                'is--indeterminate': isAllIndeterminate
               }],
               title: GlobalConfig.i18n('vxe.table.allTitle'),
               onClick: allCustomEvent
             }, [
               h('span', {
-                class: 'vxe-checkbox--icon vxe-checkbox--checked-icon'
-              }),
-              h('span', {
-                class: 'vxe-checkbox--icon vxe-checkbox--unchecked-icon'
-              }),
-              h('span', {
-                class: 'vxe-checkbox--icon vxe-checkbox--indeterminate-icon'
+                class: ['vxe-checkbox--icon', isAllIndeterminate ? GlobalConfig.icon.TABLE_CHECKBOX_INDETERMINATE : (isAllChecked ? GlobalConfig.icon.TABLE_CHECKBOX_CHECKED : GlobalConfig.icon.TABLE_CHECKBOX_UNCHECKED)]
               }),
               h('span', {
                 class: 'vxe-checkbox--label'
@@ -671,7 +664,7 @@ export default defineComponent({
           }) : createCommentVNode(),
           zoom && $xegrid ? h(resolveComponent('vxe-button') as ComponentOptions, {
             circle: true,
-            icon: $xegrid.isMaximized() ? (zoomOpts.iconOut || GlobalConfig.icon.TOOLBAR_TOOLS_ZOOM_OUT) : (zoomOpts.iconIn || GlobalConfig.icon.TOOLBAR_TOOLS_ZOOM_IN),
+            icon: $xegrid.isMaximized() ? (zoomOpts.iconOut || GlobalConfig.icon.TOOLBAR_TOOLS_MINIMIZE) : (zoomOpts.iconIn || GlobalConfig.icon.TOOLBAR_TOOLS_FULLSCREEN),
             title: GlobalConfig.i18n(`vxe.toolbar.zoom${$xegrid.isMaximized() ? 'Out' : 'In'}`),
             onClick: zoomEvent
           }) : createCommentVNode(),

package/packages/tools/vn.ts

@@ -1,3 +1,13 @@
+import XEUtils from 'xe-utils'
+import { SlotVNodeType } from '../../types/all'
+
 export function getOnName (type: string) {
   return 'on' + type.substring(0, 1).toLocaleUpperCase() + type.substring(1)
 }
+
+export function getSlotVNs (vns: SlotVNodeType | SlotVNodeType[]) {
+  if (XEUtils.isArray(vns)) {
+    return vns
+  }
+  return [vns]
+}

package/packages/tooltip/src/tooltip.ts

@@ -4,6 +4,7 @@ import GlobalConfig from '../../v-x-e-table/src/conf'
 import { useSize } from '../../hooks/size'
 import { getLastZIndex, nextZIndex, formatText } from '../../tools/utils'
 import { getAbsolutePos, getDomNode } from '../../tools/dom'
+import { getSlotVNs } from '../../tools/vn'
 
 import { VxeTooltipPropTypes, VxeTooltipConstructor, VxeTooltipEmits, TooltipReactData, TooltipMethods, TooltipPrivateRef } from '../../../types/all'
 
@@ -292,11 +293,12 @@ export default defineComponent({
     const renderContent = () => {
       const { useHTML } = props
       const { tipContent } = reactData
-      if (slots.content) {
+      const contentSlot = slots.content
+      if (contentSlot) {
         return h('div', {
           key: 1,
           class: 'vxe-table--tooltip-content'
-        }, slots.content({}))
+        }, getSlotVNs(contentSlot({})))
       }
       if (useHTML) {
         return h('div', {
@@ -314,6 +316,7 @@ export default defineComponent({
     const renderVN = () => {
       const { theme, isArrow, enterable } = props
       const { tipActive, visible, tipStore } = reactData
+      const defaultSlot = slots.default
       const vSize = computeSize.value
       let ons
       if (enterable) {
@@ -339,8 +342,9 @@ export default defineComponent({
         h('div', {
           class: 'vxe-table--tooltip-arrow',
           style: tipStore.arrowStyle
-        })
-      ].concat(slots.default ? slots.default({}) : []))
+        }),
+        ...(defaultSlot ? getSlotVNs(defaultSlot({})) : [])
+      ])
     }
 
     $xetooltip.renderVN = renderVN

package/packages/v-x-e-table/src/conf.ts

@@ -1,6 +1,6 @@
 import { VXETableGlobalConfig } from '../../../types/all'
 
-const iconPrefix = 'vxe-icon--'
+const iconPrefix = 'vxe-icon-'
 
 const GlobalConfig: VXETableGlobalConfig = {
   size: null, // 全局尺寸
@@ -8,7 +8,7 @@ const GlobalConfig: VXETableGlobalConfig = {
   version: 0, // 版本号，对于某些带数据缓存的功能有用到，上升版本号可以用于重置数据
   // resizeInterval: 500,
   emptyCell: '　',
-  loadingText: null, // 自定义loading提示内容，如果为null则不显示文本
+  // loadingText: null, // 自定义loading提示内容，如果为null则不显示文本
   table: {
     fit: true,
     showHeader: true,
@@ -127,73 +127,78 @@ const GlobalConfig: VXETableGlobalConfig = {
   },
   icon: {
     // loading
-    // LOADING: iconPrefix + 'refresh roll vxe-loading--default-icon',
+    LOADING: iconPrefix + 'spinner roll vxe-loading--default-icon',
 
     // table
-    TABLE_SORT_ASC: iconPrefix + 'caret-top',
-    TABLE_SORT_DESC: iconPrefix + 'caret-bottom',
+    TABLE_SORT_ASC: iconPrefix + 'caret-up',
+    TABLE_SORT_DESC: iconPrefix + 'caret-down',
     TABLE_FILTER_NONE: iconPrefix + 'funnel',
     TABLE_FILTER_MATCH: iconPrefix + 'funnel',
-    TABLE_EDIT: iconPrefix + 'edit-outline',
-    TABLE_HELP: iconPrefix + 'question',
-    TABLE_TREE_LOADED: iconPrefix + 'refresh roll',
+    TABLE_EDIT: iconPrefix + 'edit',
+    TABLE_HELP: iconPrefix + 'question-circle-fill',
+    TABLE_TREE_LOADED: iconPrefix + 'spinner roll',
     TABLE_TREE_OPEN: iconPrefix + 'caret-right rotate90',
     TABLE_TREE_CLOSE: iconPrefix + 'caret-right',
-    TABLE_EXPAND_LOADED: iconPrefix + 'refresh roll',
+    TABLE_EXPAND_LOADED: iconPrefix + 'spinner roll',
     TABLE_EXPAND_OPEN: iconPrefix + 'arrow-right rotate90',
     TABLE_EXPAND_CLOSE: iconPrefix + 'arrow-right',
+    TABLE_CHECKBOX_CHECKED: iconPrefix + 'checkbox-checked',
+    TABLE_CHECKBOX_UNCHECKED: iconPrefix + 'checkbox-unchecked',
+    TABLE_CHECKBOX_INDETERMINATE: iconPrefix + 'checkbox-indeterminate',
+    TABLE_RADIO_CHECKED: iconPrefix + 'radio-checked',
+    TABLE_RADIO_UNCHECKED: iconPrefix + 'radio-unchecked',
 
     // button
-    BUTTON_DROPDOWN: iconPrefix + 'arrow-bottom',
-    BUTTON_LOADING: iconPrefix + 'refresh roll',
+    BUTTON_DROPDOWN: iconPrefix + 'arrow-down',
+    BUTTON_LOADING: iconPrefix + 'spinner roll',
 
     // select
-    SELECT_LOADED: iconPrefix + 'refresh roll',
-    SELECT_OPEN: iconPrefix + 'caret-bottom rotate180',
-    SELECT_CLOSE: iconPrefix + 'caret-bottom',
+    SELECT_LOADED: iconPrefix + 'spinner roll',
+    SELECT_OPEN: iconPrefix + 'caret-down rotate180',
+    SELECT_CLOSE: iconPrefix + 'caret-down',
 
     // pager
-    PAGER_JUMP_PREV: iconPrefix + 'd-arrow-left',
-    PAGER_JUMP_NEXT: iconPrefix + 'd-arrow-right',
+    PAGER_JUMP_PREV: iconPrefix + 'arrow-double-left',
+    PAGER_JUMP_NEXT: iconPrefix + 'arrow-double-right',
     PAGER_PREV_PAGE: iconPrefix + 'arrow-left',
     PAGER_NEXT_PAGE: iconPrefix + 'arrow-right',
-    PAGER_JUMP_MORE: iconPrefix + 'more',
+    PAGER_JUMP_MORE: iconPrefix + 'ellipsis-h',
 
     // input
-    INPUT_CLEAR: iconPrefix + 'close',
-    INPUT_PWD: iconPrefix + 'eye-slash',
-    INPUT_SHOW_PWD: iconPrefix + 'eye',
-    INPUT_PREV_NUM: iconPrefix + 'caret-top',
-    INPUT_NEXT_NUM: iconPrefix + 'caret-bottom',
+    INPUT_CLEAR: iconPrefix + 'error-circle-fill',
+    INPUT_PWD: iconPrefix + 'eye-fill',
+    INPUT_SHOW_PWD: iconPrefix + 'eye-fill-close',
+    INPUT_PREV_NUM: iconPrefix + 'caret-up',
+    INPUT_NEXT_NUM: iconPrefix + 'caret-down',
     INPUT_DATE: iconPrefix + 'calendar',
     INPUT_SEARCH: iconPrefix + 'search',
 
     // modal
     MODAL_ZOOM_IN: iconPrefix + 'square',
-    MODAL_ZOOM_OUT: iconPrefix + 'zoomout',
+    MODAL_ZOOM_OUT: iconPrefix + 'maximize',
     MODAL_CLOSE: iconPrefix + 'close',
-    MODAL_INFO: iconPrefix + 'info',
-    MODAL_SUCCESS: iconPrefix + 'success',
-    MODAL_WARNING: iconPrefix + 'warning',
-    MODAL_ERROR: iconPrefix + 'error',
-    MODAL_QUESTION: iconPrefix + 'question',
-    MODAL_LOADING: iconPrefix + 'refresh roll',
+    MODAL_INFO: iconPrefix + 'info-circle-fill',
+    MODAL_SUCCESS: iconPrefix + 'success-circle-fill',
+    MODAL_WARNING: iconPrefix + 'warnion-circle-fill',
+    MODAL_ERROR: iconPrefix + 'error-circle-fill',
+    MODAL_QUESTION: iconPrefix + 'question-circle-fill',
+    MODAL_LOADING: iconPrefix + 'spinner roll',
 
     // toolbar
-    TOOLBAR_TOOLS_REFRESH: iconPrefix + 'refresh',
-    TOOLBAR_TOOLS_REFRESH_LOADING: iconPrefix + 'refresh roll',
+    TOOLBAR_TOOLS_REFRESH: iconPrefix + 'repeat',
+    TOOLBAR_TOOLS_REFRESH_LOADING: iconPrefix + 'repeat roll',
     TOOLBAR_TOOLS_IMPORT: iconPrefix + 'upload',
     TOOLBAR_TOOLS_EXPORT: iconPrefix + 'download',
     TOOLBAR_TOOLS_PRINT: iconPrefix + 'print',
-    TOOLBAR_TOOLS_ZOOM_IN: iconPrefix + 'zoomin',
-    TOOLBAR_TOOLS_ZOOM_OUT: iconPrefix + 'zoomout',
-    TOOLBAR_TOOLS_CUSTOM: iconPrefix + 'menu',
+    TOOLBAR_TOOLS_FULLSCREEN: iconPrefix + 'fullscreen',
+    TOOLBAR_TOOLS_MINIMIZE: iconPrefix + 'minimize',
+    TOOLBAR_TOOLS_CUSTOM: iconPrefix + 'custom-column',
 
     // form
-    FORM_PREFIX: iconPrefix + 'question',
-    FORM_SUFFIX: iconPrefix + 'question',
-    FORM_FOLDING: iconPrefix + 'arrow-top rotate180',
-    FORM_UNFOLDING: iconPrefix + 'arrow-top'
+    FORM_PREFIX: iconPrefix + 'question-circle-fill',
+    FORM_SUFFIX: iconPrefix + 'question-circle-fill',
+    FORM_FOLDING: iconPrefix + 'arrow-up rotate180',
+    FORM_UNFOLDING: iconPrefix + 'arrow-up'
   },
   grid: {
     // size: null,

package/styles/base/checked.scss

@@ -1,179 +1,75 @@
-// 单选框和复选框
-%RadioAndCheckboxSpan {
-  position: relative;
-  user-select: none;
-  cursor: pointer;
-}
-%RadioAndCheckboxIcon {
-  display: none;
-  position: absolute;
-  height: 1em;
-  width: 1em;
-}
-
-%XERadio {
-  @extend %RadioAndCheckboxSpan;
-  .vxe-radio--icon {
-    @extend %RadioAndCheckboxIcon;
-    font-size: $vxe-radio-font-size-default;
-    &:before {
-      content: "";
-      position: absolute;
-      height: 1em;
-      width: 1em;
-      top: 0;
-      left: 0;
-      border: $vxe-radio-border-width solid $vxe-input-border-color;
-      background-color: $vxe-radio-icon-background-color;
-      border-radius: 50%;
-    }
-  }
-  .vxe-radio--unchecked-icon {
-    display: inline-block;
+%XECheckboxIcon {
+  .vxe-checkbox--icon {
+    font-size: 1.16em;
   }
-  .vxe-radio--checked-icon {
-    &:after {
-      content: "";
-      position: absolute;
-      height: 0.25em;
-      width: 0.25em;
-      top: 0.4em;
-      left: 0.4em;
-      border-radius: 50%;
-      background-color: $vxe-radio-checked-icon-background-color;
-    }
+  .vxe-checkbox--icon {
+    color: $vxe-input-border-color;
+    vertical-align: middle;
+    font-weight: 700;
+    user-select: none;
   }
-  &.is--checked {
+  &.is--checked,
+  &.is--indeterminate {
     color: $vxe-primary-color;
-    .vxe-radio--unchecked-icon {
-      display: none;
-    }
-    .vxe-radio--checked-icon {
-      display: inline-block;
-      &:before {
-        border-color: $vxe-primary-color;
-        background-color: $vxe-primary-color;
-      }
+    .vxe-checkbox--icon {
+      color: $vxe-primary-color;
     }
   }
   &:not(.is--disabled) {
+    cursor: pointer;
     &:hover {
-      .vxe-radio--icon {
-        &:before {
-          border-color: $vxe-primary-color;
-        }
+      .vxe-checkbox--icon {
+        color: $vxe-primary-color;
       }
     }
   }
   &.is--disabled {
-    cursor: not-allowed;
     color: $vxe-disabled-color;
-    .vxe-radio--icon {
-      &:before {
-        border-color: $vxe-input-disabled-color;
-        background-color: $vxe-input-disabled-background-color;
-      }
-      &:after {
-        background-color: $vxe-primary-disabled-color;
-      }
+    cursor: not-allowed;
+    .vxe-checkbox--icon {
+      color: $vxe-input-disabled-color;
     }
   }
+  .vxe-checkbox--label {
+    padding-left: 0.5em;
+    vertical-align: middle;
+  }
 }
 
-%XECheckbox {
-  @extend %RadioAndCheckboxSpan;
-  .vxe-checkbox--icon {
-    @extend %RadioAndCheckboxIcon;
-    font-size: $vxe-checkbox-font-size-default;
-    &:before {
-      content: "";
-      position: absolute;
-      height: 1em;
-      width: 1em;
-      top: 0;
-      left: 0;
-      background-color: $vxe-checkbox-icon-background-color;
-      border-radius: $vxe-checkbox-border-radius;
-      border: $vxe-checkbox-border-width solid $vxe-input-border-color;
-    }
-  }
-  .vxe-checkbox--unchecked-icon {
-    display: inline-block;
-  }
-  .vxe-checkbox--checked-icon {
-    &:after {
-      content: "";
-      position: absolute;
-      height: $vxe-checkbox-checked-height;
-      width: $vxe-checkbox-checked-width;
-      top: 50%;
-      left: 50%;
-      border: $vxe-checkbox-border-width solid $vxe-checkbox-checked-icon-border-color;
-      border-left: 0;
-      border-top: 0;
-      transform: translate(-50%, -50%) rotate(45deg);
-    }
-  }
-  .vxe-checkbox--indeterminate-icon {
-    &:after {
-      content: "";
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      height: $vxe-checkbox-indeterminate-height;
-      width: $vxe-checkbox-indeterminate-width;
-      background-color: $vxe-checkbox-indeterminate-icon-background-color;
-      transform: translate(-50%, -50%);
-    }
+%XERadioIcon {
+  cursor: pointer;
+  .vxe-radio--icon {
+    font-size: 1.34em;
   }
-  &.is--checked,
-  &.is--indeterminate {
-    color: $vxe-primary-color;
-    .vxe-checkbox--unchecked-icon {
-      display: none;
-    }
-    .vxe-checkbox--icon {
-      &:before {
-        border-color: $vxe-primary-color;
-        background-color: $vxe-primary-color;
-      }
-    }
+  .vxe-radio--icon {
+    color: $vxe-input-border-color;
+    vertical-align: middle;
+    font-weight: 700;
+    user-select: none;
   }
   &.is--checked {
-    .vxe-checkbox--checked-icon {
-      display: inline-block;
-    }
-  }
-  &.is--indeterminate {
-    .vxe-checkbox--indeterminate-icon {
-      display: inline-block;
+    color: $vxe-primary-color;
+    .vxe-radio--icon {
+      color: $vxe-primary-color;
     }
   }
   &:not(.is--disabled) {
+    cursor: pointer;
     &:hover {
-      .vxe-checkbox--icon {
-        &:before {
-          border-color: $vxe-primary-color;
-        }
+      .vxe-radio--icon {
+        color: $vxe-primary-color;
       }
     }
   }
   &.is--disabled {
-    cursor: not-allowed;
     color: $vxe-disabled-color;
-    .vxe-checkbox--icon {
-      &:before {
-        border-color: $vxe-input-disabled-color;
-        background-color: $vxe-input-disabled-background-color;
-      }
-      &:after {
-        border-color: $vxe-primary-disabled-color;
-      }
-    }
-    .vxe-checkbox--indeterminate-icon {
-      &:after {
-        background-color: $vxe-primary-disabled-color;
-      }
+    cursor: not-allowed;
+    .vxe-radio--icon {
+      color: $vxe-input-disabled-color;
     }
   }
+  .vxe-radio--label {
+    padding-left: 0.5em;
+    vertical-align: middle;
+  }
 }