js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 12:09:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'next' into layouts-review

Browse Source
This commit is contained in:
Cory LaViska
2023-11-02 08:53:41 -04:00
parent 5383411572 932e2e7566
commit ecf2da5201
8 changed files with 116 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
custom-elements-manifest.config.js
View File

@@ -205,6 +205,7 @@ export default {
customElementJetBrainsPlugin({
outdir: './dist',
excludeCss: true,
packageJson: false,
referencesTemplate: (_, tag) => {
return {
name: 'Documentation',

5
docs/pages/resources/changelog.md
View File

@@ -20,6 +20,11 @@ New versions of Web Awesome are released as-needed and generally occur when a cr
- Removed `default` from `<wa-button>` and made `neutral` the new default
- Removed the `circle` modifier from `<wa-button>` because button's no longer have a set height
## Next
- Fixed a bug with bundled components using CDN builds not having translations on initial connect [#1696]
- Fixed a bug where the `"sl-change"` event would always fire simultaneously with `"sl-input"` event in `<sl-color-picker>`. The `<sl-change>` event now only fires when a user stops dragging a slider or stops dragging on the color canvas. [#1689]
## 2.11.2
- Fixed a bug in `<sl-carousel>` component that caused an error to be thrown when rendered with Lit [#1684]

14
package-lock.json generated
View File

@@ -37,7 +37,7 @@
"command-line-args": "^5.2.1",
"comment-parser": "^1.4.0",
"cspell": "^6.18.1",
"custom-element-jet-brains-integration": "^1.2.1",
"custom-element-jet-brains-integration": "^1.4.0",
"custom-element-vs-code-integration": "^1.2.1",
"del": "^7.1.0",
"download": "^8.0.0",
@@ -6714,9 +6714,9 @@
"dev": true
},
"node_modules/custom-element-jet-brains-integration": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/custom-element-jet-brains-integration/-/custom-element-jet-brains-integration-1.2.1.tgz",
"integrity": "sha512-PepVXf0KiaG5HTASBYt89E9KPMC/l/I4ZPd8D8mYyBtUCVCPvYjqQG9zLjvY/d62iELK6B5R1XGaoNjZtfpMGA==",
"version": "1.4.0",
"resolved": "https://registry.npmjs.org/custom-element-jet-brains-integration/-/custom-element-jet-brains-integration-1.4.0.tgz",
"integrity": "sha512-eL2XNiE9yHM81e/+e/SOKuRUohWYa+HH68mnELF5SIFIhdlKp8oWAs4YCDbKF0yv6tGzei8t/xaoHuuiWR0OyQ==",
"dev": true,
"dependencies": {
"prettier": "^2.8.0"
@@ -23670,9 +23670,9 @@
"dev": true
},
"custom-element-jet-brains-integration": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/custom-element-jet-brains-integration/-/custom-element-jet-brains-integration-1.2.1.tgz",
"integrity": "sha512-PepVXf0KiaG5HTASBYt89E9KPMC/l/I4ZPd8D8mYyBtUCVCPvYjqQG9zLjvY/d62iELK6B5R1XGaoNjZtfpMGA==",
"version": "1.4.0",
"resolved": "https://registry.npmjs.org/custom-element-jet-brains-integration/-/custom-element-jet-brains-integration-1.4.0.tgz",
"integrity": "sha512-eL2XNiE9yHM81e/+e/SOKuRUohWYa+HH68mnELF5SIFIhdlKp8oWAs4YCDbKF0yv6tGzei8t/xaoHuuiWR0OyQ==",
"dev": true,
"requires": {
"prettier": "^2.8.0"

18
package.json
View File

@@ -25,8 +25,15 @@
"./dist/react/*": "./dist/react/*",
"./dist/translations/*": "./dist/translations/*"
},
"files": ["dist", "cdn"],
"keywords": ["web components", "custom elements", "components"],
"files": [
"dist",
"cdn"
],
"keywords": [
"web components",
"custom elements",
"components"
],
"repository": {
"type": "git",
"url": "git+https://github.com/shoelace-style/shoelace.git"
@@ -83,7 +90,7 @@
"command-line-args": "^5.2.1",
"comment-parser": "^1.4.0",
"cspell": "^6.18.1",
"custom-element-jet-brains-integration": "^1.2.1",
"custom-element-jet-brains-integration": "^1.4.0",
"custom-element-vs-code-integration": "^1.2.1",
"del": "^7.1.0",
"download": "^8.0.0",
@@ -128,6 +135,9 @@
"user-agent-data-types": "^0.3.1"
},
"lint-staged": {
"*.{ts,js}": ["eslint --max-warnings 0 --cache --fix", "prettier --write"]
"*.{ts,js}": [
"eslint --max-warnings 0 --cache --fix",
"prettier --write"
]
}
}

44
src/components/color-picker/color-picker.component.ts
View File

@@ -243,7 +243,8 @@ export default class WaColorPicker extends WebAwesomeElement implements WebAweso
const container = this.shadowRoot!.querySelector<HTMLElement>('.color-picker__slider.color-picker__alpha')!;
const handle = container.querySelector<HTMLElement>('.color-picker__slider-handle')!;
const { width } = container.getBoundingClientRect();
let oldValue = this.value;
let initialValue = this.value;
let currentValue = this.value;
handle.focus();
event.preventDefault();
@@ -253,12 +254,17 @@ export default class WaColorPicker extends WebAwesomeElement implements WebAweso
this.alpha = clamp((x / width) * 100, 0, 100);
this.syncValues();
if (this.value !== oldValue) {
oldValue = this.value;
this.emit('wa-change');
if (this.value !== currentValue) {
currentValue = this.value;
this.emit('wa-input');
}
},
onStop: () => {
if (this.value !== initialValue) {
initialValue = this.value;
this.emit('wa-change');
}
},
initialEvent: event
});
}
@@ -267,7 +273,8 @@ export default class WaColorPicker extends WebAwesomeElement implements WebAweso
const container = this.shadowRoot!.querySelector<HTMLElement>('.color-picker__slider.color-picker__hue')!;
const handle = container.querySelector<HTMLElement>('.color-picker__slider-handle')!;
const { width } = container.getBoundingClientRect();
let oldValue = this.value;
let initialValue = this.value;
let currentValue = this.value;
handle.focus();
event.preventDefault();
@@ -277,12 +284,17 @@ export default class WaColorPicker extends WebAwesomeElement implements WebAweso
this.hue = clamp((x / width) * 360, 0, 360);
this.syncValues();
if (this.value !== oldValue) {
oldValue = this.value;
this.emit('wa-change');
if (this.value !== currentValue) {
currentValue = this.value;
this.emit('wa-input');
}
},
onStop: () => {
if (this.value !== initialValue) {
initialValue = this.value;
this.emit('wa-change');
}
},
initialEvent: event
});
}
@@ -291,7 +303,8 @@ export default class WaColorPicker extends WebAwesomeElement implements WebAweso
const grid = this.shadowRoot!.querySelector<HTMLElement>('.color-picker__grid')!;
const handle = grid.querySelector<HTMLElement>('.color-picker__grid-handle')!;
const { width, height } = grid.getBoundingClientRect();
let oldValue = this.value;
let initialValue = this.value;
let currentValue = this.value;
handle.focus();
event.preventDefault();
@@ -304,13 +317,18 @@ export default class WaColorPicker extends WebAwesomeElement implements WebAweso
this.brightness = clamp(100 - (y / height) * 100, 0, 100);
this.syncValues();
if (this.value !== oldValue) {
oldValue = this.value;
this.emit('wa-change');
if (this.value !== currentValue) {
currentValue = this.value;
this.emit('wa-input');
}
},
onStop: () => (this.isDraggingGridHandle = false),
onStop: () => {
this.isDraggingGridHandle = false;
if (this.value !== initialValue) {
initialValue = this.value;
this.emit('wa-change');
}
},
initialEvent: event
});
}

46
src/components/color-picker/color-picker.test.ts
View File

@@ -1,6 +1,6 @@
import '../../../dist/webawesome.js';
import { aTimeout, expect, fixture, html, oneEvent } from '@open-wc/testing';
import { clickOnElement } from '../../internal/test.js';
import { clickOnElement, dragElement } from '../../internal/test.js';
import { runFormControlBaseTests } from '../../internal/test/form-control-base-tests.js';
import { sendKeys } from '@web/test-runner-commands';
import { serialize } from '../../utilities/form.js';
@@ -31,11 +31,21 @@ describe('<wa-color-picker>', () => {
await clickOnElement(trigger); // open the dropdown
await aTimeout(200); // wait for the dropdown to open
await clickOnElement(grid); // click on the grid
await el.updateComplete;
// Simulate a drag event. "sl-change" should not fire until we stop dragging.
await dragElement(grid, 2, 0, {
afterMouseDown: () => {
expect(changeHandler).to.have.not.been.called;
expect(inputHandler).to.have.been.calledOnce;
},
afterMouseMove: () => {
expect(inputHandler).to.have.been.calledTwice;
}
});
expect(changeHandler).to.have.been.calledOnce;
expect(inputHandler).to.have.been.calledOnce;
expect(inputHandler).to.have.been.calledTwice;
});
it('should emit wa-change and wa-input when the hue slider is moved', async () => {
@@ -50,10 +60,23 @@ describe('<wa-color-picker>', () => {
await clickOnElement(trigger); // open the dropdown
await aTimeout(200); // wait for the dropdown to open
await clickOnElement(slider); // click on the hue slider
// Simulate a drag event. "wa-change" should not fire until we stop dragging.
await dragElement(slider, 20, 0, {
afterMouseDown: () => {
expect(changeHandler).to.have.not.been.called;
expect(inputHandler).to.have.been.calledOnce;
},
afterMouseMove: () => {
// It's not twice because you can't change the hue of white!
expect(inputHandler).to.have.been.calledOnce;
}
});
await el.updateComplete;
expect(changeHandler).to.have.been.calledOnce;
// It's not twice because you can't change the hue of white!
expect(inputHandler).to.have.been.calledOnce;
});
@@ -69,11 +92,22 @@ describe('<wa-color-picker>', () => {
await clickOnElement(trigger); // open the dropdown
await aTimeout(200); // wait for the dropdown to open
await clickOnElement(slider); // click on the opacity slider
// Simulate a drag event. "wa-change" should not fire until we stop dragging.
await dragElement(slider, 2, 0, {
afterMouseDown: () => {
expect(changeHandler).to.have.not.been.called;
expect(inputHandler).to.have.been.calledOnce;
},
afterMouseMove: () => {
expect(inputHandler).to.have.been.calledTwice;
}
});
await el.updateComplete;
expect(changeHandler).to.have.been.calledOnce;
expect(inputHandler).to.have.been.calledOnce;
expect(inputHandler).to.have.been.calledTwice;
});
it('should emit wa-change and wa-input when toggling the format', async () => {

8
src/internal/test.ts
View File

@@ -73,11 +73,17 @@ export async function dragElement(
/** The horizontal distance to drag in pixels */
deltaX = 0,
/** The vertical distance to drag in pixels */
deltaY = 0
deltaY = 0,
callbacks: {
afterMouseDown?: () => void | Promise<void>;
afterMouseMove?: () => void | Promise<void>;
} = {}
): Promise<void> {
await moveMouseOnElement(el);
await sendMouse({ type: 'down' });
await callbacks.afterMouseDown?.();
const { clickX, clickY } = determineMousePosition(el, 'center', deltaX, deltaY);
await sendMouse({ type: 'move', position: [clickX, clickY] });
await callbacks.afterMouseMove?.();
await sendMouse({ type: 'up' });
}

14
src/utilities/localize.ts
View File

@@ -1,9 +1,17 @@
import '../translations/en.js';
import { LocalizeController as DefaultLocalizationController } from '@shoelace-style/localize'; // Register English as the default/fallback language
import { LocalizeController as DefaultLocalizationController, registerTranslation } from '@shoelace-style/localize';
import en from '../translations/en.js'; // Register English as the default/fallback language
import type { Translation as DefaultTranslation } from '@shoelace-style/localize';
// Extend the controller and apply our own translation interface for better typings
export class LocalizeController extends DefaultLocalizationController<Translation> {}
export class LocalizeController extends DefaultLocalizationController<Translation> {
// Technicallly '../translations/en.js' is supposed to work via side-effects. However, by some mystery sometimes the
// translations don't get bundled as expected resulting in `no translation found` errors.
// This is basically some extra assurance that our translations get registered prior to our localizer connecting in a component
// and we don't rely on implicit import ordering.
static {
registerTranslation(en);
}
}
// Export functions from the localize lib so we have one central place to import them from
export { registerTranslation } from '@shoelace-style/localize';