vxe-pc-ui 0.0.2 → 0.2.0

package/lib/pulldown/src/pulldown.js

@@ -0,0 +1,359 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _vue = require("vue");
+var _xeUtils = _interopRequireDefault(require("xe-utils"));
+var _globalStore = _interopRequireDefault(require("../../ui/src/globalStore"));
+var _size = require("../../hooks/size");
+var _dom = require("../../ui/src/dom");
+var _utils = require("../../ui/src/utils");
+var _event = require("../../ui/src/event");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _default = exports.default = (0, _vue.defineComponent)({
+  name: 'VxePulldown',
+  props: {
+    modelValue: Boolean,
+    disabled: Boolean,
+    placement: String,
+    size: {
+      type: String,
+      default: () => _globalStore.default.size
+    },
+    className: [String, Function],
+    popupClassName: [String, Function],
+    destroyOnClose: Boolean,
+    transfer: Boolean
+  },
+  emits: ['update:modelValue', 'hide-panel'],
+  setup(props, context) {
+    const {
+      slots,
+      emit
+    } = context;
+    const xID = _xeUtils.default.uniqueId();
+    const computeSize = (0, _size.useSize)(props);
+    const reactData = (0, _vue.reactive)({
+      inited: false,
+      panelIndex: 0,
+      panelStyle: null,
+      panelPlacement: null,
+      visiblePanel: false,
+      animatVisible: false,
+      isActivated: false
+    });
+    const refElem = (0, _vue.ref)();
+    const refPulldowContent = (0, _vue.ref)();
+    const refPulldowPnanel = (0, _vue.ref)();
+    const refMaps = {
+      refElem
+    };
+    const $xepulldown = {
+      xID,
+      props,
+      context,
+      reactData,
+      getRefMaps: () => refMaps
+    };
+    let pulldownMethods = {};
+    const updateZindex = () => {
+      if (reactData.panelIndex < (0, _utils.getLastZIndex)()) {
+        reactData.panelIndex = (0, _utils.nextZIndex)();
+      }
+    };
+    const isPanelVisible = () => {
+      return reactData.visiblePanel;
+    };
+    /**
+     * 手动更新位置
+     */
+    const updatePlacement = () => {
+      return (0, _vue.nextTick)().then(() => {
+        const {
+          transfer,
+          placement
+        } = props;
+        const {
+          panelIndex,
+          visiblePanel
+        } = reactData;
+        if (visiblePanel) {
+          const targetElem = refPulldowContent.value;
+          const panelElem = refPulldowPnanel.value;
+          if (panelElem && targetElem) {
+            const targetHeight = targetElem.offsetHeight;
+            const targetWidth = targetElem.offsetWidth;
+            const panelHeight = panelElem.offsetHeight;
+            const panelWidth = panelElem.offsetWidth;
+            const marginSize = 5;
+            const panelStyle = {
+              zIndex: panelIndex
+            };
+            const {
+              boundingTop,
+              boundingLeft,
+              visibleHeight,
+              visibleWidth
+            } = (0, _dom.getAbsolutePos)(targetElem);
+            let panelPlacement = 'bottom';
+            if (transfer) {
+              let left = boundingLeft;
+              let top = boundingTop + targetHeight;
+              if (placement === 'top') {
+                panelPlacement = 'top';
+                top = boundingTop - panelHeight;
+              } else if (!placement) {
+                // 如果下面不够放，则向上
+                if (top + panelHeight + marginSize > visibleHeight) {
+                  panelPlacement = 'top';
+                  top = boundingTop - panelHeight;
+                }
+                // 如果上面不够放，则向下（优先）
+                if (top < marginSize) {
+                  panelPlacement = 'bottom';
+                  top = boundingTop + targetHeight;
+                }
+              }
+              // 如果溢出右边
+              if (left + panelWidth + marginSize > visibleWidth) {
+                left -= left + panelWidth + marginSize - visibleWidth;
+              }
+              // 如果溢出左边
+              if (left < marginSize) {
+                left = marginSize;
+              }
+              Object.assign(panelStyle, {
+                left: `${left}px`,
+                top: `${top}px`,
+                minWidth: `${targetWidth}px`
+              });
+            } else {
+              if (placement === 'top') {
+                panelPlacement = 'top';
+                panelStyle.bottom = `${targetHeight}px`;
+              } else if (!placement) {
+                // 如果下面不够放，则向上
+                if (boundingTop + targetHeight + panelHeight > visibleHeight) {
+                  // 如果上面不够放，则向下（优先）
+                  if (boundingTop - targetHeight - panelHeight > marginSize) {
+                    panelPlacement = 'top';
+                    panelStyle.bottom = `${targetHeight}px`;
+                  }
+                }
+              }
+            }
+            reactData.panelStyle = panelStyle;
+            reactData.panelPlacement = panelPlacement;
+          }
+        }
+        return (0, _vue.nextTick)();
+      });
+    };
+    let hidePanelTimeout;
+    /**
+     * 显示下拉面板
+     */
+    const showPanel = () => {
+      if (!reactData.inited) {
+        reactData.inited = true;
+      }
+      return new Promise(resolve => {
+        if (!props.disabled) {
+          clearTimeout(hidePanelTimeout);
+          reactData.isActivated = true;
+          reactData.animatVisible = true;
+          setTimeout(() => {
+            reactData.visiblePanel = true;
+            emit('update:modelValue', true);
+            updatePlacement();
+            setTimeout(() => {
+              resolve(updatePlacement());
+            }, 40);
+          }, 10);
+          updateZindex();
+        } else {
+          (0, _vue.nextTick)(() => {
+            resolve();
+          });
+        }
+      });
+    };
+    /**
+     * 隐藏下拉面板
+     */
+    const hidePanel = () => {
+      reactData.visiblePanel = false;
+      emit('update:modelValue', false);
+      return new Promise(resolve => {
+        if (reactData.animatVisible) {
+          hidePanelTimeout = window.setTimeout(() => {
+            reactData.animatVisible = false;
+            (0, _vue.nextTick)(() => {
+              resolve();
+            });
+          }, 350);
+        } else {
+          (0, _vue.nextTick)(() => {
+            resolve();
+          });
+        }
+      });
+    };
+    /**
+     * 切换下拉面板
+     */
+    const togglePanel = () => {
+      if (reactData.visiblePanel) {
+        return hidePanel();
+      }
+      return showPanel();
+    };
+    const handleGlobalMousewheelEvent = evnt => {
+      const {
+        disabled
+      } = props;
+      const {
+        visiblePanel
+      } = reactData;
+      const panelElem = refPulldowPnanel.value;
+      if (!disabled) {
+        if (visiblePanel) {
+          if ((0, _dom.getEventTargetNode)(evnt, panelElem).flag) {
+            updatePlacement();
+          } else {
+            hidePanel();
+            pulldownMethods.dispatchEvent('hide-panel', {}, evnt);
+          }
+        }
+      }
+    };
+    const handleGlobalMousedownEvent = evnt => {
+      const {
+        disabled
+      } = props;
+      const {
+        visiblePanel
+      } = reactData;
+      const el = refElem.value;
+      const panelElem = refPulldowPnanel.value;
+      if (!disabled) {
+        reactData.isActivated = (0, _dom.getEventTargetNode)(evnt, el).flag || (0, _dom.getEventTargetNode)(evnt, panelElem).flag;
+        if (visiblePanel && !reactData.isActivated) {
+          hidePanel();
+          pulldownMethods.dispatchEvent('hide-panel', {}, evnt);
+        }
+      }
+    };
+    const handleGlobalBlurEvent = evnt => {
+      if (reactData.visiblePanel) {
+        reactData.isActivated = false;
+        hidePanel();
+        pulldownMethods.dispatchEvent('hide-panel', {}, evnt);
+      }
+    };
+    pulldownMethods = {
+      dispatchEvent(type, params, evnt) {
+        emit(type, Object.assign({
+          $pulldown: $xepulldown,
+          $event: evnt
+        }, params));
+      },
+      isPanelVisible,
+      togglePanel,
+      showPanel,
+      hidePanel
+    };
+    Object.assign($xepulldown, pulldownMethods);
+    (0, _vue.watch)(() => props.modelValue, value => {
+      if (value) {
+        showPanel();
+      } else {
+        hidePanel();
+      }
+    });
+    (0, _vue.nextTick)(() => {
+      _event.GlobalEvent.on($xepulldown, 'mousewheel', handleGlobalMousewheelEvent);
+      _event.GlobalEvent.on($xepulldown, 'mousedown', handleGlobalMousedownEvent);
+      _event.GlobalEvent.on($xepulldown, 'blur', handleGlobalBlurEvent);
+    });
+    (0, _vue.onUnmounted)(() => {
+      _event.GlobalEvent.off($xepulldown, 'mousewheel');
+      _event.GlobalEvent.off($xepulldown, 'mousedown');
+      _event.GlobalEvent.off($xepulldown, 'blur');
+    });
+    const renderVN = () => {
+      const {
+        className,
+        popupClassName,
+        destroyOnClose,
+        transfer,
+        disabled
+      } = props;
+      const {
+        inited,
+        isActivated,
+        animatVisible,
+        visiblePanel,
+        panelStyle,
+        panelPlacement
+      } = reactData;
+      const vSize = computeSize.value;
+      const defaultSlot = slots.default;
+      const headerSlot = slots.header;
+      const footerSlot = slots.footer;
+      const dropdownSlot = slots.dropdown;
+      return (0, _vue.h)('div', {
+        ref: refElem,
+        class: ['vxe-pulldown', className ? _xeUtils.default.isFunction(className) ? className({
+          $pulldown: $xepulldown
+        }) : className : '', {
+          [`size--${vSize}`]: vSize,
+          'is--visivle': visiblePanel,
+          'is--disabled': disabled,
+          'is--active': isActivated
+        }]
+      }, [(0, _vue.h)('div', {
+        ref: refPulldowContent,
+        class: 'vxe-pulldown--content'
+      }, defaultSlot ? defaultSlot({
+        $pulldown: $xepulldown
+      }) : []), (0, _vue.h)(_vue.Teleport, {
+        to: 'body',
+        disabled: transfer ? !inited : true
+      }, [(0, _vue.h)('div', {
+        ref: refPulldowPnanel,
+        class: ['vxe-table--ignore-clear vxe-pulldown--panel', popupClassName ? _xeUtils.default.isFunction(popupClassName) ? popupClassName({
+          $pulldown: $xepulldown
+        }) : popupClassName : '', {
+          [`size--${vSize}`]: vSize,
+          'is--transfer': transfer,
+          'animat--leave': animatVisible,
+          'animat--enter': visiblePanel
+        }],
+        placement: panelPlacement,
+        style: panelStyle
+      }, dropdownSlot ? [(0, _vue.h)('div', {
+        class: 'vxe-pulldown--panel-wrapper'
+      }, !inited || destroyOnClose && !visiblePanel && !animatVisible ? [] : [headerSlot ? (0, _vue.h)('div', {
+        class: 'vxe-pulldown--panel-header'
+      }, headerSlot({
+        $pulldown: $xepulldown
+      })) : (0, _vue.createCommentVNode)(), (0, _vue.h)('div', {
+        class: 'vxe-pulldown--panel-body'
+      }, dropdownSlot({
+        $pulldown: $xepulldown
+      })), footerSlot ? (0, _vue.h)('div', {
+        class: 'vxe-pulldown--panel-footer'
+      }, footerSlot({
+        $pulldown: $xepulldown
+      })) : (0, _vue.createCommentVNode)()])] : [])])]);
+    };
+    $xepulldown.renderVN = renderVN;
+    return $xepulldown;
+  },
+  render() {
+    return this.renderVN();
+  }
+});

package/lib/pulldown/src/pulldown.min.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _vue=require("vue"),_xeUtils=_interopRequireDefault(require("xe-utils")),_globalStore=_interopRequireDefault(require("../../ui/src/globalStore")),_size=require("../../hooks/size"),_dom=require("../../ui/src/dom"),_utils=require("../../ui/src/utils"),_event=require("../../ui/src/event");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}var _default=exports.default=(0,_vue.defineComponent)({name:"VxePulldown",props:{modelValue:Boolean,disabled:Boolean,placement:String,size:{type:String,default:()=>_globalStore.default.size},className:[String,Function],popupClassName:[String,Function],destroyOnClose:Boolean,transfer:Boolean},emits:["update:modelValue","hide-panel"],setup(f,e){const{slots:b,emit:i}=e;var t=_xeUtils.default.uniqueId();const x=(0,_size.useSize)(f),h=(0,_vue.reactive)({inited:!1,panelIndex:0,panelStyle:null,panelPlacement:null,visiblePanel:!1,animatVisible:!1,isActivated:!1}),g=(0,_vue.ref)(),w=(0,_vue.ref)(),P=(0,_vue.ref)(),l={refElem:g},V={xID:t,props:f,context:e,reactData:h,getRefMaps:()=>l};let a;const n=()=>{h.panelIndex<(0,_utils.getLastZIndex)()&&(h.panelIndex=(0,_utils.nextZIndex)())};const o=()=>(0,_vue.nextTick)().then(()=>{var{transfer:e,placement:i}=f,{panelIndex:n,visiblePanel:a}=h;if(a){var a=w.value,o=P.value;if(o&&a){var s=a.offsetHeight,u=a.offsetWidth,d=o.offsetHeight,o=o.offsetWidth,n={zIndex:n},{boundingTop:a,boundingLeft:r,visibleHeight:v,visibleWidth:p}=(0,_dom.getAbsolutePos)(a);let l="bottom";if(e){let e=r,t=a+s;"top"===i?(l="top",t=a-d):i||(t+d+5>v&&(l="top",t=a-d),t<5&&(l="bottom",t=a+s)),e+o+5>p&&(e-=e+o+5-p),e<5&&(e=5),Object.assign(n,{left:e+"px",top:t+"px",minWidth:u+"px"})}else"top"===i?(l="top",n.bottom=s+"px"):i||v<a+s+d&&5<a-s-d&&(l="top",n.bottom=s+"px");h.panelStyle=n,h.panelPlacement=l}}return(0,_vue.nextTick)()});let s;const u=()=>(h.inited||(h.inited=!0),new Promise(e=>{f.disabled?(0,_vue.nextTick)(()=>{e()}):(clearTimeout(s),h.isActivated=!0,h.animatVisible=!0,setTimeout(()=>{h.visiblePanel=!0,i("update:modelValue",!0),o(),setTimeout(()=>{e(o())},40)},10),n())})),d=()=>(h.visiblePanel=!1,i("update:modelValue",!1),new Promise(e=>{h.animatVisible?s=window.setTimeout(()=>{(h.animatVisible=!1,_vue.nextTick)(()=>{e()})},350):(0,_vue.nextTick)(()=>{e()})}));const r=e=>{var t=f["disabled"],l=h["visiblePanel"],i=P.value;t||l&&((0,_dom.getEventTargetNode)(e,i).flag?o():(d(),a.dispatchEvent("hide-panel",{},e)))},v=e=>{var t=f["disabled"],l=h["visiblePanel"],i=g.value,n=P.value;t||(h.isActivated=(0,_dom.getEventTargetNode)(e,i).flag||(0,_dom.getEventTargetNode)(e,n).flag,l&&!h.isActivated&&(d(),a.dispatchEvent("hide-panel",{},e)))},p=e=>{h.visiblePanel&&(h.isActivated=!1,d(),a.dispatchEvent("hide-panel",{},e))};a={dispatchEvent(e,t,l){i(e,Object.assign({$pulldown:V,$event:l},t))},isPanelVisible:()=>h.visiblePanel,togglePanel:()=>(h.visiblePanel?d:u)(),showPanel:u,hidePanel:d},Object.assign(V,a),(0,_vue.watch)(()=>f.modelValue,e=>{(e?u:d)()}),(0,_vue.nextTick)(()=>{_event.GlobalEvent.on(V,"mousewheel",r),_event.GlobalEvent.on(V,"mousedown",v),_event.GlobalEvent.on(V,"blur",p)}),(0,_vue.onUnmounted)(()=>{_event.GlobalEvent.off(V,"mousewheel"),_event.GlobalEvent.off(V,"mousedown"),_event.GlobalEvent.off(V,"blur")});return V.renderVN=()=>{var{className:e,popupClassName:t,destroyOnClose:l,transfer:i,disabled:n}=f,{inited:a,isActivated:o,animatVisible:s,visiblePanel:u,panelStyle:d,panelPlacement:r}=h,v=x.value,p=b.default,c=b.header,_=b.footer,m=b.dropdown;return(0,_vue.h)("div",{ref:g,class:["vxe-pulldown",e?_xeUtils.default.isFunction(e)?e({$pulldown:V}):e:"",{["size--"+v]:v,"is--visivle":u,"is--disabled":n,"is--active":o}]},[(0,_vue.h)("div",{ref:w,class:"vxe-pulldown--content"},p?p({$pulldown:V}):[]),(0,_vue.h)(_vue.Teleport,{to:"body",disabled:!i||!a},[(0,_vue.h)("div",{ref:P,class:["vxe-table--ignore-clear vxe-pulldown--panel",t?_xeUtils.default.isFunction(t)?t({$pulldown:V}):t:"",{["size--"+v]:v,"is--transfer":i,"animat--leave":s,"animat--enter":u}],placement:r,style:d},m?[(0,_vue.h)("div",{class:"vxe-pulldown--panel-wrapper"},!a||l&&!u&&!s?[]:[c?(0,_vue.h)("div",{class:"vxe-pulldown--panel-header"},c({$pulldown:V})):(0,_vue.createCommentVNode)(),(0,_vue.h)("div",{class:"vxe-pulldown--panel-body"},m({$pulldown:V})),_?(0,_vue.h)("div",{class:"vxe-pulldown--panel-footer"},_({$pulldown:V})):(0,_vue.createCommentVNode)()])]:[])])])},V},render(){return this.renderVN()}});

package/lib/pulldown/style/index.js

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

package/lib/pulldown/style/style.css

@@ -0,0 +1,57 @@
+.vxe-pulldown {
+  position: relative;
+  display: inline-block;
+  color: var(--vxe-font-color);
+  text-align: left;
+}
+
+.vxe-pulldown--panel {
+  display: none;
+  position: absolute;
+  left: 0;
+  padding: 4px 0;
+  color: var(--vxe-font-color);
+  text-align: left;
+}
+.vxe-pulldown--panel:not(.is--transfer) {
+  min-width: 100%;
+}
+.vxe-pulldown--panel.is--transfer {
+  position: fixed;
+}
+.vxe-pulldown--panel.animat--leave {
+  display: block;
+  opacity: 0;
+  transform: scaleY(0.5);
+  transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1);
+  transform-origin: center top;
+  backface-visibility: hidden;
+}
+.vxe-pulldown--panel.animat--leave[placement=top] {
+  transform-origin: center bottom;
+}
+.vxe-pulldown--panel.animat--enter {
+  opacity: 1;
+  transform: scaleY(1);
+}
+
+.vxe-pulldown--panel-wrapper {
+  background-color: var(--vxe-ui-pulldown-panel-background-color);
+}
+
+.vxe-pulldown,
+.vxe-pulldown--panel {
+  font-size: var(--vxe-font-size);
+}
+.vxe-pulldown.size--medium,
+.vxe-pulldown--panel.size--medium {
+  font-size: var(--vxe-font-size-medium);
+}
+.vxe-pulldown.size--small,
+.vxe-pulldown--panel.size--small {
+  font-size: var(--vxe-font-size-small);
+}
+.vxe-pulldown.size--mini,
+.vxe-pulldown--panel.size--mini {
+  font-size: var(--vxe-font-size-mini);
+}

package/lib/pulldown/style/style.min.css

@@ -0,0 +1 @@
+.vxe-pulldown{position:relative;display:inline-block;color:var(--vxe-font-color);text-align:left}.vxe-pulldown--panel{display:none;position:absolute;left:0;padding:4px 0;color:var(--vxe-font-color);text-align:left}.vxe-pulldown--panel:not(.is--transfer){min-width:100%}.vxe-pulldown--panel.is--transfer{position:fixed}.vxe-pulldown--panel.animat--leave{display:block;opacity:0;transform:scaleY(.5);transition:transform .3s cubic-bezier(.23,1,.32,1),opacity .3s cubic-bezier(.23,1,.32,1);transform-origin:center top;backface-visibility:hidden}.vxe-pulldown--panel.animat--leave[placement=top]{transform-origin:center bottom}.vxe-pulldown--panel.animat--enter{opacity:1;transform:scaleY(1)}.vxe-pulldown--panel-wrapper{background-color:var(--vxe-ui-pulldown-panel-background-color)}.vxe-pulldown,.vxe-pulldown--panel{font-size:var(--vxe-font-size)}.vxe-pulldown--panel.size--medium,.vxe-pulldown.size--medium{font-size:var(--vxe-font-size-medium)}.vxe-pulldown--panel.size--small,.vxe-pulldown.size--small{font-size:var(--vxe-font-size-small)}.vxe-pulldown--panel.size--mini,.vxe-pulldown.size--mini{font-size:var(--vxe-font-size-mini)}

package/lib/radio/index.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.VxeRadio = exports.Radio = void 0;
+var _radio = _interopRequireDefault(require("./src/radio"));
+var _dynamics = require("../dynamics");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const VxeRadio = exports.VxeRadio = Object.assign(_radio.default, {
+  install: function (app) {
+    app.component(_radio.default.name, _radio.default);
+  }
+});
+const Radio = exports.Radio = VxeRadio;
+_dynamics.dynamicApp.component(_radio.default.name, _radio.default);
+var _default = exports.default = VxeRadio;

package/lib/radio/index.min.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.VxeRadio=exports.Radio=void 0;var _radio=_interopRequireDefault(require("./src/radio")),_dynamics=require("../dynamics");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}const VxeRadio=exports.VxeRadio=Object.assign(_radio.default,{install:function(e){e.component(_radio.default.name,_radio.default)}}),Radio=exports.Radio=VxeRadio;_dynamics.dynamicApp.component(_radio.default.name,_radio.default);var _default=exports.default=VxeRadio;

package/lib/radio/src/button.js

@@ -0,0 +1,135 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _vue = require("vue");
+var _xeUtils = _interopRequireDefault(require("xe-utils"));
+var _utils = require("../../ui/src/utils");
+var _globalStore = _interopRequireDefault(require("../../ui/src/globalStore"));
+var _size = require("../../hooks/size");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _default = exports.default = (0, _vue.defineComponent)({
+  name: 'VxeRadioButton',
+  props: {
+    modelValue: [String, Number, Boolean],
+    label: {
+      type: [String, Number, Boolean],
+      default: null
+    },
+    title: [String, Number],
+    content: [String, Number],
+    disabled: Boolean,
+    strict: {
+      type: Boolean,
+      default: () => _globalStore.default.radioButton.strict
+    },
+    size: {
+      type: String,
+      default: () => _globalStore.default.radioButton.size || _globalStore.default.size
+    }
+  },
+  emits: ['update:modelValue', 'change'],
+  setup(props, context) {
+    const {
+      slots,
+      emit
+    } = context;
+    const $xeform = (0, _vue.inject)('$xeForm', null);
+    const xeFormItemInfo = (0, _vue.inject)('xeFormItemInfo', null);
+    const xID = _xeUtils.default.uniqueId();
+    const computeSize = (0, _size.useSize)(props);
+    const $xeradiobutton = {
+      xID,
+      props,
+      context
+    };
+    let radioButtonMethods = {};
+    const $xeradiogroup = (0, _vue.inject)('$xeRadioGroup', null);
+    const computeDisabled = (0, _vue.computed)(() => {
+      return props.disabled || $xeradiogroup && $xeradiogroup.props.disabled;
+    });
+    const computeName = (0, _vue.computed)(() => {
+      return $xeradiogroup ? $xeradiogroup.name : null;
+    });
+    const computeStrict = (0, _vue.computed)(() => {
+      return $xeradiogroup ? $xeradiogroup.props.strict : props.strict;
+    });
+    const computeChecked = (0, _vue.computed)(() => {
+      const {
+        modelValue,
+        label
+      } = props;
+      return $xeradiogroup ? $xeradiogroup.props.modelValue === label : modelValue === label;
+    });
+    radioButtonMethods = {
+      dispatchEvent(type, params, evnt) {
+        emit(type, Object.assign({
+          $radioButton: $xeradiobutton,
+          $event: evnt
+        }, params));
+      }
+    };
+    Object.assign($xeradiobutton, radioButtonMethods);
+    const handleValue = (label, evnt) => {
+      if ($xeradiogroup) {
+        $xeradiogroup.handleChecked({
+          label
+        }, evnt);
+      } else {
+        emit('update:modelValue', label);
+        radioButtonMethods.dispatchEvent('change', {
+          label
+        }, evnt);
+        // 自动更新校验状态
+        if ($xeform && xeFormItemInfo) {
+          $xeform.triggerItemEvent(evnt, xeFormItemInfo.itemConfig.field, label);
+        }
+      }
+    };
+    const changeEvent = evnt => {
+      const isDisabled = computeDisabled.value;
+      if (!isDisabled) {
+        handleValue(props.label, evnt);
+      }
+    };
+    const clickEvent = evnt => {
+      const isDisabled = computeDisabled.value;
+      const isStrict = computeStrict.value;
+      if (!isDisabled && !isStrict) {
+        if (props.label === ($xeradiogroup ? $xeradiogroup.props.modelValue : props.modelValue)) {
+          handleValue(null, evnt);
+        }
+      }
+    };
+    const renderVN = () => {
+      const vSize = computeSize.value;
+      const isDisabled = computeDisabled.value;
+      const name = computeName.value;
+      const checked = computeChecked.value;
+      return (0, _vue.h)('label', {
+        class: ['vxe-radio', 'vxe-radio-button', {
+          [`size--${vSize}`]: vSize,
+          'is--disabled': isDisabled
+        }],
+        title: props.title
+      }, [(0, _vue.h)('input', {
+        class: 'vxe-radio--input',
+        type: 'radio',
+        name,
+        checked,
+        disabled: isDisabled,
+        onChange: changeEvent,
+        onClick: clickEvent
+      }), (0, _vue.h)('span', {
+        class: 'vxe-radio--label'
+      }, slots.default ? slots.default({}) : (0, _utils.getFuncText)(props.content))]);
+    };
+    Object.assign($xeradiobutton, {
+      renderVN,
+      dispatchEvent
+    });
+    return renderVN;
+  }
+});

package/lib/radio/src/button.min.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _vue=require("vue"),_xeUtils=_interopRequireDefault(require("xe-utils")),_utils=require("../../ui/src/utils"),_globalStore=_interopRequireDefault(require("../../ui/src/globalStore")),_size=require("../../hooks/size");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}var _default=exports.default=(0,_vue.defineComponent)({name:"VxeRadioButton",props:{modelValue:[String,Number,Boolean],label:{type:[String,Number,Boolean],default:null},title:[String,Number],content:[String,Number],disabled:Boolean,strict:{type:Boolean,default:()=>_globalStore.default.radioButton.strict},size:{type:String,default:()=>_globalStore.default.radioButton.size||_globalStore.default.size}},emits:["update:modelValue","change"],setup(a,e){const{slots:i,emit:u}=e,l=(0,_vue.inject)("$xeForm",null),o=(0,_vue.inject)("xeFormItemInfo",null);var t=_xeUtils.default.uniqueId();const r=(0,_size.useSize)(a),n={xID:t,props:a,context:e};let s;const d=(0,_vue.inject)("$xeRadioGroup",null),p=(0,_vue.computed)(()=>a.disabled||d&&d.props.disabled),c=(0,_vue.computed)(()=>d?d.name:null),v=(0,_vue.computed)(()=>(d?d.props:a).strict),_=(0,_vue.computed)(()=>{var{modelValue:e,label:t}=a;return d?d.props.modelValue===t:e===t}),b=(s={dispatchEvent(e,t,l){u(e,Object.assign({$radioButton:n,$event:l},t))}},Object.assign(n,s),(e,t)=>{d?d.handleChecked({label:e},t):(u("update:modelValue",e),s.dispatchEvent("change",{label:e},t),l&&o&&l.triggerItemEvent(t,o.itemConfig.field,e))}),m=e=>{p.value||b(a.label,e)},f=e=>{var t=p.value,l=v.value;t||l||a.label===(d?d.props:a).modelValue&&b(null,e)};t=()=>{var e=r.value,t=p.value,l=c.value,u=_.value;return(0,_vue.h)("label",{class:["vxe-radio","vxe-radio-button",{["size--"+e]:e,"is--disabled":t}],title:a.title},[(0,_vue.h)("input",{class:"vxe-radio--input",type:"radio",name:l,checked:u,disabled:t,onChange:m,onClick:f}),(0,_vue.h)("span",{class:"vxe-radio--label"},i.default?i.default({}):(0,_utils.getFuncText)(a.content))])};return Object.assign(n,{renderVN:t,dispatchEvent:dispatchEvent}),t}});