vxe-pc-ui 4.11.27 → 4.11.29

package/es/segmented/src/segmented.js

@@ -0,0 +1,218 @@
+import { ref, h, reactive, watch, computed, nextTick, onMounted, onBeforeUnmount } from 'vue';
+import { defineVxeComponent } from '../../ui/src/comp';
+import XEUtils from 'xe-utils';
+import { getConfig, createEvent, useSize } from '../../ui';
+import { toCssUnit } from '../../ui/src/dom';
+function createReactData() {
+    return {
+        groupName: XEUtils.uniqueId('xe_group_'),
+        selectStyle: {
+            display: '',
+            left: '',
+            width: ''
+        }
+    };
+}
+export default defineVxeComponent({
+    name: 'VxeSegmented',
+    props: {
+        modelValue: [String, Number],
+        name: [String, Number],
+        disabled: Boolean,
+        options: Array,
+        type: {
+            type: String,
+            default: () => getConfig().segmented.type
+        },
+        status: String,
+        width: [String, Number],
+        height: [String, Number],
+        optionConfig: Object,
+        size: {
+            type: String,
+            default: () => getConfig().segmented.size || getConfig().size
+        }
+    },
+    emits: [
+        'update:modelValue',
+        'change'
+    ],
+    setup(props, context) {
+        const { slots, emit } = context;
+        const xID = XEUtils.uniqueId();
+        const { computeSize } = useSize(props);
+        const refElem = ref();
+        const refWrapperElem = ref();
+        const refSelectedElem = ref();
+        const reactData = reactive(createReactData());
+        const refMaps = {
+            refElem
+        };
+        const computeItemType = computed(() => {
+            const { type } = props;
+            if (type === 'round') {
+                return type;
+            }
+            if (type === 'inside') {
+                return type;
+            }
+            return 'default';
+        });
+        const computeWrapperStyle = computed(() => {
+            const { width, height } = props;
+            const stys = {};
+            if (width) {
+                stys.width = toCssUnit(width);
+            }
+            if (height) {
+                stys.height = toCssUnit(height);
+            }
+            return stys;
+        });
+        const computeOptionOpts = computed(() => {
+            return Object.assign({}, getConfig().segmented.optionConfig, props.optionConfig);
+        });
+        const computeItemList = computed(() => {
+            return props.options || [];
+        });
+        const computeSelectIndex = computed(() => {
+            const { modelValue } = props;
+            const itemList = computeItemList.value;
+            return XEUtils.findIndexOf(itemList, item => item.value === modelValue);
+        });
+        const comIsFullWidth = computed(() => {
+            const wrapperStyle = computeWrapperStyle.value;
+            return wrapperStyle.width === '100%';
+        });
+        const computeMaps = {};
+        const $xeSegmented = {
+            xID,
+            props,
+            context,
+            reactData,
+            getRefMaps: () => refMaps,
+            getComputeMaps: () => computeMaps
+        };
+        const dispatchEvent = (type, params, evnt) => {
+            emit(type, createEvent(evnt, { $segmented: $xeSegmented }, params));
+        };
+        const emitModel = (value) => {
+            emit('update:modelValue', value);
+        };
+        const changeEvent = (evnt, item) => {
+            const value = item.value;
+            emitModel(value);
+            dispatchEvent('change', { value }, evnt);
+            updateStyle();
+        };
+        const updateStyle = () => {
+            nextTick(() => {
+                const selectIndex = computeSelectIndex.value;
+                const wrapperElem = refWrapperElem.value;
+                const atStyle = {
+                    display: '',
+                    left: '',
+                    width: ''
+                };
+                if (wrapperElem) {
+                    const itemEl = wrapperElem.children[selectIndex];
+                    if (itemEl) {
+                        atStyle.display = 'block';
+                        atStyle.left = toCssUnit(itemEl.offsetLeft);
+                        atStyle.width = toCssUnit(itemEl.clientWidth);
+                    }
+                }
+                reactData.selectStyle = atStyle;
+            });
+        };
+        const tagMethods = {
+            dispatchEvent
+        };
+        const tagPrivateMethods = {};
+        Object.assign($xeSegmented, tagMethods, tagPrivateMethods);
+        const renderItems = () => {
+            const { modelValue, name } = props;
+            const { groupName } = reactData;
+            const optionOpts = computeOptionOpts.value;
+            const itemList = computeItemList.value;
+            const isFullWidth = comIsFullWidth.value;
+            const fullItemWidth = isFullWidth ? Math.max(0, 100 / itemList.length) : 0;
+            const defaultSlot = slots.default;
+            const itemVNs = [];
+            itemList.forEach((item, i) => {
+                const itemWidth = item.width || optionOpts.width;
+                itemVNs.push(h('label', {
+                    key: i,
+                    class: ['vxe-segmented--item', {
+                            'is--checked': modelValue === item.value
+                        }],
+                    style: isFullWidth || itemWidth
+                        ? {
+                            width: itemWidth ? toCssUnit(itemWidth) : (fullItemWidth ? `${fullItemWidth}%` : '')
+                        }
+                        : undefined
+                }, [
+                    h('input', {
+                        class: 'vxe-segmented--input',
+                        type: 'radio',
+                        name: name || groupName,
+                        onChange(evnt) {
+                            changeEvent(evnt, item);
+                        }
+                    }),
+                    h('div', {
+                        class: 'vxe-segmented--content'
+                    }, [
+                        h('div', {
+                            class: 'vxe-segmented--label'
+                        }, defaultSlot ? defaultSlot({ option: item }) : XEUtils.eqNull(item.label) ? '' : `${item.label}`)
+                    ])
+                ]));
+            });
+            return itemVNs;
+        };
+        const renderVN = () => {
+            const { status } = props;
+            const { selectStyle } = reactData;
+            const itemType = computeItemType.value;
+            const wrapperStyle = computeWrapperStyle.value;
+            const vSize = computeSize.value;
+            return h('div', {
+                ref: refElem,
+                class: ['vxe-segmented', `type--${itemType}`, {
+                        [`size--${vSize}`]: vSize,
+                        [`theme--${status}`]: status
+                    }]
+            }, [
+                h('div', {
+                    class: 'vxe-segmented--group',
+                    style: wrapperStyle
+                }, [
+                    h('div', {
+                        ref: refSelectedElem,
+                        class: 'vxe-segmented--selected',
+                        style: selectStyle
+                    }),
+                    h('div', {
+                        ref: refWrapperElem,
+                        class: 'vxe-segmented--inner'
+                    }, renderItems())
+                ])
+            ]);
+        };
+        watch(computeSelectIndex, () => {
+            updateStyle();
+        });
+        onMounted(() => {
+            updateStyle();
+        });
+        onBeforeUnmount(() => {
+            XEUtils.assign(reactData, createReactData());
+        });
+        $xeSegmented.renderVN = renderVN;
+        return $xeSegmented;
+    },
+    render() {
+        return this.renderVN();
+    }
+});

package/es/segmented/style.css

@@ -0,0 +1,195 @@
+.vxe-segmented {
+  display: block;
+  color: var(--vxe-ui-font-color);
+  font-family: var(--vxe-ui-font-family);
+}
+
+.vxe-segmented--group {
+  display: inline-flex;
+  position: relative;
+  background-color: var(--vxe-ui-segmented-item-background-color);
+}
+
+.vxe-segmented--inner {
+  width: 100%;
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  white-space: nowrap;
+}
+
+.vxe-segmented--item {
+  display: block;
+  padding: 0 0.8em;
+  margin: 0;
+}
+.vxe-segmented--item:not(.is--disabled) {
+  cursor: pointer;
+}
+
+.vxe-segmented--input {
+  position: absolute;
+  width: 0;
+  height: 0;
+  border: 0;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  pointer-events: none;
+}
+
+.vxe-segmented--content {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  transition: color 0.3s;
+}
+
+.vxe-segmented--label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.vxe-segmented--selected {
+  display: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 0;
+  height: 100%;
+  transition: all 0.3s;
+  pointer-events: none;
+}
+
+.vxe-segmented.type--round .vxe-segmented--group {
+  border-radius: 1em;
+}
+.vxe-segmented.type--round .vxe-segmented--selected {
+  border-radius: 1em;
+}
+.vxe-segmented.type--round .vxe-segmented--item:hover {
+  border-radius: 1em;
+}
+.vxe-segmented.type--default .vxe-segmented--content, .vxe-segmented.type--round .vxe-segmented--content {
+  min-height: 2em;
+}
+.vxe-segmented.type--default .vxe-segmented--item:hover, .vxe-segmented.type--round .vxe-segmented--item:hover {
+  background-color: var(--vxe-ui-segmented-item-hover-background-color);
+}
+.vxe-segmented.type--default .vxe-segmented--item.is--checked .vxe-segmented--content, .vxe-segmented.type--round .vxe-segmented--item.is--checked .vxe-segmented--content {
+  color: #fff;
+}
+.vxe-segmented.type--default .vxe-segmented--selected, .vxe-segmented.type--round .vxe-segmented--selected {
+  background-color: var(--vxe-ui-font-primary-color);
+}
+.vxe-segmented.type--default.theme--primary .vxe-segmented--group, .vxe-segmented.type--round.theme--primary .vxe-segmented--group {
+  background-color: var(--vxe-ui-font-primary-tinge-color);
+}
+.vxe-segmented.type--default.theme--primary .vxe-segmented--selected, .vxe-segmented.type--round.theme--primary .vxe-segmented--selected {
+  background-color: var(--vxe-ui-font-primary-color);
+}
+.vxe-segmented.type--default.theme--primary .vxe-segmented--item.is--checked, .vxe-segmented.type--round.theme--primary .vxe-segmented--item.is--checked {
+  color: #fff;
+}
+.vxe-segmented.type--default.theme--success .vxe-segmented--group, .vxe-segmented.type--round.theme--success .vxe-segmented--group {
+  background-color: var(--vxe-ui-status-success-tinge-color);
+}
+.vxe-segmented.type--default.theme--success .vxe-segmented--selected, .vxe-segmented.type--round.theme--success .vxe-segmented--selected {
+  background-color: var(--vxe-ui-status-success-color);
+}
+.vxe-segmented.type--default.theme--success .vxe-segmented--item.is--checked, .vxe-segmented.type--round.theme--success .vxe-segmented--item.is--checked {
+  color: #fff;
+}
+.vxe-segmented.type--default.theme--info .vxe-segmented--group, .vxe-segmented.type--round.theme--info .vxe-segmented--group {
+  background-color: var(--vxe-ui-status-info-tinge-color);
+}
+.vxe-segmented.type--default.theme--info .vxe-segmented--selected, .vxe-segmented.type--round.theme--info .vxe-segmented--selected {
+  background-color: var(--vxe-ui-status-info-color);
+}
+.vxe-segmented.type--default.theme--info .vxe-segmented--item.is--checked, .vxe-segmented.type--round.theme--info .vxe-segmented--item.is--checked {
+  color: #fff;
+}
+.vxe-segmented.type--default.theme--warning .vxe-segmented--group, .vxe-segmented.type--round.theme--warning .vxe-segmented--group {
+  background-color: var(--vxe-ui-status-warning-tinge-color);
+}
+.vxe-segmented.type--default.theme--warning .vxe-segmented--selected, .vxe-segmented.type--round.theme--warning .vxe-segmented--selected {
+  background-color: var(--vxe-ui-status-warning-color);
+}
+.vxe-segmented.type--default.theme--warning .vxe-segmented--item.is--checked, .vxe-segmented.type--round.theme--warning .vxe-segmented--item.is--checked {
+  color: #fff;
+}
+.vxe-segmented.type--default.theme--danger .vxe-segmented--group, .vxe-segmented.type--round.theme--danger .vxe-segmented--group {
+  background-color: var(--vxe-ui-status-danger-tinge-color);
+}
+.vxe-segmented.type--default.theme--danger .vxe-segmented--selected, .vxe-segmented.type--round.theme--danger .vxe-segmented--selected {
+  background-color: var(--vxe-ui-status-danger-color);
+}
+.vxe-segmented.type--default.theme--danger .vxe-segmented--item.is--checked, .vxe-segmented.type--round.theme--danger .vxe-segmented--item.is--checked {
+  color: #fff;
+}
+.vxe-segmented.type--default.theme--error .vxe-segmented--group, .vxe-segmented.type--round.theme--error .vxe-segmented--group {
+  background-color: var(--vxe-ui-status-error-tinge-color);
+}
+.vxe-segmented.type--default.theme--error .vxe-segmented--selected, .vxe-segmented.type--round.theme--error .vxe-segmented--selected {
+  background-color: var(--vxe-ui-status-error-color);
+}
+.vxe-segmented.type--default.theme--error .vxe-segmented--item.is--checked, .vxe-segmented.type--round.theme--error .vxe-segmented--item.is--checked {
+  color: #fff;
+}
+.vxe-segmented.type--default .vxe-segmented--group, .vxe-segmented.type--inside .vxe-segmented--group {
+  border-radius: var(--vxe-ui-base-border-radius);
+}
+.vxe-segmented.type--default .vxe-segmented--selected, .vxe-segmented.type--inside .vxe-segmented--selected {
+  border-radius: var(--vxe-ui-base-border-radius);
+}
+.vxe-segmented.type--inside .vxe-segmented--content {
+  min-height: 1.6em;
+}
+.vxe-segmented.type--inside .vxe-segmented--inner {
+  padding: 0.2em;
+}
+.vxe-segmented.type--inside .vxe-segmented--item:hover .vxe-segmented--content {
+  color: var(--vxe-ui-font-primary-color);
+}
+.vxe-segmented.type--inside .vxe-segmented--item.is--checked .vxe-segmented--content {
+  color: var(--vxe-ui-font-primary-color);
+}
+.vxe-segmented.type--inside .vxe-segmented--selected {
+  top: 0.2em;
+  height: calc(100% - 0.4em);
+  background-color: #fff;
+}
+.vxe-segmented.type--inside.theme--primary .vxe-segmented--item.is--checked {
+  color: var(--vxe-ui-font-primary-tinge-color);
+}
+.vxe-segmented.type--inside.theme--success .vxe-segmented--item.is--checked {
+  color: var(--vxe-ui-status-success-tinge-color);
+}
+.vxe-segmented.type--inside.theme--info .vxe-segmented--item.is--checked {
+  color: var(--vxe-ui-status-info-tinge-color);
+}
+.vxe-segmented.type--inside.theme--warning .vxe-segmented--item.is--checked {
+  color: var(--vxe-ui-status-warning-tinge-color);
+}
+.vxe-segmented.type--inside.theme--danger .vxe-segmented--item.is--checked {
+  color: var(--vxe-ui-status-danger-tinge-color);
+}
+.vxe-segmented.type--inside.theme--error .vxe-segmented--item.is--checked {
+  color: var(--vxe-ui-status-error-tinge-color);
+}
+
+.vxe-segmented {
+  font-size: var(--vxe-ui-font-size-default);
+}
+.vxe-segmented.size--medium {
+  font-size: var(--vxe-ui-font-size-medium);
+}
+.vxe-segmented.size--small {
+  font-size: var(--vxe-ui-font-size-small);
+}
+.vxe-segmented.size--mini {
+  font-size: var(--vxe-ui-font-size-mini);
+}

package/es/segmented/style.min.css

@@ -0,0 +1 @@
+.vxe-segmented{display:block;color:var(--vxe-ui-font-color);font-family:var(--vxe-ui-font-family)}.vxe-segmented--group{display:inline-flex;position:relative;background-color:var(--vxe-ui-segmented-item-background-color)}.vxe-segmented--inner{width:100%;position:relative;display:flex;flex-direction:row;white-space:nowrap}.vxe-segmented--item{display:block;padding:0 .8em;margin:0}.vxe-segmented--item:not(.is--disabled){cursor:pointer}.vxe-segmented--input{position:absolute;width:0;height:0;border:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;pointer-events:none}.vxe-segmented--content{display:flex;flex-direction:row;align-items:center;justify-content:center;text-align:center;transition:color .3s}.vxe-segmented--label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vxe-segmented--selected{display:none;position:absolute;top:0;left:0;width:0;height:100%;transition:all .3s;pointer-events:none}.vxe-segmented.type--round .vxe-segmented--group{border-radius:1em}.vxe-segmented.type--round .vxe-segmented--selected{border-radius:1em}.vxe-segmented.type--round .vxe-segmented--item:hover{border-radius:1em}.vxe-segmented.type--default .vxe-segmented--content,.vxe-segmented.type--round .vxe-segmented--content{min-height:2em}.vxe-segmented.type--default .vxe-segmented--item:hover,.vxe-segmented.type--round .vxe-segmented--item:hover{background-color:var(--vxe-ui-segmented-item-hover-background-color)}.vxe-segmented.type--default .vxe-segmented--item.is--checked .vxe-segmented--content,.vxe-segmented.type--round .vxe-segmented--item.is--checked .vxe-segmented--content{color:#fff}.vxe-segmented.type--default .vxe-segmented--selected,.vxe-segmented.type--round .vxe-segmented--selected{background-color:var(--vxe-ui-font-primary-color)}.vxe-segmented.type--default.theme--primary .vxe-segmented--group,.vxe-segmented.type--round.theme--primary .vxe-segmented--group{background-color:var(--vxe-ui-font-primary-tinge-color)}.vxe-segmented.type--default.theme--primary .vxe-segmented--selected,.vxe-segmented.type--round.theme--primary .vxe-segmented--selected{background-color:var(--vxe-ui-font-primary-color)}.vxe-segmented.type--default.theme--primary .vxe-segmented--item.is--checked,.vxe-segmented.type--round.theme--primary .vxe-segmented--item.is--checked{color:#fff}.vxe-segmented.type--default.theme--success .vxe-segmented--group,.vxe-segmented.type--round.theme--success .vxe-segmented--group{background-color:var(--vxe-ui-status-success-tinge-color)}.vxe-segmented.type--default.theme--success .vxe-segmented--selected,.vxe-segmented.type--round.theme--success .vxe-segmented--selected{background-color:var(--vxe-ui-status-success-color)}.vxe-segmented.type--default.theme--success .vxe-segmented--item.is--checked,.vxe-segmented.type--round.theme--success .vxe-segmented--item.is--checked{color:#fff}.vxe-segmented.type--default.theme--info .vxe-segmented--group,.vxe-segmented.type--round.theme--info .vxe-segmented--group{background-color:var(--vxe-ui-status-info-tinge-color)}.vxe-segmented.type--default.theme--info .vxe-segmented--selected,.vxe-segmented.type--round.theme--info .vxe-segmented--selected{background-color:var(--vxe-ui-status-info-color)}.vxe-segmented.type--default.theme--info .vxe-segmented--item.is--checked,.vxe-segmented.type--round.theme--info .vxe-segmented--item.is--checked{color:#fff}.vxe-segmented.type--default.theme--warning .vxe-segmented--group,.vxe-segmented.type--round.theme--warning .vxe-segmented--group{background-color:var(--vxe-ui-status-warning-tinge-color)}.vxe-segmented.type--default.theme--warning .vxe-segmented--selected,.vxe-segmented.type--round.theme--warning .vxe-segmented--selected{background-color:var(--vxe-ui-status-warning-color)}.vxe-segmented.type--default.theme--warning .vxe-segmented--item.is--checked,.vxe-segmented.type--round.theme--warning .vxe-segmented--item.is--checked{color:#fff}.vxe-segmented.type--default.theme--danger .vxe-segmented--group,.vxe-segmented.type--round.theme--danger .vxe-segmented--group{background-color:var(--vxe-ui-status-danger-tinge-color)}.vxe-segmented.type--default.theme--danger .vxe-segmented--selected,.vxe-segmented.type--round.theme--danger .vxe-segmented--selected{background-color:var(--vxe-ui-status-danger-color)}.vxe-segmented.type--default.theme--danger .vxe-segmented--item.is--checked,.vxe-segmented.type--round.theme--danger .vxe-segmented--item.is--checked{color:#fff}.vxe-segmented.type--default.theme--error .vxe-segmented--group,.vxe-segmented.type--round.theme--error .vxe-segmented--group{background-color:var(--vxe-ui-status-error-tinge-color)}.vxe-segmented.type--default.theme--error .vxe-segmented--selected,.vxe-segmented.type--round.theme--error .vxe-segmented--selected{background-color:var(--vxe-ui-status-error-color)}.vxe-segmented.type--default.theme--error .vxe-segmented--item.is--checked,.vxe-segmented.type--round.theme--error .vxe-segmented--item.is--checked{color:#fff}.vxe-segmented.type--default .vxe-segmented--group,.vxe-segmented.type--inside .vxe-segmented--group{border-radius:var(--vxe-ui-base-border-radius)}.vxe-segmented.type--default .vxe-segmented--selected,.vxe-segmented.type--inside .vxe-segmented--selected{border-radius:var(--vxe-ui-base-border-radius)}.vxe-segmented.type--inside .vxe-segmented--content{min-height:1.6em}.vxe-segmented.type--inside .vxe-segmented--inner{padding:.2em}.vxe-segmented.type--inside .vxe-segmented--item:hover .vxe-segmented--content{color:var(--vxe-ui-font-primary-color)}.vxe-segmented.type--inside .vxe-segmented--item.is--checked .vxe-segmented--content{color:var(--vxe-ui-font-primary-color)}.vxe-segmented.type--inside .vxe-segmented--selected{top:.2em;height:calc(100% - .4em);background-color:#fff}.vxe-segmented.type--inside.theme--primary .vxe-segmented--item.is--checked{color:var(--vxe-ui-font-primary-tinge-color)}.vxe-segmented.type--inside.theme--success .vxe-segmented--item.is--checked{color:var(--vxe-ui-status-success-tinge-color)}.vxe-segmented.type--inside.theme--info .vxe-segmented--item.is--checked{color:var(--vxe-ui-status-info-tinge-color)}.vxe-segmented.type--inside.theme--warning .vxe-segmented--item.is--checked{color:var(--vxe-ui-status-warning-tinge-color)}.vxe-segmented.type--inside.theme--danger .vxe-segmented--item.is--checked{color:var(--vxe-ui-status-danger-tinge-color)}.vxe-segmented.type--inside.theme--error .vxe-segmented--item.is--checked{color:var(--vxe-ui-status-error-tinge-color)}.vxe-segmented{font-size:var(--vxe-ui-font-size-default)}.vxe-segmented.size--medium{font-size:var(--vxe-ui-font-size-medium)}.vxe-segmented.size--small{font-size:var(--vxe-ui-font-size-small)}.vxe-segmented.size--mini{font-size:var(--vxe-ui-font-size-mini)}