Kira
3 years ago
88 changed files with 574 additions and 144 deletions
@ -0,0 +1,100 @@
|
||||
/** |
||||
* @author windy |
||||
* @version 2.0 |
||||
* Created by windy on 2022/1/11 |
||||
*/ |
||||
Demo.Form = BI.inherit(BI.Widget, { |
||||
props: { |
||||
baseCls: "demo-form" |
||||
}, |
||||
render: function () { |
||||
var widget = BI.createWidget({ |
||||
type: "bi.custom_form", |
||||
width: 300, |
||||
labelWidth: 100, |
||||
items: [{ |
||||
validate: function (v) { |
||||
return v !== "a" && v !== ""; |
||||
}, |
||||
tip: function (v) { |
||||
if (BI.isEmpty(v)) { |
||||
return "不能为空"; |
||||
} |
||||
return "不合法格式" |
||||
}, |
||||
label: "E-mail", |
||||
el: { |
||||
type: 'bi.text_editor', |
||||
watermark: "输入a报错", |
||||
allowBlank: true, |
||||
} |
||||
}, { |
||||
validate: function (v) { |
||||
return BI.isNotEmptyArray(v); |
||||
}, |
||||
tip: function () { |
||||
return "不能为空"; |
||||
}, |
||||
label: "性别", |
||||
el: { |
||||
type: 'bi.text_value_combo', |
||||
text: "请选择", |
||||
items: [{ |
||||
text: "男", |
||||
value: 1 |
||||
}, { |
||||
text: "女", |
||||
value: 2 |
||||
}] |
||||
} |
||||
}, { |
||||
validate: function (v) { |
||||
return v !== ""; |
||||
}, |
||||
tip: function () { |
||||
return "不能为空"; |
||||
}, |
||||
label: "姓名", |
||||
el: { |
||||
type: 'bi.text_editor', |
||||
watermark: "输入姓名", |
||||
allowBlank: true, |
||||
} |
||||
}, { |
||||
validate: function (v) { |
||||
return v !== ""; |
||||
}, |
||||
tip: function () { |
||||
return "不能为空"; |
||||
}, |
||||
label: "姓名", |
||||
el: { |
||||
type: 'bi.textarea_editor', |
||||
cls: 'bi-border', |
||||
watermark: "输入简介", |
||||
allowBlank: true, |
||||
height: 200, |
||||
} |
||||
}], |
||||
layout: { |
||||
type: "bi.vertical", |
||||
vgap: 30 |
||||
} |
||||
}); |
||||
return { |
||||
type: "bi.vertical", |
||||
hgap: 200, |
||||
vgap: 10, |
||||
items: [widget, { |
||||
type: "bi.button", |
||||
text: "提交", |
||||
handler: function () { |
||||
widget.validate(); |
||||
|
||||
console.log(widget.getValue()); |
||||
} |
||||
}] |
||||
}; |
||||
} |
||||
}); |
||||
BI.shortcut("demo.form", Demo.Form); |
||||
@ -0,0 +1,90 @@
|
||||
/** |
||||
* @author windy |
||||
* @version 2.0 |
||||
* Created by windy on 2022/1/11 |
||||
*/ |
||||
BI.FormField = BI.inherit(BI.Widget, { |
||||
|
||||
props: { |
||||
baseCls: "bi-form-field", |
||||
label: "", |
||||
el: {}, |
||||
validate: BI.emptyFn |
||||
}, |
||||
|
||||
render: function () { |
||||
var self = this, o = this.options; |
||||
|
||||
var field = { |
||||
type: "bi.absolute", |
||||
items: [{ |
||||
el: BI.extend({}, o.el, { |
||||
ref: function (_ref) { |
||||
self.field = _ref; |
||||
o.el.ref && o.el.ref.call(this, _ref); |
||||
}, |
||||
height: o.el.height || 28, |
||||
listeners: [{ |
||||
eventName: "EVENT_CHANGE", |
||||
action: function () { |
||||
self.fireEvent("EVENT_CHANGE"); |
||||
} |
||||
}, { |
||||
eventName: "EVENT_CONFIRM", |
||||
action: function () { |
||||
self.fireEvent("EVENT_CHANGE"); |
||||
} |
||||
}] |
||||
}), |
||||
left: 0, |
||||
bottom: 0, |
||||
right: 0, |
||||
top: 0 |
||||
}, { |
||||
el: { |
||||
type: "bi.label", |
||||
cls: "error-tip bi-error", |
||||
ref: function (_ref) { |
||||
self.error = _ref; |
||||
}, |
||||
invisible: true |
||||
}, |
||||
bottom: -20, |
||||
left: 0, |
||||
right: 0, |
||||
height: 20 |
||||
}] |
||||
}; |
||||
|
||||
return { |
||||
type: "bi.vertical_adapt", |
||||
columnSize: ["auto", "fill"], |
||||
verticalAlign: BI.VerticalAlign.Stretch, |
||||
hgap: 5, |
||||
items: BI.isKey(o.label) ? [{ |
||||
type: "bi.label", |
||||
text: o.label + ":", |
||||
width: o.labelWidth |
||||
}, field] : [field] |
||||
}; |
||||
}, |
||||
|
||||
getValue: function () { |
||||
return this.field.getValue(); |
||||
}, |
||||
|
||||
validate: function () { |
||||
var isValid = this.validateWithNoTip(); |
||||
!isValid && this.error.setText(this.options.tip(this.field.getValue(), this.field)); |
||||
this.error.setVisible(!isValid); |
||||
this.element[isValid ? "removeClass" : "addClass"]("error"); |
||||
|
||||
return isValid; |
||||
}, |
||||
|
||||
validateWithNoTip: function () { |
||||
return this.options.validate(this.field.getValue(), this.field); |
||||
} |
||||
}); |
||||
|
||||
BI.shortcut("bi.form_field", BI.FormField); |
||||
@ -0,0 +1,89 @@
|
||||
/** |
||||
* @author windy |
||||
* @version 2.0 |
||||
* Created by windy on 2022/1/11 |
||||
*/ |
||||
BI.Form = BI.inherit(BI.Widget, { |
||||
|
||||
props: { |
||||
baseCls: "bi-form", |
||||
layout: { |
||||
type: "bi.vertical", |
||||
vgap: 20 |
||||
}, |
||||
items: [{ |
||||
validate: BI.emptyFn, |
||||
tip: BI.emptyFn, |
||||
label: "", |
||||
el: {} |
||||
}], |
||||
labelWidth: "" |
||||
}, |
||||
|
||||
render: function () { |
||||
var self = this, o = this.options; |
||||
|
||||
return { |
||||
type: "bi.button_group", |
||||
items: this._createItems(), |
||||
layouts: [o.layout], |
||||
ref: function (ref) { |
||||
self.group = ref; |
||||
} |
||||
}; |
||||
}, |
||||
|
||||
_createItems: function () { |
||||
var o = this.options; |
||||
|
||||
return BI.map(o.items, function (idx, item) { |
||||
return { |
||||
type: "bi.form_field", |
||||
height: item.el.height || 28, |
||||
labelWidth: o.labelWidth, |
||||
el: item.el, |
||||
label: item.label, |
||||
tip: item.tip, |
||||
validate: item.validate, |
||||
listeners: [{ |
||||
eventName: "EVENT_CHANGE", |
||||
action: function () { |
||||
this.validate(); |
||||
} |
||||
}] |
||||
}; |
||||
}); |
||||
}, |
||||
|
||||
isAllValid: function () { |
||||
return !BI.some(this.validateWithNoTip(), function (idx, v) { |
||||
return !v; |
||||
}); |
||||
}, |
||||
|
||||
validateWithNoTip: function () { |
||||
var validInfo = []; |
||||
BI.each(this.group.getAllButtons(), function (idx, button) { |
||||
validInfo.push(button.validateWithNoTip()); |
||||
}); |
||||
|
||||
return validInfo; |
||||
}, |
||||
|
||||
validate: function () { |
||||
var validInfo = []; |
||||
BI.each(this.group.getAllButtons(), function (idx, button) { |
||||
validInfo.push(button.validate()); |
||||
}); |
||||
|
||||
return validInfo; |
||||
}, |
||||
|
||||
getValue: function () { |
||||
return !this.isAllValid() ? null : BI.map(this.group.getAllButtons(), function (idx, button) { |
||||
return button.getValue(); |
||||
}); |
||||
} |
||||
}); |
||||
|
||||
BI.shortcut("bi.custom_form", BI.Form); |
||||
@ -0,0 +1,14 @@
|
||||
@import "../../index"; |
||||
|
||||
.bi-form { |
||||
& .bi-form-field.error { |
||||
& .bi-border, & .bi-border-bottom { |
||||
border-color: @border-color-negative; |
||||
} |
||||
} |
||||
& .bi-form-field { |
||||
& .error-tip { |
||||
background-color: @color-bi-background-error-form; |
||||
} |
||||
} |
||||
} |
||||
Loading…
Reference in new issue