Skip to content

Commit e4de24c

Browse files
shgysk8zer0shgysk8zer0
authored
Merge pull request #20 from AegisJSProject/patch/updates
Update to latest dependencies
2 parents a3d1ebc + 12a558a commit e4de24c

10 files changed

Lines changed: 211 additions & 65 deletions

File tree

‎CHANGELOG.md‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,15 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
66

77
## [Unreleased]
88

9+
## [v0.1.2] - 2024-03-10
10+
11+
### Added
12+
- Add WIP Aegis Checkbox base class/component
13+
- Add Input Errors as static properties to base AegisInput
14+
15+
### Changed
16+
- Misc updates
17+
918
## [v0.1.1] - 2024-03-03
1019

1120
### Changed

‎checkbox.js‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import { AegisInput } from './input.js';
2+
import { SYMBOLS } from './consts.js';
3+
4+
const protectedData = new WeakMap();
5+
6+
function updateChecked(el) {
7+
const internals = protectedData.get(el).internals;
8+
9+
if (el.checked) {
10+
internals.ariaChecked = 'true';
11+
} else {
12+
internals.ariaChecked = 'false';
13+
14+
if (el.required) {
15+
internals.setValidity({
16+
valueMissing: true,
17+
}, 'This input is required');
18+
}
19+
}
20+
}
21+
22+
export class AegisCheckbox extends AegisInput {
23+
constructor(opts = {}) {
24+
super({ ...opts, role: 'checkbox' });
25+
console.warn(new Error('Aegis Checkbox components are still in development and should not be used.'));
26+
}
27+
28+
async [SYMBOLS.initialize](opts) {
29+
const { internals } = await super[SYMBOLS.initialize](opts);
30+
protectedData.set(this, { internals });
31+
}
32+
33+
attributeChangedCallback(name, oldValue, newValue) {
34+
if (name === 'checked') {
35+
updateChecked(this);
36+
} else {
37+
super.addtributeChangedCallback(name, oldValue, newValue);
38+
}
39+
}
40+
41+
get checked() {
42+
return this.hasAttribute('checked');
43+
}
44+
45+
set checked(val) {
46+
this.toggleAttribute('checked', val);
47+
}
48+
49+
static get observedAttributes() {
50+
return [...AegisInput.observedAttributes, 'checked'];
51+
}
52+
}

‎input.js‎

Lines changed: 49 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -15,12 +15,6 @@ import {
1515
StepMismatchError, BadInputError,
1616
} from './errors.js';
1717

18-
export const ERRORS = {
19-
AegisInputError, ValueMissingError, TypeMismatchError, PatternMismatchError,
20-
TooLongError, TooShortError, RangeUnderflowError, RangeOverflowError,
21-
StepMismatchError, BadInputError,
22-
};
23-
2418
/**
2519
* @see https://web.dev/articles/more-capable-form-controls
2620
*/
@@ -31,9 +25,7 @@ export class AegisInput extends AegisComponent {
3125
role = 'textbox',
3226
...rest
3327
} = {}) {
34-
if (! (this[SYMBOLS.sanitizeValue] instanceof Function)) {
35-
throw new Error(`${this.tagName.toLowerCase()} does not have a [${SYMBOLS.setValue.toString()}] method.`);
36-
} else if (! this[SYMBOLS.initialized]) {
28+
if (! this[SYMBOLS.initialized]) {
3729
const { shadow: s, internals: i } = await super[SYMBOLS.initialize]({
3830
role, ...rest,
3931
});
@@ -77,17 +69,19 @@ export class AegisInput extends AegisComponent {
7769
const { internals, shadow } = protectedData.get(this);
7870

7971
try {
80-
const result = await this[SYMBOLS.sanitizeValue]({ value, internals, shadow });
81-
this.#value = result;
82-
internals.setFormValue(result);
72+
const state = this[SYMBOLS.sanitizeValue] instanceof Function
73+
? await this[SYMBOLS.sanitizeValue]({ value, internals, shadow })
74+
: value;
75+
this.#value = state;
76+
internals.setFormValue(value, state);
8377
internals.setValidity({}, '');
8478
internals.ariaInvalid = 'false';
8579
internals.states.delete(STATES.invalid);
8680
internals.states.add(STATES.valid);
8781
this.removeAttribute('aria-errormessage');
8882

89-
if (typeof result === 'string') {
90-
internals.ariaValueNow = result;
83+
if (typeof value === 'string') {
84+
internals.ariaValueNow = value;
9185
}
9286

9387
this.dispatchEvent(new Event(EVENTS.valid));
@@ -204,4 +198,44 @@ export class AegisInput extends AegisComponent {
204198
static get observedAttributes() {
205199
return [...AegisComponent.observedAttributes, 'required', 'disabled', 'readonly'];
206200
}
207-
}
201+
202+
static get AegisInputError() {
203+
return AegisInputError;
204+
}
205+
206+
static get ValueMissingError() {
207+
return ValueMissingError;
208+
}
209+
210+
static get TypeMismatchError() {
211+
return TypeMismatchError;
212+
}
213+
214+
static get PatternMismatchError() {
215+
return PatternMismatchError;
216+
}
217+
218+
static get TooLongError() {
219+
return TooLongError;
220+
}
221+
222+
static get TooShortError() {
223+
return TooShortError;
224+
}
225+
226+
static get RangeUnderflowError() {
227+
return RangeUnderflowError;
228+
}
229+
230+
static get RangeOverflowError() {
231+
return RangeOverflowError;
232+
}
233+
234+
static get StepMismatchError() {
235+
return StepMismatchError;
236+
}
237+
238+
static get BadInputError() {
239+
return BadInputError;
240+
}
241+
}

‎package-lock.json‎

Lines changed: 9 additions & 9 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@aegisjsproject/component",
3-
"version": "0.1.1",
3+
"version": "0.1.2",
44
"description": "Base component using `@aegisjsproject/core` & `@aegisjsproject/styles`",
55
"keywords": [
66
"aegis",
@@ -96,7 +96,7 @@
9696
"rollup": "^4.9.6"
9797
},
9898
"dependencies": {
99-
"@aegisjsproject/core": "^0.1.2",
99+
"@aegisjsproject/core": "^0.1.4",
100100
"@aegisjsproject/styles": "^0.1.1"
101101
}
102102
}

‎test/components/checkbox-test.js‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import { AegisCheckbox } from '@aegisjsproject/component/checkbox.js';
2+
import { SYMBOLS } from '@aegisjsproject/component/consts.js';
3+
import { html } from '@aegisjsproject/core/parsers/html.js';
4+
import { css } from '@aegisjsproject/core/parsers/css.js';
5+
6+
const template = html`<slot name="tick"><span part="tick" class="tick"></span></slot>`;
7+
const styles = css`
8+
:host {
9+
display: inline-block;
10+
width: 24px;
11+
height: 24px;
12+
border: 6px solid black;
13+
border-radius: 4px;
14+
background-color: white;
15+
cursor: pointer;
16+
}
17+
18+
:host([disabled]), :host([readonly]) {
19+
cursor: auto;
20+
}
21+
22+
:host(:not([checked])) ::slotted([slot="tick"]), :host(:not([checked])) .tick {
23+
display: none;
24+
}
25+
26+
:host .tick {
27+
background-color: gray;
28+
display: inline-block;
29+
width: 100%;
30+
height: 100%;
31+
}`;
32+
33+
function toggleChecked({ type, key, currentTarget }) {
34+
if (! (currentTarget.disabled || currentTarget.readOnly || (type === 'keydown' && key !== ' '))) {
35+
currentTarget.checked = ! currentTarget.checked;
36+
}
37+
}
38+
39+
export class CheckboxTest extends AegisCheckbox {
40+
constructor() {
41+
super({ template, styles });
42+
this.addEventListener('click', toggleChecked);
43+
this.addEventListener('keydown', toggleChecked);
44+
this.tabIndex = '0';
45+
}
46+
47+
async [SYMBOLS.render](type, data) {
48+
console.log({ el: this, type, ...data });
49+
}
50+
}
51+
52+
CheckboxTest.register('checkbox-test');

‎test/components/dad-joke-html.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { html } from '@aegisjsproject/core/parsers/html.js';
2-
import { EVENTS, AEGIS_EVENT_HANDLER_CLASS } from '@aegisjsproject/core/events.js';
2+
import { EVENTS } from '@aegisjsproject/core/events.js';
33
import { registerCallback } from '@aegisjsproject/core/callbackRegistry.js';
44
import { updateIcon } from '../icons.js';
55

@@ -9,7 +9,7 @@ const template = html`<div part="container">
99
<div part="joke">
1010
<slot name="joke">Loading...</slot>
1111
</div>
12-
<button type="button" id="update-btn" ${EVENTS.onClick}="${update}" class="btn btn-primary ${AEGIS_EVENT_HANDLER_CLASS}" part="btn" autofocus="">
12+
<button type="button" id="update-btn" ${EVENTS.onClick}="${update}" class="btn btn-primary" part="btn" autofocus="">
1313
<span>Get new Dad Joke</span>
1414
</button>
1515
</div>`;

‎test/components/input-test.js‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,16 @@
11
import { AegisInput } from '@aegisjsproject/component/input.js';
2-
import {
3-
ValueMissingError, TypeMismatchError, TooLongError,
4-
TooShortError,
5-
} from '@aegisjsproject/component/errors.js';
62
import { TRIGGERS, SYMBOLS } from '@aegisjsproject/component/consts.js';
73
import { getInt, setInt } from '@aegisjsproject/component/attrs.js';
84
import { html } from '@aegisjsproject/core/parsers/html.js';
95
import { registerCallback } from '@aegisjsproject/core/callbackRegistry.js';
10-
import { EVENTS, AEGIS_EVENT_HANDLER_CLASS } from '@aegisjsproject/core/events.js';
6+
import { EVENTS } from '@aegisjsproject/core/events.js';
117

128
const inputHandler = registerCallback(
139
'test-input:input',
1410
event => event.target.getRootNode().host.value = event.target.innerHTML.trim(),
1511
);
1612

17-
const template = html`<div contenteditable="true" class="${AEGIS_EVENT_HANDLER_CLASS}" ${EVENTS.onInput}="${inputHandler}">Enter Text</div>`;
13+
const template = html`<div contenteditable="true" ${EVENTS.onInput}="${inputHandler}"></div>`;
1814

1915
class TestInput extends AegisInput {
2016
constructor() {
@@ -25,22 +21,26 @@ class TestInput extends AegisInput {
2521
const anchor = shadow.getElementById('content');
2622

2723
if (typeof value !== 'string') {
28-
throw new TypeMismatchError('Value must be a string.', { anchor });
24+
throw new AegisInput.TypeMismatchError('Value must be a string.', { anchor });
2925
} else if (this.required && value.length === 0) {
30-
throw new ValueMissingError('Value is required.');
26+
throw new AegisInput.ValueMissingError('Value is required.');
3127
} else if (value.length < this.minLength) {
32-
throw new TooShortError(`Value must be at least ${this.minLength} chars.`, { anchor });
28+
throw new AegisInput.TooShortError(`Value must be at least ${this.minLength} chars.`, { anchor });
3329
} else if (value.length > this.maxLength) {
34-
throw new TooLongError(`Value must be fewer than ${this.maxLength} chars.`, { anchor });
30+
throw new AegisInput.TooLongError(`Value must be fewer than ${this.maxLength} chars.`, { anchor });
3531
} else {
3632
const el = document.createElement('div');
3733
el.setHTML(value);
3834
return el.innerHTML;
3935
}
4036
}
4137

42-
async [SYMBOLS.render](type, { shadow, name, disabled }) {
38+
async [SYMBOLS.render](type, { shadow, name, disabled }) {
4339
switch(type) {
40+
case TRIGGERS.constructed:
41+
this.value = 'Enter Some Text!';
42+
break;
43+
4444
case TRIGGERS.formReset:
4545
shadow.getElementById('content').textContent = ' ';
4646
break;

‎test/index.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,14 +6,14 @@
66
<meta name="color-scheme" content="light dark" />
77
<meta http-equiv="Content-Security-Policy"
88
content="default-src 'none';
9-
script-src 'self' https://unpkg.com/@shgysk8zer0/ https://unpkg.com/@aegisjsproject/ 'sha384-sEZHY5s3EVOtSOk2on2ohawJgDJCF2syHikVzJwj47nzEf5gsziUWZ2QMcmzli7C' 'nonce-fgdfg';
9+
script-src 'self' https://unpkg.com/@shgysk8zer0/ https://unpkg.com/@aegisjsproject/ 'sha384-9r2le7Ki5JTkpwyzHCNRePSsl26daK+kcsjjkgwVx08e85iRuzIj97aZdO83g4Mg';
1010
style-src 'self' blob: data:;
1111
img-src 'self';
1212
connect-src https://icanhazdadjoke.com https://unpkg.com/@shgysk8zer0/;
1313
trusted-types empty#html empty#script sanitizer-raw#html default;
1414
require-trusted-types-for 'script';" />
1515
<title>Aegis Component Test</title>
16-
<script type="importmap" nonce="fgdfg" integrity="sha384-sEZHY5s3EVOtSOk2on2ohawJgDJCF2syHikVzJwj47nzEf5gsziUWZ2QMcmzli7C">
16+
<script type="importmap" integrity="sha384-9r2le7Ki5JTkpwyzHCNRePSsl26daK+kcsjjkgwVx08e85iRuzIj97aZdO83g4Mg">
1717
{
1818
"imports": {
1919
"@aegisjsproject/core": "../node_modules/@aegisjsproject/core/core.js",
@@ -27,7 +27,7 @@
2727
}
2828
}
2929
</script>
30-
<script type="application/javascript" defer="" referrerpolicy="no-referrer" crossorigin="anonymous" integrity="sha384-Shkrmxly5RI9mCU8DQr6l4VLVJzjPzgx9KP/f5i7pEcl7ZUt0wHiAweGjbpjU2d5" src="https://unpkg.com/@shgysk8zer0/polyfills@0.3.1/all.min.js" fetchpriority="auto"></script>
30+
<script type="application/javascript" defer="" referrerpolicy="no-referrer" crossorigin="anonymous" integrity="sha384-da+idpfYh2JjIk81mlgAuhkV0bSAuVW1TA9XLcjht0WOsiSQgwi+uzPM4a2t6A9i" src="https://unpkg.com/@shgysk8zer0/polyfills@0.3.2/all.min.js" fetchpriority="auto"></script>
3131
<script type="application/javascript" defer="" referrerpolicy="no-referrer" crossorigin="anonymous" integrity="sha384-55L/wO9o0uIVTeubRIDQB4bewfNqyxrj4OXuxlW24NMEk+ioZwMHVw/tFV78mM+k" src="https://unpkg.com/@shgysk8zer0/kazoo@0.3.1/harden.js" fetchpriority="auto"></script>
3232
<script type="module" referrerpolicy="no-referrer" src="./index.js"></script>
3333
</head>

0 commit comments

Comments
 (0)