vxe-pc-ui 3.0.0 → 3.0.1

package/es/carousel/style.css

@@ -0,0 +1,185 @@
+.vxe-carousel {
+  position: relative;
+  font-size: var(--vxe-ui-font-size-default);
+  color: var(--vxe-ui-font-color);
+  font-family: var(--vxe-ui-font-family);
+  background-color: var(--vxe-ui-layout-background-color);
+  overflow: hidden;
+}
+.vxe-carousel:hover .vxe-carousel--indicators {
+  opacity: 1;
+}
+.vxe-carousel:hover .vxe-carousel--previous-btn,
+.vxe-carousel:hover .vxe-carousel--next-btn {
+  opacity: 1;
+}
+.vxe-carousel:hover.is--horizontal .vxe-carousel--previous-btn,
+.vxe-carousel:hover.is--horizontal .vxe-carousel--next-btn {
+  transform: translate(0, -50%);
+}
+.vxe-carousel:hover.is--vertical .vxe-carousel--previous-btn,
+.vxe-carousel:hover.is--vertical .vxe-carousel--next-btn {
+  transform: translate(-50%, 0);
+}
+.vxe-carousel.is--horizontal .vxe-carousel--list {
+  height: 100%;
+  flex-direction: row;
+}
+.vxe-carousel.is--horizontal .vxe-carousel--indicators {
+  flex-direction: row;
+  bottom: 0.3em;
+  left: 50%;
+  padding: 0.15em 0.3em;
+  transform: translateX(-50%);
+}
+.vxe-carousel.is--horizontal .vxe-carousel--indicators:hover {
+  transform: translateX(-50%) scale(1.1);
+}
+.vxe-carousel.is--horizontal .vxe-carousel--indicators-item {
+  margin: 0.2em 0.25em;
+}
+.vxe-carousel.is--horizontal .vxe-carousel--previous-btn,
+.vxe-carousel.is--horizontal .vxe-carousel--next-btn {
+  top: 50%;
+  transform: translate(0, -50%);
+}
+.vxe-carousel.is--horizontal .vxe-carousel--previous-btn:hover,
+.vxe-carousel.is--horizontal .vxe-carousel--next-btn:hover {
+  transform: translate(0, -50%) scale(1.1);
+}
+.vxe-carousel.is--horizontal .vxe-carousel--previous-btn:active,
+.vxe-carousel.is--horizontal .vxe-carousel--next-btn:active {
+  transform: translate(0, -50%) scale(0.8);
+}
+.vxe-carousel.is--horizontal .vxe-carousel--previous-btn {
+  left: 0.3em;
+  transform: translate(-0.8em, -50%);
+}
+.vxe-carousel.is--horizontal .vxe-carousel--next-btn {
+  right: 0.3em;
+  transform: translate(0.8em, -50%);
+}
+.vxe-carousel.is--vertical .vxe-carousel--list {
+  width: 100%;
+  flex-direction: column;
+}
+.vxe-carousel.is--vertical .vxe-carousel--indicators {
+  display: flex;
+  flex-direction: column;
+  padding: 0.3em 0.15em;
+  top: 50%;
+  right: 0.3em;
+  transform: translateY(-50%);
+}
+.vxe-carousel.is--vertical .vxe-carousel--indicators:hover {
+  transform: translateY(-50%) scale(1.1);
+}
+.vxe-carousel.is--vertical .vxe-carousel--indicators-item {
+  margin: 0.25em 0.2em;
+}
+.vxe-carousel.is--vertical .vxe-carousel--previous-btn,
+.vxe-carousel.is--vertical .vxe-carousel--next-btn {
+  left: 50%;
+}
+.vxe-carousel.is--vertical .vxe-carousel--previous-btn:hover,
+.vxe-carousel.is--vertical .vxe-carousel--next-btn:hover {
+  transform: translate(-50%, 0) scale(1.1);
+}
+.vxe-carousel.is--vertical .vxe-carousel--previous-btn:active,
+.vxe-carousel.is--vertical .vxe-carousel--next-btn:active {
+  transform: translate(-50%, 0) scale(0.8);
+}
+.vxe-carousel.is--vertical .vxe-carousel--previous-btn {
+  top: 0.3em;
+  transform: translate(-50%, -0.8em);
+}
+.vxe-carousel.is--vertical .vxe-carousel--next-btn {
+  bottom: 0.3em;
+  transform: translate(-50%, 0.8em);
+}
+
+.vxe-carousel--slots {
+  display: none;
+}
+
+.vxe-carousel--item-wrapper {
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+}
+
+.vxe-carousel--list {
+  position: absolute;
+  left: 0;
+  top: 0;
+  display: flex;
+  outline: 0;
+  transition: transform 0.2s ease-in-out;
+}
+
+.vxe-carousel--item-inner {
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  flex-grow: 1;
+}
+
+.vxe-carousel--item-img {
+  max-width: 100%;
+  max-height: 100%;
+}
+
+.vxe-carousel--indicators {
+  position: absolute;
+  display: inline-flex;
+  background-color: rgba(0, 0, 0, 0.6);
+  border-radius: 0.6em;
+  opacity: 0;
+  transition: all 0.3s ease-in-out;
+}
+
+.vxe-carousel--indicators-item {
+  width: 0.8em;
+  height: 0.8em;
+  border-radius: 50%;
+  background-color: rgba(255, 255, 255, 0.8);
+  cursor: pointer;
+  transition: all 0.2s ease-in-out;
+}
+.vxe-carousel--indicators-item.is--active {
+  background-color: rgb(255, 255, 255);
+}
+.vxe-carousel--indicators-item:hover {
+  background-color: rgba(255, 255, 255, 0.9);
+}
+.vxe-carousel--indicators-item:active {
+  background-color: var(--vxe-ui-font-primary-color);
+  transform: scale(0.8);
+}
+
+.vxe-carousel--previous-btn,
+.vxe-carousel--next-btn {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  width: 1.8em;
+  height: 1.8em;
+  border-radius: 50%;
+  font-size: 1.4em;
+  background-color: rgba(0, 0, 0, 0.8);
+  opacity: 0;
+  color: rgba(255, 255, 255, 0.6);
+  cursor: pointer;
+  transition: all 0.2s ease-in-out;
+}
+.vxe-carousel--previous-btn:hover,
+.vxe-carousel--next-btn:hover {
+  color: rgb(255, 255, 255);
+}
+.vxe-carousel--previous-btn:active,
+.vxe-carousel--next-btn:active {
+  color: var(--vxe-ui-font-primary-color);
+  background-color: rgba(0, 0, 0, 0.6);
+}

package/es/carousel/style.min.css

@@ -0,0 +1 @@
+.vxe-carousel{position:relative;font-size:var(--vxe-ui-font-size-default);color:var(--vxe-ui-font-color);font-family:var(--vxe-ui-font-family);background-color:var(--vxe-ui-layout-background-color);overflow:hidden}.vxe-carousel:hover .vxe-carousel--indicators{opacity:1}.vxe-carousel:hover .vxe-carousel--next-btn,.vxe-carousel:hover .vxe-carousel--previous-btn{opacity:1}.vxe-carousel:hover.is--horizontal .vxe-carousel--next-btn,.vxe-carousel:hover.is--horizontal .vxe-carousel--previous-btn{transform:translate(0,-50%)}.vxe-carousel:hover.is--vertical .vxe-carousel--next-btn,.vxe-carousel:hover.is--vertical .vxe-carousel--previous-btn{transform:translate(-50%,0)}.vxe-carousel.is--horizontal .vxe-carousel--list{height:100%;flex-direction:row}.vxe-carousel.is--horizontal .vxe-carousel--indicators{flex-direction:row;bottom:.3em;left:50%;padding:.15em .3em;transform:translateX(-50%)}.vxe-carousel.is--horizontal .vxe-carousel--indicators:hover{transform:translateX(-50%) scale(1.1)}.vxe-carousel.is--horizontal .vxe-carousel--indicators-item{margin:.2em .25em}.vxe-carousel.is--horizontal .vxe-carousel--next-btn,.vxe-carousel.is--horizontal .vxe-carousel--previous-btn{top:50%;transform:translate(0,-50%)}.vxe-carousel.is--horizontal .vxe-carousel--next-btn:hover,.vxe-carousel.is--horizontal .vxe-carousel--previous-btn:hover{transform:translate(0,-50%) scale(1.1)}.vxe-carousel.is--horizontal .vxe-carousel--next-btn:active,.vxe-carousel.is--horizontal .vxe-carousel--previous-btn:active{transform:translate(0,-50%) scale(.8)}.vxe-carousel.is--horizontal .vxe-carousel--previous-btn{left:.3em;transform:translate(-.8em,-50%)}.vxe-carousel.is--horizontal .vxe-carousel--next-btn{right:.3em;transform:translate(.8em,-50%)}.vxe-carousel.is--vertical .vxe-carousel--list{width:100%;flex-direction:column}.vxe-carousel.is--vertical .vxe-carousel--indicators{display:flex;flex-direction:column;padding:.3em .15em;top:50%;right:.3em;transform:translateY(-50%)}.vxe-carousel.is--vertical .vxe-carousel--indicators:hover{transform:translateY(-50%) scale(1.1)}.vxe-carousel.is--vertical .vxe-carousel--indicators-item{margin:.25em .2em}.vxe-carousel.is--vertical .vxe-carousel--next-btn,.vxe-carousel.is--vertical .vxe-carousel--previous-btn{left:50%}.vxe-carousel.is--vertical .vxe-carousel--next-btn:hover,.vxe-carousel.is--vertical .vxe-carousel--previous-btn:hover{transform:translate(-50%,0) scale(1.1)}.vxe-carousel.is--vertical .vxe-carousel--next-btn:active,.vxe-carousel.is--vertical .vxe-carousel--previous-btn:active{transform:translate(-50%,0) scale(.8)}.vxe-carousel.is--vertical .vxe-carousel--previous-btn{top:.3em;transform:translate(-50%,-.8em)}.vxe-carousel.is--vertical .vxe-carousel--next-btn{bottom:.3em;transform:translate(-50%,.8em)}.vxe-carousel--slots{display:none}.vxe-carousel--item-wrapper{position:relative;width:100%;overflow:hidden}.vxe-carousel--list{position:absolute;left:0;top:0;display:flex;outline:0;transition:transform .2s ease-in-out}.vxe-carousel--item-inner{width:100%;height:100%;text-align:center;flex-grow:1}.vxe-carousel--item-img{max-width:100%;max-height:100%}.vxe-carousel--indicators{position:absolute;display:inline-flex;background-color:rgba(0,0,0,.6);border-radius:.6em;opacity:0;transition:all .3s ease-in-out}.vxe-carousel--indicators-item{width:.8em;height:.8em;border-radius:50%;background-color:rgba(255,255,255,.8);cursor:pointer;transition:all .2s ease-in-out}.vxe-carousel--indicators-item.is--active{background-color:#fff}.vxe-carousel--indicators-item:hover{background-color:rgba(255,255,255,.9)}.vxe-carousel--indicators-item:active{background-color:var(--vxe-ui-font-primary-color);transform:scale(.8)}.vxe-carousel--next-btn,.vxe-carousel--previous-btn{display:flex;flex-direction:row;align-items:center;justify-content:center;position:absolute;width:1.8em;height:1.8em;border-radius:50%;font-size:1.4em;background-color:rgba(0,0,0,.8);opacity:0;color:rgba(255,255,255,.6);cursor:pointer;transition:all .2s ease-in-out}.vxe-carousel--next-btn:hover,.vxe-carousel--previous-btn:hover{color:#fff}.vxe-carousel--next-btn:active,.vxe-carousel--previous-btn:active{color:var(--vxe-ui-font-primary-color);background-color:rgba(0,0,0,.6)}

package/es/carousel-item/index.js

@@ -0,0 +1,12 @@
+import { VxeUI } from '@vxe-ui/core';
+import VxeCarouselItemComponent from '../carousel/src/carousel-item';
+import { dynamicApp } from '../dynamics';
+export const VxeCarouselItem = Object.assign({}, VxeCarouselItemComponent, {
+    install(app) {
+        app.component(VxeCarouselItemComponent.name, VxeCarouselItemComponent);
+    }
+});
+dynamicApp.use(VxeCarouselItem);
+VxeUI.component(VxeCarouselItemComponent);
+export const CarouselItem = VxeCarouselItem;
+export default VxeCarouselItem;

package/es/checkbox/index.js

@@ -0,0 +1,12 @@
+import { VxeUI } from '@vxe-ui/core';
+import VxeCheckboxComponent from './src/checkbox';
+import { dynamicApp } from '../dynamics';
+export const VxeCheckbox = Object.assign(VxeCheckboxComponent, {
+    install(app) {
+        app.component(VxeCheckboxComponent.name, VxeCheckboxComponent);
+    }
+});
+dynamicApp.use(VxeCheckbox);
+VxeUI.component(VxeCheckboxComponent);
+export const Checkbox = VxeCheckbox;
+export default VxeCheckbox;

package/es/checkbox/src/checkbox.js

@@ -0,0 +1,159 @@
+import { defineVxeComponent } from '../../ui/src/comp';
+import XEUtils from 'xe-utils';
+import { getFuncText } from '../../ui/src/utils';
+import { getConfig, createEvent, globalMixins, getIcon } from '../../ui';
+export default defineVxeComponent({
+    name: 'VxeCheckbox',
+    mixins: [
+        globalMixins.sizeMixin
+    ],
+    props: {
+        value: [String, Number, Boolean],
+        label: {
+            type: [String, Number],
+            default: null
+        },
+        indeterminate: Boolean,
+        title: [String, Number],
+        checkedValue: {
+            type: [String, Number, Boolean],
+            default: true
+        },
+        uncheckedValue: {
+            type: [String, Number, Boolean],
+            default: false
+        },
+        content: [String, Number],
+        disabled: {
+            type: Boolean,
+            default: null
+        },
+        size: {
+            type: String,
+            default: () => getConfig().checkbox.size || getConfig().size
+        }
+    },
+    inject: {
+        $xeForm: {
+            default: null
+        },
+        formItemInfo: {
+            from: 'xeFormItemInfo',
+            default: null
+        },
+        $xeCheckboxGroup: {
+            default: null
+        }
+    },
+    data() {
+        const reactData = {};
+        return {
+            xID: XEUtils.uniqueId(),
+            reactData
+        };
+    },
+    computed: Object.assign(Object.assign({}, {}), { computeIsChecked() {
+            const $xeCheckbox = this;
+            const props = $xeCheckbox;
+            const $xeCheckboxGroup = $xeCheckbox.$xeCheckboxGroup;
+            if ($xeCheckboxGroup) {
+                return XEUtils.includes($xeCheckboxGroup.value, props.label);
+            }
+            return props.value === props.checkedValue;
+        },
+        computeIsDisabled() {
+            const $xeCheckbox = this;
+            const props = $xeCheckbox;
+            const $xeCheckboxGroup = $xeCheckbox.$xeCheckboxGroup;
+            const { disabled } = props;
+            const isChecked = $xeCheckbox.computeIsChecked;
+            if (disabled === null) {
+                if ($xeCheckboxGroup) {
+                    const isGroupDisabled = $xeCheckboxGroup.computeIsDisabled;
+                    const isGroupMaximize = $xeCheckboxGroup.computeIsMaximize;
+                    return isGroupDisabled || (isGroupMaximize && !isChecked);
+                }
+            }
+            return disabled;
+        } }),
+    methods: {
+        //
+        // Method
+        //
+        dispatchEvent(type, params, evnt) {
+            const $xeCheckbox = this;
+            $xeCheckbox.$emit(type, createEvent(evnt, { $checkbox: $xeCheckbox }, params));
+        },
+        changeEvent(evnt) {
+            const $xeCheckbox = this;
+            const props = $xeCheckbox;
+            const $xeCheckboxGroup = $xeCheckbox.$xeCheckboxGroup;
+            const $xeForm = $xeCheckbox.$xeForm;
+            const formItemInfo = $xeCheckbox.formItemInfo;
+            const { checkedValue, uncheckedValue } = props;
+            const isDisabled = $xeCheckbox.computeIsDisabled;
+            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 {
+                    $xeCheckbox.$emit('input', value);
+                    $xeCheckbox.dispatchEvent('change', params, evnt);
+                    // 自动更新校验状态
+                    if ($xeForm && formItemInfo) {
+                        $xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, value);
+                    }
+                }
+            }
+        },
+        //
+        // Render
+        //
+        renderVN(h) {
+            const $xeCheckbox = this;
+            const props = $xeCheckbox;
+            const slots = $xeCheckbox.$scopedSlots;
+            const vSize = $xeCheckbox.computeSize;
+            const isDisabled = $xeCheckbox.computeIsDisabled;
+            const isChecked = $xeCheckbox.computeIsChecked;
+            const indeterminate = !isChecked && props.indeterminate;
+            return h('label', {
+                class: ['vxe-checkbox', {
+                        [`size--${vSize}`]: vSize,
+                        'is--indeterminate': indeterminate,
+                        'is--disabled': isDisabled,
+                        'is--checked': isChecked
+                    }],
+                attrs: {
+                    title: props.title
+                }
+            }, [
+                h('input', {
+                    class: 'vxe-checkbox--input',
+                    domProps: {
+                        checked: isChecked
+                    },
+                    attrs: {
+                        type: 'checkbox',
+                        disabled: isDisabled
+                    },
+                    on: {
+                        change: $xeCheckbox.changeEvent
+                    }
+                }),
+                h('span', {
+                    class: ['vxe-checkbox--icon', indeterminate ? getIcon().CHECKBOX_INDETERMINATE : (isChecked ? getIcon().CHECKBOX_CHECKED : getIcon().CHECKBOX_UNCHECKED)]
+                }),
+                h('span', {
+                    class: 'vxe-checkbox--label'
+                }, slots.default ? slots.default({}) : getFuncText(props.content))
+            ]);
+        }
+    },
+    render(h) {
+        return this.renderVN(h);
+    }
+});

package/es/checkbox/src/group.js

@@ -0,0 +1,154 @@
+import { defineVxeComponent } from '../../ui/src/comp';
+import XEUtils from 'xe-utils';
+import { getConfig, createEvent, globalMixins } from '../../ui';
+import VxeCheckboxComponent from './checkbox';
+export default defineVxeComponent({
+    name: 'VxeCheckboxGroup',
+    mixins: [
+        globalMixins.sizeMixin
+    ],
+    props: {
+        value: Array,
+        options: Array,
+        optionProps: Object,
+        disabled: {
+            type: Boolean,
+            default: null
+        },
+        max: {
+            type: [String, Number],
+            default: null
+        },
+        size: {
+            type: String,
+            default: () => getConfig().checkboxGroup.size || getConfig().size
+        }
+    },
+    inject: {
+        $xeForm: {
+            default: null
+        },
+        formItemInfo: {
+            from: 'xeFormItemInfo',
+            default: null
+        }
+    },
+    provide() {
+        const $xeCheckboxGroup = this;
+        return {
+            $xeCheckboxGroup
+        };
+    },
+    data() {
+        const reactData = {};
+        return {
+            xID: XEUtils.uniqueId(),
+            reactData
+        };
+    },
+    computed: Object.assign(Object.assign({}, {}), { computeIsDisabled() {
+            const $xeCheckboxGroup = this;
+            const props = $xeCheckboxGroup;
+            const $xeForm = $xeCheckboxGroup.$xeForm;
+            const { disabled } = props;
+            if (disabled === null) {
+                if ($xeForm) {
+                    return $xeForm.readonly || $xeForm.disabled;
+                }
+                return false;
+            }
+            return disabled;
+        },
+        computeIsMaximize() {
+            const $xeCheckboxGroup = this;
+            const props = $xeCheckboxGroup;
+            const { value, max } = props;
+            if (max) {
+                return (value ? value.length : 0) >= XEUtils.toNumber(max);
+            }
+            return false;
+        },
+        computePropsOpts() {
+            const $xeCheckboxGroup = this;
+            const props = $xeCheckboxGroup;
+            return Object.assign({}, props.optionProps);
+        },
+        computeLabelField() {
+            const $xeCheckboxGroup = this;
+            const propsOpts = $xeCheckboxGroup.computePropsOpts;
+            return propsOpts.label || 'label';
+        },
+        computeValueField() {
+            const $xeCheckboxGroup = this;
+            const propsOpts = $xeCheckboxGroup.computePropsOpts;
+            return propsOpts.value || 'value';
+        },
+        computeDisabledField() {
+            const $xeCheckboxGroup = this;
+            const propsOpts = $xeCheckboxGroup.computePropsOpts;
+            return propsOpts.disabled || 'disabled';
+        } }),
+    methods: {
+        //
+        // Method
+        //
+        dispatchEvent(type, params, evnt) {
+            const $xeCheckboxGroup = this;
+            $xeCheckboxGroup.$emit(type, createEvent(evnt, { $checkboxGroup: $xeCheckboxGroup }, params));
+        },
+        handleChecked(params, evnt) {
+            const $xeCheckboxGroup = this;
+            const props = $xeCheckboxGroup;
+            const $xeForm = $xeCheckboxGroup.$xeForm;
+            const formItemInfo = $xeCheckboxGroup.formItemInfo;
+            const { checked, label } = params;
+            const checklist = props.value || [];
+            const checkIndex = checklist.indexOf(label);
+            if (checked) {
+                if (checkIndex === -1) {
+                    checklist.push(label);
+                }
+            }
+            else {
+                checklist.splice(checkIndex, 1);
+            }
+            $xeCheckboxGroup.$emit('input', checklist);
+            $xeCheckboxGroup.dispatchEvent('change', Object.assign({ checklist }, params), evnt);
+            // 自动更新校验状态
+            if ($xeForm && formItemInfo) {
+                $xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, checklist);
+            }
+        },
+        //
+        // Render
+        //
+        renderVN(h) {
+            const $xeCheckboxGroup = this;
+            const props = $xeCheckboxGroup;
+            const slots = $xeCheckboxGroup.$scopedSlots;
+            const { options } = props;
+            const defaultSlot = slots.default;
+            const valueField = $xeCheckboxGroup.computeValueField;
+            const labelField = $xeCheckboxGroup.computeLabelField;
+            const disabledField = $xeCheckboxGroup.computeDisabledField;
+            return h('div', {
+                class: 'vxe-checkbox-group'
+            }, defaultSlot
+                ? defaultSlot({})
+                : (options
+                    ? options.map(item => {
+                        return h(VxeCheckboxComponent, {
+                            props: {
+                                label: item[valueField],
+                                content: item[labelField],
+                                disabled: item[disabledField]
+                            }
+                        });
+                    })
+                    : []));
+        }
+    },
+    render(h) {
+        return this.renderVN(h);
+    }
+});

package/es/checkbox/style.css

@@ -0,0 +1,117 @@
+/*checkbox-group*/
+.vxe-checkbox-group {
+  display: inline-block;
+  vertical-align: middle;
+  line-height: 1;
+}
+
+.vxe-checkbox-slots {
+  display: none;
+}
+
+.vxe-checkbox--readonly {
+  color: var(--vxe-ui-font-color);
+  display: inline-flex;
+}
+
+/*checkbox*/
+.vxe-checkbox {
+  display: inline-block;
+  vertical-align: middle;
+  white-space: nowrap;
+  line-height: 1;
+}
+.vxe-checkbox .vxe-checkbox--icon {
+  font-size: 1.22em;
+}
+.vxe-checkbox .vxe-checkbox--icon {
+  color: var(--vxe-ui-input-border-color);
+  vertical-align: middle;
+  font-weight: 700;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+}
+.vxe-checkbox.is--checked, .vxe-checkbox.is--indeterminate {
+  color: var(--vxe-ui-font-primary-color);
+}
+.vxe-checkbox.is--checked .vxe-checkbox--icon, .vxe-checkbox.is--indeterminate .vxe-checkbox--icon {
+  color: var(--vxe-ui-font-primary-color);
+}
+.vxe-checkbox:not(.is--disabled) {
+  cursor: pointer;
+}
+.vxe-checkbox:not(.is--disabled):hover .vxe-checkbox--icon {
+  color: var(--vxe-ui-font-primary-color);
+}
+.vxe-checkbox.is--hidden {
+  cursor: default;
+}
+.vxe-checkbox.is--disabled {
+  color: var(--vxe-ui-font-disabled-color);
+  cursor: not-allowed;
+}
+.vxe-checkbox.is--disabled .vxe-checkbox--icon {
+  color: var(--vxe-ui-input-disabled-color);
+}
+.vxe-checkbox .vxe-checkbox--label {
+  padding-left: 0.5em;
+  vertical-align: middle;
+}
+.vxe-checkbox + .vxe-checkbox {
+  margin-left: 10px;
+}
+.vxe-checkbox > input[type=checkbox] {
+  position: absolute;
+  width: 0;
+  height: 0;
+  border: 0;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+}
+.vxe-checkbox.is--indeterminate > input:not(:checked) + .vxe-checkbox--icon {
+  color: var(--vxe-ui-font-primary-color);
+}
+.vxe-checkbox:not(.is--disabled) > input:focus + .vxe-checkbox--icon {
+  color: var(--vxe-ui-font-primary-color);
+  box-shadow: 0 0 0.2em 0 var(--vxe-ui-font-primary-color);
+}
+.vxe-checkbox:not(.is--disabled):hover > input + .vxe-checkbox--icon {
+  border-color: var(--vxe-ui-font-primary-color);
+}
+.vxe-checkbox.is--disabled {
+  cursor: not-allowed;
+}
+.vxe-checkbox.is--disabled > input + .vxe-checkbox--icon {
+  color: var(--vxe-ui-input-disabled-color);
+}
+.vxe-checkbox.is--disabled > input + .vxe-checkbox--icon + .vxe-checkbox--label {
+  color: var(--vxe-ui-font-disabled-color);
+}
+.vxe-checkbox.is--disabled > input:checked + .vxe-checkbox--icon {
+  color: var(--vxe-ui-input-disabled-color);
+}
+.vxe-checkbox .vxe-checkbox--label {
+  padding-left: 0.5em;
+  vertical-align: middle;
+  display: inline-block;
+  max-width: 50em;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.vxe-checkbox {
+  font-size: var(--vxe-ui-font-size-default);
+}
+.vxe-checkbox.size--medium {
+  font-size: var(--vxe-ui-font-size-medium);
+}
+.vxe-checkbox.size--small {
+  font-size: var(--vxe-ui-font-size-small);
+}
+.vxe-checkbox.size--mini {
+  font-size: var(--vxe-ui-font-size-mini);
+}

package/es/checkbox/style.min.css

@@ -0,0 +1 @@
+.vxe-checkbox-group{display:inline-block;vertical-align:middle;line-height:1}.vxe-checkbox-slots{display:none}.vxe-checkbox--readonly{color:var(--vxe-ui-font-color);display:inline-flex}.vxe-checkbox{display:inline-block;vertical-align:middle;white-space:nowrap;line-height:1}.vxe-checkbox .vxe-checkbox--icon{font-size:1.22em}.vxe-checkbox .vxe-checkbox--icon{color:var(--vxe-ui-input-border-color);vertical-align:middle;font-weight:700;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.vxe-checkbox.is--checked,.vxe-checkbox.is--indeterminate{color:var(--vxe-ui-font-primary-color)}.vxe-checkbox.is--checked .vxe-checkbox--icon,.vxe-checkbox.is--indeterminate .vxe-checkbox--icon{color:var(--vxe-ui-font-primary-color)}.vxe-checkbox:not(.is--disabled){cursor:pointer}.vxe-checkbox:not(.is--disabled):hover .vxe-checkbox--icon{color:var(--vxe-ui-font-primary-color)}.vxe-checkbox.is--hidden{cursor:default}.vxe-checkbox.is--disabled{color:var(--vxe-ui-font-disabled-color);cursor:not-allowed}.vxe-checkbox.is--disabled .vxe-checkbox--icon{color:var(--vxe-ui-input-disabled-color)}.vxe-checkbox .vxe-checkbox--label{padding-left:.5em;vertical-align:middle}.vxe-checkbox+.vxe-checkbox{margin-left:10px}.vxe-checkbox>input[type=checkbox]{position:absolute;width:0;height:0;border:0;-webkit-appearance:none;-moz-appearance:none;appearance:none}.vxe-checkbox.is--indeterminate>input:not(:checked)+.vxe-checkbox--icon{color:var(--vxe-ui-font-primary-color)}.vxe-checkbox:not(.is--disabled)>input:focus+.vxe-checkbox--icon{color:var(--vxe-ui-font-primary-color);box-shadow:0 0 .2em 0 var(--vxe-ui-font-primary-color)}.vxe-checkbox:not(.is--disabled):hover>input+.vxe-checkbox--icon{border-color:var(--vxe-ui-font-primary-color)}.vxe-checkbox.is--disabled{cursor:not-allowed}.vxe-checkbox.is--disabled>input+.vxe-checkbox--icon{color:var(--vxe-ui-input-disabled-color)}.vxe-checkbox.is--disabled>input+.vxe-checkbox--icon+.vxe-checkbox--label{color:var(--vxe-ui-font-disabled-color)}.vxe-checkbox.is--disabled>input:checked+.vxe-checkbox--icon{color:var(--vxe-ui-input-disabled-color)}.vxe-checkbox .vxe-checkbox--label{padding-left:.5em;vertical-align:middle;display:inline-block;max-width:50em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vxe-checkbox{font-size:var(--vxe-ui-font-size-default)}.vxe-checkbox.size--medium{font-size:var(--vxe-ui-font-size-medium)}.vxe-checkbox.size--small{font-size:var(--vxe-ui-font-size-small)}.vxe-checkbox.size--mini{font-size:var(--vxe-ui-font-size-mini)}

package/es/checkbox-group/index.js

@@ -0,0 +1,12 @@
+import { VxeUI } from '@vxe-ui/core';
+import VxeCheckboxGroupComponent from '../checkbox/src/group';
+import { dynamicApp } from '../dynamics';
+export const VxeCheckboxGroup = Object.assign(VxeCheckboxGroupComponent, {
+    install(app) {
+        app.component(VxeCheckboxGroupComponent.name, VxeCheckboxGroupComponent);
+    }
+});
+dynamicApp.use(VxeCheckboxGroup);
+VxeUI.component(VxeCheckboxGroupComponent);
+export const CheckboxGroup = VxeCheckboxGroup;
+export default VxeCheckboxGroup;