vxe-pc-ui 0.0.1 → 0.0.2

package/packages/col/src/col.ts

@@ -0,0 +1,98 @@
+import { defineComponent, ref, h, reactive, computed, inject } from 'vue'
+import XEUtils from 'xe-utils'
+import { toCssUnit } from '../../ui/src/dom'
+
+import { ColReactData, ColPrivateRef, VxeColPrivateComputed, VxeColConstructor, VxeColPrivateMethods, VxeRowConstructor, VxeRowPrivateMethods } from '../../../types'
+
+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<HTMLDivElement>()
+
+    const reactData = reactive<ColReactData>({
+    })
+
+    const refMaps: ColPrivateRef = {
+      refElem
+    }
+
+    const $xeRow = inject<(VxeRowConstructor & VxeRowPrivateMethods) | null>('$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: Record<string, string | number> = {}
+      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: VxeColPrivateComputed = {
+    }
+
+    const $xeCol = {
+      xID,
+      props,
+      context,
+      reactData,
+
+      getRefMaps: () => refMaps,
+      getComputeMaps: () => computeMaps
+    } as unknown as VxeColConstructor & VxeColPrivateMethods
+
+    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/packages/components.ts

@@ -0,0 +1,66 @@
+import { App } from 'vue'
+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'
+
+import { VxeGlobalConfig } from '../types'
+
+// 默认中文
+setConfig({
+  i18n: (key: string, args: any) => XEUtils.toFormatString(XEUtils.get(zhCN, key), args)
+})
+
+export function install (app: App, options?: VxeGlobalConfig) {
+  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/packages/design/index.ts

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

package/packages/design/src/design.ts

@@ -0,0 +1,55 @@
+import { defineComponent, ref, h, PropType, reactive } from 'vue'
+import VxeUI from '../../ui'
+import XEUtils from 'xe-utils'
+
+import { VxeDesignPropTypes, DesignReactData, DesignPrivateRef, VxeDesignPrivateComputed, VxeDesignConstructor, VxeDesignPrivateMethods } from '../../../types'
+
+export default defineComponent({
+  name: 'VxeDesign',
+  props: {
+    size: {
+      type: String as PropType<VxeDesignPropTypes.Size>,
+      default: () => VxeUI.getConfig('design.size')
+    }
+  },
+  emits: [],
+  setup (props, context) {
+    const xID = XEUtils.uniqueId()
+
+    const refElem = ref<HTMLDivElement>()
+
+    const reactData = reactive<DesignReactData>({
+    })
+
+    const refMaps: DesignPrivateRef = {
+      refElem
+    }
+
+    const computeMaps: VxeDesignPrivateComputed = {
+    }
+
+    const $xedesign = {
+      xID,
+      props,
+      context,
+      reactData,
+
+      getRefMaps: () => refMaps,
+      getComputeMaps: () => computeMaps
+    } as unknown as VxeDesignConstructor & VxeDesignPrivateMethods
+
+    const renderVN = () => {
+      return h('div', {
+        ref: refElem,
+        class: 'vxe-design'
+      })
+    }
+
+    $xedesign.renderVN = renderVN
+
+    return $xedesign
+  },
+  render () {
+    return this.renderVN()
+  }
+})

package/packages/hooks/size.ts

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

package/packages/icon/index.ts

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

package/packages/icon/src/icon.ts

@@ -0,0 +1,27 @@
+import { defineComponent, h, PropType } from 'vue'
+
+import { VxeIconPropTypes, VxeIconEmits } from '../../../types/all'
+
+export default defineComponent({
+  name: 'VxeIcon',
+  props: {
+    name: String as PropType<VxeIconPropTypes.Name>,
+    roll: Boolean as PropType<VxeIconPropTypes.Roll>,
+    status: String as PropType<VxeIconPropTypes.Status>
+  },
+  emits: [
+    'click'
+  ] as VxeIconEmits,
+  setup (props, { emit }) {
+    const clickEvent = (evnt: KeyboardEvent) => {
+      emit('click', { $event: evnt })
+    }
+    return () => {
+      const { name, roll, status } = props
+      return h('i', {
+        class: [`vxe-icon-${name}`, roll ? 'roll' : '', status ? [`theme--${status}`] : ''],
+        onClick: clickEvent
+      })
+    }
+  }
+})

package/packages/index.ts

@@ -0,0 +1,4 @@
+import * as VxeUIExport from './components'
+
+export * from './components'
+export default VxeUIExport

package/packages/layout-aside/index.ts

@@ -0,0 +1,11 @@
+import { App } from 'vue'
+import VxeLayoutAsideComponent from './src/layout-aside'
+
+const VxeLayoutAside = Object.assign({}, VxeLayoutAsideComponent, {
+  install (app: App) {
+    app.component(VxeLayoutAsideComponent.name as string, VxeLayoutAsideComponent)
+  }
+})
+
+export const LayoutAside = VxeLayoutAside
+export default VxeLayoutAside

package/packages/layout-aside/src/layout-aside.ts

@@ -0,0 +1,85 @@
+import { defineComponent, ref, h, reactive, onMounted, computed } from 'vue'
+import XEUtils from 'xe-utils'
+import { toCssUnit } from '../../ui/src/dom'
+
+import { LayoutAsideReactData, LayoutAsidePrivateRef, VxeLayoutAsidePrivateComputed, VxeLayoutAsideConstructor, VxeLayoutAsidePrivateMethods } from '../../../types'
+
+export default defineComponent({
+  name: 'VxeLayoutAside',
+  props: {
+    width: [String, Number],
+    collapsed: Boolean,
+    collapseWidth: [String, Number]
+  },
+  emits: [],
+  setup (props, context) {
+    const { slots } = context
+
+    const xID = XEUtils.uniqueId()
+
+    const refElem = ref<HTMLDivElement>()
+
+    const reactData = reactive<LayoutAsideReactData>({})
+
+    const refMaps: LayoutAsidePrivateRef = {
+      refElem
+    }
+
+    const computeWrapperWidth = computed(() => {
+      const { width, collapsed, collapseWidth } = props
+      if (collapsed) {
+        if (collapseWidth) {
+          return toCssUnit(collapseWidth)
+        }
+      } else {
+        if (width) {
+          return toCssUnit(width)
+        }
+      }
+      return ''
+    })
+
+    const computeMaps: VxeLayoutAsidePrivateComputed = {
+    }
+
+    const $xeLayoutAside = {
+      xID,
+      props,
+      context,
+      reactData,
+
+      getRefMaps: () => refMaps,
+      getComputeMaps: () => computeMaps
+    } as unknown as VxeLayoutAsideConstructor & VxeLayoutAsidePrivateMethods
+
+    const renderVN = () => {
+      const { width, collapsed } = props
+      const wrapperWidth = computeWrapperWidth.value
+      const defaultSlot = slots.default
+
+      return h('div', {
+        ref: refElem,
+        class: ['vxe-layout-aside', {
+          'is--default-width': !width,
+          'is--collapse': collapsed
+        }],
+        style: wrapperWidth
+          ? {
+              width: wrapperWidth
+            }
+          : null
+      }, defaultSlot ? defaultSlot({}) : [])
+    }
+
+    onMounted(() => {
+
+    })
+
+    $xeLayoutAside.renderVN = renderVN
+
+    return $xeLayoutAside
+  },
+  render () {
+    return this.renderVN()
+  }
+})

package/packages/layout-body/index.ts

@@ -0,0 +1,11 @@
+import { App } from 'vue'
+import VxeLayoutBodyComponent from './src/layout-body'
+
+const VxeLayoutBody = Object.assign({}, VxeLayoutBodyComponent, {
+  install (app: App) {
+    app.component(VxeLayoutBodyComponent.name as string, VxeLayoutBodyComponent)
+  }
+})
+
+export const LayoutBody = VxeLayoutBody
+export default VxeLayoutBody

package/packages/layout-body/src/layout-body.ts

@@ -0,0 +1,52 @@
+import { defineComponent, ref, h, reactive } from 'vue'
+import XEUtils from 'xe-utils'
+
+import { LayoutBodyReactData, LayoutBodyPrivateRef, VxeLayoutBodyPrivateComputed, VxeLayoutBodyConstructor, VxeLayoutBodyPrivateMethods } from '../../../types'
+
+export default defineComponent({
+  name: 'VxeLayoutBody',
+  props: {},
+  emits: [],
+  setup (props, context) {
+    const { slots } = context
+
+    const xID = XEUtils.uniqueId()
+
+    const refElem = ref<HTMLDivElement>()
+
+    const reactData = reactive<LayoutBodyReactData>({
+    })
+
+    const refMaps: LayoutBodyPrivateRef = {
+      refElem
+    }
+
+    const computeMaps: VxeLayoutBodyPrivateComputed = {
+    }
+
+    const $xeLayoutBody = {
+      xID,
+      props,
+      context,
+      reactData,
+
+      getRefMaps: () => refMaps,
+      getComputeMaps: () => computeMaps
+    } as unknown as VxeLayoutBodyConstructor & VxeLayoutBodyPrivateMethods
+
+    const renderVN = () => {
+      const defaultSlot = slots.default
+      return h('div', {
+        ref: refElem,
+        class: 'vxe-layout-body'
+      }, defaultSlot ? defaultSlot({}) : [])
+    }
+
+    $xeLayoutBody.renderVN = renderVN
+
+    return $xeLayoutBody
+  },
+  render () {
+    return this.renderVN()
+  }
+})

package/packages/layout-container/index.ts

@@ -0,0 +1,11 @@
+import { App } from 'vue'
+import VxeLayoutContainerComponent from './src/layout-container'
+
+const VxeLayoutContainer = Object.assign({}, VxeLayoutContainerComponent, {
+  install (app: App) {
+    app.component(VxeLayoutContainerComponent.name as string, VxeLayoutContainerComponent)
+  }
+})
+
+export const LayoutContainer = VxeLayoutContainer
+export default VxeLayoutContainer

package/packages/layout-container/src/layout-container.ts

@@ -0,0 +1,56 @@
+import { defineComponent, ref, h, reactive } from 'vue'
+import XEUtils from 'xe-utils'
+
+import { LayoutContainerReactData, LayoutContainerPrivateRef, VxeLayoutContainerPrivateComputed, VxeLayoutContainerConstructor, VxeLayoutContainerPrivateMethods } from '../../../types'
+
+export default defineComponent({
+  name: 'VxeLayoutContainer',
+  props: {
+    vertical: Boolean
+  },
+  emits: [],
+  setup (props, context) {
+    const { slots } = context
+
+    const xID = XEUtils.uniqueId()
+
+    const refElem = ref<HTMLDivElement>()
+
+    const reactData = reactive<LayoutContainerReactData>({
+    })
+
+    const refMaps: LayoutContainerPrivateRef = {
+      refElem
+    }
+
+    const computeMaps: VxeLayoutContainerPrivateComputed = {
+    }
+
+    const $xeLayoutContainer = {
+      xID,
+      props,
+      context,
+      reactData,
+
+      getRefMaps: () => refMaps,
+      getComputeMaps: () => computeMaps
+    } as unknown as VxeLayoutContainerConstructor & VxeLayoutContainerPrivateMethods
+
+    const renderVN = () => {
+      const defaultSlot = slots.default
+      return h('div', {
+        ref: refElem,
+        class: ['vxe-layout-container', {
+          'is--vertical': props.vertical
+        }]
+      }, defaultSlot ? defaultSlot({}) : [])
+    }
+
+    $xeLayoutContainer.renderVN = renderVN
+
+    return $xeLayoutContainer
+  },
+  render () {
+    return this.renderVN()
+  }
+})

package/packages/layout-footer/index.ts

@@ -0,0 +1,11 @@
+import { App } from 'vue'
+import VxeLayoutFooterComponent from './src/layout-footer'
+
+const VxeLayoutFooter = Object.assign({}, VxeLayoutFooterComponent, {
+  install (app: App) {
+    app.component(VxeLayoutFooterComponent.name as string, VxeLayoutFooterComponent)
+  }
+})
+
+export const LayoutFooter = VxeLayoutFooter
+export default VxeLayoutFooter

package/packages/layout-footer/src/layout-footer.ts

@@ -0,0 +1,56 @@
+import { defineComponent, ref, h, reactive } from 'vue'
+import XEUtils from 'xe-utils'
+
+import { LayoutFooterReactData, LayoutFooterPrivateRef, VxeLayoutFooterPrivateComputed, VxeLayoutFooterConstructor, VxeLayoutFooterPrivateMethods } from '../../../types'
+
+export default defineComponent({
+  name: 'VxeLayoutFooter',
+  props: {
+    fixed: Boolean
+  },
+  emits: [],
+  setup (props, context) {
+    const { slots } = context
+
+    const xID = XEUtils.uniqueId()
+
+    const refElem = ref<HTMLDivElement>()
+
+    const reactData = reactive<LayoutFooterReactData>({
+    })
+
+    const refMaps: LayoutFooterPrivateRef = {
+      refElem
+    }
+
+    const computeMaps: VxeLayoutFooterPrivateComputed = {
+    }
+
+    const $xeLayoutFooter = {
+      xID,
+      props,
+      context,
+      reactData,
+
+      getRefMaps: () => refMaps,
+      getComputeMaps: () => computeMaps
+    } as unknown as VxeLayoutFooterConstructor & VxeLayoutFooterPrivateMethods
+
+    const renderVN = () => {
+      const defaultSlot = slots.default
+      return h('div', {
+        ref: refElem,
+        class: ['vxe-layout-footer', {
+          'is--fixed': props.fixed
+        }]
+      }, defaultSlot ? defaultSlot({}) : [])
+    }
+
+    $xeLayoutFooter.renderVN = renderVN
+
+    return $xeLayoutFooter
+  },
+  render () {
+    return this.renderVN()
+  }
+})

package/packages/layout-header/index.ts

@@ -0,0 +1,11 @@
+import { App } from 'vue'
+import VxeLayoutHeaderComponent from './src/layout-header'
+
+const VxeLayoutHeader = Object.assign({}, VxeLayoutHeaderComponent, {
+  install (app: App) {
+    app.component(VxeLayoutHeaderComponent.name as string, VxeLayoutHeaderComponent)
+  }
+})
+
+export const LayoutHeader = VxeLayoutHeader
+export default VxeLayoutHeader

package/packages/layout-header/src/layout-header.ts

@@ -0,0 +1,56 @@
+import { defineComponent, ref, h, reactive } from 'vue'
+import XEUtils from 'xe-utils'
+
+import { LayoutHeaderReactData, LayoutHeaderPrivateRef, VxeLayoutHeaderPrivateComputed, VxeLayoutHeaderConstructor, VxeLayoutHeaderPrivateMethods } from '../../../types'
+
+export default defineComponent({
+  name: 'VxeLayoutHeader',
+  props: {
+    fixed: Boolean
+  },
+  emits: [],
+  setup (props, context) {
+    const { slots } = context
+
+    const xID = XEUtils.uniqueId()
+
+    const refElem = ref<HTMLDivElement>()
+
+    const reactData = reactive<LayoutHeaderReactData>({
+    })
+
+    const refMaps: LayoutHeaderPrivateRef = {
+      refElem
+    }
+
+    const computeMaps: VxeLayoutHeaderPrivateComputed = {
+    }
+
+    const $xeLayoutHeader = {
+      xID,
+      props,
+      context,
+      reactData,
+
+      getRefMaps: () => refMaps,
+      getComputeMaps: () => computeMaps
+    } as unknown as VxeLayoutHeaderConstructor & VxeLayoutHeaderPrivateMethods
+
+    const renderVN = () => {
+      const defaultSlot = slots.default
+      return h('div', {
+        ref: refElem,
+        class: ['vxe-layout-header', {
+          'is--fixed': props.fixed
+        }]
+      }, defaultSlot ? defaultSlot({}) : [])
+    }
+
+    $xeLayoutHeader.renderVN = renderVN
+
+    return $xeLayoutHeader
+  },
+  render () {
+    return this.renderVN()
+  }
+})