releases 4.0.40

x-extends · Jun 28, 2024 · 0e42322 · 0e42322
1 parent 4a6a098
commit 0e42322
Show file tree

Hide file tree

Showing 18 changed files with 168 additions and 43 deletions.
diff --git a/examples/App.vue b/examples/App.vue
@@ -23,9 +23,11 @@
 import { ref } from 'vue'
 import { VxeUI } from '../packages'
 
+import { VxeMenuPropTypes } from '../types'
+
 const collapsed = ref(false)
 
-const navList = ref([
+const navList = ref<VxeMenuPropTypes.Options>([
   { name: 'Home', icon: 'vxe-icon-user-fill', routerLink: { path: '/' } },
   { name: 'TagTest', icon: 'vxe-icon-user-fill', routerLink: { name: 'TagTest' } },
   { name: 'TextTest', icon: 'vxe-icon-user-fill', routerLink: { name: 'TextTest' } },

diff --git a/examples/main.ts b/examples/main.ts
@@ -19,6 +19,21 @@ declare global {
   }
 }
 
+VxeUI.setConfig({
+  permissionMethod ({ code }) {
+    if (code === 'xx') {
+      return {
+        visible: true,
+        disabled: true
+      }
+    }
+    return {
+      visible: false,
+      disabled: true
+    }
+  }
+})
+
 VxeUI.setI18n('en-US', enUS)
 VxeUI.setLanguage((localStorage.getItem('VXE_LANGUAGE') as 'zh-CN' | 'en-US') || 'zh-CN')
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vxe-pc-ui",
-  "version": "4.0.38",
+  "version": "4.0.40",
   "description": "A vue based PC component library",
   "scripts": {
     "update": "npm install --legacy-peer-deps",
@@ -25,7 +25,7 @@
   "style": "lib/style.css",
   "typings": "types/index.d.ts",
   "dependencies": {
-    "@vxe-ui/core": "^1.0.9"
+    "@vxe-ui/core": "^1.0.11"
   },
   "devDependencies": {
     "@types/resize-observer-browser": "^0.1.11",

diff --git a/packages/button/src/button-group.ts b/packages/button/src/button-group.ts
@@ -1,5 +1,5 @@
-import { defineComponent, h, provide, PropType } from 'vue'
-import { getConfig, createEvent, useSize } from '@vxe-ui/core'
+import { defineComponent, h, provide, PropType, createCommentVNode } from 'vue'
+import { getConfig, createEvent, useSize, usePermission } from '@vxe-ui/core'
 import XEUtils from 'xe-utils'
 import VxeButtonComponent from '../../button/src/button'
 
@@ -15,6 +15,8 @@ export default defineComponent({
     circle: Boolean as PropType<VxeButtonGroupPropTypes.Circle>,
     className: [String, Function] as PropType<VxeButtonGroupPropTypes.ClassName>,
     disabled: Boolean as PropType<VxeButtonGroupPropTypes.Disabled>,
+    permissionCode: [String, Number] as PropType<VxeButtonGroupPropTypes.PermissionCode>,
+    permissionMethod: Function as PropType<VxeButtonGroupPropTypes.PermissionMethod>,
     size: { type: String as PropType<VxeButtonGroupPropTypes.Size>, default: () => getConfig().buttonGroup.size || getConfig().size }
   },
   emits: [
@@ -37,6 +39,8 @@ export default defineComponent({
 
     useSize(props)
 
+    const { computePermissionInfo } = usePermission(props)
+
     const buttonGroupMethods: ButtonGroupMethods = {
       dispatchEvent (type, params, evnt) {
         emit(type, createEvent(evnt, { $buttonGroup: $xeButtonGroup }, params))
@@ -56,7 +60,11 @@ export default defineComponent({
 
     const renderVN = () => {
       const { className, options } = props
+      const permissionInfo = computePermissionInfo.value
       const defaultSlot = slots.default
+      if (!permissionInfo.visible) {
+        return createCommentVNode()
+      }
       return h('div', {
         class: ['vxe-button-group', className ? (XEUtils.isFunction(className) ? className({ $buttonGroup: $xeButtonGroup }) : className) : '']
       }, defaultSlot

diff --git a/packages/button/src/button.ts b/packages/button/src/button.ts
@@ -1,6 +1,6 @@
-import { defineComponent, h, ref, Ref, computed, Teleport, VNode, onUnmounted, reactive, nextTick, PropType, onMounted, inject } from 'vue'
+import { defineComponent, h, ref, Ref, computed, Teleport, VNode, onUnmounted, reactive, nextTick, PropType, onMounted, inject, createCommentVNode } from 'vue'
 import XEUtils from 'xe-utils'
-import { getConfig, globalEvents, getIcon, createEvent, useSize } from '../../ui'
+import { getConfig, globalEvents, getIcon, createEvent, useSize, usePermission } from '../../ui'
 import { getAbsolutePos, getEventTargetNode } from '../../ui/src/dom'
 import { getFuncText, getLastZIndex, nextZIndex } from '../../ui/src/utils'
 import { warnLog } from '../../ui/src/log'
@@ -25,6 +25,11 @@ export default defineComponent({
      * 用来标识这一项
      */
     name: [String, Number] as PropType<VxeButtonPropTypes.Name>,
+    /**
+     * 权限码
+     */
+    permissionCode: [String, Number] as PropType<VxeButtonPropTypes.PermissionCode>,
+    permissionMethod: Function as PropType<VxeButtonPropTypes.PermissionMethod>,
     /**
      * 按钮内容
      */
@@ -91,6 +96,8 @@ export default defineComponent({
 
     const { computeSize } = useSize(props)
 
+    const { computePermissionInfo } = usePermission(props)
+
     const reactData = reactive<ButtonReactData>({
       inited: false,
       visiblePanel: false,
@@ -138,6 +145,12 @@ export default defineComponent({
       return transfer
     })
 
+    const computeBtnDisabled = computed(() => {
+      const { disabled } = props
+      const permissionInfo = computePermissionInfo.value
+      return disabled || permissionInfo.disabled
+    })
+
     const computeIsFormBtn = computed(() => {
       const { type } = props
       if (type) {
@@ -450,9 +463,9 @@ export default defineComponent({
     }
 
     const handleGlobalMousedownEvent = (evnt: MouseEvent) => {
-      const { disabled } = props
+      const btnDisabled = computeBtnDisabled.value
       const { visiblePanel } = reactData
-      if (!disabled) {
+      if (!btnDisabled) {
         const el = refElem.value
         const panelElem = refBtnPanel.value
         reactData.isActivated = getEventTargetNode(evnt, el).flag || getEventTargetNode(evnt, panelElem).flag
@@ -465,15 +478,20 @@ export default defineComponent({
     Object.assign($xeButton, buttonMethods)
 
     const renderVN = () => {
-      const { className, popupClassName, trigger, title, type, destroyOnClose, name, disabled, loading } = props
+      const { className, popupClassName, trigger, title, type, destroyOnClose, name, loading } = props
       const { inited, visiblePanel } = reactData
       const isFormBtn = computeIsFormBtn.value
       const btnMode = computeBtnMode.value
       const btnStatus = computeBtnStatus.value
       const btnRound = computeBtnRound.value
       const btnCircle = computeBtnCircle.value
       const transfer = compTransfer.value
+      const btnDisabled = computeBtnDisabled.value
+      const permissionInfo = computePermissionInfo.value
       const vSize = computeSize.value
+      if (!permissionInfo.visible) {
+        return createCommentVNode()
+      }
       if (slots.dropdowns) {
         const btnOns: Record<string, any> = {}
         const panelOns: Record<string, any> = {}
@@ -499,13 +517,13 @@ export default defineComponent({
               [`theme--${btnStatus}`]: btnStatus,
               'is--round': btnRound,
               'is--circle': btnCircle,
-              'is--disabled': disabled || loading,
+              'is--disabled': btnDisabled || loading,
               'is--loading': loading
             }],
             title,
             name,
             type: isFormBtn ? type : 'button',
-            disabled: disabled || loading,
+            disabled: btnDisabled || loading,
             onClick: clickTargetEvent,
             ...btnOns
           }, renderContent().concat([
@@ -546,13 +564,13 @@ export default defineComponent({
           [`theme--${btnStatus}`]: btnStatus,
           'is--round': btnRound,
           'is--circle': btnCircle,
-          'is--disabled': disabled || loading,
+          'is--disabled': btnDisabled || loading,
           'is--loading': loading
         }],
         title,
         name,
         type: isFormBtn ? type : 'button',
-        disabled: disabled || loading,
+        disabled: btnDisabled || loading,
         onClick: clickEvent,
         onMouseenter: mouseenterEvent,
         onMouseleave: mouseleaveEvent

diff --git a/packages/link/src/link.ts b/packages/link/src/link.ts
@@ -1,6 +1,6 @@
 import { defineComponent, ref, h, reactive, PropType, createCommentVNode, resolveComponent } from 'vue'
 import XEUtils from 'xe-utils'
-import { getConfig } from '../../ui'
+import { getConfig, usePermission } from '../../ui'
 import { getSlotVNs } from '../../ui/src/vn'
 
 import type { VxeLinkPropTypes, LinkReactData, LinkPrivateRef, VxeLinkPrivateComputed, VxeLinkConstructor, VxeLinkPrivateMethods } from '../../../types'
@@ -18,6 +18,11 @@ export default defineComponent({
       type: Boolean as PropType<VxeLinkPropTypes.Underline>,
       default: () => getConfig().link.underline
     },
+    /**
+     * 权限码
+     */
+    permissionCode: [String, Number] as PropType<VxeLinkPropTypes.PermissionCode>,
+    permissionMethod: Function as PropType<VxeLinkPropTypes.PermissionMethod>,
     content: [String, Number] as PropType<VxeLinkPropTypes.Content>
   },
   emits: [],
@@ -26,6 +31,8 @@ export default defineComponent({
 
     const xID = XEUtils.uniqueId()
 
+    const { computePermissionInfo } = usePermission(props)
+
     const refElem = ref<HTMLDivElement>()
 
     const reactData = reactive<LinkReactData>({
@@ -72,6 +79,10 @@ export default defineComponent({
 
     const renderVN = () => {
       const { status, target, href, title, underline, routerLink } = props
+      const permissionInfo = computePermissionInfo.value
+      if (!permissionInfo.visible) {
+        return createCommentVNode()
+      }
       if (routerLink) {
         return h(resolveComponent('router-link'), {
           class: ['vxe-link', {

diff --git a/packages/menu/src/menu.ts b/packages/menu/src/menu.ts
@@ -1,6 +1,6 @@
 import { defineComponent, ref, h, reactive, PropType, resolveComponent, createCommentVNode, nextTick, watch, VNode, onMounted } from 'vue'
 import XEUtils from 'xe-utils'
-import { getIcon, createEvent } from '../../ui'
+import { getIcon, createEvent, permission } from '../../ui'
 
 import type { VxeMenuDefines, VxeMenuPropTypes, MenuReactData, VxeMenuEmits, MenuPrivateRef, VxeMenuPrivateComputed, VxeMenuConstructor, VxeMenuPrivateMethods } from '../../../types'
 
@@ -171,6 +171,11 @@ export default defineComponent({
 
     const renderChildren = (item: VxeMenuDefines.MenuItem): VNode => {
       const { itemKey, level, hasChild, isActive, isExactActive, isExpand, routerLink, childList } = item
+      if (item.permissionCode) {
+        if (!permission.checkVisible(item.permissionCode)) {
+          return createCommentVNode()
+        }
+      }
       return h('div', {
         key: itemKey,
         class: ['vxe-menu--item-wrapper', `vxe-menu--item-level${level}`, {

diff --git a/packages/tabs/src/tab-pane.ts b/packages/tabs/src/tab-pane.ts
@@ -11,7 +11,8 @@ export default defineComponent({
     name: [String, Number] as PropType<VxeTabPanePropTypes.Name>,
     icon: String as PropType<VxeTabPanePropTypes.Icon>,
     titleWidth: [String, Number] as PropType<VxeTabPanePropTypes.TitleWidth>,
-    titleAlign: [String, Number] as PropType<VxeTabPanePropTypes.TitleAlign>
+    titleAlign: [String, Number] as PropType<VxeTabPanePropTypes.TitleAlign>,
+    permissionCode: [String, Number] as PropType<VxeTabPanePropTypes.PermissionCode>
   },
   emits: [],
   setup (props, context) {
@@ -33,6 +34,7 @@ export default defineComponent({
       icon: props.icon,
       titleWidth: props.titleWidth,
       titleAlign: props.titleAlign,
+      permissionCode: props.permissionCode,
       slots: {
         default: slots.default
       }
@@ -67,6 +69,10 @@ export default defineComponent({
       tabConfig.icon = val
     })
 
+    watch(() => props.permissionCode, (val) => {
+      tabConfig.permissionCode = val
+    })
+
     onMounted(() => {
       if ($xeTabs && refElem.value) {
         assembleAnchorTab($xeTabs, refElem.value, tabConfig)