vxe-pc-ui 3.0.0 → 3.0.1

package/packages/select/src/util.ts

@@ -0,0 +1,46 @@
+import XEUtils from 'xe-utils'
+import { OptionInfo } from './option-info'
+
+import type { VxeOptionInstance, VxeOptgroupInstance, VxeSelectConstructor } from '../../../types'
+
+export interface XEOptionProvide {
+  optionConfig: OptionInfo;
+}
+
+export function isOption (option: any) {
+  return option instanceof OptionInfo
+}
+
+export function createOption ($xeSelect: VxeSelectConstructor, _vm: any) {
+  return isOption(_vm) ? _vm : new OptionInfo($xeSelect, _vm)
+}
+
+export function watchOption (_vm: VxeOptionInstance | VxeOptgroupInstance, option: OptionInfo) {
+  ['value', 'label', 'visible', 'className', 'disabled'].forEach(name => {
+    _vm.$watch(name, (val) => {
+      option.update(name, val)
+    })
+  })
+}
+
+export function assembleOption ($xeSelect: VxeSelectConstructor, el: HTMLDivElement, option: OptionInfo, xeOptgroup?: XEOptionProvide | null) {
+  const { reactData } = $xeSelect
+  const { staticOptions } = reactData
+  const parentElem = el.parentNode
+  const parentOption = xeOptgroup ? xeOptgroup.optionConfig : null
+  const parentCols = parentOption ? parentOption.options : staticOptions
+  if (parentElem && parentCols) {
+    parentCols.splice(XEUtils.arrayIndexOf(parentElem.children, el), 0, option)
+    reactData.staticOptions = staticOptions.slice(0)
+  }
+}
+
+export function destroyOption ($xeSelect: VxeSelectConstructor, option: OptionInfo) {
+  const { reactData } = $xeSelect
+  const { staticOptions } = reactData
+  const matchObj = XEUtils.findTree(staticOptions, (item) => item.id === option.id, { children: 'options' })
+  if (matchObj) {
+    matchObj.items.splice(matchObj.index, 1)
+  }
+  reactData.staticOptions = staticOptions.slice(0)
+}

package/packages/tab-pane/index.ts

@@ -0,0 +1,16 @@
+import { VueConstructor } from 'vue'
+import { VxeUI } from '@vxe-ui/core'
+import VxeTabPaneComponent from '../tabs/src/tab-pane'
+import { dynamicApp } from '../dynamics'
+
+export const VxeTabPane = Object.assign({}, VxeTabPaneComponent, {
+  install (app: VueConstructor) {
+    app.component(VxeTabPaneComponent.name as string, VxeTabPaneComponent)
+  }
+})
+
+dynamicApp.use(VxeTabPane)
+VxeUI.component(VxeTabPaneComponent)
+
+export const TabPane = VxeTabPane
+export default VxeTabPane

package/packages/tabs/index.ts

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

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

@@ -0,0 +1,136 @@
+import { PropType, CreateElement, VNode } from 'vue'
+import { defineVxeComponent } from '../../ui/src/comp'
+import XEUtils from 'xe-utils'
+import { createEvent } from '../../ui'
+import { assembleAnchorTab, destroyAnchorTab } from './util'
+
+import type { VxeTabPanePropTypes, TabPaneReactData, VxeComponentSizeType, VxeTabPaneEmits, ValueOf, VxeTabPaneDefines, VxeTabsConstructor, VxeTabsPrivateMethods } from '../../../types'
+
+export default defineVxeComponent({
+  name: 'VxeTabPane',
+  props: {
+    title: [String, Number] as PropType<VxeTabPanePropTypes.Title>,
+    name: [String, Number] as PropType<VxeTabPanePropTypes.Name>,
+    icon: String as PropType<VxeTabPanePropTypes.Icon>,
+    titleWidth: [String, Number] as PropType<VxeTabPanePropTypes.TitleWidth>,
+    titleAlign: [String, Number] as PropType<VxeTabPanePropTypes.TitleAlign>,
+    preload: Boolean as PropType<VxeTabPanePropTypes.Preload>,
+    permissionCode: [String, Number] as PropType<VxeTabPanePropTypes.PermissionCode>
+  },
+  inject: {
+    $xeTabs: {
+      default: null
+    }
+  },
+  data () {
+    const xID = XEUtils.uniqueId()
+    const reactData: TabPaneReactData = {
+    }
+    const tabConfig: VxeTabPaneDefines.TabConfig = {
+      id: xID,
+      title: '',
+      name: '',
+      icon: '',
+      titleWidth: '',
+      titleAlign: '',
+      preload: false,
+      permissionCode: '',
+      slots: {}
+    }
+    return {
+      xID,
+      reactData,
+      tabConfig
+    }
+  },
+  computed: {
+    ...({} as {
+      computeSize(): VxeComponentSizeType
+      $xeTabs(): (VxeTabsConstructor & VxeTabsPrivateMethods) | null
+    })
+  },
+  methods: {
+    //
+    // Method
+    //
+    dispatchEvent (type: ValueOf<VxeTabPaneEmits>, params: Record<string, any>, evnt: Event | null) {
+      const $xeTabPane = this
+      $xeTabPane.$emit(type, createEvent(evnt, { $tabPane: $xeTabPane }, params))
+    },
+    //
+    // Render
+    //
+    renderVN (h: CreateElement): VNode {
+      return h('div', {
+        ref: 'refElem'
+      }, [])
+    }
+  },
+  watch: {
+    title (val) {
+      const $xeTabPane = this
+      const tabConfig = $xeTabPane.tabConfig
+
+      tabConfig.title = val
+    },
+    name (val) {
+      const $xeTabPane = this
+      const tabConfig = $xeTabPane.tabConfig
+
+      tabConfig.name = val
+    },
+    icon (val) {
+      const $xeTabPane = this
+      const tabConfig = $xeTabPane.tabConfig
+
+      tabConfig.icon = val
+    },
+    permissionCode (val) {
+      const $xeTabPane = this
+      const tabConfig = $xeTabPane.tabConfig
+
+      tabConfig.permissionCode = val
+    }
+  },
+  created () {
+    const $xeTabPane = this
+    const props = $xeTabPane
+    const slots = $xeTabPane.$scopedSlots
+    const tabConfig = $xeTabPane.tabConfig
+
+    Object.assign(tabConfig, {
+      title: props.title,
+      name: props.name,
+      icon: props.icon,
+      titleWidth: props.titleWidth,
+      titleAlign: props.titleAlign,
+      preload: props.preload,
+      permissionCode: props.permissionCode,
+      slots: {
+        default: slots.default
+      }
+    })
+  },
+  mounted () {
+    const $xeTabPane = this
+    const $xeTabs = $xeTabPane.$xeTabs
+    const tabConfig = $xeTabPane.tabConfig
+
+    const elem = $xeTabPane.$refs.refElem as HTMLDivElement
+    if ($xeTabs && elem) {
+      assembleAnchorTab($xeTabs, elem, tabConfig)
+    }
+  },
+  beforeDestroy () {
+    const $xeTabPane = this
+    const tabConfig = $xeTabPane.tabConfig
+    const $xeTabs = $xeTabPane.$xeTabs
+
+    if ($xeTabs) {
+      destroyAnchorTab($xeTabs, tabConfig)
+    }
+  },
+  render (this: any, h) {
+    return this.renderVN(h)
+  }
+})