vxe-pc-ui 3.0.0 → 3.0.1

package/packages/carousel/index.ts

@@ -0,0 +1,16 @@
+import { VueConstructor } from 'vue'
+import { VxeUI } from '@vxe-ui/core'
+import VxeCarouselComponent from './src/carousel'
+import { dynamicApp } from '../dynamics'
+
+export const VxeCarousel = Object.assign({}, VxeCarouselComponent, {
+  install (app: VueConstructor) {
+    app.component(VxeCarouselComponent.name as string, VxeCarouselComponent)
+  }
+})
+
+dynamicApp.use(VxeCarousel)
+VxeUI.component(VxeCarouselComponent)
+
+export const Carousel = VxeCarousel
+export default VxeCarousel

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

@@ -0,0 +1,114 @@
+import { CreateElement, PropType, VNode } from 'vue'
+import { defineVxeComponent } from '../../ui/src/comp'
+import XEUtils from 'xe-utils'
+import { globalMixins, createEvent } from '../../ui'
+import { assembleCarouselItem, destroyCarouselItem } from './util'
+
+import type { VxeCarouselItemPropTypes, CarouselItemReactData, VxeCarouselItemEmits, VxeCarouselDefines, VxeComponentSizeType, ValueOf, VxeCarouselConstructor, VxeCarouselPrivateMethods } from '../../../types'
+
+export default defineVxeComponent({
+  name: 'VxeCarouselItem',
+  mixins: [
+    globalMixins.sizeMixin
+  ],
+  props: {
+    name: [String, Number] as PropType<VxeCarouselItemPropTypes.Name>,
+    className: String as PropType<VxeCarouselItemPropTypes.ClassName>,
+    url: String as PropType<VxeCarouselItemPropTypes.Url>
+  },
+  inject: {
+    $xeCarousel: {
+      default: null
+    }
+  },
+  data () {
+    const xID = XEUtils.uniqueId()
+    const reactData: CarouselItemReactData = {
+      currentDate: null
+    }
+    const itemConfig: VxeCarouselDefines.ItemConfig = {
+      id: xID,
+      name: '',
+      url: '',
+      className: '',
+      slots: {}
+    }
+    return {
+      xID,
+      reactData,
+      itemConfig
+    }
+  },
+  computed: {
+    ...({} as {
+      computeSize(): VxeComponentSizeType
+      $xeCarousel(): (VxeCarouselConstructor & VxeCarouselPrivateMethods) | null
+    })
+  },
+  methods: {
+    //
+    // Method
+    //
+    dispatchEvent (type: ValueOf<VxeCarouselItemEmits>, params: Record<string, any>, evnt: Event | null) {
+      const $xeCarouselItem = this
+      $xeCarouselItem.$emit(type, createEvent(evnt, { $carouselItem: $xeCarouselItem }, params))
+    },
+    //
+    // Render
+    //
+    renderVN (h: CreateElement): VNode {
+      return h('div', {
+        ref: 'refElem'
+      })
+    }
+  },
+  watch: {
+    name (val) {
+      const $xeCarouselItem = this
+      const itemConfig = $xeCarouselItem.itemConfig
+
+      itemConfig.name = val
+    },
+    url (val) {
+      const $xeCarouselItem = this
+      const itemConfig = $xeCarouselItem.itemConfig
+
+      itemConfig.url = val
+    }
+  },
+  created () {
+    const $xeCarouselItem = this
+    const props = $xeCarouselItem
+    const slots = $xeCarouselItem.$scopedSlots
+    const itemConfig = $xeCarouselItem.itemConfig
+
+    Object.assign(itemConfig, {
+      name: props.name,
+      url: props.url,
+      className: props.className,
+      slots
+    })
+  },
+  mounted () {
+    const $xeCarouselItem = this
+    const itemConfig = $xeCarouselItem.itemConfig
+    const $xeCarousel = $xeCarouselItem.$xeCarousel
+
+    const elem = $xeCarouselItem.$refs.refElem as HTMLElement
+    if ($xeCarousel && elem) {
+      assembleCarouselItem($xeCarousel, elem, itemConfig)
+    }
+  },
+  beforeDestroy () {
+    const $xeCarouselItem = this
+    const itemConfig = $xeCarouselItem.itemConfig
+    const $xeCarousel = $xeCarouselItem.$xeCarousel
+
+    if ($xeCarousel) {
+      destroyCarouselItem($xeCarousel, itemConfig)
+    }
+  },
+  render (this: any, h) {
+    return this.renderVN(h)
+  }
+})

package/packages/carousel/src/carousel.ts

@@ -0,0 +1,449 @@
+import { CreateElement, PropType, VNode } from 'vue'
+import { defineVxeComponent } from '../../ui/src/comp'
+import XEUtils from 'xe-utils'
+import { getConfig, getIcon, createEvent, globalMixins, renderEmptyElement } from '../../ui'
+import { getSlotVNs } from '../../ui/src/vn'
+import { toCssUnit } from '../..//ui/src/dom'
+import VxeLoadingComponent from '../../loading/src/loading'
+
+import type { CarouselReactData, VxeComponentSizeType, VxeCarouselPropTypes, CarouselInternalData, VxeCarouselEmits, VxeCarouselDefines, ValueOf } from '../../../types'
+
+export default defineVxeComponent({
+  name: 'VxeCarousel',
+  mixins: [
+    globalMixins.sizeMixin
+  ],
+  props: {
+    value: [String, Number] as PropType<VxeCarouselPropTypes.ModelValue>,
+    options: Array as PropType<VxeCarouselPropTypes.Options>,
+    loading: Boolean as PropType<VxeCarouselPropTypes.Loading>,
+    height: {
+      type: [Number, String] as PropType<VxeCarouselPropTypes.Height>,
+      default: () => getConfig().carousel.height
+    },
+    width: {
+      type: [Number, String] as PropType<VxeCarouselPropTypes.Width>,
+      default: () => getConfig().carousel.width
+    },
+    autoPlay: {
+      type: Boolean as PropType<VxeCarouselPropTypes.AutoPlay>,
+      default: () => getConfig().carousel.autoPlay
+    },
+    interval: {
+      type: [Number, String] as PropType<VxeCarouselPropTypes.Interval>,
+      default: () => getConfig().carousel.interval
+    },
+    loop: {
+      type: Boolean as PropType<VxeCarouselPropTypes.Loop>,
+      default: () => getConfig().carousel.loop
+    },
+    vertical: {
+      type: Boolean as PropType<VxeCarouselPropTypes.Vertical>,
+      default: () => getConfig().carousel.vertical
+    },
+    showIndicators: {
+      type: Boolean as PropType<VxeCarouselPropTypes.ShowIndicators>,
+      default: () => getConfig().carousel.showIndicators
+    }
+  },
+  data () {
+    const xID = XEUtils.uniqueId()
+    const reactData: CarouselReactData = {
+      activeName: '',
+      staticItems: [],
+      itemWidth: 0,
+      itemHeight: 0
+    }
+    const internalData: CarouselInternalData = {
+      apTimeout: undefined,
+      stopFlag: false
+    }
+    return {
+      xID,
+      reactData,
+      internalData
+    }
+  },
+  provide () {
+    const $xeCarousel = this
+    return {
+      $xeCarousel
+    }
+  },
+  computed: {
+    ...({} as {
+      computeSize(): VxeComponentSizeType
+    }),
+    computeListStyle () {
+      const $xeCarousel = this
+      const props = $xeCarousel
+      const reactData = $xeCarousel.reactData
+
+      const { vertical, options } = props
+      const { activeName, itemWidth, itemHeight, staticItems } = reactData
+      const list = (staticItems && staticItems.length ? staticItems : options) || []
+      const activeIndex = Math.max(0, XEUtils.findIndexOf(list, item => item.name === activeName))
+      const stys: Record<string, any> = {}
+      if (vertical) {
+        stys.transform = `translateY(-${activeIndex * itemHeight}px)`
+      } else {
+        stys.width = `${itemWidth * list.length}px`
+        stys.transform = `translateX(-${activeIndex * itemWidth}px)`
+      }
+      return stys
+    }
+  },
+  methods: {
+    //
+    // Method
+    //
+    dispatchEvent (type: ValueOf<VxeCarouselEmits>, params: Record<string, any>, evnt: Event | null) {
+      const $xeCarousel = this
+      $xeCarousel.$emit(type, createEvent(evnt, { $carousel: $xeCarousel }, params))
+    },
+    prev () {
+      const $xeCarousel = this
+
+      if ($xeCarousel.handlePrevNext(false)) {
+        $xeCarousel.handleAutoPlay()
+      }
+      return $xeCarousel.$nextTick()
+    },
+    next () {
+      const $xeCarousel = this
+
+      if ($xeCarousel.handlePrevNext(true)) {
+        $xeCarousel.handleAutoPlay()
+      }
+      return $xeCarousel.$nextTick()
+    },
+    updateStyle () {
+      const $xeCarousel = this
+      const reactData = $xeCarousel.reactData
+
+      $xeCarousel.$nextTick(() => {
+        const wrapperElem = $xeCarousel.$refs.refWrapperElem as HTMLElement
+        if (wrapperElem) {
+          reactData.itemWidth = wrapperElem.clientWidth
+          reactData.itemHeight = wrapperElem.clientHeight
+        }
+      })
+    },
+    clickItemEvent  (evnt: Event, item: VxeCarouselDefines.ItemConfig | VxeCarouselPropTypes.Option) {
+      const $xeCarousel = this
+      const reactData = $xeCarousel.reactData
+
+      const value = item.name
+      reactData.activeName = item.name
+      $xeCarousel.$emit('input', value)
+      $xeCarousel.$emit('change', { value }, evnt)
+      $xeCarousel.updateStyle()
+    },
+    initDefaultActive  (list?: VxeCarouselDefines.ItemConfig[] | VxeCarouselPropTypes.Options) {
+      const $xeCarousel = this
+      const props = $xeCarousel
+      const reactData = $xeCarousel.reactData
+
+      let activeName: VxeCarouselPropTypes.ModelValue | undefined = null
+      if (list && list.length) {
+        let validVal = false
+        activeName = props.value
+        list.forEach((item) => {
+          if (activeName === item.name) {
+            validVal = true
+          }
+        })
+        if (!validVal) {
+          activeName = list[0].name
+          $xeCarousel.$emit('input', activeName)
+        }
+      }
+      reactData.activeName = activeName
+    },
+    handlePrevNext  (isNext: boolean) {
+      const $xeCarousel = this
+      const props = $xeCarousel
+      const reactData = $xeCarousel.reactData
+
+      const { options, loop } = props
+      const { activeName, staticItems } = reactData
+      const list = (staticItems && staticItems.length ? staticItems : options) || []
+      const index = Math.max(0, XEUtils.findIndexOf(list, item => item.name === activeName))
+      if (index > -1) {
+        let item: VxeCarouselDefines.ItemConfig | VxeCarouselPropTypes.Option | null = null
+        if (isNext) {
+          if (index < list.length - 1) {
+            item = list[index + 1]
+          } else {
+            if (loop) {
+              item = list[0]
+            }
+          }
+        } else {
+          if (index > 0) {
+            item = list[index - 1]
+          } else {
+            if (loop) {
+              item = list[list.length - 1]
+            }
+          }
+        }
+        if (item) {
+          const name = item.name
+          const value = name
+          reactData.activeName = name
+          $xeCarousel.$emit('input', value)
+          return true
+        }
+      }
+      return false
+    },
+    prevEvent (evnt: Event) {
+      const $xeCarousel = this
+      const reactData = $xeCarousel.reactData
+
+      if ($xeCarousel.handlePrevNext(false)) {
+        const value = reactData.activeName
+        $xeCarousel.$emit('change', { value }, evnt)
+      }
+    },
+    nextEvent  (evnt: Event) {
+      const $xeCarousel = this
+      const reactData = $xeCarousel.reactData
+
+      if ($xeCarousel.handlePrevNext(true)) {
+        const value = reactData.activeName
+        $xeCarousel.$emit('change', { value }, evnt)
+      }
+    },
+    stopAutoPlay () {
+      const $xeCarousel = this
+      const internalData = $xeCarousel.internalData
+
+      const { apTimeout } = internalData
+      internalData.stopFlag = true
+      if (apTimeout) {
+        clearTimeout(apTimeout)
+        internalData.apTimeout = undefined
+      }
+    },
+    handleAutoPlay  () {
+      const $xeCarousel = this
+      const props = $xeCarousel
+      const internalData = $xeCarousel.internalData
+
+      const { autoPlay, interval } = props
+      const { stopFlag } = internalData
+      $xeCarousel.stopAutoPlay()
+      if (autoPlay) {
+        internalData.stopFlag = false
+        internalData.apTimeout = setTimeout(() => {
+          if (!stopFlag) {
+            $xeCarousel.handlePrevNext(true)
+          }
+        }, XEUtils.toNumber(interval) || 300)
+      }
+    },
+    mouseenterEvent () {
+      const $xeCarousel = this
+
+      $xeCarousel.stopAutoPlay()
+    },
+    mouseleaveEvent  () {
+      const $xeCarousel = this
+
+      $xeCarousel.handleAutoPlay()
+    },
+    callSlot  (slotFunc: any, params: any) {
+      const $xeCarousel = this
+      const slots = $xeCarousel.$scopedSlots
+
+      if (slotFunc) {
+        if (XEUtils.isString(slotFunc)) {
+          slotFunc = slots[slotFunc] || null
+        }
+        if (XEUtils.isFunction(slotFunc)) {
+          return getSlotVNs(slotFunc(params))
+        }
+      }
+      return []
+    },
+
+    //
+    // Render
+    //
+    renderItemWrapper (h: CreateElement, list: VxeCarouselDefines.ItemConfig[] | VxeCarouselPropTypes.Options) {
+      const $xeCarousel = this
+      const props = $xeCarousel
+      const reactData = $xeCarousel.reactData
+
+      const { height } = props
+      const { activeName } = reactData
+      const listStyle = $xeCarousel.computeListStyle
+
+      return h('div', {
+        class: 'vxe-carousel--list',
+        style: listStyle
+      }, list.map(item => {
+        const { name, url, slots } = item
+        const defaultSlot = slots ? slots.default : null
+        return h('div', {
+          key: `${name}`,
+          class: ['vxe-carousel--item-inner', {
+            'is--active': activeName === name
+          }],
+          style: height
+            ? {
+                height: toCssUnit(height)
+              }
+            : {}
+        }, defaultSlot
+          ? $xeCarousel.callSlot(defaultSlot, {})
+          : [
+              h('img', {
+                class: 'vxe-carousel--item-img',
+                attrs: {
+                  src: url
+                }
+              })
+            ])
+      }))
+    },
+    renderIndicators  (h: CreateElement, list: VxeCarouselDefines.ItemConfig[] | VxeCarouselPropTypes.Options) {
+      const $xeCarousel = this
+      const reactData = $xeCarousel.reactData
+
+      const { activeName } = reactData
+      return h('div', {
+        class: 'vxe-carousel--indicators'
+      }, list.map((item) => {
+        const { name } = item
+        return h('div', {
+          key: `${name}`,
+          class: ['vxe-carousel--indicators-item', {
+            'is--active': activeName === name
+          }],
+          on: {
+            click (evnt: MouseEvent) {
+              $xeCarousel.clickItemEvent(evnt, item)
+            }
+          }
+        })
+      }))
+    },
+    renderVN (h: CreateElement): VNode {
+      const $xeCarousel = this
+      const props = $xeCarousel
+      const slots = $xeCarousel.$scopedSlots
+      const reactData = $xeCarousel.reactData
+
+      const { loading, height, width, showIndicators, vertical, options } = props
+      const { staticItems } = reactData
+      const defaultSlot = slots.default
+      const list = (staticItems && staticItems.length ? staticItems : options) || []
+
+      return h('div', {
+        ref: 'refElem',
+        class: ['vxe-carousel', `is--${vertical ? 'vertical' : 'horizontal'}`],
+        style: width
+          ? {
+              width: toCssUnit(width)
+            }
+          : {},
+        on: {
+          mouseenter: $xeCarousel.mouseenterEvent,
+          mouseleave: $xeCarousel.mouseleaveEvent
+        }
+      }, [
+        h('div', {
+          class: 'vxe-carousel--slots'
+        }, defaultSlot ? defaultSlot({}) : []),
+        h('div', {
+          ref: 'refWrapperElem',
+          class: 'vxe-carousel--item-wrapper',
+          style: height
+            ? {
+                height: toCssUnit(height)
+              }
+            : {}
+        }, [
+          $xeCarousel.renderItemWrapper(h, list)
+        ]),
+        showIndicators ? $xeCarousel.renderIndicators(h, list) : renderEmptyElement($xeCarousel),
+        h('div', {
+          class: 'vxe-carousel--btn-wrapper'
+        }, [
+          h('div', {
+            class: 'vxe-carousel--previous-btn',
+            on: {
+              click: $xeCarousel.prevEvent
+            }
+          }, [
+            h('i', {
+              class: vertical ? getIcon().CAROUSEL_VERTICAL_PREVIOUS : getIcon().CAROUSEL_HORIZONTAL_PREVIOUS
+            })
+          ]),
+          h('div', {
+            class: 'vxe-carousel--next-btn',
+            on: {
+              click: $xeCarousel.nextEvent
+            }
+          }, [
+            h('i', {
+              class: vertical ? getIcon().CAROUSEL_VERTICAL_NEXT : getIcon().CAROUSEL_HORIZONTAL_NEXT
+            })
+          ])
+        ]),
+        /**
+         * 加载中
+         */
+        h(VxeLoadingComponent, {
+          class: 'vxe-carousel--loading',
+          props: {
+            value: loading
+          }
+        })
+      ])
+    }
+  },
+  watch: {
+    options () {
+      const $xeCarousel = this
+      const props = $xeCarousel
+
+      $xeCarousel.initDefaultActive(props.options)
+    },
+    'reactData.staticItems' () {
+      const $xeCarousel = this
+      const reactData = $xeCarousel.reactData
+
+      $xeCarousel.initDefaultActive(reactData.staticItems)
+    },
+    autoPlay () {
+      const $xeCarousel = this
+
+      $xeCarousel.handleAutoPlay()
+    }
+  },
+  created () {
+    const $xeCarousel = this
+    const props = $xeCarousel
+    const reactData = $xeCarousel.reactData
+
+    $xeCarousel.initDefaultActive(reactData.staticItems.length ? reactData.staticItems : props.options)
+  },
+  mounted () {
+    const $xeCarousel = this
+
+    $xeCarousel.handleAutoPlay()
+    $xeCarousel.updateStyle()
+  },
+  beforeDestroy () {
+    const $xeCarousel = this
+
+    $xeCarousel.stopAutoPlay()
+  },
+  render (this: any, h) {
+    return this.renderVN(h)
+  }
+})

package/packages/carousel/src/util.ts

@@ -0,0 +1,21 @@
+import XEUtils from 'xe-utils'
+
+import type { VxeCarouselConstructor, VxeCarouselPrivateMethods, VxeCarouselDefines } from '../../../types'
+
+export function assembleCarouselItem ($xeCarousel: VxeCarouselConstructor & VxeCarouselPrivateMethods, elem: HTMLElement, itemConfig: VxeCarouselDefines.ItemConfig) {
+  const staticItems = $xeCarousel.reactData.staticItems
+  const parentElem = elem.parentNode
+  if (parentElem) {
+    staticItems.splice(XEUtils.arrayIndexOf(parentElem.children, elem), 0, itemConfig)
+  }
+  $xeCarousel.reactData.staticItems = staticItems.slice(0)
+}
+
+export function destroyCarouselItem ($xeCarousel: VxeCarouselConstructor & VxeCarouselPrivateMethods, itemConfig: VxeCarouselDefines.ItemConfig) {
+  const staticItems = $xeCarousel.reactData.staticItems
+  const index = XEUtils.findIndexOf(staticItems, item => item.id === itemConfig.id)
+  if (index > -1) {
+    staticItems.splice(index, 1)
+  }
+  $xeCarousel.reactData.staticItems = staticItems.slice(0)
+}

package/packages/carousel-item/index.ts

@@ -0,0 +1,16 @@
+import { VueConstructor } from 'vue'
+import { VxeUI } from '@vxe-ui/core'
+import VxeCarouselItemComponent from '../carousel/src/carousel-item'
+import { dynamicApp } from '../dynamics'
+
+export const VxeCarouselItem = Object.assign({}, VxeCarouselItemComponent, {
+  install (app: VueConstructor) {
+    app.component(VxeCarouselItemComponent.name as string, VxeCarouselItemComponent)
+  }
+})
+
+dynamicApp.use(VxeCarouselItem)
+VxeUI.component(VxeCarouselItemComponent)
+
+export const CarouselItem = VxeCarouselItem
+export default VxeCarouselItem

package/packages/checkbox/index.ts

@@ -0,0 +1,16 @@
+import { VueConstructor } from 'vue'
+import { VxeUI } from '@vxe-ui/core'
+import VxeCheckboxComponent from './src/checkbox'
+import { dynamicApp } from '../dynamics'
+
+export const VxeCheckbox = Object.assign(VxeCheckboxComponent, {
+  install (app: VueConstructor) {
+    app.component(VxeCheckboxComponent.name as string, VxeCheckboxComponent)
+  }
+})
+
+dynamicApp.use(VxeCheckbox)
+VxeUI.component(VxeCheckboxComponent)
+
+export const Checkbox = VxeCheckbox
+export default VxeCheckbox