vxe-pc-ui 0.0.1 → 0.0.2

package/packages/ui/src/dom.ts

@@ -0,0 +1,103 @@
+import XEUtils from 'xe-utils'
+
+export const browse = XEUtils.browse()
+
+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+(px)?$/.test(val)
+}
+
+export function isScale (val: any) {
+  return val && /^\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 toCssUnit (val?: number | string) {
+  if (XEUtils.isNumber(val)) {
+    return `${val}px`
+  }
+  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 }
+}

package/packages/ui/src/event.ts

@@ -0,0 +1,88 @@
+import XEUtils from 'xe-utils'
+import { browse } from './dom'
+
+import { VxeComponentBase } from '../../../types'
+
+export const EVENT_KEYS = {
+  F2: 'F2',
+  ESCAPE: 'Escape',
+  ENTER: 'Enter',
+  TAB: 'Tab',
+  DELETE: 'Delete',
+  BACKSPACE: 'Backspace',
+  SPACEBAR: ' ',
+  CONTEXT_MENU: 'ContextMenu',
+  ARROW_UP: 'ArrowUp',
+  ARROW_DOWN: 'ArrowDown',
+  ARROW_LEFT: 'ArrowLeft',
+  ARROW_RIGHT: 'ArrowRight',
+  PAGE_UP: 'PageUp',
+  PAGE_DOWN: 'PageDown'
+}
+
+const convertEventKeys: { [key: string]: string } = {
+  ' ': 'Spacebar',
+  Apps: EVENT_KEYS.CONTEXT_MENU,
+  Del: EVENT_KEYS.DELETE,
+  Up: EVENT_KEYS.ARROW_UP,
+  Down: EVENT_KEYS.ARROW_DOWN,
+  Left: EVENT_KEYS.ARROW_LEFT,
+  Right: EVENT_KEYS.ARROW_RIGHT
+}
+
+// 监听全局事件
+const wheelName = browse.firefox ? 'DOMMouseScroll' : 'mousewheel'
+const eventStore: {
+  comp: VxeComponentBase;
+  type: string;
+  cb: (evnt: Event) => void;
+}[] = []
+
+export const hasEventKey = (evnt: KeyboardEvent, targetKey: string) => {
+  const { key } = evnt
+  targetKey = targetKey.toLowerCase()
+  return key ? (targetKey === key.toLowerCase() || !!(convertEventKeys[key] && convertEventKeys[key].toLowerCase() === targetKey)) : false
+}
+
+function triggerEvent (evnt: Event) {
+  const isWheel = evnt.type === wheelName
+  eventStore.forEach(({ type, cb }) => {
+    // 如果被取消冒泡，不再执行
+    if (!evnt.cancelBubble) {
+      if (type === evnt.type || (isWheel && type === 'mousewheel')) {
+        cb(evnt)
+      }
+    }
+  })
+}
+
+export const GlobalEvent = {
+  on (comp: VxeComponentBase, type: string, cb: (evnt: any) => void) {
+    eventStore.push({ comp, type, cb })
+  },
+  off (comp: VxeComponentBase, type: string) {
+    XEUtils.remove(eventStore, item => item.comp === comp && item.type === type)
+  },
+  trigger: triggerEvent,
+  eqKeypad (evnt: KeyboardEvent, keyVal: string) {
+    const { key } = evnt
+    if (keyVal.toLowerCase() === key.toLowerCase()) {
+      return true
+    }
+    return false
+  }
+}
+
+if (browse.isDoc) {
+  if (!browse.msie) {
+    window.addEventListener('copy', triggerEvent, false)
+    window.addEventListener('cut', triggerEvent, false)
+    window.addEventListener('paste', triggerEvent, false)
+  }
+  document.addEventListener('keydown', triggerEvent, false)
+  document.addEventListener('contextmenu', triggerEvent, false)
+  window.addEventListener('mousedown', triggerEvent, false)
+  window.addEventListener('blur', triggerEvent, false)
+  window.addEventListener('resize', triggerEvent, false)
+  window.addEventListener(wheelName, XEUtils.throttle(triggerEvent, 100, { leading: true, trailing: false }), { passive: true, capture: false })
+}

package/packages/ui/src/globalStore.ts

@@ -0,0 +1,11 @@
+import { VxeGlobalConfig } from '../../../types'
+
+const globalConfigStore: VxeGlobalConfig = {
+  button: {},
+  breadcrumb: {
+    separator: '/'
+  },
+  i18n: (key: string) => key
+}
+
+export default globalConfigStore

package/packages/ui/src/iconStore.ts

@@ -0,0 +1,88 @@
+import { VxeGlobalIcon } from '../../../types'
+
+const iconPrefix = 'vxe-icon-'
+
+const iconConfigStore: VxeGlobalIcon = {
+  // loading
+  LOADING: iconPrefix + 'spinner roll vxe-loading--default-icon',
+
+  // table
+  TABLE_SORT_ASC: iconPrefix + 'caret-up',
+  TABLE_SORT_DESC: iconPrefix + 'caret-down',
+  TABLE_FILTER_NONE: iconPrefix + 'funnel',
+  TABLE_FILTER_MATCH: iconPrefix + 'funnel',
+  TABLE_EDIT: iconPrefix + 'edit',
+  TABLE_TITLE_PREFIX: iconPrefix + 'question-circle-fill',
+  TABLE_TITLE_SUFFIX: iconPrefix + 'question-circle-fill',
+  TABLE_TREE_LOADED: iconPrefix + 'spinner roll',
+  TABLE_TREE_OPEN: iconPrefix + 'caret-right rotate90',
+  TABLE_TREE_CLOSE: iconPrefix + 'caret-right',
+  TABLE_EXPAND_LOADED: iconPrefix + 'spinner roll',
+  TABLE_EXPAND_OPEN: iconPrefix + 'arrow-right rotate90',
+  TABLE_EXPAND_CLOSE: iconPrefix + 'arrow-right',
+  TABLE_CHECKBOX_CHECKED: iconPrefix + 'checkbox-checked',
+  TABLE_CHECKBOX_UNCHECKED: iconPrefix + 'checkbox-unchecked',
+  TABLE_CHECKBOX_INDETERMINATE: iconPrefix + 'checkbox-indeterminate',
+  TABLE_RADIO_CHECKED: iconPrefix + 'radio-checked',
+  TABLE_RADIO_UNCHECKED: iconPrefix + 'radio-unchecked',
+
+  // button
+  BUTTON_DROPDOWN: iconPrefix + 'arrow-down',
+  BUTTON_LOADING: iconPrefix + 'spinner roll',
+
+  // select
+  SELECT_LOADED: iconPrefix + 'spinner roll',
+  SELECT_OPEN: iconPrefix + 'caret-down rotate180',
+  SELECT_CLOSE: iconPrefix + 'caret-down',
+
+  // pager
+  PAGER_HOME: iconPrefix + 'home-page',
+  PAGER_END: iconPrefix + 'end-page',
+  PAGER_JUMP_PREV: iconPrefix + 'arrow-double-left',
+  PAGER_JUMP_NEXT: iconPrefix + 'arrow-double-right',
+  PAGER_PREV_PAGE: iconPrefix + 'arrow-left',
+  PAGER_NEXT_PAGE: iconPrefix + 'arrow-right',
+  PAGER_JUMP_MORE: iconPrefix + 'ellipsis-h',
+
+  // input
+  INPUT_CLEAR: iconPrefix + 'error-circle-fill',
+  INPUT_PWD: iconPrefix + 'eye-fill',
+  INPUT_SHOW_PWD: iconPrefix + 'eye-fill-close',
+  INPUT_PREV_NUM: iconPrefix + 'caret-up',
+  INPUT_NEXT_NUM: iconPrefix + 'caret-down',
+  INPUT_DATE: iconPrefix + 'calendar',
+  INPUT_SEARCH: iconPrefix + 'search',
+
+  // modal
+  MODAL_ZOOM_IN: iconPrefix + 'square',
+  MODAL_ZOOM_OUT: iconPrefix + 'maximize',
+  MODAL_CLOSE: iconPrefix + 'close',
+  MODAL_INFO: iconPrefix + 'info-circle-fill',
+  MODAL_SUCCESS: iconPrefix + 'success-circle-fill',
+  MODAL_WARNING: iconPrefix + 'warnion-circle-fill',
+  MODAL_ERROR: iconPrefix + 'error-circle-fill',
+  MODAL_QUESTION: iconPrefix + 'question-circle-fill',
+  MODAL_LOADING: iconPrefix + 'spinner roll',
+
+  // toolbar
+  TOOLBAR_TOOLS_REFRESH: iconPrefix + 'repeat',
+  TOOLBAR_TOOLS_REFRESH_LOADING: iconPrefix + 'repeat roll',
+  TOOLBAR_TOOLS_IMPORT: iconPrefix + 'upload',
+  TOOLBAR_TOOLS_EXPORT: iconPrefix + 'download',
+  TOOLBAR_TOOLS_PRINT: iconPrefix + 'print',
+  TOOLBAR_TOOLS_FULLSCREEN: iconPrefix + 'fullscreen',
+  TOOLBAR_TOOLS_MINIMIZE: iconPrefix + 'minimize',
+  TOOLBAR_TOOLS_CUSTOM: iconPrefix + 'custom-column',
+  TOOLBAR_TOOLS_FIXED_LEFT: iconPrefix + 'fixed-left',
+  TOOLBAR_TOOLS_FIXED_LEFT_ACTIVED: iconPrefix + 'fixed-left-fill',
+  TOOLBAR_TOOLS_FIXED_RIGHT: iconPrefix + 'fixed-right',
+  TOOLBAR_TOOLS_FIXED_RIGHT_ACTIVED: iconPrefix + 'fixed-right-fill',
+
+  // form
+  FORM_PREFIX: iconPrefix + 'question-circle-fill',
+  FORM_SUFFIX: iconPrefix + 'question-circle-fill',
+  FORM_FOLDING: iconPrefix + 'arrow-up rotate180',
+  FORM_UNFOLDING: iconPrefix + 'arrow-up'
+}
+
+export default iconConfigStore

package/packages/ui/src/log.ts

@@ -0,0 +1,16 @@
+import globalConfigStore from './globalStore'
+
+export function getLog (message: string, params?: any) {
+  return `[vxe-table v${process.env.VUE_APP_VXE_TABLE_VERSION}] ${globalConfigStore.i18n(message, params)}`
+}
+
+function outLog (type: 'log' | 'warn' | 'error') {
+  return function (message: string, params?: any) {
+    const msg = getLog(message, params)
+    console[type](msg)
+    return msg
+  }
+}
+
+export const warnLog = outLog('warn')
+export const errLog = outLog('error')

package/packages/ui/src/theme.ts

@@ -0,0 +1,13 @@
+import globalConfigStore from './globalStore'
+
+import { VxeGlobalConfig } from '../../../types'
+
+export default function setTheme (options?: VxeGlobalConfig) {
+  const theme = (options ? options.theme : null) || globalConfigStore.theme || 'default'
+  if (typeof document !== 'undefined') {
+    const documentElement = document.documentElement
+    if (documentElement) {
+      documentElement.setAttribute('data-vxe-ui-theme', theme)
+    }
+  }
+}

package/packages/ui/src/utils.ts

@@ -0,0 +1,22 @@
+import XEUtils from 'xe-utils'
+import DomZIndex from 'dom-zindex'
+
+export function isEnableConf (conf: any): boolean {
+  return conf && conf.enabled !== false
+}
+
+export function isEmptyValue (cellValue: any) {
+  return cellValue === null || cellValue === undefined || cellValue === ''
+}
+
+export function nextZIndex () {
+  return DomZIndex.getNext()
+}
+
+export function getLastZIndex () {
+  return DomZIndex.getCurrent()
+}
+
+export function getFuncText (content?: string | number | boolean | null) {
+  return content ? XEUtils.toValueString(content) : ''
+}

package/styles/all.scss

@@ -0,0 +1,17 @@
+@import './base.scss';
+
+@import './components/icon.scss';
+@import './components/layout-container.scss';
+@import './components/layout-header.scss';
+@import './components/layout-aside.scss';
+@import './components/layout-body.scss';
+@import './components/layout-footer.scss';
+@import './components/row.scss';
+@import './components/col.scss';
+@import './components/breadcrumb.scss';
+@import './components/breadcrumb-item.scss';
+@import './components/button.scss';
+@import './components/button-group.scss';
+@import './components/anchor.scss';
+@import './components/anchor-link.scss';
+@import './components/design.scss';

package/styles/base.scss

@@ -0,0 +1,16 @@
+@import './theme/default.scss';
+@import './theme/dark.scss';
+
+%boxSizing {
+  box-sizing: border-box;
+}
+
+[class*="vxe-"] {
+  font-variant: tabular-nums;
+  font-feature-settings: 'tnum';
+  @extend %boxSizing;
+  &:after, &:before,
+  *:after, *:before {
+    @extend %boxSizing;
+  }
+}

package/styles/components/anchor.scss

@@ -0,0 +1,42 @@
+@import '../helpers/mixin.scss';
+
+.vxe-anchor {
+  position: relative;
+}
+.vxe-anchor--marker {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 0.2em;
+  height: 1.5em;
+  padding: 0.25em 0;
+  @include createAnimationTransition(all, 0.35s);
+  &::before {
+    display: block;
+    content: "";
+    height: 100%;
+    width: 100%;
+    border-radius: 1em;
+    background-color: var(--vxe-ui-anchor-link-active-color);
+  }
+}
+
+.vxe-anchor-link {
+  position: relative;
+  padding-left: 0.6em;
+  &.is--active {
+    & > .vxe-anchor-link--item {
+      color: var(--vxe-ui-anchor-link-active-color);
+    }
+  }
+}
+.vxe-anchor-link--item {
+  display: block;
+  height: 1.5em;
+  line-height: 1.5em;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  cursor: pointer;
+  color: var(--vxe-ui-anchor-link-color);
+}

package/styles/components/breadcrumb.scss

@@ -0,0 +1,20 @@
+
+.vxe-breadcrumb {
+  color: var(--vxe-ui-breadcrumb-item-color);
+}
+.vxe-breadcrumb-item {
+  display: inline-block;
+  color: var(--vxe-ui-breadcrumb-color);
+  &:last-child {
+    .vxe-breadcrumb-item--content {
+      color: var(--vxe-ui-breadcrumb-current-item-color);
+    }
+    .vxe-breadcrumb-item--separator {
+      display: none;
+    }
+  }
+}
+.vxe-breadcrumb-item--separator {
+  margin: 0 0.6em;
+  color: var(--vxe-ui-font-placeholder-color);
+}