vxe-pc-ui 0.0.1 → 0.0.2

package/es/col/src/col.js

@@ -0,0 +1,80 @@
+import { defineComponent, ref, h, reactive, computed, inject } from 'vue';
+import XEUtils from 'xe-utils';
+import { toCssUnit } from '../../ui/src/dom';
+export default defineComponent({
+    name: 'VxeCol',
+    props: {
+        span: [Number, String],
+        align: String,
+        width: [Number, String],
+        fill: Boolean,
+        ellipsis: Boolean
+    },
+    emits: [],
+    setup(props, context) {
+        const { slots } = context;
+        const xID = XEUtils.uniqueId();
+        const refElem = ref();
+        const reactData = reactive({});
+        const refMaps = {
+            refElem
+        };
+        const $xeRow = inject('$xeRow', null);
+        const computeColGutter = computed(() => {
+            if ($xeRow) {
+                return $xeRow.props.gutter;
+            }
+            return null;
+        });
+        const computeColStyle = computed(() => {
+            const { width } = props;
+            const colGutter = computeColGutter.value;
+            const style = {};
+            if (colGutter) {
+                const [lrGutter, tbGutter] = XEUtils.isArray(colGutter) ? colGutter : [colGutter];
+                if (lrGutter) {
+                    const padding = XEUtils.isNumber(lrGutter) ? toCssUnit(lrGutter / 2) : `calc(${toCssUnit(lrGutter)} / 2)`;
+                    style.paddingLeft = padding;
+                    style.paddingRight = padding;
+                }
+                if (tbGutter) {
+                    const padding = XEUtils.isNumber(tbGutter) ? toCssUnit(tbGutter / 2) : `calc(${toCssUnit(tbGutter)} / 2)`;
+                    style.paddingTop = padding;
+                    style.paddingBottom = padding;
+                }
+            }
+            if (width) {
+                style.width = toCssUnit(width);
+            }
+            return style;
+        });
+        const computeMaps = {};
+        const $xeCol = {
+            xID,
+            props,
+            context,
+            reactData,
+            getRefMaps: () => refMaps,
+            getComputeMaps: () => computeMaps
+        };
+        const renderVN = () => {
+            const { span, fill, align, ellipsis } = props;
+            const colStyle = computeColStyle.value;
+            const defaultSlot = slots.default;
+            return h('div', {
+                ref: refElem,
+                class: ['vxe-col', span ? `span${span}` : '', align ? `align--${align}` : '', {
+                        'is--span': span,
+                        'is--fill': fill,
+                        'is--ellipsis': ellipsis
+                    }],
+                style: colStyle
+            }, defaultSlot ? defaultSlot({}) : []);
+        };
+        $xeCol.renderVN = renderVN;
+        return $xeCol;
+    },
+    render() {
+        return this.renderVN();
+    }
+});

package/es/col/style.css

@@ -0,0 +1,95 @@
+.vxe-col {
+  display: block;
+}
+.vxe-col.is--ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.vxe-col.is--fill {
+  flex-grow: 1;
+}
+.vxe-col:not(.is--fill) {
+  flex-shrink: 0;
+}
+.vxe-col.align--left {
+  text-align: left;
+}
+.vxe-col.align--center {
+  text-align: center;
+}
+.vxe-col.align--right {
+  text-align: right;
+}
+.vxe-col.span1 {
+  width: 4.16667%;
+}
+.vxe-col.span2 {
+  width: 8.33333%;
+}
+.vxe-col.span3 {
+  width: 12.5%;
+}
+.vxe-col.span4 {
+  width: 16.66667%;
+}
+.vxe-col.span5 {
+  width: 20.83333%;
+}
+.vxe-col.span6 {
+  width: 25%;
+}
+.vxe-col.span7 {
+  width: 29.16667%;
+}
+.vxe-col.span8 {
+  width: 33.33333%;
+}
+.vxe-col.span9 {
+  width: 37.5%;
+}
+.vxe-col.span10 {
+  width: 41.66667%;
+}
+.vxe-col.span11 {
+  width: 45.83333%;
+}
+.vxe-col.span12 {
+  width: 50%;
+}
+.vxe-col.span13 {
+  width: 54.16667%;
+}
+.vxe-col.span14 {
+  width: 58.33333%;
+}
+.vxe-col.span15 {
+  width: 62.5%;
+}
+.vxe-col.span16 {
+  width: 66.66667%;
+}
+.vxe-col.span17 {
+  width: 70.83333%;
+}
+.vxe-col.span18 {
+  width: 75%;
+}
+.vxe-col.span19 {
+  width: 79.16667%;
+}
+.vxe-col.span20 {
+  width: 83.33333%;
+}
+.vxe-col.span21 {
+  width: 87.5%;
+}
+.vxe-col.span22 {
+  width: 91.66667%;
+}
+.vxe-col.span23 {
+  width: 95.83333%;
+}
+.vxe-col.span24 {
+  width: 100%;
+}

package/es/col/style.min.css

@@ -0,0 +1 @@
+.vxe-col{display:block}.vxe-col.is--ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vxe-col.is--fill{flex-grow:1}.vxe-col:not(.is--fill){flex-shrink:0}.vxe-col.align--left{text-align:left}.vxe-col.align--center{text-align:center}.vxe-col.align--right{text-align:right}.vxe-col.span1{width:4.16667%}.vxe-col.span2{width:8.33333%}.vxe-col.span3{width:12.5%}.vxe-col.span4{width:16.66667%}.vxe-col.span5{width:20.83333%}.vxe-col.span6{width:25%}.vxe-col.span7{width:29.16667%}.vxe-col.span8{width:33.33333%}.vxe-col.span9{width:37.5%}.vxe-col.span10{width:41.66667%}.vxe-col.span11{width:45.83333%}.vxe-col.span12{width:50%}.vxe-col.span13{width:54.16667%}.vxe-col.span14{width:58.33333%}.vxe-col.span15{width:62.5%}.vxe-col.span16{width:66.66667%}.vxe-col.span17{width:70.83333%}.vxe-col.span18{width:75%}.vxe-col.span19{width:79.16667%}.vxe-col.span20{width:83.33333%}.vxe-col.span21{width:87.5%}.vxe-col.span22{width:91.66667%}.vxe-col.span23{width:95.83333%}.vxe-col.span24{width:100%}

package/es/components.js

@@ -0,0 +1,57 @@
+import XEUtils from 'xe-utils';
+import { setConfig } from './ui';
+import VxeIcon from './icon';
+import VxeLayoutContainer from './layout-container';
+import VxeLayoutHeader from './layout-header';
+import VxeLayoutAside from './layout-aside';
+import VxeLayoutBody from './layout-body';
+import VxeLayoutFooter from './layout-footer';
+import VxeRow from './row';
+import VxeCol from './col';
+import VxeBreadcrumb from './breadcrumb';
+import VxeBreadcrumbItem from './breadcrumb-item';
+import VxeButton from './button';
+import VxeButtonGroup from './button-group';
+import VxeAnchor from './anchor';
+import VxeAnchorLink from './anchor-link';
+import VxeDesign from './design';
+import zhCN from './locale/lang/zh-CN';
+// 默认中文
+setConfig({
+    i18n: (key, args) => XEUtils.toFormatString(XEUtils.get(zhCN, key), args)
+});
+export function install(app, options) {
+    setConfig(options);
+    app.use(VxeIcon);
+    app.use(VxeLayoutContainer);
+    app.use(VxeLayoutHeader);
+    app.use(VxeLayoutAside);
+    app.use(VxeLayoutBody);
+    app.use(VxeLayoutFooter);
+    app.use(VxeRow);
+    app.use(VxeCol);
+    app.use(VxeBreadcrumb);
+    app.use(VxeBreadcrumbItem);
+    app.use(VxeButton);
+    app.use(VxeButtonGroup);
+    app.use(VxeAnchor);
+    app.use(VxeAnchorLink);
+    app.use(VxeDesign);
+}
+export * from './ui';
+// Components
+export * from './icon';
+export * from './layout-container';
+export * from './layout-header';
+export * from './layout-aside';
+export * from './layout-body';
+export * from './layout-footer';
+export * from './row';
+export * from './col';
+export * from './breadcrumb';
+export * from './breadcrumb-item';
+export * from './button';
+export * from './button-group';
+export * from './anchor';
+export * from './anchor-link';
+export * from './design';

package/es/design/index.js

@@ -0,0 +1,8 @@
+import VxeDesignComponent from './src/design';
+const VxeDesign = Object.assign({}, VxeDesignComponent, {
+    install(app) {
+        app.component(VxeDesignComponent.name, VxeDesignComponent);
+    }
+});
+export const Design = VxeDesign;
+export default VxeDesign;

package/es/design/src/design.js

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

package/es/hooks/size.js

@@ -0,0 +1,10 @@
+import { computed, inject, provide } from 'vue';
+export function useSize(props) {
+    // 组件尺寸上下文
+    const xesize = inject('xesize', null);
+    const computeSize = computed(() => {
+        return props.size || (xesize ? xesize.value : null);
+    });
+    provide('xesize', computeSize);
+    return computeSize;
+}

package/es/icon/index.js

@@ -0,0 +1,8 @@
+import VxeIconComponent from './src/icon';
+const VxeIcon = Object.assign({}, VxeIconComponent, {
+    install(app) {
+        app.component(VxeIconComponent.name, VxeIconComponent);
+    }
+});
+export const Icon = VxeIcon;
+export default VxeIcon;

package/es/icon/src/icon.js

@@ -0,0 +1,24 @@
+import { defineComponent, h } from 'vue';
+export default defineComponent({
+    name: 'VxeIcon',
+    props: {
+        name: String,
+        roll: Boolean,
+        status: String
+    },
+    emits: [
+        'click'
+    ],
+    setup(props, { emit }) {
+        const clickEvent = (evnt) => {
+            emit('click', { $event: evnt });
+        };
+        return () => {
+            const { name, roll, status } = props;
+            return h('i', {
+                class: [`vxe-icon-${name}`, roll ? 'roll' : '', status ? [`theme--${status}`] : ''],
+                onClick: clickEvent
+            });
+        };
+    }
+});