117 lines
2.8 KiB
Vue
117 lines
2.8 KiB
Vue
<template>
|
|
<view
|
|
@click="handleClick"
|
|
:class="`wd-sidebar-item ${active ? 'wd-sidebar-item--active' : ''} ${prefix ? 'wd-sidebar-item--prefix' : ''} ${
|
|
suffix ? 'wd-sidebar-item--suffix' : ''
|
|
} ${disabled ? 'wd-sidebar-item--disabled' : ''} ${customClass}`"
|
|
:style="customStyle"
|
|
>
|
|
<slot name="icon"></slot>
|
|
<template v-if="!$slots.icon && icon">
|
|
<wd-icon custom-class="wd-sidebar-item__icon" :name="icon"></wd-icon>
|
|
</template>
|
|
<wd-badge v-bind="customBadgeProps" custom-class="wd-sidebar-item__badge">
|
|
{{ label }}
|
|
</wd-badge>
|
|
</view>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
export default {
|
|
name: 'wd-sidebar-item',
|
|
options: {
|
|
addGlobalClass: true,
|
|
virtualHost: true,
|
|
styleIsolation: 'shared'
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<script lang="ts" setup>
|
|
import wdIcon from '../wd-icon/wd-icon.vue'
|
|
import wdBadge from '../wd-badge/wd-badge.vue'
|
|
import { computed } from 'vue'
|
|
import { useParent } from '../composables/useParent'
|
|
import { SIDEBAR_KEY } from '../wd-sidebar/types'
|
|
import { sidebarItemProps } from './types'
|
|
import type { BadgeProps } from '../wd-badge/types'
|
|
import { deepAssign, isDef, isUndefined, omitBy } from '../common/util'
|
|
|
|
const props = defineProps(sidebarItemProps)
|
|
|
|
const { parent: sidebar } = useParent(SIDEBAR_KEY)
|
|
|
|
const customBadgeProps = computed(() => {
|
|
const badgeProps: Partial<BadgeProps> = deepAssign(
|
|
isDef(props.badgeProps) ? omitBy(props.badgeProps, isUndefined) : {},
|
|
omitBy(
|
|
{
|
|
max: props.max,
|
|
isDot: props.isDot,
|
|
modelValue: props.badge
|
|
},
|
|
isUndefined
|
|
)
|
|
)
|
|
if (!isDef(badgeProps.max)) {
|
|
badgeProps.max = 99
|
|
}
|
|
return badgeProps
|
|
})
|
|
|
|
const active = computed(() => {
|
|
let active: boolean = false
|
|
if (sidebar && sidebar.props.modelValue === props.value) {
|
|
active = true
|
|
}
|
|
return active
|
|
})
|
|
|
|
const prefix = computed(() => {
|
|
let prefix: boolean = false
|
|
if (sidebar) {
|
|
let activeIndex: number = sidebar.children.findIndex((c: any) => {
|
|
return c.value === sidebar.props.modelValue
|
|
})
|
|
|
|
let currentIndex: number = sidebar.children.findIndex((c: any) => {
|
|
return c.value === props.value
|
|
})
|
|
|
|
if (currentIndex === activeIndex - 1) {
|
|
prefix = true
|
|
}
|
|
}
|
|
return prefix
|
|
})
|
|
|
|
const suffix = computed(() => {
|
|
let suffix: boolean = false
|
|
if (sidebar) {
|
|
let activeIndex: number = sidebar.children.findIndex((c: any) => {
|
|
return c.value === sidebar.props.modelValue
|
|
})
|
|
|
|
let currentIndex: number = sidebar.children.findIndex((c: any) => {
|
|
return c.value === props.value
|
|
})
|
|
|
|
if (currentIndex === activeIndex + 1) {
|
|
suffix = true
|
|
}
|
|
}
|
|
return suffix
|
|
})
|
|
|
|
function handleClick() {
|
|
if (props.disabled) {
|
|
return
|
|
}
|
|
sidebar && sidebar.setChange(props.value, props.label)
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@import './index.scss';
|
|
</style>
|