Initial implementation

This commit is contained in:
2025-06-15 23:28:49 +02:00
parent 5ace1f43cb
commit 916bcbea80
5 changed files with 140 additions and 40 deletions

View File

@ -1 +1 @@
# tp-element
# tp-settings-grid

View File

@ -1,18 +1,19 @@
{
"name": "@tp/tp-element",
"version": "0.0.1",
"name": "@tp/tp-settings-grid",
"version": "1.0.0",
"description": "",
"main": "tp-element.js",
"main": "tp-settings-grid.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-elements/tp-settings-grid.git"
},
"author": "trading_peter",
"license": "Apache-2.0",
"dependencies": {
"@tp/tp-media-query": "^1.0.0",
"lit": "^3.0.0"
}
}

View File

@ -1,35 +0,0 @@
/**
@license
Copyright (c) 2024 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);

55
tp-settings-grid-line.js Normal file
View File

@ -0,0 +1,55 @@
/**
@license
Copyright (c) 2025 trading_peter
This program is available under Apache License Version 2.0
*/
import { LitElement, html, css } from 'lit';
class TpSettingsGridLine extends LitElement {
static get styles() {
return [
css`
:host {
display: contents;
align-items: center;
}
:host([labelTop]) .label {
align-self: flex-start;
}
.control {
display: flex;
flex-direction: row;
align-items: center;
gap: 10px;
justify-self: var(--tp-settings-grid-control-align, flex-start);
}
`
];
}
render() {
const { } = this;
return html`
<div class="label" part="label">
<slot name="label"></slot>
</div>
<div class="control" part="control">
<slot name="control"></slot>
</div>
`;
}
static get properties() {
return {
labelTop: { type: Boolean, reflect: true }
};
}
}
window.customElements.define('tp-settings-grid-line', TpSettingsGridLine);

79
tp-settings-grid.js Normal file
View File

@ -0,0 +1,79 @@
/**
@license
Copyright (c) 2025 trading_peter
This program is available under Apache License Version 2.0
*/
import '@tp/tp-media-query/tp-media-query.js';
import { LitElement, html, css } from 'lit';
class TpElement extends LitElement {
static get styles() {
return [
css`
:host {
display: block;
}
.grid {
display: grid;
align-items: center;
grid-template-columns: auto 1fr;
grid-column-gap: var(--tp-settings-grid-column-gap, 20px);
grid-row-gap: var(--tp-settings-grid-row-gap, 20px);
}
:host([stretchLabels]:not([responsive])) .grid {
grid-template-columns: 1fr var(--tp-settings-grid-control-col-width, auto);
}
:host([alignControlsRight]:not([responsive])) ::slotted(tp-settings-grid-line) {
--tp-settings-grid-control-align: flex-end;
}
:host([responsive]) .grid {
grid-template-columns: 1fr;
}
:host([responsive]) ::slotted(tp-settings-grid-line) {
display: block;
--tp-settings-grid-control-align: auto;
}
`
];
}
render() {
const { breakpoint } = this;
return html`
<tp-media-query .query=${`(max-width: ${breakpoint}px)`} @media-query-update=${this._onMediaQueryUpdate}></tp-media-query>
<div class="grid">
<slot></slot>
</div>
`;
}
static get properties() {
return {
stretchLabels: { type: Boolean, reflect: true },
alignControlsRight: { type: Boolean, reflect: true },
breakpoint: { type: Number },
responsive: { type: Boolean, reflect: true }
};
}
constructor() {
super();
this.stretchLabels = false;
this.alignControlsRight = false;
this.responsive = 600; // Default responsive breakpoint
}
_onMediaQueryUpdate(event) {
this.responsive = event.detail;
}
}
window.customElements.define('tp-settings-grid', TpElement);