mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2025-04-12 14:40:47 +08:00
site: i18n, prune codes
This commit is contained in:
07akioni
parent
01a6a9fce4
commit
d0c369efb6
@ -63,11 +63,6 @@ exports.docLoaders = (env) => [
|
||||
limit: 10000,
|
||||
name: path.posix.join('static', '[name].[hash:7].[ext]')
|
||||
}
|
||||
},
|
||||
{
|
||||
resourceQuery: /blockType=i18n/,
|
||||
type: 'javascript/auto',
|
||||
loader: '@intlify/vue-i18n-loader'
|
||||
}
|
||||
]
|
||||
|
||||
|
||||
@ -1,31 +0,0 @@
|
||||
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
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,56 +0,0 @@
|
||||
/**
|
||||
* Webpack config under development
|
||||
*/
|
||||
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 CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin')
|
||||
|
||||
const webpackConfig = {
|
||||
mode: 'development',
|
||||
entry: './demo/dev-design-index',
|
||||
output: {
|
||||
path: path.resolve(process.cwd()),
|
||||
publicPath: '/',
|
||||
filename: '[name].[hash:7].js',
|
||||
chunkFilename: '[name].[hash:7].js'
|
||||
},
|
||||
resolve: config.resolve,
|
||||
devServer: {
|
||||
host: '0.0.0.0',
|
||||
port: 8086,
|
||||
publicPath: '/',
|
||||
hot: true,
|
||||
historyApiFallback: true
|
||||
},
|
||||
performance: {
|
||||
hints: false
|
||||
},
|
||||
stats: {
|
||||
children: false
|
||||
},
|
||||
module: {
|
||||
rules: config.docLoaders()
|
||||
},
|
||||
plugins: [
|
||||
new CaseSensitivePathsPlugin(),
|
||||
new webpack.HotModuleReplacementPlugin(),
|
||||
new HtmlWebpackPlugin({
|
||||
template: './demo/index.tpl',
|
||||
favicon: './demo/assets/images/naivelogo.svg'
|
||||
}),
|
||||
new VueLoaderPlugin(),
|
||||
new webpack.LoaderOptionsPlugin({
|
||||
vue: {
|
||||
compilerOptions: {
|
||||
preserveWhitespace: false
|
||||
}
|
||||
}
|
||||
}),
|
||||
...config.plugins
|
||||
]
|
||||
}
|
||||
|
||||
module.exports = webpackConfig
|
||||
@ -11,7 +11,6 @@
|
||||
import { inject, toRef } from 'vue'
|
||||
import SiteHeader from './SiteHeader.vue'
|
||||
import menuOptions from './menu-options'
|
||||
// import { i18n } from './init'
|
||||
import { loadingBarApiRef } from './routes/router'
|
||||
import { useMemo } from '../src/_utils/composition'
|
||||
|
||||
|
||||
@ -1,19 +1,20 @@
|
||||
import { Vue, i18n } from './init'
|
||||
import { createApp } from 'vue'
|
||||
import { installDemoComponents } from './init'
|
||||
import hljs from './hljs'
|
||||
import demoRouterView from './DemoRouterView'
|
||||
import naive from '../lib/index'
|
||||
import DemoRouterView from './DemoRouterView'
|
||||
import naive from '../src/index'
|
||||
import './font'
|
||||
import createRouter from './routes/router'
|
||||
import { routes } from './routes/routes'
|
||||
import createDemoRouter from './routes/router'
|
||||
|
||||
naive.setHljs(hljs)
|
||||
|
||||
Vue.use(naive)
|
||||
const app = createApp(DemoRouterView)
|
||||
|
||||
const router = createRouter(Vue, routes)
|
||||
const router = createDemoRouter(app, routes)
|
||||
|
||||
new Vue({
|
||||
...demoRouterView,
|
||||
router,
|
||||
i18n
|
||||
}).$mount('#app')
|
||||
app.use(router)
|
||||
app.use(naive)
|
||||
installDemoComponents(app)
|
||||
|
||||
app.mount('#app')
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
|
||||
import { createApp } from 'vue'
|
||||
import { installDemoComponents, i18n } from './init'
|
||||
import { installDemoComponents } from './init'
|
||||
import debugRouteMixin from './routes/debug-route-mixin'
|
||||
import hljs from './hljs'
|
||||
import DemoRouterView from './DemoRouterView'
|
||||
@ -18,7 +17,6 @@ const router = createDemoRouter(app, routes)
|
||||
|
||||
app.use(router)
|
||||
app.use(naive)
|
||||
app.use(i18n)
|
||||
installDemoComponents(app)
|
||||
|
||||
app.mount('#app')
|
||||
|
||||
@ -10,28 +10,19 @@ npm install --save-dev naive-ui
|
||||
## Usage
|
||||
Add the following lines in you entry point js file.
|
||||
```js
|
||||
import { createApp } from 'vue'
|
||||
import naive from 'naive-ui'
|
||||
import 'naive-ui/lib/styles/index.css'
|
||||
|
||||
// Default CSS bundle doesn't includes external font files.
|
||||
// If you want to use the built-in fonts of UI. Add the
|
||||
// following lines on demand.
|
||||
|
||||
// Generic Fonts, choose one at most
|
||||
import 'naive-ui/lib/styles/fonts/Lato.css'
|
||||
import 'naive-ui/lib/styles/fonts/FiraSans.css'
|
||||
// Monospace Fonts
|
||||
import 'naive-ui/lib/styles/fonts/FiraCode.css'
|
||||
|
||||
Vue.use(naive)
|
||||
const app = createApp()
|
||||
app.use(naive)
|
||||
```
|
||||
|
||||
## Import on Demand (Working in Progress)
|
||||
<!--n-alert type="warning" title="Caveat" style="margin-bottom: 16px;">
|
||||
<n-ol align-text>
|
||||
<n-li>Importing on demand is still experimental. If you are facing problems be free to create an issue.</n-li>
|
||||
<n-li>CSS files start with 'Base' are not guaranteed to be stable for now. If you find importing mistakes after upgrading the package, you may have a look at here.</n-li>
|
||||
</n-ol>
|
||||
</n-alert >
|
||||
|
||||
<install-code-generator /-->
|
||||
## Import on Demand (Working in Progress)
|
||||
@ -1,100 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<n-card title="Import on Demand Code Generator">
|
||||
<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,
|
||||
exportedComponents
|
||||
} from 'src/components'
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
components: Object.keys(exportedComponents),
|
||||
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>
|
||||
@ -10,26 +10,18 @@ npm install --save-dev naive-ui
|
||||
## 使用方式
|
||||
在你项目的 javascript 入口文件添加下列代码。
|
||||
```js
|
||||
import { createApp } from 'vue'
|
||||
import naive from 'naive-ui'
|
||||
import 'naive-ui/lib/styles/index.css'
|
||||
|
||||
// 默认的 CSS 打包不包含字体文件
|
||||
// 如果需要使用 UI 内置的字体，可以按需添加下面的代码
|
||||
|
||||
// 通用字体，多选一
|
||||
import 'naive-ui/lib/styles/fonts/Lato.css'
|
||||
import 'naive-ui/lib/styles/fonts/FiraSans.css'
|
||||
// 等宽字体
|
||||
import 'naive-ui/lib/styles/fonts/FiraCode.css'
|
||||
|
||||
Vue.use(naive)
|
||||
const app = createApp()
|
||||
app.use(naive)
|
||||
```
|
||||
|
||||
## 按需引入（正在开发）
|
||||
<!--n-alert type="warning" title="注意" style="margin-bottom: 16px;">
|
||||
<n-ol align-text>
|
||||
<n-li>按需引入的功能仍是试验性的，遇到任何错误都可以反馈给项目。</n-li>
|
||||
<n-li>以 Base 开头的 CSS 目前不确保随更新保持稳定，如果升级后出现错误，可以来这里检查一下。</n-li>
|
||||
</n-ol>
|
||||
</n-alert >
|
||||
<install-code-generator /-->
|
||||
## 按需引入（正在开发）
|
||||
@ -1,100 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<n-card title="生成按需引入代码">
|
||||
<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,
|
||||
exportedComponents
|
||||
} from 'src/components'
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
components: Object.keys(exportedComponents),
|
||||
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>
|
||||
@ -1,4 +1,3 @@
|
||||
import { createI18n } from 'vue-i18n'
|
||||
import ComponentDemo from './utils/ComponentDemo'
|
||||
import ComponentDemos from './utils/ComponentDemos'
|
||||
import ComponentDocumentation from './utils/ComponentDocumentation'
|
||||
@ -15,7 +14,3 @@ export function installDemoComponents (app) {
|
||||
app.component('EditOnGithubButton', EditOnGithubButton)
|
||||
app.component('EditOnGithubHeader', EditOnGithubHeader)
|
||||
}
|
||||
|
||||
export const i18n = createI18n({
|
||||
locale: 'zh-CN'
|
||||
})
|
||||
|
||||
@ -9,6 +9,9 @@
|
||||
import zhCN from './zhCN/index'
|
||||
import enUS from './enUS/index'
|
||||
|
||||
zhCN.name = 'zh-CN'
|
||||
enUS.name = 'en-US'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'en-US': enUS,
|
||||
|
||||
@ -1,21 +1,22 @@
|
||||
import { Vue, i18n } from './init'
|
||||
import { createApp } from 'vue'
|
||||
import { installDemoComponents } from './init'
|
||||
import hljs from './hljs'
|
||||
import demoRouterView from './DemoRouterView'
|
||||
import naive from '../lib/index'
|
||||
import DemoRouterView from './DemoRouterView'
|
||||
import naive from '../src/index'
|
||||
import './font'
|
||||
import createRouter from './routes/router'
|
||||
import { routes } from './routes/routes'
|
||||
import createDemoRouter from './routes/router'
|
||||
import tusimpleTheme from '../themes/tusimple'
|
||||
|
||||
naive.setHljs(hljs)
|
||||
naive.use(tusimpleTheme)
|
||||
|
||||
Vue.use(naive)
|
||||
const app = createApp(DemoRouterView)
|
||||
|
||||
const router = createRouter(Vue, routes)
|
||||
const router = createDemoRouter(app, routes)
|
||||
|
||||
new Vue({
|
||||
...demoRouterView,
|
||||
router,
|
||||
i18n
|
||||
}).$mount('#app')
|
||||
app.use(router)
|
||||
app.use(naive)
|
||||
installDemoComponents(app)
|
||||
|
||||
app.mount('#app')
|
||||
|
||||
@ -1,24 +1,24 @@
|
||||
|
||||
import { Vue, i18n } from './init'
|
||||
import { createApp } from 'vue'
|
||||
import { installDemoComponents } from './init'
|
||||
import debugRouteMixin from './routes/debug-route-mixin'
|
||||
import hljs from './hljs'
|
||||
import demoRouterView from './DemoRouterView'
|
||||
import DemoRouterView from './DemoRouterView'
|
||||
import naive from '../src/index'
|
||||
import './font'
|
||||
import { routes, childRoutes } from './routes/routes'
|
||||
import createRouter from './routes/router'
|
||||
import createDemoRouter from './routes/router'
|
||||
import tusimpleTheme from '../themes/tusimple'
|
||||
|
||||
debugRouteMixin(routes, childRoutes)
|
||||
const router = createRouter(Vue, routes)
|
||||
|
||||
naive.setHljs(hljs)
|
||||
naive.use(tusimpleTheme)
|
||||
|
||||
Vue.use(naive)
|
||||
const app = createApp(DemoRouterView)
|
||||
|
||||
new Vue({
|
||||
...demoRouterView,
|
||||
router,
|
||||
i18n
|
||||
}).$mount('#app')
|
||||
const router = createDemoRouter(app, routes)
|
||||
|
||||
app.use(router)
|
||||
app.use(naive)
|
||||
installDemoComponents(app)
|
||||
|
||||
app.mount('#app')
|
||||
|
||||
@ -35,6 +35,7 @@ export const envRef = ref(process.env.NODE_ENV)
|
||||
export const i18n = function (data) {
|
||||
const configProvider = inject('NConfigProvider', null)
|
||||
return {
|
||||
locale: toRef(configProvider, 'inheritedLanguage'),
|
||||
t (key) {
|
||||
const { inheritedLanguage } = configProvider
|
||||
return data[inheritedLanguage][key]
|
||||
|
||||
@ -1,18 +1,3 @@
|
||||
<i18n>
|
||||
{
|
||||
"zh-CN": {
|
||||
"show": "显示代码",
|
||||
"hide": "收起代码",
|
||||
"editOnGithub": "在 Github 上编辑"
|
||||
},
|
||||
"en-US": {
|
||||
"show": "Show Code",
|
||||
"hide": "Hide Code",
|
||||
"editOnGithub": "Edit on Github"
|
||||
}
|
||||
}
|
||||
</i18n>
|
||||
|
||||
<template>
|
||||
<n-card
|
||||
v-if="isShow"
|
||||
@ -39,7 +24,7 @@
|
||||
:relative-url="relativeUrl"
|
||||
/>
|
||||
</template>
|
||||
{{ ('editOnGithub') }}
|
||||
{{ t('editOnGithub') }}
|
||||
</n-tooltip>
|
||||
<n-tooltip
|
||||
ref="expandCodeButton"
|
||||
@ -60,7 +45,7 @@
|
||||
</template>
|
||||
</n-button>
|
||||
</template>
|
||||
{{ !showCode ? ('show') : ('hide') }}
|
||||
{{ !showCode ? t('show') : t('hide') }}
|
||||
</n-tooltip>
|
||||
</template>
|
||||
<slot name="content" />
|
||||
@ -76,7 +61,7 @@
|
||||
<script>
|
||||
import { nextTick } from 'vue'
|
||||
import codeOutline from '../../src/_icons/code-outline'
|
||||
import { displayModeRef } from '../util-compositions'
|
||||
import { displayModeRef, i18n } from '../util-compositions'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
@ -103,7 +88,19 @@ export default {
|
||||
},
|
||||
setup () {
|
||||
return {
|
||||
displayMode: displayModeRef
|
||||
displayMode: displayModeRef,
|
||||
...(i18n({
|
||||
'zh-CN': {
|
||||
'show': '显示代码',
|
||||
'hide': '收起代码',
|
||||
'editOnGithub': '在 Github 上编辑'
|
||||
},
|
||||
'en-US': {
|
||||
'show': 'Show Code',
|
||||
'hide': 'Hide Code',
|
||||
'editOnGithub': 'Edit on Github'
|
||||
}
|
||||
}))
|
||||
}
|
||||
},
|
||||
data () {
|
||||
|
||||
@ -1,17 +1,16 @@
|
||||
<script>
|
||||
import { i18n } from '../util-compositions'
|
||||
|
||||
export default {
|
||||
watch: {
|
||||
'$i18n.locale': function () {
|
||||
// console.log('locale change')
|
||||
setup () {
|
||||
return {
|
||||
...(i18n())
|
||||
}
|
||||
},
|
||||
render (h, context) {
|
||||
// const locale = this.$i18n.locale
|
||||
const locale = 'zh-CN'
|
||||
render () {
|
||||
const { locale } = this
|
||||
const defaultSlot = (this.$slots.default && this.$slots.default()) || []
|
||||
const index = 1 // defaultSlot.findIndex(VNode => VNode.componentOptions.tag === locale)
|
||||
// console.log(locale, defaultSlot[0].componentOptions.tag)
|
||||
// console.log(index)
|
||||
const index = defaultSlot.findIndex(VNode => VNode.type.name === locale)
|
||||
if (~index) {
|
||||
return defaultSlot[index]
|
||||
} else return defaultSlot[0] || null
|
||||
|
||||
@ -1,21 +1,9 @@
|
||||
|
||||
<i18n>
|
||||
{
|
||||
"zh-CN": {
|
||||
"editOnGithub": "在 Github 上编辑"
|
||||
},
|
||||
"en-US": {
|
||||
"editOnGithub": "Edit on Github"
|
||||
}
|
||||
}
|
||||
</i18n>
|
||||
|
||||
<template>
|
||||
<n-h1 :id="id" class="naive-doc-title">
|
||||
<span>{{ text }}</span>
|
||||
<span class="edit-button">
|
||||
<n-tooltip
|
||||
:delay="300"
|
||||
trigger="hover"
|
||||
placement="left"
|
||||
:show-arrow="true"
|
||||
>
|
||||
@ -27,13 +15,15 @@
|
||||
:relative-url="relativeUrl"
|
||||
/>
|
||||
</template>
|
||||
{{ ('editOnGithub') }}
|
||||
{{ t('editOnGithub') }}
|
||||
</n-tooltip>
|
||||
</span>
|
||||
</n-h1>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { i18n } from '../util-compositions'
|
||||
|
||||
export default {
|
||||
name: 'EditOnGithubHeader',
|
||||
props: {
|
||||
@ -46,6 +36,18 @@ export default {
|
||||
required: true
|
||||
}
|
||||
},
|
||||
setup () {
|
||||
return {
|
||||
...(i18n({
|
||||
'zh-CN': {
|
||||
'editOnGithub': '在 Github 上编辑'
|
||||
},
|
||||
'en-US': {
|
||||
'editOnGithub': 'Edit on Github'
|
||||
}
|
||||
}))
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
id () {
|
||||
return this.text.replace(/ /g, '-')
|
||||
|
||||
22
package.json
22
package.json
@ -46,14 +46,12 @@
|
||||
"@babel/cli": "^7.8.4",
|
||||
"@babel/core": "^7.10.2",
|
||||
"@babel/preset-env": "^7.10.2",
|
||||
"@intlify/vue-i18n-loader": "^2.0.0-alpha.3",
|
||||
"@kazupon/vue-i18n-loader": "^0.4.1",
|
||||
"@rollup/plugin-node-resolve": "^6.1.0",
|
||||
"@rollup/plugin-strip": "^1.3.2",
|
||||
"@vue/babel-preset-app": "^3.12.1",
|
||||
"@vue/compiler-sfc": "^3.0.0",
|
||||
"@vue/eslint-config-standard": "^4.0.0",
|
||||
"@vue/test-utils": "^1.0.3",
|
||||
"@vue/test-utils": "^1.1.0",
|
||||
"angular-html-parser": "^1.4.0",
|
||||
"autoprefixer": "^9.7.4",
|
||||
"babel-eslint": "^10.0.3",
|
||||
@ -91,14 +89,14 @@
|
||||
"karma-spec-reporter": "0.0.32",
|
||||
"karma-webpack": "^3.0.5",
|
||||
"loader-utils": "^1.2.3",
|
||||
"marked": "^1.1.1",
|
||||
"marked": "^1.2.0",
|
||||
"memory-fs": "^0.4.1",
|
||||
"mini-css-extract-plugin": "^0.9.0",
|
||||
"mocha": "^6.2.2",
|
||||
"multer": "^1.4.2",
|
||||
"ncp": "^2.0.0",
|
||||
"node-sass": "^4.13.1",
|
||||
"postcss": "^7.0.26",
|
||||
"postcss": "^7.0.35",
|
||||
"postcss-cli": "^6.1.3",
|
||||
"postcss-loader": "^3.0.0",
|
||||
"prettier-eslint": "^9.0.1",
|
||||
@ -115,17 +113,15 @@
|
||||
"stylelint-config-recommended-scss": "^4.2.0",
|
||||
"stylelint-scss": "^3.18.0",
|
||||
"terser": "^4.6.3",
|
||||
"tinycolor2": "^1.4.1",
|
||||
"tinycolor2": "^1.4.2",
|
||||
"url-loader": "^1.1.2",
|
||||
"vite": "^1.0.0-rc.4",
|
||||
"vue": "^3.0.0",
|
||||
"vue-i18n": "^9.0.0-alpha.16",
|
||||
"vue-jest": "^4.0.0-beta.3",
|
||||
"vue-loader": "^16.0.0-beta.5",
|
||||
"vue-router": "^4.0.0-beta.10",
|
||||
"vue-template-compiler": "^2.6.11",
|
||||
"webpack": "^4.41.6",
|
||||
"webpack-bundle-analyzer": "^3.6.0",
|
||||
"vue-jest": "^4.0.0-rc.0",
|
||||
"vue-loader": "^16.0.0-beta.8",
|
||||
"vue-router": "^4.0.0-beta.13",
|
||||
"webpack": "^4.44.2",
|
||||
"webpack-bundle-analyzer": "^3.9.0",
|
||||
"webpack-cli": "^3.3.10",
|
||||
"webpack-dev-server": "^3.10.3"
|
||||
},
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
const vue = require('rollup-plugin-vue')
|
||||
const resolve = require('@rollup/plugin-node-resolve')
|
||||
const { terser } = require('rollup-plugin-terser')
|
||||
const naiveSCSSVariable = require('./build/naiveSCSSVarPlugin')
|
||||
|
||||
function externalValidator (patterns) {
|
||||
return id => patterns.some(pattern => id.startsWith(pattern))
|
||||
@ -31,7 +30,6 @@ module.exports = {
|
||||
}
|
||||
}
|
||||
}),
|
||||
naiveSCSSVariable(),
|
||||
terser({
|
||||
mangle: false,
|
||||
output: {
|
||||
|
||||
@ -1,546 +0,0 @@
|
||||
function getComponent (componentName) {
|
||||
return (exportedComponents[componentName] || unexposedComponents[componentName])
|
||||
}
|
||||
|
||||
function flattenStyles (component) {
|
||||
const flattenedStyles = []
|
||||
for (const styleDependency of component.styles) {
|
||||
if (styleDependency.startsWith('[]')) {
|
||||
flattenedStyles.push(...flattenStyles(
|
||||
getComponent(styleDependency.slice(2, styleDependency.length))
|
||||
))
|
||||
} else {
|
||||
flattenedStyles.push(styleDependency)
|
||||
}
|
||||
}
|
||||
return Array.from(new Set(flattenedStyles)).sort()
|
||||
}
|
||||
|
||||
const unexposedComponents = {
|
||||
Scrollbar: {
|
||||
styles: [
|
||||
'Scrollbar'
|
||||
]
|
||||
},
|
||||
BaseTrackingRect: {
|
||||
styles: [
|
||||
'BaseTrackingRect'
|
||||
]
|
||||
},
|
||||
BaseLoading: {
|
||||
styles: [
|
||||
'BaseLoading'
|
||||
]
|
||||
},
|
||||
BaseSuffix: {
|
||||
styles: [
|
||||
'BaseSuffix',
|
||||
'[]BaseLoading'
|
||||
]
|
||||
},
|
||||
BaseMenuMask: {
|
||||
styles: [
|
||||
'BaseMenuMask'
|
||||
]
|
||||
},
|
||||
BaseSelection: {
|
||||
styles: [
|
||||
'BaseSelection',
|
||||
'[]BaseLoading',
|
||||
'[]Tag'
|
||||
]
|
||||
},
|
||||
BaseSelectMenu: {
|
||||
styles: [
|
||||
'BaseSelectMenu',
|
||||
'[]BaseTrackingRect',
|
||||
'[]Empty',
|
||||
'[]Scrollbar',
|
||||
'~vue-virtual-scroller/dist/vue-virtual-scroller.css'
|
||||
]
|
||||
},
|
||||
BaseSlotMachine: {
|
||||
styles: [
|
||||
'BaseSlotMachine'
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
const exportedComponents = {
|
||||
Affix: {
|
||||
styles: [
|
||||
'Affix'
|
||||
]
|
||||
},
|
||||
Alert: {
|
||||
styles: [
|
||||
'Alert'
|
||||
]
|
||||
},
|
||||
Anchor: {
|
||||
styles: [
|
||||
'Anchor',
|
||||
'[]Affix'
|
||||
]
|
||||
},
|
||||
AutoComplete: {
|
||||
styles: [
|
||||
'AutoComplete',
|
||||
'[]BaseSelection',
|
||||
'[]BaseSelectMenu',
|
||||
'[]Input'
|
||||
]
|
||||
},
|
||||
Avatar: {
|
||||
styles: [
|
||||
'Avatar'
|
||||
]
|
||||
},
|
||||
BackTop: {
|
||||
styles: [
|
||||
'BackTop'
|
||||
]
|
||||
},
|
||||
Badge: {
|
||||
styles: [
|
||||
'Badge',
|
||||
'[]BaseSlotMachine'
|
||||
]
|
||||
},
|
||||
Breadcrumb: {
|
||||
styles: [
|
||||
'Breadcrumb'
|
||||
]
|
||||
},
|
||||
Button: {
|
||||
styles: [
|
||||
'Button',
|
||||
'[]BaseLoading',
|
||||
'[]Icon'
|
||||
]
|
||||
},
|
||||
Card: {
|
||||
styles: [
|
||||
'Card',
|
||||
'[]Icon'
|
||||
]
|
||||
},
|
||||
Cascader: {
|
||||
styles: [
|
||||
'Cascader',
|
||||
'[]BaseLoading',
|
||||
'[]BaseMenuMask',
|
||||
'[]BaseSelection',
|
||||
'[]BaseSelectMenu',
|
||||
'[]Checkbox',
|
||||
'[]Radio'
|
||||
]
|
||||
},
|
||||
Checkbox: {
|
||||
styles: [
|
||||
'Checkbox'
|
||||
]
|
||||
},
|
||||
Code: {
|
||||
styles: [
|
||||
'Code'
|
||||
]
|
||||
},
|
||||
Collapse: {
|
||||
styles: [
|
||||
'Collapse',
|
||||
'[]Icon'
|
||||
]
|
||||
},
|
||||
ConfigConsumer: {
|
||||
styles: []
|
||||
},
|
||||
ConfigProvider: {
|
||||
styles: []
|
||||
},
|
||||
Confirm: {
|
||||
styles: [
|
||||
'Confirm',
|
||||
'[]Icon',
|
||||
'[]Button'
|
||||
]
|
||||
},
|
||||
DataTable: {
|
||||
styles: [
|
||||
'DataTable',
|
||||
'[]Empty',
|
||||
'[]Icon',
|
||||
'[]Pagination',
|
||||
'[]Scrollbar',
|
||||
'[]Checkbox',
|
||||
'[]Radio',
|
||||
'[]Divider',
|
||||
'[]Button'
|
||||
]
|
||||
},
|
||||
DatePicker: {
|
||||
styles: [
|
||||
'DatePicker',
|
||||
'[]Button',
|
||||
'[]Icon',
|
||||
'[]Input',
|
||||
'[]TimePicker'
|
||||
]
|
||||
},
|
||||
Descriptions: {
|
||||
styles: [
|
||||
'Descriptions'
|
||||
]
|
||||
},
|
||||
Divider: {
|
||||
styles: [
|
||||
'Divider'
|
||||
]
|
||||
},
|
||||
Drawer: {
|
||||
styles: [
|
||||
'Drawer'
|
||||
]
|
||||
},
|
||||
Dropdown: {
|
||||
styles: [
|
||||
'Dropdown',
|
||||
'[]Popover',
|
||||
'[]BaseSelectMenu',
|
||||
'[]Icon'
|
||||
]
|
||||
},
|
||||
DynamicInput: {
|
||||
styles: [
|
||||
'[]Button',
|
||||
'[]Input'
|
||||
]
|
||||
},
|
||||
Element: {
|
||||
styles: []
|
||||
},
|
||||
Empty: {
|
||||
styles: [
|
||||
'Empty',
|
||||
'[]Icon'
|
||||
]
|
||||
},
|
||||
Form: {
|
||||
styles: [
|
||||
'Form',
|
||||
'[]Grid'
|
||||
]
|
||||
},
|
||||
GradientText: {
|
||||
styles: [
|
||||
'GradientText'
|
||||
]
|
||||
},
|
||||
Grid: {
|
||||
styles: [
|
||||
'Grid'
|
||||
]
|
||||
},
|
||||
Icon: {
|
||||
styles: [
|
||||
'Icon'
|
||||
]
|
||||
},
|
||||
Input: {
|
||||
styles: [
|
||||
'Input',
|
||||
'[]BaseSuffix'
|
||||
]
|
||||
},
|
||||
InputNumber: {
|
||||
styles: [
|
||||
'InputNumber',
|
||||
'[]Icon'
|
||||
]
|
||||
},
|
||||
Layout: {
|
||||
styles: [
|
||||
'Layout',
|
||||
'[]Scrollbar'
|
||||
]
|
||||
},
|
||||
List: {
|
||||
styles: [
|
||||
'List'
|
||||
]
|
||||
},
|
||||
LoadingBar: {
|
||||
styles: [
|
||||
'LoadingBar'
|
||||
]
|
||||
},
|
||||
Log: {
|
||||
styles: [
|
||||
'Log',
|
||||
'[]Scrollbar',
|
||||
'[]BaseLoading'
|
||||
]
|
||||
},
|
||||
Menu: {
|
||||
styles: [
|
||||
'Menu',
|
||||
'[]Popover',
|
||||
'[]Tooltip'
|
||||
]
|
||||
},
|
||||
Notification: {
|
||||
styles: [
|
||||
'Notification',
|
||||
'[]Icon',
|
||||
'[]Scrollbar'
|
||||
]
|
||||
},
|
||||
Pagination: {
|
||||
styles: [
|
||||
'Pagination'
|
||||
]
|
||||
},
|
||||
Popconfirm: {
|
||||
styles: [
|
||||
'Popconfirm',
|
||||
'[]Button',
|
||||
'[]Icon',
|
||||
'[]Popover'
|
||||
]
|
||||
},
|
||||
Popover: {
|
||||
styles: [
|
||||
'Popover'
|
||||
]
|
||||
},
|
||||
Popselect: {
|
||||
styles: [
|
||||
'Popselect',
|
||||
'[]BaseSelectMenu',
|
||||
'[]Popover'
|
||||
]
|
||||
},
|
||||
Progress: {
|
||||
styles: [
|
||||
'Progress',
|
||||
'[]Icon'
|
||||
]
|
||||
},
|
||||
Radio: {
|
||||
styles: [
|
||||
'Radio'
|
||||
]
|
||||
},
|
||||
Result: {
|
||||
styles: [
|
||||
'Result',
|
||||
'[]Icon'
|
||||
]
|
||||
},
|
||||
Select: {
|
||||
styles: [
|
||||
'Select',
|
||||
'[]BaseSelection',
|
||||
'[]BaseSelectMenu'
|
||||
]
|
||||
},
|
||||
Slider: {
|
||||
styles: [
|
||||
'Slider'
|
||||
]
|
||||
},
|
||||
Spin: {
|
||||
styles: [
|
||||
'Spin',
|
||||
'[]BaseLoading'
|
||||
]
|
||||
},
|
||||
Statistic: {
|
||||
styles: [
|
||||
'Statistic'
|
||||
]
|
||||
},
|
||||
Steps: {
|
||||
styles: [
|
||||
'Steps',
|
||||
'[]Icon'
|
||||
]
|
||||
},
|
||||
Switch: {
|
||||
styles: [
|
||||
'Switch'
|
||||
]
|
||||
},
|
||||
Tabs: {
|
||||
styles: [
|
||||
'Tabs',
|
||||
'Icon'
|
||||
]
|
||||
},
|
||||
Tag: {
|
||||
styles: [
|
||||
'Tag'
|
||||
]
|
||||
},
|
||||
Thing: {
|
||||
styles: [
|
||||
'Thing'
|
||||
]
|
||||
},
|
||||
Time: {
|
||||
styles: [
|
||||
'Time'
|
||||
]
|
||||
},
|
||||
Timeline: {
|
||||
styles: [
|
||||
'Timeline'
|
||||
]
|
||||
},
|
||||
TimePicker: {
|
||||
styles: [
|
||||
'TimePicker',
|
||||
'[]Input',
|
||||
'[]Button',
|
||||
'[]Icon'
|
||||
]
|
||||
},
|
||||
Tooltip: {
|
||||
styles: [
|
||||
'Tooltip',
|
||||
'[]Popover'
|
||||
]
|
||||
},
|
||||
Transfer: {
|
||||
styles: [
|
||||
'Transfer',
|
||||
'[]Checkbox',
|
||||
'[]Icon',
|
||||
'[]Input',
|
||||
'[]Empty',
|
||||
'[]Scrollbar',
|
||||
'[]BaseTrackingRect',
|
||||
'[]Input',
|
||||
'~vue-virtual-scroller/dist/vue-virtual-scroller.css'
|
||||
]
|
||||
},
|
||||
Tree: {
|
||||
styles: [
|
||||
'Tree',
|
||||
'BaseLoading',
|
||||
'[]Checkbox'
|
||||
]
|
||||
},
|
||||
Typography: {
|
||||
styles: [
|
||||
'Typography'
|
||||
]
|
||||
},
|
||||
Upload: {
|
||||
styles: [
|
||||
'Upload',
|
||||
'[]Progress',
|
||||
'[]Icon',
|
||||
'[]Button'
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
Object.keys(exportedComponents).forEach(component => {
|
||||
exportedComponents[component].styles = flattenStyles(exportedComponents[component])
|
||||
})
|
||||
|
||||
const scriptPrefix = {
|
||||
esm: 'naive-ui/es/',
|
||||
cjs: 'naive-ui/lib/'
|
||||
}
|
||||
|
||||
const stylePrefix = {
|
||||
esm: 'naive-ui/es/styles/',
|
||||
cjs: 'naive-ui/lib/styles/'
|
||||
}
|
||||
|
||||
const baseStyleImportFile = [
|
||||
'base'
|
||||
]
|
||||
|
||||
const styleExtension = {
|
||||
esm: '.css',
|
||||
cjs: '.css'
|
||||
}
|
||||
|
||||
function createScriptImportStatements (componentNames = [], format = 'esm') {
|
||||
return Array.from(
|
||||
new Set(componentNames.map(
|
||||
componentName => createScriptImportStatement(componentName, format)
|
||||
))
|
||||
).sort()
|
||||
}
|
||||
|
||||
function createScriptImportStatement (componentName, format = 'esm') {
|
||||
return `import N${componentName} from '${scriptPrefix[format]}${componentName}'`
|
||||
}
|
||||
|
||||
function createStyleImportStatements (componentNames = [], format = 'esm') {
|
||||
return Array.from(
|
||||
new Set(
|
||||
baseStyleImportFile.concat(
|
||||
componentNames
|
||||
.map(componentName => exportedComponents[componentName].styles)
|
||||
.reduce((styles, componentStyles) => styles.concat(componentStyles), [])
|
||||
).map(
|
||||
styleFile => createStyleImportStatement(styleFile, format)
|
||||
)
|
||||
)
|
||||
).sort()
|
||||
}
|
||||
|
||||
function createStyleImportStatement (styleFile, format) {
|
||||
if (styleFile.startsWith('~')) {
|
||||
return (
|
||||
'import \'' +
|
||||
styleFile.slice(1, styleFile.length) +
|
||||
'\''
|
||||
)
|
||||
}
|
||||
return `import '${stylePrefix[format]}${styleFile}${styleExtension[format]}'`
|
||||
}
|
||||
|
||||
function createImportStatements (componentNames = [], format = 'esm') {
|
||||
return (
|
||||
createStyleImportStatements(componentNames, format).join('\n') + '\n\n' +
|
||||
createScriptImportStatements(componentNames, format).join('\n') + '\n'
|
||||
)
|
||||
}
|
||||
|
||||
function createLocaleImportStatements (locales = ['zhCN', 'enUS'], format = 'ems') {
|
||||
return locales.map(locale => `import ${locale} from '${scriptPrefix[format]}locale/${locale}'`).join('\n') + '\n\n'
|
||||
}
|
||||
|
||||
function createInitializeStatements (components = [], locales = ['zhCN', 'enUS'], format = 'esm') {
|
||||
return (
|
||||
`import create from '${scriptPrefix[format]}create'\n\n` +
|
||||
createLocaleImportStatements(locales, format) +
|
||||
`const naive = create({\n` +
|
||||
` components: [\n` +
|
||||
components.map(component => ` N${component}`).sort().join(',\n') + '\n' +
|
||||
` ],\n` +
|
||||
` locales: [\n` +
|
||||
locales.map(locale => ` ${locale}`).join(',\n') + '\n' +
|
||||
` ]\n` +
|
||||
`})\n\n` +
|
||||
`Vue.install(naive)`
|
||||
)
|
||||
}
|
||||
|
||||
function createInstallStatements (components = [], locales = ['zhCN', 'enUS'], format = 'esm') {
|
||||
return (
|
||||
createImportStatements(components, format) + '\n' +
|
||||
createInitializeStatements(components, locales, format)
|
||||
).replace(/\n\n+/g, '\n\n')
|
||||
}
|
||||
|
||||
export {
|
||||
createInstallStatements,
|
||||
exportedComponents
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user