mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-18 03:26:36 +00:00
Code Issues Projects Releases Packages Wiki Activity

refactor(breakpoint): add prop descriptions, type slot

Browse source
This commit is contained in:
Eric Y Liu 2021-07-07 12:25:39 -07:00
commit 0afbfbf609
4 changed files with 37 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

16
COMPONENT_INDEX.md
View file

@ -357,17 +357,17 @@ export type BreakpointValue = 320 | 672 | 1056 | 1312 | 1584;
### Props
| Prop name | Kind | Reactive | Type | Default value | Description |
| :---------- | :----------------- | :------- | :--------------------------------------------------- | ------------------------------------------------------------------------- | ----------- |
| sizes | <code>let</code> | Yes | <code>Record<BreakpointSize, boolean></code> | <code>{ sm: false, md: false, lg: false, xlg: false, max: false, }</code> | -- |
| size | <code>let</code> | Yes | <code>BreakpointSize</code> | -- | -- |
| breakpoints | <code>const</code> | No | <code>Record<BreakpointSize, BreakpointValue></code> | <code>{ sm: 320, md: 672, lg: 1056, xlg: 1312, max: 1584, }</code> | -- |
| Prop name | Kind | Reactive | Type | Default value | Description |
| :---------- | :----------------- | :------- | :--------------------------------------------------- | ------------------------------------------------------------------------- | ------------------------------------------------- |
| sizes | <code>let</code> | Yes | <code>Record<BreakpointSize, boolean></code> | <code>{ sm: false, md: false, lg: false, xlg: false, max: false, }</code> | Carbon grid sizes as an object |
| size | <code>let</code> | Yes | <code>BreakpointSize</code> | -- | Determine the current Carbon grid breakpoint size |
| breakpoints | <code>const</code> | No | <code>Record<BreakpointSize, BreakpointValue></code> | <code>{ sm: 320, md: 672, lg: 1056, xlg: 1312, max: 1584, }</code> | Reference the Carbon grid breakpoints |
### Slots
| Slot name | Default | Props | Fallback |
| :-------- | :------ | :----------------------------------------------------------------------------- | :------- |
| -- | Yes | <code>{ sizes: Record<BreakpointSize, boolean>, size: BreakpointSize } </code> | -- |
| Slot name | Default | Props | Fallback |
| :-------- | :------ | :------------------------------------------------------------------------------ | :------- |
| -- | Yes | <code>{ size: BreakpointSize; sizes: Record<BreakpointSize, boolean>; } </code> | -- |
### Events

9
docs/src/COMPONENT_API.json
View file

@ -351,6 +351,7 @@
{
"name": "size",
"kind": "let",
"description": "Determine the current Carbon grid breakpoint size",
"type": "BreakpointSize",
"isFunction": false,
"constant": false,
@ -359,8 +360,9 @@
{
"name": "sizes",
"kind": "let",
"description": "Carbon grid sizes as an object",
"type": "Record<BreakpointSize, boolean>",
"value": "{ sm: false, md: false, lg: false, xlg: false, max: false, }",
"value": "{ sm: false, md: false, lg: false, xlg: false, max: false, }",
"isFunction": false,
"constant": false,
"reactive": true
@ -368,8 +370,9 @@
{
"name": "breakpoints",
"kind": "const",
"description": "Reference the Carbon grid breakpoints",
"type": "Record<BreakpointSize, BreakpointValue>",
"value": "{ sm: 320, md: 672, lg: 1056, xlg: 1312, max: 1584, }",
"value": "{ sm: 320, md: 672, lg: 1056, xlg: 1312, max: 1584, }",
"isFunction": false,
"constant": true,
"reactive": false
@ -379,7 +382,7 @@
{
"name": "__default__",
"default": true,
"slot_props": "{ sizes: Record<BreakpointSize, boolean>, size: BreakpointSize }"
"slot_props": "{ size: BreakpointSize; sizes: Record<BreakpointSize, boolean>; }"
}
],
"events": [

22
src/Breakpoint/Breakpoint.svelte
View file

@ -3,12 +3,19 @@
* @typedef {"sm" | "md" | "lg" | "xlg" | "max"} BreakpointSize
* @typedef {320 | 672 | 1056 | 1312 | 1584} BreakpointValue
* @event {{ size: BreakpointSize; breakpointValue: BreakpointValue; }} match
* @slot {{ size: BreakpointSize; sizes: Record<BreakpointSize, boolean>; }}
*/
/** @type {BreakpointSize} */
/**
* Determine the current Carbon grid breakpoint size
* @type {BreakpointSize}
*/
export let size = undefined;
/** @type {Record<BreakpointSize, boolean>} */
/**
* Carbon grid sizes as an object
* @type {Record<BreakpointSize, boolean>}
*/
export let sizes = {
sm: false,
md: false,
@ -17,7 +24,10 @@
max: false,
};
/** @type {Record<BreakpointSize, BreakpointValue>} */
/**
* Reference the Carbon grid breakpoints
* @type {Record<BreakpointSize, BreakpointValue>}
*/
export const breakpoints = {
sm: 320,
md: 672,
@ -62,6 +72,9 @@
sizes = { ...sizes };
sizes[size] = matches;
if (matches)
dispatch("match", { size, breakpointValue: breakpoints[size] });
}
matchers.forEach(([size, queryList]) =>
@ -81,8 +94,7 @@
if (sizes.lg) size = "lg";
if (sizes.xlg) size = "xlg";
if (sizes.max) size = "max";
if (size) dispatch("match", { size, breakpointValue: breakpoints[size] });
}
</script>
<slot sizes="{sizes}" size="{size}" />
<slot size="{size}" sizes="{sizes}" />

7
types/Breakpoint/Breakpoint.d.ts vendored
View file

@ -6,14 +6,19 @@ export type BreakpointSize = "sm" | "md" | "lg" | "xlg" | "max";
export type BreakpointValue = 320 | 672 | 1056 | 1312 | 1584;
export interface BreakpointProps {
/**
* Determine the current Carbon grid breakpoint size
*/
size?: BreakpointSize;
/**
* Carbon grid sizes as an object
* @default { sm: false, md: false, lg: false, xlg: false, max: false, }
*/
sizes?: Record<BreakpointSize, boolean>;
/**
* Reference the Carbon grid breakpoints
* @constant
* @default { sm: 320, md: 672, lg: 1056, xlg: 1312, max: 1584, }
*/
@ -28,5 +33,5 @@ export default class Breakpoint extends SvelteComponentTyped<
breakpointValue: BreakpointValue;
}>;
},
{ default: { sizes: Record<BreakpointSize, boolean>; size: BreakpointSize } }
{ default: { size: BreakpointSize; sizes: Record<BreakpointSize, boolean> } }
> {}