vxe-pc-ui 0.1.0 → 0.2.0

package/packages/radio/src/group.ts

@@ -25,7 +25,7 @@ export default defineComponent({
   setup (props, context) {
     const { slots, emit } = context
     const $xeform = inject<VxeFormConstructor & VxeFormPrivateMethods | null>('$xeForm', null)
-    const $xeformiteminfo = inject<VxeFormDefines.ProvideItemInfo | null>('$xeFormItemInfo', null)
+    const formItemInfo = inject<VxeFormDefines.ProvideItemInfo | null>('xeFormItemInfo', null)
 
     const xID = XEUtils.uniqueId()
 
@@ -64,8 +64,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)
         }
       }
     }
@@ -103,7 +103,7 @@ export default defineComponent({
       dispatchEvent
     })
 
-    provide('$xeradiogroup', $xeradiogroup)
+    provide('$xeRadioGroup', $xeradiogroup)
 
     return renderVN
   }

package/packages/radio/src/radio.ts

@@ -25,7 +25,7 @@ export default defineComponent({
   setup (props, context) {
     const { slots, emit } = context
     const $xeform = inject<VxeFormConstructor & VxeFormPrivateMethods | null>('$xeForm', null)
-    const $xeformiteminfo = inject<VxeFormDefines.ProvideItemInfo | null>('$xeFormItemInfo', null)
+    const formItemInfo = inject<VxeFormDefines.ProvideItemInfo | null>('xeFormItemInfo', null)
 
     const xID = XEUtils.uniqueId()
 
@@ -37,7 +37,7 @@ export default defineComponent({
 
     const computeSize = useSize(props)
 
-    const $xeradiogroup = inject('$xeradiogroup', null as (VxeRadioGroupConstructor & VxeRadioGroupPrivateMethods) | null)
+    const $xeradiogroup = inject('$xeRadioGroup', null as (VxeRadioGroupConstructor & VxeRadioGroupPrivateMethods) | null)
 
     let radioMethods = {} as RadioMethods
 
@@ -65,8 +65,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/packages/select/src/optgroup.ts

@@ -13,7 +13,7 @@ export default defineComponent({
   },
   setup (props, { slots }) {
     const elem = ref() as Ref<HTMLDivElement>
-    const $xeselect = inject('$xeselect', {} as VxeSelectConstructor)
+    const $xeselect = inject('$xeSelect', {} as VxeSelectConstructor)
     const option = createOption($xeselect, props)
     const xeoption: XEOptionProvide = { option }
     option.options = []

package/packages/select/src/option.ts

@@ -14,7 +14,7 @@ export default defineComponent({
   },
   setup (props, { slots }) {
     const elem = ref() as Ref<HTMLDivElement>
-    const $xeselect = inject('$xeselect', {} as VxeSelectConstructor)
+    const $xeselect = inject('$xeSelect', {} as VxeSelectConstructor)
     const optgroup = inject('xeoptgroup', null as XEOptionProvide | null)
     const option = createOption($xeselect, props)
     option.slots = slots

package/packages/select/src/select.ts

@@ -65,7 +65,7 @@ export default defineComponent({
   setup (props, context) {
     const { slots, emit } = context
     const $xeform = inject<VxeFormConstructor & VxeFormPrivateMethods | null>('$xeForm', null)
-    const $xeformiteminfo = inject<VxeFormDefines.ProvideItemInfo | null>('$xeFormItemInfo', null)
+    const formItemInfo = inject<VxeFormDefines.ProvideItemInfo | null>('xeFormItemInfo', null)
 
     const xID = XEUtils.uniqueId()
 
@@ -438,8 +438,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)
         }
       }
     }
@@ -1024,7 +1024,7 @@ export default defineComponent({
 
     $xeselect.renderVN = renderVN
 
-    provide('$xeselect', $xeselect)
+    provide('$xeSelect', $xeselect)
 
     return $xeselect
   },

package/packages/switch/src/switch.ts

@@ -28,7 +28,7 @@ export default defineComponent({
   setup (props, context) {
     const { emit } = context
     const $xeform = inject<VxeFormConstructor & VxeFormPrivateMethods | null>('$xeForm', null)
-    const $xeformiteminfo = inject<VxeFormDefines.ProvideItemInfo | null>('$xeFormItemInfo', null)
+    const formItemInfo = inject<VxeFormDefines.ProvideItemInfo | null>('xeFormItemInfo', null)
 
     const xID = XEUtils.uniqueId()
 
@@ -73,8 +73,8 @@ export default defineComponent({
         emit('update:modelValue', value)
         switchMethods.dispatchEvent('change', { value }, evnt)
         // 自动更新校验状态
-        if ($xeform && $xeformiteminfo) {
-          $xeform.triggerItemEvent(evnt, $xeformiteminfo.itemConfig.field, value)
+        if ($xeform && formItemInfo) {
+          $xeform.triggerItemEvent(evnt, formItemInfo.itemConfig.field, value)
         }
         _atimeout = setTimeout(() => {
           reactData.hasAnimat = false

package/packages/tab-pane/index.ts

@@ -0,0 +1,11 @@
+import { App } from 'vue'
+import VxeTabPaneComponent from '../tabs/src/tab-pane'
+
+const VxeTabPane = Object.assign({}, VxeTabPaneComponent, {
+  install (app: App) {
+    app.component(VxeTabPaneComponent.name as string, VxeTabPaneComponent)
+  }
+})
+
+export const TabPane = VxeTabPane
+export default VxeTabPane

package/packages/tabs/index.ts

@@ -0,0 +1,11 @@
+import { App } from 'vue'
+import VxeTabsComponent from './src/tabs'
+
+const VxeTabs = Object.assign({}, VxeTabsComponent, {
+  install (app: App) {
+    app.component(VxeTabsComponent.name as string, VxeTabsComponent)
+  }
+})
+
+export const Tabs = VxeTabs
+export default VxeTabs

package/packages/tabs/src/tab-pane.ts

@@ -0,0 +1,85 @@
+import { defineComponent, ref, h, reactive, PropType, watch, inject, onMounted, onUnmounted } from 'vue'
+import XEUtils from 'xe-utils'
+import { assembleAnchorTab, destroyAnchorTab } from './util'
+
+import { VxeTabPanePropTypes, TabPaneReactData, TabPanePrivateRef, VxeTabPanePrivateComputed, VxeTabPaneConstructor, VxeTabPanePrivateMethods, VxeTabPaneDefines, VxeTabsConstructor, VxeTabsPrivateMethods } from '../../../types'
+
+export default defineComponent({
+  name: 'VxeTabPane',
+  props: {
+    title: [String, Number] as PropType<VxeTabPanePropTypes.Title>,
+    name: [String, Number, Boolean] as PropType<VxeTabPanePropTypes.Name>
+  },
+  emits: [],
+  setup (props, context) {
+    const { slots } = context
+
+    const xID = XEUtils.uniqueId()
+
+    const refElem = ref<HTMLDivElement>()
+
+    const $xeTabs = inject<(VxeTabsConstructor & VxeTabsPrivateMethods) | null>('$xeTabs', null)
+
+    const reactData = reactive<TabPaneReactData>({
+    })
+
+    const tabConfig = reactive<VxeTabPaneDefines.TabConfig>({
+      id: xID,
+      title: props.title,
+      name: props.name,
+      slots: {
+        default: slots.default
+      }
+    })
+
+    const refMaps: TabPanePrivateRef = {
+      refElem
+    }
+
+    const computeMaps: VxeTabPanePrivateComputed = {
+    }
+
+    const $xeTabPane = {
+      xID,
+      props,
+      context,
+      reactData,
+
+      getRefMaps: () => refMaps,
+      getComputeMaps: () => computeMaps
+    } as unknown as VxeTabPaneConstructor & VxeTabPanePrivateMethods
+
+    watch(() => props.title, (val) => {
+      tabConfig.title = val
+    })
+
+    watch(() => props.name, (val) => {
+      tabConfig.name = val
+    })
+
+    onMounted(() => {
+      if ($xeTabs && refElem.value) {
+        assembleAnchorTab($xeTabs, refElem.value, tabConfig)
+      }
+    })
+
+    onUnmounted(() => {
+      if ($xeTabs) {
+        destroyAnchorTab($xeTabs, tabConfig)
+      }
+    })
+
+    const renderVN = () => {
+      return h('div', {
+        ref: refElem
+      }, [])
+    }
+
+    $xeTabPane.renderVN = renderVN
+
+    return $xeTabPane
+  },
+  render () {
+    return this.renderVN()
+  }
+})

package/packages/tabs/src/tabs.ts

@@ -0,0 +1,223 @@
+import { defineComponent, ref, h, reactive, PropType, provide, computed, createCommentVNode, watch, nextTick, onMounted } from 'vue'
+import XEUtils from 'xe-utils'
+import VxeTabPaneComponent from './tab-pane'
+import { getSlotVNs } from '../../ui/src/vn'
+
+import { VxeTabsPropTypes, VxeTabPaneProps, TabsReactData, TabsPrivateRef, VxeTabsPrivateComputed, VxeTabsConstructor, VxeTabsPrivateMethods, VxeTabPaneDefines } from '../../../types'
+
+export default defineComponent({
+  name: 'VxeTabs',
+  props: {
+    modelValue: [String, Number, Boolean] as PropType<VxeTabsPropTypes.ModelValue>,
+    options: Array as PropType<VxeTabsPropTypes.Options>,
+    destroyOnClose: Boolean as PropType<VxeTabsPropTypes.DestroyOnClose>,
+    type: String as PropType<VxeTabsPropTypes.Type>
+  },
+  emits: [],
+  setup (props, context) {
+    const { slots } = context
+
+    const xID = XEUtils.uniqueId()
+
+    const refElem = ref<HTMLDivElement>()
+    const refHeaderElem = ref<HTMLDivElement>()
+
+    const reactData = reactive<TabsReactData>({
+      staticTabs: [],
+      activeName: props.modelValue,
+      initNames: props.modelValue ? [props.modelValue] : [],
+      lintLeft: 0,
+      lintWidth: 0
+    })
+
+    const refMaps: TabsPrivateRef = {
+      refElem
+    }
+
+    const computeActiveOptionTab = computed(() => {
+      const { options } = props
+      const { activeName } = reactData
+      return options ? options.find(item => item.name === activeName) : null
+    })
+
+    const computeActiveDefaultTab = computed(() => {
+      const { staticTabs, activeName } = reactData
+      return staticTabs.find(item => item.name === activeName)
+    })
+
+    const computeMaps: VxeTabsPrivateComputed = {
+    }
+
+    const $xeTabs = {
+      xID,
+      props,
+      context,
+      reactData,
+
+      getRefMaps: () => refMaps,
+      getComputeMaps: () => computeMaps
+    } as unknown as VxeTabsConstructor & VxeTabsPrivateMethods
+
+    const callSlot = (slotFunc: any, params: any) => {
+      if (slotFunc) {
+        if (XEUtils.isString(slotFunc)) {
+          slotFunc = slots[slotFunc] || null
+        }
+        if (XEUtils.isFunction(slotFunc)) {
+          return getSlotVNs(slotFunc(params))
+        }
+      }
+      return []
+    }
+
+    const updateLineStyle = () => {
+      nextTick(() => {
+        const { type, options } = props
+        const { staticTabs, activeName } = reactData
+        const headerWrapperEl = refHeaderElem.value
+        if (headerWrapperEl && !type) {
+          const index = XEUtils.findIndexOf(staticTabs.length ? staticTabs : options, item => item.name === activeName)
+          if (index > -1) {
+            const tabEl = headerWrapperEl.children[index] as HTMLDivElement
+            const tabWidth = tabEl.clientWidth
+            const lintWidth = Math.max(4, Math.floor(tabWidth * 0.6))
+            reactData.lintLeft = tabEl.offsetLeft + Math.floor((tabWidth - lintWidth) / 2)
+            reactData.lintWidth = lintWidth
+          }
+        }
+      })
+    }
+
+    const clickEvent = (evnt: KeyboardEvent, item: VxeTabPaneProps | VxeTabPaneDefines.TabConfig) => {
+      const { initNames } = reactData
+      const { name } = item
+      if (!initNames.includes(name)) {
+        initNames.push(name)
+      }
+      reactData.activeName = name
+      updateLineStyle()
+    }
+
+    const renderTabHeader = (list: VxeTabsPropTypes.Options | VxeTabPaneDefines.TabConfig[]) => {
+      const { type } = props
+      const { activeName, lintLeft, lintWidth } = reactData
+      return h('div', {
+        class: 'vxe-tabs-header'
+      }, [
+        h('div', {
+          ref: refHeaderElem,
+          class: 'vxe-tabs-header--wrapper'
+        }, list.map(item => {
+          const { title, name, slots } = item
+          const tabSlot = slots ? slots.tab : null
+          return h('div', {
+            class: ['vxe-tab-header--item', {
+              'is--active': activeName === name
+            }],
+            onClick (evnt: KeyboardEvent) {
+              clickEvent(evnt, item)
+            }
+          }, [
+            h('div', {
+              class: 'vxe-tab-header--item-name'
+            }, tabSlot ? callSlot(tabSlot, { name, title }) : `${title}`)
+          ])
+        })),
+        type
+          ? null
+          : h('span', {
+            class: 'vxe-tabs-header--active-line',
+            style: {
+              left: `${lintLeft}px`,
+              width: `${lintWidth}px`
+            }
+          })
+      ])
+    }
+
+    const renderOptionPane = (item: VxeTabPaneProps) => {
+      const { initNames, activeName } = reactData
+      const { name, slots } = item
+      const defaultSlot = slots ? slots.default : null
+      return h(VxeTabPaneComponent, item, {
+        default () {
+          return name && initNames.includes(name)
+            ? h('div', {
+              class: ['vxe-tab-pane--item', {
+                'is--visible': activeName === name
+              }]
+            }, callSlot(defaultSlot, {}))
+            : createCommentVNode()
+        }
+      })
+    }
+
+    const renderOptionContent = (options: VxeTabsPropTypes.Options) => {
+      const { destroyOnClose } = props
+      const activeOptionTab = computeActiveOptionTab.value
+      if (destroyOnClose) {
+        return activeOptionTab ? renderOptionPane(activeOptionTab) : createCommentVNode()
+      }
+      return options.map(renderOptionPane)
+    }
+
+    const renderDefaultPane = (item: VxeTabPaneDefines.TabConfig) => {
+      const { initNames, activeName } = reactData
+      const { name, slots } = item
+      const defaultSlot = slots ? slots.default : null
+      return name && initNames.includes(name)
+        ? h('div', {
+          class: ['vxe-tab-pane--item', {
+            'is--visible': activeName === name
+          }]
+        }, callSlot(defaultSlot, {}))
+        : createCommentVNode()
+    }
+
+    const renderDefaultContent = (staticTabs: VxeTabPaneDefines.TabConfig[]) => {
+      const { destroyOnClose } = props
+      const activeDefaultTab = computeActiveDefaultTab.value
+      if (destroyOnClose) {
+        return activeDefaultTab ? renderDefaultPane(activeDefaultTab) : createCommentVNode()
+      }
+      return staticTabs.map(renderDefaultPane)
+    }
+
+    const renderVN = () => {
+      const { type, options } = props
+      const { staticTabs } = reactData
+      const defaultSlot = slots.default
+
+      return h('div', {
+        ref: refElem,
+        class: ['vxe-tabs', `vxe-tabs--${type || 'default'}`]
+      }, [
+        h('div', {
+          class: 'vxe-tabs-slots'
+        }, defaultSlot ? defaultSlot({}) : []),
+        renderTabHeader(defaultSlot ? staticTabs : (options || [])),
+        h('div', {
+          class: 'vxe-tabs-pane'
+        }, defaultSlot ? renderDefaultContent(staticTabs) : renderOptionContent(options || []))
+      ])
+    }
+
+    watch(() => props.modelValue, (val) => {
+      reactData.activeName = val
+      updateLineStyle()
+    })
+
+    onMounted(() => {
+      updateLineStyle()
+    })
+
+    $xeTabs.renderVN = renderVN
+
+    provide('$xeTabs', $xeTabs)
+
+    return $xeTabs
+  },
+  render () {
+    return this.renderVN()
+  }
+})

package/packages/tabs/src/util.ts

@@ -0,0 +1,21 @@
+import XEUtils from 'xe-utils'
+
+import { VxeTabsConstructor, VxeTabsPrivateMethods, VxeTabPaneDefines } from '../../../types'
+
+export function assembleAnchorTab ($xeTabs: VxeTabsConstructor & VxeTabsPrivateMethods, elem: HTMLElement, tabConfig: VxeTabPaneDefines.TabConfig) {
+  const staticLinks = $xeTabs.reactData.staticTabs
+  const parentElem = elem.parentNode
+  if (parentElem) {
+    staticLinks.splice(XEUtils.arrayIndexOf(parentElem.children, elem), 0, tabConfig)
+    $xeTabs.reactData.staticTabs = staticLinks.slice(0)
+  }
+}
+
+export function destroyAnchorTab ($xeTabs: VxeTabsConstructor & VxeTabsPrivateMethods, tabConfig: VxeTabPaneDefines.TabConfig) {
+  const staticTabs = $xeTabs.reactData.staticTabs
+  const matchObj = XEUtils.findTree(staticTabs, item => item.id === tabConfig.id, { children: 'children' })
+  if (matchObj) {
+    matchObj.items.splice(matchObj.index, 1)
+  }
+  $xeTabs.reactData.staticTabs = staticTabs.slice(0)
+}

package/packages/textarea/src/textarea.ts

@@ -45,7 +45,7 @@ export default defineComponent({
   setup (props, context) {
     const { emit } = context
     const $xeform = inject<VxeFormConstructor & VxeFormPrivateMethods | null>('$xeForm', null)
-    const $xeformiteminfo = inject<VxeFormDefines.ProvideItemInfo | null>('$xeFormItemInfo', null)
+    const formItemInfo = inject<VxeFormDefines.ProvideItemInfo | null>('xeFormItemInfo', null)
 
     const xID = XEUtils.uniqueId()
 
@@ -143,8 +143,8 @@ export default defineComponent({
       if (XEUtils.toValueString(props.modelValue) !== value) {
         textareaMethods.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/styles/all.scss

@@ -33,5 +33,7 @@
 @import './components/row.scss';
 @import './components/select.scss';
 @import './components/switch.scss';
+@import './components/tab-pane.scss';
+@import './components/tabs.scss';
 @import './components/textarea.scss';
 @import './components/tooltip.scss';

package/styles/components/layout-aside.scss

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

package/styles/components/layout-body.scss

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

package/styles/components/layout-footer.scss

@@ -2,7 +2,6 @@
 
 .vxe-layout-footer {
   flex-shrink: 0;
-  padding: var(--vxe-ui-layout-padding-default);
   background-color: var(--vxe-ui-layout-background-color);
   &.is--fixed {
     position: sticky;
@@ -10,4 +9,7 @@
     left: 0;
     z-index: 9;
   }
+  &.align--center {
+    text-align: center;
+  }
 }

package/styles/components/layout-header.scss

@@ -2,7 +2,6 @@
 
 .vxe-layout-header {
   flex-shrink: 0;
-  padding: var(--vxe-ui-layout-padding-default);
   background-color: var(--vxe-ui-layout-background-color);
   &.is--fixed {
     position: sticky;

package/styles/components/tabs.scss

@@ -0,0 +1,116 @@
+@import '../helpers/mixin.scss';
+
+.vxe-tabs {
+  background-color: var(--vxe-ui-layout-background-color);
+}
+.vxe-tabs-header {
+  position: relative;
+}
+.vxe-tabs-header--wrapper {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  &::after {
+    content: "";
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    height: 1px;
+    background-color: #e4e7ed;
+  }
+}
+.vxe-tab-header--item {
+  position: relative;
+  padding: 0 16px;
+  cursor: pointer;
+  &.is--active {
+    color: var(--vxe-ui-font-primary-color);;
+  }
+}
+.vxe-tab-header--item-name {
+  height: 40px;
+  line-height: 40px;
+  border-bottom: 2px solid transparent;
+  @include createAnimationTransition(color, .3s);
+}
+.vxe-tab-pane--item {
+  display: none;
+  padding: var(--vxe-ui-layout-padding-default);
+  &.is--visible {
+    display: block;
+  }
+}
+.vxe-tabs-header--active-line {
+  display: none;
+}
+
+.vxe-tabs--default {
+  .vxe-tabs-header--active-line {
+    display: block;
+    position: absolute;
+    bottom: -1px;
+    left: 0;
+    height: 2px;
+    width: 4px;
+    background-color: var(--vxe-ui-font-primary-color);
+    z-index: 1;
+    @include createAnimationTransition(all, .3s);
+  }
+}
+
+.vxe-tabs--card {
+  .vxe-tabs-header {
+    border-top: 1px solid #e4e7ed;
+    border-left: 1px solid #e4e7ed;
+  }
+  .vxe-tab-header--item {
+    border-left: 1px solid #e4e7ed;
+    &:first-child {
+      border-left: 0;
+    }
+    &:last-child {
+      border-right: 1px solid #e4e7ed;
+    }
+  }
+}
+.vxe-tabs--border-card {
+  .vxe-tab-pane--item {
+    border-bottom: 1px solid #e4e7ed;
+    border-left: 1px solid #e4e7ed;
+    border-right: 1px solid #e4e7ed;
+  }
+  .vxe-tabs-header {
+    border-top: 1px solid #e4e7ed;
+    border-left: 1px solid #e4e7ed;
+    border-right: 1px solid #e4e7ed;
+    background-color: #f5f7fa;
+  }
+  .vxe-tab-header--item {
+    &.is--active {
+      background-color: #ffffff;
+      &::before {
+        content: "";
+        position: absolute;
+        top: 0;
+        left: -1px;
+        width: calc(100% + 2px);
+        height: 100%;
+        border-left: 1px solid #e4e7ed;
+        border-right: 1px solid #e4e7ed;
+        pointer-events: none;
+      }
+      &::after {
+        content: "";
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        height: 1px;
+        background-color: var(--vxe-ui-layout-background-color);
+        pointer-events: none;
+        z-index: 1;
+      }
+    }
+  }
+}