vxe-pc-ui 3.3.89 → 3.3.91

package/packages/text-ellipsis/src/text-ellipsis.ts

@@ -1,9 +1,9 @@
 import { PropType, CreateElement, VNode } from 'vue'
 import { defineVxeComponent } from '../../ui/src/comp'
 import XEUtils from 'xe-utils'
-import { getConfig, createEvent, globalMixins } from '../../ui'
+import { getConfig, createEvent, renderEmptyElement, globalMixins } from '../../ui'
 
-import type { VxeTextEllipsisPropTypes, TextEllipsisReactData, VxeTextEllipsisEmits, VxeComponentSizeType, ValueOf } from '../../../types'
+import type { VxeTextEllipsisPropTypes, TextEllipsisReactData, VxeTextEllipsisEmits, VxeComponentSizeType, ValueOf, VxeComponentPermissionInfo } from '../../../types'
 
 export default defineVxeComponent({
   name: 'VxeTextEllipsis',
@@ -12,12 +12,23 @@ export default defineVxeComponent({
     globalMixins.permissionMixin
   ],
   props: {
+    href: String as PropType<VxeTextEllipsisPropTypes.Href>,
+    target: String as PropType<VxeTextEllipsisPropTypes.Target>,
     content: [String, Number] as PropType<VxeTextEllipsisPropTypes.Content>,
     lineClamp: [String, Number] as PropType<VxeTextEllipsisPropTypes.LineClamp>,
     status: String as PropType<VxeTextEllipsisPropTypes.Status>,
     title: [String, Number] as PropType<VxeTextEllipsisPropTypes.Title>,
     loading: Boolean as PropType<VxeTextEllipsisPropTypes.Loading>,
     offsetLength: [String, Number] as PropType<VxeTextEllipsisPropTypes.OffsetLength>,
+    routerLink: Object as PropType<VxeTextEllipsisPropTypes.RouterLink>,
+    underline: {
+      type: Boolean as PropType<VxeTextEllipsisPropTypes.Underline>,
+      default: () => getConfig().textEllipsis.underline
+    },
+    /**
+     * 权限码
+     */
+    permissionCode: [String, Number] as PropType<VxeTextEllipsisPropTypes.PermissionCode>,
     size: {
       type: String as PropType<VxeTextEllipsisPropTypes.Size>,
       default: () => getConfig().textEllipsis.size || getConfig().size
@@ -35,6 +46,7 @@ export default defineVxeComponent({
   },
   computed: {
     ...({} as {
+      computePermissionInfo(): VxeComponentPermissionInfo
       computeSize(): VxeComponentSizeType
     }),
     computeTextLineClamp () {
@@ -170,20 +182,55 @@ export default defineVxeComponent({
     //
     // Render
     //
+    renderContent (h: CreateElement) {
+      const $xeTextEllipsis = this
+      const props = $xeTextEllipsis
+
+      const { routerLink, href, target, title } = props
+      const visibleContent = $xeTextEllipsis.computeVisibleContent
+      if (routerLink) {
+        return h('router-link', {
+          class: 'vxe-text-ellipsis--link',
+          props: {
+            title,
+            target,
+            custom: true
+          }
+        }, visibleContent)
+      }
+      if (href) {
+        return h('a', {
+          class: 'vxe-text-ellipsis--link',
+          attrs: {
+            href,
+            target,
+            title
+          }
+        }, visibleContent)
+      }
+      return h('span', {
+        class: 'vxe-text-ellipsis--content'
+      }, visibleContent)
+    },
     renderVN (h: CreateElement): VNode {
       const $xeTextEllipsis = this
       const props = $xeTextEllipsis
 
-      const { loading, status, title } = props
+      const { loading, status, title, underline } = props
+      const permissionInfo = $xeTextEllipsis.computePermissionInfo
       const vSize = $xeTextEllipsis.computeSize
-      const visibleContent = $xeTextEllipsis.computeVisibleContent
       const textLineClamp = $xeTextEllipsis.computeTextLineClamp
 
+      if (!permissionInfo.visible) {
+        return renderEmptyElement($xeTextEllipsis)
+      }
+
       return h('div', {
         ref: 'refElem',
         class: ['vxe-text-ellipsis', textLineClamp > 1 ? 'is--multi' : 'is--single', {
           [`size--${vSize}`]: vSize,
           [`theme--${status}`]: status,
+          'is--underline': underline,
           'is--loading': loading
         }],
         attrs: {
@@ -195,11 +242,9 @@ export default defineVxeComponent({
       }, [
         h('span', {
           ref: 'realityElem',
-          class: 'vxe-text-ellipsis-reality'
+          class: 'vxe-text-ellipsis--reality'
         }),
-        h('span', {
-          class: 'vxe-text-ellipsis-content'
-        }, visibleContent)
+        $xeTextEllipsis.renderContent(h)
       ])
     }
   },

package/packages/ui/index.ts

@@ -300,7 +300,9 @@ setConfig({
   },
   tabs: {},
   tag: {},
-  textEllipsis: {},
+  textEllipsis: {
+    underline: true
+  },
   text: {},
   textarea: {
     resize: 'none'

package/styles/components/link.scss

@@ -54,8 +54,8 @@ $btnThemeList: (
 
 .vxe-link {
   text-decoration: none;
+  color: inherit;
   &:not(.is--disabled) {
-    color: var(--vxe-ui-font-color);
     cursor: pointer;
     &:hover {
       color: var(--vxe-ui-font-primary-color);

package/styles/components/text-ellipsis.scss

@@ -56,11 +56,25 @@ $btnThemeList: (
   display: block;
   overflow: hidden;
   white-space: normal;
-  color: var(--vxe-ui-font-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);
+      & > .vxe-text-ellipsis--link {
+        &:focus {
+          color: map.get($item, btnDarkenColor);
+        }
+        &:hover {
+          color: map.get($item, btnLightenColor);
+        }
+      }
+    }
+  }
+  &.is--underline {
+    &:hover {
+      .vxe-text-ellipsis--link {
+        text-decoration: underline;
+      }
     }
   }
   &.is--single {
@@ -85,7 +99,7 @@ $btnThemeList: (
       }
     }
   }
-  .vxe-text-ellipsis-reality {
+  .vxe-text-ellipsis--reality {
     display: none;
     z-index: -1;
     pointer-events: none;
@@ -95,9 +109,14 @@ $btnThemeList: (
   padding: 0 0.1em;
   user-select: none;
 }
-.vxe-text-ellipsis--content {
+.vxe-text-ellipsis--content,
+.vxe-text-ellipsis--link {
   padding: 0 0.1em;
 }
+.vxe-text-ellipsis--link {
+  text-decoration: none;
+  color: inherit;
+}
 
 .vxe-text-ellipsis {
   &.size--medium {

package/types/components/table.d.ts

@@ -980,8 +980,7 @@ export namespace VxeTablePropTypes {
     height?: number
     padding?: boolean
     /**
-     * @deprecated
-     * @private
+     * 展开内容的显示模式
      */
     mode?: 'inside' | 'fixed' | '' | null
     loadMethod?(params: {

package/types/components/text-ellipsis.d.ts

@@ -1,4 +1,4 @@
-import { DefineVxeComponentApp, DefineVxeComponentOptions, DefineVxeComponentInstance, VxeComponentEventParams, VxeComponentSizeType, ValueOf, VxeComponentStatusType } from '@vxe-ui/core'
+import { DefineVxeComponentApp, DefineVxeComponentOptions, DefineVxeComponentInstance, VxeComponentEventParams, VxeComponentSizeType, ValueOf, VxeComponentStatusType, VxeComponentPermissionCodeType } from '@vxe-ui/core'
 
 /* eslint-disable @typescript-eslint/no-empty-interface,no-use-before-define,@typescript-eslint/ban-types */
 
@@ -16,21 +16,37 @@ export interface TextEllipsisPrivateRef {
 export interface VxeTextEllipsisPrivateRef extends TextEllipsisPrivateRef { }
 
 export namespace VxeTextEllipsisPropTypes {
+  export type Href = null | string
+  export type Target = null | '' | '_blank' | '_self' | '_parent' | '_top'
   export type Status = VxeComponentStatusType
   export type Title = string | number
   export type LineClamp = string | number
   export type Loading = boolean
   export type OffsetLength = string | number
+  export type RouterLink = {
+    path?: string
+    name?: string | number | null
+    query?: any
+    params?: any
+    target?: null | '' | '_blank' | '_self' | '_parent' | '_top'
+  }
+  export type Underline = boolean
+  export type PermissionCode = VxeComponentPermissionCodeType
   export type Content = string | number
   export type Size = VxeComponentSizeType
 }
 
 export type VxeTextEllipsisProps = {
+  href?: VxeTextEllipsisPropTypes.Href
+  target?: VxeTextEllipsisPropTypes.Target
   status?: VxeTextEllipsisPropTypes.Status
   title?: VxeTextEllipsisPropTypes.Title
   lineClamp?: VxeTextEllipsisPropTypes.LineClamp
   loading?: VxeTextEllipsisPropTypes.Loading
   offsetLength?: VxeTextEllipsisPropTypes.OffsetLength
+  underline?: VxeTextEllipsisPropTypes.Underline
+  routerLink?: VxeTextEllipsisPropTypes.RouterLink
+  permissionCode?: VxeTextEllipsisPropTypes.PermissionCode
   content?: VxeTextEllipsisPropTypes.Content
   size?: VxeTextEllipsisPropTypes.Size
 }