vxe-pc-ui 0.0.2 → 0.1.0

package/lib/vxe-textarea/style/style.css

@@ -0,0 +1,102 @@
+.vxe-textarea {
+  position: relative;
+  display: inline-block;
+}
+.vxe-textarea:not(.def--cols) {
+  width: 100%;
+}
+.vxe-textarea:not(.def--cols) .vxe-textarea--inner {
+  width: 100%;
+}
+
+.vxe-textarea--inner {
+  border-radius: var(--vxe-border-radius);
+  outline: 0;
+  font-size: inherit;
+  padding: 0 0.6em;
+  color: var(--vxe-font-color);
+  line-height: inherit;
+  border: 1px solid var(--vxe-ui-input-border-color);
+  background-color: var(--vxe-ui-textarea-background-color);
+  display: block;
+  padding: 0.3em 0.6em;
+}
+.vxe-textarea--inner::-moz-placeholder {
+  color: var(--vxe-ui-input-placeholder-color);
+}
+.vxe-textarea--inner::placeholder {
+  color: var(--vxe-ui-input-placeholder-color);
+}
+.vxe-textarea--inner:focus {
+  border: 1px solid var(--vxe-primary-color);
+}
+.vxe-textarea--inner[disabled] {
+  cursor: not-allowed;
+  background-color: var(--vxe-ui-input-disabled-background-color);
+}
+
+.vxe-textarea--inner,
+.vxe-textarea--autosize {
+  line-height: var(--vxe-ui-textarea-line-height);
+  color: var(--vxe-font-color);
+  font-family: var(--vxe-font-family);
+}
+
+.vxe-textarea--autosize {
+  display: block;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  margin: 0;
+  padding: 0.3em 0.6em;
+  word-wrap: break-word;
+  white-space: pre-wrap;
+  z-index: -1;
+  visibility: hidden;
+}
+
+.vxe-textarea--count {
+  position: absolute;
+  bottom: 0.2em;
+  right: 1.4em;
+  padding-left: 0.2em;
+  color: var(--vxe-ui-input-count-color);
+  background-color: var(--vxe-ui-input-count-background-color);
+}
+.vxe-textarea--count.is--error {
+  color: var(--vxe-ui-input-count-error-color);
+}
+
+.vxe-textarea,
+.vxe-textarea--autosize {
+  font-size: var(--vxe-font-size);
+}
+.vxe-textarea.size--medium,
+.vxe-textarea--autosize.size--medium {
+  font-size: var(--vxe-font-size-medium);
+}
+.vxe-textarea.size--small,
+.vxe-textarea--autosize.size--small {
+  font-size: var(--vxe-font-size-small);
+}
+.vxe-textarea.size--mini,
+.vxe-textarea--autosize.size--mini {
+  font-size: var(--vxe-font-size-mini);
+}
+
+.vxe-textarea:not(.is--autosize) {
+  min-height: var(--vxe-ui-input-height-default);
+}
+.vxe-textarea.size--medium {
+  font-size: var(--vxe-font-size-medium);
+}
+.vxe-textarea.size--medium:not(.is--autosize) {
+  min-height: var(--vxe-ui-input-height-medium);
+}
+.vxe-textarea.size--small:not(.is--autosize) {
+  min-height: var(--vxe-ui-input-height-small);
+}
+.vxe-textarea.size--mini:not(.is--autosize) {
+  min-height: var(--vxe-ui-input-height-mini);
+}

package/lib/vxe-textarea/style/style.min.css

@@ -0,0 +1 @@
+.vxe-textarea{position:relative;display:inline-block}.vxe-textarea:not(.def--cols){width:100%}.vxe-textarea:not(.def--cols) .vxe-textarea--inner{width:100%}.vxe-textarea--inner{border-radius:var(--vxe-border-radius);outline:0;font-size:inherit;padding:0 .6em;color:var(--vxe-font-color);line-height:inherit;border:1px solid var(--vxe-ui-input-border-color);background-color:var(--vxe-ui-textarea-background-color);display:block;padding:.3em .6em}.vxe-textarea--inner::-moz-placeholder{color:var(--vxe-ui-input-placeholder-color)}.vxe-textarea--inner::placeholder{color:var(--vxe-ui-input-placeholder-color)}.vxe-textarea--inner:focus{border:1px solid var(--vxe-primary-color)}.vxe-textarea--inner[disabled]{cursor:not-allowed;background-color:var(--vxe-ui-input-disabled-background-color)}.vxe-textarea--autosize,.vxe-textarea--inner{line-height:var(--vxe-ui-textarea-line-height);color:var(--vxe-font-color);font-family:var(--vxe-font-family)}.vxe-textarea--autosize{display:block;position:fixed;top:0;left:0;width:100%;margin:0;padding:.3em .6em;word-wrap:break-word;white-space:pre-wrap;z-index:-1;visibility:hidden}.vxe-textarea--count{position:absolute;bottom:.2em;right:1.4em;padding-left:.2em;color:var(--vxe-ui-input-count-color);background-color:var(--vxe-ui-input-count-background-color)}.vxe-textarea--count.is--error{color:var(--vxe-ui-input-count-error-color)}.vxe-textarea,.vxe-textarea--autosize{font-size:var(--vxe-font-size)}.vxe-textarea--autosize.size--medium,.vxe-textarea.size--medium{font-size:var(--vxe-font-size-medium)}.vxe-textarea--autosize.size--small,.vxe-textarea.size--small{font-size:var(--vxe-font-size-small)}.vxe-textarea--autosize.size--mini,.vxe-textarea.size--mini{font-size:var(--vxe-font-size-mini)}.vxe-textarea:not(.is--autosize){min-height:var(--vxe-ui-input-height-default)}.vxe-textarea.size--medium{font-size:var(--vxe-font-size-medium)}.vxe-textarea.size--medium:not(.is--autosize){min-height:var(--vxe-ui-input-height-medium)}.vxe-textarea.size--small:not(.is--autosize){min-height:var(--vxe-ui-input-height-small)}.vxe-textarea.size--mini:not(.is--autosize){min-height:var(--vxe-ui-input-height-mini)}

package/lib/vxe-tooltip/index.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {};
+exports.default = void 0;
+var _tooltip = _interopRequireWildcard(require("../tooltip"));
+Object.keys(_tooltip).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _tooltip[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _tooltip[key];
+    }
+  });
+});
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var _default = exports.default = _tooltip.default;

package/lib/vxe-tooltip/index.min.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var _exportNames={},_tooltip=(exports.default=void 0,_interopRequireWildcard(require("../tooltip")));function _getRequireWildcardCache(e){var t,r;return"function"!=typeof WeakMap?null:(t=new WeakMap,r=new WeakMap,(_getRequireWildcardCache=function(e){return e?r:t})(e))}function _interopRequireWildcard(e,t){if(!t&&e&&e.__esModule)return e;if(null===e||"object"!=typeof e&&"function"!=typeof e)return{default:e};t=_getRequireWildcardCache(t);if(t&&t.has(e))return t.get(e);var r,o,n={__proto__:null},i=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(r in e)"default"!==r&&{}.hasOwnProperty.call(e,r)&&((o=i?Object.getOwnPropertyDescriptor(e,r):null)&&(o.get||o.set)?Object.defineProperty(n,r,o):n[r]=e[r]);return n.default=e,t&&t.set(e,n),n}Object.keys(_tooltip).forEach(function(e){"default"===e||"__esModule"===e||Object.prototype.hasOwnProperty.call(_exportNames,e)||e in exports&&exports[e]===_tooltip[e]||Object.defineProperty(exports,e,{enumerable:!0,get:function(){return _tooltip[e]}})});var _default=exports.default=_tooltip.default;

package/lib/vxe-tooltip/style/index.js

@@ -0,0 +1 @@
+require('./style.css')

package/lib/vxe-tooltip/style/style.css

@@ -0,0 +1,103 @@
+.vxe-table--tooltip-wrapper {
+  display: none;
+  position: absolute;
+  top: -100%;
+  left: -100%;
+  font-size: 12px;
+  max-width: 600px;
+  border-radius: var(--vxe-ui-border-radius);
+  padding: 8px 12px;
+  white-space: normal;
+  word-break: break-word;
+  box-shadow: 2px 2px 4px -2px rgba(0, 0, 0, 0.2);
+  color: var(--vxe-ui-font-color);
+  font-family: var(--vxe-ui-font-family);
+}
+.vxe-table--tooltip-wrapper:not(.is--enterable) {
+  pointer-events: none;
+}
+.vxe-table--tooltip-wrapper.is--visible {
+  display: block;
+}
+.vxe-table--tooltip-wrapper.is--arrow .vxe-table--tooltip-arrow {
+  display: block;
+}
+.vxe-table--tooltip-wrapper.is--enterable:after {
+  content: "";
+  position: absolute;
+  left: 0;
+  width: 100%;
+  height: 6px;
+  background-color: transparent;
+}
+.vxe-table--tooltip-wrapper .vxe-table--tooltip-content {
+  white-space: pre-line;
+}
+.vxe-table--tooltip-wrapper .vxe-table--tooltip-arrow {
+  display: none;
+  position: absolute;
+  border-color: transparent;
+  border-width: 6px;
+  border-style: solid;
+  left: 50%;
+  transform: translateX(-6px);
+}
+.vxe-table--tooltip-wrapper .vxe-table--tooltip-arrow:before {
+  content: "";
+  position: absolute;
+  border-color: transparent;
+  border-width: 5px;
+  border-style: solid;
+  left: -5px;
+}
+.vxe-table--tooltip-wrapper.placement--top.is--enterable:after {
+  bottom: -6px;
+}
+.vxe-table--tooltip-wrapper.placement--top .vxe-table--tooltip-arrow {
+  bottom: -12px;
+}
+.vxe-table--tooltip-wrapper.placement--top .vxe-table--tooltip-arrow:before {
+  top: -7px;
+}
+.vxe-table--tooltip-wrapper.placement--bottom.is--enterable:after {
+  top: -6px;
+}
+.vxe-table--tooltip-wrapper.placement--bottom .vxe-table--tooltip-arrow {
+  top: -12px;
+}
+.vxe-table--tooltip-wrapper.placement--bottom .vxe-table--tooltip-arrow:before {
+  top: -4px;
+}
+
+.vxe-table--tooltip-wrapper.theme--light {
+  background-color: var(--vxe-ui-tooltip-light-background-color);
+  border: 1px solid var(--vxe-ui-input-border-color);
+}
+.vxe-table--tooltip-wrapper.theme--light.placement--top .vxe-table--tooltip-arrow {
+  border-top-color: var(--vxe-ui-input-border-color);
+}
+.vxe-table--tooltip-wrapper.theme--light.placement--top .vxe-table--tooltip-arrow:before {
+  border-top-color: var(--vxe-ui-tooltip-light-background-color);
+}
+.vxe-table--tooltip-wrapper.theme--light.placement--bottom .vxe-table--tooltip-arrow {
+  border-bottom-color: var(--vxe-ui-input-border-color);
+}
+.vxe-table--tooltip-wrapper.theme--light.placement--bottom .vxe-table--tooltip-arrow:before {
+  border-bottom-color: var(--vxe-ui-tooltip-light-background-color);
+}
+.vxe-table--tooltip-wrapper.theme--dark {
+  background: var(--vxe-ui-tooltip-dark-background-color);
+  color: var(--vxe-ui-tooltip-dark-color);
+}
+.vxe-table--tooltip-wrapper.theme--dark.placement--top .vxe-table--tooltip-arrow {
+  border-top-color: var(--vxe-ui-tooltip-dark-background-color);
+}
+.vxe-table--tooltip-wrapper.theme--dark.placement--top .vxe-table--tooltip-arrow:before {
+  border-top-color: var(--vxe-ui-tooltip-dark-background-color);
+}
+.vxe-table--tooltip-wrapper.theme--dark.placement--bottom .vxe-table--tooltip-arrow {
+  border-bottom-color: var(--vxe-ui-tooltip-dark-background-color);
+}
+.vxe-table--tooltip-wrapper.theme--dark.placement--bottom .vxe-table--tooltip-arrow:before {
+  border-bottom-color: var(--vxe-ui-tooltip-dark-background-color);
+}

package/lib/vxe-tooltip/style/style.min.css

@@ -0,0 +1 @@
+.vxe-table--tooltip-wrapper{display:none;position:absolute;top:-100%;left:-100%;font-size:12px;max-width:600px;border-radius:var(--vxe-ui-border-radius);padding:8px 12px;white-space:normal;word-break:break-word;box-shadow:2px 2px 4px -2px rgba(0,0,0,.2);color:var(--vxe-ui-font-color);font-family:var(--vxe-ui-font-family)}.vxe-table--tooltip-wrapper:not(.is--enterable){pointer-events:none}.vxe-table--tooltip-wrapper.is--visible{display:block}.vxe-table--tooltip-wrapper.is--arrow .vxe-table--tooltip-arrow{display:block}.vxe-table--tooltip-wrapper.is--enterable:after{content:"";position:absolute;left:0;width:100%;height:6px;background-color:transparent}.vxe-table--tooltip-wrapper .vxe-table--tooltip-content{white-space:pre-line}.vxe-table--tooltip-wrapper .vxe-table--tooltip-arrow{display:none;position:absolute;border-color:transparent;border-width:6px;border-style:solid;left:50%;transform:translateX(-6px)}.vxe-table--tooltip-wrapper .vxe-table--tooltip-arrow:before{content:"";position:absolute;border-color:transparent;border-width:5px;border-style:solid;left:-5px}.vxe-table--tooltip-wrapper.placement--top.is--enterable:after{bottom:-6px}.vxe-table--tooltip-wrapper.placement--top .vxe-table--tooltip-arrow{bottom:-12px}.vxe-table--tooltip-wrapper.placement--top .vxe-table--tooltip-arrow:before{top:-7px}.vxe-table--tooltip-wrapper.placement--bottom.is--enterable:after{top:-6px}.vxe-table--tooltip-wrapper.placement--bottom .vxe-table--tooltip-arrow{top:-12px}.vxe-table--tooltip-wrapper.placement--bottom .vxe-table--tooltip-arrow:before{top:-4px}.vxe-table--tooltip-wrapper.theme--light{background-color:var(--vxe-ui-tooltip-light-background-color);border:1px solid var(--vxe-ui-input-border-color)}.vxe-table--tooltip-wrapper.theme--light.placement--top .vxe-table--tooltip-arrow{border-top-color:var(--vxe-ui-input-border-color)}.vxe-table--tooltip-wrapper.theme--light.placement--top .vxe-table--tooltip-arrow:before{border-top-color:var(--vxe-ui-tooltip-light-background-color)}.vxe-table--tooltip-wrapper.theme--light.placement--bottom .vxe-table--tooltip-arrow{border-bottom-color:var(--vxe-ui-input-border-color)}.vxe-table--tooltip-wrapper.theme--light.placement--bottom .vxe-table--tooltip-arrow:before{border-bottom-color:var(--vxe-ui-tooltip-light-background-color)}.vxe-table--tooltip-wrapper.theme--dark{background:var(--vxe-ui-tooltip-dark-background-color);color:var(--vxe-ui-tooltip-dark-color)}.vxe-table--tooltip-wrapper.theme--dark.placement--top .vxe-table--tooltip-arrow{border-top-color:var(--vxe-ui-tooltip-dark-background-color)}.vxe-table--tooltip-wrapper.theme--dark.placement--top .vxe-table--tooltip-arrow:before{border-top-color:var(--vxe-ui-tooltip-dark-background-color)}.vxe-table--tooltip-wrapper.theme--dark.placement--bottom .vxe-table--tooltip-arrow{border-bottom-color:var(--vxe-ui-tooltip-dark-background-color)}.vxe-table--tooltip-wrapper.theme--dark.placement--bottom .vxe-table--tooltip-arrow:before{border-bottom-color:var(--vxe-ui-tooltip-dark-background-color)}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vxe-pc-ui",
-  "version": "0.0.2",
+  "version": "0.1.0",
   "description": "一个基于 vue 的 PC 端组件库",
   "scripts": {
     "update": "npm install --legacy-peer-deps",

package/packages/anchor/src/anchor.ts

@@ -1,7 +1,7 @@
 import { defineComponent, ref, h, reactive, PropType, VNode, provide, nextTick, onBeforeUnmount, onMounted, watch, createCommentVNode, computed } from 'vue'
 import XEUtils from 'xe-utils'
 import { getOffsetPos } from '../../ui/src/dom'
-import VxeAnchorLinkComponent from '../../anchor-link/src/anchor-link'
+import VxeAnchorLinkComponent from './anchor-link'
 
 import { VxeAnchorPropTypes, AnchorReactData, AnchorPrivateRef, VxeAnchorPrivateComputed, VxeAnchorConstructor, VxeAnchorPrivateMethods, AnchorMethods, AnchorPrivateMethods } from '../../../types'
 

package/packages/anchor-link/index.ts

@@ -1,5 +1,5 @@
 import { App } from 'vue'
-import VxeAnchorLinkComponent from './src/anchor-link'
+import VxeAnchorLinkComponent from '../anchor/src/anchor-link'
 
 const VxeAnchorLink = Object.assign({}, VxeAnchorLinkComponent, {
   install (app: App) {

package/packages/{button-group → button}/src/button-group.ts

@@ -1,5 +1,5 @@
 import { defineComponent, h, provide, PropType } from 'vue'
-import globalConfigStore from '../../ui/src/globalStore'
+import { getConfig } from '../../ui/src/core'
 import XEUtils from 'xe-utils'
 import VxeButtonComponent from '../../button/src/button'
 import { useSize } from '../../hooks/size'
@@ -16,7 +16,7 @@ export default defineComponent({
     circle: Boolean as PropType<VxeButtonGroupPropTypes.Circle>,
     className: [String, Function] as PropType<VxeButtonGroupPropTypes.ClassName>,
     disabled: Boolean as PropType<VxeButtonGroupPropTypes.Disabled>,
-    size: { type: String as PropType<VxeButtonGroupPropTypes.Size>, default: () => globalConfigStore.buttonGroup.size || globalConfigStore.size }
+    size: { type: String as PropType<VxeButtonGroupPropTypes.Size>, default: () => getConfig('buttonGroup.size') || getConfig('size') }
   },
   emits: [
     'click'

package/packages/button/src/button.ts

@@ -1,6 +1,6 @@
 import { defineComponent, h, ref, Ref, computed, Teleport, VNode, onUnmounted, reactive, nextTick, PropType, onMounted, inject } from 'vue'
 import XEUtils from 'xe-utils'
-import globalConfigStore from '../../ui/src/globalStore'
+import { getConfig } from '../../ui/src/core'
 import iconConfigStore from '../../ui/src/iconStore'
 import { useSize } from '../../hooks/size'
 import { getAbsolutePos, getEventTargetNode } from '../../ui/src/dom'
@@ -23,7 +23,7 @@ export default defineComponent({
     /**
      * 按钮尺寸
      */
-    size: { type: String as PropType<VxeButtonPropTypes.Size>, default: () => globalConfigStore.button.size || globalConfigStore.size },
+    size: { type: String as PropType<VxeButtonPropTypes.Size>, default: () => getConfig('button.size') || getConfig('size') },
     /**
      * 用来标识这一项
      */
@@ -71,7 +71,7 @@ export default defineComponent({
     /**
      * 是否将弹框容器插入于 body 内
      */
-    transfer: { type: Boolean as PropType<VxeButtonPropTypes.Transfer>, default: () => globalConfigStore.button.transfer }
+    transfer: { type: Boolean as PropType<VxeButtonPropTypes.Transfer>, default: () => getConfig('button.transfer') }
   },
   emits: [
     'click',

package/packages/button-group/index.ts

@@ -1,5 +1,5 @@
 import { App } from 'vue'
-import VxeButtonGroupComponent from './src/button-group'
+import VxeButtonGroupComponent from '../button/src/button-group'
 
 const VxeButtonGroup = Object.assign({}, VxeButtonGroupComponent, {
   install (app: App) {

package/packages/checkbox/index.ts

@@ -0,0 +1,15 @@
+import { App } from 'vue'
+import VxeCheckboxComponent from './src/checkbox'
+import { dynamicApp } from '../dynamics'
+
+export const VxeCheckbox = Object.assign(VxeCheckboxComponent, {
+  install (app: App) {
+    app.component(VxeCheckboxComponent.name, VxeCheckboxComponent)
+  }
+})
+
+export const Checkbox = VxeCheckbox
+
+dynamicApp.component(VxeCheckboxComponent.name, VxeCheckboxComponent)
+
+export default VxeCheckbox

package/packages/checkbox/src/checkbox.ts

@@ -0,0 +1,131 @@
+import { defineComponent, h, computed, inject, PropType } from 'vue'
+import XEUtils from 'xe-utils'
+import { getFuncText } from '../../ui/src/utils'
+import globalConfigStore from '../../ui/src/globalStore'
+import { useSize } from '../../hooks/size'
+
+import { VxeCheckboxConstructor, VxeCheckboxGroupConstructor, VxeCheckboxEmits, VxeCheckboxGroupPrivateMethods, CheckboxMethods, VxeCheckboxPropTypes, VxeFormConstructor, VxeFormPrivateMethods, VxeFormDefines } from '../../../types'
+
+export default defineComponent({
+  name: 'VxeCheckbox',
+  props: {
+    modelValue: [String, Number, Boolean] as PropType<VxeCheckboxPropTypes.ModelValue>,
+    label: { type: [String, Number] as PropType<VxeCheckboxPropTypes.Label>, default: null },
+    indeterminate: Boolean as PropType<VxeCheckboxPropTypes.Indeterminate>,
+    title: [String, Number] as PropType<VxeCheckboxPropTypes.Title>,
+    checkedValue: { type: [String, Number, Boolean] as PropType<VxeCheckboxPropTypes.CheckedValue>, default: true },
+    uncheckedValue: { type: [String, Number, Boolean] as PropType<VxeCheckboxPropTypes.UncheckedValue>, default: false },
+    content: [String, Number] as PropType<VxeCheckboxPropTypes.Content>,
+    disabled: Boolean as PropType<VxeCheckboxPropTypes.Disabled>,
+    size: { type: String as PropType<VxeCheckboxPropTypes.Size>, default: () => globalConfigStore.checkbox.size || globalConfigStore.size }
+  },
+  emits: [
+    'update:modelValue',
+    'change'
+  ] as VxeCheckboxEmits,
+  setup (props, context) {
+    const { slots, emit } = context
+    const $xeform = inject<VxeFormConstructor & VxeFormPrivateMethods | null>('$xeForm', null)
+    const $xeformiteminfo = inject<VxeFormDefines.ProvideItemInfo | null>('$xeFormItemInfo', null)
+
+    const xID = XEUtils.uniqueId()
+
+    const $xecheckbox = {
+      xID,
+      props,
+      context
+    } as unknown as VxeCheckboxConstructor
+
+    let checkboxMethods = {} as CheckboxMethods
+
+    const computeSize = useSize(props)
+
+    const $xecheckboxgroup = inject('$xecheckboxgroup', null as (VxeCheckboxGroupConstructor & VxeCheckboxGroupPrivateMethods) | null)
+
+    const computeIsChecked = computed(() => {
+      if ($xecheckboxgroup) {
+        return XEUtils.includes($xecheckboxgroup.props.modelValue, props.label)
+      }
+      return props.modelValue === props.checkedValue
+    })
+
+    const computeIsDisabled = computed(() => {
+      if (props.disabled) {
+        return true
+      }
+      if ($xecheckboxgroup) {
+        const { props: groupProps } = $xecheckboxgroup
+        const { computeIsMaximize } = $xecheckboxgroup.getComputeMaps()
+        const isMaximize = computeIsMaximize.value
+        const isChecked = computeIsChecked.value
+        return groupProps.disabled || (isMaximize && !isChecked)
+      }
+      return false
+    })
+
+    const changeEvent = (evnt: Event & { target: { checked: boolean } }) => {
+      const { checkedValue, uncheckedValue } = props
+      const isDisabled = computeIsDisabled.value
+      if (!isDisabled) {
+        const checked = evnt.target.checked
+        const value = checked ? checkedValue : uncheckedValue
+        const params = { checked, value, label: props.label }
+        if ($xecheckboxgroup) {
+          $xecheckboxgroup.handleChecked(params, evnt)
+        } else {
+          emit('update:modelValue', value)
+          checkboxMethods.dispatchEvent('change', params, evnt)
+          // 自动更新校验状态
+          if ($xeform && $xeformiteminfo) {
+            $xeform.triggerItemEvent(evnt, $xeformiteminfo.itemConfig.field, value)
+          }
+        }
+      }
+    }
+
+    checkboxMethods = {
+      dispatchEvent (type, params, evnt) {
+        emit(type, Object.assign({ $checkbox: $xecheckbox, $event: evnt }, params))
+      }
+    }
+
+    Object.assign($xecheckbox, checkboxMethods)
+
+    const renderVN = () => {
+      const vSize = computeSize.value
+      const isDisabled = computeIsDisabled.value
+      const isChecked = computeIsChecked.value
+      const indeterminate = props.indeterminate
+      return h('label', {
+        class: ['vxe-checkbox', {
+          [`size--${vSize}`]: vSize,
+          'is--indeterminate': indeterminate,
+          'is--disabled': isDisabled,
+          'is--checked': isChecked
+        }],
+        title: props.title
+      }, [
+        h('input', {
+          class: 'vxe-checkbox--input',
+          type: 'checkbox',
+          disabled: isDisabled,
+          checked: isChecked,
+          onChange: changeEvent
+        }),
+        h('span', {
+          class: ['vxe-checkbox--icon', indeterminate ? 'vxe-icon-checkbox-indeterminate' : (isChecked ? 'vxe-icon-checkbox-checked' : 'vxe-icon-checkbox-unchecked')]
+        }),
+        h('span', {
+          class: 'vxe-checkbox--label'
+        }, slots.default ? slots.default({}) : getFuncText(props.content))
+      ])
+    }
+
+    $xecheckbox.renderVN = renderVN
+
+    return $xecheckbox
+  },
+  render () {
+    return this.renderVN()
+  }
+})

package/packages/checkbox/src/group.ts

@@ -0,0 +1,127 @@
+import { defineComponent, h, provide, PropType, computed, inject } from 'vue'
+import globalConfigStore from '../../ui/src/globalStore'
+import XEUtils from 'xe-utils'
+import VxeCheckboxComponent from './checkbox'
+import { useSize } from '../../hooks/size'
+
+import { VxeCheckboxGroupConstructor, VxeCheckboxGroupEmits, VxeCheckboxGroupPrivateMethods, CheckboxGroupPrivateMethods, CheckboxPrivateComputed, CheckboxGroupMethods, VxeCheckboxGroupPropTypes, VxeFormConstructor, VxeFormPrivateMethods, VxeFormDefines } from '../../../types'
+
+export default defineComponent({
+  name: 'VxeCheckboxGroup',
+  props: {
+    modelValue: Array as PropType<VxeCheckboxGroupPropTypes.ModelValue>,
+    options: Array as PropType<VxeCheckboxGroupPropTypes.Options>,
+    optionProps: Object as PropType<VxeCheckboxGroupPropTypes.OptionProps>,
+    disabled: Boolean as PropType<VxeCheckboxGroupPropTypes.Disabled>,
+    max: { type: [String, Number] as PropType<VxeCheckboxGroupPropTypes.Max>, default: null },
+    size: { type: String as PropType<VxeCheckboxGroupPropTypes.Size>, default: () => globalConfigStore.checkboxGroup.size || globalConfigStore.size }
+  },
+  emits: [
+    'update:modelValue',
+    'change'
+  ] as VxeCheckboxGroupEmits,
+  setup (props, context) {
+    const { slots, emit } = context
+    const $xeform = inject<VxeFormConstructor & VxeFormPrivateMethods | null>('$xeForm', null)
+    const $xeformiteminfo = inject<VxeFormDefines.ProvideItemInfo | null>('$xeFormItemInfo', null)
+
+    const xID = XEUtils.uniqueId()
+
+    const computeIsMaximize = computed(() => {
+      const { modelValue, max } = props
+      if (max) {
+        return (modelValue ? modelValue.length : 0) >= XEUtils.toNumber(max)
+      }
+      return false
+    })
+
+    const computePropsOpts = computed(() => {
+      return props.optionProps || {}
+    })
+
+    const computeLabelField = computed(() => {
+      const propsOpts = computePropsOpts.value
+      return propsOpts.label || 'label'
+    })
+
+    const computeValueField = computed(() => {
+      const propsOpts = computePropsOpts.value
+      return propsOpts.value || 'value'
+    })
+
+    const computeDisabledField = computed(() => {
+      const propsOpts = computePropsOpts.value
+      return propsOpts.disabled || 'disabled'
+    })
+
+    const computeMaps: CheckboxPrivateComputed = {
+      computeIsMaximize
+    }
+
+    const $xecheckboxgroup = {
+      xID,
+      props,
+      context,
+
+      getComputeMaps: () => computeMaps
+    } as unknown as VxeCheckboxGroupConstructor & VxeCheckboxGroupPrivateMethods
+
+    useSize(props)
+
+    const checkboxGroupMethods: CheckboxGroupMethods = {
+      dispatchEvent (type, params, evnt) {
+        emit(type, Object.assign({ $checkboxGroup: $xecheckboxgroup, $event: evnt }, params))
+      }
+    }
+
+    const checkboxGroupPrivateMethods: CheckboxGroupPrivateMethods = {
+      handleChecked (params, evnt) {
+        const { checked, label } = params
+        const checklist = props.modelValue || []
+        const checkIndex = checklist.indexOf(label)
+        if (checked) {
+          if (checkIndex === -1) {
+            checklist.push(label)
+          }
+        } else {
+          checklist.splice(checkIndex, 1)
+        }
+        emit('update:modelValue', checklist)
+        $xecheckboxgroup.dispatchEvent('change', Object.assign({ checklist }, params), evnt)
+        // 自动更新校验状态
+        if ($xeform && $xeformiteminfo) {
+          $xeform.triggerItemEvent(evnt, $xeformiteminfo.itemConfig.field, checklist)
+        }
+      }
+    }
+
+    Object.assign($xecheckboxgroup, checkboxGroupMethods, checkboxGroupPrivateMethods)
+
+    const renderVN = () => {
+      const { options } = props
+      const defaultSlot = slots.default
+      const valueField = computeValueField.value as 'value'
+      const labelField = computeLabelField.value as 'label'
+      const disabledField = computeDisabledField.value as 'disabled'
+      return h('div', {
+        class: 'vxe-checkbox-group'
+      }, defaultSlot
+        ? defaultSlot({})
+        : (options
+            ? options.map(item => {
+              return h(VxeCheckboxComponent, {
+                label: item[valueField],
+                content: item[labelField],
+                disabled: item[disabledField]
+              })
+            })
+            : []))
+    }
+
+    $xecheckboxgroup.renderVN = renderVN
+
+    provide('$xecheckboxgroup', $xecheckboxgroup)
+
+    return renderVN
+  }
+})

package/packages/checkbox-group/index.ts

@@ -0,0 +1,15 @@
+import { App } from 'vue'
+import VxeCheckboxGroupComponent from '../checkbox/src/group'
+import { dynamicApp } from '../dynamics'
+
+export const VxeCheckboxGroup = Object.assign(VxeCheckboxGroupComponent, {
+  install (app: App) {
+    app.component(VxeCheckboxGroupComponent.name, VxeCheckboxGroupComponent)
+  }
+})
+
+export const CheckboxGroup = VxeCheckboxGroup
+
+dynamicApp.component(VxeCheckboxGroupComponent.name, VxeCheckboxGroupComponent)
+
+export default VxeCheckboxGroup

package/packages/col/index.ts

@@ -1,5 +1,5 @@
 import { App } from 'vue'
-import VxeColComponent from './src/col'
+import VxeColComponent from '../row/src/col'
 
 const VxeCol = Object.assign({}, VxeColComponent, {
   install (app: App) {