View description language

「VDL」是用来进行 GUI 界面描述的 DSL，可以按命名空间注册标签集，并提供解析模板为节点树等功能。

概念

元素

像 HTML 一样，每个元素都有自己的语义及作用。

命名空间

用来限制元素语义表达的标识符，即同名的元素在不同的命名空间中所表达的语义可能不同。

标签集

同一个命名空间中的元素集合。

用法

注册元素

使用 registerElement() 函数向指定命名空间中添加元素。

import { registerElement } from '@ntks/vdl';

// 注册视图元素
registerElement('admin', {
  name: 'view',
  props: {
    widget: { type: 'string', required: true },
  },
});

// 注册字段元素
registerElement('admin', {
  name: 'field',
  props: {
    widget: { type: 'string', required: false },
    name: { type: 'string', required: true },
    label: { type: ['string', 'boolean'], required: false },
    hint: { type: 'string', required: false },
    required: { type: ['boolean', 'string'], required: false },
    readonly: { type: ['boolean', 'string'], required: false },
    maxLength: { type: 'number', required: false },
    minLength: { type: 'number', required: false },
    pattern: { type: 'regexp', required: false },
    max: { type: 'number', required: false },
    min: { type: 'number', required: false },
  },
});

解析模板

将模板解析为节点树，方便动态操作。

import { DslResolver } from '@ntks/vdl';

const tpl = `<view widget="form">
  <field name="name" label="姓名" />
  <field name="gender" label="性别" />
  <field name="age" label="年龄" />
  <field name="birthday" label="生日" />
  <field name="dogs" label="🐶" />
  <field name="cats" label="🐱" />
</view>`;

const dsl = new DslResolver(tpl, 'admin');