Initial implementation
This commit is contained in:
@ -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"
|
||||
}
|
||||
}
|
||||
|
@ -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
55
tp-settings-grid-line.js
Normal 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
79
tp-settings-grid.js
Normal 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);
|
Reference in New Issue
Block a user