diff --git a/bricks/css/bricks.css b/bricks/css/bricks.css index 047abab..8fed963 100755 --- a/bricks/css/bricks.css +++ b/bricks/css/bricks.css @@ -838,6 +838,24 @@ hr { filter: invert(1); } +/* ---- Sidebar Menu collapse ---- */ +.menu-collapsed { + width: 48px !important; + min-width: 48px !important; + overflow: hidden; +} +.menu-collapsed .menuitem { + justify-content: center; + padding: 8px 0; +} +.menu-collapsed .menuitem .bricks-text, +.menu-collapsed .menuitem .text { + display: none; +} +.menu-collapsed .menuitem img { + margin: 0 auto; +} + /* Override Menu widget's inline backgroundColor:"white" */ [data-theme="dark"] .popup .vbox, [data-theme="dark"] .popup .vcontainer, @@ -877,3 +895,14 @@ hr { [data-theme="dark"] .toppopup { box-shadow: 10px 5px 10px rgba(0,0,0,0.5), 0 -5px 5px rgba(255,255,255,0.05); } + +/* ---- InlineForm ---- */ +.inline-form-field { + flex-shrink: 0; + white-space: nowrap; +} +.inline-form-field input, +.inline-form-field select { + height: auto; + margin: 0; +} diff --git a/bricks/form.js b/bricks/form.js index df35f60..86b15a5 100644 --- a/bricks/form.js +++ b/bricks/form.js @@ -342,16 +342,104 @@ bricks.FormBase = class extends bricks.Layout { } } -bricks.InlineForm = class extends bricks.FormBase { +bricks.InlineForm = class extends bricks.HBox { + /* + Horizontal inline form — all fields in one row. + Options: + fields: [{name, label, uitype, placeholder, ...}] + submit_label: "搜索" (button text, default "Submit") + submit_icon: url to icon (optional) + submit_css: "primary" (css class for button) + submit_bgcolor: "#xxx" (background color) + gap: "0.5" (gap between items in charsize) + show_label: true/false (show label before input, default true) + Events: + submit: dispatched with form data on button click + */ constructor(opts){ - opts.height = "100%"; - opts.width = "100%"; - opts.overflow = "auto"; + opts.width = opts.width || '100%'; + opts.height = 'auto'; + opts.overflow = 'none'; + opts.alignItems = 'center'; + opts.gap = opts.gap || '0.5'; super(opts); - this.fg = new bricks.FieldGroup({}); - this.fg.build_fields(this, this, this.opts.fields) - this.build_toolbar(this.children[0]); - this.save_origin_data(); + this.name_inputs = {}; + this.build_fields(); + this.build_submit(); + } + getValue(){ + var data = {}; + for (var name in this.name_inputs){ + if (!this.name_inputs.hasOwnProperty(name)) continue; + var w = this.name_inputs[name]; + var d = w.getValue(); + bricks.extend(data, d); + } + return data; + } + setValue(name, value){ + var w = this.name_inputs[name]; + if (w) w.setValue(value); + } + reset(){ + for (var name in this.name_inputs){ + if (!this.name_inputs.hasOwnProperty(name)) continue; + this.name_inputs[name].reset(); + } + } + validation(){ + var data = this.getValue(); + this.dispatch('submit', data); + } + build_fields(){ + var fields = this.opts.fields || []; + var show_label = this.opts.show_label !== false; + for (var i=0; i