mirror of
https://github.com/EGroupware/egroupware.git
synced 2024-12-26 16:48:49 +01:00
Try out Lion as base for button.
Much easier to customize, though not without its issues: - Lion give us some stuff to handle validation, forms & input that I haven't looked into - Slightly different mixin structure, I might be missing out on something - Properties in extending class cause TypeScript error, but still work
This commit is contained in:
parent
723ec70009
commit
610d8e1547
@ -9,15 +9,34 @@
|
||||
*/
|
||||
|
||||
|
||||
import BXButton from "../../../node_modules/carbon-web-components/es/components/button/button"
|
||||
import {css} from "../../../node_modules/lit-element/lit-element.js";
|
||||
import {css,html} from "../../../node_modules/@lion/core/index.js";
|
||||
import {LionButton} from "../../../node_modules/@lion/button/index.js";
|
||||
import {Et2InputWidget} from "./et2_core_inputWidget";
|
||||
import {Et2Widget} from "./et2_core_inheritance";
|
||||
|
||||
export class Et2Button extends Et2InputWidget(Et2Widget(BXButton))
|
||||
export class Et2Button extends Et2InputWidget(Et2Widget(LionButton))
|
||||
{
|
||||
protected _created_icon_node: HTMLImageElement;
|
||||
protected clicked: boolean = false;
|
||||
private image: string;
|
||||
|
||||
static get styles() {
|
||||
return [
|
||||
...super.styles,
|
||||
css`
|
||||
:host {
|
||||
padding: 1px 8px;
|
||||
/* These should probably come from somewhere else */
|
||||
border-radius: 3px;
|
||||
background-color: #e6e6e6;
|
||||
}
|
||||
/* Set size for icon */
|
||||
::slotted([slot="icon"]) {
|
||||
width: 20px;
|
||||
padding-right: 3px;
|
||||
}`,
|
||||
];
|
||||
}
|
||||
|
||||
static get properties() {
|
||||
return {
|
||||
@ -25,15 +44,7 @@ export class Et2Button extends Et2InputWidget(Et2Widget(BXButton))
|
||||
onclick: {type: Function}
|
||||
}
|
||||
}
|
||||
static get styles()
|
||||
{
|
||||
return [
|
||||
super.styles,
|
||||
css`
|
||||
/* Custom CSS - Needs to work with the LitElement we're extending */
|
||||
`
|
||||
];
|
||||
}
|
||||
|
||||
constructor()
|
||||
{
|
||||
super();
|
||||
@ -57,7 +68,7 @@ export class Et2Button extends Et2InputWidget(Et2Widget(BXButton))
|
||||
connectedCallback() {
|
||||
super.connectedCallback();
|
||||
|
||||
this.classList.add("et2_button")
|
||||
//this.classList.add("et2_button")
|
||||
|
||||
if(this.image)
|
||||
{
|
||||
@ -93,6 +104,12 @@ export class Et2Button extends Et2InputWidget(Et2Widget(BXButton))
|
||||
return true;
|
||||
}
|
||||
|
||||
render() {
|
||||
return html` <div class="button-content et2_button" id="${this._buttonId}">
|
||||
<slot name="icon"></slot>
|
||||
<slot></slot>
|
||||
</div> `;
|
||||
}
|
||||
/**
|
||||
* Implementation of the et2_IInput interface
|
||||
*/
|
||||
|
@ -260,7 +260,7 @@ export class ClassWithAttributes extends ClassWithInterfaces
|
||||
*/
|
||||
|
||||
type Constructor<T = {}> = new (...args: any[]) => T;
|
||||
export const Et2Widget = <T extends Constructor<LitElement>>(superClass: T) => {
|
||||
export const Et2Widget = <T extends Constructor>(superClass: T) => {
|
||||
class Et2WidgetClass extends superClass implements et2_IDOMNode {
|
||||
|
||||
/** et2_widget compatability **/
|
||||
|
@ -22,7 +22,6 @@ import {et2_IInput, et2_IInputNode, et2_ISubmitListener} from "./et2_core_interf
|
||||
import {et2_compileLegacyJS} from "./et2_core_legacyJSFunctions";
|
||||
// fixing circular dependencies by only importing the type (not in compiled .js)
|
||||
import type {et2_tabbox} from "./et2_widget_tabs";
|
||||
import {LitElement} from "lit-element";
|
||||
|
||||
export interface et2_input {
|
||||
getInputNode() : HTMLInputElement|HTMLElement;
|
||||
@ -393,7 +392,7 @@ export class et2_inputWidget extends et2_valueWidget implements et2_IInput, et2_
|
||||
*/
|
||||
|
||||
type Constructor<T = {}> = new (...args: any[]) => T;
|
||||
export const Et2InputWidget = <T extends Constructor<LitElement>>(superClass: T) => {
|
||||
export const Et2InputWidget = <T extends Constructor>(superClass: T) => {
|
||||
class Et2InputWidgetClass extends superClass implements et2_IInput, et2_IInputNode {
|
||||
|
||||
label: string = '';
|
||||
|
@ -45,6 +45,8 @@
|
||||
}
|
||||
},
|
||||
"dependencies": {
|
||||
"@lion/button": "^0.14.1",
|
||||
"@lion/core": "^0.18.1",
|
||||
"carbon-components": "^10.37.0",
|
||||
"carbon-web-components": "^1.14.1",
|
||||
"lit-element": "^2.5.1",
|
||||
|
Loading…
Reference in New Issue
Block a user