vxe-pc-ui 3.0.0-alpha.2 → 3.0.0-alpha.4

package/es/alert/index.js

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

package/es/alert/src/alert.js

@@ -0,0 +1,99 @@
+import { defineVxeComponent } from '../../ui/src/comp';
+import XEUtils from 'xe-utils';
+import { getConfig, createEvent, getIcon, renderEmptyElement } from '../../ui';
+import { getSlotVNs } from '../../ui/src/vn';
+export default defineVxeComponent({
+    name: 'VxeAlert',
+    props: {
+        title: {
+            type: [String, Number],
+            default: () => getConfig().alert.title
+        },
+        content: [String, Number],
+        status: String,
+        showIcon: Boolean,
+        showClose: Boolean,
+        icon: {
+            type: String,
+            default: () => getConfig().alert.icon
+        }
+    },
+    data() {
+        const xID = XEUtils.uniqueId();
+        const reactData = {};
+        return {
+            xID,
+            reactData
+        };
+    },
+    methods: {
+        //
+        // Method
+        //
+        dispatchEvent(type, params, evnt) {
+            const $xeAlert = this;
+            this.$emit(type, createEvent(evnt, { $alert: $xeAlert }, params));
+        },
+        closeEvent(evnt) {
+            const $xeAlert = this;
+            $xeAlert.dispatchEvent('close', {}, evnt);
+        },
+        //
+        // Render
+        //
+        renderVN(h) {
+            const $xeAlert = this;
+            const props = $xeAlert;
+            const slots = $xeAlert.$scopedSlots;
+            const { status, content, icon, title, showIcon, showClose } = props;
+            const defaultSlot = slots.default;
+            const titleSlot = slots.title;
+            const iconSlot = slots.icon;
+            return h('div', {
+                ref: 'refElem',
+                class: ['vxe-alert', {
+                        [`theme--${status}`]: status
+                    }]
+            }, [
+                iconSlot || (showIcon && status) || icon
+                    ? h('div', {
+                        class: 'vxe-alert--icon'
+                    }, iconSlot
+                        ? getSlotVNs(iconSlot({}))
+                        : [
+                            h('i', {
+                                class: icon || getIcon()[`ALERT_${status === null || status === void 0 ? void 0 : status.toUpperCase()}`]
+                            })
+                        ])
+                    : renderEmptyElement($xeAlert),
+                h('div', {
+                    class: 'vxe-alert--body'
+                }, [
+                    titleSlot || title
+                        ? h('div', {
+                            class: 'vxe-alert--title'
+                        }, titleSlot ? getSlotVNs(titleSlot({})) : XEUtils.toValueString(title))
+                        : renderEmptyElement($xeAlert),
+                    h('div', {
+                        class: 'vxe-alert--content'
+                    }, defaultSlot ? getSlotVNs(defaultSlot({})) : XEUtils.toValueString(content))
+                ]),
+                showClose
+                    ? h('div', {
+                        class: 'vxe-alert--close-btn',
+                        on: {
+                            click: $xeAlert.closeEvent
+                        }
+                    }, [
+                        h('i', {
+                            class: getIcon().ALERT_CLOSE
+                        })
+                    ])
+                    : renderEmptyElement($xeAlert)
+            ]);
+        }
+    },
+    render(h) {
+        return this.renderVN(h);
+    }
+});

package/es/alert/style.css

@@ -0,0 +1,129 @@
+.vxe-alert {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  color: var(--vxe-ui-font-color);
+  padding: var(--vxe-ui-layout-padding-default);
+  margin-bottom: var(--vxe-ui-layout-padding-default);
+  font-size: var(--vxe-ui-font-size-default);
+  border-radius: var(--vxe-ui-base-border-radius);
+}
+.vxe-alert.theme--primary {
+  color: var(--vxe-ui-font-primary-color);
+  border: 1px solid var(--vxe-ui-font-primary-lighten-color);
+  background-color: var(--vxe-ui-font-primary-tinge-color);
+}
+.vxe-alert.theme--primary::after {
+  background-color: var(--vxe-ui-font-primary-color);
+}
+.vxe-alert.theme--primary .vxe-alert--icon {
+  color: var(--vxe-ui-font-primary-color);
+}
+.vxe-alert.theme--primary .vxe-alert--close-btn:hover {
+  color: var(--vxe-ui-font-primary-lighten-color);
+}
+.vxe-alert.theme--success {
+  color: var(--vxe-ui-status-success-color);
+  border: 1px solid var(--vxe-ui-status-success-lighten-color);
+  background-color: var(--vxe-ui-status-success-tinge-color);
+}
+.vxe-alert.theme--success::after {
+  background-color: var(--vxe-ui-status-success-color);
+}
+.vxe-alert.theme--success .vxe-alert--icon {
+  color: var(--vxe-ui-status-success-color);
+}
+.vxe-alert.theme--success .vxe-alert--close-btn:hover {
+  color: var(--vxe-ui-status-success-lighten-color);
+}
+.vxe-alert.theme--info {
+  color: var(--vxe-ui-status-info-color);
+  border: 1px solid var(--vxe-ui-status-info-lighten-color);
+  background-color: var(--vxe-ui-status-info-tinge-color);
+}
+.vxe-alert.theme--info::after {
+  background-color: var(--vxe-ui-status-info-color);
+}
+.vxe-alert.theme--info .vxe-alert--icon {
+  color: var(--vxe-ui-status-info-color);
+}
+.vxe-alert.theme--info .vxe-alert--close-btn:hover {
+  color: var(--vxe-ui-status-info-lighten-color);
+}
+.vxe-alert.theme--warning {
+  color: var(--vxe-ui-status-warning-color);
+  border: 1px solid var(--vxe-ui-status-warning-lighten-color);
+  background-color: var(--vxe-ui-status-warning-tinge-color);
+}
+.vxe-alert.theme--warning::after {
+  background-color: var(--vxe-ui-status-warning-color);
+}
+.vxe-alert.theme--warning .vxe-alert--icon {
+  color: var(--vxe-ui-status-warning-color);
+}
+.vxe-alert.theme--warning .vxe-alert--close-btn:hover {
+  color: var(--vxe-ui-status-warning-lighten-color);
+}
+.vxe-alert.theme--danger {
+  color: var(--vxe-ui-status-danger-color);
+  border: 1px solid var(--vxe-ui-status-danger-lighten-color);
+  background-color: var(--vxe-ui-status-danger-tinge-color);
+}
+.vxe-alert.theme--danger::after {
+  background-color: var(--vxe-ui-status-danger-color);
+}
+.vxe-alert.theme--danger .vxe-alert--icon {
+  color: var(--vxe-ui-status-danger-color);
+}
+.vxe-alert.theme--danger .vxe-alert--close-btn:hover {
+  color: var(--vxe-ui-status-danger-lighten-color);
+}
+.vxe-alert.theme--error {
+  color: var(--vxe-ui-status-error-color);
+  border: 1px solid var(--vxe-ui-status-error-lighten-color);
+  background-color: var(--vxe-ui-status-error-tinge-color);
+}
+.vxe-alert.theme--error::after {
+  background-color: var(--vxe-ui-status-error-color);
+}
+.vxe-alert.theme--error .vxe-alert--icon {
+  color: var(--vxe-ui-status-error-color);
+}
+.vxe-alert.theme--error .vxe-alert--close-btn:hover {
+  color: var(--vxe-ui-status-error-lighten-color);
+}
+.vxe-alert.size--medium {
+  font-size: var(--vxe-ui-font-size-medium);
+}
+.vxe-alert.size--small {
+  font-size: var(--vxe-ui-font-size-small);
+}
+.vxe-alert.size--mini {
+  font-size: var(--vxe-ui-font-size-mini);
+}
+
+.vxe-alert--icon {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  font-size: 1.5em;
+  padding: 0 var(--vxe-ui-layout-padding-default);
+}
+
+.vxe-alert--body {
+  flex-grow: 1;
+}
+
+.vxe-alert--title {
+  font-size: 1.1em;
+  font-weight: 700;
+  line-height: 2em;
+}
+
+.vxe-alert--close-btn {
+  padding: 0 0.4em;
+  line-height: 2.2em;
+  cursor: pointer;
+}

package/es/alert/style.min.css

@@ -0,0 +1 @@
+.vxe-alert{position:relative;display:flex;flex-direction:row;color:var(--vxe-ui-font-color);padding:var(--vxe-ui-layout-padding-default);margin-bottom:var(--vxe-ui-layout-padding-default);font-size:var(--vxe-ui-font-size-default);border-radius:var(--vxe-ui-base-border-radius)}.vxe-alert.theme--primary{color:var(--vxe-ui-font-primary-color);border:1px solid var(--vxe-ui-font-primary-lighten-color);background-color:var(--vxe-ui-font-primary-tinge-color)}.vxe-alert.theme--primary::after{background-color:var(--vxe-ui-font-primary-color)}.vxe-alert.theme--primary .vxe-alert--icon{color:var(--vxe-ui-font-primary-color)}.vxe-alert.theme--primary .vxe-alert--close-btn:hover{color:var(--vxe-ui-font-primary-lighten-color)}.vxe-alert.theme--success{color:var(--vxe-ui-status-success-color);border:1px solid var(--vxe-ui-status-success-lighten-color);background-color:var(--vxe-ui-status-success-tinge-color)}.vxe-alert.theme--success::after{background-color:var(--vxe-ui-status-success-color)}.vxe-alert.theme--success .vxe-alert--icon{color:var(--vxe-ui-status-success-color)}.vxe-alert.theme--success .vxe-alert--close-btn:hover{color:var(--vxe-ui-status-success-lighten-color)}.vxe-alert.theme--info{color:var(--vxe-ui-status-info-color);border:1px solid var(--vxe-ui-status-info-lighten-color);background-color:var(--vxe-ui-status-info-tinge-color)}.vxe-alert.theme--info::after{background-color:var(--vxe-ui-status-info-color)}.vxe-alert.theme--info .vxe-alert--icon{color:var(--vxe-ui-status-info-color)}.vxe-alert.theme--info .vxe-alert--close-btn:hover{color:var(--vxe-ui-status-info-lighten-color)}.vxe-alert.theme--warning{color:var(--vxe-ui-status-warning-color);border:1px solid var(--vxe-ui-status-warning-lighten-color);background-color:var(--vxe-ui-status-warning-tinge-color)}.vxe-alert.theme--warning::after{background-color:var(--vxe-ui-status-warning-color)}.vxe-alert.theme--warning .vxe-alert--icon{color:var(--vxe-ui-status-warning-color)}.vxe-alert.theme--warning .vxe-alert--close-btn:hover{color:var(--vxe-ui-status-warning-lighten-color)}.vxe-alert.theme--danger{color:var(--vxe-ui-status-danger-color);border:1px solid var(--vxe-ui-status-danger-lighten-color);background-color:var(--vxe-ui-status-danger-tinge-color)}.vxe-alert.theme--danger::after{background-color:var(--vxe-ui-status-danger-color)}.vxe-alert.theme--danger .vxe-alert--icon{color:var(--vxe-ui-status-danger-color)}.vxe-alert.theme--danger .vxe-alert--close-btn:hover{color:var(--vxe-ui-status-danger-lighten-color)}.vxe-alert.theme--error{color:var(--vxe-ui-status-error-color);border:1px solid var(--vxe-ui-status-error-lighten-color);background-color:var(--vxe-ui-status-error-tinge-color)}.vxe-alert.theme--error::after{background-color:var(--vxe-ui-status-error-color)}.vxe-alert.theme--error .vxe-alert--icon{color:var(--vxe-ui-status-error-color)}.vxe-alert.theme--error .vxe-alert--close-btn:hover{color:var(--vxe-ui-status-error-lighten-color)}.vxe-alert.size--medium{font-size:var(--vxe-ui-font-size-medium)}.vxe-alert.size--small{font-size:var(--vxe-ui-font-size-small)}.vxe-alert.size--mini{font-size:var(--vxe-ui-font-size-mini)}.vxe-alert--icon{display:flex;flex-direction:row;align-items:center;justify-content:center;flex-shrink:0;font-size:1.5em;padding:0 var(--vxe-ui-layout-padding-default)}.vxe-alert--body{flex-grow:1}.vxe-alert--title{font-size:1.1em;font-weight:700;line-height:2em}.vxe-alert--close-btn{padding:0 .4em;line-height:2.2em;cursor:pointer}

package/es/anchor/index.js

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

package/es/anchor/src/anchor-link.js

@@ -0,0 +1,137 @@
+import { defineVxeComponent } from '../../ui/src/comp';
+import XEUtils from 'xe-utils';
+import { createEvent, renderEmptyElement } from '../../ui';
+import { assembleAnchorLink, destroyAnchorLink } from './util';
+export default defineVxeComponent({
+    name: 'VxeAnchorLink',
+    props: {
+        content: [String, Number],
+        title: [String, Number],
+        href: String
+    },
+    inject: {
+        $xeAnchor: {
+            default: null
+        },
+        $xeParentAnchorLink: {
+            from: '$xeAnchorLink',
+            default: null
+        }
+    },
+    provide() {
+        const $xeAnchorLink = this;
+        return {
+            $xeAnchorLink
+        };
+    },
+    data() {
+        const xID = XEUtils.uniqueId();
+        const reactData = {};
+        const linkConfig = {
+            id: xID,
+            href: '',
+            children: []
+        };
+        return {
+            xID,
+            reactData,
+            linkConfig
+        };
+    },
+    computed: Object.assign(Object.assign({}, {}), { computeIsActive() {
+            const $xeAnchorLink = this;
+            const props = $xeAnchorLink;
+            const $xeAnchor = $xeAnchorLink.$xeAnchor;
+            const { href } = props;
+            if ($xeAnchor) {
+                return $xeAnchor.reactData.activeHref === href;
+            }
+            return null;
+        } }),
+    watch: {
+        href(val) {
+            const $xeAnchorLink = this;
+            const linkConfig = $xeAnchorLink.linkConfig;
+            linkConfig.href = val;
+        }
+    },
+    methods: {
+        //
+        // Method
+        //
+        dispatchEvent(type, params, evnt) {
+            const $xeAnchorLink = this;
+            $xeAnchorLink.$emit(type, createEvent(evnt, { $anchorLink: $xeAnchorLink }, params));
+        },
+        clickEvent(event) {
+            const $xeAnchorLink = this;
+            const props = $xeAnchorLink;
+            const $xeAnchor = $xeAnchorLink.$xeAnchor;
+            const { href } = props;
+            if ($xeAnchor) {
+                $xeAnchor.handleClickLink(event, href);
+            }
+        },
+        //
+        // Render
+        //
+        renderVN(h) {
+            const $xeAnchorLink = this;
+            const props = $xeAnchorLink;
+            const slots = $xeAnchorLink.$scopedSlots;
+            const { href, content, title } = props;
+            const defaultSlot = slots.default;
+            const subSlot = slots.sub;
+            const isActive = $xeAnchorLink.computeIsActive;
+            return h('div', {
+                ref: 'refElem',
+                class: ['vxe-anchor-link', {
+                        'is--active': isActive
+                    }]
+            }, [
+                h('a', {
+                    class: 'vxe-anchor-link--item',
+                    attrs: {
+                        href,
+                        title
+                    },
+                    on: {
+                        click: $xeAnchorLink.clickEvent
+                    }
+                }, defaultSlot ? defaultSlot({}) : (XEUtils.toValueString(content))),
+                subSlot
+                    ? h('div', {
+                        class: 'vxe-anchor-link--sub-items'
+                    }, subSlot({}))
+                    : renderEmptyElement($xeAnchorLink)
+            ]);
+        }
+    },
+    created() {
+        const $xeAnchorLink = this;
+        const props = $xeAnchorLink;
+        const linkConfig = $xeAnchorLink.linkConfig;
+        linkConfig.href = props.href;
+    },
+    mounted() {
+        const $xeAnchorLink = this;
+        const $xeAnchor = $xeAnchorLink.$xeAnchor;
+        const $xeParentAnchorLink = $xeAnchorLink.$xeParentAnchorLink;
+        const linkConfig = $xeAnchorLink.linkConfig;
+        const elem = $xeAnchorLink.$refs.refElem;
+        if ($xeAnchor && elem) {
+            assembleAnchorLink($xeAnchor, elem, linkConfig, $xeParentAnchorLink);
+        }
+    },
+    beforeDestroy() {
+        const $xeAnchorLink = this;
+        const $xeAnchor = $xeAnchorLink.$xeAnchor;
+        const linkConfig = $xeAnchorLink.linkConfig;
+        if ($xeAnchor) {
+            destroyAnchorLink($xeAnchor, linkConfig);
+        }
+    },
+    render(h) {
+        return this.renderVN(h);
+    }
+});

package/es/anchor/src/anchor.js

@@ -0,0 +1,232 @@
+import { defineVxeComponent } from '../../ui/src/comp';
+import XEUtils from 'xe-utils';
+import { createEvent, renderEmptyElement } from '../../ui';
+import { getOffsetPos } from '../../ui/src/dom';
+import VxeAnchorLinkComponent from './anchor-link';
+export default defineVxeComponent({
+    name: 'VxeAnchor',
+    props: {
+        value: String,
+        options: Array,
+        container: [String, Object, Function],
+        showMarker: {
+            type: Boolean,
+            default: true
+        }
+    },
+    provide() {
+        const $xeAnchor = this;
+        return {
+            $xeAnchor
+        };
+    },
+    data() {
+        const xID = XEUtils.uniqueId();
+        const reactData = {
+            activeHref: null,
+            staticLinks: [],
+            containerElem: null
+        };
+        return {
+            xID,
+            reactData
+        };
+    },
+    computed: {
+        computeAllHrefList() {
+            const $xeAnchor = this;
+            const reactData = $xeAnchor.reactData;
+            const list = [];
+            XEUtils.eachTree(reactData.staticLinks, item => {
+                list.push(item.href || '');
+            }, { children: 'children' });
+            return list;
+        }
+    },
+    watch: {
+        value(val) {
+            const $xeAnchor = this;
+            const reactData = $xeAnchor.reactData;
+            reactData.activeHref = val;
+        },
+        'reactData.activeHref'() {
+            const $xeAnchor = this;
+            $xeAnchor.updateMarkerPos();
+        },
+        container() {
+            const $xeAnchor = this;
+            $xeAnchor.removeContainerElemScroll();
+            $xeAnchor.updateContainerElem();
+        }
+    },
+    methods: {
+        //
+        // Method
+        //
+        dispatchEvent(type, params, evnt) {
+            const $xeAnchor = this;
+            $xeAnchor.$emit(type, createEvent(evnt, { $anchor: $xeAnchor }, params));
+        },
+        getContainerElem() {
+            const $xeAnchor = this;
+            const props = $xeAnchor;
+            const { container } = props;
+            if (container) {
+                if (XEUtils.isElement(container)) {
+                    return container;
+                }
+                if (XEUtils.isString(container)) {
+                    return document.querySelector(container);
+                }
+                if (XEUtils.isFunction(container)) {
+                    return container({ $anchor: $xeAnchor });
+                }
+            }
+            return null;
+        },
+        emitEvent(value) {
+            const $xeAnchor = this;
+            const reactData = $xeAnchor.reactData;
+            reactData.activeHref = value;
+            $xeAnchor.$emit('input', value);
+            $xeAnchor.$emit('modelValue', value);
+        },
+        handleContainerScrollEvent() {
+            const $xeAnchor = this;
+            const reactData = $xeAnchor.reactData;
+            const allHrefList = $xeAnchor.computeAllHrefList;
+            const { containerElem } = reactData;
+            if (containerElem) {
+                const wrapperElList = containerElem.querySelectorAll(allHrefList.map(href => `${href}`).join(','));
+                for (let i = 0; i < wrapperElList.length; i++) {
+                    const wrapperEl = wrapperElList[i];
+                    const wrapperRect = wrapperEl.getBoundingClientRect();
+                    if (wrapperRect.top > 0) {
+                        const href = wrapperEl.id;
+                        reactData.activeHref = `#${href}`;
+                        break;
+                    }
+                }
+            }
+        },
+        removeContainerElemScroll() {
+            const $xeAnchor = this;
+            const reactData = $xeAnchor.reactData;
+            const { containerElem } = reactData;
+            if (containerElem) {
+                containerElem.removeEventListener('scroll', $xeAnchor.handleContainerScrollEvent);
+            }
+        },
+        updateContainerElem() {
+            const $xeAnchor = this;
+            const reactData = $xeAnchor.reactData;
+            const containerElem = $xeAnchor.getContainerElem();
+            reactData.containerElem = containerElem;
+            if (containerElem) {
+                containerElem.addEventListener('scroll', $xeAnchor.handleContainerScrollEvent, {
+                    passive: false
+                });
+            }
+        },
+        updateMarkerPos() {
+            const $xeAnchor = this;
+            const reactData = $xeAnchor.reactData;
+            $xeAnchor.$nextTick(() => {
+                const { activeHref } = reactData;
+                const elem = $xeAnchor.$refs.refElem;
+                const markerEl = $xeAnchor.$refs.refMarkerElem;
+                if (elem && markerEl) {
+                    if (activeHref) {
+                        const linkEl = elem.querySelector(`[href="${activeHref}"]`);
+                        if (linkEl) {
+                            const { top } = getOffsetPos(linkEl, elem);
+                            markerEl.style.top = `${top}px`;
+                        }
+                    }
+                }
+            });
+        },
+        handleClickLink(evnt, href) {
+            const $xeAnchor = this;
+            evnt.preventDefault();
+            const targetEl = document.getElementById(`${href}`.replace('#', ''));
+            if (targetEl) {
+                targetEl.scrollIntoView({
+                    behavior: 'smooth'
+                });
+            }
+            $xeAnchor.emitEvent(href);
+            $xeAnchor.dispatchEvent('click', { href }, evnt);
+        },
+        //
+        // Render
+        //
+        renderSubItems(h, options) {
+            const $xeAnchor = this;
+            const itemVNs = [];
+            if (options) {
+                options.forEach(item => {
+                    const subItems = item.children;
+                    if (subItems && subItems.length) {
+                        itemVNs.push(h(VxeAnchorLinkComponent, {
+                            props: {
+                                content: item.content,
+                                title: item.title,
+                                href: item.href
+                            },
+                            scopedSlots: {
+                                sub: () => $xeAnchor.renderSubItems(h, subItems)
+                            }
+                        }));
+                    }
+                    else {
+                        itemVNs.push(h(VxeAnchorLinkComponent, {
+                            props: {
+                                content: item.content,
+                                title: item.title,
+                                href: item.href
+                            }
+                        }));
+                    }
+                });
+            }
+            return itemVNs;
+        },
+        renderVN(h) {
+            const $xeAnchor = this;
+            const props = $xeAnchor;
+            const slots = $xeAnchor.$scopedSlots;
+            const { options, showMarker } = props;
+            const defaultSlot = slots.default;
+            return h('div', {
+                ref: 'refElem',
+                class: ['vxe-anchor', {
+                        'is--marker': showMarker
+                    }]
+            }, [
+                h('div', {
+                    class: 'vxe-anchor--list'
+                }, defaultSlot ? defaultSlot({}) : $xeAnchor.renderSubItems(h, options)),
+                showMarker
+                    ? h('div', {
+                        ref: 'refMarkerElem',
+                        class: 'vxe-anchor--marker'
+                    })
+                    : renderEmptyElement($xeAnchor)
+            ]);
+        }
+    },
+    mounted() {
+        const $xeAnchor = this;
+        $xeAnchor.$nextTick(() => {
+            $xeAnchor.updateContainerElem();
+        });
+    },
+    beforeDestroy() {
+        const $xeAnchor = this;
+        $xeAnchor.removeContainerElemScroll();
+    },
+    render(h) {
+        return this.renderVN(h);
+    }
+});

package/es/anchor/src/util.js

@@ -0,0 +1,19 @@
+import XEUtils from 'xe-utils';
+export function assembleAnchorLink($xeAnchor, elem, linkConfig, $xeParentAnchorLink) {
+    const staticLinks = $xeAnchor.reactData.staticLinks;
+    const parentElem = elem.parentNode;
+    const parentLinkConfig = $xeParentAnchorLink ? $xeParentAnchorLink.linkConfig : null;
+    const parentLinks = parentLinkConfig ? parentLinkConfig.children : staticLinks;
+    if (parentElem && parentLinks) {
+        parentLinks.splice(XEUtils.arrayIndexOf(parentElem.children, elem), 0, linkConfig);
+        $xeAnchor.reactData.staticLinks = staticLinks.slice(0);
+    }
+}
+export function destroyAnchorLink($xeAnchor, linkConfig) {
+    const staticLinks = $xeAnchor.reactData.staticLinks;
+    const matchObj = XEUtils.findTree(staticLinks, item => item.id === linkConfig.id, { children: 'children' });
+    if (matchObj) {
+        matchObj.items.splice(matchObj.index, 1);
+    }
+    $xeAnchor.reactData.staticLinks = staticLinks.slice(0);
+}

package/es/anchor/style.css

@@ -0,0 +1,42 @@
+.vxe-anchor {
+  position: relative;
+  color: var(--vxe-ui-font-color);
+  font-family: var(--vxe-ui-font-family);
+}
+
+.vxe-anchor--marker {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 0.2em;
+  height: 1.5em;
+  padding: 0.25em 0;
+  transition: all 0.35s ease-in-out;
+}
+.vxe-anchor--marker::before {
+  display: block;
+  content: "";
+  height: 100%;
+  width: 100%;
+  border-radius: 1em;
+  background-color: var(--vxe-ui-anchor-link-active-color);
+}
+
+.vxe-anchor-link {
+  position: relative;
+  padding-left: 0.6em;
+}
+.vxe-anchor-link.is--active > .vxe-anchor-link--item {
+  color: var(--vxe-ui-anchor-link-active-color);
+}
+
+.vxe-anchor-link--item {
+  display: block;
+  height: 1.5em;
+  line-height: 1.5em;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  cursor: pointer;
+  color: var(--vxe-ui-anchor-link-color);
+}

package/es/anchor/style.min.css

@@ -0,0 +1 @@
+.vxe-anchor{position:relative;color:var(--vxe-ui-font-color);font-family:var(--vxe-ui-font-family)}.vxe-anchor--marker{position:absolute;left:0;top:0;width:.2em;height:1.5em;padding:.25em 0;transition:all .35s ease-in-out}.vxe-anchor--marker::before{display:block;content:"";height:100%;width:100%;border-radius:1em;background-color:var(--vxe-ui-anchor-link-active-color)}.vxe-anchor-link{position:relative;padding-left:.6em}.vxe-anchor-link.is--active>.vxe-anchor-link--item{color:var(--vxe-ui-anchor-link-active-color)}.vxe-anchor-link--item{display:block;height:1.5em;line-height:1.5em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;color:var(--vxe-ui-anchor-link-color)}