vxe-pc-ui/es/text/src/text.js

A vue based PC component library

import { defineComponent, ref, h, reactive, createCommentVNode } from 'vue';
import XEUtils from 'xe-utils';
import { VxeUI, getConfig, getIcon, getI18n, useSize, createEvent } from '../../ui';
import { getSlotVNs } from '../../ui/src/vn';
export default defineComponent({
    name: 'VxeText',
    props: {
        status: String,
        title: [String, Number],
        icon: String,
        loading: Boolean,
        content: [String, Number],
        clickToCopy: Boolean,
        size: {
            type: String,
            default: () => getConfig().text.size || getConfig().size
        }
    },
    emits: [
        'click'
    ],
    setup(props, context) {
        const { emit, slots } = context;
        const xID = XEUtils.uniqueId();
        const { computeSize } = useSize(props);
        const refElem = ref();
        const refContentElem = ref();
        const reactData = reactive({});
        const refMaps = {
            refElem
        };
        const computeMaps = {};
        const clickIconEvent = () => {
            const { content, clickToCopy } = props;
            if (clickToCopy) {
                const contentEl = refContentElem.value;
                const copyVal = (contentEl ? contentEl.textContent : '') || content;
                if (copyVal) {
                    if (VxeUI.clipboard.copy(copyVal)) {
                        if (VxeUI.modal) {
                            VxeUI.modal.message({
                                content: getI18n('vxe.text.copySuccess'),
                                status: 'success'
                            });
                        }
                    }
                    else {
                        if (VxeUI.modal) {
                            VxeUI.modal.message({
                                content: getI18n('vxe.text.copyError'),
                                status: 'error'
                            });
                        }
                    }
                }
            }
        };
        const $xeText = {
            xID,
            props,
            context,
            reactData,
            getRefMaps: () => refMaps,
            getComputeMaps: () => computeMaps
        };
        const dispatchEvent = (type, params, evnt) => {
            emit(type, createEvent(evnt, { $text: $xeText }, params));
        };
        const textMethods = {
            dispatchEvent
        };
        const clickEvent = (evnt) => {
            const { loading } = props;
            if (!loading) {
                dispatchEvent('click', {}, evnt);
            }
        };
        const textPrivateMethods = {};
        Object.assign($xeText, textMethods, textPrivateMethods);
        const renderContent = () => {
            const { loading, icon, content, clickToCopy } = props;
            const defaultSlot = slots.default;
            const iconSlot = slots.icon;
            return [
                loading
                    ? h('span', {
                        class: 'vxe-text--loading'
                    }, [
                        h('i', {
                            class: getIcon().TEXT_LOADING
                        })
                    ])
                    : (iconSlot || icon || clickToCopy
                        ? h('span', {
                            class: 'vxe-text--icon',
                            onClick: clickIconEvent
                        }, iconSlot
                            ? getSlotVNs(iconSlot({}))
                            : [
                                h('i', {
                                    class: icon || getIcon().TEXT_COPY
                                })
                            ])
                        : createCommentVNode()),
                h('span', {
                    ref: refContentElem,
                    class: 'vxe-text--content'
                }, defaultSlot ? defaultSlot({}) : XEUtils.toValueString(content))
            ];
        };
        const renderVN = () => {
            const { loading, status, title, clickToCopy } = props;
            const vSize = computeSize.value;
            return h('span', {
                ref: refElem,
                title,
                class: ['vxe-text', {
                        [`size--${vSize}`]: vSize,
                        [`theme--${status}`]: status,
                        'is--copy': clickToCopy,
                        'is--loading': loading
                    }],
                onClick: clickEvent
            }, renderContent());
        };
        $xeText.renderVN = renderVN;
        return $xeText;
    },
    render() {
        return this.renderVN();
    }
});