bruno-ui
Version:
Bruno UI Kit
319 lines (304 loc) • 21.3 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
const core = require('./core-196e26af.js');
const CheckboxComponent = class {
constructor(hostRef) {
core.registerInstance(this, hostRef);
this.type = "primary";
this.changed = core.createEvent(this, "changed", 7);
}
render() {
return (core.h("label", null, core.h("input", { type: "checkbox", checked: this.checked, onChange: e => this.OnChangeHandler(e) }), core.h("span", { class: `brn-checkbox__checkmark brn-checkbox__checkmark--${this.type}` }), core.h("span", { class: "brn-checkbox__text" }, core.h("slot", null))));
}
OnChangeHandler(event) {
this.changed.emit(event.target.checked);
}
static get style() { return "brn-checkbox label{color:#02364c;position:relative;display:inline-block}brn-checkbox label input{display:none}brn-checkbox label input:checked~.brn-checkbox__checkmark.brn-checkbox__checkmark--primary{background-color:#3abeff}brn-checkbox label input:checked~.brn-checkbox__checkmark.brn-checkbox__checkmark--secondary{background-color:#808c9e}brn-checkbox label input:checked~.brn-checkbox__checkmark.brn-checkbox__checkmark--success{background-color:#59c17c}brn-checkbox label input:checked~.brn-checkbox__checkmark.brn-checkbox__checkmark--danger{background-color:#d64d61}brn-checkbox label input:checked~.brn-checkbox__checkmark.brn-checkbox__checkmark--warning{background-color:#f8a841}brn-checkbox label input:checked~.brn-checkbox__checkmark.brn-checkbox__checkmark--info{background-color:#89defa}brn-checkbox label input:checked~.brn-checkbox__checkmark.brn-checkbox__checkmark--dark{background-color:#02364c}brn-checkbox label input:checked~.brn-checkbox__checkmark.brn-checkbox__checkmark--light{background-color:#eaecf0}brn-checkbox label input:checked~.brn-checkbox__checkmark.brn-checkbox__checkmark--light:after{border-bottom:2px solid #02364c;border-right:2px solid #02364c}brn-checkbox label input:checked~.brn-checkbox__checkmark:after{opacity:1;visibility:visible}brn-checkbox label .brn-checkbox__checkmark{display:block;position:absolute;top:0;left:0;width:1rem;height:1rem;background-color:#eaecf0;-webkit-transition:color .2s ease-in-out,background-color .2s ease-in-out,opacity .2s ease-in-out,visibility .2s ease-in-out,-webkit-box-shadow .15s ease-in-out;transition:color .2s ease-in-out,background-color .2s ease-in-out,opacity .2s ease-in-out,visibility .2s ease-in-out,-webkit-box-shadow .15s ease-in-out;transition:color .2s ease-in-out,background-color .2s ease-in-out,box-shadow .15s ease-in-out,opacity .2s ease-in-out,visibility .2s ease-in-out;transition:color .2s ease-in-out,background-color .2s ease-in-out,box-shadow .15s ease-in-out,opacity .2s ease-in-out,visibility .2s ease-in-out,-webkit-box-shadow .15s ease-in-out;cursor:pointer;-webkit-border-radius:2px;-moz-border-radius:2px;-ms-border-radius:2px;border-radius:2px;-ms-user-select:none;-webkit-user-select:none;-moz-user-select:-moz-none;user-select:none}brn-checkbox label .brn-checkbox__checkmark:hover{background-color:#d7dde4}brn-checkbox label .brn-checkbox__checkmark:after{opacity:0;visibility:hidden;content:\"\";display:block;position:absolute;top:.16rem;left:.33rem;width:.2rem;height:.45rem;border-bottom:2px solid #fff;border-right:2px solid #fff;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}brn-checkbox label .brn-checkbox__text{padding-left:1.5rem;margin-right:1rem}"; }
};
const CollapseComponent = class {
constructor(hostRef) {
core.registerInstance(this, hostRef);
this.active = false;
this._active = false;
}
ActiveWatchHandler() {
this._active = this.active;
}
componentDidLoad() {
this._active = this.active;
}
render() {
return (core.h("div", { class: { "brn-collapse": true, "brn-collapse--active": this._active } }, core.h("div", { class: "brn-collapse__header", onClick: () => {
this.Toggle();
} }, core.h("slot", { name: "header" })), core.h("div", { class: "brn-collapse__body" }, core.h("slot", { name: "body" }))));
}
Toggle() {
this._active = !this._active;
}
static get watchers() { return {
"active": ["ActiveWatchHandler"]
}; }
static get style() { return "brn-collapse>div,brn-collapse>div.brn-collapse--active .brn-collapse__body{display:block}brn-collapse>div .brn-collapse__body{display:none}"; }
};
const ColumnComponent = class {
constructor(hostRef) {
core.registerInstance(this, hostRef);
}
render() {
this._el.style.width = `${this.CalculateWidth()}%`;
return (core.h("div", null, core.h("slot", null)));
}
CalculateWidth() {
return this.total > 0 && this.columns > 0
? (this.columns * 100) / this.total
: 0;
}
get _el() { return core.getElement(this); }
static get style() { return "brn-column{display:block;padding:0 .5rem;position:relative}brn-column>.div{width:100%;height:100%}brn-column:first-child{padding-left:0}brn-column:last-child{padding-right:0}"; }
};
class AppHelper {
static GetId() {
return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, result => {
let random = (Math.random() * 16) | 0, value = result == "x" ? random : (random & 0x3) | 0x8;
return value.toString(16);
});
}
static GetIdWithPrefix(prefix) {
return `${prefix}--${AppHelper.GetId()}`;
}
}
const DropdownComponent = class {
constructor(hostRef) {
core.registerInstance(this, hostRef);
this.closeable = true;
this.active = false;
this._active = false;
this._id = AppHelper.GetIdWithPrefix("dropdown");
this._menuId = AppHelper.GetIdWithPrefix("dropdown__menu");
}
ActiveWatchHandler(newValue) {
this._active = newValue;
}
componentDidLoad() {
this._active = this.active;
}
WindowClickHandler(event) {
this._active = this.IsCloseable(event);
}
render() {
return (core.h("div", { class: { "brn-dropdown--active": this._active }, id: `${this._id}` }, core.h("div", { class: "brn-dropdown__button", onClick: () => {
this.Toggle();
} }, core.h("slot", { name: "button" })), core.h("div", { class: "brn-dropdown__menu", id: `${this._menuId}` }, core.h("slot", { name: "menu" }))));
}
Toggle() {
this._active = !this._active;
}
IsCloseable(event) {
let result = false;
if (this.closeable && event.target.closest(`#${this._menuId}`)) {
result = false;
}
else if (event.target.closest(`#${this._id}`)) {
result = this._active;
}
return result;
}
get _element() { return core.getElement(this); }
static get watchers() { return {
"active": ["ActiveWatchHandler"]
}; }
static get style() { return "brn-dropdown>div{display:inline-block;position:relative}brn-dropdown>div.brn-dropdown--active .brn-dropdown__menu{visibility:visible;opacity:1;top:auto;margin-top:.15rem}brn-dropdown>div .brn-dropdown__menu{visibility:hidden;opacity:0;position:absolute;left:0;width:-webkit-max-content;width:-moz-max-content;width:max-content;z-index:1;display:block;text-align:left;background-color:#fff;border:1px solid #d7dde4;padding:.5rem .8rem;margin-top:-.15rem;-webkit-transition:visibility .2s ease-in-out,opacity .2s ease-in-out,margin-top .2s ease-in-out;transition:visibility .2s ease-in-out,opacity .2s ease-in-out,margin-top .2s ease-in-out;-webkit-border-radius:4px;-moz-border-radius:4px;-ms-border-radius:4px;border-radius:4px}brn-dropdown>div .brn-dropdown__menu ul{margin:-.5rem -.8rem -.5rem -.8rem}brn-dropdown>div .brn-dropdown__menu ul li:hover{background-color:#eaecf0}brn-dropdown>div .brn-dropdown__menu ul li.divider{padding:0;margin:.15rem 0}brn-dropdown>div .brn-dropdown__menu ul li a{display:block;padding:.4rem .8rem}"; }
};
const RadioButtonComponent = class {
constructor(hostRef) {
core.registerInstance(this, hostRef);
this.type = "primary";
this.changed = core.createEvent(this, "changed", 7);
}
render() {
return (core.h("label", null, core.h("input", { type: "radio", name: this.name, checked: this.checked, onChange: e => this.OnChangeHandler(e) }), core.h("span", { class: `brn-radio__checkmark brn-radio__checkmark--${this.type}` }), core.h("span", { class: "brn-radio__text" }, core.h("slot", null))));
}
OnChangeHandler(event) {
this.changed.emit(event.target.checked);
}
static get style() { return "brn-radio label{color:#02364c;position:relative;display:inline-block}brn-radio label input{display:none}brn-radio label input:checked~.brn-radio__checkmark.brn-radio__checkmark--primary{background-color:#3abeff}brn-radio label input:checked~.brn-radio__checkmark.brn-radio__checkmark--secondary{background-color:#808c9e}brn-radio label input:checked~.brn-radio__checkmark.brn-radio__checkmark--success{background-color:#59c17c}brn-radio label input:checked~.brn-radio__checkmark.brn-radio__checkmark--danger{background-color:#d64d61}brn-radio label input:checked~.brn-radio__checkmark.brn-radio__checkmark--warning{background-color:#f8a841}brn-radio label input:checked~.brn-radio__checkmark.brn-radio__checkmark--info{background-color:#89defa}brn-radio label input:checked~.brn-radio__checkmark.brn-radio__checkmark--dark{background-color:#02364c}brn-radio label input:checked~.brn-radio__checkmark.brn-radio__checkmark--light{background-color:#eaecf0}brn-radio label input:checked~.brn-radio__checkmark.brn-radio__checkmark--light:after{background-color:#02364c}brn-radio label input:checked~.brn-radio__checkmark:after{opacity:1;visibility:visible}brn-radio label .brn-radio__checkmark{display:block;position:absolute;top:0;left:0;width:1rem;height:1rem;background-color:#eaecf0;-webkit-transition:color .2s ease-in-out,background-color .2s ease-in-out,opacity .2s ease-in-out,visibility .2s ease-in-out,-webkit-box-shadow .15s ease-in-out;transition:color .2s ease-in-out,background-color .2s ease-in-out,opacity .2s ease-in-out,visibility .2s ease-in-out,-webkit-box-shadow .15s ease-in-out;transition:color .2s ease-in-out,background-color .2s ease-in-out,box-shadow .15s ease-in-out,opacity .2s ease-in-out,visibility .2s ease-in-out;transition:color .2s ease-in-out,background-color .2s ease-in-out,box-shadow .15s ease-in-out,opacity .2s ease-in-out,visibility .2s ease-in-out,-webkit-box-shadow .15s ease-in-out;cursor:pointer;-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;border-radius:50%;-ms-user-select:none;-webkit-user-select:none;-moz-user-select:-moz-none;user-select:none}brn-radio label .brn-radio__checkmark:hover{background-color:#d7dde4}brn-radio label .brn-radio__checkmark:after{opacity:0;visibility:hidden;content:\"\";display:block;position:absolute;top:.24rem;left:.25rem;width:.5rem;height:.5rem;background-color:#fff;-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;border-radius:50%;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}brn-radio label .brn-radio__text{padding-left:1.5rem;margin-right:1rem}"; }
};
const RowComponent = class {
constructor(hostRef) {
core.registerInstance(this, hostRef);
}
render() {
return (core.h("div", null, core.h("slot", null)));
}
static get style() { return "brn-row{display:block}brn-row>div{position:relative;width:100%;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;border:0;line-height:normal}"; }
};
const SliderComponent = class {
constructor(hostRef) {
core.registerInstance(this, hostRef);
this._active = false;
}
MouseMoveHandler(e) {
if (this._active) {
this.SetHandlePosition(e);
}
}
MouseUpHandler() {
this._active = false;
}
componentDidLoad() {
this.handle = this.GetHandle();
}
render() {
return (core.h("div", { class: "slider" }, core.h("div", { class: "slider__bar", onClick: e => {
this.SetHandlePosition(e);
} }), core.h("div", { class: "slider__handle", onMouseDown: () => {
this._active = true;
} })));
}
GetHandle() {
return this._element.getElementsByClassName("slider__handle")[0];
}
GetSlider() {
return this._element.getElementsByClassName("slider")[0];
}
SetHandlePosition(e) {
let position = this.CalculatePosition(e);
this.handle.style.left = `${position}px`;
}
CalculatePosition(e) {
let slider = this.GetSlider();
let position = e.clientX - this._element.offsetLeft - this.handle.clientWidth / 2;
if (position < this._element.offsetLeft) {
position = 0;
}
else if (e.clientX > slider.offsetWidth) {
position =
slider.offsetWidth -
this._element.offsetLeft -
this.handle.clientWidth / 2;
}
return position;
}
get _element() { return core.getElement(this); }
static get style() { return "brn-slider .slider{position:relative}brn-slider .slider .slider__bar{display:block;height:.5rem;background-color:#eaecf0}brn-slider .slider .slider__bar,brn-slider .slider .slider__handle{-webkit-border-radius:1rem;-moz-border-radius:1rem;-ms-border-radius:1rem;border-radius:1rem}brn-slider .slider .slider__handle{top:-.25rem;left:0;position:absolute;width:1rem;height:1rem;background-color:#3abeff;cursor:pointer;-ms-user-select:none;-webkit-user-select:none;-moz-user-select:-moz-none;user-select:none}"; }
};
const TabComponent = class {
constructor(hostRef) {
core.registerInstance(this, hostRef);
this.active = false;
this._active = false;
this.tabLoaded = core.createEvent(this, "tabLoaded", 7);
this.tabChanged = core.createEvent(this, "tabChanged", 7);
}
ActiveChangeHandler(value) {
this._active = value;
this.TabChanged();
}
componentWillLoad() {
this._identifier = AppHelper.GetId();
this._active = this.active;
}
componentDidLoad() {
const tab = this.GetTab();
this.tabLoaded.emit(tab);
}
render() {
return (core.h("div", { class: { 'brn-tab--active': this._active } }, core.h("slot", null)));
}
TabChanged() {
const tab = this.GetTab();
this.tabChanged.emit(tab);
}
GetTab() {
const tab = {
Identifier: this._identifier,
Index: this.GetIndex(),
Name: this.name,
Active: this._active,
OnActive: (value) => {
this._active = value;
}
};
return tab;
}
GetIndex() {
const parent = this._element.closest("brn-tabs");
if (parent) {
const tabs = parent.getElementsByTagName('brn-tab');
return Array.prototype.indexOf.call(tabs, this._element);
}
console.warn('"brn-tab" components must be wrapped with "brn-tabs" component');
return 0;
}
get _element() { return core.getElement(this); }
static get watchers() { return {
"active": ["ActiveChangeHandler"]
}; }
static get style() { return "brn-tab>div{display:none}brn-tab>div.brn-tab--active{display:block}"; }
};
const TabsComponent = class {
constructor(hostRef) {
core.registerInstance(this, hostRef);
}
componentWillLoad() {
this._tabs = [];
}
TabLoadedHandler(event) {
const tab = event.detail;
if (this._tabs.length - 1 < tab.Index) {
this._tabs.length = tab.Index + 1;
}
this._tabs[tab.Index] = tab;
this._tabs = [...this._tabs];
}
TabChangedHandler(event) {
const tab = event.detail;
let index = this._tabs.findIndex(x => x.Identifier == tab.Identifier);
this._tabs[index] = tab;
this._tabs = [...this._tabs];
}
render() {
return (core.h("div", null, core.h("div", { class: "brn-tabs" }, this._tabs.filter(x => x).map(tab => {
return (core.h("div", { class: { "brn-tabs__tab": true, 'brn-tabs__tab--active': tab.Active }, onClick: () => {
this.TabChangeHandler(tab);
} }, tab.Name));
})), core.h("div", { class: "brn-tabs__content" }, core.h("slot", null))));
}
TabChangeHandler(tab) {
this.DeactivateAllTabs();
tab.Active = true;
tab.OnActive(true);
this._tabs = [...this._tabs];
}
DeactivateAllTabs() {
this._tabs.map(x => {
x.Active = false;
x.OnActive(false);
});
}
static get style() { return "brn-tabs .brn-tabs{display:block;border-bottom:1px solid #d7dde4;margin-bottom:.5rem}brn-tabs .brn-tabs__tab{position:relative;cursor:pointer;display:inline-block;text-decoration:none;color:#808c9e;font-size:.875rem;padding:0 .85rem .5rem .85rem;margin-bottom:-1px;-ms-user-select:none;-webkit-user-select:none;-moz-user-select:-moz-none;user-select:none}brn-tabs .brn-tabs__tab--active{color:#02364c;border-bottom:1px solid #02364c}"; }
};
const ToggleComponent = class {
constructor(hostRef) {
core.registerInstance(this, hostRef);
this.type = "primary";
this.changed = core.createEvent(this, "changed", 7);
}
render() {
return (core.h("label", null, core.h("input", { type: "checkbox", checked: this.checked, onChange: e => this.OnChangeHandler(e) }), core.h("span", { class: `brn-toggle__checkmark brn-toggle__checkmark--${this.type}` }), core.h("span", { class: "brn-toggle__text" }, core.h("slot", null))));
}
OnChangeHandler(event) {
this.changed.emit(event.target.checked);
}
static get style() { return "brn-toggle label{color:#02364c;position:relative;display:inline-block}brn-toggle label input{display:none}brn-toggle label input:checked~.brn-toggle__checkmark.brn-toggle__checkmark--primary:after{background-color:#3abeff}brn-toggle label input:checked~.brn-toggle__checkmark.brn-toggle__checkmark--secondary:after{background-color:#808c9e}brn-toggle label input:checked~.brn-toggle__checkmark.brn-toggle__checkmark--success:after{background-color:#59c17c}brn-toggle label input:checked~.brn-toggle__checkmark.brn-toggle__checkmark--danger:after{background-color:#d64d61}brn-toggle label input:checked~.brn-toggle__checkmark.brn-toggle__checkmark--warning:after{background-color:#f8a841}brn-toggle label input:checked~.brn-toggle__checkmark.brn-toggle__checkmark--info:after{background-color:#89defa}brn-toggle label input:checked~.brn-toggle__checkmark.brn-toggle__checkmark--dark,brn-toggle label input:checked~.brn-toggle__checkmark.brn-toggle__checkmark--dark:after{background-color:#02364c}brn-toggle label input:checked~.brn-toggle__checkmark.brn-toggle__checkmark--dark:after{background-color:#3abeff}brn-toggle label input:checked~.brn-toggle__checkmark.brn-toggle__checkmark--light:after{background-color:#02364c}brn-toggle label input:checked~.brn-toggle__checkmark:after{margin-left:.7rem}brn-toggle label .brn-toggle__checkmark{display:block;position:absolute;top:0;left:0;width:1.75rem;height:1rem;background-color:#eaecf0;-webkit-transition:color .2s ease-in-out,background-color .2s ease-in-out,margin-left .2s ease-in-out,-webkit-box-shadow .15s ease-in-out;transition:color .2s ease-in-out,background-color .2s ease-in-out,margin-left .2s ease-in-out,-webkit-box-shadow .15s ease-in-out;transition:color .2s ease-in-out,background-color .2s ease-in-out,box-shadow .15s ease-in-out,margin-left .2s ease-in-out;transition:color .2s ease-in-out,background-color .2s ease-in-out,box-shadow .15s ease-in-out,margin-left .2s ease-in-out,-webkit-box-shadow .15s ease-in-out;cursor:pointer;-webkit-border-radius:2rem;-moz-border-radius:2rem;-ms-border-radius:2rem;border-radius:2rem;-ms-user-select:none;-webkit-user-select:none;-moz-user-select:-moz-none;user-select:none}brn-toggle label .brn-toggle__checkmark:hover{background-color:#d7dde4}brn-toggle label .brn-toggle__checkmark:after{-webkit-transition:margin-left .2s ease-in-out,background-color .2s ease-in-out;transition:margin-left .2s ease-in-out,background-color .2s ease-in-out;content:\"\";display:block;position:absolute;top:.19rem;left:.23rem;width:.6rem;height:.6rem;background-color:#fff;-webkit-border-radius:.6rem;-moz-border-radius:.6rem;-ms-border-radius:.6rem;border-radius:.6rem}brn-toggle label .brn-toggle__checkmark.brn-toggle__checkmark--dark{background-color:#02364c}brn-toggle label .brn-toggle__checkmark.brn-toggle__checkmark--dark:hover{background-color:#042836}brn-toggle label .brn-toggle__text{padding-left:2.25rem;margin-right:1rem}"; }
};
exports.brn_checkbox = CheckboxComponent;
exports.brn_collapse = CollapseComponent;
exports.brn_column = ColumnComponent;
exports.brn_dropdown = DropdownComponent;
exports.brn_radio = RadioButtonComponent;
exports.brn_row = RowComponent;
exports.brn_slider = SliderComponent;
exports.brn_tab = TabComponent;
exports.brn_tabs = TabsComponent;
exports.brn_toggle = ToggleComponent;