vxe-design 3.0.0 → 3.0.1

package/packages/form-design/src/form-view.ts

@@ -1,11 +1,13 @@
 import { CreateElement, VNode } from 'vue'
 import { defineVxeComponent } from '../../ui/src/comp'
 import XEUtils from 'xe-utils'
-import { createEvent } from 'vxe-pc-ui'
+import { VxeUI } from '@vxe-ui/core'
 
 import type { ValueOf } from 'vxe-pc-ui'
 import type { FormViewReactData, VxeFormViewEmits } from '../../../types'
 
+const { createEvent } = VxeUI
+
 export default /* define-vxe-component start */ defineVxeComponent({
   name: 'VxeFormView',
   props: {

package/packages/form-view/index.ts

@@ -1,9 +1,11 @@
 import { VueConstructor } from 'vue'
-import { VxeUI } from 'vxe-pc-ui'
+import { VxeUI } from '@vxe-ui/core'
+import { checkDependVersion } from '../ui/src/depend'
 import VxeFormViewComponent from '../form-design/src/form-view'
 
 export const VxeFormView = Object.assign(VxeFormViewComponent, {
-  install: function (app: VueConstructor) {
+  install (app: VueConstructor) {
+    checkDependVersion()
     app.component(VxeFormViewComponent.name as string, VxeFormViewComponent)
   }
 })

package/packages/index.ts

@@ -1,8 +1,8 @@
-import * as VxeUIExport from './components'
+import * as VxeUIDesignExport from './components'
 
 export * from './components'
 
 /**
  * A vue based PC component library
  */
-export default VxeUIExport
+export default VxeUIDesignExport

package/packages/list-design/index.ts

@@ -1,9 +1,11 @@
 import { VueConstructor } from 'vue'
-import { VxeUI } from 'vxe-pc-ui'
+import { VxeUI } from '@vxe-ui/core'
+import { checkDependVersion } from '../ui/src/depend'
 import VxeListDesignComponent from './src/list-design'
 
 export const VxeListDesign = Object.assign({}, VxeListDesignComponent, {
   install (app: VueConstructor) {
+    checkDependVersion()
     app.component(VxeListDesignComponent.name as string, VxeListDesignComponent)
   }
 })

package/packages/list-design/src/list-design.ts

@@ -1,11 +1,13 @@
 import { CreateElement, VNode } from 'vue'
 import { defineVxeComponent } from '../../ui/src/comp'
 import XEUtils from 'xe-utils'
-import { createEvent } from 'vxe-pc-ui'
+import { VxeUI } from '@vxe-ui/core'
 
 import type { ValueOf } from 'vxe-pc-ui'
 import type { ListDesignReactData, VxeListDesignDefines, VxeListDesignEmits } from '../../../types'
 
+const { createEvent } = VxeUI
+
 export default /* define-vxe-component start */ defineVxeComponent({
   name: 'VxeListDesign',
   props: {

package/packages/list-design/src/list-view.ts

@@ -1,11 +1,13 @@
 import { CreateElement, VNode } from 'vue'
 import { defineVxeComponent } from '../../ui/src/comp'
 import XEUtils from 'xe-utils'
-import { createEvent } from 'vxe-pc-ui'
+import { VxeUI } from '@vxe-ui/core'
 
 import type { ValueOf } from 'vxe-pc-ui'
 import type { ListViewReactData, VxeListDesignDefines, VxeListViewEmits } from '../../../types'
 
+const { createEvent } = VxeUI
+
 export default /* define-vxe-component start */ defineVxeComponent({
   name: 'VxeListView',
   props: {

package/packages/list-view/index.ts

@@ -1,9 +1,11 @@
 import { VueConstructor } from 'vue'
-import { VxeUI } from 'vxe-pc-ui'
+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: function (app: VueConstructor) {
+  install (app: VueConstructor) {
+    checkDependVersion()
     app.component(VxeListViewComponent.name as string, VxeListViewComponent)
   }
 })

package/packages/ui/index.ts

@@ -1,4 +1,6 @@
-import { VxeUI, setConfig, setIcon } from 'vxe-pc-ui'
+import { VxeUI } from '@vxe-ui/core'
+
+const { setConfig, setIcon } = VxeUI
 
 VxeUI.designVersion = process.env.VUE_APP_VXE_VERSION as string
 
@@ -6,7 +8,8 @@ setConfig({
   formDesign: {
     height: 400,
     showHeader: true,
-    showPc: true
+    showPc: true,
+    showStyleSetting: false
   },
   formView: {},
   listDesign: {

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

@@ -43,11 +43,11 @@ function getNodeOffset (elem: any, container: any, rest: any): any {
 }
 
 export function isPx (val: any) {
-  return val && /^\d+(px)?$/.test(val)
+  return val && /^\d+(\.\d+)?(px)?$/.test(val)
 }
 
 export function isScale (val: any) {
-  return val && /^\d+%$/.test(val)
+  return val && /^\d+(\.\d+)?%$/.test(val)
 }
 
 export function hasClass (elem: any, cls: any) {

package/packages/ui/src/log.ts

@@ -1,6 +1,19 @@
-import { log } from 'vxe-pc-ui'
+import { VxeUI } from '@vxe-ui/core'
 
-const version = `ui v${process.env.VUE_APP_VXE_VERSION}`
+const { log } = VxeUI
 
-export const warnLog = log.create('warn', version)
-export const errLog = log.create('error', version)
+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

@@ -1,7 +1,9 @@
 import XEUtils from 'xe-utils'
-import { getConfig } from 'vxe-pc-ui'
+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
 }

package/packages/ui/src/vn.ts

@@ -1,7 +1,7 @@
 import XEUtils from 'xe-utils'
-import { VxeComponentSlotType } from 'vxe-pc-ui'
 
 import type { CombinedVueInstance } from 'vue/types/vue'
+import type { VxeComponentSlotType } from 'vxe-pc-ui'
 
 export function getOnName (type: string) {
   return XEUtils.kebabCase(type)

package/styles/components/form-design.scss

@@ -41,6 +41,7 @@
   min-height: 3em;
   border: 1px solid var(--vxe-ui-input-border-color);
   border-radius: var(--vxe-ui-base-border-radius);
+  overflow: hidden;
 }
 .vxe-form-design--header-left,
 .vxe-form-design--header-right {
@@ -48,6 +49,7 @@
 }
 .vxe-form-design--header-middle {
   flex-grow: 1;
+  overflow: auto;
 }
 .vxe-form-design--header-right {
   display: flex;
@@ -184,6 +186,9 @@
 }
 .vxe-form-design--widget-box {
   position: relative;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
   height: 32px;
   line-height: 32px;
   font-size: var(--vxe-ui-form-design-widget-item-font-size);
@@ -192,8 +197,6 @@
   border: 1px solid var(--vxe-ui-input-border-color);
   background-color: var(--vxe-ui-layout-background-color);
   overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
   cursor: grabbing;
   user-select: none;
   &:hover {
@@ -205,18 +208,23 @@
   }
 }
 .vxe-form-design--widget-item-icon {
+  flex-shrink: 0;
   padding: 0 0.2em;
 }
 .vxe-form-design--widget-item-name {
-  padding-left: var(--vxe-ui-layout-padding-half);
+  padding: 0 var(--vxe-ui-layout-padding-half);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 .vxe-form-design--widget-item-add {
   display: none;
   position: absolute;
   top: 0;
   right: var(--vxe-ui-layout-padding-default);
-  width: 1em;
+  width: 1.2em;
   height: 100%;
+  text-align: center;
   cursor: pointer;
   &:hover {
     color: var(--vxe-ui-font-primary-color);

package/styles/components/list-design.scss

@@ -1,3 +1,6 @@
+
+@use './list-item/list-item-all.scss';
+
 .vxe-list-design {
   position: relative;
   display: flex;

package/styles/components/list-item/list-item-field-column.scss

@@ -1,10 +1,10 @@
 @use '../../helpers/baseMixin.scss';
 
 .vxe-list-design--field-checkbox-option {
-  overflow: hidden;
-  text-overflow: ellipsis;
+  display: inline-flex;
+  vertical-align: middle;
   white-space: nowrap;
-  flex-grow: 1;
+  line-height: 1;
   @include baseMixin.createCheckboxIcon();
 }
 .vxe-list-design--field-option-inner {

package/styles/helpers/baseMixin.scss

@@ -3,6 +3,9 @@
 }
 
 @mixin createCheckboxIcon {
+  & {
+    cursor: pointer;
+  }
   .vxe-checkbox--icon {
     font-size: 1.22em;
   }
@@ -20,7 +23,6 @@
     }
   }
   &:not(.is--disabled) {
-    cursor: pointer;
     &:hover {
       .vxe-checkbox--icon {
         color: var(--vxe-ui-font-primary-color);
@@ -30,6 +32,9 @@
   &.is--hidden {
     cursor: default;
   }
+  &.is--readonly {
+    cursor: auto;
+  }
   &.is--disabled {
     color: var(--vxe-ui-font-disabled-color);
     cursor: not-allowed;
@@ -44,7 +49,9 @@
 }
 
 @mixin createRadioIcon {
-  cursor: pointer;
+  & {
+    cursor: pointer;
+  }
   .vxe-radio--icon {
     font-size: 1.26em;
   }
@@ -62,13 +69,15 @@
     }
   }
   &:not(.is--disabled) {
-    cursor: pointer;
     &:hover {
       .vxe-radio--icon {
         color: var(--vxe-ui-font-primary-color);
       }
     }
   }
+  &.is--readonly {
+    cursor: auto;
+  }
   &.is--disabled {
     color: var(--vxe-ui-font-disabled-color);
     cursor: not-allowed;

package/types/all.d.ts

@@ -1,5 +1,12 @@
 import { VueConstructor } from 'vue'
-import { VxeUIExport, VxeGlobalConfig } from 'vxe-pc-ui'
+import { VxeUIExport, VxeGlobalConfig, VxeComponentKebabCaseKeys } from 'vxe-pc-ui'
+
+import VxeFlowDesign from 'vxe-pc-ui/types/components/flow-design'
+import VxeFlowView from 'vxe-pc-ui/types/components/flow-view'
+import VxeFormDesign from 'vxe-pc-ui/types/components/form-design'
+import VxeFormView from 'vxe-pc-ui/types/components/form-view'
+import VxeListDesign from 'vxe-pc-ui/types/components/list-design'
+import VxeListView from 'vxe-pc-ui/types/components/list-view'
 
 declare global {
   interface Window {
@@ -9,6 +16,40 @@ declare global {
 
 export function install (app: VueConstructor, options?: VxeGlobalConfig): void
 
+interface AllComponents {
+  /**
+   * FlowDesign 流程设计器
+   */
+  VxeFlowDesign: typeof VxeFlowDesign
+  /**
+   * FlowView 流程设计器 - 视图
+   */
+  VxeFlowView: typeof VxeFlowView
+  /**
+   * FormDesign 表单设计器
+   */
+  VxeFormDesign: typeof VxeFormDesign
+  /**
+   * FormView 表单设计器 - 视图
+   */
+  VxeFormView: typeof VxeFormView
+  /**
+   * ListDesign 列表设计器
+   */
+  VxeListDesign: typeof VxeListDesign
+  /**
+   * ListView 列表设计器 - 视图
+   */
+  VxeListView: typeof VxeListView
+}
+
+declare module '@vxe-ui/core' {
+  export interface VxeGlobalComponents extends AllComponents, VxeComponentKebabCaseKeys<AllComponents> {}
+}
+
+// Vxe core
+export * from 'vxe-pc-ui/types/ui'
+
 // Vxe Design
 export * from 'vxe-pc-ui/types/components/flow-design'
 export * from 'vxe-pc-ui/types/components/flow-view'