First version
This commit is contained in:
parent
658b2214d4
commit
ae5a604f5c
122
package-lock.json
generated
Normal file
122
package-lock.json
generated
Normal 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
11
package.json
@ -1,18 +1,19 @@
|
|||||||
{
|
{
|
||||||
"name": "@tp/tp-element",
|
"name": "@tp/tp-textarea",
|
||||||
"version": "0.0.1",
|
"version": "1.0.0",
|
||||||
"description": "",
|
"description": "",
|
||||||
"main": "tp-element.js",
|
"main": "tp-textarea.js",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"test": "echo \"Error: no test specified\" && exit 1"
|
"test": "echo \"Error: no test specified\" && exit 1"
|
||||||
},
|
},
|
||||||
"repository": {
|
"repository": {
|
||||||
"type": "git",
|
"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",
|
"author": "trading_peter",
|
||||||
"license": "Apache-2.0",
|
"license": "Apache-2.0",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"lit": "^2.2.0"
|
"@tp/helpers": "^2.2.0",
|
||||||
|
"lit": "^3.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);
|
|
||||||
213
tp-textarea.js
Normal file
213
tp-textarea.js
Normal 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"> </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   instead of to allow this element to be used in XHTML.
|
||||||
|
return _tokens.join('<br/>') + ' ';
|
||||||
|
}
|
||||||
|
|
||||||
|
_valueForMirror() {
|
||||||
|
const input = this.textarea;
|
||||||
|
if (!input) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.tokens = (input && input.value) ? input.value.replace(/&/gm, '&').replace(/"/gm, '"').replace(/'/gm, ''').replace(/</gm, '<').replace(/>/gm, '>').split('\n') : [''];
|
||||||
|
return this._constrain(this.tokens);
|
||||||
|
}
|
||||||
|
|
||||||
|
_updateCached() {
|
||||||
|
this.$.mirror.innerHTML = this._constrain(this.tokens);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
window.customElements.define('tp-element', TpElement);
|
||||||
Loading…
Reference in New Issue
Block a user