tp-elements/tp-responsive-menu
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

First version

Browse Source
This commit is contained in:
trading_peter 2023-04-06 00:04:28 +02:00
parent 6c274864ff
commit a46f51e5bf
5 changed files with 222 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@ -1 +1 @@
# tp-element
# tp-responsive-menu

134
package-lock.json generated Normal file
View File

@ -0,0 +1,134 @@
{
"name": "@tp/tp-responsive-menu",
"version": "0.0.1",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"name": "@tp/tp-responsive-menu",
"version": "0.0.1",
"license": "Apache-2.0",
"dependencies": {
"@tp/tp-media-query": "^1.0.0",
"lit": "^2.2.0"
}
},
"node_modules/@lit-labs/ssr-dom-shim": {
"version": "1.1.0",
"resolved": "https://verdaccio.codeblob.work/@lit-labs%2fssr-dom-shim/-/ssr-dom-shim-1.1.0.tgz",
"integrity": "sha512-92uQ5ARf7UXYrzaFcAX3T2rTvaS9Z1//ukV+DqjACM4c8s0ZBQd7ayJU5Dh2AFLD/Ayuyz4uMmxQec8q3U4Ong==",
"license": "BSD-3-Clause"
},
"node_modules/@lit/reactive-element": {
"version": "1.6.1",
"resolved": "https://verdaccio.codeblob.work/@lit%2freactive-element/-/reactive-element-1.6.1.tgz",
"integrity": "sha512-va15kYZr7KZNNPZdxONGQzpUr+4sxVu7V/VG7a8mRfPPXUyhEYj5RzXCQmGrlP3tAh0L3HHm5AjBMFYRqlM9SA==",
"license": "BSD-3-Clause",
"dependencies": {
"@lit-labs/ssr-dom-shim": "^1.0.0"
}
},
"node_modules/@tp/tp-media-query": {
"version": "1.0.0",
"resolved": "https://verdaccio.codeblob.work/@tp%2ftp-media-query/-/tp-media-query-1.0.0.tgz",
"integrity": "sha512-hxwkqgLDGXFmjQEMWxExJW/If1ppFerK9S5+I/P7qCKm3PMRDgafFvAPTpFLtqH3GYQ9z+uAAi2ZSNKqJ9Z7QQ==",
"license": "Apache-2.0",
"dependencies": {
"lit": "^2.2.0"
}
},
"node_modules/@types/trusted-types": {
"version": "2.0.3",
"resolved": "https://verdaccio.codeblob.work/@types%2ftrusted-types/-/trusted-types-2.0.3.tgz",
"integrity": "sha512-NfQ4gyz38SL8sDNrSixxU2Os1a5xcdFxipAFxYEuLUlvU2uDwS4NUpsImcf1//SlWItCVMMLiylsxbmNMToV/g==",
"license": "MIT"
},
"node_modules/lit": {
"version": "2.7.1",
"resolved": "https://verdaccio.codeblob.work/lit/-/lit-2.7.1.tgz",
"integrity": "sha512-t1cVWUVQj+ucdx16QPvqzyHWYTj/bvlv6vRCUuZ5T/dA4W2Ui4a4tz7uJ1IhoTb9rKe3pTJiWmoN2GJGGteszw==",
"license": "BSD-3-Clause",
"dependencies": {
"@lit/reactive-element": "^1.6.0",
"lit-element": "^3.3.0",
"lit-html": "^2.7.0"
}
},
"node_modules/lit-element": {
"version": "3.3.1",
"resolved": "https://verdaccio.codeblob.work/lit-element/-/lit-element-3.3.1.tgz",
"integrity": "sha512-Gl+2409uXWbf7n6cCl7Kzasm7zjT9xmdwi2BhLNi70sRKAgRkqueDu5mSIH3hPYMM0/vqBCdPXod3NbGkRA2ww==",
"license": "BSD-3-Clause",
"dependencies": {
"@lit-labs/ssr-dom-shim": "^1.1.0",
"@lit/reactive-element": "^1.3.0",
"lit-html": "^2.7.0"
}
},
"node_modules/lit-html": {
"version": "2.7.1",
"resolved": "https://verdaccio.codeblob.work/lit-html/-/lit-html-2.7.1.tgz",
"integrity": "sha512-san46v7VXK6+2RXS4yveQYFUf9CoO/1bcNb0NibxLoTqlP48vs+l28tRPFDYcXGKWm0XoqcDuCC6mxIs8Jj3Zw==",
"license": "BSD-3-Clause",
"dependencies": {
"@types/trusted-types": "^2.0.2"
}
}
},
"dependencies": {
"@lit-labs/ssr-dom-shim": {
"version": "1.1.0",
"resolved": "https://verdaccio.codeblob.work/@lit-labs%2fssr-dom-shim/-/ssr-dom-shim-1.1.0.tgz",
"integrity": "sha512-92uQ5ARf7UXYrzaFcAX3T2rTvaS9Z1//ukV+DqjACM4c8s0ZBQd7ayJU5Dh2AFLD/Ayuyz4uMmxQec8q3U4Ong=="
},
"@lit/reactive-element": {
"version": "1.6.1",
"resolved": "https://verdaccio.codeblob.work/@lit%2freactive-element/-/reactive-element-1.6.1.tgz",
"integrity": "sha512-va15kYZr7KZNNPZdxONGQzpUr+4sxVu7V/VG7a8mRfPPXUyhEYj5RzXCQmGrlP3tAh0L3HHm5AjBMFYRqlM9SA==",
"requires": {
"@lit-labs/ssr-dom-shim": "^1.0.0"
}
},
"@tp/tp-media-query": {
"version": "1.0.0",
"resolved": "https://verdaccio.codeblob.work/@tp%2ftp-media-query/-/tp-media-query-1.0.0.tgz",
"integrity": "sha512-hxwkqgLDGXFmjQEMWxExJW/If1ppFerK9S5+I/P7qCKm3PMRDgafFvAPTpFLtqH3GYQ9z+uAAi2ZSNKqJ9Z7QQ==",
"requires": {
"lit": "^2.2.0"
}
},
"@types/trusted-types": {
"version": "2.0.3",
"resolved": "https://verdaccio.codeblob.work/@types%2ftrusted-types/-/trusted-types-2.0.3.tgz",
"integrity": "sha512-NfQ4gyz38SL8sDNrSixxU2Os1a5xcdFxipAFxYEuLUlvU2uDwS4NUpsImcf1//SlWItCVMMLiylsxbmNMToV/g=="
},
"lit": {
"version": "2.7.1",
"resolved": "https://verdaccio.codeblob.work/lit/-/lit-2.7.1.tgz",
"integrity": "sha512-t1cVWUVQj+ucdx16QPvqzyHWYTj/bvlv6vRCUuZ5T/dA4W2Ui4a4tz7uJ1IhoTb9rKe3pTJiWmoN2GJGGteszw==",
"requires": {
"@lit/reactive-element": "^1.6.0",
"lit-element": "^3.3.0",
"lit-html": "^2.7.0"
}
},
"lit-element": {
"version": "3.3.1",
"resolved": "https://verdaccio.codeblob.work/lit-element/-/lit-element-3.3.1.tgz",
"integrity": "sha512-Gl+2409uXWbf7n6cCl7Kzasm7zjT9xmdwi2BhLNi70sRKAgRkqueDu5mSIH3hPYMM0/vqBCdPXod3NbGkRA2ww==",
"requires": {
"@lit-labs/ssr-dom-shim": "^1.1.0",
"@lit/reactive-element": "^1.3.0",
"lit-html": "^2.7.0"
}
},
"lit-html": {
"version": "2.7.1",
"resolved": "https://verdaccio.codeblob.work/lit-html/-/lit-html-2.7.1.tgz",
"integrity": "sha512-san46v7VXK6+2RXS4yveQYFUf9CoO/1bcNb0NibxLoTqlP48vs+l28tRPFDYcXGKWm0XoqcDuCC6mxIs8Jj3Zw==",
"requires": {
"@types/trusted-types": "^2.0.2"
}
}
}
}

7
package.json
View File

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

35
tp-element.js
View File

@ -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);

83
tp-responsive-menu.js Normal file
View File

@ -0,0 +1,83 @@
/**
@license
Copyright (c) 2022 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 TpResponsiveMenu extends LitElement {
static get styles() {
return [
css`
:host {
display: block;
}
.content {
display: flex;
flex-direction: column;
background: #ffffff;
}
:host([responsive]) .content {
position: fixed;
z-index: 9999;
top: 0;
left: 0;
bottom: 0;
transform: translateX(-100%);
transition: transform 400ms ease-in-out;
}
:host([responsive][visible]) .content {
transform: translateX(0);
}
`
];
}
render() {
return html`
<tp-media-query query="(min-width: 0) and (max-width: ${this.responsiveWidth}px)" @media-query-update=${this._queryUpdated}></tp-media-query>
<div class="content">
<slot></slot>
</div>
`;
}
static get properties() {
return {
responsive: { type: Boolean, reflect: true },
responsiveWidth: { type: String },
visible: { type: Boolean, reflect: true },
};
}
constructor() {
super();
this.responsiveWidth = '480';
this.visible = false;
}
open() {
this.visible = true;
}
close() {
this.visible = false;
}
toggle() {
this.visible = !this.visible;
}
_queryUpdated(e) {
this.responsive = e.detail;
}
}
window.customElements.define('tp-responsive-menu', TpResponsiveMenu);