调整为 monorepo

Change-Id: I06342cb12229885daf8e6fa2978f4e49ea0c49a2
This commit is contained in:
2betop 2022-06-14 23:50:58 +08:00
commit 4b7d6e3521
353 changed files with 52531 additions and 0 deletions

View File

@ -0,0 +1,347 @@
/**
* @file 基础控件集合
*/
import { __assign, __rest, __spreadArray } from "tslib";
import flatten from 'lodash/flatten';
import { getEventControlConfig } from '../util';
import { getSchemaTpl, isObject } from 'amis-editor-core';
// 默认动作
export var BUTTON_DEFAULT_ACTION = {
onEvent: {
click: {
actions: []
}
}
};
/**
* Label提示
* 支持传入Schema或String传入String则使用默认配置如下
*
* @default
* ```
* className: 'ae-BaseRemark',
* icon: 'fa fa-question-circle',
* trigger: ['hover', 'click'],
* placement: 'left'
* ```
*/
export var BaseLabelMark = function (schema) {
var base = {
className: 'ae-BaseRemark',
icon: 'fa fa-question-circle',
trigger: ['hover', 'click'],
placement: 'left',
content: ''
};
if (!isObject(schema) || typeof schema === 'string') {
return schema ? __assign(__assign({}, base), { content: schema.toString() }) : undefined;
}
var className = schema.className, content = schema.content, rest = __rest(schema, ["className", "content"]);
return content
? __assign(__assign(__assign(__assign({}, base), rest), (className
? { className: "".concat(base.className, " ").concat(rest.className) }
: {})), { content: content }) : undefined;
};
var normalizCollapsedGroup = function (publicProps, body) {
if (publicProps === void 0) { publicProps = {}; }
return body
? Array.isArray(body)
? body
.filter(function (item) { return item; })
.map(function (item, index) { return (__assign(__assign(__assign(__assign({}, publicProps), { key: item.key || index.toString() }), item), { body: flatten(item.body) })); })
: [
__assign(__assign(__assign({}, publicProps), { key: '0' }), body)
]
: [];
};
/**
* 更新/归一化处理表单项
*
* @param defaultBody 默认配置
* @param body 输入配置
* @param replace 是否完全替换
* @returns
*/
var normalizeBodySchema = function (defaultBody, body, replace, reverse, order) {
if (replace === void 0) { replace = false; }
if (reverse === void 0) { reverse = false; }
if (order === void 0) { order = {}; }
var normalizedBody = body
? Array.isArray(body)
? body.concat()
: [body]
: [];
var schema = flatten(replace
? normalizedBody
: reverse
? __spreadArray(__spreadArray([], normalizedBody, true), defaultBody, true) : __spreadArray(__spreadArray([], defaultBody, true), normalizedBody, true));
return schema;
};
/**
* 表单项组件面板
*
* @param {Object=} panels
* @param {string=} key
* `property` 属性
* `common` 常用
* `status` 状态
* `validation` 校验
* `style` 样式
* `event` 事件
* @param {string=} panels.body - 配置面板Schema
* @param {boolean=} panels.replace - 是否完全替换默认Schema默认追加
* @param {Array} panels.validation.validationType - 默认显示的校验类型
*/
export var formItemControl = function (panels, context) {
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
var collapseProps = {
type: 'collapse',
headingClassName: 'ae-formItemControl-header',
bodyClassName: 'ae-formItemControl-body'
};
// 已经配置了的属性
var propsList = Object.keys((_a = context === null || context === void 0 ? void 0 : context.schema) !== null && _a !== void 0 ? _a : {});
// 选项面版内容支持Option的组件才展示该面板
var optionBody = normalizeBodySchema([], (_b = panels === null || panels === void 0 ? void 0 : panels.option) === null || _b === void 0 ? void 0 : _b.body, (_c = panels === null || panels === void 0 ? void 0 : panels.option) === null || _c === void 0 ? void 0 : _c.replace);
// 属性面板配置
var collapseGroupBody = (panels === null || panels === void 0 ? void 0 : panels.property)
? normalizCollapsedGroup(collapseProps, panels === null || panels === void 0 ? void 0 : panels.property)
: __spreadArray(__spreadArray([
__assign(__assign({}, collapseProps), { header: '常用', key: 'common', body: normalizeBodySchema([
getSchemaTpl('formItemName', {
required: true
}),
getSchemaTpl('label'),
getSchemaTpl('labelRemark'),
getSchemaTpl('remark'),
getSchemaTpl('placeholder'),
getSchemaTpl('description')
], (_d = panels === null || panels === void 0 ? void 0 : panels.common) === null || _d === void 0 ? void 0 : _d.body, (_e = panels === null || panels === void 0 ? void 0 : panels.common) === null || _e === void 0 ? void 0 : _e.replace, (_f = panels === null || panels === void 0 ? void 0 : panels.common) === null || _f === void 0 ? void 0 : _f.reverse) })
], (optionBody.length !== 0
? [
__assign(__assign({}, collapseProps), { header: ((_g = panels === null || panels === void 0 ? void 0 : panels.option) === null || _g === void 0 ? void 0 : _g.title) || '选项', key: 'option', body: optionBody })
]
: []), true), [
__assign(__assign({}, collapseProps), { header: '状态', key: 'status', body: normalizeBodySchema([
getSchemaTpl('hidden'),
// TODO: 下面的部分表单项才有,是不是判断一下是否是表单项
getSchemaTpl('disabled'),
getSchemaTpl('clearValueOnHidden')
], (_h = panels === null || panels === void 0 ? void 0 : panels.status) === null || _h === void 0 ? void 0 : _h.body, (_j = panels === null || panels === void 0 ? void 0 : panels.status) === null || _j === void 0 ? void 0 : _j.replace, (_k = panels === null || panels === void 0 ? void 0 : panels.status) === null || _k === void 0 ? void 0 : _k.reverse) })
], false);
return [
{
type: 'tabs',
tabsMode: 'line',
className: 'editor-prop-config-tabs',
linksClassName: 'editor-prop-config-tabs-links',
contentClassName: 'no-border editor-prop-config-tabs-cont',
tabs: __spreadArray([
{
title: '属性',
className: 'p-none',
body: [
{
type: 'collapse-group',
expandIconPosition: 'right',
expandIcon: {
type: 'icon',
icon: 'chevron-right'
},
className: 'ae-formItemControl',
activeKey: collapseGroupBody.map(function (group, index) { return group.key; }),
body: collapseGroupBody
}
]
},
{
title: '外观',
body: normalizeBodySchema([
getSchemaTpl('formItemMode'),
getSchemaTpl('horizontalMode'),
getSchemaTpl('horizontal', {
label: '',
visibleOn: 'data.mode == "horizontal" && data.label !== false && data.horizontal'
}),
// renderer.sizeMutable !== false
// ? getSchemaTpl('formItemSize')
// : null,
getSchemaTpl('formItemInline'),
getSchemaTpl('className'),
getSchemaTpl('className', {
label: 'Label CSS 类名',
name: 'labelClassName'
}),
getSchemaTpl('className', {
label: '控件 CSS 类名',
name: 'inputClassName'
}),
getSchemaTpl('className', {
label: '描述 CSS 类名',
name: 'descriptionClassName',
visibleOn: 'this.description'
})
], (_l = panels === null || panels === void 0 ? void 0 : panels.style) === null || _l === void 0 ? void 0 : _l.body, (_m = panels === null || panels === void 0 ? void 0 : panels.style) === null || _m === void 0 ? void 0 : _m.replace, (_o = panels === null || panels === void 0 ? void 0 : panels.style) === null || _o === void 0 ? void 0 : _o.reverse)
}
], (isObject(context) && !((_p = panels === null || panels === void 0 ? void 0 : panels.event) === null || _p === void 0 ? void 0 : _p.hidden)
? [
{
title: '事件',
className: 'p-none',
body: normalizeBodySchema([
getSchemaTpl('eventControl', __assign({ name: 'onEvent' }, getEventControlConfig(context.info.plugin.manager, context)))
], (_q = panels === null || panels === void 0 ? void 0 : panels.event) === null || _q === void 0 ? void 0 : _q.body, (_r = panels === null || panels === void 0 ? void 0 : panels.event) === null || _r === void 0 ? void 0 : _r.replace)
}
]
: []), true)
}
];
};
export function tipedLabel(body, tip, style) {
return {
type: 'tooltip-wrapper',
tooltip: tip,
tooltipTheme: 'dark',
placement: 'top',
tooltipStyle: __assign({ fontSize: '12px' }, (style || {})),
className: 'ae-formItemControl-label-tip',
body: body
};
}
/**
* 信息提示组件模版
*/
export function remarkTpl(config) {
return {
type: 'ae-switch-more',
formType: 'dialog',
label: config.labelRemark
? tipedLabel(config.label, config.labelRemark)
: config.label,
bulk: false,
name: config.name,
pipeIn: function (value) { return !!value; },
pipeOut: function (value) {
// 更新内容
if (isObject(value)) {
return value;
}
// 关到开
if (value) {
return {
icon: 'fa fa-question-circle',
trigger: ['hover'],
className: 'Remark--warning',
placement: 'top'
};
}
// 开到关
return undefined;
},
form: {
size: 'md',
className: 'mb-8',
mode: 'horizontal',
horizontal: {
left: 4,
right: 8,
justify: true
},
body: {
type: 'grid',
className: 'pt-4 right-panel-pop',
gap: 'lg',
columns: [
{
md: '6',
body: [
{
name: 'title',
type: 'input-text',
label: '提示标题',
placeholder: '请输入提示标题'
},
{
name: 'content',
type: 'textarea',
label: '内容'
}
]
},
{
md: '6',
body: [
{
name: 'placement',
type: 'button-group-select',
size: 'md',
label: '弹出位置',
options: [
{
label: '上',
value: 'top'
},
{
label: '下',
value: 'bottom'
},
{
label: '左',
value: 'left'
},
{
label: '右',
value: 'right'
}
]
},
{
name: 'icon',
label: '图标',
type: 'icon-picker',
className: 'fix-icon-picker-overflow'
},
{
name: 'className',
label: 'CSS 类名',
type: 'input-text',
labelRemark: BaseLabelMark('有哪些辅助类 CSS 类名?请前往 <a href="https://baidu.gitee.io/amis/zh-CN/style/index" target="_blank">样式说明</a>,除此之外你可以添加自定义类名,然后在系统配置中添加自定义样式。')
},
{
name: 'trigger',
type: 'select',
label: '触发方式',
labelRemark: BaseLabelMark('浮层触发方式默认值为鼠标悬停'),
multiple: true,
pipeIn: function (value) {
return Array.isArray(value) ? value.join(',') : [];
},
pipeOut: function (value) {
return value && value.length ? value.split(',') : ['hover'];
},
options: [
{
label: '鼠标悬停',
value: 'hover'
},
{
label: '点击',
value: 'click'
}
]
},
{
name: 'rootClose',
visibleOn: '~this.trigger.indexOf("click")',
label: '点击空白关闭',
type: 'switch',
mode: 'row',
inputClassName: 'inline-flex justify-between flex-row-reverse'
}
]
}
]
}
}
};
}

View File

@ -0,0 +1,8 @@
/// <reference types="react" />
import { RendererProps } from 'amis-core';
interface InputComponentNameProps extends RendererProps {
value: any;
onChange: (value: any) => void;
}
export declare function InputComponentName(props: InputComponentNameProps): JSX.Element;
export {};

View File

@ -0,0 +1,32 @@
import { useEffect, useState } from 'react';
export function InputComponentName(props) {
var value = props.value, onChange = props.onChange, render = props.render, name = props.name, node = props.node;
var _a = useState([]), options = _a[0], setOptions = _a[1];
useEffect(function () {
var thisComp = node === null || node === void 0 ? void 0 : node.getComponent();
var scoped = thisComp === null || thisComp === void 0 ? void 0 : thisComp.context;
var comps = [];
while (scoped === null || scoped === void 0 ? void 0 : scoped.getComponents) {
scoped.getComponents().forEach(function (c) {
if (c.props.name && c !== thisComp) {
// todo 把孩子节点拼装成 xxx.xxx
comps.push(c.props.name);
}
});
scoped = scoped.parent;
}
setOptions(comps);
}, [node]);
function onInnerChange(value) {
onChange(value);
return false;
}
return render('inner', {
type: 'input-text',
name: name
}, {
value: value,
onChange: onInnerChange,
options: options
});
}

View File

@ -0,0 +1,79 @@
/**
* @file tableview
*/
import React from 'react';
import { TableViewSchema } from 'amis/lib/renderers/TableView';
import { EditorManager } from 'amis-editor-core';
import { EditorStoreType } from 'amis-editor-core';
interface TableViewEditorProps {
schema: TableViewSchema;
manager: EditorManager;
}
interface TableViewEditorState {
trIds: string[];
tdIds: string[];
displayMergeCell: boolean;
}
export declare class TableViewEditor extends React.Component<TableViewEditorProps, TableViewEditorState> {
tableViewWrapperRef: React.RefObject<HTMLDivElement>;
draggingId: string;
draggingElement: HTMLElement;
draggingElementTop: number;
draggingElementLeft: number;
startX: number;
startY: number;
maxChildTrIndex: number;
store: EditorStoreType;
isSelectionCell: boolean;
selectedCell: {
[cellId: string]: any;
};
preventTableClick: boolean;
constructor(props: TableViewEditorProps);
componentDidMount(): void;
componentWillUnmount(): void;
syncLineState(): void;
removeListenTdSelection(): void;
listenTdSelection(): void;
handleCellMouseDown(e: MouseEvent): void;
handleCellMouseMove(e: MouseEvent): void;
findFirstAndLastCell(): {
minRow: number;
minCol: number;
maxRow: number;
maxCol: number;
firstCell: any;
lastCell: null;
};
/**
* td
*
* a b c d
*
* e f
*
* g h
*
* a c b
* e f g
*
*/
markSelectingCell(): void;
removeAllSelectionMark(): void;
handleCellMouseUp(e: MouseEvent): void;
handleCellMouseClick(e: MouseEvent): void;
handleMergeCell(): void;
syncLinePos(): void;
componentDidUpdate(prevProps: TableViewEditorProps): void;
lineMouseDownCommon(e: React.MouseEvent<HTMLElement>): void;
handleRowMouseDown(e: React.MouseEvent<HTMLElement>): void;
handleRowMouseMove(e: MouseEvent): void;
handleRowMouseUp(e: MouseEvent): void;
handleColMouseDown(e: React.MouseEvent<HTMLElement>): void;
handleColMouseMove(e: MouseEvent): void;
handleColMouseUp(e: MouseEvent): void;
handleLineClick(e: MouseEvent): void;
renderMergeIcon(): JSX.Element | null;
render(): JSX.Element;
}
export {};

View File

@ -0,0 +1,512 @@
/**
* @file tableview 相关的可视化编辑拖动行高等
*/
import { __assign, __decorate, __extends, __metadata } from "tslib";
import React from 'react';
import isEqual from 'lodash/isEqual';
import { toast } from 'amis';
import { autobind, JSONGetById } from 'amis-editor-core';
var ROW_HEIGHT = 42;
// 找到 td 最多的那一行,将这一行作为列线
function findMaxTrChildren(trs) {
var maxSize = 0;
var maxIndex = 0;
for (var trIndex = 0; trIndex < trs.length; trIndex++) {
var childSize = (trs[trIndex].tds || []).length;
if (childSize > maxSize) {
maxIndex = trIndex;
maxSize = childSize;
}
}
return maxIndex;
}
var TableViewEditor = /** @class */ (function (_super) {
__extends(TableViewEditor, _super);
function TableViewEditor(props) {
var _this = _super.call(this, props) || this;
_this.preventTableClick = false;
_this.tableViewWrapperRef = React.createRef();
_this.store = _this.props.manager.store;
var trs = _this.props.schema.trs || [];
if (trs.length) {
var trsIds = trs.map(function (tr) { return tr.$$id; });
var maxChildTrIndex = findMaxTrChildren(trs);
_this.maxChildTrIndex = maxChildTrIndex;
var tds = trs[maxChildTrIndex].tds || [];
var tdsIds = tds.map(function (td) { return td.$$id; });
_this.state = {
trIds: trsIds,
tdIds: tdsIds,
displayMergeCell: false
};
}
else {
_this.state = {
trIds: [],
tdIds: [],
displayMergeCell: false
};
}
_this.listenTdSelection();
return _this;
}
TableViewEditor.prototype.componentDidMount = function () {
this.syncLinePos();
this.listenTdSelection();
};
TableViewEditor.prototype.componentWillUnmount = function () {
this.removeListenTdSelection();
};
// 同步线数量,主要用于新增行或列
TableViewEditor.prototype.syncLineState = function () {
var _this = this;
var trs = this.props.schema.trs || [];
if (!trs.length) {
return;
}
var trsIds = trs.map(function (tr) { return tr.$$id; });
var maxChildTrIndex = findMaxTrChildren(trs);
this.maxChildTrIndex = maxChildTrIndex;
var tds = trs[maxChildTrIndex].tds || [];
var tdsIds = tds.map(function (td) { return td.$$id; });
this.setState({
trIds: trsIds,
tdIds: tdsIds
}, function () {
_this.syncLinePos();
});
};
TableViewEditor.prototype.removeListenTdSelection = function () {
var dom = this.tableViewWrapperRef.current;
if (dom) {
var tbody = dom.querySelector('tbody');
tbody.removeEventListener('mousedown', this.handleCellMouseDown);
tbody.removeEventListener('mousemove', this.handleCellMouseMove);
tbody.removeEventListener('mouseup', this.handleCellMouseUp);
tbody.removeEventListener('click', this.handleCellMouseClick);
}
};
// 监听 td 的拖拽事件,用于实现单元格合并
TableViewEditor.prototype.listenTdSelection = function () {
var dom = this.tableViewWrapperRef.current;
if (dom) {
var tbody = dom.querySelector('tbody');
tbody.addEventListener('mousedown', this.handleCellMouseDown);
tbody.addEventListener('mousemove', this.handleCellMouseMove);
tbody.addEventListener('mouseup', this.handleCellMouseUp);
tbody.addEventListener('click', this.handleCellMouseClick);
}
};
// 用于单元格合并的点击
TableViewEditor.prototype.handleCellMouseDown = function (e) {
var _a;
var td = e.target;
if (td && td.tagName !== 'TD') {
return;
}
this.removeAllSelectionMark();
this.setState({
displayMergeCell: false
});
var tdId = td.getAttribute('data-editor-id');
this.isSelectionCell = true;
this.selectedCell = (_a = {},
_a[tdId] = JSONGetById(this.props.schema, tdId),
_a);
};
// 用于单元格合并的移动
TableViewEditor.prototype.handleCellMouseMove = function (e) {
if (this.isSelectionCell) {
this.preventTableClick = true; //如果有移动就禁止一次表格 click 事件
var td = e.target;
if (td && td.tagName !== 'TD') {
return;
}
var tdId = td.getAttribute('data-editor-id');
if (!(tdId in this.selectedCell)) {
this.selectedCell[tdId] = JSONGetById(this.props.schema, tdId);
this.markSelectingCell();
this.setState({
displayMergeCell: true
});
}
}
};
// 查找最大和最小行列位置,考虑跨行的情况,用于单元格合并
TableViewEditor.prototype.findFirstAndLastCell = function () {
var tds = [];
for (var tdId in this.selectedCell) {
tds.push(this.selectedCell[tdId]);
}
if (!tds.length) {
console.warn('必须有 td');
}
var minCol = tds[0].$$col;
var minRow = tds[0].$$row;
var maxCol = 0;
var maxRow = 0;
var firstCell = null;
var lastCell = null;
for (var _i = 0, tds_1 = tds; _i < tds_1.length; _i++) {
var td = tds_1[_i];
var col = td.$$col + (td.colspan || 1) - 1; // 这里直接减一不然后面还得弄
var row = td.$$row + (td.rowspan || 1) - 1;
if (col >= maxCol) {
maxCol = col;
}
if (row >= maxRow) {
maxRow = row;
}
if (td.$$col <= minCol) {
minCol = td.$$col;
}
if (td.$$row <= minRow) {
minRow = td.$$row;
}
if (td.$$col === minCol && td.$$row === minRow) {
firstCell = td;
}
}
return {
minRow: minRow,
minCol: minCol,
maxRow: maxRow,
maxCol: maxCol,
firstCell: firstCell,
lastCell: lastCell
};
};
/**
* 选择 td 主要是为了单元格合并它要求是必须是矩形比如下面的例子
*
* a b c d
*
* e f
*
* g h
*
* 直接选 a c 是不行的无法进行单元格合并所以需要补上 b
* 如果选择了 e f需要自动选择 g 来让整体变成矩形
* 这个函数的主要作用就是将矩形补充完整
*/
TableViewEditor.prototype.markSelectingCell = function () {
var _this = this;
// 首先,查找最小和最大的行和列
var _a = this.findFirstAndLastCell(), minRow = _a.minRow, minCol = _a.minCol, maxRow = _a.maxRow, maxCol = _a.maxCol;
// 变量一遍找出所有在这个范围内的节点,如果不在就添加
for (var _i = 0, _b = this.props.schema.trs; _i < _b.length; _i++) {
var tr = _b[_i];
for (var _c = 0, _d = tr.tds; _c < _d.length; _c++) {
var td = _d[_c];
var internalTd = td;
if (internalTd.$$col >= minCol &&
internalTd.$$col <= maxCol &&
internalTd.$$row >= minRow &&
internalTd.$$row <= maxRow) {
if (!(internalTd.$$id in this.selectedCell)) {
this.selectedCell[internalTd.$$id] = td;
}
}
}
}
var dom = this.tableViewWrapperRef.current;
if (dom) {
var tds = dom.querySelectorAll('td');
tds.forEach(function (td) {
var tdId = td.getAttribute('data-editor-id');
if (tdId in _this.selectedCell) {
td.setAttribute('data-selected', '1');
}
});
}
};
// 清除之前的单元格选择
TableViewEditor.prototype.removeAllSelectionMark = function () {
var dom = this.tableViewWrapperRef.current;
if (dom) {
var tds = dom.querySelectorAll('td');
tds.forEach(function (td) {
td.removeAttribute('data-selected');
});
}
};
TableViewEditor.prototype.handleCellMouseUp = function (e) {
this.isSelectionCell = false;
};
// 如果有拖拽的时候就避免选中表格导致状态切换
TableViewEditor.prototype.handleCellMouseClick = function (e) {
if (this.preventTableClick) {
e.stopPropagation();
e.preventDefault();
this.preventTableClick = false;
}
};
// 合并单元格操作
TableViewEditor.prototype.handleMergeCell = function () {
var _a = this.findFirstAndLastCell(), firstCell = _a.firstCell, minRow = _a.minRow, minCol = _a.minCol, maxRow = _a.maxRow, maxCol = _a.maxCol;
if (!firstCell) {
console.warn('找不到第一个 cell');
return;
}
var firstCellId = firstCell.$$id;
var colspan = maxCol - minCol + 1;
var rowspan = maxRow - minRow + 1;
firstCell.colspan = colspan;
firstCell.rowspan = rowspan;
var tds = [];
for (var tdId in this.selectedCell) {
tds.push(this.selectedCell[tdId]);
}
// 其它单元格,这些单元格会被删掉
var otherCellIds = tds
.filter(function (td) { return td.$$id !== firstCellId; })
.map(function (td) { return td.$$id; });
var trs = this.props.schema.trs;
var trIndex = trs.length;
while (trIndex--) {
var tr = trs[trIndex];
tr.tds = tr.tds.filter(function (td) {
return !otherCellIds.includes(td.$$id);
});
if (!tr.tds.length) {
trs.splice(trIndex, 1);
}
}
var tableId = this.props.schema.$$id;
this.store.changeValueById(tableId, this.props.schema);
this.setState({ displayMergeCell: false });
};
// 同步线的位置
TableViewEditor.prototype.syncLinePos = function () {
var dom = this.tableViewWrapperRef.current;
if (dom) {
var table = dom.querySelector('table');
var tableRect = table.getBoundingClientRect();
var trs = dom.querySelectorAll('tr');
if (!trs.length || typeof this.maxChildTrIndex === 'undefined') {
return;
}
var rowLines = Array.from(dom.querySelectorAll('.ae-TableViewEditor-rowLine'));
for (var trIndex = 0; trIndex < trs.length; trIndex++) {
if (!trs[trIndex]) {
continue;
}
var trRect = trs[trIndex].getBoundingClientRect();
if (rowLines[trIndex]) {
// 线的宽度是 7所以要减去 3.5
rowLines[trIndex].style.top =
trRect.top + trRect.height - tableRect.top - 3.5 + 'px';
}
else {
console.warn('行线数量不对');
}
}
var tds = trs[this.maxChildTrIndex].querySelectorAll('td');
var colLines = Array.from(dom.querySelectorAll('.ae-TableViewEditor-colLine'));
for (var tdIndex = 0; tdIndex < tds.length; tdIndex++) {
var td = tds[tdIndex];
if (!td) {
continue;
}
var tdRect = td.getBoundingClientRect();
if (colLines[tdIndex]) {
colLines[tdIndex].style.left =
tdRect.left + tdRect.width - tableRect.left - 3.5 + 'px';
}
else {
console.warn('列线数量不对');
}
}
}
};
TableViewEditor.prototype.componentDidUpdate = function (prevProps) {
var prevSchema = prevProps.schema;
var thisSchema = this.props.schema;
if (!isEqual(prevSchema, thisSchema)) {
this.syncLineState();
}
};
// 水平或垂直线在鼠标按下去时的通用处理
TableViewEditor.prototype.lineMouseDownCommon = function (e) {
this.startY = e.clientY;
this.startX = e.clientX;
var currentTarget = e.currentTarget;
this.draggingElement = currentTarget;
this.draggingElementTop = parseInt(this.draggingElement.style.top, 10);
this.draggingElementLeft = parseInt(this.draggingElement.style.left, 10);
currentTarget.style.background = '#4285f4';
this.draggingId = currentTarget.getAttribute('data-id');
currentTarget.addEventListener('click', this.handleLineClick, { once: true });
};
// 水平线的拖拽
TableViewEditor.prototype.handleRowMouseDown = function (e) {
this.lineMouseDownCommon(e);
document.addEventListener('mousemove', this.handleRowMouseMove);
document.addEventListener('mouseup', this.handleRowMouseUp);
};
// 水平线移动
TableViewEditor.prototype.handleRowMouseMove = function (e) {
var moveY = e.clientY - this.startY;
this.draggingElement.style.top = this.draggingElementTop + moveY + 'px';
};
// 水平线结束
TableViewEditor.prototype.handleRowMouseUp = function (e) {
document.removeEventListener('mousemove', this.handleRowMouseMove);
document.removeEventListener('mouseup', this.handleRowMouseUp);
var moveY = e.clientY - this.startY;
var store = this.store;
var draggingId = this.draggingId;
var value = store.getValueOf(draggingId);
var rowElement = this.tableViewWrapperRef.current.querySelector("tr[data-editor-id=\"".concat(draggingId, "\"]"));
this.draggingElement.style.background = 'none';
if (!value || !rowElement) {
console.warn('找不到对应的 id', draggingId);
}
else {
var height = rowElement.getBoundingClientRect().height;
var targetHeight = height + moveY;
store.changeValueById(draggingId, __assign(__assign({}, value), { height: targetHeight }));
if (ROW_HEIGHT - targetHeight > 20) {
toast.warning('由于内边距限制,太小的高度设置会不生效,可以调小默认内边距');
}
}
};
// 垂直线的拖拽
TableViewEditor.prototype.handleColMouseDown = function (e) {
this.lineMouseDownCommon(e);
document.addEventListener('mousemove', this.handleColMouseMove);
document.addEventListener('mouseup', this.handleColMouseUp);
};
// 垂直线移动
TableViewEditor.prototype.handleColMouseMove = function (e) {
var moveX = e.clientX - this.startX;
this.draggingElement.style.left = this.draggingElementLeft + moveX + 'px';
};
// 垂直线结束
TableViewEditor.prototype.handleColMouseUp = function (e) {
document.removeEventListener('mousemove', this.handleColMouseMove);
document.removeEventListener('mouseup', this.handleColMouseUp);
var moveX = e.clientX - this.startX;
var store = this.store;
var draggingId = this.draggingId;
var value = store.getValueOf(draggingId);
var tdElement = this.tableViewWrapperRef.current.querySelector("td[data-editor-id=\"".concat(draggingId, "\"]"));
this.draggingElement.style.background = 'none';
if (!value || !tdElement) {
console.warn('找不到对应的 id', draggingId);
}
else {
var width = tdElement.getBoundingClientRect().width;
var targetWidth = width + moveX;
store.changeValueById(draggingId, __assign(__assign({}, value), { width: targetWidth }));
}
};
// 阻止冒泡防止切换到表格选中
TableViewEditor.prototype.handleLineClick = function (e) {
e.stopPropagation();
e.preventDefault();
};
// 单元格合并的按钮
TableViewEditor.prototype.renderMergeIcon = function () {
if (this.state.displayMergeCell) {
return (React.createElement("div", { className: "ae-TableViewEditor-mergeIcon", onMouseDown: this.handleMergeCell }, "\u5408\u5E76\u5355\u5143\u683C"));
}
return null;
};
TableViewEditor.prototype.render = function () {
var _this = this;
var rowLines = this.state.trIds.map(function (id) { return (React.createElement("div", { className: "ae-TableViewEditor-rowLine", key: "row-".concat(id), "data-id": id, onMouseDown: _this.handleRowMouseDown })); });
var colLines = this.state.tdIds.map(function (id) { return (React.createElement("div", { className: "ae-TableViewEditor-colLine", key: "row-".concat(id), "data-id": id, onMouseDown: _this.handleColMouseDown })); });
return (React.createElement("div", { className: "ae-TableViewEditor", ref: this.tableViewWrapperRef },
this.props.children,
this.renderMergeIcon(),
rowLines,
colLines));
};
__decorate([
autobind,
__metadata("design:type", Function),
__metadata("design:paramtypes", []),
__metadata("design:returntype", void 0)
], TableViewEditor.prototype, "removeListenTdSelection", null);
__decorate([
autobind,
__metadata("design:type", Function),
__metadata("design:paramtypes", []),
__metadata("design:returntype", void 0)
], TableViewEditor.prototype, "listenTdSelection", null);
__decorate([
autobind,
__metadata("design:type", Function),
__metadata("design:paramtypes", [MouseEvent]),
__metadata("design:returntype", void 0)
], TableViewEditor.prototype, "handleCellMouseDown", null);
__decorate([
autobind,
__metadata("design:type", Function),
__metadata("design:paramtypes", [MouseEvent]),
__metadata("design:returntype", void 0)
], TableViewEditor.prototype, "handleCellMouseMove", null);
__decorate([
autobind,
__metadata("design:type", Function),
__metadata("design:paramtypes", [MouseEvent]),
__metadata("design:returntype", void 0)
], TableViewEditor.prototype, "handleCellMouseUp", null);
__decorate([
autobind,
__metadata("design:type", Function),
__metadata("design:paramtypes", [MouseEvent]),
__metadata("design:returntype", void 0)
], TableViewEditor.prototype, "handleCellMouseClick", null);
__decorate([
autobind,
__metadata("design:type", Function),
__metadata("design:paramtypes", []),
__metadata("design:returntype", void 0)
], TableViewEditor.prototype, "handleMergeCell", null);
__decorate([
autobind,
__metadata("design:type", Function),
__metadata("design:paramtypes", [Object]),
__metadata("design:returntype", void 0)
], TableViewEditor.prototype, "handleRowMouseDown", null);
__decorate([
autobind,
__metadata("design:type", Function),
__metadata("design:paramtypes", [MouseEvent]),
__metadata("design:returntype", void 0)
], TableViewEditor.prototype, "handleRowMouseMove", null);
__decorate([
autobind,
__metadata("design:type", Function),
__metadata("design:paramtypes", [MouseEvent]),
__metadata("design:returntype", void 0)
], TableViewEditor.prototype, "handleRowMouseUp", null);
__decorate([
autobind,
__metadata("design:type", Function),
__metadata("design:paramtypes", [Object]),
__metadata("design:returntype", void 0)
], TableViewEditor.prototype, "handleColMouseDown", null);
__decorate([
autobind,
__metadata("design:type", Function),
__metadata("design:paramtypes", [MouseEvent]),
__metadata("design:returntype", void 0)
], TableViewEditor.prototype, "handleColMouseMove", null);
__decorate([
autobind,
__metadata("design:type", Function),
__metadata("design:paramtypes", [MouseEvent]),
__metadata("design:returntype", void 0)
], TableViewEditor.prototype, "handleColMouseUp", null);
__decorate([
autobind,
__metadata("design:type", Function),
__metadata("design:paramtypes", [MouseEvent]),
__metadata("design:returntype", void 0)
], TableViewEditor.prototype, "handleLineClick", null);
return TableViewEditor;
}(React.Component));
export { TableViewEditor };

View File

@ -0,0 +1,3 @@
import type { ActionTypeNode } from 'amis-editor-comp/dist/renderers/event-action';
declare const ACTION_TYPE_TREE: ActionTypeNode[];
export default ACTION_TYPE_TREE;

View File

@ -0,0 +1,178 @@
// 表单类动作
var formActions = [
{
actionLabel: '提交',
actionType: 'submit',
description: '提交表单数据至数据源'
},
{
actionLabel: '清空',
actionType: 'clear',
description: '清空表单数据'
},
{
actionLabel: '重置',
actionType: 'reset',
description: '重置表单数据'
},
{
actionLabel: '校验',
actionType: 'validate',
description: '校验表单数据'
}
];
// 页面类动作
var pageActions = [
{
actionLabel: '打开页面',
actionType: 'openPage',
description: '打开/跳转至指定页面'
},
{
actionLabel: '刷新页面',
actionType: 'refresh',
description: '触发浏览器刷新页面'
},
{
actionLabel: '回退',
actionType: 'goBack',
description: '浏览器回退'
}
];
// 弹框类动作
var dialogActions = [
{
actionLabel: '打开弹窗',
actionType: 'dialog',
description: '打开弹框,弹窗内支持复杂的交互设计'
},
{
actionLabel: '关闭弹窗',
actionType: 'closeDialog',
description: '关闭当前弹窗' // 或者关闭指定弹窗
},
{
actionLabel: '打开抽屉',
actionType: 'drawer',
description: '打开抽屉,抽屉内支持复杂的交互设计'
},
{
actionLabel: '关闭抽屉',
actionType: 'closeDrawer',
description: '关闭当前抽屉' // 或者关闭指定抽屉
},
// 暂时下掉,看后面具体设计
// {
// actionLabel: '打开提示对话框',
// actionType: 'alert',
// description: '弹个提示对话框'
// },
// {
// actionLabel: '打开确认对话框',
// actionType: 'confirm',
// description: '弹个确认对话框'
// },
{
actionLabel: '消息提醒',
actionType: 'toast',
description: '弹出消息提醒'
}
];
// 服务类动作
var serviceActions = [
{
actionLabel: '发送请求',
actionType: 'ajax',
description: '配置并发送API请求'
},
{
actionLabel: '下载文件',
actionType: 'download',
description: '触发下载文件'
}
];
var ACTION_TYPE_TREE = [
{
actionLabel: '页面',
actionType: 'page',
children: pageActions
},
{
actionLabel: '弹框消息',
actionType: 'form',
children: dialogActions
},
{
actionLabel: '表单',
actionType: 'form',
children: formActions
},
{
actionLabel: '服务',
actionType: 'service',
children: serviceActions
},
{
actionLabel: '组件',
actionType: 'cmpt',
children: [
{
actionLabel: '刷新',
actionType: 'reload',
description: '请求并重新加载所选组件的数据'
},
{
actionLabel: '显示',
actionType: 'show',
description: '显示所选的组件'
},
{
actionLabel: '隐藏',
actionType: 'hidden',
description: '隐藏所选的组件'
},
{
actionLabel: '启用',
actionType: 'enabled',
description: '启用所选的组件'
},
{
actionLabel: '禁用',
actionType: 'disabled',
description: '禁用所选的组件'
},
{
actionLabel: '变量赋值',
actionType: 'setValue',
description: '修改所选组件的数据值'
},
{
actionLabel: '组件特性动作',
actionType: 'component',
description: '触发所选组件的特性动作'
}
]
},
// {
// actionLabel: '广播',
// actionType: 'broadcast',
// description: '发送广播事件'
// },
{
actionLabel: '自定义JS',
actionType: 'custom',
description: '通过JavaScript自定义动作逻辑'
},
{
actionLabel: '其他',
actionType: 'others',
children: [
{
actionLabel: '复制内容',
actionType: 'copy',
description: '复制文本内容至粘贴板'
}
]
}
];
export default ACTION_TYPE_TREE;

View File

@ -0,0 +1,13 @@
import type { ActionConfigItemsMap } from 'amis-editor-comp/dist/renderers/event-action';
export declare const getComboWrapper: (items: any, multiple?: boolean) => {
type: string;
name: string;
multiple: boolean;
strictMode: boolean;
items: any[];
};
/**
* map
* @param manager
*/
export declare function getActionConfigItemsMap(manager: any): ActionConfigItemsMap;

View File

@ -0,0 +1,117 @@
import { __assign } from "tslib";
import React from 'react';
import { Button } from 'amis';
import { defaultValue, getSchemaTpl } from 'amis-editor-core';
export var getComboWrapper = function (items, multiple) {
if (multiple === void 0) { multiple = false; }
return ({
type: 'combo',
name: 'args',
// label: '动作参数',
multiple: multiple,
strictMode: false,
items: Array.isArray(items) ? items : [items]
});
};
/**
* 获取动作配置项map
* @param manager
*/
export function getActionConfigItemsMap(manager) {
return {
ajax: {
config: ['api'],
desc: function (info) {
var _a, _b, _c, _d;
return (React.createElement("div", null,
"\u53D1\u9001",
React.createElement("span", { className: "variable-right variable-left" }, (_b = (_a = info === null || info === void 0 ? void 0 : info.args) === null || _a === void 0 ? void 0 : _a.api) === null || _b === void 0 ? void 0 : _b.method),
"\u8BF7\u6C42\uFF1A",
React.createElement("span", { className: "variable-left" }, (_d = (_c = info === null || info === void 0 ? void 0 : info.args) === null || _c === void 0 ? void 0 : _c.api) === null || _d === void 0 ? void 0 : _d.url)));
},
schema: {
type: 'wrapper',
style: { padding: '0 0 0 32px' },
body: [
getComboWrapper(getSchemaTpl('apiControl', {
name: 'api'
}))
]
}
},
download: {
config: ['api'],
schema: {
type: 'wrapper',
style: { padding: '0 0 0 32px' },
body: [
getComboWrapper(getSchemaTpl('apiControl', {
name: 'api'
}))
]
}
},
dialog: {
schema: {
name: 'dialog',
label: '弹框内容',
mode: 'horizontal',
required: true,
pipeIn: defaultValue({
title: '弹框标题',
body: '<p>对,你刚刚点击了</p>'
}),
asFormItem: true,
children: function (_a) {
var value = _a.value, onChange = _a.onChange, data = _a.data;
return (React.createElement(Button, { size: "sm", className: "action-btn-width", onClick: function () {
return manager.openSubEditor({
title: '配置弹框内容',
value: __assign({ type: 'dialog' }, value),
onChange: function (value) { return onChange(value); }
});
}, block: true }, "\u53BB\u914D\u7F6E"));
}
}
},
drawer: {
schema: {
name: 'drawer',
label: '抽屉内容',
mode: 'horizontal',
required: true,
pipeIn: defaultValue({
title: '弹框标题',
body: '<p>对,你刚刚点击了</p>'
}),
asFormItem: true,
children: function (_a) {
var value = _a.value, onChange = _a.onChange, data = _a.data;
return (React.createElement(Button, { size: "sm", className: "action-btn-width", onClick: function () {
return manager.openSubEditor({
title: '配置抽出式弹框内容',
value: __assign({ type: 'drawer' }, value),
onChange: function (value) { return onChange(value); }
});
}, block: true }, "\u53BB\u914D\u7F6E"));
}
}
},
link: {
config: ['link', 'params'],
desc: function (info) {
return (React.createElement("div", null,
"\u6253\u5F00",
React.createElement("span", { className: "variable-left variable-right" }, info === null || info === void 0 ? void 0 : info.__pageName),
"\u9875\u9762"));
},
schema: getComboWrapper([
{
type: 'wrapper',
className: 'p-none',
body: [getSchemaTpl('app-page'), getSchemaTpl('app-page-args')]
}
])
}
};
}

View File

@ -0,0 +1,154 @@
export * from 'amis-editor-core';
import './tpl/index';
import './plugin/Others/Action';
import './plugin/Others/TableCell';
import './plugin/Form/InputArray';
import './plugin/Form/ButtonGroupSelect';
import './plugin/Form/ButtonToolbar';
import './plugin/Form/ChainedSelect';
import './plugin/Form/Checkbox';
import './plugin/Form/Checkboxes';
import './plugin/Form/InputCity';
import './plugin/Form/InputColor';
import './plugin/Form/Combo';
import './plugin/Form/ConditionBuilder';
import './plugin/Form/Control';
import './plugin/Form/InputDate';
import './plugin/Form/InputDateRange';
import './plugin/Form/InputDateTime';
import './plugin/Form/InputDateTimeRange';
import './plugin/Form/DiffEditor';
import './plugin/Form/CodeEditor';
import './plugin/Form/InputEmail';
import './plugin/Form/FieldSet';
import './plugin/Form/InputFile';
import './plugin/Form/Form';
import './plugin/Form/Formula';
import './plugin/Form/Group';
import './plugin/Form/Hidden';
import './plugin/Form/InputImage';
import './plugin/Form/InputGroup';
import './plugin/Form/Item';
import './plugin/Form/ListSelect';
import './plugin/Form/LocationPicker';
import './plugin/Form/UUID';
import './plugin/Form/MatrixCheckboxes';
import './plugin/Form/InputMonth';
import './plugin/Form/InputMonthRange';
import './plugin/Form/NestedSelect';
import './plugin/Form/InputNumber';
import './plugin/Form/InputPassword';
import './plugin/Form/InputQuarter';
import './plugin/Form/InputQuarterRange';
import './plugin/Form/Picker';
import './plugin/Form/Radios';
import './plugin/Form/InputRange';
import './plugin/Form/InputRating';
import './plugin/Form/InputRepeat';
import './plugin/Form/InputRichText';
import './plugin/Form/Select';
import './plugin/Form/Static';
import './plugin/Form/InputSubForm';
import './plugin/Form/Switch';
import './plugin/Form/InputTable';
import './plugin/Form/InputTag';
import './plugin/Form/InputText';
import './plugin/Form/TabsTransfer';
import './plugin/Form/Textarea';
import './plugin/Form/Transfer';
import './plugin/Form/InputTime';
import './plugin/Form/InputTimeRange';
import './plugin/Form/InputTree';
import './plugin/Form/TreeSelect';
import './plugin/Form/InputURL';
import './plugin/Form/InputYear';
import './plugin/Form/InputYearRange';
import './plugin/Form/InputExcel';
import './plugin/Form/InputKV';
import './plugin/Alert';
import './plugin/Audio';
import './plugin/Avatar';
import './plugin/Button';
import './plugin/ButtonGroup';
import './plugin/ButtonToolbar';
import './plugin/Breadcrumb';
import './plugin/Card';
import './plugin/Cards';
import './plugin/Carousel';
import './plugin/Chart';
import './plugin/Collapse';
import './plugin/CollapseGroup';
import './plugin/Container';
import './plugin/CRUD';
import './plugin/Custom';
import './plugin/CustomRegion';
import './plugin/Date';
import './plugin/Datetime';
import './plugin/Dialog';
import './plugin/Divider';
import './plugin/Drawer';
import './plugin/DropDownButton';
import './plugin/Each';
import './plugin/Flex';
import './plugin/Grid';
import './plugin/HBox';
import './plugin/IFrame';
import './plugin/Image';
import './plugin/Images';
import './plugin/Json';
import './plugin/Link';
import './plugin/List';
import './plugin/ListItem';
import './plugin/Log';
import './plugin/Mapping';
import './plugin/Markdown';
import './plugin/Nav';
import './plugin/Operation';
import './plugin/Page';
import './plugin/Pagination';
import './plugin/Panel';
import './plugin/Plain';
import './plugin/Progress';
import './plugin/Property';
import './plugin/QRCode';
import './plugin/Reset';
import './plugin/Service';
import './plugin/Status';
import './plugin/Steps';
import './plugin/Sparkline';
import './plugin/Submit';
import './plugin/Table';
import './plugin/Tabs';
import './plugin/Tasks';
import './plugin/Time';
import './plugin/Tpl';
import './plugin/AnchorNav';
import './plugin/Video';
import './plugin/Wizard';
import './plugin/Wrapper';
import './plugin/TooltipWrapper';
import './plugin/TableView';
import './plugin/CodeView';
import './plugin/WebComponent';
import { GridPlugin } from './plugin/Grid';
import './renderer/OptionControl';
import './renderer/APIControl';
import './renderer/ValidationControl';
import './renderer/ValidationItem';
import './renderer/SwitchMoreControl';
import './renderer/StatusControl';
import './renderer/FormulaControl';
import './renderer/DateShortCutControl';
import './renderer/BadgeControl';
import './renderer/style-control/BoxModel';
import './renderer/style-control/Font';
import './renderer/style-control/Border';
import './renderer/style-control/BoxShadow';
import './renderer/style-control/Background';
import './renderer/style-control/Display';
import './renderer/RangePartsControl';
import './renderer/DataBindingControl';
import './renderer/DataMappingControl';
import './renderer/DataPickerControl';
export * from './component/BaseControl';
export { GridPlugin };

View File

@ -0,0 +1,154 @@
export * from 'amis-editor-core';
import './tpl/index';
import './plugin/Others/Action';
import './plugin/Others/TableCell';
import './plugin/Form/InputArray';
import './plugin/Form/ButtonGroupSelect';
import './plugin/Form/ButtonToolbar';
import './plugin/Form/ChainedSelect';
import './plugin/Form/Checkbox';
import './plugin/Form/Checkboxes';
import './plugin/Form/InputCity';
import './plugin/Form/InputColor';
import './plugin/Form/Combo';
import './plugin/Form/ConditionBuilder';
import './plugin/Form/Control';
import './plugin/Form/InputDate';
import './plugin/Form/InputDateRange';
import './plugin/Form/InputDateTime';
import './plugin/Form/InputDateTimeRange';
import './plugin/Form/DiffEditor';
import './plugin/Form/CodeEditor';
import './plugin/Form/InputEmail';
import './plugin/Form/FieldSet';
import './plugin/Form/InputFile';
import './plugin/Form/Form';
import './plugin/Form/Formula';
import './plugin/Form/Group';
import './plugin/Form/Hidden';
import './plugin/Form/InputImage';
import './plugin/Form/InputGroup';
import './plugin/Form/Item';
import './plugin/Form/ListSelect';
import './plugin/Form/LocationPicker';
import './plugin/Form/UUID';
import './plugin/Form/MatrixCheckboxes';
import './plugin/Form/InputMonth';
import './plugin/Form/InputMonthRange';
import './plugin/Form/NestedSelect';
import './plugin/Form/InputNumber';
import './plugin/Form/InputPassword';
import './plugin/Form/InputQuarter';
import './plugin/Form/InputQuarterRange';
import './plugin/Form/Picker';
import './plugin/Form/Radios';
import './plugin/Form/InputRange';
import './plugin/Form/InputRating';
import './plugin/Form/InputRepeat';
import './plugin/Form/InputRichText';
import './plugin/Form/Select';
import './plugin/Form/Static';
import './plugin/Form/InputSubForm';
import './plugin/Form/Switch';
import './plugin/Form/InputTable';
import './plugin/Form/InputTag';
import './plugin/Form/InputText';
import './plugin/Form/TabsTransfer';
import './plugin/Form/Textarea';
import './plugin/Form/Transfer';
import './plugin/Form/InputTime';
import './plugin/Form/InputTimeRange';
import './plugin/Form/InputTree';
import './plugin/Form/TreeSelect';
import './plugin/Form/InputURL';
import './plugin/Form/InputYear';
import './plugin/Form/InputYearRange';
import './plugin/Form/InputExcel';
import './plugin/Form/InputKV';
import './plugin/Alert';
import './plugin/Audio';
import './plugin/Avatar';
import './plugin/Button';
import './plugin/ButtonGroup';
import './plugin/ButtonToolbar';
import './plugin/Breadcrumb';
import './plugin/Card';
import './plugin/Cards';
import './plugin/Carousel';
import './plugin/Chart';
import './plugin/Collapse';
import './plugin/CollapseGroup';
import './plugin/Container';
import './plugin/CRUD';
import './plugin/Custom';
import './plugin/CustomRegion';
import './plugin/Date';
import './plugin/Datetime';
import './plugin/Dialog';
import './plugin/Divider';
import './plugin/Drawer';
import './plugin/DropDownButton';
import './plugin/Each';
import './plugin/Flex';
import './plugin/Grid';
import './plugin/HBox';
import './plugin/IFrame';
import './plugin/Image';
import './plugin/Images';
import './plugin/Json';
import './plugin/Link';
import './plugin/List';
import './plugin/ListItem';
import './plugin/Log';
import './plugin/Mapping';
import './plugin/Markdown';
import './plugin/Nav';
import './plugin/Operation';
import './plugin/Page';
import './plugin/Pagination';
import './plugin/Panel';
import './plugin/Plain';
import './plugin/Progress';
import './plugin/Property';
import './plugin/QRCode';
import './plugin/Reset';
import './plugin/Service';
import './plugin/Status';
import './plugin/Steps';
import './plugin/Sparkline';
import './plugin/Submit';
import './plugin/Table';
import './plugin/Tabs';
import './plugin/Tasks';
import './plugin/Time';
import './plugin/Tpl';
import './plugin/AnchorNav';
import './plugin/Video';
import './plugin/Wizard';
import './plugin/Wrapper';
import './plugin/TooltipWrapper';
import './plugin/TableView';
import './plugin/CodeView';
import './plugin/WebComponent';
import { GridPlugin } from './plugin/Grid';
import './renderer/OptionControl';
import './renderer/APIControl';
import './renderer/ValidationControl';
import './renderer/ValidationItem';
import './renderer/SwitchMoreControl';
import './renderer/StatusControl';
import './renderer/FormulaControl';
import './renderer/DateShortCutControl';
import './renderer/BadgeControl';
import './renderer/style-control/BoxModel';
import './renderer/style-control/Font';
import './renderer/style-control/Border';
import './renderer/style-control/BoxShadow';
import './renderer/style-control/Background';
import './renderer/style-control/Display';
import './renderer/RangePartsControl';
import './renderer/DataBindingControl';
import './renderer/DataMappingControl';
import './renderer/DataPickerControl';
export * from './component/BaseControl';
export { GridPlugin };

View File

@ -0,0 +1,22 @@
import { BaseEventContext, BasePlugin } from 'amis-editor-core';
import { SchemaObject } from 'amis/lib/Schema';
export declare class AlertPlugin extends BasePlugin {
rendererName: string;
$schema: string;
name: string;
isBaseComponent: boolean;
description: string;
docLink: string;
icon: string;
scaffold: SchemaObject;
previewSchema: any;
regions: {
key: string;
label: string;
placeholder: string;
}[];
notRenderFormZone: boolean;
panelTitle: string;
panelJustify: boolean;
panelBodyCreator: (context: BaseEventContext) => any;
}

View File

@ -0,0 +1,104 @@
import { __assign, __extends } from "tslib";
import { registerEditorPlugin } from 'amis-editor-core';
import { BasePlugin } from 'amis-editor-core';
import { getSchemaTpl } from 'amis-editor-core';
var AlertPlugin = /** @class */ (function (_super) {
__extends(AlertPlugin, _super);
function AlertPlugin() {
var _this = _super !== null && _super.apply(this, arguments) || this;
// 关联渲染器名字
_this.rendererName = 'alert';
_this.$schema = '/schemas/AlertSchema.json';
// 组件名称
_this.name = '提示';
_this.isBaseComponent = true;
_this.description = '用来做文字特殊提示,分为四类:提示类、成功类、警告类和危险类。可结合 <code>visibleOn</code> 用来做错误信息提示。';
_this.docLink = '/amis/zh-CN/components/alert';
_this.icon = 'fa fa-exclamation-circle';
_this.scaffold = {
type: 'alert',
body: {
type: 'tpl',
tpl: '提示内容',
inline: false
},
level: 'info'
};
_this.previewSchema = __assign(__assign({}, _this.scaffold), { className: 'text-left', showCloseButton: true });
// 普通容器类渲染器配置
_this.regions = [{ key: 'body', label: '内容区', placeholder: '提示内容' }];
_this.notRenderFormZone = true;
_this.panelTitle = '提示';
_this.panelJustify = true;
_this.panelBodyCreator = function (context) {
return getSchemaTpl('tabs', [
{
title: '属性',
body: getSchemaTpl('collapseGroup', [
{
title: '基本',
body: [
{
label: '类型',
name: 'level',
type: 'select',
options: [
{
label: '提示',
value: 'info'
},
{
label: '成功',
value: 'success'
},
{
label: '警告',
value: 'warning'
},
{
label: '严重',
value: 'danger'
}
]
},
getSchemaTpl('label', {
name: 'title'
}),
getSchemaTpl('switch', {
label: '可关闭',
name: 'showCloseButton'
}),
{
type: 'ae-Switch-More',
mode: 'normal',
name: 'showIcon',
label: '图标',
hiddenOnDefault: !context.schema.icon,
formType: 'extend',
form: {
body: [
getSchemaTpl('icon', {
label: '自定义图标'
})
]
}
}
]
},
getSchemaTpl('status')
])
},
{
title: '外观',
body: getSchemaTpl('collapseGroup', [
getSchemaTpl('style:classNames', { isFormItem: false })
])
}
]);
};
return _this;
}
return AlertPlugin;
}(BasePlugin));
export { AlertPlugin };
registerEditorPlugin(AlertPlugin);

View File

@ -0,0 +1,48 @@
import { BasePlugin, VRendererConfig } from 'amis-editor-core';
export declare class AnchorNavPlugin extends BasePlugin {
rendererName: string;
$schema: string;
name: string;
isBaseComponent: boolean;
description: string;
docLink: string;
tags: string[];
icon: string;
scaffold: {
type: string;
links: {
title: string;
href: string;
body: {
type: string;
tpl: string;
inline: boolean;
}[];
}[];
};
previewSchema: {
type: string;
links: {
title: string;
href: string;
body: {
type: string;
tpl: string;
inline: boolean;
}[];
}[];
};
panelTitle: string;
panelJustify: boolean;
panelBody: any[];
patchContainers: string[];
vRendererConfig: VRendererConfig;
wrapperProps: {
unmountOnExit: boolean;
mountOnEnter: boolean;
};
sectionWrapperResolve: (dom: HTMLElement) => HTMLElement;
overrides: {
render(this: any): any;
};
}

View File

@ -0,0 +1,286 @@
import { __assign, __extends } from "tslib";
import React from 'react';
import { registerEditorPlugin } from 'amis-editor-core';
import { getSchemaTpl } from 'amis-editor-core';
import { BasePlugin } from 'amis-editor-core';
import { VRenderer } from 'amis-editor-core';
import { mapReactElement } from 'amis-editor-core';
import findIndex from 'lodash/findIndex';
import { RegionWrapper as Region } from 'amis-editor-core';
import { AnchorNavSection } from 'amis-ui';
var AnchorNavPlugin = /** @class */ (function (_super) {
__extends(AnchorNavPlugin, _super);
function AnchorNavPlugin() {
var _this = _super !== null && _super.apply(this, arguments) || this;
// 关联渲染器名字
_this.rendererName = 'anchor-nav';
_this.$schema = '/schemas/AnchorNavSchema.json';
// 组件名称
_this.name = '锚点导航';
_this.isBaseComponent = true;
_this.description = '锚点导航,在多行内容展示时,可以将内容用锚点导航分组的形式展示,点击导航菜单可以定位到对应内容区域。';
_this.docLink = '/amis/zh-CN/components/anchor-nav';
_this.tags = ['容器'];
_this.icon = 'fa fa-link';
_this.scaffold = {
type: 'anchor-nav',
links: [
{
title: '锚点1',
href: '1',
body: [
{
type: 'tpl',
tpl: '这里是锚点内容1',
inline: false
}
]
},
{
title: '锚点2',
href: '2',
body: [
{
type: 'tpl',
tpl: '这里是锚点内容2',
inline: false
}
]
},
{
title: '锚点3',
href: '3',
body: [
{
type: 'tpl',
tpl: '这里是锚点内容3',
inline: false
}
]
}
]
};
_this.previewSchema = __assign({}, _this.scaffold);
_this.panelTitle = '锚点导航';
_this.panelJustify = true;
_this.panelBody = [
getSchemaTpl('tabs', [
{
title: '属性',
body: getSchemaTpl('collapseGroup', [
{
title: '基本',
body: [
getSchemaTpl('combo-container', {
type: 'combo',
name: 'links',
label: '锚点设置',
mode: 'normal',
multiple: true,
draggable: true,
minLength: 1,
addButtonText: '添加锚点',
items: [
{
type: 'input-text',
name: 'title',
required: true,
placeholder: '请输入锚点标题'
}
],
scaffold: {
title: '锚点',
href: '',
body: [
{
type: 'tpl',
tpl: '这里是锚点内容',
inline: false
}
]
},
draggableTip: '',
onChange: function (value, oldValue, model, form) {
var active = form.data.active;
var isInclude = value.findIndex(function (link) { return link.href === active; }) > -1;
form.setValues({
active: isInclude ? active : value[0].href
});
},
pipeOut: function (value) {
var hrefs = value.map(function (item) { return item.href; });
var findMinCanUsedKey = function (keys, max) {
for (var i = 1; i <= max; i++) {
if (!keys.includes(String(i))) {
return String(i);
}
}
};
value.forEach(function (item) {
if (!item.href) {
var key = findMinCanUsedKey(hrefs, value.length);
item.href = key;
item.title = "\u951A\u70B9".concat(key);
item.body[0].tpl = "\u8FD9\u91CC\u662F\u951A\u70B9\u5185\u5BB9".concat(key);
}
});
return value;
},
deleteBtn: {
icon: 'fa fa-trash'
}
}),
{
name: 'active',
type: 'select',
label: '默认定位区域',
source: '${links}',
labelField: 'title',
valueField: 'href',
value: '1'
}
]
}
])
},
{
title: '外观',
body: getSchemaTpl('collapseGroup', [
{
title: '基本',
body: [
{
type: 'button-group-select',
name: 'direction',
label: '导航布局',
value: 'vertical',
options: [
{
label: '水平',
value: 'horizontal'
},
{
label: '垂直',
value: 'vertical'
}
]
}
]
},
getSchemaTpl('style:classNames', {
isFormItem: false,
schema: [
getSchemaTpl('className', {
name: 'linkClassName',
label: '导航'
}),
getSchemaTpl('className', {
name: 'sectionClassName',
label: '区域内容'
})
]
})
])
}
])
];
_this.patchContainers = ['anchor-nav.body'];
_this.vRendererConfig = {
regions: {
body: {
key: 'body',
label: '内容区',
renderMethod: 'renderBody',
renderMethodOverride: function (regions, insertRegion) {
return function () {
var args = [];
for (var _i = 0; _i < arguments.length; _i++) {
args[_i] = arguments[_i];
}
var info = this.props.$$editor;
var dom = this.super.apply(this, args);
if (info && !this.props.children) {
return insertRegion(this, dom, regions, info, info.plugin.manager);
}
return dom;
};
}
}
},
panelTitle: '内容区域',
panelJustify: true,
panelBody: [
getSchemaTpl('tabs', [
{
title: '属性',
body: [
getSchemaTpl('collapseGroup', [
{
title: '基本',
body: [
{
name: 'title',
label: '标题',
type: 'input-text',
required: true
}
]
}
])
]
},
{
title: '外观',
body: [
getSchemaTpl('collapseGroup', [
{
title: 'CSS 类名',
body: [getSchemaTpl('className')]
}
])
]
}
])
]
};
_this.wrapperProps = {
unmountOnExit: true,
mountOnEnter: true
};
_this.sectionWrapperResolve = function (dom) { return dom.parentElement; };
_this.overrides = {
render: function () {
var _this = this;
var dom = this.super();
if (!this.renderSection && this.props.$$editor && dom) {
var links_1 = this.props.links;
return mapReactElement(dom, function (item) {
var _a, _b;
if (item.type === AnchorNavSection && item.props.$$id) {
var id_1 = item.props.$$id;
var index = findIndex(links_1, function (link) { return link.$$id === id_1; });
var info = _this.props.$$editor;
var plugin = info.plugin;
if (~index) {
var region = (_b = (_a = plugin.vRendererConfig) === null || _a === void 0 ? void 0 : _a.regions) === null || _b === void 0 ? void 0 : _b.body;
if (!region) {
return item;
}
return React.cloneElement(item, {
children: (React.createElement(VRenderer, { key: id_1, type: info.type, plugin: info.plugin, renderer: info.renderer, "$schema": "/schemas/SectionSchema.json", hostId: info.id, memberIndex: index, name: "".concat(item.props.title || "\u951A\u70B9\u5185\u5BB9".concat(index + 1)), id: id_1, draggable: false, removable: false, wrapperResolve: plugin.sectionWrapperResolve, schemaPath: "".concat(info.schemaPath, "/anchor-nav/").concat(index), path: "".concat(_this.props.$path, "/").concat(index), data: _this.props.data },
React.createElement(Region, { key: region.key, preferTag: region.preferTag, name: region.key, label: region.label, regionConfig: region, placeholder: region.placeholder, editorStore: plugin.manager.store, manager: plugin.manager, children: item.props.children, wrapperResolve: region.wrapperResolve, rendererName: info.renderer.name })))
});
}
}
return item;
});
}
return dom;
}
};
return _this;
}
return AnchorNavPlugin;
}(BasePlugin));
export { AnchorNavPlugin };
registerEditorPlugin(AnchorNavPlugin);

View File

@ -0,0 +1,22 @@
import { BaseEventContext, BasePlugin } from 'amis-editor-core';
export declare class AudioPlugin extends BasePlugin {
rendererName: string;
$schema: string;
name: string;
isBaseComponent: boolean;
description: string;
tags: string[];
icon: string;
scaffold: {
type: string;
autoPlay: boolean;
src: string;
};
previewSchema: {
type: string;
autoPlay: boolean;
src: string;
};
panelTitle: string;
panelBodyCreator: (context: BaseEventContext) => any[];
}

View File

@ -0,0 +1,148 @@
import { __assign, __extends } from "tslib";
import { registerEditorPlugin } from 'amis-editor-core';
import { BasePlugin } from 'amis-editor-core';
import { defaultValue, getSchemaTpl } from 'amis-editor-core';
var AudioPlugin = /** @class */ (function (_super) {
__extends(AudioPlugin, _super);
function AudioPlugin() {
var _this = _super !== null && _super.apply(this, arguments) || this;
// 关联渲染器名字
_this.rendererName = 'audio';
_this.$schema = '/schemas/AudioSchema.json';
// 组件名称
_this.name = '音频';
_this.isBaseComponent = true;
_this.description = '音频控件,可以用来播放各种音频文件。';
_this.tags = ['功能'];
_this.icon = 'fa fa-music';
_this.scaffold = {
type: 'audio',
autoPlay: false,
src: ''
};
_this.previewSchema = __assign({}, _this.scaffold);
_this.panelTitle = '音频';
_this.panelBodyCreator = function (context) {
var isUnderField = /\/field\/\w+$/.test(context.path);
return [
getSchemaTpl('tabs', [
{
title: '常规',
body: [
isUnderField
? {
type: 'tpl',
inline: false,
className: 'text-info text-sm',
tpl: '<p>当前为字段内容节点配置,选择上层还有更多的配置。</p>'
}
: null,
{
name: 'src',
type: 'input-text',
label: '音频地址',
description: '支持获取变量如:<code>\\${audioSrc}</code>'
},
{
type: 'select',
name: 'rates',
label: '音频倍速',
description: '加速范围在0.1到16之间',
multiple: true,
pipeIn: function (value) {
return Array.isArray(value) ? value.join(',') : [];
},
pipeOut: function (value) {
if (value && value.length) {
var rates = value.split(',');
rates = rates
.filter(function (x) {
return Number(x) && Number(x) > 0 && Number(x) <= 16;
})
.map(function (x) { return Number(Number(x).toFixed(1)); });
return Array.from(new Set(rates));
}
else {
return [];
}
},
options: ['0.5', '1', '1.5', '2', '2.5', '3', '3.5', '4']
},
{
name: 'controls',
type: 'select',
label: '内部控件',
multiple: true,
extractValue: true,
joinValues: false,
options: [
{
label: '倍速',
value: 'rates'
},
{
label: '播放',
value: 'play'
},
{
label: '时间',
value: 'time'
},
{
label: '进度',
value: 'process'
},
{
label: '音量',
value: 'volume'
}
],
pipeIn: defaultValue([
'rates',
'play',
'time',
'process',
'volume'
]),
labelRemark: {
trigger: 'click',
className: 'm-l-xs',
rootClose: true,
content: '选择倍速后,还需要在常规选择栏中配置倍速',
placement: 'left'
}
},
getSchemaTpl('switch', {
name: 'autoPlay',
label: '自动播放'
}),
getSchemaTpl('switch', {
name: 'loop',
label: '循环播放'
})
]
},
{
title: '外观',
body: [
getSchemaTpl('className'),
getSchemaTpl('switch', {
name: 'inline',
label: '内联模式',
pipeIn: defaultValue(true)
})
]
},
{
title: '显隐',
body: [getSchemaTpl('ref'), getSchemaTpl('visible')]
}
])
];
};
return _this;
}
return AudioPlugin;
}(BasePlugin));
export { AudioPlugin };
registerEditorPlugin(AudioPlugin);

View File

@ -0,0 +1,27 @@
import { BaseEventContext, BasePlugin } from 'amis-editor-core';
export declare class AvatarPlugin extends BasePlugin {
rendererName: string;
$schema: string;
name: string;
isBaseComponent: boolean;
icon: string;
description: string;
docLink: string;
tags: string[];
scaffold: {
type: string;
showtype: string;
icon: string;
fit: string;
style: {
width: number;
height: number;
borderRadius: number;
};
};
previewSchema: any;
notRenderFormZone: boolean;
panelJustify: boolean;
panelTitle: string;
panelBodyCreator: (context: BaseEventContext) => any;
}

View File

@ -0,0 +1,299 @@
import { __assign, __extends } from "tslib";
/**
* @file 头像
*/
import { registerEditorPlugin } from 'amis-editor-core';
import { BasePlugin } from 'amis-editor-core';
import { getSchemaTpl, defaultValue } from 'amis-editor-core';
import { tipedLabel } from '../component/BaseControl';
var DefaultSize = 40;
var DefaultBorderRadius = 20;
var widthOrheightPipeIn = function (curValue, rest) { var _a, _b; return curValue ? curValue : (_b = (_a = rest.data) === null || _a === void 0 ? void 0 : _a.size) !== null && _b !== void 0 ? _b : DefaultSize; };
var AvatarPlugin = /** @class */ (function (_super) {
__extends(AvatarPlugin, _super);
function AvatarPlugin() {
var _this = _super !== null && _super.apply(this, arguments) || this;
// 关联渲染器名字
_this.rendererName = 'avatar';
_this.$schema = '/schemas/AvatarSchema.json';
// 组件名称
_this.name = '头像';
_this.isBaseComponent = true;
_this.icon = 'fa fa-user';
_this.description = '用户头像';
_this.docLink = '/amis/zh-CN/components/avatar';
_this.tags = ['其他'];
_this.scaffold = {
type: 'avatar',
showtype: 'image',
icon: '',
fit: 'cover',
style: {
width: DefaultSize,
height: DefaultSize,
borderRadius: DefaultBorderRadius
}
};
_this.previewSchema = __assign({}, _this.scaffold);
_this.notRenderFormZone = true;
_this.panelJustify = true;
_this.panelTitle = '头像';
_this.panelBodyCreator = function (context) {
return getSchemaTpl('tabs', [
{
title: '属性',
body: [
getSchemaTpl('collapseGroup', [
{
className: 'p-none',
title: '常用',
body: [
// 如果同时存在 src、text 和 icon会优先用 src、接着 text、最后 icon
{
type: 'button-group-select',
label: '内容',
name: 'showtype',
tiled: true,
inputClassName: 'items-center',
options: [
{ label: '图片', value: 'image' },
{ label: '图标', value: 'icon' },
{ label: '文字', value: 'text' }
],
pipeIn: function (value, form) {
var _a, _b;
if (value) {
return value;
}
var showType = ((_a = form.data) === null || _a === void 0 ? void 0 : _a.text)
? 'text'
: ((_b = form.data) === null || _b === void 0 ? void 0 : _b.icon)
? 'icon'
: 'image';
// 使用setTimeout跳过react更新检测推进showtype更新
setTimeout(function () { return form.setValueByName('showtype', showType); });
return showType;
},
onChange: function (value, origin, item, form) {
form.setValues({
src: undefined,
fit: 'cover',
text: undefined,
gap: 4,
icon: ''
});
}
},
{
type: 'container',
className: 'ae-ExtendMore mb-3',
body: [
// 图标
{
label: '图标',
name: 'icon',
type: 'icon-picker',
className: 'fix-icon-picker-overflow',
visibleOn: 'data.showtype === "icon"'
},
// 图片
getSchemaTpl('valueFormula', {
rendererSchema: {
type: 'input-url'
},
name: 'src',
label: '链接',
visibleOn: 'data.showtype === "image"'
}),
{
label: tipedLabel('填充方式', '图片大小与控件大小不一致的图片处理方式'),
name: 'fit',
type: 'select',
pipeIn: defaultValue('cover'),
options: [
{
label: '等比例裁剪长边',
value: 'cover'
},
{
label: '等比例留空短边',
value: 'contain'
},
{
label: '拉伸图片填满',
value: 'fill'
},
{
label: '按原尺寸裁剪',
value: 'none'
}
],
visibleOn: 'data.showtype === "image"'
},
// 文字
{
label: '文字',
name: 'text',
type: 'input-text',
pipeOut: function (value) {
return value === '' ? undefined : value;
},
visibleOn: 'data.showtype === "text"'
},
{
type: 'input-group',
name: 'gap',
value: 4,
label: tipedLabel('边框距离', '文字居中,文字过多时保持与边框最小的距离'),
body: [
{
type: 'input-number',
name: 'gap',
min: 0
},
{
type: 'tpl',
addOnclassName: 'border-0 bg-none',
tpl: 'px'
}
],
visibleOn: 'data.showtype === "text"'
}
]
},
getSchemaTpl('badge')
]
},
getSchemaTpl('status')
])
]
},
{
title: '外观',
className: 'p-none',
body: getSchemaTpl('collapseGroup', [
{
title: '基本',
body: [
{
type: 'input-number',
label: '长度',
min: 0,
name: 'style.width',
pipeIn: widthOrheightPipeIn
},
{
type: 'input-number',
label: '高度',
min: 1,
name: 'style.height',
pipeIn: widthOrheightPipeIn
},
{
type: 'input-number',
label: '圆角',
min: 0,
name: 'style.borderRadius',
pipeIn: function (curValue, rest) {
var _a, _b, _c;
if (curValue) {
return curValue;
}
// 如果是圆形说明是旧的直接设置shape为长方形后返回50%
if (((_a = rest.data) === null || _a === void 0 ? void 0 : _a.shape) === 'circle') {
rest.setValueByName('shape', 'square');
return +(((_b = rest.data) === null || _b === void 0 ? void 0 : _b.size) || DefaultSize) * 0.5;
}
return ((_c = rest.data) === null || _c === void 0 ? void 0 : _c.size) ? 0 : DefaultBorderRadius;
}
}
]
},
// 兼容旧的外观面板
{
header: '文字',
key: 'font',
body: [
{
type: 'style-font',
label: false,
name: 'style'
}
]
},
{
header: '内外边距',
key: 'box-model',
body: [
{
type: 'style-box-model',
label: false,
name: 'style'
}
]
},
{
header: '边框',
key: 'border',
body: [
{
type: 'style-border',
label: false,
name: 'style',
disableRadius: true
}
]
},
{
title: '背景',
body: [
{
type: 'style-background',
label: false,
name: 'style',
noImage: true
}
]
},
{
header: '阴影',
key: 'box-shadow',
body: [
{
type: 'style-box-shadow',
label: false,
name: 'style.boxShadow'
}
]
},
{
header: '其他',
key: 'other',
body: [
{
label: '透明度',
name: 'style.opacity',
min: 0,
max: 1,
step: 0.05,
type: 'input-range',
pipeIn: defaultValue(1),
marks: {
'0%': '0',
'50%': '0.5',
'100%': '1'
}
}
]
},
getSchemaTpl('style:classNames', { isFormItem: false })
])
}
]);
};
return _this;
}
return AvatarPlugin;
}(BasePlugin));
export { AvatarPlugin };
registerEditorPlugin(AvatarPlugin);

View File

@ -0,0 +1,27 @@
import { BasePlugin } from 'amis-editor-core';
export declare class BreadcrumbPlugin extends BasePlugin {
rendererName: string;
$schema: string;
disabledRendererPlugin: boolean;
name: string;
isBaseComponent: boolean;
icon: string;
description: string;
docLink: string;
tags: string[];
scaffold: {
type: string;
items: ({
label: string;
href: string;
icon: string;
} | {
label: string;
href?: undefined;
icon?: undefined;
})[];
};
previewSchema: any;
panelTitle: string;
panelBody: any[];
}

View File

@ -0,0 +1,110 @@
import { __assign, __extends } from "tslib";
/**
* @file 面包屑
*/
import { registerEditorPlugin } from 'amis-editor-core';
import { BasePlugin } from 'amis-editor-core';
import { getSchemaTpl } from 'amis-editor-core';
var BreadcrumbPlugin = /** @class */ (function (_super) {
__extends(BreadcrumbPlugin, _super);
function BreadcrumbPlugin() {
var _this = _super !== null && _super.apply(this, arguments) || this;
// 关联渲染器名字
_this.rendererName = 'breadcrumb';
_this.$schema = '/schemas/BreadcrumbSchema.json';
_this.disabledRendererPlugin = true;
// 组件名称
_this.name = '面包屑';
_this.isBaseComponent = true;
_this.icon = 'fa fa-list';
_this.description = '面包屑导航';
_this.docLink = '/amis/zh-CN/components/breadcrumb';
_this.tags = ['其他'];
_this.scaffold = {
type: 'breadcrumb',
items: [
{
label: '首页',
href: '/',
icon: 'fa fa-home'
},
{
label: '上级页面'
},
{
label: '<b>当前页面</b>'
}
]
};
_this.previewSchema = __assign({}, _this.scaffold);
_this.panelTitle = '面包屑';
_this.panelBody = [
getSchemaTpl('tabs', [
{
title: '常规',
body: [
{
label: '分隔符',
type: 'input-text',
name: 'separator'
},
getSchemaTpl('api', {
label: '动态数据',
name: 'source'
}),
{
label: '面包屑',
name: 'items',
type: 'combo',
multiple: true,
multiLine: true,
draggable: true,
addButtonText: '新增',
items: [
{
type: 'input-text',
placeholder: '文本',
name: 'label'
},
{
type: 'input-text',
name: 'href',
placeholder: '链接'
},
{
name: 'icon',
label: '图标',
type: 'icon-picker',
className: 'fix-icon-picker-overflow'
}
]
}
]
},
{
title: '外观',
body: [
getSchemaTpl('className'),
getSchemaTpl('className', {
name: 'itemClassName',
label: '面包屑的 CSS 类名'
}),
,
getSchemaTpl('className', {
name: 'separatorClassName',
label: '分隔符的 CSS 类名'
})
]
},
{
title: '显隐',
body: [getSchemaTpl('ref'), getSchemaTpl('visible')]
}
])
];
return _this;
}
return BreadcrumbPlugin;
}(BasePlugin));
export { BreadcrumbPlugin };
registerEditorPlugin(BreadcrumbPlugin);

View File

@ -0,0 +1,29 @@
import { BaseEventContext, BasePlugin, BasicRendererInfo, RendererInfoResolveEventContext } from 'amis-editor-core';
import { RendererAction, RendererEvent } from 'amis-editor-comp/dist/renderers/event-action';
import { SchemaObject } from 'amis/lib/Schema';
export declare class ButtonPlugin extends BasePlugin {
rendererName: string;
$schema: string;
name: string;
isBaseComponent: boolean;
description: string;
docLink: string;
tags: string[];
icon: string;
scaffold: SchemaObject;
previewSchema: any;
panelTitle: string;
events: RendererEvent[];
actions: RendererAction[];
panelJustify: boolean;
panelBodyCreator: (context: BaseEventContext) => any;
/**
*
*/
filterProps(props: any): any;
/**
* rendererName
* @param renderer
*/
getRendererInfo({ renderer, schema }: RendererInfoResolveEventContext): BasicRendererInfo | void;
}

View File

@ -0,0 +1,288 @@
import { __assign, __extends } from "tslib";
import { registerEditorPlugin } from 'amis-editor-core';
import { BasePlugin } from 'amis-editor-core';
import { defaultValue, getSchemaTpl } from 'amis-editor-core';
import { BUTTON_DEFAULT_ACTION, tipedLabel } from '../component/BaseControl';
import { getEventControlConfig } from '../util';
var ButtonPlugin = /** @class */ (function (_super) {
__extends(ButtonPlugin, _super);
function ButtonPlugin() {
var _this = _super !== null && _super.apply(this, arguments) || this;
// 关联渲染器名字
_this.rendererName = 'button';
_this.$schema = '/schemas/ActionSchema.json';
// 组件名称
_this.name = '按钮';
_this.isBaseComponent = true;
_this.description = '用来展示一个按钮,你可以配置不同的展示样式,配置不同的点击行为。';
_this.docLink = '/amis/zh-CN/components/button';
_this.tags = ['按钮'];
_this.icon = 'fa fa-square';
_this.scaffold = __assign({ type: 'button', label: '按钮' }, BUTTON_DEFAULT_ACTION);
_this.previewSchema = {
type: 'button',
label: '按钮'
};
_this.panelTitle = '按钮';
// 事件定义
_this.events = [
{
eventName: 'click',
eventLabel: '点击',
description: '点击时触发',
defaultShow: true
},
{
eventName: 'mouseenter',
eventLabel: '鼠标移入',
description: '鼠标移入时触发'
},
{
eventName: 'mouseleave',
eventLabel: '鼠标移出',
description: '鼠标移出时触发'
}
// {
// eventName: 'doubleClick',
// eventLabel: '双击',
// description: '鼠标双击事件'
// }
];
// 动作定义
_this.actions = [];
_this.panelJustify = true;
_this.panelBodyCreator = function (context) {
var isInDialog = /(?:\/|^)dialog\/.+$/.test(context.path);
var isInDrawer = /(?:\/|^)drawer\/.+$/.test(context.path);
// TODO: 旧方法无法判断context 中没有 dropdown-button 的信息,临时实现
// const isInDropdown = /(?:\/|^)dropdown-button\/.+$/.test(context.path);
var isInDropdown = /^button-group\/.+$/.test(context.path);
return getSchemaTpl('tabs', [
{
title: '属性',
body: getSchemaTpl('collapseGroup', [
{
title: '基本',
body: [
{
label: '名称',
type: 'input-text',
name: 'label'
},
{
label: '类型',
type: 'button-group-select',
name: 'type',
size: 'sm',
options: [
{
label: '按钮',
value: 'button'
},
{
label: '提交',
value: 'submit'
},
{
label: '重置',
value: 'reset'
}
]
},
getSchemaTpl('switch', {
name: 'close',
label: '是否关闭',
clearValueOnHidden: true,
labelRemark: "\u6307\u5B9A\u6B64\u6B21\u64CD\u4F5C\u5B8C\u540E\u5173\u95ED\u5F53\u524D ".concat(isInDialog ? 'dialog' : 'drawer'),
hidden: !isInDialog && !isInDrawer,
pipeIn: defaultValue(false)
}),
{
type: 'ae-switch-more',
mode: 'normal',
formType: 'extend',
label: tipedLabel('二次确认', '点击后先询问用户,由手动确认后再执行动作,避免误触。可用<code>\\${xxx}</code>取值。'),
form: {
body: [
{
name: 'confirmText',
type: 'input-text',
label: '确认内容'
}
]
}
},
{
type: 'ae-switch-more',
formType: 'extend',
mode: 'normal',
label: '气泡提示',
hidden: isInDropdown,
form: {
body: [
{
type: 'input-text',
name: 'tooltip',
label: tipedLabel('正常提示', '正常状态下的提示内容,不填则不弹出提示。可用<code>\\${xxx}</code>取值。')
},
{
type: 'input-text',
name: 'disabledTip',
label: tipedLabel('禁用提示', '禁用状态下的提示内容,不填则弹出正常提示。可用<code>\\${xxx}</code>取值。'),
clearValueOnHidden: true,
visibleOn: 'data.tooltipTrigger !== "focus"'
},
{
type: 'button-group-select',
name: 'tooltipTrigger',
label: '触发方式',
// visibleOn: 'data.tooltip || data.disabledTip',
size: 'sm',
options: [
{
label: '鼠标悬浮',
value: 'hover'
},
{
label: '聚焦',
value: 'focus'
}
],
pipeIn: defaultValue('hover')
},
{
type: 'button-group-select',
name: 'tooltipPlacement',
// visibleOn: 'data.tooltip || data.disabledTip',
label: '提示位置',
size: 'sm',
options: [
{
label: '上',
value: 'top'
},
{
label: '右',
value: 'right'
},
{
label: '下',
value: 'bottom'
},
{
label: '左',
value: 'left'
}
],
pipeIn: defaultValue('bottom')
}
]
}
},
getSchemaTpl('icon', {
label: '左侧图标'
}),
getSchemaTpl('icon', {
name: 'rightIcon',
label: '右侧图标'
})
]
},
getSchemaTpl('status', {
disabled: true
})
])
},
{
title: '外观',
body: getSchemaTpl('collapseGroup', [
{
title: '基本',
body: [
getSchemaTpl('buttonLevel', {
label: '样式',
name: 'level',
hidden: isInDropdown
}),
getSchemaTpl('buttonLevel', {
label: '高亮样式',
name: 'activeLevel',
hidden: isInDropdown,
visibleOn: 'data.active'
}),
getSchemaTpl('switch', {
name: 'block',
label: '块状显示',
hidden: isInDropdown
}),
getSchemaTpl('size', {
label: '尺寸',
hidden: isInDropdown
})
]
},
getSchemaTpl('style:classNames', {
isFormItem: false,
schema: [
getSchemaTpl('className', {
name: 'iconClassName',
label: '左侧图标',
visibleOn: 'this.icon'
}),
getSchemaTpl('className', {
name: 'rightIconClassName',
label: '右侧图标',
visibleOn: 'this.rightIcon'
})
]
})
])
},
{
title: '事件',
className: 'p-none',
body: [
getSchemaTpl('eventControl', __assign({ name: 'onEvent' }, getEventControlConfig(_this.manager, context)))
]
}
]);
};
return _this;
}
/**
* 如果禁用了没办法编辑
*/
ButtonPlugin.prototype.filterProps = function (props) {
props.disabled = false;
return props;
};
/**
* 如果配置里面有 rendererName 自动返回渲染器信息
* @param renderer
*/
ButtonPlugin.prototype.getRendererInfo = function (_a) {
var renderer = _a.renderer, schema = _a.schema;
var plugin = this;
if (schema.$$id &&
plugin.name &&
plugin.rendererName &&
plugin.rendererName === renderer.name) {
// 复制部分信息出去
return {
name: schema.label ? schema.label : plugin.name,
regions: plugin.regions,
patchContainers: plugin.patchContainers,
// wrapper: plugin.wrapper,
vRendererConfig: plugin.vRendererConfig,
wrapperProps: plugin.wrapperProps,
wrapperResolve: plugin.wrapperResolve,
filterProps: plugin.filterProps,
$schema: plugin.$schema,
renderRenderer: plugin.renderRenderer
};
}
};
return ButtonPlugin;
}(BasePlugin));
export { ButtonPlugin };
registerEditorPlugin(ButtonPlugin);

View File

@ -0,0 +1,39 @@
import { BasePlugin, RegionConfig, BaseEventContext } from 'amis-editor-core';
export declare class ButtonGroupPlugin extends BasePlugin {
rendererName: string;
$schema: string;
name: string;
isBaseComponent: boolean;
description: string;
tags: string[];
icon: string;
docLink: string;
scaffold: {
type: string;
buttons: {
onEvent: {
click: {
actions: never[];
};
};
type: string;
label: string;
}[];
};
previewSchema: {
type: string;
buttons: {
onEvent: {
click: {
actions: never[];
};
};
type: string;
label: string;
}[];
};
panelTitle: string;
panelJustify: boolean;
panelBodyCreator: (context: BaseEventContext) => any;
regions: Array<RegionConfig>;
}

View File

@ -0,0 +1,130 @@
import { __assign, __extends } from "tslib";
import { registerEditorPlugin } from 'amis-editor-core';
import { BasePlugin } from 'amis-editor-core';
import { BUTTON_DEFAULT_ACTION, tipedLabel } from '../component/BaseControl';
import { defaultValue, getSchemaTpl } from 'amis-editor-core';
var ButtonGroupPlugin = /** @class */ (function (_super) {
__extends(ButtonGroupPlugin, _super);
function ButtonGroupPlugin() {
var _this = _super !== null && _super.apply(this, arguments) || this;
// 关联渲染器名字
_this.rendererName = 'button-group';
_this.$schema = '/schemas/ButtonGroupSchema.json';
// 组件名称
_this.name = '按钮组';
_this.isBaseComponent = true;
_this.description = '用来展示多个按钮,视觉上会作为一个整体呈现。';
_this.tags = ['按钮'];
_this.icon = 'fa fa-object-group';
_this.docLink = '/amis/zh-CN/components/button-group';
_this.scaffold = {
type: 'button-group',
buttons: [
__assign({ type: 'button', label: '按钮1' }, BUTTON_DEFAULT_ACTION),
__assign({ type: 'button', label: '按钮2' }, BUTTON_DEFAULT_ACTION)
]
};
_this.previewSchema = __assign({}, _this.scaffold);
_this.panelTitle = '按钮组';
_this.panelJustify = true;
_this.panelBodyCreator = function (context) {
return getSchemaTpl('tabs', [
{
title: '属性',
body: getSchemaTpl('collapseGroup', [
{
title: '基本',
body: [
{
type: 'button-group-select',
name: 'vertical',
label: '布局方向',
options: [
{
label: '水平',
value: false
},
{
label: '垂直',
value: true
}
],
pipeIn: defaultValue(false)
},
getSchemaTpl('switch', {
name: 'tiled',
label: tipedLabel('平铺模式', '使按钮组宽度占满父容器,各按钮宽度自适应'),
pipeIn: defaultValue(false)
}),
getSchemaTpl('combo-container', [
{
type: 'combo',
label: '按钮管理',
name: 'buttons',
mode: 'normal',
multiple: true,
addable: true,
minLength: 1,
draggable: true,
editable: false,
items: [
{
type: 'tpl',
inline: false,
className: 'p-t-xs',
tpl: '<span class="label label-default"><% if (data.type === "button-group") { %> 按钮组 <% } else { %><%= data.label %><% if (data.icon) { %><i class="<%= data.icon %>"/><% }%><% } %></span>'
}
],
addButtonText: '新增按钮',
scaffold: {
type: 'button',
label: '按钮'
}
}
])
]
},
getSchemaTpl('status')
])
},
{
title: '外观',
body: [
getSchemaTpl('collapseGroup', [
{
title: '基本',
body: [
getSchemaTpl('size', {
label: '尺寸'
})
]
},
getSchemaTpl('style:classNames', {
isFormItem: false,
schema: [
getSchemaTpl('className', {
label: '按钮',
name: 'btnClassName'
})
]
})
])
]
}
]);
};
_this.regions = [
{
key: 'buttons',
label: '子按钮',
renderMethod: 'render',
preferTag: '按钮',
insertPosition: 'inner'
}
];
return _this;
}
return ButtonGroupPlugin;
}(BasePlugin));
export { ButtonGroupPlugin };
registerEditorPlugin(ButtonGroupPlugin);

View File

@ -0,0 +1,30 @@
import { BasePlugin } from 'amis-editor-core';
export declare class ButtonToolbarPlugin extends BasePlugin {
rendererName: string;
$schema: string;
name: string;
isBaseComponent: boolean;
description: string;
tags: string[];
icon: string;
/**
* ButtonGroup合并
*/
disabledRendererPlugin: boolean;
scaffold: {
type: string;
buttons: {
type: string;
label: string;
}[];
};
previewSchema: {
type: string;
buttons: {
type: string;
label: string;
}[];
};
panelTitle: string;
panelBody: any[];
}

View File

@ -0,0 +1,83 @@
import { __assign, __extends } from "tslib";
import { BasePlugin } from 'amis-editor-core';
import { getSchemaTpl } from 'amis-editor-core';
var ButtonToolbarPlugin = /** @class */ (function (_super) {
__extends(ButtonToolbarPlugin, _super);
function ButtonToolbarPlugin() {
var _this = _super !== null && _super.apply(this, arguments) || this;
// 关联渲染器名字
_this.rendererName = 'button-toolbar';
_this.$schema = '/schemas/ButtonToolbarSchema.json';
// 组件名称
_this.name = '按钮工具栏';
_this.isBaseComponent = true;
_this.description = '可以用来放置多个按钮或者按钮组,按钮之间会存在一定的间隔';
_this.tags = ['按钮'];
_this.icon = 'fa fa-ellipsis-h';
/**
* 组件选择面板中隐藏和ButtonGroup合并
*/
_this.disabledRendererPlugin = true;
_this.scaffold = {
type: 'button-toolbar',
buttons: [
{
type: 'button',
label: '按钮1'
},
{
type: 'button',
label: '按钮2'
}
]
};
_this.previewSchema = __assign({}, _this.scaffold);
_this.panelTitle = '按钮工具栏';
_this.panelBody = [
getSchemaTpl('tabs', [
{
title: '常规',
body: [
{
name: 'buttons',
type: 'combo',
label: '按钮管理',
multiple: true,
addable: true,
draggable: true,
draggableTip: '可排序、可移除、如要编辑请在预览区选中编辑',
editable: false,
visibleOn: 'this.buttons && this.buttons.length',
items: [
{
type: 'tpl',
inline: false,
className: 'p-t-xs',
tpl: '<span class="label label-default"><% if (data.type === "button-group") { %> 按钮组 <% } else { %><%= data.label %><% if (data.icon) { %><i class="<%= data.icon %>"/><% }%><% } %></span>'
}
],
addButtonText: '新增按钮',
scaffold: {
type: 'button',
label: '按钮'
}
}
]
},
{
title: '外观',
body: [getSchemaTpl('className')]
},
{
title: '显隐',
body: [getSchemaTpl('ref'), getSchemaTpl('visible')]
}
])
];
return _this;
}
return ButtonToolbarPlugin;
}(BasePlugin));
export { ButtonToolbarPlugin };
// 和plugin/Form/ButtonToolbar.tsx的重复了
// registerEditorPlugin(ButtonToolbarPlugin);

View File

@ -0,0 +1,127 @@
/// <reference types="react" />
import { BaseEventContext, BasePlugin, BasicRendererInfo, BasicSubRenderInfo, ChangeEventContext, PluginEvent, RendererEventContext, RendererInfoResolveEventContext, ScaffoldForm, SubRendererInfo } from 'amis-editor-core';
import { EditorNodeType } from 'amis-editor-core';
export declare class CRUDPlugin extends BasePlugin {
rendererName: string;
$schema: string;
order: number;
name: string;
isBaseComponent: boolean;
description: string;
docLink: string;
tags: string[];
icon: string;
scaffold: any;
sampleBuilder: (schema: any) => string;
btnSchemas: {
create: {
label: string;
type: string;
actionType: string;
level: string;
dialog: {
title: string;
body: {
type: string;
api: string;
body: never[];
};
};
};
update: {
label: string;
type: string;
actionType: string;
level: string;
dialog: {
title: string;
body: {
type: string;
api: string;
body: never[];
};
};
};
view: {
label: string;
type: string;
actionType: string;
level: string;
dialog: {
title: string;
body: {
type: string;
api: string;
body: never[];
};
};
};
delete: {
type: string;
label: string;
actionType: string;
level: string;
className: string;
confirmText: string;
api: string;
};
bulkDelete: {
type: string;
level: string;
label: string;
actionType: string;
confirmText: string;
api: string;
};
bulkUpdate: {
type: string;
label: string;
actionType: string;
dialog: {
title: string;
size: string;
body: {
type: string;
api: string;
body: {
label: string;
text: string;
type: string;
}[];
};
};
};
filter: {
title: string;
body: {
type: string;
name: string;
label: string;
}[];
};
};
scaffoldForm: ScaffoldForm;
addItem(source: any, target: any): void;
multifactor: boolean;
previewSchema: any;
oldFilter?: any;
panelTitle: string;
panelBodyCreator: (context: BaseEventContext) => any;
handleBulkActionEdit(id: string, index: number): void;
handleItemActionEdit(id: string, index: number): void;
wrapperProps: {
affixHeader: boolean;
};
/**
*
* @param context
* @param renderers
*/
buildSubRenderers(context: RendererEventContext, renderers: Array<SubRendererInfo>): BasicSubRenderInfo | Array<BasicSubRenderInfo> | void;
getRendererInfo(context: RendererInfoResolveEventContext): BasicRendererInfo | void;
renderEditableComponents(props: any): JSX.Element | null;
renderRenderer(props: any): JSX.Element;
filterProps(props: any): any;
afterUpdate(event: PluginEvent<ChangeEventContext>): void;
buildDataSchemas(node: EditorNodeType, region?: EditorNodeType): Promise<any>;
}

View File

@ -0,0 +1,54 @@
import { BaseEventContext, BasePlugin, InsertEventContext, PluginEvent, RegionConfig, VRendererConfig } from 'amis-editor-core';
export declare class CardPlugin extends BasePlugin {
rendererName: string;
$schema: string;
name: string;
isBaseComponent: boolean;
description: string;
docLink: string;
tags: string[];
icon: string;
scaffold: {
type: string;
header: {
title: string;
subTitle: string;
};
body: string;
actions: {
type: string;
label: string;
actionType: string;
dialog: {
title: string;
body: string;
};
}[];
};
previewSchema: {
type: string;
header: {
title: string;
subTitle: string;
};
body: string;
actions: {
type: string;
label: string;
actionType: string;
dialog: {
title: string;
body: string;
};
}[];
};
regions: Array<RegionConfig>;
panelTitle: string;
panelBodyCreator: (context: BaseEventContext) => any[];
fieldWrapperResolve: (dom: HTMLElement) => HTMLElement;
overrides: {
renderFeild: (this: any, region: string, field: any, index: any, props: any) => any;
};
vRendererConfig: VRendererConfig;
beforeInsert(event: PluginEvent<InsertEventContext>): void;
}

View File

@ -0,0 +1,220 @@
import { __assign, __extends } from "tslib";
import { Button } from 'amis-ui';
import React from 'react';
import { registerEditorPlugin } from 'amis-editor-core';
import { BasePlugin } from 'amis-editor-core';
import { defaultValue, getSchemaTpl } from 'amis-editor-core';
import flatten from 'lodash/flatten';
import { VRenderer } from 'amis-editor-core';
var CardPlugin = /** @class */ (function (_super) {
__extends(CardPlugin, _super);
function CardPlugin() {
var _this = _super !== null && _super.apply(this, arguments) || this;
// 关联渲染器名字
_this.rendererName = 'card';
_this.$schema = '/schemas/CardSchema.json';
// 组件名称
_this.name = '卡片';
_this.isBaseComponent = true;
_this.description = '展示单个卡片。';
_this.docLink = '/amis/zh-CN/components/card';
_this.tags = ['展示'];
_this.icon = '';
_this.scaffold = {
type: 'card',
header: {
title: '标题',
subTitle: '副标题'
},
body: '内容',
actions: [
{
type: 'button',
label: '按钮',
actionType: 'dialog',
dialog: {
title: '标题',
body: '内容'
}
}
]
};
_this.previewSchema = __assign({}, _this.scaffold);
_this.regions = [
{
key: 'body',
label: '内容区',
renderMethod: 'renderBody',
preferTag: '展示'
},
{
key: 'actions',
label: '按钮组',
renderMethod: 'renderActions',
wrapperResolve: function (dom) { return dom; },
preferTag: '按钮'
}
];
_this.panelTitle = '卡片';
_this.panelBodyCreator = function (context) {
return [
getSchemaTpl('tabs', [
{
title: '常规',
body: flatten([
{
children: (React.createElement(Button, { size: "sm", className: "m-b-sm", level: "info", block: true, onClick: function () {
// this.manager.showInsertPanel('actions', context.id)
return _this.manager.showRendererPanel('按钮', '请从左侧组件面板中点击添加按钮元素');
} }, "\u65B0\u589E\u6309\u94AE"))
},
{
children: (React.createElement("div", null,
React.createElement(Button, { block: true, level: "primary", size: "sm", onClick: function () {
// this.manager.showInsertPanel('body', context.id)
return _this.manager.showRendererPanel('展示', '请从左侧组件面板中点击添加内容元素');
} }, "\u65B0\u589E\u5185\u5BB9")))
},
{
type: 'divider'
},
{
name: 'header.title',
type: 'input-text',
label: '标题',
description: '支持模板语法如: <code>\\${xxx}</code>'
},
{
name: 'header.subTitle',
type: 'input-text',
label: '副标题',
description: '支持模板语法如: <code>\\${xxx}</code>'
},
{
name: 'header.avatar',
type: 'input-text',
label: '图片地址',
description: '支持模板语法如: <code>\\${xxx}</code>'
},
{
name: 'header.desc',
type: 'textarea',
label: '描述',
description: '支持模板语法如: <code>\\${xxx}</code>'
},
{
name: 'header.highlight',
type: 'input-text',
label: '是否高亮表达式',
description: '如: <code>this.isOwner</code>'
}
])
},
{
title: '外观',
body: [
{
type: 'input-range',
name: 'actionsCount',
pipeIn: defaultValue(4),
min: 1,
max: 10,
step: 1,
label: '卡片一行最多能放按钮个数'
},
getSchemaTpl('className', {
name: 'titleClassName',
label: '标题 CSS 类名'
}),
getSchemaTpl('className', {
name: 'highlightClassName',
label: '高亮 CSS 类名'
}),
getSchemaTpl('className', {
name: 'subTitleClassName',
label: '副标题 CSS 类名'
}),
getSchemaTpl('className', {
name: 'descClassName',
label: '描述 CSS 类名'
}),
getSchemaTpl('className', {
name: 'avatarClassName',
label: '图片外层 CSS 类名'
}),
getSchemaTpl('className', {
name: 'imageClassName',
label: '图片 CSS 类名'
}),
getSchemaTpl('className', {
name: 'bodyClassName',
label: '内容区 CSS 类名'
}),
getSchemaTpl('className')
]
},
{
title: '显隐',
body: [getSchemaTpl('ref'), getSchemaTpl('visible')]
}
])
];
};
/*exchangeRenderer(id: string) {
this.manager.showReplacePanel(id, '展示');
}*/
_this.fieldWrapperResolve = function (dom) { return dom; };
_this.overrides = {
renderFeild: function (region, field, index, props) {
var dom = this.super(region, field, index, props);
var info = this.props.$$editor;
if (!info || !field.$$id) {
return dom;
}
var plugin = info.plugin;
var id = field.$$id;
return (React.createElement(VRenderer, { type: info.type, plugin: info.plugin, renderer: info.renderer, multifactor: true, key: id, "$schema": "/schemas/CardBodyField.json", hostId: info.id, memberIndex: index, name: "".concat("\u5B57\u6BB5".concat(index + 1)), id: id, draggable: false, wrapperResolve: plugin.fieldWrapperResolve, schemaPath: "".concat(info.schemaPath, "/body/").concat(index), path: "".concat(this.props.$path, "/").concat(index), data: this.props.data }, dom));
}
};
_this.vRendererConfig = {
panelTitle: '字段',
panelBodyCreator: function (context) {
return [
getSchemaTpl('label'),
getSchemaTpl('className', {
name: 'labelClassName',
label: 'Label CSS 类名',
visibleOn: 'this.label'
})
/*{
children: (
<Button
size="sm"
level="info"
className="m-b"
block
onClick={this.exchangeRenderer.bind(this, context.id)}
>
更改渲染器类型
</Button>
)
}*/
];
}
};
return _this;
}
// 自动插入 label
CardPlugin.prototype.beforeInsert = function (event) {
var _a, _b, _c, _d;
var context = event.context;
if ((context.info.plugin === this ||
((_a = context.node.sameIdChild) === null || _a === void 0 ? void 0 : _a.info.plugin) === this) &&
context.region === 'body') {
context.data = __assign(__assign({}, context.data), { label: (_d = (_b = context.data.label) !== null && _b !== void 0 ? _b : (_c = context.subRenderer) === null || _c === void 0 ? void 0 : _c.name) !== null && _d !== void 0 ? _d : '列名称' });
}
};
return CardPlugin;
}(BasePlugin));
export { CardPlugin };
registerEditorPlugin(CardPlugin);

View File

@ -0,0 +1,71 @@
import { BaseEventContext, BasePlugin, BasicRendererInfo, BasicToolbarItem, ContextMenuEventContext, ContextMenuItem, RendererInfoResolveEventContext } from 'amis-editor-core';
export declare class CardsPlugin extends BasePlugin {
rendererName: string;
$schema: string;
name: string;
isBaseComponent: boolean;
description: string;
docLink: string;
tags: string[];
icon: string;
scaffold: {
type: string;
data: {
items: {
a: number;
b: number;
}[];
};
columnsCount: number;
card: {
type: string;
className: string;
header: {
title: string;
subTitle: string;
};
body: {
name: string;
label: string;
}[];
actions: {
label: string;
type: string;
}[];
};
};
previewSchema: {
className: string;
type: string;
data: {
items: {
a: number;
b: number;
}[];
};
columnsCount: number;
card: {
type: string;
className: string;
header: {
title: string;
subTitle: string;
};
body: {
name: string;
label: string;
}[];
actions: {
label: string;
type: string;
}[];
};
};
panelTitle: string;
panelBodyCreator: (context: BaseEventContext) => any[];
editDetail(id: string): void;
buildEditorToolbar({ id, info, schema }: BaseEventContext, toolbars: Array<BasicToolbarItem>): void;
buildEditorContextMenu({ id, schema, region, info, selections }: ContextMenuEventContext, menus: Array<ContextMenuItem>): void;
filterProps(props: any): any;
getRendererInfo(context: RendererInfoResolveEventContext): BasicRendererInfo | void;
}

View File

@ -0,0 +1,242 @@
import { __assign, __extends, __rest } from "tslib";
import { Button, resolveVariable } from 'amis';
import React from 'react';
import { registerEditorPlugin } from 'amis-editor-core';
import { BasePlugin } from 'amis-editor-core';
import { defaultValue, getSchemaTpl } from 'amis-editor-core';
import { diff, JSONPipeOut, repeatArray } from 'amis-editor-core';
var CardsPlugin = /** @class */ (function (_super) {
__extends(CardsPlugin, _super);
function CardsPlugin() {
var _this = _super !== null && _super.apply(this, arguments) || this;
// 关联渲染器名字
_this.rendererName = 'cards';
_this.$schema = '/schemas/CardsSchema.json';
// 组件名称
_this.name = '卡片列表';
_this.isBaseComponent = true;
_this.description = '功能类似于表格,但是用一个个小卡片来展示数据。当前组件需要配置数据源,不自带数据拉取,请优先使用 「CRUD」 组件。';
_this.docLink = '/amis/zh-CN/components/cards';
_this.tags = ['展示'];
_this.icon = 'fa fa-window-maximize';
_this.scaffold = {
type: 'cards',
data: {
items: [
{ a: 1, b: 2 },
{ a: 3, b: 4 }
]
},
columnsCount: 2,
card: {
type: 'card',
className: 'm-b-none',
header: {
title: '标题',
subTitle: '副标题'
},
body: [
{
name: 'a',
label: 'A'
},
{
name: 'b',
label: 'B'
}
],
actions: [
{
label: '详情',
type: 'button'
}
]
}
};
_this.previewSchema = __assign(__assign({}, _this.scaffold), { className: 'text-left ' });
_this.panelTitle = '卡片集';
_this.panelBodyCreator = function (context) {
var isCRUDBody = context.schema.type === 'crud';
return [
getSchemaTpl('tabs', [
{
title: '常规',
body: [
{
children: (React.createElement("div", { className: "m-b" },
React.createElement(Button, { level: "success", size: "sm", block: true, onClick: _this.editDetail.bind(_this, context.id) }, "\u914D\u7F6E\u5355\u9879\u4FE1\u606F")))
},
{
type: 'divider'
},
{
name: 'title',
type: 'input-text',
label: '标题'
},
{
name: 'href',
type: 'input-text',
label: '打开外部链接'
},
isCRUDBody
? null
: {
name: 'source',
type: 'input-text',
label: '数据源',
pipeIn: defaultValue('${items}'),
description: '绑定当前环境变量',
test: !isCRUDBody
},
{
name: 'placeholder',
value: '暂无数据',
type: 'input-text',
label: '无数据提示'
}
]
},
{
title: '外观',
body: [
getSchemaTpl('switch', {
name: 'showHeader',
label: '是否显示头部',
pipeIn: defaultValue(true)
}),
getSchemaTpl('switch', {
name: 'showFooter',
label: '是否显示底部',
pipeIn: defaultValue(true)
}),
getSchemaTpl('className', {
label: 'CSS 类名'
}),
getSchemaTpl('className', {
name: 'headerClassName',
label: '头部 CSS 类名'
}),
getSchemaTpl('className', {
name: 'footerClassName',
label: '底部 CSS 类名'
}),
getSchemaTpl('className', {
name: 'itemsClassName',
label: '内容 CSS 类名'
}),
getSchemaTpl('className', {
pipeIn: defaultValue('Grid-col--sm6 Grid-col--md4 Grid-col--lg3'),
name: 'itemClassName',
label: '卡片 CSS 类名'
}),
{
name: 'columnsCount',
type: 'input-range',
visibleOn: '!this.leftFixed',
min: 0,
max: 12,
step: 1,
label: '每行显示个数',
description: '不设置时,由卡片 CSS 类名决定'
},
getSchemaTpl('switch', {
name: 'masonryLayout',
label: '启用瀑布流'
})
]
},
{
title: '显隐',
body: [getSchemaTpl('ref'), getSchemaTpl('visible')]
}
])
];
};
return _this;
}
CardsPlugin.prototype.editDetail = function (id) {
var manager = this.manager;
var store = manager.store;
var node = store.getNodeById(id);
var value = store.getValueOf(id);
node &&
value &&
this.manager.openSubEditor({
title: '配置成员渲染器',
value: __assign({ type: 'card' }, value.card),
slot: {
type: 'container',
body: '$$'
},
typeMutable: false,
onChange: function (newValue) {
newValue = __assign(__assign({}, value), { card: newValue });
manager.panelChangeValue(newValue, diff(value, newValue));
},
data: {
item: 'mocked data',
index: 0
}
});
};
CardsPlugin.prototype.buildEditorToolbar = function (_a, toolbars) {
var id = _a.id, info = _a.info, schema = _a.schema;
if (info.renderer.name === 'cards' ||
(info.renderer.name === 'crud' && schema.mode === 'cards')) {
toolbars.push({
icon: 'fa fa-expand',
order: 100,
tooltip: '配置成员渲染器',
onClick: this.editDetail.bind(this, id)
});
}
};
CardsPlugin.prototype.buildEditorContextMenu = function (_a, menus) {
var id = _a.id, schema = _a.schema, region = _a.region, info = _a.info, selections = _a.selections;
if (selections.length || (info === null || info === void 0 ? void 0 : info.plugin) !== this) {
return;
}
if (info.renderer.name === 'cards' ||
(info.renderer.name === 'crud' && schema.mode === 'cards')) {
menus.push('|', {
label: '配置成员渲染器',
onSelect: this.editDetail.bind(this, id)
});
}
};
CardsPlugin.prototype.filterProps = function (props) {
var data = __assign(__assign({}, props.defaultData), props.data);
var arr = Array.isArray(props.value)
? props.value
: typeof props.source === 'string'
? resolveVariable(props.source, data)
: resolveVariable('items', data);
if (!Array.isArray(arr) || !arr.length) {
var mockedData = {
id: 666,
title: '假数据',
description: '假数据',
a: '假数据',
b: '假数据'
};
props.value = repeatArray(mockedData, 1).map(function (item, index) { return (__assign(__assign({}, item), { id: index + 1 })); });
}
var $schema = props.$schema, rest = __rest(props, ["$schema"]);
return __assign(__assign({}, JSONPipeOut(rest)), { $schema: $schema });
};
CardsPlugin.prototype.getRendererInfo = function (context) {
var _a;
var plugin = this;
var renderer = context.renderer, schema = context.schema;
if (!schema.$$id &&
((_a = schema.$$editor) === null || _a === void 0 ? void 0 : _a.renderer.name) === 'crud' &&
renderer.name === 'cards') {
return __assign(__assign({}, { id: schema.$$editor.id }), { name: plugin.name, regions: plugin.regions, patchContainers: plugin.patchContainers, vRendererConfig: plugin.vRendererConfig, wrapperProps: plugin.wrapperProps, wrapperResolve: plugin.wrapperResolve, filterProps: plugin.filterProps, $schema: plugin.$schema, renderRenderer: plugin.renderRenderer });
}
return _super.prototype.getRendererInfo.call(this, context);
};
return CardsPlugin;
}(BasePlugin));
export { CardsPlugin };
registerEditorPlugin(CardsPlugin);

View File

@ -0,0 +1,40 @@
import { BaseEventContext, BasePlugin, BasicToolbarItem } from 'amis-editor-core';
export declare class CarouselPlugin extends BasePlugin {
rendererName: string;
$schema: string;
name: string;
isBaseComponent: boolean;
description: string;
docLink: string;
tags: string[];
icon: string;
scaffold: {
type: string;
options: ({
image: string | string[];
html?: undefined;
} | {
html: string;
image?: undefined;
})[];
};
previewSchema: {
type: string;
options: ({
image: string | string[];
html?: undefined;
} | {
html: string;
image?: undefined;
})[];
};
panelTitle: string;
panelBodyCreator: (context: BaseEventContext) => any[];
filterProps(props: any): any;
/**
* toolbar
* @param context
* @param toolbars
*/
buildEditorToolbar(context: BaseEventContext, toolbars: Array<BasicToolbarItem>): void;
}

View File

@ -0,0 +1,350 @@
import { __assign, __extends } from "tslib";
import { registerEditorPlugin } from 'amis-editor-core';
import { BasePlugin } from 'amis-editor-core';
import { defaultValue, getSchemaTpl } from 'amis-editor-core';
import { mockValue } from 'amis-editor-core';
var CarouselPlugin = /** @class */ (function (_super) {
__extends(CarouselPlugin, _super);
function CarouselPlugin() {
var _this = _super !== null && _super.apply(this, arguments) || this;
// 关联渲染器名字
_this.rendererName = 'carousel';
_this.$schema = '/schemas/CarouselSchema.json';
// 组件名称
_this.name = '轮播图';
_this.isBaseComponent = true;
_this.description = '用来渲染轮播图,可以配置每一页的内容(不只是图片),可以配置过渡动画。';
_this.docLink = '/amis/zh-CN/components/carousel';
_this.tags = ['展示'];
_this.icon = 'fa fa-images';
_this.scaffold = {
type: 'carousel',
options: [
{
image: mockValue({ type: 'image' })
},
{
html: '<div style="width: 100%; height: 300px; background: #e3e3e3; text-align: center; line-height: 300px;">carousel data</div>'
},
{
image: mockValue({ type: 'image' })
}
]
};
_this.previewSchema = __assign({}, _this.scaffold);
_this.panelTitle = '轮播图';
_this.panelBodyCreator = function (context) {
var isUnderField = /\/field\/\w+$/.test(context.path);
return [
getSchemaTpl('tabs', [
{
title: '常规',
body: [
isUnderField
? {
type: 'tpl',
inline: false,
className: 'text-info text-sm',
tpl: '<p>当前为字段内容节点配置,选择上层还有更多的配置。</p>'
}
: null,
{
type: 'formula',
name: '__mode',
autoSet: false,
formula: '!this.name && !this.source && Array.isArray(this.options) ? 2 : 1'
},
{
label: '数据源',
name: '__mode',
type: 'button-group-select',
size: 'xs',
mode: 'inline',
className: 'w-full',
options: [
{
label: '关联字段',
value: 1
},
{
label: '静态设置',
value: 2
}
]
},
{
label: '字段名',
name: 'name',
type: 'input-text',
description: '设置字段名,关联当前数据作用域中的数据。',
visibleOn: 'this.__mode == 1'
},
{
type: 'combo',
name: 'options',
visibleOn: 'this.__mode == 2',
label: '轮播选项内容',
multiple: true,
multiLine: true,
addable: true,
removable: true,
typeSwitchable: false,
conditions: [
{
label: '图片',
test: 'this.type === "image"',
items: [
getSchemaTpl('imageUrl', {
name: 'content'
}),
{
type: 'input-text',
label: '图片标题',
name: 'title',
visibleOn: 'this.type == "image"'
},
getSchemaTpl('className', {
label: '图片标题类名',
name: 'titleClassName',
visibleOn: 'this.type == "image"'
}),
{
type: 'textarea',
label: '图片描述',
name: 'description',
visibleOn: 'this.type == "image"'
},
getSchemaTpl('className', {
label: '图片描述类名',
name: 'descriptionClassName',
visibleOn: 'this.type == "image"'
}),
{
type: 'input-text',
label: '打开外部链接',
name: 'href',
visibleOn: 'this.type == "image"'
}
],
scaffold: {
type: 'input-image',
image: ''
}
},
{
label: 'HTML',
test: 'this.type === "html"',
items: [
getSchemaTpl('richText', {
label: '内容',
name: 'content'
})
],
scaffold: {
type: 'html',
content: '<p>html 片段</p>'
}
}
],
pipeIn: function (value) {
return Array.isArray(value) && value.length
? value.map(function (item) {
return item && item.hasOwnProperty('html')
? {
type: 'html',
content: item.html
}
: {
type: 'image',
content: item.image,
title: item.title,
titleClassName: item.titleClassName,
description: item.description,
descriptionClassName: item.descriptionClassName
};
})
: [];
},
pipeOut: function (value, originValue, data) {
return Array.isArray(value) && value.length
? value.map(function (item) {
return item.type === 'html'
? {
html: item.content
}
: {
image: item.content,
title: item.title,
titleClassName: item.titleClassName,
description: item.description,
descriptionClassName: item.descriptionClassName
};
})
: [];
}
}
]
},
{
title: '外观',
body: [
{
name: 'auto',
type: 'switch',
mode: 'inline',
className: 'w-full',
label: '自动轮播',
pipeIn: defaultValue(true)
},
{
name: 'interval',
type: 'input-range',
label: '动画间隔',
min: 1,
max: 100,
step: 1,
unit: 's',
pipeIn: function (value) { return (value !== null && value !== void 0 ? value : 3000) / 1000; },
pipeOut: function (value, originValue, data) { return value * 1000; }
},
{
name: 'duration',
type: 'input-range',
label: '动画时长',
min: 100,
max: 2000,
step: 10,
pipeIn: defaultValue(500),
unit: 'ms'
},
{
name: 'animation',
label: '动画效果',
type: 'button-group-select',
mode: 'inline',
className: 'w-full',
size: 'sm',
pipeIn: defaultValue('fade'),
options: [
{
label: 'fade',
value: 'fade'
},
{
label: 'slide',
value: 'slide'
}
]
},
{
name: 'controlsTheme',
label: '控制按钮主题',
type: 'button-group-select',
size: 'sm',
pipeIn: defaultValue('light'),
mode: 'inline',
className: 'w-full',
options: [
{
label: 'light',
value: 'light'
},
{
label: 'dark',
value: 'dark'
}
]
},
{
name: 'controls',
label: '控制显示',
type: 'button-group-select',
size: 'sm',
mode: 'inline',
className: 'w-full',
pipeIn: defaultValue('dots,arrows'),
multiple: true,
options: [
{
label: '底部圆点',
value: 'dots'
},
{
label: '左右箭头',
value: 'arrows'
}
]
},
{
name: 'width',
type: 'input-text',
label: '宽度',
validations: 'isNumeric',
addOn: {
type: 'button',
label: 'px'
}
},
{
name: 'height',
type: 'input-text',
label: '高度',
validations: 'isNumeric',
addOn: {
type: 'button',
label: 'px'
}
},
getSchemaTpl('className')
]
},
{
title: '显隐',
body: [getSchemaTpl('ref'), getSchemaTpl('visible')]
}
])
];
};
return _this;
}
CarouselPlugin.prototype.filterProps = function (props) {
// 编辑的时候别自动轮播,影响编辑
props.auto = false;
return props;
};
/**
* 补充切换的 toolbar
* @param context
* @param toolbars
*/
CarouselPlugin.prototype.buildEditorToolbar = function (context, toolbars) {
if (context.info.plugin === this &&
context.info.renderer.name === 'carousel' &&
!context.info.hostId) {
var node_1 = context.node;
toolbars.push({
level: 'secondary',
icon: 'fa fa-chevron-left',
tooltip: '上个卡片',
onClick: function () {
var _a;
var control = node_1.getComponent();
(_a = control === null || control === void 0 ? void 0 : control.prev) === null || _a === void 0 ? void 0 : _a.call(control);
}
});
toolbars.push({
level: 'secondary',
icon: 'fa fa-chevron-right',
tooltip: '下个卡片',
onClick: function () {
var _a;
var control = node_1.getComponent();
(_a = control === null || control === void 0 ? void 0 : control.next) === null || _a === void 0 ? void 0 : _a.call(control);
}
});
}
};
return CarouselPlugin;
}(BasePlugin));
export { CarouselPlugin };
registerEditorPlugin(CarouselPlugin);

View File

@ -0,0 +1,50 @@
import { BaseEventContext, BasePlugin } from 'amis-editor-core';
import { RendererAction } from 'amis-editor-comp/dist/renderers/event-action';
export declare class ChartPlugin extends BasePlugin {
rendererName: string;
$schema: string;
name: string;
isBaseComponent: boolean;
description: string;
docLink: string;
tags: string[];
icon: string;
scaffold: {
type: string;
config: {
xAxis: {
type: string;
data: string[];
};
yAxis: {
type: string;
};
series: {
data: number[];
type: string;
}[];
};
replaceChartOption: boolean;
};
previewSchema: {
type: string;
config: {
xAxis: {
type: string;
data: string[];
};
yAxis: {
type: string;
};
series: {
data: number[];
type: string;
}[];
};
replaceChartOption: boolean;
};
actions: RendererAction[];
panelTitle: string;
panelBodyCreator: (context: BaseEventContext) => any[];
editDrillDown(id: string): void;
}

View File

@ -0,0 +1,180 @@
import { __assign, __extends } from "tslib";
import { Button } from 'amis';
import React from 'react';
import { registerEditorPlugin } from 'amis-editor-core';
import { BasePlugin } from 'amis-editor-core';
import { defaultValue, getSchemaTpl } from 'amis-editor-core';
import { diff } from 'amis-editor-core';
import AMisCodeEditor from 'amis-editor-core';
var ChartConfigEditor = function (_a) {
var value = _a.value, onChange = _a.onChange;
return (React.createElement("div", { className: "ae-JsonEditor" },
React.createElement(AMisCodeEditor, { value: value, onChange: onChange })));
};
var ChartPlugin = /** @class */ (function (_super) {
__extends(ChartPlugin, _super);
function ChartPlugin() {
var _this = _super !== null && _super.apply(this, arguments) || this;
// 关联渲染器名字
_this.rendererName = 'chart';
_this.$schema = '/schemas/ChartSchema.json';
// 组件名称
_this.name = '图表';
_this.isBaseComponent = true;
_this.description = '用来渲染图表,基于 echarts 图表库,理论上 echarts 所有图表类型都支持。';
_this.docLink = '/amis/zh-CN/components/chart';
_this.tags = ['展示'];
_this.icon = 'fa fa-pie-chart';
_this.scaffold = {
type: 'chart',
config: {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line'
}
]
},
replaceChartOption: true
};
_this.previewSchema = __assign({}, _this.scaffold);
// 动作定义
_this.actions = [
{
actionType: 'reload',
actionLabel: '重新加载',
description: '触发组件数据刷新并重新渲染'
},
{
actionType: 'setValue',
actionLabel: '更新数据',
description: '触发组件数据更新'
}
];
_this.panelTitle = '图表';
_this.panelBodyCreator = function (context) {
return [
getSchemaTpl('tabs', [
{
title: '常规',
body: [
getSchemaTpl('api', {
label: '接口拉取',
description: '接口可以返回配置,或者数据,建议返回数据可映射到 Echarts 配置中'
}),
getSchemaTpl('switch', {
label: '初始是否拉取',
name: 'initFetch',
visibleOn: 'data.api',
pipeIn: defaultValue(true)
}),
{
name: 'interval',
label: '定时刷新间隔',
type: 'input-number',
step: 500,
visibleOn: 'data.api',
description: '设置后将自动定时刷新最小3000, 单位 ms'
},
{
name: 'config',
asFormItem: true,
component: ChartConfigEditor,
// type: 'json-editor',
label: 'Echarts 配置',
description: '支持数据映射,可将接口返回的数据填充进来'
// size: 'lg'
// pipeOut: (value: any) => {
// try {
// return value ? JSON.parse(value) : null;
// } catch (e) {}
// return null;
// }
},
{
name: 'clickAction',
asFormItem: true,
children: function (_a) {
var onChange = _a.onChange, value = _a.value;
return (React.createElement("div", { className: "m-b" },
React.createElement(Button, { size: "sm", level: value ? 'danger' : 'info', onClick: _this.editDrillDown.bind(_this, context.id) }, "\u914D\u7F6E DrillDown"),
value ? (React.createElement(Button, { size: "sm", level: "link", className: "m-l", onClick: function () { return onChange(''); } }, "\u5220\u9664 DrillDown")) : null));
}
},
{
name: 'dataFilter',
type: 'js-editor',
allowFullscreen: true,
label: '数据加工',
size: 'lg',
description: "\n \u5982\u679C\u540E\u7AEF\u6CA1\u6709\u76F4\u63A5\u8FD4\u56DE Echart \u914D\u7F6E\uFF0C\u53EF\u4EE5\u81EA\u5DF1\u5199\u4E00\u6BB5\u51FD\u6570\u6765\u5305\u88C5\u3002\n <p>\u7B7E\u540D\uFF1A(config, echarts, data) => config</p>\n <p>\u53C2\u6570\u8BF4\u660E</p>\n <ul>\n <li><code>config</code> \u539F\u59CB\u6570\u636E</li>\n <li><code>echarts</code> echarts \u5BF9\u8C61</li>\n <li><code>data</code> \u5982\u679C\u914D\u7F6E\u4E86\u6570\u636E\u63A5\u53E3\uFF0C\u63A5\u53E3\u8FD4\u56DE\u7684\u6570\u636E\u901A\u8FC7\u6B64\u53D8\u91CF\u4F20\u5165</li>\n </ul>\n <p>\u793A\u4F8B</p>\n <pre>debugger; // \u53EF\u4EE5\u6D4F\u89C8\u5668\u4E2D\u65AD\u70B9\u8C03\u8BD5\n\n// \u67E5\u770B\u539F\u59CB\u6570\u636E\nconsole.log(config)\n\n// \u8FD4\u56DE\u65B0\u7684\u7ED3\u679C \nreturn {}</pre>\n "
},
getSchemaTpl('switch', {
label: 'Chart 配置完全替换',
name: 'replaceChartOption',
labelRemark: {
trigger: 'click',
className: 'm-l-xs',
rootClose: true,
content: '默认为追加模式,新的配置会跟旧的配置合并,如果勾选将直接完全覆盖。',
placement: 'left'
}
})
]
},
{
title: '外观',
body: [getSchemaTpl('className')]
},
{
title: '显隐',
body: [getSchemaTpl('visible')]
},
{
title: '其他',
body: [getSchemaTpl('name')]
}
])
];
};
return _this;
}
ChartPlugin.prototype.editDrillDown = function (id) {
var manager = this.manager;
var store = manager.store;
var node = store.getNodeById(id);
var value = store.getValueOf(id);
var dialog = (value.clickAction && value.clickAction.dialog) || {
title: '标题',
body: ['<p>内容 <code>${value|json}</code></p>']
};
node &&
value &&
this.manager.openSubEditor({
title: '配置 DrillDown 详情',
value: __assign({ type: 'container' }, dialog),
slot: {
type: 'container',
body: '$$'
},
typeMutable: false,
onChange: function (newValue) {
newValue = __assign(__assign({}, value), { clickAction: {
actionType: 'dialog',
dialog: newValue
} });
manager.panelChangeValue(newValue, diff(value, newValue));
}
});
};
return ChartPlugin;
}(BasePlugin));
export { ChartPlugin };
registerEditorPlugin(ChartPlugin);

View File

@ -0,0 +1,19 @@
import { BasePlugin } from 'amis-editor-core';
export declare class CodeViewPlugin extends BasePlugin {
rendererName: string;
$schema: string;
name: string;
isBaseComponent: boolean;
icon: string;
description: string;
docLink: string;
tags: string[];
scaffold: {
type: string;
language: string;
value: string;
};
previewSchema: any;
panelTitle: string;
panelBody: any[];
}

View File

@ -0,0 +1,62 @@
import { __assign, __extends } from "tslib";
/**
* @file 代码高亮显示
*/
import { registerEditorPlugin } from 'amis-editor-core';
import { BasePlugin } from 'amis-editor-core';
import { getSchemaTpl } from 'amis-editor-core';
var CodeViewPlugin = /** @class */ (function (_super) {
__extends(CodeViewPlugin, _super);
function CodeViewPlugin() {
var _this = _super !== null && _super.apply(this, arguments) || this;
// 关联渲染器名字
_this.rendererName = 'code';
_this.$schema = '/schemas/CodeSchema.json';
// 组件名称
_this.name = '代码高亮';
_this.isBaseComponent = true;
_this.icon = 'fa fa-code';
_this.description = '代码高亮';
_this.docLink = '/amis/zh-CN/components/code';
_this.tags = ['展示'];
_this.scaffold = {
type: 'code',
language: 'html',
value: '<div>html</div>'
};
_this.previewSchema = __assign({}, _this.scaffold);
_this.panelTitle = '代码高亮';
_this.panelBody = [
getSchemaTpl('tabs', [
{
title: '常规',
body: [
{
type: 'input-text',
label: '名称',
name: 'name'
},
{
type: 'editor',
label: '固定值',
allowFullscreen: true,
name: 'value'
}
]
},
{
title: '外观',
body: [getSchemaTpl('className')]
},
{
title: '显隐',
body: [getSchemaTpl('ref'), getSchemaTpl('visible')]
}
])
];
return _this;
}
return CodeViewPlugin;
}(BasePlugin));
export { CodeViewPlugin };
registerEditorPlugin(CodeViewPlugin);

View File

@ -0,0 +1,33 @@
import { BasePlugin, RegionConfig, BaseEventContext } from 'amis-editor-core';
export declare class CollapsePlugin extends BasePlugin {
rendererName: string;
$schema: string;
name: string;
isBaseComponent: boolean;
description: string;
docLink: string;
tags: string[];
icon: string;
scaffold: {
type: string;
header: string;
body: {
type: string;
tpl: string;
inline: boolean;
}[];
};
previewSchema: {
type: string;
header: string;
body: {
type: string;
tpl: string;
inline: boolean;
}[];
};
panelTitle: string;
panelJustify: boolean;
panelBodyCreator: (context: BaseEventContext) => any;
regions: Array<RegionConfig>;
}

View File

@ -0,0 +1,129 @@
import { __assign, __extends } from "tslib";
import { registerEditorPlugin } from 'amis-editor-core';
import { BasePlugin } from 'amis-editor-core';
import { defaultValue, getSchemaTpl } from 'amis-editor-core';
import { tipedLabel } from '../component/BaseControl';
var CollapsePlugin = /** @class */ (function (_super) {
__extends(CollapsePlugin, _super);
function CollapsePlugin() {
var _this = _super !== null && _super.apply(this, arguments) || this;
// 关联渲染器名字
_this.rendererName = 'collapse';
_this.$schema = '/schemas/CollapseSchema.json';
// 组件名称
_this.name = '折叠器';
_this.isBaseComponent = true;
_this.description = '折叠器,可以将内容区展开或隐藏,保持页面的整洁';
_this.docLink = '/amis/zh-CN/components/collapse';
_this.tags = ['展示'];
_this.icon = 'fa fa-window-minimize';
_this.scaffold = {
type: 'collapse',
header: '标题',
body: [
{
type: 'tpl',
tpl: '内容',
inline: false
}
]
};
_this.previewSchema = __assign({}, _this.scaffold);
_this.panelTitle = '折叠器';
_this.panelJustify = true;
_this.panelBodyCreator = function (context) {
var _a, _b;
return getSchemaTpl('tabs', [
{
title: '属性',
body: getSchemaTpl('collapseGroup', [
{
title: '基本',
body: [
{
name: 'header',
label: '标题',
type: 'input-text',
pipeIn: defaultValue(((_a = context === null || context === void 0 ? void 0 : context.schema) === null || _a === void 0 ? void 0 : _a.title) || ((_b = context === null || context === void 0 ? void 0 : context.schema) === null || _b === void 0 ? void 0 : _b.header) || ''),
onChange: function (value, oldValue, model, form) {
// 转换一下旧版本的title字段
form.setValueByName('header', value);
form.setValueByName('title', undefined);
}
},
{
name: 'collapseHeader',
label: tipedLabel('展开标题', '折叠器处于展开状态时的标题'),
type: 'input-text'
},
{
name: 'headerPosition',
label: '标题位置',
type: 'button-group-select',
size: 'sm',
pipeIn: defaultValue('top'),
options: [
{
label: '顶部',
value: 'top',
icon: 'fa fa-arrow-up'
},
{
label: '底部',
value: 'bottom',
icon: 'fa fa-arrow-down'
}
]
},
{
name: 'showArrow',
label: '显示图标',
mode: 'row',
inputClassName: 'inline-flex justify-between flex-row-reverse',
type: 'switch',
pipeIn: defaultValue(true)
},
getSchemaTpl('switch', {
name: 'collapsable',
label: '可折叠',
pipeIn: defaultValue(true)
})
]
},
getSchemaTpl('status', {
disabled: true
})
])
},
{
title: '外观',
body: getSchemaTpl('collapseGroup', [
getSchemaTpl('style:classNames', {
isFormItem: false,
schema: [
getSchemaTpl('className', {
name: 'headingClassName',
label: '标题类名'
}),
getSchemaTpl('className', {
name: 'bodyClassName',
label: '内容类名'
})
]
})
])
}
]);
};
_this.regions = [
{
key: 'body',
label: '内容区'
}
];
return _this;
}
return CollapsePlugin;
}(BasePlugin));
export { CollapsePlugin };
registerEditorPlugin(CollapsePlugin);

View File

@ -0,0 +1,65 @@
import { BasePlugin, RegionConfig, BaseEventContext } from 'amis-editor-core';
export declare class CollapseGroupPlugin extends BasePlugin {
rendererName: string;
$schema: string;
name: string;
isBaseComponent: boolean;
description: string;
tags: string[];
icon: string;
scaffold: {
type: string;
activeKey: string[];
body: ({
type: string;
key: string;
active: boolean;
header: string;
body: {
type: string;
tpl: string;
inline: boolean;
}[];
} | {
type: string;
key: string;
header: string;
body: {
type: string;
tpl: string;
inline: boolean;
}[];
active?: undefined;
})[];
};
previewSchema: {
type: string;
activeKey: string[];
body: ({
type: string;
key: string;
active: boolean;
header: string;
body: {
type: string;
tpl: string;
inline: boolean;
}[];
} | {
type: string;
key: string;
header: string;
body: {
type: string;
tpl: string;
inline: boolean;
}[];
active?: undefined;
})[];
};
activeKeyData: any;
panelTitle: string;
panelJustify: boolean;
panelBodyCreator: (context: BaseEventContext) => any[];
regions: Array<RegionConfig>;
}

View File

@ -0,0 +1,246 @@
import { __assign, __extends } from "tslib";
import { registerEditorPlugin } from 'amis-editor-core';
import { BasePlugin } from 'amis-editor-core';
import { defaultValue, getSchemaTpl } from 'amis-editor-core';
import { tipedLabel } from '../component/BaseControl';
import { isObject } from 'amis-editor-core';
var CollapseGroupPlugin = /** @class */ (function (_super) {
__extends(CollapseGroupPlugin, _super);
function CollapseGroupPlugin() {
var _this = _super !== null && _super.apply(this, arguments) || this;
// 关联渲染器名字
_this.rendererName = 'collapse-group';
_this.$schema = '/schemas/CollapseGroupSchema.json';
// 组件名称
_this.name = '折叠面板';
_this.isBaseComponent = true;
_this.description = '折叠面板,当信息量较大且分类较多时,可使用折叠面板进行分类收纳。';
_this.tags = ['展示', '容器'];
_this.icon = 'fa fa-align-justify';
_this.scaffold = {
type: 'collapse-group',
activeKey: ['1'],
body: [
{
type: 'collapse',
key: '1',
active: true,
header: '标题1',
body: [
{
type: 'tpl',
tpl: '这里是内容1',
inline: false
}
]
},
{
type: 'collapse',
key: '2',
header: '标题2',
body: [
{
type: 'tpl',
tpl: '这里是内容1',
inline: false
}
]
}
]
};
_this.previewSchema = __assign({}, _this.scaffold);
_this.activeKeyData = [];
_this.panelTitle = '折叠面板';
_this.panelJustify = true;
_this.panelBodyCreator = function (context) {
return [
getSchemaTpl('tabs', [
{
title: '属性',
body: getSchemaTpl('collapseGroup', [
{
title: '基本',
body: [
{
name: 'expandIconPosition',
label: '图标位置',
type: 'button-group-select',
pipeIn: defaultValue('left'),
options: [
{
label: '左边',
value: 'left',
icon: 'fa fa-align-left'
},
{
label: '右边',
value: 'right',
icon: 'fa fa-align-right'
}
]
},
{
type: 'ae-switch-more',
label: '自定义图标',
bulk: true,
mode: 'normal',
value: false,
formType: 'extend',
autoFocus: false,
form: {
body: [
{
label: '图标',
name: 'expandIcon',
type: 'icon-picker',
className: 'fix-icon-picker-overflow',
pipeIn: function (value) {
var _a;
var val = (_a = value === null || value === void 0 ? void 0 : value.icon) !== null && _a !== void 0 ? _a : '';
return (val &&
((value === null || value === void 0 ? void 0 : value.prefix)
? "".concat(value.prefix).concat(val)
: "fa fa-".concat(val)));
},
pipeOut: function (value) {
var _a;
var fa = ~value.lastIndexOf('fa fa-');
var fab = ~value.lastIndexOf('fab fa-');
if (!(value || fa || fab)) {
return '';
}
var prefix = fab ? 'fab fa-' : fa ? 'fa fa-' : '';
value =
(_a = value.substring(prefix.length, value.length)) !== null && _a !== void 0 ? _a : '';
return {
type: 'icon',
prefix: prefix,
icon: value
};
}
}
]
},
pipeIn: function (value) {
if (typeof value === 'string' && value.length) {
return {
character: value
};
}
return undefined;
},
pipeOut: function (value) {
if (!isObject(value)) {
return undefined;
}
return typeof value.character === 'string'
? value.character
: undefined;
}
},
{
name: 'accordion',
label: tipedLabel('手风琴模式', '手风琴模式,只允许单个面板展开'),
mode: 'row',
inputClassName: 'inline-flex justify-between flex-row-reverse',
type: 'switch',
pipeIn: defaultValue(false)
},
getSchemaTpl('combo-container', {
name: 'body',
type: 'combo',
label: '面板管理',
mode: 'normal',
multiple: true,
addable: true,
addButtonText: '新增折叠器',
minLength: 1,
draggable: true,
draggableTip: '',
placeholder: '请添加折叠器',
items: [
{
type: 'container',
columnClassName: 'w-xs w-9 text-xs',
body: tipedLabel([
{
name: 'active',
type: 'checkbox'
}
], '默认展开此面板')
},
{
name: 'header',
placeholder: '标题',
type: 'input-text'
}
],
onChange: function (value, oldValue, model, form) {
var activeKey = value.reduce(function (arr, item) {
item.active === true && arr.push(item.key);
return arr;
}, []);
form.setValues({
activeKey: activeKey
});
},
pipeOut: function (value, oldValue, data) {
var keys = value.map(function (item) { return item.key; });
var findMinCanUsedKey = function (keys, max) {
for (var i = 1; i <= max; i++) {
if (!keys.includes(String(i))) {
return String(i);
}
}
};
value.forEach(function (item) {
if (!item.key) {
var key = findMinCanUsedKey(keys, value.length);
item.key = key;
item.header = "\u6807\u9898".concat(key);
}
});
return value;
},
scaffold: {
type: 'collapse',
header: '标题',
body: [
{
type: 'tpl',
tpl: '内容',
inline: false
}
],
key: ''
}
})
]
}
])
},
{
title: '外观',
body: getSchemaTpl('collapseGroup', [
getSchemaTpl('style:classNames', {
isFormItem: false
})
])
}
])
];
};
_this.regions = [
{
key: 'body',
label: '内容区',
renderMethod: 'render',
insertPosition: 'inner'
}
];
return _this;
}
return CollapseGroupPlugin;
}(BasePlugin));
export { CollapseGroupPlugin };
registerEditorPlugin(CollapseGroupPlugin);

View File

@ -0,0 +1,22 @@
import { BaseEventContext, BasePlugin, RegionConfig } from 'amis-editor-core';
export declare class ContainerPlugin extends BasePlugin {
rendererName: string;
$schema: string;
name: string;
isBaseComponent: boolean;
description: string;
tags: string[];
icon: string;
scaffold: {
type: string;
body: string;
};
previewSchema: {
type: string;
body: string;
};
regions: Array<RegionConfig>;
panelTitle: string;
panelJustify: boolean;
panelBodyCreator: (context: BaseEventContext) => any;
}

View File

@ -0,0 +1,91 @@
import { __assign, __extends, __spreadArray } from "tslib";
import { registerEditorPlugin } from 'amis-editor-core';
import { BasePlugin } from 'amis-editor-core';
import { defaultValue, getSchemaTpl } from 'amis-editor-core';
var ContainerPlugin = /** @class */ (function (_super) {
__extends(ContainerPlugin, _super);
function ContainerPlugin() {
var _this = _super !== null && _super.apply(this, arguments) || this;
// 关联渲染器名字
_this.rendererName = 'container';
_this.$schema = '/schemas/ContainerSchema.json';
// 组件名称
_this.name = '容器';
_this.isBaseComponent = true;
_this.description = '一个简单的容器,可以将多个渲染器放置在一起。';
_this.tags = ['容器'];
_this.icon = 'fa fa-square-o';
_this.scaffold = {
type: 'container',
body: '内容'
};
_this.previewSchema = __assign({}, _this.scaffold);
_this.regions = [
{
key: 'body',
label: '内容区'
}
];
_this.panelTitle = '容器';
_this.panelJustify = true;
_this.panelBodyCreator = function (context) {
return getSchemaTpl('tabs', [
{
title: '属性',
body: getSchemaTpl('collapseGroup', [
{
title: '常用',
body: [
{
name: 'wrapperComponent',
label: '容器标签',
type: 'input-text',
options: [
'article',
'aside',
'code',
'div',
'footer',
'header',
'p',
'section'
],
pipeIn: defaultValue('div'),
validations: {
isAlphanumeric: true,
matchRegexp: '/^(?!.*script).*$/' // 禁用一下script标签
},
validationErrors: {
isAlpha: 'HTML标签不合法请重新输入',
matchRegexp: 'HTML标签不合法请重新输入'
},
validateOnChange: false
}
]
}
])
},
{
title: '外观',
className: 'p-none',
body: getSchemaTpl('collapseGroup', __spreadArray(__spreadArray([], getSchemaTpl('style:common'), true), [
{
title: 'CSS 类名',
body: [
getSchemaTpl('className', { label: '外层CSS类名' }),
getSchemaTpl('className', {
name: 'bodyClassName',
label: '内容区CSS类名'
})
]
}
], false))
}
]);
};
return _this;
}
return ContainerPlugin;
}(BasePlugin));
export { ContainerPlugin };
registerEditorPlugin(ContainerPlugin);

View File

@ -0,0 +1,27 @@
/**
* @file
*/
import { BasePlugin, BasicSubRenderInfo, RendererEventContext, SubRendererInfo } from 'amis-editor-core';
export declare class CustomPlugin extends BasePlugin {
rendererName: string;
$schema: string;
name: string;
isBaseComponent: boolean;
description: string;
tags: string[];
icon: string;
docLink: string;
scaffold: {
type: string;
html: string;
onMount: string;
};
previewSchema: {
type: string;
html: string;
onMount: string;
};
panelTitle: string;
panelBody: any[];
buildSubRenderers(context: RendererEventContext, renderers: Array<SubRendererInfo>): BasicSubRenderInfo | Array<BasicSubRenderInfo> | void;
}

View File

@ -0,0 +1,100 @@
/**
* @file 自定义代码
*/
import { __assign, __extends } from "tslib";
import { registerEditorPlugin } from 'amis-editor-core';
import { BasePlugin } from 'amis-editor-core';
import { getSchemaTpl } from 'amis-editor-core';
var CustomPlugin = /** @class */ (function (_super) {
__extends(CustomPlugin, _super);
function CustomPlugin() {
var _this = _super !== null && _super.apply(this, arguments) || this;
// 关联渲染器名字
_this.rendererName = 'custom';
_this.$schema = '/schemas/CustomSchema.json';
// 组件名称
_this.name = '自定义代码';
_this.isBaseComponent = true;
_this.description = '通过内嵌代码来实现功能';
_this.tags = ['功能'];
_this.icon = 'fa fa-gears';
_this.docLink = '/amis/zh-CN/components/custom';
_this.scaffold = {
type: 'custom',
html: '<div><h2>hello, world!</h2></div>',
onMount: "\n const button = document.createElement('button');\n button.innerText = '\u70B9\u51FB\u4FEE\u6539\u59D3\u540D';\n button.onclick = event => {\n event.preventDefault();\n };\n dom.appendChild(button);"
};
_this.previewSchema = __assign({}, _this.scaffold);
_this.panelTitle = '自定义代码';
_this.panelBody = [
getSchemaTpl('fieldSet', {
title: 'HTML 内容',
body: [
{
label: 'HTML 内容',
name: 'html',
type: 'editor',
allowFullscreen: true
}
]
}),
getSchemaTpl('fieldSet', {
title: 'onMount',
body: [
{
name: 'onMount',
type: 'editor',
allowFullscreen: true,
size: 'xxl',
label: 'onMount 代码',
options: {
lineNumbers: 'off',
glyphMargin: false,
lineDecorationsWidth: 0,
lineNumbersMinChars: 0
}
}
]
}),
getSchemaTpl('fieldSet', {
title: 'onUpdate',
body: [
{
name: 'onUpdate',
type: 'editor',
allowFullscreen: true,
size: 'xxl',
label: 'onUpdate 代码'
}
]
}),
getSchemaTpl('fieldSet', {
title: 'onUnmount',
body: [
{
name: 'onUnmount',
type: 'editor',
allowFullscreen: true,
size: 'xxl',
label: 'onUnmount 代码'
}
]
})
];
return _this;
}
CustomPlugin.prototype.buildSubRenderers = function (context, renderers) {
var info = _super.prototype.buildSubRenderers.apply(this, arguments);
// 只有 form 下才调 onChange
// if (
// context.info.renderer.name === 'form' ||
// context.node.childRegions.some(i => i.region === 'body')
// ) {
info.scaffold.onMount = "\n const button = document.createElement('button');\n button.innerText = '\u70B9\u51FB\u4FEE\u6539\u59D3\u540Dddd';\n button.onclick = event => {\n onChange('new name');\n event.preventDefault();\n };\n dom.appendChild(button);";
// }
return info;
};
return CustomPlugin;
}(BasePlugin));
export { CustomPlugin };
registerEditorPlugin(CustomPlugin);

View File

@ -0,0 +1,40 @@
/**
* @file
*/
import { BasePlugin, BasicRendererInfo, RendererInfoResolveEventContext, RegionConfig } from 'amis-editor-core';
export declare class CustomPlugin extends BasePlugin {
rendererName: string;
$schema: string;
name: string;
isBaseComponent: boolean;
disabledRendererPlugin: boolean;
description: string;
docLink: string;
tags: string[];
icon: string;
scaffold: {
type: string;
html: string;
onMount: string;
body: {
type: string;
tpl: string;
}[];
};
previewSchema: {
type: string;
html: string;
onMount: string;
body: {
type: string;
tpl: string;
}[];
};
regions: Array<RegionConfig>;
panelTitle: string;
panelBody: any[];
/**
* 备注: 根据当前custom组件的schema中是否有body元素来启动容器模式custom组件实现自定义容器类型
*/
getRendererInfo(context: RendererInfoResolveEventContext): BasicRendererInfo | void;
}

View File

@ -0,0 +1,141 @@
/**
* @file 自定义代码
*/
import { __assign, __extends } from "tslib";
import { registerEditorPlugin } from 'amis-editor-core';
import { BasePlugin } from 'amis-editor-core';
import { getSchemaTpl } from 'amis-editor-core';
import isArray from 'lodash/isArray';
var CustomPlugin = /** @class */ (function (_super) {
__extends(CustomPlugin, _super);
function CustomPlugin() {
var _this = _super !== null && _super.apply(this, arguments) || this;
// 关联渲染器名字
_this.rendererName = 'custom';
_this.$schema = '/schemas/CustomSchema.json';
// 组件名称
_this.name = '自定义容器';
_this.isBaseComponent = true;
_this.disabledRendererPlugin = true; // 待完善,暂时隐藏
_this.description = '通过自定义代码来实现容器组件';
_this.docLink = '/amis/zh-CN/components/custom';
_this.tags = ['功能', '容器'];
_this.icon = 'fa fa-gears';
_this.scaffold = {
type: 'custom',
html: '<div>\n<h2>hello, world!</h2>\n<div id="customBox">自定义容器区域</div>\n</div>',
onMount: "this.renderChild('body', props.body, document.getElementById('customBox'));",
body: [
{
type: 'tpl',
tpl: '<p>自定义容器区域</p>'
}
]
};
_this.previewSchema = __assign({}, _this.scaffold);
_this.regions = [
{
key: 'body',
label: '内容区'
}
];
_this.panelTitle = '自定义代码';
_this.panelBody = [
getSchemaTpl('fieldSet', {
title: 'HTML 内容',
body: [
{
label: 'HTML 内容',
name: 'html',
type: 'editor',
allowFullscreen: true
}
]
}),
getSchemaTpl('fieldSet', {
title: 'onMount',
body: [
{
name: 'onMount',
type: 'editor',
allowFullscreen: true,
size: 'xxl',
label: 'onMount 代码',
options: {
lineNumbers: 'off',
glyphMargin: false,
lineDecorationsWidth: 0,
lineNumbersMinChars: 0
}
}
]
}),
getSchemaTpl('fieldSet', {
title: 'onUpdate',
body: [
{
name: 'onUpdate',
type: 'editor',
allowFullscreen: true,
size: 'xxl',
label: 'onUpdate 代码'
}
]
}),
getSchemaTpl('fieldSet', {
title: 'onUnmount',
body: [
{
name: 'onUnmount',
type: 'editor',
allowFullscreen: true,
size: 'xxl',
label: 'onUnmount 代码'
}
]
})
];
return _this;
}
/**
* 备注: 根据当前custom组件的schema中是否有body元素来启动容器模式用于实现custom组件实现自定义容器类型
*/
CustomPlugin.prototype.getRendererInfo = function (context) {
var plugin = this;
var renderer = context.renderer, schema = context.schema;
if (schema.$$id &&
plugin.name &&
plugin.rendererName &&
plugin.rendererName === renderer.name) {
var regions = plugin.regions;
if (!regions && schema && schema.body && isArray(schema.body)) {
regions = [
{
key: 'body',
label: '自定义容器区'
}
];
}
return {
name: plugin.name,
regions: regions,
patchContainers: plugin.patchContainers,
// wrapper: plugin.wrapper,
vRendererConfig: plugin.vRendererConfig,
wrapperProps: plugin.wrapperProps,
wrapperResolve: plugin.wrapperResolve,
filterProps: plugin.filterProps,
$schema: plugin.$schema,
renderRenderer: plugin.renderRenderer,
multifactor: plugin.multifactor,
scaffoldForm: plugin.scaffoldForm,
disabledRendererPlugin: plugin.disabledRendererPlugin,
isBaseComponent: plugin.isBaseComponent,
rendererName: plugin.rendererName
};
}
};
return CustomPlugin;
}(BasePlugin));
export { CustomPlugin };
registerEditorPlugin(CustomPlugin);

View File

@ -0,0 +1,21 @@
import { BaseEventContext, BasePlugin } from 'amis-editor-core';
export declare class DatePlugin extends BasePlugin {
rendererName: string;
$schema: string;
name: string;
isBaseComponent: boolean;
description: string;
tags: string[];
icon: string;
scaffold: {
type: string;
value: number;
};
previewSchema: {
format: string;
value: number;
type: string;
};
panelTitle: string;
panelBodyCreator: (context: BaseEventContext) => any[];
}

View File

@ -0,0 +1,73 @@
import { __assign, __extends } from "tslib";
import { registerEditorPlugin } from 'amis-editor-core';
import { BasePlugin } from 'amis-editor-core';
import { defaultValue, getSchemaTpl } from 'amis-editor-core';
var DatePlugin = /** @class */ (function (_super) {
__extends(DatePlugin, _super);
function DatePlugin() {
var _this = _super !== null && _super.apply(this, arguments) || this;
// 关联渲染器名字
_this.rendererName = 'date';
_this.$schema = '/schemas/DateSchema.json';
// 组件名称
_this.name = '日期展示';
_this.isBaseComponent = true;
_this.description = '主要用来关联字段名做日期展示支持各种格式如X时间戳YYYY-MM-DD HH:mm:ss。';
_this.tags = ['展示'];
_this.icon = 'fa fa-calendar';
_this.scaffold = {
type: 'date',
value: Math.round(Date.now() / 1000)
};
_this.previewSchema = __assign(__assign({}, _this.scaffold), { format: 'YYYY-MM-DD', value: Math.round(Date.now() / 1000) });
_this.panelTitle = '日期展示';
_this.panelBodyCreator = function (context) {
return [
getSchemaTpl('tabs', [
{
title: '常规',
body: [
{
type: 'input-date',
name: 'value',
label: '日期数值'
},
{
type: 'input-text',
name: 'format',
label: '显示日期格式',
description: '请参考 moment 中的格式用法。',
pipeIn: defaultValue('YYYY-MM-DD')
},
{
type: 'input-text',
name: 'valueFormat',
label: '数据日期格式',
description: '请参考 moment 中的格式用法。',
pipeIn: defaultValue('X')
},
{
name: 'placeholder',
type: 'input-text',
pipeIn: defaultValue('-'),
label: '占位符'
}
]
},
{
title: '外观',
body: [getSchemaTpl('className')]
},
{
title: '显隐',
body: [getSchemaTpl('ref'), getSchemaTpl('visible')]
}
])
];
};
return _this;
}
return DatePlugin;
}(BasePlugin));
export { DatePlugin };
registerEditorPlugin(DatePlugin);

View File

@ -0,0 +1,17 @@
import { BaseEventContext } from 'amis-editor-core';
import { DatePlugin } from './Date';
export declare class DatetimePlugin extends DatePlugin {
rendererName: string;
scaffold: {
type: string;
value: number;
};
name: string;
isBaseComponent: boolean;
previewSchema: {
format: string;
value: number;
type: string;
};
panelBodyCreator: (context: BaseEventContext) => any[];
}

View File

@ -0,0 +1,67 @@
import { __assign, __extends } from "tslib";
import { registerEditorPlugin } from 'amis-editor-core';
import { defaultValue, getSchemaTpl } from 'amis-editor-core';
import { DatePlugin } from './Date';
var DatetimePlugin = /** @class */ (function (_super) {
__extends(DatetimePlugin, _super);
function DatetimePlugin() {
var _this = _super !== null && _super.apply(this, arguments) || this;
// 关联渲染器名字
_this.rendererName = 'datetime';
_this.scaffold = {
type: 'datetime',
value: Math.round(Date.now() / 1000)
};
_this.name = '日期时间展示';
_this.isBaseComponent = true;
_this.previewSchema = __assign(__assign({}, _this.scaffold), { format: 'YYYY-MM-DD HH:mm:ss', value: Math.round(Date.now() / 1000) });
_this.panelBodyCreator = function (context) {
return [
getSchemaTpl('tabs', [
{
title: '常规',
body: [
{
type: 'input-datetime',
name: 'value',
label: '日期时间数值'
},
{
type: 'input-text',
name: 'format',
label: '显示日期时间格式',
description: '请参考 moment 中的格式用法。',
pipeIn: defaultValue('YYYY-MM-DD HH:mm:ss')
},
{
type: 'input-text',
name: 'valueFormat',
label: '数据日期格式',
description: '请参考 moment 中的格式用法。',
pipeIn: defaultValue('X')
},
{
name: 'placeholder',
type: 'input-text',
pipeIn: defaultValue('-'),
label: '占位符'
}
]
},
{
title: '外观',
body: [getSchemaTpl('className')]
},
{
title: '显隐',
body: [getSchemaTpl('ref'), getSchemaTpl('visible')]
}
])
];
};
return _this;
}
return DatetimePlugin;
}(DatePlugin));
export { DatetimePlugin };
registerEditorPlugin(DatetimePlugin);

View File

@ -0,0 +1,31 @@
import React from 'react';
import { BaseEventContext, BasePlugin, RegionConfig } from 'amis-editor-core';
export declare class DialogPlugin extends BasePlugin {
rendererName: string;
$schema: string;
name: string;
isBaseComponent: boolean;
wrapperProps: {
wrapperComponent: typeof InlineModal;
onClose: typeof import("amis-core").noop;
show: boolean;
};
regions: Array<RegionConfig>;
events: {
eventName: string;
eventLabel: string;
description: string;
}[];
actions: {
actionType: string;
actionLabel: string;
description: string;
}[];
panelTitle: string;
panelBodyCreator: (context: BaseEventContext) => any;
buildSubRenderers(): void;
}
export declare class InlineModal extends React.Component<any, any> {
componentDidMount(): void;
render(): JSX.Element;
}

View File

@ -0,0 +1,202 @@
import { __assign, __extends } from "tslib";
import React from 'react';
import { registerEditorPlugin } from 'amis-editor-core';
import { BasePlugin } from 'amis-editor-core';
import { defaultValue, getSchemaTpl } from 'amis-editor-core';
import { noop } from 'amis-editor-core';
import { getEventControlConfig } from '../util';
var DialogPlugin = /** @class */ (function (_super) {
__extends(DialogPlugin, _super);
function DialogPlugin() {
var _this = _super !== null && _super.apply(this, arguments) || this;
// 关联渲染器名字
_this.rendererName = 'dialog';
_this.$schema = '/schemas/DialogSchema.json';
// 组件名称
_this.name = '弹框';
_this.isBaseComponent = true;
_this.wrapperProps = {
wrapperComponent: InlineModal,
onClose: noop,
show: true
};
_this.regions = [
{
key: 'body',
label: '内容区',
renderMethod: 'renderBody',
renderMethodOverride: function (regions, insertRegion) {
return function () {
var args = [];
for (var _i = 0; _i < arguments.length; _i++) {
args[_i] = arguments[_i];
}
var info = this.props.$$editor;
var dom = this.super.apply(this, args);
if (info && args[1] === 'body') {
return insertRegion(this, dom, regions, info, info.plugin.manager);
}
return dom;
};
}
},
{
key: 'actions',
label: '按钮组',
renderMethod: 'renderFooter',
wrapperResolve: function (dom) { return dom; }
}
];
// 现在没用,后面弹窗优化后有用
_this.events = [
{
eventName: 'confirm',
eventLabel: '确认',
description: '确认'
},
{
eventName: 'cancel',
eventLabel: '取消',
description: '取消'
}
];
_this.actions = [
{
actionType: 'confirm',
actionLabel: '确认',
description: '确认操作'
},
{
actionType: 'cancel',
actionLabel: '取消',
description: '取消操作'
},
{
actionType: 'setValue',
actionLabel: '更新数据',
description: '触发组件数据更新'
}
];
_this.panelTitle = '弹框';
_this.panelBodyCreator = function (context) {
return getSchemaTpl('tabs', [
{
title: '常规',
body: [
{
label: '标题',
type: 'input-text',
name: 'title'
},
getSchemaTpl('switch', {
label: '数据映射',
name: 'data',
className: 'block m-b-xs',
pipeIn: function (value) { return !!value; },
pipeOut: function (value) { return (value ? { '&': '$$' } : null); }
}),
{
type: 'tpl',
visibleOn: '!this.data',
tpl: '<p class="text-sm text-muted">当没开启数据映射时,弹框中默认会拥有触发打开弹框按钮所在环境的所有数据。</p>'
},
{
type: 'input-kv',
syncDefaultValue: false,
name: 'data',
visibleOn: 'this.data',
descriptionClassName: 'help-block text-xs m-b-none',
description: '<p>当开启数据映射时,弹框中的数据只会包含设置的部分,请绑定数据。如:<code>{"a": "\\${a}", "b": 2}</code></p><p>如果希望在默认的基础上定制,请先添加一个 Key 为 `&` Value 为 `\\$$` 作为第一行。</p><div>当值为 <code>__undefined</code>时,表示删除对应的字段,可以结合<code>{"&": "\\$$"}</code>来达到黑名单效果。</div>',
messages: {
validateFailed: '数据映射中存在错误,请仔细检查'
}
},
getSchemaTpl('switch', {
label: '按 Esc 关闭弹框',
name: 'closeOnEsc',
value: false
}),
getSchemaTpl('switch', {
label: '点击弹框外区域关闭弹框',
name: 'closeOnOutside',
value: false
})
]
},
{
title: '外观',
body: [
{
label: '尺寸',
type: 'button-group-select',
name: 'size',
size: 'sm',
className: 'block',
pipeIn: defaultValue(''),
options: [
{
label: '小',
value: 'sm'
},
{
label: '默认',
value: ''
},
{
label: '中',
value: 'md'
},
{
label: '大',
value: 'lg'
},
{
label: '超大',
value: 'xl'
}
]
},
getSchemaTpl('switch', {
label: '是否显示关闭按钮',
name: 'showCloseButton',
value: true
}),
getSchemaTpl('className', {
name: 'headerClassName',
label: '顶部 CSS 类名'
}),
getSchemaTpl('className', {
name: 'bodyClassName',
label: '内容 CSS 类名'
})
]
},
{
title: '事件',
className: 'p-none',
body: [
getSchemaTpl('eventControl', __assign({ name: 'onEvent' }, getEventControlConfig(_this.manager, context)))
]
}
]);
};
return _this;
}
DialogPlugin.prototype.buildSubRenderers = function () { };
return DialogPlugin;
}(BasePlugin));
export { DialogPlugin };
registerEditorPlugin(DialogPlugin);
var InlineModal = /** @class */ (function (_super) {
__extends(InlineModal, _super);
function InlineModal() {
return _super !== null && _super.apply(this, arguments) || this;
}
InlineModal.prototype.componentDidMount = function () { };
InlineModal.prototype.render = function () {
var children = this.props.children;
return React.createElement("div", { className: "ae-InlineModel" }, children);
};
return InlineModal;
}(React.Component));
export { InlineModal };

View File

@ -0,0 +1,15 @@
import { BasePlugin } from 'amis-editor-core';
export declare class DividerPlugin extends BasePlugin {
rendererName: string;
$schema: string;
name: string;
isBaseComponent: boolean;
icon: string;
description: string;
scaffold: {
type: string;
};
previewSchema: any;
panelTitle: string;
panelBody: any;
}

View File

@ -0,0 +1,40 @@
import { __extends } from "tslib";
import { registerEditorPlugin } from 'amis-editor-core';
import { BasePlugin } from 'amis-editor-core';
import { getSchemaTpl } from 'amis-editor-core';
var DividerPlugin = /** @class */ (function (_super) {
__extends(DividerPlugin, _super);
function DividerPlugin() {
var _this = _super !== null && _super.apply(this, arguments) || this;
// 关联渲染器名字
_this.rendererName = 'divider';
_this.$schema = '/schemas/DividerSchema.json';
// 组件名称
_this.name = '分隔线';
_this.isBaseComponent = true;
_this.icon = 'fa fa-minus';
_this.description = '用来展示一个分割线,可用来做视觉上的隔离。';
_this.scaffold = {
type: 'divider'
};
_this.previewSchema = {
type: 'divider',
className: 'm-t-none m-b-none'
};
_this.panelTitle = '分隔线';
_this.panelBody = getSchemaTpl('tabs', [
{
title: '外观',
body: [getSchemaTpl('className')]
},
{
title: '显隐',
body: [getSchemaTpl('ref'), getSchemaTpl('visible')]
}
]);
return _this;
}
return DividerPlugin;
}(BasePlugin));
export { DividerPlugin };
registerEditorPlugin(DividerPlugin);

View File

@ -0,0 +1,28 @@
import { BaseEventContext, BasePlugin, RegionConfig } from 'amis-editor-core';
import { InlineModal } from './Dialog';
export declare class DrawerPlugin extends BasePlugin {
rendererName: string;
$schema: string;
name: string;
isBaseComponent: boolean;
wrapperProps: {
wrapperComponent: typeof InlineModal;
onClose: typeof import("amis-core").noop;
resizable: boolean;
show: boolean;
};
regions: Array<RegionConfig>;
events: {
eventName: string;
eventLabel: string;
description: string;
}[];
actions: {
actionType: string;
actionLabel: string;
description: string;
}[];
panelTitle: string;
panelBodyCreator: (context: BaseEventContext) => any;
buildSubRenderers(): void;
}

View File

@ -0,0 +1,232 @@
import { __assign, __extends } from "tslib";
import { registerEditorPlugin } from 'amis-editor-core';
import { BasePlugin } from 'amis-editor-core';
import { defaultValue, getSchemaTpl } from 'amis-editor-core';
import { noop } from 'amis-editor-core';
import { getEventControlConfig } from '../util';
import { InlineModal } from './Dialog';
var DrawerPlugin = /** @class */ (function (_super) {
__extends(DrawerPlugin, _super);
function DrawerPlugin() {
var _this = _super !== null && _super.apply(this, arguments) || this;
// 关联渲染器名字
_this.rendererName = 'drawer';
_this.$schema = '/schemas/DrawerSchema.json';
// 组件名称
_this.name = '抽屉式弹框';
_this.isBaseComponent = true;
_this.wrapperProps = {
wrapperComponent: InlineModal,
onClose: noop,
resizable: false,
show: true
};
_this.regions = [
{
key: 'body',
label: '内容区',
renderMethod: 'renderBody',
renderMethodOverride: function (regions, insertRegion) {
return function () {
var args = [];
for (var _i = 0; _i < arguments.length; _i++) {
args[_i] = arguments[_i];
}
var info = this.props.$$editor;
var dom = this.super.apply(this, args);
if (info && args[1] === 'body') {
return insertRegion(this, dom, regions, info, info.plugin.manager);
}
return dom;
};
}
},
{
key: 'actions',
label: '按钮组',
renderMethod: 'renderFooter',
wrapperResolve: function (dom) { return dom; }
}
];
// 现在没用,后面弹窗优化后有用
_this.events = [
{
eventName: 'confirm',
eventLabel: '确认',
description: '确认'
},
{
eventName: 'cancel',
eventLabel: '取消',
description: '取消'
}
];
_this.actions = [
{
actionType: 'confirm',
actionLabel: '确认',
description: '确认操作'
},
{
actionType: 'cancel',
actionLabel: '取消',
description: '取消操作'
},
{
actionType: 'setValue',
actionLabel: '更新数据',
description: '触发组件数据更新'
}
];
_this.panelTitle = '弹框';
_this.panelBodyCreator = function (context) {
return getSchemaTpl('tabs', [
{
title: '常规',
body: [
{
label: '标题',
type: 'input-text',
name: 'title'
},
// {
// children: (
// <Button
// size="sm"
// className="m-b-sm"
// level="info"
// block
// onClick={() => this.manager.showInsertPanel('body')}
// >
// 新增内容
// </Button>
// )
// },
{
type: 'divider'
},
{
label: '位置',
type: 'button-group-select',
name: 'position',
value: 'right',
size: 'sm',
mode: 'inline',
className: 'block',
options: [
{
label: '左',
value: 'left'
},
{
label: '上',
value: 'top'
},
{
label: '右',
value: 'right'
},
{
label: '下',
value: 'bottom'
}
],
description: '定义弹框从什么位置呼出'
},
getSchemaTpl('switch', {
label: '数据映射',
name: 'data',
className: 'm-b-xs',
pipeIn: function (value) { return !!value; },
pipeOut: function (value) { return (value ? { '&': '$$' } : null); }
}),
{
type: 'tpl',
visibleOn: '!this.data',
tpl: '<p class="text-sm text-muted">当没开启数据映射时,弹框中默认会拥有触发打开弹框按钮所在环境的所有数据。</p>'
},
{
type: 'input-kv',
syncDefaultValue: false,
name: 'data',
visibleOn: 'this.data',
descriptionClassName: 'help-block text-xs m-b-none',
description: '<p>当开启数据映射时,弹框中的数据只会包含设置的部分,请绑定数据。如:<code>{"a": "\\${a}", "b": 2}</code></p><p>如果希望在默认的基础上定制,请先添加一个 Key 为 `&` Value 为 `\\$$` 作为第一行。</p><div>当值为 <code>__undefined</code>时,表示删除对应的字段,可以结合<code>{"&": "\\$$"}</code>来达到黑名单效果。</div>'
},
getSchemaTpl('switch', {
name: 'closeOnOutside',
label: '点击外部关闭弹框'
}),
getSchemaTpl('switch', {
label: '按 Esc 可关闭',
name: 'closeOnEsc'
})
]
},
{
title: '外观',
body: [
{
label: '尺寸',
type: 'button-group-select',
name: 'size',
size: 'sm',
mode: 'inline',
className: 'block',
options: [
{
label: '超小',
value: 'xs'
},
{
label: '小',
value: 'sm'
},
{
label: '中',
value: 'md'
},
{
label: '大',
value: 'lg'
},
{
label: '超大',
value: 'xl'
}
]
},
getSchemaTpl('switch', {
name: 'overlay',
label: '是否显示蒙层',
pipeIn: defaultValue(true)
}),
getSchemaTpl('switch', {
name: 'resizable',
label: '可拉拽',
description: '定义弹框是否可拉拽调整大小',
pipeIn: defaultValue(false)
}),
getSchemaTpl('className'),
getSchemaTpl('className', {
label: 'bodyClassName 类名',
name: 'bodyClassName'
})
]
},
{
title: '事件',
className: 'p-none',
body: [
getSchemaTpl('eventControl', __assign({ name: 'onEvent' }, getEventControlConfig(_this.manager, context)))
]
}
]);
};
return _this;
}
DrawerPlugin.prototype.buildSubRenderers = function () { };
return DrawerPlugin;
}(BasePlugin));
export { DrawerPlugin };
registerEditorPlugin(DrawerPlugin);

View File

@ -0,0 +1,44 @@
import { BaseEventContext, BasePlugin, BasicToolbarItem, ContextMenuEventContext, ContextMenuItem } from 'amis-editor-core';
export declare class DropDownButtonPlugin extends BasePlugin {
rendererName: string;
$schema: string;
name: string;
isBaseComponent: boolean;
description: string;
tags: string[];
icon: string;
docLink: string;
scaffold: {
type: string;
label: string;
buttons: {
onEvent: {
click: {
actions: never[];
};
};
type: string;
label: string;
}[];
};
previewSchema: {
type: string;
label: string;
buttons: {
onEvent: {
click: {
actions: never[];
};
};
type: string;
label: string;
}[];
};
panelTitle: string;
panelJustify: boolean;
panelBodyCreator: (context: BaseEventContext) => any;
buildEditorToolbar({ id, info }: BaseEventContext, toolbars: Array<BasicToolbarItem>): void;
editDetail(id: string): void;
buildEditorContextMenu({ id, schema, region, info, selections }: ContextMenuEventContext, menus: Array<ContextMenuItem>): void;
filterProps(props: any): any;
}

View File

@ -0,0 +1,217 @@
import { __assign, __extends } from "tslib";
import { Button } from 'amis';
import React from 'react';
import { registerEditorPlugin } from 'amis-editor-core';
import { BasePlugin } from 'amis-editor-core';
import { defaultValue, getSchemaTpl } from 'amis-editor-core';
import { diff } from 'amis-editor-core';
import { BUTTON_DEFAULT_ACTION, tipedLabel } from '../component/BaseControl';
var DropDownButtonPlugin = /** @class */ (function (_super) {
__extends(DropDownButtonPlugin, _super);
function DropDownButtonPlugin() {
var _this = _super !== null && _super.apply(this, arguments) || this;
// 关联渲染器名字
_this.rendererName = 'dropdown-button';
_this.$schema = '/schemas/DropdownButtonSchema.json';
// 组件名称
_this.name = '下拉按钮';
_this.isBaseComponent = true;
_this.description = '下拉按钮,更多的按钮通过点击后展示开来。';
_this.tags = ['按钮'];
_this.icon = 'fa fa-chevron-down';
_this.docLink = '/amis/zh-CN/components/dropdown-button';
_this.scaffold = {
type: 'dropdown-button',
label: '下拉按钮',
buttons: [
__assign({ type: 'button', label: '按钮1' }, BUTTON_DEFAULT_ACTION),
__assign({ type: 'button', label: '按钮2' }, BUTTON_DEFAULT_ACTION)
]
};
_this.previewSchema = __assign({}, _this.scaffold);
_this.panelTitle = '下拉按钮';
_this.panelJustify = true;
_this.panelBodyCreator = function (context) {
return getSchemaTpl('tabs', [
{
title: '属性',
body: getSchemaTpl('collapseGroup', [
{
title: '基本',
body: [
{
children: (React.createElement(Button, { level: "info", size: "sm", className: "m-b-sm", block: true, onClick: _this.editDetail.bind(_this, context.id) }, "\u914D\u7F6E\u4E0B\u62C9\u6309\u94AE\u96C6\u5408"))
},
{
label: '按钮文案',
type: 'input-text',
name: 'label'
},
{
type: 'button-group-select',
name: 'trigger',
label: '触发方式',
size: 'sm',
options: [
{
label: '点击',
value: 'click'
},
{
label: '鼠标经过',
value: 'hover'
}
],
pipeIn: defaultValue('click')
},
getSchemaTpl('switch', {
name: 'closeOnOutside',
label: '点击外部关闭',
pipeIn: defaultValue(true)
}),
getSchemaTpl('switch', {
name: 'closeOnClick',
label: '点击内容关闭'
}),
getSchemaTpl('switch', {
label: tipedLabel('默认展开', '选择后下拉菜单会默认展开'),
name: 'defaultIsOpened'
}),
{
type: 'button-group-select',
name: 'align',
label: '菜单对齐方式',
size: 'sm',
options: [
{
label: '左对齐',
value: 'left'
},
{
label: '右对齐',
value: 'right'
}
],
pipeIn: defaultValue('left')
}
]
},
getSchemaTpl('status', {
disabled: true
})
])
},
{
title: '外观',
body: [
getSchemaTpl('collapseGroup', [
{
title: '基本',
body: [
getSchemaTpl('size', {
label: '尺寸',
pipeIn: defaultValue('md')
}),
getSchemaTpl('switch', {
name: 'block',
label: tipedLabel('块状显示', '选择后按钮占满父容器宽度')
}),
getSchemaTpl('buttonLevel', {
label: '展示样式',
name: 'level'
})
]
},
{
title: '图标',
body: [
// getSchemaTpl('switch', {
// label: '只显示 icon',
// name: 'iconOnly'
// }),
getSchemaTpl('switch', {
label: '隐藏下拉图标',
name: 'hideCaret'
}),
getSchemaTpl('icon', {
label: '左侧图标'
}),
getSchemaTpl('icon', {
name: 'rightIcon',
label: '右侧图标'
})
]
},
getSchemaTpl('style:classNames', {
isFormItem: false,
schema: [
getSchemaTpl('className', {
name: 'btnClassName',
label: '按钮'
}),
getSchemaTpl('className', {
name: 'menuClassName',
label: '下拉菜单'
})
]
})
])
]
}
]);
};
return _this;
}
DropDownButtonPlugin.prototype.buildEditorToolbar = function (_a, toolbars) {
var id = _a.id, info = _a.info;
if (info.renderer.name === 'dropdown-button') {
toolbars.push({
icon: 'fa fa-expand',
order: 100,
tooltip: '配置下拉按钮集合',
onClick: this.editDetail.bind(this, id)
});
}
};
DropDownButtonPlugin.prototype.editDetail = function (id) {
var manager = this.manager;
var store = manager.store;
var node = store.getNodeById(id);
var value = store.getValueOf(id);
node &&
value &&
this.manager.openSubEditor({
title: '配置下拉按钮集合',
value: value.buttons,
slot: {
type: 'button-group',
buttons: '$$',
block: true
},
onChange: function (newValue) {
newValue = __assign(__assign({}, value), { buttons: newValue });
manager.panelChangeValue(newValue, diff(value, newValue));
}
});
};
DropDownButtonPlugin.prototype.buildEditorContextMenu = function (_a, menus) {
var id = _a.id, schema = _a.schema, region = _a.region, info = _a.info, selections = _a.selections;
if (selections.length || (info === null || info === void 0 ? void 0 : info.plugin) !== this) {
return;
}
if (info.renderer.name === 'dropdown-button') {
menus.push('|', {
label: '配置下拉按钮集合',
onSelect: this.editDetail.bind(this, id)
});
}
};
DropDownButtonPlugin.prototype.filterProps = function (props) {
// trigger 为 hover 会影响编辑体验。
props.trigger = 'click';
return props;
};
return DropDownButtonPlugin;
}(BasePlugin));
export { DropDownButtonPlugin };
registerEditorPlugin(DropDownButtonPlugin);

View File

@ -0,0 +1,35 @@
import { BaseEventContext, BasePlugin, BasicToolbarItem, ContextMenuEventContext, ContextMenuItem } from 'amis-editor-core';
export declare class EachPlugin extends BasePlugin {
rendererName: string;
$schema: string;
name: string;
isBaseComponent: boolean;
description: string;
tags: string[];
icon: string;
scaffold: {
type: string;
name: string;
items: {
type: string;
tpl: string;
inline: boolean;
};
};
previewSchema: {
value: string[];
type: string;
name: string;
items: {
type: string;
tpl: string;
inline: boolean;
};
};
panelTitle: string;
panelBodyCreator: (context: BaseEventContext) => any[];
filterProps(props: any): any;
buildEditorToolbar({ id, info }: BaseEventContext, toolbars: Array<BasicToolbarItem>): void;
buildEditorContextMenu({ id, schema, region, info, selections }: ContextMenuEventContext, menus: Array<ContextMenuItem>): void;
editDetail(id: string): void;
}

View File

@ -0,0 +1,119 @@
import { __assign, __extends } from "tslib";
import { Button } from 'amis';
import React from 'react';
import { registerEditorPlugin } from 'amis-editor-core';
import { BasePlugin } from 'amis-editor-core';
import { defaultValue, getSchemaTpl } from 'amis-editor-core';
import { diff, JSONPipeOut } from 'amis-editor-core';
var EachPlugin = /** @class */ (function (_super) {
__extends(EachPlugin, _super);
function EachPlugin() {
var _this = _super !== null && _super.apply(this, arguments) || this;
// 关联渲染器名字
_this.rendererName = 'each';
_this.$schema = '/schemas/EachSchema.json';
// 组件名称
_this.name = '循环 Each';
_this.isBaseComponent = true;
_this.description = '功能渲染器,可以基于现有变量循环输出渲染器。';
_this.tags = ['功能'];
_this.icon = 'fa fa-repeat';
_this.scaffold = {
type: 'each',
name: 'arr',
items: {
type: 'tpl',
tpl: '<%= data.index + 1 %>. 内容:<%= data.item %>',
inline: false
}
};
_this.previewSchema = __assign(__assign({}, _this.scaffold), { value: ['a', 'b', 'c'] });
_this.panelTitle = '循环';
_this.panelBodyCreator = function (context) {
return [
{
type: 'input-text',
name: 'name',
label: '关联字段',
placeholder: 'varname',
description: '如果所在容器有下发 value 则不需要配置如果没有请配置变量名支持多层级如a.b表示关联a对象下的b属性。目标变量可以是数组也可以是对象。'
},
{
children: (React.createElement(Button, { size: "sm", level: "danger", className: "m-b", block: true, onClick: _this.editDetail.bind(_this, context.id) }, "\u914D\u7F6E\u6210\u5458\u6E32\u67D3\u5668"))
},
{
name: 'placeholder',
type: 'input-text',
label: '占位符',
pipeIn: defaultValue('暂无内容'),
description: '当没有关联变量,或者目标变量不是数组或者对象时显示此占位信息'
},
getSchemaTpl('className')
];
};
return _this;
}
EachPlugin.prototype.filterProps = function (props) {
props = JSONPipeOut(props);
// 至少显示一个成员,否则啥都不显示。
if (!props.value) {
props.value = [
{
item: 'mocked data'
}
];
}
return props;
};
EachPlugin.prototype.buildEditorToolbar = function (_a, toolbars) {
var id = _a.id, info = _a.info;
if (info.renderer.name === 'each') {
toolbars.push({
icon: 'fa fa-expand',
order: 100,
tooltip: '配置成员渲染器',
onClick: this.editDetail.bind(this, id)
});
}
};
EachPlugin.prototype.buildEditorContextMenu = function (_a, menus) {
var id = _a.id, schema = _a.schema, region = _a.region, info = _a.info, selections = _a.selections;
if (selections.length || (info === null || info === void 0 ? void 0 : info.plugin) !== this) {
return;
}
if (info.renderer.name === 'each') {
menus.push('|', {
label: '配置成员渲染器',
onSelect: this.editDetail.bind(this, id)
});
}
};
EachPlugin.prototype.editDetail = function (id) {
var manager = this.manager;
var store = manager.store;
var node = store.getNodeById(id);
var value = store.getValueOf(id);
node &&
value &&
this.manager.openSubEditor({
title: '配置成员渲染器',
value: value.items,
slot: {
type: 'container',
body: '$$'
},
typeMutable: true,
onChange: function (newValue) {
newValue = __assign(__assign({}, value), { items: newValue });
manager.panelChangeValue(newValue, diff(value, newValue));
},
data: {
item: 'mocked data',
index: 0
}
});
};
return EachPlugin;
}(BasePlugin));
export { EachPlugin };
registerEditorPlugin(EachPlugin);

View File

@ -0,0 +1,7 @@
import { BasePlugin } from 'amis-editor-core';
export declare class ErrorRendererPlugin extends BasePlugin {
order: number;
rendererName: string;
name: string;
isBaseComponent: boolean;
}

View File

@ -0,0 +1,19 @@
import { __extends } from "tslib";
import { registerEditorPlugin } from 'amis-editor-core';
import { BasePlugin } from 'amis-editor-core';
var ErrorRendererPlugin = /** @class */ (function (_super) {
__extends(ErrorRendererPlugin, _super);
function ErrorRendererPlugin() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.order = -9999;
// 关联渲染器名字
_this.rendererName = 'error';
// 组件名称
_this.name = 'Error';
_this.isBaseComponent = true;
return _this;
}
return ErrorRendererPlugin;
}(BasePlugin));
export { ErrorRendererPlugin };
registerEditorPlugin(ErrorRendererPlugin);

View File

@ -0,0 +1,30 @@
import { BasePlugin, PluginEvent, RegionConfig, RendererJSONSchemaResolveEventContext } from 'amis-editor-core';
export declare class FlexPlugin extends BasePlugin {
rendererName: string;
$schema: string;
disabledRendererPlugin: boolean;
name: string;
isBaseComponent: boolean;
icon: string;
description: string;
docLink: string;
tags: string[];
scaffold: {
type: string;
items: {
type: string;
body: string;
}[];
};
previewSchema: {
type: string;
items: {
type: string;
body: string;
}[];
};
panelTitle: string;
panelBody: any[];
regions: Array<RegionConfig>;
afterResolveJsonSchema(event: PluginEvent<RendererJSONSchemaResolveEventContext>): void;
}

View File

@ -0,0 +1,197 @@
import { __assign, __extends, __spreadArray } from "tslib";
/**
* @file Flex 布局
*/
import { registerEditorPlugin } from 'amis-editor-core';
import { BasePlugin } from 'amis-editor-core';
import { getSchemaTpl } from 'amis-editor-core';
var FlexPlugin = /** @class */ (function (_super) {
__extends(FlexPlugin, _super);
function FlexPlugin() {
var _this = _super !== null && _super.apply(this, arguments) || this;
// 关联渲染器名字
_this.rendererName = 'flex';
_this.$schema = '/schemas/FlexSchema.json';
_this.disabledRendererPlugin = true;
// 组件名称
_this.name = 'Flex 布局';
_this.isBaseComponent = true;
_this.icon = 'fa fa-columns';
_this.description = 'flex 布局';
_this.docLink = '/amis/zh-CN/components/flex';
_this.tags = ['容器'];
_this.scaffold = {
type: 'flex',
items: [
{
type: 'wrapper',
body: '第一列'
},
{
type: 'wrapper',
body: '第二列'
},
{
type: 'wrapper',
body: '第三列'
}
]
};
_this.previewSchema = __assign({}, _this.scaffold);
_this.panelTitle = 'Flex';
_this.panelBody = [
getSchemaTpl('tabs', [
{
title: '属性',
className: 'p-none',
body: [
getSchemaTpl('collapseGroup', [
{
title: '布局',
body: [
{
name: 'justify',
type: 'select',
value: 'center',
label: '子节点水平分布方式',
menuTpl: "<div class='flex justify-between'><span>${label}</span><span class='text-muted text-sm'>${value}</span></div>",
options: [
{
label: '起始端对齐',
value: 'flex-start'
},
{
label: '居中对齐',
value: 'center'
},
{
label: '末尾端对齐',
value: 'flex-end'
},
{
label: '均匀分布(首尾留空)',
value: 'space-around'
},
{
label: '均匀分布(首尾对齐)',
value: 'space-between'
},
{
label: '均匀分布(元素等间距)',
value: 'space-evenly'
},
{
label: '均匀分布(自动拉伸)',
value: 'stretch'
}
]
},
{
name: 'alignItems',
type: 'select',
value: 'center',
label: '子节点垂直方向位置',
menuTpl: "<div class='flex justify-between'><span>${label}</span><span class='text-muted text-sm'>${value}</span></div>",
options: [
{
label: '起始端对齐',
value: 'flex-start'
},
{
label: '居中对齐',
value: 'center'
},
{
label: '末尾端对齐',
value: 'flex-end'
},
{
label: '基线对齐',
value: 'baseline'
},
{
label: '自动拉伸',
value: 'stretch'
}
]
},
{
name: 'direction',
type: 'button-group-select',
size: 'sm',
label: '布局方向',
value: 'row',
mode: 'row',
options: [
{ label: '水平', value: 'row' },
{ label: '垂直', value: 'column' }
]
}
]
},
{
title: '子节点管理',
body: [
{
name: 'items',
label: false,
type: 'combo',
scaffold: {
type: 'wrapper',
body: '子节点内容'
},
minLength: 2,
multiple: true,
// draggable: true,
draggableTip: '',
items: [
{
type: 'tpl',
tpl: '<span class="label label-default">子节点${index | plus}</span>'
}
]
}
]
}
])
]
},
{
title: '外观',
className: 'p-none',
body: getSchemaTpl('collapseGroup', __spreadArray(__spreadArray([], getSchemaTpl('style:common', ['display']), true), [
{
title: 'CSS 类名',
body: [getSchemaTpl('className', { label: '外层CSS类名' })]
}
], false))
},
{
title: '状态',
body: [getSchemaTpl('visible'), getSchemaTpl('disabled')]
}
])
];
_this.regions = [
{
key: 'items',
label: '子节点集合',
// 复写渲染器里面的 render 方法
renderMethod: 'render',
dndMode: 'position-h'
}
];
return _this;
}
FlexPlugin.prototype.afterResolveJsonSchema = function (event) {
var _a, _b;
var context = event.context;
var parent = (_a = context.node.parent) === null || _a === void 0 ? void 0 : _a.host;
if (((_b = parent === null || parent === void 0 ? void 0 : parent.info) === null || _b === void 0 ? void 0 : _b.plugin) === this) {
event.setData('/schemas/FlexColumn.json');
}
};
return FlexPlugin;
}(BasePlugin));
export { FlexPlugin };
registerEditorPlugin(FlexPlugin);

View File

@ -0,0 +1,27 @@
import { BasePlugin, BaseEventContext } from 'amis-editor-core';
import { RendererAction, RendererEvent } from 'amis-editor-comp/dist/renderers/event-action';
export declare class ButtonGroupControlPlugin extends BasePlugin {
rendererName: string;
$schema: string;
name: string;
isBaseComponent: boolean;
icon: string;
description: string;
docLink: string;
tags: string[];
scaffold: {
type: string;
name: string;
options: {
label: string;
value: string;
}[];
};
previewSchema: any;
notRenderFormZone: boolean;
panelTitle: string;
events: RendererEvent[];
actions: RendererAction[];
panelJustify: boolean;
panelBodyCreator: (context: BaseEventContext) => any[];
}

View File

@ -0,0 +1,152 @@
import { __assign, __extends } from "tslib";
import { registerEditorPlugin } from 'amis-editor-core';
import { BasePlugin } from 'amis-editor-core';
import { getSchemaTpl } from 'amis-editor-core';
import { formItemControl } from '../../component/BaseControl';
var ButtonGroupControlPlugin = /** @class */ (function (_super) {
__extends(ButtonGroupControlPlugin, _super);
function ButtonGroupControlPlugin() {
var _this = _super !== null && _super.apply(this, arguments) || this;
// 关联渲染器名字
_this.rendererName = 'button-group-select';
_this.$schema = '/schemas/ButtonGroupControlSchema.json';
// 组件名称
_this.name = '按钮点选';
_this.isBaseComponent = true;
_this.icon = 'fa fa-object-group';
_this.description = '用来展示多个按钮,视觉上会作为一个整体呈现,同时可以作为表单项选项选择器来用。';
_this.docLink = '/amis/zh-CN/components/button-group';
_this.tags = ['按钮'];
_this.scaffold = {
type: 'button-group-select',
name: 'a',
options: [
{
label: '选项1',
value: 'a'
},
{
label: '选项2',
value: 'b'
}
]
};
_this.previewSchema = {
type: 'form',
wrapWithPanel: false,
mode: 'horizontal',
body: __assign(__assign({}, _this.scaffold), { value: 'a', label: '按钮点选', description: '按钮点选可以当选项用。' })
};
_this.notRenderFormZone = true;
_this.panelTitle = '按钮点选';
// 事件定义
_this.events = [
{
eventName: 'change',
eventLabel: '值变化',
description: '选中值变化时触发',
dataSchema: [
{
type: 'object',
properties: {
'event.data.value': {
type: 'string',
title: '选中值'
}
}
}
]
}
];
// 动作定义
_this.actions = [
{
actionType: 'clear',
actionLabel: '清空',
description: '清除选中值'
},
{
actionType: 'reset',
actionLabel: '重置',
description: '将值重置为resetValue若没有配置resetValue则清空'
},
{
actionType: 'reload',
actionLabel: '重新加载',
description: '触发组件数据刷新并重新渲染'
},
{
actionType: 'setValue',
actionLabel: '赋值',
description: '触发组件数据更新'
}
];
_this.panelJustify = true;
_this.panelBodyCreator = function (context) {
return formItemControl({
common: {
replace: true,
body: [
getSchemaTpl('formItemName', {
required: true
}),
getSchemaTpl('label'),
// getSchemaTpl('value'),
getSchemaTpl('valueFormula', {
rendererSchema: context === null || context === void 0 ? void 0 : context.schema,
useSelectMode: true // 改用 Select 设置模式
}),
getSchemaTpl('clearable'),
getSchemaTpl('multiple'),
getSchemaTpl('extractValue')
]
},
option: {
title: '按钮管理',
body: [getSchemaTpl('optionControlV2'), getSchemaTpl('autoFill')]
},
style: {
// reverse: true,
body: [
getSchemaTpl('size'),
getSchemaTpl('buttonLevel', {
label: '按钮样式',
name: 'btnLevel'
}),
{
type: 'button-group-select',
name: 'vertical',
label: '布局方向',
value: false,
options: [
{
label: '水平',
value: false
},
{
label: '垂直',
value: true
}
]
},
{
type: 'switch',
name: 'tiled',
label: '平铺模式',
value: false
},
getSchemaTpl('buttonLevel', {
label: '按钮选中样式',
name: 'btnActiveLevel'
})
]
},
status: {}
}, context);
};
return _this;
}
return ButtonGroupControlPlugin;
}(BasePlugin));
export { ButtonGroupControlPlugin };
registerEditorPlugin(ButtonGroupControlPlugin);

View File

@ -0,0 +1,28 @@
import { BasePlugin, RegionConfig, BaseEventContext } from 'amis-editor-core';
export declare class ButtonToolbarControlPlugin extends BasePlugin {
rendererName: string;
$schema: string;
name: string;
isBaseComponent: boolean;
icon: string;
description: string;
docLink: string;
tags: string[];
scaffold: {
type: string;
buttons: {
onEvent: {
click: {
actions: never[];
};
};
type: string;
label: string;
}[];
};
previewSchema: any;
regions: Array<RegionConfig>;
notRenderFormZone: boolean;
panelTitle: string;
panelBodyCreator: (context: BaseEventContext) => any[];
}

View File

@ -0,0 +1,98 @@
import { __assign, __extends } from "tslib";
import { registerEditorPlugin } from 'amis-editor-core';
import { BasePlugin } from 'amis-editor-core';
import { getSchemaTpl } from 'amis-editor-core';
import { BUTTON_DEFAULT_ACTION, formItemControl } from '../../component/BaseControl';
var ButtonToolbarControlPlugin = /** @class */ (function (_super) {
__extends(ButtonToolbarControlPlugin, _super);
function ButtonToolbarControlPlugin() {
var _this = _super !== null && _super.apply(this, arguments) || this;
// 关联渲染器名字
_this.rendererName = 'button-toolbar';
_this.$schema = '/schemas/ButtonToolbarControlSchema.json';
// 组件名称
_this.name = '按钮工具栏';
_this.isBaseComponent = true;
_this.icon = 'fa fa-ellipsis-h';
_this.description = '可以用来放置多个按钮或者按钮组,按钮之间会存在一定的间隔';
_this.docLink = '/amis/zh-CN/components/form/button-toolbar';
_this.tags = ['表单项', '按钮'];
_this.scaffold = {
type: 'button-toolbar',
buttons: [
__assign({ type: 'button', label: '按钮1' }, BUTTON_DEFAULT_ACTION),
__assign({ type: 'button', label: '按钮2' }, BUTTON_DEFAULT_ACTION)
]
};
_this.previewSchema = {
type: 'form',
wrapWithPanel: false,
mode: 'horizontal',
body: __assign(__assign({}, _this.scaffold), { label: '按钮工具栏' })
};
// 容器配置
_this.regions = [
{
key: 'buttons',
label: '按钮集合',
preferTag: '按钮',
renderMethod: 'renderButtons'
}
];
_this.notRenderFormZone = true;
_this.panelTitle = '工具栏';
_this.panelBodyCreator = function (context) {
return formItemControl({
common: {
replace: true,
body: [
getSchemaTpl('formItemName', {
required: true
}),
getSchemaTpl('label'),
getSchemaTpl('remark'),
getSchemaTpl('labelRemark'),
getSchemaTpl('description')
]
},
option: {
title: '按钮管理',
replace: true,
body: [
{
name: 'buttons',
type: 'combo',
label: '',
multiple: true,
addable: true,
minLength: 1,
draggable: true,
draggableTip: '',
editable: false,
visibleOn: 'this.buttons && this.buttons.length',
items: [
{
type: 'tpl',
inline: false,
tpl: '<span class="label label-default"><% if (data.type === "button-group") { %> 按钮组 <% } else { %><%= data.label %><% if (data.icon) { %><i class="<%= data.icon %>"/><% }%><% } %></span>'
}
],
addButtonText: '新增按钮',
scaffold: {
type: 'button',
label: '按钮'
}
}
]
},
event: {
hidden: false
}
}, context);
};
return _this;
}
return ButtonToolbarControlPlugin;
}(BasePlugin));
export { ButtonToolbarControlPlugin };
registerEditorPlugin(ButtonToolbarControlPlugin);

View File

@ -0,0 +1,25 @@
import { BasePlugin, BaseEventContext } from 'amis-editor-core';
import { RendererAction, RendererEvent } from 'amis-editor-comp/dist/renderers/event-action';
export declare class ChainedSelectControlPlugin extends BasePlugin {
rendererName: string;
$schema: string;
name: string;
isBaseComponent: boolean;
icon: string;
description: string;
docLink: string;
tags: string[];
scaffold: {
type: string;
label: string;
name: string;
joinValues: boolean;
};
previewSchema: any;
events: RendererEvent[];
actions: RendererAction[];
panelTitle: string;
notRenderFormZone: boolean;
panelJustify: boolean;
panelBodyCreator: (context: BaseEventContext) => any;
}

View File

@ -0,0 +1,174 @@
import { __assign, __extends } from "tslib";
import { registerEditorPlugin } from 'amis-editor-core';
import { BasePlugin } from 'amis-editor-core';
import { getSchemaTpl, defaultValue } from 'amis-editor-core';
import { ValidatorTag } from '../../validator';
import { tipedLabel } from '../../component/BaseControl';
import { getEventControlConfig } from '../../util';
var ChainedSelectControlPlugin = /** @class */ (function (_super) {
__extends(ChainedSelectControlPlugin, _super);
function ChainedSelectControlPlugin() {
var _this = _super !== null && _super.apply(this, arguments) || this;
// 关联渲染器名字
_this.rendererName = 'chained-select';
_this.$schema = '/schemas/ChainedSelectControlSchema.json';
// 组件名称
_this.name = '级联下拉框';
_this.isBaseComponent = true;
_this.icon = 'fa fa-th-list';
_this.description = '通过<code>source</code>拉取选项,只要有返回结果,就可以无限级别增加';
_this.docLink = '/amis/zh-CN/components/form/chain-select';
_this.tags = ['表单项'];
_this.scaffold = {
type: 'chained-select',
label: '级联下拉框',
name: 'chained-select',
joinValues: true
};
_this.previewSchema = {
type: 'form',
className: 'text-left',
wrapWithPanel: false,
mode: 'horizontal',
body: __assign({}, _this.scaffold)
};
// 事件定义
_this.events = [
{
eventName: 'change',
eventLabel: '值变化',
description: '选中值变化时触发',
dataSchema: [
{
type: 'object',
properties: {
'event.data.value': {
type: 'string',
title: '选中值'
}
}
}
]
}
];
// 动作定义
_this.actions = [
{
actionType: 'clear',
actionLabel: '清空',
description: '清除选中值'
},
{
actionType: 'reset',
actionLabel: '重置',
description: '将值重置为resetValue若没有配置resetValue则清空'
},
{
actionType: 'reload',
actionLabel: '重新加载',
description: '触发组件数据刷新并重新渲染'
},
{
actionType: 'setValue',
actionLabel: '赋值',
description: '触发组件数据更新'
}
];
_this.panelTitle = '级联选择';
_this.notRenderFormZone = true;
_this.panelJustify = true;
_this.panelBodyCreator = function (context) {
return getSchemaTpl('tabs', [
{
title: '属性',
body: getSchemaTpl('collapseGroup', [
{
title: '基本',
body: [
getSchemaTpl('formItemName', {
required: true
}),
getSchemaTpl('label'),
getSchemaTpl('valueFormula', {
rendererSchema: context === null || context === void 0 ? void 0 : context.schema,
mode: 'vertical',
rendererWrapper: true,
label: tipedLabel('默认值', '请填入选项 Options 中 value 值')
}),
getSchemaTpl('switch', {
label: tipedLabel('拼接值', '开启后将选中的选项 value 的值用连接符拼接起来,作为当前表单项的值'),
name: 'joinValues',
pipeIn: defaultValue(true)
}),
getSchemaTpl('delimiter', {
visibleOn: 'data.joinValues !== false',
clearValueOnHidden: true
}),
getSchemaTpl('extractValue', {
visibleOn: 'data.joinValues === false',
clearValueOnHidden: true
}),
getSchemaTpl('labelRemark'),
getSchemaTpl('remark'),
getSchemaTpl('placeholder'),
getSchemaTpl('description')
]
},
{
title: '选项',
body: [
getSchemaTpl('apiControl', {
name: 'source',
label: tipedLabel('获取选项接口', "<div>\u53EF\u7528\u53D8\u91CF\u8BF4\u660E</div><ul>\n <li><code>value</code>\u5F53\u524D\u503C</li>\n <li><code>level</code>\u62C9\u53D6\u7EA7\u522B\uFF0C\u4ECE <code>1</code>\u5F00\u59CB\u3002</li>\n <li><code>parentId</code>\u4E0A\u4E00\u5C42\u9009\u4E2D\u7684 <code>value</code> \u503C</li>\n <li><code>parent</code>\u4E0A\u4E00\u5C42\u9009\u4E2D\u9009\u9879\uFF0C\u5305\u542B <code>label</code> \u548C <code>value</code> \u7684\u503C\u3002</li>\n </ul>", {
maxWidth: 'unset'
})
}),
{
type: 'input-text',
name: 'labelField',
label: tipedLabel('选项标签字段', '默认渲染选项组会获取每一项中的label变量作为展示文本'),
pipeIn: defaultValue('label')
},
{
type: 'input-text',
name: 'valueField',
label: tipedLabel('选项值字段', '默认渲染选项组会获取每一项中的value变量作为表单项值'),
pipeIn: defaultValue('value')
}
]
},
getSchemaTpl('status', { isFormItem: true }),
getSchemaTpl('validation', { tag: ValidatorTag.MultiSelect })
])
},
{
title: '外观',
body: [
getSchemaTpl('collapseGroup', [
getSchemaTpl('style:formItem', { renderer: context.info.renderer }),
getSchemaTpl('style:classNames', {
schema: [
getSchemaTpl('className', {
name: 'descriptionClassName',
label: '描述'
})
]
})
])
]
},
{
title: '事件',
className: 'p-none',
body: [
getSchemaTpl('eventControl', __assign({ name: 'onEvent' }, getEventControlConfig(_this.manager, context)))
]
}
]);
};
return _this;
}
return ChainedSelectControlPlugin;
}(BasePlugin));
export { ChainedSelectControlPlugin };
registerEditorPlugin(ChainedSelectControlPlugin);

View File

@ -0,0 +1,24 @@
import { BasePlugin, BaseEventContext } from 'amis-editor-core';
import { RendererAction, RendererEvent } from 'amis-editor-comp/dist/renderers/event-action';
export declare class CheckboxControlPlugin extends BasePlugin {
rendererName: string;
$schema: string;
name: string;
isBaseComponent: boolean;
icon: string;
description: string;
docLink: string;
tags: string[];
scaffold: {
type: string;
option: string;
name: string;
};
previewSchema: any;
notRenderFormZone: boolean;
panelTitle: string;
panelJustify: boolean;
events: RendererEvent[];
actions: RendererAction[];
panelBodyCreator: (context: BaseEventContext) => any;
}

View File

@ -0,0 +1,165 @@
import { __assign, __extends } from "tslib";
import { defaultValue, setSchemaTpl, getSchemaTpl, valuePipeOut } from 'amis-editor-core';
import { registerEditorPlugin } from 'amis-editor-core';
import { BasePlugin } from 'amis-editor-core';
import { ValidatorTag } from '../../validator';
import { tipedLabel } from '../../component/BaseControl';
import { getEventControlConfig } from '../../util';
setSchemaTpl('option', {
name: 'option',
type: 'input-text',
label: tipedLabel('说明', '选项说明')
});
var CheckboxControlPlugin = /** @class */ (function (_super) {
__extends(CheckboxControlPlugin, _super);
function CheckboxControlPlugin() {
var _this = _super !== null && _super.apply(this, arguments) || this;
// 关联渲染器名字
_this.rendererName = 'checkbox';
_this.$schema = '/schemas/CheckboxControlSchema.json';
// 组件名称
_this.name = '勾选框';
_this.isBaseComponent = true;
_this.icon = 'fa fa-check-square-o';
_this.description = '勾选框';
_this.docLink = '/amis/zh-CN/components/form/checkbox';
_this.tags = ['表单项'];
_this.scaffold = {
type: 'checkbox',
option: '勾选框',
name: 'checkbox'
};
_this.previewSchema = {
type: 'form',
className: 'text-left',
wrapWithPanel: false,
mode: 'horizontal',
body: [
__assign(__assign({ value: true }, _this.scaffold), { label: '勾选表单' })
]
};
_this.notRenderFormZone = true;
_this.panelTitle = '勾选框';
_this.panelJustify = true;
// 事件定义
_this.events = [
{
eventName: 'change',
eventLabel: '值变化',
description: '选中状态变化时触发',
dataSchema: [
{
type: 'object',
properties: {
'event.data.value': {
type: 'string',
title: '选中状态'
}
}
}
]
}
];
// 动作定义
_this.actions = [
{
actionType: 'clear',
actionLabel: '清空',
description: '清除选中值'
},
{
actionType: 'reset',
actionLabel: '重置',
description: '将值重置为resetValue若没有配置resetValue则清空'
},
{
actionType: 'setValue',
actionLabel: '赋值',
description: '触发组件数据更新'
}
];
_this.panelBodyCreator = function (context) {
return getSchemaTpl('tabs', [
{
title: '属性',
body: getSchemaTpl('collapseGroup', [
{
title: '基本',
body: [
getSchemaTpl('formItemName', {
required: true
}),
getSchemaTpl('label'),
getSchemaTpl('option'),
{
type: 'ae-Switch-More',
hiddenOnDefault: false,
mode: 'normal',
label: '值格式',
formType: 'extend',
form: {
body: [
{
type: 'input-text',
label: '勾选值',
name: 'trueValue',
pipeIn: defaultValue(true),
pipeOut: valuePipeOut
},
{
type: 'input-text',
label: '未勾选值',
name: 'falseValue',
pipeIn: defaultValue(false),
pipeOut: valuePipeOut
}
]
}
},
getSchemaTpl('valueFormula', {
rendererSchema: __assign(__assign({}, context === null || context === void 0 ? void 0 : context.schema), { type: 'switch' }),
label: '默认勾选',
rendererWrapper: true,
valueType: 'boolean',
pipeIn: function (value, data) {
var _a, _b;
return value === ((_b = (_a = data === null || data === void 0 ? void 0 : data.data) === null || _a === void 0 ? void 0 : _a.trueValue) !== null && _b !== void 0 ? _b : true);
},
pipeOut: function (value, origin, data) {
var _a = data.trueValue, trueValue = _a === void 0 ? true : _a, _b = data.falseValue, falseValue = _b === void 0 ? false : _b;
return value ? trueValue : falseValue;
}
}),
getSchemaTpl('labelRemark'),
getSchemaTpl('remark'),
getSchemaTpl('description')
]
},
getSchemaTpl('status', { isFormItem: true }),
getSchemaTpl('validation', { tag: ValidatorTag.MultiSelect })
])
},
{
title: '外观',
body: [
getSchemaTpl('collapseGroup', [
getSchemaTpl('style:formItem', { renderer: context.info.renderer }),
getSchemaTpl('style:classNames')
])
]
},
{
title: '事件',
className: 'p-none',
body: [
getSchemaTpl('eventControl', __assign({ name: 'onEvent' }, getEventControlConfig(_this.manager, context)))
]
}
]);
};
return _this;
}
return CheckboxControlPlugin;
}(BasePlugin));
export { CheckboxControlPlugin };
registerEditorPlugin(CheckboxControlPlugin);

View File

@ -0,0 +1,30 @@
import { BasePlugin, BaseEventContext } from 'amis-editor-core';
import { RendererAction, RendererEvent } from 'amis-editor-comp/dist/renderers/event-action';
export declare class CheckboxesControlPlugin extends BasePlugin {
rendererName: string;
$schema: string;
order: number;
name: string;
isBaseComponent: boolean;
icon: string;
description: string;
docLink: string;
tags: string[];
scaffold: {
type: string;
label: string;
name: string;
multiple: boolean;
options: {
label: string;
value: string;
}[];
};
previewSchema: any;
notRenderFormZone: boolean;
panelTitle: string;
events: RendererEvent[];
actions: RendererAction[];
panelJustify: boolean;
panelBodyCreator: (context: BaseEventContext) => any;
}

View File

@ -0,0 +1,204 @@
import { __assign, __extends } from "tslib";
import { getSchemaTpl } from 'amis-editor-core';
import { registerEditorPlugin } from 'amis-editor-core';
import { BasePlugin } from 'amis-editor-core';
import { ValidatorTag } from '../../validator';
import { getEventControlConfig } from '../../util';
var CheckboxesControlPlugin = /** @class */ (function (_super) {
__extends(CheckboxesControlPlugin, _super);
function CheckboxesControlPlugin() {
var _this = _super !== null && _super.apply(this, arguments) || this;
// 关联渲染器名字
_this.rendererName = 'checkboxes';
_this.$schema = '/schemas/CheckboxesControlSchema.json';
_this.order = -470;
// 组件名称
_this.name = '复选框';
_this.isBaseComponent = true;
_this.icon = 'fa fa-check-square';
_this.description = '通过<code>options</code>配置多个勾选框,也可以通过<code>source</code>拉取选项';
_this.docLink = '/amis/zh-CN/components/form/checkboxes';
_this.tags = ['表单项'];
_this.scaffold = {
type: 'checkboxes',
label: '复选框',
name: 'checkboxes',
multiple: true,
options: [
{
label: '选项A',
value: 'A'
},
{
label: '选项B',
value: 'B'
}
]
};
_this.previewSchema = {
type: 'form',
className: 'text-left',
mode: 'horizontal',
wrapWithPanel: false,
body: [
__assign({ value: 'A' }, _this.scaffold)
]
};
_this.notRenderFormZone = true;
_this.panelTitle = '复选框';
// 事件定义
_this.events = [
{
eventName: 'change',
eventLabel: '值变化',
description: '选中值变化时触发',
dataSchema: [
{
type: 'object',
properties: {
'event.data.value': {
type: 'string',
title: '选中值'
}
}
}
]
}
];
// 动作定义
_this.actions = [
{
actionType: 'clear',
actionLabel: '清空',
description: '清除选中值'
},
{
actionType: 'reset',
actionLabel: '重置',
description: '将值重置为resetValue若没有配置resetValue则清空'
},
{
actionType: 'reload',
actionLabel: '重新加载',
description: '触发组件数据刷新并重新渲染'
},
{
actionType: 'setValue',
actionLabel: '赋值',
description: '触发组件数据更新'
}
];
_this.panelJustify = true;
_this.panelBodyCreator = function (context) {
var renderer = context.info.renderer;
return getSchemaTpl('tabs', [
{
title: '属性',
body: getSchemaTpl('collapseGroup', [
{
title: '基本',
body: [
getSchemaTpl('formItemName', {
required: true
}),
getSchemaTpl('label'),
[
getSchemaTpl('switch', {
label: '可全选',
name: 'checkAll',
value: false,
visibleOn: 'data.multiple',
onChange: function (value, origin, item, form) {
if (!value) {
// 可全选关闭时,默认全选也需联动关闭
form.setValueByName('defaultCheckAll', false);
}
}
}),
{
type: 'container',
className: 'ae-ExtendMore mb-2',
visibleOn: 'data.checkAll',
body: [
getSchemaTpl('switch', {
label: '默认全选',
name: 'defaultCheckAll',
value: false
})
]
}
],
getSchemaTpl('valueFormula', {
rendererSchema: context === null || context === void 0 ? void 0 : context.schema,
useSelectMode: true,
visibleOn: 'this.options && this.options.length > 0'
}),
getSchemaTpl('joinValues', {
visibleOn: true
}),
getSchemaTpl('delimiter', {
visibleOn: 'data.joinValues === true'
}),
getSchemaTpl('extractValue'),
getSchemaTpl('labelRemark'),
getSchemaTpl('remark'),
getSchemaTpl('description')
]
},
{
title: '选项',
body: [
getSchemaTpl('optionControlV2', {
multiple: true
}),
getSchemaTpl('creatable', {
formType: 'extend',
hiddenOnDefault: true,
form: {
body: [getSchemaTpl('createBtnLabel'), getSchemaTpl('addApi')]
}
}),
getSchemaTpl('editable', {
formType: 'extend',
hiddenOnDefault: true,
form: {
body: [getSchemaTpl('editApi')]
}
}),
getSchemaTpl('removable', {
formType: 'extend',
hiddenOnDefault: true,
form: {
body: [getSchemaTpl('deleteApi')]
}
})
]
},
getSchemaTpl('status', { isFormItem: true }),
getSchemaTpl('validation', { tag: ValidatorTag.MultiSelect })
])
},
{
title: '外观',
body: [
getSchemaTpl('collapseGroup', [
getSchemaTpl('style:formItem', { renderer: renderer }),
getSchemaTpl('style:classNames')
])
]
},
{
title: '事件',
className: 'p-none',
body: [
getSchemaTpl('eventControl', __assign({ name: 'onEvent' }, getEventControlConfig(_this.manager, context)))
]
}
]);
};
return _this;
}
return CheckboxesControlPlugin;
}(BasePlugin));
export { CheckboxesControlPlugin };
registerEditorPlugin(CheckboxesControlPlugin);

View File

@ -0,0 +1,25 @@
import { BasePlugin } from 'amis-editor-core';
import type { BaseEventContext } from 'amis-editor-core';
import { RendererEvent, RendererAction } from 'amis-editor-comp/dist/renderers/event-action';
export declare class CodeEditorControlPlugin extends BasePlugin {
rendererName: string;
$schema: string;
name: string;
isBaseComponent: boolean;
icon: string;
description: string;
docLink: string;
tags: string[];
scaffold: {
type: string;
label: string;
name: string;
};
previewSchema: any;
events: RendererEvent[];
actions: RendererAction[];
notRenderFormZone: boolean;
panelTitle: string;
panelJustify: boolean;
panelBodyCreator: (context: BaseEventContext) => any;
}

View File

@ -0,0 +1,192 @@
import { __assign, __extends } from "tslib";
import { availableLanguages } from 'amis/lib/renderers/Form/Editor';
import { defaultValue, getSchemaTpl, undefinedPipeOut } from 'amis-editor-core';
import { registerEditorPlugin } from 'amis-editor-core';
import { BasePlugin } from 'amis-editor-core';
import { ValidatorTag } from '../../validator';
import { getEventControlConfig } from '../../util';
var CodeEditorControlPlugin = /** @class */ (function (_super) {
__extends(CodeEditorControlPlugin, _super);
function CodeEditorControlPlugin() {
var _this = _super !== null && _super.apply(this, arguments) || this;
// 关联渲染器名字
_this.rendererName = 'editor';
_this.$schema = '/schemas/EditorControlSchema.json';
// 组件名称
_this.name = '代码编辑器';
_this.isBaseComponent = true;
_this.icon = 'fa fa-code';
_this.description = "\u4EE3\u7801\u7F16\u8F91\u5668\uFF0C\u91C7\u7528 monaco-editor \u652F\u6301\uFF1A".concat(availableLanguages
.slice(0, 10)
.join(''), "\u7B49\u7B49");
_this.docLink = '/amis/zh-CN/components/form/editor';
_this.tags = ['表单项'];
_this.scaffold = {
type: 'editor',
label: '代码编辑器',
name: 'editor'
};
_this.previewSchema = {
type: 'form',
className: 'text-left',
mode: 'horizontal',
wrapWithPanel: false,
body: [
__assign(__assign({}, _this.scaffold), { value: 'console.log("Hello world.");' })
]
};
_this.events = [
{
eventName: 'focus',
eventLabel: '获取焦点',
description: '输入框获取焦点时触发',
dataSchema: [
{
type: 'object',
properties: {
'event.data.value': {
type: 'string',
title: '当前代码'
}
}
}
]
},
{
eventName: 'blur',
eventLabel: '失去焦点',
description: '输入框失去焦点时触发',
dataSchema: [
{
type: 'object',
properties: {
'event.data.value': {
type: 'string',
title: '当前代码'
}
}
}
]
}
];
_this.actions = [
{
actionType: 'clear',
actionLabel: '清空',
description: '清除选中值'
},
{
actionType: 'reset',
actionLabel: '重置',
description: '将值重置为resetValue若没有配置resetValue则清空'
},
{
actionType: 'focus',
actionLabel: '获取焦点',
description: '输入框获取焦点'
},
{
actionType: 'setValue',
actionLabel: '赋值',
description: '触发组件数据更新'
}
];
_this.notRenderFormZone = true;
_this.panelTitle = 'Editor';
_this.panelJustify = true;
_this.panelBodyCreator = function (context) {
return getSchemaTpl('tabs', [
{
title: '属性',
body: getSchemaTpl('collapseGroup', [
{
title: '基本',
body: [
getSchemaTpl('formItemName', {
required: true
}),
getSchemaTpl('label'),
{
label: '语言',
name: 'language',
type: 'select',
value: 'javascript',
searchable: true,
options: availableLanguages.concat()
},
{
type: 'textarea',
name: 'value',
label: '默认值'
},
getSchemaTpl('switch', {
label: '可全屏',
name: 'allowFullscreen',
pipeIn: defaultValue(true)
}),
getSchemaTpl('labelRemark'),
getSchemaTpl('remark'),
getSchemaTpl('description')
]
},
getSchemaTpl('status', { isFormItem: true }),
getSchemaTpl('validation', {
tag: ValidatorTag.Code
})
])
},
{
title: '外观',
body: getSchemaTpl('collapseGroup', [
getSchemaTpl('style:formItem', {
renderer: context.info.renderer,
schema: [
{
name: 'size',
type: 'select',
pipeIn: defaultValue(''),
pipeOut: undefinedPipeOut,
label: '控件尺寸',
options: [
{
label: '默认',
value: ''
},
{
label: '中',
value: 'md'
},
{
label: '大',
value: 'lg'
},
{
label: '特大',
value: 'xl'
},
{
label: '超大',
value: 'xxl'
}
]
}
]
}),
getSchemaTpl('style:classNames')
])
},
{
title: '事件',
className: 'p-none',
body: [
getSchemaTpl('eventControl', __assign({ name: 'onEvent' }, getEventControlConfig(_this.manager, context)))
]
}
]);
};
return _this;
}
return CodeEditorControlPlugin;
}(BasePlugin));
export { CodeEditorControlPlugin };
registerEditorPlugin(CodeEditorControlPlugin);

View File

@ -0,0 +1,41 @@
import { BaseEventContext, BasePlugin, BasicToolbarItem, ContextMenuEventContext, ContextMenuItem } from 'amis-editor-core';
import { RendererEvent, RendererAction } from 'amis-editor-comp/dist/renderers/event-action';
export declare class ComboControlPlugin extends BasePlugin {
rendererName: string;
$schema: string;
name: string;
isBaseComponent: boolean;
icon: string;
description: string;
docLink: string;
tags: string[];
scaffold: {
type: string;
label: string;
name: string;
multiple: boolean;
items: ({
type: string;
name: string;
placeholder: string;
options?: undefined;
} | {
type: string;
name: string;
placeholder: string;
options: {
label: string;
value: string;
}[];
})[];
};
previewSchema: any;
events: RendererEvent[];
actions: RendererAction[];
panelTitle: string;
panelBodyCreator: (context: BaseEventContext) => any[];
filterProps(props: any): any;
buildEditorToolbar({ id, info, schema }: BaseEventContext, toolbars: Array<BasicToolbarItem>): void;
buildEditorContextMenu({ id, schema, region, info }: ContextMenuEventContext, menus: Array<ContextMenuItem>): void;
editDetail(id: string): void;
}

View File

@ -0,0 +1,536 @@
import { __assign, __extends } from "tslib";
import { Button } from 'amis';
import { registerEditorPlugin } from 'amis-editor-core';
import { BasePlugin } from 'amis-editor-core';
import { defaultValue, getSchemaTpl, valuePipeOut } from 'amis-editor-core';
import React from 'react';
import { diff } from 'amis-editor-core';
import { JSONPipeOut } from 'amis-editor-core';
import { mockValue } from 'amis-editor-core';
import { setVariable } from 'amis-core';
var ComboControlPlugin = /** @class */ (function (_super) {
__extends(ComboControlPlugin, _super);
function ComboControlPlugin() {
var _this = _super !== null && _super.apply(this, arguments) || this;
// 关联渲染器名字
_this.rendererName = 'combo';
_this.$schema = '/schemas/ComboControlSchema.json';
// 组件名称
_this.name = '组合输入';
_this.isBaseComponent = true;
_this.icon = 'fa fa-group';
_this.description = '多个表单项的组合,可配置是否增加和删除初始设定的模板';
_this.docLink = '/amis/zh-CN/components/form/combo';
_this.tags = ['表单项'];
_this.scaffold = {
type: 'combo',
label: '组合输入',
name: 'combo',
multiple: true,
items: [
{
type: 'input-text',
name: 'input-text',
placeholder: '文本'
},
{
type: 'select',
name: 'select',
placeholder: '选项',
options: [
{
label: 'A',
value: 'a'
},
{
label: 'B',
value: 'b'
}
]
}
]
};
_this.previewSchema = {
type: 'form',
className: 'text-left',
mode: 'horizontal',
wrapWithPanel: false,
body: [
__assign(__assign({}, _this.scaffold), { value: [{ text: 'Row 1', select: 'a' }, {}] })
]
};
// 事件定义
_this.events = [
{
eventName: 'add',
eventLabel: '添加',
description: '添加组合项时触发',
dataSchema: [
{
type: 'object',
properties: {
'event.data.value': {
type: 'object',
title: '当前组合项的值'
}
}
}
]
},
{
eventName: 'delete',
eventLabel: '删除',
description: '删除组合项',
dataSchema: [
{
type: 'object',
properties: {
'event.data.key': {
type: 'string',
title: '删除项的索引'
},
'event.data.value': {
type: 'string',
title: '现有组合项的值'
}
}
}
]
},
{
eventName: 'tabsChange',
eventLabel: '切换tab',
description: '当设置 tabsMode 为 true 时,切换选项卡时触发',
dataSchema: [
{
type: 'object',
properties: {
'event.data.key': {
type: 'string',
title: '选项卡索引'
}
}
}
]
}
];
// 动作定义
_this.actions = [
{
actionType: 'clear',
actionLabel: '清空',
description: '清除选中值'
},
{
actionType: 'reset',
actionLabel: '重置',
description: '将值重置为resetValue若没有配置resetValue则清空'
},
{
actionType: 'setValue',
actionLabel: '赋值',
description: '触发组件数据更新'
}
];
_this.panelTitle = '组合输入';
_this.panelBodyCreator = function (context) {
return [
{
name: 'conditions',
type: 'button-group-select',
size: 'sm',
mode: 'inline',
className: 'block',
options: [
{
label: '固定成员类型',
value: '1'
},
{
label: '多分支',
value: '2'
}
],
pipeIn: function (value) { return (value ? '2' : '1'); },
pipeOut: function (value) {
return value == 2
? [
{
label: '类型名称',
test: '',
items: [
{
type: 'input-text',
label: '文本',
name: 'text'
}
],
scaffold: {}
}
]
: undefined;
}
},
{
name: 'conditions',
visibleOn: 'this.conditions',
type: 'combo',
label: '分支管理',
multiple: true,
multiLine: true,
minLength: 1,
items: [
{
label: '名称',
name: 'label',
type: 'input-text',
required: true
},
{
label: '命中条件',
name: 'test',
required: true,
type: 'input-text',
placeholder: '比如: this.type === "text"',
description: '根据成员数据判断是否使用此分支'
},
{
name: 'items',
asFormItem: true,
children: function (_a) {
var value = _a.value, onChange = _a.onChange;
return (React.createElement(Button, { size: "sm", level: "danger", className: "m-b", block: true, onClick: function () {
return _this.manager.openSubEditor({
title: '配置子表单项',
value: value,
slot: {
type: 'form',
mode: 'normal',
body: '$$',
wrapWithPanel: false,
className: 'wrapper'
},
onChange: onChange
});
} }, "\u914D\u7F6E\u5B50\u8868\u5355\u96C6\u5408"));
}
},
{
type: 'textarea',
name: 'scaffold',
required: true,
label: '新增初始值',
pipeOut: valuePipeOut
}
],
scaffold: {
label: '类型名称',
test: '',
items: [
{
type: 'input-text',
label: '文本',
name: 'text'
}
],
scaffold: {}
}
},
getSchemaTpl('switch', {
name: 'typeSwitchable',
visibleOn: 'this.conditions',
label: '是否可切换类型',
pipeIn: defaultValue(true)
}),
{
name: 'items',
visibleOn: '!this.conditions',
asFormItem: true,
children: function (_a) {
var value = _a.value, onChange = _a.onChange;
return (React.createElement(Button, { size: "sm", level: "danger", className: "m-b", block: true, onClick: function () {
_this.manager.openSubEditor({
title: '配置子表单集合',
value: value,
slot: {
type: 'form',
mode: 'normal',
body: '$$',
wrapWithPanel: false,
className: 'wrapper'
},
onChange: function (value) { return onChange(value); }
});
} }, "\u914D\u7F6E\u5B50\u8868\u5355\u96C6\u5408"));
}
},
getSchemaTpl('switchDefaultValue', {
visibleOn: '!this.defaultCheckAll'
}),
{
type: 'textarea',
name: 'value',
label: '默认值',
pipeOut: valuePipeOut,
visibleOn: 'typeof this.value !== "undefined"'
},
getSchemaTpl('switch', {
label: '多行模式',
name: 'multiLine',
value: false,
description: '即是否要换行'
}),
getSchemaTpl('multiple'),
getSchemaTpl('joinValues'),
getSchemaTpl('delimiter'),
getSchemaTpl('switch', {
name: 'flat',
label: '是否将值打平',
visibleOn: 'Array.isArray(data.items) && data.items.length === 1 && data.multiple',
description: '默认数组内的数据结构为对象,如果只有一个表单项,可以配置将值打平,那么数组内放置的就是那个表单项的值'
}),
getSchemaTpl('switch', {
label: '是否可新增',
name: 'addable',
visibleOn: 'this.multiple',
pipeIn: defaultValue(true)
}),
{
type: 'textarea',
name: 'scaffold',
label: '新增初始值',
visibleOn: 'this.multiple && this.addable !== false',
pipeOut: valuePipeOut,
pipeIn: defaultValue({})
},
{
label: '新增按钮文字',
name: 'addButtonText',
type: 'input-text',
visibleOn: 'data.addable',
pipeIn: defaultValue('新增')
},
getSchemaTpl('switch', {
label: '是否可删除',
name: 'removable',
visibleOn: 'this.multiple',
pipeIn: defaultValue(true)
}),
getSchemaTpl('api', {
name: 'deleteApi',
label: '删除前的请求',
hiddenOn: '!data.removable'
}),
{
label: '删除确认提示',
name: 'deleteConfirmText',
type: 'input-text',
visibleOn: 'data.deleteApi',
pipeIn: defaultValue('确认要删除')
},
getSchemaTpl('switch', {
name: 'draggable',
label: '是否可拖拽排序',
visibleOn: 'this.multiple'
}),
{
label: '拖拽排序的提示文字',
name: 'draggableTip',
type: 'input-text',
visibleOn: 'data.draggable',
pipeIn: defaultValue('可通过拖动每行中的【交换】按钮进行顺序调整')
},
getSchemaTpl('switch', {
name: 'noBorder',
label: '去掉边框',
visibleOn: 'this.multiLine'
}),
{
name: 'minLength',
type: 'input-number',
label: '限制最小数量'
},
{
name: 'maxLength',
type: 'input-number',
label: '限制最大数量'
},
{
label: '默认消息提示',
type: 'combo',
name: 'messages',
multiLine: true,
description: '',
items: [
{
label: '有子表单项限制失败时提示',
type: 'input-text',
name: 'validateFailed'
},
{
label: '最小长度验证失败时提示',
type: 'input-text',
name: 'minLengthValidateFailed'
},
{
label: '最大长度验证失败时提示',
type: 'input-text',
name: 'maxLengthValidateFailed'
}
]
},
getSchemaTpl('switch', {
name: 'canAccessSuperData',
label: '是否自动填充父级同名变量',
pipeIn: defaultValue(false)
}),
getSchemaTpl('switch', {
name: 'tabsMode',
label: '采用 Tabs 展示方式',
pipeIn: defaultValue(false)
}),
{
name: 'tabsStyle',
label: 'Tabs 的展示模式',
visibleOn: 'data.tabsMode',
type: 'list-select',
options: [
{
label: '正常',
value: 'normal'
},
{
label: '水平',
value: 'horizontal'
},
{
label: '内联',
value: 'inline'
}
],
mode: 'inline',
className: 'w-full'
},
{
name: 'tabsLabelTpl',
label: '选项卡标题的生成模板',
visibleOn: 'data.tabsMode',
type: 'input-text',
mode: 'inline',
className: 'w-full'
},
getSchemaTpl('switch', {
name: 'lazyLoad',
label: '懒加载',
pipeIn: defaultValue(false),
description: '如果数据比较多,比较卡顿时,可开启此配置项'
}),
getSchemaTpl('switch', {
name: 'strictMode',
label: '严格模式',
pipeIn: defaultValue(true),
description: '如果你希望环境变量的值实时透传到 Combo 中,请关闭此选项。'
}),
{
name: 'syncFields',
visibleOn: '!data.strictMode',
label: '配置同步字段',
type: 'input-text',
multiple: true,
joinValues: false,
extractValue: true,
description: '如果 Combo 层级比较深,底层的获取外层的数据可能不同步。但是给 combo 配置这个属性就能同步下来。'
},
getSchemaTpl('switch', {
name: 'nullable',
label: '允许为空',
pipeIn: defaultValue(false),
description: '如果子表单项里面配置验证器,且又是单条模式。可以允许用户选择清空(不填)。'
}),
{
name: 'items',
label: '各列 CSS 配置',
hiddenOn: 'this.multiLine',
type: 'combo',
addable: false,
removable: false,
multiple: true,
items: [
{
name: 'columnClassName',
placeholder: 'CSS 类名',
type: 'input-text'
}
]
},
getSchemaTpl('subFormItemMode', {
visibleOn: 'this.multiLine'
}),
getSchemaTpl('subFormHorizontalMode'),
getSchemaTpl('subFormHorizontal')
];
};
return _this;
}
ComboControlPlugin.prototype.filterProps = function (props) {
props = JSONPipeOut(props);
// 至少显示一个成员,否则啥都不显示。
if (props.multiple && !props.value && !props.$ref) {
var mockedData_1 = {};
if (Array.isArray(props.items)) {
props.items.forEach(function (control) {
control.name &&
setVariable(mockedData_1, control.name, mockValue(control));
});
}
props.value = [mockedData_1];
}
return props;
};
ComboControlPlugin.prototype.buildEditorToolbar = function (_a, toolbars) {
var id = _a.id, info = _a.info, schema = _a.schema;
if (info.renderer.name === 'combo' && !Array.isArray(schema.conditions)) {
toolbars.push({
icon: 'fa fa-expand',
order: 100,
tooltip: '配置子表单项',
onClick: this.editDetail.bind(this, id)
});
}
};
ComboControlPlugin.prototype.buildEditorContextMenu = function (_a, menus) {
var id = _a.id, schema = _a.schema, region = _a.region, info = _a.info;
if (info.renderer.name === 'combo' && !Array.isArray(schema.conditions)) {
menus.push('|', {
label: '配置成员渲染器',
onSelect: this.editDetail.bind(this, id)
});
}
};
ComboControlPlugin.prototype.editDetail = function (id) {
var manager = this.manager;
var store = manager.store;
var node = store.getNodeById(id);
var value = store.getValueOf(id);
node &&
value &&
this.manager.openSubEditor({
title: '配置子表单项',
value: value.items,
slot: {
type: 'form',
mode: 'normal',
body: '$$',
wrapWithPanel: false,
className: 'wrapper'
},
onChange: function (newValue) {
newValue = __assign(__assign({}, value), { items: newValue });
manager.panelChangeValue(newValue, diff(value, newValue));
}
});
};
return ComboControlPlugin;
}(BasePlugin));
export { ComboControlPlugin };
registerEditorPlugin(ComboControlPlugin);

View File

@ -0,0 +1,36 @@
import { BaseEventContext, BasePlugin, BasicSubRenderInfo, RendererEventContext, ScaffoldForm, SubRendererInfo } from 'amis-editor-core';
export declare class ConditionBilderPlugin extends BasePlugin {
rendererName: string;
$schema: string;
name: string;
isBaseComponent: boolean;
icon: string;
description: string;
docLink: string;
tags: string[];
scaffold: {
type: string;
label: string;
name: string;
description: string;
fields: ({
label: string;
type: string;
name: string;
options?: undefined;
} | {
label: string;
type: string;
name: string;
options: {
label: string;
value: string;
}[];
})[];
};
scaffoldForm: ScaffoldForm;
previewSchema: any;
panelTitle: string;
panelBodyCreator: (context: BaseEventContext) => any[];
buildSubRenderers(context: RendererEventContext, renderers: Array<SubRendererInfo>): BasicSubRenderInfo | Array<BasicSubRenderInfo> | void;
}

View File

@ -0,0 +1,289 @@
import { __extends } from "tslib";
import { registerEditorPlugin } from 'amis-editor-core';
import { BasePlugin } from 'amis-editor-core';
import { getSchemaTpl } from 'amis-editor-core';
import { isObject, isString } from 'lodash';
import defaultConfig, { OperationMap } from 'amis-ui/lib/components/condition-builder/config';
var ConditionBilderPlugin = /** @class */ (function (_super) {
__extends(ConditionBilderPlugin, _super);
function ConditionBilderPlugin() {
var _this = _super !== null && _super.apply(this, arguments) || this;
// 关联渲染器名字
_this.rendererName = 'condition-builder';
_this.$schema = '/schemas/ConditionBuilderControlSchema.json';
// 组件名称
_this.name = '条件组件';
_this.isBaseComponent = true;
_this.icon = 'fa fa-group';
_this.description = '用于设置复杂组合条件,支持添加条件,添加分组,设置组合方式,拖拽排序等功能。';
_this.docLink = '/amis/zh-CN/components/form/condition-builder';
_this.tags = ['表单项'];
_this.scaffold = {
type: 'condition-builder',
label: '条件组件',
name: 'conditions',
description: '适合让用户自己拼查询条件,然后后端根据数据生成 query where',
fields: [
{
label: '文本',
type: 'text',
name: 'text'
},
{
label: '数字',
type: 'number',
name: 'number'
},
{
label: '布尔',
type: 'boolean',
name: 'boolean'
},
{
label: '选项',
type: 'select',
name: 'select',
options: [
{
label: 'A',
value: 'a'
},
{
label: 'B',
value: 'b'
},
{
label: 'C',
value: 'c'
},
{
label: 'D',
value: 'd'
},
{
label: 'E',
value: 'e'
}
]
},
{
label: '日期',
type: 'date',
name: 'date'
},
{
label: '时间',
type: 'time',
name: 'time'
},
{
label: '日期时间',
type: 'datetime',
name: 'datetime'
}
]
};
_this.scaffoldForm = {
title: '快速开始-条件组合',
body: [
{
type: 'combo',
name: 'fields',
multiple: true,
draggable: true,
multiLine: true,
items: [
{
type: 'group',
body: [
{
type: 'select',
name: 'type',
placeholder: '条件类型',
options: [
{
label: '文本',
value: 'text'
},
{
label: '数字',
value: 'number'
},
{
label: '布尔',
value: 'boolean'
},
{
label: '日期',
value: 'date'
},
{
label: '日期时间',
value: 'datetime'
},
{
label: '时间',
value: 'time'
},
{
label: '选项',
value: 'select'
}
]
},
{
type: 'input-text',
name: 'name',
placeholder: '字段名'
},
{
type: 'input-text',
placeholder: '字段名称',
name: 'label'
}
]
},
{
type: 'group',
visibleOn: 'data.type === "number"',
body: [
{
type: 'input-number',
name: 'minimum',
placeholder: '最小值'
},
{
type: 'input-number',
name: 'maximum',
placeholder: '最大值'
},
{
type: 'input-number',
name: 'step',
min: 0,
placeholder: '步长'
}
]
},
{
type: 'group',
visibleOn: '!!~["date", "datetime", "time"].indexOf(data.type)',
body: [
{
type: 'input-text',
name: 'format',
placeholder: '值格式'
},
{
type: 'input-text',
name: 'inputFormat',
placeholder: '日期显示格式'
},
{
type: 'input-text',
name: 'timeFormat',
placeholder: '时间显示格式',
visibleOn: 'data.type === "datetime"'
}
]
},
{
type: 'group',
visibleOn: 'data.type === "select"',
body: [
{
type: 'input-text',
name: 'source',
placeholder: '字段选项远程拉取,支持接口或数据映射'
}
]
},
{
type: 'group',
body: [
{
type: 'input-text',
placeholder: '占位符',
name: 'placeholder'
},
{
name: 'operators',
placeholder: '操作符',
asFormItem: true,
children: function (_a) {
var _b, _c;
var data = _a.data, render = _a.render, onChange = _a.onChange;
return render('operations', {
type: 'select',
name: 'operators',
multiple: true,
value: data.value ||
((_b = defaultConfig.types[data.type]) === null || _b === void 0 ? void 0 : _b.operators) ||
[],
joinValues: false,
extractValue: true,
options: (_c = defaultConfig.types[data.type]) === null || _c === void 0 ? void 0 : _c.operators.map(function (item) {
if (isObject(item) && item.label && item.value) {
return ({
label: item.label,
value: item.value
} || []);
}
else if (isString(item)) {
return ({
label: OperationMap[item],
value: item
} || []);
}
else {
return [];
}
})
}, {
onChange: function (value) { return onChange(value); }
});
}
}
]
}
]
}
],
canRebuild: true
};
_this.previewSchema = {
type: 'form',
mode: 'horizontal',
wrapWithPanel: false,
body: [_this.scaffold]
};
_this.panelTitle = '条件组件';
_this.panelBodyCreator = function (context) {
return [getSchemaTpl('source')];
};
return _this;
}
ConditionBilderPlugin.prototype.buildSubRenderers = function (context, renderers) {
var plugin = this;
// return super.buildSubRenderers.apply(this, arguments);
if (plugin.name && plugin.description) {
return {
name: plugin.name,
icon: plugin.icon,
description: plugin.description,
previewSchema: plugin.previewSchema,
tags: plugin.tags,
docLink: plugin.docLink,
type: plugin.type,
scaffold: plugin.scaffold,
scaffoldForm: this.scaffoldForm,
disabledRendererPlugin: plugin.disabledRendererPlugin,
isBaseComponent: plugin.isBaseComponent,
rendererName: plugin.rendererName
};
}
};
return ConditionBilderPlugin;
}(BasePlugin));
export { ConditionBilderPlugin };
registerEditorPlugin(ConditionBilderPlugin);

View File

@ -0,0 +1,27 @@
import { BasePlugin, RegionConfig, BaseEventContext } from 'amis-editor-core';
export declare class ControlPlugin extends BasePlugin {
rendererName: string;
$schema: string;
name: string;
isBaseComponent: boolean;
icon: string;
description: string;
docLink: string;
tags: string[];
/**
* Container合并
*/
disabledRendererPlugin: boolean;
scaffold: {
type: string;
label: string;
body: {
type: string;
tpl: string;
}[];
};
previewSchema: any;
regions: Array<RegionConfig>;
panelTitle: string;
panelBodyCreator: (context: BaseEventContext) => any[];
}

View File

@ -0,0 +1,75 @@
import { __assign, __extends } from "tslib";
import React from 'react';
import { Button } from 'amis';
import { getSchemaTpl } from 'amis-editor-core';
import { registerEditorPlugin } from 'amis-editor-core';
import { BasePlugin } from 'amis-editor-core';
import { formItemControl } from '../../component/BaseControl';
var ControlPlugin = /** @class */ (function (_super) {
__extends(ControlPlugin, _super);
function ControlPlugin() {
var _this = _super !== null && _super.apply(this, arguments) || this;
// 关联渲染器名字
_this.rendererName = 'control';
_this.$schema = '/schemas/FormControlSchema.json';
// 组件名称
_this.name = '表单项容器';
_this.isBaseComponent = true;
_this.icon = 'fa fa-object-group';
_this.description = "\u8868\u5355\u9879\u5BB9\u5668";
_this.docLink = '/amis/zh-CN/components/form/group';
_this.tags = ['容器'];
/**
* 组件选择面板中隐藏和Container合并
*/
_this.disabledRendererPlugin = true;
_this.scaffold = {
type: 'control',
label: '表单项容器',
body: [
{
type: 'tpl',
tpl: 'a'
}
]
};
_this.previewSchema = {
type: 'form',
className: 'text-left',
mode: 'horizontal',
wrapWithPanel: false,
body: [
__assign({}, _this.scaffold)
]
};
// 容器配置
_this.regions = [
{
key: 'body',
label: '元素集合',
preferTag: '表单项'
}
];
_this.panelTitle = '表单项容器';
_this.panelBodyCreator = function (context) {
return formItemControl({
common: {
replace: true,
body: [
{
children: (React.createElement(Button, { className: "m-b", onClick: function () { return _this.manager.showRendererPanel('表单项'); }, level: "danger", tooltip: "\u63D2\u5165\u4E00\u4E2A\u65B0\u7684\u5143\u7D20", size: "sm", block: true }, "\u65B0\u589E\u5143\u7D20"))
},
getSchemaTpl('labelRemark'),
getSchemaTpl('remark'),
getSchemaTpl('placeholder'),
getSchemaTpl('description')
]
}
});
};
return _this;
}
return ControlPlugin;
}(BasePlugin));
export { ControlPlugin };
registerEditorPlugin(ControlPlugin);

View File

@ -0,0 +1,25 @@
import { BasePlugin } from 'amis-editor-core';
import type { BaseEventContext } from 'amis-editor-core';
import { RendererEvent, RendererAction } from 'amis-editor-comp/dist/renderers/event-action';
export declare class DiffEditorControlPlugin extends BasePlugin {
rendererName: string;
$schema: string;
name: string;
isBaseComponent: boolean;
icon: string;
description: string;
docLink: string;
tags: string[];
scaffold: {
type: string;
label: string;
name: string;
};
previewSchema: any;
events: RendererEvent[];
actions: RendererAction[];
notRenderFormZone: boolean;
panelTitle: string;
panelJustify: boolean;
panelBodyCreator: (context: BaseEventContext) => any;
}

View File

@ -0,0 +1,194 @@
import { __assign, __extends } from "tslib";
import { availableLanguages } from 'amis/lib/renderers/Form/Editor';
import { defaultValue, getSchemaTpl, undefinedPipeOut, valuePipeOut } from 'amis-editor-core';
import { registerEditorPlugin } from 'amis-editor-core';
import { BasePlugin } from 'amis-editor-core';
import { ValidatorTag } from '../../validator';
import { getEventControlConfig } from '../../util';
var DiffEditorControlPlugin = /** @class */ (function (_super) {
__extends(DiffEditorControlPlugin, _super);
function DiffEditorControlPlugin() {
var _this = _super !== null && _super.apply(this, arguments) || this;
// 关联渲染器名字
_this.rendererName = 'diff-editor';
_this.$schema = '/schemas/DiffEditorControlSchema.json';
// 组件名称
_this.name = 'Diff编辑器';
_this.isBaseComponent = true;
_this.icon = 'fa fa-columns';
_this.description = "\u5DE6\u53F3\u4E24\u8FB9\u7684\u4EE3\u7801\u505A\u5BF9\u6BD4\uFF0C\u652F\u6301\u7684\u8BED\u8A00\u5305\u62EC\uFF1A".concat(availableLanguages
.slice(0, 10)
.join(''), "\u7B49\u7B49");
_this.docLink = '/amis/zh-CN/components/form/diff-editor';
_this.tags = ['表单项'];
_this.scaffold = {
type: 'diff-editor',
label: 'diff编辑器',
name: 'diff'
};
_this.previewSchema = {
type: 'form',
className: 'text-left',
mode: 'horizontal',
wrapWithPanel: false,
body: [
__assign(__assign({}, _this.scaffold), { value: 'Hello World\nLine 1\nNew line\nBla Bla', diffValue: 'Hello World\nLine 2' })
]
};
_this.events = [
{
eventName: 'focus',
eventLabel: '获取焦点',
description: '右侧输入框获取焦点时触发',
dataSchema: [
{
type: 'object',
properties: {
'event.data.value': {
type: 'string',
title: '当前代码'
}
}
}
]
},
{
eventName: 'blur',
eventLabel: '失去焦点',
description: '右侧输入框失去焦点时触发',
dataSchema: [
{
type: 'object',
properties: {
'event.data.value': {
type: 'string',
title: '当前代码'
}
}
}
]
}
];
_this.actions = [
{
actionType: 'clear',
actionLabel: '清空',
description: '清除选中值'
},
{
actionType: 'reset',
actionLabel: '重置',
description: '将值重置为resetValue若没有配置resetValue则清空'
},
{
actionType: 'focus',
actionLabel: '获取焦点',
description: '获取焦点,焦点落在右侧编辑面板'
},
{
actionType: 'setValue',
actionLabel: '赋值',
description: '触发组件数据更新'
}
];
_this.notRenderFormZone = true;
_this.panelTitle = 'Diff编辑器';
_this.panelJustify = true;
_this.panelBodyCreator = function (context) {
return getSchemaTpl('tabs', [
{
title: '属性',
body: getSchemaTpl('collapseGroup', [
{
title: '基本',
body: [
getSchemaTpl('formItemName', {
required: true
}),
getSchemaTpl('label'),
{
label: '语言',
name: 'language',
type: 'select',
value: 'javascript',
searchable: true,
options: availableLanguages.concat()
},
{
type: 'textarea',
name: 'diffValue',
label: '左侧默认值',
pipeOut: valuePipeOut,
placeholder: '支持使用 <code>\\${xxx}</code> 来获取变量'
},
{
type: 'textarea',
name: 'value',
label: '右侧默认值'
},
getSchemaTpl('labelRemark'),
getSchemaTpl('remark'),
getSchemaTpl('description')
]
},
getSchemaTpl('status', { isFormItem: true }),
getSchemaTpl('validation', {
tag: ValidatorTag.All
})
])
},
{
title: '外观',
body: getSchemaTpl('collapseGroup', [
getSchemaTpl('style:formItem', {
renderer: context.info.renderer,
schema: [
{
name: 'size',
type: 'select',
pipeIn: defaultValue(''),
pipeOut: undefinedPipeOut,
label: '控件尺寸',
options: [
{
label: '默认',
value: ''
},
{
label: '中',
value: 'md'
},
{
label: '大',
value: 'lg'
},
{
label: '特大',
value: 'xl'
},
{
label: '超大',
value: 'xxl'
}
]
}
]
}),
getSchemaTpl('style:classNames')
])
},
{
title: '事件',
className: 'p-none',
body: [
getSchemaTpl('eventControl', __assign({ name: 'onEvent' }, getEventControlConfig(_this.manager, context)))
]
}
]);
};
return _this;
}
return DiffEditorControlPlugin;
}(BasePlugin));
export { DiffEditorControlPlugin };
registerEditorPlugin(DiffEditorControlPlugin);

View File

@ -0,0 +1,27 @@
import { BaseEventContext, BasePlugin, RegionConfig } from 'amis-editor-core';
export declare class FieldSetControlPlugin extends BasePlugin {
rendererName: string;
$schema: string;
disabledRendererPlugin: boolean;
name: string;
isBaseComponent: boolean;
icon: string;
description: string;
docLink: string;
tags: string[];
scaffold: {
type: string;
title: string;
collapsable: boolean;
body: {
type: string;
label: string;
name: string;
}[];
};
previewSchema: any;
regions: Array<RegionConfig>;
panelTitle: string;
panelBodyCreator: (context: BaseEventContext) => any[];
filterProps(props: any): any;
}

View File

@ -0,0 +1,139 @@
import { __assign, __extends } from "tslib";
import { Button } from 'amis';
import React from 'react';
import { defaultValue, getSchemaTpl } from 'amis-editor-core';
import { registerEditorPlugin } from 'amis-editor-core';
import { BasePlugin } from 'amis-editor-core';
var FieldSetControlPlugin = /** @class */ (function (_super) {
__extends(FieldSetControlPlugin, _super);
function FieldSetControlPlugin() {
var _this = _super !== null && _super.apply(this, arguments) || this;
// 关联渲染器名字
_this.rendererName = 'fieldset';
_this.$schema = '/schemas/FieldSetControlSchema.json';
_this.disabledRendererPlugin = true; // 组件面板不显示
// 组件名称
_this.name = '字段集';
_this.isBaseComponent = true;
_this.icon = 'fa fa-toggle-down';
_this.description = "\u591A\u4E2A\u8868\u5355\u9879\u7684\u7EC4\u5408\uFF0C\u53EF\u914D\u7F6E\u662F\u5426\u6298\u53E0";
_this.docLink = '/amis/zh-CN/components/form/fieldset';
_this.tags = ['表单项'];
_this.scaffold = {
type: 'fieldset',
title: '标题',
collapsable: true,
body: [
{
type: 'input-text',
label: '文本1',
name: 'text'
},
{
type: 'input-text',
label: '文本2',
name: 'text'
}
]
};
_this.previewSchema = {
type: 'form',
className: 'text-left',
mode: 'horizontal',
wrapWithPanel: false,
body: [
__assign({}, _this.scaffold)
]
};
_this.regions = [
{
key: 'body',
label: '子表单项',
renderMethod: 'renderBody',
insertPosition: 'inner',
preferTag: '表单项'
}
];
_this.panelTitle = '字段集';
_this.panelBodyCreator = function (context) {
return [
{
label: '标题',
name: 'title',
type: 'input-text'
// required: true
},
getSchemaTpl('switch', {
name: 'collapsable',
label: '是否可折叠',
pipeIn: defaultValue(false)
}),
getSchemaTpl('switch', {
name: 'collapsed',
label: '默认是否折叠',
visibleOn: 'this.collapsable'
}),
{
name: 'className',
type: 'button-group-select',
clearable: true,
size: 'sm',
label: '控件样式',
className: 'w-full',
pipeIn: defaultValue(''),
options: [
{
label: '默认',
value: ''
},
{
value: 'Collapse--xs',
label: '极小'
},
{
value: 'Collapse--sm',
label: '小'
},
{
value: 'Collapse--base',
label: '正常'
},
{
value: 'Collapse--md',
label: '大'
},
{
value: 'Collapse--lg',
label: '超大'
}
]
},
getSchemaTpl('className', {
name: 'headingClassName',
label: '标题 CSS 类名'
}),
getSchemaTpl('className', {
name: 'bodyClassName',
label: '内容区域 CSS 类名'
}),
{
children: (React.createElement(Button, { level: "info", size: "sm", className: "m-b-sm", block: true, onClick: function () {
// this.manager.showInsertPanel('body', context.id);
_this.manager.showRendererPanel('表单项', '请从左侧组件面板中点击添加子表单项');
} }, "\u6DFB\u52A0\u5B50\u8868\u5355\u9879"))
},
getSchemaTpl('subFormItemMode'),
getSchemaTpl('subFormHorizontalMode'),
getSchemaTpl('subFormHorizontal')
];
};
return _this;
}
FieldSetControlPlugin.prototype.filterProps = function (props) {
props.collapsed = false;
return props;
};
return FieldSetControlPlugin;
}(BasePlugin));
export { FieldSetControlPlugin };
registerEditorPlugin(FieldSetControlPlugin);

View File

@ -0,0 +1,42 @@
import { BasePlugin, ChangeEventContext, BaseEventContext, PluginEvent, RegionConfig, ScaffoldForm } from 'amis-editor-core';
import { EditorNodeType } from 'amis-editor-core';
import { RendererAction, RendererEvent } from 'amis-editor-comp/dist/renderers/event-action';
export declare class FormPlugin extends BasePlugin {
rendererName: string;
$schema: string;
order: number;
name: string;
isBaseComponent: boolean;
description: string;
docLink: string;
tags: string[];
icon: string;
scaffold: {
type: string;
title: string;
body: {
label: string;
type: string;
name: string;
}[];
};
previewSchema: {
type: string;
panelClassName: string;
mode: string;
body: {
label: string;
name: string;
type: string;
}[];
};
scaffoldForm: ScaffoldForm;
regions: Array<RegionConfig>;
panelTitle: string;
events: RendererEvent[];
actions: RendererAction[];
panelBodyCreator: (context: BaseEventContext) => any[];
afterUpdate(event: PluginEvent<ChangeEventContext>): void;
buildDataSchemas(node: EditorNodeType, region: EditorNodeType): Promise<any>;
rendererBeforeDispatchEvent(node: EditorNodeType, e: any, data: any): void;
}

View File

@ -0,0 +1,838 @@
import { __assign, __awaiter, __extends, __generator, __spreadArray } from "tslib";
import { registerEditorPlugin } from 'amis-editor-core';
import { BasePlugin } from 'amis-editor-core';
import { defaultValue, getSchemaTpl } from 'amis-editor-core';
import { jsonToJsonSchema } from 'amis-editor-core';
import { setVariable } from 'amis-core';
import { getEventControlConfig } from '../../util';
// 用于脚手架的常用表单控件
var formItemOptions = [
{
name: 'type',
label: '控件类型',
type: 'select',
required: true,
options: [
{
label: '单行文本框',
value: 'input-text'
},
{
label: '多行文本',
value: 'textarea'
},
{
label: '分组',
value: 'group'
},
{
label: '数字输入',
value: 'input-number'
},
{
label: '单选框',
value: 'radios'
},
{
label: '勾选框',
value: 'checkbox'
},
{
label: '复选框',
value: 'checkboxes'
},
{
label: '下拉框',
value: 'select'
},
{
label: '开关',
value: 'switch'
},
{
label: '日期',
value: 'input-date'
},
{
label: '表格',
value: 'input-table'
},
{
label: '文件上传',
value: 'input-file'
},
{
label: '图片上传',
value: 'input-image'
},
{
label: '富文本编辑器',
value: 'input-rich-text'
}
]
},
{
name: 'label',
label: '显示名称',
type: 'input-text',
hiddenOn: 'data.type === "group"'
},
{
name: 'name',
label: '提交字段名',
required: true,
type: 'input-text',
hiddenOn: 'data.type === "group"'
}
];
var FormPlugin = /** @class */ (function (_super) {
__extends(FormPlugin, _super);
function FormPlugin() {
var _this = _super !== null && _super.apply(this, arguments) || this;
// 关联渲染器名字
_this.rendererName = 'form';
_this.$schema = '/schemas/FormSchema.json';
_this.order = -999;
// 组件名称
_this.name = '表单';
_this.isBaseComponent = true;
_this.description = '可用于新建、编辑或者展示数据,配置初始化接口可从远端加载数据,配置提交接口可将数据发送远端。另外也可以将数据提交给其他组件,与其他组件通信。';
_this.docLink = '/amis/zh-CN/components/form/index';
_this.tags = ['功能'];
_this.icon = 'fa fa-list-alt';
_this.scaffold = {
type: 'form',
title: '表单',
body: [
{
label: '文本框',
type: 'input-text',
name: 'text'
}
]
};
_this.previewSchema = {
type: 'form',
panelClassName: 'Panel--default text-left m-b-none',
mode: 'horizontal',
body: [
{
label: '文本',
name: 'a',
type: 'input-text'
}
]
};
_this.scaffoldForm = {
title: '快速创建表单',
body: [
getSchemaTpl('api', {
label: '提交地址'
}),
{
name: 'mode',
label: '文字与输入框展示模式',
type: 'button-group-select',
pipeIn: defaultValue('normal', false),
options: [
{
label: '上下',
value: 'normal'
},
{
label: '左右摆放',
value: 'horizontal'
},
{
label: '内联',
value: 'inline'
}
]
},
{
label: '表单控件',
type: 'combo',
name: 'body',
multiple: true,
draggable: true,
multiLine: false,
items: __spreadArray(__spreadArray([], formItemOptions, true), [
{
visibleOn: 'data.type === "group"',
type: 'combo',
name: 'body',
label: '分组内的控件',
multiple: true,
draggable: true,
multiLine: true,
items: __spreadArray([], formItemOptions, true)
}
], false)
}
]
};
// scaffoldForm: ScaffoldForm = {
// title: '配置表单信息',
// body: [getSchemaTpl('api')],
// canRebuild: true
// };
// 容器配置
_this.regions = [
{
key: 'body',
label: '表单集合',
matchRegion: function (elem) { return !!(elem === null || elem === void 0 ? void 0 : elem.props.noValidate); },
renderMethod: 'renderBody',
preferTag: '表单项'
},
{
label: '按钮组',
key: 'actions',
preferTag: '按钮'
}
];
_this.panelTitle = '表单';
// 事件定义
_this.events = [
{
eventName: 'inited',
eventLabel: '初始化完成',
description: '远程初始化接口请求成功时触发',
// 表单数据为表单变量
dataSchema: [
{
type: 'object',
properties: {
'event.data': {
type: 'object',
title: 'initApi 远程请求返回的初始化数据'
}
}
}
]
},
{
eventName: 'change',
eventLabel: '数值变化',
description: '表单值变化时触发',
dataSchema: [
{
type: 'object',
properties: {
'event.data': {
type: 'object',
title: '当前表单数据'
}
}
}
]
},
{
eventName: 'formItemValidateSucc',
eventLabel: '表单项校验成功',
description: '表单项校验成功后触发',
dataSchema: [
{
type: 'object',
properties: {
'event.data': {
type: 'object',
title: '当前表单数据'
}
}
}
]
},
{
eventName: 'formItemValidateError',
eventLabel: '表单项校验失败',
description: '表单项校验失败后触发',
dataSchema: [
{
type: 'object',
properties: {
'event.data': {
type: 'object',
title: '当前表单数据'
}
}
}
]
},
{
eventName: 'validateSucc',
eventLabel: '表单校验成功',
description: '表单校验成功后触发',
dataSchema: [
{
type: 'object',
properties: {
'event.data': {
type: 'object',
title: '当前表单数据'
}
}
}
]
},
{
eventName: 'validateError',
eventLabel: '表单校验失败',
description: '表单校验失败后触发',
dataSchema: [
{
type: 'object',
properties: {
'event.data': {
type: 'object',
title: '当前表单数据'
}
}
}
]
},
{
eventName: 'submitSucc',
eventLabel: '提交成功',
description: '表单提交请求成功后触发',
dataSchema: [
{
type: 'object',
properties: {
'event.data.result': {
type: 'object',
title: '提交成功后返回的数据'
}
}
}
]
},
{
eventName: 'submitFail',
eventLabel: '提交失败',
description: '表单提交请求失败后触发',
dataSchema: [
{
type: 'object',
properties: {
'event.data.error': {
type: 'object',
title: '提交失败后返回的错误信息'
}
}
}
]
}
];
// 动作定义
_this.actions = [
{
actionLabel: '提交表单',
actionType: 'submit',
description: '触发表单提交'
},
{
actionLabel: '重置表单',
actionType: 'reset',
description: '触发表单重置'
},
{
actionLabel: '清空表单',
actionType: 'clear',
description: '触发表单清空'
},
{
actionLabel: '校验表单',
actionType: 'validate',
description: '触发表单校验'
},
{
actionLabel: '重新加载',
actionType: 'reload',
description: '触发组件数据刷新并重新渲染'
},
{
actionLabel: '更新数据',
actionType: 'setValue',
description: '触发组件数据更新'
}
];
_this.panelBodyCreator = function (context) {
var isCRUDFilter = /\/crud\/filter\/form$/.test(context.path);
var isInDialog = /(?:\/|^)dialog\/.+$/.test(context.path);
return [
getSchemaTpl('tabs', [
{
title: '常规',
body: [
{
name: 'title',
type: 'input-text',
label: '标题',
visibleOn: "this.wrapWithPanel !== false"
},
{
name: 'submitText',
type: 'input-text',
label: '提交按钮名称',
pipeIn: defaultValue('提交'),
visibleOn: "this.wrapWithPanel !== false && !this.actions && (!Array.isArray(this.body) || !this.body.some(function(item) {return !!~['submit','button','reset','button-group'].indexOf(item.type);}))",
description: '当没有自定义按钮时有效。'
},
getSchemaTpl('switch', {
name: 'autoFocus',
label: '自动聚焦',
labelRemark: {
className: 'm-l-xs',
trigger: 'click',
rootClose: true,
content: '设置后将让表单的第一个可输入的表单项获得焦点',
placement: 'left'
}
}),
getSchemaTpl('submitOnChange'),
getSchemaTpl('switch', {
label: '提交完后重置表单',
name: 'resetAfterSubmit',
labelRemark: {
className: 'm-l-xs',
trigger: 'click',
rootClose: true,
content: '即表单提交完后,让所有表单项的值还原成初始值',
placement: 'left'
}
}),
isCRUDFilter
? null
: getSchemaTpl('switch', {
label: '初始化后提交一次',
name: 'submitOnInit',
labelRemark: {
className: 'm-l-xs',
trigger: 'click',
rootClose: true,
content: '开启后,表单初始完成便会触发一次提交。',
placement: 'left'
}
}),
isInDialog
? getSchemaTpl('switch', {
label: '提交后是否关闭对话框',
name: 'closeDialogOnSubmit',
pipeIn: function (value) { return value !== false; }
})
: null,
isCRUDFilter
? null
: {
label: '提交给其他组件',
name: 'target',
type: 'input-text',
description: '可以通过设置此属性,把当前表单的值提交给目标组件,而不是自己来通过接口保存,请填写目标组件的 <code>name</code> 属性,多个组件请用逗号隔开。当 <code>target</code> 为 <code>window</code> 时,则把表单数据附属到地址栏。'
},
getSchemaTpl('reload', {
test: !isCRUDFilter
}),
isCRUDFilter
? null
: {
label: '跳转',
name: 'redirect',
type: 'input-text',
description: '当设置此值后,表单提交完后跳转到目标地址。'
},
getSchemaTpl('switch', {
name: 'canAccessSuperData',
label: '是否自动填充父级同名变量',
pipeIn: defaultValue(true)
}),
getSchemaTpl('switch', {
name: 'persistData',
label: '是否开启本地缓存',
pipeIn: defaultValue(false),
labelRemark: {
className: 'm-l-xs',
trigger: 'click',
rootClose: true,
content: '开启后,表单的数据会缓存在浏览器中,切换页面或关闭弹框不会清空当前表单内的数据',
placement: 'left'
}
}),
getSchemaTpl('switch', {
name: 'clearPersistDataAfterSubmit',
label: '提交成功后清空本地缓存',
pipeIn: defaultValue(false),
visibleOn: 'data.persistData',
labelRemark: {
className: 'm-l-xs',
trigger: 'click',
rootClose: true,
content: '开启本地缓存并开启本配置项后,表单提交成功后,会自动清除浏览器中当前表单的缓存数据',
placement: 'left'
}
}),
{
name: 'rules',
label: '表单组合校验',
type: 'combo',
multiple: true,
multiLine: true,
items: [
{
name: 'rule',
label: '校验规则',
type: 'input-text'
},
{
name: 'message',
label: '报错提示',
type: 'input-text'
}
]
}
]
},
isCRUDFilter
? null
: {
title: '接口',
body: [
getSchemaTpl('api', {
label: '保存接口',
description: '用来保存表单数据',
sampleBuilder: function (schema) { return "{\n \"status\": 0,\n \"msg\": \"\",\n\n // \u53EF\u4EE5\u4E0D\u8FD4\u56DE\uFF0C\u5982\u679C\u8FD4\u56DE\u4E86\u6570\u636E\u5C06\u88AB merge \u8FDB\u6765\u3002\n data: {}\n }"; }
// test: !this.isCRUDFilter
}),
getSchemaTpl('switch', {
name: 'asyncApi',
label: '采用异步方式?',
visibleOn: 'data.api',
labelRemark: {
trigger: 'click',
rootClose: true,
title: '什么是异步方式?',
content: '异步方式主要用来解决请求超时问题,启用异步方式后,程序会在请求完后,定时轮询请求额外的接口用来咨询操作是否完成。所以接口可以快速的返回,而不需要等待流程真正完成。',
placement: 'left'
},
pipeIn: function (value) { return value != null; },
pipeOut: function (value) { return (value ? '' : undefined); }
}),
getSchemaTpl('api', {
name: 'asyncApi',
label: '异步检测接口',
visibleOn: 'data.asyncApi != null',
description: '设置此属性后,表单提交发送保存接口后,还会继续轮训请求该接口,直到返回 finished 属性为 true 才 结束'
}),
{
type: 'divider'
},
getSchemaTpl('api', {
name: 'initApi',
label: '初始化接口',
description: '用来初始化表单数据',
sampleBuilder: function (schema) {
var data = {};
if (Array.isArray(schema.body)) {
schema.body.forEach(function (control) {
if (control.name &&
!~['combo', 'input-array', 'form'].indexOf(control.type)) {
setVariable(data, control.name, 'sample');
}
});
}
return JSON.stringify({
status: 0,
msg: '',
data: data
}, null, 2);
}
}),
getSchemaTpl('switch', {
label: '开启定时刷新',
name: 'interval',
visibleOn: 'data.initApi',
pipeIn: function (value) { return !!value; },
pipeOut: function (value) { return (value ? 3000 : undefined); }
}),
{
name: 'interval',
type: 'input-number',
visibleOn: 'data.interval',
step: 500,
className: 'm-t-n-sm',
description: '设置后将自动定时刷新,单位 ms'
},
getSchemaTpl('switch', {
name: 'silentPolling',
label: '静默刷新',
visibleOn: '!!data.interval',
description: '设置自动定时刷新时是否显示loading'
}),
{
name: 'stopAutoRefreshWhen',
label: '停止定时刷新检测表达式',
type: 'input-text',
visibleOn: '!!data.interval',
description: '定时刷新一旦设置会一直刷新,除非给出表达式,条件满足后则不刷新了。'
},
getSchemaTpl('switch', {
label: '采用异步方式?',
name: 'initAsyncApi',
visibleOn: 'data.initApi',
remark: {
trigger: 'click',
rootClose: true,
title: '什么是异步方式?',
content: '异步方式主要用来解决请求超时问题,启用异步方式后,程序会在请求完后,定时轮询请求额外的接口用来咨询操作是否完成。所以接口可以快速的返回,而不需要等待流程真正完成。',
placement: 'left'
},
pipeIn: function (value) { return value != null; },
pipeOut: function (value) { return (value ? '' : undefined); }
}),
getSchemaTpl('api', {
name: 'initAsyncApi',
label: '异步检测接口',
visibleOn: 'data.initAsyncApi != null',
description: '设置此属性后,表单请求 initApi 后,还会继续轮训请求该接口,直到返回 finished 属性为 true 才 结束'
}),
{
type: 'divider'
},
isCRUDFilter
? {
name: 'messages',
pipeIn: defaultValue({
fetchFailed: '初始化失败'
}),
label: '默认消息信息',
type: 'combo',
multiLine: true,
description: '可以不设置,接口返回的 msg 字段,优先级更高',
items: [
{
label: '获取成功提示',
name: 'fetchSuccess',
type: 'input-text'
},
{
label: '获取失败提示',
name: 'fetchFailed',
type: 'input-text'
}
]
}
: {
name: 'messages',
pipeIn: defaultValue({
fetchFailed: '初始化失败',
saveSuccess: '保存成功',
saveFailed: '保存失败'
}),
label: '默认消息提示',
type: 'combo',
multiLine: true,
description: '可以不设置,接口返回的 msg 字段,优先级更高',
items: [
{
label: '获取成功提示',
name: 'fetchSuccess',
type: 'input-text'
},
{
label: '获取失败提示',
name: 'fetchFailed',
type: 'input-text'
},
{
label: '保存成功提示',
name: 'saveSuccess',
type: 'input-text'
},
{
label: '保存失败提示',
name: 'saveFailed',
type: 'input-text'
},
{
label: '验证失败提示',
name: 'validateFailed',
type: 'input-text'
}
]
}
]
},
{
title: '外观',
body: [
getSchemaTpl('switch', {
name: 'wrapWithPanel',
label: '用 Panel 包裹',
pipeIn: defaultValue(true),
labelRemark: {
className: 'm-l-xs',
trigger: 'click',
rootClose: true,
content: '关闭后,表单只会展示表单项,标题和操作栏将不会显示。',
placement: 'left'
}
}),
{
name: 'mode',
label: '展示模式',
type: 'button-group-select',
size: 'sm',
// mode: 'inline',
// className: 'block',
pipeIn: defaultValue('normal', false),
options: [
{
label: '默认',
value: 'normal'
},
{
label: '左右摆放',
value: 'horizontal'
},
{
label: '内联',
value: 'inline'
}
]
},
getSchemaTpl('horizontal', {
visibleOn: 'this.mode == "horizontal"'
}),
getSchemaTpl('className'),
getSchemaTpl('className', {
name: 'panelClassName',
visibleOn: 'this.wrapWithPanel !== false',
label: 'Panel 的 CSS 类名',
description: '可以设置 Panel--info 之类的'
})
]
},
{
title: '事件',
className: 'p-none',
body: [
getSchemaTpl('eventControl', __assign({ name: 'onEvent' }, getEventControlConfig(_this.manager, context)))
]
},
{
title: '其他',
body: [
getSchemaTpl('ref'),
getSchemaTpl('name', {
test: !isCRUDFilter
}),
getSchemaTpl('switch', {
name: 'debug',
label: '开启调试',
labelRemark: '显示当前表单的数据在表单顶部'
}),
getSchemaTpl('disabled'),
getSchemaTpl('visible')
]
}
])
];
};
return _this;
}
FormPlugin.prototype.afterUpdate = function (event) {
var _a;
var context = event.context;
if (context.info.renderer.name === 'form' &&
((_a = context.diff) === null || _a === void 0 ? void 0 : _a.some(function (change) { var _a; return ((_a = change.path) === null || _a === void 0 ? void 0 : _a.join('.')) === 'wrapWithPanel'; }))) {
this.manager.buildPanels();
}
};
FormPlugin.prototype.buildDataSchemas = function (node, region) {
var _a, _b, _c, _d, _e, _f;
return __awaiter(this, void 0, void 0, function () {
var jsonschema, pool, current, schema, _g, _h, _j, schema, _k, _l, _m;
var _o;
return __generator(this, function (_p) {
switch (_p.label) {
case 0:
jsonschema = {
$id: 'formItems',
type: 'object',
properties: {}
};
pool = node.children.concat();
_p.label = 1;
case 1:
if (!pool.length) return [3 /*break*/, 13];
current = pool.shift();
if (!(((_a = current.rendererConfig) === null || _a === void 0 ? void 0 : _a.type) === 'combo')) return [3 /*break*/, 6];
schema = current.schema;
if (!schema.name) return [3 /*break*/, 5];
_g = jsonschema.properties;
_h = schema.name;
_o = {
type: 'array',
title: schema.label || schema.name
};
if (!((_c = (_b = current.info) === null || _b === void 0 ? void 0 : _b.plugin) === null || _c === void 0 ? void 0 : _c.buildDataSchemas)) return [3 /*break*/, 3];
return [4 /*yield*/, current.info.plugin.buildDataSchemas(current, region)];
case 2:
_j = _p.sent();
return [3 /*break*/, 4];
case 3:
_j = {
type: 'object',
properties: {}
};
_p.label = 4;
case 4:
_g[_h] = (_o.items = _j,
_o);
_p.label = 5;
case 5: return [3 /*break*/, 12];
case 6:
if (!((_d = current.rendererConfig) === null || _d === void 0 ? void 0 : _d.isFormItem)) return [3 /*break*/, 11];
schema = current.schema;
if (!schema.name) return [3 /*break*/, 10];
_k = jsonschema.properties;
_l = schema.name;
if (!((_f = (_e = current.info) === null || _e === void 0 ? void 0 : _e.plugin) === null || _f === void 0 ? void 0 : _f.buildDataSchemas)) return [3 /*break*/, 8];
return [4 /*yield*/, current.info.plugin.buildDataSchemas(current, region)];
case 7:
_m = _p.sent();
return [3 /*break*/, 9];
case 8:
_m = {
type: 'string',
title: schema.label || schema.name,
originalValue: schema.value,
description: schema.description
};
_p.label = 9;
case 9:
_k[_l] = _m;
_p.label = 10;
case 10: return [3 /*break*/, 12];
case 11:
pool.push.apply(pool, current.children);
_p.label = 12;
case 12: return [3 /*break*/, 1];
case 13: return [2 /*return*/, jsonschema];
}
});
});
};
FormPlugin.prototype.rendererBeforeDispatchEvent = function (node, e, data) {
if (e === 'inited') {
// 监听 form 的 inited 事件,把数据加入到上下文中
var scope = this.manager.dataSchema.getScope("".concat(node.id, "-").concat(node.type));
var jsonschema = __assign({ $id: 'formInitedData' }, jsonToJsonSchema(data));
scope.removeSchema(jsonschema.$id);
scope.addSchema(jsonschema);
}
};
return FormPlugin;
}(BasePlugin));
export { FormPlugin };
registerEditorPlugin(FormPlugin);

View File

@ -0,0 +1,27 @@
/// <reference types="react" />
import { BasePlugin } from 'amis-editor-core';
export declare class FormulaControlPlugin extends BasePlugin {
rendererName: string;
$schema: string;
name: string;
isBaseComponent: boolean;
icon: string;
description: string;
docLink: string;
tags: string[];
scaffold: {
type: string;
name: string;
};
previewSchema: any;
panelTitle: string;
panelBody: any[];
renderRenderer(props: any): import("react").DetailedReactHTMLElement<{
key: any;
className: string;
children: import("react").DetailedReactHTMLElement<{
className: string;
children: string;
}, HTMLElement>;
}, HTMLElement>;
}

View File

@ -0,0 +1,73 @@
import { __extends } from "tslib";
import { defaultValue, getSchemaTpl } from 'amis-editor-core';
import { registerEditorPlugin } from 'amis-editor-core';
import { BasePlugin } from 'amis-editor-core';
var FormulaControlPlugin = /** @class */ (function (_super) {
__extends(FormulaControlPlugin, _super);
function FormulaControlPlugin() {
var _this = _super !== null && _super.apply(this, arguments) || this;
// 关联渲染器名字
_this.rendererName = 'formula';
_this.$schema = '/schemas/FormulaControlSchema.json';
// 组件名称
_this.name = '公式';
_this.isBaseComponent = true;
_this.icon = 'fa fa-calculator';
_this.description = "\u901A\u8FC7\u516C\u5F0F\u8BA1\u7B97\u6307\u5B9A\u7684\u53D8\u91CF\u503C\uFF0C\u5E76\u5C06\u5176\u7ED3\u679C\u4F5C\u7528\u5230\u6307\u5B9A\u7684\u53D8\u91CF\u4E2D";
_this.docLink = '/amis/zh-CN/components/form/formula';
_this.tags = ['表单项'];
_this.scaffold = {
type: 'formula',
name: 'formula'
};
_this.previewSchema = {
type: 'tpl',
tpl: '计算公式'
};
_this.panelTitle = '公式';
_this.panelBody = [
{
label: '字段名',
name: 'name',
type: 'input-text',
description: '公式计算结果会作用到此字段名对应的变量中。'
},
{
type: 'input-text',
name: 'value',
label: '默认值'
},
{
type: 'input-text',
name: 'formula',
label: '公式',
description: '支持 JS 表达式,如: <code>data.var_a + 2</code>,即当表单项 <code>var_a</code> 变化的时候,会自动给当前表单项设置为 <code>var_a + 2</code> 的值。若设置为字符串,则需要加引号'
},
{
type: 'input-text',
name: 'condition',
label: '作用条件',
description: '支持如:<code>\\${xxx}</code>或者<code>data.xxx == "a"</code> 表达式来配置作用条件,当满足该作用条件时,会将计算结果设置到目标变量上。'
},
getSchemaTpl('switch', {
name: 'initSet',
label: '是否初始应用',
description: '是否初始化的时候运行公式结果,并设置到目标变量上。',
pipeIn: defaultValue(true)
}),
getSchemaTpl('switch', {
name: 'autoSet',
label: '是否自动应用',
description: '是否自动计算公式结果,有变化时自动设置到目标变量上。<br />关闭后,通过按钮也能触发运算。',
pipeIn: defaultValue(true)
})
];
return _this;
}
FormulaControlPlugin.prototype.renderRenderer = function (props) {
return this.renderPlaceholder('功能组件(公式)', props.key);
};
return FormulaControlPlugin;
}(BasePlugin));
export { FormulaControlPlugin };
registerEditorPlugin(FormulaControlPlugin);

View File

@ -0,0 +1,26 @@
import { BasePlugin, ContextMenuEventContext, ContextMenuItem, RegionConfig } from 'amis-editor-core';
export declare class GroupControlPlugin extends BasePlugin {
rendererName: string;
$schema: string;
disabledRendererPlugin: boolean;
name: string;
isBaseComponent: boolean;
icon: string;
description: string;
docLink: string;
tags: string[];
scaffold: {
type: string;
body: {
type: string;
label: string;
name: string;
}[];
label: boolean;
};
previewSchema: any;
regions: Array<RegionConfig>;
panelTitle: string;
panelBody: any[];
buildEditorContextMenu({ id, schema, region, selections, info }: ContextMenuEventContext, menus: Array<ContextMenuItem>): void;
}

View File

@ -0,0 +1,240 @@
import { __assign, __extends } from "tslib";
import { Button } from 'amis';
import React from 'react';
import { registerEditorPlugin } from 'amis-editor-core';
import { BasePlugin } from 'amis-editor-core';
import { defaultValue, getSchemaTpl } from 'amis-editor-core';
import { JSONPipeIn, JSONUpdate, makeHorizontalDeeper } from 'amis-editor-core';
var GroupControlPlugin = /** @class */ (function (_super) {
__extends(GroupControlPlugin, _super);
function GroupControlPlugin() {
var _this = _super !== null && _super.apply(this, arguments) || this;
// 关联渲染器名字
_this.rendererName = 'group';
_this.$schema = '/schemas/GroupControlSchema.json';
_this.disabledRendererPlugin = true; // 组件面板不显示
// 组件名称
_this.name = '表单组';
_this.isBaseComponent = true;
_this.icon = 'fa fa-id-card-o';
_this.description = '水平展示多个表单项';
_this.docLink = '/amis/zh-CN/components/form/group';
_this.tags = ['表单项'];
_this.scaffold = {
type: 'group',
body: [
{
type: 'input-text',
label: '文本',
name: 'var1'
},
{
type: 'input-text',
label: '文本',
name: 'var2'
}
],
label: false
};
_this.previewSchema = {
type: 'form',
className: 'text-left',
wrapWithPanel: false,
mode: 'horizontal',
body: [
__assign(__assign({}, _this.scaffold), { mode: 'normal' })
]
};
// 容器配置
_this.regions = [
{
key: 'body',
label: '子表单',
renderMethod: 'renderInput',
preferTag: '表单项',
wrapperResolve: function (dom) { return dom; }
}
];
_this.panelTitle = '表单组';
_this.panelBody = [
getSchemaTpl('tabs', [
{
title: '常规',
body: [
getSchemaTpl('label'),
getSchemaTpl('description', {
visible: 'this.label'
}),
{
children: (React.createElement(Button, { className: "m-b", onClick: function () {
// this.manager.showInsertPanel('body')
_this.manager.showRendererPanel('表单项', '请从左侧组件面板中点击添加表单项');
}, level: "danger", tooltip: "\u63D2\u5165\u4E00\u4E2A\u65B0\u7684\u5143\u7D20", size: "sm", block: true }, "\u65B0\u589E\u5143\u7D20"))
},
getSchemaTpl('remark'),
getSchemaTpl('labelRemark')
]
},
{
title: '外观',
body: [
getSchemaTpl('formItemMode'),
getSchemaTpl('horizontalMode'),
getSchemaTpl('horizontal', {
visibleOn: '(data.$$formMode == "horizontal" || data.mode == "horizontal") && data.label !== false && data.horizontal',
pipeIn: function (value, data) {
value =
value ||
(data.formHorizontal &&
makeHorizontalDeeper(data.formHorizontal, data.body.length));
return {
leftRate: value && typeof value.left === 'number'
? value.left
: value &&
/\bcol\-(?:xs|sm|md|lg)\-(\d+)\b/.test(value.left)
? parseInt(RegExp.$1, 10)
: 2,
leftFixed: (value && value.leftFixed) || ''
};
}
}),
getSchemaTpl('subFormItemMode'),
getSchemaTpl('subFormHorizontalMode'),
getSchemaTpl('subFormHorizontal'),
{
name: 'body',
type: 'combo',
label: '列宽度配置',
multiple: true,
removable: false,
addable: false,
multiLine: true,
visibleOn: 'data.$$formMode != "inline"',
items: [
{
type: 'button-group-select',
name: 'columnRatio',
label: '宽度设置',
tiled: true,
pipeIn: function (value, data) {
if (typeof value === 'number') {
return 'custom';
}
else if (data.columnClassName &&
/\bcol\-(?:xs|sm|md|lg)\-(\d+)\b/.test(data.columnClassName)) {
return 'custom';
}
return value || '';
},
pipeOut: function (value) { return (value === 'custom' ? 2 : value); },
options: [
{
value: '',
label: '适配宽度'
},
{
value: 'auto',
label: '适配内容'
},
{
value: 'custom',
label: '自定义'
}
]
},
{
label: '宽度占比',
type: 'input-range',
name: 'columnRatio',
visibleOn: 'typeof this.columnRatio === "number" || this.columnClassName && /\\bcol\\-(?:xs|sm|md|lg)\\-(\\d+)\\b/.test(this.columnClassName)',
pipeIn: function (value, data) {
if (typeof value === 'number') {
return value;
}
if (!data.columnClassName ||
!/\bcol\-(?:xs|sm|md|lg)\-(\d+)\b/.test(data.columnClassName)) {
return 2;
}
return parseInt(RegExp.$1, 10) || 2;
},
min: 1,
max: 12,
step: 1
}
]
},
{
type: 'button-group-select',
name: 'gap',
label: '间隔大小',
pipeIn: defaultValue(''),
size: 'sm',
tiled: true,
clearable: true,
options: [
{
value: 'xs',
label: '极小'
},
{
value: 'sm',
label: '小'
},
{
value: 'md',
label: '中'
},
{
value: 'lg',
label: '大'
}
]
},
getSchemaTpl('className'),
{
name: 'body',
type: 'combo',
label: '列 CSS 类名配置',
multiple: true,
removable: false,
addable: false,
items: [
{
type: 'input-text',
name: 'columnClassName'
}
]
}
]
},
{
title: '显隐',
body: [getSchemaTpl('ref'), getSchemaTpl('visible')]
}
])
];
return _this;
}
GroupControlPlugin.prototype.buildEditorContextMenu = function (_a, menus) {
var _this = this;
var id = _a.id, schema = _a.schema, region = _a.region, selections = _a.selections, info = _a.info;
if (selections.length ||
info.plugin !== this ||
!Array.isArray(schema.body) ||
schema.body.length < 2) {
return;
}
menus.push({
label: '变成多行',
onSelect: function () {
var store = _this.manager.store;
var rootSchema = store.schema;
rootSchema = JSONUpdate(rootSchema, id, JSONPipeIn(schema.body), true);
store.traceableSetSchema(rootSchema);
}
});
};
return GroupControlPlugin;
}(BasePlugin));
export { GroupControlPlugin };
registerEditorPlugin(GroupControlPlugin);

View File

@ -0,0 +1,24 @@
/// <reference types="react" />
import { BasePlugin } from 'amis-editor-core';
export declare class HiddenControlPlugin extends BasePlugin {
rendererName: string;
$schema: string;
name: string;
isBaseComponent: boolean;
icon: string;
description: string;
docLink: string;
tags: string[];
scaffold: {
type: string;
name: string;
};
previewSchema: any;
panelTitle: string;
panelBody: {
type: string;
name: string;
label: string;
}[];
renderRenderer(props: any): JSX.Element;
}

View File

@ -0,0 +1,44 @@
import { __extends } from "tslib";
import React from 'react';
import { registerEditorPlugin } from 'amis-editor-core';
import { BasePlugin } from 'amis-editor-core';
var HiddenControlPlugin = /** @class */ (function (_super) {
__extends(HiddenControlPlugin, _super);
function HiddenControlPlugin() {
var _this = _super !== null && _super.apply(this, arguments) || this;
// 关联渲染器名字
_this.rendererName = 'hidden';
_this.$schema = '/schemas/HiddenControlSchema.json';
// 组件名称
_this.name = '隐藏域';
_this.isBaseComponent = true;
_this.icon = 'fa fa-eye-slash';
_this.description = "\u9690\u85CF\u8868\u5355\u9879";
_this.docLink = '/amis/zh-CN/components/form/hidden';
_this.tags = ['表单项'];
_this.scaffold = {
type: 'hidden',
name: 'var1'
};
_this.previewSchema = {
type: 'tpl',
tpl: '隐藏域'
};
_this.panelTitle = '隐藏域';
_this.panelBody = [
{
type: 'input-text',
name: 'value',
label: '默认值'
}
];
return _this;
}
HiddenControlPlugin.prototype.renderRenderer = function (props) {
return (React.createElement("div", { key: props.key, className: "wrapper-sm b-a b-light m-b-sm" },
React.createElement("span", { className: "text-muted" }, "\u529F\u80FD\u7EC4\u4EF6\uFF08\u9690\u85CF\u5B57\u6BB5\uFF09")));
};
return HiddenControlPlugin;
}(BasePlugin));
export { HiddenControlPlugin };
registerEditorPlugin(HiddenControlPlugin);

View File

@ -0,0 +1,28 @@
import { BaseEventContext, BasePlugin, BasicToolbarItem, ContextMenuEventContext, ContextMenuItem } from 'amis-editor-core';
export declare class ArrayControlPlugin extends BasePlugin {
rendererName: string;
$schema: string;
disabledRendererPlugin: boolean;
name: string;
isBaseComponent: boolean;
icon: string;
description: string;
docLink: string;
tags: string[];
scaffold: {
type: string;
label: string;
name: string;
items: {
type: string;
placeholder: string;
};
};
previewSchema: any;
panelTitle: string;
panelBodyCreator: (context: BaseEventContext) => any[];
filterProps(props: any): any;
buildEditorToolbar({ id, info }: BaseEventContext, toolbars: Array<BasicToolbarItem>): void;
buildEditorContextMenu({ id, schema, region, info }: ContextMenuEventContext, menus: Array<ContextMenuItem>): void;
editDetail(id: string): void;
}

View File

@ -0,0 +1,169 @@
import { __assign, __extends } from "tslib";
import { Button } from 'amis';
import { registerEditorPlugin } from 'amis-editor-core';
import { BasePlugin } from 'amis-editor-core';
import { defaultValue, getSchemaTpl, valuePipeOut } from 'amis-editor-core';
import React from 'react';
import { diff, JSONPipeOut } from 'amis-editor-core';
var ArrayControlPlugin = /** @class */ (function (_super) {
__extends(ArrayControlPlugin, _super);
function ArrayControlPlugin() {
var _this = _super !== null && _super.apply(this, arguments) || this;
// 关联渲染器名字
_this.rendererName = 'input-array';
_this.$schema = '/schemas/ArrayControlSchema.json';
_this.disabledRendererPlugin = true;
// 组件名称
_this.name = '数组输入框';
_this.isBaseComponent = true;
_this.icon = 'fa fa-bars';
_this.description = 'Array 数组输入框,可自定义成员输入形式。其实是 Combo 的 flat 值打平的一种用法,可直接用 combo 代替。';
_this.docLink = '/amis/zh-CN/components/form/input-array';
_this.tags = ['表单项'];
_this.scaffold = {
type: 'input-array',
label: '数组输入框',
name: 'array',
items: {
type: 'input-text',
placeholder: '请输入'
}
};
_this.previewSchema = {
type: 'form',
className: 'text-left',
wrapWithPanel: false,
mode: 'horizontal',
body: [
__assign(__assign({}, _this.scaffold), { value: ['row1', ''], draggable: true })
]
};
_this.panelTitle = '数组框';
_this.panelBodyCreator = function (context) {
return [
getSchemaTpl('switchDefaultValue'),
{
type: 'textarea',
name: 'value',
label: '默认值',
visibleOn: 'typeof this.value !== "undefined"',
pipeOut: valuePipeOut
},
{
children: (React.createElement(Button, { size: "sm", level: "danger", className: "m-b", block: true, onClick: _this.editDetail.bind(_this, context.id) }, "\u914D\u7F6E\u5B50\u8868\u5355\u9879"))
},
getSchemaTpl('switch', {
label: '是否可新增',
name: 'addable',
pipeIn: defaultValue(true)
}),
{
label: '新增按钮文字',
name: 'addButtonText',
type: 'input-text',
visibleOn: 'data.addable',
pipeIn: defaultValue('新增')
},
{
type: 'textarea',
name: 'scaffold',
label: '新增初始值',
visibleOn: 'this.addable !== false',
pipeOut: valuePipeOut,
pipeIn: defaultValue('')
},
getSchemaTpl('switch', {
label: '是否可删除',
name: 'removable',
pipeIn: defaultValue(true)
}),
getSchemaTpl('api', {
name: 'deleteApi',
label: '删除前的请求',
visibleOn: 'data.removable'
}),
{
label: '删除确认提示',
name: 'deleteConfirmText',
type: 'input-text',
visibleOn: 'data.deleteApi',
pipeIn: defaultValue('确认要删除')
},
getSchemaTpl('switch', {
name: 'draggable',
label: '启用拖拽排序'
}),
{
name: 'draggableTip',
visibleOn: 'data.draggable',
type: 'input-text',
label: '可拖拽排序提示文字',
pipeIn: defaultValue('可通过拖动每行中的【交换】按钮进行顺序调整')
},
{
name: 'addButtonText',
type: 'input-text',
label: '新增按钮文字',
pipeIn: defaultValue('新增')
},
getSchemaTpl('minLength'),
getSchemaTpl('maxLength')
];
};
return _this;
}
ArrayControlPlugin.prototype.filterProps = function (props) {
props = JSONPipeOut(props);
// 至少显示一个成员,否则啥都不显示。
if (!props.value) {
props.value = [''];
}
return props;
};
ArrayControlPlugin.prototype.buildEditorToolbar = function (_a, toolbars) {
var id = _a.id, info = _a.info;
if (info.renderer.name === 'input-array') {
toolbars.push({
icon: 'fa fa-expand',
order: 100,
tooltip: '配置子表单项',
onClick: this.editDetail.bind(this, id)
});
}
};
ArrayControlPlugin.prototype.buildEditorContextMenu = function (_a, menus) {
var id = _a.id, schema = _a.schema, region = _a.region, info = _a.info;
if (info.renderer.name === 'input-array') {
menus.push('|', {
label: '配置成员渲染器',
onSelect: this.editDetail.bind(this, id)
});
}
};
ArrayControlPlugin.prototype.editDetail = function (id) {
var manager = this.manager;
var store = manager.store;
var node = store.getNodeById(id);
var value = store.getValueOf(id);
node &&
value &&
this.manager.openSubEditor({
title: '配置子表单项',
value: value.items,
slot: {
type: 'form',
mode: 'normal',
body: '$$',
wrapWithPanel: false,
className: 'wrapper'
},
onChange: function (newValue) {
newValue = __assign(__assign({}, value), { items: newValue });
manager.panelChangeValue(newValue, diff(value, newValue));
}
});
};
return ArrayControlPlugin;
}(BasePlugin));
export { ArrayControlPlugin };
registerEditorPlugin(ArrayControlPlugin);

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