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

Merge pull request #35 from TuSimple/freestyle

Browse Source 
Freestyle
This commit is contained in:
07akioni 2020-02-13 22:28:09 +08:00 committed by GitHub Enterprise
commit 80e29fd9cb
160 changed files with 1328 additions and 658 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
.eslintrc.js
View File

@ -15,4 +15,10 @@ module.exports = {
}
]
},
overrides: [
{
files: 'src/_icons/**/*',
rules: {}
}
]
}

31
build/naiveSCSSVarPlugin.js Normal file
View File

@ -0,0 +1,31 @@
const sass = require('node-sass')
const path = require('path')
function createStyleScheme (css) {
return css
.replace(':export', 'export default')
.replace(/:\s/g, `: '`)
.replace(/;/g, `',`)
}
module.exports = function naiveSCSSExportVariable () {
return {
name: 'naive-scss-export-variable',
resolveId (source, importer) {
if (source.endsWith('.scss')) {
return path.resolve(path.dirname(importer), source)
}
return null
},
load (id) {
if (id.endsWith('.scss')) {
const css = sass.renderSync({
file: id,
outputStyle: 'expanded'
}).css.toString()
const styleScheme = createStyleScheme(css)
return styleScheme
}
}
}
}

2
build/webpack.demo.js
View File

@ -9,7 +9,7 @@ const VueLoaderPlugin = require('vue-loader/lib/plugin')
const webpackConfig = {
mode: 'development',
entry: './demo/indexUsingCss.js',
entry: './demo/deploymentIndex.js',
output: {
path: path.resolve(process.cwd()),
publicPath: '/',

2
build/webpack.dev.js
View File

@ -9,7 +9,7 @@ const VueLoaderPlugin = require('vue-loader/lib/plugin')
const webpackConfig = {
mode: 'development',
entry: './demo/index.js',
entry: './demo/devIndex',
output: {
path: path.resolve(process.cwd()),
publicPath: '/',

2
build/webpack.doc.js
View File

@ -10,7 +10,7 @@ const ExtractTextPlugin = require('extract-text-webpack-plugin')
const webpackConfig = {
mode: 'production',
entry: './demo/indexUsingCss.js',
entry: './demo/deploymentIndex.js',
output: {
path: path.resolve(__dirname, '..', 'doc', 'dist'),
publicPath: '/',

54
build/webpack.private-doc.js
View File

@ -1,54 +0,0 @@
/**
* Webpack config to pack documentation page
*/
const path = require('path')
const webpack = require('webpack')
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 BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
const webpackConfig = {
mode: 'production',
// mode: 'development',
entry: './demo/privateIndex.js',
output: {
path: path.resolve(__dirname, '..', 'doc', 'dist'),
publicPath: '/',
filename: '[name].[hash:7].js',
chunkFilename: '[name].[hash:7].js'
},
resolve: {
extensions: ['.js', '.vue', '.json', '.entry'],
alias: config.alias,
modules: ['node_modules']
},
performance: {
hints: false
},
stats: {
children: false
},
module: {
rules: config.docLoaders
},
plugins: [
new HtmlWebpackPlugin({
template: './demo/index.tpl',
favicon: './demo/assets/images/naivelogo.svg'
}),
new VueLoaderPlugin(),
new webpack.LoaderOptionsPlugin({
vue: {
compilerOptions: {
preserveWhitespace: false
}
}
}),
new ExtractTextPlugin('[name].[hash:7].css'),
new BundleAnalyzerPlugin()
]
}
module.exports = webpackConfig

0
demo/indexUsingCss.js → demo/deploymentIndex.js
View File

0
demo/index.js → demo/devIndex.js
View File

2
demo/documentation/components/icon/enUS/icons.vue
View File

@ -1,11 +1,11 @@
<template>
<div>
<n-input
v-model="pattern"
:style="{
marginBottom: '24px',
marginTop: '18px'
}"
v-model="pattern"
placeholder="Search Icons"
/>
<div class="icons">

2
demo/documentation/components/popconfirm/zhCN/event.md
View File

@ -8,7 +8,7 @@
<template v-slot:activator>
<n-button>退出游戏</n-button>
</template>
我看 B 站的时候，听说有些冲钱也是找罪受。
我看 B 站的时候，听说有些游戏冲钱也是找罪受。
</n-popconfirm>
```
```js

19
demo/documentation/intro/privateStart/enUS/index.md
View File

@ -1,19 +0,0 @@
<!--no-demo-->
# Getting Started
## Installation
First install it.
```bash
npm install --save git+https://github.com/07akioni/naive-ui.git
```
## Usage
Add the following lines in you entry point js file.
```js
import naive from 'naive-ui'
import 'naive-ui/styles/index.scss'
Vue.use(naive)
```

0
demo/documentation/intro/privateStart/index.entry
View File

0
demo/documentation/intro/privateStart/zhCN/index.md
View File

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

@ -1,6 +1,8 @@
<!--no-demo-->
# Getting Started
```component
installCodeGenerator
```
## Installation
First install it.
@ -15,4 +17,11 @@ import naive from 'naive-ui'
import 'naive-ui/lib/styles/index.css'
Vue.use(naive)
```
```
## Import on Demand
If you need to import components on demand, you could use the following tool to generate the code.
> What should be noted is the CSS files start with 'Base' are not guaranteed to be stable (I'll try not to change them). Because they are parts of internal implementation of the library. If you find import mistakes after upgrade the package, you may have a look at here. It is possible to pack these common styles inside every component using it. However, compared to add routines when upgrading package, I perfer not to import duplicate codes. (It doesn't mean this is a better solution. It is only a choice.)
<install-code-generator />

99
demo/documentation/intro/start/enUS/installCodeGenerator.vue Normal file
View File

@ -0,0 +1,99 @@
<template>
<div>
<n-card>
<n-form>
<n-row :gutter="12">
<n-form-item-col label="Components to Use" :span="12">
<n-select
v-model="componentsToImport"
placeholder="Components to Use"
:options="options"
filterable
clearable
multiple
/>
</n-form-item-col>
<n-form-item-col label="Locales" :span="6">
<n-select
v-model="locales"
placeholder="Locales"
:options="localeOptions"
filterable
clearable
multiple
/>
</n-form-item-col>
<n-form-item-col label="Format" :span="6">
<n-select
v-model="format"
placeholder="Format"
:options="formatOptions"
/>
</n-form-item-col>
</n-row>
</n-form>
<n-code :code="code" :language="'js'" />
</n-card>
</div>
</template>
<script>
import {
createInstallStatements
} from 'src/components'
export default {
data () {
return {
components: ['Affix', 'Alert', 'Anchor', 'AutoComplete', 'Avatar', 'BackTop', 'Badge', 'Breadcrumb', 'Button', 'Card', 'Cascader', 'Checkbox', 'Code', 'Collapse', 'ConfigConsumer', 'ConfigProvider', 'Confirm', 'DataTable', 'DatePicker', 'Descriptions', 'Divider', 'Drawer', 'Dropdown', 'Element', 'Empty', 'Form', 'GradientText', 'Grid', 'Icon', 'Input', 'InputNumber', 'Layout', 'List', 'LoadingBar', 'Log', 'Menu', 'Notification', 'Pagination', 'Popconfirm', 'Popover', 'Popselect', 'Progress', 'Radio', 'Result', 'Select', 'Slider', 'Spin', 'Statistic', 'Steps', 'Switch', 'Tabs', 'Tag', 'Thing', 'Time', 'Timeline', 'TimePicker', 'Tooltip', 'Transfer', 'Typography'],
localeOptions: [
{
label: '中文', value: 'zhCN'
},
{
label: 'English', value: 'enUS'
}
],
locales: ['zhCN', 'enUS'],
formatOptions: [
{
label: 'ES Module',
value: 'esm'
},
{
label: 'Common JS',
value: 'cjs'
}
],
format: 'esm',
componentsToImport: [
'Button'
]
}
},
computed: {
code () {
return this.createInstallStatements(
this.componentsToImport,
this.locales,
this.format
)
},
options () {
return this.components.map(component => ({
label: component.replace(/([a-z])([A-Z])/g, '$1 $2'),
value: component
}))
}
},
methods: {
createInstallStatements
}
}
</script>
<style scoped>
.n-select {
margin: 0 8px 12px 0;
}
</style>

13
demo/documentation/intro/start/zhCN/index.md
View File

@ -1,6 +1,8 @@
<!--no-demo-->
# 起步
```component
installCodeGenerator
```
## 安装
使用 npm 安装。
@ -15,4 +17,11 @@ import naive from 'naive-ui'
import 'naive-ui/lib/styles/index.css'
Vue.use(naive)
```
```
## 按需引入
如果你需要按需引入组件，可以下面的工具生成按需引入的代码。
> 需要注意的是，以 Base 开头的 CSS 文件并不会确保随着版本的更新保持稳定（我会尽力的保持）。因为它是内部实现的一部分。如果你维持按需引入时升级后样式出现了错误，可以来这里检查一下。虽然把这些公共样式各自打包进每个用到他们的组件是可行的，但是相比于升级的繁琐，我更不喜欢重复的代码。（这不意味着这种解决方案是“更好的”，它只是种选择而已）
<install-code-generator />

99
demo/documentation/intro/start/zhCN/installCodeGenerator.vue Normal file
View File

@ -0,0 +1,99 @@
<template>
<div>
<n-card>
<n-form>
<n-row :gutter="12">
<n-form-item-col label="导入组件" :span="12">
<n-select
v-model="componentsToImport"
placeholder="导入组件"
:options="options"
filterable
clearable
multiple
/>
</n-form-item-col>
<n-form-item-col label="导入语言" :span="6">
<n-select
v-model="locales"
placeholder="导入语言"
:options="localeOptions"
filterable
clearable
multiple
/>
</n-form-item-col>
<n-form-item-col label="导入格式" :span="6">
<n-select
v-model="format"
placeholder="导入格式"
:options="formatOptions"
/>
</n-form-item-col>
</n-row>
</n-form>
<n-code :code="code" :language="'js'" />
</n-card>
</div>
</template>
<script>
import {
createInstallStatements
} from 'src/components'
export default {
data () {
return {
components: ['Affix', 'Alert', 'Anchor', 'AutoComplete', 'Avatar', 'BackTop', 'Badge', 'Breadcrumb', 'Button', 'Card', 'Cascader', 'Checkbox', 'Code', 'Collapse', 'ConfigConsumer', 'ConfigProvider', 'Confirm', 'DataTable', 'DatePicker', 'Descriptions', 'Divider', 'Drawer', 'Dropdown', 'Element', 'Empty', 'Form', 'GradientText', 'Grid', 'Icon', 'Input', 'InputNumber', 'Layout', 'List', 'LoadingBar', 'Log', 'Menu', 'Notification', 'Pagination', 'Popconfirm', 'Popover', 'Popselect', 'Progress', 'Radio', 'Result', 'Select', 'Slider', 'Spin', 'Statistic', 'Steps', 'Switch', 'Tabs', 'Tag', 'Thing', 'Time', 'Timeline', 'TimePicker', 'Tooltip', 'Transfer', 'Typography'],
localeOptions: [
{
label: '中文', value: 'zhCN'
},
{
label: 'English', value: 'enUS'
}
],
locales: ['zhCN', 'enUS'],
formatOptions: [
{
label: 'ES Module',
value: 'esm'
},
{
label: 'Common JS',
value: 'cjs'
}
],
format: 'esm',
componentsToImport: [
'Button'
]
}
},
computed: {
code () {
return this.createInstallStatements(
this.componentsToImport,
this.locales,
this.format
)
},
options () {
return this.components.map(component => ({
label: component.replace(/([a-z])([A-Z])/g, '$1 $2'),
value: component
}))
}
},
methods: {
createInstallStatements
}
}
</script>
<style scoped>
.n-select {
margin: 0 8px 12px 0;
}
</style>

37
demo/loaders/NaiveUIMdLoader.js
View File

@ -2,8 +2,7 @@ const marked = require('marked')
const createRenderer = require('./mdRenderer')
const renderer = createRenderer()
function parseMdAsAnchor (content) {
const tokens = marked.lexer(content)
function parseMdAsAnchor (tokens) {
const titles = tokens.filter(token => token.type === 'heading' && token.depth === 2).map(token => token.text)
const linkTags = titles.map(title => {
const href = title.replace(/ /g, '-')
@ -12,19 +11,45 @@ function parseMdAsAnchor (content) {
return `<n-anchor :top="24" position="absolute" affix style="width: 132px;">${linkTags.join('\n')}</n-anchor>`
}
function parseComponents (tokens) {
const componentsIndex = tokens.findIndex(token => token.type === 'code' && token.lang === 'component')
let components = []
if (~componentsIndex) {
components = tokens[componentsIndex].text
components = components.split('\n').map(component => component.trim()).filter(component => component.length)
tokens.splice(componentsIndex, 1)
}
return components
}
module.exports = function (content) {
const tokens = marked.lexer(content)
const anchor = parseMdAsAnchor(tokens)
const components = parseComponents(tokens)
const importStatements = components
.map(component => `import ${component} from './${component}'`)
.join('\n')
return `<template>
<component-documentation>
<div style="display: flex; flex-wrap: nowrap;">
<div style="width: calc(100% - 196px); margin-right: 36x;">
${marked(content, {
<div style="width: calc(100% - 196px); margin-right: 36px;">
${marked.parser(tokens, {
renderer
})}
</div>
<div style="width: 160px;">
${parseMdAsAnchor(content)}
${anchor}
</div>
</div>
</component-documentation>
</template>`
</template>
<script>
${importStatements}
export default {
components: {
${components.join(',\n')}
}
}
</script>`
}

11
demo/privateIndex.js
View File

@ -1,11 +0,0 @@
import { Vue, router, i18n } from './init'
import demoRouterView from './demoRouterView'
// if (localStorage.token === 'naive') {
new Vue({
...demoRouterView,
i18n,
router
}).$mount('#app')
// }

13
package.json
View File

@ -5,22 +5,23 @@
"main": "lib/index.js",
"module": "es/index.js",
"scripts": {
"release": "npm run build && npm publish",
"clean": "rm -rf lib && rm -rf es && rm -rf dist",
"build:style": "npm run clean && node build/buildStyle.js",
"build:icon": "npm run clean && node build/buildIcon.js",
"build:js": "npm run clean && rollup -c",
"build:demo": "npm run build && npm run demo",
"build:doc": "npm run build && cross-env NODE_ENV=production && rm -rf doc/dist && webpack --config build/webpack.doc.js",
"build": "npm run clean && node build/buildStyle.js && node build/buildIcon.js && rollup -c",
"clean": "rm -rf lib && rm -rf es && rm -rf dist",
"demo": "cross-env NODE_ENV=development && webpack-dev-server --config build/webpack.demo.js",
"dev": "cross-env NODE_ENV=development && webpack-dev-server --config build/webpack.dev.js",
"lint": "eslint --quiet --no-error-on-unmatched-pattern \"packages/**/*.{js,vue}\" \"test/**/*.{js,vue}\" \"build/**/*.{js,vue}\" \"demo/**/*.{js,vue}\"",
"lint": "eslint --no-error-on-unmatched-pattern --fix \"src/**/*.{js,vue}\" \"test/**/*.{js,vue}\" \"build/**/*.{js,vue}\" \"demo/**/*.{js,vue}\" && stylelint \"styles/**/*.scss\" --fix",
"lint:js": "eslint --no-error-on-unmatched-pattern --fix \"src/**/*.{js,vue}\" \"test/**/*.{js,vue}\" \"build/**/*.{js,vue}\" \"demo/**/*.{js,vue}\"",
"lint:style": "stylelint \"styles/**/*.scss\" --fix",
"release:doc": "npm run build:doc && sudo bash doc/deploy-doc.sh",
"release:doc:no-build": "sudo bash doc/deploy-doc.sh",
"release:package": "npm run build && npm publish",
"test": "cross-env NODE_ENV=development BABEL_ENV=test karma start test/unit/karma.conf.js",
"test:cov": "cross-env NODE_ENV=development BABEL_ENV=test karma start test/unit/karma.conf.js && http-server test/unit/coverage",
"release:doc": "sudo bash doc/deploy-doc.sh",
"build-private-doc": "cross-env NODE_ENV=production && rm -rf doc/dist && webpack --config build/webpack.private-doc.js"
"test:cov": "cross-env NODE_ENV=development BABEL_ENV=test karma start test/unit/karma.conf.js && http-server test/unit/coverage"
},
"author": "lecong.zhang",
"license": "ISC",

2
rollup.config.js
View File

@ -2,7 +2,7 @@ const vue = require('rollup-plugin-vue')
const resolve = require('@rollup/plugin-node-resolve')
const strip = require('@rollup/plugin-strip')
const { terser } = require('rollup-plugin-terser')
const naiveSCSSVariable = require('./build/naiveScssVarPlugin')
const naiveSCSSVariable = require('./build/naiveSCSSVarPlugin')
function externalValidator (ids) {
return id => ids.some(identifier => id.startsWith(identifier))

24
src/Affix/src/main.vue
View File

@ -55,25 +55,25 @@ export default {
affixed () {
return this.stickToBottom || this.stickToTop
},
synthesizedOffsetTop () {
syntheticOffsetTop () {
return this.offsetTop === null ? this.top : this.offsetTop
},
synthesizedTop () {
syntheticTop () {
return this.top === null ? this.offsetTop : this.top
},
synthesizedBottom () {
syntheticBottom () {
return this.bottom === null ? this.offsetBottom : this.bottom
},
synthesizedOffsetBottom () {
syntheticOffsetBottom () {
return this.offsetBottom === null ? this.bottom : this.offsetBottom
},
style () {
const style = {}
if (this.stickToTop && this.synthesizedOffsetTop !== null) {
style.top = `${this.synthesizedTop}px`
if (this.stickToTop && this.syntheticOffsetTop !== null) {
style.top = `${this.syntheticTop}px`
}
if (this.stickToBottom && this.synthesizedOffsetBottom !== null) {
style.bottom = `${this.synthesizedBottom}px`
if (this.stickToBottom && this.syntheticOffsetBottom !== null) {
style.bottom = `${this.syntheticBottom}px`
}
return style
}
@ -115,16 +115,16 @@ export default {
const affixRect = this.$el.getBoundingClientRect()
const pxToTop = affixRect.top - containerRect.top
const pxToBottom = containerRect.bottom - affixRect.bottom
if (this.synthesizedOffsetTop !== null && pxToTop <= this.synthesizedOffsetTop) {
if (this.syntheticOffsetTop !== null && pxToTop <= this.syntheticOffsetTop) {
this.stickToTop = true
this.topAffixedTriggerScrollTop = containerEl.scrollTop - (this.synthesizedOffsetTop - pxToTop)
this.topAffixedTriggerScrollTop = containerEl.scrollTop - (this.syntheticOffsetTop - pxToTop)
} else {
this.stickToTop = false
this.topAffixedTriggerScrollTop = null
}
if (this.synthesizedOffsetBottom !== null && pxToBottom <= this.synthesizedOffsetBottom) {
if (this.syntheticOffsetBottom !== null && pxToBottom <= this.syntheticOffsetBottom) {
this.stickToBottom = true
this.bottomAffixedTriggerScrollTop = containerEl.scrollTop + this.synthesizedOffsetBottom - pxToBottom
this.bottomAffixedTriggerScrollTop = containerEl.scrollTop + this.syntheticOffsetBottom - pxToBottom
} else {
this.stickToBottom = false
this.bottomAffixedTriggerScrollTop = null

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

@ -6,9 +6,9 @@
:class="{
[`n-alert--${type}-type`]: true,
'n-alert--no-icon': showIcon === false,
[`n-${synthesizedTheme}-theme`]: synthesizedTheme
[`n-${syntheticTheme}-theme`]: syntheticTheme
}"
:style="synthesizedStyle"
:style="syntheticStyle"
>
<div v-if="closable" class="n-alert__close" @click="handleCloseClick">
<n-icon>

20
src/Anchor/src/BaseAnchor.vue
View File

@ -2,9 +2,9 @@
<div
class="n-anchor"
:class="{
[`n-${synthesizedTheme}-theme`]: synthesizedTheme
[`n-${syntheticTheme}-theme`]: syntheticTheme
}"
:style="synthesizedStyle"
:style="syntheticStyle"
>
<div
ref="slot"
@ -102,15 +102,15 @@ export default {
titleEl.style.transition = 'none'
})
this.$nextTick().then(() => {
const barEl = this.$refs.bar
const slotEl = this.$refs.slot
if (barEl) {
void (barEl.offsetWidth)
barEl.style.transition = null
const nextBarEl = this.$refs.bar
const nextSlotEl = this.$refs.slot
if (nextBarEl) {
void (nextBarEl.offsetWidth)
nextBarEl.style.transition = null
}
if (slotEl) {
void (slotEl.offsetWidth)
slotEl.style.transition = null
if (nextSlotEl) {
void (nextSlotEl.offsetWidth)
nextSlotEl.style.transition = null
}
titleEls.forEach(titleEl => {
void (titleEl.offsetWidth)

6
src/AutoComplete/src/main.vue
View File

@ -21,14 +21,14 @@
ref="content"
class="n-positioning-content"
>
<transition name="n-select-menu-transition">
<transition name="n-auto-complete-menu-transition">
<n-base-select-menu
v-if="active"
ref="contentInner"
v-clickoutside="handleClickOutsideMenu"
auto-pending-first-option
class="n-select-menu"
:theme="synthesizedTheme"
class="n-auto-complete-menu"
:theme="syntheticTheme"
:pattern="value"
:options="filteredOptions"
:multiple="false"

4
src/Avatar/src/main.vue
View File

@ -4,13 +4,13 @@
:class="{
[`n-avatar--${size}-size`]: typeof size !== 'number',
[`n-avatar--circle-shaped`]: circle || round,
[`n-${synthesizedTheme}-theme`]: synthesizedTheme
[`n-${syntheticTheme}-theme`]: syntheticTheme
}"
:style="{
width: styleWidth,
height: styleWidth,
borderRadius: styleBorderRadius,
...synthesizedStyle
...syntheticStyle
}"
>
<img v-if="!$slots.default && src" :src="src">

4
src/BackTop/src/main.vue
View File

@ -4,10 +4,10 @@
<div
v-if="show"
:class="{
[`n-${synthesizedTheme}-theme`]: synthesizedTheme
[`n-${syntheticTheme}-theme`]: syntheticTheme
}"
:style="{
...synthesizedStyle,
...syntheticStyle,
right: styleRight,
bottom: styleBottom
}"

2
src/Badge/src/main.vue
View File

@ -5,7 +5,7 @@
'n-badge--dot': dot,
'n-badge--processing': processing,
[`n-badge--${type}-type`]: type,
[`n-${synthesizedTheme}-theme`]: synthesizedTheme,
[`n-${syntheticTheme}-theme`]: syntheticTheme,
[`n-badge--as-is`]: !$slots.default
}"
>

2
src/Breadcrumb/src/Breadcrumb.vue
View File

@ -2,7 +2,7 @@
<div
class="n-breadcrumb"
:class="{
[`n-${synthesizedTheme}-theme`]: synthesizedTheme
[`n-${syntheticTheme}-theme`]: syntheticTheme
}"
>
<slot />

16
src/Button/src/Button.vue
View File

@ -5,7 +5,7 @@
'n-button--round': round,
'n-button--circle': circle,
[`n-button--${type}-type`]: true,
[`n-button--${synthesizedSize}-size`]: true,
[`n-button--${syntheticSize}-size`]: true,
'n-button--disabled': disabled,
'n-button--loading': loading,
'n-button--block': block,
@ -14,9 +14,9 @@
'n-button--ghost': ghost,
'n-button--text': text,
[`n-button--${iconPlacement}-icon`]: iconPlacement && !noTextContent,
[`n-${synthesizedTheme}-theme`]: synthesizedTheme
[`n-${syntheticTheme}-theme`]: syntheticTheme
}"
:tabindex="synthesizedFocusable ? 0 : -1"
:tabindex="syntheticFocusable ? 0 : -1"
@click="handleClick"
@blur="handleBlur"
@keyup.enter="handleKeyUpEnter"
@ -33,7 +33,7 @@
v-if="loading"
key="loading"
class="n-icon-slot"
:theme="synthesizedTheme"
:theme="syntheticTheme"
:style="{
transition: hollowOutColorTransitionDisabled ? 'none' : null
}"
@ -78,7 +78,7 @@
<n-base-loading
v-if="loading"
key="loading"
:theme="synthesizedTheme"
:theme="syntheticTheme"
:style="{
transition: hollowOutColorTransitionDisabled ? 'none' : null
}"
@ -199,7 +199,7 @@ export default {
}
},
computed: {
synthesizedSize () {
syntheticSize () {
if (this.NButtonGroup && this.NButtonGroup.size) {
return this.NButtonGroup.size
}
@ -226,7 +226,7 @@ export default {
)
) { return true } else return false
},
synthesizedFocusable () {
syntheticFocusable () {
return this.focusable && !this.disabled
},
hasIcon () {
@ -269,7 +269,7 @@ export default {
}, 600)
})
}
if (this.synthesizedFocusable) {
if (this.syntheticFocusable) {
this.$el.focus()
}
}

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

@ -7,9 +7,9 @@
[`n-card--action-segmented`]: segmented === true || (segmented && segmented.action),
[`n-card--${size}-size`]: true,
'n-card--bordered': bordered,
[`n-${synthesizedTheme}-theme`]: synthesizedTheme
[`n-${syntheticTheme}-theme`]: syntheticTheme
}"
:style="synthesizedStyle"
:style="syntheticStyle"
>
<div v-if="$slots.cover" class="n-card-cover">
<slot name="cover" />
@ -49,11 +49,9 @@
import withapp from '../../_mixins/withapp'
import themeable from '../../_mixins/themeable'
import asthemecontext from '../../_mixins/asthemecontext'
import NIcon from '../..//Icon'
import NIcon from '../../Icon'
import mdClose from '../../_icons/md-close'
window.cardSlots = []
export default {
name: 'NCard',
components: {

8
src/Cascader/src/Cascader.vue
View File

@ -19,7 +19,7 @@
ref="activator"
class="n-cascader-picker"
:size="size"
:theme="synthesizedTheme"
:theme="syntheticTheme"
:active="active"
:pattern="pattern"
:placeholder="localizedPlaceholder"
@ -42,7 +42,7 @@
v-clickoutside="handleCascaderMenuClickOutside"
:active="active && !selectMenuActive"
:class="{
[`n-${synthesizedTheme}-theme`]: synthesizedTheme,
[`n-${syntheticTheme}-theme`]: syntheticTheme,
[namespace]: namespace
}"
:type="type"
@ -58,7 +58,7 @@
:patches.sync="patches"
:loading.sync="loading"
:loading-id.sync="loadingId"
:theme="synthesizedTheme"
:theme="syntheticTheme"
@input="handleMenuInput"
/>
</n-base-portal>
@ -72,7 +72,7 @@
:type="type"
:value="value"
:active="active && selectMenuActive"
:theme="synthesizedTheme"
:theme="syntheticTheme"
:pattern="pattern"
:size="size"
:multiple="multiple"

2
src/Cascader/src/CascaderOption.vue
View File

@ -56,7 +56,7 @@
v-if="loading"
class="n-cascader-option__loading"
>
<n-base-loading :theme="NCascader.synthesizedTheme" />
<n-base-loading :theme="NCascader.syntheticTheme" />
</div>
</transition>
</div>

20
src/Checkbox/src/Checkbox.vue
View File

@ -2,12 +2,12 @@
<div
class="n-checkbox"
:class="{
'n-checkbox--checked': synthesizedChecked,
'n-checkbox--disabled': synthesizedDisabled,
'n-checkbox--checked': syntheticChecked,
'n-checkbox--disabled': syntheticDisabled,
'n-checkbox--indeterminate': indeterminate,
[`n-${synthesizedTheme}-theme`]: synthesizedTheme
[`n-${syntheticTheme}-theme`]: syntheticTheme
}"
:tabindex="synthesizedDisabled ? false : 0"
:tabindex="syntheticDisabled ? false : 0"
@keyup.enter="handleKeyUpEnter"
@keyup.space="handleKeyUpSpace"
@keydown.space="handleKeyDownSpace"
@ -79,11 +79,11 @@ export default {
}
},
computed: {
synthesizedDisabled () {
syntheticDisabled () {
if (this.disabled || (this.NCheckboxGroup && this.NCheckboxGroup.disabled)) return true
return false
},
synthesizedChecked () {
syntheticChecked () {
if (this.NCheckboxGroup) {
const checkboxGroupValueSet = this.NCheckboxGroup.valueAsSet
if (checkboxGroupValueSet) {
@ -106,19 +106,19 @@ export default {
},
toggle () {
if (this.NCheckboxGroup) {
this.NCheckboxGroup.toggleCheckbox(!this.synthesizedChecked, this.value)
this.NCheckboxGroup.toggleCheckbox(!this.syntheticChecked, this.value)
} else {
this.$emit('change', !this.synthesizedChecked, this.synthesizedChecked)
this.$emit('change', !this.syntheticChecked, this.syntheticChecked)
}
},
handleClick (e) {
this.$emit('click', e)
if (!this.synthesizedDisabled) {
if (!this.syntheticDisabled) {
this.toggle()
}
},
handleKeyUpEnter (e) {
if (!this.synthesizedDisabled) {
if (!this.syntheticDisabled) {
this.toggle()
}
},

2
src/Code/src/main.vue
View File

@ -67,7 +67,7 @@ export default {
return h('pre', {
staticClass: 'n-code',
class: {
[`n-${this.synthesizedTheme}-theme`]: this.synthesizedTheme
[`n-${this.syntheticTheme}-theme`]: this.syntheticTheme
}
}, [
h('code', {

4
src/Collapse/src/Collapse.vue
View File

@ -64,9 +64,9 @@ export default {
return h('div', {
staticClass: 'n-collapse',
class: {
[`n-${this.synthesizedTheme}-theme`]: this.synthesizedTheme
[`n-${this.syntheticTheme}-theme`]: this.syntheticTheme
},
style: this.synthesizedStyle
style: this.syntheticStyle
}, this.$slots.default)
}
}

10
src/ConfigConsumer/src/main.vue
View File

@ -7,13 +7,13 @@ export default {
name: 'NConfigConsumer',
mixins: [ withapp, themeable ],
watch: {
synthesizedTheme: function (value, oldValue) {
syntheticTheme: function (value, oldValue) {
this.$emit('theme-change', value, oldValue)
},
'NConfigProvider.inheritedNamespace': function (value, oldValue) {
this.$emit('namespace-change', value, oldValue)
},
synthesizedThemeEnvironment: function (value, oldValue) {
syntheticThemeEnvironment: function (value, oldValue) {
this.$emit('theme-environment-change', value, oldValue)
},
'NConfigProvider.inheritedLanguage': function (value, oldValue) {
@ -22,11 +22,11 @@ export default {
},
render (h) {
const defaultSlot = this.$scopedSlots.default ? this.$scopedSlots.default({
theme: this.synthesizedTheme,
theme: this.syntheticTheme,
language: this.NConfigProvider ? this.NConfigProvider.inheritedLanguage : null,
namespace: this.NConfigProvider ? this.NConfigProvider.inheritedNamespace : null,
themeEnvironment: this.synthesizedThemeEnvironment,
styleScheme: this.synthesizedTheme ? styleScheme[this.synthesizedTheme] : null
themeEnvironment: this.syntheticThemeEnvironment,
styleScheme: this.syntheticTheme ? styleScheme[this.syntheticTheme] : null
}) : []
if (defaultSlot.length > 1) {
console.error(

2
src/ConfigProvider/src/main.vue
View File

@ -70,7 +70,7 @@ export default {
class: {
[`n-${this.theme}-theme`]: this.theme
},
style: this.synthesizedStyle
style: this.syntheticStyle
},
defaultSlot)
: defaultSlot[0]

8
src/Confirm/src/Confirm.vue
View File

@ -2,10 +2,10 @@
<div
class="n-confirm"
:class="{
[`n-${synthesizedTheme}-theme`]: synthesizedTheme,
[`n-${syntheticTheme}-theme`]: syntheticTheme,
'n-confirm--bordered': bordered
}"
:style="synthesizedStyle"
:style="syntheticStyle"
>
<div class="n-confirm-title">
<span class="n-confirm-title-content">
@ -70,8 +70,8 @@
</div>
</template>
<script>
import NIcon from '../..//Icon'
import NButton from '../..//Button'
import NIcon from '../../Icon'
import NButton from '../../Button'
import iosCheckmarkCircle from '../../_icons/ios-checkmark-circle'
import mdClose from '../../_icons/md-close'
import iosHelpCircle from '../../_icons/ios-help-circle'

66
src/DataTable/src/DataTable.vue
View File

@ -2,7 +2,7 @@
<div
class="n-data-table"
:class="{
[`n-${synthesizedTheme}-theme`]: synthesizedTheme,
[`n-${syntheticTheme}-theme`]: syntheticTheme,
'n-data-table--bordered': bordered,
}"
>
@ -80,13 +80,13 @@
class="n-data-table__pagination"
>
<n-pagination
:page="synthesizedPagination.page"
:page-count="synthesizedPagination.pageCount"
:page="syntheticPagination.page"
:page-count="syntheticPagination.pageCount"
:page-slot="pagination.pageSlot"
:show-quick-jumper="!!pagination.showQuickJumper"
:disabled="!!pagination.disabled"
:on-change="synthesizedOnPageChange"
:on-page-size-change="synthesizedOnPageSizeChange"
:on-change="syntheticOnPageChange"
:on-page-size-change="syntheticOnPageSizeChange"
/>
</div>
</n-spin>
@ -99,6 +99,7 @@ import themeable from '../../_mixins/themeable'
import { setCheckStatusOfRow } from './utils'
import BaseTable from './BaseTable.vue'
import NEmpty from '../../Empty'
import NPagination from '../../Pagination'
function createShallowClonedArray (array) {
if (Array.isArray(array)) return array.map(createShallowClonedObject)
@ -153,7 +154,8 @@ export default {
name: 'NDataTable',
components: {
BaseTable,
NEmpty
NEmpty,
NPagination
},
mixins: [ withapp, themeable ],
provide () {
@ -253,11 +255,11 @@ export default {
.map(column => Object.assign({}, column, { fixed: false }))
},
filteredData () {
const synthesizedActiveFilters = this.synthesizedActiveFilters
const syntheticActiveFilters = this.syntheticActiveFilters
const normalizedColumns = this.normalizedColumns
return this.data ? this.data.filter(row => {
for (const columnKey of Object.keys(row)) {
const activeFilterOptionValues = synthesizedActiveFilters
const activeFilterOptionValues = syntheticActiveFilters
.filter(filter => filter.columnKey === columnKey)
.map(filter => filter.filterOptionValue)
if (!activeFilterOptionValues.length) continue
@ -282,11 +284,11 @@ export default {
return true
}) : []
},
synthesizedCheckedRowKeys () {
syntheticCheckedRowKeys () {
if (this.checkedRowKeys !== null) return this.checkedRowKeys
return this.internalCheckedRowKeys
},
synthesizedActiveFilters () {
syntheticActiveFilters () {
const columnsWithControlledFilter = this.normalizedColumns.filter(column => {
return Array.isArray(column.filterOptionValues)
})
@ -306,7 +308,7 @@ export default {
const activeFilters = controlledActiveFilters.concat(uncontrolledFilters)
return activeFilters
},
synthesizedActiveSorter () {
syntheticActiveSorter () {
/**
* If one of the columns's sort order is false or 'ascend' or 'descend',
* the table's controll functionality should work in controlled manner.
@ -327,27 +329,27 @@ export default {
if (columnsWithControlledSortOrder.length) return null
return this.internalActiveSorter
},
synthesizedPageSize () {
syntheticPageSize () {
return this.pagination.pageSize || this.internalPageSize
},
synthesizedCurrentPage () {
syntheticCurrentPage () {
return this.pagination.page || this.internalCurrentPage
},
synthesizedPagination () {
syntheticPagination () {
if (!this.pagination) return null
return {
...this.pagination,
/**
* writing synthesized props after pagination to avoid
* writing synthetic props after pagination to avoid
* pagination[key] === undefined
* key still exists but value is undefined
*/
page: this.synthesizedCurrentPage,
pageSize: this.synthesizedPageSize,
pageCount: this.synthesizedPageCount
page: this.syntheticCurrentPage,
pageSize: this.syntheticPageSize,
pageCount: this.syntheticPageCount
}
},
synthesizedOnPageChange () {
syntheticOnPageChange () {
return page => {
this.pagination.onChange && this.pagination.onChange(page)
// eslint-disable-next-line vue/no-side-effects-in-computed-properties
@ -355,31 +357,31 @@ export default {
this.$emit('page-change', page)
}
},
synthesizedOnPageSizeChange () {
syntheticOnPageSizeChange () {
return pageSize => {
this.pagination.onPageSizeChange && this.pagination.onPageSizeChange(pageSize)
// eslint-disable-next-line vue/no-side-effects-in-computed-properties
this.internalPageSize = pageSize
this.$emit('change', {
sorter: createShallowClonedObject(this.synthesizedActiveSorter),
pagination: createShallowClonedObject(this.synthesizedPagination),
filters: createShallowClonedArray(this.synthesizedActiveFilters)
sorter: createShallowClonedObject(this.syntheticActiveSorter),
pagination: createShallowClonedObject(this.syntheticPagination),
filters: createShallowClonedArray(this.syntheticActiveFilters)
})
this.$emit('page-size-change')
}
},
synthesizedPageCount () {
syntheticPageCount () {
if (this.pagination.pageCount) return this.pagination.pageCount
if (this.filteredData.length === 0) return 1
const { pageSize } = this.pagination
return Math.ceil(this.filteredData.length / pageSize)
},
sortedData () {
const activeSorter = this.synthesizedActiveSorter
const activeSorter = this.syntheticActiveSorter
if (activeSorter) {
/**
* When async, synthesizedActiveSorter.sorter should be true
* If want use default sorter, synthesizedActiveSorter.sorter should be 'default'
* When async, syntheticActiveSorter.sorter should be true
* If want use default sorter, syntheticActiveSorter.sorter should be 'default'
*/
if (
activeSorter.sorter === true ||
@ -416,7 +418,7 @@ export default {
paginatedData () {
if (!this.pagination) return this.sortedData
if (!this.paging) return this.sortedData
const pageSize = this.synthesizedPageSize
const pageSize = this.syntheticPageSize
const startIndex = (this.internalCurrentPage - 1) * pageSize
return this.sortedData.slice(startIndex, startIndex + pageSize)
},
@ -435,7 +437,7 @@ export default {
}
},
countOfCurrentPageCheckedRows () {
const checkedRowKeys = this.synthesizedCheckedRowKeys
const checkedRowKeys = this.syntheticCheckedRowKeys
return this.paginatedData.reduce((total, row) => {
return total + (checkedRowKeys.includes(row.key) ? 1 : 0)
}, 0)
@ -448,7 +450,7 @@ export default {
}
},
watch: {
synthesizedCurrentPage () {
syntheticCurrentPage () {
this.scrollMainTableBodyToTop()
},
data () {
@ -628,7 +630,7 @@ export default {
this.trHeights = trHeights
},
checkAll (column) {
const checkedRowKeys = this.synthesizedCheckedRowKeys.map(v => v)
const checkedRowKeys = this.syntheticCheckedRowKeys.map(v => v)
this.paginatedData.forEach(row => {
if (column.disabled && column.disabled(row)) {
return
@ -638,7 +640,7 @@ export default {
this.changeCheckedRowKeys(checkedRowKeys)
},
clearCheckAll (column) {
const checkedRowKeys = this.synthesizedCheckedRowKeys.map(v => v)
const checkedRowKeys = this.syntheticCheckedRowKeys.map(v => v)
this.paginatedData.forEach(row => {
if (column.disabled && column.disabled(row)) {
return

2
src/DataTable/src/HeaderButton/FilterButton.vue
View File

@ -83,7 +83,7 @@ export default {
},
computed: {
activeFilters () {
return this.NDataTable.synthesizedActiveFilters
return this.NDataTable.syntheticActiveFilters
},
activeFilterOptionValues () {
return createFilterOptionValues(this.activeFilters, this.column)

8
src/DataTable/src/HeaderButton/SortButton.vue
View File

@ -2,8 +2,8 @@
<span
class="n-data-table-sort-button"
:class="{
'n-data-table-sort-button--asc': currentColumnActive && synthesizedSortOrder === 'ascend',
'n-data-table-sort-button--desc': currentColumnActive && synthesizedSortOrder === 'descend'
'n-data-table-sort-button--asc': currentColumnActive && syntheticSortOrder === 'ascend',
'n-data-table-sort-button--desc': currentColumnActive && syntheticSortOrder === 'descend'
}"
>
<n-icon
@ -48,13 +48,13 @@ export default {
},
computed: {
activeSorter () {
const activeSorter = this.NDataTable.synthesizedActiveSorter
const activeSorter = this.NDataTable.syntheticActiveSorter
return activeSorter
},
currentColumnActive () {
return this.activeSorter && this.activeSorter.columnKey === this.column.key
},
synthesizedSortOrder () {
syntheticSortOrder () {
if (this.activeSorter) {
return this.activeSorter.order
}

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

@ -139,7 +139,7 @@ export default {
return this.NDataTable.rowKey
},
currentPage () {
const pagination = this.NDataTable.synthesizedPagination
const pagination = this.NDataTable.syntheticPagination
if (!pagination) return -1
if (!pagination.page) return -1
return pagination.page
@ -148,7 +148,7 @@ export default {
return this.NDataTable.hoveringRowIndex
},
checkedRowKeys () {
return this.NDataTable.synthesizedCheckedRowKeys
return this.NDataTable.syntheticCheckedRowKeys
},
style () {
if (this.fixed && this.height) {

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

@ -148,13 +148,13 @@ export default {
},
computed: {
pagination () {
return this.NDataTable.synthesizedPagination
return this.NDataTable.syntheticPagination
},
currentPage () {
return (this.pagination && this.pagination.page) || null
},
theme () {
return this.NDataTable.synthesizedTheme
return this.NDataTable.syntheticTheme
},
checkboxIndererminate () {
return this.NDataTable.someRowsChecked
@ -163,7 +163,7 @@ export default {
return this.NDataTable.allRowsChecked
},
activeFilters () {
return this.NDataTable.synthesizedActiveFilters
return this.NDataTable.syntheticActiveFilters
},
headerStyle () {
return {
@ -191,7 +191,7 @@ export default {
const filterElement = filterRef && filterRef.$el
if (filterElement && filterElement.contains(e.target)) return
if (!column.sorter) return
const activeSorter = this.NDataTable.synthesizedActiveSorter
const activeSorter = this.NDataTable.syntheticActiveSorter
const nextSorter = createNextSorter(column.key, activeSorter, column.sorter)
this.NDataTable.changeSorter(nextSorter)
}

10
src/DatePicker/src/DatePicker.vue
View File

@ -3,7 +3,7 @@
ref="activator"
class="n-date-picker"
:class="{
[`n-${synthesizedTheme}-theme`]: synthesizedTheme,
[`n-${syntheticTheme}-theme`]: syntheticTheme,
[`n-date-picker--${size}-size`]: true,
'n-date-picker--disabled': disabled,
'n-date-picker--range': isRange,
@ -74,7 +74,7 @@
:value="value"
:active="active"
:actions="actions"
:theme="synthesizedTheme"
:theme="syntheticTheme"
:is-date-disabled="isDateDisabled"
:is-time-disabled="isTimeDisabled"
@blur="handlePanelBlur"
@ -88,7 +88,7 @@
:value="value"
:active="active"
:actions="actions"
:theme="synthesizedTheme"
:theme="syntheticTheme"
:is-date-disabled="isDateDisabled"
@input="handlePanelInput"
@blur="handlePanelBlur"
@ -101,7 +101,7 @@
:value="value"
:active="active"
:actions="actions"
:theme="synthesizedTheme"
:theme="syntheticTheme"
:is-date-disabled="isDateDisabled"
@input="handleRangePanelInput"
@blur="handlePanelBlur"
@ -115,7 +115,7 @@
:value="value"
:active="active"
:actions="actions"
:theme="synthesizedTheme"
:theme="syntheticTheme"
:is-date-disabled="isDateDisabled"
:is-time-disabled="isTimeDisabled"
@input="handleRangePanelInput"

14
src/Descriptions/src/Descriptions.vue
View File

@ -52,7 +52,7 @@ export default {
}
},
computed: {
synthesizedColumn () {
syntheticColumn () {
return this.columns || this.column
}
},
@ -82,14 +82,14 @@ export default {
}, itemLabel), h('td', {
staticClass: 'n-descriptions-table-content',
attrs: {
colspan: isLastIteration ? (this.synthesizedColumn - memorizedSpan) * 2 + 1 : itemSpan * 2 - 1
colspan: isLastIteration ? (this.syntheticColumn - memorizedSpan) * 2 + 1 : itemSpan * 2 - 1
}
}, itemChildren))
} else {
state.row.push(h('td', {
staticClass: 'n-descriptions-table-content',
attrs: {
colspan: isLastIteration ? (this.synthesizedColumn - memorizedSpan) * 2 : itemSpan * 2
colspan: isLastIteration ? (this.syntheticColumn - memorizedSpan) * 2 : itemSpan * 2
}
}, [
h('span', {
@ -99,7 +99,7 @@ export default {
}, itemChildren)]))
}
} else {
const colspan = isLastIteration ? (this.synthesizedColumn - memorizedSpan) * 2 : itemSpan * 2
const colspan = isLastIteration ? (this.syntheticColumn - memorizedSpan) * 2 : itemSpan * 2
state.row.push(h('th', {
staticClass: 'n-descriptions-table-header',
attrs: {
@ -113,7 +113,7 @@ export default {
}
}, itemChildren))
}
if (state.span >= this.synthesizedColumn || isLastIteration) {
if (state.span >= this.syntheticColumn || isLastIteration) {
state.span = 0
if (state.row.length) {
state.rows.push(state.row)
@ -138,9 +138,9 @@ export default {
}, row))
return h('div', {
staticClass: 'n-descriptions',
style: this.synthesizedStyle,
style: this.syntheticStyle,
class: {
[`n-${this.synthesizedTheme}-theme`]: this.synthesizedTheme,
[`n-${this.syntheticTheme}-theme`]: this.syntheticTheme,
[`n-descriptions--${this.labelPlacement}-label-placement`]: true,
[`n-descriptions--${this.labelAlign}-label-align`]: true,
[`n-descriptions--${this.size}-size`]: true,

4
src/Divider/src/main.vue
View File

@ -6,9 +6,9 @@
'n-divider--no-title': !$slots.default,
'n-divider--dashed': dashed,
[`n-divider--title-position-${titlePlacement}`]: $slots.default && titlePlacement,
[`n-${synthesizedTheme}-theme`]: synthesizedTheme
[`n-${syntheticTheme}-theme`]: syntheticTheme
}"
:style="synthesizedStyle"
:style="syntheticStyle"
>
<hr
v-if="!vertical"

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

@ -25,7 +25,7 @@
}"
:class="{
[`n-drawer--${placement}-placement`]: true,
[`n-${synthesizedTheme}-theme`]: synthesizedTheme
[`n-${syntheticTheme}-theme`]: syntheticTheme
}"
>
<slot />

2
src/Dropdown/src/DropdownMenu.vue
View File

@ -209,7 +209,7 @@ export default {
options: this.selectOptions,
size: this.size,
isOptionSelected: () => false,
theme: this.synthesizedTheme
theme: this.syntheticTheme
},
style: {
overflow: 'visible'

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

@ -77,19 +77,19 @@ export default {
active () {
return this.menuActivated && this.menuPendingToBeActivated
},
synthesizedStyleWidth () {
syntheticStyleWidth () {
if (this.NDropdownMenu.inheritedSubmenuWidth) {
return this.NDropdownMenu.inheritedSubmenuWidth + 'px'
}
return null
},
synthesizedStyleMinWidth () {
syntheticStyleMinWidth () {
if (this.NDropdownMenu.inheritedSubmenuMinWidth) {
return this.NDropdownMenu.inheritedSubmenuMinWidth + 'px'
}
return null
},
synthesizedStyleMaxWidth () {
syntheticStyleMaxWidth () {
if (this.NDropdownMenu.inheritedSubmenuMaxWidth) {
return this.NDropdownMenu.inheritedSubmenuMaxWidth + 'px'
}
@ -99,8 +99,8 @@ export default {
const style = {}
if (this.width) {
style.width = this.width + 'px'
} else if (this.synthesizedStyleWidth) {
style.width = this.synthesizedStyleWidth
} else if (this.syntheticStyleWidth) {
style.width = this.syntheticStyleWidth
}
if (this.minWidth) {
style.minWidth = this.minWidth + 'px'
@ -200,7 +200,7 @@ export default {
style: this.style,
props: {
options: this.options,
theme: this.synthesizedTheme,
theme: this.syntheticTheme,
defaultFocus: false,
size: this.size
}

10
src/Element/src/main.vue
View File

@ -14,20 +14,20 @@ export default {
}
},
watch: {
synthesizedTheme: function (value, oldValue) {
syntheticTheme: function (value, oldValue) {
this.$emit('theme-change', value, oldValue)
}
},
render (h) {
return h(this.as, {
class: {
[`n-${this.synthesizedTheme}-theme`]: this.synthesizedTheme
[`n-${this.syntheticTheme}-theme`]: this.syntheticTheme
}
}, this.$slots.default || (this.$scopedSlots.default && this.$scopedSlots.default({
theme: this.synthesizedTheme,
theme: this.syntheticTheme,
namespace: this.NConfigProvider ? this.NConfigProvider.inheritedNamespace : null,
themeEnvironment: this.synthesizedThemeEnvironment,
styleScheme: this.synthesizedTheme ? styleScheme[this.synthesizedTheme] : null
themeEnvironment: this.syntheticThemeEnvironment,
styleScheme: this.syntheticTheme ? styleScheme[this.syntheticTheme] : null
})) || null)
}
}

4
src/Empty/src/Empty.vue
View File

@ -2,9 +2,9 @@
<div
class="n-empty"
:class="{
[`n-${synthesizedTheme}-theme`]: synthesizedTheme
[`n-${syntheticTheme}-theme`]: syntheticTheme
}"
:style="synthesizedStyle"
:style="syntheticStyle"
>
<div class="n-empty__icon">
<slot name="icon">

46
src/Form/src/FormItem.vue
View File

@ -2,18 +2,18 @@
<div
class="n-form-item"
:class="{
[`n-form-item--${synthesizedLabelPlacement}-labelled`]: synthesizedLabelPlacement,
[`n-form-item--${synthesizedLabelAlign}-label-aligned`]: synthesizedLabelAlign,
[`n-form-item--required`]: synthesizedRequired && synthesizedShowRequireMark,
[`n-form-item--${syntheticLabelPlacement}-labelled`]: syntheticLabelPlacement,
[`n-form-item--${syntheticLabelAlign}-label-aligned`]: syntheticLabelAlign,
[`n-form-item--required`]: syntheticRequired && syntheticShowRequireMark,
[`n-form-item--no-label`]: !(label || $slots.label),
[`n-form-item--has-feedback`]: hasFeedback,
[`n-${synthesizedTheme}-theme`]: synthesizedTheme
[`n-${syntheticTheme}-theme`]: syntheticTheme
}"
>
<label
v-if="label || $slots.label"
:class="`n-form-item-label`"
:style="synthesizedLabelStyle"
:style="syntheticLabelStyle"
>
<template
v-if="$slots.label"
@ -123,61 +123,61 @@ export default {
},
computed: {
labelWidthStyle () {
if (/\d$/.test(String(this.synthesizedLabelWidth))) {
if (/\d$/.test(String(this.syntheticLabelWidth))) {
return {
width: `${this.synthesizedLabelWidth}px`
width: `${this.syntheticLabelWidth}px`
}
} else {
return {
width: this.synthesizedLabelWidth
width: this.syntheticLabelWidth
}
}
},
synthesizedShowRequireMark () {
syntheticShowRequireMark () {
if (this.showRequireMark === null) {
return this.NForm.showRequireMark
}
return this.showRequireMark
},
synthesizedLabelStyle () {
syntheticLabelStyle () {
return {
...this.labelWidthStyle,
...this.labelStyle
}
},
synthesizedLabelWidth () {
syntheticLabelWidth () {
if (this.labelWidth) return this.labelWidth
if (this.NForm && this.NForm.labelWidth) return this.NForm.labelWidth
return null
},
styleLabelWidth () {
if (this.synthesizedLabelPlacement === 'top') return null
if (this.synthesizedLabelWidth === null) return null
return `${this.synthesizedLabelWidth}px`
if (this.syntheticLabelPlacement === 'top') return null
if (this.syntheticLabelWidth === null) return null
return `${this.syntheticLabelWidth}px`
},
synthesizedRulePath () {
syntheticRulePath () {
if (this.rulePath) return this.rulePath
else if (this.path) {
return this.path
} else return null
},
synthesizedLabelPlacement () {
syntheticLabelPlacement () {
if (this.labelPlacement) return this.labelPlacement
if (this.NForm && this.NForm.labelPlacement) { return this.NForm.labelPlacement }
return 'top'
},
synthesizedLabelAlign () {
syntheticLabelAlign () {
if (this.labelAlign) return this.labelAlign
if (this.NForm && this.NForm.labelAlign) return this.NForm.labelAlign
return 'left'
},
synthesizedRequired () {
if (this.synthesizedRules.some(rule => rule.required)) return true
syntheticRequired () {
if (this.syntheticRules.some(rule => rule.required)) return true
if (this.required) return true
if (this.NForm && this.NForm.required) return true
return false
},
synthesizedRules () {
syntheticRules () {
let rules = []
if (this.rule) {
if (Array.isArray(this.rule)) {
@ -189,7 +189,7 @@ export default {
if (
this.NForm &&
this.NForm.rules &&
get(this.NForm.rules, this.synthesizedRulePath, null)
get(this.NForm.rules, this.syntheticRulePath, null)
) {
const rule = get(this.NForm.rules, this.path)
if (Array.isArray(rule)) {
@ -282,7 +282,7 @@ export default {
} else {
if (!options.first) options.first = this.first
}
const rules = this.synthesizedRules
const rules = this.syntheticRules
const path = this.path
const value = get(this.NForm.model, this.path, null)
const activeRules = (!trigger
@ -336,7 +336,7 @@ export default {
this.validationErrored = false
},
addValidationEventListeners () {
const rules = this.synthesizedRules
const rules = this.syntheticRules
if (rules.length > 0) {
this.$on('blur', this.handleContentBlur)
this.$on('input', this.handleContentInput)

4
src/GradientText/src/main.vue
View File

@ -3,10 +3,10 @@
class="n-gradient-text"
:class="{
[`n-gradient-text--${computedType}-type`]: true,
[`n-${synthesizedTheme}-theme`]: synthesizedTheme
[`n-${syntheticTheme}-theme`]: syntheticTheme
}"
:style="{
...synthesizedStyle,
...syntheticStyle,
fontSize: styleFontSize,
backgroundImage: styleBackgroundImage
}"

2
src/Icon/src/main.vue
View File

@ -34,7 +34,7 @@ export default {
staticClass: 'n-icon',
style: {
...this.styles,
...this.synthesizedStyle
...this.syntheticStyle
},
on: this.$listeners
}, this.$slots.default)

4
src/Input/src/Input.vue
View File

@ -12,7 +12,7 @@
'n-input--focus': forceFocus || focus,
'n-input--suffix': $slots.suffix,
'n-input--prefix': $slots.prefix || $slots.affix,
[`n-${synthesizedTheme}-theme`]: synthesizedTheme
[`n-${syntheticTheme}-theme`]: syntheticTheme
}"
:tabindex="!disabled && (pressEnterToActivateInput && !inputFocused) ? 0 : false"
@focus="handleWrapperFocus"
@ -107,7 +107,7 @@
>
<div class="n-input__cancel-mark">
<n-cancel-mark
:theme="synthesizedTheme"
:theme="syntheticTheme"
:show="showCancelMark"
:clearable="clearable"
@clear="handleClear"

2
src/Input/src/InputGroupLabel.vue
View File

@ -2,7 +2,7 @@
<div
class="n-input-group-label"
:class="{
[`n-${synthesizedTheme}-theme`]: synthesizedTheme,
[`n-${syntheticTheme}-theme`]: syntheticTheme,
[`n-input-group-label--${size}-size`]: true
}"
>

2
src/InputNumber/src/main.vue
View File

@ -5,7 +5,7 @@
[`n-input-number--${size}-size`]: true,
'n-input-number--disabled': disabled,
'n-input-number--invalid': invalid,
[`n-${synthesizedTheme}-theme`]: synthesizedTheme
[`n-${syntheticTheme}-theme`]: syntheticTheme
}"
>
<button

6
src/Layout/src/Layout.vue
View File

@ -4,7 +4,7 @@
:class="{
[`n-layout--${mode}-positioned`]: mode,
'n-layout--has-sider': hasSider,
[`n-${synthesizedTheme}-theme`]: synthesizedTheme
[`n-${syntheticTheme}-theme`]: syntheticTheme
}"
:style="{
marginLeft: styleMarginLeft,
@ -22,9 +22,13 @@
import layoutModeMixin from './layoutModeMixin'
import themeable from '../../_mixins/themeable'
import withapp from '../../_mixins/withapp'
import NScrollbar from '../../Scrollbar'
export default {
name: 'NLayout',
components: {
NScrollbar
},
mixins: [ withapp, themeable, layoutModeMixin ],
provide () {
return {

4
src/Layout/src/LayoutFooter.vue
View File

@ -3,10 +3,10 @@
class="n-layout-footer"
:class="{
[`n-layout-footer--${mode}-positioned`]: mode,
[`n-${synthesizedTheme}-theme`]: synthesizedTheme,
[`n-${syntheticTheme}-theme`]: syntheticTheme,
[`n-layout-footer--bordered`]: bordered
}"
:style="synthesizedStyle"
:style="syntheticStyle"
>
<slot />
</div>

4
src/Layout/src/LayoutHeader.vue
View File

@ -3,10 +3,10 @@
class="n-layout-header"
:class="{
[`n-layout-header--${mode}-positioned`]: mode,
[`n-${synthesizedTheme}-theme`]: synthesizedTheme,
[`n-${syntheticTheme}-theme`]: syntheticTheme,
[`n-layout-header--bordered`]: bordered
}"
:style="synthesizedStyle"
:style="syntheticStyle"
>
<slot />
</div>

8
src/Layout/src/LayoutSider.vue
View File

@ -6,10 +6,10 @@
[`n-layout-sider--bordered`]: bordered,
[`n-layout-sider--collapsed`]: collapsed,
[`n-layout-sider--show-content`]: showContent,
[`n-${synthesizedTheme}-theme`]: synthesizedTheme
[`n-${syntheticTheme}-theme`]: syntheticTheme
}"
:style="{
...synthesizedStyle,
...syntheticStyle,
transform: styleTransform,
maxWidth: styleMaxWidth,
width: styleWidth,
@ -36,11 +36,13 @@ import layoutModeMixin from './layoutModeMixin'
import withapp from '../../_mixins/withapp'
import themeable from '../../_mixins/themeable'
import ToggleButton from './ToggleButton'
import NScrollbar from '../../Scrollbar'
export default {
name: 'NLayoutSider',
components: {
ToggleButton
ToggleButton,
NScrollbar
},
mixins: [ withapp, themeable, layoutModeMixin ],
props: {

2
src/List/src/List.vue
View File

@ -4,7 +4,7 @@
:class="{
'n-list--bordered': bordered,
[`n-list--${size}-size`]: size,
[`n-${synthesizedTheme}-theme`]: synthesizedTheme
[`n-${syntheticTheme}-theme`]: syntheticTheme
}"
>
<div v-if="$slots.header" class="n-list__header">

6
src/Log/src/Log.vue
View File

@ -2,7 +2,7 @@
<div
class="n-log n-code"
:class="{
[`n-${synthesizedTheme}-theme`]: synthesizedTheme
[`n-${syntheticTheme}-theme`]: syntheticTheme
}"
:style="{
lineHeight: lineHeight,
@ -12,7 +12,7 @@
>
<n-scrollbar ref="scrollbar" @scroll="handleScroll">
<n-log-line
v-for="(line, index) in synthesizedLines"
v-for="(line, index) in syntheticLines"
:key="index"
:line="line"
/>
@ -107,7 +107,7 @@ export default {
const lineHeight = Math.floor(this.fontSize * this.lineHeight)
return `calc(${this.rows * lineHeight}px)`
},
synthesizedLines () {
syntheticLines () {
if (!this.log) return []
return this.log.split('\n')
}

6
src/Log/src/LogLoader.vue
View File

@ -1,15 +1,15 @@
<template>
<div class="n-log-loader">
<n-spin /><span class="n-log-loader__content">Loading</span>
<n-base-loading :stroke-width="24" /><span class="n-log-loader__content">Loading</span>
</div>
</template>
<script>
import NSpin from '../../Spin'
import NBaseLoading from '../../_base/Loading'
export default {
components: {
NSpin
NBaseLoading
}
}
</script>

6
src/Menu/src/Menu.vue
View File

@ -2,7 +2,7 @@
<div
class="n-menu"
:class="{
[`n-${synthesizedTheme}-theme`]: synthesizedTheme,
[`n-${syntheticTheme}-theme`]: syntheticTheme,
[`n-menu--${mode}`]: mode,
'n-menu--collapsed': collapsed,
'n-menu--transition-disabled': transitionDisabled
@ -97,7 +97,7 @@ export default {
}
},
computed: {
synthesizedOpenNames () {
syntheticOpenNames () {
if (this.openNames !== undefined) return this.openNames || []
else return this.internalOpenNames
}
@ -111,7 +111,7 @@ export default {
this.$emit('input', value)
},
toggleOpenName (name) {
const currentOpenNames = Array.from(this.synthesizedOpenNames)
const currentOpenNames = Array.from(this.syntheticOpenNames)
const index = currentOpenNames.findIndex(openName => openName === name)
if (~index) {
currentOpenNames.splice(index, 1)

10
src/Menu/src/MenuItem.vue
View File

@ -14,7 +14,7 @@
:max-icon-size="maxIconSize"
:active-icon-size="activeIconSize"
:title="title"
:disabled="synthesizedDisabled"
:disabled="syntheticDisabled"
:title-extra="titleExtra"
@click="handleClick"
>
@ -37,7 +37,7 @@
:padding-left="delayedPaddingLeft"
:title="title"
:title-extra="titleExtra"
:disabled="synthesizedDisabled"
:disabled="syntheticDisabled"
:selected="selected"
@click="handleClick"
>
@ -102,9 +102,9 @@ export default {
}
},
computed: {
synthesizedDisabled () {
syntheticDisabled () {
if (this.disabled !== undefined) return this.disabled
return this.PenetratedNSubmenu && this.PenetratedNSubmenu.synthesizedDisabled
return this.PenetratedNSubmenu && this.PenetratedNSubmenu.syntheticDisabled
},
selected () {
if (this.rootMenuValue === this.name) {
@ -126,7 +126,7 @@ export default {
},
methods: {
handleClick () {
if (!this.synthesizedDisabled) {
if (!this.syntheticDisabled) {
this.NMenu.handleSelect(this.name)
this.$emit('click', this)
}

20
src/Menu/src/Submenu.vue
View File

@ -8,7 +8,7 @@
:placement="submenuPopoverPlacement"
:show-arrow="false"
:controller="popoverController"
:disabled="(!rootMenuIsHorizontal && !rootMenuCollapsed) || synthesizedDisabled"
:disabled="(!rootMenuIsHorizontal && !rootMenuCollapsed) || syntheticDisabled"
:directive="rootMenuIsHorizontal ? 'show' : 'if'"
:overlay-style="{
width: overlayWidth === null ? null : overlayMinWidth + 'px',
@ -22,7 +22,7 @@
<template v-slot:activator>
<n-menu-item-content
:padding-left="delayedPaddingLeft"
:collapsed="synthesizedCollapsed"
:collapsed="syntheticCollapsed"
:disabled="disabled"
:max-icon-size="maxIconSize"
:active-icon-size="activeIconSize"
@ -57,7 +57,7 @@
</n-popover>
<fade-in-height-expand-transition v-if="!rootMenuIsHorizontal">
<ul
v-show="!synthesizedCollapsed"
v-show="!syntheticCollapsed"
class="n-submenu-content"
>
<slot />
@ -67,7 +67,7 @@
<template v-else>
<n-menu-item-content
:padding-left="delayedPaddingLeft"
:collapsed="synthesizedCollapsed"
:collapsed="syntheticCollapsed"
:disabled="disabled"
:max-icon-size="maxIconSize"
:active-icon-size="activeIconSize"
@ -90,7 +90,7 @@
</n-menu-item-content>
<fade-in-height-expand-transition>
<ul
v-show="!synthesizedCollapsed"
v-show="!syntheticCollapsed"
class="n-submenu-content"
>
<slot />
@ -102,7 +102,7 @@
<script>
import FadeInHeightExpandTransition from '../../_transition/FadeInHeightExpandTransition'
import NPopover from '../..//Popover'
import NPopover from '../../Popover'
import NMenuItemContent from './MenuItemContent'
import NMenu from './Menu'
import menuContentMixin from './menuContentMixin'
@ -155,15 +155,15 @@ export default {
renderedContentAsPopover () {
return this.rootMenuCollapsed && this.atRoot
},
synthesizedDisabled () {
syntheticDisabled () {
if (this.disabled !== undefined) return this.disabled
if (this.PenetratedNSubmenu) return this.PenetratedNSubmenu.synthesizedDisabled
if (this.PenetratedNSubmenu) return this.PenetratedNSubmenu.syntheticDisabled
return this.NMenu && this.NMenu.disabled
},
collapsedAccrodingToOpenNames () {
return !this.NMenu.synthesizedOpenNames.includes(this.name)
return !this.NMenu.syntheticOpenNames.includes(this.name)
},
synthesizedCollapsed () {
syntheticCollapsed () {
if (!this.NMenu.submenuCollapsable) return false
else if (this.rootMenuCollapsed) return true
return this.collapsedAccrodingToOpenNames

4
src/Modal/src/Modal.vue
View File

@ -92,11 +92,11 @@ export default {
ref: 'content',
props: {
...this.$props,
theme: this.synthesizedTheme,
theme: this.syntheticTheme,
active: this.active
},
class: {
[`n-${this.synthesizedTheme}-theme`]: this.synthesizedTheme
[`n-${this.syntheticTheme}-theme`]: this.syntheticTheme
},
on: {
deactivate: () => {

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

@ -79,7 +79,7 @@
<script>
import NScrollbar from '../../Scrollbar'
import NConfirm from '../../Confirm/src/Confirm'
import NCard from '../..//Card'
import NCard from '../../Card'
import themeable from '../../_mixins/themeable'
import presetProps from './presetProps'

16
src/Pagination/src/main.vue
View File

@ -3,14 +3,14 @@
class="n-pagination"
:class="{
'n-pagination--transition-disabled': transitionDisabled,
[`n-${synthesizedTheme}-theme`]: synthesizedTheme,
[`n-${syntheticTheme}-theme`]: syntheticTheme,
'n-pagination--disabled': disabled
}"
>
<div
class="n-pagination-item n-pagination-item--backward"
:class="{
'n-pagination-item--disabled': page <= 1 || page > synthesizedPageCount || disabled
'n-pagination-item--disabled': page <= 1 || page > syntheticPageCount || disabled
}"
@click="backward"
>
@ -61,7 +61,7 @@
<div
class="n-pagination-item n-pagination-item--forward"
:class="{
'n-pagination-item--disabled': page < 1 || page >= synthesizedPageCount || disabled
'n-pagination-item--disabled': page < 1 || page >= syntheticPageCount || disabled
}"
@click="forward"
>
@ -170,7 +170,7 @@ export default {
}
},
computed: {
synthesizedPageCount () {
syntheticPageCount () {
if (this.total !== undefined) return this.total <= 0 ? 1 : this.total
if (this.pageCount !== undefined) return this.pageCount <= 0 ? 1 : this.pageCount
console.error(
@ -186,7 +186,7 @@ export default {
}))
},
pageItems () {
return pageItems(this.page, this.synthesizedPageCount, this.pageSlot)
return pageItems(this.page, this.syntheticPageCount, this.pageSlot)
}
},
watch: {
@ -225,7 +225,7 @@ export default {
},
forward () {
if (this.disabled) return
const page = Math.min(this.page + 1, this.synthesizedPageCount)
const page = Math.min(this.page + 1, this.syntheticPageCount)
this.changeCurrentPage(page)
},
backward () {
@ -235,7 +235,7 @@ export default {
},
fastForward () {
if (this.disabled) return
const page = Math.min(this.page + (this.pageSlot - 4), this.synthesizedPageCount)
const page = Math.min(this.page + (this.pageSlot - 4), this.syntheticPageCount)
this.changeCurrentPage(page)
},
fastBackward () {
@ -249,7 +249,7 @@ export default {
handleQuickJumperKeyUp (e) {
if (e.code === 'Enter') {
const page = parseInt(this.quickJumperValue)
if (!Number.isNaN(page) && page >= 1 && page <= this.synthesizedPageCount) {
if (!Number.isNaN(page) && page >= 1 && page <= this.syntheticPageCount) {
this.changeCurrentPage(page)
this.quickJumperValue = ''
}

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

@ -281,7 +281,7 @@ export default {
staticClass: 'n-popover-content',
class: {
'n-popover-content--without-arrow': !this.arrow,
[`n-${this.synthesizedTheme}-theme`]: this.synthesizedTheme,
[`n-${this.syntheticTheme}-theme`]: this.syntheticTheme,
'n-popover-content--without-shadow': !this.shadow,
[this.overlayClass]: this.overlayClass,
'n-popover-content--fix-width': this.width !== null || this.maxWidth !== null

2
src/Popselect/src/PopselectPanel.vue
View File

@ -1,6 +1,6 @@
<template>
<n-base-select-menu
:theme="synthesizedTheme"
:theme="syntheticTheme"
:multiple="multiple"
:options="options"
:loading="loading"

18
src/Progress/src/main.vue
View File

@ -4,7 +4,7 @@
:class="{
[`n-progress--${status}`]: status,
[`n-progress--${type}`]: type,
[`n-${synthesizedTheme}-theme`]: synthesizedTheme
[`n-${syntheticTheme}-theme`]: syntheticTheme
}"
>
<div
@ -84,7 +84,7 @@
ref="line"
class="n-progress-graph-line"
:class="{
[`n-progress-graph-line--indicator-${synthesizedIndicatorPlacement}`]: true
[`n-progress-graph-line--indicator-${syntheticIndicatorPlacement}`]: true
}"
>
<div
@ -104,7 +104,7 @@
}"
>
<div
v-if="synthesizedIndicatorPlacement === 'inside'"
v-if="syntheticIndicatorPlacement === 'inside'"
class="n-progress-graph-line-indicator"
>
{{ percentage + unit }}
@ -112,7 +112,7 @@
</div>
</div>
<div
v-if="synthesizedIndicatorPlacement === 'inside-label'"
v-if="syntheticIndicatorPlacement === 'inside-label'"
ref="indicator"
class="n-progress-graph-line-indicator"
:style="indicatorPercentageIsCaculated ? {
@ -131,7 +131,7 @@
</div>
</div>
</div>
<div v-if="showIndicator && synthesizedIndicatorPlacement === 'outside'">
<div v-if="showIndicator && syntheticIndicatorPlacement === 'outside'">
<div
v-if="$slots.default"
class="n-progress-custom-content"
@ -325,11 +325,11 @@ export default {
}
},
computed: {
synthesizedIndicatorPlacement () {
syntheticIndicatorPlacement () {
return this.indicatorPlacement || this.indicatorPosition
},
fillStyleMaxWidth () {
return Math.max(this.percentage - (this.synthesizedIndicatorPlacement === 'inside-label' ? 2 : 0), 0)
return Math.max(this.percentage - (this.syntheticIndicatorPlacement === 'inside-label' ? 2 : 0), 0)
},
strokeDasharray () {
if (this.type === 'multiple-circle') {
@ -383,7 +383,7 @@ export default {
},
watch: {
percentage (newPercentage) {
if (this.synthesizedIndicatorPlacement === 'inside-label') {
if (this.syntheticIndicatorPlacement === 'inside-label') {
this.$nextTick().then(() => {
this.indicatorPercentage = this.calcIndicatorPercentage()
})
@ -392,7 +392,7 @@ export default {
},
methods: {
handleFontReady () {
if (this.synthesizedIndicatorPlacement === 'inside-label') {
if (this.syntheticIndicatorPlacement === 'inside-label') {
this.$nextTick().then(() => {
this.indicatorPercentage = this.calcIndicatorPercentage()
this.$nextTick().then(() => {

16
src/Radio/src/Radio.vue
View File

@ -2,18 +2,18 @@
<div
class="n-radio"
:class="{
'n-radio--disabled': synthesizedDisabled,
'n-radio--checked': synthesizedChecked,
[`n-${synthesizedTheme}-theme`]: synthesizedTheme
'n-radio--disabled': syntheticDisabled,
'n-radio--checked': syntheticChecked,
[`n-${syntheticTheme}-theme`]: syntheticTheme
}"
:tabindex="synthesizedDisabled ? -1 : 0"
:tabindex="syntheticDisabled ? -1 : 0"
@keyup.enter="handleKeyUpEnter"
@click="handleClick"
>
<div
class="n-radio__control"
:class="{
'n-radio__control--checked': synthesizedChecked
'n-radio__control--checked': syntheticChecked
}"
/>
<div class="n-radio__label">
@ -54,14 +54,14 @@ export default {
}
},
computed: {
synthesizedChecked () {
syntheticChecked () {
if (this.NRadioGroup) {
return this.NRadioGroup.value === this.value
} else {
return this.checkedValue === this.value
}
},
synthesizedDisabled () {
syntheticDisabled () {
if (this.NRadioGroup && this.NRadioGroup.disabled) return true
if (this.disabled) return true
return false
@ -76,7 +76,7 @@ export default {
this.toggle()
},
toggle () {
if (this.synthesizedDisabled) return
if (this.syntheticDisabled) return
if (this.checkedValue !== this.value) {
this.emitChangeEvent()
}

12
src/Radio/src/RadioButton.vue
View File

@ -2,10 +2,10 @@
<div
class="n-radio-button"
:class="{
'n-radio-button--disabled': synthesizedDisabled,
'n-radio-button--checked': synthesizedChecked
'n-radio-button--disabled': syntheticDisabled,
'n-radio-button--checked': syntheticChecked
}"
:tabindex="synthesizedDisabled ? -1 : 0"
:tabindex="syntheticDisabled ? -1 : 0"
@keyup.enter="handleKeyUpEnter"
@click="handleClick"
>
@ -41,14 +41,14 @@ export default {
}
},
computed: {
synthesizedChecked () {
syntheticChecked () {
if (this.NRadioGroup) {
return this.NRadioGroup.value === this.value
} else {
return this.checkedValue === this.value
}
},
synthesizedDisabled () {
syntheticDisabled () {
if (this.NRadioGroup && this.NRadioGroup.disabled) return true
if (this.disabled) return true
return false
@ -68,7 +68,7 @@ export default {
this.toggle()
},
toggle () {
if (this.synthesizedDisabled) return
if (this.syntheticDisabled) return
if (this.checkedValue !== this.value) {
this.emitChangeEvent()
}

4
src/Radio/src/RadioGroup.vue
View File

@ -30,7 +30,7 @@ function mapSlot (h, defaultSlot, groupInstance) {
const currentInstanceDisabled = instanceOptions.propsData.disabled
let lastInstancePriority
let currentInstancePriority
if (groupInstance.synthesizedTheme === 'dark') {
if (groupInstance.syntheticTheme === 'dark') {
/**
* Priority of button splitor:
* !disabled checked >
@ -109,7 +109,7 @@ export default {
return h('div', {
staticClass: 'n-radio-group',
class: {
[`n-${this.synthesizedTheme}-theme`]: this.synthesizedTheme,
[`n-${this.syntheticTheme}-theme`]: this.syntheticTheme,
[`n-radio-group--${this.size}-size`]: this.size,
[`n-radio-group--button-group`]: this.radioButtonCount > 0
}

2
src/Result/src/main.vue
View File

@ -2,7 +2,7 @@
<div
class="n-result"
:class="{
[`n-${synthesizedTheme}-theme`]: synthesizedTheme,
[`n-${syntheticTheme}-theme`]: syntheticTheme,
[`n-result--${status}-status`]: status
}"
>

2
src/Scrollbar/src/main.vue
View File

@ -6,7 +6,7 @@
v-else
class="n-scrollbar"
:class="{
[`n-${synthesizedTheme}-theme`]: synthesizedTheme
[`n-${syntheticTheme}-theme`]: syntheticTheme
}"
@mouseenter="handleMouseEnterWrapper"
@mouseleave="handleMouseLeaveWrapper"

6
src/Select/src/Select.vue
View File

@ -5,7 +5,7 @@
:class="{
[`n-select--${size}-size`]: size,
'n-select--multiple': multiple,
[`n-${synthesizedTheme}-theme`]: synthesizedTheme
[`n-${syntheticTheme}-theme`]: syntheticTheme
}"
@keydown.up.prevent="() => {}"
@keydown.down.prevent="() => {}"
@ -30,7 +30,7 @@
:clearable="clearable"
:disabled="disabled"
:size="size"
:theme="synthesizedTheme"
:theme="syntheticTheme"
:loading="loading"
@click="handleActivatorClick"
@delete-last-option="handleDeleteLastOption"
@ -60,7 +60,7 @@
v-clickoutside="handleClickOutsideMenu"
class="n-select-menu"
auto-pending-first-option
:theme="synthesizedTheme"
:theme="syntheticTheme"
:pattern="pattern"
:options="filteredOptions"
:multiple="multiple"

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

@ -5,7 +5,7 @@
'n-slider--disabled': disabled,
'n-slider--active': active,
'n-slider--with-mark': marks,
[`n-${synthesizedTheme}-theme`]: synthesizedTheme
[`n-${syntheticTheme}-theme`]: syntheticTheme
}"
@keydown.right="handleKeyDownRight"
@keydown.left="handleKeyDownLeft"
@ -82,7 +82,7 @@
v-if="showTooltip"
class="n-slider-handle-indicator"
:class="{
[`n-${synthesizedTheme}-theme`]: synthesizedTheme
[`n-${syntheticTheme}-theme`]: syntheticTheme
}"
>
{{ activeHandleValue === null ? tooltipHoverDisplayValue : activeHandleValue }}

10
src/Spin/src/main.vue
View File

@ -18,8 +18,8 @@
[`n-spin--${size}-size`]: true
}"
:stroke="stroke"
:stroke-width="synthesizedStrokeWidth"
:theme="synthesizedTheme"
:stroke-width="syntheticStrokeWidth"
:theme="syntheticTheme"
class="n-spin"
/>
</transition>
@ -30,8 +30,8 @@
[`n-spin--${size}-size`]: size
}"
:stroke="stroke"
:stroke-width="synthesizedStrokeWidth"
:theme="synthesizedTheme"
:stroke-width="syntheticStrokeWidth"
:theme="syntheticTheme"
class="n-spin"
/>
</template>
@ -76,7 +76,7 @@ export default {
}
},
computed: {
synthesizedStrokeWidth () {
syntheticStrokeWidth () {
const strokeWidth = this.strokeWidth
if (strokeWidth !== null) return strokeWidth
const size = this.size

2
src/Statistic/src/main.vue
View File

@ -2,7 +2,7 @@
<div
class="n-statistic"
:class="{
[`n-${synthesizedTheme}-theme`]: synthesizedTheme,
[`n-${syntheticTheme}-theme`]: syntheticTheme,
[`n-statistic--${type}-type`]: type
}"
>

12
src/Steps/src/Step.vue
View File

@ -2,7 +2,7 @@
<div
class="n-step"
:class="{
[`n-step--${synthesizedStatus}`]: synthesizedStatus !== null
[`n-step--${syntheticStatus}`]: syntheticStatus !== null
}"
>
<div class="n-step-indicator">
@ -11,23 +11,23 @@
>
<n-icon-switch-transition>
<div
v-if="!(synthesizedStatus === 'finish' || synthesizedStatus === 'error')"
v-if="!(syntheticStatus === 'finish' || syntheticStatus === 'error')"
key="index"
class="n-step-indicator-slot__index"
:style="{
color: synthesizedStatus === 'process' ? ascendantBackgroundColor : null
color: syntheticStatus === 'process' ? ascendantBackgroundColor : null
}"
>
{{ index }}
</div>
<n-icon
v-else-if="synthesizedStatus === 'finish'"
v-else-if="syntheticStatus === 'finish'"
key="finish"
>
<md-checkmark />
</n-icon>
<n-icon
v-else-if="synthesizedStatus === 'error'"
v-else-if="syntheticStatus === 'error'"
key="error"
>
<md-close />
@ -110,7 +110,7 @@ export default {
stepsStatus () {
return this.NSteps && this.NSteps.status
},
synthesizedStatus () {
syntheticStatus () {
if (this.status) {
return this.status
} else if (this.index < this.current) {

2
src/Steps/src/Steps.vue
View File

@ -46,7 +46,7 @@ export default {
return h('div', {
staticClass: 'n-steps',
class: {
[`n-${this.synthesizedTheme}-theme`]: this.synthesizedTheme,
[`n-${this.syntheticTheme}-theme`]: this.syntheticTheme,
[`n-steps--${this.size}-size`]: true,
'n-steps--vertical': this.vertical
}

2
src/Switch/src/main.vue
View File

@ -2,7 +2,7 @@
<div
class="n-switch"
:class="{
[`n-${synthesizedTheme}-theme`]: synthesizedTheme
[`n-${syntheticTheme}-theme`]: syntheticTheme
}"
:tabindex="!disabled ? 0 : false"
@click="handleClick"

2
src/Table/src/main.vue
View File

@ -3,7 +3,7 @@
class="n-table"
:class="{
[`n-${synthesizedTheme}-theme`]: synthesizedTheme
[`n-${syntheticTheme}-theme`]: syntheticTheme
}"
>
<table cellspacing="0">

2
src/Tabs/src/Tabs.vue
View File

@ -6,7 +6,7 @@
'n-tabs--scroll': showScrollButton,
[`n-tabs--${size}-size`]: size,
[`n-tabs--flex`]: justifyContent,
[`n-${synthesizedTheme}-theme`]: synthesizedTheme
[`n-${syntheticTheme}-theme`]: syntheticTheme
}"
>
<div

4
src/Tag/src/main.vue
View File

@ -6,12 +6,12 @@
[`n-tag--${type}-type`]: true,
'n-tag--closable': !checkable && closable,
'n-tag--disabled': disabled,
[`n-${synthesizedTheme}-theme`]: synthesizedTheme,
[`n-${syntheticTheme}-theme`]: syntheticTheme,
'n-tag--checkable': checkable,
'n-tag--checked': checkable && checked,
'n-tag--round': round
}"
:style="synthesizedStyle"
:style="syntheticStyle"
@click="handleClick"
>
<slot />

4
src/Thing/src/main.vue
View File

@ -2,9 +2,9 @@
<div
class="n-thing"
:class="{
[`n-${synthesizedTheme}-theme`]: synthesizedTheme
[`n-${syntheticTheme}-theme`]: syntheticTheme
}"
:style="synthesizedStyle"
:style="syntheticStyle"
>
<div v-if="$slots.avatar && contentIndented" class="n-thing-avatar">
<slot name="avatar" />

12
src/Time/src/main.js
View File

@ -51,13 +51,13 @@ export default {
locale: this.dateFnsLocale
}
},
synthesizedTime () {
syntheticTime () {
if (this.unix) {
return fromUnixTime(this.time)
}
return this.time
},
synthesizedTo () {
syntheticTo () {
if (this.unix) {
return fromUnixTime(this.to)
}
@ -65,13 +65,13 @@ export default {
},
renderedTime () {
if (this.format) {
return format(this.synthesizedTime, this.format, this.dateFnsOptions)
return format(this.syntheticTime, this.format, this.dateFnsOptions)
} else if (this.type === 'date') {
return format(this.synthesizedTime, 'yyyy-MM-dd', this.dateFnsOptions)
return format(this.syntheticTime, 'yyyy-MM-dd', this.dateFnsOptions)
} else if (this.type === 'datetime') {
return format(this.synthesizedTime, 'yyyy-MM-dd hh:mm:ss', this.dateFnsOptions)
return format(this.syntheticTime, 'yyyy-MM-dd hh:mm:ss', this.dateFnsOptions)
} else {
return formatDistance(this.synthesizedTime, this.synthesizedTo, {
return formatDistance(this.syntheticTime, this.syntheticTo, {
addSuffix: true,
locale: this.dateFnsLocale
})

4
src/TimePicker/src/main.vue
View File

@ -3,7 +3,7 @@
class="n-time-picker"
:class="{
'n-time-picker--invalid': isValueInvalid,
[`n-${synthesizedTheme}-theme`]: synthesizedTheme
[`n-${syntheticTheme}-theme`]: syntheticTheme
}"
>
<n-input
@ -39,7 +39,7 @@
tabindex="0"
class="n-time-picker-selector"
:class="{
[`n-${synthesizedTheme}-theme`]: synthesizedTheme
[`n-${syntheticTheme}-theme`]: syntheticTheme
}"
>
<div class="n-time-picker-selector-time">

2
src/Timeline/src/Timeline.vue
View File

@ -2,7 +2,7 @@
<div
class="n-timeline"
:class="{
[`n-${synthesizedTheme}-theme`]: synthesizedTheme,
[`n-${syntheticTheme}-theme`]: syntheticTheme,
[`n-timeline--${size}-size`]: true,
[`n-timeline--${itemPlacement}-placement`]: true
}"

4
src/Timeline/src/TimelineItem.vue
View File

@ -69,9 +69,9 @@ export default {
}
},
computed: {
synthesizedTheme () {
syntheticTheme () {
if (this.NTimeline) {
return this.NTimeline.synthesizedTheme
return this.NTimeline.syntheticTheme
}
return null
}

18
src/Transfer/src/Transfer.vue
View File

@ -2,13 +2,13 @@
<div
class="n-transfer"
:class="{
[`n-${synthesizedTheme}-theme`]: synthesizedTheme
[`n-${syntheticTheme}-theme`]: syntheticTheme
}"
>
<div class="n-transfer-list">
<div class="n-transfer-list-header">
<div class="n-transfer-list-header__checkbox">
<n-transfer-header-checkbox :source="true" :theme="synthesizedTheme" @change="handleSourceHeaderCheckboxChange" />
<n-transfer-header-checkbox :source="true" :theme="syntheticTheme" @change="handleSourceHeaderCheckboxChange" />
</div>
<div class="n-transfer-list-header__header">
{{ sourceTitle || localeNamespace.sourceTitle }}
@ -32,7 +32,7 @@
<template v-if="filteredSourceOptions.length">
<n-scrollbar
v-if="virtualScroll"
:theme="synthesizedTheme"
:theme="syntheticTheme"
:container="sourceScrollContainer"
:content="sourceScrollContent"
>
@ -45,7 +45,7 @@
key-field="value"
>
<template v-slot:before>
<n-base-light-bar ref="sourceLightBar" :item-size="ITEM_SIZE" :theme="synthesizedTheme" />
<n-base-light-bar ref="sourceLightBar" :item-size="ITEM_SIZE" :theme="syntheticTheme" />
</template>
<template v-slot="{ item: option, index }">
<n-transfer-source-list-item
@ -63,7 +63,7 @@
</n-scrollbar>
<n-scrollbar v-else>
<div ref="sourceList" class="n-transfer-list-content">
<n-base-light-bar ref="sourceLightBar" :item-size="ITEM_SIZE" :theme="synthesizedTheme" />
<n-base-light-bar ref="sourceLightBar" :item-size="ITEM_SIZE" :theme="syntheticTheme" />
<n-transfer-source-list-item
v-for="option in filteredSourceOptions"
ref="sourceListItems"
@ -95,7 +95,7 @@
<div class="n-transfer-list">
<div class="n-transfer-list-header">
<div class="n-transfer-list-header__checkbox">
<n-transfer-header-checkbox :theme="synthesizedTheme" @change="handleTargetHeaderCheckboxChange" />
<n-transfer-header-checkbox :theme="syntheticTheme" @change="handleTargetHeaderCheckboxChange" />
</div>
<div class="n-transfer-list-header__header">
{{ targetTitle || localeNamespace.targetTitle }}
@ -119,7 +119,7 @@
<template v-if="filteredTargetOptions.length">
<n-scrollbar
v-if="virtualScroll"
:theme="synthesizedTheme"
:theme="syntheticTheme"
:container="targetScrollContainer"
:content="targetScrollContent"
>
@ -132,7 +132,7 @@
key-field="value"
>
<template v-slot:before>
<n-base-light-bar ref="targetLightBar" :item-size="ITEM_SIZE" :theme="synthesizedTheme" />
<n-base-light-bar ref="targetLightBar" :item-size="ITEM_SIZE" :theme="syntheticTheme" />
</template>
<template v-slot="{ item: option, index }">
<n-transfer-target-list-item
@ -150,7 +150,7 @@
</n-scrollbar>
<n-scrollbar v-else>
<div ref="targetList" class="n-transfer-list-content">
<n-base-light-bar ref="targetLightBar" :item-size="ITEM_SIZE" :theme="synthesizedTheme" />
<n-base-light-bar ref="targetLightBar" :item-size="ITEM_SIZE" :theme="syntheticTheme" />
<n-transfer-target-list-item
v-for="(option, index) in filteredTargetOptions"
ref="targetListItems"

6
src/Transfer/src/TransferSourceListItem.vue
View File

@ -11,9 +11,9 @@
>
<div class="n-transfer-list-item__checkbox">
<n-simple-checkbox
:theme="NTransfer.synthesizedTheme"
:theme="NTransfer.syntheticTheme"
:disabled="disabled"
:checked="synthesizedChecked"
:checked="syntheticChecked"
/>
</div>
<div
@ -63,7 +63,7 @@ export default {
}
},
computed: {
synthesizedChecked () {
syntheticChecked () {
if (this.NTransfer.virtualScroll) {
return this.NTransfer.sourceCheckedValues.includes(this.value)
} else {

6
src/Transfer/src/TransferTargetListItem.vue
View File

@ -11,9 +11,9 @@
>
<div class="n-transfer-list-item__checkbox">
<n-simple-checkbox
:theme="NTransfer.synthesizedTheme"
:theme="NTransfer.syntheticTheme"
:disabled="disabled"
:checked="synthesizedChecked"
:checked="syntheticChecked"
/>
</div>
<div
@ -63,7 +63,7 @@ export default {
}
},
computed: {
synthesizedChecked () {
syntheticChecked () {
if (this.NTransfer.virtualScroll) {
return this.NTransfer.targetCheckedValues.includes(this.value)
} else {

26
src/Tree/src/Tree.js
View File

@ -21,16 +21,16 @@ function createNode (node, h, self) {
drop: self.handleDrop,
check: self.handleCheck
}
const expanded = self.synthesizedExpandedKeys.includes(node.key)
const expanded = self.syntheticExpandedKeys.includes(node.key)
const props = {
data: node,
expanded,
selected: self.synthesizedSelectedKeys.includes(node.key),
selected: self.syntheticSelectedKeys.includes(node.key),
draggable: self.draggable,
checkable: self.checkable,
drop: self.drop,
blockNode: self.blockNode,
checked: self.synthesizedCheckedKeys.includes(node.key)
checked: self.syntheticCheckedKeys.includes(node.key)
}
return h(NTreeNode, {
props,
@ -185,21 +185,21 @@ export default {
hasCheckedKeys () {
return Array.isArray(this.checkedKeys)
},
synthesizedExpandedKeys () {
syntheticExpandedKeys () {
if (this.hasExpandedKeys) {
return this.expandedKeys
} else {
return this.internalExpandedKeys
}
},
synthesizedSelectedKeys () {
syntheticSelectedKeys () {
if (this.hasSelectedKeys) {
return this.selectedKeys
} else {
return this.internalSelectedKeys
}
},
synthesizedCheckedKeys () {
syntheticCheckedKeys () {
if (this.hasCheckedKeys) {
return this.checkedKeys
} else {
@ -209,13 +209,13 @@ export default {
},
methods: {
getSelectedKeys () {
return this.synthesizedSelectedKeys
return this.syntheticSelectedKeys
},
getCheckedKeys () {
return this.synthesizedCheckedKeys
return this.syntheticCheckedKeys
},
getExpandedKeys () {
return this.synthesizedExpandedKeys
return this.syntheticExpandedKeys
},
disableTransition () {
this.transitionDisabled = true
@ -250,7 +250,7 @@ export default {
this.draggingNode = null
},
toggleExpand (node) {
const index = this.synthesizedExpandedKeys.findIndex(expandNodeId => expandNodeId === node.key)
const index = this.syntheticExpandedKeys.findIndex(expandNodeId => expandNodeId === node.key)
if (~index) {
this.$emit('collapse', node)
if (!this.hasExpandedKeys) {
@ -277,10 +277,10 @@ export default {
this.$emit('dragenter', node)
this.droppingNodeKey = node.key
if (node.key === this.draggingNodeKey) return
if (!this.synthesizedExpandedKeys.includes(node.key) && !node.isLeaf) {
if (!this.syntheticExpandedKeys.includes(node.key) && !node.isLeaf) {
window.clearTimeout(this.expandTimerId)
this.expandTimerId = window.setTimeout(() => {
if (this.droppingNodeKey === node.key && !this.synthesizedExpandedKeys.includes(node.key)) {
if (this.droppingNodeKey === node.key && !this.syntheticExpandedKeys.includes(node.key)) {
if (!this.hasExpandedKeys) {
this.internalExpandedKeys.push(node.key)
}
@ -306,7 +306,7 @@ export default {
return h('div', {
staticClass: 'n-tree',
class: {
[`n-${this.synthesizedTheme}-theme`]: this.synthesizedTheme
[`n-${this.syntheticTheme}-theme`]: this.syntheticTheme
}
}, convertRootedOptionsToVNodeTree(mOptions, h, this))
}

2
src/Typography/src/getTheme.js
View File

@ -1,6 +1,6 @@
function getTheme (cursor) {
while (cursor) {
if (cursor.synthesizedTheme) return cursor.synthesizedTheme
if (cursor.syntheticTheme) return cursor.syntheticTheme
cursor = cursor.$parent
}
return null

17
src/_base/Icon/src/main.vue
View File

@ -10,9 +10,8 @@
<svg
v-else-if="type === 'fastForward' || type === 'fastBackward' || type === 'fast-forward' || type === 'fast-backward'"
class="n-base-icon"
:class="{
'n-base-icon--fast-backward': type === 'fast-backward',
'n-base-icon--fast-forward': type === 'fast-forward'
:style="{
transform: styleTransform
}"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
@ -25,9 +24,8 @@
<svg
v-else-if="type === 'forward' || type === 'backward'"
class="n-base-icon"
:class="{
'n-base-icon--backward': type === 'backward',
'n-base-icon--forward': type === 'forward'
:style="{
transform: styleTransform
}"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
@ -44,6 +42,13 @@ export default {
type: String,
default: null
}
},
computed: {
styleTransform () {
const type = this.type
if (type === 'backward' || type === 'fast-backward') return `rotate(180deg)`
return null
}
}
}
</script>

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