First version
This commit is contained in:
parent
1f0ad809c1
commit
8bbd792fdd
11
package.json
11
package.json
@ -1,18 +1,19 @@
|
||||
{
|
||||
"name": "@tp/tp-element",
|
||||
"version": "0.0.1",
|
||||
"name": "@tp/tp-tabs",
|
||||
"version": "1.0.0",
|
||||
"description": "",
|
||||
"main": "tp-element.js",
|
||||
"main": "tp-tabs.js",
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://gitea.codeblob.work/tp-elements/tp-element.git"
|
||||
"url": "https://gitea.codeblob.work/tp-tabss/tp-tabs.git"
|
||||
},
|
||||
"author": "trading_peter",
|
||||
"license": "Apache-2.0",
|
||||
"dependencies": {
|
||||
"lit": "^2.2.0"
|
||||
"lit": "^2.2.0",
|
||||
"@tp/helpers": "^1.0.0"
|
||||
}
|
||||
}
|
||||
|
@ -1,35 +0,0 @@
|
||||
/**
|
||||
@license
|
||||
Copyright (c) 2022 trading_peter
|
||||
This program is available under Apache License Version 2.0
|
||||
*/
|
||||
|
||||
import { LitElement, html, css } from 'lit';
|
||||
|
||||
class TpElement extends LitElement {
|
||||
static get styles() {
|
||||
return [
|
||||
css`
|
||||
:host {
|
||||
display: block;
|
||||
}
|
||||
`
|
||||
];
|
||||
}
|
||||
|
||||
render() {
|
||||
const { } = this;
|
||||
|
||||
return html`
|
||||
|
||||
`;
|
||||
}
|
||||
|
||||
static get properties() {
|
||||
return { };
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
window.customElements.define('tp-element', TpElement);
|
54
tp-tabs.js
Normal file
54
tp-tabs.js
Normal file
@ -0,0 +1,54 @@
|
||||
/**
|
||||
@license
|
||||
Copyright (c) 2023 trading_peter
|
||||
This program is available under Apache License Version 2.0
|
||||
*/
|
||||
|
||||
import { closest } from '@tp/helpers';
|
||||
import { LitElement, html, css } from 'lit-element';
|
||||
|
||||
class TpTabs extends LitElement {
|
||||
static get properties() {
|
||||
return {
|
||||
orientation: { type: String, reflect: true }
|
||||
};
|
||||
}
|
||||
|
||||
static get styles() {
|
||||
return css`
|
||||
:host([orientation="vertical"]) .tabs {
|
||||
flex-direction: column;
|
||||
}
|
||||
.tabs {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
.tab {
|
||||
cursor: pointer;
|
||||
padding: 8px;
|
||||
}
|
||||
`;
|
||||
}
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this.orientation = 'horizontal';
|
||||
}
|
||||
|
||||
render() {
|
||||
return html`
|
||||
<div class="tabs" @click="${this.selectTab}">
|
||||
<slot></slot>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
selectTab(e) {
|
||||
const tab = closest(e.target, '.tab');
|
||||
if (tab) {
|
||||
this.dispatchEvent(new CustomEvent('tab-changed', { detail: tab }));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define('tp-tabs', TpTabs);
|
Loading…
Reference in New Issue
Block a user