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

First version

Browse Source
This commit is contained in:
trading_peter 2024-06-10 23:11:36 +02:00
parent 658b2214d4
commit ae5a604f5c
4 changed files with 341 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

122
package-lock.json generated Normal file
View File

@ -0,0 +1,122 @@
{
"name": "@tp/tp-textarea",
"version": "1.0.0",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"name": "@tp/tp-textarea",
"version": "1.0.0",
"license": "Apache-2.0",
"dependencies": {
"@tp/helpers": "^2.2.0",
"lit": "^3.0.0"
}
},
"node_modules/@lit-labs/ssr-dom-shim": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/@lit-labs/ssr-dom-shim/-/ssr-dom-shim-1.2.0.tgz",
"integrity": "sha512-yWJKmpGE6lUURKAaIltoPIE/wrbY3TEkqQt+X0m+7fQNnAv0keydnYvbiJFP1PnMhizmIWRWOG5KLhYyc/xl+g=="
},
"node_modules/@lit/reactive-element": {
"version": "2.0.4",
"resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-2.0.4.tgz",
"integrity": "sha512-GFn91inaUa2oHLak8awSIigYz0cU0Payr1rcFsrkf5OJ5eSPxElyZfKh0f2p9FsTiZWXQdWGJeXZICEfXXYSXQ==",
"dependencies": {
"@lit-labs/ssr-dom-shim": "^1.2.0"
}
},
"node_modules/@tp/helpers": {
"version": "2.2.0",
"resolved": "https://gitea.codeblob.work/api/packages/tp-elements/npm/%40tp%2Fhelpers/-/2.2.0/helpers-2.2.0.tgz",
"integrity": "sha512-kf+ieedMdYZOnQ6xUUQxTlP8cQEp4obpSs3vI7V/3xnex7VvMbiWzgFHU+wr1D2eR/IA0Cl1cZxvJ3E052EQew==",
"license": "Apache-2.0"
},
"node_modules/@types/trusted-types": {
"version": "2.0.7",
"resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
"integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw=="
},
"node_modules/lit": {
"version": "3.1.4",
"resolved": "https://registry.npmjs.org/lit/-/lit-3.1.4.tgz",
"integrity": "sha512-q6qKnKXHy2g1kjBaNfcoLlgbI3+aSOZ9Q4tiGa9bGYXq5RBXxkVTqTIVmP2VWMp29L4GyvCFm8ZQ2o56eUAMyA==",
"dependencies": {
"@lit/reactive-element": "^2.0.4",
"lit-element": "^4.0.4",
"lit-html": "^3.1.2"
}
},
"node_modules/lit-element": {
"version": "4.0.6",
"resolved": "https://registry.npmjs.org/lit-element/-/lit-element-4.0.6.tgz",
"integrity": "sha512-U4sdJ3CSQip7sLGZ/uJskO5hGiqtlpxndsLr6mt3IQIjheg93UKYeGQjWMRql1s/cXNOaRrCzC2FQwjIwSUqkg==",
"dependencies": {
"@lit-labs/ssr-dom-shim": "^1.2.0",
"@lit/reactive-element": "^2.0.4",
"lit-html": "^3.1.2"
}
},
"node_modules/lit-html": {
"version": "3.1.4",
"resolved": "https://registry.npmjs.org/lit-html/-/lit-html-3.1.4.tgz",
"integrity": "sha512-yKKO2uVv7zYFHlWMfZmqc+4hkmSbFp8jgjdZY9vvR9jr4J8fH6FUMXhr+ljfELgmjpvlF7Z1SJ5n5/Jeqtc9YA==",
"dependencies": {
"@types/trusted-types": "^2.0.2"
}
}
},
"dependencies": {
"@lit-labs/ssr-dom-shim": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/@lit-labs/ssr-dom-shim/-/ssr-dom-shim-1.2.0.tgz",
"integrity": "sha512-yWJKmpGE6lUURKAaIltoPIE/wrbY3TEkqQt+X0m+7fQNnAv0keydnYvbiJFP1PnMhizmIWRWOG5KLhYyc/xl+g=="
},
"@lit/reactive-element": {
"version": "2.0.4",
"resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-2.0.4.tgz",
"integrity": "sha512-GFn91inaUa2oHLak8awSIigYz0cU0Payr1rcFsrkf5OJ5eSPxElyZfKh0f2p9FsTiZWXQdWGJeXZICEfXXYSXQ==",
"requires": {
"@lit-labs/ssr-dom-shim": "^1.2.0"
}
},
"@tp/helpers": {
"version": "2.2.0",
"resolved": "https://gitea.codeblob.work/api/packages/tp-elements/npm/%40tp%2Fhelpers/-/2.2.0/helpers-2.2.0.tgz",
"integrity": "sha512-kf+ieedMdYZOnQ6xUUQxTlP8cQEp4obpSs3vI7V/3xnex7VvMbiWzgFHU+wr1D2eR/IA0Cl1cZxvJ3E052EQew=="
},
"@types/trusted-types": {
"version": "2.0.7",
"resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
"integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw=="
},
"lit": {
"version": "3.1.4",
"resolved": "https://registry.npmjs.org/lit/-/lit-3.1.4.tgz",
"integrity": "sha512-q6qKnKXHy2g1kjBaNfcoLlgbI3+aSOZ9Q4tiGa9bGYXq5RBXxkVTqTIVmP2VWMp29L4GyvCFm8ZQ2o56eUAMyA==",
"requires": {
"@lit/reactive-element": "^2.0.4",
"lit-element": "^4.0.4",
"lit-html": "^3.1.2"
}
},
"lit-element": {
"version": "4.0.6",
"resolved": "https://registry.npmjs.org/lit-element/-/lit-element-4.0.6.tgz",
"integrity": "sha512-U4sdJ3CSQip7sLGZ/uJskO5hGiqtlpxndsLr6mt3IQIjheg93UKYeGQjWMRql1s/cXNOaRrCzC2FQwjIwSUqkg==",
"requires": {
"@lit-labs/ssr-dom-shim": "^1.2.0",
"@lit/reactive-element": "^2.0.4",
"lit-html": "^3.1.2"
}
},
"lit-html": {
"version": "3.1.4",
"resolved": "https://registry.npmjs.org/lit-html/-/lit-html-3.1.4.tgz",
"integrity": "sha512-yKKO2uVv7zYFHlWMfZmqc+4hkmSbFp8jgjdZY9vvR9jr4J8fH6FUMXhr+ljfELgmjpvlF7Z1SJ5n5/Jeqtc9YA==",
"requires": {
"@types/trusted-types": "^2.0.2"
}
}
}
}

11
package.json
View File

@ -1,18 +1,19 @@
{
"name": "@tp/tp-element",
"version": "0.0.1",
"name": "@tp/tp-textarea",
"version": "1.0.0",
"description": "",
"main": "tp-element.js",
"main": "tp-textarea.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-textareas/tp-textarea.git"
},
"author": "trading_peter",
"license": "Apache-2.0",
"dependencies": {
"lit": "^2.2.0"
"@tp/helpers": "^2.2.0",
"lit": "^3.0.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);

213
tp-textarea.js Normal file
View File

@ -0,0 +1,213 @@
/**
@license
Copyright (c) 2024 trading_peter
This program is available under Apache License Version 2.0
*/
import { FormElement } from '@tp/helpers/form-element.js';
import { DomQuery } from '@tp/helpers/dom-query.js';
import { LitElement, html, css } from 'lit';
class TpElement extends FormElement(DomQuery(LitElement)) {
static get styles() {
return [
css`
:host {
display: inline-block;
position: relative;
width: 400px;
border: solid 1px #9E9E9E;
overflow: hidden;
}
:host([invalid]) {
border: solid 1px #B71C1C;
}
.error-message {
position: absolute;
bottom: 0;
left: 0;
right: 0;
font-size: 10px;
color: var(--tp-textarea-text-color-invalid, #B71C1C);
transition: opacity 0.3s;
opacity: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
pointer-events: none;
background: #ffffff;
}
:host([invalid]) .error-message {
opacity: 1;
}
.wrap {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.mirror-text {
visibility: hidden;
word-wrap: break-word;
}
.wrap ::slotted(textarea) {
position: relative;
outline: none;
border: none;
resize: none;
background: inherit;
color: inherit;
width: 100%;
height: 100%;
font-size: inherit;
font-family: inherit;
line-height: inherit;
text-align: inherit;
box-sizing: border-box;
overflow: hidden;
padding: 0;
}
`
];
}
render() {
const { errorMessage } = this;
return html`
<div id="mirror" class="mirror-text" aria-hidden="true">&nbsp;</div>
<div class="wrap">
<slot></slot>
</div>
<div class="error-message">${errorMessage}</div>
`;
}
static get properties() {
return {
readonly: { type: Boolean },
errorMessage: { type: String },
invalid: { type: Boolean, reflect: true },
};
}
connectedCallback() {
super.connectedCallback();
this.addEventListener('input', this.onInput);
}
disconnectedCallback() {
super.disconnectedCallback();
this.removeEventListener('input', this.onInput);
}
shouldUpdate(changes) {
if (changes.has('value')) {
this._syncToTextarea();
}
if (changes.has('readonly')) {
this._readOnlyChanged();
}
return true;
}
get textarea() {
return this.querySelector('textarea');
}
get selectionStart() {
return this.textarea.selectionStart;
}
get selectionEnd() {
return this.textarea.selectionEnd;
}
validate() {
// Use the nested input's native validity.
let valid = this.textarea.validity.valid;
// Only do extra checking if the browser thought this was valid.
if (valid) {
// Empty, required input is invalid
if (this.required && this.value === '') {
valid = false;
} else if (this.hasValidator()) {
valid = IronValidatableBehavior.validate.call(this, this.value);
}
}
this.invalid = !valid;
return valid;
}
reset() {
this.value = '';
this.textarea.value = '';
this.invalid = false;
}
_syncToTextarea() {
if (typeof this.value !== 'string') {
return this.value = '';
}
if (this.textarea) {
this.textarea.value = this.value || '';
this.$.mirror.innerHTML = this._valueForMirror();
}
}
_readOnlyChanged(state) {
this.textarea.readOnly = state;
}
_onInput() {
this.$.mirror.innerHTML = this._valueForMirror();
this.value = this.textarea.value;
}
_constrain(tokens) {
let _tokens;
tokens = tokens || [''];
// Enforce the min and max heights for a multiline input to avoid measurement
if (this.maxRows > 0 && tokens.length > this.maxRows) {
_tokens = tokens.slice(0, this.maxRows);
} else {
_tokens = tokens.slice(0);
}
while (this.rows > 0 && _tokens.length < this.rows) {
_tokens.push('');
}
// Use &#160; instead &nbsp; of to allow this element to be used in XHTML.
return _tokens.join('<br/>') + '&#160;';
}
_valueForMirror() {
const input = this.textarea;
if (!input) {
return;
}
this.tokens = (input && input.value) ? input.value.replace(/&/gm, '&amp;').replace(/"/gm, '&quot;').replace(/'/gm, '&#39;').replace(/</gm, '&lt;').replace(/>/gm, '&gt;').split('\n') : [''];
return this._constrain(this.tokens);
}
_updateCached() {
this.$.mirror.innerHTML = this._constrain(this.tokens);
}
}
window.customElements.define('tp-element', TpElement);