vxe-pc-ui 4.3.85 → 4.3.87

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

@@ -1,18 +1,29 @@
-import { defineComponent, ref, h, PropType, watch, computed, reactive, onMounted, onBeforeUnmount } from 'vue'
+import { defineComponent, ref, h, PropType, watch, computed, reactive, resolveComponent, onMounted, onBeforeUnmount } from 'vue'
 import XEUtils from 'xe-utils'
-import { getConfig, createEvent, useSize } from '../../ui'
+import { getConfig, createEvent, usePermission, useSize, renderEmptyElement } from '../../ui'
 
 import type { TextEllipsisReactData, VxeTextEllipsisEmits, VxeTextEllipsisPropTypes, TextEllipsisMethods, TextEllipsisPrivateMethods, ValueOf, TextEllipsisPrivateRef, VxeTextEllipsisPrivateComputed, VxeTextEllipsisConstructor, VxeTextEllipsisPrivateMethods } from '../../../types'
 
 export default defineComponent({
   name: 'VxeTextEllipsis',
   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
@@ -28,6 +39,8 @@ export default defineComponent({
 
     const { computeSize } = useSize(props)
 
+    const { computePermissionInfo } = usePermission(props)
+
     const refElem = ref<HTMLDivElement>()
     const realityElem = ref<HTMLDivElement>()
 
@@ -171,17 +184,50 @@ export default defineComponent({
 
     Object.assign($xeTextEllipsis, textEllipsisMethods, textEllipsisPrivateMethods)
 
+    const renderContent = () => {
+      const { routerLink, href, target, title } = props
+      const visibleContent = computeVisibleContent.value
+      if (routerLink) {
+        return h(resolveComponent('router-link'), {
+          class: 'vxe-text-ellipsis--link',
+          title,
+          target,
+          to: routerLink
+        }, {
+          default () {
+            return renderContent()
+          }
+        })
+      }
+      if (href) {
+        return h('a', {
+          class: 'vxe-text-ellipsis--link',
+          href,
+          target,
+          title
+        }, visibleContent)
+      }
+      return h('span', {
+        class: 'vxe-text-ellipsis--content'
+      }, visibleContent)
+    }
+
     const renderVN = () => {
-      const { loading, status, title } = props
+      const { loading, status, title, underline } = props
+      const permissionInfo = computePermissionInfo.value
       const vSize = computeSize.value
-      const visibleContent = computeVisibleContent.value
       const textLineClamp = computeTextLineClamp.value
 
+      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
         }],
         title,
@@ -189,11 +235,9 @@ export default defineComponent({
       }, [
         h('span', {
           ref: realityElem,
-          class: 'vxe-text-ellipsis-reality'
+          class: 'vxe-text-ellipsis--reality'
         }),
-        h('span', {
-          class: 'vxe-text-ellipsis-content'
-        }, visibleContent)
+        renderContent()
       ])
     }
 

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

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

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

@@ -1,5 +1,5 @@
 import { RenderFunction, SetupContext, Ref } from 'vue'
-import { DefineVxeComponentApp, DefineVxeComponentOptions, DefineVxeComponentInstance, VxeComponentBaseOptions, VxeComponentEventParams, VxeComponentSizeType, ValueOf, VxeComponentStatusType } from '@vxe-ui/core'
+import { DefineVxeComponentApp, DefineVxeComponentOptions, DefineVxeComponentInstance, VxeComponentBaseOptions, VxeComponentEventParams, VxeComponentSizeType, ValueOf, VxeComponentStatusType, VxeComponentPermissionCodeType } from '@vxe-ui/core'
 
 /* eslint-disable no-use-before-define,@typescript-eslint/ban-types */
 
@@ -23,21 +23,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
 }