mirror of
https://gitee.com/baidu/amis.git
synced 2024-11-29 18:48:45 +08:00
rm rollup cache
Change-Id: Ib1e053b5b92da45a8719984b01bedd2e02c2839c
This commit is contained in:
2betop
parent
7cbfa49cad
commit
93c5f97dfb
File diff suppressed because it is too large
Load Diff
@ -1,347 +0,0 @@
|
||||
/**
|
||||
* @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'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
@ -1,8 +0,0 @@
|
||||
/// <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 {};
|
||||
@ -1,32 +0,0 @@
|
||||
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
|
||||
});
|
||||
}
|
||||
@ -1,79 +0,0 @@
|
||||
/**
|
||||
* @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 {};
|
||||
@ -1,512 +0,0 @@
|
||||
/**
|
||||
* @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 };
|
||||
@ -1,3 +0,0 @@
|
||||
import type { ActionTypeNode } from 'amis-editor-comp/dist/renderers/event-action';
|
||||
declare const ACTION_TYPE_TREE: ActionTypeNode[];
|
||||
export default ACTION_TYPE_TREE;
|
||||
@ -1,178 +0,0 @@
|
||||
// 表单类动作
|
||||
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;
|
||||
@ -1,13 +0,0 @@
|
||||
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;
|
||||
@ -1,117 +0,0 @@
|
||||
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')]
|
||||
}
|
||||
])
|
||||
}
|
||||
};
|
||||
}
|
||||
@ -1,154 +0,0 @@
|
||||
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 };
|
||||
@ -1,154 +0,0 @@
|
||||
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 };
|
||||
@ -1,22 +0,0 @@
|
||||
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;
|
||||
}
|
||||
@ -1,104 +0,0 @@
|
||||
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);
|
||||
@ -1,48 +0,0 @@
|
||||
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;
|
||||
};
|
||||
}
|
||||
@ -1,286 +0,0 @@
|
||||
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);
|
||||
@ -1,22 +0,0 @@
|
||||
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[];
|
||||
}
|
||||
@ -1,148 +0,0 @@
|
||||
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);
|
||||
@ -1,27 +0,0 @@
|
||||
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;
|
||||
}
|
||||
@ -1,299 +0,0 @@
|
||||
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);
|
||||
@ -1,27 +0,0 @@
|
||||
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[];
|
||||
}
|
||||
@ -1,110 +0,0 @@
|
||||
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);
|
||||
@ -1,29 +0,0 @@
|
||||
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;
|
||||
}
|
||||
@ -1,288 +0,0 @@
|
||||
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);
|
||||
@ -1,39 +0,0 @@
|
||||
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>;
|
||||
}
|
||||
@ -1,130 +0,0 @@
|
||||
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);
|
||||
@ -1,30 +0,0 @@
|
||||
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[];
|
||||
}
|
||||
@ -1,83 +0,0 @@
|
||||
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);
|
||||
@ -1,127 +0,0 @@
|
||||
/// <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>;
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,54 +0,0 @@
|
||||
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;
|
||||
}
|
||||
@ -1,220 +0,0 @@
|
||||
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);
|
||||
@ -1,71 +0,0 @@
|
||||
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;
|
||||
}
|
||||
@ -1,242 +0,0 @@
|
||||
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);
|
||||
@ -1,40 +0,0 @@
|
||||
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;
|
||||
}
|
||||
@ -1,350 +0,0 @@
|
||||
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);
|
||||
@ -1,50 +0,0 @@
|
||||
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;
|
||||
}
|
||||
@ -1,180 +0,0 @@
|
||||
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);
|
||||
@ -1,19 +0,0 @@
|
||||
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[];
|
||||
}
|
||||
@ -1,62 +0,0 @@
|
||||
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);
|
||||
@ -1,33 +0,0 @@
|
||||
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>;
|
||||
}
|
||||
@ -1,129 +0,0 @@
|
||||
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);
|
||||
@ -1,65 +0,0 @@
|
||||
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>;
|
||||
}
|
||||
@ -1,246 +0,0 @@
|
||||
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);
|
||||
@ -1,22 +0,0 @@
|
||||
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;
|
||||
}
|
||||
@ -1,91 +0,0 @@
|
||||
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);
|
||||
@ -1,27 +0,0 @@
|
||||
/**
|
||||
* @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;
|
||||
}
|
||||
@ -1,100 +0,0 @@
|
||||
/**
|
||||
* @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);
|
||||
@ -1,40 +0,0 @@
|
||||
/**
|
||||
* @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;
|
||||
}
|
||||
@ -1,141 +0,0 @@
|
||||
/**
|
||||
* @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);
|
||||
@ -1,21 +0,0 @@
|
||||
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[];
|
||||
}
|
||||
@ -1,73 +0,0 @@
|
||||
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);
|
||||
@ -1,17 +0,0 @@
|
||||
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[];
|
||||
}
|
||||
@ -1,67 +0,0 @@
|
||||
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);
|
||||
@ -1,31 +0,0 @@
|
||||
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;
|
||||
}
|
||||
@ -1,202 +0,0 @@
|
||||
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 };
|
||||
@ -1,15 +0,0 @@
|
||||
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;
|
||||
}
|
||||
@ -1,40 +0,0 @@
|
||||
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);
|
||||
@ -1,28 +0,0 @@
|
||||
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;
|
||||
}
|
||||
@ -1,232 +0,0 @@
|
||||
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);
|
||||
@ -1,44 +0,0 @@
|
||||
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;
|
||||
}
|
||||
@ -1,217 +0,0 @@
|
||||
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);
|
||||
@ -1,35 +0,0 @@
|
||||
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;
|
||||
}
|
||||
@ -1,119 +0,0 @@
|
||||
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);
|
||||
@ -1,7 +0,0 @@
|
||||
import { BasePlugin } from 'amis-editor-core';
|
||||
export declare class ErrorRendererPlugin extends BasePlugin {
|
||||
order: number;
|
||||
rendererName: string;
|
||||
name: string;
|
||||
isBaseComponent: boolean;
|
||||
}
|
||||
@ -1,19 +0,0 @@
|
||||
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);
|
||||
@ -1,30 +0,0 @@
|
||||
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;
|
||||
}
|
||||
@ -1,197 +0,0 @@
|
||||
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);
|
||||
@ -1,27 +0,0 @@
|
||||
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[];
|
||||
}
|
||||
@ -1,152 +0,0 @@
|
||||
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);
|
||||
@ -1,28 +0,0 @@
|
||||
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[];
|
||||
}
|
||||
@ -1,98 +0,0 @@
|
||||
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);
|
||||
@ -1,25 +0,0 @@
|
||||
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;
|
||||
}
|
||||
@ -1,174 +0,0 @@
|
||||
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);
|
||||
@ -1,24 +0,0 @@
|
||||
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;
|
||||
}
|
||||
@ -1,165 +0,0 @@
|
||||
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);
|
||||
@ -1,30 +0,0 @@
|
||||
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;
|
||||
}
|
||||
@ -1,204 +0,0 @@
|
||||
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);
|
||||
@ -1,25 +0,0 @@
|
||||
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;
|
||||
}
|
||||
@ -1,192 +0,0 @@
|
||||
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);
|
||||
@ -1,41 +0,0 @@
|
||||
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;
|
||||
}
|
||||
@ -1,536 +0,0 @@
|
||||
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);
|
||||
@ -1,36 +0,0 @@
|
||||
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;
|
||||
}
|
||||
@ -1,289 +0,0 @@
|
||||
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);
|
||||
@ -1,27 +0,0 @@
|
||||
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[];
|
||||
}
|
||||
@ -1,75 +0,0 @@
|
||||
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);
|
||||
@ -1,25 +0,0 @@
|
||||
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;
|
||||
}
|
||||
@ -1,194 +0,0 @@
|
||||
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);
|
||||
@ -1,27 +0,0 @@
|
||||
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;
|
||||
}
|
||||
@ -1,139 +0,0 @@
|
||||
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);
|
||||
@ -1,42 +0,0 @@
|
||||
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;
|
||||
}
|
||||
@ -1,838 +0,0 @@
|
||||
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);
|
||||
@ -1,27 +0,0 @@
|
||||
/// <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>;
|
||||
}
|
||||
@ -1,73 +0,0 @@
|
||||
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);
|
||||
@ -1,26 +0,0 @@
|
||||
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;
|
||||
}
|
||||
@ -1,240 +0,0 @@
|
||||
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);
|
||||
@ -1,24 +0,0 @@
|
||||
/// <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;
|
||||
}
|
||||
@ -1,44 +0,0 @@
|
||||
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);
|
||||
@ -1,28 +0,0 @@
|
||||
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;
|
||||
}
|
||||
@ -1,169 +0,0 @@
|
||||
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
Loading…
Reference in New Issue
Block a user