vxe-pc-ui 0.0.1 → 0.0.2

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019 xuliangzhan
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,5 +1,48 @@
-# vxe-pc-ui
-
-## License
-
-[MIT](LICENSE) © 2019-present, Xu Liangzhan
+# vxe-pc-ui
+
+简体中文 | [繁體中文](README.zh-TW.md) | [English](README.en.md)  
+
+[![star](https://gitee.com/xuliangzhan_admin/vxe-pc-ui/badge/star.svg?theme=gvp)](https://gitee.com/xuliangzhan_admin/vxe-pc-ui/stargazers)
+[![npm version](https://img.shields.io/npm/v/vxe-pc-ui.svg?style=flat-square)](https://www.npmjs.com/package/vxe-pc-ui)
+[![npm build](https://travis-ci.com/x-extends/vxe-pc-ui.svg?branch=master)](https://travis-ci.com/x-extends/vxe-pc-ui)
+[![npm downloads](https://img.shields.io/npm/dt/vxe-pc-ui.svg?style=flat-square)](https://npm-stat.com/charts.html?package=vxe-pc-ui)
+[![issues](https://img.shields.io/github/issues/x-extends/vxe-pc-ui.svg)](https://github.com/x-extends/vxe-pc-ui/issues)
+[![issues closed](https://img.shields.io/github/issues-closed/x-extends/vxe-pc-ui.svg)](https://github.com/x-extends/vxe-pc-ui/issues?q=is%3Aissue+is%3Aclosed)
+[![pull requests](https://img.shields.io/github/issues-pr/x-extends/vxe-pc-ui.svg)](https://github.com/x-extends/vxe-pc-ui/pulls)
+[![pull requests closed](https://img.shields.io/github/issues-pr-closed/x-extends/vxe-pc-ui.svg)](https://github.com/x-extends/vxe-pc-ui/pulls?q=is%3Apr+is%3Aclosed)
+[![npm license](https://img.shields.io/github/license/mashape/apistatus.svg)](LICENSE)
+
+一个基于 [vue](https://www.npmjs.com/package/vue) 的 PC 端组件库  
+
+## 浏览器支持
+
+![Edge](https://raw.github.com/alrra/browser-logos/master/src/edge/edge_48x48.png) | ![Chrome](https://raw.github.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png) | ![Firefox](https://raw.github.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png) | ![Opera](https://raw.github.com/alrra/browser-logos/master/src/opera/opera_48x48.png) | ![Safari](https://raw.github.com/alrra/browser-logos/master/src/safari/safari_48x48.png)
+--- | --- | --- | --- | --- |
+80+ ✔ | 80+ ✔ | 90+ ✔ | 75+ ✔ | 10+ ✔ |
+
+## 导入全部
+
+```shell
+npm install vxe-pc-ui
+```
+
+```javascript
+// ...
+import { createApp } from 'vue'
+import VxeUI from 'vxe-pc-ui'
+// ...
+
+VxeUI.config({
+  size: null
+})
+
+// ...
+const app = createApp(App)
+app.use(VxeUI)
+app.mount('#app')
+// ...
+```
+
+## License
+
+[MIT](LICENSE) © 2019-present, Xu Liangzhan

package/es/anchor/index.js

@@ -0,0 +1,8 @@
+import VxeAnchorComponent from './src/anchor';
+const VxeAnchor = Object.assign({}, VxeAnchorComponent, {
+    install(app) {
+        app.component(VxeAnchorComponent.name, VxeAnchorComponent);
+    }
+});
+export const Anchor = VxeAnchor;
+export default VxeAnchor;

package/es/anchor/src/anchor.js

@@ -0,0 +1,202 @@
+import { defineComponent, ref, h, reactive, provide, nextTick, onBeforeUnmount, onMounted, watch, createCommentVNode, computed } from 'vue';
+import XEUtils from 'xe-utils';
+import { getOffsetPos } from '../../ui/src/dom';
+import VxeAnchorLinkComponent from '../../anchor-link/src/anchor-link';
+export default defineComponent({
+    name: 'VxeAnchor',
+    props: {
+        modelValue: String,
+        options: Array,
+        container: [String, Object, Function],
+        showMarker: {
+            type: Boolean,
+            default: true
+        }
+    },
+    emits: [
+        'update:modelValue',
+        'change',
+        'click'
+    ],
+    setup(props, context) {
+        const { slots, emit } = context;
+        const xID = XEUtils.uniqueId();
+        const refElem = ref();
+        const refMarkerElem = ref();
+        const reactData = reactive({
+            activeHref: null,
+            staticLinks: []
+        });
+        const refMaps = {
+            refElem
+        };
+        const computeAllHrefList = computed(() => {
+            const list = [];
+            XEUtils.eachTree(reactData.staticLinks, item => {
+                list.push(item.href);
+            }, { children: 'children' });
+            return list;
+        });
+        const computeMaps = {};
+        let containerElem = null;
+        const $xeAnchor = {
+            xID,
+            props,
+            context,
+            reactData,
+            getRefMaps: () => refMaps,
+            getComputeMaps: () => computeMaps
+        };
+        const anchorMethods = {
+            dispatchEvent(type, params, evnt) {
+                emit(type, Object.assign({ $xeAnchor, $event: evnt }, params));
+            }
+        };
+        const getContainerElem = () => {
+            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({ $xeAnchor });
+                }
+            }
+            return null;
+        };
+        const emitEvent = (value) => {
+            reactData.activeHref = value;
+            emit('update:modelValue', value);
+        };
+        const handleContainerScrollEvent = () => {
+            const allHrefList = computeAllHrefList.value;
+            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;
+                    }
+                }
+            }
+        };
+        const removeContainerElemScroll = () => {
+            if (containerElem) {
+                containerElem.removeEventListener('scroll', handleContainerScrollEvent);
+            }
+        };
+        const updateContainerElem = () => {
+            containerElem = getContainerElem();
+            if (containerElem) {
+                containerElem.addEventListener('scroll', handleContainerScrollEvent, {
+                    passive: false
+                });
+            }
+        };
+        const updateMarkerPos = () => {
+            nextTick(() => {
+                const { activeHref } = reactData;
+                const elem = refElem.value;
+                const markerEl = refMarkerElem.value;
+                if (elem && markerEl) {
+                    if (activeHref) {
+                        const linkEl = elem.querySelector(`[href="${activeHref}"]`);
+                        if (linkEl) {
+                            const { top } = getOffsetPos(linkEl, elem);
+                            markerEl.style.top = `${top}px`;
+                        }
+                    }
+                }
+            });
+        };
+        const anchorPrivateMethods = {
+            handleClickLink(evnt, href) {
+                evnt.preventDefault();
+                const targetEl = document.getElementById(`${href}`.replace('#', ''));
+                if (targetEl) {
+                    targetEl.scrollIntoView({
+                        behavior: 'smooth'
+                    });
+                }
+                emitEvent(href);
+                anchorMethods.dispatchEvent('click', { href }, evnt);
+            }
+        };
+        Object.assign($xeAnchor, anchorMethods, anchorPrivateMethods);
+        watch(() => props.modelValue, (val) => {
+            reactData.activeHref = val;
+        });
+        watch(() => reactData.activeHref, () => {
+            updateMarkerPos();
+        });
+        watch(() => props.container, () => {
+            removeContainerElemScroll();
+            updateContainerElem();
+        });
+        onMounted(() => {
+            nextTick(() => {
+                updateContainerElem();
+            });
+        });
+        onBeforeUnmount(() => {
+            removeContainerElemScroll();
+        });
+        const renderSubItems = (options) => {
+            const itemVNs = [];
+            if (options) {
+                options.forEach(item => {
+                    const subItems = item.children;
+                    if (subItems && subItems.length) {
+                        itemVNs.push(h(VxeAnchorLinkComponent, {
+                            content: item.content,
+                            title: item.title,
+                            href: item.href
+                        }, {
+                            sub: () => renderSubItems(subItems)
+                        }));
+                    }
+                    else {
+                        itemVNs.push(h(VxeAnchorLinkComponent, {
+                            content: item.content,
+                            title: item.title,
+                            href: item.href
+                        }));
+                    }
+                });
+            }
+            return itemVNs;
+        };
+        const renderVN = () => {
+            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({}) : renderSubItems(options)),
+                showMarker
+                    ? h('div', {
+                        ref: refMarkerElem,
+                        class: 'vxe-anchor--marker'
+                    })
+                    : createCommentVNode()
+            ]);
+        };
+        $xeAnchor.renderVN = renderVN;
+        provide('$xeAnchor', $xeAnchor);
+        return $xeAnchor;
+    },
+    render() {
+        return this.renderVN();
+    }
+});

package/es/anchor/style.css

@@ -0,0 +1,40 @@
+.vxe-anchor {
+  position: relative;
+}
+
+.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}.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)}

package/es/anchor-link/index.js

@@ -0,0 +1,8 @@
+import VxeAnchorLinkComponent from './src/anchor-link';
+const VxeAnchorLink = Object.assign({}, VxeAnchorLinkComponent, {
+    install(app) {
+        app.component(VxeAnchorLinkComponent.name, VxeAnchorLinkComponent);
+    }
+});
+export const AnchorLink = VxeAnchorLink;
+export default VxeAnchorLink;

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

@@ -0,0 +1,94 @@
+import { defineComponent, ref, h, computed, reactive, inject, createCommentVNode, onMounted, onUnmounted, provide, watch } from 'vue';
+import XEUtils from 'xe-utils';
+import { assemAnchorLink, destroyAnchorLink } from './util';
+export default defineComponent({
+    name: 'VxeAnchorLink',
+    props: {
+        content: [String, Number],
+        title: [String, Number],
+        href: String
+    },
+    emits: [],
+    setup(props, context) {
+        const { slots } = context;
+        const xID = XEUtils.uniqueId();
+        const refElem = ref();
+        const reactData = reactive({});
+        const linkConfig = reactive({
+            id: xID,
+            href: props.href,
+            children: []
+        });
+        const $xeAnchor = inject('$xeAnchor', null);
+        const $xeParentAnchorLink = inject('$xeAnchorLink', null);
+        const refMaps = {
+            refElem
+        };
+        const computeIsActive = computed(() => {
+            const { href } = props;
+            if ($xeAnchor) {
+                return $xeAnchor.reactData.activeHref === href;
+            }
+            return null;
+        });
+        const computeMaps = {};
+        const $xeAnchorLink = {
+            xID,
+            props,
+            context,
+            reactData,
+            linkConfig,
+            getRefMaps: () => refMaps,
+            getComputeMaps: () => computeMaps
+        };
+        const clickEvent = (event) => {
+            const { href } = props;
+            if ($xeAnchor) {
+                $xeAnchor.handleClickLink(event, href);
+            }
+        };
+        watch(() => props.href, (val) => {
+            linkConfig.href = val;
+        });
+        onMounted(() => {
+            if ($xeAnchor && refElem.value) {
+                assemAnchorLink($xeAnchor, refElem.value, linkConfig, $xeParentAnchorLink);
+            }
+        });
+        onUnmounted(() => {
+            if ($xeAnchor) {
+                destroyAnchorLink($xeAnchor, linkConfig);
+            }
+        });
+        const renderVN = () => {
+            const { href, content, title } = props;
+            const defaultSlot = slots.default;
+            const subSlot = slots.sub;
+            const isActive = computeIsActive.value;
+            return h('div', {
+                ref: refElem,
+                class: ['vxe-anchor-link', {
+                        'is--active': isActive
+                    }]
+            }, [
+                h('a', {
+                    class: 'vxe-anchor-link--item',
+                    href,
+                    title,
+                    onClick: clickEvent
+                }, defaultSlot ? defaultSlot({}) : (XEUtils.toValueString(content))),
+                subSlot
+                    ? h('div', {
+                        class: 'vxe-anchor-link--sub-items'
+                    }, subSlot({}))
+                    : createCommentVNode()
+            ]);
+        };
+        $xeAnchorLink.renderVN = renderVN;
+        provide('$xeAnchorLink', $xeAnchorLink);
+        return $xeAnchorLink;
+    },
+    render() {
+        return this.renderVN();
+    }
+});

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

@@ -0,0 +1,19 @@
+import XEUtils from 'xe-utils';
+export function assemAnchorLink($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/breadcrumb/index.js

@@ -0,0 +1,8 @@
+import VxeBreadcrumbComponent from './src/breadcrumb';
+const VxeBreadcrumb = Object.assign({}, VxeBreadcrumbComponent, {
+    install(app) {
+        app.component(VxeBreadcrumbComponent.name, VxeBreadcrumbComponent);
+    }
+});
+export const Breadcrumb = VxeBreadcrumb;
+export default VxeBreadcrumb;

package/es/breadcrumb/src/breadcrumb.js

@@ -0,0 +1,44 @@
+import { defineComponent, ref, h, reactive, provide } from 'vue';
+import VxeUI from '../../ui';
+import XEUtils from 'xe-utils';
+export default defineComponent({
+    name: 'VxeBreadcrumb',
+    props: {
+        separator: {
+            type: String,
+            default: () => VxeUI.getConfig('breadcrumb.separator')
+        }
+    },
+    emits: [],
+    setup(props, context) {
+        const { slots } = context;
+        const xID = XEUtils.uniqueId();
+        const refElem = ref();
+        const reactData = reactive({});
+        const refMaps = {
+            refElem
+        };
+        const computeMaps = {};
+        const $xeBreadcrumb = {
+            xID,
+            props,
+            context,
+            reactData,
+            getRefMaps: () => refMaps,
+            getComputeMaps: () => computeMaps
+        };
+        const renderVN = () => {
+            const defaultSlot = slots.default;
+            return h('div', {
+                ref: refElem,
+                class: 'vxe-breadcrumb'
+            }, defaultSlot ? defaultSlot({}) : []);
+        };
+        $xeBreadcrumb.renderVN = renderVN;
+        provide('$xeBreadcrumb', $xeBreadcrumb);
+        return $xeBreadcrumb;
+    },
+    render() {
+        return this.renderVN();
+    }
+});

package/es/breadcrumb/style.css

@@ -0,0 +1,19 @@
+.vxe-breadcrumb {
+  color: var(--vxe-ui-breadcrumb-item-color);
+}
+
+.vxe-breadcrumb-item {
+  display: inline-block;
+  color: var(--vxe-ui-breadcrumb-color);
+}
+.vxe-breadcrumb-item:last-child .vxe-breadcrumb-item--content {
+  color: var(--vxe-ui-breadcrumb-current-item-color);
+}
+.vxe-breadcrumb-item:last-child .vxe-breadcrumb-item--separator {
+  display: none;
+}
+
+.vxe-breadcrumb-item--separator {
+  margin: 0 0.6em;
+  color: var(--vxe-ui-font-placeholder-color);
+}

package/es/breadcrumb/style.min.css

@@ -0,0 +1 @@
+.vxe-breadcrumb{color:var(--vxe-ui-breadcrumb-item-color)}.vxe-breadcrumb-item{display:inline-block;color:var(--vxe-ui-breadcrumb-color)}.vxe-breadcrumb-item:last-child .vxe-breadcrumb-item--content{color:var(--vxe-ui-breadcrumb-current-item-color)}.vxe-breadcrumb-item:last-child .vxe-breadcrumb-item--separator{display:none}.vxe-breadcrumb-item--separator{margin:0 .6em;color:var(--vxe-ui-font-placeholder-color)}

package/es/breadcrumb-item/index.js

@@ -0,0 +1,8 @@
+import VxeBreadcrumbItemComponent from './src/breadcrumb-item';
+const VxeBreadcrumbItem = Object.assign({}, VxeBreadcrumbItemComponent, {
+    install(app) {
+        app.component(VxeBreadcrumbItemComponent.name, VxeBreadcrumbItemComponent);
+    }
+});
+export const BreadcrumbItem = VxeBreadcrumbItem;
+export default VxeBreadcrumbItem;

package/es/breadcrumb-item/src/breadcrumb-item.js

@@ -0,0 +1,54 @@
+import { defineComponent, ref, h, reactive, computed, inject, createCommentVNode } from 'vue';
+import XEUtils from 'xe-utils';
+export default defineComponent({
+    name: 'VxeBreadcrumbItem',
+    props: {},
+    emits: [],
+    setup(props, context) {
+        const { slots } = context;
+        const xID = XEUtils.uniqueId();
+        const refElem = ref();
+        const $xeBreadcrumb = inject('$xeBreadcrumb', null);
+        const reactData = reactive({});
+        const refMaps = {
+            refElem
+        };
+        const computeSeparator = computed(() => {
+            if ($xeBreadcrumb) {
+                return $xeBreadcrumb.props.separator;
+            }
+            return '';
+        });
+        const computeMaps = {};
+        const $xeBreadcrumbItem = {
+            xID,
+            props,
+            context,
+            reactData,
+            getRefMaps: () => refMaps,
+            getComputeMaps: () => computeMaps
+        };
+        const renderVN = () => {
+            const separator = computeSeparator.value;
+            const defaultSlot = slots.default;
+            return h('span', {
+                ref: refElem,
+                class: 'vxe-breadcrumb-item'
+            }, [
+                h('span', {
+                    class: 'vxe-breadcrumb-item--content'
+                }, defaultSlot ? defaultSlot({}) : []),
+                separator
+                    ? h('span', {
+                        class: 'vxe-breadcrumb-item--separator'
+                    }, `${separator}`)
+                    : createCommentVNode()
+            ]);
+        };
+        $xeBreadcrumbItem.renderVN = renderVN;
+        return $xeBreadcrumbItem;
+    },
+    render() {
+        return this.renderVN();
+    }
+});

package/es/button/index.js

@@ -0,0 +1,8 @@
+import VxeButtonComponent from './src/button';
+const VxeButton = Object.assign({}, VxeButtonComponent, {
+    install(app) {
+        app.component(VxeButtonComponent.name, VxeButtonComponent);
+    }
+});
+export const Button = VxeButton;
+export default VxeButton;