mirror of
https://github.com/vxcontrol/ncform.git
synced 2026-07-19 18:23:32 -04:00
chore: merge master
This commit is contained in:
daniel-dx
@@ -1,13 +1,33 @@
|
||||
# ncform
|
||||
|
||||
|
||||
|
||||
|
||||
[中文版](README_CN.md)
|
||||
|
||||
ncform, a pleasing form development method that generates form UIs and their interactions with just configuration.
|
||||
|
||||
|
||||
|
||||
ncform, a nice form development way that generates form UIs and their interactions with just configuration.
|
||||
|
||||
Comes with **standard components** and **validation rules**, out of the box.
|
||||
|
||||
Have powerful **control interaction** and **extension capabilities**, do what you want.
|
||||
|
||||
---
|
||||
|
||||
- Table Of Contents
|
||||
- [Playground](#Playground)
|
||||
- [Quick Start](#Quick-Start)
|
||||
- [In node.js](#In-nodejs)
|
||||
- [In browser](#In-browser)
|
||||
- [Features](#Features)
|
||||
- [Documents](#Documents)
|
||||
- [Solve Pain Points](#Solve-Pain-Points)
|
||||
- [Repeat the wheel?](#Repeat-the-wheel)
|
||||
- [Why not use the standard json-schema?](#Why-not-use-the-standard-json-schema)
|
||||
- [dx expression](#dx-expression)
|
||||
- [Design Thinking](#Design-Thinking)
|
||||
- [Schema Generator](#Schema-Generator)
|
||||
|
||||
## Playground
|
||||
|
||||
Experience the charm of ncform on the [Playground](https://ncform.github.io/ncform/ncform-show/playground/index.html) to deepen your understanding of ncform
|
||||
@@ -78,7 +98,7 @@ export default {
|
||||
```
|
||||
You can refer to the [ncform-demo](https://github.com/daniel-dx/ncform-demo) project
|
||||
|
||||
### In a browser
|
||||
### In browser
|
||||
|
||||
```
|
||||
<html>
|
||||
@@ -148,11 +168,11 @@ You can refer to the [ncform-demo](https://github.com/daniel-dx/ncform-demo) pro
|
||||
|
||||
## Documents
|
||||
|
||||
- [ncform config/props/api/event](./CONFIG.md)
|
||||
- [ncform config / props / api / event](./CONFIG.md)
|
||||
|
||||
- [Standard Components](./STD-COMP.md)
|
||||
- Standard Components [Preview Version](https://ncform.github.io/ncform/ncform-theme-elementui/index.html) | [Text Version](./STD-COMP.md)
|
||||
|
||||
- [How to extend](./EXT-DOC.md)
|
||||
- [Custom Form Controls And Validation Rules](./EXT-DOC.md)
|
||||
|
||||
## Solve Pain Points
|
||||
|
||||
|
||||
+26
-6
@@ -1,12 +1,32 @@
|
||||
# ncform
|
||||
|
||||
|
||||
|
||||
|
||||
[English Version](README.md)
|
||||
|
||||
|
||||
|
||||
ncform，一种令人愉悦的表单开发方式，仅需配置即可生成表单UI及其交互行为。
|
||||
|
||||
|
||||
自带丰富的 **标准组件** 和 **校验规则**，开箱即用。
|
||||
|
||||
具备强大的 **控件交互** 和 **扩展能力**，做你所想。
|
||||
|
||||
---
|
||||
|
||||
- 目录
|
||||
- [Playground](#Playground)
|
||||
- [Quick Start](#Quick-Start)
|
||||
- [In node.js](#In-nodejs)
|
||||
- [In browser](#In-browser)
|
||||
- [特性](#特性)
|
||||
- [文档](#文档)
|
||||
- [解决痛点](#解决痛点)
|
||||
- [重复造轮子？](#重复造轮子)
|
||||
- [为什么不用标准的json-schema？](#为什么不用标准的json-schema)
|
||||
- [dx表达式](#dx表达式)
|
||||
- [设计思想](#设计思想)
|
||||
- [Schema Generator](#Schema-Generator)
|
||||
|
||||
## Playground
|
||||
|
||||
@@ -78,7 +98,7 @@ export default {
|
||||
```
|
||||
可参考[ncform-demo](https://github.com/daniel-dx/ncform-demo)项目
|
||||
|
||||
### In a browser
|
||||
### In browser
|
||||
|
||||
```
|
||||
<html>
|
||||
@@ -148,11 +168,11 @@ export default {
|
||||
|
||||
## 文档
|
||||
|
||||
- [ncform config/props/api/event](./CONFIG.md)
|
||||
- [ncform config / props / api / event](./CONFIG.md)
|
||||
|
||||
- [Standard Components](./STD-COMP_CN.md)
|
||||
- [标准组件预览版本](https://ncform.github.io/ncform/ncform-theme-elementui/index.html) / [标准组件文字版](./STD-COMP_CN.md)
|
||||
|
||||
- [How to extend](./EXT-DOC.md)
|
||||
- [如何扩展 表单控件 / 校验规则](./EXT-DOC.md)
|
||||
|
||||
## 解决痛点
|
||||
|
||||
|
||||
+3
-1
@@ -3,12 +3,14 @@
|
||||
"private": true,
|
||||
"license": "MIT",
|
||||
"keywords": [
|
||||
"vue",
|
||||
"json",
|
||||
"form",
|
||||
"automatic",
|
||||
"json-schema",
|
||||
"ncform",
|
||||
"generation"
|
||||
"generator",
|
||||
"configuration"
|
||||
],
|
||||
"scripts": {
|
||||
"bootstrap": "lerna bootstrap",
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
# ncform-common
|
||||
|
||||
ncform的通用工具类
|
||||
ncform's general tools
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
## ncform show
|
||||
|
||||
ncform秀的舞台，当前主要提供了Playground和Schema Generator
|
||||
The stage of the ncform show, currently provides Playground and Schema Generator
|
||||
|
||||
# How to dev
|
||||
|
||||
|
||||
@@ -1,6 +1,11 @@
|
||||
<div class="playground">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
|
||||
<a style="position: relative; top: 9px;" target="_blank" class="header-logo-invertocat" href="https://github.com/ncform/ncform">
|
||||
<svg height="32" class="octicon octicon-mark-github" viewBox="0 0 16 16" version="1.1" width="32" aria-hidden="true"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg>
|
||||
</a>
|
||||
|
||||
{{i18n.template}}：
|
||||
<el-select v-model="selectVal" placeholder="请选择" @change="templateChange">
|
||||
<el-option v-for="item in listOptions" :key="item.value" :label="item.label" :value="item.value">
|
||||
@@ -14,6 +19,7 @@
|
||||
<el-radio-button label="en">English</el-radio-button>
|
||||
<el-radio-button label="cn" value="cn">中文</el-radio-button>
|
||||
</el-radio-group>
|
||||
<a style="float: right; position: relative; right: 10px; top: 20px" href="https://ncform.github.io/ncform/ncform-theme-elementui/index.html" target="_blank">{{i18n.moreComp}}</a>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
|
||||
@@ -32,13 +32,15 @@ export default {
|
||||
template: 'Template',
|
||||
genForm: 'Run',
|
||||
getData: 'Get Data',
|
||||
notValidJSON: 'Not valid JSON data'
|
||||
notValidJSON: 'Not valid JSON data',
|
||||
moreComp: 'See more widgets'
|
||||
},
|
||||
cn: {
|
||||
template: '模板',
|
||||
genForm: '生成表单',
|
||||
getData: '获取表单数据',
|
||||
notValidJSON: '不是有效的JSON数据'
|
||||
notValidJSON: '不是有效的JSON数据',
|
||||
moreComp: '看看更多的组件'
|
||||
}
|
||||
},
|
||||
ncformSchema: {
|
||||
|
||||
@@ -1,5 +1,8 @@
|
||||
<div class="schema-gen">
|
||||
<div class="header">
|
||||
<a style="float: right;" target="_blank" class="header-logo-invertocat" href="https://github.com/ncform/ncform">
|
||||
<svg height="32" class="octicon octicon-mark-github" viewBox="0 0 16 16" version="1.1" width="32" aria-hidden="true"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg>
|
||||
</a>
|
||||
<h3>ncform schema generator</h3>
|
||||
<el-button type="primary" size="medium" @click="jsonChange">Click to generate</el-button>
|
||||
</div>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
# ncform theme element-ui
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
ncform theme widgets -> element-ui
|
||||
|
||||
@@ -17,13 +17,13 @@ Step 2: start development
|
||||
npm run dev
|
||||
```
|
||||
|
||||
[可选]配合以下可使用依赖的`ncform-common`的最新代码
|
||||
[Optional] Use the following command to watch and depend on the latest code for `ncform-common`
|
||||
```
|
||||
cd ../ncform-common
|
||||
npm run watch-build
|
||||
```
|
||||
|
||||
[可选]配合以下可使用依赖的`ncform`的最新代码
|
||||
[Optional] Use the following command to watch and depend on the latest code for `ncform`
|
||||
```
|
||||
cd ../ncform
|
||||
npm run watch-build
|
||||
|
||||
@@ -21,6 +21,10 @@
|
||||
|
||||
<div class="doc">
|
||||
<h2 style="margin-left: 25px; color: #5A5E66">
|
||||
<a style="position: relative; top: 9px;" target="_blank" class="header-logo-invertocat" href="https://github.com/ncform/ncform">
|
||||
<svg height="32" class="octicon octicon-mark-github" viewBox="0 0 16 16" version="1.1" width="32" aria-hidden="true"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg>
|
||||
</a>
|
||||
|
||||
ncform standard components
|
||||
|
||||
<div class="el-radio-group" style="float: right;">
|
||||
@@ -36,7 +40,7 @@
|
||||
|
||||
</h2>
|
||||
|
||||
<div style="display: flex; height: calc(100vh - 80px); overflow: hidden;" v-cloak>
|
||||
<div style="display: flex; height: calc(100vh - 86px); overflow: hidden;" v-cloak>
|
||||
<div style="flex:1; overflow: auto">
|
||||
<ul class="el-menu el-menu-vertical-demo">
|
||||
<li class="el-submenu is-opened">
|
||||
@@ -79,6 +83,7 @@
|
||||
if (location.search.indexOf('lang=cn') >= 0) {
|
||||
this.$data.lang = 'cn';
|
||||
}
|
||||
this.$data.currentUrl = this.$data.controls[0].url + '?lang=' + this.$data.lang;
|
||||
},
|
||||
data: {
|
||||
controls: [
|
||||
|
||||
@@ -1,8 +1,14 @@
|
||||
# ncform
|
||||
|
||||
ncform，一种令人愉悦的表单开发方式，仅需配置即可生成表单UI及其交互行为。
|
||||
|
||||
|
||||
更详细信息请访问官网：[https://github.com/ncform/ncform](https://github.com/ncform/ncform)
|
||||
ncform, a nice form development way that generates form UIs and their interactions with just configuration.
|
||||
|
||||
Comes with standard components and validation rules, out of the box.
|
||||
|
||||
Have powerful control interaction and extension capabilities, do what you want.
|
||||
|
||||
For more details, please visit the official website: [https://github.com/ncform/ncform](https://github.com/ncform/ncform)
|
||||
|
||||
# How to dev
|
||||
|
||||
@@ -16,7 +22,7 @@ Step 2: start development
|
||||
npm run dev
|
||||
```
|
||||
|
||||
[可选]配合以下可使用依赖的`ncform-common`的最新代码
|
||||
[Optional] Use the following command to watch and depend on the latest code for `ncform-common`
|
||||
```
|
||||
cd ../ncform-common
|
||||
npm run watch-build
|
||||
|
||||
@@ -0,0 +1,25 @@
|
||||
# ncform
|
||||
|
||||
ncform，一种令人愉悦的表单开发方式，仅需配置即可生成表单UI及其交互行为。
|
||||
|
||||
更详细信息请访问官网：[https://github.com/ncform/ncform](https://github.com/ncform/ncform)
|
||||
|
||||
# How to dev
|
||||
|
||||
Step 1: prepare the dependency nc libraries
|
||||
```sh
|
||||
cd ../../ && npm run build
|
||||
```
|
||||
|
||||
Step 2: start development
|
||||
```sh
|
||||
npm run dev
|
||||
```
|
||||
|
||||
[可选]配合以下可使用依赖的`ncform-common`的最新代码
|
||||
```
|
||||
cd ../ncform-common
|
||||
npm run watch-build
|
||||
```
|
||||
|
||||
|
||||
@@ -5,12 +5,14 @@
|
||||
"author": "daniel.xiao",
|
||||
"main": "dist/vueNcform.min.js",
|
||||
"keywords": [
|
||||
"vue",
|
||||
"json",
|
||||
"form",
|
||||
"automatic",
|
||||
"json-schema",
|
||||
"ncform",
|
||||
"generation"
|
||||
"generator",
|
||||
"configuration"
|
||||
],
|
||||
"scripts": {
|
||||
"dev": "gulp dev",
|
||||
|
||||
Reference in New Issue
Block a user