kopia lustrzana https://github.com/shoelace-style/shoelace
Jason O'Neill
rodzic
c1b0497624
commit
d6e15f985c
|
|
@ -3,6 +3,7 @@
|
|||
"ms-vscode.vscode-typescript-tslint-plugin",
|
||||
"esbenp.prettier-vscode",
|
||||
"bierner.lit-html",
|
||||
"bashmish.es6-string-css"
|
||||
"bashmish.es6-string-css",
|
||||
"streetsidesoftware.code-spell-checker"
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,110 @@
|
|||
{
|
||||
"version": "0.2",
|
||||
"words": [
|
||||
"allowfullscreen",
|
||||
"animationend",
|
||||
"Animista",
|
||||
"apos",
|
||||
"atrule",
|
||||
"autocorrect",
|
||||
"autoplay",
|
||||
"bezier",
|
||||
"boxicons",
|
||||
"chatbubble",
|
||||
"claviska",
|
||||
"Clippy",
|
||||
"codepen",
|
||||
"colocated",
|
||||
"combobox",
|
||||
"Composability",
|
||||
"Consolas",
|
||||
"contenteditable",
|
||||
"copydir",
|
||||
"coverpage",
|
||||
"crossorigin",
|
||||
"crutchcorn",
|
||||
"csspart",
|
||||
"cssproperty",
|
||||
"datetime",
|
||||
"Docsify",
|
||||
"dropdowns",
|
||||
"easings",
|
||||
"erroneou",
|
||||
"esbuild",
|
||||
"exportparts",
|
||||
"fieldsets",
|
||||
"formdata",
|
||||
"FOUC",
|
||||
"FOUCE",
|
||||
"fullscreen",
|
||||
"globby",
|
||||
"Grayscale",
|
||||
"haspopup",
|
||||
"heroicons",
|
||||
"hexa",
|
||||
"Iconoir",
|
||||
"Iframes",
|
||||
"inputmode",
|
||||
"ionicon",
|
||||
"ionicons",
|
||||
"jsDelivr",
|
||||
"jsfiddle",
|
||||
"keydown",
|
||||
"keyframes",
|
||||
"labelledby",
|
||||
"Laravel",
|
||||
"LaViska",
|
||||
"litelement",
|
||||
"lowercasing",
|
||||
"maxlength",
|
||||
"Menlo",
|
||||
"minlength",
|
||||
"monospace",
|
||||
"mousedown",
|
||||
"mouseup",
|
||||
"nextjs",
|
||||
"noopener",
|
||||
"noreferrer",
|
||||
"novalidate",
|
||||
"outdir",
|
||||
"ParamagicDev",
|
||||
"popperjs",
|
||||
"progressbar",
|
||||
"radiogroup",
|
||||
"Railsbyte",
|
||||
"remixicon",
|
||||
"reregister",
|
||||
"resizer",
|
||||
"resizers",
|
||||
"rgba",
|
||||
"roadmap",
|
||||
"Roboto",
|
||||
"Schilp",
|
||||
"Segoe",
|
||||
"semibold",
|
||||
"slotchange",
|
||||
"spacebar",
|
||||
"Tabbable",
|
||||
"tabindex",
|
||||
"tablist",
|
||||
"tabpanel",
|
||||
"templating",
|
||||
"textareas",
|
||||
"transitionend",
|
||||
"Triaging",
|
||||
"turbolinks",
|
||||
"unbundles",
|
||||
"unbundling",
|
||||
"unicons",
|
||||
"unsupportive",
|
||||
"valpha",
|
||||
"valuenow",
|
||||
"valuetext",
|
||||
"WEBP",
|
||||
"Webpacker",
|
||||
"wordmark"
|
||||
],
|
||||
"ignorePaths": ["package.json", "package-lock.json", ".vscode/**", "src/translations/!(en).ts", "**/*.min.js"],
|
||||
"ignoreRegExpList": ["(^|[^a-z])sl[a-z]*(^|[^a-z])"],
|
||||
"useGitignore": true
|
||||
}
|
||||
|
|
@ -240,7 +240,7 @@
|
|||
const ul = document.createElement('ul');
|
||||
const dependencies = [];
|
||||
|
||||
// Recursively fetch subdependencies
|
||||
// Recursively fetch sub-dependencies
|
||||
function getDependencies(tag) {
|
||||
const component = allComponents.find(c => c.tagName === tag);
|
||||
if (!component || !Array.isArray(component.dependencies)) {
|
||||
|
|
|
|||
|
|
@ -76,7 +76,7 @@
|
|||
}
|
||||
});
|
||||
|
||||
// Set the intial theme and sync the UI
|
||||
// Set the initial theme and sync the UI
|
||||
setTheme(theme);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -583,7 +583,7 @@ body[data-page^='/tokens/'] .table-wrapper td:first-child code {
|
|||
background: var(--sl-color-primary-600);
|
||||
}
|
||||
|
||||
/* Elevation dmeo */
|
||||
/* Elevation demo */
|
||||
.elevation-demo {
|
||||
background: transparent;
|
||||
border-radius: 3px;
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
<!-- cspell:dictionaries lorem-ipsum -->
|
||||
|
||||
# Details
|
||||
|
||||
[component-header:sl-details]
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
<!-- cspell:dictionaries lorem-ipsum -->
|
||||
|
||||
# Dialog
|
||||
|
||||
[component-header:sl-dialog]
|
||||
|
|
@ -83,12 +85,7 @@ const App = () => {
|
|||
|
||||
return (
|
||||
<>
|
||||
<SlDialog
|
||||
label="Dialog"
|
||||
open={open}
|
||||
style={{ '--width': '50vw' }}
|
||||
onSlAfterHide={() => setOpen(false)}
|
||||
>
|
||||
<SlDialog label="Dialog" open={open} style={{ '--width': '50vw' }} onSlAfterHide={() => setOpen(false)}>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
<SlButton slot="footer" variant="primary" onClick={() => setOpen(false)}>
|
||||
Close
|
||||
|
|
@ -135,11 +132,13 @@ const App = () => {
|
|||
return (
|
||||
<>
|
||||
<SlDialog label="Dialog" open={open} onSlAfterHide={() => setOpen(false)}>
|
||||
<div style={{
|
||||
height: '150vh',
|
||||
border: 'dashed 2px var(--sl-color-neutral-200)',
|
||||
padding: '0 1rem'
|
||||
}}>
|
||||
<div
|
||||
style={{
|
||||
height: '150vh',
|
||||
border: 'dashed 2px var(--sl-color-neutral-200)',
|
||||
padding: '0 1rem'
|
||||
}}
|
||||
>
|
||||
<p>Scroll down and give it a try! 👇</p>
|
||||
</div>
|
||||
|
||||
|
|
@ -189,9 +188,9 @@ const App = () => {
|
|||
|
||||
return (
|
||||
<>
|
||||
<SlDialog
|
||||
label="Dialog"
|
||||
open={open}
|
||||
<SlDialog
|
||||
label="Dialog"
|
||||
open={open}
|
||||
onSlRequestClose={event => event.preventDefault()}
|
||||
onSlAfterHide={() => setOpen(false)}
|
||||
>
|
||||
|
|
@ -237,11 +236,7 @@ By default, the dialog's panel will gain focus when opened. This allows a subseq
|
|||
|
||||
```jsx react
|
||||
import { useRef, useState } from 'react';
|
||||
import {
|
||||
SlButton,
|
||||
SlDialog,
|
||||
SlInput
|
||||
} from '@shoelace-style/shoelace/dist/react';
|
||||
import { SlButton, SlDialog, SlInput } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => {
|
||||
const input = useRef(null);
|
||||
|
|
@ -254,12 +249,7 @@ const App = () => {
|
|||
|
||||
return (
|
||||
<>
|
||||
<SlDialog
|
||||
label="Dialog"
|
||||
open={open}
|
||||
onSlInitialFocus={handleInitialFocus}
|
||||
onSlAfterHide={() => setOpen(false)}
|
||||
>
|
||||
<SlDialog label="Dialog" open={open} onSlInitialFocus={handleInitialFocus} onSlAfterHide={() => setOpen(false)}>
|
||||
<SlInput ref={input} placeholder="I will have focus when the dialog is opened" />
|
||||
<SlButton slot="footer" variant="primary" onClick={() => setOpen(false)}>
|
||||
Close
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
<!-- cspell:dictionaries lorem-ipsum -->
|
||||
|
||||
# Drawer
|
||||
|
||||
[component-header:sl-drawer]
|
||||
|
|
@ -77,12 +79,7 @@ const App = () => {
|
|||
|
||||
return (
|
||||
<>
|
||||
<SlDrawer
|
||||
label="Drawer"
|
||||
placement="start"
|
||||
open={open}
|
||||
onSlAfterHide={() => setOpen(false)}
|
||||
>
|
||||
<SlDrawer label="Drawer" placement="start" open={open} onSlAfterHide={() => setOpen(false)}>
|
||||
This drawer slides in from the start.
|
||||
<SlButton slot="footer" variant="primary" onClick={() => setOpen(false)}>
|
||||
Close
|
||||
|
|
@ -126,12 +123,7 @@ const App = () => {
|
|||
|
||||
return (
|
||||
<>
|
||||
<SlDrawer
|
||||
label="Drawer"
|
||||
placement="top"
|
||||
open={open}
|
||||
onSlAfterHide={() => setOpen(false)}
|
||||
>
|
||||
<SlDrawer label="Drawer" placement="top" open={open} onSlAfterHide={() => setOpen(false)}>
|
||||
This drawer slides in from the top.
|
||||
<SlButton slot="footer" variant="primary" onClick={() => setOpen(false)}>
|
||||
Close
|
||||
|
|
@ -175,12 +167,7 @@ const App = () => {
|
|||
|
||||
return (
|
||||
<>
|
||||
<SlDrawer
|
||||
label="Drawer"
|
||||
placement="bottom"
|
||||
open={open}
|
||||
onSlAfterHide={() => setOpen(false)}
|
||||
>
|
||||
<SlDrawer label="Drawer" placement="bottom" open={open} onSlAfterHide={() => setOpen(false)}>
|
||||
This drawer slides in from the bottom.
|
||||
<SlButton slot="footer" variant="primary" onClick={() => setOpen(false)}>
|
||||
Close
|
||||
|
|
@ -239,15 +226,9 @@ const App = () => {
|
|||
marginBottom: '1rem'
|
||||
}}
|
||||
>
|
||||
The drawer will be contained to this box. This content won't shift or be affected in any way when the drawer opens.
|
||||
|
||||
<SlDrawer
|
||||
label="Drawer"
|
||||
contained
|
||||
open={open}
|
||||
onSlAfterHide={() => setOpen(false)}
|
||||
style={{ '--size': '50%' }}
|
||||
>
|
||||
The drawer will be contained to this box. This content won't shift or be affected in any way when the drawer
|
||||
opens.
|
||||
<SlDrawer label="Drawer" contained open={open} onSlAfterHide={() => setOpen(false)} style={{ '--size': '50%' }}>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
<SlButton slot="footer" variant="primary" onClick={() => setOpen(false)}>
|
||||
Close
|
||||
|
|
@ -292,11 +273,7 @@ const App = () => {
|
|||
|
||||
return (
|
||||
<>
|
||||
<SlDrawer
|
||||
label="Drawer"
|
||||
open={open} onSlAfterHide={() => setOpen(false)}
|
||||
style={{ '--size': '50vw' }}
|
||||
>
|
||||
<SlDrawer label="Drawer" open={open} onSlAfterHide={() => setOpen(false)} style={{ '--size': '50vw' }}>
|
||||
This drawer is always 50% of the viewport.
|
||||
<SlButton slot="footer" variant="primary" onClick={() => setOpen(false)}>
|
||||
Close
|
||||
|
|
@ -343,7 +320,7 @@ const App = () => {
|
|||
return (
|
||||
<>
|
||||
<SlDrawer label="Drawer" open={open} onSlAfterHide={() => setOpen(false)}>
|
||||
<div
|
||||
<div
|
||||
style={{
|
||||
height: '150vh',
|
||||
border: 'dashed 2px var(--sl-color-neutral-200)',
|
||||
|
|
@ -369,7 +346,6 @@ By default, drawers will close when the user clicks the close button, clicks the
|
|||
|
||||
To keep the drawer open in such cases, you can cancel the `sl-request-close` event. When canceled, the drawer will remain open and pulse briefly to draw the user's attention to it.
|
||||
|
||||
|
||||
```html preview
|
||||
<sl-drawer label="Drawer" class="drawer-deny-close">
|
||||
This drawer will not close unless you use the button below.
|
||||
|
|
@ -399,9 +375,9 @@ const App = () => {
|
|||
|
||||
return (
|
||||
<>
|
||||
<SlDrawer
|
||||
label="Drawer"
|
||||
open={open}
|
||||
<SlDrawer
|
||||
label="Drawer"
|
||||
open={open}
|
||||
onSlRequestClose={event => event.preventDefault()}
|
||||
onSlAfterHide={() => setOpen(false)}
|
||||
>
|
||||
|
|
@ -441,17 +417,13 @@ By default, the drawer's panel will gain focus when opened. This allows the firs
|
|||
drawer.addEventListener('sl-initial-focus', event => {
|
||||
event.preventDefault();
|
||||
input.focus({ preventScroll: true });
|
||||
});
|
||||
});
|
||||
</script>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { useRef, useState } from 'react';
|
||||
import {
|
||||
SlButton,
|
||||
SlDrawer,
|
||||
SlInput
|
||||
} from '@shoelace-style/shoelace/dist/react';
|
||||
import { SlButton, SlDrawer, SlInput } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => {
|
||||
const input = useRef(null);
|
||||
|
|
@ -464,12 +436,7 @@ const App = () => {
|
|||
|
||||
return (
|
||||
<>
|
||||
<SlDrawer
|
||||
label="Drawer"
|
||||
open={open}
|
||||
onSlInitialFocus={handleInitialFocus}
|
||||
onSlAfterHide={() => setOpen(false)}
|
||||
>
|
||||
<SlDrawer label="Drawer" open={open} onSlInitialFocus={handleInitialFocus} onSlAfterHide={() => setOpen(false)}>
|
||||
<SlInput ref={input} placeholder="I will have focus when the drawer is opened" />
|
||||
<SlButton slot="footer" variant="primary" onClick={() => setOpen(false)}>
|
||||
Close
|
||||
|
|
|
|||
|
|
@ -61,7 +61,7 @@ To set the initial position, use the `position` attribute. If no position is pro
|
|||
|
||||
### Initial Position in Pixels
|
||||
|
||||
To set the intial position in pixels instead of a percentage, use the `position-in-pixels` attribute.
|
||||
To set the initial position in pixels instead of a percentage, use the `position-in-pixels` attribute.
|
||||
|
||||
```html preview
|
||||
<sl-split-panel position-in-pixels="150">
|
||||
|
|
|
|||
|
|
@ -40,9 +40,7 @@ Shoelace components use a [shadow DOM](https://developer.mozilla.org/en-US/docs/
|
|||
Here's an example that modifies buttons with the `tomato-button` class.
|
||||
|
||||
```html preview
|
||||
<sl-button class="tomato-button">
|
||||
Tomato Button
|
||||
</sl-button>
|
||||
<sl-button class="tomato-button"> Tomato Button </sl-button>
|
||||
|
||||
<style>
|
||||
.tomato-button::part(base) {
|
||||
|
|
@ -51,15 +49,15 @@ Here's an example that modifies buttons with the `tomato-button` class.
|
|||
}
|
||||
|
||||
.tomato-button::part(base):hover {
|
||||
background: rgba(255, 99, 71, .1);
|
||||
}
|
||||
background: rgba(255, 99, 71, 0.1);
|
||||
}
|
||||
|
||||
.tomato-button::part(base):active {
|
||||
background: rgba(255, 99, 71, .2);
|
||||
}
|
||||
background: rgba(255, 99, 71, 0.2);
|
||||
}
|
||||
|
||||
.tomato-button::part(base):focus-visible {
|
||||
box-shadow: 0 0 0 3px rgba(255, 99, 71, .33);
|
||||
box-shadow: 0 0 0 3px rgba(255, 99, 71, 0.33);
|
||||
}
|
||||
|
||||
.tomato-button::part(label) {
|
||||
|
|
@ -74,9 +72,9 @@ At first glance, this approach might seem a bit verbose or even limiting, but it
|
|||
|
||||
- The internal structure of a component will likely change as it evolves. By exposing component parts through an API, the internals can be reworked without fear of breaking customizations as long as its parts remain intact.
|
||||
|
||||
- It encourages us to think more about how components are designed and how customizations should be allowed before users can take advantage of them. Once we opt a part into the component's API, it's guaranteed to be supported and can't be removed until a major version of the library is released.
|
||||
- It encourages us to think more about how components are designed and how customizations should be allowed before users can take advantage of them. Once we opt a part into the component's API, it's guaranteed to be supported and can't be removed until a major version of the library is released.
|
||||
|
||||
Most (but not all) components expose parts. You can find them in each component's API documention under the "CSS Parts" section.
|
||||
Most (but not all) components expose parts. You can find them in each component's API documentation under the "CSS Parts" section.
|
||||
|
||||
## Custom Properties
|
||||
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
|
|||
- Improved `<sl-spinner>` track color when used on various backgrounds
|
||||
- Improved a11y in `<sl-radio>` so VoiceOver announces radios properly in a radio group
|
||||
- Improved the API for the experimental `<sl-split-panel>` component by making `position` accept a percentage and adding the `position-in-pixels` attribute
|
||||
- Refactored internal id usage in `<sl-details>`, `<sl-dialog>`, `<sl-drawer>`, and `<sl-dropdow>`
|
||||
- Refactored internal id usage in `<sl-details>`, `<sl-dialog>`, `<sl-drawer>`, and `<sl-dropdown>`
|
||||
- Removed `position: relative` from the common component stylesheet
|
||||
|
||||
## 2.0.0-beta.63
|
||||
|
|
@ -55,9 +55,9 @@ This release improves the dark theme by shifting luminance in both directions, s
|
|||
|
||||
In [beta.48](#_200-beta48), I introduced a change to color tokens that allowed you to access alpha values at the expense of a verbose, non-standard syntax. After considering feedback from the community, I've decided to revert this change so the `rgb()` function is no longer required. Many users reported never using it for alpha, and even more reported having trouble remembering to use `rgb()` and that it was causing more harm than good.
|
||||
|
||||
Furthermore, both Safari and Firefox have implemented [`color-mix()`](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-mix()) behind a flag, so access to alpha channels and other capabilities are coming to the browser soon.
|
||||
Furthermore, both Safari and Firefox have implemented [`color-mix()`](<https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-mix()>) behind a flag, so access to alpha channels and other capabilities are coming to the browser soon.
|
||||
|
||||
If you're using color tokens in your own stylesheet, simply remove the `rgb()` to update to this version.
|
||||
If you're using color tokens in your own stylesheet, simply remove the `rgb()` to update to this version.
|
||||
|
||||
```css
|
||||
.your-styles {
|
||||
|
|
@ -231,9 +231,9 @@ This release also fixes a critical bug in the color scale where `--sl-color-neut
|
|||
|
||||
## 2.0.0-beta.48
|
||||
|
||||
This release improves theming by offering both light and dark themes that can be used autonomously. It also improves contrast in most components, adds a variety of new color primitives, and changes the way color tokens are consumed.
|
||||
This release improves theming by offering both light and dark themes that can be used autonomously. It also improves contrast in most components, adds a variety of new color primitives, and changes the way color tokens are consumed.
|
||||
|
||||
Previously, color tokens were in hexidecimal format. Now, Shoelace now uses an `R G B` format that requires you to use the `rgb()` function in your CSS.
|
||||
Previously, color tokens were in hexadecimal format. Now, Shoelace now uses an `R G B` format that requires you to use the `rgb()` function in your CSS.
|
||||
|
||||
```css
|
||||
.example {
|
||||
|
|
@ -288,7 +288,7 @@ This release improves how component dependencies are imported. If you've been ch
|
|||
- Fixed a bug where tabbing into `<sl-radio-group>` would not always focus the checked radio
|
||||
- Fixed a bug in component styles that prevented the box sizing reset from being applied
|
||||
- Fixed a regression in `<sl-color-picker>` where dragging the grid handle wasn't smooth
|
||||
- Fixed a bug where slot detection could incorrecly match against slots of child elements [#481](https://github.com/shoelace-style/shoelace/pull/481)
|
||||
- Fixed a bug where slot detection could incorrectly match against slots of child elements [#481](https://github.com/shoelace-style/shoelace/pull/481)
|
||||
- Fixed a bug in `<sl-input>` where focus would move to the end of the input when typing in Safari [#480](https://github.com/shoelace-style/shoelace/issues/480)
|
||||
- Improved base path utility logic
|
||||
|
||||
|
|
@ -325,7 +325,7 @@ The docs have been updated to use the new `custom-elements.json` file. If you're
|
|||
- Added `sl-request-close` event to `<sl-dialog>` and `<sl-drawer>`
|
||||
- Added `dialog.denyClose` and `drawer.denyClose` animations
|
||||
- Fixed a bug in `<sl-color-picker>` where setting `value` immediately wouldn't trigger an update
|
||||
- Fixed a bug in `<sl-dialog>` and `<sl-drawer>` where setting `open` intially didn't set a focus trap
|
||||
- Fixed a bug in `<sl-dialog>` and `<sl-drawer>` where setting `open` initially didn't set a focus trap
|
||||
- Fixed a bug that resulted in form controls having incorrect validity when `disabled` was initially set [#473](https://github.com/shoelace-style/shoelace/issues/473)
|
||||
- Fixed a bug in the docs that caused the metadata file to be requested twice
|
||||
- Fixed a bug where tabbing out of a modal would cause the browser to lag [#466](https://github.com/shoelace-style/shoelace/issues/466)
|
||||
|
|
@ -349,7 +349,7 @@ The docs have been updated to use the new `custom-elements.json` file. If you're
|
|||
|
||||
- Added `?` to optional arguments in methods tables in the docs
|
||||
- Added the `scrollPosition()` method to `<sl-textarea>` to get/set scroll position
|
||||
- Added intial tests for `<sl-dialog>`, `<sl-drawer>`, `<sl-dropdown>`, and `<sl-tooltip>`
|
||||
- Added initial tests for `<sl-dialog>`, `<sl-drawer>`, `<sl-dropdown>`, and `<sl-tooltip>`
|
||||
- Fixed a bug in `<sl-tab-group>` where scrollable tab icons were not displaying correctly
|
||||
- Fixed a bug in `<sl-dialog>` and `<sl-drawer>` where preventing clicks on the overlay no longer worked as described [#452](https://github.com/shoelace-style/shoelace/issues/452)
|
||||
- Fixed a bug in `<sl-dialog>` and `<sl-drawer>` where setting initial focus no longer worked as described [#453](https://github.com/shoelace-style/shoelace/issues/453)
|
||||
|
|
@ -368,7 +368,7 @@ Technical reasons aside, canceling these events seldom led to a good user experi
|
|||
- 🚨 BREAKING: `sl-show` and `sl-hide` events are no longer cancelable
|
||||
- Added Iconoir example to the icon docs
|
||||
- Added Web Test Runner
|
||||
- Added intial tests for `<sl-alert>` and `<sl-details>`
|
||||
- Added initial tests for `<sl-alert>` and `<sl-details>`
|
||||
- Changed the `cancelable` default to `false` for the internal `@event` decorator
|
||||
- Fixed a bug where toggling `open` stopped working in `<sl-alert>`, `<sl-dialog>`, `<sl-drawer>`, `<sl-dropdown>`, and `<sl-tooltip>`
|
||||
- Fixed a bug in `<sl-range>` where setting a value outside the default `min` or `max` would clamp the value [#448](https://github.com/shoelace-style/shoelace/issues/448)
|
||||
|
|
@ -579,7 +579,7 @@ The component API remains the same except for the changes noted below. Thanks fo
|
|||
- 🚨 BREAKING: Fixed animations bloat
|
||||
- Removed ~400 baked-in Animista animations because they were causing ~200KB of bloat (they can still be used with custom keyframes)
|
||||
- Reworked animations into a separate module ([`@shoelace-style/animations`](https://github.com/shoelace-style/animations)) so it's more maintainable and animations are sync with the latest version of animate.css
|
||||
- Animation and easing names are now camelcase (e.g. `easeInOut` instead of `ease-in-out`)
|
||||
- Animation and easing names are now camelCase (e.g. `easeInOut` instead of `ease-in-out`)
|
||||
- Added initial E2E tests [#169](https://github.com/shoelace-style/shoelace/pull/169)
|
||||
- Added the `FocusOptions` argument to all components that have a `setFocus()` method
|
||||
- Added `sl-initial-focus` event to `<sl-dialog>` and `<sl-drawer>` so focus can be customized to a specific element
|
||||
|
|
@ -650,7 +650,7 @@ The component API remains the same except for the changes noted below. Thanks fo
|
|||
- Fixed a bug where `<sl-menu-item>` wouldn't render properly in the dark theme
|
||||
- Fixed a bug where `<sl-select>` would show an autocomplete menu
|
||||
- Improved placeholder contrast in dark theme
|
||||
- Updated to Boostrap Icons 1.1.0
|
||||
- Updated to Bootstrap Icons 1.1.0
|
||||
- Updated to Stencil 2.3.0
|
||||
|
||||
## 2.0.0-beta.22
|
||||
|
|
@ -688,7 +688,7 @@ The component API remains the same except for the changes noted below. Thanks fo
|
|||
- Refactored `<sl-icon>` request logic and removed unused cache map
|
||||
- Reworked show/hide logic in `<sl-alert>`, `<sl-dialog>`, and `<sl-drawer>` to not use reflow hacks and the `hidden` attribute
|
||||
- Reworked slot logic in `<sl-card>`, `<sl-dialog>`, and `<sl-drawer>`
|
||||
- Updated to Popper 2.5.3 to address a fixed position bug in Firefox
|
||||
- Updated to Popper 2.5.3 to address a fixed position bug in Firefox
|
||||
|
||||
## 2.0.0-beta.20
|
||||
|
||||
|
|
|
|||
|
|
@ -104,7 +104,7 @@ This will generate a source file, a stylesheet, and a docs page for you. When yo
|
|||
|
||||
Component development occurs _within_ the local docs site. I've found that offering common variations _in the docs_ is more beneficial for users than segmenting demos and code examples into separate tools such as Storybook. This encourages more thorough documentation, streamlines development for maintainers, and simplifies how the project is built. It also reduces installation and startup times significantly.
|
||||
|
||||
There is currently no hot module reloading (HMR), as browsers don't provide a way to unregister custom elements. However, most changes to the source will reload the browser automatically.
|
||||
There is currently no hot module reloading (HMR), as browsers don't provide a way to unregister custom elements. However, most changes to the source will reload the browser automatically.
|
||||
|
||||
For more information about running and building the project locally, refer to `README.md` in the project's root.
|
||||
|
||||
|
|
@ -171,7 +171,7 @@ Components should be composable, meaning you can easily reuse them with and with
|
|||
|
||||
The `<sl-select>` component, for example, makes use of the dropdown, input, menu, and menu item components. Because it's offloading most of its functionality and styles to lower-level components, the select component remains lightweight and its appearance is consistent with other form controls and menus.
|
||||
|
||||
### Component Stucture
|
||||
### Component Structure
|
||||
|
||||
All components have a host element, which is a reference to the `<sl-*>` element itself. Make sure to always set the host element's `display` property to the appropriate value depending on your needs, as the default is `inline` per the custom element spec.
|
||||
|
||||
|
|
@ -225,7 +225,7 @@ Then use the following syntax for comments so they appear in the generated docs.
|
|||
```js
|
||||
/**
|
||||
* @cssproperty --color: The component's text color.
|
||||
* @cssproperty --background-color: The component's background color.
|
||||
* @cssproperty --background-color: The component's background color.
|
||||
*/
|
||||
@customElement('sl-example')
|
||||
export default class SlExample {
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ This integration has been tested with the following:
|
|||
## Instructions
|
||||
|
||||
These instructions assume an out of the box [Laravel 8+ install](https://laravel.com/docs/8.x/installation) that uses [Laravel Mix](https://laravel.com/docs/8.x/mix) to compile assets.
|
||||
Be sure to run `npm install` to install the default Laravel front-end dependencies before installing Shoelace.
|
||||
Be sure to run `npm install` to install the default Laravel front-end dependencies before installing Shoelace.
|
||||
|
||||
### Install the Shoelace package
|
||||
|
||||
|
|
@ -28,68 +28,70 @@ npm install @shoelace-style/shoelace
|
|||
Import Shoelace's default theme (stylesheet) in `/resources/css/app.css`:
|
||||
|
||||
```css
|
||||
@import "/node_modules/@shoelace-style/shoelace/dist/themes/light.css";
|
||||
@import '/node_modules/@shoelace-style/shoelace/dist/themes/light.css';
|
||||
```
|
||||
|
||||
### Import Your Shoelace Components
|
||||
|
||||
Import each Shoelace component you plan to use in `/resources/js/boostrap.js`. Since [Laravel Mix](https://laravel.com/docs/8.x/mix) uses Webpack, use the full path to each component -- as outlined in the [Cherry Picking instructions](https://shoelace.style/getting-started/installation?id=cherry-picking). You can find the full import statement for a component in the *Importing* section of the component's documentation (use the *Bundler* import). Your imports should look similar to:
|
||||
Import each Shoelace component you plan to use in `/resources/js/bootstrap.js`. Since [Laravel Mix](https://laravel.com/docs/8.x/mix) uses Webpack, use the full path to each component -- as outlined in the [Cherry Picking instructions](https://shoelace.style/getting-started/installation?id=cherry-picking). You can find the full import statement for a component in the _Importing_ section of the component's documentation (use the _Bundler_ import). Your imports should look similar to:
|
||||
|
||||
```js
|
||||
import "@shoelace-style/shoelace/dist/components/button/button.js";
|
||||
import "@shoelace-style/shoelace/dist/components/dialog/dialog.js";
|
||||
import "@shoelace-style/shoelace/dist/components/drawer/drawer.js";
|
||||
import "@shoelace-style/shoelace/dist/components/menu/menu.js";
|
||||
import "@shoelace-style/shoelace/dist/components/menu-item/menu-item.js";
|
||||
import '@shoelace-style/shoelace/dist/components/button/button.js';
|
||||
import '@shoelace-style/shoelace/dist/components/dialog/dialog.js';
|
||||
import '@shoelace-style/shoelace/dist/components/drawer/drawer.js';
|
||||
import '@shoelace-style/shoelace/dist/components/menu/menu.js';
|
||||
import '@shoelace-style/shoelace/dist/components/menu-item/menu-item.js';
|
||||
```
|
||||
|
||||
### Set the Base Path
|
||||
|
||||
Add the base path to your Shoelace assets (icons, images, etc.) in `/resources/js/boostrap.js`. The path must point to the same folder where you copy assets to in the next step.
|
||||
Add the base path to your Shoelace assets (icons, images, etc.) in `/resources/js/bootstrap.js`. The path must point to the same folder where you copy assets to in the next step.
|
||||
|
||||
```js
|
||||
import { setBasePath } from "@shoelace-style/shoelace/dist/utilities/base-path.js";
|
||||
setBasePath("/");
|
||||
import { setBasePath } from '@shoelace-style/shoelace/dist/utilities/base-path.js';
|
||||
setBasePath('/');
|
||||
```
|
||||
|
||||
Here's an example `/resources/js/boostrap.js` file, after importing and setting the base path and components.
|
||||
Here's an example `/resources/js/bootstrap.js` file, after importing and setting the base path and components.
|
||||
|
||||
```js
|
||||
import { setBasePath } from "@shoelace-style/shoelace/dist/utilities/base-path.js";
|
||||
setBasePath("/assets");
|
||||
import { setBasePath } from '@shoelace-style/shoelace/dist/utilities/base-path.js';
|
||||
setBasePath('/assets');
|
||||
|
||||
import "@shoelace-style/shoelace/dist/components/button/button.js";
|
||||
import "@shoelace-style/shoelace/dist/components/dialog/dialog.js";
|
||||
import "@shoelace-style/shoelace/dist/components/drawer/drawer.js";
|
||||
import "@shoelace-style/shoelace/dist/components/menu/menu.js";
|
||||
import "@shoelace-style/shoelace/dist/components/menu-item/menu-item.js";
|
||||
import '@shoelace-style/shoelace/dist/components/button/button.js';
|
||||
import '@shoelace-style/shoelace/dist/components/dialog/dialog.js';
|
||||
import '@shoelace-style/shoelace/dist/components/drawer/drawer.js';
|
||||
import '@shoelace-style/shoelace/dist/components/menu/menu.js';
|
||||
import '@shoelace-style/shoelace/dist/components/menu-item/menu-item.js';
|
||||
```
|
||||
|
||||
|
||||
### Configure Laravel Mix
|
||||
|
||||
[Laravel Mix](https://laravel.com/docs/8.x/mix) is a wrapper around Webpack that simplifies configuration. Mix is used by default for compiling front-end assets in Laravel.
|
||||
|
||||
Modify `webpack.mix.js` to add Shoelace's assets to Webpack's build process:
|
||||
|
||||
```js
|
||||
mix.js("resources/js/app.js", "public/js")
|
||||
.postCss("resources/css/app.css", "public/css", [])
|
||||
.copy("node_modules/@shoelace-style/shoelace/dist/assets", "public/assets")
|
||||
mix
|
||||
.js('resources/js/app.js', 'public/js')
|
||||
.postCss('resources/css/app.css', 'public/css', [])
|
||||
.copy('node_modules/@shoelace-style/shoelace/dist/assets', 'public/assets');
|
||||
```
|
||||
|
||||
Consider [extracting vendor libraries](https://laravel.com/docs/8.x/mix#vendor-extraction) to a separate file. This splits frequently updated vendor libraries (like Shoelace) from your front-end application code -- for better long-term caching.
|
||||
Here's an example `webpack.mix.js` file that compiles and splits your JS into `app.js` and `vendor.js` files, and builds an optimized CSS bundle using PostCSS.
|
||||
|
||||
```js
|
||||
mix.js("resources/js/app.js", "public/js")
|
||||
.postCss("resources/css/app.css", "public/css", [])
|
||||
.copy("node_modules/@shoelace-style/shoelace/dist/assets", "public/assets")
|
||||
.extract(); // extracts libraries in node_modules to vendor.js
|
||||
mix
|
||||
.js('resources/js/app.js', 'public/js')
|
||||
.postCss('resources/css/app.css', 'public/css', [])
|
||||
.copy('node_modules/@shoelace-style/shoelace/dist/assets', 'public/assets')
|
||||
.extract(); // extracts libraries in node_modules to vendor.js
|
||||
```
|
||||
|
||||
### Compile Front-End Assets
|
||||
|
||||
Run the [Laravel Mix](https://laravel.com/docs/8.x/mix) npm scripts to build your application's CSS and JavaScript code.
|
||||
Run the [Laravel Mix](https://laravel.com/docs/8.x/mix) npm scripts to build your application's CSS and JavaScript code.
|
||||
|
||||
```bash
|
||||
## build a development bundle
|
||||
|
|
@ -101,16 +103,15 @@ npm run prod
|
|||
|
||||
### Include Front-End Assets in Your Layout File
|
||||
|
||||
Most full-stack Laravel applications use [layouts](https://laravel.com/docs/8.x/blade#building-layouts) to define the basic structure of a page.
|
||||
After compiling your front-end assets (above), include them in your top-level layouts/templates. The following example uses the [Laravel asset helper](https://laravel.com/docs/8.x/helpers#method-asset) to generate a full URL.
|
||||
Most full-stack Laravel applications use [layouts](https://laravel.com/docs/8.x/blade#building-layouts) to define the basic structure of a page.
|
||||
After compiling your front-end assets (above), include them in your top-level layouts/templates. The following example uses the [Laravel asset helper](https://laravel.com/docs/8.x/helpers#method-asset) to generate a full URL.
|
||||
|
||||
```html
|
||||
<script defer src="{{ asset('js/manifest.js') }}"></script>
|
||||
<script defer src="{{ asset('js/vendor.js') }}"></script>
|
||||
<script defer src="{{ asset('/js/app.js') }}"></script>
|
||||
|
||||
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
|
||||
<link href="{{ asset('css/app.css') }}" rel="stylesheet" />
|
||||
```
|
||||
|
||||
Have fun using Shoelace components in your Laravel app!
|
||||
|
||||
|
|
|
|||
|
|
@ -42,16 +42,16 @@ function CustomEls({ URL }) {
|
|||
if (customEls.current) {
|
||||
return;
|
||||
}
|
||||
|
||||
const { setBasePath } = require("@shoelace-style/shoelace/dist/utilities/base-path");
|
||||
|
||||
const { setBasePath } = require('@shoelace-style/shoelace/dist/utilities/base-path');
|
||||
|
||||
setBasePath(`${URL}/static/static`);
|
||||
|
||||
|
||||
// This imports all components
|
||||
require("@shoelace-style/shoelace/dist/shoelace");
|
||||
require('@shoelace-style/shoelace/dist/shoelace');
|
||||
|
||||
// If you want to selectively import components, replace this line with your own definitions
|
||||
// require("@shoelace-style/shoelace/dist/components/button/button");
|
||||
// require('@shoelace-style/shoelace/dist/components/button/button');
|
||||
|
||||
customEls.current = true;
|
||||
}, [URL, customEls]);
|
||||
|
|
@ -77,7 +77,7 @@ function MyApp({ Component, pageProps, URL }) {
|
|||
{process.browser && <CustomEls URL={URL} />}
|
||||
<Component {...pageProps} />
|
||||
</>
|
||||
)
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
|
|
@ -92,7 +92,7 @@ BASE_URL="localhost:3000"
|
|||
Then, modify your `MyApp` class in `_app.js` to pass this process environment into your render:
|
||||
|
||||
```javascript
|
||||
MyApp.getInitialProps = async (context) => {
|
||||
MyApp.getInitialProps = async context => {
|
||||
const URL = process.env.BASE_URL;
|
||||
|
||||
return {
|
||||
|
|
@ -108,8 +108,8 @@ MyApp.getInitialProps = async (context) => {
|
|||
Next we need to add Shoelace's assets to the final build output. To do this, modify `next.config.js` to look like this.
|
||||
|
||||
```javascript
|
||||
const path = require("path");
|
||||
const CopyPlugin = require("copy-webpack-plugin");
|
||||
const path = require('path');
|
||||
const CopyPlugin = require('copy-webpack-plugin');
|
||||
const withPlugins = require('next-compose-plugins');
|
||||
const withTM = require('next-transpile-modules')(['@shoelace-style/shoelace']);
|
||||
|
||||
|
|
@ -130,10 +130,8 @@ module.exports = withPlugins([withTM], {
|
|||
});
|
||||
```
|
||||
|
||||
?> This will copy the files from `node_modules` into your `static` folder on every development serve or build. You may want to avoid commiting these into your repo. To do so, simply add `static/assets` into your `.gitignore` folder
|
||||
?> This will copy the files from `node_modules` into your `static` folder on every development serve or build. You may want to avoid committing these into your repo. To do so, simply add `static/assets` into your `.gitignore` folder
|
||||
|
||||
## Additional Resources
|
||||
|
||||
- There is a third-party [example repo](https://github.com/crutchcorn/nextjs-shoelace-example), courtesy of [crutchcorn](https://github.com/crutchcorn), available to help you get started.
|
||||
|
||||
|
||||
|
|
|
|||
Plik diff jest za duży
Load Diff
13
package.json
13
package.json
|
|
@ -36,7 +36,8 @@
|
|||
"prettier": "prettier --write --loglevel warn .",
|
||||
"create": "plop --plopfile scripts/plop/plopfile.cjs",
|
||||
"test": "web-test-runner \"src/**/*.test.ts\" --node-resolve --playwright --browsers chromium firefox webkit",
|
||||
"test:watch": "web-test-runner \"src/**/*.test.ts\" --node-resolve --playwright --browsers chromium firefox webkit --watch"
|
||||
"test:watch": "web-test-runner \"src/**/*.test.ts\" --node-resolve --playwright --browsers chromium firefox webkit --watch",
|
||||
"spellcheck": "cspell \"**/*.{js,ts,jsx,tsx,json,html,xml,css,scss,sass,md}\""
|
||||
},
|
||||
"dependencies": {
|
||||
"@lit-labs/react": "^1.0.1",
|
||||
|
|
@ -62,6 +63,7 @@
|
|||
"command-line-args": "^5.2.0",
|
||||
"comment-parser": "^1.1.5",
|
||||
"concurrently": "^5.3.0",
|
||||
"cspell": "^5.14.0",
|
||||
"del": "^6.0.0",
|
||||
"download": "^8.0.0",
|
||||
"esbuild": "^0.12.4",
|
||||
|
|
@ -69,10 +71,11 @@
|
|||
"get-port": "^5.1.1",
|
||||
"globby": "^11.0.4",
|
||||
"husky": "^4.3.8",
|
||||
"lint-staged": "^12.1.4",
|
||||
"lunr": "^2.3.9",
|
||||
"mkdirp": "^0.5.5",
|
||||
"plop": "^2.7.4",
|
||||
"prettier": "^2.2.1",
|
||||
"prettier": "^2.5.1",
|
||||
"react": "^17.0.2",
|
||||
"recursive-copy": "^2.0.11",
|
||||
"sinon": "^11.1.1",
|
||||
|
|
@ -83,7 +86,11 @@
|
|||
},
|
||||
"husky": {
|
||||
"hooks": {
|
||||
"pre-commit": "npm run prettier"
|
||||
"pre-commit": "lint-staged"
|
||||
}
|
||||
},
|
||||
"lint-staged": {
|
||||
"*.{js,ts,jsx,tsx,json,html,xml,css,scss,sass,md}": "cspell --no-must-find-files",
|
||||
"*": "prettier --write --ignore-unknown"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ module.exports = {
|
|||
bracketSpacing: true,
|
||||
htmlWhitespaceSensitivity: 'css',
|
||||
insertPragma: false,
|
||||
jsxBracketSameLine: false,
|
||||
bracketSameLine: false,
|
||||
jsxSingleQuote: false,
|
||||
printWidth: 120,
|
||||
proseWrap: 'preserve',
|
||||
|
|
|
|||
|
|
@ -33,10 +33,10 @@ try {
|
|||
|
||||
const formattedStyles = prettier.format(stripComments(css), { parser: 'css' });
|
||||
const filename = path.basename(file).replace('.styles.ts', '.css');
|
||||
const outfile = path.join(themesDir, filename);
|
||||
await fs.writeFile(outfile, formattedStyles, 'utf8');
|
||||
const outFile = path.join(themesDir, filename);
|
||||
await fs.writeFile(outFile, formattedStyles, 'utf8');
|
||||
});
|
||||
} catch (err) {
|
||||
console.error(chalk.red('Error generating styleseheets!'));
|
||||
console.error(chalk.red('Error generating stylesheets!'));
|
||||
console.error(err);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ describe('<sl-breadcrumb-item>', () => {
|
|||
await expect(el).to.be.accessible();
|
||||
});
|
||||
|
||||
it('should hide the seperator from screen readers', async () => {
|
||||
it('should hide the separator from screen readers', async () => {
|
||||
const separator: HTMLSpanElement = el.shadowRoot.querySelector('[part="separator"]');
|
||||
expect(separator).attribute('aria-hidden', 'true');
|
||||
});
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@ describe('<sl-breadcrumb>', () => {
|
|||
});
|
||||
});
|
||||
|
||||
describe('when provided a standard list of el-breadcrumb-item children and an element in the slot "seperator" to support Custom Separators', async () => {
|
||||
describe('when provided a standard list of el-breadcrumb-item children and an element in the slot "separator" to support Custom Separators', async () => {
|
||||
before(async () => {
|
||||
el = await fixture<SlBreadcrumb>(html`
|
||||
<sl-breadcrumb>
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
// cspell:dictionaries lorem-ipsum
|
||||
import { expect, fixture, html, waitUntil } from '@open-wc/testing';
|
||||
import sinon from 'sinon';
|
||||
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
// cspell:dictionaries lorem-ipsum
|
||||
import { expect, fixture, html, waitUntil } from '@open-wc/testing';
|
||||
import sinon from 'sinon';
|
||||
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
// cspell:dictionaries lorem-ipsum
|
||||
import { expect, fixture, html, waitUntil } from '@open-wc/testing';
|
||||
import sinon from 'sinon';
|
||||
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@ interface FormControl {
|
|||
*
|
||||
* @event {{ formData: FormData, formControls: [] }} sl-submit - Emitted when the form is submitted. This event will not
|
||||
* be emitted if any form control inside of it is in an invalid state, unless the form has the `novalidate` attribute.
|
||||
* Note that there is never a need to prevent this event, since it doen't send a GET or POST request like native
|
||||
* Note that there is never a need to prevent this event, since it doesn't send a GET or POST request like native
|
||||
* forms. To "prevent" submission, use a conditional around the XHR request you use to submit the form's data with.
|
||||
*
|
||||
* @csspart base - The component's base wrapper.
|
||||
|
|
|
|||
|
|
@ -125,7 +125,7 @@ export default class SlInput extends LitElement {
|
|||
*/
|
||||
@property({ type: Boolean, reflect: true }) invalid = false;
|
||||
|
||||
/** The input's autocaptialize attribute. */
|
||||
/** The input's autocapitalize attribute. */
|
||||
@property() autocapitalize: 'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters';
|
||||
|
||||
/** The input's autocorrect attribute. */
|
||||
|
|
|
|||
|
|
@ -40,7 +40,7 @@ export default class SlProgressRing extends LitElement {
|
|||
|
||||
//
|
||||
// This block is only required for Safari because it doesn't transition the circle when the custom properties
|
||||
// change, possibly because of a mix of pixel + unitless values in the calc() function. It seems like a Safari bug,
|
||||
// change, possibly because of a mix of pixel + unit-less values in the calc() function. It seems like a Safari bug,
|
||||
// but I couldn't pinpoint it so this works around the problem.
|
||||
//
|
||||
if (changedProps.has('percentage')) {
|
||||
|
|
|
|||
|
|
@ -79,7 +79,7 @@ export default class SlRange extends LitElement {
|
|||
/** The input's step attribute. */
|
||||
@property({ type: Number }) step = 1;
|
||||
|
||||
/** The preferred placedment of the tooltip. */
|
||||
/** The preferred placement of the tooltip. */
|
||||
@property() tooltip: 'top' | 'bottom' | 'none' = 'top';
|
||||
|
||||
/** A function used to format the tooltip's value. */
|
||||
|
|
|
|||
|
|
@ -53,8 +53,8 @@ let id = 0;
|
|||
* @csspart label - The select's label.
|
||||
* @csspart suffix - The select's suffix.
|
||||
* @csspart menu - The select menu, an <sl-menu> element.
|
||||
* @csspart tag - The multiselect option, an <sl-tag> element.
|
||||
* @csspart tags - The container in which multiselect options are rendered.
|
||||
* @csspart tag - The multi select option, an <sl-tag> element.
|
||||
* @csspart tags - The container in which multi select options are rendered.
|
||||
*/
|
||||
@customElement('sl-select')
|
||||
export default class SlSelect extends LitElement {
|
||||
|
|
@ -77,7 +77,7 @@ export default class SlSelect extends LitElement {
|
|||
@state() private displayLabel = '';
|
||||
@state() private displayTags: TemplateResult[] = [];
|
||||
|
||||
/** Enables multiselect. With this enabled, value will be an array. */
|
||||
/** Enables multi select. With this enabled, value will be an array. */
|
||||
@property({ type: Boolean, reflect: true }) multiple = false;
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -38,7 +38,7 @@ export default class SlSplitPanel extends LitElement {
|
|||
|
||||
/**
|
||||
* The current position of the divider from the primary panel's edge as a percentage 0-100. Defaults to 50% of the
|
||||
* container's intial size.
|
||||
* container's initial size.
|
||||
*/
|
||||
@property({ type: Number, reflect: true }) position = 50;
|
||||
|
||||
|
|
|
|||
|
|
@ -60,7 +60,7 @@ export default class SlTag extends LitElement {
|
|||
'tag--medium': this.size === 'medium',
|
||||
'tag--large': this.size === 'large',
|
||||
|
||||
// Modifers
|
||||
// Modifiers
|
||||
'tag--pill': this.pill,
|
||||
'tag--removable': this.removable
|
||||
})}
|
||||
|
|
|
|||
|
|
@ -95,7 +95,7 @@ export default class SlTextarea extends LitElement {
|
|||
*/
|
||||
@property({ type: Boolean, reflect: true }) invalid = false;
|
||||
|
||||
/** The textarea's autocaptialize attribute. */
|
||||
/** The textarea's autocapitalize attribute. */
|
||||
@property() autocapitalize: 'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters';
|
||||
|
||||
/** The textarea's autocorrect attribute. */
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ export function formatBytes(bytes: number, options: FormatBytesOptions) {
|
|||
);
|
||||
|
||||
const byteUnits = ['B', 'kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
|
||||
const bitUnits = ['b', 'kbit', 'Mbit', 'Gbit', 'Tbit', 'Pbit', 'Ebit', 'Zbit', 'Ybit'];
|
||||
const bitUnits = ['b', 'kbit', 'Mbit', 'Gbit', 'Tbit', 'Pbit', 'Ebit', 'Zbit', 'Ybit']; // cspell:disable-line
|
||||
const units = options.unit === 'bytes' ? byteUnits : bitUnits;
|
||||
const isNegative = bytes < 0;
|
||||
|
||||
|
|
|
|||
Ładowanie…
Reference in New Issue