vxe-pc-ui 1.8.13 → 1.9.0

package/packages/image/src/preview.ts

@@ -1,6 +1,7 @@
-import { defineComponent, h, provide, PropType, reactive, computed, watch, onMounted, onUnmounted } from 'vue'
-import { VxeUI, createEvent, getIcon, globalEvents, GLOBAL_EVENT_KEYS } from '@vxe-ui/core'
+import { defineComponent, h, provide, PropType, reactive, computed, watch, onMounted, onUnmounted, createCommentVNode } from 'vue'
+import { VxeUI, getConfig, createEvent, getIcon, globalEvents, GLOBAL_EVENT_KEYS } from '@vxe-ui/core'
 import XEUtils from 'xe-utils'
+import { getDomNode } from '../..//ui/src/dom'
 
 import type { VxeImagePreviewConstructor, ImagePreviewReactData, VxeGlobalIcon, VxeImagePreviewEmits, VxeImagePreviewPrivateMethods, ImagePreviewPrivateMethods, ImagePreviewPrivateComputed, ImagePreviewMethods, VxeImagePreviewPropTypes } from '../../../types'
 
@@ -8,8 +9,15 @@ export default defineComponent({
   name: 'VxeImagePreview',
   props: {
     modelValue: Number as PropType<VxeImagePreviewPropTypes.ModelValue>,
-    url: String as PropType<VxeImagePreviewPropTypes.Url>,
-    urlList: Array as PropType<VxeImagePreviewPropTypes.UrlList>
+    urlList: Array as PropType<VxeImagePreviewPropTypes.UrlList>,
+    urlField: {
+      type: String as PropType<VxeImagePreviewPropTypes.UrlField>,
+      default: () => getConfig().imagePreview.urlField
+    },
+    marginSize: {
+      type: String as PropType<VxeImagePreviewPropTypes.MarginSize>,
+      default: () => getConfig().imagePreview.marginSize
+    }
   },
   emits: [
     'update:modelValue',
@@ -22,7 +30,9 @@ export default defineComponent({
     const xID = XEUtils.uniqueId()
 
     const reactData = reactive<ImagePreviewReactData>({
-      activeIndex: props.modelValue,
+      activeIndex: props.modelValue || 0,
+      targetHeight: 0,
+      targetWidth: 0,
       offsetPct11: false,
       offsetScale: 0,
       offsetRotate: 0,
@@ -30,26 +40,71 @@ export default defineComponent({
       offsetTop: 0
     })
 
+    const computeUrlProp = computed(() => {
+      return props.urlField || 'url'
+    })
+
+    const computeMarginSize = computed(() => {
+      return XEUtils.toNumber(props.marginSize || 0) || 16
+    })
+
     const computeImgList = computed(() => {
-      const { url, urlList } = props
-      let list: string[] = []
+      const { urlList } = props
+      const urlProp = computeUrlProp.value
       if (urlList && urlList.length) {
-        list = urlList
-      } else if (url) {
-        list = [url]
+        return urlList.map(item => {
+          if (XEUtils.isString(item)) {
+            return item
+          }
+          if (item[urlProp]) {
+            return item[urlProp]
+          }
+          return ''
+        })
       }
-      return list
+      return []
     })
 
     const computeImgTransform = computed(() => {
-      const { offsetScale, offsetRotate } = reactData
+      let { offsetScale, offsetRotate, offsetLeft, offsetTop } = reactData
       const stys: string[] = []
-      if (offsetScale) {
-        stys.push(`scale(${1 + offsetScale})`)
+      let targetScale = 1
+      if (targetScale) {
+        targetScale = 1 + offsetScale
+        stys.push(`scale(${targetScale})`)
       }
       if (offsetRotate) {
         stys.push(`rotate(${offsetRotate}deg)`)
       }
+      if (offsetLeft || offsetTop) {
+        // 缩放与位移
+        offsetLeft /= targetScale
+        offsetTop /= targetScale
+
+        let targetOffsetLeft = offsetLeft
+        let targetOffsetTop = offsetTop
+        if (offsetRotate) {
+          // 转向与位移
+          switch (offsetRotate % 360) {
+            case 90:
+            case -270:
+              targetOffsetLeft = offsetTop
+              targetOffsetTop = -offsetLeft
+              break
+            case 180:
+            case -180:
+              targetOffsetLeft = -offsetLeft
+              targetOffsetTop = -offsetTop
+              break
+            case 270:
+            case -90:
+              targetOffsetLeft = -offsetTop
+              targetOffsetTop = offsetLeft
+              break
+          }
+        }
+        stys.push(`translate(${targetOffsetLeft}px, ${targetOffsetTop}px)`)
+      }
       return stys.length ? stys.join(' ') : ''
     })
 
@@ -85,19 +140,46 @@ export default defineComponent({
     }
 
     const resetStyle = () => {
-      reactData.offsetPct11 = false
-      reactData.offsetScale = 0
-      reactData.offsetRotate = 0
-      reactData.offsetTop = 0
-      reactData.offsetLeft = 0
+      Object.assign(reactData, {
+        targetHeight: 0,
+        targetWidth: 0,
+        offsetPct11: false,
+        offsetScale: 0,
+        offsetRotate: 0,
+        offsetLeft: 0,
+        offsetTop: 0
+      })
     }
 
     const handleZoom = (isAdd: boolean) => {
       const { offsetScale } = reactData
+      let stepNum = 0.02
+      console.log(offsetScale)
+      if (offsetScale >= -0.6) {
+        stepNum = 0.04
+        if (offsetScale >= -0.4) {
+          stepNum = 0.07
+          if (offsetScale >= 0) {
+            stepNum = 0.1
+            if (offsetScale >= 3) {
+              stepNum = 0.2
+              if (offsetScale >= 8) {
+                stepNum = 0.3
+                if (offsetScale >= 18) {
+                  stepNum = 0.4
+                  if (offsetScale >= 38) {
+                    stepNum = 0.5
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
       if (isAdd) {
-        reactData.offsetScale = Number(Math.min(10, offsetScale + 0.1).toFixed(2))
+        reactData.offsetScale = Number(Math.min(50, offsetScale + stepNum).toFixed(2))
       } else {
-        reactData.offsetScale = Number(Math.max(-0.6, offsetScale - 0.1).toFixed(2))
+        reactData.offsetScale = Number(Math.max(-0.9, offsetScale - stepNum).toFixed(2))
       }
     }
 
@@ -117,6 +199,7 @@ export default defineComponent({
           activeIndex--
         }
       }
+      resetStyle()
       reactData.activeIndex = activeIndex
       emitModel(activeIndex)
     }
@@ -132,6 +215,7 @@ export default defineComponent({
     }
 
     const handlePct11 = () => {
+      resetStyle()
       reactData.offsetPct11 = true
     }
 
@@ -178,13 +262,87 @@ export default defineComponent({
       }
     }
 
+    const wheelEvent = (evnt: WheelEvent) => {
+      const delta = evnt.deltaY
+      if (delta > 0) {
+        handleZoom(false)
+      } else if (delta < 0) {
+        handleZoom(true)
+      }
+    }
+
+    const moveEvent = (evnt: MouseEvent) => {
+      const { offsetTop, offsetLeft } = reactData
+      evnt.preventDefault()
+      const domMousemove = document.onmousemove
+      const domMouseup = document.onmouseup
+      const startX = evnt.pageX
+      const startY = evnt.pageY
+      const marginSize = computeMarginSize.value
+      document.onmousemove = et => {
+        const { pageX, pageY } = et
+        const { visibleHeight, visibleWidth } = getDomNode()
+        et.preventDefault()
+        console.log(et.pageX)
+        // 限制边界值
+        if (pageX > marginSize && pageY > marginSize && pageX < (visibleWidth - marginSize) && pageY < (visibleHeight - marginSize)) {
+          reactData.offsetLeft = offsetLeft + pageX - startX
+          reactData.offsetTop = offsetTop + pageY - startY
+        }
+      }
+      document.onmouseup = () => {
+        document.onmousemove = domMousemove
+        document.onmouseup = domMouseup
+      }
+    }
+
     const handleGlobalKeydownEvent = (evnt: KeyboardEvent) => {
+      const hasCtrlKey = evnt.ctrlKey
+      const hasShiftKey = evnt.shiftKey
+      const isUpArrow = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ARROW_UP)
+      const isDownArrow = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ARROW_DOWN)
       const isLeftArrow = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ARROW_LEFT)
       const isRightArrow = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ARROW_RIGHT)
-      if (isLeftArrow) {
-        handleChange(false)
+      const isR = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.R)
+      const isP = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.P)
+      if (isUpArrow) {
+        evnt.preventDefault()
+        if (hasShiftKey) {
+          reactData.offsetTop -= 1
+        } else {
+          handleZoom(true)
+        }
+      } else if (isDownArrow) {
+        evnt.preventDefault()
+        if (hasShiftKey) {
+          reactData.offsetTop += 1
+        } else {
+          handleZoom(false)
+        }
+      } else if (isLeftArrow) {
+        evnt.preventDefault()
+        if (hasShiftKey) {
+          reactData.offsetLeft -= 1
+        } else {
+          handleChange(false)
+        }
       } else if (isRightArrow) {
-        handleChange(true)
+        evnt.preventDefault()
+        if (hasShiftKey) {
+          reactData.offsetLeft += 1
+        } else {
+          handleChange(true)
+        }
+      } else if (isR && hasCtrlKey) {
+        evnt.preventDefault()
+        if (hasShiftKey) {
+          handleRotateImg(false)
+        } else {
+          handleRotateImg(true)
+        }
+      } else if (isP && hasCtrlKey) {
+        evnt.preventDefault()
+        handlePrintImg()
       }
     }
 
@@ -207,7 +365,10 @@ export default defineComponent({
             ? {
                 transform: imgTransform
               }
-            : null
+            : null,
+          onMousedown (evnt) {
+            moveEvent(evnt)
+          }
         })
       }))
     }
@@ -247,26 +408,30 @@ export default defineComponent({
             class: 'vxe-image-preview--close-bg'
           })
         ]),
-        h('div', {
-          class: 'vxe-image-preview--previous-btn',
-          onClick () {
-            handleChange(false)
-          }
-        }, [
-          h('i', {
-            class: getIcon().IMAGE_PREVIEW_PREVIOUS
-          })
-        ]),
-        h('div', {
-          class: 'vxe-image-preview--next-btn',
-          onClick () {
-            handleChange(true)
-          }
-        }, [
-          h('i', {
-            class: getIcon().IMAGE_PREVIEW_NEXT
-          })
-        ]),
+        imgList.length > 1
+          ? h('div', {
+            class: 'vxe-image-preview--previous-btn',
+            onClick () {
+              handleChange(false)
+            }
+          }, [
+            h('i', {
+              class: getIcon().IMAGE_PREVIEW_PREVIOUS
+            })
+          ])
+          : createCommentVNode(),
+        imgList.length > 1
+          ? h('div', {
+            class: 'vxe-image-preview--next-btn',
+            onClick () {
+              handleChange(true)
+            }
+          }, [
+            h('i', {
+              class: getIcon().IMAGE_PREVIEW_NEXT
+            })
+          ])
+          : createCommentVNode(),
         h('div', {
           class: 'vxe-image-preview--operation-wrapper'
         }, [
@@ -289,7 +454,8 @@ export default defineComponent({
       return h('div', {
         class: ['vxe-image-preview', {
           'is--pct11': offsetPct11
-        }]
+        }],
+        onWheel: wheelEvent
       }, [
         renderImgWrapper(),
         renderBtnWrapper()

package/packages/image/src/util.ts

@@ -8,7 +8,7 @@ import type { VxeImageDefines } from '../../../types'
 export const openPreviewImage: VxeImageDefines.PreviewImageFunction = (options) => {
   if (VxeUI.modal) {
     const opts = Object.assign({}, options)
-    const { url, urlList, activeIndex } = opts
+    const { urlList, activeIndex } = opts
     const modalId = XEUtils.uniqueId('image-preview')
     VxeUI.modal.open({
       id: modalId,
@@ -24,7 +24,6 @@ export const openPreviewImage: VxeImageDefines.PreviewImageFunction = (options)
           return h(VxeImagePreviewComponent, {
             modelValue: activeIndex,
             urlList,
-            url,
             onClose () {
               VxeUI.modal.close(modalId)
             }

package/packages/modal/src/modal.ts

@@ -57,6 +57,7 @@ export default defineComponent({
     transfer: { type: Boolean as PropType<VxeModalPropTypes.Transfer>, default: () => getConfig().modal.transfer },
     storage: { type: Boolean as PropType<VxeModalPropTypes.Storage>, default: () => getConfig().modal.storage },
     storageKey: { type: String as PropType<VxeModalPropTypes.StorageKey>, default: () => getConfig().modal.storageKey },
+    padding: { type: Boolean as PropType<VxeModalPropTypes.Padding>, default: () => getConfig().modal.padding },
     animat: { type: Boolean as PropType<VxeModalPropTypes.Animat>, default: () => getConfig().modal.animat },
     size: { type: String as PropType<VxeModalPropTypes.Size>, default: () => getConfig().modal.size || getConfig().size },
     beforeHideMethod: { type: Function as PropType<VxeModalPropTypes.BeforeHideMethod>, default: () => getConfig().modal.beforeHideMethod },
@@ -876,7 +877,7 @@ export default defineComponent({
     }
 
     const renderVN = () => {
-      const { className, type, animat, loading, status, lockScroll, lockView, mask, resize } = props
+      const { className, type, animat, loading, status, lockScroll, padding, lockView, mask, resize } = props
       const { inited, zoomLocat, modalTop, contentVisible, visible } = reactData
       const vSize = computeSize.value
       return h(Teleport, {
@@ -888,6 +889,7 @@ export default defineComponent({
           class: ['vxe-modal--wrapper', `type--${type}`, className || '', {
             [`size--${vSize}`]: vSize,
             [`status--${status}`]: status,
+            'is--padding': padding,
             'is--animat': animat,
             'lock--scroll': lockScroll,
             'lock--view': lockView,

package/packages/tips/src/tips.ts

@@ -3,7 +3,7 @@ import XEUtils from 'xe-utils'
 import { getConfig } from '@vxe-ui/core'
 import { getSlotVNs } from '../..//ui/src/vn'
 
-import type { VxeTipsPropTypes, TipsReactData, TipsPrivateRef, VxeTipsPrivateComputed, VxeTipsConstructor, VxeTipsPrivateMethods } from '../../../types'
+import type { VxeTipsPropTypes, TipsReactData, VxeTipsEmits, TipsPrivateRef, VxeTipsPrivateComputed, VxeTipsConstructor, VxeTipsPrivateMethods } from '../../../types'
 
 export default defineComponent({
   name: 'VxeTips',
@@ -19,7 +19,8 @@ export default defineComponent({
       default: () => getConfig().tips.icon
     }
   },
-  emits: [],
+  emits: [
+  ] as VxeTipsEmits,
   setup (props, context) {
     const { slots } = context
 

package/packages/ui/index.ts

@@ -32,6 +32,7 @@ export const globalStore = {}
 VxeUI.globalStore = globalStore
 
 setConfig({
+  alert: {},
   anchor: {},
   anchorLink: {},
   breadcrumb: {
@@ -54,7 +55,8 @@ setConfig({
     lockView: true,
     mask: true,
     showTitleOverflow: true,
-    showClose: true
+    showClose: true,
+    padding: true
   },
   form: {
     // preventSubmit: false,
@@ -75,9 +77,11 @@ setConfig({
   },
   formGather: {},
   formItem: {},
+  formView: {},
   grid: {},
   icon: {},
   image: {},
+  imagePreview: {},
   input: {
     // size: null,
     // transfer: false
@@ -126,6 +130,7 @@ setConfig({
     showTitleOverflow: true,
     animat: true,
     showClose: true,
+    padding: true,
     draggable: true,
     showConfirmButton: null,
     // storage: false,
@@ -289,7 +294,14 @@ setIcon({
   IMAGE_PREVIEW_ZOOM_IN: iconPrefix + 'search-zoom-in',
   IMAGE_PREVIEW_ROTATE_LEFT: iconPrefix + 'rotate-left',
   IMAGE_PREVIEW_ROTATE_RIGHT: iconPrefix + 'rotate-right',
-  IMAGE_PREVIEW_PRINT: iconPrefix + 'print'
+  IMAGE_PREVIEW_PRINT: iconPrefix + 'print',
+
+  // alert
+  ALERT_CLOSE: iconPrefix + 'close',
+  ALERT_INFO: iconPrefix + 'info-circle-fill',
+  ALERT_SUCCESS: iconPrefix + 'success-circle-fill',
+  ALERT_WARNING: iconPrefix + 'warning-circle-fill',
+  ALERT_ERROR: iconPrefix + 'error-circle-fill'
 })
 
 export * from '@vxe-ui/core'

package/styles/all.scss

@@ -1,5 +1,6 @@
 @import './base.scss';
 
+@import './components/alert.scss';
 @import './components/anchor.scss';
 @import './components/anchor-link.scss';
 @import './components/breadcrumb.scss';

package/styles/components/alert.scss

@@ -0,0 +1,99 @@
+$btnThemeList: (
+  (
+    name: "primary",
+    ftColor: var(--vxe-ui-font-primary-color),
+    brColor: var(--vxe-ui-font-primary-lighten-color),
+    bgColor: var(--vxe-ui-font-primary-tinge-color)
+  ),
+  (
+    name: "success",
+    ftColor: var(--vxe-ui-status-success-color),
+    brColor: var(--vxe-ui-status-success-lighten-color),
+    bgColor: var(--vxe-ui-status-success-tinge-color)
+  ),
+  (
+    name: "info",
+    ftColor: var(--vxe-ui-status-info-color),
+    brColor: var(--vxe-ui-status-info-lighten-color),
+    bgColor: var(--vxe-ui-status-info-tinge-color)
+  ),
+  (
+    name: "warning",
+    ftColor: var(--vxe-ui-status-warning-color),
+    brColor: var(--vxe-ui-status-warning-lighten-color),
+    bgColor: var(--vxe-ui-status-warning-tinge-color)
+  ),
+  (
+    name: "danger",
+    ftColor: var(--vxe-ui-status-danger-color),
+    brColor: var(--vxe-ui-status-danger-lighten-color),
+    bgColor: var(--vxe-ui-status-danger-tinge-color)
+  ),
+  (
+    name: "error",
+    ftColor: var(--vxe-ui-status-error-color),
+    brColor: var(--vxe-ui-status-error-lighten-color),
+    bgColor: var(--vxe-ui-status-error-tinge-color)
+  )
+);
+
+.vxe-alert {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  color: var(--vxe-ui-font-color);
+  padding: var(--vxe-ui-layout-padding-default);
+  margin-bottom: var(--vxe-ui-layout-padding-default);
+  font-size: var(--vxe-ui-font-size-default);
+  border-radius: var(--vxe-ui-base-border-radius);
+  @for $index from 0 to length($btnThemeList) {
+    $item: nth($btnThemeList, $index + 1);
+    &.theme--#{map-get($item, name)} {
+      color: map-get($item, ftColor);
+      border: 1px solid map-get($item, brColor);
+      background-color: map-get($item, bgColor);
+      &::after {
+        background-color: map-get($item, ftColor);
+      }
+      .vxe-alert--icon {
+        color: map-get($item, ftColor);
+      }
+      .vxe-alert--close-btn {
+        &:hover {
+          color: map-get($item, brColor);
+        }
+      }
+    }
+  }
+  &.size--medium {
+    font-size: var(--vxe-ui-font-size-medium);
+  }
+  &.size--small {
+    font-size: var(--vxe-ui-font-size-small);
+  }
+  &.size--mini {
+    font-size: var(--vxe-ui-font-size-mini);
+  }
+}
+.vxe-alert--icon {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  font-size: 1.5em;
+  padding: 0 var(--vxe-ui-layout-padding-default);
+}
+.vxe-alert--body {
+  flex-grow: 1;
+}
+.vxe-alert--title {
+  font-size: 1.1em;
+  font-weight: 700;
+  line-height: 2em;
+}
+.vxe-alert--close-btn {
+  padding: 0 0.4em;
+  line-height: 2.2em;
+  cursor: pointer;
+}

package/styles/components/drawer.scss

@@ -19,12 +19,11 @@
         background-color: rgba(0, 0, 0, 0.5);
       }
     }
-    
-  &.pos--left {
-    .vxe-drawer--box {
-      left: 0;
+    &.pos--left {
+      .vxe-drawer--box {
+        left: 0;
+      }
     }
-  }
     &.pos--right {
       .vxe-drawer--box {
         right: 0;
@@ -132,6 +131,11 @@
       height: 30%;
     }
   }
+  &.is--padding {
+    .vxe-drawer--content {
+      padding: 0.8em 1em;
+    }
+  }
 
   .vxe-drawer--box {
     display: flex;
@@ -146,7 +150,6 @@
   }
   .vxe-drawer--content {
     flex-grow: 1;
-    padding: 0.8em 1em;
     white-space: pre-line;
   }
   .vxe-drawer--header,
@@ -169,7 +172,6 @@
     font-size: 1.1em;
     font-weight: 700;
     border-bottom: 1px solid var(--vxe-ui-base-popup-border-color);
-    background-color: var(--vxe-ui-drawer-header-background-color);
     &.is--ellipsis {
       .vxe-drawer--header-title {
         overflow: hidden;

package/styles/components/image-preview.scss

@@ -23,7 +23,7 @@
 .vxe-image-preview--img-item {
   display: none;
   cursor: grabbing;
-  @include createAnimationTransition(transform, 0.3s);
+  // @include createAnimationTransition(transform, 0.3s);
   &.is--active {
     display: block;
   }
@@ -82,7 +82,7 @@
   justify-content: center;
   top: 50%;
   border-radius: 50%;
-  font-size: 2em;
+  font-size: 1.6em;
   padding: 0.5em;
   transform: translateY(-50%);
   background-color: rgba(0, 0, 0, 0.8);
@@ -117,11 +117,12 @@
   display: flex;
   flex-direction: row;
   align-items: center;
+  justify-content: center;
   font-size: 1.2em;
-  padding: 0 0.5em;
+  min-width: 2.5em;
 }
 .vxe-image-preview--operation-btn {
-  font-size: 2em;
+  font-size: 1.6em;
   padding: 0.5em;
   cursor: pointer;
   @include createAnimationTransition(all, 0.1s);
@@ -139,7 +140,9 @@
   &.vxe-modal--wrapper {
     &.type--modal {
       .vxe-modal--box {
+        border: 0;
         background-color: rgba(0, 0, 0, 0.1);
+        box-shadow: none;
       }
       .vxe-modal--content {
         padding: 0;

package/styles/components/modal.scss

@@ -212,6 +212,11 @@
       color: var(--vxe-ui-font-disabled-color);
     }
   }
+  &.is--padding {
+    .vxe-modal--content {
+      padding: 0.8em 1em;
+    }
+  }
   .vxe-modal--status-wrapper {
     flex-shrink: 0;
     display: flex;
@@ -219,7 +224,6 @@
   }
   .vxe-modal--content {
     flex-grow: 1;
-    padding: 0.8em 1em;
     white-space: pre-line;
   }
   .vxe-modal--header,