jsdk-offical
Version:
JSDK is the most comprehensive TypeScript framework, like JDK.
1,214 lines • 191 kB
JavaScript
//# sourceURL=../dist/jsfx.js
//JSDK 2.7.0 MIT
var JS;
(function (JS) {
let fx;
(function (fx) {
let SizeMode;
(function (SizeMode) {
SizeMode["hg"] = "hg";
SizeMode["lg"] = "lg";
SizeMode["md"] = "md";
SizeMode["sm"] = "sm";
SizeMode["xs"] = "xs";
})(SizeMode = fx.SizeMode || (fx.SizeMode = {}));
let ColorMode;
(function (ColorMode) {
ColorMode["success"] = "success";
ColorMode["danger"] = "danger";
ColorMode["warning"] = "warning";
ColorMode["info"] = "info";
ColorMode["primary"] = "primary";
ColorMode["secondary"] = "secondary";
ColorMode["accent"] = "accent";
ColorMode["metal"] = "metal";
ColorMode["light"] = "light";
ColorMode["dark"] = "dark";
})(ColorMode = fx.ColorMode || (fx.ColorMode = {}));
class WidgetConfig {
constructor() {
this.name = '';
this.tip = '';
this.style = '';
this.cls = '';
this.appendTo = 'body';
this.renderTo = null;
this.hidden = false;
this.sizeMode = SizeMode.md;
this.faceMode = null;
this.locale = 'en';
this.i18n = null;
}
}
fx.WidgetConfig = WidgetConfig;
})(fx = JS.fx || (JS.fx = {}));
})(JS || (JS = {}));
var SizeMode = JS.fx.SizeMode;
var ColorMode = JS.fx.ColorMode;
var WidgetConfig = JS.fx.WidgetConfig;
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
var JS;
(function (JS) {
let fx;
(function (fx) {
let J = Jsons;
let Widget = class Widget {
constructor(cfg) {
this._config = null;
this._initialConfig = null;
this._isD = false;
this._i18nObj = null;
if (!cfg.id && cfg.renderTo) {
let wgt = $(cfg.renderTo);
if (wgt.length == 1) {
this.widgetEl = wgt;
let id = wgt.attr('id');
if (id) {
this.id = id;
}
else {
this.id = Random.uuid(4, 10).toString();
wgt.attr('id', this.id);
}
}
}
else {
this.id = cfg.id || Random.uuid(4, 10).toString();
}
this._initConfig(cfg);
this._onBeforeInit();
this._initDom();
this._onAfterInit();
}
_onBeforeInit() { }
_onAfterInit() { }
_initDom() {
let cfg = this._config;
this.widgetEl = $('#' + this.id);
if (this.widgetEl.length == 0) {
this.widgetEl = $('<div />', {
id: this.id,
width: cfg.width,
height: cfg.height,
title: cfg.tip,
style: cfg.style,
'klass-name': this.className
}).appendTo(cfg.appendTo || 'body');
}
else {
let attrs = {};
if (cfg.tip)
attrs['title'] = cfg.tip;
if (cfg.style)
attrs['style'] = (this.widgetEl.attr('style') || '') + cfg.style;
if (!Check.isEmpty(attrs))
this.widgetEl.attr(attrs);
if (cfg.width)
this.widgetEl.css('width', cfg.width);
}
this._eventBus = new EventBus(this);
let listeners = cfg.listeners;
if (listeners && listeners.rendering)
this.on('rendering', listeners.rendering);
this.render();
}
_initConfig(cfg) {
let defaultCfg = Class.newInstance(this.className + 'Config');
cfg.name = cfg.name || this.id;
this._config = J.union(defaultCfg, cfg);
this._initialConfig = J.clone(this._config);
}
initialConfig(key) {
return J.clone(key ? this._initialConfig[key] : this._initialConfig);
}
_onBeforeRender() { }
_onAfterRender() { }
render() {
this._onBeforeRender();
this._fire('rendering');
this.off();
this.widgetEl.off().empty();
let cfg = this._config;
this.widgetEl.addClass(`jsfx-${this.getClass().shortName.toLowerCase()} ${cfg.colorMode ? 'color-' + cfg.colorMode : ''} size-${cfg.sizeMode} ${cfg.cls || ''}`);
let is = this._render();
let lts = cfg.listeners || {};
J.forEach(lts, function (handler, type) {
if (handler)
this.on(type, handler);
}, this);
this._onAfterRender();
if (is !== false)
this._fire('rendered');
return this;
}
name() {
return this._config.name || '';
}
_hasFaceMode(key, cfg) {
cfg = cfg || this._config;
let t = cfg.faceMode;
if (!t)
return false;
return t == key || t[key] === true || $.inArray(key, t) != -1;
}
_eachMode(type, fn, cfg) {
cfg = cfg || this._config;
let mode = cfg[type];
if (!mode)
return;
let me = this;
if (Types.isArray(mode)) {
mode.forEach(m => {
fn.apply(this, [m]);
});
}
else {
fn.apply(me, [mode]);
}
}
destroy() {
this._fire('destroying');
this._destroy();
this._fire('destroyed');
}
_destroy() {
this.off();
this.widgetEl.remove();
this._eventBus.destroy();
this._isD = true;
}
show() {
this._fire('showing');
this.widgetEl.css('display', '');
this._fire('shown');
return this;
}
hide() {
this._fire('hiding');
this.widgetEl.css('display', 'none');
this._fire('hidden');
return this;
}
isShown() {
return this.widgetEl.css('display') != 'none';
}
on(types, fn, once) {
this._eventBus.on(types, fn, once);
return this;
}
off(types) {
this._eventBus.off(types);
return this;
}
_fire(e, args) {
return this._eventBus.fire(e, args);
}
_newI18N() {
let lc = this._config.locale, n = new I18N(lc), v = this.getClass().getKlass()['I18N'];
if (v)
typeof v == 'string' ? n.load(v) : n.set(v);
let i18n = this._config.i18n;
if (i18n) {
if (Types.isString(i18n)) {
n.load(i18n, lc);
}
else {
n.set(J.union(n.get(), i18n));
}
}
this._i18nObj = n;
}
_i18n(key) {
if (!this._i18nObj)
this._newI18N();
return this._i18nObj.get(key);
}
locale(lc) {
if (arguments.length == 0)
return this._config.locale;
this._config.locale = lc;
return this;
}
};
Widget.I18N = null;
Widget = __decorate([
klass('JS.fx.Widget'),
__metadata("design:paramtypes", [fx.WidgetConfig])
], Widget);
fx.Widget = Widget;
})(fx = JS.fx || (JS.fx = {}));
})(JS || (JS = {}));
var Widget = JS.fx.Widget;
var JS;
(function (JS) {
let fx;
(function (fx) {
let J = Jsons;
class FormWidgetConfig extends fx.WidgetConfig {
constructor() {
super(...arguments);
this.disabled = false;
this.dataModel = ListModel;
this.valueModel = Model;
this.validators = [];
this.autoValidate = false;
this.validateMode = 'tip';
this.readonly = false;
this.titlePlace = 'left';
this.titleTextPlace = 'rm';
this.data = null;
this.iniValue = null;
}
}
fx.FormWidgetConfig = FormWidgetConfig;
class FormWidget extends fx.Widget {
constructor(cfg) {
super(cfg);
}
iniValue(v, render) {
let cfg = this._config;
if (arguments.length == 0)
return cfg.iniValue;
cfg.iniValue = v;
if (render)
this.value(v, true);
return this;
}
readonly(is) {
if (arguments.length == 0)
return this._config.readonly;
this._mainEl.prop('readonly', is);
this._config.readonly = is;
return this;
}
_onBeforeInit() {
this._initDataModel();
this._initValueModel();
}
_onAfterInit() {
let cfg = this._config;
if (cfg.dataQuery)
this.load(cfg.dataQuery, true);
cfg.disabled ? this.disable() : this.enable();
}
disable() {
this._mainEl.prop('disabled', true);
this._config.disabled = true;
return this;
}
enable() {
this._mainEl.prop('disabled', false);
this._config.disabled = false;
return this;
}
isEnabled() {
return !this._config.disabled;
}
title(text) {
let cfg = this._config;
if (arguments.length == 0)
return cfg.title;
this.widgetEl.find('div[jsfx-role="title"]>span').html(text);
cfg.title = text;
return this;
}
_hAlign() {
let al = this._config.titleTextPlace || 'lm';
return { 'l': 'left', 'r': 'right', 'c': 'center' }[al.substr(0, 1)];
}
_vAlign() {
let al = this._config.titleTextPlace || 'lm';
return { 't': 'top', 'b': 'bottom', 'm': 'middle' }[al.substr(1, 1)];
}
_render() {
let cfg = this._config, titleAttrs = cfg.tip ? ` title=${cfg.tip}` : '';
if (cfg.title) {
let tValign = this._vAlign(), tHalign = this._hAlign(), p0 = tHalign == 'right' && cfg.titlePlace == 'top' ? 'p-0' : '', cls = `${p0} font-${cfg.sizeMode || 'md'} items-${tValign} items-${tHalign} ${cfg.colorMode ? 'text-' + cfg.colorMode : ''} ${cfg.titleCls || ''}"`;
let style = Types.isDefined(cfg.titleWidth) ? `width:${CssTool.normValue(cfg.titleWidth, '100%')};` : '';
if (cfg.titleStyle)
style += cfg.titleStyle;
titleAttrs += ` class="${cls}"`;
if (style)
titleAttrs += ` style="${style}"`;
}
let html = `<div jsfx-role="title"${titleAttrs}>${cfg.title ? '<span>' + cfg.title + '</span>' : ''}</div>
<div jsfx-role="body" class="font-${cfg.sizeMode || 'md'} items-middle ${cfg.bodyCls || ''}" style="flex:1;${cfg.bodyStyle || ''}">
${this._bodyFragment()}
</div>`;
this.widgetEl.html(html);
this._mainEl = this.widgetEl.find('[jsfx-role=main]');
}
_onBeforeRender() {
let cfg = this._config, w = CssTool.normValue(cfg.width, '100%'), d = cfg.titlePlace == 'left' ? 'flex' : 'grid', css = {
'display': (w == 'auto' ? 'inline-' : '') + d,
'width': w
};
this.widgetEl.css(css);
}
_iniValue() {
let cfg = this._config;
this.value(cfg.iniValue, true);
}
_onAfterRender() {
this.on('validated', (e, rst, val, name) => {
window.setTimeout(() => {
rst.hasError() ? this._showError(rst.getErrors(name)[0].message) : this._hideError();
}, 100);
});
this._iniValue();
}
_showError(msg) {
let cfg = this._config, mode = cfg.validateMode, fn = (mode == 'tip' || (mode && mode['mode'] == 'tip')) ? this._showTipError : mode['showError'];
if (fn)
fn.apply(this, [msg]);
}
_hideError() {
let cfg = this._config, mode = cfg.validateMode, fn = (mode == 'tip' || (mode && mode['mode'] == 'tip')) ? this._hideTipError : mode['hideError'];
if (fn)
fn.call(this);
}
_getTipEl(place) {
let cfg = this._config;
return this.widgetEl.find(cfg.titlePlace == 'left' && place == 'left' ? '[jsfx-role=title]>span' : '[jsfx-role=body]');
}
_showTipError(msg) {
if (!msg)
return;
let div = this.widgetEl.find('.error .tooltip-inner');
if (div.length == 1) {
div.html(msg);
}
else {
let cfg = this._config, mode = cfg.validateMode, place = mode && mode['place'] ? mode['place'] : 'right', el = this._getTipEl(place);
el.tooltip({
placement: place,
offset: '0, 2px',
fallbackPlacement: 'clockwise',
container: el[0],
trigger: 'manual',
html: false,
title: msg,
template: '<div class="tooltip error" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>'
}).tooltip('show');
}
}
_hideTipError() {
let cfg = this._config, mode = cfg.validateMode, place = mode && mode['place'] ? mode['place'] : 'right', el = this._getTipEl(place);
if (el.tooltip)
el.tooltip('dispose');
}
_validate(name, val, rst) {
let field = new ModelField({
name: name,
validators: this._config.validators
});
return field.validate(val, rst);
}
validate() {
if (Check.isEmpty(this._config.validators))
return true;
let name = this.name(), rst = new ValidateResult(), val = J.clone(this.value());
this._fire('validating', [rst, val, name]);
let vdt = this._validate(name, val, rst);
this._fire('validated', [rst, val, name]);
return vdt;
}
dataModel() {
return this._dataModel;
}
_initDataModel() {
let me = this, cfg = this._config;
this._dataModel = Class.newInstance(cfg.dataModel);
['loading', 'loadsuccess', 'loadfailure', 'loaderror', 'dataupdating', 'dataupdated'].forEach(e => {
this._dataModel.on(e, function () {
if (e == 'dataupdated')
me.data(this.getData(), true);
me._fire(e, Arrays.slice(arguments, 1));
});
});
}
data(data, silent) {
let cfg = this._config;
if (arguments.length == 0)
return cfg.data;
let newData = J.clone(data), oldData = J.clone(cfg.data);
if (!silent)
this._fire('dataupdating', [newData, oldData]);
cfg.data = data;
if (this._dataModel)
this._dataModel.setData(data, true);
this._renderData();
this._renderValue();
if (!silent)
this._fire('dataupdated', [newData, oldData]);
return this;
}
_renderData() { }
clear(silent) {
return this.value(null, silent);
}
load(quy, silent) {
let cfg = this._config;
cfg.dataQuery = J.union(Http.toRequest(cfg.dataQuery), Http.toRequest(quy));
return this._dataModel.load(cfg.dataQuery, silent);
}
reload() {
if (this._dataModel)
this._dataModel.reload();
return this;
}
_equalValues(newVal, oldVal) {
return oldVal == newVal;
}
value(val, silent) {
let cfg = this._config, oldVal = this._valueModel.get(this.name());
if (arguments.length == 0)
return oldVal;
this._setValue(val, silent);
this._renderValue();
return this;
}
_setValue(val, silent) {
this._hideError();
this._valueModel.set(this.name(), val, silent || this._equalValues(val, this.value()));
if (this._config.autoValidate)
this.validate();
}
_renderValue() {
let v = this.value() || '';
if (this._mainEl.val() !== v)
this._mainEl.val(v);
}
reset() {
return this.value(this._config.iniValue);
}
valueModel() {
return this._valueModel;
}
_initValueModel() {
let cfg = this._config, vModel = cfg.valueModel;
if (!vModel) {
this._valueModel = new Model();
}
else if (Types.subklassOf(vModel, Model)) {
this._valueModel = Class.newInstance(vModel);
}
else {
this._valueModel = vModel;
}
this._valueModel.addField({
name: this.name(),
validators: cfg.validators
});
let me = this;
this._valueModel.on('dataupdated', function (e, newData) {
let fName = me.name();
if (newData && newData.hasOwnProperty(fName)) {
me.value(newData[fName]);
}
});
this._valueModel.on('fieldchanged', (e, newVal, oldVal) => {
this._fire('changed', [newVal, oldVal]);
});
}
}
fx.FormWidget = FormWidget;
})(fx = JS.fx || (JS.fx = {}));
})(JS || (JS = {}));
var FormWidgetConfig = JS.fx.FormWidgetConfig;
var FormWidget = JS.fx.FormWidget;
var JS;
(function (JS) {
let fx;
(function (fx) {
let ButtonFaceMode;
(function (ButtonFaceMode) {
ButtonFaceMode["square"] = "square";
ButtonFaceMode["round"] = "round";
ButtonFaceMode["round_left"] = "round-left";
ButtonFaceMode["round_right"] = "round-right";
ButtonFaceMode["pill"] = "pill";
ButtonFaceMode["pill_left"] = "pill-left";
ButtonFaceMode["pill_right"] = "pill-right";
ButtonFaceMode["shadow"] = "shadow";
})(ButtonFaceMode = fx.ButtonFaceMode || (fx.ButtonFaceMode = {}));
class ButtonConfig extends fx.WidgetConfig {
constructor() {
super(...arguments);
this.faceMode = ButtonFaceMode.square;
this.outline = false;
this.dropMenu = null;
this.disabled = false;
}
}
fx.ButtonConfig = ButtonConfig;
let Button = class Button extends fx.Widget {
constructor(cfg) {
super(cfg);
}
_render() {
let cfg = this._config, text = cfg.text || '', cls = 'btn btn-block', bdgAttr = '';
if (cfg.colorMode)
cls += ` btn-${cfg.colorMode}`;
if (cfg.outline)
cls += ' btn-outline';
if (cfg.sizeMode)
cls += ` btn-${cfg.sizeMode}`;
if (cfg.badge) {
let isStr = Types.isString(cfg.badge), bdg = {
text: isStr ? cfg.badge : cfg.badge.text || '',
color: isStr ? fx.ColorMode.danger : cfg.badge.color || fx.ColorMode.danger
};
cls += ' jsfx-badge jsfx-badge-' + bdg.color;
bdgAttr = ` data-badge="${bdg.text}"`;
}
if (cfg.dropMenu)
cls += ` dropdown-toggle`;
this._eachMode('faceMode', mode => {
cls += ' border-' + mode;
});
if (cfg.cls)
cls += ' ' + cfg.cls;
let icon = '';
if (cfg.iconCls)
icon = `<i class="${cfg.iconCls}"></i>`;
let button = `<button type="button" ${cfg.style ? 'style="' + cfg.style + '"' : ''} ${cfg.disabled ? 'disabled' : ''} ${bdgAttr} title="${cfg.tip}" ${cfg.dropMenu ? 'data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"' : ''} class="${cls}" jsfx-role="main">
${icon}${text ? (icon ? ` ${text}` : text) : ''}</button>`;
if (cfg.dropMenu)
button = this._dropDown(button);
this.widgetEl.html(button);
this._mainEl = this.widgetEl.find('[jsfx-role=main]');
}
_onAfterRender() {
this._mainEl.on('click', () => {
return this._fire('click');
});
}
_dropDown(buttonHtml) {
let dropDown = this._config.dropMenu, html = `
<div class="btn-group ${'drop' + (dropDown.dir || 'down')}">
${buttonHtml}
<div class="dropdown-menu">
${this._dropDownItems(dropDown.items)}
</div>
</div>
`;
return html;
}
_dropDownItems(items) {
if (!Types.isDefined(items))
return '';
let html = '';
items.forEach((item, i) => {
html += this._dropDownItem(item, i);
});
return html;
}
_dropDownItem(item, index) {
let id = 'dropdown-item' + index + '-' + Random.uuid(3, 10), span = item.html || `${item.iconCls ? `<i class="${item.iconCls}"></i>` : ''}<span class="">${Strings.escapeHTML(item.text)}</span>`, html = '';
if (item.caption)
html += `<h6 class='dropdown-header'>${Strings.escapeHTML(item.caption)}</h6>`;
html += `<a class='dropdown-item ${this._config.colorMode} ${item.selected ? 'active' : ''}' id='${id}' href='${item.href ? encodeURI(item.href) : 'javascript:void(0);'}'>${span}</a>`;
if (item.hasDivider)
html += `<div class='dropdown-divider'></div>`;
let me = this;
if (item.onClick)
$(document).on('click', '#' + id, function (e) {
return item.onClick.apply(me, [e.originalEvent, item]);
});
return html;
}
disable() {
this._mainEl.prop('disabled', true);
this._config.disabled = true;
return this;
}
enable() {
this._mainEl.prop('disabled', false);
this._config.disabled = false;
return this;
}
toggle() {
let d = this._mainEl.find('.dropdown-toggle');
if (d.length < 1)
return;
d.dropdown('toggle');
return this;
}
badge(option) {
if (arguments.length == 0) {
return this._mainEl.attr('data-badge');
}
else if (Check.isEmpty(option)) {
this._mainEl.removeAttr('data-badge');
}
else {
let isStr = Types.isString(option), bdg = {
text: isStr ? option : option.text || '',
color: isStr ? fx.ColorMode.danger : option.color || fx.ColorMode.danger
};
this._mainEl.addClass('jsfx-badge jsfx-badge-' + bdg.color);
bdg.text ? this._mainEl.attr('data-badge', bdg.text) : this._mainEl.removeAttr('data-badge');
}
return this;
}
};
Button = __decorate([
widget('JS.fx.Button'),
__metadata("design:paramtypes", [ButtonConfig])
], Button);
fx.Button = Button;
})(fx = JS.fx || (JS.fx = {}));
})(JS || (JS = {}));
var Button = JS.fx.Button;
var ButtonConfig = JS.fx.ButtonConfig;
var ButtonFaceMode = JS.fx.ButtonFaceMode;
var JS;
(function (JS) {
let fx;
(function (fx) {
let J = Jsons, Y = Types, E = Check.isEmpty;
let SelectFaceMode;
(function (SelectFaceMode) {
SelectFaceMode["square"] = "square";
SelectFaceMode["round"] = "round";
SelectFaceMode["pill"] = "pill";
SelectFaceMode["shadow"] = "shadow";
})(SelectFaceMode = fx.SelectFaceMode || (fx.SelectFaceMode = {}));
class SelectOption {
constructor() {
this.selected = false;
this.disabled = false;
}
}
fx.SelectOption = SelectOption;
class SelectConfig extends fx.FormWidgetConfig {
constructor() {
super(...arguments);
this.rtl = false;
this.outline = false;
this.autoSelectFirst = false;
this.crud = false;
this.multiple = false;
this.allowClear = false;
this.maximumSelectionLength = Infinity;
this.autoSearch = false;
this.minimumInputLength = 0;
this.inputable = false;
this.autoEscape = true;
}
}
fx.SelectConfig = SelectConfig;
let Select = class Select extends fx.FormWidget {
constructor(cfg) {
super(cfg);
}
load(api) {
if (this._config.autoSearch)
throw new RefusedError('The method be not supported when autoSearch is true!');
return super.load(api);
}
iniValue(v, render) {
if (arguments.length == 0)
return super.iniValue();
return super.iniValue(v, render);
}
_destroy() {
this._mainEl.select2('destroy');
super._destroy();
}
_bodyFragment() {
let cfg = this._config, cls = '';
if (cfg.colorMode) {
if (cfg.outline)
cls += ' outline';
cls += ` ${cfg.colorMode}`;
}
this._eachMode('faceMode', (mode) => {
cls += ' face-' + mode;
});
return `<div class="w-100 font-${cfg.sizeMode || 'md'} ${cls}">
<select name="${this.name()}" jsfx-role="main" class="form-control"></select>
</div>`;
}
_onAfterRender() {
this._initSelect2();
this._renderData();
let me = this;
this._mainEl.on('change', function (e, data) {
if (data == '_jsfx')
return;
let nv = $(this).val();
me._setValue(E(nv) ? null : nv);
});
let evts = ['selected', 'unselected'];
['select2:select', 'select2:unselect'].forEach((type, i) => {
this._mainEl.on(type, e => {
me._fire(evts[i], [e.params.data]);
});
});
super._onAfterRender();
}
_optionHtml(data) {
let html = '';
data.forEach(op => {
if (op.children) {
let childrenHtml = this._optionHtml(op.children);
html += `<optgroup label="${op.text}">${childrenHtml}</optgroup>`;
}
else {
html += `<option value="${op.id}" ${op.disabled ? 'disabled' : ''} ${op.selected ? 'selected' : ''}>${op.text}</option>`;
}
});
return html;
}
_initSelect2() {
let cfg = this._config, dataQuery = cfg.dataQuery, url = dataQuery ? (Y.isString(dataQuery) ? dataQuery : dataQuery.url) : null, jsonParams = dataQuery ? (Y.isString(dataQuery) ? null : dataQuery.data) : null, options = {
disabled: cfg.disabled,
allowClear: cfg.allowClear,
width: '100%',
minimumInputLength: cfg.minimumInputLength < 1 ? 1 : cfg.minimumInputLength,
language: cfg.locale,
placeholder: cfg.placeholder,
multiple: cfg.multiple,
tags: cfg.inputable,
tokenSeparators: [' ']
};
let cls = 'jsfx-select ' + ' ' + (cfg.colorMode || '') + ' font-' + (cfg.sizeMode || 'md') + (cfg.cls || '');
this._eachMode('faceMode', (mode) => {
cls += ' border-' + mode;
});
options.dropdownCssClass = cls;
if (cfg.rtl)
options.dir = 'rtl';
if (!cfg.autoSearch) {
options.minimumResultsForSearch = Infinity;
options.minimumInputLength = 0;
}
if (!cfg.autoEscape) {
options.escapeMarkup = (c) => { return c; };
}
let me = this;
if (cfg.optionRender)
options.templateResult = function (data, el) {
return cfg.optionRender.apply(me, [data, el]);
};
if (cfg.selectionRender)
options.templateSelection = function (data, el) {
return cfg.selectionRender.apply(me, [data, el]);
};
if (cfg.autoSearch && url)
options.ajax = {
url: function (pms) {
return url + (pms.term || '');
},
dataType: 'json',
delay: 500,
data: function () { return jsonParams ? jsonParams : {}; },
processResults: (res, params) => {
let data = J.find(res, ResultSet.DEFAULT_FORMAT.dataProperty);
this.data(data);
return {
results: data
};
},
cache: true
};
this._mainEl.select2(options);
}
addOption(opt) {
return this.data([opt], false, 'append');
}
addOptions(data) {
return this.data(data, false, 'append');
}
removeOption(id) {
return this.data([id], false, 'remove');
}
removeOptions(ids) {
return this.data(ids, false, 'remove');
}
select(i, silent) {
let cfg = this._config;
if (i < 0 || E(cfg.data) || i >= cfg.data.length)
return;
this.value('' + cfg.data[i].id, silent);
}
isCrud() {
let cfg = this._config;
return cfg.multiple && cfg.crud;
}
crudValue() {
if (!this.isCrud())
return null;
let val = Arrays.toArray(this.value()), iniVal = Arrays.toArray(this.iniValue()), arr = [];
iniVal.forEach((v) => {
if (val.findIndex(it => {
return it == v;
}) < 0) {
arr[arr.length] = {
_crud: 'D',
id: v
};
}
});
val.forEach((v) => {
if (iniVal.findIndex(it => {
return it == v;
}) < 0) {
arr[arr.length] = {
_crud: 'C',
id: v
};
}
});
return arr;
}
data(data, silent, mode) {
let cfg = this._config;
if (arguments.length == 0)
return cfg.data;
let newData, newDataCopy, oldData = J.clone(cfg.data);
if (mode == 'append') {
let tmp = J.clone(cfg.data) || [];
newData = tmp.add(data);
newDataCopy = J.clone(newData);
}
else if (mode == 'remove') {
let tmp = J.clone(cfg.data) || [];
data.forEach(id => {
tmp.remove(item => {
return item.id == id;
});
});
newData = tmp;
newDataCopy = J.clone(newData);
}
else {
newData = data;
newDataCopy = J.clone(newData);
}
if (!silent)
this._fire('dataupdating', [newDataCopy, oldData]);
cfg.data = newData;
if (this._dataModel)
this._dataModel.setData(newData, true);
this._renderDataBy(mode ? data : newData, mode);
this._renderValue();
if (!silent)
this._fire('dataupdated', [newDataCopy, oldData]);
return this;
}
_iniValue() {
let cfg = this._config;
if (cfg.autoSelectFirst && cfg.data && cfg.data.length > 0)
cfg.iniValue = '' + cfg.data[0].id;
super._iniValue();
}
_renderData() {
this._renderDataBy(this._config.data);
}
_renderDataBy(data, mode) {
if (data) {
if (!mode)
this._mainEl.empty();
if (mode != 'remove') {
this._mainEl.append(this._optionHtml(data));
}
else {
data.forEach(id => {
this._mainEl.find(`option[value="${id}"]`).remove();
});
}
}
else {
if (mode != 'remove')
this._mainEl.empty();
}
}
_renderValue() {
let v = this.value();
if (!this._equalValues(v, this._mainEl.val()))
this._mainEl.val(v).trigger('change', '_jsfx');
}
_equalValues(newVal, oldVal) {
if (E(oldVal) && E(newVal))
return true;
let cfg = this._config;
return cfg.multiple ? Arrays.equalToString(oldVal, newVal) : oldVal == newVal;
}
value(val, silent) {
if (arguments.length == 0)
return super.value();
let cfg = this._config;
if ((cfg.multiple && Y.isString(val)) || (!cfg.multiple && Y.isArray(val)))
throw new TypeError(`Wrong value type for select<${this.id}>!`);
return super.value(val, silent);
}
_showError(msg) {
super._showError(msg);
this.widgetEl.find('.select2-selection').addClass('jsfx-input-error');
}
_hideError() {
super._hideError();
this.widgetEl.find('.select2-selection').removeClass('jsfx-input-error');
}
};
Select = __decorate([
widget('JS.fx.Select'),
__metadata("design:paramtypes", [SelectConfig])
], Select);
fx.Select = Select;
})(fx = JS.fx || (JS.fx = {}));
})(JS || (JS = {}));
var Select = JS.fx.Select;
var SelectFaceMode = JS.fx.SelectFaceMode;
var SelectOption = JS.fx.SelectOption;
var SelectConfig = JS.fx.SelectConfig;
var JS;
(function (JS) {
let fx;
(function (fx) {
let SwitchFaceMode;
(function (SwitchFaceMode) {
SwitchFaceMode["shadow"] = "shadow";
})(SwitchFaceMode = fx.SwitchFaceMode || (fx.SwitchFaceMode = {}));
class SwitchConfig extends fx.FormWidgetConfig {
constructor() {
super(...arguments);
this.iniValue = 'off';
}
}
fx.SwitchConfig = SwitchConfig;
let Switch = class Switch extends fx.FormWidget {
constructor(config) {
super(config);
}
_onAfterRender() {
let me = this;
this._mainEl.on('change', function () {
let is = $(this).is(':checked');
me._setValue(is ? 'on' : 'off');
me._fire(is ? 'on' : 'off');
});
super._onAfterRender();
}
_bodyFragment() {
let cls = '', cfg = this._config;
if (this._hasFaceMode(SwitchFaceMode.shadow))
cls += ' border-shadow';
return `<input name="${this.name()}" jsfx-role="main" type="checkbox" class="${cls}" ${cfg.readonly ? 'readonly' : ''}/>`;
}
value(val, silent) {
if (arguments.length == 0)
return super.value() || 'off';
return super.value(val, silent);
}
_renderValue() {
this._mainEl.prop('checked', this.value() == 'on');
}
toggle() {
let v = this.value();
return this.value(v == 'on' ? 'off' : 'on');
}
};
Switch = __decorate([
widget('JS.fx.Switch'),
__metadata("design:paramtypes", [SwitchConfig])
], Switch);
fx.Switch = Switch;
})(fx = JS.fx || (JS.fx = {}));
})(JS || (JS = {}));
var Switch = JS.fx.Switch;
var SwitchFaceMode = JS.fx.SwitchFaceMode;
var SwitchConfig = JS.fx.SwitchConfig;
var JS;
(function (JS) {
let fx;
(function (fx) {
let E = Check.isEmpty, A = Arrays;
let UploaderFaceMode;
(function (UploaderFaceMode) {
UploaderFaceMode["list"] = "list";
UploaderFaceMode["image"] = "image";
UploaderFaceMode["square"] = "square";
UploaderFaceMode["round"] = "round";
UploaderFaceMode["shadow"] = "shadow";
})(UploaderFaceMode = fx.UploaderFaceMode || (fx.UploaderFaceMode = {}));
class UploaderConfig extends fx.FormWidgetConfig {
constructor() {
super(...arguments);
this.readonly = false;
this.dnd = false;
this.paste = false;
this.thumb = { width: 1, height: 1 };
this.duplicate = true;
this.multiple = false;
this.fieldName = 'file';
this.faceMode = [UploaderFaceMode.square, UploaderFaceMode.list];
this.iniValue = null;
this.data = null;
}
}
fx.UploaderConfig = UploaderConfig;
let Uploader = class Uploader extends fx.FormWidget {
constructor(cfg) {
super(cfg);
}
_initUploader(cfg) {
if (this._uploader)
return;
let me = this;
$('#' + this.id).find('.classic-pick').on('click', function () {
$('#' + me.id).find('.webuploader-element-invisible').click();
});
let url = JS.config('libs')['webuploader.swf'];
url = url.startsWith('~') ? (JS.config('libRoot') || '') + url.slice(1) : url;
let cf = {
pick: {
id: `#${this.id} .pick`,
multiple: cfg.multiple
},
paste: cfg.paste == true ? `#${this.id}` : (cfg.paste == 'body' ? document.body : undefined),
dnd: cfg.dnd ? `#${this.id}` : undefined,
swf: url,
auto: true,
accept: cfg.accept || null,
fileNumLimit: cfg.maxNumbers || undefined,
fileSizeLimit: cfg.maxTotalSize || undefined,
fileSingleSizeLimit: cfg.maxSingleSize || undefined,
disableGlobalDnd: false,
duplicate: cfg.duplicate,
fileVal: cfg.fieldName,
formData: cfg.uploadData || {},
thumb: {
width: cfg.thumb && cfg.thumb.width,
height: cfg.thumb && cfg.thumb.height,
allowMagnify: false,
crop: false,
type: ''
},
compress: cfg.compress && cfg.compress.width && cfg.compress.height ? {
width: cfg.compress.width,
height: cfg.compress.height,
quality: 90,
allowMagnify: false,
crop: false,
preserveHeaders: true,
noCompressIfLarger: true,
compressSize: 0
} : false
};
this._uploader = WebUploader.Uploader.create(cf);
let eMap = {
'adding': 'beforeFileQueued',
'added': 'filesQueued',
'removed': 'fileDequeued',
'uploading': 'uploadStart',
'uploadprogress': 'uploadProgress',
'uploadsuccess': 'uploadSuccess',
'uploaderror': 'uploadError',
'uploaded': 'uploadComplete',
'beginupload': 'startUpload',
'endupload': 'uploadFinished'
};
this._uploader.on(eMap['adding'], function (file) {
return me._fire('adding', [me._toMimeFile(file)]);
});
this._uploader.on(eMap['added'], function (files) {
files.forEach((file) => {
me._onFileQueued(file);
});
me._fire('added', [me._toMimeFiles(files)]);
});
this._uploader.on(eMap['removed'], function (file) {
me._onFileDequeued(file);
me._fire('removed', [me._toMimeFile(file)]);
});
this._uploader.on(eMap['uploading'], function (file, percentage) {
me._fire('uploading', [me._toMimeFile(file), percentage]);
});
this._uploader.on(eMap['uploaderror'], function (file, reason) {
me._onUploadFail(file);
me._fire('uploaderror', [me._toMimeFile(file), reason]);
});
this._uploader.on(eMap['uploadsuccess'], function (file, response) {
me._onUploadSuccess(file, response);
me._fire('uploadsuccess', [me._toMimeFile(file), response]);
});
this._uploader.on(eMap['uploaded'], function (file) {
me._fire('uploaded', [me._toMimeFile(file)]);
});
this._uploader.on(eMap['beginupload'], function () {
me._fire('beginupload');
});
this._uploader.on(eMap['endupload'], function () {
me._fire('endupload');
});
let errors = {
'F_EXCEED_SIZE': 'exceedMaxSize',
'F_DUPLICATE': 'wrongDuplicate',
'Q_TYPE_DENIED': 'wrongType',
'Q_EXCEED_NUM_LIMIT': 'exceedNumbers',
'Q_EXCEED_SIZE_LIMIT': 'exceedMaxTotalSize'
};
this._uploader.on('error', (type) => {
fx.Toast.show({ type: 'error', message: me._i18n(errors[type]), place: 'cb' });
});
}
_showError(msg) {
super._showError(msg);
this.widgetEl.find('.body').addClass('jsfx-input-error');
}
_hideError() {
super._hideError();
this.widgetEl.find('.body').removeClass('jsfx-input-error');
}
_onAfterRender() {
this._initUploader(this._config);
super._onAfterRender();
}
_createShadow(id, ctor) {
return $(`<div id="${id}"></div>`).css({
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: '100%',
backgroundColor: "#808080",
opacity: 0.1,
zIndex: (Number(ctor.css('z-index')) || 0) + 1
});
}
readonly(is) {
let cfg = this._config;
if (arguments.length == 0)
return cfg.readonly;
if (cfg.readonly == is)
return this;
cfg.readonly = is;
$(`#${this.id} .body`)[is ? 'addClass' : 'removeClass']('readonly');
let p = $(`#${this.id} .pick`);
is ? p.hide() : p.show();
return this;
}
disable() {
if (!this.isEnabled())
return this;
this._config.disabled = true;
let ctor = $(`#${this.id} .body`).addClass('disabled');
this._createShadow(this.id + '_shadow', ctor).appendTo(ctor);
return this;
}
enable() {
if (this.isEnabled())
return this;
this.