mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2025-04-12 14:40:47 +08:00
refactor(thing): import robustness
This commit is contained in:
07akioni
parent
82eadd628b
commit
edd926436f
@ -206,7 +206,7 @@ export default {
|
||||
path: `/${this.lang}/${this.theme}` + '/n-descriptions'
|
||||
},
|
||||
{
|
||||
name: 'Empty (in progress)',
|
||||
name: 'Empty',
|
||||
path: `/${this.lang}/${this.theme}` + '/n-empty'
|
||||
},
|
||||
{
|
||||
|
||||
@ -20,7 +20,7 @@ Use `collapsed-width` and `width` to set sider's width.
|
||||
@collapse="collapsed = true"
|
||||
@expand="collapsed = false"
|
||||
>
|
||||
<h1>Sider</h1>
|
||||
<p>Sider Sider Sider Sider Sider Sider</p>
|
||||
</n-layout-sider>
|
||||
<n-layout>
|
||||
<n-layout-content>
|
||||
|
||||
@ -1,31 +1,37 @@
|
||||
# Basic
|
||||
```html
|
||||
<n-switch v-model="avatar"/>
|
||||
<n-switch v-model="header"/>
|
||||
<n-switch v-model="headerExtra"/>
|
||||
<n-switch v-model="description"/>
|
||||
<n-switch v-model="footer"/>
|
||||
<n-switch v-model="action"/>
|
||||
<n-thing>
|
||||
<template v-slot:avatar>
|
||||
<template v-slot:avatar v-if="avatar">
|
||||
<n-avatar>
|
||||
<n-icon>
|
||||
<md-cash />
|
||||
</n-icon>
|
||||
</n-avatar>
|
||||
</template>
|
||||
<template v-slot:header>
|
||||
<template v-slot:header v-if="header">
|
||||
Money
|
||||
</template>
|
||||
<template v-slot:header-extra>
|
||||
<template v-slot:header-extra v-if="headerExtra">
|
||||
<n-button circle size="tiny">
|
||||
<template v-slot:icon>
|
||||
<md-cash />
|
||||
</template>
|
||||
</n-button>
|
||||
</template>
|
||||
<template v-slot:description>
|
||||
<template v-slot:description v-if="description">
|
||||
It is what I want.
|
||||
</template>
|
||||
Money is any item or verifiable record that is generally accepted as payment for goods and services and repayment of debts, such as taxes, in a particular country or socio-economic context.
|
||||
<template v-slot:footer>
|
||||
<template v-slot:footer v-if="footer">
|
||||
The King of Money
|
||||
</template>
|
||||
<template v-slot:action>
|
||||
<template v-slot:action v-if="action">
|
||||
<n-button size="tiny" style="margin-right: 8px;">
|
||||
<template v-slot:icon>
|
||||
<md-cash />
|
||||
@ -53,6 +59,16 @@ import mdCash from 'naive-ui/lib/icons/md-cash'
|
||||
export default {
|
||||
components: {
|
||||
mdCash
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
avatar: true,
|
||||
header: true,
|
||||
headerExtra: true,
|
||||
description: true,
|
||||
footer: true,
|
||||
action: true
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
@ -1,31 +1,37 @@
|
||||
# Content Indent
|
||||
# Content Indented
|
||||
```html
|
||||
<n-thing content-indent>
|
||||
<template v-slot:avatar>
|
||||
<n-switch v-model="avatar"/>
|
||||
<n-switch v-model="header"/>
|
||||
<n-switch v-model="headerExtra"/>
|
||||
<n-switch v-model="description"/>
|
||||
<n-switch v-model="footer"/>
|
||||
<n-switch v-model="action"/>
|
||||
<n-thing content-indented>
|
||||
<template v-slot:avatar v-if="avatar">
|
||||
<n-avatar>
|
||||
<n-icon>
|
||||
<md-cash />
|
||||
</n-icon>
|
||||
</n-avatar>
|
||||
</template>
|
||||
<template v-slot:header>
|
||||
<template v-slot:header v-if="header">
|
||||
Money
|
||||
</template>
|
||||
<template v-slot:header-extra>
|
||||
<template v-slot:header-extra v-if="headerExtra">
|
||||
<n-button circle size="tiny">
|
||||
<template v-slot:icon>
|
||||
<md-cash />
|
||||
</template>
|
||||
</n-button>
|
||||
</template>
|
||||
<template v-slot:description>
|
||||
<template v-slot:description v-if="description">
|
||||
It is what I want.
|
||||
</template>
|
||||
Money is any item or verifiable record that is generally accepted as payment for goods and services and repayment of debts, such as taxes, in a particular country or socio-economic context.
|
||||
<template v-slot:footer>
|
||||
<template v-slot:footer v-if="footer">
|
||||
The King of Money
|
||||
</template>
|
||||
<template v-slot:action>
|
||||
<template v-slot:action v-if="action">
|
||||
<n-button size="tiny" style="margin-right: 8px;">
|
||||
<template v-slot:icon>
|
||||
<md-cash />
|
||||
@ -53,6 +59,16 @@ import mdCash from 'naive-ui/lib/icons/md-cash'
|
||||
export default {
|
||||
components: {
|
||||
mdCash
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
avatar: true,
|
||||
header: true,
|
||||
headerExtra: true,
|
||||
description: true,
|
||||
footer: true,
|
||||
action: true
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
@ -1,6 +1,7 @@
|
||||
<script>
|
||||
import withapp from '../../../mixins/withapp'
|
||||
import themeable from '../../../mixins/themeable'
|
||||
import asthemecontext from '../../../mixins/asthemecontext'
|
||||
|
||||
function isDescriptionsItem (vNode) {
|
||||
return (
|
||||
@ -13,7 +14,7 @@ function isDescriptionsItem (vNode) {
|
||||
|
||||
export default {
|
||||
name: 'NDescriptions',
|
||||
mixins: [withapp, themeable],
|
||||
mixins: [withapp, themeable, asthemecontext],
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
@ -135,6 +136,7 @@ export default {
|
||||
}, row))
|
||||
return h('div', {
|
||||
staticClass: 'n-descriptions',
|
||||
style: this.synthesizedStyle,
|
||||
class: {
|
||||
[`n-${this.synthesizedTheme}-theme`]: this.synthesizedTheme,
|
||||
[`n-descriptions--${this.labelPlacement}-label-placement`]: true,
|
||||
|
||||
@ -6,15 +6,18 @@
|
||||
}"
|
||||
:style="synthesizedStyle"
|
||||
>
|
||||
<div v-if="$slots.avatar && contentIndent" class="n-thing-avatar">
|
||||
<div v-if="$slots.avatar && contentIndented" class="n-thing-avatar">
|
||||
<slot name="avatar" />
|
||||
</div>
|
||||
<div class="n-thing-main">
|
||||
<div v-if="!contentIndent" class="n-thing-avatar-header-wrapper">
|
||||
<div v-if="$slots.avatar && !contentIndent" class="n-thing-avatar">
|
||||
<div
|
||||
v-if="!contentIndented && ($slots.header || title || $slots['header-extra'] || titleExtra || $slots.avatar)"
|
||||
class="n-thing-avatar-header-wrapper"
|
||||
>
|
||||
<div v-if="$slots.avatar && !contentIndented" class="n-thing-avatar">
|
||||
<slot name="avatar" />
|
||||
</div>
|
||||
<div class="n-thing-header-wrapper">
|
||||
<div v-if="$slots.header || title || $slots['header-extra'] || titleExtra" class="n-thing-header-wrapper">
|
||||
<div class="n-thing-header">
|
||||
<div v-if="$slots.header || title" class="n-thing-header__title">
|
||||
<slot name="header">
|
||||
@ -35,7 +38,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<template v-else>
|
||||
<div class="n-thing-header">
|
||||
<div v-if="$slots.header || title || $slots['header-extra'] || titleExtra" class="n-thing-header">
|
||||
<div v-if="$slots.header || title" class="n-thing-header__title">
|
||||
<slot name="header">
|
||||
{{ title }}
|
||||
@ -71,10 +74,11 @@
|
||||
<script>
|
||||
import withapp from '../../../mixins/withapp'
|
||||
import themeable from '../../../mixins/themeable'
|
||||
import asthemecontext from '../../../mixins/asthemecontext'
|
||||
|
||||
export default {
|
||||
name: 'NThing',
|
||||
mixins: [ withapp, themeable ],
|
||||
mixins: [ withapp, themeable, asthemecontext ],
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
@ -92,13 +96,10 @@ export default {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
contentIndent: {
|
||||
contentIndented: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
console.log(this.$slots, this.titleExtra)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
7
packages/mixins/asthemecontext.js
Normal file
7
packages/mixins/asthemecontext.js
Normal file
@ -0,0 +1,7 @@
|
||||
export default {
|
||||
provide () {
|
||||
return {
|
||||
NThemedComponent: this
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -9,10 +9,17 @@ export default {
|
||||
default: null
|
||||
}
|
||||
},
|
||||
inject: {
|
||||
NThemedComponent: {
|
||||
default: null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
synthesizedTheme () {
|
||||
if (this.theme !== null) {
|
||||
return this.theme
|
||||
} else if (this.NThemedComponent && this.NThemedComponent.synthesizedTheme) {
|
||||
return this.NThemedComponent.synthesizedTheme
|
||||
} else {
|
||||
return (this.NApp && this.NApp.synthesizedTheme) || null
|
||||
}
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
$descriptions-bordered-padding: (
|
||||
'small': (8px 12px),
|
||||
'medium': (12px 16px),
|
||||
'large': (16px 20px),
|
||||
'large': (16px 24px),
|
||||
);
|
||||
$descriptions-padding: (
|
||||
'small': 8px,
|
||||
|
||||
@ -2,51 +2,65 @@
|
||||
|
||||
@include themes-mixin {
|
||||
@include b(thing) {
|
||||
display: flex;
|
||||
color: $--n-secondary-text-color;
|
||||
transition: color .3s $default-cubic-bezier;
|
||||
font-size: 14px;
|
||||
@include b(thing-avatar) {
|
||||
margin-right: 16px;
|
||||
margin-top: 2px;
|
||||
}
|
||||
@include b(thing-avatar-header-wrapper) {
|
||||
@include once {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
@include b(thing-header-wrapper) {
|
||||
flex: 1;
|
||||
transition: color .3s $default-cubic-bezier;
|
||||
font-size: 14px;
|
||||
@include b(thing-avatar) {
|
||||
margin-right: 16px;
|
||||
margin-top: 2px;
|
||||
}
|
||||
@include b(thing-avatar-header-wrapper) {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
@include b(thing-header-wrapper) {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
@include b(thing-main) {
|
||||
flex-grow: 1;
|
||||
@include b(thing-header) {
|
||||
display: flex;
|
||||
margin-bottom: 4px;
|
||||
@include e(title) {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
transition: color .3s $default-cubic-bezier;
|
||||
}
|
||||
@include e(extra) {
|
||||
|
||||
}
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
@include e(description) {
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
}
|
||||
@include e(content) {
|
||||
&:not(:first-child) {
|
||||
margin-top: 16px;
|
||||
}
|
||||
}
|
||||
@include e(footer) {
|
||||
&:not(:first-child) {
|
||||
margin-top: 16px;
|
||||
}
|
||||
}
|
||||
@include e(action) {
|
||||
&:not(:first-child) {
|
||||
margin-top: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
color: $--thing-text-color;
|
||||
@include b(thing-main) {
|
||||
flex-grow: 1;
|
||||
@include b(thing-header) {
|
||||
display: flex;
|
||||
margin-bottom: 4px;
|
||||
@include e(title) {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: $--n-text-color;
|
||||
transition: color .3s $default-cubic-bezier;
|
||||
color: $--thing-header-text-color;
|
||||
}
|
||||
@include e(extra) {
|
||||
|
||||
}
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
@include e(description) {
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
}
|
||||
@include e(content) {
|
||||
margin-top: 16px;
|
||||
}
|
||||
@include e(footer) {
|
||||
margin-top: 16px;
|
||||
}
|
||||
@include e(action) {
|
||||
margin-top: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
@mixin setup-dark-thing {
|
||||
|
||||
$--thing-header-text-color: $--n-text-color !global;
|
||||
$--thing-text-color: $--n-secondary-text-color !global;
|
||||
}
|
||||
@ -1,3 +1,4 @@
|
||||
@mixin setup-light-thing {
|
||||
|
||||
$--thing-header-text-color: $--n-text-color !global;
|
||||
$--thing-text-color: $--n-secondary-text-color !global;
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user