vxe-pc-ui 4.14.6 → 4.14.7

package/es/radio/src/button.js

@@ -2,7 +2,7 @@ import { h, computed, reactive, inject } from 'vue';
 import { defineVxeComponent } from '../../ui/src/comp';
 import XEUtils from 'xe-utils';
 import { getFuncText } from '../../ui/src/utils';
-import { getConfig, createEvent, useSize } from '../../ui';
+import { getConfig, createEvent, useSize, renderEmptyElement } from '../../ui';
 export default defineVxeComponent({
     name: 'VxeRadioButton',
     props: {
@@ -55,8 +55,10 @@ export default defineVxeComponent({
             const { disabled } = props;
             if (disabled === null) {
                 if ($xeRadioGroup) {
-                    const { computeIsDisabled } = $xeRadioGroup.getComputeMaps();
-                    return computeIsDisabled.value;
+                    const { computeIsDisabled: computeIsGroupDisabled, computeIsReadonly: computeIsGroupReadonly } = $xeRadioGroup.getComputeMaps();
+                    const isGroupDisabled = computeIsGroupDisabled.value;
+                    const isGroupReadonly = computeIsGroupReadonly.value;
+                    return isGroupDisabled || isGroupReadonly;
                 }
             }
             return disabled;
@@ -114,12 +116,32 @@ export default defineVxeComponent({
             }
         };
         const renderVN = () => {
-            const { label, checkedValue } = props;
+            const { label, content, checkedValue } = props;
             const radioValue = XEUtils.isUndefined(checkedValue) ? label : checkedValue;
             const vSize = computeSize.value;
             const isDisabled = computeIsDisabled.value;
             const name = computeName.value;
             const isChecked = computeChecked.value;
+            const defaultSlot = slots.default;
+            if ($xeRadioGroup) {
+                const { computeIsReadonly: computeIsGroupReadonly } = $xeRadioGroup.getComputeMaps();
+                const isGroupReadonly = computeIsGroupReadonly.value;
+                if (isGroupReadonly) {
+                    if (isChecked) {
+                        return h('label', {
+                            class: ['vxe-radio vxe-radio--button-view', {
+                                    [`size--${vSize}`]: vSize,
+                                    'is--readonly': isGroupReadonly
+                                }]
+                        }, [
+                            h('span', {
+                                class: 'vxe-checkbox--label'
+                            }, defaultSlot ? defaultSlot({}) : getFuncText(content))
+                        ]);
+                    }
+                    return renderEmptyElement($xeRadioButton);
+                }
+            }
             return h('label', {
                 key: radioValue,
                 class: ['vxe-radio vxe-radio--button', {
@@ -139,7 +161,7 @@ export default defineVxeComponent({
                 }),
                 h('span', {
                     class: 'vxe-radio--label'
-                }, slots.default ? slots.default({}) : getFuncText(props.content))
+                }, defaultSlot ? defaultSlot({}) : getFuncText(content))
             ]);
         };
         $xeRadioButton.renderVN = renderVN;

package/es/radio/src/group.js

@@ -17,6 +17,10 @@ export default defineVxeComponent({
             type: Boolean,
             default: null
         },
+        readonly: {
+            type: Boolean,
+            default: null
+        },
         type: String,
         options: Array,
         optionProps: Object,
@@ -43,11 +47,21 @@ export default defineVxeComponent({
         const { computeSize } = useSize(props);
         const reactData = reactive({});
         const internalData = createInternalData();
+        const computeIsReadonly = computed(() => {
+            const { readonly } = props;
+            if (readonly === null) {
+                if ($xeForm) {
+                    return $xeForm.props.readonly;
+                }
+                return false;
+            }
+            return readonly;
+        });
         const computeIsDisabled = computed(() => {
             const { disabled } = props;
             if (disabled === null) {
                 if ($xeForm) {
-                    return $xeForm.props.readonly || $xeForm.props.disabled;
+                    return $xeForm.props.disabled;
                 }
                 return false;
             }
@@ -57,7 +71,8 @@ export default defineVxeComponent({
             return Object.assign({}, props.defaultConfig);
         });
         const computeMaps = {
-            computeIsDisabled
+            computeIsDisabled,
+            computeIsReadonly
         };
         const $xeRadioGroup = {
             xID,

package/es/radio/src/radio.js

@@ -2,7 +2,7 @@ import { h, computed, inject, reactive } from 'vue';
 import { defineVxeComponent } from '../../ui/src/comp';
 import XEUtils from 'xe-utils';
 import { getFuncText } from '../../ui/src/utils';
-import { getConfig, createEvent, useSize, getIcon } from '../../ui';
+import { getConfig, createEvent, useSize, getIcon, renderEmptyElement } from '../../ui';
 export default defineVxeComponent({
     name: 'VxeRadio',
     props: {
@@ -56,8 +56,10 @@ export default defineVxeComponent({
             const { disabled } = props;
             if (disabled === null) {
                 if ($xeRadioGroup) {
-                    const { computeIsDisabled } = $xeRadioGroup.getComputeMaps();
-                    return computeIsDisabled.value;
+                    const { computeIsDisabled: computeIsGroupDisabled, computeIsReadonly: computeIsGroupReadonly } = $xeRadioGroup.getComputeMaps();
+                    const isGroupDisabled = computeIsGroupDisabled.value;
+                    const isGroupReadonly = computeIsGroupReadonly.value;
+                    return isGroupDisabled || isGroupReadonly;
                 }
             }
             return disabled;
@@ -115,12 +117,32 @@ export default defineVxeComponent({
         const radioPrivateMethods = {};
         Object.assign($xeRadio, radioMethods, radioPrivateMethods);
         const renderVN = () => {
-            const { label, checkedValue } = props;
+            const { label, content, checkedValue } = props;
             const radioValue = XEUtils.isUndefined(checkedValue) ? label : checkedValue;
             const vSize = computeSize.value;
             const isDisabled = computeIsDisabled.value;
             const name = computeName.value;
             const isChecked = computeChecked.value;
+            const defaultSlot = slots.default;
+            if ($xeRadioGroup) {
+                const { computeIsReadonly: computeIsGroupReadonly } = $xeRadioGroup.getComputeMaps();
+                const isGroupReadonly = computeIsGroupReadonly.value;
+                if (isGroupReadonly) {
+                    if (isChecked) {
+                        return h('label', {
+                            class: ['vxe-radio vxe-radio--view', {
+                                    [`size--${vSize}`]: vSize,
+                                    'is--readonly': isGroupReadonly
+                                }]
+                        }, [
+                            h('span', {
+                                class: 'vxe-checkbox--label'
+                            }, defaultSlot ? defaultSlot({}) : getFuncText(content))
+                        ]);
+                    }
+                    return renderEmptyElement($xeRadio);
+                }
+            }
             return h('label', {
                 key: radioValue,
                 class: ['vxe-radio vxe-radio--default', {
@@ -144,7 +166,7 @@ export default defineVxeComponent({
                 }),
                 h('span', {
                     class: 'vxe-radio--label'
-                }, slots.default ? slots.default({}) : getFuncText(props.content))
+                }, defaultSlot ? defaultSlot({}) : getFuncText(content))
             ]);
         };
         $xeRadio.renderVN = renderVN;

package/es/radio/style.css

@@ -17,6 +17,8 @@
   vertical-align: middle;
   white-space: nowrap;
   line-height: 1;
+}
+.vxe-radio {
   cursor: pointer;
 }
 .vxe-radio .vxe-radio--icon {
@@ -37,12 +39,12 @@
 .vxe-radio.is--checked .vxe-radio--icon {
   color: var(--vxe-ui-font-primary-color);
 }
-.vxe-radio:not(.is--disabled) {
-  cursor: pointer;
-}
 .vxe-radio:not(.is--disabled):hover .vxe-radio--icon {
   color: var(--vxe-ui-font-primary-color);
 }
+.vxe-radio.is--readonly {
+  cursor: auto;
+}
 .vxe-radio.is--disabled {
   color: var(--vxe-ui-font-disabled-color);
   cursor: not-allowed;

package/es/radio/style.min.css

@@ -1 +1 @@
-.vxe-radio-group{display:inline-block;vertical-align:middle;line-height:1;font-size:0}.vxe-radio--readonly{color:var(--vxe-ui-font-color);display:inline-flex}.vxe-radio{display:inline-block;vertical-align:middle;white-space:nowrap;line-height:1;cursor:pointer}.vxe-radio .vxe-radio--icon{font-size:1.26em}.vxe-radio .vxe-radio--icon{color:var(--vxe-ui-input-border-color);border-radius:50%;vertical-align:middle;font-weight:700;-webkit-user-select:none;-moz-user-select:none;user-select:none}.vxe-radio.is--checked{color:var(--vxe-ui-font-primary-color)}.vxe-radio.is--checked .vxe-radio--icon{color:var(--vxe-ui-font-primary-color)}.vxe-radio:not(.is--disabled){cursor:pointer}.vxe-radio:not(.is--disabled):hover .vxe-radio--icon{color:var(--vxe-ui-font-primary-color)}.vxe-radio.is--disabled{color:var(--vxe-ui-font-disabled-color);cursor:not-allowed}.vxe-radio.is--disabled .vxe-radio--icon{color:var(--vxe-ui-input-disabled-color)}.vxe-radio .vxe-radio--label{padding-left:.5em;vertical-align:middle}.vxe-radio>input[type=radio]{position:absolute;width:0;height:0;border:0;-webkit-appearance:none;-moz-appearance:none;appearance:none}.vxe-radio .vxe-radio--label{vertical-align:middle;display:inline-block;max-width:50em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vxe-radio:not(.is--disabled)>input:focus+.vxe-radio--icon{color:var(--vxe-ui-font-primary-darken-color)}.vxe-radio{font-size:var(--vxe-ui-font-size-default)}.vxe-radio.size--medium{font-size:var(--vxe-ui-font-size-medium)}.vxe-radio.size--small{font-size:var(--vxe-ui-font-size-small)}.vxe-radio.size--mini{font-size:var(--vxe-ui-font-size-mini)}.vxe-radio:last-of-type{margin-right:0}.vxe-radio--default,.vxe-radio-group{margin-right:var(--vxe-ui-base-margin-gap-default)}.vxe-radio--default.size--medium,.vxe-radio-group.size--medium{margin-right:var(--vxe-ui-base-margin-gap-medium)}.vxe-radio--default.size--small,.vxe-radio-group.size--small{margin-right:var(--vxe-ui-base-margin-gap-small)}.vxe-radio--default.size--mini,.vxe-radio-group.size--mini{margin-right:var(--vxe-ui-base-margin-gap-mini)}.vxe-radio--default:last-of-type,.vxe-radio-group:last-of-type{margin-right:0}
+.vxe-radio-group{display:inline-block;vertical-align:middle;line-height:1;font-size:0}.vxe-radio--readonly{color:var(--vxe-ui-font-color);display:inline-flex}.vxe-radio{display:inline-block;vertical-align:middle;white-space:nowrap;line-height:1}.vxe-radio{cursor:pointer}.vxe-radio .vxe-radio--icon{font-size:1.26em}.vxe-radio .vxe-radio--icon{color:var(--vxe-ui-input-border-color);border-radius:50%;vertical-align:middle;font-weight:700;-webkit-user-select:none;-moz-user-select:none;user-select:none}.vxe-radio.is--checked{color:var(--vxe-ui-font-primary-color)}.vxe-radio.is--checked .vxe-radio--icon{color:var(--vxe-ui-font-primary-color)}.vxe-radio:not(.is--disabled):hover .vxe-radio--icon{color:var(--vxe-ui-font-primary-color)}.vxe-radio.is--readonly{cursor:auto}.vxe-radio.is--disabled{color:var(--vxe-ui-font-disabled-color);cursor:not-allowed}.vxe-radio.is--disabled .vxe-radio--icon{color:var(--vxe-ui-input-disabled-color)}.vxe-radio .vxe-radio--label{padding-left:.5em;vertical-align:middle}.vxe-radio>input[type=radio]{position:absolute;width:0;height:0;border:0;-webkit-appearance:none;-moz-appearance:none;appearance:none}.vxe-radio .vxe-radio--label{vertical-align:middle;display:inline-block;max-width:50em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vxe-radio:not(.is--disabled)>input:focus+.vxe-radio--icon{color:var(--vxe-ui-font-primary-darken-color)}.vxe-radio{font-size:var(--vxe-ui-font-size-default)}.vxe-radio.size--medium{font-size:var(--vxe-ui-font-size-medium)}.vxe-radio.size--small{font-size:var(--vxe-ui-font-size-small)}.vxe-radio.size--mini{font-size:var(--vxe-ui-font-size-mini)}.vxe-radio:last-of-type{margin-right:0}.vxe-radio--default,.vxe-radio-group{margin-right:var(--vxe-ui-base-margin-gap-default)}.vxe-radio--default.size--medium,.vxe-radio-group.size--medium{margin-right:var(--vxe-ui-base-margin-gap-medium)}.vxe-radio--default.size--small,.vxe-radio-group.size--small{margin-right:var(--vxe-ui-base-margin-gap-small)}.vxe-radio--default.size--mini,.vxe-radio-group.size--mini{margin-right:var(--vxe-ui-base-margin-gap-mini)}.vxe-radio--default:last-of-type,.vxe-radio-group:last-of-type{margin-right:0}