jb-textarea 1.1.0 → 1.1.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +23 -4
- package/dist/JBTextarea.js +1 -1
- package/index.js +1 -1
- package/lib/JBTextarea.scss +2 -3
- package/package.json +2 -1
package/README.md
CHANGED
|
@@ -1,12 +1,25 @@
|
|
|
1
1
|
# jb-textarea
|
|
2
|
-
|
|
3
|
-
|
|
2
|
+
|
|
3
|
+
simple textarea web component to input long text
|
|
4
|
+
|
|
5
|
+
- lightweight
|
|
6
|
+
- zero dependancy
|
|
7
|
+
- help you manage validation in easy way
|
|
8
|
+
- config auto height grow ability with max height
|
|
9
|
+
- web component so you can use it with any framework you need
|
|
10
|
+
|
|
11
|
+
sample: <https://codepen.io/javadbat/pen/poRZVXe>
|
|
12
|
+
|
|
13
|
+
## installation and setup
|
|
14
|
+
|
|
4
15
|
```cmd
|
|
5
16
|
npm i jb-textarea
|
|
6
|
-
|
|
17
|
+
``
|
|
18
|
+
`
|
|
7
19
|
```html
|
|
8
20
|
<jb-textarea label="توضیحات" value="" message="متن زیر باکس"></jb-textarea>
|
|
9
21
|
```
|
|
22
|
+
|
|
10
23
|
## get and set value
|
|
11
24
|
|
|
12
25
|
```js
|
|
@@ -15,6 +28,7 @@ document.querySelector("jb-textarea").value;
|
|
|
15
28
|
document.querySelector("jb-textarea").value = "salam";
|
|
16
29
|
set value to salam
|
|
17
30
|
```
|
|
31
|
+
|
|
18
32
|
### events
|
|
19
33
|
|
|
20
34
|
```js
|
|
@@ -23,12 +37,15 @@ document.querySelector("jb-textarea").addEventListener('keydown',func);
|
|
|
23
37
|
document.querySelector("jb-textarea").addEventListener('keyup',func);
|
|
24
38
|
document.querySelector("jb-textarea").addEventListener('keypress',func);
|
|
25
39
|
```
|
|
40
|
+
|
|
26
41
|
### auto height grow
|
|
27
42
|
|
|
28
43
|
you can set `autoHeight` to true so when user type something and text overflow a textarea height component will grow by itself in boundary of `--jb-textarea-min-height` and `--jb-textarea-max-height` that you set by css variable
|
|
44
|
+
|
|
29
45
|
```js
|
|
30
46
|
document.querySelector("jb-textarea").autoHeight = true;
|
|
31
47
|
```
|
|
48
|
+
|
|
32
49
|
the good point of set boundary with css variable is you can set different min or max base on device by CSS media queries.
|
|
33
50
|
|
|
34
51
|
### set custome style
|
|
@@ -52,4 +69,6 @@ if you want to set a custom style to this web-component all you need is to set c
|
|
|
52
69
|
| --jb-textarea-min-height | minimum height of text area defualt is `80px` |
|
|
53
70
|
| --jb-textarea-max-height | minimum height of text area defualt is `none` |
|
|
54
71
|
| --jb-textarea-placeholder-color | placeholder color defualt is 'initial' |
|
|
55
|
-
| --jb-textarea-placeholder-font-size | placeholder font-size defualt is `initial` |
|
|
72
|
+
| --jb-textarea-placeholder-font-size | placeholder font-size defualt is `initial` |
|
|
73
|
+
| --jb-textarea-label-color | label color defualt is `#1f1735` |
|
|
74
|
+
| --jb-textarea-value-color | value color |
|
package/dist/JBTextarea.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
var HTML = "<div class=\"jb-textarea-web-component\">\r\n <label class=\"--hide\"><span class=\"label-value\"></span><span>:</span></label>\r\n <div class=\"textarea-box\">\r\n <textarea class=\"textarea-input\"></textarea>\r\n </div>\r\n <div class=\"message-box\"></div>\r\n</div>";
|
|
2
2
|
|
|
3
|
-
var css_248z = ".jb-textarea-web-component {\n width: 100%;\n margin: var(--jb-textarea-margin, 12px 0)
|
|
3
|
+
var css_248z = ".jb-textarea-web-component {\n width: 100%;\n margin: var(--jb-textarea-margin, 12px 0); }\n .jb-textarea-web-component label {\n width: 100%;\n margin: 4px 0px;\n display: block;\n font-size: var(--jb-textarea-label-font-size, 0.8em);\n color: var(--jb-textarea-label-color, #1f1735); }\n .jb-textarea-web-component label.--hide {\n display: none; }\n .jb-textarea-web-component .textarea-box {\n width: 100%;\n box-sizing: border-box;\n border: solid var(--jb-textarea-border-width, 1px) var(--jb-textarea-border-color, #f7f6f6);\n background-color: var(--jb-textarea-bgcolor, #f7f6f6);\n border-bottom: solid var(--jb-textarea-border-botton-width, 3px) var(--jb-textarea-border-color, #f7f6f6);\n border-radius: var(--jb-textarea-border-radius, 16px);\n display: block;\n transition: ease 0.3s all;\n overflow: hidden;\n display: flex;\n justify-content: space-between; }\n .jb-textarea-web-component .textarea-box:focus-within {\n border-color: var(--jb-textarea-border-color-focus, #1e2832); }\n .jb-textarea-web-component .textarea-box textarea {\n border: none;\n width: 100%;\n box-sizing: border-box;\n min-height: var(--jb-textarea-min-height, 80px);\n height: var(--jb-textarea-min-height, 80px);\n max-height: var(--jb-textarea-max-height, none);\n background-color: transparent;\n padding: 6px 12px 4px 12px;\n display: block;\n font-family: inherit;\n font-size: var(--jb-textarea-value-font-size, 1.1em);\n color: var(--jb-textarea-value-color, #1f1735);\n margin: 0;\n border-radius: 0;\n resize: vertical;\n color: var(--jb-textarea-value-color, initial); }\n .jb-textarea-web-component .textarea-box textarea:focus {\n outline: none; }\n .jb-textarea-web-component .textarea-box textarea::placeholder {\n color: var(--jb-textarea-placeholder-color, initial);\n font-size: var(--jb-textarea-placeholder-font-size, initial); }\n .jb-textarea-web-component .message-box {\n font-size: var(--jb-textarea-message-font-size, 0.7em);\n padding: 2px 8px;\n color: #929292; }\n .jb-textarea-web-component .message-box:empty {\n padding: 0; }\n .jb-textarea-web-component .message-box.error {\n color: var(--jb-textarea-message-error-color, red); }\n\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkpCVGV4dGFyZWEuc2NzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTtFQUNFLFdBQVc7RUFDWCx5Q0FBeUMsRUFBRTtFQUMzQztJQUNFLFdBQVc7SUFDWCxlQUFlO0lBQ2YsY0FBYztJQUNkLG9EQUFvRDtJQUNwRCw4Q0FBOEMsRUFBRTtJQUNoRDtNQUNFLGFBQWEsRUFBRTtFQUNuQjtJQUNFLFdBQVc7SUFDWCxzQkFBc0I7SUFDdEIsMkZBQTJGO0lBQzNGLHFEQUFxRDtJQUNyRCx5R0FBeUc7SUFDekcscURBQXFEO0lBQ3JELGNBQWM7SUFDZCx5QkFBeUI7SUFDekIsZ0JBQWdCO0lBQ2hCLGFBQWE7SUFDYiw4QkFBOEIsRUFBRTtJQUNoQztNQUNFLDREQUE0RCxFQUFFO0lBQ2hFO01BQ0UsWUFBWTtNQUNaLFdBQVc7TUFDWCxzQkFBc0I7TUFDdEIsK0NBQStDO01BQy9DLDJDQUEyQztNQUMzQywrQ0FBK0M7TUFDL0MsNkJBQTZCO01BQzdCLDBCQUEwQjtNQUMxQixjQUFjO01BQ2Qsb0JBQW9CO01BQ3BCLG9EQUFvRDtNQUNwRCw4Q0FBOEM7TUFDOUMsU0FBUztNQUNULGdCQUFnQjtNQUNoQixnQkFBZ0I7TUFDaEIsOENBQThDLEVBQUU7TUFDaEQ7UUFDRSxhQUFhLEVBQUU7TUFDakI7UUFDRSxvREFBb0Q7UUFDcEQsNERBQTRELEVBQUU7RUFDcEU7SUFDRSxzREFBc0Q7SUFDdEQsZ0JBQWdCO0lBQ2hCLGNBQWMsRUFBRTtJQUNoQjtNQUNFLFVBQVUsRUFBRTtJQUNkO01BQ0Usa0RBQWtELEVBQUUiLCJmaWxlIjoiSkJUZXh0YXJlYS5zY3NzIiwic291cmNlc0NvbnRlbnQiOlsiLmpiLXRleHRhcmVhLXdlYi1jb21wb25lbnQge1xuICB3aWR0aDogMTAwJTtcbiAgbWFyZ2luOiB2YXIoLS1qYi10ZXh0YXJlYS1tYXJnaW4sIDEycHggMCk7IH1cbiAgLmpiLXRleHRhcmVhLXdlYi1jb21wb25lbnQgbGFiZWwge1xuICAgIHdpZHRoOiAxMDAlO1xuICAgIG1hcmdpbjogNHB4IDBweDtcbiAgICBkaXNwbGF5OiBibG9jaztcbiAgICBmb250LXNpemU6IHZhcigtLWpiLXRleHRhcmVhLWxhYmVsLWZvbnQtc2l6ZSwgMC44ZW0pO1xuICAgIGNvbG9yOiB2YXIoLS1qYi10ZXh0YXJlYS1sYWJlbC1jb2xvciwgIzFmMTczNSk7IH1cbiAgICAuamItdGV4dGFyZWEtd2ViLWNvbXBvbmVudCBsYWJlbC4tLWhpZGUge1xuICAgICAgZGlzcGxheTogbm9uZTsgfVxuICAuamItdGV4dGFyZWEtd2ViLWNvbXBvbmVudCAudGV4dGFyZWEtYm94IHtcbiAgICB3aWR0aDogMTAwJTtcbiAgICBib3gtc2l6aW5nOiBib3JkZXItYm94O1xuICAgIGJvcmRlcjogc29saWQgdmFyKC0tamItdGV4dGFyZWEtYm9yZGVyLXdpZHRoLCAxcHgpIHZhcigtLWpiLXRleHRhcmVhLWJvcmRlci1jb2xvciwgI2Y3ZjZmNik7XG4gICAgYmFja2dyb3VuZC1jb2xvcjogdmFyKC0tamItdGV4dGFyZWEtYmdjb2xvciwgI2Y3ZjZmNik7XG4gICAgYm9yZGVyLWJvdHRvbTogc29saWQgdmFyKC0tamItdGV4dGFyZWEtYm9yZGVyLWJvdHRvbi13aWR0aCwgM3B4KSB2YXIoLS1qYi10ZXh0YXJlYS1ib3JkZXItY29sb3IsICNmN2Y2ZjYpO1xuICAgIGJvcmRlci1yYWRpdXM6IHZhcigtLWpiLXRleHRhcmVhLWJvcmRlci1yYWRpdXMsIDE2cHgpO1xuICAgIGRpc3BsYXk6IGJsb2NrO1xuICAgIHRyYW5zaXRpb246IGVhc2UgMC4zcyBhbGw7XG4gICAgb3ZlcmZsb3c6IGhpZGRlbjtcbiAgICBkaXNwbGF5OiBmbGV4O1xuICAgIGp1c3RpZnktY29udGVudDogc3BhY2UtYmV0d2VlbjsgfVxuICAgIC5qYi10ZXh0YXJlYS13ZWItY29tcG9uZW50IC50ZXh0YXJlYS1ib3g6Zm9jdXMtd2l0aGluIHtcbiAgICAgIGJvcmRlci1jb2xvcjogdmFyKC0tamItdGV4dGFyZWEtYm9yZGVyLWNvbG9yLWZvY3VzLCAjMWUyODMyKTsgfVxuICAgIC5qYi10ZXh0YXJlYS13ZWItY29tcG9uZW50IC50ZXh0YXJlYS1ib3ggdGV4dGFyZWEge1xuICAgICAgYm9yZGVyOiBub25lO1xuICAgICAgd2lkdGg6IDEwMCU7XG4gICAgICBib3gtc2l6aW5nOiBib3JkZXItYm94O1xuICAgICAgbWluLWhlaWdodDogdmFyKC0tamItdGV4dGFyZWEtbWluLWhlaWdodCwgODBweCk7XG4gICAgICBoZWlnaHQ6IHZhcigtLWpiLXRleHRhcmVhLW1pbi1oZWlnaHQsIDgwcHgpO1xuICAgICAgbWF4LWhlaWdodDogdmFyKC0tamItdGV4dGFyZWEtbWF4LWhlaWdodCwgbm9uZSk7XG4gICAgICBiYWNrZ3JvdW5kLWNvbG9yOiB0cmFuc3BhcmVudDtcbiAgICAgIHBhZGRpbmc6IDZweCAxMnB4IDRweCAxMnB4O1xuICAgICAgZGlzcGxheTogYmxvY2s7XG4gICAgICBmb250LWZhbWlseTogaW5oZXJpdDtcbiAgICAgIGZvbnQtc2l6ZTogdmFyKC0tamItdGV4dGFyZWEtdmFsdWUtZm9udC1zaXplLCAxLjFlbSk7XG4gICAgICBjb2xvcjogdmFyKC0tamItdGV4dGFyZWEtdmFsdWUtY29sb3IsICMxZjE3MzUpO1xuICAgICAgbWFyZ2luOiAwO1xuICAgICAgYm9yZGVyLXJhZGl1czogMDtcbiAgICAgIHJlc2l6ZTogdmVydGljYWw7XG4gICAgICBjb2xvcjogdmFyKC0tamItdGV4dGFyZWEtdmFsdWUtY29sb3IsIGluaXRpYWwpOyB9XG4gICAgICAuamItdGV4dGFyZWEtd2ViLWNvbXBvbmVudCAudGV4dGFyZWEtYm94IHRleHRhcmVhOmZvY3VzIHtcbiAgICAgICAgb3V0bGluZTogbm9uZTsgfVxuICAgICAgLmpiLXRleHRhcmVhLXdlYi1jb21wb25lbnQgLnRleHRhcmVhLWJveCB0ZXh0YXJlYTo6cGxhY2Vob2xkZXIge1xuICAgICAgICBjb2xvcjogdmFyKC0tamItdGV4dGFyZWEtcGxhY2Vob2xkZXItY29sb3IsIGluaXRpYWwpO1xuICAgICAgICBmb250LXNpemU6IHZhcigtLWpiLXRleHRhcmVhLXBsYWNlaG9sZGVyLWZvbnQtc2l6ZSwgaW5pdGlhbCk7IH1cbiAgLmpiLXRleHRhcmVhLXdlYi1jb21wb25lbnQgLm1lc3NhZ2UtYm94IHtcbiAgICBmb250LXNpemU6IHZhcigtLWpiLXRleHRhcmVhLW1lc3NhZ2UtZm9udC1zaXplLCAwLjdlbSk7XG4gICAgcGFkZGluZzogMnB4IDhweDtcbiAgICBjb2xvcjogIzkyOTI5MjsgfVxuICAgIC5qYi10ZXh0YXJlYS13ZWItY29tcG9uZW50IC5tZXNzYWdlLWJveDplbXB0eSB7XG4gICAgICBwYWRkaW5nOiAwOyB9XG4gICAgLmpiLXRleHRhcmVhLXdlYi1jb21wb25lbnQgLm1lc3NhZ2UtYm94LmVycm9yIHtcbiAgICAgIGNvbG9yOiB2YXIoLS1qYi10ZXh0YXJlYS1tZXNzYWdlLWVycm9yLWNvbG9yLCByZWQpOyB9XG4iXX0= */";
|
|
4
4
|
|
|
5
5
|
class JBTextareaWebComponent extends HTMLElement {
|
|
6
6
|
get value() {
|
package/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import './dist/JBTextarea'
|
|
1
|
+
import './dist/JBTextarea.js';
|
package/lib/JBTextarea.scss
CHANGED
|
@@ -1,13 +1,12 @@
|
|
|
1
1
|
.jb-textarea-web-component {
|
|
2
2
|
width: 100%;
|
|
3
3
|
margin: var(--jb-textarea-margin , 12px 0);
|
|
4
|
-
direction: rtl;
|
|
5
4
|
label {
|
|
6
5
|
width: 100%;
|
|
7
6
|
margin: 4px 0px;
|
|
8
7
|
display: block;
|
|
9
8
|
font-size: var(--jb-textarea-label-font-size , 0.8em);
|
|
10
|
-
color: #1f1735;
|
|
9
|
+
color: var(--jb-textarea-label-color, #1f1735);
|
|
11
10
|
&.--hide{
|
|
12
11
|
display: none;
|
|
13
12
|
}
|
|
@@ -42,7 +41,7 @@
|
|
|
42
41
|
display: block;
|
|
43
42
|
font-family: inherit;
|
|
44
43
|
font-size: var(--jb-textarea-value-font-size , 1.1em);
|
|
45
|
-
color: #1f1735;
|
|
44
|
+
color: var(--jb-textarea-value-color, #1f1735);
|
|
46
45
|
margin: 0;
|
|
47
46
|
border-radius: 0;
|
|
48
47
|
resize: vertical;
|
package/package.json
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "jb-textarea",
|
|
3
3
|
"description": "textarea web component",
|
|
4
|
+
"type": "module",
|
|
4
5
|
"author": {
|
|
5
6
|
"name": "mohammad javad bathaei",
|
|
6
7
|
"email": "javadbat@gmail.com"
|
|
@@ -11,7 +12,7 @@
|
|
|
11
12
|
"select",
|
|
12
13
|
"web component"
|
|
13
14
|
],
|
|
14
|
-
"version": "1.1.
|
|
15
|
+
"version": "1.1.4",
|
|
15
16
|
"bugs": "https://github.com/javadbat/jb-textarea/issues",
|
|
16
17
|
"license": "MIT",
|
|
17
18
|
"files": [
|