sa-spell-checker 1.0.0 → 1.0.1

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.
Files changed (3) hide show
  1. package/dist/sa-spell-checker.mjs +67 -28
  2. package/dist/sa-spell-checker.umd.js +55 -15
  3. package/package.json +1 -1
package/dist/sa-spell-checker.mjs CHANGED
@@ -5,9 +5,44 @@ const s = `
5
5
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
6
6
  }
7
7
 
8
- .wrapper {
9
- position: relative;
10
- width: 100%;
8
+ .controls {
9
+ display: flex;
10
+ gap: 12px;
11
+ align-items: center;
12
+ margin-bottom: 8px;
13
+ flex-wrap: wrap;
14
+ }
15
+
16
+ .controls label {
17
+ font-size: 12px;
18
+ font-weight: 600;
19
+ color: #374151;
20
+ }
21
+
22
+ button {
23
+ font-size: 12px;
24
+ padding: 3px 10px;
25
+ border-radius: 4px;
26
+ cursor: pointer;
27
+ border: 1px solid #76b900;
28
+ background: #76b900;
29
+ color: #fff;
30
+ font-weight: 600;
31
+ }
32
+
33
+ button.off {
34
+ background: #fff;
35
+ color: #6b7280;
36
+ border-color: #d1d5db;
37
+ }
38
+
39
+ select {
40
+ font-size: 12px;
41
+ padding: 3px 8px;
42
+ border: 1px solid #d1d5db;
43
+ border-radius: 4px;
44
+ cursor: pointer;
45
+ color: #374151;
11
46
  }
12
47
 
13
48
  textarea {
@@ -32,28 +67,37 @@ const s = `
32
67
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
33
68
  }
34
69
 
35
- textarea:disabled {
36
- background: #f9fafb;
37
- color: #9ca3af;
38
- cursor: not-allowed;
39
- }
40
-
41
70
  textarea::placeholder {
42
71
  color: #9ca3af;
43
72
  }
44
73
  `;
45
- class r extends HTMLElement {
74
+ class a extends HTMLElement {
46
75
  static get observedAttributes() {
47
- return ["spellcheck", "lang", "placeholder", "value", "disabled", "rows"];
76
+ return ["spellcheck", "lang", "placeholder", "value", "rows"];
48
77
  }
49
78
  connectedCallback() {
50
79
  const e = this.attachShadow({ mode: "open" });
51
80
  e.innerHTML = `
52
81
  <style>${s}</style>
53
- <div class="wrapper">
54
- <textarea></textarea>
82
+ <div class="controls">
83
+ <label>Spellcheck:</label>
84
+ <button id="toggleBtn">ON</button>
85
+ <label>Language:</label>
86
+ <select id="langSelect">
87
+ <option value="en-US">English (US)</option>
88
+ <option value="en-GB">English (UK)</option>
89
+ <option value="fr">French</option>
90
+ <option value="de">German</option>
91
+ <option value="es">Spanish</option>
92
+ <option value="ko">Korean</option>
93
+ </select>
55
94
  </div>
56
- `, this._textarea = e.querySelector("textarea"), this._applyAllAttrs(), this._textarea.addEventListener("input", () => {
95
+ <textarea></textarea>
96
+ `, this._textarea = e.querySelector("textarea"), this._toggleBtn = e.querySelector("#toggleBtn"), this._langSelect = e.querySelector("#langSelect"), this._spellcheckOn = !0, this._applyAllAttrs(), this._toggleBtn.addEventListener("click", () => {
97
+ this._spellcheckOn = !this._spellcheckOn, this._textarea.spellcheck = this._spellcheckOn, this._toggleBtn.textContent = this._spellcheckOn ? "ON" : "OFF", this._toggleBtn.className = this._spellcheckOn ? "" : "off";
98
+ }), this._langSelect.addEventListener("change", () => {
99
+ this._textarea.lang = this._langSelect.value;
100
+ }), this._textarea.addEventListener("input", () => {
57
101
  this.dispatchEvent(
58
102
  new CustomEvent("sa-change", {
59
103
  detail: { value: this._textarea.value },
@@ -63,37 +107,32 @@ class r extends HTMLElement {
63
107
  );
64
108
  });
65
109
  }
66
- attributeChangedCallback(e, t, a) {
67
- this._textarea && this._applyAttr(e, a);
110
+ attributeChangedCallback(e, t, l) {
111
+ this._textarea && this._applyAttr(e, l);
68
112
  }
69
113
  _applyAllAttrs() {
70
- for (const e of r.observedAttributes)
114
+ for (const e of a.observedAttributes)
71
115
  this._applyAttr(e, this.getAttribute(e));
72
116
  }
73
117
  _applyAttr(e, t) {
74
- const a = this._textarea;
75
118
  switch (e) {
76
119
  case "spellcheck":
77
- a.spellcheck = t !== "false";
120
+ this._spellcheckOn = t !== "false", this._textarea.spellcheck = this._spellcheckOn, this._toggleBtn && (this._toggleBtn.textContent = this._spellcheckOn ? "ON" : "OFF", this._toggleBtn.className = this._spellcheckOn ? "" : "off");
78
121
  break;
79
122
  case "lang":
80
- a.lang = t || "en-US";
123
+ this._textarea.lang = t || "en-US", this._langSelect && (this._langSelect.value = t || "en-US");
81
124
  break;
82
125
  case "placeholder":
83
- a.placeholder = t || "";
126
+ this._textarea.placeholder = t || "";
84
127
  break;
85
128
  case "value":
86
- a.value !== (t || "") && (a.value = t || "");
87
- break;
88
- case "disabled":
89
- a.disabled = t !== null && t !== "false";
129
+ this._textarea.value !== (t || "") && (this._textarea.value = t || "");
90
130
  break;
91
131
  case "rows":
92
- t && (a.rows = parseInt(t, 10));
132
+ t && (this._textarea.rows = parseInt(t, 10));
93
133
  break;
94
134
  }
95
135
  }
96
- // JS property accessors
97
136
  get value() {
98
137
  var e;
99
138
  return ((e = this._textarea) == null ? void 0 : e.value) ?? "";
@@ -102,4 +141,4 @@ class r extends HTMLElement {
102
141
  this._textarea && (this._textarea.value = e ?? "");
103
142
  }
104
143
  }
105
- customElements.define("sa-spell-checker", r);
144
+ customElements.define("sa-spell-checker", a);
package/dist/sa-spell-checker.umd.js CHANGED
@@ -1,13 +1,48 @@
1
- (function(s){typeof define=="function"&&define.amd?define(s):s()})(function(){"use strict";const s=`
1
+ (function(a){typeof define=="function"&&define.amd?define(a):a()})(function(){"use strict";const a=`
2
2
  :host {
3
3
  display: block;
4
4
  width: 100%;
5
5
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
6
6
  }
7
7
 
8
- .wrapper {
9
- position: relative;
10
- width: 100%;
8
+ .controls {
9
+ display: flex;
10
+ gap: 12px;
11
+ align-items: center;
12
+ margin-bottom: 8px;
13
+ flex-wrap: wrap;
14
+ }
15
+
16
+ .controls label {
17
+ font-size: 12px;
18
+ font-weight: 600;
19
+ color: #374151;
20
+ }
21
+
22
+ button {
23
+ font-size: 12px;
24
+ padding: 3px 10px;
25
+ border-radius: 4px;
26
+ cursor: pointer;
27
+ border: 1px solid #76b900;
28
+ background: #76b900;
29
+ color: #fff;
30
+ font-weight: 600;
31
+ }
32
+
33
+ button.off {
34
+ background: #fff;
35
+ color: #6b7280;
36
+ border-color: #d1d5db;
37
+ }
38
+
39
+ select {
40
+ font-size: 12px;
41
+ padding: 3px 8px;
42
+ border: 1px solid #d1d5db;
43
+ border-radius: 4px;
44
+ cursor: pointer;
45
+ color: #374151;
11
46
  }
12
47
 
13
48
  textarea {
@@ -32,18 +67,23 @@
32
67
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
33
68
  }
34
69
 
35
- textarea:disabled {
36
- background: #f9fafb;
37
- color: #9ca3af;
38
- cursor: not-allowed;
39
- }
40
-
41
70
  textarea::placeholder {
42
71
  color: #9ca3af;
43
72
  }
44
- `;class r extends HTMLElement{static get observedAttributes(){return["spellcheck","lang","placeholder","value","disabled","rows"]}connectedCallback(){const e=this.attachShadow({mode:"open"});e.innerHTML=`
45
- <style>${s}</style>
46
- <div class="wrapper">
47
- <textarea></textarea>
73
+ `;class l extends HTMLElement{static get observedAttributes(){return["spellcheck","lang","placeholder","value","rows"]}connectedCallback(){const e=this.attachShadow({mode:"open"});e.innerHTML=`
74
+ <style>${a}</style>
75
+ <div class="controls">
76
+ <label>Spellcheck:</label>
77
+ <button id="toggleBtn">ON</button>
78
+ <label>Language:</label>
79
+ <select id="langSelect">
80
+ <option value="en-US">English (US)</option>
81
+ <option value="en-GB">English (UK)</option>
82
+ <option value="fr">French</option>
83
+ <option value="de">German</option>
84
+ <option value="es">Spanish</option>
85
+ <option value="ko">Korean</option>
86
+ </select>
48
87
  </div>
49
- `,this._textarea=e.querySelector("textarea"),this._applyAllAttrs(),this._textarea.addEventListener("input",()=>{this.dispatchEvent(new CustomEvent("sa-change",{detail:{value:this._textarea.value},bubbles:!0,composed:!0}))})}attributeChangedCallback(e,t,a){this._textarea&&this._applyAttr(e,a)}_applyAllAttrs(){for(const e of r.observedAttributes)this._applyAttr(e,this.getAttribute(e))}_applyAttr(e,t){const a=this._textarea;switch(e){case"spellcheck":a.spellcheck=t!=="false";break;case"lang":a.lang=t||"en-US";break;case"placeholder":a.placeholder=t||"";break;case"value":a.value!==(t||"")&&(a.value=t||"");break;case"disabled":a.disabled=t!==null&&t!=="false";break;case"rows":t&&(a.rows=parseInt(t,10));break}}get value(){var e;return((e=this._textarea)==null?void 0:e.value)??""}set value(e){this._textarea&&(this._textarea.value=e??"")}}customElements.define("sa-spell-checker",r)});
88
+ <textarea></textarea>
89
+ `,this._textarea=e.querySelector("textarea"),this._toggleBtn=e.querySelector("#toggleBtn"),this._langSelect=e.querySelector("#langSelect"),this._spellcheckOn=!0,this._applyAllAttrs(),this._toggleBtn.addEventListener("click",()=>{this._spellcheckOn=!this._spellcheckOn,this._textarea.spellcheck=this._spellcheckOn,this._toggleBtn.textContent=this._spellcheckOn?"ON":"OFF",this._toggleBtn.className=this._spellcheckOn?"":"off"}),this._langSelect.addEventListener("change",()=>{this._textarea.lang=this._langSelect.value}),this._textarea.addEventListener("input",()=>{this.dispatchEvent(new CustomEvent("sa-change",{detail:{value:this._textarea.value},bubbles:!0,composed:!0}))})}attributeChangedCallback(e,t,s){this._textarea&&this._applyAttr(e,s)}_applyAllAttrs(){for(const e of l.observedAttributes)this._applyAttr(e,this.getAttribute(e))}_applyAttr(e,t){switch(e){case"spellcheck":this._spellcheckOn=t!=="false",this._textarea.spellcheck=this._spellcheckOn,this._toggleBtn&&(this._toggleBtn.textContent=this._spellcheckOn?"ON":"OFF",this._toggleBtn.className=this._spellcheckOn?"":"off");break;case"lang":this._textarea.lang=t||"en-US",this._langSelect&&(this._langSelect.value=t||"en-US");break;case"placeholder":this._textarea.placeholder=t||"";break;case"value":this._textarea.value!==(t||"")&&(this._textarea.value=t||"");break;case"rows":t&&(this._textarea.rows=parseInt(t,10));break}}get value(){var e;return((e=this._textarea)==null?void 0:e.value)??""}set value(e){this._textarea&&(this._textarea.value=e??"")}}customElements.define("sa-spell-checker",l)});
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "sa-spell-checker",
3
- "version": "1.0.0",
3
+ "version": "1.0.1",
4
4
  "description": "SuperAnnotate custom spell checker web component",
5
5
  "main": "dist/sa-spell-checker.umd.cjs",
6
6
  "module": "dist/sa-spell-checker.js",