vxe-pc-ui 0.0.1 → 0.0.2

package/packages/anchor/src/anchor.ts

@@ -0,0 +1,233 @@
+import { defineComponent, ref, h, reactive, PropType, VNode, 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'
+
+import { VxeAnchorPropTypes, AnchorReactData, AnchorPrivateRef, VxeAnchorPrivateComputed, VxeAnchorConstructor, VxeAnchorPrivateMethods, AnchorMethods, AnchorPrivateMethods } from '../../../types'
+
+export default defineComponent({
+  name: 'VxeAnchor',
+  props: {
+    modelValue: String as PropType<VxeAnchorPropTypes.ModelValue>,
+    options: Array as PropType<VxeAnchorPropTypes.Options>,
+    container: [String, Object, Function] as PropType<VxeAnchorPropTypes.Options>,
+    showMarker: {
+      type: Boolean as PropType<VxeAnchorPropTypes.ShowMarker>,
+      default: true
+    }
+  },
+  emits: [
+    'update:modelValue',
+    'change',
+    'click'
+  ],
+  setup (props, context) {
+    const { slots, emit } = context
+
+    const xID = XEUtils.uniqueId()
+
+    const refElem = ref<HTMLDivElement>()
+    const refMarkerElem = ref<HTMLDivElement>()
+
+    const reactData = reactive<AnchorReactData>({
+      activeHref: null,
+      staticLinks: []
+    })
+
+    const refMaps: AnchorPrivateRef = {
+      refElem
+    }
+
+    const computeAllHrefList = computed(() => {
+      const list: VxeAnchorPropTypes.ModelValue[] = []
+      XEUtils.eachTree(reactData.staticLinks, item => {
+        list.push(item.href)
+      }, { children: 'children' })
+      return list
+    })
+
+    const computeMaps: VxeAnchorPrivateComputed = {
+    }
+
+    let containerElem: HTMLElement | null = null
+
+    const $xeAnchor = {
+      xID,
+      props,
+      context,
+      reactData,
+
+      getRefMaps: () => refMaps,
+      getComputeMaps: () => computeMaps
+    } as unknown as VxeAnchorConstructor & VxeAnchorPrivateMethods
+
+    const anchorMethods: 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?: VxeAnchorPropTypes.ModelValue) => {
+      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: 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?: VxeAnchorPropTypes.Options) => {
+      const itemVNs: VNode[] = []
+      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/packages/anchor-link/index.ts

@@ -0,0 +1,11 @@
+import { App } from 'vue'
+import VxeAnchorLinkComponent from './src/anchor-link'
+
+const VxeAnchorLink = Object.assign({}, VxeAnchorLinkComponent, {
+  install (app: App) {
+    app.component(VxeAnchorLinkComponent.name as string, VxeAnchorLinkComponent)
+  }
+})
+
+export const AnchorLink = VxeAnchorLink
+export default VxeAnchorLink

package/packages/anchor-link/src/anchor-link.ts

@@ -0,0 +1,118 @@
+import { defineComponent, ref, h, computed, reactive, PropType, inject, createCommentVNode, onMounted, onUnmounted, provide, watch } from 'vue'
+import XEUtils from 'xe-utils'
+import { assemAnchorLink, destroyAnchorLink } from './util'
+
+import { VxeAnchorLinkDefines, VxeAnchorLinkPropTypes, AnchorLinkReactData, AnchorLinkPrivateRef, VxeAnchorLinkPrivateComputed, VxeAnchorLinkConstructor, VxeAnchorLinkPrivateMethods, VxeAnchorConstructor, VxeAnchorPrivateMethods } from '../../../types'
+
+export default defineComponent({
+  name: 'VxeAnchorLink',
+  props: {
+    content: [String, Number] as PropType<VxeAnchorLinkPropTypes.Content>,
+    title: [String, Number] as PropType<VxeAnchorLinkPropTypes.Title>,
+    href: String as PropType<VxeAnchorLinkPropTypes.Href>
+  },
+  emits: [],
+  setup (props, context) {
+    const { slots } = context
+
+    const xID = XEUtils.uniqueId()
+
+    const refElem = ref<HTMLDivElement>()
+
+    const reactData = reactive<AnchorLinkReactData>({
+    })
+
+    const linkConfig = reactive<VxeAnchorLinkDefines.LinkConfig>({
+      id: xID,
+      href: props.href,
+      children: []
+    })
+
+    const $xeAnchor = inject<(VxeAnchorConstructor & VxeAnchorPrivateMethods) | null>('$xeAnchor', null)
+    const $xeParentAnchorLink = inject<(VxeAnchorLinkConstructor & VxeAnchorLinkPrivateMethods) | null>('$xeAnchorLink', null)
+
+    const refMaps: AnchorLinkPrivateRef = {
+      refElem
+    }
+
+    const computeIsActive = computed(() => {
+      const { href } = props
+      if ($xeAnchor) {
+        return $xeAnchor.reactData.activeHref === href
+      }
+      return null
+    })
+
+    const computeMaps: VxeAnchorLinkPrivateComputed = {
+    }
+
+    const $xeAnchorLink = {
+      xID,
+      props,
+      context,
+      reactData,
+      linkConfig,
+
+      getRefMaps: () => refMaps,
+      getComputeMaps: () => computeMaps
+    } as unknown as VxeAnchorLinkConstructor & VxeAnchorLinkPrivateMethods
+
+    const clickEvent = (event: KeyboardEvent) => {
+      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/packages/anchor-link/src/util.ts

@@ -0,0 +1,23 @@
+import XEUtils from 'xe-utils'
+
+import { VxeAnchorLinkDefines, VxeAnchorConstructor, VxeAnchorPrivateMethods, VxeAnchorLinkConstructor, VxeAnchorLinkPrivateMethods } from '../../../types'
+
+export function assemAnchorLink ($xeAnchor: VxeAnchorConstructor & VxeAnchorPrivateMethods, elem: HTMLElement, linkConfig: VxeAnchorLinkDefines.LinkConfig, $xeParentAnchorLink: (VxeAnchorLinkConstructor & VxeAnchorLinkPrivateMethods) | null) {
+  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: VxeAnchorConstructor & VxeAnchorPrivateMethods, linkConfig: VxeAnchorLinkDefines.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/packages/breadcrumb/index.ts

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

package/packages/breadcrumb/src/breadcrumb.ts

@@ -0,0 +1,60 @@
+import { defineComponent, ref, h, reactive, provide, PropType } from 'vue'
+import VxeUI from '../../ui'
+import XEUtils from 'xe-utils'
+
+import { VxeBreadcrumbPropTypes, BreadcrumbReactData, BreadcrumbPrivateRef, VxeBreadcrumbPrivateComputed, VxeBreadcrumbConstructor, VxeBreadcrumbPrivateMethods } from '../../../types'
+
+export default defineComponent({
+  name: 'VxeBreadcrumb',
+  props: {
+    separator: {
+      type: String as PropType<VxeBreadcrumbPropTypes.Separator>,
+      default: () => VxeUI.getConfig('breadcrumb.separator')
+    }
+  },
+  emits: [],
+  setup (props, context) {
+    const { slots } = context
+
+    const xID = XEUtils.uniqueId()
+
+    const refElem = ref<HTMLDivElement>()
+
+    const reactData = reactive<BreadcrumbReactData>({
+    })
+
+    const refMaps: BreadcrumbPrivateRef = {
+      refElem
+    }
+
+    const computeMaps: VxeBreadcrumbPrivateComputed = {
+    }
+
+    const $xeBreadcrumb = {
+      xID,
+      props,
+      context,
+      reactData,
+
+      getRefMaps: () => refMaps,
+      getComputeMaps: () => computeMaps
+    } as unknown as VxeBreadcrumbConstructor & VxeBreadcrumbPrivateMethods
+
+    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/packages/breadcrumb-item/index.ts

@@ -0,0 +1,11 @@
+import { App } from 'vue'
+import VxeBreadcrumbItemComponent from './src/breadcrumb-item'
+
+const VxeBreadcrumbItem = Object.assign({}, VxeBreadcrumbItemComponent, {
+  install (app: App) {
+    app.component(VxeBreadcrumbItemComponent.name as string, VxeBreadcrumbItemComponent)
+  }
+})
+
+export const BreadcrumbItem = VxeBreadcrumbItem
+export default VxeBreadcrumbItem

package/packages/breadcrumb-item/src/breadcrumb-item.ts

@@ -0,0 +1,71 @@
+import { defineComponent, ref, h, reactive, computed, inject, createCommentVNode } from 'vue'
+import XEUtils from 'xe-utils'
+
+import { BreadcrumbItemReactData, BreadcrumbItemPrivateRef, VxeBreadcrumbItemPrivateComputed, VxeBreadcrumbItemConstructor, VxeBreadcrumbItemPrivateMethods, VxeBreadcrumbConstructor, VxeBreadcrumbPrivateMethods } from '../../../types'
+
+export default defineComponent({
+  name: 'VxeBreadcrumbItem',
+  props: {},
+  emits: [],
+  setup (props, context) {
+    const { slots } = context
+
+    const xID = XEUtils.uniqueId()
+
+    const refElem = ref<HTMLDivElement>()
+
+    const $xeBreadcrumb = inject<(VxeBreadcrumbConstructor & VxeBreadcrumbPrivateMethods) | null>('$xeBreadcrumb', null)
+
+    const reactData = reactive<BreadcrumbItemReactData>({
+    })
+
+    const refMaps: BreadcrumbItemPrivateRef = {
+      refElem
+    }
+
+    const computeSeparator = computed(() => {
+      if ($xeBreadcrumb) {
+        return $xeBreadcrumb.props.separator
+      }
+      return ''
+    })
+
+    const computeMaps: VxeBreadcrumbItemPrivateComputed = {
+    }
+
+    const $xeBreadcrumbItem = {
+      xID,
+      props,
+      context,
+      reactData,
+
+      getRefMaps: () => refMaps,
+      getComputeMaps: () => computeMaps
+    } as unknown as VxeBreadcrumbItemConstructor & VxeBreadcrumbItemPrivateMethods
+
+    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/packages/button/index.ts

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