vxe-pc-ui 0.1.0 → 0.2.0

package/README.md

@@ -30,6 +30,7 @@ npm install vxe-pc-ui
 // ...
 import { createApp } from 'vue'
 import VxeUI from 'vxe-pc-ui'
+import 'vxe-pc-ui/lib/style.css'
 // ...
 
 VxeUI.config({
@@ -43,6 +44,12 @@ app.mount('#app')
 // ...
 ```
 
+## Contributors
+
+Thank you to everyone who contributed to this project.
+
+[![vxe-pc-ui](https://contrib.rocks/image?repo=x-extends/vxe-pc-ui)](https://github.com/x-extends/vxe-pc-ui/graphs/contributors)
+
 ## License
 
 [MIT](LICENSE) © 2019-present, Xu Liangzhan

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

@@ -1,6 +1,6 @@
 import { defineComponent, ref, h, computed, reactive, inject, createCommentVNode, onMounted, onUnmounted, provide, watch } from 'vue';
 import XEUtils from 'xe-utils';
-import { assemAnchorLink, destroyAnchorLink } from './util';
+import { assembleAnchorLink, destroyAnchorLink } from './util';
 export default defineComponent({
     name: 'VxeAnchorLink',
     props: {
@@ -52,7 +52,7 @@ export default defineComponent({
         });
         onMounted(() => {
             if ($xeAnchor && refElem.value) {
-                assemAnchorLink($xeAnchor, refElem.value, linkConfig, $xeParentAnchorLink);
+                assembleAnchorLink($xeAnchor, refElem.value, linkConfig, $xeParentAnchorLink);
             }
         });
         onUnmounted(() => {

package/es/anchor/src/util.js

@@ -1,5 +1,5 @@
 import XEUtils from 'xe-utils';
-export function assemAnchorLink($xeAnchor, elem, linkConfig, $xeParentAnchorLink) {
+export function assembleAnchorLink($xeAnchor, elem, linkConfig, $xeParentAnchorLink) {
     const staticLinks = $xeAnchor.reactData.staticLinks;
     const parentElem = elem.parentNode;
     const parentLinkConfig = $xeParentAnchorLink ? $xeParentAnchorLink.linkConfig : null;

package/es/checkbox/src/checkbox.js

@@ -23,7 +23,7 @@ export default defineComponent({
     setup(props, context) {
         const { slots, emit } = context;
         const $xeform = inject('$xeForm', null);
-        const $xeformiteminfo = inject('$xeFormItemInfo', null);
+        const formItemInfo = inject('xeFormItemInfo', null);
         const xID = XEUtils.uniqueId();
         const $xecheckbox = {
             xID,
@@ -66,8 +66,8 @@ export default defineComponent({
                     emit('update:modelValue', value);
                     checkboxMethods.dispatchEvent('change', params, evnt);
                     // 自动更新校验状态
-                    if ($xeform && $xeformiteminfo) {
-                        $xeform.triggerItemEvent(evnt, $xeformiteminfo.itemConfig.field, value);
+                    if ($xeform && formItemInfo) {
+                        $xeform.triggerItemEvent(evnt, formItemInfo.itemConfig.field, value);
                     }
                 }
             }

package/es/checkbox/src/group.js

@@ -20,7 +20,7 @@ export default defineComponent({
     setup(props, context) {
         const { slots, emit } = context;
         const $xeform = inject('$xeForm', null);
-        const $xeformiteminfo = inject('$xeFormItemInfo', null);
+        const formItemInfo = inject('xeFormItemInfo', null);
         const xID = XEUtils.uniqueId();
         const computeIsMaximize = computed(() => {
             const { modelValue, max } = props;
@@ -75,8 +75,8 @@ export default defineComponent({
                 emit('update:modelValue', checklist);
                 $xecheckboxgroup.dispatchEvent('change', Object.assign({ checklist }, params), evnt);
                 // 自动更新校验状态
-                if ($xeform && $xeformiteminfo) {
-                    $xeform.triggerItemEvent(evnt, $xeformiteminfo.itemConfig.field, checklist);
+                if ($xeform && formItemInfo) {
+                    $xeform.triggerItemEvent(evnt, formItemInfo.itemConfig.field, checklist);
                 }
             }
         };

package/es/components.js

@@ -33,6 +33,8 @@ import VxeRadioGroup from './radio-group';
 import VxeRow from './row';
 import VxeSelect from './select';
 import VxeSwitch from './switch';
+import VxeTabPane from './tab-pane';
+import VxeTabs from './tabs';
 import VxeTextarea from './textarea';
 import VxeTooltip from './tooltip';
 import zhCN from './locale/lang/zh-CN';
@@ -74,6 +76,8 @@ const components = [
     VxeRow,
     VxeSelect,
     VxeSwitch,
+    VxeTabPane,
+    VxeTabs,
     VxeTextarea,
     VxeTooltip
 ];
@@ -116,5 +120,7 @@ export * from './radio-group';
 export * from './row';
 export * from './select';
 export * from './switch';
+export * from './tab-pane';
+export * from './tabs';
 export * from './textarea';
 export * from './tooltip';

package/es/form/src/form-config-item.js

@@ -15,7 +15,7 @@ const VxeFormConfigItem = defineComponent({
     setup(props) {
         const $xeform = inject('$xeForm', {});
         const xeformiteminfo = { itemConfig: props.itemConfig };
-        provide('$xeFormItemInfo', xeformiteminfo);
+        provide('xeFormItemInfo', xeformiteminfo);
         const renderVN = () => {
             const { reactData } = $xeform;
             const { data, rules, span: allSpan, align: allAlign, titleAlign: allTitleAlign, titleWidth: allTitleWidth, titleColon: allTitleColon, titleAsterisk: allTitleAsterisk, titleOverflow: allTitleOverflow, vertical: allVertical } = $xeform.props;

package/es/form/src/form-gather.js

@@ -13,7 +13,7 @@ export default defineComponent({
         const formItem = reactive(createItem($xeForm, props));
         formItem.children = [];
         const formItemInfo = { itemConfig: formItem };
-        provide('$xeFormItemInfo', formItemInfo);
+        provide('xeFormItemInfo', formItemInfo);
         watchItem(props, formItem);
         onMounted(() => {
             assemItem($xeForm, refElem.value, formItem, parentFormGather);

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

@@ -60,11 +60,11 @@ export default defineComponent({
     setup(props, { slots }) {
         const refElem = ref();
         const $xeform = inject('$xeForm', {});
-        const formGather = inject('$xeformgather', null);
+        const formGather = inject('$xeFormGather', null);
         const formItem = reactive(createItem($xeform, props));
         formItem.slots = slots;
         const formItemInfo = { itemConfig: formItem };
-        provide('$xeFormItemInfo', formItemInfo);
+        provide('xeFormItemInfo', formItemInfo);
         watchItem(props, formItem);
         onMounted(() => {
             assemItem($xeform, refElem.value, formItem, formGather);
@@ -218,8 +218,8 @@ export default defineComponent({
             formItem,
             renderVN
         };
-        provide('$xeformitem', $xeformitem);
-        provide('$xeformgather', null);
+        provide('$xeFormItem', $xeformitem);
+        provide('$xeFormGather', null);
         return $xeformitem;
     },
     render() {

package/es/form/src/form.js

@@ -112,6 +112,7 @@ export default defineComponent({
                 visible: false
             }
         });
+        provide('xeFormItemInfo', null);
         const $xegrid = inject('$xegrid', null);
         const refElem = ref();
         const refTooltip = ref();
@@ -654,9 +655,8 @@ export default defineComponent({
         };
         $xeform.renderVN = renderVN;
         provide('$xeForm', $xeform);
-        provide('$xeformgather', null);
-        provide('$xeformitem', null);
-        provide('$xeFormItemInfo', null);
+        provide('$xeFormGather', null);
+        provide('$xeFormItem', null);
         return $xeform;
     },
     render() {

package/es/input/src/input.js

@@ -89,7 +89,7 @@ export default defineComponent({
     setup(props, context) {
         const { slots, emit } = context;
         const $xeform = inject('$xeForm', null);
-        const $xeformiteminfo = inject('$xeFormItemInfo', null);
+        const formItemInfo = inject('xeFormItemInfo', null);
         const xID = XEUtils.uniqueId();
         const computeSize = useSize(props);
         const reactData = reactive({
@@ -581,8 +581,8 @@ export default defineComponent({
             if (XEUtils.toValueString(props.modelValue) !== value) {
                 inputMethods.dispatchEvent('change', { value }, evnt);
                 // 自动更新校验状态
-                if ($xeform && $xeformiteminfo) {
-                    $xeform.triggerItemEvent(evnt, $xeformiteminfo.itemConfig.field, value);
+                if ($xeform && formItemInfo) {
+                    $xeform.triggerItemEvent(evnt, formItemInfo.itemConfig.field, value);
                 }
             }
         };

package/es/layout-aside/src/layout-aside.js

@@ -6,7 +6,8 @@ export default defineComponent({
     props: {
         width: [String, Number],
         collapsed: Boolean,
-        collapseWidth: [String, Number]
+        collapseWidth: [String, Number],
+        padding: Boolean
     },
     emits: [],
     setup(props, context) {
@@ -41,12 +42,13 @@ export default defineComponent({
             getComputeMaps: () => computeMaps
         };
         const renderVN = () => {
-            const { width, collapsed } = props;
+            const { width, collapsed, padding } = props;
             const wrapperWidth = computeWrapperWidth.value;
             const defaultSlot = slots.default;
             return h('div', {
                 ref: refElem,
                 class: ['vxe-layout-aside', {
+                        'is--padding': padding,
                         'is--default-width': !width,
                         'is--collapse': collapsed
                     }],

package/es/layout-aside/style.css

@@ -1,7 +1,6 @@
 .vxe-layout-aside {
   flex-shrink: 0;
   transition: width 0.3s;
-  padding: var(--vxe-ui-layout-padding-default);
   overflow-y: auto;
   overflow-x: hidden;
 }
@@ -10,4 +9,7 @@
 }
 .vxe-layout-aside.is--collapse {
   width: var(--vxe-ui-layout-aside-collapse-width);
+}
+.vxe-layout-aside.is--padding {
+  padding: var(--vxe-ui-layout-padding-default);
 }

package/es/layout-aside/style.min.css

@@ -1 +1 @@
-.vxe-layout-aside{flex-shrink:0;transition:width .3s;padding:var(--vxe-ui-layout-padding-default);overflow-y:auto;overflow-x:hidden}.vxe-layout-aside.is--default-width{width:var(--vxe-ui-layout-aside-default-width)}.vxe-layout-aside.is--collapse{width:var(--vxe-ui-layout-aside-collapse-width)}
+.vxe-layout-aside{flex-shrink:0;transition:width .3s;overflow-y:auto;overflow-x:hidden}.vxe-layout-aside.is--default-width{width:var(--vxe-ui-layout-aside-default-width)}.vxe-layout-aside.is--collapse{width:var(--vxe-ui-layout-aside-collapse-width)}.vxe-layout-aside.is--padding{padding:var(--vxe-ui-layout-padding-default)}

package/es/layout-body/src/layout-body.js

@@ -2,7 +2,9 @@ import { defineComponent, ref, h, reactive } from 'vue';
 import XEUtils from 'xe-utils';
 export default defineComponent({
     name: 'VxeLayoutBody',
-    props: {},
+    props: {
+        padding: Boolean
+    },
     emits: [],
     setup(props, context) {
         const { slots } = context;
@@ -22,10 +24,13 @@ export default defineComponent({
             getComputeMaps: () => computeMaps
         };
         const renderVN = () => {
+            const { padding } = props;
             const defaultSlot = slots.default;
             return h('div', {
                 ref: refElem,
-                class: 'vxe-layout-body'
+                class: ['vxe-layout-body', {
+                        'is--padding': padding
+                    }]
             }, defaultSlot ? defaultSlot({}) : []);
         };
         $xeLayoutBody.renderVN = renderVN;

package/es/layout-body/style.css

@@ -1,4 +1,6 @@
 .vxe-layout-body {
   flex-grow: 1;
+}
+.vxe-layout-body.is--padding {
   padding: var(--vxe-ui-layout-padding-default);
 }

package/es/layout-body/style.min.css

@@ -1 +1 @@
-.vxe-layout-body{flex-grow:1;padding:var(--vxe-ui-layout-padding-default)}
+.vxe-layout-body{flex-grow:1}.vxe-layout-body.is--padding{padding:var(--vxe-ui-layout-padding-default)}

package/es/layout-container/src/layout-container.js

@@ -24,11 +24,12 @@ export default defineComponent({
             getComputeMaps: () => computeMaps
         };
         const renderVN = () => {
+            const { vertical } = props;
             const defaultSlot = slots.default;
             return h('div', {
                 ref: refElem,
                 class: ['vxe-layout-container', {
-                        'is--vertical': props.vertical
+                        'is--vertical': vertical
                     }]
             }, defaultSlot ? defaultSlot({}) : []);
         };

package/es/layout-footer/src/layout-footer.js

@@ -3,7 +3,8 @@ import XEUtils from 'xe-utils';
 export default defineComponent({
     name: 'VxeLayoutFooter',
     props: {
-        fixed: Boolean
+        fixed: Boolean,
+        align: String
     },
     emits: [],
     setup(props, context) {
@@ -24,11 +25,12 @@ export default defineComponent({
             getComputeMaps: () => computeMaps
         };
         const renderVN = () => {
+            const { fixed, align } = props;
             const defaultSlot = slots.default;
             return h('div', {
                 ref: refElem,
-                class: ['vxe-layout-footer', {
-                        'is--fixed': props.fixed
+                class: ['vxe-layout-footer', align ? `align--${align}` : '', {
+                        'is--fixed': fixed
                     }]
             }, defaultSlot ? defaultSlot({}) : []);
         };

package/es/layout-footer/style.css

@@ -1,6 +1,5 @@
 .vxe-layout-footer {
   flex-shrink: 0;
-  padding: var(--vxe-ui-layout-padding-default);
   background-color: var(--vxe-ui-layout-background-color);
 }
 .vxe-layout-footer.is--fixed {
@@ -8,4 +7,7 @@
   bottom: 0;
   left: 0;
   z-index: 9;
+}
+.vxe-layout-footer.align--center {
+  text-align: center;
 }

package/es/layout-footer/style.min.css

@@ -1 +1 @@
-.vxe-layout-footer{flex-shrink:0;padding:var(--vxe-ui-layout-padding-default);background-color:var(--vxe-ui-layout-background-color)}.vxe-layout-footer.is--fixed{position:sticky;bottom:0;left:0;z-index:9}
+.vxe-layout-footer{flex-shrink:0;background-color:var(--vxe-ui-layout-background-color)}.vxe-layout-footer.is--fixed{position:sticky;bottom:0;left:0;z-index:9}.vxe-layout-footer.align--center{text-align:center}

package/es/layout-header/style.css

@@ -1,6 +1,5 @@
 .vxe-layout-header {
   flex-shrink: 0;
-  padding: var(--vxe-ui-layout-padding-default);
   background-color: var(--vxe-ui-layout-background-color);
 }
 .vxe-layout-header.is--fixed {

package/es/layout-header/style.min.css

@@ -1 +1 @@
-.vxe-layout-header{flex-shrink:0;padding:var(--vxe-ui-layout-padding-default);background-color:var(--vxe-ui-layout-background-color)}.vxe-layout-header.is--fixed{position:sticky;top:0;left:0;z-index:9}
+.vxe-layout-header{flex-shrink:0;background-color:var(--vxe-ui-layout-background-color)}.vxe-layout-header.is--fixed{position:sticky;top:0;left:0;z-index:9}

package/es/radio/src/button.js

@@ -21,7 +21,7 @@ export default defineComponent({
     setup(props, context) {
         const { slots, emit } = context;
         const $xeform = inject('$xeForm', null);
-        const $xeformiteminfo = inject('$xeFormItemInfo', null);
+        const xeFormItemInfo = inject('xeFormItemInfo', null);
         const xID = XEUtils.uniqueId();
         const computeSize = useSize(props);
         const $xeradiobutton = {
@@ -30,7 +30,7 @@ export default defineComponent({
             context
         };
         let radioButtonMethods = {};
-        const $xeradiogroup = inject('$xeradiogroup', null);
+        const $xeradiogroup = inject('$xeRadioGroup', null);
         const computeDisabled = computed(() => {
             return props.disabled || ($xeradiogroup && $xeradiogroup.props.disabled);
         });
@@ -58,8 +58,8 @@ export default defineComponent({
                 emit('update:modelValue', label);
                 radioButtonMethods.dispatchEvent('change', { label }, evnt);
                 // 自动更新校验状态
-                if ($xeform && $xeformiteminfo) {
-                    $xeform.triggerItemEvent(evnt, $xeformiteminfo.itemConfig.field, label);
+                if ($xeform && xeFormItemInfo) {
+                    $xeform.triggerItemEvent(evnt, xeFormItemInfo.itemConfig.field, label);
                 }
             }
         };

package/es/radio/src/group.js

@@ -22,7 +22,7 @@ export default defineComponent({
     setup(props, context) {
         const { slots, emit } = context;
         const $xeform = inject('$xeForm', null);
-        const $xeformiteminfo = inject('$xeFormItemInfo', null);
+        const formItemInfo = inject('xeFormItemInfo', null);
         const xID = XEUtils.uniqueId();
         const $xeradiogroup = {
             xID,
@@ -52,8 +52,8 @@ export default defineComponent({
                 emit('update:modelValue', params.label);
                 radioGroupMethods.dispatchEvent('change', params);
                 // 自动更新校验状态
-                if ($xeform && $xeformiteminfo) {
-                    $xeform.triggerItemEvent(evnt, $xeformiteminfo.itemConfig.field, params.label);
+                if ($xeform && formItemInfo) {
+                    $xeform.triggerItemEvent(evnt, formItemInfo.itemConfig.field, params.label);
                 }
             }
         };
@@ -87,7 +87,7 @@ export default defineComponent({
             renderVN,
             dispatchEvent
         });
-        provide('$xeradiogroup', $xeradiogroup);
+        provide('$xeRadioGroup', $xeradiogroup);
         return renderVN;
     }
 });

package/es/radio/src/radio.js

@@ -22,7 +22,7 @@ export default defineComponent({
     setup(props, context) {
         const { slots, emit } = context;
         const $xeform = inject('$xeForm', null);
-        const $xeformiteminfo = inject('$xeFormItemInfo', null);
+        const formItemInfo = inject('xeFormItemInfo', null);
         const xID = XEUtils.uniqueId();
         const $xeradio = {
             xID,
@@ -30,7 +30,7 @@ export default defineComponent({
             context
         };
         const computeSize = useSize(props);
-        const $xeradiogroup = inject('$xeradiogroup', null);
+        const $xeradiogroup = inject('$xeRadioGroup', null);
         let radioMethods = {};
         const computeDisabled = computed(() => {
             return props.disabled || ($xeradiogroup && $xeradiogroup.props.disabled);
@@ -53,8 +53,8 @@ export default defineComponent({
                 emit('update:modelValue', label);
                 radioMethods.dispatchEvent('change', { label }, evnt);
                 // 自动更新校验状态
-                if ($xeform && $xeformiteminfo) {
-                    $xeform.triggerItemEvent(evnt, $xeformiteminfo.itemConfig.field, label);
+                if ($xeform && formItemInfo) {
+                    $xeform.triggerItemEvent(evnt, formItemInfo.itemConfig.field, label);
                 }
             }
         };

package/es/select/src/optgroup.js

@@ -10,7 +10,7 @@ export default defineComponent({
     },
     setup(props, { slots }) {
         const elem = ref();
-        const $xeselect = inject('$xeselect', {});
+        const $xeselect = inject('$xeSelect', {});
         const option = createOption($xeselect, props);
         const xeoption = { option };
         option.options = [];

package/es/select/src/option.js

@@ -11,7 +11,7 @@ export default defineComponent({
     },
     setup(props, { slots }) {
         const elem = ref();
-        const $xeselect = inject('$xeselect', {});
+        const $xeselect = inject('$xeSelect', {});
         const optgroup = inject('xeoptgroup', null);
         const option = createOption($xeselect, props);
         option.slots = slots;

package/es/select/src/select.js

@@ -60,7 +60,7 @@ export default defineComponent({
     setup(props, context) {
         const { slots, emit } = context;
         const $xeform = inject('$xeForm', null);
-        const $xeformiteminfo = inject('$xeFormItemInfo', null);
+        const formItemInfo = inject('xeFormItemInfo', null);
         const xID = XEUtils.uniqueId();
         const computeSize = useSize(props);
         const reactData = reactive({
@@ -409,8 +409,8 @@ export default defineComponent({
                 emit('update:modelValue', selectValue);
                 selectMethods.dispatchEvent('change', { value: selectValue }, evnt);
                 // 自动更新校验状态
-                if ($xeform && $xeformiteminfo) {
-                    $xeform.triggerItemEvent(evnt, $xeformiteminfo.itemConfig.field, selectValue);
+                if ($xeform && formItemInfo) {
+                    $xeform.triggerItemEvent(evnt, formItemInfo.itemConfig.field, selectValue);
                 }
             }
         };
@@ -983,7 +983,7 @@ export default defineComponent({
             ]);
         };
         $xeselect.renderVN = renderVN;
-        provide('$xeselect', $xeselect);
+        provide('$xeSelect', $xeselect);
         return $xeselect;
     },
     render() {