forked from fanruan/fineui
windy
3 years ago
76 changed files with 508 additions and 119 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,85 @@ |
|||||||
|
/** |
||||||
|
* @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"); |
||||||
|
} |
||||||
|
}] |
||||||
|
}), |
||||||
|
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