mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-15 02:11:05 +00:00
Code Issues Projects Releases Packages Wiki Activity

feat(loading): integrate Loading, InlineLoading with v11

Browse source
This commit is contained in:
Eric Liu 2024-04-23 22:27:16 -07:00
commit 28c59a97bb
5 changed files with 35 additions and 49 deletions
Download patch file Download diff file Expand all files Collapse all files

10
COMPONENT_INDEX.md
View file

@ -1911,11 +1911,11 @@ None.
### Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :-------------- | :------- | :--------------- | :------- | ------------------------------------------------------------------------ | ---------------------- | -------------------------------------------------------------------------------------------------------------------- |
| :-------------- | :------- | :--------------- | :------- | ------------------------------------------------------------------------ | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------ |
| status | No | <code>let</code> | No | <code>"active" &#124; "inactive" &#124; "finished" &#124; "error"</code> | <code>"active"</code> | Set the loading status |
| description | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Set the loading description |
| iconDescription | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify a description for the loading icon.<br />Defaults to the `status` prop for the "error" and "finished" states |
| successDelay | No | <code>let</code> | No | <code>number</code> | <code>1500</code> | Specify the timeout delay (ms) after `status` is set to "success" |
| iconDescription | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify a description for the loading icon.<br />Defaults to the `status` value for the<br /> "error" and "finished" states. |
| successDelay | No | <code>let</code> | No | <code>number</code> | <code>1500</code> | Specify the timeout delay (ms) after `status` is set to "finished".<br />The `on:success` event will be dispatched after this delay. |
### Slots
@ -1925,10 +1925,6 @@ None.
| Event name | Type | Detail |
| :--------- | :--------- | :---------------- |
| click | forwarded | -- |
| mouseover | forwarded | -- |
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
| success | dispatched | <code>null</code> |
## `InlineNotification`

12
docs/src/COMPONENT_API.json
View file

@ -5543,7 +5543,7 @@
{
"name": "iconDescription",
"kind": "let",
"description": "Specify a description for the loading icon.\nDefaults to the `status` prop for the \"error\" and \"finished\" states",
"description": "Specify a description for the loading icon.\nDefaults to the `status` value for the\n \"error\" and \"finished\" states.",
"type": "string",
"isFunction": false,
"isFunctionDeclaration": false,
@ -5554,7 +5554,7 @@
{
"name": "successDelay",
"kind": "let",
"description": "Specify the timeout delay (ms) after `status` is set to \"success\"",
"description": "Specify the timeout delay (ms) after `status` is set to \"finished\".\nThe `on:success` event will be dispatched after this delay.",
"type": "number",
"value": "1500",
"isFunction": false,
@ -5566,13 +5566,7 @@
],
"moduleExports": [],
"slots": [],
"events": [
{ "type": "forwarded", "name": "click", "element": "div" },
{ "type": "forwarded", "name": "mouseover", "element": "div" },
{ "type": "forwarded", "name": "mouseenter", "element": "div" },
{ "type": "forwarded", "name": "mouseleave", "element": "div" },
{ "type": "dispatched", "name": "success", "detail": "null" }
],
"events": [{ "type": "dispatched", "name": "success", "detail": "null" }],
"typedefs": [],
"rest_props": { "type": "Element", "name": "div" }
},

32
src/InlineLoading/InlineLoading.svelte
View file

@ -1,4 +1,6 @@
<script>
// @ts-check
/**
* Set the loading status
* @type {"active" | "inactive" | "finished" | "error"}
@ -13,21 +15,27 @@
/**
* Specify a description for the loading icon.
* Defaults to the `status` prop for the "error" and "finished" states
* Defaults to the `status` value for the
* "error" and "finished" states.
* @type {string}
*/
export let iconDescription = undefined;
/** Specify the timeout delay (ms) after `status` is set to "success" */
/**
* Specify the timeout delay (ms) after `status` is set to "finished".
* The `on:success` event will be dispatched after this delay.
*/
export let successDelay = 1500;
import { createEventDispatcher, afterUpdate, onMount } from "svelte";
import { createEventDispatcher, onMount } from "svelte";
import CheckmarkFilled from "../icons/CheckmarkFilled.svelte";
import ErrorFilled from "../icons/ErrorFilled.svelte";
import Loading from "../Loading/Loading.svelte";
/** @type {import("svelte").EventDispatcher<{ success: null }>} */
const dispatch = createEventDispatcher();
/** @type {NodeJS.Timeout} */
let timeout = undefined;
onMount(() => {
@ -36,26 +44,16 @@
};
});
afterUpdate(() => {
if (status === "finished") {
$: if (status === "finished") {
if (timeout) clearTimeout(timeout);
timeout = setTimeout(() => {
dispatch("success");
}, successDelay);
}
});
</script>
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
<!-- svelte-ignore a11y-no-static-element-interactions -->
<div
class:bx--inline-loading="{true}"
aria-live="assertive"
{...$$restProps}
on:click
on:mouseover
on:mouseenter
on:mouseleave
>
<div class:bx--inline-loading="{true}" aria-live="assertive" {...$$restProps}>
<div class:bx--inline-loading__animation="{true}">
{#if status === "error"}
<ErrorFilled

2
src/Loading/Loading.svelte
View file

@ -1,4 +1,6 @@
<script>
// @ts-check
/** Set to `true` to use the small variant */
export let small = false;

14
types/InlineLoading/InlineLoading.svelte.d.ts vendored
View file

@ -18,13 +18,15 @@ export interface InlineLoadingProps extends RestProps {
/**
* Specify a description for the loading icon.
* Defaults to the `status` prop for the "error" and "finished" states
* Defaults to the `status` value for the
* "error" and "finished" states.
* @default undefined
*/
iconDescription?: string;
/**
* Specify the timeout delay (ms) after `status` is set to "success"
* Specify the timeout delay (ms) after `status` is set to "finished".
* The `on:success` event will be dispatched after this delay.
* @default 1500
*/
successDelay?: number;
@ -34,12 +36,6 @@ export interface InlineLoadingProps extends RestProps {
export default class InlineLoading extends SvelteComponentTyped<
InlineLoadingProps,
{
click: WindowEventMap["click"];
mouseover: WindowEventMap["mouseover"];
mouseenter: WindowEventMap["mouseenter"];
mouseleave: WindowEventMap["mouseleave"];
success: CustomEvent<null>;
},
{ success: CustomEvent<null> },
{}
> {}