mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2025-01-30 12:52:43 +08:00
refactor(descriptions): code clean & size enabled
This commit is contained in:
07akioni
parent
54c9eef90c
commit
82eadd628b
@ -1,6 +1,6 @@
|
||||
# Basic
|
||||
```html
|
||||
<n-descriptions label-placement="top" header="Description">
|
||||
<n-descriptions label-placement="top" title="Description">
|
||||
<n-descriptions-item>
|
||||
<template v-slot:label>
|
||||
Breakfast
|
||||
|
||||
@ -6,4 +6,5 @@ columns
|
||||
span
|
||||
placement
|
||||
bordered
|
||||
size
|
||||
```
|
||||
@ -1,7 +1,7 @@
|
||||
# Label Placement
|
||||
You can set label placement to 'top' or 'left'
|
||||
```html
|
||||
<n-descriptions label-placement="left" header="Description">
|
||||
<n-descriptions label-placement="left" title="Description">
|
||||
<n-descriptions-item>
|
||||
<template v-slot:label>
|
||||
Breakfast
|
||||
|
||||
197
demo/documentation/components/descriptions/enUS/size.md
Normal file
197
demo/documentation/components/descriptions/enUS/size.md
Normal file
@ -0,0 +1,197 @@
|
||||
# Size
|
||||
```html
|
||||
<n-descriptions label-placement="left" title="Description" size="small">
|
||||
<n-descriptions-item>
|
||||
<template v-slot:label>
|
||||
Breakfast
|
||||
</template>
|
||||
Apple
|
||||
</n-descriptions-item>
|
||||
<n-descriptions-item label="Brunch">
|
||||
Apple
|
||||
</n-descriptions-item>
|
||||
<n-descriptions-item label="Lunch">
|
||||
Apple
|
||||
</n-descriptions-item>
|
||||
<n-descriptions-item label="Supper" :span="2">
|
||||
Two<br>
|
||||
Apples
|
||||
</n-descriptions-item>
|
||||
<n-descriptions-item label="Midnight Snack">
|
||||
Apple
|
||||
</n-descriptions-item>
|
||||
</n-descriptions>
|
||||
<n-descriptions label-placement="left" title="Description" size="medium">
|
||||
<n-descriptions-item>
|
||||
<template v-slot:label>
|
||||
Breakfast
|
||||
</template>
|
||||
Apple
|
||||
</n-descriptions-item>
|
||||
<n-descriptions-item label="Brunch">
|
||||
Apple
|
||||
</n-descriptions-item>
|
||||
<n-descriptions-item label="Lunch">
|
||||
Apple
|
||||
</n-descriptions-item>
|
||||
<n-descriptions-item label="Supper" :span="2">
|
||||
Two<br>
|
||||
Apples
|
||||
</n-descriptions-item>
|
||||
<n-descriptions-item label="Midnight Snack">
|
||||
Apple
|
||||
</n-descriptions-item>
|
||||
</n-descriptions>
|
||||
<n-descriptions label-placement="left" title="Description" size="large">
|
||||
<n-descriptions-item>
|
||||
<template v-slot:label>
|
||||
Breakfast
|
||||
</template>
|
||||
Apple
|
||||
</n-descriptions-item>
|
||||
<n-descriptions-item label="Brunch">
|
||||
Apple
|
||||
</n-descriptions-item>
|
||||
<n-descriptions-item label="Lunch">
|
||||
Apple
|
||||
</n-descriptions-item>
|
||||
<n-descriptions-item label="Supper" :span="2">
|
||||
Two<br>
|
||||
Apples
|
||||
</n-descriptions-item>
|
||||
<n-descriptions-item label="Midnight Snack">
|
||||
Apple
|
||||
</n-descriptions-item>
|
||||
</n-descriptions>
|
||||
<n-descriptions label-placement="top" title="Description" size="small">
|
||||
<n-descriptions-item>
|
||||
<template v-slot:label>
|
||||
Breakfast
|
||||
</template>
|
||||
Apple
|
||||
</n-descriptions-item>
|
||||
<n-descriptions-item label="Brunch">
|
||||
Apple
|
||||
</n-descriptions-item>
|
||||
<n-descriptions-item label="Lunch">
|
||||
Apple
|
||||
</n-descriptions-item>
|
||||
<n-descriptions-item label="Supper" :span="2">
|
||||
Two<br>
|
||||
Apples
|
||||
</n-descriptions-item>
|
||||
<n-descriptions-item label="Midnight Snack">
|
||||
Apple
|
||||
</n-descriptions-item>
|
||||
</n-descriptions>
|
||||
<n-descriptions label-placement="top" title="Description" size="medium">
|
||||
<n-descriptions-item>
|
||||
<template v-slot:label>
|
||||
Breakfast
|
||||
</template>
|
||||
Apple
|
||||
</n-descriptions-item>
|
||||
<n-descriptions-item label="Brunch">
|
||||
Apple
|
||||
</n-descriptions-item>
|
||||
<n-descriptions-item label="Lunch">
|
||||
Apple
|
||||
</n-descriptions-item>
|
||||
<n-descriptions-item label="Supper" :span="2">
|
||||
Two<br>
|
||||
Apples
|
||||
</n-descriptions-item>
|
||||
<n-descriptions-item label="Midnight Snack">
|
||||
Apple
|
||||
</n-descriptions-item>
|
||||
</n-descriptions>
|
||||
<n-descriptions label-placement="top" title="Description" size="large">
|
||||
<n-descriptions-item>
|
||||
<template v-slot:label>
|
||||
Breakfast
|
||||
</template>
|
||||
Apple
|
||||
</n-descriptions-item>
|
||||
<n-descriptions-item label="Brunch">
|
||||
Apple
|
||||
</n-descriptions-item>
|
||||
<n-descriptions-item label="Lunch">
|
||||
Apple
|
||||
</n-descriptions-item>
|
||||
<n-descriptions-item label="Supper" :span="2">
|
||||
Two<br>
|
||||
Apples
|
||||
</n-descriptions-item>
|
||||
<n-descriptions-item label="Midnight Snack">
|
||||
Apple
|
||||
</n-descriptions-item>
|
||||
</n-descriptions>
|
||||
<n-descriptions label-placement="top" title="Description" size="small" bordered>
|
||||
<n-descriptions-item>
|
||||
<template v-slot:label>
|
||||
Breakfast
|
||||
</template>
|
||||
Apple
|
||||
</n-descriptions-item>
|
||||
<n-descriptions-item label="Brunch">
|
||||
Apple
|
||||
</n-descriptions-item>
|
||||
<n-descriptions-item label="Lunch">
|
||||
Apple
|
||||
</n-descriptions-item>
|
||||
<n-descriptions-item label="Supper" :span="2">
|
||||
Two<br>
|
||||
Apples
|
||||
</n-descriptions-item>
|
||||
<n-descriptions-item label="Midnight Snack">
|
||||
Apple
|
||||
</n-descriptions-item>
|
||||
</n-descriptions>
|
||||
<n-descriptions label-placement="top" title="Description" size="medium" bordered>
|
||||
<n-descriptions-item>
|
||||
<template v-slot:label>
|
||||
Breakfast
|
||||
</template>
|
||||
Apple
|
||||
</n-descriptions-item>
|
||||
<n-descriptions-item label="Brunch">
|
||||
Apple
|
||||
</n-descriptions-item>
|
||||
<n-descriptions-item label="Lunch">
|
||||
Apple
|
||||
</n-descriptions-item>
|
||||
<n-descriptions-item label="Supper" :span="2">
|
||||
Two<br>
|
||||
Apples
|
||||
</n-descriptions-item>
|
||||
<n-descriptions-item label="Midnight Snack">
|
||||
Apple
|
||||
</n-descriptions-item>
|
||||
</n-descriptions>
|
||||
<n-descriptions label-placement="top" title="Description" size="large" bordered>
|
||||
<n-descriptions-item>
|
||||
<template v-slot:label>
|
||||
Breakfast
|
||||
</template>
|
||||
Apple
|
||||
</n-descriptions-item>
|
||||
<n-descriptions-item label="Brunch">
|
||||
Apple
|
||||
</n-descriptions-item>
|
||||
<n-descriptions-item label="Lunch">
|
||||
Apple
|
||||
</n-descriptions-item>
|
||||
<n-descriptions-item label="Supper" :span="2">
|
||||
Two<br>
|
||||
Apples
|
||||
</n-descriptions-item>
|
||||
<n-descriptions-item label="Midnight Snack">
|
||||
Apple
|
||||
</n-descriptions-item>
|
||||
</n-descriptions>
|
||||
```
|
||||
```css
|
||||
.n-descriptions {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
```
|
||||
@ -2,11 +2,20 @@
|
||||
import withapp from '../../../mixins/withapp'
|
||||
import themeable from '../../../mixins/themeable'
|
||||
|
||||
function isDescriptionsItem (vNode) {
|
||||
return (
|
||||
vNode.componentOptions &&
|
||||
vNode.componentOptions.Ctor &&
|
||||
vNode.componentOptions.Ctor.extendOptions &&
|
||||
vNode.componentOptions.Ctor.extendOptions.name === 'NDescriptionsItem'
|
||||
)
|
||||
}
|
||||
|
||||
export default {
|
||||
name: 'NDescriptions',
|
||||
mixins: [withapp, themeable],
|
||||
props: {
|
||||
header: {
|
||||
title: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
@ -19,16 +28,22 @@ export default {
|
||||
default: null
|
||||
},
|
||||
labelPlacement: {
|
||||
type: String,
|
||||
default: 'top'
|
||||
default: 'top',
|
||||
validator (value) {
|
||||
return ['left', 'top'].includes(value)
|
||||
}
|
||||
},
|
||||
labelAlign: {
|
||||
type: String,
|
||||
default: 'left'
|
||||
default: 'left',
|
||||
validator (value) {
|
||||
return ['left', 'top'].includes(value)
|
||||
}
|
||||
},
|
||||
size: {
|
||||
type: String,
|
||||
default: 'medium'
|
||||
default: 'medium',
|
||||
validator (value) {
|
||||
return ['small', 'medium', 'large'].includes(value)
|
||||
}
|
||||
},
|
||||
bordered: {
|
||||
type: Boolean,
|
||||
@ -42,6 +57,10 @@ export default {
|
||||
},
|
||||
render (h) {
|
||||
let children = this.$scopedSlots.default ? this.$scopedSlots.default() : []
|
||||
if (children.some(child => !isDescriptionsItem(child))) {
|
||||
console.warn('[naive-ui/n-descriptions]: `n-descriptions` only takes `n-descriptions-item` as children.')
|
||||
}
|
||||
children = children.filter(child => isDescriptionsItem(child))
|
||||
children = children.reduce((state, item, index) => {
|
||||
const isLastIteration = children.length - 1 === index
|
||||
const propsData = item.componentOptions.propsData
|
||||
@ -120,6 +139,7 @@ export default {
|
||||
[`n-${this.synthesizedTheme}-theme`]: this.synthesizedTheme,
|
||||
[`n-descriptions--${this.labelPlacement}-label-placement`]: true,
|
||||
[`n-descriptions--${this.labelAlign}-label-align`]: true,
|
||||
[`n-descriptions--${this.size}-size`]: true,
|
||||
[`n-descriptions--bordered`]: this.bordered
|
||||
}
|
||||
}, [
|
||||
|
||||
@ -1,48 +1,109 @@
|
||||
@import './mixins/mixins.scss';
|
||||
|
||||
@mixin descriptions-size-mixin ($size) {
|
||||
$descriptions-bordered-padding: (
|
||||
'small': (8px 12px),
|
||||
'medium': (12px 16px),
|
||||
'large': (16px 20px),
|
||||
);
|
||||
$descriptions-padding: (
|
||||
'small': 8px,
|
||||
'medium': 12px,
|
||||
'large': 16px,
|
||||
);
|
||||
@include m($size + '-size') {
|
||||
@include b(descriptions-header) {
|
||||
margin-bottom: map-get($descriptions-padding, $size);
|
||||
}
|
||||
@include m(bordered) {
|
||||
@include b(descriptions-table-wrapper) {
|
||||
@include b(descriptions-table) {
|
||||
@include b(descriptions-table-row) {
|
||||
@include b(descriptions-table-header) {
|
||||
padding: map-get($descriptions-bordered-padding, $size);
|
||||
}
|
||||
@include b(descriptions-table-content) {
|
||||
padding: map-get($descriptions-bordered-padding, $size);
|
||||
}
|
||||
&:last-child {
|
||||
@include b(descriptions-table-content) {
|
||||
padding: map-get($descriptions-bordered-padding, $size);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@include b(descriptions-table-wrapper) {
|
||||
@include b(descriptions-table) {
|
||||
@include b(descriptions-table-row) {
|
||||
@include b(descriptions-table-content) {
|
||||
padding: 0 0 map-get($descriptions-padding, $size) 0;
|
||||
}
|
||||
&:last-child {
|
||||
@include b(descriptions-table-content) {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include themes-mixin {
|
||||
@include b(descriptions) {
|
||||
@include m(left-label-align) {
|
||||
th {
|
||||
text-align: left;
|
||||
@include once {
|
||||
@include descriptions-size-mixin('small');
|
||||
@include descriptions-size-mixin('medium');
|
||||
@include descriptions-size-mixin('large');
|
||||
@include m(left-label-align) {
|
||||
th {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
@include m(center-label-align) {
|
||||
th {
|
||||
text-align: center;
|
||||
@include m(center-label-align) {
|
||||
th {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
@include m(right-label-align) {
|
||||
th {
|
||||
text-align: right;
|
||||
@include m(right-label-align) {
|
||||
th {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
@include m(bordered) {
|
||||
@include b(descriptions-table-wrapper) {
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
border: 1px solid $--n-border-color;
|
||||
@include once {
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
}
|
||||
border: 1px solid $--descriptions-border-color;
|
||||
@include b(descriptions-table) {
|
||||
@include b(descriptions-table-row) {
|
||||
&:not(:last-child) {
|
||||
border-bottom: 1px solid $--n-border-color;
|
||||
@include b(descriptions-table-content) {
|
||||
border-bottom: 1px solid $--descriptions-border-color;
|
||||
}
|
||||
@include b(descriptions-table-header) {
|
||||
background-clip: padding-box;
|
||||
border-bottom: 1px solid $--descriptions-border-color;
|
||||
}
|
||||
}
|
||||
@include b(descriptions-table-header) {
|
||||
padding: 12px 16px;
|
||||
background: $--n-table-header-color;
|
||||
@include once {
|
||||
font-weight: 400;
|
||||
}
|
||||
background: $--descriptions-header-background-color;
|
||||
&:not(:last-child) {
|
||||
border-right: 1px solid $--n-border-color;
|
||||
border-right: 1px solid $--descriptions-border-color;
|
||||
}
|
||||
}
|
||||
@include b(descriptions-table-content) {
|
||||
padding: 12px 16px;
|
||||
background: $--descriptions-content-background-color;
|
||||
&:not(:last-child) {
|
||||
border-right: 1px solid $--n-border-color;
|
||||
}
|
||||
}
|
||||
&:last-child {
|
||||
@include b(descriptions-table-content) {
|
||||
padding: 12px 16px;
|
||||
border-right: 1px solid $--descriptions-border-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -50,54 +111,73 @@
|
||||
}
|
||||
}
|
||||
@include b(descriptions-header) {
|
||||
transition: color .3s $default-cubic-bezier;
|
||||
color: $--n-text-color;
|
||||
font-weight: 700;
|
||||
font-size: 18px;
|
||||
margin-bottom: 12px;
|
||||
@include once {
|
||||
font-weight: 700;
|
||||
font-size: 18px;
|
||||
transition: color .3s $default-cubic-bezier;
|
||||
}
|
||||
color: $--descriptions-header-text-color;
|
||||
}
|
||||
@include b(descriptions-table-wrapper) {
|
||||
transition: border-color .3s $default-cubic-bezier;
|
||||
@include once {
|
||||
transition: border-color .3s $default-cubic-bezier;
|
||||
}
|
||||
@include b(descriptions-table) {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
box-sizing: border-box;
|
||||
@include b(descriptions-table-row) {
|
||||
@include once {
|
||||
width: 100%;
|
||||
border-collapse: separate;
|
||||
border-spacing: 0;
|
||||
box-sizing: border-box;
|
||||
transition: border-color .3s $default-cubic-bezier;
|
||||
@include b(descriptions-table-header) {
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
display: table-cell;
|
||||
}
|
||||
@include b(descriptions-table-row) {
|
||||
@include once {
|
||||
box-sizing: border-box;
|
||||
color: $--n-text-color;
|
||||
transition: color .3s $default-cubic-bezier, background-color .3s $default-cubic-bezier, border-color .3s $default-cubic-bezier;
|
||||
transition: border-color .3s $default-cubic-bezier;
|
||||
}
|
||||
@include b(descriptions-table-header) {
|
||||
@include once {
|
||||
font-weight: 700;
|
||||
line-height: 1.5;
|
||||
display: table-cell;
|
||||
box-sizing: border-box;
|
||||
transition: color .3s $default-cubic-bezier, background-color .3s $default-cubic-bezier, border-color .3s $default-cubic-bezier;
|
||||
}
|
||||
color: $--descriptions-header-text-color;
|
||||
}
|
||||
@include b(descriptions-table-content) {
|
||||
@include e(content) {
|
||||
color: $--n-secondary-text-color;
|
||||
transition: color .3s $default-cubic-bezier;
|
||||
display: inline-block;
|
||||
color: $--descriptions-content-text-color;
|
||||
@include once {
|
||||
transition: color .3s $default-cubic-bezier;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
@include e(label) {
|
||||
color: $--n-text-color;
|
||||
transition: color .3s $default-cubic-bezier;
|
||||
display: inline-block;
|
||||
margin-right: 14px;
|
||||
color: $--descriptions-header-text-color;
|
||||
@include once {
|
||||
font-weight: 700;
|
||||
transition: color .3s $default-cubic-bezier;
|
||||
display: inline-block;
|
||||
margin-right: 14px;
|
||||
}
|
||||
}
|
||||
vertical-align: top;
|
||||
line-height: 1.5;
|
||||
display: table-cell;
|
||||
box-sizing: border-box;
|
||||
transition: color .3s $default-cubic-bezier, background-color .3s $default-cubic-bezier, border-color .3s $default-cubic-bezier;
|
||||
color: $--n-secondary-text-color;
|
||||
padding: 0 0 16px 0;
|
||||
}
|
||||
&:last-child {
|
||||
@include b(descriptions-table-content) {
|
||||
padding: 0;
|
||||
@include once {
|
||||
vertical-align: top;
|
||||
line-height: 1.5;
|
||||
display: table-cell;
|
||||
box-sizing: border-box;
|
||||
transition: color .3s $default-cubic-bezier, background-color .3s $default-cubic-bezier, border-color .3s $default-cubic-bezier;
|
||||
padding: 0 0 16px 0;
|
||||
}
|
||||
color: $--descriptions-content-text-color;
|
||||
}
|
||||
@include once {
|
||||
&:last-child {
|
||||
@include b(descriptions-table-content) {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,3 +1,7 @@
|
||||
@mixin setup-dark-descriptions {
|
||||
|
||||
$--descriptions-header-background-color: $--n-table-header-color !global;
|
||||
$--descriptions-header-text-color: $--n-text-color !global;
|
||||
$--descriptions-content-text-color: $--n-text-color !global;
|
||||
$--descriptions-content-background-color: $--n-card-color !global;
|
||||
$--descriptions-border-color: $--n-alpha-border-color !global;
|
||||
}
|
||||
@ -1,3 +1,7 @@
|
||||
@mixin setup-light-descriptions {
|
||||
|
||||
$--descriptions-header-background-color: $--n-table-header-color !global;
|
||||
$--descriptions-header-text-color: $--n-text-color !global;
|
||||
$--descriptions-content-text-color: $--n-text-color !global;
|
||||
$--descriptions-content-background-color: $--n-card-color !global;
|
||||
$--descriptions-border-color: $--n-alpha-border-color !global;
|
||||
}
|
||||
@ -66,6 +66,7 @@
|
||||
$--n-divider-color: $--neutral-7 !global;
|
||||
$--n-alpha-divider-color: $--overlay-7 !global;
|
||||
$--n-border-color: $--neutral-6 !global;
|
||||
$--n-alpha-border-color: $--overlay-6 !global;
|
||||
|
||||
$--n-table-header-color: $--neutral-8 !global;
|
||||
$--n-secondary-text-color: $--neutral-3 !global;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user