vxe-pc-ui 0.1.0 → 0.2.0

package/lib/vxe-layout-aside/style/style.css

@@ -1,7 +1,6 @@
 .vxe-layout-aside {
   flex-shrink: 0;
   transition: width 0.3s;
-  padding: var(--vxe-ui-layout-padding-default);
   overflow-y: auto;
   overflow-x: hidden;
 }
@@ -10,4 +9,7 @@
 }
 .vxe-layout-aside.is--collapse {
   width: var(--vxe-ui-layout-aside-collapse-width);
+}
+.vxe-layout-aside.is--padding {
+  padding: var(--vxe-ui-layout-padding-default);
 }

package/lib/vxe-layout-aside/style/style.min.css

@@ -1 +1 @@
-.vxe-layout-aside{flex-shrink:0;transition:width .3s;padding:var(--vxe-ui-layout-padding-default);overflow-y:auto;overflow-x:hidden}.vxe-layout-aside.is--default-width{width:var(--vxe-ui-layout-aside-default-width)}.vxe-layout-aside.is--collapse{width:var(--vxe-ui-layout-aside-collapse-width)}
+.vxe-layout-aside{flex-shrink:0;transition:width .3s;overflow-y:auto;overflow-x:hidden}.vxe-layout-aside.is--default-width{width:var(--vxe-ui-layout-aside-default-width)}.vxe-layout-aside.is--collapse{width:var(--vxe-ui-layout-aside-collapse-width)}.vxe-layout-aside.is--padding{padding:var(--vxe-ui-layout-padding-default)}

package/lib/vxe-layout-body/style/style.css

@@ -1,4 +1,6 @@
 .vxe-layout-body {
   flex-grow: 1;
+}
+.vxe-layout-body.is--padding {
   padding: var(--vxe-ui-layout-padding-default);
 }

package/lib/vxe-layout-body/style/style.min.css

@@ -1 +1 @@
-.vxe-layout-body{flex-grow:1;padding:var(--vxe-ui-layout-padding-default)}
+.vxe-layout-body{flex-grow:1}.vxe-layout-body.is--padding{padding:var(--vxe-ui-layout-padding-default)}

package/lib/vxe-layout-footer/style/style.css

@@ -1,6 +1,5 @@
 .vxe-layout-footer {
   flex-shrink: 0;
-  padding: var(--vxe-ui-layout-padding-default);
   background-color: var(--vxe-ui-layout-background-color);
 }
 .vxe-layout-footer.is--fixed {
@@ -8,4 +7,7 @@
   bottom: 0;
   left: 0;
   z-index: 9;
+}
+.vxe-layout-footer.align--center {
+  text-align: center;
 }

package/lib/vxe-layout-footer/style/style.min.css

@@ -1 +1 @@
-.vxe-layout-footer{flex-shrink:0;padding:var(--vxe-ui-layout-padding-default);background-color:var(--vxe-ui-layout-background-color)}.vxe-layout-footer.is--fixed{position:sticky;bottom:0;left:0;z-index:9}
+.vxe-layout-footer{flex-shrink:0;background-color:var(--vxe-ui-layout-background-color)}.vxe-layout-footer.is--fixed{position:sticky;bottom:0;left:0;z-index:9}.vxe-layout-footer.align--center{text-align:center}

package/lib/vxe-layout-header/style/style.css

@@ -1,6 +1,5 @@
 .vxe-layout-header {
   flex-shrink: 0;
-  padding: var(--vxe-ui-layout-padding-default);
   background-color: var(--vxe-ui-layout-background-color);
 }
 .vxe-layout-header.is--fixed {

package/lib/vxe-layout-header/style/style.min.css

@@ -1 +1 @@
-.vxe-layout-header{flex-shrink:0;padding:var(--vxe-ui-layout-padding-default);background-color:var(--vxe-ui-layout-background-color)}.vxe-layout-header.is--fixed{position:sticky;top:0;left:0;z-index:9}
+.vxe-layout-header{flex-shrink:0;background-color:var(--vxe-ui-layout-background-color)}.vxe-layout-header.is--fixed{position:sticky;top:0;left:0;z-index:9}

package/lib/vxe-tab-pane/index.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {};
+exports.default = void 0;
+var _tabPane = _interopRequireWildcard(require("../tab-pane"));
+Object.keys(_tabPane).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _tabPane[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _tabPane[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 = _tabPane.default;

package/lib/vxe-tab-pane/index.min.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var _exportNames={},_tabPane=(exports.default=void 0,_interopRequireWildcard(require("../tab-pane")));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,a,n={__proto__:null},o=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(r in e)"default"!==r&&{}.hasOwnProperty.call(e,r)&&((a=o?Object.getOwnPropertyDescriptor(e,r):null)&&(a.get||a.set)?Object.defineProperty(n,r,a):n[r]=e[r]);return n.default=e,t&&t.set(e,n),n}Object.keys(_tabPane).forEach(function(e){"default"===e||"__esModule"===e||Object.prototype.hasOwnProperty.call(_exportNames,e)||e in exports&&exports[e]===_tabPane[e]||Object.defineProperty(exports,e,{enumerable:!0,get:function(){return _tabPane[e]}})});var _default=exports.default=_tabPane.default;

package/lib/vxe-tab-pane/style/index.js

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

package/lib/vxe-tabs/index.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {};
+exports.default = void 0;
+var _tabs = _interopRequireWildcard(require("../tabs"));
+Object.keys(_tabs).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _tabs[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _tabs[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 = _tabs.default;

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var _exportNames={},_tabs=(exports.default=void 0,_interopRequireWildcard(require("../tabs")));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,a,o={__proto__:null},n=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(r in e)"default"!==r&&{}.hasOwnProperty.call(e,r)&&((a=n?Object.getOwnPropertyDescriptor(e,r):null)&&(a.get||a.set)?Object.defineProperty(o,r,a):o[r]=e[r]);return o.default=e,t&&t.set(e,o),o}Object.keys(_tabs).forEach(function(e){"default"===e||"__esModule"===e||Object.prototype.hasOwnProperty.call(_exportNames,e)||e in exports&&exports[e]===_tabs[e]||Object.defineProperty(exports,e,{enumerable:!0,get:function(){return _tabs[e]}})});var _default=exports.default=_tabs.default;

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

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

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

@@ -0,0 +1,113 @@
+.vxe-tabs {
+  background-color: var(--vxe-ui-layout-background-color);
+}
+
+.vxe-tabs-header {
+  position: relative;
+}
+
+.vxe-tabs-header--wrapper {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+}
+.vxe-tabs-header--wrapper::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  height: 1px;
+  background-color: #e4e7ed;
+}
+
+.vxe-tab-header--item {
+  position: relative;
+  padding: 0 16px;
+  cursor: pointer;
+}
+.vxe-tab-header--item.is--active {
+  color: var(--vxe-ui-font-primary-color);
+}
+
+.vxe-tab-header--item-name {
+  height: 40px;
+  line-height: 40px;
+  border-bottom: 2px solid transparent;
+  transition: color 0.3s ease-in-out;
+}
+
+.vxe-tab-pane--item {
+  display: none;
+  padding: var(--vxe-ui-layout-padding-default);
+}
+.vxe-tab-pane--item.is--visible {
+  display: block;
+}
+
+.vxe-tabs-header--active-line {
+  display: none;
+}
+
+.vxe-tabs--default .vxe-tabs-header--active-line {
+  display: block;
+  position: absolute;
+  bottom: -1px;
+  left: 0;
+  height: 2px;
+  width: 4px;
+  background-color: var(--vxe-ui-font-primary-color);
+  z-index: 1;
+  transition: all 0.3s ease-in-out;
+}
+
+.vxe-tabs--card .vxe-tabs-header {
+  border-top: 1px solid #e4e7ed;
+  border-left: 1px solid #e4e7ed;
+}
+.vxe-tabs--card .vxe-tab-header--item {
+  border-left: 1px solid #e4e7ed;
+}
+.vxe-tabs--card .vxe-tab-header--item:first-child {
+  border-left: 0;
+}
+.vxe-tabs--card .vxe-tab-header--item:last-child {
+  border-right: 1px solid #e4e7ed;
+}
+
+.vxe-tabs--border-card .vxe-tab-pane--item {
+  border-bottom: 1px solid #e4e7ed;
+  border-left: 1px solid #e4e7ed;
+  border-right: 1px solid #e4e7ed;
+}
+.vxe-tabs--border-card .vxe-tabs-header {
+  border-top: 1px solid #e4e7ed;
+  border-left: 1px solid #e4e7ed;
+  border-right: 1px solid #e4e7ed;
+  background-color: #f5f7fa;
+}
+.vxe-tabs--border-card .vxe-tab-header--item.is--active {
+  background-color: #ffffff;
+}
+.vxe-tabs--border-card .vxe-tab-header--item.is--active::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: -1px;
+  width: calc(100% + 2px);
+  height: 100%;
+  border-left: 1px solid #e4e7ed;
+  border-right: 1px solid #e4e7ed;
+  pointer-events: none;
+}
+.vxe-tabs--border-card .vxe-tab-header--item.is--active::after {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 1px;
+  background-color: var(--vxe-ui-layout-background-color);
+  pointer-events: none;
+  z-index: 1;
+}

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

@@ -0,0 +1 @@
+.vxe-tabs{background-color:var(--vxe-ui-layout-background-color)}.vxe-tabs-header{position:relative}.vxe-tabs-header--wrapper{position:relative;display:flex;flex-direction:row}.vxe-tabs-header--wrapper::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background-color:#e4e7ed}.vxe-tab-header--item{position:relative;padding:0 16px;cursor:pointer}.vxe-tab-header--item.is--active{color:var(--vxe-ui-font-primary-color)}.vxe-tab-header--item-name{height:40px;line-height:40px;border-bottom:2px solid transparent;transition:color .3s ease-in-out}.vxe-tab-pane--item{display:none;padding:var(--vxe-ui-layout-padding-default)}.vxe-tab-pane--item.is--visible{display:block}.vxe-tabs-header--active-line{display:none}.vxe-tabs--default .vxe-tabs-header--active-line{display:block;position:absolute;bottom:-1px;left:0;height:2px;width:4px;background-color:var(--vxe-ui-font-primary-color);z-index:1;transition:all .3s ease-in-out}.vxe-tabs--card .vxe-tabs-header{border-top:1px solid #e4e7ed;border-left:1px solid #e4e7ed}.vxe-tabs--card .vxe-tab-header--item{border-left:1px solid #e4e7ed}.vxe-tabs--card .vxe-tab-header--item:first-child{border-left:0}.vxe-tabs--card .vxe-tab-header--item:last-child{border-right:1px solid #e4e7ed}.vxe-tabs--border-card .vxe-tab-pane--item{border-bottom:1px solid #e4e7ed;border-left:1px solid #e4e7ed;border-right:1px solid #e4e7ed}.vxe-tabs--border-card .vxe-tabs-header{border-top:1px solid #e4e7ed;border-left:1px solid #e4e7ed;border-right:1px solid #e4e7ed;background-color:#f5f7fa}.vxe-tabs--border-card .vxe-tab-header--item.is--active{background-color:#fff}.vxe-tabs--border-card .vxe-tab-header--item.is--active::before{content:"";position:absolute;top:0;left:-1px;width:calc(100% + 2px);height:100%;border-left:1px solid #e4e7ed;border-right:1px solid #e4e7ed;pointer-events:none}.vxe-tabs--border-card .vxe-tab-header--item.is--active::after{content:"";position:absolute;bottom:0;left:0;width:100%;height:1px;background-color:var(--vxe-ui-layout-background-color);pointer-events:none;z-index:1}

package/package.json

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

package/packages/anchor/src/anchor-link.ts

@@ -1,6 +1,6 @@
 import { defineComponent, ref, h, computed, reactive, PropType, inject, createCommentVNode, onMounted, onUnmounted, provide, watch } from 'vue'
 import XEUtils from 'xe-utils'
-import { assemAnchorLink, destroyAnchorLink } from './util'
+import { assembleAnchorLink, destroyAnchorLink } from './util'
 
 import { VxeAnchorLinkDefines, VxeAnchorLinkPropTypes, AnchorLinkReactData, AnchorLinkPrivateRef, VxeAnchorLinkPrivateComputed, VxeAnchorLinkConstructor, VxeAnchorLinkPrivateMethods, VxeAnchorConstructor, VxeAnchorPrivateMethods } from '../../../types'
 
@@ -70,7 +70,7 @@ export default defineComponent({
 
     onMounted(() => {
       if ($xeAnchor && refElem.value) {
-        assemAnchorLink($xeAnchor, refElem.value, linkConfig, $xeParentAnchorLink)
+        assembleAnchorLink($xeAnchor, refElem.value, linkConfig, $xeParentAnchorLink)
       }
     })
 

package/packages/anchor/src/util.ts

@@ -2,7 +2,7 @@ import XEUtils from 'xe-utils'
 
 import { VxeAnchorLinkDefines, VxeAnchorConstructor, VxeAnchorPrivateMethods, VxeAnchorLinkConstructor, VxeAnchorLinkPrivateMethods } from '../../../types'
 
-export function assemAnchorLink ($xeAnchor: VxeAnchorConstructor & VxeAnchorPrivateMethods, elem: HTMLElement, linkConfig: VxeAnchorLinkDefines.LinkConfig, $xeParentAnchorLink: (VxeAnchorLinkConstructor & VxeAnchorLinkPrivateMethods) | null) {
+export function assembleAnchorLink ($xeAnchor: VxeAnchorConstructor & VxeAnchorPrivateMethods, elem: HTMLElement, linkConfig: VxeAnchorLinkDefines.LinkConfig, $xeParentAnchorLink: (VxeAnchorLinkConstructor & VxeAnchorLinkPrivateMethods) | null) {
   const staticLinks = $xeAnchor.reactData.staticLinks
   const parentElem = elem.parentNode
   const parentLinkConfig = $xeParentAnchorLink ? $xeParentAnchorLink.linkConfig : null

package/packages/checkbox/src/checkbox.ts

@@ -26,7 +26,7 @@ export default defineComponent({
   setup (props, context) {
     const { slots, emit } = context
     const $xeform = inject<VxeFormConstructor & VxeFormPrivateMethods | null>('$xeForm', null)
-    const $xeformiteminfo = inject<VxeFormDefines.ProvideItemInfo | null>('$xeFormItemInfo', null)
+    const formItemInfo = inject<VxeFormDefines.ProvideItemInfo | null>('xeFormItemInfo', null)
 
     const xID = XEUtils.uniqueId()
 
@@ -76,8 +76,8 @@ export default defineComponent({
           emit('update:modelValue', value)
           checkboxMethods.dispatchEvent('change', params, evnt)
           // 自动更新校验状态
-          if ($xeform && $xeformiteminfo) {
-            $xeform.triggerItemEvent(evnt, $xeformiteminfo.itemConfig.field, value)
+          if ($xeform && formItemInfo) {
+            $xeform.triggerItemEvent(evnt, formItemInfo.itemConfig.field, value)
           }
         }
       }

package/packages/checkbox/src/group.ts

@@ -23,7 +23,7 @@ export default defineComponent({
   setup (props, context) {
     const { slots, emit } = context
     const $xeform = inject<VxeFormConstructor & VxeFormPrivateMethods | null>('$xeForm', null)
-    const $xeformiteminfo = inject<VxeFormDefines.ProvideItemInfo | null>('$xeFormItemInfo', null)
+    const formItemInfo = inject<VxeFormDefines.ProvideItemInfo | null>('xeFormItemInfo', null)
 
     const xID = XEUtils.uniqueId()
 
@@ -89,8 +89,8 @@ export default defineComponent({
         emit('update:modelValue', checklist)
         $xecheckboxgroup.dispatchEvent('change', Object.assign({ checklist }, params), evnt)
         // 自动更新校验状态
-        if ($xeform && $xeformiteminfo) {
-          $xeform.triggerItemEvent(evnt, $xeformiteminfo.itemConfig.field, checklist)
+        if ($xeform && formItemInfo) {
+          $xeform.triggerItemEvent(evnt, formItemInfo.itemConfig.field, checklist)
         }
       }
     }

package/packages/components.ts

@@ -35,6 +35,8 @@ import VxeRadioGroup from './radio-group'
 import VxeRow from './row'
 import VxeSelect from './select'
 import VxeSwitch from './switch'
+import VxeTabPane from './tab-pane'
+import VxeTabs from './tabs'
 import VxeTextarea from './textarea'
 import VxeTooltip from './tooltip'
 
@@ -81,6 +83,8 @@ const components = [
   VxeRow,
   VxeSelect,
   VxeSwitch,
+  VxeTabPane,
+  VxeTabs,
   VxeTextarea,
   VxeTooltip
 ]
@@ -127,5 +131,7 @@ export * from './radio-group'
 export * from './row'
 export * from './select'
 export * from './switch'
+export * from './tab-pane'
+export * from './tabs'
 export * from './textarea'
 export * from './tooltip'

package/packages/form/src/form-config-item.ts

@@ -18,7 +18,7 @@ const VxeFormConfigItem = defineComponent({
   setup (props) {
     const $xeform = inject('$xeForm', {} as VxeFormConstructor & VxeFormPrivateMethods)
     const xeformiteminfo = { itemConfig: props.itemConfig }
-    provide('$xeFormItemInfo', xeformiteminfo)
+    provide('xeFormItemInfo', xeformiteminfo)
 
     const renderVN = () => {
       const { reactData } = $xeform

package/packages/form/src/form-gather.ts

@@ -17,7 +17,7 @@ export default defineComponent({
     formItem.children = []
 
     const formItemInfo = { itemConfig: formItem }
-    provide('$xeFormItemInfo', formItemInfo)
+    provide('xeFormItemInfo', formItemInfo)
 
     watchItem(props, formItem)
 

package/packages/form/src/form-item.ts

@@ -64,12 +64,12 @@ export default defineComponent({
   setup (props, { slots }) {
     const refElem = ref() as Ref<HTMLDivElement>
     const $xeform = inject('$xeForm', {} as VxeFormConstructor & VxeFormPrivateMethods)
-    const formGather = inject('$xeformgather', null as XEFormItemProvide | null)
+    const formGather = inject('$xeFormGather', null as XEFormItemProvide | null)
     const formItem = reactive(createItem($xeform, props))
     formItem.slots = slots
 
     const formItemInfo = { itemConfig: formItem }
-    provide('$xeFormItemInfo', formItemInfo)
+    provide('xeFormItemInfo', formItemInfo)
 
     watchItem(props, formItem)
 
@@ -242,8 +242,8 @@ export default defineComponent({
       renderVN
     }
 
-    provide('$xeformitem', $xeformitem)
-    provide('$xeformgather', null)
+    provide('$xeFormItem', $xeformitem)
+    provide('$xeFormGather', null)
 
     return $xeformitem
   },

package/packages/form/src/form.ts

@@ -127,6 +127,8 @@ export default defineComponent({
       }
     })
 
+    provide('xeFormItemInfo', null)
+
     const $xegrid = inject<any>('$xegrid', null)
 
     const refElem = ref<HTMLFormElement>()
@@ -704,9 +706,8 @@ export default defineComponent({
     $xeform.renderVN = renderVN
 
     provide('$xeForm', $xeform)
-    provide('$xeformgather', null)
-    provide('$xeformitem', null)
-    provide('$xeFormItemInfo', null)
+    provide('$xeFormGather', null)
+    provide('$xeFormItem', null)
 
     return $xeform
   },

package/packages/input/src/input.ts

@@ -142,7 +142,7 @@ export default defineComponent({
   setup (props, context) {
     const { slots, emit } = context
     const $xeform = inject<VxeFormConstructor & VxeFormPrivateMethods | null>('$xeForm', null)
-    const $xeformiteminfo = inject<VxeFormDefines.ProvideItemInfo | null>('$xeFormItemInfo', null)
+    const formItemInfo = inject<VxeFormDefines.ProvideItemInfo | null>('xeFormItemInfo', null)
 
     const xID = XEUtils.uniqueId()
 
@@ -689,8 +689,8 @@ export default defineComponent({
       if (XEUtils.toValueString(props.modelValue) !== value) {
         inputMethods.dispatchEvent('change', { value }, evnt)
         // 自动更新校验状态
-        if ($xeform && $xeformiteminfo) {
-          $xeform.triggerItemEvent(evnt, $xeformiteminfo.itemConfig.field, value)
+        if ($xeform && formItemInfo) {
+          $xeform.triggerItemEvent(evnt, formItemInfo.itemConfig.field, value)
         }
       }
     }

package/packages/layout-aside/src/layout-aside.ts

@@ -1,15 +1,16 @@
-import { defineComponent, ref, h, reactive, onMounted, computed } from 'vue'
+import { defineComponent, ref, h, reactive, onMounted, computed, PropType } from 'vue'
 import XEUtils from 'xe-utils'
 import { toCssUnit } from '../../ui/src/dom'
 
-import { LayoutAsideReactData, LayoutAsidePrivateRef, VxeLayoutAsidePrivateComputed, VxeLayoutAsideConstructor, VxeLayoutAsidePrivateMethods } from '../../../types'
+import { VxeLayoutAsidePropTypes, LayoutAsideReactData, LayoutAsidePrivateRef, VxeLayoutAsidePrivateComputed, VxeLayoutAsideConstructor, VxeLayoutAsidePrivateMethods } from '../../../types'
 
 export default defineComponent({
   name: 'VxeLayoutAside',
   props: {
-    width: [String, Number],
-    collapsed: Boolean,
-    collapseWidth: [String, Number]
+    width: [String, Number] as PropType<VxeLayoutAsidePropTypes.Width>,
+    collapsed: Boolean as PropType<VxeLayoutAsidePropTypes.Collapsed>,
+    collapseWidth: [String, Number] as PropType<VxeLayoutAsidePropTypes.CollapseWidth>,
+    padding: Boolean as PropType<VxeLayoutAsidePropTypes.Padding>
   },
   emits: [],
   setup (props, context) {
@@ -53,13 +54,14 @@ export default defineComponent({
     } as unknown as VxeLayoutAsideConstructor & VxeLayoutAsidePrivateMethods
 
     const renderVN = () => {
-      const { width, collapsed } = props
+      const { width, collapsed, padding } = props
       const wrapperWidth = computeWrapperWidth.value
       const defaultSlot = slots.default
 
       return h('div', {
         ref: refElem,
         class: ['vxe-layout-aside', {
+          'is--padding': padding,
           'is--default-width': !width,
           'is--collapse': collapsed
         }],

package/packages/layout-body/src/layout-body.ts

@@ -1,11 +1,13 @@
-import { defineComponent, ref, h, reactive } from 'vue'
+import { defineComponent, ref, h, reactive, PropType } from 'vue'
 import XEUtils from 'xe-utils'
 
-import { LayoutBodyReactData, LayoutBodyPrivateRef, VxeLayoutBodyPrivateComputed, VxeLayoutBodyConstructor, VxeLayoutBodyPrivateMethods } from '../../../types'
+import { VxeLayoutBodyPropTypes, LayoutBodyReactData, LayoutBodyPrivateRef, VxeLayoutBodyPrivateComputed, VxeLayoutBodyConstructor, VxeLayoutBodyPrivateMethods } from '../../../types'
 
 export default defineComponent({
   name: 'VxeLayoutBody',
-  props: {},
+  props: {
+    padding: Boolean as PropType<VxeLayoutBodyPropTypes.Padding>
+  },
   emits: [],
   setup (props, context) {
     const { slots } = context
@@ -35,10 +37,13 @@ export default defineComponent({
     } as unknown as VxeLayoutBodyConstructor & VxeLayoutBodyPrivateMethods
 
     const renderVN = () => {
+      const { padding } = props
       const defaultSlot = slots.default
       return h('div', {
         ref: refElem,
-        class: 'vxe-layout-body'
+        class: ['vxe-layout-body', {
+          'is--padding': padding
+        }]
       }, defaultSlot ? defaultSlot({}) : [])
     }
 

package/packages/layout-container/src/layout-container.ts

@@ -1,12 +1,12 @@
-import { defineComponent, ref, h, reactive } from 'vue'
+import { defineComponent, ref, h, reactive, PropType } from 'vue'
 import XEUtils from 'xe-utils'
 
-import { LayoutContainerReactData, LayoutContainerPrivateRef, VxeLayoutContainerPrivateComputed, VxeLayoutContainerConstructor, VxeLayoutContainerPrivateMethods } from '../../../types'
+import { VxeLayoutContainerPropTypes, LayoutContainerReactData, LayoutContainerPrivateRef, VxeLayoutContainerPrivateComputed, VxeLayoutContainerConstructor, VxeLayoutContainerPrivateMethods } from '../../../types'
 
 export default defineComponent({
   name: 'VxeLayoutContainer',
   props: {
-    vertical: Boolean
+    vertical: Boolean as PropType<VxeLayoutContainerPropTypes.Vertical>
   },
   emits: [],
   setup (props, context) {
@@ -37,11 +37,12 @@ export default defineComponent({
     } as unknown as VxeLayoutContainerConstructor & VxeLayoutContainerPrivateMethods
 
     const renderVN = () => {
+      const { vertical } = props
       const defaultSlot = slots.default
       return h('div', {
         ref: refElem,
         class: ['vxe-layout-container', {
-          'is--vertical': props.vertical
+          'is--vertical': vertical
         }]
       }, defaultSlot ? defaultSlot({}) : [])
     }

package/packages/layout-footer/src/layout-footer.ts

@@ -1,12 +1,13 @@
-import { defineComponent, ref, h, reactive } from 'vue'
+import { defineComponent, ref, h, reactive, PropType } from 'vue'
 import XEUtils from 'xe-utils'
 
-import { LayoutFooterReactData, LayoutFooterPrivateRef, VxeLayoutFooterPrivateComputed, VxeLayoutFooterConstructor, VxeLayoutFooterPrivateMethods } from '../../../types'
+import { VxeLayoutFooterPropTypes, LayoutFooterReactData, LayoutFooterPrivateRef, VxeLayoutFooterPrivateComputed, VxeLayoutFooterConstructor, VxeLayoutFooterPrivateMethods } from '../../../types'
 
 export default defineComponent({
   name: 'VxeLayoutFooter',
   props: {
-    fixed: Boolean
+    fixed: Boolean as PropType<VxeLayoutFooterPropTypes.Fixed>,
+    align: String as PropType<VxeLayoutFooterPropTypes.Align>
   },
   emits: [],
   setup (props, context) {
@@ -37,11 +38,12 @@ export default defineComponent({
     } as unknown as VxeLayoutFooterConstructor & VxeLayoutFooterPrivateMethods
 
     const renderVN = () => {
+      const { fixed, align } = props
       const defaultSlot = slots.default
       return h('div', {
         ref: refElem,
-        class: ['vxe-layout-footer', {
-          'is--fixed': props.fixed
+        class: ['vxe-layout-footer', align ? `align--${align}` : '', {
+          'is--fixed': fixed
         }]
       }, defaultSlot ? defaultSlot({}) : [])
     }

package/packages/layout-header/src/layout-header.ts

@@ -1,12 +1,12 @@
-import { defineComponent, ref, h, reactive } from 'vue'
+import { defineComponent, ref, h, reactive, PropType } from 'vue'
 import XEUtils from 'xe-utils'
 
-import { LayoutHeaderReactData, LayoutHeaderPrivateRef, VxeLayoutHeaderPrivateComputed, VxeLayoutHeaderConstructor, VxeLayoutHeaderPrivateMethods } from '../../../types'
+import { VxeLayoutHeaderPropTypes, LayoutHeaderReactData, LayoutHeaderPrivateRef, VxeLayoutHeaderPrivateComputed, VxeLayoutHeaderConstructor, VxeLayoutHeaderPrivateMethods } from '../../../types'
 
 export default defineComponent({
   name: 'VxeLayoutHeader',
   props: {
-    fixed: Boolean
+    fixed: Boolean as PropType<VxeLayoutHeaderPropTypes.Fixed>
   },
   emits: [],
   setup (props, context) {

package/packages/radio/src/button.ts

@@ -24,7 +24,7 @@ export default defineComponent({
   setup (props, context) {
     const { slots, emit } = context
     const $xeform = inject<VxeFormConstructor & VxeFormPrivateMethods | null>('$xeForm', null)
-    const $xeformiteminfo = inject<VxeFormDefines.ProvideItemInfo | null>('$xeFormItemInfo', null)
+    const xeFormItemInfo = inject<VxeFormDefines.ProvideItemInfo | null>('xeFormItemInfo', null)
 
     const xID = XEUtils.uniqueId()
 
@@ -38,7 +38,7 @@ export default defineComponent({
 
     let radioButtonMethods = {} as RadioButtonMethods
 
-    const $xeradiogroup = inject('$xeradiogroup', null as (VxeRadioGroupConstructor & VxeRadioGroupPrivateMethods) | null)
+    const $xeradiogroup = inject('$xeRadioGroup', null as (VxeRadioGroupConstructor & VxeRadioGroupPrivateMethods) | null)
 
     const computeDisabled = computed(() => {
       return props.disabled || ($xeradiogroup && $xeradiogroup.props.disabled)
@@ -72,8 +72,8 @@ export default defineComponent({
         emit('update:modelValue', label)
         radioButtonMethods.dispatchEvent('change', { label }, evnt)
         // 自动更新校验状态
-        if ($xeform && $xeformiteminfo) {
-          $xeform.triggerItemEvent(evnt, $xeformiteminfo.itemConfig.field, label)
+        if ($xeform && xeFormItemInfo) {
+          $xeform.triggerItemEvent(evnt, xeFormItemInfo.itemConfig.field, label)
         }
       }
     }