Skip to content

Commit

Permalink
releases 4.1.23
Browse files Browse the repository at this point in the history
  • Loading branch information
@xuliangzhan
xuliangzhan committed Sep 11, 2024
1 parent f59cb45 commit cf4fe99
Show file tree
Hide file tree
Showing 9 changed files with 168 additions and 56 deletions.
4 changes: 2 additions & 2 deletions examples/views/tabs/TabsTest.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@
</p>

<p>
<vxe-tabs modelValue="3" type="border-card" padding>
<vxe-tabs modelValue="3" type="border-card" padding :refresh-config="{}">
<vxe-tab-pane title="xxx1" name="1">xxxx</vxe-tab-pane>
<vxe-tab-pane title="xxx2" name="2" icon="vxe-icon-pc">cccc</vxe-tab-pane>
<vxe-tab-pane title="xxx3" name="3" icon="vxe-icon-pc">vvvv</vxe-tab-pane>
Expand All @@ -43,7 +43,7 @@
</p>

<p>
<vxe-tabs v-model="val4" type="round-card" :height="300" show-close padding @tab-load="tabToadEvent">
<vxe-tabs v-model="val4" type="round-card" :height="300" padding :refresh-config="{}" @tab-load="tabToadEvent">
<vxe-tab-pane title="xxxf地方799991" name="1">xxxx</vxe-tab-pane>
<vxe-tab-pane title="xxxf地方79999f地方7999956756765657557562" name="2" icon="vxe-icon-pc">cccc</vxe-tab-pane>
<vxe-tab-pane title="xxx45f地方7999965475673" name="3" icon="vxe-icon-pc">vvvv</vxe-tab-pane>
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "vxe-pc-ui",
"version": "4.1.22",
"version": "4.1.23",
"description": "A vue based PC component library",
"scripts": {
"update": "npm install --legacy-peer-deps",
Expand Down
98 changes: 82 additions & 16 deletions packages/tabs/src/tabs.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,8 @@ import { defineComponent, ref, h, reactive, inject, PropType, provide, computed,
import { createEvent, getConfig, getIcon, globalEvents, permission } from '../../ui'
import { getSlotVNs } from '../../ui/src/vn'
import { toCssUnit } from '../..//ui/src/dom'
import { warnLog } from '../../ui/src/log'
import { isEnableConf } from '../..//ui/src/utils'
import { warnLog, errLog } from '../../ui/src/log'
import XEUtils from 'xe-utils'

import type { VxeTabsPropTypes, VxeTabPaneProps, VxeTabsEmits, TabsInternalData, TabsReactData, TabsPrivateRef, VxeTabsPrivateComputed, VxeTabsConstructor, VxeTabsPrivateMethods, VxeTabPaneDefines, ValueOf, TabsMethods, TabsPrivateMethods } from '../../../types'
Expand All @@ -24,6 +25,9 @@ export default defineComponent({
},
trigger: String as PropType<VxeTabsPropTypes.Trigger>,
beforeChangeMethod: Function as PropType<VxeTabsPropTypes.BeforeChangeMethod>,
closeConfig: Object as PropType<VxeTabsPropTypes.CloseConfig>,
refreshConfig: Object as PropType<VxeTabsPropTypes.RefreshConfig>,
// 已废弃
beforeCloseMethod: Function as PropType<VxeTabsPropTypes.BeforeCloseMethod>
},
emits: [
Expand Down Expand Up @@ -52,7 +56,8 @@ export default defineComponent({
lintLeft: 0,
lintWidth: 0,
isTabOver: false,
resizeFlag: 1
resizeFlag: 1,
cacheTabMaps: {}
})

const internalData: TabsInternalData = {
Expand All @@ -63,6 +68,14 @@ export default defineComponent({
refElem
}

const computeCloseOpts = computed(() => {
return Object.assign({}, getConfig().tabs.closeConfig, props.closeConfig)
})

const computeRefreshOpts = computed(() => {
return Object.assign({}, getConfig().tabs.refreshConfig, props.refreshConfig)
})

const computeTabOptions = computed(() => {
const { options } = props
return (options || []).filter((item) => handleFilterTab(item))
Expand Down Expand Up @@ -161,15 +174,24 @@ export default defineComponent({

const initDefaultName = (list?: VxeTabsPropTypes.Options | VxeTabPaneDefines.TabConfig[]) => {
let activeName: VxeTabsPropTypes.ModelValue = null
const nameMaps: Record<string, {
loading: boolean
}> = {}
if (list && list.length) {
let validVal = false
activeName = props.modelValue
list.forEach((item) => {
if (activeName === item.name) {
validVal = true
}
if (item && item.preload) {
addInitName(item.name, null)
const { name, preload } = item || {}
if (name) {
nameMaps[name] = {
loading: false
}
if (activeName === name) {
validVal = true
}
if (preload) {
addInitName(name, null)
}
}
})
if (!validVal) {
Expand All @@ -179,6 +201,7 @@ export default defineComponent({
}
}
reactData.activeName = activeName
reactData.cacheTabMaps = nameMaps
}

const clickEvent = (evnt: KeyboardEvent, item: VxeTabPaneProps | VxeTabPaneDefines.TabConfig) => {
Expand All @@ -196,26 +219,48 @@ export default defineComponent({
dispatchEvent('tab-click', { name }, evnt)
addInitName(name, evnt)
if (name !== activeName) {
if (!beforeMethod || beforeMethod({ $tabs: $xeTabs, name, oldName: activeName, newName: name })) {
dispatchEvent('change', { value, name, oldName: activeName, newName: name }, evnt)
if (!beforeMethod || beforeMethod({ $tabs: $xeTabs, name, oldName: activeName, newName: name, option: item })) {
dispatchEvent('change', { value, name, oldName: activeName, newName: name, option: item }, evnt)
} else {
dispatchEvent('tab-change-fail', { value, name, oldName: activeName, newName: name }, evnt)
dispatchEvent('tab-change-fail', { value, name, oldName: activeName, newName: name, option: item }, evnt)
}
}
}

const handleRefreshTabEvent = (evnt: KeyboardEvent, item: VxeTabPaneDefines.TabConfig | VxeTabPaneProps) => {
evnt.stopPropagation()
const { activeName, cacheTabMaps } = reactData
const { name } = item
const refreshOpts = computeRefreshOpts.value
const { queryMethod } = refreshOpts
const cacheItem = name ? cacheTabMaps[name] : null
if (cacheItem) {
if (queryMethod) {
cacheItem.loading = true
Promise.resolve(
queryMethod({ $tabs: $xeTabs, value: activeName, name, option: item })
).finally(() => {
cacheItem.loading = false
})
} else {
errLog('vxe.error.notFunc', ['refresh-config.queryMethod'])
}
}
}

const handleCloseTabEvent = (evnt: KeyboardEvent, item: VxeTabPaneDefines.TabConfig | VxeTabPaneProps, index: number, list: VxeTabsPropTypes.Options | VxeTabPaneDefines.TabConfig[]) => {
evnt.stopPropagation()
const { activeName } = reactData
const beforeMethod = props.beforeCloseMethod || getConfig().tabs.beforeCloseMethod
const closeOpts = computeCloseOpts.value
const beforeMethod = closeOpts.beforeMethod || props.beforeCloseMethod || getConfig().tabs.beforeCloseMethod
const { name } = item
const value = activeName
let nextName = value
if (activeName === name) {
const nextItem = index < list.length - 1 ? list[index + 1] : list[index - 1]
nextName = nextItem ? nextItem.name : null
}
if (!beforeMethod || beforeMethod({ $tabs: $xeTabs, value, name, nextName })) {
if (!beforeMethod || beforeMethod({ $tabs: $xeTabs, value, name, nextName, option: item })) {
dispatchEvent('tab-close', { value, name, nextName }, evnt)
} else {
dispatchEvent('tab-close-fail', { value, name, nextName }, evnt)
Expand Down Expand Up @@ -360,9 +405,14 @@ export default defineComponent({
Object.assign($xeTabs, tabsMethods, tabsPrivateMethods)

const renderTabHeader = (tabList: VxeTabsPropTypes.Options | VxeTabPaneDefines.TabConfig[]) => {
const { type, titleWidth: allTitleWidth, titleAlign: allTitleAlign, showClose } = props
const { activeName, lintLeft, lintWidth, isTabOver } = reactData
const { type, titleWidth: allTitleWidth, titleAlign: allTitleAlign, showClose, closeConfig, refreshConfig } = props
const { activeName, lintLeft, lintWidth, isTabOver, cacheTabMaps } = reactData
const extraSlot = slots.extra
const closeOpts = computeCloseOpts.value
const closeVisibleMethod = closeOpts.visibleMethod
const refreshOpts = computeRefreshOpts.value
const refreshVisibleMethod = refreshOpts.visibleMethod

return h('div', {
class: 'vxe-tabs-header'
}, [
Expand All @@ -387,10 +437,14 @@ export default defineComponent({
const tabSlot = slots ? slots.tab : null
const itemWidth = titleWidth || allTitleWidth
const itemAlign = titleAlign || allTitleAlign
const params = { $tabs: $xeTabs, value: activeName, name, option: item }
const isActive = activeName === name
const cacheItem = name ? cacheTabMaps[name] : null
const isLoading = cacheItem ? cacheItem.loading : false
return h('div', {
key: `${name}`,
class: ['vxe-tabs-header--item', itemAlign ? `align--${itemAlign}` : '', {
'is--active': activeName === name
'is--active': isActive
}],
style: itemWidth
? {
Expand Down Expand Up @@ -420,7 +474,19 @@ export default defineComponent({
class: 'vxe-tabs-header--item-name'
}, tabSlot ? callSlot(tabSlot, { name, title }) : `${title}`)
]),
showClose
(isEnableConf(refreshConfig) || refreshOpts.enabled) && (refreshVisibleMethod ? refreshVisibleMethod(params) : isActive)
? h('div', {
class: 'vxe-tabs-header--refresh-btn',
onClick (evnt: KeyboardEvent) {
handleRefreshTabEvent(evnt, item)
}
}, [
h('i', {
class: isLoading ? getIcon().TABS_TAB_REFRESH_LOADING : getIcon().TABS_TAB_REFRESH
})
])
: createCommentVNode(),
(showClose || (isEnableConf(closeConfig) || closeOpts.enabled)) && (!closeVisibleMethod || closeVisibleMethod(params))
? h('div', {
class: 'vxe-tabs-header--close-btn',
onClick (evnt: KeyboardEvent) {
Expand Down
2 changes: 2 additions & 0 deletions packages/ui/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -431,6 +431,8 @@ setIcon({
TABS_TAB_BUTTON_LEFT: iconPrefix + 'arrow-left',
TABS_TAB_BUTTON_RIGHT: iconPrefix + 'arrow-right',
TABS_TAB_CLOSE: iconPrefix + 'close',
TABS_TAB_REFRESH: iconPrefix + 'refresh',
TABS_TAB_REFRESH_LOADING: iconPrefix + 'refresh roll',

// text
TEXT_COPY: iconPrefix + 'copy',
Expand Down
18 changes: 0 additions & 18 deletions styles/components/drawer.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,24 +44,6 @@
opacity: 1;
}
}
&.is--loading {
.vxe-drawer--header,
.vxe-drawer--footer {
position: relative;
border-bottom-color: var(--vxe-ui-loading-background-color);
&:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
user-select: none;
background-color: var(--vxe-ui-loading-background-color);
}
}
}
&:not(.lock--view) {
pointer-events: none;
}
Expand Down
18 changes: 0 additions & 18 deletions styles/components/modal.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -238,24 +238,6 @@ html[data-vxe-lock-scroll] {
visibility: visible;
}
}
&.is--loading {
.vxe-modal--header,
.vxe-modal--footer {
position: relative;
border-bottom-color: var(--vxe-ui-loading-background-color);
&:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
user-select: none;
background-color: var(--vxe-ui-loading-background-color);
}
}
}
&:not(.lock--view) {
pointer-events: none;
}
Expand Down
6 changes: 5 additions & 1 deletion styles/components/tabs.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -106,7 +106,9 @@
flex-shrink: 0;
padding: 0 0.5em;
&.is--active {
color: var(--vxe-ui-font-primary-color);
.vxe-tabs-header--item-content {
color: var(--vxe-ui-font-primary-color);
}
}
&.align--left {
text-align: left;
Expand Down Expand Up @@ -135,11 +137,13 @@
.vxe-tabs-header--item-name {
padding: 0 0.6em;
}
.vxe-tabs-header--refresh-btn,
.vxe-tabs-header--close-btn {
font-size: 0.8em;
border-radius: 50%;
width: 1.5em;
height: 1.5em;
margin: 0 0.2em;
line-height: 1.5em;
text-align: center;
&:hover {
Expand Down
Loading

0 comments on commit cf4fe99

Please sign in to comment.