vxe-pc-ui 4.9.16 → 4.9.18

package/packages/text/src/text.ts

@@ -1,4 +1,4 @@
-import { ref, h, reactive, PropType, VNode } from 'vue'
+import { ref, h, reactive, PropType, VNode, computed } from 'vue'
 import { defineVxeComponent } from '../../ui/src/comp'
 import XEUtils from 'xe-utils'
 import { VxeUI, getConfig, getIcon, getI18n, useSize, createEvent } from '../../ui'
@@ -19,14 +19,7 @@ export default defineVxeComponent({
       type: Boolean as PropType<VxeTextPropTypes.ClickToCopy>,
       default: () => getConfig().text.clickToCopy
     },
-    copyIcon: {
-      type: String as PropType<VxeTextPropTypes.CopyIcon>,
-      default: () => getConfig().text.copyIcon
-    },
-    copyLayout: {
-      type: String as PropType<VxeTextPropTypes.CopyLayout>,
-      default: () => getConfig().text.copyLayout
-    },
+    copyConfig: Object as PropType<VxeTextPropTypes.CopyConfig>,
     size: {
       type: String as PropType<VxeTextPropTypes.Size>,
       default: () => getConfig().text.size || getConfig().size
@@ -34,8 +27,11 @@ export default defineVxeComponent({
   },
   emits: [
     'click',
+    'dblclick',
     'prefix-click',
-    'suffix-click'
+    'suffix-click',
+    'copy-success',
+    'copy-error'
   ] as VxeTextEmits,
   setup (props, context) {
     const { emit, slots } = context
@@ -50,6 +46,10 @@ export default defineVxeComponent({
     const reactData = reactive<TextReactData>({
     })
 
+    const computeCopyOpts = computed(() => {
+      return Object.assign({}, getConfig().text.copyConfig, props.copyConfig)
+    })
+
     const refMaps: TextPrivateRef = {
       refElem
     }
@@ -57,31 +57,49 @@ export default defineVxeComponent({
     const computeMaps: VxeTextPrivateComputed = {
     }
 
-    const clickIconEvent = () => {
-      const { content, clickToCopy } = props
-      if (clickToCopy) {
-        const contentEl = refContentElem.value
-        const copyVal = (contentEl ? contentEl.textContent : '') || content
-        if (copyVal) {
-          if (VxeUI.clipboard.copy(copyVal)) {
-            if (VxeUI.modal) {
-              VxeUI.modal.message({
-                content: getI18n('vxe.text.copySuccess'),
-                status: 'success'
-              })
-            }
-          } else {
-            if (VxeUI.modal) {
-              VxeUI.modal.message({
-                content: getI18n('vxe.text.copyError'),
-                status: 'error'
-              })
-            }
+    const handleCopy = (evnt: MouseEvent) => {
+      const { content } = props
+      const copyOpts = computeCopyOpts.value
+      const { showMessage } = copyOpts
+      const contentEl = refContentElem.value
+      const copyVal = (contentEl ? contentEl.textContent : '') || content
+      if (copyVal) {
+        if (VxeUI.clipboard.copy(copyVal)) {
+          if (showMessage && VxeUI.modal) {
+            VxeUI.modal.message({
+              content: getI18n('vxe.text.copySuccess'),
+              status: 'success'
+            })
+          }
+          dispatchEvent('copy-success', {}, evnt)
+        } else {
+          if (showMessage && VxeUI.modal) {
+            VxeUI.modal.message({
+              content: getI18n('vxe.text.copyError'),
+              status: 'error'
+            })
           }
+          dispatchEvent('copy-error', {}, evnt)
         }
       }
     }
 
+    const clickIconEvent = (evnt: MouseEvent) => {
+      const { clickToCopy } = props
+      const copyOpts = computeCopyOpts.value
+      if (clickToCopy && copyOpts.trigger !== 'dblclick') {
+        handleCopy(evnt)
+      }
+    }
+
+    const dblclickIconEvent = (evnt: MouseEvent) => {
+      const { clickToCopy } = props
+      const copyOpts = computeCopyOpts.value
+      if (clickToCopy && copyOpts.trigger === 'dblclick') {
+        handleCopy(evnt)
+      }
+    }
+
     const $xeText = {
       xID,
       props,
@@ -127,24 +145,29 @@ export default defineVxeComponent({
     Object.assign($xeText, textMethods, textPrivateMethods)
 
     const renderCopyIcon = () => {
-      const { copyIcon } = props
+      const copyOpts = computeCopyOpts.value
+      const { icon, status } = copyOpts
       return h('span', {
         key: 'ci',
-        class: 'vxe-text--copy-icon',
-        onClick: clickIconEvent
+        class: ['vxe-text--copy-icon', {
+          [`theme--${status}`]: status
+        }],
+        onClick: clickIconEvent,
+        onDblclick: dblclickIconEvent
       }, [
         h('i', {
-          class: copyIcon || getIcon().TEXT_COPY
+          class: icon || getIcon().TEXT_COPY
         })
       ])
     }
 
     const renderContent = () => {
-      const { loading, icon, prefixIcon, suffixIcon, clickToCopy, content, copyLayout } = props
+      const { loading, icon, prefixIcon, suffixIcon, clickToCopy, content } = props
+      const copyOpts = computeCopyOpts.value
       const defaultSlot = slots.default
       const prefixIconSlot = slots.prefixIcon || slots['prefix-icon'] || slots.icon
       const suffixIconSlot = slots.suffixIcon || slots['suffix-icon']
-      const copyToRight = copyLayout === 'right'
+      const copyToRight = copyOpts.layout === 'right'
       const contVNs: VNode[] = []
       if (loading) {
         contVNs.push(

package/packages/ui/index.ts

@@ -348,7 +348,11 @@ setConfig({
   textEllipsis: {
     underline: true
   },
-  text: {},
+  text: {
+    copyConfig: {
+      showMessage: true
+    }
+  },
   textarea: {
     resize: 'none'
   },

package/styles/components/text.scss

@@ -61,21 +61,36 @@ $btnThemeList: (
       color: map.get($item, textColor);
     }
   }
-  &.is--copy {
-    & > .vxe-text--copy-icon {
-      cursor: pointer;
+}
+
+.vxe-text--copy-icon {
+  cursor: pointer;
+  &:focus {
+    color: var(--vxe-ui-font-darken-color);
+  }
+  &:hover {
+    color: var(--vxe-ui-font-primary-lighten-color);
+  }
+  &:active {
+    color: var(--vxe-ui-font-primary-darken-color);
+  }
+  @for $index from 0 to list.length($btnThemeList) {
+    $item: list.nth($btnThemeList, $index + 1);
+    &.theme--#{map.get($item, name)} {
+      color: map.get($item, textColor);
       &:focus {
-        color: var(--vxe-ui-font-darken-color);
+        color: map.get($item, btnDarkenColor);
       }
       &:hover {
-        color: var(--vxe-ui-font-primary-lighten-color);
+        color: map.get($item, btnLightenColor);
       }
       &:active {
-        color: var(--vxe-ui-font-primary-darken-color);
+        color: map.get($item, btnDarkenColor);
       }
     }
   }
 }
+
 .vxe-text--loading,
 .vxe-text--prefix-icon,
 .vxe-text--suffix-icon,

package/types/components/countdown.d.ts

@@ -94,10 +94,18 @@ export namespace VxeCountdownSlotTypes {
     diffConf: DateDiffResult
     currentValue: number
   }
+
+  export interface PrefixSlotParams {
+    diffConf: DateDiffResult
+    currentValue: number
+  }
+  export interface SuffixSlotParams extends PrefixSlotParams {}
 }
 
 export interface VxeCountdownSlots {
   default?: (params: VxeCountdownSlotTypes.DefaultSlotParams) => any
+  prefix?: (params: VxeCountdownSlotTypes.PrefixSlotParams) => any
+  suffix?: (params: VxeCountdownSlotTypes.SuffixSlotParams) => any
 }
 
 export const Countdown: typeof VxeCountdown

package/types/components/text.d.ts

@@ -30,10 +30,15 @@ export namespace VxeTextPropTypes {
   export type SuffixIcon = string
   export type Loading = boolean
   export type Content = string | number
-  export type CopyIcon = string
   export type ClickToCopy = boolean
-  export type CopyLayout = 'left' | 'right' | '' | null
   export type Size = VxeComponentSizeType
+  export interface CopyConfig {
+    layout?: 'left' | 'right' | '' | null
+    showMessage?: boolean
+    trigger?: 'click' | 'dblclick'
+    icon?: string
+    status?: VxeComponentStatusType
+  }
 }
 
 export type VxeTextProps = {
@@ -53,9 +58,8 @@ export type VxeTextProps = {
   suffixIcon?: VxeTextPropTypes.SuffixIcon
   loading?: VxeTextPropTypes.Loading
   content?: VxeTextPropTypes.Content
-  copyIcon?: VxeTextPropTypes.CopyIcon
   clickToCopy?: VxeTextPropTypes.ClickToCopy
-  copyLayout?: VxeTextPropTypes.CopyLayout
+  copyConfig?: VxeTextPropTypes.CopyConfig
   size?: VxeTextPropTypes.Size
 }
 
@@ -76,8 +80,11 @@ export interface VxeTextPrivateMethods extends TextPrivateMethods { }
 
 export type VxeTextEmits = [
   'click',
+  'dblclick',
   'prefix-click',
-  'suffix-click'
+  'suffix-click',
+  'copy-success',
+  'copy-error'
 ]
 
 export namespace VxeTextDefines {