vxe-design 0.0.1 → 3.0.1

package/packages/list-view/index.ts

@@ -0,0 +1,19 @@
+import { VueConstructor } from 'vue'
+import { VxeUI } from '@vxe-ui/core'
+import { checkDependVersion } from '../ui/src/depend'
+import VxeListViewComponent from '../list-design/src/list-view'
+
+export const VxeListView = Object.assign(VxeListViewComponent, {
+  install (app: VueConstructor) {
+    checkDependVersion()
+    app.component(VxeListViewComponent.name as string, VxeListViewComponent)
+  }
+})
+
+if (VxeUI.dynamicApp) {
+  VxeUI.dynamicApp.use(VxeListView)
+}
+VxeUI.component(VxeListViewComponent)
+
+export const ListView = VxeListView
+export default VxeListView

package/packages/ui/index.ts

@@ -0,0 +1,49 @@
+import { VxeUI } from '@vxe-ui/core'
+
+const { setConfig, setIcon } = VxeUI
+
+VxeUI.designVersion = process.env.VUE_APP_VXE_VERSION as string
+
+setConfig({
+  formDesign: {
+    height: 400,
+    showHeader: true,
+    showPc: true,
+    showStyleSetting: false
+  },
+  formView: {},
+  listDesign: {
+    height: 400,
+    showPc: true
+  },
+  listView: {}
+})
+
+const iconPrefix = 'vxe-icon-'
+
+setIcon({
+  // form-design
+  FORM_DESIGN_STYLE_SETTING: iconPrefix + 'layout',
+  FORM_DESIGN_PROPS_PC: iconPrefix + 'pc',
+  FORM_DESIGN_PROPS_MOBILE: iconPrefix + 'mobile',
+  FORM_DESIGN_PROPS_ADD: iconPrefix + 'add',
+  FORM_DESIGN_PROPS_EDIT: iconPrefix + 'edit',
+  FORM_DESIGN_WIDGET_ADD: iconPrefix + 'square-plus-fill',
+  FORM_DESIGN_WIDGET_COPY: iconPrefix + 'copy',
+  FORM_DESIGN_WIDGET_DELETE: iconPrefix + 'delete',
+  FORM_DESIGN_WIDGET_SWAP_LR: iconPrefix + 'swap',
+  FORM_DESIGN_WIDGET_OPTION_DELETE: iconPrefix + 'delete',
+  FORM_DESIGN_WIDGET_OPTION_EXPAND_OPEN: iconPrefix + 'square-plus',
+  FORM_DESIGN_WIDGET_OPTION_EXPAND_CLOSE: iconPrefix + 'square-minus',
+
+  // list-design
+  LIST_DESIGN_FIELD_SETTING: iconPrefix + 'custom-column',
+  LIST_DESIGN_LIST_SETTING: iconPrefix + 'menu',
+  LIST_DESIGN_LIST_SETTING_SEARCH_DELETE: iconPrefix + 'delete',
+  LIST_DESIGN_LIST_SETTING_ACTIVE_DELETE: iconPrefix + 'delete'
+})
+
+export {
+  VxeUI
+}
+export default VxeUI

package/packages/ui/src/comp.ts

@@ -0,0 +1,3 @@
+import Vue from 'vue'
+
+export const defineVxeComponent = ((options: any) => options) as typeof Vue.extend

package/packages/ui/src/depend.ts

@@ -0,0 +1,14 @@
+import { VxeUI } from '@vxe-ui/core'
+import { errLog } from './log'
+
+export function checkDependVersion () {
+  const pVersion = 3
+  const sVersion = 13
+  if (VxeUI.checkVersion) {
+    if (!VxeUI.checkVersion(VxeUI.tableVersion, pVersion, sVersion)) {
+      errLog('vxe.error.errorVersion', [`vxe-table@${VxeUI.tableVersion || '?'}`, `vxe-table v${pVersion}.${sVersion}+`])
+    }
+  } else {
+    errLog(`Requires vxe-table v${pVersion}.${sVersion}+`)
+  }
+}

package/packages/ui/src/dom.ts

@@ -0,0 +1,243 @@
+import XEUtils from 'xe-utils'
+
+let tpImgEl: HTMLImageElement | undefined
+
+export function initTpImg () {
+  if (!tpImgEl) {
+    tpImgEl = new Image()
+    tpImgEl.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII='
+  }
+  return tpImgEl
+}
+
+export function getTpImg () {
+  if (!tpImgEl) {
+    return initTpImg()
+  }
+  return tpImgEl
+}
+
+const reClsMap: { [key: string]: any } = {}
+
+function getClsRE (cls: any) {
+  if (!reClsMap[cls]) {
+    reClsMap[cls] = new RegExp(`(?:^|\\s)${cls}(?!\\S)`, 'g')
+  }
+  return reClsMap[cls]
+}
+
+function getNodeOffset (elem: any, container: any, rest: any): any {
+  if (elem) {
+    const parentElem = elem.parentNode
+    rest.top += elem.offsetTop
+    rest.left += elem.offsetLeft
+    if (parentElem && parentElem !== document.documentElement && parentElem !== document.body) {
+      rest.top -= parentElem.scrollTop
+      rest.left -= parentElem.scrollLeft
+    }
+    if (container && (elem === container || elem.offsetParent === container) ? 0 : elem.offsetParent) {
+      return getNodeOffset(elem.offsetParent, container, rest)
+    }
+  }
+  return rest
+}
+
+export function isPx (val: any) {
+  return val && /^\d+(\.\d+)?(px)?$/.test(val)
+}
+
+export function isScale (val: any) {
+  return val && /^\d+(\.\d+)?%$/.test(val)
+}
+
+export function hasClass (elem: any, cls: any) {
+  return !!(elem && elem.className && elem.className.match && elem.className.match(getClsRE(cls)))
+}
+
+export function removeClass (elem: any, cls: any) {
+  if (elem && hasClass(elem, cls)) {
+    elem.className = elem.className.replace(getClsRE(cls), '')
+  }
+}
+
+export function addClass (elem: any, cls: string) {
+  if (elem && !hasClass(elem, cls)) {
+    removeClass(elem, cls)
+    elem.className = `${elem.className} ${cls}`
+  }
+}
+
+export function hasControlKey (evnt: KeyboardEvent | MouseEvent | DragEvent) {
+  return evnt.ctrlKey || evnt.metaKey
+}
+
+export function toCssUnit (val?: number | string | null, unit = 'px') {
+  if (XEUtils.isNumber(val) || /^\d+$/.test(`${val}`)) {
+    return `${val}${unit}`
+  }
+  return `${val || ''}`
+}
+
+export function getDomNode () {
+  const documentElement = document.documentElement
+  const bodyElem = document.body
+  return {
+    scrollTop: documentElement.scrollTop || bodyElem.scrollTop,
+    scrollLeft: documentElement.scrollLeft || bodyElem.scrollLeft,
+    visibleHeight: documentElement.clientHeight || bodyElem.clientHeight,
+    visibleWidth: documentElement.clientWidth || bodyElem.clientWidth
+  }
+}
+
+/**
+ * 检查触发源是否属于目标节点
+ */
+export function getEventTargetNode (evnt: any, container: any, queryCls?: string, queryMethod?: (target: Element) => boolean) {
+  let targetElem
+  let target = (evnt.target.shadowRoot && evnt.composed) ? (evnt.composedPath()[0] || evnt.target) : evnt.target
+  while (target && target.nodeType && target !== document) {
+    if (queryCls && hasClass(target, queryCls) && (!queryMethod || queryMethod(target))) {
+      targetElem = target
+    } else if (target === container) {
+      return { flag: queryCls ? !!targetElem : true, container, targetElem: targetElem }
+    }
+    target = target.parentNode
+  }
+  return { flag: false }
+}
+
+/**
+ * 获取元素相对于 document 的位置
+ */
+export function getOffsetPos (elem: any, container: any) {
+  return getNodeOffset(elem, container, { left: 0, top: 0 })
+}
+
+export function getAbsolutePos (elem: any) {
+  const bounding = elem.getBoundingClientRect()
+  const boundingTop = bounding.top
+  const boundingLeft = bounding.left
+  const { scrollTop, scrollLeft, visibleHeight, visibleWidth } = getDomNode()
+  return { boundingTop, top: scrollTop + boundingTop, boundingLeft, left: scrollLeft + boundingLeft, visibleHeight, visibleWidth }
+}
+
+const scrollIntoViewIfNeeded = 'scrollIntoViewIfNeeded'
+const scrollIntoView = 'scrollIntoView'
+
+export function scrollToView (elem: any) {
+  if (elem) {
+    if (elem[scrollIntoViewIfNeeded]) {
+      elem[scrollIntoViewIfNeeded]()
+    } else if (elem[scrollIntoView]) {
+      elem[scrollIntoView]()
+    }
+  }
+}
+
+export function triggerEvent (targetElem: Element, type: string) {
+  if (targetElem) {
+    targetElem.dispatchEvent(new Event(type))
+  }
+}
+
+export function isNodeElement (elem: any): elem is HTMLElement {
+  return elem && elem.nodeType === 1
+}
+
+export function updatePanelPlacement (targetElem: HTMLElement | null | undefined, panelElem: HTMLElement | null | undefined, options: {
+  placement?: '' | 'top' | 'bottom' | null
+  teleportTo?: boolean
+  marginSize?: number
+}) {
+  const { placement, teleportTo, marginSize } = Object.assign({ teleportTo: false, marginSize: 32 }, options)
+  let panelPlacement: 'top' | 'bottom' = 'bottom'
+  let top: number | '' = ''
+  let bottom: number | '' = ''
+  let left: number | '' = ''
+  const right: number | '' = ''
+  let minWidth: number | '' = ''
+  const stys: Record<string, string> = {}
+  if (panelElem && targetElem) {
+    const documentElement = document.documentElement
+    const bodyElem = document.body
+    const targetHeight = targetElem.offsetHeight
+    const panelHeight = panelElem.offsetHeight
+    const panelWidth = panelElem.offsetWidth
+
+    const panelRect = panelElem.getBoundingClientRect()
+    const targetRect = targetElem.getBoundingClientRect()
+    const visibleHeight = documentElement.clientHeight || bodyElem.clientHeight
+    const visibleWidth = documentElement.clientWidth || bodyElem.clientWidth
+    minWidth = targetElem.offsetWidth
+    if (teleportTo) {
+      left = targetRect.left
+      top = targetRect.top + targetHeight
+      if (placement === 'top') {
+        panelPlacement = 'top'
+        top = targetRect.top - panelHeight
+      } else if (!placement) {
+        // 如果下面不够放，则向上
+        if (top + panelHeight + marginSize > visibleHeight) {
+          panelPlacement = 'top'
+          top = targetRect.top - panelHeight
+        }
+        // 如果上面不够放，则向下（优先）
+        if (top < marginSize) {
+          panelPlacement = 'bottom'
+          top = targetRect.top + targetHeight
+        }
+      }
+      // 如果溢出右边
+      if (left + panelWidth + marginSize > visibleWidth) {
+        left -= left + panelWidth + marginSize - visibleWidth
+      }
+      // 如果溢出左边
+      if (left < marginSize) {
+        left = marginSize
+      }
+    } else {
+      if (placement === 'top') {
+        panelPlacement = 'top'
+        bottom = targetHeight
+      } else if (!placement) {
+        // 如果下面不够放，则向上
+        top = targetHeight
+        if (targetRect.top + targetRect.height + marginSize > visibleHeight) {
+          // 如果上面不够放，则向下（优先）
+          if (targetRect.top - targetHeight - panelHeight > marginSize) {
+            panelPlacement = 'top'
+            top = ''
+            bottom = targetHeight
+          }
+        }
+      }
+      // 是否超出右侧
+      if (panelRect.left + panelRect.width + marginSize > visibleWidth) {
+        left = -(panelRect.left + panelRect.width + marginSize - visibleWidth)
+      }
+    }
+    if (XEUtils.isNumber(top)) {
+      stys.top = toCssUnit(top)
+    }
+    if (XEUtils.isNumber(bottom)) {
+      stys.bottom = toCssUnit(bottom)
+    }
+    if (XEUtils.isNumber(left)) {
+      stys.left = toCssUnit(left)
+    }
+    if (XEUtils.isNumber(right)) {
+      stys.right = toCssUnit(right)
+    }
+    if (XEUtils.isNumber(minWidth)) {
+      stys.minWidth = toCssUnit(minWidth)
+    }
+  }
+  return {
+    top: top || 0,
+    bottom: bottom || 0,
+    left: left || 0,
+    right: right || 0,
+    style: stys,
+    placement: panelPlacement
+  }
+}

package/packages/ui/src/log.ts

@@ -0,0 +1,19 @@
+import { VxeUI } from '@vxe-ui/core'
+
+const { log } = VxeUI
+
+const designVersion = `design v${process.env.VUE_APP_VXE_VERSION}`
+
+export function createComponentLog (name: string) {
+  const uiVersion = VxeUI.uiVersion ? `ui v${VxeUI.uiVersion}` : ''
+  const tableVersion = VxeUI.tableVersion ? `table v${VxeUI.tableVersion}` : ''
+  const ganttVersion = VxeUI.ganttVersion ? `gantt v${VxeUI.ganttVersion}` : ''
+  const versionInfo = [uiVersion, tableVersion, ganttVersion, designVersion].join(' ')
+  return {
+    warnLog: log.create('warn', versionInfo + '] [' + name),
+    errLog: log.create('error', versionInfo + '] [' + name)
+  }
+}
+
+export const warnLog = log.create('warn', designVersion)
+export const errLog = log.create('error', designVersion)

package/packages/ui/src/utils.ts

@@ -0,0 +1,51 @@
+import XEUtils from 'xe-utils'
+import { VxeUI } from '@vxe-ui/core'
+import DomZIndex from 'dom-zindex'
+
+const { getConfig } = VxeUI
+
+export function isEnableConf (conf: any): boolean {
+  return conf && conf.enabled !== false
+}
+
+export function nextZIndex () {
+  return DomZIndex.getNext()
+}
+
+export function getLastZIndex () {
+  return DomZIndex.getCurrent()
+}
+
+export function nextSubZIndex () {
+  return DomZIndex.getSubNext()
+}
+
+export function getSubLastZIndex () {
+  return DomZIndex.getSubCurrent()
+}
+
+export function getGlobalDefaultConfig (value: any, globalValue: any) {
+  if (XEUtils.eqNull(value)) {
+    return globalValue
+  }
+  return value
+}
+
+export function getFuncText (content: string | number | boolean | null | undefined, args?: any) {
+  if (content) {
+    const translate = getConfig().translate
+    return XEUtils.toValueString(translate ? translate('' + content, args) : content)
+  }
+  return ''
+}
+
+/**
+ * 判断值为：'' | null | undefined 时都属于空值
+ */
+export function eqEmptyValue (cellValue: any) {
+  return cellValue === null || cellValue === undefined || cellValue === ''
+}
+
+export function handleBooleanDefaultValue (value: boolean | undefined | null) {
+  return XEUtils.isBoolean(value) ? value : null
+}

package/packages/ui/src/vn.ts

@@ -0,0 +1,53 @@
+import XEUtils from 'xe-utils'
+
+import type { CombinedVueInstance } from 'vue/types/vue'
+import type { VxeComponentSlotType } from 'vxe-pc-ui'
+
+export function getOnName (type: string) {
+  return XEUtils.kebabCase(type)
+}
+
+export function getModelEvent (name: string) {
+  switch (name) {
+    case 'VxeInput':
+    case 'VxeTextarea':
+    case 'VxeNumberInput':
+    case 'VxeSelect':
+    case 'VxeTreeSelect':
+    case 'VxeTableSelect':
+    case 'VxeDatePicker':
+      return 'modelValue'
+    case 'select':
+      return 'change'
+  }
+  return 'input'
+}
+
+export function getChangeEvent (name: string) {
+  switch (name) {
+    case 'input':
+    case 'textarea':
+    case 'VxeInput':
+    case 'VxeTextarea':
+    case '$input':// 已废弃
+    case '$textarea':// 已废弃
+      return 'input'
+  }
+  return 'change'
+}
+
+export function getSlotVNs (vns: VxeComponentSlotType | VxeComponentSlotType[] | undefined) {
+  if (XEUtils.isArray(vns)) {
+    return vns
+  }
+  return vns ? [vns] : []
+}
+
+export function getEventCaseName (_vm: CombinedVueInstance<any, any, any, any, any>, name: string) {
+  const caseName = XEUtils.camelCase(name)
+  if (caseName === name) {
+    return name
+  }
+  const _events = _vm ? _vm._events : null
+  return _events && _events[caseName] ? caseName : name
+}

package/styles/all.scss

@@ -0,0 +1,8 @@
+@use './base.scss';
+
+@use './components/flow-design.scss';
+@use './components/flow-view.scss';
+@use './components/form-design.scss';
+@use './components/form-view.scss';
+@use './components/list-design.scss';
+@use './components/list-view.scss';

package/styles/base.scss

@@ -0,0 +1,2 @@
+@use './theme/light.scss';
+@use './theme/dark.scss';