@substrate-system/input 0.0.1 → 0.0.3
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 +12 -1
- package/dist/index.cjs +14 -5
- package/dist/index.cjs.map +2 -2
- package/dist/index.d.ts +3 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +14 -5
- package/dist/index.js.map +2 -2
- package/dist/index.min.js +1 -3
- package/dist/index.min.js.map +3 -3
- package/dist/meta.json +4 -4
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -48,9 +48,20 @@ const { Input } = require('@substrate-system/input')
|
|
|
48
48
|
-----------------
|
|
49
49
|
|
|
50
50
|
## Use
|
|
51
|
-
Inherit from this module.
|
|
51
|
+
Inherit from this module.
|
|
52
52
|
|
|
53
53
|
### JS
|
|
54
54
|
```js
|
|
55
55
|
import { Input } from '@substrate-system/input'
|
|
56
|
+
|
|
57
|
+
class FooBar extends Input {
|
|
58
|
+
static tag = 'foo-bar'
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
// Use the static method `define`
|
|
62
|
+
FooBar.define()
|
|
63
|
+
|
|
64
|
+
document.body.innerHTML += `
|
|
65
|
+
<foo-bar></foo-bar>
|
|
66
|
+
`
|
|
56
67
|
```
|
package/dist/index.cjs
CHANGED
|
@@ -48,6 +48,8 @@ class Input extends HTMLElement {
|
|
|
48
48
|
if (attr) this.value = attr;
|
|
49
49
|
const type = this.getAttribute("type");
|
|
50
50
|
if (type) this.type = type;
|
|
51
|
+
const name = this.getAttribute("name");
|
|
52
|
+
if (name) this.name = name;
|
|
51
53
|
}, 0);
|
|
52
54
|
}
|
|
53
55
|
get input() {
|
|
@@ -58,6 +60,13 @@ class Input extends HTMLElement {
|
|
|
58
60
|
if (!i) return 0;
|
|
59
61
|
return parseInt(i);
|
|
60
62
|
}
|
|
63
|
+
get name() {
|
|
64
|
+
return this.input?.name;
|
|
65
|
+
}
|
|
66
|
+
set name(newName) {
|
|
67
|
+
if (!this.input) throw new Error("not input");
|
|
68
|
+
this.input.name = newName;
|
|
69
|
+
}
|
|
61
70
|
/**
|
|
62
71
|
* Remove from `this` element and also child.
|
|
63
72
|
*/
|
|
@@ -149,7 +158,8 @@ class Input extends HTMLElement {
|
|
|
149
158
|
autofocus,
|
|
150
159
|
tabindex,
|
|
151
160
|
disabled,
|
|
152
|
-
value
|
|
161
|
+
value,
|
|
162
|
+
name
|
|
153
163
|
} = this;
|
|
154
164
|
const classes = ["substrate-input"];
|
|
155
165
|
const btn = !!(this.type === "submit" || this.type === "button");
|
|
@@ -160,11 +170,10 @@ class Input extends HTMLElement {
|
|
|
160
170
|
type ? `type="${this.type}"` : "",
|
|
161
171
|
tabindex ? `tabindex="${tabindex}"` : 'tabindex="0"',
|
|
162
172
|
btn ? 'role="button"' : "",
|
|
163
|
-
value ? `value=${value}` : ""
|
|
173
|
+
value ? `value=${value}` : "",
|
|
174
|
+
name ? `name=${name}` : ""
|
|
164
175
|
].filter(Boolean).join(" ");
|
|
165
|
-
|
|
166
|
-
${props}
|
|
167
|
-
/>`;
|
|
176
|
+
return `<input ${props} />`;
|
|
168
177
|
}
|
|
169
178
|
}
|
|
170
179
|
//# sourceMappingURL=index.cjs.map
|
package/dist/index.cjs.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../src/index.ts"],
|
|
4
|
-
"sourcesContent": ["export abstract class Input extends HTMLElement {\n // Define the attributes to observe\n // need this for `attributeChangedCallback`\n static observedAttributes = ['autofocus', 'disabled', 'spinning']\n static tag:string\n\n static define (this:((new (...args:any[]) => Input) & typeof Input)) {\n if (!('customElements' in window)) return\n if (customElements.get(this.tag)) return // only define it once\n\n return customElements.define(this.tag, this)\n }\n\n constructor () {\n super()\n const disabled = this.getAttribute('disabled')\n if (disabled !== null) {\n setTimeout(() => {\n // need to wait for it to render\n this.disabled = true\n }, 0)\n }\n\n // timeout b/c we need to render first\n setTimeout(() => {\n const attr = this.getAttribute('value')\n if (attr) this.value = attr\n\n const type = this.getAttribute('type')\n if (type) this.type = type\n }, 0)\n }\n\n get input ():HTMLInputElement|null {\n return this.querySelector('input')\n }\n\n get tabindex ():number {\n const i = this.input?.getAttribute('tabindex')\n if (!i) return 0\n return parseInt(i)\n }\n\n /**\n * Remove from `this` element and also child.\n */\n _removeAttribute (name:string) {\n this.removeAttribute(name)\n this.input?.removeAttribute(name)\n }\n\n get disabled ():boolean {\n return !!(this.input?.hasAttribute('disabled'))\n }\n\n set disabled (disabledValue:boolean) {\n if (!disabledValue) {\n this._removeAttribute('disabled')\n this.input?.setAttribute('aria-disabled', 'false')\n } else {\n this.input?.setAttribute('disabled', '')\n this.input?.setAttribute('aria-disabled', 'true')\n }\n }\n\n /**\n * Handle 'example' attribute changes\n * @see {@link https://gomakethings.com/how-to-detect-when-attributes-change-on-a-web-component/#organizing-your-code Go Make Things article}\n *\n * @param {string} oldValue The old attribute value\n * @param {string} newValue The new attribute value\n */\n handleChange_disabled (oldValue:string, newValue:string) {\n if (!this.input) {\n setTimeout(() => {\n if (newValue === null) {\n // [example] was removed\n this.disabled = false\n } else {\n // set [example] attribute\n this.disabled = true\n }\n }, 0) // wait to render\n } else {\n if (newValue === null) {\n this.disabled = false\n } else {\n this.disabled = true\n }\n }\n }\n\n /**\n * Runs when the value of an attribute is changed\n *\n * @param {string} name The attribute name\n * @param {string} oldValue The old attribute value\n * @param {string} newValue The new attribute value\n */\n attributeChangedCallback (name:string, oldValue:string, newValue:string) {\n const handler = this[`handleChange_${name}`];\n (handler && handler.call(this, oldValue, newValue))\n this.render()\n }\n\n connectedCallback () {\n this.render()\n }\n\n get type ():string|null|undefined {\n return this.input?.getAttribute('type')\n }\n\n set type (value:string) {\n this._setAttribute('type', value)\n }\n\n get value () {\n return this.input?.value\n }\n\n set value (text:string|undefined|null) {\n if (!text) this.input?.removeAttribute('value')\n else {\n this.input!.value = text\n }\n }\n\n /**\n * Set attributes on the internal input element.\n */\n _setAttribute (name:string, value:boolean|string|null):void {\n if (!value) {\n return this._removeAttribute(name)\n }\n\n if (value === true) {\n // true means set the attribute with no value\n return this.input?.setAttribute(name, '')\n }\n\n // else, set the value\n this.input?.setAttribute(name, value)\n }\n\n render () {\n const {\n type,\n autofocus,\n tabindex,\n disabled,\n value\n } = this\n\n const classes:string[] = ['substrate-input']\n\n const btn = !!(this.type === 'submit' || this.type === 'button')\n\n const props = ([\n `class=\"${classes.filter(Boolean).join(' ')}\"`,\n disabled ? 'disabled' : '',\n autofocus ? 'autofocus' : '',\n type ? `type=\"${this.type}\"` : '',\n tabindex ? `tabindex=\"${tabindex}\"` : 'tabindex=\"0\"',\n btn ? 'role=\"button\"' : '',\n value ? `value=${value}` : ''
|
|
5
|
-
"mappings": "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
|
|
4
|
+
"sourcesContent": ["export abstract class Input extends HTMLElement {\n // Define the attributes to observe\n // need this for `attributeChangedCallback`\n static observedAttributes = ['autofocus', 'disabled', 'spinning']\n static tag:string\n\n static define (this:((new (...args:any[]) => Input) & typeof Input)) {\n if (!('customElements' in window)) return\n if (customElements.get(this.tag)) return // only define it once\n\n return customElements.define(this.tag, this)\n }\n\n constructor () {\n super()\n const disabled = this.getAttribute('disabled')\n if (disabled !== null) {\n setTimeout(() => {\n // need to wait for it to render\n this.disabled = true\n }, 0)\n }\n\n // timeout b/c we need to render first\n setTimeout(() => {\n const attr = this.getAttribute('value')\n if (attr) this.value = attr\n\n const type = this.getAttribute('type')\n if (type) this.type = type\n\n const name = this.getAttribute('name')\n if (name) this.name = name\n }, 0)\n }\n\n get input ():HTMLInputElement|null {\n return this.querySelector('input')\n }\n\n get tabindex ():number {\n const i = this.input?.getAttribute('tabindex')\n if (!i) return 0\n return parseInt(i)\n }\n\n get name ():string|undefined {\n return this.input?.name\n }\n\n set name (newName:string) {\n if (!this.input) throw new Error('not input')\n this.input.name = newName\n }\n\n /**\n * Remove from `this` element and also child.\n */\n _removeAttribute (name:string) {\n this.removeAttribute(name)\n this.input?.removeAttribute(name)\n }\n\n get disabled ():boolean {\n return !!(this.input?.hasAttribute('disabled'))\n }\n\n set disabled (disabledValue:boolean) {\n if (!disabledValue) {\n this._removeAttribute('disabled')\n this.input?.setAttribute('aria-disabled', 'false')\n } else {\n this.input?.setAttribute('disabled', '')\n this.input?.setAttribute('aria-disabled', 'true')\n }\n }\n\n /**\n * Handle 'example' attribute changes\n * @see {@link https://gomakethings.com/how-to-detect-when-attributes-change-on-a-web-component/#organizing-your-code Go Make Things article}\n *\n * @param {string} oldValue The old attribute value\n * @param {string} newValue The new attribute value\n */\n handleChange_disabled (oldValue:string, newValue:string) {\n if (!this.input) {\n setTimeout(() => {\n if (newValue === null) {\n // [example] was removed\n this.disabled = false\n } else {\n // set [example] attribute\n this.disabled = true\n }\n }, 0) // wait to render\n } else {\n if (newValue === null) {\n this.disabled = false\n } else {\n this.disabled = true\n }\n }\n }\n\n /**\n * Runs when the value of an attribute is changed\n *\n * @param {string} name The attribute name\n * @param {string} oldValue The old attribute value\n * @param {string} newValue The new attribute value\n */\n attributeChangedCallback (name:string, oldValue:string, newValue:string) {\n const handler = this[`handleChange_${name}`];\n (handler && handler.call(this, oldValue, newValue))\n this.render()\n }\n\n connectedCallback () {\n this.render()\n }\n\n get type ():string|null|undefined {\n return this.input?.getAttribute('type')\n }\n\n set type (value:string) {\n this._setAttribute('type', value)\n }\n\n get value () {\n return this.input?.value\n }\n\n set value (text:string|undefined|null) {\n if (!text) this.input?.removeAttribute('value')\n else {\n this.input!.value = text\n }\n }\n\n /**\n * Set attributes on the internal input element.\n */\n _setAttribute (name:string, value:boolean|string|null):void {\n if (!value) {\n return this._removeAttribute(name)\n }\n\n if (value === true) {\n // true means set the attribute with no value\n return this.input?.setAttribute(name, '')\n }\n\n // else, set the value\n this.input?.setAttribute(name, value)\n }\n\n render ():string|void {\n const {\n type,\n autofocus,\n tabindex,\n disabled,\n value,\n name\n } = this\n\n const classes:string[] = ['substrate-input']\n\n const btn = !!(this.type === 'submit' || this.type === 'button')\n\n const props = ([\n `class=\"${classes.filter(Boolean).join(' ')}\"`,\n disabled ? 'disabled' : '',\n autofocus ? 'autofocus' : '',\n type ? `type=\"${this.type}\"` : '',\n tabindex ? `tabindex=\"${tabindex}\"` : 'tabindex=\"0\"',\n btn ? 'role=\"button\"' : '',\n value ? `value=${value}` : '',\n name ? `name=${name}` : '',\n ]).filter(Boolean).join(' ')\n\n return `<input ${props} />`\n }\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/index.d.ts
CHANGED
|
@@ -5,6 +5,8 @@ export declare abstract class Input extends HTMLElement {
|
|
|
5
5
|
constructor();
|
|
6
6
|
get input(): HTMLInputElement | null;
|
|
7
7
|
get tabindex(): number;
|
|
8
|
+
get name(): string | undefined;
|
|
9
|
+
set name(newName: string);
|
|
8
10
|
/**
|
|
9
11
|
* Remove from `this` element and also child.
|
|
10
12
|
*/
|
|
@@ -36,6 +38,6 @@ export declare abstract class Input extends HTMLElement {
|
|
|
36
38
|
* Set attributes on the internal input element.
|
|
37
39
|
*/
|
|
38
40
|
_setAttribute(name: string, value: boolean | string | null): void;
|
|
39
|
-
render(): void;
|
|
41
|
+
render(): string | void;
|
|
40
42
|
}
|
|
41
43
|
//# sourceMappingURL=index.d.ts.map
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,8BAAsB,KAAM,SAAQ,WAAW;IAG3C,MAAM,CAAC,kBAAkB,WAAwC;IACjE,MAAM,CAAC,GAAG,EAAC,MAAM,CAAA;IAEjB,MAAM,CAAC,MAAM,CAAE,IAAI,EAAC,CAAC,CAAC,KAAK,GAAG,IAAI,EAAC,GAAG,EAAE,KAAK,KAAK,CAAC,GAAG,OAAO,KAAK,CAAC;;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,8BAAsB,KAAM,SAAQ,WAAW;IAG3C,MAAM,CAAC,kBAAkB,WAAwC;IACjE,MAAM,CAAC,GAAG,EAAC,MAAM,CAAA;IAEjB,MAAM,CAAC,MAAM,CAAE,IAAI,EAAC,CAAC,CAAC,KAAK,GAAG,IAAI,EAAC,GAAG,EAAE,KAAK,KAAK,CAAC,GAAG,OAAO,KAAK,CAAC;;IA8BnE,IAAI,KAAK,IAAI,gBAAgB,GAAC,IAAI,CAEjC;IAED,IAAI,QAAQ,IAAI,MAAM,CAIrB;IAED,IAAI,IAAI,IAAI,MAAM,GAAC,SAAS,CAE3B;IAED,IAAI,IAAI,CAAE,OAAO,EAAC,MAAM,EAGvB;IAED;;OAEG;IACH,gBAAgB,CAAE,IAAI,EAAC,MAAM;IAK7B,IAAI,QAAQ,IAAI,OAAO,CAEtB;IAED,IAAI,QAAQ,CAAE,aAAa,EAAC,OAAO,EAQlC;IAED;;;;;;OAMG;IACH,qBAAqB,CAAE,QAAQ,EAAC,MAAM,EAAE,QAAQ,EAAC,MAAM;IAoBvD;;;;;;OAMG;IACH,wBAAwB,CAAE,IAAI,EAAC,MAAM,EAAE,QAAQ,EAAC,MAAM,EAAE,QAAQ,EAAC,MAAM;IAMvE,iBAAiB;IAIjB,IAAI,IAAI,IAAI,MAAM,GAAC,IAAI,GAAC,SAAS,CAEhC;IAED,IAAI,IAAI,CAAE,KAAK,EAAC,MAAM,EAErB;IAED,IAAI,KAAK,IAIO,MAAM,GAAC,SAAS,GAAC,IAAI,CAFpC;IAED,IAAI,KAAK,CAAE,IAAI,EAAC,MAAM,GAAC,SAAS,GAAC,IAAI,EAKpC;IAED;;OAEG;IACH,aAAa,CAAE,IAAI,EAAC,MAAM,EAAE,KAAK,EAAC,OAAO,GAAC,MAAM,GAAC,IAAI,GAAE,IAAI;IAc3D,MAAM,IAAI,MAAM,GAAC,IAAI;CA2BxB"}
|
package/dist/index.js
CHANGED
|
@@ -26,6 +26,8 @@ class Input extends HTMLElement {
|
|
|
26
26
|
if (attr) this.value = attr;
|
|
27
27
|
const type = this.getAttribute("type");
|
|
28
28
|
if (type) this.type = type;
|
|
29
|
+
const name = this.getAttribute("name");
|
|
30
|
+
if (name) this.name = name;
|
|
29
31
|
}, 0);
|
|
30
32
|
}
|
|
31
33
|
get input() {
|
|
@@ -36,6 +38,13 @@ class Input extends HTMLElement {
|
|
|
36
38
|
if (!i) return 0;
|
|
37
39
|
return parseInt(i);
|
|
38
40
|
}
|
|
41
|
+
get name() {
|
|
42
|
+
return this.input?.name;
|
|
43
|
+
}
|
|
44
|
+
set name(newName) {
|
|
45
|
+
if (!this.input) throw new Error("not input");
|
|
46
|
+
this.input.name = newName;
|
|
47
|
+
}
|
|
39
48
|
/**
|
|
40
49
|
* Remove from `this` element and also child.
|
|
41
50
|
*/
|
|
@@ -127,7 +136,8 @@ class Input extends HTMLElement {
|
|
|
127
136
|
autofocus,
|
|
128
137
|
tabindex,
|
|
129
138
|
disabled,
|
|
130
|
-
value
|
|
139
|
+
value,
|
|
140
|
+
name
|
|
131
141
|
} = this;
|
|
132
142
|
const classes = ["substrate-input"];
|
|
133
143
|
const btn = !!(this.type === "submit" || this.type === "button");
|
|
@@ -138,11 +148,10 @@ class Input extends HTMLElement {
|
|
|
138
148
|
type ? `type="${this.type}"` : "",
|
|
139
149
|
tabindex ? `tabindex="${tabindex}"` : 'tabindex="0"',
|
|
140
150
|
btn ? 'role="button"' : "",
|
|
141
|
-
value ? `value=${value}` : ""
|
|
151
|
+
value ? `value=${value}` : "",
|
|
152
|
+
name ? `name=${name}` : ""
|
|
142
153
|
].filter(Boolean).join(" ");
|
|
143
|
-
|
|
144
|
-
${props}
|
|
145
|
-
/>`;
|
|
154
|
+
return `<input ${props} />`;
|
|
146
155
|
}
|
|
147
156
|
}
|
|
148
157
|
export {
|
package/dist/index.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../src/index.ts"],
|
|
4
|
-
"sourcesContent": ["export abstract class Input extends HTMLElement {\n // Define the attributes to observe\n // need this for `attributeChangedCallback`\n static observedAttributes = ['autofocus', 'disabled', 'spinning']\n static tag:string\n\n static define (this:((new (...args:any[]) => Input) & typeof Input)) {\n if (!('customElements' in window)) return\n if (customElements.get(this.tag)) return // only define it once\n\n return customElements.define(this.tag, this)\n }\n\n constructor () {\n super()\n const disabled = this.getAttribute('disabled')\n if (disabled !== null) {\n setTimeout(() => {\n // need to wait for it to render\n this.disabled = true\n }, 0)\n }\n\n // timeout b/c we need to render first\n setTimeout(() => {\n const attr = this.getAttribute('value')\n if (attr) this.value = attr\n\n const type = this.getAttribute('type')\n if (type) this.type = type\n }, 0)\n }\n\n get input ():HTMLInputElement|null {\n return this.querySelector('input')\n }\n\n get tabindex ():number {\n const i = this.input?.getAttribute('tabindex')\n if (!i) return 0\n return parseInt(i)\n }\n\n /**\n * Remove from `this` element and also child.\n */\n _removeAttribute (name:string) {\n this.removeAttribute(name)\n this.input?.removeAttribute(name)\n }\n\n get disabled ():boolean {\n return !!(this.input?.hasAttribute('disabled'))\n }\n\n set disabled (disabledValue:boolean) {\n if (!disabledValue) {\n this._removeAttribute('disabled')\n this.input?.setAttribute('aria-disabled', 'false')\n } else {\n this.input?.setAttribute('disabled', '')\n this.input?.setAttribute('aria-disabled', 'true')\n }\n }\n\n /**\n * Handle 'example' attribute changes\n * @see {@link https://gomakethings.com/how-to-detect-when-attributes-change-on-a-web-component/#organizing-your-code Go Make Things article}\n *\n * @param {string} oldValue The old attribute value\n * @param {string} newValue The new attribute value\n */\n handleChange_disabled (oldValue:string, newValue:string) {\n if (!this.input) {\n setTimeout(() => {\n if (newValue === null) {\n // [example] was removed\n this.disabled = false\n } else {\n // set [example] attribute\n this.disabled = true\n }\n }, 0) // wait to render\n } else {\n if (newValue === null) {\n this.disabled = false\n } else {\n this.disabled = true\n }\n }\n }\n\n /**\n * Runs when the value of an attribute is changed\n *\n * @param {string} name The attribute name\n * @param {string} oldValue The old attribute value\n * @param {string} newValue The new attribute value\n */\n attributeChangedCallback (name:string, oldValue:string, newValue:string) {\n const handler = this[`handleChange_${name}`];\n (handler && handler.call(this, oldValue, newValue))\n this.render()\n }\n\n connectedCallback () {\n this.render()\n }\n\n get type ():string|null|undefined {\n return this.input?.getAttribute('type')\n }\n\n set type (value:string) {\n this._setAttribute('type', value)\n }\n\n get value () {\n return this.input?.value\n }\n\n set value (text:string|undefined|null) {\n if (!text) this.input?.removeAttribute('value')\n else {\n this.input!.value = text\n }\n }\n\n /**\n * Set attributes on the internal input element.\n */\n _setAttribute (name:string, value:boolean|string|null):void {\n if (!value) {\n return this._removeAttribute(name)\n }\n\n if (value === true) {\n // true means set the attribute with no value\n return this.input?.setAttribute(name, '')\n }\n\n // else, set the value\n this.input?.setAttribute(name, value)\n }\n\n render () {\n const {\n type,\n autofocus,\n tabindex,\n disabled,\n value\n } = this\n\n const classes:string[] = ['substrate-input']\n\n const btn = !!(this.type === 'submit' || this.type === 'button')\n\n const props = ([\n `class=\"${classes.filter(Boolean).join(' ')}\"`,\n disabled ? 'disabled' : '',\n autofocus ? 'autofocus' : '',\n type ? `type=\"${this.type}\"` : '',\n tabindex ? `tabindex=\"${tabindex}\"` : 'tabindex=\"0\"',\n btn ? 'role=\"button\"' : '',\n value ? `value=${value}` : ''
|
|
5
|
-
"mappings": "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
|
|
4
|
+
"sourcesContent": ["export abstract class Input extends HTMLElement {\n // Define the attributes to observe\n // need this for `attributeChangedCallback`\n static observedAttributes = ['autofocus', 'disabled', 'spinning']\n static tag:string\n\n static define (this:((new (...args:any[]) => Input) & typeof Input)) {\n if (!('customElements' in window)) return\n if (customElements.get(this.tag)) return // only define it once\n\n return customElements.define(this.tag, this)\n }\n\n constructor () {\n super()\n const disabled = this.getAttribute('disabled')\n if (disabled !== null) {\n setTimeout(() => {\n // need to wait for it to render\n this.disabled = true\n }, 0)\n }\n\n // timeout b/c we need to render first\n setTimeout(() => {\n const attr = this.getAttribute('value')\n if (attr) this.value = attr\n\n const type = this.getAttribute('type')\n if (type) this.type = type\n\n const name = this.getAttribute('name')\n if (name) this.name = name\n }, 0)\n }\n\n get input ():HTMLInputElement|null {\n return this.querySelector('input')\n }\n\n get tabindex ():number {\n const i = this.input?.getAttribute('tabindex')\n if (!i) return 0\n return parseInt(i)\n }\n\n get name ():string|undefined {\n return this.input?.name\n }\n\n set name (newName:string) {\n if (!this.input) throw new Error('not input')\n this.input.name = newName\n }\n\n /**\n * Remove from `this` element and also child.\n */\n _removeAttribute (name:string) {\n this.removeAttribute(name)\n this.input?.removeAttribute(name)\n }\n\n get disabled ():boolean {\n return !!(this.input?.hasAttribute('disabled'))\n }\n\n set disabled (disabledValue:boolean) {\n if (!disabledValue) {\n this._removeAttribute('disabled')\n this.input?.setAttribute('aria-disabled', 'false')\n } else {\n this.input?.setAttribute('disabled', '')\n this.input?.setAttribute('aria-disabled', 'true')\n }\n }\n\n /**\n * Handle 'example' attribute changes\n * @see {@link https://gomakethings.com/how-to-detect-when-attributes-change-on-a-web-component/#organizing-your-code Go Make Things article}\n *\n * @param {string} oldValue The old attribute value\n * @param {string} newValue The new attribute value\n */\n handleChange_disabled (oldValue:string, newValue:string) {\n if (!this.input) {\n setTimeout(() => {\n if (newValue === null) {\n // [example] was removed\n this.disabled = false\n } else {\n // set [example] attribute\n this.disabled = true\n }\n }, 0) // wait to render\n } else {\n if (newValue === null) {\n this.disabled = false\n } else {\n this.disabled = true\n }\n }\n }\n\n /**\n * Runs when the value of an attribute is changed\n *\n * @param {string} name The attribute name\n * @param {string} oldValue The old attribute value\n * @param {string} newValue The new attribute value\n */\n attributeChangedCallback (name:string, oldValue:string, newValue:string) {\n const handler = this[`handleChange_${name}`];\n (handler && handler.call(this, oldValue, newValue))\n this.render()\n }\n\n connectedCallback () {\n this.render()\n }\n\n get type ():string|null|undefined {\n return this.input?.getAttribute('type')\n }\n\n set type (value:string) {\n this._setAttribute('type', value)\n }\n\n get value () {\n return this.input?.value\n }\n\n set value (text:string|undefined|null) {\n if (!text) this.input?.removeAttribute('value')\n else {\n this.input!.value = text\n }\n }\n\n /**\n * Set attributes on the internal input element.\n */\n _setAttribute (name:string, value:boolean|string|null):void {\n if (!value) {\n return this._removeAttribute(name)\n }\n\n if (value === true) {\n // true means set the attribute with no value\n return this.input?.setAttribute(name, '')\n }\n\n // else, set the value\n this.input?.setAttribute(name, value)\n }\n\n render ():string|void {\n const {\n type,\n autofocus,\n tabindex,\n disabled,\n value,\n name\n } = this\n\n const classes:string[] = ['substrate-input']\n\n const btn = !!(this.type === 'submit' || this.type === 'button')\n\n const props = ([\n `class=\"${classes.filter(Boolean).join(' ')}\"`,\n disabled ? 'disabled' : '',\n autofocus ? 'autofocus' : '',\n type ? `type=\"${this.type}\"` : '',\n tabindex ? `tabindex=\"${tabindex}\"` : 'tabindex=\"0\"',\n btn ? 'role=\"button\"' : '',\n value ? `value=${value}` : '',\n name ? `name=${name}` : '',\n ]).filter(Boolean).join(' ')\n\n return `<input ${props} />`\n }\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/index.min.js
CHANGED
|
@@ -1,4 +1,2 @@
|
|
|
1
|
-
var o=Object.defineProperty;var
|
|
2
|
-
${b}
|
|
3
|
-
/>`}};export{l as Input};
|
|
1
|
+
var o=Object.defineProperty;var a=(n,t)=>o(n,"name",{value:t,configurable:!0});var l=class extends HTMLElement{static{a(this,"Input")}static observedAttributes=["autofocus","disabled","spinning"];static tag;static define(){if("customElements"in window&&!customElements.get(this.tag))return customElements.define(this.tag,this)}constructor(){super(),this.getAttribute("disabled")!==null&&setTimeout(()=>{this.disabled=!0},0),setTimeout(()=>{let e=this.getAttribute("value");e&&(this.value=e);let i=this.getAttribute("type");i&&(this.type=i);let s=this.getAttribute("name");s&&(this.name=s)},0)}get input(){return this.querySelector("input")}get tabindex(){let t=this.input?.getAttribute("tabindex");return t?parseInt(t):0}get name(){return this.input?.name}set name(t){if(!this.input)throw new Error("not input");this.input.name=t}_removeAttribute(t){this.removeAttribute(t),this.input?.removeAttribute(t)}get disabled(){return!!this.input?.hasAttribute("disabled")}set disabled(t){t?(this.input?.setAttribute("disabled",""),this.input?.setAttribute("aria-disabled","true")):(this._removeAttribute("disabled"),this.input?.setAttribute("aria-disabled","false"))}handleChange_disabled(t,e){this.input?e===null?this.disabled=!1:this.disabled=!0:setTimeout(()=>{e===null?this.disabled=!1:this.disabled=!0},0)}attributeChangedCallback(t,e,i){let s=this[`handleChange_${t}`];s&&s.call(this,e,i),this.render()}connectedCallback(){this.render()}get type(){return this.input?.getAttribute("type")}set type(t){this._setAttribute("type",t)}get value(){return this.input?.value}set value(t){t?this.input.value=t:this.input?.removeAttribute("value")}_setAttribute(t,e){if(!e)return this._removeAttribute(t);if(e===!0)return this.input?.setAttribute(t,"");this.input?.setAttribute(t,e)}render(){let{type:t,autofocus:e,tabindex:i,disabled:s,value:r,name:u}=this,d=["substrate-input"],b=this.type==="submit"||this.type==="button";return`<input ${[`class="${d.filter(Boolean).join(" ")}"`,s?"disabled":"",e?"autofocus":"",t?`type="${this.type}"`:"",i?`tabindex="${i}"`:'tabindex="0"',b?'role="button"':"",r?`value=${r}`:"",u?`name=${u}`:""].filter(Boolean).join(" ")} />`}};export{l as Input};
|
|
4
2
|
//# sourceMappingURL=index.min.js.map
|
package/dist/index.min.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../src/index.ts"],
|
|
4
|
-
"sourcesContent": ["export abstract class Input extends HTMLElement {\n // Define the attributes to observe\n // need this for `attributeChangedCallback`\n static observedAttributes = ['autofocus', 'disabled', 'spinning']\n static tag:string\n\n static define (this:((new (...args:any[]) => Input) & typeof Input)) {\n if (!('customElements' in window)) return\n if (customElements.get(this.tag)) return // only define it once\n\n return customElements.define(this.tag, this)\n }\n\n constructor () {\n super()\n const disabled = this.getAttribute('disabled')\n if (disabled !== null) {\n setTimeout(() => {\n // need to wait for it to render\n this.disabled = true\n }, 0)\n }\n\n // timeout b/c we need to render first\n setTimeout(() => {\n const attr = this.getAttribute('value')\n if (attr) this.value = attr\n\n const type = this.getAttribute('type')\n if (type) this.type = type\n }, 0)\n }\n\n get input ():HTMLInputElement|null {\n return this.querySelector('input')\n }\n\n get tabindex ():number {\n const i = this.input?.getAttribute('tabindex')\n if (!i) return 0\n return parseInt(i)\n }\n\n /**\n * Remove from `this` element and also child.\n */\n _removeAttribute (name:string) {\n this.removeAttribute(name)\n this.input?.removeAttribute(name)\n }\n\n get disabled ():boolean {\n return !!(this.input?.hasAttribute('disabled'))\n }\n\n set disabled (disabledValue:boolean) {\n if (!disabledValue) {\n this._removeAttribute('disabled')\n this.input?.setAttribute('aria-disabled', 'false')\n } else {\n this.input?.setAttribute('disabled', '')\n this.input?.setAttribute('aria-disabled', 'true')\n }\n }\n\n /**\n * Handle 'example' attribute changes\n * @see {@link https://gomakethings.com/how-to-detect-when-attributes-change-on-a-web-component/#organizing-your-code Go Make Things article}\n *\n * @param {string} oldValue The old attribute value\n * @param {string} newValue The new attribute value\n */\n handleChange_disabled (oldValue:string, newValue:string) {\n if (!this.input) {\n setTimeout(() => {\n if (newValue === null) {\n // [example] was removed\n this.disabled = false\n } else {\n // set [example] attribute\n this.disabled = true\n }\n }, 0) // wait to render\n } else {\n if (newValue === null) {\n this.disabled = false\n } else {\n this.disabled = true\n }\n }\n }\n\n /**\n * Runs when the value of an attribute is changed\n *\n * @param {string} name The attribute name\n * @param {string} oldValue The old attribute value\n * @param {string} newValue The new attribute value\n */\n attributeChangedCallback (name:string, oldValue:string, newValue:string) {\n const handler = this[`handleChange_${name}`];\n (handler && handler.call(this, oldValue, newValue))\n this.render()\n }\n\n connectedCallback () {\n this.render()\n }\n\n get type ():string|null|undefined {\n return this.input?.getAttribute('type')\n }\n\n set type (value:string) {\n this._setAttribute('type', value)\n }\n\n get value () {\n return this.input?.value\n }\n\n set value (text:string|undefined|null) {\n if (!text) this.input?.removeAttribute('value')\n else {\n this.input!.value = text\n }\n }\n\n /**\n * Set attributes on the internal input element.\n */\n _setAttribute (name:string, value:boolean|string|null):void {\n if (!value) {\n return this._removeAttribute(name)\n }\n\n if (value === true) {\n // true means set the attribute with no value\n return this.input?.setAttribute(name, '')\n }\n\n // else, set the value\n this.input?.setAttribute(name, value)\n }\n\n render () {\n const {\n type,\n autofocus,\n tabindex,\n disabled,\n value\n } = this\n\n const classes:string[] = ['substrate-input']\n\n const btn = !!(this.type === 'submit' || this.type === 'button')\n\n const props = ([\n `class=\"${classes.filter(Boolean).join(' ')}\"`,\n disabled ? 'disabled' : '',\n autofocus ? 'autofocus' : '',\n type ? `type=\"${this.type}\"` : '',\n tabindex ? `tabindex=\"${tabindex}\"` : 'tabindex=\"0\"',\n btn ? 'role=\"button\"' : '',\n value ? `value=${value}` : ''
|
|
5
|
-
"mappings": "+EAAO,IAAeA,EAAf,cAA6B,WAAY,CAAhD,MAAgD,CAAAC,EAAA,cAG5C,OAAO,mBAAqB,CAAC,YAAa,WAAY,UAAU,EAChE,OAAO,IAEP,OAAO,QAA8D,CACjE,GAAM,mBAAoB,QACtB,gBAAe,IAAI,KAAK,GAAG,EAE/B,OAAO,eAAe,OAAO,KAAK,IAAK,IAAI,CAC/C,CAEA,aAAe,CACX,MAAM,EACW,KAAK,aAAa,UAAU,IAC5B,MACb,WAAW,IAAM,CAEb,KAAK,SAAW,EACpB,EAAG,CAAC,EAIR,WAAW,IAAM,CACb,IAAMC,EAAO,KAAK,aAAa,OAAO,EAClCA,IAAM,KAAK,MAAQA,GAEvB,IAAMC,EAAO,KAAK,aAAa,MAAM,EACjCA,IAAM,KAAK,KAAOA,EAC1B,EAAG,CAAC,CACR,CAEA,IAAI,OAA+B,CAC/B,OAAO,KAAK,cAAc,OAAO,CACrC,CAEA,IAAI,UAAmB,CACnB,IAAMC,EAAI,KAAK,OAAO,aAAa,UAAU,EAC7C,OAAKA,EACE,SAASA,CAAC,EADF,CAEnB,CAKA,
|
|
6
|
-
"names": ["Input", "__name", "attr", "type", "i", "
|
|
4
|
+
"sourcesContent": ["export abstract class Input extends HTMLElement {\n // Define the attributes to observe\n // need this for `attributeChangedCallback`\n static observedAttributes = ['autofocus', 'disabled', 'spinning']\n static tag:string\n\n static define (this:((new (...args:any[]) => Input) & typeof Input)) {\n if (!('customElements' in window)) return\n if (customElements.get(this.tag)) return // only define it once\n\n return customElements.define(this.tag, this)\n }\n\n constructor () {\n super()\n const disabled = this.getAttribute('disabled')\n if (disabled !== null) {\n setTimeout(() => {\n // need to wait for it to render\n this.disabled = true\n }, 0)\n }\n\n // timeout b/c we need to render first\n setTimeout(() => {\n const attr = this.getAttribute('value')\n if (attr) this.value = attr\n\n const type = this.getAttribute('type')\n if (type) this.type = type\n\n const name = this.getAttribute('name')\n if (name) this.name = name\n }, 0)\n }\n\n get input ():HTMLInputElement|null {\n return this.querySelector('input')\n }\n\n get tabindex ():number {\n const i = this.input?.getAttribute('tabindex')\n if (!i) return 0\n return parseInt(i)\n }\n\n get name ():string|undefined {\n return this.input?.name\n }\n\n set name (newName:string) {\n if (!this.input) throw new Error('not input')\n this.input.name = newName\n }\n\n /**\n * Remove from `this` element and also child.\n */\n _removeAttribute (name:string) {\n this.removeAttribute(name)\n this.input?.removeAttribute(name)\n }\n\n get disabled ():boolean {\n return !!(this.input?.hasAttribute('disabled'))\n }\n\n set disabled (disabledValue:boolean) {\n if (!disabledValue) {\n this._removeAttribute('disabled')\n this.input?.setAttribute('aria-disabled', 'false')\n } else {\n this.input?.setAttribute('disabled', '')\n this.input?.setAttribute('aria-disabled', 'true')\n }\n }\n\n /**\n * Handle 'example' attribute changes\n * @see {@link https://gomakethings.com/how-to-detect-when-attributes-change-on-a-web-component/#organizing-your-code Go Make Things article}\n *\n * @param {string} oldValue The old attribute value\n * @param {string} newValue The new attribute value\n */\n handleChange_disabled (oldValue:string, newValue:string) {\n if (!this.input) {\n setTimeout(() => {\n if (newValue === null) {\n // [example] was removed\n this.disabled = false\n } else {\n // set [example] attribute\n this.disabled = true\n }\n }, 0) // wait to render\n } else {\n if (newValue === null) {\n this.disabled = false\n } else {\n this.disabled = true\n }\n }\n }\n\n /**\n * Runs when the value of an attribute is changed\n *\n * @param {string} name The attribute name\n * @param {string} oldValue The old attribute value\n * @param {string} newValue The new attribute value\n */\n attributeChangedCallback (name:string, oldValue:string, newValue:string) {\n const handler = this[`handleChange_${name}`];\n (handler && handler.call(this, oldValue, newValue))\n this.render()\n }\n\n connectedCallback () {\n this.render()\n }\n\n get type ():string|null|undefined {\n return this.input?.getAttribute('type')\n }\n\n set type (value:string) {\n this._setAttribute('type', value)\n }\n\n get value () {\n return this.input?.value\n }\n\n set value (text:string|undefined|null) {\n if (!text) this.input?.removeAttribute('value')\n else {\n this.input!.value = text\n }\n }\n\n /**\n * Set attributes on the internal input element.\n */\n _setAttribute (name:string, value:boolean|string|null):void {\n if (!value) {\n return this._removeAttribute(name)\n }\n\n if (value === true) {\n // true means set the attribute with no value\n return this.input?.setAttribute(name, '')\n }\n\n // else, set the value\n this.input?.setAttribute(name, value)\n }\n\n render ():string|void {\n const {\n type,\n autofocus,\n tabindex,\n disabled,\n value,\n name\n } = this\n\n const classes:string[] = ['substrate-input']\n\n const btn = !!(this.type === 'submit' || this.type === 'button')\n\n const props = ([\n `class=\"${classes.filter(Boolean).join(' ')}\"`,\n disabled ? 'disabled' : '',\n autofocus ? 'autofocus' : '',\n type ? `type=\"${this.type}\"` : '',\n tabindex ? `tabindex=\"${tabindex}\"` : 'tabindex=\"0\"',\n btn ? 'role=\"button\"' : '',\n value ? `value=${value}` : '',\n name ? `name=${name}` : '',\n ]).filter(Boolean).join(' ')\n\n return `<input ${props} />`\n }\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["Input", "__name", "attr", "type", "name", "i", "newName", "disabledValue", "oldValue", "newValue", "handler", "value", "text", "autofocus", "tabindex", "disabled", "classes", "btn"]
|
|
7
7
|
}
|
package/dist/meta.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"inputs": {
|
|
3
3
|
"src/index.ts": {
|
|
4
|
-
"bytes":
|
|
4
|
+
"bytes": 5271,
|
|
5
5
|
"imports": [],
|
|
6
6
|
"format": "esm"
|
|
7
7
|
}
|
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
"imports": [],
|
|
12
12
|
"exports": [],
|
|
13
13
|
"inputs": {},
|
|
14
|
-
"bytes":
|
|
14
|
+
"bytes": 8447
|
|
15
15
|
},
|
|
16
16
|
"dist/index.js": {
|
|
17
17
|
"imports": [],
|
|
@@ -21,10 +21,10 @@
|
|
|
21
21
|
"entryPoint": "src/index.ts",
|
|
22
22
|
"inputs": {
|
|
23
23
|
"src/index.ts": {
|
|
24
|
-
"bytesInOutput":
|
|
24
|
+
"bytesInOutput": 4120
|
|
25
25
|
}
|
|
26
26
|
},
|
|
27
|
-
"bytes":
|
|
27
|
+
"bytes": 4303
|
|
28
28
|
}
|
|
29
29
|
}
|
|
30
30
|
}
|