mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2025-03-07 13:48:31 +08:00
Merge branch 'develop' of ***REMOVED*** into develop
This commit is contained in:
commit
f212d3f26c
@ -56,6 +56,10 @@ export default {
|
||||
{
|
||||
name: 'Nimbus Service Layout',
|
||||
path: `/${this.lang}/${this.theme}` + '/n-nimbus-service-layout'
|
||||
},
|
||||
{
|
||||
name: 'New Nimbus Service Layout',
|
||||
path: `/${this.lang}/${this.theme}` + '/n-nimbus-service-layout-new'
|
||||
}
|
||||
]
|
||||
},
|
||||
|
@ -1,10 +1,8 @@
|
||||
# Basic
|
||||
```html
|
||||
<div style="width:500px">
|
||||
<n-menu :title="'Test'"
|
||||
<div>
|
||||
<n-menu
|
||||
v-model="selected"
|
||||
:defaultOpenNames="initOpenKeys"
|
||||
:openNames="opens"
|
||||
@openNamesChange="changeOpen"
|
||||
@select="changeSelect"
|
||||
|
||||
@ -15,12 +13,12 @@
|
||||
<n-menu-item title="num1" name="num1"></n-menu-item>
|
||||
<n-menu-item title="num2" name="num2"></n-menu-item>
|
||||
<n-menu-item title="num3" name="num3"></n-menu-item>
|
||||
<n-sub-menu title="subMenu" name="subMenu" disabled>
|
||||
<n-sub-menu title="subMenu" name="subMenu">
|
||||
<n-menu-item title="sub1" name="sub1"></n-menu-item>
|
||||
</n-sub-menu>
|
||||
<n-sub-menu title="subMenu2" name="subMenu2">
|
||||
<n-sub-menu title="subMenu22" name="subMenu22">
|
||||
<n-menu-item title="sub222" name="sub222" disabled></n-menu-item>
|
||||
<n-menu-item title="sub222" name="sub222"></n-menu-item>
|
||||
</n-sub-menu>
|
||||
</n-sub-menu>
|
||||
<n-sub-menu title="subMenu3" name="subMenu3">
|
||||
@ -38,8 +36,6 @@ export default {
|
||||
data () {
|
||||
return {
|
||||
selected: 'sub1',
|
||||
initOpenKeys: ['subMenu', "subMenu2","subMenu22"],
|
||||
opens: ['subMenu']
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
61
demo/documentation/components/menu/enUS/defaultOpenNames.md
Normal file
61
demo/documentation/components/menu/enUS/defaultOpenNames.md
Normal file
@ -0,0 +1,61 @@
|
||||
# DefaultOpenNames
|
||||
```html
|
||||
<n-menu
|
||||
v-model="selected"
|
||||
:defaultOpenNames="opens"
|
||||
:items="items"
|
||||
@select="changeSelect"
|
||||
@openNamesChange="changeOpen"
|
||||
>
|
||||
</n-menu>
|
||||
```
|
||||
```js
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
selected: 'sub1',
|
||||
initOpenKeys: ['subMenu', "subMenu2","subMenu22"],
|
||||
opens: ['subMenu'],
|
||||
items: [
|
||||
{
|
||||
title: 'menu1',
|
||||
name: 'menu1',
|
||||
},
|
||||
{
|
||||
title: 'subMenu',
|
||||
name: 'subMenu',
|
||||
groupTitle: 'group1',
|
||||
children: [
|
||||
{
|
||||
title:'sub1',
|
||||
name: 'sub1',
|
||||
children: [
|
||||
{
|
||||
title: 'subsub001',
|
||||
name: 'subsub001'
|
||||
},
|
||||
{
|
||||
title: 'subsub002',
|
||||
name: 'subsub002'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
changeSelect (val) {
|
||||
console.log('changeSelect', val)
|
||||
},
|
||||
changeOpen (val) {
|
||||
console.log('changeOpen', val)
|
||||
this.opens = val
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
```css
|
||||
|
||||
```
|
94
demo/documentation/components/menu/enUS/disabled.md
Normal file
94
demo/documentation/components/menu/enUS/disabled.md
Normal file
@ -0,0 +1,94 @@
|
||||
# Disabled
|
||||
```html
|
||||
<div>
|
||||
Slot:
|
||||
<n-menu
|
||||
v-model="selected"
|
||||
:defaultOpenNames="initOpenKeys"
|
||||
@openNamesChange="changeOpen"
|
||||
@select="changeSelect"
|
||||
|
||||
>
|
||||
<template v-slot:drawer-header-icon>
|
||||
<div style="overflow:hidden">1111</div>
|
||||
</template>
|
||||
<n-menu-item title="num1" name="num1"></n-menu-item>
|
||||
<n-menu-item title="num2" name="num2"></n-menu-item>
|
||||
<n-menu-item title="num3" name="num3"></n-menu-item>
|
||||
<n-sub-menu title="subMenu" name="subMenu" disabled>
|
||||
<n-menu-item title="sub1" name="sub1"></n-menu-item>
|
||||
</n-sub-menu>
|
||||
<n-sub-menu title="subMenu2" name="subMenu2">
|
||||
<n-sub-menu title="subMenu22" name="subMenu22">
|
||||
<n-menu-item title="sub222" name="sub222" disabled></n-menu-item>
|
||||
</n-sub-menu>
|
||||
</n-sub-menu>
|
||||
<n-sub-menu title="subMenu3" name="subMenu3">
|
||||
<n-item-group title="group">
|
||||
<n-menu-item title="sub1" name="sub6"></n-menu-item>
|
||||
<n-menu-item title="sub1" name="sub7"></n-menu-item>
|
||||
</n-item-group>
|
||||
</n-sub-menu>
|
||||
</n-menu>
|
||||
Items:
|
||||
<n-menu
|
||||
v-model="selected"
|
||||
:openNames="opens"
|
||||
:items="items"
|
||||
@select="changeSelect"
|
||||
@openNamesChange="changeOpen"
|
||||
>
|
||||
</n-menu>
|
||||
</div>
|
||||
|
||||
```
|
||||
```js
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
selected: 'sub1',
|
||||
initOpenKeys: [],
|
||||
opens: [],
|
||||
items: [
|
||||
{
|
||||
title: 'menu1',
|
||||
name: 'menu1',
|
||||
disabled: true,
|
||||
},
|
||||
{
|
||||
title: 'subMenu',
|
||||
name: 'subMenu',
|
||||
groupTitle: 'group1',
|
||||
children: [
|
||||
{
|
||||
title:'sub1',
|
||||
name: 'sub1',
|
||||
children: [
|
||||
{
|
||||
title: 'subsub001',
|
||||
name: 'subsub001'
|
||||
},
|
||||
{
|
||||
title: 'subsub002',
|
||||
name: 'subsub002'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
changeOpen (names) {
|
||||
console.log('names', names)
|
||||
},
|
||||
changeSelect (val) {
|
||||
console.log('changeSelect', val)
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
```css
|
||||
|
||||
```
|
@ -2,4 +2,7 @@
|
||||
```demo
|
||||
basic
|
||||
items
|
||||
disabled
|
||||
openNames
|
||||
defaultOpenNames
|
||||
```
|
@ -1,12 +1,10 @@
|
||||
# items
|
||||
```html
|
||||
<n-menu :title="'Test'"
|
||||
<n-menu
|
||||
v-model="selected"
|
||||
:defaultOpenNames="initOpenKeys"
|
||||
:openNames="opens"
|
||||
@openNamesChange="changeOpen"
|
||||
@select="changeSelect"
|
||||
:items="items"
|
||||
@select="changeSelect"
|
||||
@openNamesChange="changeOpen"
|
||||
>
|
||||
</n-menu>
|
||||
```
|
||||
@ -15,13 +13,18 @@ export default {
|
||||
data () {
|
||||
return {
|
||||
selected: 'sub1',
|
||||
initOpenKeys: ['subMenu', "subMenu2","subMenu22"],
|
||||
opens: ['subMenu'],
|
||||
items: [
|
||||
{
|
||||
title: 'menu1',
|
||||
name: 'menu1',
|
||||
disabled: true,
|
||||
title: 'num1',
|
||||
name: 'num1',
|
||||
},
|
||||
{
|
||||
title: 'num2',
|
||||
name: 'num2',
|
||||
},
|
||||
{
|
||||
title: 'num3',
|
||||
name: 'num3',
|
||||
},
|
||||
{
|
||||
title: 'subMenu',
|
||||
@ -36,11 +39,41 @@ export default {
|
||||
title: 'subsub001',
|
||||
name: 'subsub001'
|
||||
},
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'subMenu2',
|
||||
name: 'subMenu2',
|
||||
groupTitle: 'group1',
|
||||
children: [
|
||||
{
|
||||
title:'sub2',
|
||||
name: 'sub2',
|
||||
children: [
|
||||
{
|
||||
title: 'subsub002',
|
||||
name: 'subsub002'
|
||||
},
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'subMenu3',
|
||||
name: 'subMenu3',
|
||||
groupTitle: 'group1',
|
||||
children: [
|
||||
{
|
||||
title:'sub3',
|
||||
name: 'sub3',
|
||||
children: [
|
||||
{
|
||||
title: 'subsub003',
|
||||
name: 'subsub003'
|
||||
},
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
@ -48,11 +81,12 @@ export default {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
changeOpen (indexs) {
|
||||
console.log('indexs', indexs)
|
||||
},
|
||||
changeSelect (val) {
|
||||
console.log('changeSelect', val)
|
||||
},
|
||||
changeOpen (val) {
|
||||
console.log('changeOpen', val)
|
||||
this.opens = val
|
||||
}
|
||||
}
|
||||
};
|
||||
|
70
demo/documentation/components/menu/enUS/openNames.md
Normal file
70
demo/documentation/components/menu/enUS/openNames.md
Normal file
@ -0,0 +1,70 @@
|
||||
# OpenNames
|
||||
```html
|
||||
Menu1:
|
||||
<n-menu
|
||||
v-model="selected"
|
||||
:openNames="initOpenKeys"
|
||||
:items="items"
|
||||
@select="changeSelect"
|
||||
>
|
||||
</n-menu>
|
||||
Menu2:
|
||||
<n-menu
|
||||
v-model="selected"
|
||||
:openNames="opens"
|
||||
:items="items"
|
||||
@select="changeSelect"
|
||||
@openNamesChange="changeOpen"
|
||||
>
|
||||
</n-menu>
|
||||
```
|
||||
```js
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
selected: 'sub1',
|
||||
initOpenKeys: ['subMenu'],
|
||||
opens: ['subMenu'],
|
||||
items: [
|
||||
{
|
||||
title: 'menu1',
|
||||
name: 'menu1',
|
||||
},
|
||||
{
|
||||
title: 'subMenu',
|
||||
name: 'subMenu',
|
||||
groupTitle: 'group1',
|
||||
children: [
|
||||
{
|
||||
title:'sub1',
|
||||
name: 'sub1',
|
||||
children: [
|
||||
{
|
||||
title: 'subsub001',
|
||||
name: 'subsub001'
|
||||
},
|
||||
{
|
||||
title: 'subsub002',
|
||||
name: 'subsub002'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
changeSelect (val) {
|
||||
console.log('changeSelect', val)
|
||||
},
|
||||
changeOpen (val) {
|
||||
console.log('changeOpen', val)
|
||||
this.opens = val
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
```css
|
||||
|
||||
```
|
@ -0,0 +1,70 @@
|
||||
# Basic
|
||||
```html
|
||||
<div style="position:relative;height: 600px">
|
||||
{{openNames}}111
|
||||
<n-nimbus-service-layout
|
||||
name="Oasis"
|
||||
:items="items"
|
||||
:disable-menu="disableMenu"
|
||||
v-model="selected"
|
||||
:open-names="openNames"
|
||||
@openNamesChange="changeOpen"
|
||||
@select="changeSelect"
|
||||
>
|
||||
<template v-slot:drawer-header-icon>
|
||||
<md-musical-notes />
|
||||
</template>
|
||||
Take me to the place where you go<br>
|
||||
Where nobody knows if it's night or day<br>
|
||||
But please don't put your life in the hands<br>
|
||||
Of a Rock n Roll band<br>
|
||||
Who'll throw it all away
|
||||
<n-button @click="disableMenu = !disableMenu">
|
||||
toggleDisableMenu
|
||||
</n-button>
|
||||
</n-nimbus-service-layout>
|
||||
</n-nimbus-service-layout>
|
||||
</div>
|
||||
|
||||
```
|
||||
```js
|
||||
import mdMusicalNotes from 'naive-ui/lib/icons/md-musical-notes'
|
||||
export default {
|
||||
components: {
|
||||
mdMusicalNotes
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
disableMenu: false,
|
||||
selected: null,
|
||||
openNames: [],
|
||||
items: [
|
||||
{
|
||||
name: 'n-config-provider',
|
||||
path: '/en-US/dark/n-config-provider'
|
||||
},
|
||||
{
|
||||
name: `Morning Glory`,
|
||||
childItems: [
|
||||
{
|
||||
name: 'Hello',
|
||||
path: '/en-US/dark/n-nimbus-service-layout?param=777'
|
||||
},
|
||||
]
|
||||
},
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
changeOpen (names) {
|
||||
console.log('names', names)
|
||||
},
|
||||
changeSelect (val) {
|
||||
console.log('changeSelect', val)
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
```css
|
||||
|
||||
```
|
@ -0,0 +1,5 @@
|
||||
# NimbusServiceLayout
|
||||
<!--single-column-->
|
||||
```demo
|
||||
basic
|
||||
```
|
@ -129,7 +129,6 @@ export default {
|
||||
align-items: center;
|
||||
padding-left: 44px;
|
||||
font-size: 18px;
|
||||
transition: color .3s cubic-bezier(.4, 0, .2, 1);
|
||||
}
|
||||
.ui-logo > img {
|
||||
margin-right: 12px;
|
||||
|
@ -10,6 +10,7 @@ import start from './documentation/intro/start'
|
||||
import devGuildlines from './documentation/intro/devGuidelines'
|
||||
|
||||
import nimbusServiceLayoutDemo from './documentation/components/nimbusServiceLayoutDemo'
|
||||
import newNimbusServiceLayout from './documentation/components/newNimbusServiceLayout'
|
||||
import gradientText from './documentation/components/gradientText'
|
||||
import checkbox from './documentation/components/checkbox'
|
||||
import button from './documentation/components/button'
|
||||
@ -152,6 +153,7 @@ const routes = [
|
||||
{ path: '/start', component: start },
|
||||
{ path: '/dev-guildlines', component: devGuildlines },
|
||||
{ path: '/n-nimbus-service-layout', component: nimbusServiceLayoutDemo },
|
||||
{ path: '/n-nimbus-service-layout-new', component: newNimbusServiceLayout },
|
||||
{ path: '/n-layout', component: layout },
|
||||
{ path: '/n-gradient-text', component: gradientText },
|
||||
{
|
||||
|
2
index.js
2
index.js
@ -26,6 +26,7 @@ import Tabs from './packages/common/Tabs'
|
||||
import TimePicker from './packages/common/TimePicker'
|
||||
import Layout from './packages/common/Layout'
|
||||
import ServiceLayout from './packages/nimbus/ServiceLayout'
|
||||
import NewServiceLayout from './packages/nimbus/NewServiceLayout'
|
||||
import NimbusIcon from './packages/deprecated/Icon'
|
||||
import Scrollbar from './packages/common/Scrollbar'
|
||||
import Steps from './packages/common/Steps'
|
||||
@ -108,6 +109,7 @@ function install (Vue) {
|
||||
Card.install(Vue)
|
||||
Icon.install(Vue)
|
||||
ServiceLayout.install(Vue)
|
||||
NewServiceLayout.install(Vue)
|
||||
Loader.install(Vue)
|
||||
Layout.install(Vue)
|
||||
GradientText.install(Vue)
|
||||
|
@ -4,6 +4,7 @@
|
||||
:class="{
|
||||
[`n-layout--${mode}-positioned`]: mode,
|
||||
'n-layout--has-sider': hasSider,
|
||||
[`n-${synthesizedTheme}-theme`]: synthesizedTheme
|
||||
}"
|
||||
:style="{
|
||||
marginLeft: styleMarginLeft,
|
||||
@ -19,10 +20,12 @@
|
||||
|
||||
<script>
|
||||
import layoutModeMixin from './layoutModeMixin'
|
||||
import themeable from '../../../mixins/themeable'
|
||||
import withapp from '../../../mixins/withapp'
|
||||
|
||||
export default {
|
||||
name: 'NLayout',
|
||||
mixins: [ layoutModeMixin ],
|
||||
mixins: [ withapp, themeable, layoutModeMixin ],
|
||||
provide () {
|
||||
return {
|
||||
NLayout: this
|
||||
|
@ -15,10 +15,8 @@
|
||||
width: styleWidth,
|
||||
}"
|
||||
>
|
||||
<n-scrollbar v-if="!useNativeScrollbar">
|
||||
<div class="n-layout-sider__content">
|
||||
<n-scrollbar v-if="!useNativeScrollbar" class="n-layout-sider__content">
|
||||
<slot />
|
||||
</div>
|
||||
</n-scrollbar>
|
||||
<div v-else class="n-layout-sider__content">
|
||||
<slot />
|
||||
@ -158,11 +156,8 @@ export default {
|
||||
} else {
|
||||
this.styleWidth = `${this.width}px`
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
const NLayout = this.NLayout
|
||||
if (NLayout) {
|
||||
NLayout.blockChildLayoutTransitionOneTick()
|
||||
NLayout.hasSider = true
|
||||
NLayout.siderWidth = this.width
|
||||
NLayout.collapsedSiderWidth = this.collapsedWidth
|
||||
|
@ -47,10 +47,6 @@ export default {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
indent: {
|
||||
type: Number,
|
||||
default: 32
|
||||
@ -61,11 +57,15 @@ export default {
|
||||
},
|
||||
defaultOpenNames: {
|
||||
type: Array,
|
||||
default: null
|
||||
default: () => {
|
||||
return undefined
|
||||
}
|
||||
},
|
||||
openNames: {
|
||||
type: Array,
|
||||
default: null
|
||||
default: () => {
|
||||
return undefined
|
||||
}
|
||||
},
|
||||
hasIcon: {
|
||||
type: Boolean,
|
||||
@ -76,7 +76,16 @@ export default {
|
||||
data () {
|
||||
return {
|
||||
componentName: 'NMenu',
|
||||
isCollapsed: false
|
||||
isCollapsed: false,
|
||||
currentOpenNames: this.openNames || this.defaultOpenNames || []
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
openNames (val) {
|
||||
this.currentOpenNames = val
|
||||
},
|
||||
defaultOpenNames (val) {
|
||||
this.currentOpenNames = val
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
@ -88,11 +97,14 @@ export default {
|
||||
this.$emit('input', value)
|
||||
},
|
||||
openKeysChangeCallback (val) {
|
||||
let indexs = this.openNames
|
||||
if (!this.openNames.includes(val)) {
|
||||
indexs.push(val)
|
||||
} else {
|
||||
let indexs = [...this.currentOpenNames]
|
||||
if (indexs.includes(val)) {
|
||||
indexs.splice(indexs.findIndex(item => item === val), 1)
|
||||
} else {
|
||||
indexs.push(val)
|
||||
}
|
||||
if (typeof (this.openNames) === 'undefined') {
|
||||
this.currentOpenNames = indexs
|
||||
}
|
||||
this.$emit('openNamesChange', indexs)
|
||||
}
|
||||
|
@ -75,11 +75,8 @@ export default {
|
||||
}
|
||||
return padding
|
||||
},
|
||||
openNames () {
|
||||
return this.NMenu.openNames || this.NMenu.defaultOpenNames
|
||||
},
|
||||
isCollapsed () {
|
||||
return !this.openNames.includes(this.name)
|
||||
return !(this.NMenu.currentOpenNames.includes(this.name))
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
7
packages/nimbus/NewServiceLayout/index.js
Normal file
7
packages/nimbus/NewServiceLayout/index.js
Normal file
@ -0,0 +1,7 @@
|
||||
import NewNimbusServiceLayout from './src/main.vue'
|
||||
|
||||
NewNimbusServiceLayout.install = function (Vue) {
|
||||
Vue.component(NewNimbusServiceLayout.name, NewNimbusServiceLayout)
|
||||
}
|
||||
|
||||
export default NewNimbusServiceLayout
|
216
packages/nimbus/NewServiceLayout/src/main.vue
Normal file
216
packages/nimbus/NewServiceLayout/src/main.vue
Normal file
@ -0,0 +1,216 @@
|
||||
|
||||
<script>
|
||||
import Scrollbar from '../../../common/Scrollbar'
|
||||
import withapp from '../../../mixins/withapp'
|
||||
import themeable from '../../../mixins/themeable'
|
||||
import toggleButton from './toggleButton'
|
||||
|
||||
export default {
|
||||
name: 'NNimbusServiceLayout',
|
||||
components: {
|
||||
Scrollbar,
|
||||
toggleButton
|
||||
},
|
||||
mixins: [withapp, themeable],
|
||||
props: {
|
||||
icon: {
|
||||
type: String,
|
||||
default: 'md-settings'
|
||||
},
|
||||
name: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
items: {
|
||||
type: Array,
|
||||
required: true
|
||||
},
|
||||
paddingBody: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
disableMenu: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
value: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
openNames: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return undefined
|
||||
}
|
||||
},
|
||||
defaultOpenNames: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return undefined
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
activeItem: null,
|
||||
collapsed: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
subMenuNames () {
|
||||
const subMenuNames = []
|
||||
function traverse (items) {
|
||||
items.forEach(item => {
|
||||
if (item.childItems) {
|
||||
subMenuNames.push(item.name)
|
||||
traverse(item.childItems)
|
||||
}
|
||||
})
|
||||
}
|
||||
traverse(this.items)
|
||||
return subMenuNames
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
$route (to, from) {
|
||||
this.syncActiveItemWithPath(to.path, this.items)
|
||||
}
|
||||
},
|
||||
created () {
|
||||
if (this.$route) {
|
||||
this.syncActiveItemWithPath(this.$route.path, this.items)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
syncActiveItemWithPath (path, items) {
|
||||
for (const item of items) {
|
||||
if (item.childItems) {
|
||||
this.syncActiveItemWithPath(path, item.childItems)
|
||||
} else if (item.path === path) {
|
||||
this.$emit('input', item.name)
|
||||
this.activeItem = item.name
|
||||
return
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
render (h) {
|
||||
const siderProps = {
|
||||
'show-toggle-button': true,
|
||||
'show-trigger': true,
|
||||
'collapsed': this.collapsed,
|
||||
'collapse-mode': 'transform',
|
||||
'bordered': true,
|
||||
'mode': 'absolute',
|
||||
'show-content': !this.collapsed,
|
||||
'use-native-scrollbar': false
|
||||
}
|
||||
const createMenu = items => {
|
||||
return items.map(item => {
|
||||
const props = {
|
||||
title: item.name,
|
||||
name: item.name,
|
||||
disabled: !!item.disabled
|
||||
}
|
||||
if (item.childItems) {
|
||||
return h('NSubMenu', {
|
||||
props
|
||||
},
|
||||
createMenu(item.childItems)
|
||||
)
|
||||
} else {
|
||||
return h('NMenuItem', {
|
||||
props: props,
|
||||
on: {
|
||||
click: () => {
|
||||
if (this.$router && item.path) {
|
||||
this.$router.push(item.path)
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
return h('NLayout', {
|
||||
staticClass: 'n-new-nimbus-service-layout',
|
||||
class: {
|
||||
[`n-${this.synthesizedTheme}-theme`]: this.synthesizedTheme
|
||||
},
|
||||
props: {
|
||||
mode: 'absolute'
|
||||
}
|
||||
}, [
|
||||
h('NLayoutHeader', {
|
||||
staticClass: 'n-new-nimbus-service-layout__header',
|
||||
class: {
|
||||
'n-new-nimbus-service-layout__header--hide': !this.$slots.nav
|
||||
},
|
||||
props: {
|
||||
bordered: true
|
||||
}
|
||||
}, this.$slots.nav),
|
||||
|
||||
h('NLayout', {
|
||||
staticClass: 'n-nimbus-service-layout-container',
|
||||
class: {
|
||||
'n-nimbus-service-layout-container--has-top': this.$slots.nav
|
||||
},
|
||||
props: {
|
||||
mode: 'absolute'
|
||||
}
|
||||
}, [
|
||||
h('NLayoutSider', {
|
||||
class: 'n-nimbus-service-layout-container-sider',
|
||||
props: siderProps,
|
||||
on: {
|
||||
collapse: () => {
|
||||
this.collapsed = true
|
||||
},
|
||||
expand: () => {
|
||||
this.collapsed = false
|
||||
}
|
||||
}
|
||||
},
|
||||
[
|
||||
h('div', {
|
||||
style: { 'padding-left': '24px', 'font-size': '16px', 'font-weight': 700 },
|
||||
class: 'n-nimbus-service-layout-container-sider-header'
|
||||
}, [
|
||||
h('NIcon', {
|
||||
staticClass: 'n-nimbus-service-layout-container-sider-header__icon',
|
||||
class: {
|
||||
'n-nimbus-service-layout-container-sider-header__icon--hide': !this.$slots['drawer-header-icon']
|
||||
},
|
||||
props: { size: 22 }
|
||||
},
|
||||
this.$slots['drawer-header-icon']),
|
||||
h('span', {}, this.name)
|
||||
]
|
||||
),
|
||||
h('NMenu',
|
||||
{
|
||||
props: {
|
||||
value: this.value || this.activeItem,
|
||||
openNames: this.openNames,
|
||||
defaultOpenNames: this.defaultOpenNames || this.subMenuNames,
|
||||
indent: 24
|
||||
},
|
||||
on: this.$listeners
|
||||
},
|
||||
createMenu(this.items)
|
||||
)]
|
||||
),
|
||||
h('NLayout', {
|
||||
props: {
|
||||
'mode': 'absolute',
|
||||
'use-native-scrollbar': false
|
||||
},
|
||||
class: 'n-new-nimbus-service-layout-container__content'
|
||||
}, this.$slots.default)
|
||||
])
|
||||
])
|
||||
}
|
||||
}
|
||||
</script>
|
10
packages/nimbus/NewServiceLayout/src/toggleButton.vue
Normal file
10
packages/nimbus/NewServiceLayout/src/toggleButton.vue
Normal file
@ -0,0 +1,10 @@
|
||||
<template>
|
||||
<svg
|
||||
viewBox="0 0 56.06 56.06"
|
||||
>
|
||||
<path
|
||||
d="M50,22A28,28,0,1,0,78,50,28.06,28.06,0,0,0,50,22ZM65.09,52.16h-25l7.1,7.1a2.16,2.16,0,0,1-3.05,3.05L33.38,51.52a2.15,2.15,0,0,1,0-3L44.16,37.69a2.16,2.16,0,0,1,3.05,3.05l-7.1,7.1h25a2.16,2.16,0,0,1,0,4.32Z"
|
||||
transform="translate(-21.97 -21.97)"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
@ -130,7 +130,7 @@ import toggleButton from './toggleButton'
|
||||
import isEqual from 'lodash/isEqual'
|
||||
|
||||
export default {
|
||||
name: 'NNimbusServiceLayout',
|
||||
name: 'NOldNimbusServiceLayout',
|
||||
components: {
|
||||
Scrollbar,
|
||||
toggleButton
|
||||
|
@ -2,12 +2,14 @@
|
||||
|
||||
@include themes-mixin {
|
||||
@include b(layout) {
|
||||
color: $--layout-text-color;
|
||||
background-color: $--layout-back-color;
|
||||
@include once {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
transition: margin-left .3s $--n-ease-in-out-cubic-bezier;
|
||||
transition: margin-left .3s $--n-ease-in-out-cubic-bezier, background-color .3s $--n-ease-in-out-cubic-bezier, color .3s $--n-ease-in-out-cubic-bezier;
|
||||
flex-direction: column;
|
||||
overflow: auto;
|
||||
@include m(has-sider) {
|
||||
@ -117,6 +119,14 @@
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
@include e(content) {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
@include m(bordered) {
|
||||
|
@ -20,6 +20,7 @@ $layout-nav-height: 64px;
|
||||
|
||||
@include b(menu-list) {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
@include b(menu-item) {
|
||||
cursor: pointer;
|
||||
@ -116,7 +117,7 @@ $layout-nav-height: 64px;
|
||||
top: calc(50% - 3px);
|
||||
transform: rotate(45deg) ;
|
||||
transform-origin: 25% 25%;
|
||||
transition: transform 0.3s $--n-ease-in-out-cubic-bezier, opacity 0.3s $--n-ease-in-out-cubic-bezier;
|
||||
transition: transform 0.3s $--n-ease-in-out-cubic-bezier, opacity 0.3s $--n-ease-in-out-cubic-bezier, border-color 0.3s $--n-ease-in-out-cubic-bezier;
|
||||
}
|
||||
@include m(collapsed) {
|
||||
&::after {
|
||||
|
26
styles/NewNimbusServiceLayout.scss
Normal file
26
styles/NewNimbusServiceLayout.scss
Normal file
@ -0,0 +1,26 @@
|
||||
@import './mixins/mixins.scss';
|
||||
|
||||
@include themes-mixin() {
|
||||
@include b(new-nimbus-service-layout) {
|
||||
@include e(header) {
|
||||
height: 64px;
|
||||
@include m(hide) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@include b(nimbus-service-layout-container) {
|
||||
@include b(nimbus-service-layout-container-sider-header) {
|
||||
display: flex;
|
||||
@include e(icon) {
|
||||
margin-right: 5px;
|
||||
@include m(hide) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
@include m(has-top) {
|
||||
top: 64px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
@ -56,6 +56,7 @@
|
||||
@import './Layout.scss';
|
||||
@import './Avatar.scss';
|
||||
@import "./NimbusServiceLayout.scss";
|
||||
@import "./NewNimbusServiceLayout.scss";
|
||||
@import "./Popover.scss";
|
||||
@import "./AdvancedTable.scss";
|
||||
@import "./NimbusIcon.scss";
|
||||
|
@ -1,4 +1,6 @@
|
||||
@mixin setup-dark-layout {
|
||||
$--layout-text-color: $--n-secondary-text-color !global;
|
||||
$--layout-back-color: $--n-background-color !global;
|
||||
$--layout-header-background-color: $--n-card-color !global;
|
||||
$--layout-header-border-color: $--n-divider-color !global;
|
||||
$--layout-footer-border-color: $--n-divider-color !global;
|
||||
|
@ -1,4 +1,6 @@
|
||||
@mixin setup-light-layout {
|
||||
$--layout-text-color: $--n-secondary-text-color !global;
|
||||
$--layout-back-color: $--neutral-9 !global;
|
||||
$--layout-header-background-color: $--n-card-color !global;
|
||||
$--layout-header-border-color: $--n-divider-color !global;
|
||||
$--layout-footer-border-color: $--n-divider-color !global;
|
||||
|
Loading…
Reference in New Issue
Block a user