mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2025-01-06 12:17:13 +08:00
chore: delete some files to rename
This commit is contained in:
07akioni
parent
5c90a077d6
commit
63171a1469
@ -1,101 +0,0 @@
|
||||
<template>
|
||||
<div
|
||||
class="n-menu"
|
||||
:class="{
|
||||
[`n-${synthesizedTheme}-theme`]: synthesizedTheme,
|
||||
[`n-menu--${mode}`]: mode,
|
||||
'n-menu--collapsed': collapsed
|
||||
}"
|
||||
>
|
||||
<ul class="n-menu-list">
|
||||
<slot />
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import withapp from '../../../mixins/withapp'
|
||||
import themeable from '../../../mixins/themeable'
|
||||
|
||||
export default {
|
||||
name: 'Menu',
|
||||
provide () {
|
||||
return {
|
||||
NMenu: this
|
||||
}
|
||||
},
|
||||
mixins: [withapp, themeable],
|
||||
props: {
|
||||
collapsed: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
collapsedWidth: {
|
||||
type: Number,
|
||||
default: null
|
||||
},
|
||||
collapsedIconSize: {
|
||||
type: Number,
|
||||
default: undefined
|
||||
},
|
||||
value: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
rootIndent: {
|
||||
type: Number,
|
||||
default: null
|
||||
},
|
||||
indent: {
|
||||
type: Number,
|
||||
default: 32
|
||||
},
|
||||
mode: {
|
||||
type: String,
|
||||
default: 'vertical'
|
||||
},
|
||||
iconSize: {
|
||||
type: Number,
|
||||
default: 20
|
||||
},
|
||||
defaultOpenNames: {
|
||||
type: Array,
|
||||
default: undefined
|
||||
},
|
||||
openNames: {
|
||||
type: Array,
|
||||
default: undefined
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
internalOpenNames: this.openNames || this.defaultOpenNames || []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
synthesizedOpenNames () {
|
||||
if (this.openNames !== undefined) return this.openNames || []
|
||||
else return this.internalOpenNames
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleSelect (value) {
|
||||
this.$emit('select', value)
|
||||
this.$emit('input', value)
|
||||
},
|
||||
handleOpenNamesChange (name) {
|
||||
const currentOpenNames = Array.from(this.synthesizedOpenNames)
|
||||
const index = currentOpenNames.findIndex(openName => openName === name)
|
||||
if (~index) {
|
||||
currentOpenNames.splice(index, 1)
|
||||
} else {
|
||||
currentOpenNames.push(name)
|
||||
}
|
||||
if (this.openNames === undefined) {
|
||||
this.internalOpenNames = currentOpenNames
|
||||
}
|
||||
this.$emit('openNamesChange', currentOpenNames)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -1,193 +0,0 @@
|
||||
<template>
|
||||
<li v-if="!shouldBeRenderedAsDropdownItem && isFirstLevel" class="n-menu-item-wrapper">
|
||||
<n-tooltip trigger="hover" :disabled="!NMenu.collapsed" placement="right" :delay="300">
|
||||
<template v-slot:activator>
|
||||
<div
|
||||
class="n-menu-item"
|
||||
:style="{ paddingLeft: delayedPaddingLeft + 'px' }"
|
||||
:class="{
|
||||
'n-menu-item--selected': selected,
|
||||
'n-menu-item--disabled': synthesizedDisabled
|
||||
}"
|
||||
@click="handleClick"
|
||||
>
|
||||
<div
|
||||
v-if="$slots.icon"
|
||||
class="n-menu-item__icon"
|
||||
:style="{
|
||||
width: maxIconSize && (maxIconSize + 'px'),
|
||||
height: maxIconSize && (maxIconSize + 'px'),
|
||||
fontSize: activeIconSize && (activeIconSize + 'px'),
|
||||
}"
|
||||
>
|
||||
<slot name="icon" />
|
||||
</div>
|
||||
<div class="n-menu-item__header">
|
||||
<slot>
|
||||
<render :render="title" />
|
||||
</slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<render :render="title" />
|
||||
</n-tooltip>
|
||||
</li>
|
||||
<li
|
||||
v-else-if="!shouldBeRenderedAsDropdownItem"
|
||||
class="n-menu-item"
|
||||
:style="{ paddingLeft: delayedPaddingLeft + 'px' }"
|
||||
:class="{
|
||||
'n-menu-item--selected': selected,
|
||||
'n-menu-item--disabled': synthesizedDisabled
|
||||
}"
|
||||
@click="handleClick"
|
||||
>
|
||||
<!-- identical part start -->
|
||||
<div
|
||||
v-if="$slots.icon"
|
||||
class="n-menu-item__icon"
|
||||
:style="{
|
||||
width: iconSize && (iconSize + 'px'),
|
||||
height: iconSize && (iconSize + 'px'),
|
||||
fontSize: iconSize && (iconSize + 'px'),
|
||||
}"
|
||||
>
|
||||
<slot name="icon" />
|
||||
</div>
|
||||
<!-- identical part start end -->
|
||||
<div class="n-menu-item__header">
|
||||
<slot>
|
||||
<render :render="title" />
|
||||
</slot>
|
||||
</div>
|
||||
</li>
|
||||
<n-dropdown-item v-else :name="name" :label="title" :value="value" :selected="selected" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import collectable from '../../../mixins/collectable'
|
||||
import withapp from '../../../mixins/withapp'
|
||||
import themeable from '../../../mixins/themeable'
|
||||
import render from '../../../utils/render'
|
||||
import NTooltip from '../../Tooltip'
|
||||
import NDropdownItem from '../../Dropdown/src/DropdownItem'
|
||||
|
||||
export default {
|
||||
name: 'NMenuItem',
|
||||
components: {
|
||||
NTooltip,
|
||||
NDropdownItem,
|
||||
render
|
||||
},
|
||||
mixins: [
|
||||
collectable('NSubmenu', 'menuItemNames', 'name'),
|
||||
withapp,
|
||||
themeable
|
||||
],
|
||||
inject: {
|
||||
NMenu: {
|
||||
default: null
|
||||
},
|
||||
NSubmenu: {
|
||||
default: null
|
||||
},
|
||||
NMenuItemGroup: {
|
||||
default: null
|
||||
},
|
||||
NMenuUl: {
|
||||
default: null
|
||||
}
|
||||
},
|
||||
props: {
|
||||
value: {
|
||||
type: Number,
|
||||
default: null
|
||||
},
|
||||
title: {
|
||||
type: [ String, Function ],
|
||||
default: null
|
||||
},
|
||||
name: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
delayedPaddingLeft: null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
shouldBeRenderedAsDropdownItem () {
|
||||
if (this.NMenuUl) return false
|
||||
return !this.isFirstLevel && this.NMenu.collapsed
|
||||
},
|
||||
useCollapsedIconSize () {
|
||||
return this.NMenu.collapsed && this.isFirstLevel
|
||||
},
|
||||
maxIconSize () {
|
||||
return Math.max(this.collapsedIconSize, this.iconSize)
|
||||
},
|
||||
activeIconSize () {
|
||||
if (this.useCollapsedIconSize) {
|
||||
return this.collapsedIconSize
|
||||
} else {
|
||||
return this.iconSize
|
||||
}
|
||||
},
|
||||
collapsedIconSize () {
|
||||
return this.NMenu.collapsedIconSize || this.NMenu.iconSize
|
||||
},
|
||||
iconSize () {
|
||||
return this.NMenu.iconSize
|
||||
},
|
||||
isFirstLevel () {
|
||||
return !this.NSubmenu && !this.NMenuItemGroup
|
||||
},
|
||||
paddingLeft () {
|
||||
if (this.isFirstLevel && this.NMenu.collapsedWidth !== null && this.NMenu.collapsed) {
|
||||
return this.NMenu.collapsedWidth / 2 - this.iconSize / 2
|
||||
}
|
||||
if (this.NMenuItemGroup) {
|
||||
return this.NMenu.indent / 2 + this.NMenuItemGroup.paddingLeft
|
||||
} else if (this.NSubmenu) {
|
||||
return this.NMenu.indent + this.NSubmenu.paddingLeft
|
||||
} else {
|
||||
return this.NMenu.rootIndent || this.NMenu.indent
|
||||
}
|
||||
},
|
||||
synthesizedDisabled () {
|
||||
return ((this.NSubmenu && this.NSubmenu.synthesizedDisabled) || this.disabled)
|
||||
},
|
||||
selected () {
|
||||
if (this.NMenu.value === this.name) {
|
||||
return true
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
paddingLeft (value) {
|
||||
this.$nextTick().then(() => {
|
||||
this.delayedPaddingLeft = value
|
||||
})
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.delayedPaddingLeft = this.paddingLeft
|
||||
},
|
||||
methods: {
|
||||
handleClick () {
|
||||
if (!this.synthesizedDisabled) {
|
||||
this.NMenu.handleSelect(this.name)
|
||||
this.$emit('click', this)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -1,229 +0,0 @@
|
||||
<template>
|
||||
<n-dropdown-submenu v-if="shouldBeRenderedAsDropdownSubmenu && !NMenuUl" :value="value" :label="title" :name="name" :selected="selectedInside">
|
||||
<template v-slot:activator>
|
||||
<render :render="title" />
|
||||
</template>
|
||||
<slot />
|
||||
</n-dropdown-submenu>
|
||||
<li
|
||||
v-else
|
||||
class="n-submenu"
|
||||
:class="{
|
||||
'n-submenu--selected-inside': selectedInside
|
||||
}"
|
||||
>
|
||||
<n-dropdown
|
||||
v-if="isFirstLevel"
|
||||
size="large"
|
||||
trigger="hover"
|
||||
:focusable="false"
|
||||
:disabled="!NMenu.collapsed"
|
||||
placement="right-start"
|
||||
type="menu"
|
||||
@select="handleDropdownSelect"
|
||||
>
|
||||
<template v-slot:activator>
|
||||
<div
|
||||
class="n-submenu-item n-dropdown"
|
||||
:style="{ paddingLeft: delayedPaddingLeft + 'px' }"
|
||||
:class="{
|
||||
'n-submenu-item--collapsed': contentCollapsed,
|
||||
'n-submenu-item--active': !contentCollapsed,
|
||||
'n-submenu-item--disabled': disabled,
|
||||
}"
|
||||
@click="handleClick"
|
||||
>
|
||||
<div
|
||||
v-if="$slots.icon"
|
||||
class="n-submenu-item__icon"
|
||||
:style="{
|
||||
width: maxIconSize && (maxIconSize + 'px'),
|
||||
height: maxIconSize && (maxIconSize + 'px'),
|
||||
fontSize: activeIconSize && (activeIconSize + 'px'),
|
||||
}"
|
||||
>
|
||||
<slot name="icon" />
|
||||
</div>
|
||||
<div class="n-submenu-item__header">
|
||||
<slot name="header">
|
||||
<render :render="title" />
|
||||
</slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<slot />
|
||||
</n-dropdown>
|
||||
<div
|
||||
v-else
|
||||
class="n-submenu-item n-dropdown"
|
||||
:style="{paddingLeft: delayedPaddingLeft + 'px'}"
|
||||
:class="{
|
||||
'n-submenu-item--collapsed': contentCollapsed,
|
||||
'n-submenu-item--active': !contentCollapsed,
|
||||
'n-submenu-item--disabled': disabled,
|
||||
}"
|
||||
@click="handleClick"
|
||||
>
|
||||
<div
|
||||
v-if="$slots.icon"
|
||||
class="n-submenu-item__icon"
|
||||
:style="{
|
||||
width: iconSize && (iconSize + 'px'),
|
||||
height: iconSize && (iconSize + 'px'),
|
||||
fontSize: iconSize && (iconSize + 'px'),
|
||||
}"
|
||||
>
|
||||
<slot name="icon" />
|
||||
</div>
|
||||
<div class="n-submenu-item__header">
|
||||
<slot name="header">
|
||||
<render :render="title" />
|
||||
</slot>
|
||||
</div>
|
||||
</div>
|
||||
<fade-in-height-expand-transition>
|
||||
<n-menu-ul
|
||||
v-show="!contentCollapsed"
|
||||
class="n-submenu-content"
|
||||
>
|
||||
<slot />
|
||||
</n-menu-ul>
|
||||
</fade-in-height-expand-transition>
|
||||
</li>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import collectable from '../../../mixins/collectable'
|
||||
import FadeInHeightExpandTransition from '../../../transition/FadeInHeightExpandTransition'
|
||||
import render from '../../../utils/render'
|
||||
import NDropdown from '../../Dropdown/src/Dropdown'
|
||||
import NDropdownSubmenu from '../../Dropdown/src/DropdownSubmenu'
|
||||
import NMenuUl from './MenuUl'
|
||||
|
||||
export default {
|
||||
name: 'NSubmenu',
|
||||
components: {
|
||||
FadeInHeightExpandTransition,
|
||||
NDropdown,
|
||||
NDropdownSubmenu,
|
||||
NMenuUl,
|
||||
render
|
||||
},
|
||||
mixins: [
|
||||
collectable('NSubmenu', 'menuItemNames', 'menuItemNames', true)
|
||||
],
|
||||
provide () {
|
||||
return {
|
||||
NSubmenu: this,
|
||||
NMenuItemGroup: null
|
||||
}
|
||||
},
|
||||
inject: {
|
||||
NMenu: {
|
||||
default: null
|
||||
},
|
||||
NSubmenu: {
|
||||
default: null
|
||||
},
|
||||
NMenuItemGroup: {
|
||||
default: null
|
||||
},
|
||||
NMenuUl: {
|
||||
default: null
|
||||
}
|
||||
},
|
||||
props: {
|
||||
value: {
|
||||
type: Number,
|
||||
default: null
|
||||
},
|
||||
title: {
|
||||
type: [String, Function],
|
||||
default: null
|
||||
},
|
||||
name: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
delayedPaddingLeft: null,
|
||||
menuItemNames: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
selectedInside () {
|
||||
return this.menuItemNames.includes(this.NMenu.value)
|
||||
},
|
||||
shouldBeRenderedAsDropdownSubmenu () {
|
||||
return this.NMenu.collapsed && !this.isFirstLevel
|
||||
},
|
||||
useCollapsedIconSize () {
|
||||
return this.NMenu.collapsed && this.isFirstLevel
|
||||
},
|
||||
maxIconSize () {
|
||||
return Math.max(this.collapsedIconSize, this.iconSize)
|
||||
},
|
||||
activeIconSize () {
|
||||
if (this.useCollapsedIconSize) {
|
||||
return this.collapsedIconSize
|
||||
} else {
|
||||
return this.iconSize
|
||||
}
|
||||
},
|
||||
iconSize () {
|
||||
return this.NMenu && this.NMenu.iconSize
|
||||
},
|
||||
collapsedIconSize () {
|
||||
return this.NMenu.collapsedIconSize || this.NMenu.iconSize
|
||||
},
|
||||
isFirstLevel () {
|
||||
return !this.NSubmenu && !this.NMenuItemGroup
|
||||
},
|
||||
synthesizedDisabled () {
|
||||
return (this.NMenu && this.NMenu.disabled) || this.disabled
|
||||
},
|
||||
paddingLeft () {
|
||||
if (this.isFirstLevel && this.NMenu.collapsedWidth !== null && this.NMenu.collapsed) {
|
||||
return this.NMenu.collapsedWidth / 2 - this.iconSize / 2
|
||||
}
|
||||
if (this.NMenuItemGroup) {
|
||||
return this.NMenu.indent / 2 + this.NMenuItemGroup.paddingLeft
|
||||
} else if (this.NSubmenu) {
|
||||
return this.NMenu.indent + this.NSubmenu.paddingLeft
|
||||
} else {
|
||||
return this.NMenu.rootIndent || this.NMenu.indent
|
||||
}
|
||||
},
|
||||
contentCollapsed () {
|
||||
return this.NMenu.collapsed || !(this.NMenu.synthesizedOpenNames.includes(this.name))
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
paddingLeft (value) {
|
||||
this.$nextTick().then(() => {
|
||||
this.delayedPaddingLeft = value
|
||||
})
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.delayedPaddingLeft = this.paddingLeft
|
||||
},
|
||||
methods: {
|
||||
handleDropdownSelect (value) {
|
||||
this.NMenu.handleSelect(value)
|
||||
},
|
||||
handleClick () {
|
||||
if (!this.disabled && !this.NMenu.collapsed) {
|
||||
this.NMenu.handleOpenNamesChange(this.name)
|
||||
this.$emit('click', this)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -1,229 +0,0 @@
|
||||
<template>
|
||||
<n-dropdown-submenu v-if="shouldBeRenderedAsDropdownSubmenu && !NMenuUl" :value="value" :label="title" :name="name" :selected="selectedInside">
|
||||
<template v-slot:activator>
|
||||
<render :render="title" />
|
||||
</template>
|
||||
<slot />
|
||||
</n-dropdown-submenu>
|
||||
<li
|
||||
v-else
|
||||
class="n-submenu"
|
||||
:class="{
|
||||
'n-submenu--selected-inside': selectedInside
|
||||
}"
|
||||
>
|
||||
<n-dropdown
|
||||
v-if="isFirstLevel"
|
||||
size="large"
|
||||
trigger="hover"
|
||||
:focusable="false"
|
||||
:disabled="!NMenu.collapsed"
|
||||
placement="right-start"
|
||||
type="menu"
|
||||
@select="handleDropdownSelect"
|
||||
>
|
||||
<template v-slot:activator>
|
||||
<div
|
||||
class="n-submenu-item n-dropdown"
|
||||
:style="{ paddingLeft: delayedPaddingLeft + 'px' }"
|
||||
:class="{
|
||||
'n-submenu-item--collapsed': contentCollapsed,
|
||||
'n-submenu-item--active': !contentCollapsed,
|
||||
'n-submenu-item--disabled': disabled,
|
||||
}"
|
||||
@click="handleClick"
|
||||
>
|
||||
<div
|
||||
v-if="$slots.icon"
|
||||
class="n-submenu-item__icon"
|
||||
:style="{
|
||||
width: maxIconSize && (maxIconSize + 'px'),
|
||||
height: maxIconSize && (maxIconSize + 'px'),
|
||||
fontSize: activeIconSize && (activeIconSize + 'px'),
|
||||
}"
|
||||
>
|
||||
<slot name="icon" />
|
||||
</div>
|
||||
<div class="n-submenu-item__header">
|
||||
<slot name="header">
|
||||
<render :render="title" />
|
||||
</slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<slot />
|
||||
</n-dropdown>
|
||||
<div
|
||||
v-else
|
||||
class="n-submenu-item n-dropdown"
|
||||
:style="{paddingLeft: delayedPaddingLeft + 'px'}"
|
||||
:class="{
|
||||
'n-submenu-item--collapsed': contentCollapsed,
|
||||
'n-submenu-item--active': !contentCollapsed,
|
||||
'n-submenu-item--disabled': disabled,
|
||||
}"
|
||||
@click="handleClick"
|
||||
>
|
||||
<div
|
||||
v-if="$slots.icon"
|
||||
class="n-submenu-item__icon"
|
||||
:style="{
|
||||
width: iconSize && (iconSize + 'px'),
|
||||
height: iconSize && (iconSize + 'px'),
|
||||
fontSize: iconSize && (iconSize + 'px'),
|
||||
}"
|
||||
>
|
||||
<slot name="icon" />
|
||||
</div>
|
||||
<div class="n-submenu-item__header">
|
||||
<slot name="header">
|
||||
<render :render="title" />
|
||||
</slot>
|
||||
</div>
|
||||
</div>
|
||||
<fade-in-height-expand-transition>
|
||||
<n-menu-ul
|
||||
v-show="!contentCollapsed"
|
||||
class="n-submenu-content"
|
||||
>
|
||||
<slot />
|
||||
</n-menu-ul>
|
||||
</fade-in-height-expand-transition>
|
||||
</li>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import collectable from '../../../mixins/collectable'
|
||||
import FadeInHeightExpandTransition from '../../../transition/FadeInHeightExpandTransition'
|
||||
import render from '../../../utils/render'
|
||||
import NDropdown from '../../Dropdown/src/Dropdown'
|
||||
import NDropdownSubmenu from '../../Dropdown/src/DropdownSubmenu'
|
||||
import NMenuUl from './MenuUl'
|
||||
|
||||
export default {
|
||||
name: 'NSubmenu',
|
||||
components: {
|
||||
FadeInHeightExpandTransition,
|
||||
NDropdown,
|
||||
NDropdownSubmenu,
|
||||
NMenuUl,
|
||||
render
|
||||
},
|
||||
mixins: [
|
||||
collectable('NSubmenu', 'menuItemNames', 'menuItemNames', true)
|
||||
],
|
||||
provide () {
|
||||
return {
|
||||
NSubmenu: this,
|
||||
NMenuItemGroup: null
|
||||
}
|
||||
},
|
||||
inject: {
|
||||
NMenu: {
|
||||
default: null
|
||||
},
|
||||
NSubmenu: {
|
||||
default: null
|
||||
},
|
||||
NMenuItemGroup: {
|
||||
default: null
|
||||
},
|
||||
NMenuUl: {
|
||||
default: null
|
||||
}
|
||||
},
|
||||
props: {
|
||||
value: {
|
||||
type: Number,
|
||||
default: null
|
||||
},
|
||||
title: {
|
||||
type: [String, Function],
|
||||
default: null
|
||||
},
|
||||
name: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
delayedPaddingLeft: null,
|
||||
menuItemNames: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
selectedInside () {
|
||||
return this.menuItemNames.includes(this.NMenu.value)
|
||||
},
|
||||
shouldBeRenderedAsDropdownSubmenu () {
|
||||
return this.NMenu.collapsed && !this.isFirstLevel
|
||||
},
|
||||
useCollapsedIconSize () {
|
||||
return this.NMenu.collapsed && this.isFirstLevel
|
||||
},
|
||||
maxIconSize () {
|
||||
return Math.max(this.collapsedIconSize, this.iconSize)
|
||||
},
|
||||
activeIconSize () {
|
||||
if (this.useCollapsedIconSize) {
|
||||
return this.collapsedIconSize
|
||||
} else {
|
||||
return this.iconSize
|
||||
}
|
||||
},
|
||||
iconSize () {
|
||||
return this.NMenu && this.NMenu.iconSize
|
||||
},
|
||||
collapsedIconSize () {
|
||||
return this.NMenu.collapsedIconSize || this.NMenu.iconSize
|
||||
},
|
||||
isFirstLevel () {
|
||||
return !this.NSubmenu && !this.NMenuItemGroup
|
||||
},
|
||||
synthesizedDisabled () {
|
||||
return (this.NMenu && this.NMenu.disabled) || this.disabled
|
||||
},
|
||||
paddingLeft () {
|
||||
if (this.isFirstLevel && this.NMenu.collapsedWidth !== null && this.NMenu.collapsed) {
|
||||
return this.NMenu.collapsedWidth / 2 - this.iconSize / 2
|
||||
}
|
||||
if (this.NMenuItemGroup) {
|
||||
return this.NMenu.indent / 2 + this.NMenuItemGroup.paddingLeft
|
||||
} else if (this.NSubmenu) {
|
||||
return this.NMenu.indent + this.NSubmenu.paddingLeft
|
||||
} else {
|
||||
return this.NMenu.rootIndent || this.NMenu.indent
|
||||
}
|
||||
},
|
||||
contentCollapsed () {
|
||||
return this.NMenu.collapsed || !(this.NMenu.synthesizedOpenNames.includes(this.name))
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
paddingLeft (value) {
|
||||
this.$nextTick().then(() => {
|
||||
this.delayedPaddingLeft = value
|
||||
})
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.delayedPaddingLeft = this.paddingLeft
|
||||
},
|
||||
methods: {
|
||||
handleDropdownSelect (value) {
|
||||
this.NMenu.handleSelect(value)
|
||||
},
|
||||
handleClick () {
|
||||
if (!this.disabled && !this.NMenu.collapsed) {
|
||||
this.NMenu.handleOpenNamesChange(this.name)
|
||||
this.$emit('click', this)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -1,101 +0,0 @@
|
||||
<template>
|
||||
<div
|
||||
class="n-menu"
|
||||
:class="{
|
||||
[`n-${synthesizedTheme}-theme`]: synthesizedTheme,
|
||||
[`n-menu--${mode}`]: mode,
|
||||
'n-menu--collapsed': collapsed
|
||||
}"
|
||||
>
|
||||
<ul class="n-menu-list">
|
||||
<slot />
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import withapp from '../../../mixins/withapp'
|
||||
import themeable from '../../../mixins/themeable'
|
||||
|
||||
export default {
|
||||
name: 'Menu',
|
||||
provide () {
|
||||
return {
|
||||
NMenu: this
|
||||
}
|
||||
},
|
||||
mixins: [withapp, themeable],
|
||||
props: {
|
||||
collapsed: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
collapsedWidth: {
|
||||
type: Number,
|
||||
default: null
|
||||
},
|
||||
collapsedIconSize: {
|
||||
type: Number,
|
||||
default: undefined
|
||||
},
|
||||
value: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
rootIndent: {
|
||||
type: Number,
|
||||
default: null
|
||||
},
|
||||
indent: {
|
||||
type: Number,
|
||||
default: 32
|
||||
},
|
||||
mode: {
|
||||
type: String,
|
||||
default: 'vertical'
|
||||
},
|
||||
iconSize: {
|
||||
type: Number,
|
||||
default: 20
|
||||
},
|
||||
defaultOpenNames: {
|
||||
type: Array,
|
||||
default: undefined
|
||||
},
|
||||
openNames: {
|
||||
type: Array,
|
||||
default: undefined
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
internalOpenNames: this.openNames || this.defaultOpenNames || []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
synthesizedOpenNames () {
|
||||
if (this.openNames !== undefined) return this.openNames || []
|
||||
else return this.internalOpenNames
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleSelect (value) {
|
||||
this.$emit('select', value)
|
||||
this.$emit('input', value)
|
||||
},
|
||||
handleOpenNamesChange (name) {
|
||||
const currentOpenNames = Array.from(this.synthesizedOpenNames)
|
||||
const index = currentOpenNames.findIndex(openName => openName === name)
|
||||
if (~index) {
|
||||
currentOpenNames.splice(index, 1)
|
||||
} else {
|
||||
currentOpenNames.push(name)
|
||||
}
|
||||
if (this.openNames === undefined) {
|
||||
this.internalOpenNames = currentOpenNames
|
||||
}
|
||||
this.$emit('openNamesChange', currentOpenNames)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -1,193 +0,0 @@
|
||||
<template>
|
||||
<li v-if="!shouldBeRenderedAsDropdownItem && isFirstLevel" class="n-menu-item-wrapper">
|
||||
<n-tooltip trigger="hover" :disabled="!NMenu.collapsed" placement="right" :delay="300">
|
||||
<template v-slot:activator>
|
||||
<div
|
||||
class="n-menu-item"
|
||||
:style="{ paddingLeft: delayedPaddingLeft + 'px' }"
|
||||
:class="{
|
||||
'n-menu-item--selected': selected,
|
||||
'n-menu-item--disabled': synthesizedDisabled
|
||||
}"
|
||||
@click="handleClick"
|
||||
>
|
||||
<div
|
||||
v-if="$slots.icon"
|
||||
class="n-menu-item__icon"
|
||||
:style="{
|
||||
width: maxIconSize && (maxIconSize + 'px'),
|
||||
height: maxIconSize && (maxIconSize + 'px'),
|
||||
fontSize: activeIconSize && (activeIconSize + 'px'),
|
||||
}"
|
||||
>
|
||||
<slot name="icon" />
|
||||
</div>
|
||||
<div class="n-menu-item__header">
|
||||
<slot>
|
||||
<render :render="title" />
|
||||
</slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<render :render="title" />
|
||||
</n-tooltip>
|
||||
</li>
|
||||
<li
|
||||
v-else-if="!shouldBeRenderedAsDropdownItem"
|
||||
class="n-menu-item"
|
||||
:style="{ paddingLeft: delayedPaddingLeft + 'px' }"
|
||||
:class="{
|
||||
'n-menu-item--selected': selected,
|
||||
'n-menu-item--disabled': synthesizedDisabled
|
||||
}"
|
||||
@click="handleClick"
|
||||
>
|
||||
<!-- identical part start -->
|
||||
<div
|
||||
v-if="$slots.icon"
|
||||
class="n-menu-item__icon"
|
||||
:style="{
|
||||
width: iconSize && (iconSize + 'px'),
|
||||
height: iconSize && (iconSize + 'px'),
|
||||
fontSize: iconSize && (iconSize + 'px'),
|
||||
}"
|
||||
>
|
||||
<slot name="icon" />
|
||||
</div>
|
||||
<!-- identical part start end -->
|
||||
<div class="n-menu-item__header">
|
||||
<slot>
|
||||
<render :render="title" />
|
||||
</slot>
|
||||
</div>
|
||||
</li>
|
||||
<n-dropdown-item v-else :name="name" :label="title" :value="value" :selected="selected" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import collectable from '../../../mixins/collectable'
|
||||
import withapp from '../../../mixins/withapp'
|
||||
import themeable from '../../../mixins/themeable'
|
||||
import render from '../../../utils/render'
|
||||
import NTooltip from '../../Tooltip'
|
||||
import NDropdownItem from '../../Dropdown/src/DropdownItem'
|
||||
|
||||
export default {
|
||||
name: 'NMenuItem',
|
||||
components: {
|
||||
NTooltip,
|
||||
NDropdownItem,
|
||||
render
|
||||
},
|
||||
mixins: [
|
||||
collectable('NSubmenu', 'menuItemNames', 'name'),
|
||||
withapp,
|
||||
themeable
|
||||
],
|
||||
inject: {
|
||||
NMenu: {
|
||||
default: null
|
||||
},
|
||||
NSubmenu: {
|
||||
default: null
|
||||
},
|
||||
NMenuItemGroup: {
|
||||
default: null
|
||||
},
|
||||
NMenuUl: {
|
||||
default: null
|
||||
}
|
||||
},
|
||||
props: {
|
||||
value: {
|
||||
type: Number,
|
||||
default: null
|
||||
},
|
||||
title: {
|
||||
type: [ String, Function ],
|
||||
default: null
|
||||
},
|
||||
name: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
delayedPaddingLeft: null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
shouldBeRenderedAsDropdownItem () {
|
||||
if (this.NMenuUl) return false
|
||||
return !this.isFirstLevel && this.NMenu.collapsed
|
||||
},
|
||||
useCollapsedIconSize () {
|
||||
return this.NMenu.collapsed && this.isFirstLevel
|
||||
},
|
||||
maxIconSize () {
|
||||
return Math.max(this.collapsedIconSize, this.iconSize)
|
||||
},
|
||||
activeIconSize () {
|
||||
if (this.useCollapsedIconSize) {
|
||||
return this.collapsedIconSize
|
||||
} else {
|
||||
return this.iconSize
|
||||
}
|
||||
},
|
||||
collapsedIconSize () {
|
||||
return this.NMenu.collapsedIconSize || this.NMenu.iconSize
|
||||
},
|
||||
iconSize () {
|
||||
return this.NMenu.iconSize
|
||||
},
|
||||
isFirstLevel () {
|
||||
return !this.NSubmenu && !this.NMenuItemGroup
|
||||
},
|
||||
paddingLeft () {
|
||||
if (this.isFirstLevel && this.NMenu.collapsedWidth !== null && this.NMenu.collapsed) {
|
||||
return this.NMenu.collapsedWidth / 2 - this.iconSize / 2
|
||||
}
|
||||
if (this.NMenuItemGroup) {
|
||||
return this.NMenu.indent / 2 + this.NMenuItemGroup.paddingLeft
|
||||
} else if (this.NSubmenu) {
|
||||
return this.NMenu.indent + this.NSubmenu.paddingLeft
|
||||
} else {
|
||||
return this.NMenu.rootIndent || this.NMenu.indent
|
||||
}
|
||||
},
|
||||
synthesizedDisabled () {
|
||||
return ((this.NSubmenu && this.NSubmenu.synthesizedDisabled) || this.disabled)
|
||||
},
|
||||
selected () {
|
||||
if (this.NMenu.value === this.name) {
|
||||
return true
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
paddingLeft (value) {
|
||||
this.$nextTick().then(() => {
|
||||
this.delayedPaddingLeft = value
|
||||
})
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.delayedPaddingLeft = this.paddingLeft
|
||||
},
|
||||
methods: {
|
||||
handleClick () {
|
||||
if (!this.synthesizedDisabled) {
|
||||
this.NMenu.handleSelect(this.name)
|
||||
this.$emit('click', this)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -1,229 +0,0 @@
|
||||
<template>
|
||||
<n-dropdown-submenu v-if="shouldBeRenderedAsDropdownSubmenu && !NMenuUl" :value="value" :label="title" :name="name" :selected="selectedInside">
|
||||
<template v-slot:activator>
|
||||
<render :render="title" />
|
||||
</template>
|
||||
<slot />
|
||||
</n-dropdown-submenu>
|
||||
<li
|
||||
v-else
|
||||
class="n-submenu"
|
||||
:class="{
|
||||
'n-submenu--selected-inside': selectedInside
|
||||
}"
|
||||
>
|
||||
<n-dropdown
|
||||
v-if="isFirstLevel"
|
||||
size="large"
|
||||
trigger="hover"
|
||||
:focusable="false"
|
||||
:disabled="!NMenu.collapsed"
|
||||
placement="right-start"
|
||||
type="menu"
|
||||
@select="handleDropdownSelect"
|
||||
>
|
||||
<template v-slot:activator>
|
||||
<div
|
||||
class="n-submenu-item n-dropdown"
|
||||
:style="{ paddingLeft: delayedPaddingLeft + 'px' }"
|
||||
:class="{
|
||||
'n-submenu-item--collapsed': contentCollapsed,
|
||||
'n-submenu-item--active': !contentCollapsed,
|
||||
'n-submenu-item--disabled': disabled,
|
||||
}"
|
||||
@click="handleClick"
|
||||
>
|
||||
<div
|
||||
v-if="$slots.icon"
|
||||
class="n-submenu-item__icon"
|
||||
:style="{
|
||||
width: maxIconSize && (maxIconSize + 'px'),
|
||||
height: maxIconSize && (maxIconSize + 'px'),
|
||||
fontSize: activeIconSize && (activeIconSize + 'px'),
|
||||
}"
|
||||
>
|
||||
<slot name="icon" />
|
||||
</div>
|
||||
<div class="n-submenu-item__header">
|
||||
<slot name="header">
|
||||
<render :render="title" />
|
||||
</slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<slot />
|
||||
</n-dropdown>
|
||||
<div
|
||||
v-else
|
||||
class="n-submenu-item n-dropdown"
|
||||
:style="{paddingLeft: delayedPaddingLeft + 'px'}"
|
||||
:class="{
|
||||
'n-submenu-item--collapsed': contentCollapsed,
|
||||
'n-submenu-item--active': !contentCollapsed,
|
||||
'n-submenu-item--disabled': disabled,
|
||||
}"
|
||||
@click="handleClick"
|
||||
>
|
||||
<div
|
||||
v-if="$slots.icon"
|
||||
class="n-submenu-item__icon"
|
||||
:style="{
|
||||
width: iconSize && (iconSize + 'px'),
|
||||
height: iconSize && (iconSize + 'px'),
|
||||
fontSize: iconSize && (iconSize + 'px'),
|
||||
}"
|
||||
>
|
||||
<slot name="icon" />
|
||||
</div>
|
||||
<div class="n-submenu-item__header">
|
||||
<slot name="header">
|
||||
<render :render="title" />
|
||||
</slot>
|
||||
</div>
|
||||
</div>
|
||||
<fade-in-height-expand-transition>
|
||||
<n-menu-ul
|
||||
v-show="!contentCollapsed"
|
||||
class="n-submenu-content"
|
||||
>
|
||||
<slot />
|
||||
</n-menu-ul>
|
||||
</fade-in-height-expand-transition>
|
||||
</li>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import collectable from '../../../mixins/collectable'
|
||||
import FadeInHeightExpandTransition from '../../../transition/FadeInHeightExpandTransition'
|
||||
import render from '../../../utils/render'
|
||||
import NDropdown from '../../Dropdown/src/Dropdown'
|
||||
import NDropdownSubmenu from '../../Dropdown/src/DropdownSubmenu'
|
||||
import NMenuUl from './MenuUl'
|
||||
|
||||
export default {
|
||||
name: 'NSubmenu',
|
||||
components: {
|
||||
FadeInHeightExpandTransition,
|
||||
NDropdown,
|
||||
NDropdownSubmenu,
|
||||
NMenuUl,
|
||||
render
|
||||
},
|
||||
mixins: [
|
||||
collectable('NSubmenu', 'menuItemNames', 'menuItemNames', true)
|
||||
],
|
||||
provide () {
|
||||
return {
|
||||
NSubmenu: this,
|
||||
NMenuItemGroup: null
|
||||
}
|
||||
},
|
||||
inject: {
|
||||
NMenu: {
|
||||
default: null
|
||||
},
|
||||
NSubmenu: {
|
||||
default: null
|
||||
},
|
||||
NMenuItemGroup: {
|
||||
default: null
|
||||
},
|
||||
NMenuUl: {
|
||||
default: null
|
||||
}
|
||||
},
|
||||
props: {
|
||||
value: {
|
||||
type: Number,
|
||||
default: null
|
||||
},
|
||||
title: {
|
||||
type: [String, Function],
|
||||
default: null
|
||||
},
|
||||
name: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
delayedPaddingLeft: null,
|
||||
menuItemNames: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
selectedInside () {
|
||||
return this.menuItemNames.includes(this.NMenu.value)
|
||||
},
|
||||
shouldBeRenderedAsDropdownSubmenu () {
|
||||
return this.NMenu.collapsed && !this.isFirstLevel
|
||||
},
|
||||
useCollapsedIconSize () {
|
||||
return this.NMenu.collapsed && this.isFirstLevel
|
||||
},
|
||||
maxIconSize () {
|
||||
return Math.max(this.collapsedIconSize, this.iconSize)
|
||||
},
|
||||
activeIconSize () {
|
||||
if (this.useCollapsedIconSize) {
|
||||
return this.collapsedIconSize
|
||||
} else {
|
||||
return this.iconSize
|
||||
}
|
||||
},
|
||||
iconSize () {
|
||||
return this.NMenu && this.NMenu.iconSize
|
||||
},
|
||||
collapsedIconSize () {
|
||||
return this.NMenu.collapsedIconSize || this.NMenu.iconSize
|
||||
},
|
||||
isFirstLevel () {
|
||||
return !this.NSubmenu && !this.NMenuItemGroup
|
||||
},
|
||||
synthesizedDisabled () {
|
||||
return (this.NMenu && this.NMenu.disabled) || this.disabled
|
||||
},
|
||||
paddingLeft () {
|
||||
if (this.isFirstLevel && this.NMenu.collapsedWidth !== null && this.NMenu.collapsed) {
|
||||
return this.NMenu.collapsedWidth / 2 - this.iconSize / 2
|
||||
}
|
||||
if (this.NMenuItemGroup) {
|
||||
return this.NMenu.indent / 2 + this.NMenuItemGroup.paddingLeft
|
||||
} else if (this.NSubmenu) {
|
||||
return this.NMenu.indent + this.NSubmenu.paddingLeft
|
||||
} else {
|
||||
return this.NMenu.rootIndent || this.NMenu.indent
|
||||
}
|
||||
},
|
||||
contentCollapsed () {
|
||||
return this.NMenu.collapsed || !(this.NMenu.synthesizedOpenNames.includes(this.name))
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
paddingLeft (value) {
|
||||
this.$nextTick().then(() => {
|
||||
this.delayedPaddingLeft = value
|
||||
})
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.delayedPaddingLeft = this.paddingLeft
|
||||
},
|
||||
methods: {
|
||||
handleDropdownSelect (value) {
|
||||
this.NMenu.handleSelect(value)
|
||||
},
|
||||
handleClick () {
|
||||
if (!this.disabled && !this.NMenu.collapsed) {
|
||||
this.NMenu.handleOpenNamesChange(this.name)
|
||||
this.$emit('click', this)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Loading…
Reference in New Issue
Block a user