mirror of
https://github.com/shoelace-style/webawesome.git
synced 2026-01-13 20:49:15 +00:00
Compare commits
4 Commits
submenus
...
react-impo
| Author | SHA1 | Date | |
|---|---|---|---|
|
77f6991e59 | ||
|
|
0efb9b2f78 | ||
|
|
39677bf37d | ||
|
|
8535883152 |
1
.gitignore
vendored
1
.gitignore
vendored
@@ -6,4 +6,3 @@ docs/assets/images/sprite.svg
|
||||
node_modules
|
||||
src/react
|
||||
cdn
|
||||
web-types.json
|
||||
@@ -7,7 +7,6 @@ docs/search.json
|
||||
src/components/icon/icons
|
||||
src/react/index.ts
|
||||
node_modules
|
||||
package.json
|
||||
package-lock.json
|
||||
tsconfig.json
|
||||
cdn
|
||||
|
||||
@@ -160,7 +160,6 @@
|
||||
"unbundles",
|
||||
"unbundling",
|
||||
"unicons",
|
||||
"unsanitized",
|
||||
"unsupportive",
|
||||
"valpha",
|
||||
"valuenow",
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
import * as path from 'path';
|
||||
import { customElementJetBrainsPlugin } from 'custom-element-jet-brains-integration';
|
||||
import { customElementVsCodePlugin } from 'custom-element-vs-code-integration';
|
||||
import { parse } from 'comment-parser';
|
||||
import { pascalCase } from 'pascal-case';
|
||||
@@ -201,15 +200,6 @@ export default {
|
||||
url: `https://shoelace.style/components/${tag.replace('sl-', '')}`
|
||||
}
|
||||
]
|
||||
}),
|
||||
customElementJetBrainsPlugin({
|
||||
excludeCss: true,
|
||||
referencesTemplate: (_, tag) => {
|
||||
return {
|
||||
name: 'Documentation',
|
||||
url: `https://shoelace.style/components/${tag.replace('sl-', '')}`
|
||||
};
|
||||
}
|
||||
})
|
||||
]
|
||||
};
|
||||
|
||||
@@ -310,96 +310,6 @@ const App = () => (
|
||||
);
|
||||
```
|
||||
|
||||
### Submenus
|
||||
|
||||
To create a submenu, nest an `<sl-menu slot="submenu">` element in a [menu item](/components/menu-item).
|
||||
|
||||
```html:preview
|
||||
<sl-dropdown>
|
||||
<sl-button slot="trigger" caret>Edit</sl-button>
|
||||
|
||||
<sl-menu style="max-width: 200px;">
|
||||
<sl-menu-item value="undo">Undo</sl-menu-item>
|
||||
<sl-menu-item value="redo">Redo</sl-menu-item>
|
||||
<sl-divider></sl-divider>
|
||||
<sl-menu-item value="cut">Cut</sl-menu-item>
|
||||
<sl-menu-item value="copy">Copy</sl-menu-item>
|
||||
<sl-menu-item value="paste">Paste</sl-menu-item>
|
||||
<sl-divider></sl-divider>
|
||||
<sl-menu-item>
|
||||
Find
|
||||
<sl-menu slot="submenu">
|
||||
<sl-menu-item value="find">Find…</sl-menu-item>
|
||||
<sl-menu-item value="find-previous">Find Next</sl-menu-item>
|
||||
<sl-menu-item value="find-next">Find Previous</sl-menu-item>
|
||||
</sl-menu>
|
||||
</sl-menu-item>
|
||||
<sl-menu-item>
|
||||
Transformations
|
||||
<sl-menu slot="submenu">
|
||||
<sl-menu-item value="uppercase">Make uppercase</sl-menu-item>
|
||||
<sl-menu-item value="lowercase">Make lowercase</sl-menu-item>
|
||||
<sl-menu-item value="capitalize">Capitalize</sl-menu-item>
|
||||
</sl-menu>
|
||||
</sl-menu-item>
|
||||
</sl-menu>
|
||||
</sl-dropdown>
|
||||
```
|
||||
|
||||
```jsx:react
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/button';
|
||||
import SlDivider from '@shoelace-style/shoelace/dist/react/divider';
|
||||
import SlDropdown from '@shoelace-style/shoelace/dist/react/dropdown';
|
||||
import SlMenu from '@shoelace-style/shoelace/dist/react/menu';
|
||||
import SlMenuItem from '@shoelace-style/shoelace/dist/react/menu-item';
|
||||
|
||||
const css = `
|
||||
.dropdown-hoist {
|
||||
border: solid 2px var(--sl-panel-border-color);
|
||||
padding: var(--sl-spacing-medium);
|
||||
overflow: hidden;
|
||||
}
|
||||
`;
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
<SlDropdown>
|
||||
<SlButton slot="trigger" caret>Edit</SlButton>
|
||||
|
||||
<SlMenu style="max-width: 200px;">
|
||||
<SlMenuItem value="undo">Undo</SlMenuItem>
|
||||
<SlMenuItem value="redo">Redo</SlMenuItem>
|
||||
<SlDivider />
|
||||
<SlMenuItem value="cut">Cut</SlMenuItem>
|
||||
<SlMenuItem value="copy">Copy</SlMenuItem>
|
||||
<SlMenuItem value="paste">Paste</SlMenuItem>
|
||||
<SlDivider />
|
||||
<SlMenuItem>
|
||||
Find
|
||||
<SlMenu slot="submenu">
|
||||
<SlMenuItem value="find">Find…</SlMenuItem>
|
||||
<SlMenuItem value="find-previous">Find Next</SlMenuItem>
|
||||
<SlMenuItem value="find-next">Find Previous</SlMenuItem>
|
||||
</SlMenu>
|
||||
</SlMenuItem>
|
||||
<SlMenuItem>
|
||||
Transformations
|
||||
<SlMenu slot="submenu">
|
||||
<SlMenuItem value="uppercase">Make uppercase</SlMenuItem>
|
||||
<SlMenuItem value="lowercase">Make lowercase</SlMenuItem>
|
||||
<SlMenuItem value="capitalize">Capitalize</SlMenuItem>
|
||||
</SlMenu>
|
||||
</SlMenuItem>
|
||||
</SlMenu>
|
||||
</SlDropdown>
|
||||
</>
|
||||
);
|
||||
```
|
||||
|
||||
:::warning
|
||||
As a UX best practice, avoid using more than one level of submenu when possible.
|
||||
:::
|
||||
|
||||
### Hoisting
|
||||
|
||||
Dropdown panels will be clipped if they're inside a container that has `overflow: auto|hidden`. The `hoist` attribute forces the panel to use a fixed positioning strategy, allowing it to break out of the container. In this case, the panel will be positioned relative to its [containing block](https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#Identifying_the_containing_block), which is usually the viewport unless an ancestor uses a `transform`, `perspective`, or `filter`. [Refer to this page](https://developer.mozilla.org/en-US/docs/Web/CSS/position#fixed) for more details.
|
||||
@@ -439,6 +349,7 @@ Dropdown panels will be clipped if they're inside a container that has `overflow
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/button';
|
||||
import SlDivider from '@shoelace-style/shoelace/dist/react/divider';
|
||||
import SlDropdown from '@shoelace-style/shoelace/dist/react/dropdown';
|
||||
import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
|
||||
import SlMenu from '@shoelace-style/shoelace/dist/react/menu';
|
||||
import SlMenuItem from '@shoelace-style/shoelace/dist/react/menu-item';
|
||||
|
||||
|
||||
@@ -44,112 +44,3 @@ const App = () => (
|
||||
:::tip
|
||||
Menus are intended for system menus (dropdown menus, select menus, context menus, etc.). They should not be mistaken for navigation menus which serve a different purpose and have a different semantic meaning. If you're building navigation, use `<nav>` and `<a>` elements instead.
|
||||
:::
|
||||
|
||||
## Examples
|
||||
|
||||
### In Dropdowns
|
||||
|
||||
Menus work really well when used inside [dropdowns](/components/dropdown).
|
||||
|
||||
```html:preview
|
||||
<sl-dropdown>
|
||||
<sl-button slot="trigger" caret>Edit</sl-button>
|
||||
<sl-menu>
|
||||
<sl-menu-item value="cut">Cut</sl-menu-item>
|
||||
<sl-menu-item value="copy">Copy</sl-menu-item>
|
||||
<sl-menu-item value="paste">Paste</sl-menu-item>
|
||||
</sl-menu>
|
||||
</sl-dropdown>
|
||||
```
|
||||
|
||||
```jsx:react
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/button';
|
||||
import SlDropdown from '@shoelace-style/shoelace/dist/react/dropdown';
|
||||
import SlMenu from '@shoelace-style/shoelace/dist/react/menu';
|
||||
import SlMenuItem from '@shoelace-style/shoelace/dist/react/menu-item';
|
||||
|
||||
const App = () => (
|
||||
<SlDropdown>
|
||||
<SlButton slot="trigger" caret>Edit</SlButton>
|
||||
<SlMenu>
|
||||
<SlMenuItem value="cut">Cut</SlMenuItem>
|
||||
<SlMenuItem value="copy">Copy</SlMenuItem>
|
||||
<SlMenuItem value="paste">Paste</SlMenuItem>
|
||||
</SlMenu>
|
||||
</SlDropdown>
|
||||
);
|
||||
```
|
||||
|
||||
### Submenus
|
||||
|
||||
To create a submenu, nest an `<sl-menu slot="submenu">` in any [menu item](/components/menu-item).
|
||||
|
||||
```html:preview
|
||||
<sl-menu style="max-width: 200px;">
|
||||
<sl-menu-item value="undo">Undo</sl-menu-item>
|
||||
<sl-menu-item value="redo">Redo</sl-menu-item>
|
||||
<sl-divider></sl-divider>
|
||||
<sl-menu-item value="cut">Cut</sl-menu-item>
|
||||
<sl-menu-item value="copy">Copy</sl-menu-item>
|
||||
<sl-menu-item value="paste">Paste</sl-menu-item>
|
||||
<sl-divider></sl-divider>
|
||||
<sl-menu-item>
|
||||
Find
|
||||
<sl-menu slot="submenu">
|
||||
<sl-menu-item value="find">Find…</sl-menu-item>
|
||||
<sl-menu-item value="find-previous">Find Next</sl-menu-item>
|
||||
<sl-menu-item value="find-next">Find Previous</sl-menu-item>
|
||||
</sl-menu>
|
||||
</sl-menu-item>
|
||||
<sl-menu-item>
|
||||
Transformations
|
||||
<sl-menu slot="submenu">
|
||||
<sl-menu-item value="uppercase">Make uppercase</sl-menu-item>
|
||||
<sl-menu-item value="lowercase">Make lowercase</sl-menu-item>
|
||||
<sl-menu-item value="capitalize">Capitalize</sl-menu-item>
|
||||
</sl-menu>
|
||||
</sl-menu-item>
|
||||
</sl-menu>
|
||||
```
|
||||
|
||||
{% raw %}
|
||||
|
||||
```jsx:react
|
||||
import SlDivider from '@shoelace-style/shoelace/dist/react/divider';
|
||||
import SlMenu from '@shoelace-style/shoelace/dist/react/menu';
|
||||
import SlMenuItem from '@shoelace-style/shoelace/dist/react/menu-item';
|
||||
|
||||
const App = () => (
|
||||
<SlMenu style={{ maxWidth: '200px' }}>
|
||||
<SlMenuItem value="undo">Undo</SlMenuItem>
|
||||
<SlMenuItem value="redo">Redo</SlMenuItem>
|
||||
<SlDivider />
|
||||
<SlMenuItem value="cut">Cut</SlMenuItem>
|
||||
<SlMenuItem value="copy">Copy</SlMenuItem>
|
||||
<SlMenuItem value="paste">Paste</SlMenuItem>
|
||||
<SlDivider />
|
||||
<SlMenuItem>
|
||||
Find
|
||||
<SlMenu slot="submenu">
|
||||
<SlMenuItem value="find">Find…</SlMenuItem>
|
||||
<SlMenuItem value="find-previous">Find Next</SlMenuItem>
|
||||
<SlMenuItem value="find-next">Find Previous</SlMenuItem>
|
||||
</SlMenu>
|
||||
</SlMenuItem>
|
||||
<SlMenuItem>
|
||||
Transformations
|
||||
<SlMenu slot="submenu">
|
||||
<SlMenuItem value="uppercase">Make uppercase</SlMenuItem>
|
||||
<SlMenuItem value="lowercase">Make lowercase</SlMenuItem>
|
||||
<SlMenuItem value="capitalize">Capitalize</SlMenuItem>
|
||||
</SlMenu>
|
||||
</SlMenuItem>
|
||||
</SlMenu>
|
||||
);
|
||||
```
|
||||
|
||||
:::warning
|
||||
As a UX best practice, avoid using more than one level of submenus when possible.
|
||||
:::
|
||||
|
||||
{% endraw %}
|
||||
|
||||
@@ -250,9 +250,7 @@ Note that multi-select options may wrap, causing the control to expand verticall
|
||||
|
||||
### Setting Initial Values
|
||||
|
||||
Use the `value` attribute to set the initial selection.
|
||||
|
||||
When using `multiple`, the `value` _attribute_ uses space-delimited values to select more than one option. Because of this, `<sl-option>` values cannot contain spaces. If you're accessing the `value` _property_ through Javascript, it will be an array.
|
||||
Use the `value` attribute to set the initial selection. When using `multiple`, use space-delimited values to select more than one option.
|
||||
|
||||
```html:preview
|
||||
<sl-select value="option-1 option-2" multiple clearable>
|
||||
@@ -383,8 +381,10 @@ The preferred placement of the select's listbox can be set with the `placement`
|
||||
```
|
||||
|
||||
```jsx:react
|
||||
import SlOption from '@shoelace-style/shoelace/dist/react/option';
|
||||
import SlSelect from '@shoelace-style/shoelace/dist/react/select';
|
||||
import {
|
||||
SlOption,
|
||||
SlSelect
|
||||
} from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<SlSelect placement="top">
|
||||
@@ -452,53 +452,3 @@ const App = () => (
|
||||
</>
|
||||
);
|
||||
```
|
||||
|
||||
### Custom Tags
|
||||
|
||||
When multiple options can be selected, you can provide custom tags by passing a function to the `getTag` property. Your function can return a string of HTML, a <a href="https://lit.dev/docs/templates/overview/">Lit Template</a>, or an [`HTMLElement`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement). The `getTag()` function will be called for each option. The first argument is an `<sl-option>` element and the second argument is the tag's index (its position in the tag list).
|
||||
|
||||
Remember that custom tags are rendered in a shadow root. To style them, you can use the `style` attribute in your template or you can add your own [parts](/getting-started/customizing/#css-parts) and target them with the [`::part()`](https://developer.mozilla.org/en-US/docs/Web/CSS/::part) selector.
|
||||
|
||||
```html:preview
|
||||
<sl-select
|
||||
placeholder="Select one"
|
||||
value="email phone"
|
||||
multiple
|
||||
clearable
|
||||
class="custom-tag"
|
||||
>
|
||||
<sl-option value="email">
|
||||
<sl-icon slot="prefix" name="envelope"></sl-icon>
|
||||
Email
|
||||
</sl-option>
|
||||
<sl-option value="phone">
|
||||
<sl-icon slot="prefix" name="telephone"></sl-icon>
|
||||
Phone
|
||||
</sl-option>
|
||||
<sl-option value="chat">
|
||||
<sl-icon slot="prefix" name="chat-dots"></sl-icon>
|
||||
Chat
|
||||
</sl-option>
|
||||
</sl-select>
|
||||
|
||||
<script type="module">
|
||||
const select = document.querySelector('.custom-tag');
|
||||
|
||||
select.getTag = (option, index) => {
|
||||
// Use the same icon used in the <sl-option>
|
||||
const name = option.querySelector('sl-icon[slot="prefix"]').name;
|
||||
|
||||
// You can return a string, a Lit Template, or an HTMLElement here
|
||||
return `
|
||||
<sl-tag removable>
|
||||
<sl-icon name="${name}" style="padding-inline-end: .5rem;"></sl-icon>
|
||||
${option.getTextLabel()}
|
||||
</sl-tag>
|
||||
`;
|
||||
};
|
||||
</script>
|
||||
```
|
||||
|
||||
:::warning
|
||||
Be sure you trust the content you are outputting! Passing unsanitized user input to `getTag()` can result in XSS vulnerabilities.
|
||||
:::
|
||||
|
||||
@@ -462,7 +462,7 @@ To disable the browser's error messages, you need to cancel the `sl-invalid` eve
|
||||
<sl-button type="reset" variant="default">Reset</sl-button>
|
||||
</form>
|
||||
|
||||
<script type="module">
|
||||
<script>
|
||||
const form = document.querySelector('.inline-validation');
|
||||
const nameError = document.querySelector('#name-error');
|
||||
|
||||
|
||||
@@ -187,7 +187,7 @@ import '@shoelace-style/shoelace/%NPMDIR%/components/rating/rating.js';
|
||||
import { setBasePath } from '@shoelace-style/shoelace/%NPMDIR%/utilities/base-path.js';
|
||||
|
||||
// Set the base path to the folder you copied Shoelace's assets to
|
||||
setBasePath('/path/to/shoelace/%NPMDIR%');
|
||||
setBasePath('/path/to/shoelace/%NPMDIR%
|
||||
|
||||
// <sl-button>, <sl-icon>, <sl-input>, and <sl-rating> are ready to use!
|
||||
```
|
||||
|
||||
@@ -210,12 +210,6 @@ Shoelace ships with a file called `vscode.html-custom-data.json` that can be use
|
||||
|
||||
If `settings.json` already exists, simply add the above line to the root of the object. Note that you may need to restart VS Code for the changes to take affect.
|
||||
|
||||
## JetBrains IDEs
|
||||
|
||||
If you are using a [JetBrains IDE](https://www.jetbrains.com/) and you are installing Shoelace from NPM, the editor will automatically detect the `web-types.json` file from the package and you should immediately see component information in your editor.
|
||||
|
||||
If you are installing from the CDN, you can [download a local copy](https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace/cdn/web-types.json) and add it to the root of your project.
|
||||
|
||||
### Other Editors
|
||||
|
||||
Most popular editors support custom code completion with a bit of configuration. Please [submit a feature request](https://github.com/shoelace-style/shoelace/issues/new/choose) for your editor of choice. PRs are also welcome!
|
||||
|
||||
@@ -14,16 +14,7 @@ New versions of Shoelace are released as-needed and generally occur when a criti
|
||||
|
||||
## Next
|
||||
|
||||
- Added support for submenus in `<sl-menu-item>` [#1410]
|
||||
- Added the `--submenu-offset` custom property to `<sl-menu-item>` [#1410]
|
||||
- Fixed type issues with the `ref` attribute in React Wrappers. [#1526]
|
||||
- Fixed a regression that caused `<sl-radio-button>` to render incorrectly with gaps [#1523]
|
||||
- Improved expand/collapse behavior of `<sl-tree>` to work more like users expect [#1521]
|
||||
- Improved `<sl-menu-item>` so labels truncate properly instead of getting chopped and overflowing
|
||||
|
||||
## 2.7.0
|
||||
|
||||
- Added the experimental `<sl-copy-button>` component [#1473]
|
||||
- Added the `<sl-copy-button>` component [#1473]
|
||||
- Fixed a bug in `<sl-dropdown>` where pressing [[Up]] or [[Down]] when focused on the trigger wouldn't focus the first/last menu items [#1472]
|
||||
- Fixed a bug that caused key presses in text fields to be hijacked when used inside `<sl-tree>` [#1492]
|
||||
- Fixed an upstream bug that caused React CodePen examples to stop working
|
||||
|
||||
37
package-lock.json
generated
37
package-lock.json
generated
@@ -1,17 +1,17 @@
|
||||
{
|
||||
"name": "@shoelace-style/shoelace",
|
||||
"version": "2.7.0",
|
||||
"version": "2.6.0",
|
||||
"lockfileVersion": 2,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "@shoelace-style/shoelace",
|
||||
"version": "2.7.0",
|
||||
"version": "2.6.0",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@ctrl/tinycolor": "^3.5.0",
|
||||
"@floating-ui/dom": "^1.2.1",
|
||||
"@lit-labs/react": "^1.2.1",
|
||||
"@lit-labs/react": "^1.1.1",
|
||||
"@shoelace-style/animations": "^1.1.0",
|
||||
"@shoelace-style/localize": "^3.1.1",
|
||||
"composed-offset-position": "^0.0.4",
|
||||
@@ -37,7 +37,6 @@
|
||||
"command-line-args": "^5.2.1",
|
||||
"comment-parser": "^1.3.1",
|
||||
"cspell": "^6.18.1",
|
||||
"custom-element-jet-brains-integration": "^1.1.0",
|
||||
"custom-element-vs-code-integration": "^1.1.0",
|
||||
"del": "^7.0.0",
|
||||
"download": "^8.0.0",
|
||||
@@ -1474,9 +1473,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@lit-labs/react": {
|
||||
"version": "1.2.1",
|
||||
"resolved": "https://registry.npmjs.org/@lit-labs/react/-/react-1.2.1.tgz",
|
||||
"integrity": "sha512-DiZdJYFU0tBbdQkfwwRSwYyI/mcWkg3sWesKRsHUd4G+NekTmmeq9fzsurvcKTNVa0comNljwtg4Hvi1ds3V+A=="
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/@lit-labs/react/-/react-1.1.1.tgz",
|
||||
"integrity": "sha512-9TC+/ZWb6BJlWCyUr14FKFlaGnyKpeEDorufXozQgke/VoVrslUQNaL7nBmrAWdNrmzx5jWgi8lFmWwrxMjnlA=="
|
||||
},
|
||||
"node_modules/@lit-labs/ssr-dom-shim": {
|
||||
"version": "1.1.1",
|
||||
@@ -5688,15 +5687,6 @@
|
||||
"integrity": "sha512-2u44ZG2OcNUO9HDp/Jl8C07x6pU/eTR3ncV91SiK3dhG9TWvRVsCoJw14Ckx5DgWkzGA3waZWO3d7pgqpUI/XA==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/custom-element-jet-brains-integration": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/custom-element-jet-brains-integration/-/custom-element-jet-brains-integration-1.1.0.tgz",
|
||||
"integrity": "sha512-wesa4OEvRQdxNzynk5ugU7ZRy0Ghkoaa6NmRGTqOASIng1hVaE3EKKO3rK11b4Y/pR3HUPIPKs1mRSnRCjHBfg==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"prettier": "^2.8.0"
|
||||
}
|
||||
},
|
||||
"node_modules/custom-element-vs-code-integration": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/custom-element-vs-code-integration/-/custom-element-vs-code-integration-1.1.0.tgz",
|
||||
@@ -18291,9 +18281,9 @@
|
||||
}
|
||||
},
|
||||
"@lit-labs/react": {
|
||||
"version": "1.2.1",
|
||||
"resolved": "https://registry.npmjs.org/@lit-labs/react/-/react-1.2.1.tgz",
|
||||
"integrity": "sha512-DiZdJYFU0tBbdQkfwwRSwYyI/mcWkg3sWesKRsHUd4G+NekTmmeq9fzsurvcKTNVa0comNljwtg4Hvi1ds3V+A=="
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/@lit-labs/react/-/react-1.1.1.tgz",
|
||||
"integrity": "sha512-9TC+/ZWb6BJlWCyUr14FKFlaGnyKpeEDorufXozQgke/VoVrslUQNaL7nBmrAWdNrmzx5jWgi8lFmWwrxMjnlA=="
|
||||
},
|
||||
"@lit-labs/ssr-dom-shim": {
|
||||
"version": "1.1.1",
|
||||
@@ -21517,15 +21507,6 @@
|
||||
"integrity": "sha512-2u44ZG2OcNUO9HDp/Jl8C07x6pU/eTR3ncV91SiK3dhG9TWvRVsCoJw14Ckx5DgWkzGA3waZWO3d7pgqpUI/XA==",
|
||||
"dev": true
|
||||
},
|
||||
"custom-element-jet-brains-integration": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/custom-element-jet-brains-integration/-/custom-element-jet-brains-integration-1.1.0.tgz",
|
||||
"integrity": "sha512-wesa4OEvRQdxNzynk5ugU7ZRy0Ghkoaa6NmRGTqOASIng1hVaE3EKKO3rK11b4Y/pR3HUPIPKs1mRSnRCjHBfg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"prettier": "^2.8.0"
|
||||
}
|
||||
},
|
||||
"custom-element-vs-code-integration": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/custom-element-vs-code-integration/-/custom-element-vs-code-integration-1.1.0.tgz",
|
||||
|
||||
23
package.json
23
package.json
@@ -1,12 +1,12 @@
|
||||
{
|
||||
"name": "@shoelace-style/shoelace",
|
||||
"description": "A forward-thinking library of web components.",
|
||||
"version": "2.7.0",
|
||||
"version": "2.6.0",
|
||||
"homepage": "https://github.com/shoelace-style/shoelace",
|
||||
"author": "Cory LaViska",
|
||||
"license": "MIT",
|
||||
"customElements": "dist/custom-elements.json",
|
||||
"web-types": "./web-types.json",
|
||||
"web-types": "dist/web-types.json",
|
||||
"type": "module",
|
||||
"types": "dist/shoelace.d.ts",
|
||||
"jsdelivr": "./cdn/shoelace-autoloader.js",
|
||||
@@ -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"
|
||||
@@ -62,7 +69,7 @@
|
||||
"dependencies": {
|
||||
"@ctrl/tinycolor": "^3.5.0",
|
||||
"@floating-ui/dom": "^1.2.1",
|
||||
"@lit-labs/react": "^1.2.1",
|
||||
"@lit-labs/react": "^1.1.1",
|
||||
"@shoelace-style/animations": "^1.1.0",
|
||||
"@shoelace-style/localize": "^3.1.1",
|
||||
"composed-offset-position": "^0.0.4",
|
||||
@@ -88,7 +95,6 @@
|
||||
"command-line-args": "^5.2.1",
|
||||
"comment-parser": "^1.3.1",
|
||||
"cspell": "^6.18.1",
|
||||
"custom-element-jet-brains-integration": "^1.1.0",
|
||||
"custom-element-vs-code-integration": "^1.1.0",
|
||||
"del": "^7.0.0",
|
||||
"download": "^8.0.0",
|
||||
@@ -133,6 +139,9 @@
|
||||
"user-agent-data-types": "^0.3.0"
|
||||
},
|
||||
"lint-staged": {
|
||||
"*.{ts,js}": ["eslint --max-warnings 0 --cache --fix", "prettier --write"]
|
||||
"*.{ts,js}": [
|
||||
"eslint --max-warnings 0 --cache --fix",
|
||||
"prettier --write"
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
@@ -188,6 +188,10 @@ await nextTask('Wrapping components for React', () => {
|
||||
return execPromise(`node scripts/make-react.js --outdir "${outdir}"`, { stdio: 'inherit' });
|
||||
});
|
||||
|
||||
await nextTask('Generating Web Types', () => {
|
||||
return execPromise(`node scripts/make-web-types.js --outdir "${outdir}"`, { stdio: 'inherit' });
|
||||
});
|
||||
|
||||
await nextTask('Generating themes', () => {
|
||||
return execPromise(`node scripts/make-themes.js --outdir "${outdir}"`, { stdio: 'inherit' });
|
||||
});
|
||||
@@ -203,7 +207,6 @@ await nextTask('Running the TypeScript compiler', () => {
|
||||
// Copy the above steps to the CDN directory directly so we don't need to twice the work for nothing.
|
||||
await nextTask(`Copying Web Types, Themes, Icons, and TS Types to "${cdndir}"`, async () => {
|
||||
await deleteAsync(cdndir);
|
||||
await copy('./web-types.json', `${outdir}/web-types.json`);
|
||||
await copy(outdir, cdndir);
|
||||
});
|
||||
|
||||
|
||||
@@ -51,15 +51,6 @@ components.map(component => {
|
||||
${eventImports}
|
||||
${eventExports}
|
||||
|
||||
export type ForwardComponent<
|
||||
Element extends HTMLElement,
|
||||
ReactComponent extends React.ElementType
|
||||
> = React.JSXElementConstructor<
|
||||
React.ComponentPropsWithoutRef<ReactComponent> & {
|
||||
ref?: React.ForwardedRef<Element>;
|
||||
}
|
||||
> & { displayName?: string }
|
||||
|
||||
const tagName = '${component.tagName}'
|
||||
|
||||
const component = createComponent({
|
||||
@@ -85,7 +76,7 @@ components.map(component => {
|
||||
}
|
||||
}
|
||||
|
||||
export default SlComponent as ForwardComponent<Component, typeof SlComponent>;
|
||||
export default SlComponent;
|
||||
`,
|
||||
Object.assign(prettierConfig, {
|
||||
parser: 'babel-ts'
|
||||
|
||||
68
scripts/make-web-types.js
Normal file
68
scripts/make-web-types.js
Normal file
@@ -0,0 +1,68 @@
|
||||
//
|
||||
// This script generates a web-types.json file from custom-elements.json for use with WebStorm/PHPStorm
|
||||
//
|
||||
// Docs: https://github.com/JetBrains/web-types
|
||||
//
|
||||
import commandLineArgs from 'command-line-args';
|
||||
import jsonata from 'jsonata';
|
||||
import fs from 'fs';
|
||||
import path from 'path';
|
||||
|
||||
const { outdir } = commandLineArgs({ name: 'outdir', type: String });
|
||||
const metadata = JSON.parse(fs.readFileSync(path.join(outdir, 'custom-elements.json'), 'utf8'));
|
||||
|
||||
const jsonataExprString = `{
|
||||
"$schema": "http://json.schemastore.org/web-types",
|
||||
"name": package.name,
|
||||
"version": package.version,
|
||||
"description-markup": "markdown",
|
||||
"framework-config": {
|
||||
"enable-when": {
|
||||
"node-packages": [
|
||||
package.name
|
||||
]
|
||||
}
|
||||
},
|
||||
"contributions": {
|
||||
"html": {
|
||||
"elements": [
|
||||
modules.declarations.{
|
||||
"name": tagName,
|
||||
"description": description,
|
||||
"doc-url": $join(["https://shoelace.style/components/", $substringAfter(tagName, 'sl-')]),
|
||||
"js": {
|
||||
"properties": [
|
||||
members.{
|
||||
"name": name,
|
||||
"description": description,
|
||||
"value": {
|
||||
"type": type.text
|
||||
}
|
||||
}
|
||||
],
|
||||
"events": [
|
||||
events.{
|
||||
"name": name,
|
||||
"description": description
|
||||
}
|
||||
]
|
||||
},
|
||||
"attributes": [
|
||||
attributes.{
|
||||
"name": name,
|
||||
"description": description,
|
||||
"value": {
|
||||
"type": type.text
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}`;
|
||||
|
||||
const expression = jsonata(jsonataExprString);
|
||||
const result = await expression.evaluate(metadata);
|
||||
|
||||
fs.writeFileSync(path.join(outdir, 'web-types.json'), JSON.stringify(result, null, 2), 'utf8');
|
||||
@@ -54,7 +54,7 @@ export default class SlButtonGroup extends ShoelaceElement {
|
||||
const index = slottedElements.indexOf(el);
|
||||
const button = findButton(el);
|
||||
|
||||
if (button) {
|
||||
if (button !== null) {
|
||||
button.classList.add('sl-button-group__button');
|
||||
button.classList.toggle('sl-button-group__button--first', index === 0);
|
||||
button.classList.toggle('sl-button-group__button--inner', index > 0 && index < slottedElements.length - 1);
|
||||
|
||||
@@ -882,7 +882,7 @@ export default class SlColorPicker extends ShoelaceElement implements ShoelaceFo
|
||||
style=${styleMap({
|
||||
backgroundImage: `linear-gradient(
|
||||
to right,
|
||||
${this.getHexString(this.hue, this.saturation, this.brightness, 0)} 0%,
|
||||
${this.getHexString(this.hue, this.saturation, this.brightness, 0)} 0%
|
||||
${this.getHexString(this.hue, this.saturation, this.brightness, 100)} 100%
|
||||
)`
|
||||
})}
|
||||
|
||||
@@ -90,15 +90,15 @@ export default class SlDetails extends ShoelaceElement {
|
||||
this.detailsObserver.disconnect();
|
||||
}
|
||||
|
||||
private handleSummaryClick(event: MouseEvent) {
|
||||
event.preventDefault();
|
||||
|
||||
private handleSummaryClick(ev: MouseEvent) {
|
||||
ev.preventDefault();
|
||||
if (!this.disabled) {
|
||||
if (this.open) {
|
||||
this.hide();
|
||||
} else {
|
||||
this.show();
|
||||
}
|
||||
|
||||
this.header.focus();
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,13 +1,10 @@
|
||||
import { classMap } from 'lit/directives/class-map.js';
|
||||
import { getTextContent, HasSlotController } from '../../internal/slot.js';
|
||||
import { getTextContent } from '../../internal/slot.js';
|
||||
import { html } from 'lit';
|
||||
import { LocalizeController } from '../../utilities/localize.js';
|
||||
import { property, query } from 'lit/decorators.js';
|
||||
import { SubmenuController } from './submenu-controller.js';
|
||||
import { watch } from '../../internal/watch.js';
|
||||
import ShoelaceElement from '../../internal/shoelace-element.js';
|
||||
import SlIcon from '../icon/icon.component.js';
|
||||
import SlPopup from '../popup/popup.component.js';
|
||||
import styles from './menu-item.styles.js';
|
||||
import type { CSSResultGroup } from 'lit';
|
||||
|
||||
@@ -18,12 +15,10 @@ import type { CSSResultGroup } from 'lit';
|
||||
* @since 2.0
|
||||
*
|
||||
* @dependency sl-icon
|
||||
* @dependency sl-popup
|
||||
*
|
||||
* @slot - The menu item's label.
|
||||
* @slot prefix - Used to prepend an icon or similar element to the menu item.
|
||||
* @slot suffix - Used to append an icon or similar element to the menu item.
|
||||
* @slot submenu - Used to denote a nested menu.
|
||||
*
|
||||
* @csspart base - The component's base wrapper.
|
||||
* @csspart checked-icon - The checked icon, which is only visible when the menu item is checked.
|
||||
@@ -31,15 +26,10 @@ import type { CSSResultGroup } from 'lit';
|
||||
* @csspart label - The menu item label.
|
||||
* @csspart suffix - The suffix container.
|
||||
* @csspart submenu-icon - The submenu icon, visible only when the menu item has a submenu (not yet implemented).
|
||||
*
|
||||
* @cssproperty [--submenu-offset=-2px] - The distance submenus shift to overlap the parent menu.
|
||||
*/
|
||||
export default class SlMenuItem extends ShoelaceElement {
|
||||
static styles: CSSResultGroup = styles;
|
||||
static dependencies = {
|
||||
'sl-icon': SlIcon,
|
||||
'sl-popup': SlPopup
|
||||
};
|
||||
static dependencies = { 'sl-icon': SlIcon };
|
||||
|
||||
private cachedTextLabel: string;
|
||||
|
||||
@@ -58,22 +48,6 @@ export default class SlMenuItem extends ShoelaceElement {
|
||||
/** Draws the menu item in a disabled state, preventing selection. */
|
||||
@property({ type: Boolean, reflect: true }) disabled = false;
|
||||
|
||||
private readonly localize = new LocalizeController(this);
|
||||
private readonly hasSlotController = new HasSlotController(this, 'submenu');
|
||||
private submenuController: SubmenuController = new SubmenuController(this, this.hasSlotController, this.localize);
|
||||
|
||||
connectedCallback() {
|
||||
super.connectedCallback();
|
||||
this.addEventListener('click', this.handleHostClick);
|
||||
this.addEventListener('mouseover', this.handleMouseOver);
|
||||
}
|
||||
|
||||
disconnectedCallback() {
|
||||
super.disconnectedCallback();
|
||||
this.removeEventListener('click', this.handleHostClick);
|
||||
this.removeEventListener('mouseover', this.handleMouseOver);
|
||||
}
|
||||
|
||||
private handleDefaultSlotChange() {
|
||||
const textLabel = this.getTextLabel();
|
||||
|
||||
@@ -90,19 +64,6 @@ export default class SlMenuItem extends ShoelaceElement {
|
||||
}
|
||||
}
|
||||
|
||||
private handleHostClick = (event: MouseEvent) => {
|
||||
// Prevent the click event from being emitted when the button is disabled or loading
|
||||
if (this.disabled) {
|
||||
event.preventDefault();
|
||||
event.stopImmediatePropagation();
|
||||
}
|
||||
};
|
||||
|
||||
private handleMouseOver = (event: MouseEvent) => {
|
||||
this.focus();
|
||||
event.stopPropagation();
|
||||
};
|
||||
|
||||
@watch('checked')
|
||||
handleCheckedChange() {
|
||||
// For proper accessibility, users have to use type="checkbox" to use the checked attribute
|
||||
@@ -141,28 +102,16 @@ export default class SlMenuItem extends ShoelaceElement {
|
||||
return getTextContent(this.defaultSlot);
|
||||
}
|
||||
|
||||
isSubmenu() {
|
||||
return this.hasSlotController.test('submenu');
|
||||
}
|
||||
|
||||
render() {
|
||||
const isRtl = this.localize.dir() === 'rtl';
|
||||
const isSubmenuExpanded = this.submenuController.isExpanded();
|
||||
|
||||
return html`
|
||||
<div
|
||||
id="anchor"
|
||||
part="base"
|
||||
class=${classMap({
|
||||
'menu-item': true,
|
||||
'menu-item--rtl': isRtl,
|
||||
'menu-item--checked': this.checked,
|
||||
'menu-item--disabled': this.disabled,
|
||||
'menu-item--has-submenu': this.isSubmenu(),
|
||||
'menu-item--submenu-expanded': isSubmenuExpanded
|
||||
'menu-item--has-submenu': false // reserved for future use
|
||||
})}
|
||||
?aria-haspopup="${this.isSubmenu()}"
|
||||
?aria-expanded="${isSubmenuExpanded ? true : false}"
|
||||
>
|
||||
<span part="checked-icon" class="menu-item__check">
|
||||
<sl-icon name="check" library="system" aria-hidden="true"></sl-icon>
|
||||
@@ -175,10 +124,8 @@ export default class SlMenuItem extends ShoelaceElement {
|
||||
<slot name="suffix" part="suffix" class="menu-item__suffix"></slot>
|
||||
|
||||
<span part="submenu-icon" class="menu-item__chevron">
|
||||
<sl-icon name=${isRtl ? 'chevron-left' : 'chevron-right'} library="system" aria-hidden="true"></sl-icon>
|
||||
<sl-icon name="chevron-right" library="system" aria-hidden="true"></sl-icon>
|
||||
</span>
|
||||
|
||||
${this.submenuController.renderSubmenu()}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
@@ -5,8 +5,6 @@ export default css`
|
||||
${componentStyles}
|
||||
|
||||
:host {
|
||||
--submenu-offset: -2px;
|
||||
|
||||
display: block;
|
||||
}
|
||||
|
||||
@@ -40,8 +38,6 @@ export default css`
|
||||
.menu-item .menu-item__label {
|
||||
flex: 1 1 auto;
|
||||
display: inline-block;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.menu-item .menu-item__prefix {
|
||||
@@ -68,8 +64,7 @@ export default css`
|
||||
outline: none;
|
||||
}
|
||||
|
||||
:host(:hover:not([aria-disabled='true'], :focus-visible)) .menu-item,
|
||||
.menu-item--submenu-expanded {
|
||||
:host(:hover:not([aria-disabled='true'], :focus-visible)) .menu-item {
|
||||
background-color: var(--sl-color-neutral-100);
|
||||
color: var(--sl-color-neutral-1000);
|
||||
}
|
||||
@@ -96,17 +91,6 @@ export default css`
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
/* Add elevation and z-index to submenus */
|
||||
sl-popup::part(popup) {
|
||||
box-shadow: var(--sl-shadow-large);
|
||||
z-index: var(--sl-z-index-dropdown);
|
||||
margin-left: var(--submenu-offset);
|
||||
}
|
||||
|
||||
.menu-item--rtl sl-popup::part(popup) {
|
||||
margin-left: calc(-1 * var(--submenu-offset));
|
||||
}
|
||||
|
||||
@media (forced-colors: active) {
|
||||
:host(:hover:not([aria-disabled='true'])) .menu-item,
|
||||
:host(:focus-visible) .menu-item {
|
||||
|
||||
@@ -1,9 +1,7 @@
|
||||
import '../../../dist/shoelace.js';
|
||||
import { expect, fixture, html, waitUntil } from '@open-wc/testing';
|
||||
import { sendKeys } from '@web/test-runner-commands';
|
||||
import sinon from 'sinon';
|
||||
import type SlMenuItem from './menu-item';
|
||||
import type SlSelectEvent from '../../events/sl-select';
|
||||
|
||||
describe('<sl-menu-item>', () => {
|
||||
it('should pass accessibility tests', async () => {
|
||||
@@ -20,21 +18,6 @@ describe('<sl-menu-item>', () => {
|
||||
await expect(el).to.be.accessible();
|
||||
});
|
||||
|
||||
it('should pass accessibility tests when using a submenu', async () => {
|
||||
const el = await fixture<SlMenuItem>(html`
|
||||
<sl-menu>
|
||||
<sl-menu-item>
|
||||
Submenu
|
||||
<sl-menu slot="submenu">
|
||||
<sl-menu-item>Submenu Item 1</sl-menu-item>
|
||||
<sl-menu-item>Submenu Item 2</sl-menu-item>
|
||||
</sl-menu>
|
||||
</sl-menu-item>
|
||||
</sl-menu>
|
||||
`);
|
||||
await expect(el).to.be.accessible();
|
||||
});
|
||||
|
||||
it('should have the correct default properties', async () => {
|
||||
const el = await fixture<SlMenuItem>(html` <sl-menu-item>Test</sl-menu-item> `);
|
||||
|
||||
@@ -76,98 +59,4 @@ describe('<sl-menu-item>', () => {
|
||||
|
||||
expect(getComputedStyle(item1).display).to.equal('none');
|
||||
});
|
||||
|
||||
it('should not render a sl-popup if the slot="submenu" attribute is missing, but the slot should exist in the component and be hidden.', async () => {
|
||||
const menu = await fixture<SlMenuItem>(html`
|
||||
<sl-menu>
|
||||
<sl-menu-item>
|
||||
Item 1
|
||||
<sl-menu>
|
||||
<sl-menu-item> Nested Item 1 </sl-menu-item>
|
||||
</sl-menu>
|
||||
</sl-menu-item>
|
||||
</sl-menu>
|
||||
`);
|
||||
|
||||
const menuItem: HTMLElement = menu.querySelector('sl-menu-item')!;
|
||||
expect(menuItem.shadowRoot!.querySelector('sl-popup')).to.be.null;
|
||||
const submenuSlot: HTMLElement = menuItem.shadowRoot!.querySelector('slot[name="submenu"]')!;
|
||||
expect(submenuSlot.hidden).to.be.true;
|
||||
});
|
||||
|
||||
it('should render an sl-popup if the slot="submenu" attribute is present', async () => {
|
||||
const menu = await fixture<SlMenuItem>(html`
|
||||
<sl-menu>
|
||||
<sl-menu-item id="test">
|
||||
Item 1
|
||||
<sl-menu slot="submenu">
|
||||
<sl-menu-item> Nested Item 1 </sl-menu-item>
|
||||
</sl-menu>
|
||||
</sl-menu-item>
|
||||
</sl-menu>
|
||||
`);
|
||||
|
||||
const menuItem = menu.querySelector('sl-menu-item')!;
|
||||
expect(menuItem.shadowRoot!.querySelector('sl-popup')).to.be.not.null;
|
||||
const submenuSlot: HTMLElement = menuItem.shadowRoot!.querySelector('slot[name="submenu"]')!;
|
||||
expect(submenuSlot.hidden).to.be.false;
|
||||
});
|
||||
|
||||
it('should focus on first menuitem of submenu if ArrowRight is pressed on parent menuitem', async () => {
|
||||
const menu = await fixture<SlMenuItem>(html`
|
||||
<sl-menu>
|
||||
<sl-menu-item id="item-1">
|
||||
Submenu
|
||||
<sl-menu slot="submenu">
|
||||
<sl-menu-item value="submenu-item-1"> Nested Item 1 </sl-menu-item>
|
||||
</sl-menu>
|
||||
</sl-menu-item>
|
||||
</sl-menu>
|
||||
`);
|
||||
|
||||
const selectHandler = sinon.spy((event: SlSelectEvent) => {
|
||||
const item = event.detail.item;
|
||||
expect(item.value).to.equal('submenu-item-1');
|
||||
});
|
||||
menu.addEventListener('sl-select', selectHandler);
|
||||
|
||||
const submenu = menu.querySelector('sl-menu-item');
|
||||
submenu!.focus();
|
||||
await menu.updateComplete;
|
||||
await sendKeys({ press: 'ArrowRight' });
|
||||
await menu.updateComplete;
|
||||
await sendKeys({ press: 'Enter' });
|
||||
await menu.updateComplete;
|
||||
// Once for each menu element.
|
||||
expect(selectHandler).to.have.been.calledTwice;
|
||||
});
|
||||
|
||||
it('should focus on outer menu if ArrowRight is pressed on nested menuitem', async () => {
|
||||
const menu = await fixture<SlMenuItem>(html`
|
||||
<sl-menu>
|
||||
<sl-menu-item value="outer-item-1">
|
||||
Submenu
|
||||
<sl-menu slot="submenu">
|
||||
<sl-menu-item value="inner-item-1"> Nested Item 1 </sl-menu-item>
|
||||
</sl-menu>
|
||||
</sl-menu-item>
|
||||
</sl-menu>
|
||||
`);
|
||||
|
||||
const focusHandler = sinon.spy((event: FocusEvent) => {
|
||||
expect(event.target.value).to.equal('outer-item-1');
|
||||
expect(event.relatedTarget.value).to.equal('inner-item-1');
|
||||
});
|
||||
|
||||
const outerItem = menu.querySelector('sl-menu-item');
|
||||
outerItem!.focus();
|
||||
await menu.updateComplete;
|
||||
await sendKeys({ press: 'ArrowRight' });
|
||||
|
||||
outerItem.addEventListener('focus', focusHandler);
|
||||
await menu.updateComplete;
|
||||
await sendKeys({ press: 'ArrowLeft' });
|
||||
await menu.updateComplete;
|
||||
expect(focusHandler).to.have.been.calledOnce;
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,262 +0,0 @@
|
||||
import { createRef, ref, type Ref } from 'lit/directives/ref.js';
|
||||
import { type HasSlotController } from '../../internal/slot.js';
|
||||
import { html } from 'lit';
|
||||
import { type LocalizeController } from '../../utilities/localize.js';
|
||||
import type { ReactiveController, ReactiveControllerHost } from 'lit';
|
||||
import type SlMenuItem from './menu-item.js';
|
||||
import type SlPopup from '../popup/popup.js';
|
||||
|
||||
/** A reactive controller to manage the registration of event listeners for submenus. */
|
||||
export class SubmenuController implements ReactiveController {
|
||||
private host: ReactiveControllerHost & SlMenuItem;
|
||||
private popupRef: Ref<SlPopup> = createRef();
|
||||
private enableSubmenuTimer = -1;
|
||||
private isConnected = false;
|
||||
private isPopupConnected = false;
|
||||
private skidding = 0;
|
||||
private readonly hasSlotController: HasSlotController;
|
||||
private readonly localize: LocalizeController;
|
||||
private readonly submenuOpenDelay = 100;
|
||||
|
||||
constructor(
|
||||
host: ReactiveControllerHost & SlMenuItem,
|
||||
hasSlotController: HasSlotController,
|
||||
localize: LocalizeController
|
||||
) {
|
||||
(this.host = host).addController(this);
|
||||
this.hasSlotController = hasSlotController;
|
||||
this.localize = localize;
|
||||
}
|
||||
|
||||
hostConnected() {
|
||||
if (this.hasSlotController.test('submenu') && !this.host.disabled) {
|
||||
this.addListeners();
|
||||
}
|
||||
}
|
||||
|
||||
hostDisconnected() {
|
||||
this.removeListeners();
|
||||
}
|
||||
|
||||
hostUpdated() {
|
||||
if (this.hasSlotController.test('submenu') && !this.host.disabled) {
|
||||
this.addListeners();
|
||||
this.updateSkidding();
|
||||
} else {
|
||||
this.removeListeners();
|
||||
}
|
||||
}
|
||||
|
||||
private addListeners() {
|
||||
if (!this.isConnected) {
|
||||
this.host.addEventListener('mouseover', this.handleMouseOver);
|
||||
this.host.addEventListener('keydown', this.handleKeyDown);
|
||||
this.host.addEventListener('click', this.handleClick);
|
||||
this.host.addEventListener('focusout', this.handleFocusOut);
|
||||
this.isConnected = true;
|
||||
}
|
||||
|
||||
// The popup does not seem to get wired when the host is
|
||||
// connected, so manage its listeners separately.
|
||||
if (!this.isPopupConnected) {
|
||||
if (this.popupRef.value) {
|
||||
this.popupRef.value.addEventListener('mouseover', this.handlePopupMouseover);
|
||||
this.isPopupConnected = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
private removeListeners() {
|
||||
if (this.isConnected) {
|
||||
this.host.removeEventListener('mouseover', this.handleMouseOver);
|
||||
this.host.removeEventListener('keydown', this.handleKeyDown);
|
||||
this.host.removeEventListener('click', this.handleClick);
|
||||
this.host.removeEventListener('focusout', this.handleFocusOut);
|
||||
this.isConnected = false;
|
||||
}
|
||||
if (this.isPopupConnected) {
|
||||
if (this.popupRef.value) {
|
||||
this.popupRef.value.removeEventListener('mouseover', this.handlePopupMouseover);
|
||||
this.isPopupConnected = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
private handleMouseOver = () => {
|
||||
if (this.hasSlotController.test('submenu')) {
|
||||
this.enableSubmenu();
|
||||
}
|
||||
};
|
||||
|
||||
private handleSubmenuEntry(event: KeyboardEvent) {
|
||||
// Pass focus to the first menu-item in the submenu.
|
||||
const submenuSlot: HTMLSlotElement | null = this.host.renderRoot.querySelector("slot[name='submenu']");
|
||||
|
||||
// Missing slot
|
||||
if (!submenuSlot) {
|
||||
console.error('Cannot activate a submenu if no corresponding menuitem can be found.', this);
|
||||
return;
|
||||
}
|
||||
|
||||
// Menus
|
||||
let menuItems: NodeListOf<Element> | null = null;
|
||||
for (const elt of submenuSlot.assignedElements()) {
|
||||
menuItems = elt.querySelectorAll("sl-menu-item, [role^='menuitem']");
|
||||
if (menuItems.length !== 0) {
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
if (!menuItems || menuItems.length === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
menuItems[0].setAttribute('tabindex', '0');
|
||||
for (let i = 1; i !== menuItems.length; ++i) {
|
||||
menuItems[i].setAttribute('tabindex', '-1');
|
||||
}
|
||||
|
||||
// Open the submenu (if not open), and set focus to first menuitem.
|
||||
if (this.popupRef.value) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
if (this.popupRef.value.active) {
|
||||
if (menuItems[0] instanceof HTMLElement) {
|
||||
menuItems[0].focus();
|
||||
}
|
||||
} else {
|
||||
this.enableSubmenu(false);
|
||||
this.host.updateComplete.then(() => {
|
||||
if (menuItems![0] instanceof HTMLElement) {
|
||||
menuItems![0].focus();
|
||||
}
|
||||
});
|
||||
this.host.requestUpdate();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Focus on the first menu-item of a submenu.
|
||||
private handleKeyDown = (event: KeyboardEvent) => {
|
||||
switch (event.key) {
|
||||
case 'Escape':
|
||||
case 'Tab':
|
||||
this.disableSubmenu();
|
||||
break;
|
||||
case 'ArrowLeft':
|
||||
// Either focus is currently on the host element or a child
|
||||
if (event.target !== this.host) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
this.host.focus();
|
||||
this.disableSubmenu();
|
||||
}
|
||||
break;
|
||||
case 'ArrowRight':
|
||||
case 'Enter':
|
||||
case ' ':
|
||||
this.handleSubmenuEntry(event);
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
private handleClick = (event: MouseEvent) => {
|
||||
// Clicking on the item which heads the menu does nothing, otherwise hide submenu and propagate
|
||||
if (event.target === this.host) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
} else if (
|
||||
event.target instanceof Element &&
|
||||
(event.target.tagName === 'sl-menu-item' || event.target.role?.startsWith('menuitem'))
|
||||
) {
|
||||
this.disableSubmenu();
|
||||
}
|
||||
};
|
||||
|
||||
// Close this submenu on focus outside of the parent or any descendants.
|
||||
private handleFocusOut = (event: FocusEvent) => {
|
||||
if (event.relatedTarget && event.relatedTarget instanceof Element && this.host.contains(event.relatedTarget)) {
|
||||
return;
|
||||
}
|
||||
this.disableSubmenu();
|
||||
};
|
||||
|
||||
// Prevent the parent menu-item from getting focus on mouse movement on the submenu
|
||||
private handlePopupMouseover = (event: MouseEvent) => {
|
||||
event.stopPropagation();
|
||||
};
|
||||
|
||||
private setSubmenuState(state: boolean) {
|
||||
if (this.popupRef.value) {
|
||||
if (this.popupRef.value.active !== state) {
|
||||
this.popupRef.value.active = state;
|
||||
this.host.requestUpdate();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Shows the submenu. Supports disabling the opening delay, e.g. for keyboard events that want to set the focus to the
|
||||
// newly opened menu.
|
||||
private enableSubmenu(delay = true) {
|
||||
if (delay) {
|
||||
this.enableSubmenuTimer = window.setTimeout(() => {
|
||||
this.setSubmenuState(true);
|
||||
}, this.submenuOpenDelay);
|
||||
} else {
|
||||
this.setSubmenuState(true);
|
||||
}
|
||||
}
|
||||
|
||||
private disableSubmenu() {
|
||||
clearTimeout(this.enableSubmenuTimer);
|
||||
this.setSubmenuState(false);
|
||||
}
|
||||
|
||||
// Calculate the space the top of a menu takes-up, for aligning the popup menu-item with the activating element.
|
||||
private updateSkidding(): void {
|
||||
// .computedStyleMap() not always available.
|
||||
if (!this.host.parentElement?.computedStyleMap) {
|
||||
return;
|
||||
}
|
||||
const styleMap: StylePropertyMapReadOnly = this.host.parentElement.computedStyleMap();
|
||||
const attrs: string[] = ['padding-top', 'border-top-width', 'margin-top'];
|
||||
|
||||
const skidding = attrs.reduce((accumulator, attr) => {
|
||||
const styleValue: CSSStyleValue = styleMap.get(attr) ?? new CSSUnitValue(0, 'px');
|
||||
const unitValue = styleValue instanceof CSSUnitValue ? styleValue : new CSSUnitValue(0, 'px');
|
||||
const pxValue = unitValue.to('px');
|
||||
return accumulator - pxValue.value;
|
||||
}, 0);
|
||||
|
||||
this.skidding = skidding;
|
||||
}
|
||||
|
||||
isExpanded(): boolean {
|
||||
return this.popupRef.value ? this.popupRef.value.active : false;
|
||||
}
|
||||
|
||||
renderSubmenu() {
|
||||
const isLtr = this.localize.dir() === 'ltr';
|
||||
|
||||
// Always render the slot, but conditionally render the outer <sl-popup>
|
||||
if (!this.isConnected) {
|
||||
return html` <slot name="submenu" hidden></slot> `;
|
||||
}
|
||||
|
||||
return html`
|
||||
<sl-popup
|
||||
${ref(this.popupRef)}
|
||||
placement=${isLtr ? 'right-start' : 'left-start'}
|
||||
anchor="anchor"
|
||||
flip
|
||||
flip-fallback-strategy="best-fit"
|
||||
skidding="${this.skidding}"
|
||||
strategy="fixed"
|
||||
>
|
||||
<slot name="submenu"></slot>
|
||||
</sl-popup>
|
||||
`;
|
||||
}
|
||||
}
|
||||
@@ -1,9 +1,9 @@
|
||||
import { html } from 'lit';
|
||||
import { query } from 'lit/decorators.js';
|
||||
import ShoelaceElement from '../../internal/shoelace-element.js';
|
||||
import SlMenuItem from '../menu-item/menu-item.component.js';
|
||||
import styles from './menu.styles.js';
|
||||
import type { CSSResultGroup } from 'lit';
|
||||
import type SlMenuItem from '../menu-item/menu-item.js';
|
||||
export interface MenuSelectEventDetail {
|
||||
item: SlMenuItem;
|
||||
}
|
||||
@@ -29,12 +29,13 @@ export default class SlMenu extends ShoelaceElement {
|
||||
}
|
||||
|
||||
private handleClick(event: MouseEvent) {
|
||||
if (!(event.target instanceof SlMenuItem)) {
|
||||
const target = event.target as HTMLElement;
|
||||
const item = target.closest('sl-menu-item');
|
||||
|
||||
if (!item || item.disabled || item.inert) {
|
||||
return;
|
||||
}
|
||||
|
||||
const item: SlMenuItem = event.target;
|
||||
|
||||
if (item.type === 'checkbox') {
|
||||
item.checked = !item.checked;
|
||||
}
|
||||
@@ -47,21 +48,19 @@ export default class SlMenu extends ShoelaceElement {
|
||||
if (event.key === 'Enter' || event.key === ' ') {
|
||||
const item = this.getCurrentItem();
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
|
||||
// Simulate a click to support @click handlers on menu items that also work with the keyboard
|
||||
item?.click();
|
||||
}
|
||||
|
||||
// Move the selection when pressing down or up
|
||||
else if (['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) {
|
||||
if (['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) {
|
||||
const items = this.getAllItems();
|
||||
const activeItem = this.getCurrentItem();
|
||||
let index = activeItem ? items.indexOf(activeItem) : 0;
|
||||
|
||||
if (items.length > 0) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
|
||||
if (event.key === 'ArrowDown') {
|
||||
index++;
|
||||
|
||||
@@ -20,26 +20,4 @@ describe('<sl-radio-button>', () => {
|
||||
expect(radio1.checked).to.be.true;
|
||||
expect(radio2.checked).to.be.false;
|
||||
});
|
||||
|
||||
it('should receive positional classes from <sl-button-group>', async () => {
|
||||
const radioGroup = await fixture<SlRadioGroup>(html`
|
||||
<sl-radio-group value="1">
|
||||
<sl-radio-button id="radio-1" value="1"></sl-radio-button>
|
||||
<sl-radio-button id="radio-2" value="2"></sl-radio-button>
|
||||
<sl-radio-button id="radio-3" value="3"></sl-radio-button>
|
||||
</sl-radio-group>
|
||||
`);
|
||||
const radio1 = radioGroup.querySelector<SlRadioButton>('#radio-1')!;
|
||||
const radio2 = radioGroup.querySelector<SlRadioButton>('#radio-2')!;
|
||||
const radio3 = radioGroup.querySelector<SlRadioButton>('#radio-3')!;
|
||||
|
||||
await Promise.all([radioGroup.updateComplete, radio1.updateComplete, radio2.updateComplete, radio3.updateComplete]);
|
||||
|
||||
expect(radio1.classList.contains('sl-button-group__button')).to.be.true;
|
||||
expect(radio1.classList.contains('sl-button-group__button--first')).to.be.true;
|
||||
expect(radio2.classList.contains('sl-button-group__button')).to.be.true;
|
||||
expect(radio2.classList.contains('sl-button-group__button--inner')).to.be.true;
|
||||
expect(radio3.classList.contains('sl-button-group__button')).to.be.true;
|
||||
expect(radio3.classList.contains('sl-button-group__button--last')).to.be.true;
|
||||
});
|
||||
});
|
||||
|
||||
@@ -327,8 +327,11 @@ export default class SlRadioGroup extends ShoelaceElement implements ShoelaceFor
|
||||
const hasHelpTextSlot = this.hasSlotController.test('help-text');
|
||||
const hasLabel = this.label ? true : !!hasLabelSlot;
|
||||
const hasHelpText = this.helpText ? true : !!hasHelpTextSlot;
|
||||
|
||||
const defaultSlot = html`
|
||||
<slot @slotchange=${this.syncRadios} @click=${this.handleRadioClick} @keydown=${this.handleKeyDown}></slot>
|
||||
<span @click=${this.handleRadioClick} @keydown=${this.handleKeyDown} role="presentation">
|
||||
<slot @slotchange=${this.syncRadios}></slot>
|
||||
</span>
|
||||
`;
|
||||
|
||||
return html`
|
||||
@@ -375,7 +378,7 @@ export default class SlRadioGroup extends ShoelaceElement implements ShoelaceFor
|
||||
|
||||
${this.hasButtonGroup
|
||||
? html`
|
||||
<sl-button-group part="button-group" exportparts="base:button-group__base" role="presentation">
|
||||
<sl-button-group part="button-group" exportparts="base:button-group__base">
|
||||
${defaultSlot}
|
||||
</sl-button-group>
|
||||
`
|
||||
@@ -392,5 +395,6 @@ export default class SlRadioGroup extends ShoelaceElement implements ShoelaceFor
|
||||
</div>
|
||||
</fieldset>
|
||||
`;
|
||||
/* eslint-enable lit-a11y/click-events-have-key-events */
|
||||
}
|
||||
}
|
||||
|
||||
@@ -8,7 +8,6 @@ import { html } from 'lit';
|
||||
import { LocalizeController } from '../../utilities/localize.js';
|
||||
import { property, query, state } from 'lit/decorators.js';
|
||||
import { scrollIntoView } from '../../internal/scroll.js';
|
||||
import { unsafeHTML } from 'lit/directives/unsafe-html.js';
|
||||
import { waitForEvent } from '../../internal/event.js';
|
||||
import { watch } from '../../internal/watch.js';
|
||||
import ShoelaceElement from '../../internal/shoelace-element.js';
|
||||
@@ -16,7 +15,7 @@ import SlIcon from '../icon/icon.component.js';
|
||||
import SlPopup from '../popup/popup.component.js';
|
||||
import SlTag from '../tag/tag.component.js';
|
||||
import styles from './select.styles.js';
|
||||
import type { CSSResultGroup, TemplateResult } from 'lit';
|
||||
import type { CSSResultGroup } from 'lit';
|
||||
import type { ShoelaceFormControl } from '../../internal/shoelace-element.js';
|
||||
import type SlOption from '../option/option.component.js';
|
||||
import type SlRemoveEvent from '../../events/sl-remove.js';
|
||||
@@ -173,31 +172,6 @@ export default class SlSelect extends ShoelaceElement implements ShoelaceFormCon
|
||||
/** The select's required attribute. */
|
||||
@property({ type: Boolean, reflect: true }) required = false;
|
||||
|
||||
/**
|
||||
* A function that customizes the tags to be rendered when multiple=true. The first argument is the option, the second
|
||||
* is the current tag's index. The function should return either a Lit TemplateResult or a string containing trusted HTML of the symbol to render at
|
||||
* the specified value.
|
||||
*/
|
||||
@property() getTag: (option: SlOption, index: number) => TemplateResult | string | HTMLElement = option => {
|
||||
return html`
|
||||
<sl-tag
|
||||
part="tag"
|
||||
exportparts="
|
||||
base:tag__base,
|
||||
content:tag__content,
|
||||
remove-button:tag__remove-button,
|
||||
remove-button__base:tag__remove-button__base
|
||||
"
|
||||
?pill=${this.pill}
|
||||
size=${this.size}
|
||||
removable
|
||||
@sl-remove=${(event: SlRemoveEvent) => this.handleTagRemove(event, option)}
|
||||
>
|
||||
${option.getTextLabel()}
|
||||
</sl-tag>
|
||||
`;
|
||||
};
|
||||
|
||||
/** Gets the validity state object */
|
||||
get validity() {
|
||||
return this.valueInput.validity;
|
||||
@@ -573,21 +547,6 @@ export default class SlSelect extends ShoelaceElement implements ShoelaceFormCon
|
||||
this.formControlController.updateValidity();
|
||||
});
|
||||
}
|
||||
protected get tags() {
|
||||
return this.selectedOptions.map((option, index) => {
|
||||
if (index < this.maxOptionsVisible || this.maxOptionsVisible <= 0) {
|
||||
const tag = this.getTag(option, index);
|
||||
// Wrap so we can handle the remove
|
||||
return html`<div @sl-remove=${(e: SlRemoveEvent) => this.handleTagRemove(e, option)}>
|
||||
${typeof tag === 'string' ? unsafeHTML(tag) : tag}
|
||||
</div>`;
|
||||
} else if (index === this.maxOptionsVisible) {
|
||||
// Hit tag limit
|
||||
return html`<sl-tag>+${this.selectedOptions.length - index}</sl-tag>`;
|
||||
}
|
||||
return html``;
|
||||
});
|
||||
}
|
||||
|
||||
private handleInvalid(event: Event) {
|
||||
this.formControlController.setValidity(false);
|
||||
@@ -796,7 +755,37 @@ export default class SlSelect extends ShoelaceElement implements ShoelaceFormCon
|
||||
@blur=${this.handleBlur}
|
||||
/>
|
||||
|
||||
${this.multiple ? html`<div part="tags" class="select__tags">${this.tags}</div>` : ''}
|
||||
${this.multiple
|
||||
? html`
|
||||
<div part="tags" class="select__tags">
|
||||
${this.selectedOptions.map((option, index) => {
|
||||
if (index < this.maxOptionsVisible || this.maxOptionsVisible <= 0) {
|
||||
return html`
|
||||
<sl-tag
|
||||
part="tag"
|
||||
exportparts="
|
||||
base:tag__base,
|
||||
content:tag__content,
|
||||
remove-button:tag__remove-button,
|
||||
remove-button__base:tag__remove-button__base
|
||||
"
|
||||
?pill=${this.pill}
|
||||
size=${this.size}
|
||||
removable
|
||||
@sl-remove=${(event: SlRemoveEvent) => this.handleTagRemove(event, option)}
|
||||
>
|
||||
${option.getTextLabel()}
|
||||
</sl-tag>
|
||||
`;
|
||||
} else if (index === this.maxOptionsVisible) {
|
||||
return html` <sl-tag size=${this.size}> +${this.selectedOptions.length - index} </sl-tag> `;
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
})}
|
||||
</div>
|
||||
`
|
||||
: ''}
|
||||
|
||||
<input
|
||||
class="select__value-input"
|
||||
|
||||
@@ -168,6 +168,20 @@ export default class SlTree extends ShoelaceElement {
|
||||
}
|
||||
};
|
||||
|
||||
private syncTreeItems(selectedItem: SlTreeItem) {
|
||||
const items = this.getAllTreeItems();
|
||||
|
||||
if (this.selection === 'multiple') {
|
||||
syncCheckboxes(selectedItem);
|
||||
} else {
|
||||
for (const item of items) {
|
||||
if (item !== selectedItem) {
|
||||
item.selected = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
private selectItem(selectedItem: SlTreeItem) {
|
||||
const previousSelection = [...this.selectedItems];
|
||||
|
||||
@@ -176,12 +190,12 @@ export default class SlTree extends ShoelaceElement {
|
||||
if (selectedItem.lazy) {
|
||||
selectedItem.expanded = true;
|
||||
}
|
||||
syncCheckboxes(selectedItem);
|
||||
this.syncTreeItems(selectedItem);
|
||||
} else if (this.selection === 'single' || selectedItem.isLeaf) {
|
||||
const items = this.getAllTreeItems();
|
||||
for (const item of items) {
|
||||
item.selected = item === selectedItem;
|
||||
}
|
||||
selectedItem.expanded = !selectedItem.expanded;
|
||||
selectedItem.selected = true;
|
||||
|
||||
this.syncTreeItems(selectedItem);
|
||||
} else if (this.selection === 'leaf') {
|
||||
selectedItem.expanded = !selectedItem.expanded;
|
||||
}
|
||||
@@ -297,7 +311,7 @@ export default class SlTree extends ShoelaceElement {
|
||||
return;
|
||||
}
|
||||
|
||||
if (isExpandButton) {
|
||||
if (this.selection === 'multiple' && isExpandButton) {
|
||||
treeItem.expanded = !treeItem.expanded;
|
||||
} else {
|
||||
this.selectItem(treeItem);
|
||||
|
||||
@@ -275,6 +275,7 @@ describe('<sl-tree>', () => {
|
||||
// Assert
|
||||
expect(el.selectedItems.length).to.eq(1);
|
||||
expect(el.children[2]).to.have.attribute('selected');
|
||||
expect(el.children[2]).to.have.attribute('expanded');
|
||||
});
|
||||
});
|
||||
|
||||
@@ -438,6 +439,7 @@ describe('<sl-tree>', () => {
|
||||
await el.updateComplete;
|
||||
|
||||
// Assert
|
||||
expect(node).to.have.attribute('selected');
|
||||
expect(node).to.have.attribute('expanded');
|
||||
});
|
||||
});
|
||||
|
||||
@@ -133,10 +133,10 @@ before(async () => {
|
||||
|
||||
relevantMetadata.forEach(({ tagName, path }) => {
|
||||
it(`Should not register any components: ${tagName}`, async () => {
|
||||
// Check if importing the files automatically registers any components
|
||||
await import('../../dist/' + path);
|
||||
|
||||
// Need to make sure we remove the current tag from the tagNames and *then* see whats been registered.
|
||||
const registeredTags = tagNames.filter(tag => tag !== tagName && Boolean(window.customElements.get(tag)));
|
||||
const registeredTags = tagNames.filter(tag => Boolean(window.customElements.get(tag)));
|
||||
|
||||
const errorMessage =
|
||||
`Expected ${path} to not register any tags, but it registered the following tags: ` +
|
||||
|
||||
Reference in New Issue
Block a user