mirror/naive-ui
2
0
Fork 0
mirror of https://github.com/tusen-ai/naive-ui.git synced 2025-03-01 13:36:55 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #80 from TuSimple/freestyle

Browse Source 
Freestyle
This commit is contained in:
07akioni 2020-03-06 20:43:08 +08:00 committed by GitHub Enterprise
commit 5ecf55a288
139 changed files with 1808 additions and 761 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
README.md
View File

@ -4,14 +4,14 @@
<h1 align="center">Naive UI</h1>
<p align="center">A Vue UI Framework</p>
<p align="center"><b>Very Caring About Styles, Themed, Batteries Included</b></p>
<p align="center"><b>Caring About Styles, Themed, Batteries Included</b></p>
<p align="center">Interesting Somehow</p>
## Documentation
[www.naiveui.com](http://www.naiveui.com)
[www.naiveui.com](https://www.naiveui.com)
## Features
### Very Caring About Styles
### Caring About Styles
As is.
> The reason I started to build the library is I'm not satisfied the UI framework my company used. Maybe it's possible to caring about nearily all the details of an UI framework, except compatibility of IE.
### Themed

3
build/webpack.dev.js
View File

@ -6,10 +6,9 @@ const webpack = require('webpack')
const config = require('./config')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const env = process.env.NODE_ENV
const webpackConfig = {
mode: env === 'production' ? 'production' : 'development',
mode: 'development',
entry: './demo/devIndex',
output: {
path: path.resolve(process.cwd()),

3
build/webpack.doc.js
View File

@ -7,10 +7,9 @@ const config = require('./config')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const env = process.env.NODE_ENV
const webpackConfig = {
mode: env === 'development' ? 'development' : 'production',
mode: 'production',
entry: './demo/deploymentIndex.js',
output: {
path: path.resolve(__dirname, '..', 'doc', 'dist'),

6
demo/docEntry.vue
View File

@ -5,11 +5,17 @@
:items="items"
>
<router-view />
<landing-footer style="padding: 32px 204px 16px 56px; text-align: left; font-size: 14px;" />
</n-nimbus-service-layout>
</template>
<script>
import LandingFooter from './documentation/landing/footer'
export default {
components: {
LandingFooter
},
provide () {
return {
NDocRoot: this

2
demo/documentation/components/alert/enUS/index.md
View File

@ -14,7 +14,7 @@ no-icon
|show-icon|`string`|`true`||
|type|`'default' \| 'info' \| 'success' \| 'warning' \| 'error'`|`'default'`||
|closable|`boolean`|`false`||
|on-close|`(next: function) => any`|`next => next()`|Callback when close clicked. Call next to make alert close, nor it won't close|
|on-close|`() => Promise<boolean> \| boolean`|`() => true`||
|on-after-hide|`function`|`null`||
## Slots

2
demo/documentation/components/alert/zhCN/index.md
View File

@ -14,7 +14,7 @@ no-icon
|show-icon|`string`|`true`||
|type|`'default' \| 'info' \| 'success' \| 'warning' \| 'error'`|`'default'`||
|closable|`boolean`|`false`||
|on-close|`(next: function) => any`|`next => next()`|点击关闭的回调，调用 next 才能让 Alert 关闭|
|on-close|`() => Promise<boolean> \| boolean`|`() => true`||
|on-after-hide|`function`|`null`||
## Slots

2
demo/documentation/components/card/enUS/index.md
View File

@ -1,5 +1,5 @@
# Card
Some amatuer designer like to apply shadow on every one of it.
Some amatuer UI designers like to apply shadow on every cards.
## Demos
```demo
basic

2
demo/documentation/components/card/zhCN/index.md
View File

@ -1,5 +1,5 @@
# 卡片 Card
一些经验不足的 UI 喜欢它在上面滥用阴影。
一些经验不足的 UI 设计师喜欢它在上面滥用阴影。
## 演示
```demo
basic

2
demo/documentation/components/confirm/enUS/index.md
View File

@ -21,7 +21,7 @@ use-component
|-|-|-|-|
|type|`'error \| 'success' \| 'warning'`|`'warning'`||
|title|`string \| (() => VNode \| Array<VNode>)`|`null`|Can be a render function.|
|closable|`boolean`|`boolean`||
|closable|`boolean`|`true`||
|icon|`() => VNode \| Array<VNode>`|`null`|Should be a render function.|
|negative-text|`string`|`null`|Corresponding button won't show if not set.|
|positive-text|`string`|`null`|Corresponding button won't show if not set.|

2
demo/documentation/components/confirm/zhCN/index.md
View File

@ -21,7 +21,7 @@ use-component
|-|-|-|-|
|type|`'error \| 'success' \| 'warning'`|`'warning'`||
|title|`string \| (() => VNode \| Array<VNode>)`|`null`|可以是 render 函数|
|closable|`boolean`|`boolean`||
|closable|`boolean`|`true`||
|icon|`() => VNode \| Array<VNode>`|`null`|需要是 render 函数|
|negative-text|`string`|`null`|不填对应的按钮不会出现|
|positive-text|`string`|`null`|不填对应的按钮不会出现|

2
demo/documentation/components/dataTable/enUS/index.md
View File

@ -84,7 +84,7 @@ These methods can help you control table in an uncontrolled manner. However, it'
|sorter|`boolean \| function \| 'default'`|`false`|The sorter of the column. If set `'default'`, it will use a basic builtin compare function. If set to `true`, it will only display sort icon on the column, which can be used in async status. Otherwise it works like `Array.sort`'s compare function.|
|defaultSortOrder|`'descend' \| 'ascend' \| false`|`false`|The default sort order of the table in uncontrolled manner|
|sortOrder|`'descend' \| 'ascend' \| false \| null`|`null`|The controlled sort order of the column. If it is not `null`, the table's sort status will be in controlled mode. If multiple columns' sortOrder is set, the first one will affect.|
|filter|`boolean \| (optionValue: string \| number, rowData: object) => boolean`|`false`|The filter of the column. If set to `true`, it will only display filter button on the column, which can be used in async status.|
|filter|`boolean \| (optionValue: string \| number, rowData: object) => boolean \| 'default'`|`false`|The filter of the column. If set to `true`, it will only display filter button on the column, which can be used in async status.|
|filterMode|`'and' \| 'or'`|`'or'`||
|filterOptions|`Array<{ label: string, value: string \| number}>`|`[]`||
|filterOptionValues|`Array<string \| number> \| null`|`null`|The active filter option values in controlled manner. If set to `null`, the filter of the column works in an uncontrolled manner|

4
demo/documentation/components/dataTable/zhCN/index.md
View File

@ -39,7 +39,7 @@ ajaxUsage
|loading|`boolean`|`false`||
|scroll-x|`number \| string`|`null`|表格内容的横向宽度，如果列被水平固定了，则需要设定它|
|pagination|`false \| object`|`false`|属性参考 [Pagination props](n-pagination#Props)|
|paging|`boolean`|表格是否自动分页数据，在异步的状况下你可呢个要把它设为 `false`|
|paging|`boolean`|表格是否自动分页数据，在异步的状况下你可能需要把它设为 `false`|
|row-class-name|`string \| (rowData: object, index : number) => string \| object`|`null`||
|checked-row-keys|`Array<string \| number> \| null`|`null`||
|default-checked-row-keys|`Array<string \| number>`|`[]`||
@ -84,7 +84,7 @@ ajaxUsage
|sorter|`boolean \| function \| 'default'`|`false`|这一列的排序方法。如果设为 `'default'` 表格将会使用一个内置的排序函数；如果设为 `true`，表格将只会在这列展示一个排序图标，在异步的时候可能有用。其他情况下它工作的方式类似 `Array.sort` 的对比函数|
|defaultSortOrder|`'descend' \| 'ascend' \| false`|`false`|非受控状态下表格默认的排序方式|
|sortOrder|`'descend' \| 'ascend' \| false \| null`|`null`|受控状态下表格的排序方式。如果不是 `null`，表格整体的排序将会是受控的。如果多列都设定了有效值，那么只有第一个会生效|
|filter|`boolean \| (optionValue: string \| number, rowData: object) => boolean`|`false`|这一列的过滤方法。如果设为 `true`，表格将只会在这列展示一个排序图标，在异步的时候可能有用。|
|filter|`boolean \| (optionValue: string \| number, rowData: object) => boolean \| 'default'`|`false`|这一列的过滤方法。如果设为 `true`，表格将只会在这列展示一个排序图标，在异步的时候可能有用。|
|filterMode|`'and' \| 'or'`|`'or'`||
|filterOptions|`Array<{ label: string, value: string \| number}>`|`[]`||
|filterOptionValues|`Array<string \| number> \| null`|`null`|受控状态下，当前激活的过滤器选项值。如果设为 `null`，这一列的过滤行为将是非受控的|

249
demo/documentation/components/drawer/zhCN/dark1Debug.md Normal file
View File

@ -0,0 +1,249 @@
# Dark Debug 1
```html
<n-button @click="modalActive = !modalActive">Toggle</n-button>
<n-drawer
v-model="modalActive"
width="800"
>
<n-radio-group v-model="size" name="top-size" style="margin-bottom: 12px;">
<n-radio-button value="small">小</n-radio-button>
<n-radio-button value="medium" >中</n-radio-button>
<n-radio-button value="large">大</n-radio-button>
</n-radio-group>
<n-form
:model="model"
:rules="rules"
:size="size"
ref="form"
label-placement="top"
>
<n-row :gutter="24">
<n-form-item-col :span="12" label="Input" path="inputValue">
<n-input placeholder="Input" v-model="model.inputValue" />
</n-form-item-col :span="12">
<n-form-item-col :span="12" label="Textarea" path="textareaValue">
<n-input placeholder="Textarea" v-model="model.textareaValue" type="textarea"
:autosize="{
minRows: 3,
maxRows: 5
}"
/>
</n-form-item-col>
</n-row>
<n-row :gutter="24">
<n-form-item-col :span="12" label="Select" path="selectValue">
<n-select placeholder="Select" :options="generalOptions" v-model="model.selectValue"/>
</n-form-item-col>
<n-form-item-col :span="12" label="Multiple Select" path="multipleSelectValue">
<n-select placeholder="Select" :options="generalOptions" v-model="model.multipleSelectValue" multiple/>
</n-form-item-col>
</n-row>
<n-row :gutter="24">
<n-form-item-col :span="12" label="Datetime" path="datetimeValue">
<n-date-picker type="datetime" v-model="model.datetimeValue"/>
</n-form-item-col>
<n-form-item-col :span="12" label="Switch" path="switchValue">
<n-switch v-model="model.switchValue" />
</n-form-item-col>
</n-row>
<n-row :gutter="24">
<n-form-item-col :span="12" label="Checkbox Group" path="checkboxGroupValue">
<n-checkbox-group v-model="model.checkboxGroupValue">
<n-checkbox value="Option 1">Option 1</n-checkbox>
<n-checkbox value="Option 2">Option 2</n-checkbox>
<n-checkbox value="Option 3">Option 3</n-checkbox>
</n-checkbox-group>
</n-form-item-col>
<n-form-item-col :span="12" label="Radio Group" path="radioGroupValue">
<n-radio-group v-model="model.radioGroupValue" name="radiogroup1">
<n-radio value="Radio 1">Radio 1</n-radio>
<n-radio value="Radio 2">Radio 2</n-radio>
<n-radio value="Radio 3">Radio 3</n-radio>
</n-radio-group>
</n-form-item-col>
</n-row>
<n-row :gutter="24">
<n-form-item-col :span="12" label="Radio Button Group" path="radioGroupValue">
<n-radio-group v-model="model.radioGroupValue" name="radiogroup2">
<n-radio-button value="Radio 1">Radio 1</n-radio-button>
<n-radio-button value="Radio 2">Radio 2</n-radio-button>
<n-radio-button value="Radio 3">Radio 3</n-radio-button>
</n-radio-group>
</n-form-item-col>
<n-form-item-col :span="12" label="Input Number" path="inputNumberValue">
<n-input-number v-model="model.inputNumberValue"/>
</n-form-item-col>
</n-row>
<n-row :gutter="24">
<n-form-item-col :span="12" label="Time Picker" path="timePickerValue">
<n-time-picker v-model="model.timePickerValue" />
</n-form-item-col>
<n-form-item-col :span="12" label="Slider" path="sliderValue">
<n-slider v-model="model.sliderValue" :step="5"/>
</n-form-item-col>
</n-row>
<n-row :gutter="24">
<n-form-item-col :span="14" label="Transfer" path="transferValue">
<n-transfer
style="width: 100%;"
v-model="model.transferValue"
:options="generalOptions"
/>
</n-form-item-col>
<n-form-item-col :span="5" label="Nested Path" path="nestedValue.path1">
<n-cascader placeholder="Nested Path 1" v-model="model.nestedValue.path1" :options="cascaderOptions"/>
</n-form-item-col>
<n-form-item-col :span="5" path="nestedValue.path2">
<n-select placeholder="Nested Path 2" :options="generalOptions" v-model="model.nestedValue.path2"/>
</n-form-item-col>
</n-row>
<n-row>
<n-col :span="24">
<div style="display: flex; justify-content: flex-end;">
<n-button @click="handleValidateButtonClick" round type="primary">验证</n-button>
</div>
</n-col>
</n-row>
</n-form>
</n-drawer>
```
```js
export default {
data () {
return {
modalActive: false,
size: 'medium',
model: {
inputValue: null,
textareaValue: null,
selectValue: null,
multipleSelectValue: null,
datetimeValue: null,
nestedValue: {
path1: null,
path2: null
},
switchValue: false,
checkboxGroupValue: null,
radioGroupValue: null,
radioButtonGroupValue: null,
inputNumberValue: null,
timePickerValue: null,
sliderValue: 0,
transferValue: null
},
generalOptions: [
'groode',
'veli good',
'emazing',
'lidiculous'
].map(v => ({
label: v,
value: v
})),
cascaderOptions: [
{
label: 'groode',
value: 'groode',
children: [
{
label: 'veli good',
value: 'veli good'
}
]
}
],
rules: {
inputValue: {
required: true,
trigger: ['blur', 'input'],
message: '请输入 inputValue'
},
textareaValue: {
required: true,
trigger: ['blur', 'input'],
message: '请输入 textareaValue'
},
selectValue: {
required: true,
trigger: ['blur', 'change'],
message: '请选择 selectValue'
},
multipleSelectValue: {
type: 'array',
required: true,
trigger: ['blur', 'change'],
message: '请选择 multipleSelectValue'
},
datetimeValue: {
type: 'number',
required: true,
trigger: ['blur', 'change'],
message: '请输入 datetimeValue'
},
nestedValue: {
path1: {
required: true,
trigger: ['blur', 'input'],
message: '请输入 nestedValue.path1'
},
path2: {
required: true,
trigger: ['blur', 'change'],
message: '请输入 nestedValue.path2'
}
},
checkboxGroupValue: {
type: 'array',
required: true,
trigger: 'change',
message: '请选择 checkboxGroupValue'
},
radioGroupValue: {
required: true,
trigger: 'change',
message: '请选择 radioGroupValue'
},
radioButtonGroupValue: {
required: true,
trigger: 'change',
message: '请选择 radioButtonGroupValue'
},
inputNumberValue: {
type: 'number',
required: true,
trigger: ['blur', 'change'],
message: '请输入 inputNumberValue'
},
timePickerValue: {
type: 'number',
required: true,
trigger: ['blur', 'change'],
message: '请输入 timePickerValue'
},
sliderValue: 0,
transferValue: {
type: 'array',
required: true,
trigger: 'change',
message: '请输入 transferValue'
}
}
}
},
methods: {
handleValidateButtonClick (e) {
e.preventDefault()
this.$refs.form.validate(errors => {
if (!errors) {
this.$NMessage.success('验证成功')
} else {
console.log(errors)
this.$NMessage.error('验证失败')
}
})
}
}
}
```

200
demo/documentation/components/drawer/zhCN/dark2Debug.md Normal file
View File

@ -0,0 +1,200 @@
# Dark Debug 2
```html
<n-button @click="modalActive = !modalActive">Toggle</n-button>
<n-drawer
v-model="modalActive"
width="800"
>
<n-table :bordered="false" :single-line="false">
<n-thead>
<n-tr>
<n-th>Abandon</n-th>
<n-th>Abormal</n-th>
<n-th>Abolish</n-th>
<n-th>...</n-th>
<n-th>It's hard to learn words</n-th>
</n-tr>
</n-thead>
<n-tbody>
<n-tr>
<n-td>放弃</n-td>
<n-td>反常的</n-td>
<n-td>彻底废除</n-td>
<n-td>...</n-td>
<n-td>Damn it! I can't remember those words.</n-td>
</n-tr>
<n-tr>
<n-td>...</n-td>
<n-td>...</n-td>
<n-td>...</n-td>
<n-td>...</n-td>
<n-td>...</n-td>
</n-tr>
</n-tbody>
</n-table>
<n-list>
<template v-slot:header>
hhh
</template>
<template v-slot:footer>
fff
</template>
<n-list-item>
<template v-slot:prefix>
<n-button>Prefix</n-button>
</template>
<template v-slot:suffix>
<n-button>Suffix</n-button>
</template>
<n-thing title="Thing" title-extra="extra" description="description">
Biu<br>
Biu<br>
Biu<br>
</n-thing>
</n-list-item>
<n-list-item>
<n-thing title="Thing" title-extra="extra" description="description">
Biu<br>
Biu<br>
Biu<br>
</n-thing>
<template v-slot:suffix>
<n-button>Suffix</n-button>
</template>
</n-list-item>
</n-list>
<n-list bordered>
<template v-slot:header>
hhh
</template>
<template v-slot:footer>
fff
</template>
<n-list-item>
<template v-slot:prefix>
<n-button>Prefix</n-button>
</template>
<template v-slot:suffix>
<n-button>Suffix</n-button>
</template>
<n-thing title="Thing" title-extra="extra" description="description">
Biu<br>
Biu<br>
Biu<br>
</n-thing>
</n-list-item>
<n-list-item>
<n-thing title="Thing" title-extra="extra" description="description">
Biu<br>
Biu<br>
Biu<br>
</n-thing>
<template v-slot:suffix>
<n-button>Suffix</n-button>
</template>
</n-list-item>
</n-list>
<n-descriptions bordered>
<n-descriptions-item>
<template v-slot:label>
Breakfast
</template>
Apple
</n-descriptions-item>
<n-descriptions-item label="Lunch">
Apple
</n-descriptions-item>
<n-descriptions-item label="Supper">
Apple
</n-descriptions-item>
<n-descriptions-item label="Why Long">
Why <br> Long <br> Long <br> Long <br> Long <br> Long
</n-descriptions-item>
<n-descriptions-item label="Why Long">
Why <br> Long <br> Long <br> Long <br> Long <br> Long
</n-descriptions-item>
<n-descriptions-item label="Why Long">
Why <br> Long <br> Long <br> Long <br> Long <br> Long
</n-descriptions-item>
</n-descriptions>
<n-descriptions label-placement="left" bordered>
<n-descriptions-item>
<template v-slot:label>
Breakfast
</template>
Apple
</n-descriptions-item>
<n-descriptions-item label="Lunch">
Apple
</n-descriptions-item>
<n-descriptions-item label="Supper">
Apple
</n-descriptions-item>
<n-descriptions-item label="Why Long">
Why <br> Long <br> Long <br> Long <br> Long <br> Long
</n-descriptions-item>
<n-descriptions-item label="Why Long">
Why <br> Long <br> Long <br> Long <br> Long <br> Long
</n-descriptions-item>
<n-descriptions-item label="Why Long">
Why <br> Long <br> Long <br> Long <br> Long <br> Long
</n-descriptions-item>
</n-descriptions>
<n-descriptions>
<n-descriptions-item>
<template v-slot:label>
Breakfast
</template>
Apple
</n-descriptions-item>
<n-descriptions-item label="Lunch">
Apple
</n-descriptions-item>
<n-descriptions-item label="Supper">
Apple
</n-descriptions-item>
<n-descriptions-item label="Why Long">
Why <br> Long <br> Long <br> Long <br> Long <br> Long
</n-descriptions-item>
<n-descriptions-item label="Why Long">
Why <br> Long <br> Long <br> Long <br> Long <br> Long
</n-descriptions-item>
<n-descriptions-item label="Why Long">
Why <br> Long <br> Long <br> Long <br> Long <br> Long
</n-descriptions-item>
</n-descriptions>
<n-descriptions label-placement="left">
<n-descriptions-item>
<template v-slot:label>
Breakfast
</template>
Apple
</n-descriptions-item>
<n-descriptions-item label="Lunch">
Apple
</n-descriptions-item>
<n-descriptions-item label="Supper">
Apple
</n-descriptions-item>
<n-descriptions-item label="Why Long">
Why <br> Long <br> Long <br> Long <br> Long <br> Long
</n-descriptions-item>
<n-descriptions-item label="Why Long">
Why <br> Long <br> Long <br> Long <br> Long <br> Long
</n-descriptions-item>
<n-descriptions-item label="Why Long">
Why <br> Long <br> Long <br> Long <br> Long <br> Long
</n-descriptions-item>
</n-descriptions>
</n-drawer>
```
```js
export default {
data () {
return {
modalActive: false
}
},
}
```

106
demo/documentation/components/drawer/zhCN/dark3Debug.md Normal file
View File

@ -0,0 +1,106 @@
# Dark Debug 3
```html
<n-button @click="modalActive = !modalActive">Toggle</n-button>
<n-drawer
v-model="modalActive"
width="800"
>
<n-data-table
ref="table"
:columns="columns"
:data="data"
:pagination="pagination"
:max-height="250"
:scroll-x="1800"
/>
</n-drawer>
```
```js
const columns = [
{
title: 'Name',
key: 'name',
width: 200,
fixed: 'left',
filter: 'default',
filterOptions: [
{
label: 'Edward King 0',
value: 'Edward King 0'
},
{
label: 'Edward King 1',
value: 'Edward King 1'
},
{
label: 'Edward King 2',
value: 'Edward King 2'
},
{
label: 'Edward King 3',
value: 'Edward King 3'
},
]
},
{
title: 'Age',
key: 'age',
width: 100
},
{
title: 'Row',
key: 'row',
render (h, row, index) {
return h('span', ['row ', index])
}
},
{
title: 'Row1',
key: 'row1',
render(h, row, index) {
return h('span', ['row ', index])
}
},
{
title: 'Row2',
key: 'row2',
render(h, row, index) {
return h('span', ['row ', index])
}
},
{
title: 'Address',
key: 'address',
width: 200,
fixed: 'right'
}
]
const data = Array.apply(null, { length: 46 }).map((_, index) => ({
key: index,
name: `Edward King ${index % 4}`,
age: 32 + index % 3,
address: `London, Park Lane no. ${index}`
}))
export default {
data() {
return {
modalActive: false,
data,
columns
}
},
computed: {
pagination () {
return { pageSize: 10 }
}
},
methods: {
sendMail(rowData) {
this.$NMessage.info('send mail to ' + rowData.name)
}
}
}
```

26
demo/documentation/components/drawer/zhCN/dark4Debug.md Normal file
View File

@ -0,0 +1,26 @@
# Dark Debug 4
```html
<n-button @click="modalActive = !modalActive">Toggle</n-button>
<n-drawer
v-model="modalActive"
width="800"
>
<n-popover>
<template v-slot:activator>
<n-button style="margin:0;">
悬浮
</n-button>
</template>
<span>或许不想知道你的花园长得咋样</span>
</n-popover>
</n-drawer>
```
```js
export default {
data() {
return {
modalActive: false
}
}
}
```

4
demo/documentation/components/drawer/zhCN/index.md
View File

@ -4,6 +4,10 @@
```demo
basic
multiple
dark-1-debug
dark-2-debug
dark-3-debug
dark-4-debug
```
## V-model
|prop|event|

2
demo/documentation/components/grid/zhCN/index.md
View File

@ -1,4 +1,4 @@
# 栅格
# 栅格 Grid
<!--single-column-->
一个基本的栅格系统。

1
demo/documentation/components/modal/enUS/basic.md
View File

@ -2,7 +2,6 @@
Basic usage of modal. You can put anything in modal, a card for example.
```html
<n-button
size="small"
@click="isActive = true"
>
Start Me up

1
demo/documentation/components/modal/enUS/controlled.md
View File

@ -2,7 +2,6 @@
Modal can be controlled.
```html
<n-button
size="small"
@click="handleClick"
>
Start Me up

1
demo/documentation/components/modal/enUS/maskClosable.md
View File

@ -2,7 +2,6 @@
You can make mask click not to close modal when using v-model on modal.
```html
<n-button
size="small"
@click="isActive = true"
>
Start Me up

1
demo/documentation/components/modal/enUS/presetCard.md
View File

@ -2,7 +2,6 @@
Modal has some presets, which means you can use props & slots of the preset after set it.
```html
<n-button
size="small"
@click="isActive = true"
>
Start Me up

1
demo/documentation/components/modal/enUS/presetConfirm.md
View File

@ -2,7 +2,6 @@
An example of preset `confirm`.
```html
<n-button
size="small"
@click="isActive = true"
>
Start Me up

1
demo/documentation/components/modal/enUS/presetConfirmSlot.md
View File

@ -2,7 +2,6 @@
Slots are also related to preset.
```html
<n-button
size="small"
@click="isActive = true"
>
Start Me up

3
demo/documentation/components/modal/zhCN/basic.md
View File

@ -2,10 +2,9 @@
Modal 的基础用法，你可以把任何东西放进去，比如一个卡片。
```html
<n-button
size="small"
@click="isActive = true"
>
来
来吧
</n-button>
<n-modal v-model="isActive">
<n-card

3
demo/documentation/components/modal/zhCN/controlled.md
View File

@ -2,10 +2,9 @@
Modal 的显示可以是受控的。
```html
<n-button
size="small"
@click="handleClick"
>
来
来吧
</n-button>
<n-modal :show="isActive">
<n-card

154
demo/documentation/components/modal/zhCN/dark2Debug.md
View File

@ -34,6 +34,160 @@
</n-tr>
</n-tbody>
</n-table>
<n-list>
<template v-slot:header>
hhh
</template>
<template v-slot:footer>
fff
</template>
<n-list-item>
<template v-slot:prefix>
<n-button>Prefix</n-button>
</template>
<template v-slot:suffix>
<n-button>Suffix</n-button>
</template>
<n-thing title="Thing" title-extra="extra" description="description">
Biu<br>
Biu<br>
Biu<br>
</n-thing>
</n-list-item>
<n-list-item>
<n-thing title="Thing" title-extra="extra" description="description">
Biu<br>
Biu<br>
Biu<br>
</n-thing>
<template v-slot:suffix>
<n-button>Suffix</n-button>
</template>
</n-list-item>
</n-list>
<n-list bordered>
<template v-slot:header>
hhh
</template>
<template v-slot:footer>
fff
</template>
<n-list-item>
<template v-slot:prefix>
<n-button>Prefix</n-button>
</template>
<template v-slot:suffix>
<n-button>Suffix</n-button>
</template>
<n-thing title="Thing" title-extra="extra" description="description">
Biu<br>
Biu<br>
Biu<br>
</n-thing>
</n-list-item>
<n-list-item>
<n-thing title="Thing" title-extra="extra" description="description">
Biu<br>
Biu<br>
Biu<br>
</n-thing>
<template v-slot:suffix>
<n-button>Suffix</n-button>
</template>
</n-list-item>
</n-list>
<n-descriptions bordered>
<n-descriptions-item>
<template v-slot:label>
Breakfast
</template>
Apple
</n-descriptions-item>
<n-descriptions-item label="Lunch">
Apple
</n-descriptions-item>
<n-descriptions-item label="Supper">
Apple
</n-descriptions-item>
<n-descriptions-item label="Why Long">
Why <br> Long <br> Long <br> Long <br> Long <br> Long
</n-descriptions-item>
<n-descriptions-item label="Why Long">
Why <br> Long <br> Long <br> Long <br> Long <br> Long
</n-descriptions-item>
<n-descriptions-item label="Why Long">
Why <br> Long <br> Long <br> Long <br> Long <br> Long
</n-descriptions-item>
</n-descriptions>
<n-descriptions label-placement="left" bordered>
<n-descriptions-item>
<template v-slot:label>
Breakfast
</template>
Apple
</n-descriptions-item>
<n-descriptions-item label="Lunch">
Apple
</n-descriptions-item>
<n-descriptions-item label="Supper">
Apple
</n-descriptions-item>
<n-descriptions-item label="Why Long">
Why <br> Long <br> Long <br> Long <br> Long <br> Long
</n-descriptions-item>
<n-descriptions-item label="Why Long">
Why <br> Long <br> Long <br> Long <br> Long <br> Long
</n-descriptions-item>
<n-descriptions-item label="Why Long">
Why <br> Long <br> Long <br> Long <br> Long <br> Long
</n-descriptions-item>
</n-descriptions>
<n-descriptions>
<n-descriptions-item>
<template v-slot:label>
Breakfast
</template>
Apple
</n-descriptions-item>
<n-descriptions-item label="Lunch">
Apple
</n-descriptions-item>
<n-descriptions-item label="Supper">
Apple
</n-descriptions-item>
<n-descriptions-item label="Why Long">
Why <br> Long <br> Long <br> Long <br> Long <br> Long
</n-descriptions-item>
<n-descriptions-item label="Why Long">
Why <br> Long <br> Long <br> Long <br> Long <br> Long
</n-descriptions-item>
<n-descriptions-item label="Why Long">
Why <br> Long <br> Long <br> Long <br> Long <br> Long
</n-descriptions-item>
</n-descriptions>
<n-descriptions label-placement="left">
<n-descriptions-item>
<template v-slot:label>
Breakfast
</template>
Apple
</n-descriptions-item>
<n-descriptions-item label="Lunch">
Apple
</n-descriptions-item>
<n-descriptions-item label="Supper">
Apple
</n-descriptions-item>
<n-descriptions-item label="Why Long">
Why <br> Long <br> Long <br> Long <br> Long <br> Long
</n-descriptions-item>
<n-descriptions-item label="Why Long">
Why <br> Long <br> Long <br> Long <br> Long <br> Long
</n-descriptions-item>
<n-descriptions-item label="Why Long">
Why <br> Long <br> Long <br> Long <br> Long <br> Long
</n-descriptions-item>
</n-descriptions>
</n-modal>
```

116
demo/documentation/components/modal/zhCN/dark3Debug.md Normal file
View File

@ -0,0 +1,116 @@
# Dark Debug 3
```html
<n-button @click="modalActive = !modalActive">Toggle</n-button>
<n-modal
title="Dark Modal Debug"
preset="card"
v-model="modalActive"
:overlay-style="{ marginTop: '24px', marginBottom: '24px', width: '800px' }"
>
<n-data-table
ref="table"
:columns="columns"
:data="data"
:pagination="pagination"
:max-height="250"
:scroll-x="1800"
/>
</n-modal>
```
```js
const columns = [
{
type: 'selection',
disabled (row, index) {
return row.name === 'Edward King 3'
},
fixed: 'left',
},
{
title: 'Name',
key: 'name',
width: 200,
fixed: 'left',
filter: 'default',
filterOptions: [
{
label: 'Edward King 0',
value: 'Edward King 0'
},
{
label: 'Edward King 1',
value: 'Edward King 1'
},
{
label: 'Edward King 2',
value: 'Edward King 2'
},
{
label: 'Edward King 3',
value: 'Edward King 3'
},
]
},
{
fixed: 'left',
title: 'Age',
key: 'age',
width: 100
},
{
title: 'Row',
key: 'row',
render (h, row, index) {
return h('span', ['row ', index])
}
},
{
title: 'Row1',
key: 'row1',
render(h, row, index) {
return h('span', ['row ', index])
}
},
{
title: 'Row2',
key: 'row2',
render(h, row, index) {
return h('span', ['row ', index])
}
},
{
title: 'Address',
key: 'address',
width: 200,
fixed: 'right'
}
]
const data = Array.apply(null, { length: 46 }).map((_, index) => ({
key: index,
name: `Edward King ${index % 4}`,
age: 32 + index % 3,
address: `London, Park Lane no. ${index}`
}))
export default {
data() {
return {
modalActive: false,
data,
columns
}
},
computed: {
pagination () {
return { pageSize: 10 }
}
},
methods: {
sendMail(rowData) {
this.$NMessage.info('send mail to ' + rowData.name)
}
}
}
```

28
demo/documentation/components/modal/zhCN/dark4Debug.md Normal file
View File

@ -0,0 +1,28 @@
# Dark Debug 4
```html
<n-button @click="modalActive = !modalActive">Toggle</n-button>
<n-modal
title="Dark Modal Debug"
preset="card"
v-model="modalActive"
:overlay-style="{ marginTop: '24px', marginBottom: '24px', width: '800px' }"
>
<n-popover>
<template v-slot:activator>
<n-button style="margin:0;">
悬浮
</n-button>
</template>
<span>或许不想知道你的花园长得咋样</span>
</n-popover>
</n-modal>
```
```js
export default {
data() {
return {
modalActive: false
}
}
}
```

2
demo/documentation/components/modal/zhCN/index.md
View File

@ -11,6 +11,8 @@ preset-confirm
preset-confirm-slot
dark1-debug
dark2-debug
dark3-debug
dark4-debug
```
## V-model
|Prop|Event|

3
demo/documentation/components/modal/zhCN/maskClosable.md
View File

@ -2,10 +2,9 @@
你可以在使用 v-model 的时候让点击遮罩不关闭
```html
<n-button
size="small"
@click="isActive = true"
>
来
来吧
</n-button>
<n-modal
v-model="isActive"

3
demo/documentation/components/modal/zhCN/presetCard.md
View File

@ -2,10 +2,9 @@
Modal 有一些预设，让你在设定之后可以使用对应的 Slots 还有 Props。
```html
<n-button
size="small"
@click="isActive = true"
>
卡
来吧
</n-button>
<n-modal
v-model="isActive"

3
demo/documentation/components/modal/zhCN/presetConfirm.md
View File

@ -2,10 +2,9 @@
`confirm` 预设的例子。
```html
<n-button
size="small"
@click="isActive = true"
>
来
来吧
</n-button>
<n-modal v-model="isActive"
preset="confirm"

7
demo/documentation/components/modal/zhCN/presetConfirmSlot.md
View File

@ -1,11 +1,10 @@
# 使用 Confirm 预设的 Slot
Slots 也会随着 preset 变动。
# 使用 Confirm 预设的插槽
插槽也会随着预设变动。
```html
<n-button
size="small"
@click="isActive = true"
>
来
来吧
</n-button>
<n-modal v-model="isActive"
preset="confirm"

3
demo/documentation/components/notification/enUS/changeContent.md
View File

@ -39,8 +39,7 @@ Hold each other close the whole night through`,
src:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1573566445479&di=8804b1996cbf89582232a3994665454c&imgtype=jpg&src=http%3A%2F%2Fimg4.imgtn.bdimg.com%2Fit%2Fu%3D3628555514%2C2933400515%26fm%3D214%26gp%3D0.jpg'
}
}),
onClose: (next) => {
next()
onClose: () => {
this.notification = null
}
})

3
demo/documentation/components/notification/zhCN/changeContent.md
View File

@ -39,8 +39,7 @@ Hold each other close the whole night through`,
src:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1573566445479&di=8804b1996cbf89582232a3994665454c&imgtype=jpg&src=http%3A%2F%2Fimg4.imgtn.bdimg.com%2Fit%2Fu%3D3628555514%2C2933400515%26fm%3D214%26gp%3D0.jpg'
}
}),
onClose: (next) => {
next()
onClose: () => {
this.notification = null
}
})

2
demo/documentation/components/popselect/enUS/index.md
View File

@ -22,7 +22,7 @@ multiple
|-|-|-|-|
|value|`string \| number`|`null`||
|options|`Array<SelectOption \| SelectOptionGroup>`|`[]`||
|scrollable|`boolean`|`true`||
|scrollable|`boolean`|`false`||
|multiple|`boolean`|`false`||
|size|`'small' \| 'medium' \| 'large'`|`'small'`||

4
demo/documentation/components/popselect/enUS/scrollable.md
View File

@ -1,11 +1,11 @@
# Unscrollable
# Scrollable
```html
<n-popselect
v-model="value"
:options="options"
size="medium"
:scrollable="false"
scrollable
@change="handleChange"
>
<n-tag style="margin-right: 8px;">{{ value || 'Popselect' }}</n-tag>

2
demo/documentation/components/popselect/zhCN/index.md
View File

@ -21,7 +21,7 @@ multiple
|-|-|-|-|
|value|`string \| number`|`null`||
|options|`Array<SelectOption \| SelectOptionGroup>`|`[]`||
|scrollable|`boolean`|`true`||
|scrollable|`boolean`|`false`||
|multiple|`boolean`|`false`||
|size|`'small' \| 'medium' \| 'large'`|`'small'`||

4
demo/documentation/components/popselect/zhCN/scrollable.md
View File

@ -1,11 +1,11 @@
# 不让它滚动
# 让它滚动
```html
<n-popselect
v-model="value"
:options="options"
size="medium"
:scrollable="false"
scrollable
@change="handleChange"
>
<n-tag style="margin-right: 8px;">{{ value || 'Popselect' }}</n-tag>

2
demo/documentation/intro/start/enUS/index.md
View File

@ -1,5 +1,5 @@
<!--no-demo-->
# Getting Started
# Get Started
```component
installCodeGenerator
```

49
demo/documentation/landing/footer.vue
View File

@ -1,28 +1,37 @@
<template>
<n-layout-footer mode="absolute" class="footer" style="z-index: auto;">
<div style="max-width: 1200px; margin: auto;">
<n-divider style="margin: 0 0 16px 0;" />
<n-text depth="tertiary">
A <a ref="noopener noreferer" href="https://www.tusimple.com" target="_blank" class="link">
<n-text>
Tusimple
</n-text>
</a> Project ·&nbsp;
</n-text>
<n-text depth="tertiary">
Designed by <n-a ref="noopener noreferer" class="link" href="https://www.ritalei.com" target="_blank">
<n-text>
Rita Lei
</n-text>
</n-a>
<n-text depth="tertiary">
&nbsp;· Refined by Haiyang Yu &amp; 07akioni
<div class="footer">
<n-divider v-if="showDivider" style="margin: 0 0 16px 0;" />
<n-text depth="tertiary">
A <a ref="noopener noreferer" href="https://www.tusimple.com" target="_blank" class="link">
<n-text>
Tusimple
</n-text>
</a> Project ·&nbsp;
</n-text>
<n-text depth="tertiary">
Designed by <n-a ref="noopener noreferer" class="link" href="https://www.ritalei.com" target="_blank">
<n-text>
Rita Lei
</n-text>
</n-a>
<n-text depth="tertiary">
&nbsp;· Refined by Haiyang Yu &amp; 07akioni
</n-text>
</div>
</n-layout-footer>
</n-text>
</div>
</template>
<script>
export default {
props: {
showDivider: {
type: Boolean,
default: true
}
}
}
</script>
<style scoped>
.footer {
font-size: 15px;

10
demo/documentation/landing/index.vue
View File

@ -3,14 +3,14 @@
"zh-CN": {
"start": "开始使用",
"intro1": "一个 Vue UI 框架",
"intro2": "很在意样式，带主题，比较完整",
"intro2": "在意样式，带主题，比较完整",
"intro3": "有点意思",
"intro4": "换个主题"
},
"en-US": {
"start": "Getting Start",
"start": "Get Started",
"intro1": "A Vue UI Framework",
"intro2": "Very Caring About Styles, Themed, Batteries Included",
"intro2": "Caring About Styles, Themed, Batteries Included",
"intro3": "Interesting Somehow",
"intro4": "Change Theme"
}
@ -21,7 +21,9 @@
<n-config-consumer>
<template v-slot="{ styleScheme, theme }">
<div>
<landing-footer />
<n-layout-footer mode="absolute" style="z-index: auto;">
<landing-footer style="max-width: 1200px; margin: auto;" />
</n-layout-footer>
<div class="banner">
<left-image class="left-image" />
<right-image class="right-image" />

9
demo/header.vue
View File

@ -3,7 +3,7 @@
"zh-CN": {
"dark": "深色",
"light": "浅色",
"searchPlaceholder": "搜索组件",
"searchPlaceholder": "搜索",
"home": "首页",
"doc": "文档",
"common": "常规",
@ -13,7 +13,7 @@
"en-US": {
"dark": "Dark",
"light": "Light",
"searchPlaceholder": "Search Components",
"searchPlaceholder": "Search",
"home": "Home",
"doc": "Documentation",
"common": "Common",
@ -129,7 +129,7 @@ export default {
},
modeOptions: {
'debug': {
label: 'Common',
label: 'Production',
next: 'common'
},
'common': {
@ -142,7 +142,7 @@ export default {
computed: {
zIndex () {
const path = this.$route.path
return (path.endsWith('n-modal') || path.endsWith('n-drawer')) ? null : 3000
return (path.endsWith('n-modal') || path.endsWith('n-drawer') || path.endsWith('n-confirm')) ? null : 3000
},
theme () {
return this.NConfigProvider.$parent.theme
@ -212,7 +212,6 @@ export default {
handleThemeChange () {
this.NConfigProvider.$parent.theme = this.themeOptions[this.theme].next
},
handleModeChange () {
this.$emit('mode-change', this.modeOptions[this.mode].next)
},

4
demo/init.js
View File

@ -288,4 +288,8 @@ router.afterEach(function (to, from) {
}
})
if (!localStorage.mode) {
localStorage.mode = 'debug'
}
export { Vue, router, i18n, hljs }

2
demo/loaders/NaiveUIMdLoader.js
View File

@ -8,7 +8,7 @@ function parseMdAsAnchor (tokens) {
const href = title.replace(/ /g, '-')
return `<n-anchor-link title="${title}" href="#${href}"/>`
})
return `<n-anchor ignore-gap :top="24" position="absolute" affix style="width: 144px;">${linkTags.join('\n')}</n-anchor>`
return `<n-anchor ignore-gap :top="32" position="absolute" affix style="width: 144px;">${linkTags.join('\n')}</n-anchor>`
}
function parseComponents (tokens) {

10
demo/loaders/convertMd2Doc.js
View File

@ -36,8 +36,14 @@ function parseDemosAsAnchor (demosLiteral) {
.split('\n')
.map(demoName => demoName.trim())
.filter(demoName => demoName.length)
const linkTags = demoNames.map(demoName => `<n-anchor-link :title="anchorLinkMap.get('${kababCase(demoName)}') || ''" href="#${kababCase(demoName)}"/>`)
return `<n-anchor :top="24" :bound="16" position="absolute" affix style="width: 144px;">${linkTags.join('\n')}</n-anchor>`
const linkTags = demoNames.map(demoName => (
`
<n-anchor-link
v-if="anchorLinkMap.has('${kababCase(demoName)}')"
:title="anchorLinkMap.get('${kababCase(demoName)}')"
href="#${kababCase(demoName)}"
/>`))
return `<n-anchor :top="32" :bound="16" position="absolute" affix style="width: 144px;">${linkTags.join('\n')}</n-anchor>`
}
function generateScript (demosLiteral, components = []) {

2
demo/loaders/test/test.md
View File

@ -1,4 +1,4 @@
# Getting Started
# Get Started
## Installation
First install it.

2
demo/loaders/test/testMdLoader.js
View File

@ -12,7 +12,7 @@ function parseMdAsAnchor (content) {
const href = title.replace(/ /g, '-')
return `<n-anchor-link title="${title}" href="#${href}"/>`
})
return `<n-anchor :top="24" position="absolute" affix style="width: 132px;">${linkTags.join('\n')}</n-anchor>`
return `<n-anchor :top="32" position="absolute" affix style="width: 132px;">${linkTags.join('\n')}</n-anchor>`
}
console.log(parseMdAsAnchor(content))

10
demo/menuOptions.js
View File

@ -50,14 +50,10 @@ export default function (locale, instance) {
path: `/${instance.lang}/${instance.theme}/doc` + '/intro'
},
{
name: 'Getting Started',
name: 'Get Started',
title: '起步',
path: `/${instance.lang}/${instance.theme}/doc` + '/start'
},
// {
// name: 'Develop Guidelines',
// path: `/${instance.lang}/${instance.theme}/doc` + '/dev-guildlines'
// },
{
name: 'Create Themed Component',
title: '创建适配主题的组件',
@ -412,7 +408,7 @@ export default function (locale, instance) {
{
name: 'Alert',
title: '警告信息',
titleExtra: 'Alerts',
titleExtra: 'Alert',
path: `/${instance.lang}/${instance.theme}/doc` + '/n-alert'
},
{
@ -566,7 +562,7 @@ export default function (locale, instance) {
path: `/${instance.lang}/${instance.theme}/doc` + '/intro'
},
{
name: 'Getting Started',
name: 'Get Started',
path: `/${instance.lang}/${instance.theme}/doc` + '/start'
},
// {

3
demo/utils/ComponentDemo.vue
View File

@ -108,7 +108,7 @@ export default {
},
init () {
const map = this.NDocumentation.anchorLinkMap
this.isDebug = this.name && (this.name.indexOf('debug') > -1 || this.name.indexOf('Debug') > -1)
this.isDebug = this.name && (~this.name.indexOf('debug') || ~this.name.indexOf('Debug'))
if (this.isDebug) {
if (this.mode === 'debug') {
this.isShow = true
@ -120,7 +120,6 @@ export default {
} else {
map.set(this.name, String(this.$scopedSlots.title()[0].text).trim())
}
this.NDocumentation.anchorLinkMap = new Map(map, this.$scopedSlots.title()[0].text.trim())
}
}

2
demo/utils/ComponentDocumentation.vue
View File

@ -32,6 +32,6 @@ export default {
<style>
.n-documentation {
padding: 24px 24px 24px 56px;
padding: 32px 24px 24px 56px;
}
</style>

2
package.json
View File

@ -1,6 +1,6 @@
{
"name": "naive-ui",
"version": "0.7.18",
"version": "0.7.19",
"description": "",
"main": "lib/index.js",
"module": "es/index.js",

9
src/Alert/src/main.vue
View File

@ -109,7 +109,7 @@ export default {
},
onClose: {
type: Function,
default: next => next()
default: () => true
},
onAfterHide: {
type: Function,
@ -130,7 +130,12 @@ export default {
this.visible = false
},
handleCloseClick () {
this.onClose(this.close)
Promise
.resolve(this.onClose())
.then(result => {
if (result === false) return
this.close()
})
},
handleAfterLeave () {
this.$emit('after-hide')

1
src/Cascader/src/CascaderMenu.vue
View File

@ -1,5 +1,6 @@
<template>
<div
ref="contentContainer"
class="n-positioning-container"
>
<div ref="content" class="n-positioning-content">

5
src/Cascader/src/CascaderSelectMenu.vue
View File

@ -1,5 +1,8 @@
<template>
<div class="n-positioning-container">
<div
ref="contentContainer"
class="n-positioning-container"
>
<div ref="content" class="n-positioning-content">
<transition name="n-cascader-menu-transition">
<n-base-select-menu

5
src/Checkbox/src/Checkbox.vue
View File

@ -5,6 +5,7 @@
'n-checkbox--checked': syntheticChecked,
'n-checkbox--disabled': syntheticDisabled,
'n-checkbox--indeterminate': indeterminate,
'n-checkbox--table-header': tableHeader,
[`n-${syntheticTheme}-theme`]: syntheticTheme
}"
:tabindex="syntheticDisabled ? false : 0"
@ -76,6 +77,10 @@ export default {
indeterminate: {
type: Boolean,
default: false
},
tableHeader: {
type: Boolean,
default: false
}
},
computed: {

20
src/DataTable/src/BaseTable.vue
View File

@ -1,5 +1,5 @@
<template>
<div class="n-data-table-base-table-wrapper">
<div class="n-data-table-base-table">
<table-header
ref="header"
:placement="placement"
@ -7,7 +7,6 @@
:data="data"
:fixed="fixed"
:scroll-x="scrollX"
@scroll="handleHeaderScroll"
@set-active-fixed-column="setActiveFixedColumn"
/>
<table-body
@ -20,10 +19,8 @@
:columns="columns"
:row-class-name="rowClassName"
:min-height="bodyMinHeight"
:tr-heights="trHeights"
:loading="loading"
:fixed="fixed"
@scroll="handleBodyScroll"
/>
<slot />
</div>
@ -38,6 +35,11 @@ export default {
TableHeader,
TableBody
},
inject: {
NDataTable: {
default: null
}
},
props: {
main: {
type: Boolean,
@ -67,10 +69,6 @@ export default {
type: Boolean,
default: false
},
trHeights: {
type: Array,
default: null
},
height: {
type: Number,
default: 0
@ -95,12 +93,6 @@ export default {
getBodyElement () {
return this.$refs.body.getScrollContainer()
},
handleBodyScroll (...args) {
this.$emit('scroll', ...args)
},
handleHeaderScroll (...args) {
this.$emit('header-scroll', ...args)
},
setActiveFixedColumn (leftActiveFixedColumn, rightActiveFixedColumn) {
this.$refs.body.activeLeft = leftActiveFixedColumn
this.$refs.body.activeRight = rightActiveFixedColumn

118
src/DataTable/src/DataTable.vue
View File

@ -10,7 +10,7 @@
>
<n-spin :spinning="loading">
<div
class="n-data-table-tables-wrapper"
class="n-data-table-wrapper"
>
<base-table
ref="mainTable"
@ -22,8 +22,6 @@
:row-class-name="rowClassName"
:loading="loading"
:body-min-height="42"
@header-scroll="handleMainTableHeaderScroll"
@scroll="handleTableMainBodyScroll"
>
<slot name="append" />
</base-table>
@ -113,6 +111,7 @@ function normalizeColumn (column) {
})
if (!column.key && column.type === 'selection') {
defaultColumn.key = 'selection'
defaultColumn.width = 48
}
return defaultColumn
}
@ -197,9 +196,6 @@ export default {
data () {
return {
/** collected tr heights of main table */
trHeights: [],
hoveringRowIndex: null,
mainTableScrollContainerWidth: null,
horizontalScrollLeft: 0,
/* which part is being scrolling: main left right header */
scrollingPart: null,
@ -260,23 +256,29 @@ export default {
filteredData () {
const syntheticActiveFilters = this.syntheticActiveFilters
const normalizedColumns = this.normalizedColumns
function createDefaultFilter (columnKey) {
return (filterOptionValue, row) => ~String(row[columnKey]).indexOf(String(filterOptionValue))
}
return this.data ? this.data.filter(row => {
for (const columnKey of Object.keys(row)) {
const activeFilterOptionValues = syntheticActiveFilters
.filter(filter => filter.columnKey === columnKey)
.map(filter => filter.filterOptionValue)
.filter(filterInfo => filterInfo.columnKey === columnKey)
.map(filterInfo => filterInfo.filterOptionValue)
if (!activeFilterOptionValues.length) continue
const columnToFilter = normalizedColumns.find(column => column.key === columnKey)
/**
* When async, filter won't be set, so data won't be filtered
*/
if (columnToFilter && typeof columnToFilter.filter === 'function') {
const filter = columnToFilter.filter === 'default'
? createDefaultFilter(columnKey)
: columnToFilter.filter
if (columnToFilter && typeof filter === 'function') {
if (columnToFilter.filterMode === 'and') {
if (activeFilterOptionValues.some(filterOptionValue => !columnToFilter.filter(filterOptionValue, row))) {
if (activeFilterOptionValues.some(filterOptionValue => !filter(filterOptionValue, row))) {
return false
}
} else {
if (activeFilterOptionValues.some(filterOptionValue => columnToFilter.filter(filterOptionValue, row))) {
if (activeFilterOptionValues.some(filterOptionValue => filter(filterOptionValue, row))) {
return true
} else {
return false
@ -443,9 +445,6 @@ export default {
allRowsChecked () {
return this.countOfCurrentPageCheckedRows === this.paginatedData.length
}
// handleScroll () {
// }
},
watch: {
syntheticCurrentPage () {
@ -517,53 +516,50 @@ export default {
body
}
},
handleMainTableHeaderScroll (e, active) {
if (!this.scrollingPart || this.scrollingPart === 'head') {
if (this.scrollingPart !== 'head') this.scrollingPart = 'head'
if (this.scrollTimerId) window.clearTimeout(this.scrollTimerId)
this.scrollTimerId = window.setTimeout(() => {
this.scrollingPart = null
this.scrollTimerId = null
}, 200)
const {
scrollLeft
} = e.target
const {
body: bodyEl
} = this.getScrollElements()
bodyEl.scrollLeft = scrollLeft
this.horizontalScrollLeft = scrollLeft
handleTableHeaderScroll (e, active) {
if (this.scrollingPart === null) {
this.scrollingPart = 'header'
}
},
handleTableMainBodyScroll (e) {
this.handleTableBodyScroll(e, 'main')
},
handleTableBodyScroll (e, part) {
if (!this.scrollingPart || this.scrollingPart === part) {
if (this.scrollingPart !== part) this.scrollingPart = part
if (this.scrollTimerId) window.clearTimeout(this.scrollTimerId)
if (this.scrollingPart === 'header') {
window.clearTimeout(this.scrollTimerId)
this.scrollTimerId = window.setTimeout(() => {
this.scrollingPart = null
this.scrollTimerId = null
}, 200)
const {
scrollTop,
scrollLeft
} = e.target
const {
header: headerEl,
body: bodyEl
} = this.getScrollElements()
if (part === 'main') {
if (headerEl) {
headerEl.scrollLeft = scrollLeft
this.horizontalScrollLeft = scrollLeft
}
}
if (bodyEl && bodyEl.scrollTop !== scrollTop) {
bodyEl.scrollTop = scrollTop
}
this.mainTableScrollContainerWidth = bodyEl.offsetWidth
}
if (this.scrollingPart === 'body') {
return
}
const {
scrollLeft
} = e.target
const {
body: bodyEl
} = this.getScrollElements()
bodyEl.scrollLeft = scrollLeft
this.horizontalScrollLeft = scrollLeft
},
handleTableBodyScroll (e) {
if (this.scrollingPart === null) {
this.scrollingPart = 'body'
}
if (this.scrollingPart === 'body') {
window.clearTimeout(this.scrollTimerId)
this.scrollTimerId = window.setTimeout(() => {
this.scrollingPart = null
}, 200)
}
if (this.scrollingPart === 'header') {
return
}
const {
scrollLeft
} = e.target
const {
header: headerEl
} = this.getScrollElements()
if (headerEl) {
headerEl.scrollLeft = scrollLeft
this.horizontalScrollLeft = scrollLeft
}
},
page (page) {
@ -599,14 +595,6 @@ export default {
filter (filters) {
this.changeFilters(filters)
},
collectDOMSizes () {
const {
body: mainTableScrollContainer
} = this.getScrollElements()
this.mainTableScrollContainerWidth = mainTableScrollContainer.offsetWidth
const trHeights = Array.from(mainTableScrollContainer.querySelectorAll('tr')).map(el => el.offsetHeight)
this.trHeights = trHeights
},
checkAll (column) {
const checkedRowKeys = this.syntheticCheckedRowKeys.map(v => v)
this.paginatedData.forEach(row => {

45
src/DataTable/src/TableParts/Body.vue
View File

@ -24,19 +24,11 @@
v-for="(rowData, index) in data"
:key="rowKey === null ? rowData.key : rowKey(rowData)"
class="n-data-table-tr"
:style="{
height: (!main || null) && (trHeights[index] && trHeights[index] + 'px')
}"
:class="Object.assign(
{
'n-data-table-tr--hover': hoveringRowIndex === index,
},
:class="
createClassObject(typeof rowClassName === 'function'
? createClassObject(rowClassName(rowData, index))
: rowClassName)
)"
@mouseenter="handleTrMouseEnter(index)"
@mouseleave="handleTrMouseLeave"
"
>
<template v-for="column in columns">
<td
@ -81,7 +73,6 @@
import cell from './Cell.vue'
import { createCustomWidthStyle, setCheckStatusOfRow, createClassObject } from '../utils'
import NScrollbar from '../../../Scrollbar'
import resizeObserverDelegate from '../../../_utils/delegate/resizeObserverDelegate'
export default {
components: {
@ -110,10 +101,6 @@ export default {
type: Boolean,
default: false
},
trHeights: {
type: Array,
default: null
},
minHeight: {
type: Number,
default: null
@ -138,7 +125,6 @@ export default {
type: Boolean,
default: false
}
},
data () {
return {
@ -156,9 +142,6 @@ export default {
if (!pagination.page) return -1
return pagination.page
},
hoveringRowIndex () {
return this.NDataTable.hoveringRowIndex
},
checkedRowKeys () {
return this.NDataTable.syntheticCheckedRowKeys
},
@ -173,23 +156,7 @@ export default {
}
}
},
mounted () {
if (this.main) {
resizeObserverDelegate.registerHandler(this.$refs.tbody, this.handleTbodyResize)
this.handleTbodyResize()
}
},
beforeDestroy () {
if (this.main) {
resizeObserverDelegate.unregisterHandler(this.$refs.tbody)
}
},
methods: {
handleTbodyResize () {
if (this.main) {
this.NDataTable.collectDOMSizes()
}
},
createClassObject,
handleCheckboxInput (row, checked) {
const newCheckedRowKeys = this.checkedRowKeys.map(v => v)
@ -199,15 +166,9 @@ export default {
getScrollContainer () {
return this.$refs.scrollbar.$refs.scrollContainer
},
handleTrMouseEnter (index) {
this.NDataTable.hoveringRowIndex = index
},
handleTrMouseLeave () {
this.NDataTable.hoveringRowIndex = null
},
createCustomWidthStyle: createCustomWidthStyle,
handleScroll (event) {
this.$emit('scroll', event)
this.NDataTable.handleTableBodyScroll(event)
}
}
}

64
src/DataTable/src/TableParts/Header.vue
View File

@ -1,6 +1,5 @@
<template>
<div
ref="table"
:class="{
[`n-${theme}-theme`]: theme
}"
@ -37,8 +36,7 @@
:class="{
'n-data-table-th--filterable': isColumnFilterable(column),
'n-data-table-th--sortable': isColumnSortable(column),
'n-data-table-th--ellipsis': column.ellipsis,
[`n-data-table-th--fixed-${column.fixed}`]: column.fixed,
[`n-data-table-th--fixed-${column.fixed}`]: column.fixed && column.width,
'n-data-table-th--shadow-after': leftActiveFixedColumn[column.key],
'n-data-table-th--shadow-before': rightActiveFixedColumn[column.key]
}"
@ -47,16 +45,27 @@
<n-checkbox
v-if="column.type === 'selection'"
:key="currentPage"
table-header
:checked="checkboxChecked"
:indeterminate="checkboxIndererminate"
@change="handleCheckboxInput(column)"
/>
<render
:render="typeof column.title === 'function'
? h => (column.title)(h, column, index)
: column.title
"
/>
<div v-if="column.ellipsis" class="n-data-table-th__ellipsis">
<render
:render="typeof column.title === 'function'
? h => (column.title)(h, column, index)
: column.title
"
/>
</div>
<template v-else>
<render
:render="typeof column.title === 'function'
? h => (column.title)(h, column, index)
: column.title
"
/>
</template>
<sort-button
v-if="isColumnSortable(column)"
:column="column"
@ -80,6 +89,7 @@ import SortButton from '../HeaderButton/SortButton'
import FilterButton from '../HeaderButton/FilterButton'
import { createCustomWidthStyle } from '../utils'
import render from '../../../_utils/vue/render'
import resizeObserverDelegate from '../../../_utils/delegate/resizeObserverDelegate'
function isColumnSortable (column) {
return !!column.sorter
@ -203,19 +213,27 @@ export default {
}
},
mounted () {
this.setActiveRight(this.$refs.body)
this.setActiveLeft(this.$refs.body)
resizeObserverDelegate.registerHandler(this.$el, this.handleResize)
this.handleResize()
this.setActiveLeft(this.$el)
this.setActiveRight(this.$el)
this.$emit('set-active-fixed-column', this.leftActiveFixedColumn, this.rightActiveFixedColumn)
},
beforeDestroy () {
resizeObserverDelegate.unregisterHandler(this.$el)
},
methods: {
isColumnSortable,
isColumnFilterable,
createCustomWidthStyle,
handleResize () {
this.tableWidth = this.$el.offsetWidth
},
handleScroll (e) {
this.setActiveRight(e.target)
this.setActiveLeft(e.target)
this.$emit('set-active-fixed-column', this.leftActiveFixedColumn, this.rightActiveFixedColumn)
this.$emit('scroll', e)
this.NDataTable.handleTableHeaderScroll(e)
},
handleCheckboxInput (column) {
if (this.checkboxIndererminate || this.checkboxChecked) {
@ -237,12 +255,14 @@ export default {
setActiveRight (target) {
const rightFixedColumns = this.NDataTable.rightFixedColumns
const scrollLeft = target.scrollLeft
const tableWidth = this.$refs.table.offsetWidth
const tableWidth = this.tableWidth
const scrollWidth = target.scrollWidth
const fixedColumnsRight = this.fixedColumnsRight
const rightActiveFixedColumn = {}
this.rightActiveFixedColumn = rightActiveFixedColumn
for (let i = 0; i < rightFixedColumns.length; i++) {
this.rightActiveFixedColumn = {}
if (scrollLeft + this.fixedColumnsRight[rightFixedColumns[i].key] + tableWidth < scrollWidth) {
this.rightActiveFixedColumn[rightFixedColumns[i].key] = true
if (scrollLeft + fixedColumnsRight[rightFixedColumns[i].key] + tableWidth < scrollWidth) {
rightActiveFixedColumn[rightFixedColumns[i].key] = true
break
}
}
@ -251,14 +271,12 @@ export default {
const leftFixedColumns = this.NDataTable.leftFixedColumns
const scrollLeft = target.scrollLeft
let leftWidth = 0
const fixedColumnsLeft = this.fixedColumnsLeft
this.leftActiveFixedColumn = {}
for (let i = 0; i < leftFixedColumns.length; i++) {
if (scrollLeft > this.fixedColumnsLeft[leftFixedColumns[i].key] - leftWidth) {
this.leftActiveFixedColumn = {}
this.leftActiveFixedColumn[leftFixedColumns[i].key] = true
leftWidth = leftWidth + leftFixedColumns[i].width
continue
} else if (i === 0) {
this.leftActiveFixedColumn = {}
if (scrollLeft > fixedColumnsLeft[leftFixedColumns[i].key] - leftWidth) {
this.leftActiveFixedColumn = { [leftFixedColumns[i].key]: true }
leftWidth += leftFixedColumns[i].width
} else {
break
}

4
src/DataTable/src/utils.js
View File

@ -17,10 +17,6 @@ export function createCustomWidthStyle (column, index, placement) {
return {
width: formatLength(width)
}
} else if (column.type === 'selection') {
return {
width: '48px'
}
}
return null
}

19
src/Drawer/src/DrawerContent.vue Normal file
View File

@ -0,0 +1,19 @@
<template>
<div><slot /></div>
</template>
<script>
export default {
name: 'NDrawerContent',
provide () {
return {
NDrawer: this
}
},
methods: {
getDetachTarget () {
return this.$el
}
}
}
</script>

8
src/Drawer/src/main.vue
View File

@ -15,7 +15,7 @@
:name="transitionName"
@after-leave="handleAfterLeave"
>
<div
<n-drawer-content
v-if="active"
class="n-drawer"
:style="{
@ -29,7 +29,7 @@
}"
>
<slot />
</div>
</n-drawer-content>
</transition>
</div>
</div>
@ -42,11 +42,13 @@ import withapp from '../../_mixins/withapp'
import themeable from '../../_mixins/themeable'
import zindexable from '../../_mixins/zindexable'
import formatLength from '../../_utils/css/formatLength'
import NDrawerContent from './DrawerContent'
export default {
name: 'NDrawer',
components: {
NBasePortal
NBasePortal,
NDrawerContent
},
mixins: [withapp, themeable, zindexable],
model: {

37
src/Dropdown/src/DropdownSubmenu.vue
View File

@ -168,11 +168,16 @@ export default {
this.vanishTimerId = window.setTimeout(() => {
this.menuActivated = false
}, this.duration)
},
getAbsoluteOffsetContainer () {
return this.$el.parentElement
},
getTrackedElement () {
return this.$el.parentElement
}
},
render (h) {
return h('div', {
ref: 'activator',
staticClass: 'n-dropdown-item n-dropdown-item--as-submenu',
on: {
mouseenter: this.handleMouseEnter,
@ -189,22 +194,26 @@ export default {
h(iosArrowForward)
]) : null
]),
h('transition', {
props: {
name: 'n-dropdown-menu-transition'
}
h('div', {
ref: 'content',
staticClass: 'n-dropdown-menu-wrapper'
}, [
this.active ? h(NDropdownMenu, {
ref: 'content',
staticClass: 'n-dropdown-submenu',
style: this.style,
h('transition', {
props: {
options: this.options,
theme: this.syntheticTheme,
defaultFocus: false,
size: this.size
name: 'n-dropdown-menu-transition'
}
}) : null
}, [
this.active ? h(NDropdownMenu, {
staticClass: 'n-dropdown-submenu',
style: this.style,
props: {
options: this.options,
theme: this.syntheticTheme,
defaultFocus: false,
size: this.size
}
}) : null
])
])
])
}

11
src/Form/src/Form.vue
View File

@ -4,7 +4,7 @@
:class="{
'n-form--inline': inline
}"
@keydown.enter="handleKeyDownEnter"
@submit="onSubmit"
>
<slot />
</form>
@ -55,6 +55,10 @@ export default {
return ['small', 'medium', 'large'].includes(value)
},
default: null
},
onSubmit: {
type: Function,
default: e => e.preventDefault()
}
},
data () {
@ -104,11 +108,6 @@ export default {
formItemInstance.clearValidationEffect()
}
}
},
handleKeyDownEnter (e) {
if (e.target.tagName === 'INPUT' && e.target.getAttribute('type')) {
e.preventDefault()
}
}
}
}

3
src/Modal/src/Modal.vue
View File

@ -14,9 +14,6 @@ export default {
zindexable,
themeable
],
provide: {
NModal: true
},
model: {
prop: 'show',
event: 'hide'

80
src/Modal/src/ModalContent.vue
View File

@ -7,7 +7,7 @@
@mousedown="handleMouseDown"
@mouseup="handleMouseUp"
>
<n-scrollbar ref="scrollbar">
<n-scrollbar ref="scrollbar" @scroll="handleScroll">
<transition
name="n-modal-content-slot-transition"
@enter="handleEnter"
@ -101,6 +101,11 @@ export default {
NConfirm,
NCard
},
provide () {
return {
NModal: this
}
},
mixins: [themeable],
props: {
active: {
@ -121,7 +126,10 @@ export default {
},
data () {
return {
styleActive: false
styleActive: false,
transformOriginX: null,
transformOriginY: null,
scrollTop: 0
}
},
created () {
@ -129,14 +137,16 @@ export default {
this.styleActive = true
}
},
updated () {
// this.$nextTick().then(() => {
// console.log('modal rerender')
// console.log(this.$slots.default[1].text)
// console.log(this.$scopedSlots.default()[1].text)
// })
},
methods: {
styleTransformOrigin () {
const transformOriginX = this.transformOriginX
const transformOriginY = this.transformOriginY
if (transformOriginX === null || transformOriginY === null) {
return null
} else {
return `${transformOriginX}px ${transformOriginY + this.scrollTop}px`
}
},
slotDOM () {
const els = (this.$refs.contentInner && this.$refs.contentInner.childNodes) || []
return els
@ -156,8 +166,6 @@ export default {
},
updateTransformOrigin () {
if (
(!this.$parent.$refs.activator ||
!this.$parent.$refs.activator.childElementCount) &&
!this.activateEvent &&
!mousePosition
) {
@ -169,48 +177,30 @@ export default {
offsetTop
} = this.$refs.contentInner
if (
this.$parent.$refs.activator &&
this.$parent.$refs.activator.childElementCount
) {
const {
left: activatorLeft,
top: activatorTop,
width: activatorWidth,
height: activatorHeight
} = this.$parent.$refs.activator.getBoundingClientRect()
const transformOriginX = -(offsetLeft - activatorLeft - activatorWidth / 2)
const transformOriginY = -(offsetTop - activatorTop - scrollTop - activatorHeight / 2)
this.$refs.contentInner.style.transformOrigin = `${transformOriginX}px ${transformOriginY}px`
} else if (
this.activateEvent
) {
const activatorTop = this.activateEvent.clientY
const activatorLeft = this.activateEvent.clientX
const activatorWidth = 0
const activatorHeight = 0
const transformOriginX = -(offsetLeft - activatorLeft - activatorWidth / 2)
const transformOriginY = -(offsetTop - activatorTop - scrollTop - activatorHeight / 2)
this.$refs.contentInner.style.transformOrigin = `${transformOriginX}px ${transformOriginY}px`
const top = this.activateEvent.clientY
const left = this.activateEvent.clientX
this.transformOriginX = -(offsetLeft - left)
this.transformOriginY = -(offsetTop - top - scrollTop)
} else if (mousePosition) {
const activatorTop = mousePosition.y
const activatorLeft = mousePosition.x
const activatorWidth = 0
const activatorHeight = 0
const transformOriginX = -(offsetLeft - activatorLeft - activatorWidth / 2)
const transformOriginY = -(offsetTop - activatorTop - scrollTop - activatorHeight / 2)
this.$refs.contentInner.style.transformOrigin = `${transformOriginX}px ${transformOriginY}px`
const top = mousePosition.y
const left = mousePosition.x
this.transformOriginX = -(offsetLeft - left)
this.transformOriginY = -(offsetTop - top - scrollTop)
}
this.$refs.contentInner.style.transformOrigin = this.styleTransformOrigin()
},
handleBeforeLeave () {
if (this.$parent.$refs.activator &&
this.$parent.$refs.activator.childElementCount) {
this.updateTransformOrigin()
}
this.$refs.contentInner.style.transformOrigin = this.styleTransformOrigin()
this.$refs.scrollbar.disableScrollbar()
this.$emit('before-leave')
},
handleAfterLeave () {
this.styleActive = false
this.scrollTop = 0
this.transformOriginX = null
this.transformOriginY = null
this.$emit('after-leave')
},
handleCloseClick () {
@ -221,6 +211,12 @@ export default {
},
handlePositiveClick () {
this.$emit('positive-click')
},
handleScroll (e) {
this.scrollTop = e.target.scrollTop
},
getDetachTarget () {
return this.$refs.contentInner
}
}
}

3
src/Popover/src/PopoverContent.js
View File

@ -222,6 +222,9 @@ export default {
getTrackedElement () {
return this.activator().$el
},
getAbsoluteOffsetContainer () {
return this.$refs.contentContainer
},
getZindexableContent () {
return this.$el
}

31
src/Slider/src/main.vue
View File

@ -94,7 +94,6 @@
</template>
<script>
import throttle from 'lodash-es/throttle'
import hollowoutable from '../../_mixins/hollowoutable'
import detachable from '../../_mixins/detachable'
import placeable from '../../_mixins/placeable'
@ -161,19 +160,6 @@ export default {
placement: {
type: String,
default: 'top'
},
/** temporal fix, not final solution */
detachable: {
type: Boolean,
default: true
},
positionMode: {
type: String,
default: 'fixed'
},
zindexable: {
type: Boolean,
default: true
}
},
data () {
@ -315,8 +301,10 @@ export default {
}
},
beforeDestroy () {
window.removeEventListener('mousemove', this.throttledHandleFirstHandleMouseMove)
window.removeEventListener('mousemove', this.handleFirstHandleMouseMove)
window.removeEventListener('mouseup', this.handleFirstHandleMouseUp)
window.removeEventListener('mousemove', this.handleSecondHandleMouseMove)
window.removeEventListener('mouseup', this.handleSecondHandleMouseUp)
},
methods: {
handleRailClick (e) {
@ -462,7 +450,7 @@ export default {
this.firstHandleActive = true
this.firstHandleClicked = true
window.addEventListener('mouseup', this.handleFirstHandleMouseUp)
window.addEventListener('mousemove', this.throttledHandleFirstHandleMouseMove)
window.addEventListener('mousemove', this.handleFirstHandleMouseMove)
},
handleSecondHandleMouseDown () {
if (this.range) {
@ -471,7 +459,7 @@ export default {
this.secondHandleActive = true
this.secondHandleClicked = true
window.addEventListener('mouseup', this.handleSecondHandleMouseUp)
window.addEventListener('mousemove', this.throttledHandleSecondHandleMouseMove)
window.addEventListener('mousemove', this.handleSecondHandleMouseMove)
},
handleFirstHandleMouseUp (e) {
this.secondHandleActive = false
@ -484,7 +472,7 @@ export default {
this.tooltipHoverDisplayValue = this.firstHandleValue
}
window.removeEventListener('mouseup', this.handleFirstHandleMouseUp)
window.removeEventListener('mousemove', this.throttledHandleFirstHandleMouseMove)
window.removeEventListener('mousemove', this.handleFirstHandleMouseMove)
},
handleSecondHandleMouseUp (e) {
this.secondHandleActive = false
@ -497,7 +485,7 @@ export default {
this.tooltipHoverDisplayValue = this.secondHandleValue
}
window.removeEventListener('mouseup', this.handleSecondHandleMouseUp)
window.removeEventListener('mousemove', this.throttledHandleSecondHandleMouseMove)
window.removeEventListener('mousemove', this.handleSecondHandleMouseMove)
},
emitInputEvent (value) {
if (this.range) {
@ -525,8 +513,9 @@ export default {
}
}
},
throttledHandleFirstHandleMouseMove: throttle(function (e) { handleFirstHandleMouseMove.call(this, e) }, 60),
throttledHandleSecondHandleMouseMove: throttle(function (e) { handleSecondHandleMouseMove.call(this, e) }, 60),
/** do not throttle to make ui sync with action after final move */
handleFirstHandleMouseMove,
handleSecondHandleMouseMove,
handleFirstHandleMouseEnter () {
if (!this.active) {
this.showTooltip = true

31
src/_base/Portal/src/main.js
View File

@ -3,6 +3,9 @@ export default {
inject: {
NModal: {
default: null
},
NDrawer: {
default: null
}
},
props: {
@ -10,22 +13,30 @@ export default {
type: Function,
default: null
},
target: {
transferTarget: {
type: Function,
default: () => document.body
default: function () {
const NModal = this.NModal
if (NModal) {
return NModal.getDetachTarget()
}
const NDrawer = this.NDrawer
if (NDrawer) {
return NDrawer.getDetachTarget()
}
return document.body
}
}
},
mounted () {
if (this.onMounted) this.onMounted()
if (!this.transferable) return
if (this.$el.parentElement && !this.elementTransferred) {
this.$el.parentElement.removeChild(this.$el)
}
},
beforeDestroy () {
if (!this.transferable) return
const target = this.target()
if (target.contains(this.$el)) {
const target = this.transferTarget()
if (target && target.contains(this.$el)) {
target.removeChild(this.$el)
}
},
@ -34,16 +45,10 @@ export default {
elementTransferred: false
}
},
computed: {
transferable () {
return !this.NModal
}
},
methods: {
transferElement () {
if (!this.transferable) return
if (!this.elementTransferred) {
this.target.appendChild(this.$el)
this.transferTarget().appendChild(this.$el)
this.elementTransferred = true
}
}

52
src/_mixins/detachable.js
View File

@ -6,21 +6,32 @@ import withapp from './withapp'
* Dependency:
* $refs.contentContainer
*
* @prop {HTMLElement} detachTarget determine where should $refs.contentContainer to be detached
* @prop {() => HTMLElement} detachTarget determine where should $refs.contentContainer to be detached
*/
export default {
mixins: [ withapp ],
inject: {
NModal: {
default: null
},
NDrawer: {
default: null
}
},
props: {
detachTarget: {
validator () {
return true
},
default: () => document.body
type: Function,
default: function () {
const NModal = this.NModal
if (NModal) {
return NModal.getDetachTarget()
}
const NDrawer = this.NDrawer
if (NDrawer) {
return NDrawer.getDetachTarget()
}
return document.body
}
},
detachable: {
type: Boolean,
@ -41,7 +52,6 @@ export default {
syntheticDetachable () {
const detachable = this.detachable
if (detachable !== null) return detachable
if (this.NModal) return false
return true
}
},
@ -52,20 +62,22 @@ export default {
}
},
methods: {
getDetachTarget () {
return this.detachTarget()
},
getDetachContent () {
return this.$refs.contentContainer
},
detachContent () {
this.contentContainer = this.$refs.contentContainer
this.$refs.contentContainer.parentNode.removeChild(this.$refs.contentContainer)
const content = this.getDetachContent()
if (content) {
content.parentNode.removeChild(content)
} else {
console.error('[naive-ui/detachable]: fail to detach content')
}
},
appendContent () {
this.detachTarget.append(this.$refs.contentContainer)
}
},
beforeMount () {
if (!this.detachTarget) {
console.error(
'[naive-ui/mixins/detachable]: %s has no `detach-target`.',
this.$options.name
)
this.getDetachTarget().append(this.$refs.contentContainer)
}
},
mounted () {
@ -79,8 +91,10 @@ export default {
},
beforeDestroy () {
if (this.syntheticDetachable) {
if (this.detachTarget.contains(this.$refs.contentContainer)) {
this.detachTarget.removeChild(this.$refs.contentContainer)
const content = this.getDetachContent()
const target = this.getDetachTarget()
if (content && target && target.contains(content)) {
this.getDetachTarget().removeChild(content)
}
}
}

149
src/_mixins/placeable.js
View File

@ -27,13 +27,11 @@ if (!viewMeasurerInitialized && !document.getElementById('n-view-measurer')) {
document.body.appendChild(viewMeasurer)
}
function getActivatorEl (componentInstance) {
const refs = componentInstance.$refs
function getActivatorEl (refs) {
return refs.activator.$el || refs.activator
}
function getContentEl (componentInstance) {
const refs = componentInstance.$refs
function getContentEl (refs) {
return refs.content.$el || refs.content
}
@ -77,46 +75,6 @@ function getActivatorRect (manuallyPositioned, x, y, trackedElement, viewBoundin
}
}
function getPositionInAbsoluteMode (placement) {
const position = {
top: null,
bottom: null,
left: null,
right: null
}
if (placement === 'bottom-start') {
position.top = '100%'
position.left = '0'
} else if (placement === 'bottom-end') {
position.top = '100%'
position.right = '0'
} else if (placement === 'top-start') {
position.bottom = '100%'
position.left = '0'
} else if (placement === 'top-end') {
position.bottom = '100%'
position.right = '0'
} else if (placement === 'right-start') {
position.top = '0'
position.left = '100%'
} else if (placement === 'right-end') {
position.bottom = '0'
position.left = '100%'
} else if (placement === 'left-start') {
position.top = '0'
position.right = '100%'
} else if (placement === 'left-end') {
position.bottom = '0'
position.right = '100%'
} else {
console.error(
'[naive-ui/mixins/placeable]: Placement %s is not supported.',
placement
)
}
return position
}
/**
* Make $refs.content trace $refs.activator, set $refs.contentInner width by the way
*
@ -133,6 +91,9 @@ export default {
inject: {
NModal: {
default: null
},
NDrawer: {
default: null
}
},
props: {
@ -193,6 +154,9 @@ export default {
if (this.NModal) {
return 'absolute'
}
if (this.NDrawer) {
return 'absolute'
}
return 'fixed'
},
positionModeisAbsolute () {
@ -233,80 +197,103 @@ export default {
_getTrackingElement () {
const refs = this.$refs
if (refs && refs.content) {
this.trackingElement = getContentEl(this)
} else if (this.getTrackingElement) {
this.trackingElement = this.getTrackingElement()
return getContentEl(refs)
}
const getTrackingElement = this.getTrackingElement
if (getTrackingElement) {
return getTrackingElement()
}
},
_getTrackedElement () {
const refs = this.$refs
if (refs && refs.activator) {
this.trackedElement = getActivatorEl(this)
} else if (this.getTrackedElement) {
this.trackedElement = this.getTrackedElement()
return getActivatorEl(refs)
}
const getTrackedElement = this.getTrackedElement
if (getTrackedElement) {
return getTrackedElement()
}
},
_getAbsoluteOffsetContainer () {
const getAbsoluteOffsetContainer = this.getAbsoluteOffsetContainer
if (getAbsoluteOffsetContainer) {
return getAbsoluteOffsetContainer()
} else {
const container = this.$refs.contentContainer
if (container) {
return container
} else {
console.error('[naive-ui/placeable]: absolute offset container not found')
}
}
},
setOffsetOfTrackingElement (position, transformOrigin) {
this.trackingElement.style.position = 'absolute'
this.trackingElement.style.top = position.top
this.trackingElement.style.left = position.left
this.trackingElement.style.right = position.right
this.trackingElement.style.bottom = position.bottom
this.trackingElement.style.transformOrigin = transformOrigin
this.trackingElement.setAttribute('n-suggested-transform-origin', transformOrigin)
const trackingElement = this._getTrackingElement()
trackingElement.style.position = 'absolute'
trackingElement.style.top = position.top
trackingElement.style.left = position.left
trackingElement.style.right = position.right
trackingElement.style.bottom = position.bottom
trackingElement.style.transform = position.transform
trackingElement.style.transformOrigin = transformOrigin
trackingElement.setAttribute('n-suggested-transform-origin', transformOrigin)
},
updatePosition (el, cb) {
updatePosition () {
if (!this.active) {
if (!this.keepPlaceableTracingWhenInactive) return
}
if (this.active) {
if (this.disablePlaceableTracingWhenActive) return
}
this._getTrackingElement()
this.trackingElement.style.position = 'absolute'
const trackingElement = this._getTrackingElement()
let trackedElement = null
trackingElement.style.position = 'absolute'
if (this.manuallyPositioned) {
if (!this.trackingElement) {
if (!trackingElement) {
console.error('[naive-ui/mixins/placeable]: trackingElement not found.')
return
}
} else {
this._getTrackedElement()
if (!this.trackedElement || !this.trackingElement) {
trackedElement = this._getTrackedElement()
if (!trackedElement || !trackingElement) {
console.error('[naive-ui/mixins/placeable]: trakedElement or trackingElement not found.')
return
}
}
// debugger
const viewBoundingRect = getViewBoundingRect()
const activatorRect = getActivatorRect(this.manuallyPositioned, this.x, this.y, this.trackedElement, viewBoundingRect)
const activatorRect = getActivatorRect(this.manuallyPositioned, this.x, this.y, trackedElement, viewBoundingRect)
const contentInner = getContentInner(this)
if (this.widthMode === 'activator' && contentInner) {
contentInner.style.minWidth = activatorRect.width + 'px'
}
const contentBoundingClientRect = {
width: this.trackingElement.offsetWidth,
height: this.trackingElement.offsetHeight
let adjustedPlacement = this.placement
let contentBoundingClientRect = null
if (this.flip) {
contentBoundingClientRect = {
width: trackingElement.offsetWidth,
height: trackingElement.offsetHeight
}
adjustedPlacement = getAdjustedPlacementOfTrackingElement(this.placement, activatorRect, contentBoundingClientRect, true)
}
// console.log('activatorRect', activatorRect)
// console.log('contentBoundingClientRect', contentBoundingClientRect)
const adjustedPlacement = getAdjustedPlacementOfTrackingElement(this.placement, activatorRect, contentBoundingClientRect, this.flip)
const suggestedTransformOrigin = getTransformOriginByPlacement(adjustedPlacement)
let offset = getPosition(adjustedPlacement, activatorRect, contentBoundingClientRect)
let offset = null
this.adjustedPlacement = adjustedPlacement
if (this.positionModeisAbsolute) {
offset = getPositionInAbsoluteMode(adjustedPlacement)
const absoluteOffsetContainer = this._getAbsoluteOffsetContainer()
if (absoluteOffsetContainer) {
offset = getPosition(
adjustedPlacement,
absoluteOffsetContainer.getBoundingClientRect(),
activatorRect
)
}
} else {
offset = getPosition(adjustedPlacement, viewBoundingRect, activatorRect)
}
this.setOffsetOfTrackingElement(offset, suggestedTransformOrigin)
if (el && cb) {
cb(el, activatorRect, contentBoundingClientRect)
}
},
registerResizeListener () {
resizeDelegate.registerHandler(this.updatePosition)
},
registerScrollListeners () {
this._getTrackedElement()
let currentElement = getParentNode(this.trackedElement)
let currentElement = getParentNode(this._getTrackedElement())
while (true) {
currentElement = getScrollParent(currentElement)
if (currentElement === null) break

1
src/_utils/component/dropdown.js
View File

@ -46,7 +46,6 @@ function createSelectOptionsFromDropdownOptions (dropdownOptions, DropdownSubmen
selectOptions.push(createSelectOptionForDropdownDivider(option, DropdownDivider))
}
})
console.log('createSelectOptionsFromDropdownOptions', selectOptions)
return selectOptions
}

136
src/_utils/dom/calcPlacementTransform.js
View File

@ -5,13 +5,6 @@ const oppositeDirection = {
right: 'left'
}
// const adjacentDirections = {
// top: ['left', 'right'],
// right: ['top', 'bottom'],
// bottom: ['left', 'right'],
// left: ['top', 'bottom']
// }
const lengthToCompare = {
top: 'height',
bottom: 'height',
@ -74,86 +67,71 @@ export function getAdjustedPlacementOfTrackingElement (placement, trackedRect, t
} else {
return adjustedPosition ? (direction + '-' + adjustedPosition) : direction
}
// else {
// const [direction1, direction2] = adjacentDirections[direction]
// let adjacentDirectionWithMoreSpace = direction1
// if (trackedRect[direction1] < trackedRect[direction2]) {
// adjacentDirectionWithMoreSpace = direction2
// }
// if (trackedRect[adjacentDirectionWithMoreSpace] < trackingRect[lengthToCompare[adjacentDirections]]) {
// /**
// * If no direction has required space, simply not flip tracking element to any side.
// */
// return placement
// }
// return adjacentDirectionWithMoreSpace
// }
}
export function getTransformOriginByPlacement (placement) {
return placementToTransformOrigin[placement] || null
}
export function getPosition (placement, trackedRect, trackingRect) {
const position = {
export function getPosition (placement, offsetContainerRect, trackedRect) {
const offset = {
top: null,
bottom: null,
left: null,
right: null,
top: null,
bottom: null
transform: null
}
switch (placement) {
case 'bottom-start':
position.top = trackedRect.top + trackedRect.height
position.left = trackedRect.left
break
case 'bottom':
position.top = trackedRect.top + trackedRect.height
position.left = trackedRect.left + trackedRect.width / 2 - trackingRect.width / 2
break
case 'bottom-end':
position.top = trackedRect.top + trackedRect.height
position.left = trackedRect.left + trackedRect.width - trackingRect.width
break
case 'top-start':
position.top = trackedRect.top - trackingRect.height
position.left = trackedRect.left
break
case 'top':
position.top = trackedRect.top - trackingRect.height
position.left = trackedRect.left + trackedRect.width / 2 - trackingRect.width / 2
break
case 'top-end':
position.top = trackedRect.top - trackingRect.height
position.left = trackedRect.left + trackedRect.width - trackingRect.width
break
case 'left-start':
position.top = trackedRect.top
position.left = trackedRect.left - trackingRect.width
break
case 'left':
position.top = trackedRect.top + trackedRect.height / 2 - trackingRect.height / 2
position.left = trackedRect.left - trackingRect.width
break
case 'left-end':
position.top = trackedRect.top + trackedRect.height - trackingRect.height
position.left = trackedRect.left - trackingRect.width
break
case 'right-start':
position.top = trackedRect.top
position.left = trackedRect.left + trackedRect.width
break
case 'right':
position.top = trackedRect.top + trackedRect.height / 2 - trackingRect.height / 2
position.left = trackedRect.left + trackedRect.width
break
case 'right-end':
position.top = trackedRect.top + trackedRect.height - trackingRect.height
position.left = trackedRect.left + trackedRect.width
break
if (placement === 'bottom-start') {
offset.top = (trackedRect.top - offsetContainerRect.top + trackedRect.height) + 'px'
offset.left = (trackedRect.left - offsetContainerRect.left) + 'px'
} else if (placement === 'bottom-end') {
offset.top = (trackedRect.top - offsetContainerRect.top + trackedRect.height) + 'px'
offset.left = (trackedRect.left - offsetContainerRect.left + trackedRect.width) + 'px'
offset.transform = 'translateX(-100%)'
} else if (placement === 'top-start') {
offset.top = (trackedRect.top - offsetContainerRect.top) + 'px'
offset.left = (trackedRect.left - offsetContainerRect.left) + 'px'
offset.transform = 'translateY(-100%)'
} else if (placement === 'top-end') {
offset.top = (trackedRect.top - offsetContainerRect.top) + 'px'
offset.left = (trackedRect.left - offsetContainerRect.left + trackedRect.width) + 'px'
offset.transform = 'translateY(-100%) translateX(-100%)'
} else if (placement === 'right-start') {
offset.top = (trackedRect.top - offsetContainerRect.top) + 'px'
offset.left = (trackedRect.left - offsetContainerRect.left + trackedRect.width) + 'px'
} else if (placement === 'right-end') {
offset.top = (trackedRect.top - offsetContainerRect.top + trackedRect.height) + 'px'
offset.left = (trackedRect.left - offsetContainerRect.left + trackedRect.width) + 'px'
offset.transform = 'translateY(-100%)'
} else if (placement === 'left-start') {
offset.top = (trackedRect.top - offsetContainerRect.top) + 'px'
offset.left = (trackedRect.left - offsetContainerRect.left) + 'px'
offset.transform = 'translateX(-100%)'
} else if (placement === 'left-end') {
offset.top = (trackedRect.top - offsetContainerRect.top + trackedRect.height) + 'px'
offset.left = (trackedRect.left - offsetContainerRect.left) + 'px'
offset.transform = 'translateX(-100%) translateY(-100%)'
} else if (placement === 'top') {
offset.top = (trackedRect.top - offsetContainerRect.top) + 'px'
offset.left = (trackedRect.left - offsetContainerRect.left + trackedRect.width / 2) + 'px'
offset.transform = 'translateX(-50%) translateY(-100%)'
} else if (placement === 'right') {
offset.top = (trackedRect.top - offsetContainerRect.top + trackedRect.height / 2) + 'px'
offset.left = (trackedRect.left - offsetContainerRect.left + trackedRect.width) + 'px'
offset.transform = 'translateY(-50%)'
} else if (placement === 'bottom') {
offset.top = (trackedRect.top - offsetContainerRect.top + trackedRect.height) + 'px'
offset.left = (trackedRect.left - offsetContainerRect.left + trackedRect.width / 2) + 'px'
offset.transform = 'translateX(-50%)'
} else if (placement === 'left') {
offset.top = (trackedRect.top - offsetContainerRect.top + trackedRect.height / 2) + 'px'
offset.left = (trackedRect.left - offsetContainerRect.left) + 'px'
offset.transform = 'translateX(-100%) translateY(-50%)'
} else {
console.error(
'[naive-ui/mixins/placeable]: Placement %s is not supported.',
placement
)
}
if (position.left !== null) position.left = position.left + 'px'
if (position.right !== null) position.right = position.right + 'px'
if (position.top !== null) position.top = position.top + 'px'
if (position.bottom !== null) position.bottom = position.bottom + 'px'
return position
return offset
}

16
styles/Alert.scss
View File

@ -85,8 +85,20 @@
}
@include e(close) {
@include b(icon) {
fill: $--alert-close-color;
stroke: $--alert-close-color;
fill: map-get($--alert-close-color, 'default');
stroke: map-get($--alert-close-color, 'default');
}
&:hover {
@include b(icon) {
fill: map-get($--alert-close-color, 'hover');
stroke: map-get($--alert-close-color, 'hover');
}
}
&:active {
@include b(icon) {
fill: map-get($--alert-close-color, 'active');
stroke: map-get($--alert-close-color, 'active');
}
}
}
@include alert-type-mixin('default');

1
styles/BaseSelectMenu.scss
View File

@ -70,6 +70,7 @@
transition: color .3s $--n-ease-in-out-cubic-bezier;
text-overflow: ellipsis;
overflow: hidden;
box-sizing: border-box;
@include m(grouped) {
padding: 0 21px;
}

11
styles/Card.scss
View File

@ -49,6 +49,9 @@
}
}
@include e(content, footer) {
&:first-child {
padding-top: map-get($--n-card-margin-bottom, $size);
}
padding: 0 map-get($--n-card-margin-left, $size) map-get($--n-card-margin-bottom, $size) map-get($--n-card-margin-left, $size) ;
font-size: 14px;
}
@ -166,7 +169,13 @@
cursor: pointer;
transition: fill .3s $--n-ease-in-out-cubic-bezier;
}
fill: $--card-close-fill;
fill: map-get($--card-close-color, 'default');
&:hover {
fill: map-get($--card-close-color, 'hover');
}
&:active {
fill: map-get($--card-close-color, 'active');
}
}
}
@include e(action) {

20
styles/Checkbox.scss
View File

@ -75,6 +75,21 @@
}
}
}
@include as-modal-content {
@include b(checkbox) {
@include m(table-header) {
@include not-m(checked) {
@include not-m(indeterminate) {
@include not-m(disabled) {
@include b(checkbox-box) {
background-color: map-get($--checkbox-background-color, 'modal-table');
}
}
}
}
}
}
}
@include b(checkbox) {
&:hover {
@include b(checkbox-box) {
@ -96,6 +111,11 @@
@include e(label) {
color: map-get($--checkbox-label-text-color, 'default');
}
@include m(table-header) {
@include b(checkbox-box) {
background-color: map-get($--checkbox-background-color, 'table');
}
}
@include m(checked, indeterminate) {
&:focus {
@include b(checkbox-box) {

12
styles/Confirm.scss
View File

@ -61,8 +61,16 @@
}
}
@include e(close) {
fill: $--confirm-close-color;
stroke: $--confirm-close-color;
fill: map-get($--confirm-close-color, 'default');
stroke: map-get($--confirm-close-color, 'default');
&:hover {
fill: map-get($--confirm-close-color, 'hover');
stroke: map-get($--confirm-close-color, 'hover');
}
&:active {
fill: map-get($--confirm-close-color, 'active');
stroke: map-get($--confirm-close-color, 'active');
}
}
color: $--confirm-title-text-color;
}

135
styles/DataTable.scss
View File

@ -51,7 +51,7 @@
justify-content: flex-end;
}
}
@include b(data-table-tables-wrapper) {
@include b(data-table-wrapper) {
@include once {
position: relative;
transition: border-color .3s $--n-ease-in-out-cubic-bezier;
@ -60,12 +60,6 @@
overflow: hidden;
line-height: 1.75;
}
@include b(data-table-table-wrapper) {
@include once {
transition: border-color .3s $--n-ease-in-out-cubic-bezier;
}
background-color: $--data-table-body-background-color;
}
}
@include b(data-table-table) {
@include once {
@ -77,22 +71,17 @@
border-collapse: separate;
border-spacing: 0;
}
background-color: $--data-table-body-background-color;
background-color: map-get($--data-table-body-background-color, 'default');
@include b(data-table-thead) {
@include once {
transition: background-color .3s $--n-ease-in-out-cubic-bezier;
}
background-color: $--data-table-header-background-color;
background-color: map-get($--data-table-header-background-color, 'default');
}
@include b(data-table-tbody) {
@include b(data-table-tr) {
&:hover {
background-color: map-get($--data-table-row-background-color, 'hover');
@include b(data-table-td) {
background-color: map-get($--data-table-row-background-color, 'hover');
}
}
@include m(hover) {
@include b(data-table-tr) {
&:hover {
background-color: map-get($--data-table-row-background-color, 'hover');
@include b(data-table-td) {
background-color: map-get($--data-table-row-background-color, 'hover');
}
}
@ -128,7 +117,7 @@
display: inline-block;
position: absolute;
top: 0;
bottom: 0;
bottom: -1px;
transition: box-shadow .2s $--n-ease-in-out-cubic-bezier;
right: -16px;
}
@ -142,13 +131,13 @@
display: inline-block;
position: absolute;
top: 0;
bottom: 0;
bottom: -1px;
transition: box-shadow .2s $--n-ease-in-out-cubic-bezier;
left: -16px;
}
}
}
background-color: $--data-table-body-background-color;
background-color: map-get($--data-table-body-background-color, 'default');
@include m(shadow-before) {
&::before {
box-shadow: inset -16px 0 12px -16px $--data-table-fixed-column-box-shadow-color;
@ -159,9 +148,8 @@
box-shadow: inset 16px 0 12px -16px $--data-table-fixed-column-box-shadow-color;
}
}
border-color: $--data-table-border-color;
color: $--data-table-body-text-color;
border-bottom: 1px solid $--data-table-border-color;
border-bottom: 1px solid map-get($--data-table-border-color, 'default');
}
@include b(data-table-th) {
@include once {
@ -176,25 +164,25 @@
@include m(filterable) {
padding-right: 36px;
}
@include m(ellipsis) {
@include e(ellipsis) {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
}
border-color: $--data-table-border-color;
background-color: map-get($--data-table-header-background-color, 'default');
border-color: map-get($--data-table-border-color, 'default');
color: $--data-table-header-text-color;
@include m(sortable) {
cursor: pointer;
&:hover {
background-color: map-get($--data-table-header-cell-background-color, 'hover');
background-color: map-get($--data-table-header-background-color, 'hover');
}
}
@include m(fixed-left) {
left: 0;
position: sticky;
z-index: 1;
background-color: $--data-table-header-fixed-background-color;
&::after {
content: "";
width: 16px;
@ -210,7 +198,6 @@
right: 0;
position: sticky;
z-index: 1;
background-color: $--data-table-header-fixed-background-color;
&::before {
content: "";
width: 16px;
@ -235,34 +222,34 @@
}
}
@include not-m(single-line) {
@include b(data-table-tables-wrapper) {
@include b(data-table-wrapper) {
@include b(data-table-table){
@include b(data-table-th) {
border-right: 1px solid $--data-table-border-color;
border-right: 1px solid map-get($--data-table-border-color, 'default');
&:last-child {
border-right: 0px solid $--data-table-border-color;
border-right: 0px solid map-get($--data-table-border-color, 'default');
}
}
@include b(data-table-td) {
border-right: 1px solid $--data-table-border-color;
border-right: 1px solid map-get($--data-table-border-color, 'default');
&:last-child {
border-right: 0px solid $--data-table-border-color;
border-right: 0px solid map-get($--data-table-border-color, 'default');
}
}
}
}
}
@include m(bordered) {
@include b(data-table-tables-wrapper) {
@include b(data-table-wrapper) {
overflow: hidden;
border: 1px solid $--data-table-border-color;
border: 1px solid map-get($--data-table-border-color, 'default');
border-bottom-left-radius: $--n-data-table-border-radius;
border-bottom-right-radius: $--n-data-table-border-radius;
@include b(data-table-table){
@include b(data-table-tr) {
&:last-child {
@include b(data-table-td) {
border-bottom: 0px solid $--data-table-border-color;
border-bottom: 0px solid map-get($--data-table-border-color, 'default');
}
}
}
@ -281,7 +268,7 @@
}
scrollbar-width: none;
}
border-bottom: 1px solid $--data-table-border-color;
border-bottom: 1px solid map-get($--data-table-border-color, 'default');
@include b(data-table-th) {
@include b(data-table-sort-button) {
@include once {
@ -321,6 +308,7 @@
@include b(data-table-filter-button) {
@include once {
position: absolute;
z-index: auto;
right: 0;
width: 36px;
top: 0;
@ -330,6 +318,7 @@
@include e(icon-wrapper) {
@include once {
position: absolute;
z-index: auto;
right: 0;
left: 0;
top: 0;
@ -340,7 +329,7 @@
transition: background-color .3s $--n-ease-in-out-cubic-bezier;
}
&:hover {
background-color: map-get($--data-table-header-cell-background-color, 'hover');
background-color: map-get($--data-table-icon-button-background-color, 'hover');
}
@include b(icon) {
@include once {
@ -352,12 +341,12 @@
}
@include m(popover-visible) {
@include e(icon-wrapper) {
background-color: map-get($--data-table-header-cell-background-color, 'hover');
background-color: map-get($--data-table-icon-button-background-color, 'hover');
}
}
@include m(active) {
@include e(icon-wrapper) {
background-color: map-get($--data-table-header-cell-background-color, 'hover');
background-color: map-get($--data-table-icon-button-background-color, 'hover');
@include b(icon) {
fill: map-get($--data-table-button-color, 'active');
stroke: map-get($--data-table-button-color, 'active');
@ -368,6 +357,72 @@
}
}
}
@include as-modal-content {
@include b(data-table) {
@include b(data-table-table) {
background-color: map-get($--data-table-body-background-color, 'modal');
@include b(data-table-thead) {
background-color: map-get($--data-table-header-background-color, 'modal');
}
@include b(data-table-th) {
border-color: map-get($--data-table-border-color, 'modal');
background-color: map-get($--data-table-header-background-color, 'modal');
@include m(sortable) {
&:hover {
background-color: map-get($--data-table-header-background-color, 'modal-hover');
}
}
}
@include b(data-table-tr) {
&:hover {
background-color: map-get($--data-table-row-background-color, 'modal-hover');
@include b(data-table-td) {
background-color: map-get($--data-table-row-background-color, 'modal-hover');
}
}
}
@include b(data-table-td) {
border-color: map-get($--data-table-border-color, 'modal');
background-color: map-get($--data-table-body-background-color, 'modal')
}
}
@include not-m(single-line) {
@include b(data-table-wrapper) {
@include b(data-table-table){
@include b(data-table-th) {
border-right: 1px solid map-get($--data-table-border-color, 'modal');
&:last-child {
border-right: 0px solid map-get($--data-table-border-color, 'modal');
}
}
@include b(data-table-td) {
border-right: 1px solid map-get($--data-table-border-color, 'modal');
&:last-child {
border-right: 0px solid map-get($--data-table-border-color, 'modal');
}
}
}
}
}
@include m(bordered) {
@include b(data-table-wrapper) {
border: 1px solid map-get($--data-table-border-color, 'modal');
@include b(data-table-table){
@include b(data-table-tr) {
&:last-child {
@include b(data-table-td) {
border-bottom: 0px solid map-get($--data-table-border-color, 'modal');
}
}
}
}
}
}
@include b(data-table-base-table-header) {
border-bottom: 1px solid map-get($--data-table-border-color, 'modal');
}
}
}
}
@include b(data-table-filter-menu) {

11
styles/Descriptions.scss
View File

@ -76,6 +76,7 @@
border-radius: $--n-descriptions-border-radius;
overflow: hidden;
}
background: map-get($--descriptions-content-background-color, 'default');
border: 1px solid $--descriptions-border-color;
@include b(descriptions-table) {
@include b(descriptions-table-row) {
@ -98,7 +99,6 @@
}
}
@include b(descriptions-table-content) {
background: $--descriptions-content-background-color;
&:not(:last-child) {
border-right: 1px solid $--descriptions-border-color;
}
@ -179,4 +179,13 @@
}
}
}
@include as-modal-content {
@include b(descriptions) {
@include m(bordered) {
@include b(descriptions-table-wrapper) {
background: map-get($--descriptions-content-background-color, 'modal');
}
}
}
}
}

4
styles/Dropdown.scss
View File

@ -90,10 +90,12 @@
@include b(dropdown-divider) {
margin: 2px 0;
}
@include b(dropdown-menu-wrapper) {
position: absolute !important;
}
@include b(dropdown-submenu) {
@include fade-in-scale-up-transition(dropdown-menu);
margin-top: 0;
position: absolute !important;
margin-left: 6px;
margin-right: 6px;
}

1
styles/Input.scss
View File

@ -328,6 +328,7 @@
border-color: map-get($--input-border-mask-border-color, 'error-focus');
box-shadow: map-get($--input-border-mask-box-shadow, 'error-focus');
}
background-color: map-get($--input-background-color, 'error-focus');
}
@include e(input, textarea) {
caret-color: map-get($--input-caret-color, 'error');

1
styles/Layout.scss
View File

@ -40,6 +40,7 @@
@include once {
transition:
background-color .3s $--n-ease-in-out-cubic-bezier,
box-shadow .3s $--n-ease-in-out-cubic-bezier,
border-color .3s $--n-ease-in-out-cubic-bezier;
box-sizing: border-box;
width: 100%;

14
styles/List.scss
View File

@ -12,8 +12,11 @@
list-style-type: none;
}
color: $--list-text-color;
background-color: $--list-background-color;
@include m(bordered) {
background-color: map-get(
$--list-background-color,
'default'
);
@include once {
border-radius: $--n-list-border-radius;
}
@ -70,4 +73,13 @@
}
}
}
@include as-modal-content {
@include b(list) {
@include m(bordered) {
background-color: map-get(
$--list-background-color, 'modal'
);
}
}
}
}

2
styles/Menu.scss
View File

@ -202,6 +202,7 @@
margin-left: 6px;
display: inline-block;
transition: color 0.3s $--n-ease-in-out-cubic-bezier;
font-size: 13px;
}
color: map-get($--menu-item-content-extra-text-color, 'default');
}
@ -262,6 +263,7 @@
color: $--menu-item-group-text-color;
@include once {
cursor: default;
font-size: 13px;
height: 40px;
display: flex;
align-items: center;

2
styles/Modal.scss
View File

@ -69,7 +69,7 @@
}
@include b(modal-content-slot) {
transform: $--n-transform-debounce-scale;
position: relative;
&#{&}-transition-enter-active {
opacity: 1;
transition: opacity .3s cubic-bezier(.4, 0, .2, 1), transform .3s cubic-bezier(0.0, 0.0, 0.2, 1);

16
styles/Notification.scss
View File

@ -113,8 +113,20 @@
cursor: pointer;
}
@include b(icon) {
fill: $--notification-close-fill;
stroke: $--notification-close-fill;
fill: map-get($--notification-close-color, 'default');
stroke: map-get($--notification-close-color, 'default');
}
&:hover {
@include b(icon) {
fill: map-get($--notification-close-color, 'hover');
stroke: map-get($--notification-close-color, 'hover');
}
}
&:active {
@include b(icon) {
fill: map-get($--notification-close-color, 'active');
stroke: map-get($--notification-close-color, 'active');
}
}
}
@include e(avatar) {

59
styles/Tooltip.scss
View File

@ -12,64 +12,9 @@
box-shadow: $--tooltip-box-shadow;
background-color: $--tooltip-background-color;
color: $--tooltip-text-color;
&[n-placement$="top-start"] {
@include b(popover-arrow-wrapper) {
@include b(popover-arrow) {
border-top-color: $--tooltip-background-color;
}
}
&[n-placement$="top"] {
@include b(popover-arrow) {
border-top-color: $--tooltip-background-color;
}
}
&[n-placement$="top-end"] {
@include b(popover-arrow) {
border-top-color: $--tooltip-background-color;
}
}
&[n-placement$="bottom-start"] {
@include b(popover-arrow) {
border-bottom-color: $--tooltip-background-color;
}
}
&[n-placement$="bottom"] {
@include b(popover-arrow) {
border-bottom-color: $--tooltip-background-color;
}
}
&[n-placement$="bottom-end"] {
@include b(popover-arrow) {
border-bottom-color: $--tooltip-background-color;
}
}
&[n-placement$="left-start"] {
@include b(popover-arrow) {
border-left-color: $--tooltip-background-color;
}
}
&[n-placement$="left"] {
@include b(popover-arrow) {
border-left-color: $--tooltip-background-color;
}
}
&[n-placement$="left-end"] {
@include b(popover-arrow) {
border-left-color: $--tooltip-background-color;
}
}
&[n-placement$="right-start"] {
@include b(popover-arrow) {
border-right-color: $--tooltip-background-color;
}
}
&[n-placement$="right"] {
@include b(popover-arrow) {
border-right-color: $--tooltip-background-color;
}
}
&[n-placement$="right-end"] {
@include b(popover-arrow) {
border-right-color: $--tooltip-background-color;
background-color: $--tooltip-background-color;
}
}
}

4
styles/Transfer.scss
View File

@ -114,7 +114,7 @@
@include b(transfer-list) {
@include once {
background-clip: padding-box;
width: calc(50% - 48px);
width: calc(50% - 36px);
position: relative;
transition: background-color .3s $--n-ease-in-out-cubic-bezier;
border-radius: $--n-transfer-border-radius;
@ -300,7 +300,7 @@
}
@include b(transfer-gap) {
@include once {
width: 96px;
width: 72px;
display: flex;
align-items: center;
justify-content: center;

11
styles/base.scss
View File

@ -32,10 +32,11 @@ input {
@include b(modal-content) {
@include b(positioning-container) {
position: absolute;
z-index: 2;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
}
@include b(drawer) {
@include b(positioning-container) {
position: absolute;
}
}

2
styles/mixins/mixins.scss
View File

@ -123,7 +123,7 @@ $default-theme: 'light';
}
@mixin as-modal-content {
&.#{$namespace}-modal-content {
&.#{$namespace}-modal-content, &.#{$namespace}-drawer {
@content;
}
}

6
styles/themes/common.scss
View File

@ -1,4 +1,4 @@
$--n-font-family: 'FiraSans';
$--n-font-family: 'FiraSans', '-apple-system';
$--n-mono-font-family: 'FiraCode', monospace;
$--n-strong-weight: 600;
@ -221,8 +221,8 @@ $--n-tree-node-border-radius: $--n-light-border-radius;
/** typography */
$--n-typography-code-border-radius: $--n-light-border-radius;
$--n-typography-header-font-size: (
'1': 28px,
'2': 24px,
'1': 30px,
'2': 26px,
'3': 18px,
'4': 16px,
'5': 14px,

8
styles/themes/dark/components/Alert.scss
View File

@ -7,7 +7,7 @@
'error': change-color($--n-error-hs-color, $alpha: .35)
) !global;
$--alert-background-color: (
'default': $--n-input-background-color,
'default': $--n-input-overlay-background-color,
'success': change-color($--n-success-hs-color, $alpha: .25),
'info': change-color($--n-info-hs-color, $alpha: .25),
'warning': change-color($--n-warning-hs-color, $alpha: .25),
@ -34,5 +34,9 @@
'warning': $--n-secondary-text-color,
'error': $--n-secondary-text-color
) !global;
$--alert-close-color: $--n-close-color !global;
$--alert-close-color: (
'default': $--n-close-color,
'hover': $--n-close-hover-color,
'active': $--n-close-color
) !global;
}

2
styles/themes/dark/components/Avatar.scss
View File

@ -1,3 +1,3 @@
@mixin setup-dark-avatar {
$--avatar-background-color: $--n-avatar-background-color !global;
$--avatar-background-color: $--n-avatar-overlay-background-color !global;
}

2
styles/themes/dark/components/BaseSelectMenu.scss
View File

@ -7,7 +7,7 @@
"disabled-selected": change-color($--n-primary-color, $alpha: $--n-disabled-opacity)
) !global;
$--base-select-menu-option-background-color: (
'selected': change-color($--n-primary-color, $alpha: .15)
'selected': $--n-pending-overlay-color
) !global;
$--base-select-menu-group-header-text-color: (
'default': $--n-tertiary-text-color

2
styles/themes/dark/components/BaseSelection.scss
View File

@ -4,7 +4,7 @@
'disabled': $--n-disabled-text-color
) !global;
$--base-selection-background-color: (
'default': $--n-input-background-color,
'default': $--n-input-overlay-background-color,
'disabled': $--n-disabled-background-color,
'active': change-color($--n-primary-color, $alpha: 0.1),
'error-active': change-color($--n-error-color, $alpha: 0.1),

2
styles/themes/dark/components/BaseTrackingRect.scss
View File

@ -1,3 +1,3 @@
@mixin setup-dark-base-tracking-rect {
$--base-tracking-rect-background-color: change-color($--n-primary-color, $alpha: .15) !global;
$--base-tracking-rect-background-color: $--n-pending-overlay-color !global;
}

8
styles/themes/dark/components/Card.scss
View File

@ -3,6 +3,10 @@
$--card-text-color: $--n-secondary-text-color !global;
$--card-title-text-color: $--n-primary-text-color !global;
$--card-border-color: $--n-divider-color !global;
$--card-action-background-color: $--n-action-background-color !global;
$--card-close-fill: $--n-close-color !global;
$--card-action-background-color: $--n-action-overlay-background-color !global;
$--card-close-color: (
'default': $--n-close-color,
'hover': $--n-close-hover-color,
'active': $--n-close-color
) !global;
}

Some files were not shown because too many files have changed in this diff Show More