13 |
15 |
16 |
17 |
--------------------------------------------------------------------------------
/packages/element-plus/fields/textarea/textarea.vue:
--------------------------------------------------------------------------------
1 |
2 | loading ...
14 | ${genHtml(str, lang)}笔记本电脑报修单
17 | 18 |
13 |
15 |
16 |
17 |
--------------------------------------------------------------------------------
/scripts/webpack/loaders/markdown-loader/index.js:
--------------------------------------------------------------------------------
1 | const { parseQuery } = require('loader-utils')
2 | const md = require('./markdown-it')
3 |
4 | function getOptions(loaderContext) {
5 | const query = loaderContext.query
6 | if (typeof query === 'string' && query !== '') return parseQuery(loaderContext.query)
7 | if (!query || typeof query !== 'object') return {}
8 | return query
9 | }
10 |
11 | module.exports = function (source) {
12 | const options = getOptions(this)
13 | const esModule = typeof options.esModule !== 'undefined' ? options.esModule : true
14 | const prefix = esModule ? 'export default' : 'module.exports ='
15 |
16 | const html = md.render(source)
17 | .replace(/\u2028/g, '\\u2028')
18 | .replace(/\u2029/g, '\\u2029')
19 | .replace(/__VERSION__/g, process.env.RELEASE_VERSION)
20 |
21 | const HAS_HTML_LOADER = this.loaders.some(l => /\/html-loader\//.test(l.path))
22 | return HAS_HTML_LOADER ? html : `${prefix} ${JSON.stringify(html)};`
23 | }
--------------------------------------------------------------------------------
/scripts/webpack/loaders/markdown-loader/md-section.js:
--------------------------------------------------------------------------------
1 | function isH2(token){
2 | return token.type == 'heading_open' && token.tag == 'h2'
3 | }
4 |
5 | function buildSection(part, state){
6 | const open = new state.Token('block', 'section', 1)
7 | open.block = true
8 |
9 | const close = new state.Token('block', 'section', -1)
10 | close.block = true
11 |
12 | part.unshift(open)
13 | part.push(close)
14 | return part
15 | }
16 |
17 | module.exports = function(md){
18 | md.core.ruler.push('section', function(state){
19 | const tokens = state.tokens
20 | const ids = tokens.map((t, i) => isH2(t) ? i : -1).filter(i => i >= 0)
21 | if(ids[0] > 0) ids.unshift(0)
22 | if(ids[ids.length - 1] < ids.length) ids.push(ids.length)
23 |
24 | state.tokens = ids.reduce((acc, item, index, arr) => {
25 | const next = arr[index + 1]
26 | const part = tokens.slice(item, next)
27 | return acc.concat(buildSection(part, state))
28 | }, [])
29 | })
30 | }
--------------------------------------------------------------------------------
/document/component/FooterGuide.vue:
--------------------------------------------------------------------------------
1 |
2 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/packages/element-plus/fields/text/setting.vue:
--------------------------------------------------------------------------------
1 |
2 | loading ...
14 | ${title}
` : '' 17 | return `${ head }`
18 | }
19 |
20 | return '
'
21 | }
22 |
23 | module.exports = function(md){
24 | md.use(Container, 'alert', { validate, render })
25 | md.use(Container, 'code-box', {
26 | validate(params) {
27 | return params.trim().match(CODEBOX_REG)
28 | },
29 | render(tokens, idx) {
30 | return tokens[idx].nesting === 1 ? '
5 |
13 |
14 |
15 |
16 |
9 |
10 |
11 |
12 |
13 | name值为demo的字段会这么显示
10 | 11 | 12 |所有type为text的字段会这么显示
13 | 14 |name值为demo的字段会这么显示
47 | 48 |所有type为text的字段会这么显示
56 | 57 |介绍
基于Vue@3.x的动态表单生成器，主要用于处理用户自行设计表单的业务场景。这里提供了一个在线示例更直观的展示该项目，或者可以查看快速上手了解如何使用。
特性 ✨
- 可扩展 - 提供完善的字段扩展机制，可自行扩展字段
- 可定制 - 提供多样化的配置，让开发人员完全控制表单的行为
- 包含表单设计、表单生成、表单展示在内的组件库
- 可与任何UI库集成，目前已集成
Bootstrap - 基于
typescript和Vue@3.x开发
架构
xForm不提供具体的字段实现，专注于提供灵活的字段扩展机制。通过将底层核心与字段的解耦，具体字段实现可以基于任意UI库，只需要满足xForm的规则即可。
考虑到xForm提供的功能与实际需求可能存在不相匹配的情况，因此在设计时就将可扩展性作为首要因素。为了使用户可以完全的控制表单的行为，xForm支持以下几种层级的配置：
- 全局配置(
config) - 表单的默认行为 - 字段配置(
XField) - 用户控制的行为 - 字段类型配置(
XFieldConf) - 字段类型的行为 - 组件配置(
slot) - 具体组件下的行为
通常情况下用户并不懂技术，所以xForm让开发人员通过一系列的配置控制表单行为，在屏蔽技术细节的基础上提供自定义能力供用户使用。
简单的说，面向普通用户隐藏技术细节，面向开发人员提供完整的控制力。
3 |
16 |
17 |
18 |
47 |
48 |
--------------------------------------------------------------------------------
/packages/bootstrap/fields/checkbox/checkbox.vue:
--------------------------------------------------------------------------------
1 |
2 |
4 |
13 |
14 |
15 |
3 |
16 |
17 |
18 |
47 |
48 |
--------------------------------------------------------------------------------
/document/docs/model.md:
--------------------------------------------------------------------------------
1 | ## XField
2 | `XField`主要用于描述字段数据，保存用户对字段的配置。从数据库中取出的数据需要转成该类型才可被组件接受。
3 | ```typescript
4 | interface XField{
5 | type: string; // 字段类型
6 | name: string; // 字段名，建议唯一
7 | title?: string; // 字段标题
8 | placeholder?: string; // 是否必填
9 | required?: boolean; // 选项
10 | options?: any[];
11 |
12 | attributes?: { // 自定义属性，可自行添加所需属性
13 | [prop: string]: any;
14 | remove?: boolean; // 是否允许字段被删除
15 | };
16 |
17 | // 字段缓存，不可枚举
18 | storage: {
19 | fieldConf: XFieldConf;
20 | }
21 |
22 | // 查询字段对应的字段配置
23 | findFieldConf(): XFieldConf | null;
24 | // 复制该字段，name属性除外
25 | copy(): XField;
26 | }
27 | ```
28 |
29 | ## XFieldConf
30 | `XFieldConf`主要用于描述字段类型的配置，例如字段该如何渲染、验证等。`Ref`和`ComponentOptions`都是由`Vue`提供的类型。
31 | ```typescript
32 | type ModeCompontFunc = (field: XField, mode: string) => ComponentOptions | VNode;
33 | type XFieldConfComponent = ComponentOptions | ModeCompontFunc;
34 |
35 | interface XFieldConf {
36 | type: string; // 字段类型
37 | title: string; // 字段名
38 | icon?: string | Function; // 字段icon
39 | custom?: boolean;
40 | attributes?: object | Function;
41 | extension?: object;
42 |
43 | setting?: XFieldConfComponent;
44 | preview?: XFieldConfComponent;
45 | build?: XFieldConfComponent;
46 | view?: XFieldConfComponent
47 |
48 | // 字段验证器
49 | validator?: (
50 | field: XField,
51 | value: any,
52 | model: any,
53 | context: { validating: Ref
4 |
13 |
14 |
15 |
43 |
44 |
45 |
46 |
47 |
37 | 如果
38 | {targetField ? targetField.title : 'N/A'}
39 | 的值
40 | {operator}
41 | {value}
42 |
43 | )
44 | },
45 | test(logic: DateLogic, field){
46 | const operator = O.get(logic.operator)
47 | if(operator == null) return true
48 |
49 | const target = field.previousField(logic.field)
50 | if(target == null) return true
51 |
52 | return operator.test(target.value, logic.value)
53 | },
54 | validator(logic: DateLogic){
55 | if(isEmpty(logic.value)) return '请补全目标值'
56 | return true
57 | },
58 | onCreated(logic: DateLogic){
59 | if(logic.operator == null) {
60 | logic.operator = O.OPERATOR_EQ.type
61 | }
62 | },
63 | })
--------------------------------------------------------------------------------
/document/docs/components/XFormBuilder.md:
--------------------------------------------------------------------------------
1 | # XFormBuilder 表单生成器
2 | 该组件主要用于根据`XFormDesigner`生成的表单配置，渲染出对应的表单。
3 |
4 | ## 基本用法
5 | ```html
6 |
7 |
37 | 如果
38 | {targetField ? targetField.title : 'N/A'}
39 | 的值
40 | {operator}
41 | {value}
42 |
43 | )
44 | },
45 | test(logic: DateLogic, field){
46 | const operator = O.get(logic.operator)
47 | if(operator == null) return true
48 |
49 | const target = field.previousField(logic.field)
50 | if(target == null) return true
51 |
52 | return operator.test(target.value, logic.value)
53 | },
54 | validator(logic: DateLogic){
55 | if(isEmpty(logic.value)) return '请补全目标值'
56 | return true
57 | },
58 | onCreated(logic: DateLogic){
59 | if(logic.operator == null) {
60 | logic.operator = O.OPERATOR_EQ.type
61 | }
62 | },
63 | })
--------------------------------------------------------------------------------
/packages/element-plus/logic/number.tsx:
--------------------------------------------------------------------------------
1 | import classes from './index.module.scss'
2 |
3 | import { Field, FormFieldLogic, isEmpty } from '@dongls/xform'
4 | import { Operators as O } from '@common/operator'
5 | import { createWarnTip } from './common'
6 |
7 | interface NumberLogic extends FormFieldLogic {
8 | operator?: string
9 | }
10 |
11 | export const NUMBER_VALUE_COMPARE = Field.createFieldLogic({
12 | type: 'number_value_compare',
13 | title: '值',
14 | render(logic: NumberLogic, field){
15 | const targetField = field.previous().find(f => f.name == logic.field)
16 | if(targetField == null) return createWarnTip(logic, field)
17 |
18 | const options = [
19 | O.OPERATOR_EQ,
20 | O.OPERATOR_NE,
21 | O.OPERATOR_LT,
22 | O.OPERATOR_LTE,
23 | O.OPERATOR_GT,
24 | O.OPERATOR_GTE
25 | ].map(o =>
36 | 如果
37 | {targetField ? targetField.title : 'N/A'}
38 | 的值
39 | {operator}
40 | {value}
41 |
42 | )
43 | },
44 | test(logic: NumberLogic, field){
45 | const operator = O.get(logic.operator)
46 | if(operator == null) return true
47 |
48 | const target = field.previousField(logic.field)
49 | if(target == null) return true
50 |
51 | const value = target.value
52 | if(typeof value != 'number') return false
53 |
54 | return operator.test(value, logic.value)
55 | },
56 | validator(logic: NumberLogic){
57 | if(isEmpty(logic.value)) return '请补全目标值'
58 | return true
59 | },
60 | onCreated(logic: NumberLogic){
61 | if(logic.operator == null) {
62 | logic.operator = O.OPERATOR_EQ.type
63 | }
64 | },
65 | })
--------------------------------------------------------------------------------
/packages/bootstrap/util.ts:
--------------------------------------------------------------------------------
1 | import { useConstant } from '@dongls/xform'
2 |
3 | export {
4 | useValue,
5 | useField,
6 | useFieldProp,
7 | useDefaultValueApi,
8 | useOptions
9 | } from '@common/util'
10 |
11 | const { EVENTS } = useConstant()
12 |
13 | // retrieve raw value set via :value bindings
14 | function getValue(el: HTMLOptionElement | HTMLInputElement) {
15 | return '_value' in el ? (el as any)._value : el.value
16 | }
17 |
18 | // retrieve raw value for true-value and false-value set via :true-value or :false-value bindings
19 | function getCheckboxValue(el: HTMLInputElement & { _trueValue?: any; _falseValue?: any }) {
20 | const checked = el.checked
21 | const key = checked ? '_trueValue' : '_falseValue'
22 | return key in el ? el[key] : checked
23 | }
24 |
25 | function parseCheckedValue(element: HTMLInputElement){
26 | const value = getValue(element)
27 | return value == null ? element.checked : element.value
28 | }
29 |
30 | export function parseSelectValue(target: HTMLSelectElement){
31 | const selectedIndex = target.selectedIndex
32 | return selectedIndex < 0 ? null : getValue(target.options[selectedIndex])
33 | }
34 |
35 | function parseValue(target: any, behavior = 'build'){
36 | const value: any = target.value
37 | const type: string = target.type
38 |
39 | if(type == 'number') {
40 | const n = parseFloat(value)
41 | return isNaN(n) ? value : n
42 | }
43 |
44 | if(type == 'select') return parseSelectValue(target as HTMLSelectElement)
45 |
46 | if(type == 'checkbox'){
47 | const selector = `input[type="checkbox"][name="${target.name}"]`
48 | const elements = Array.from(document.querySelectorAll(selector)) as HTMLInputElement[]
49 | if(behavior === 'setting' && elements.length == 1) return getCheckboxValue(elements[0])
50 |
51 | return elements.filter(e => e.checked).map(parseCheckedValue)
52 | }
53 |
54 | return target.value
55 | }
56 |
57 | export function updateField(emit: Function, event: Event, prop: string, scope?: string){
58 | const target = event.target
59 | const value = parseValue(target, 'setting')
60 |
61 | emit(EVENTS.UPDATE_FIELD, { prop, value, scope })
62 | }
63 |
--------------------------------------------------------------------------------
/packages/bootstrap/logic/number.tsx:
--------------------------------------------------------------------------------
1 | import classes from './index.module.scss'
2 |
3 | import { Field, FormFieldLogic, isEmpty } from '@dongls/xform'
4 | import { Operators as O } from '@common/operator'
5 | import { createWarnTip } from './common'
6 |
7 | interface NumberLogic extends FormFieldLogic {
8 | operator?: string
9 | }
10 |
11 | export const NUMBER_VALUE_COMPARE = Field.createFieldLogic({
12 | type: 'number_value_compare',
13 | title: '值',
14 | render(logic: NumberLogic, field){
15 | const targetField = field.previous().find(f => f.name == logic.field)
16 | if(targetField == null) return createWarnTip(logic, field)
17 |
18 | const options = [
19 | O.OPERATOR_EQ,
20 | O.OPERATOR_NE,
21 | O.OPERATOR_LT,
22 | O.OPERATOR_LTE,
23 | O.OPERATOR_GT,
24 | O.OPERATOR_GTE
25 | ].map(o => )
26 |
27 | const operator =
28 | const value = (
29 | logic.operator === O.OPERATOR_EMPTY.type
30 | ? null
31 | :
32 | )
33 |
34 | return (
35 |
36 | 如果
37 | {targetField ? targetField.title : 'N/A'}
38 | 的值
39 | {operator}
40 | {value}
41 |
42 | )
43 | },
44 | test(logic: NumberLogic, field){
45 | const operator = O.get(logic.operator)
46 | if(operator == null) return true
47 |
48 | const target = field.previousField(logic.field)
49 | if(target == null) return true
50 |
51 | const value = target.value
52 | if(typeof value != 'number') return false
53 |
54 | return operator.test(value, logic.value)
55 | },
56 | validator(logic: NumberLogic){
57 | if(isEmpty(logic.value)) return '请补全目标值'
58 | return true
59 | },
60 | onCreated(logic: NumberLogic){
61 | if(logic.operator == null) {
62 | logic.operator = O.OPERATOR_EQ.type
63 | }
64 | },
65 | })
--------------------------------------------------------------------------------
/packages/core/api/Logic/builtin.tsx:
--------------------------------------------------------------------------------
1 | import { Field } from '../../model/Field'
2 | import { registerLogic, test } from './logic'
3 |
4 | export const BUILTIN_LOGIC_AND = Field.createFieldLogic({
5 | type: 'and',
6 | title: '逻辑与',
7 | composed: true,
8 | test(logic, field) {
9 | const conditions = logic.conditions
10 | if(!Array.isArray(conditions)) return false
11 |
12 | for(const c of conditions) {
13 | if(!test(c, field)) return false
14 | }
15 |
16 | return true
17 | },
18 | render(){
19 | return 如果以下所有条件均被满足：
20 | },
21 | validator(logic){
22 | if(!Array.isArray(logic.conditions) || logic.conditions.length <= 0){
23 | return '至少添加一条子逻辑'
24 | }
25 | }
26 | })
27 |
28 | export const BUILTIN_LOGIC_OR = Field.createFieldLogic({
29 | type: 'or',
30 | title: '逻辑或',
31 | composed: true,
32 | test(logic, field) {
33 | const conditions = logic.conditions
34 | if(!Array.isArray(conditions)) return false
35 |
36 | for(const c of conditions) {
37 | if(test(c, field)) return true
38 | }
39 |
40 | return false
41 | },
42 | render(){
43 | return 如果以下任意条件被满足：
44 | },
45 | validator(logic){
46 | if(!Array.isArray(logic.conditions) || logic.conditions.length <= 0){
47 | return '至少添加一条子逻辑'
48 | }
49 | }
50 | })
51 |
52 | export const BUILTIN_LOGIC_NOT = Field.createFieldLogic({
53 | type: 'not',
54 | title: '逻辑非',
55 | composed: true,
56 | test(logic, field) {
57 | const conditions = logic.conditions
58 | if(!Array.isArray(conditions)) return false
59 |
60 | for(const c of conditions) {
61 | if(test(c, field)) return false
62 | }
63 |
64 | return true
65 | },
66 | render(){
67 | return 如果以下所有条件均不被满足：
68 | },
69 | validator(logic){
70 | if(!Array.isArray(logic.conditions) || logic.conditions.length <= 0){
71 | return '至少添加一条子逻辑'
72 | }
73 | }
74 | })
75 |
76 | export function useBuiltIn(){
77 | registerLogic(BUILTIN_LOGIC_AND)
78 | registerLogic(BUILTIN_LOGIC_OR)
79 | registerLogic(BUILTIN_LOGIC_NOT)
80 | }
--------------------------------------------------------------------------------
/packages/bootstrap/fields/date/setting.vue:
--------------------------------------------------------------------------------
1 |
2 |
8 |
17 |
24 |
25 |
6 |
7 |
13 |
23 | 配置字段逻辑后，如果依赖的字段能够满足指定的条件，就会显示该字段，否则会隐藏该字段。
9 |
10 |
17 |
18 |
20 |
21 |
22 |
24 | 定制name值为demo的字段的设置组件
75 | 76 |定制所有字段类型为text的字段的设置组件
84 | 85 |