mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-18 11:36: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 ### Props
| Prop name | Kind | Reactive | Type | Default value | Description | | 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> | -- | | 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> | -- | -- | | 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> | -- | | 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 ### Slots
| Slot name | Default | Props | Fallback | | Slot name | Default | Props | Fallback |
| :-------- | :------ | :----------------------------------------------------------------------------- | :------- | | :-------- | :------ | :------------------------------------------------------------------------------ | :------- |
| -- | Yes | <code>{ sizes: Record<BreakpointSize, boolean>, size: BreakpointSize } </code> | -- | | -- | Yes | <code>{ size: BreakpointSize; sizes: Record<BreakpointSize, boolean>; } </code> | -- |
### Events ### Events

9
docs/src/COMPONENT_API.json
View file

@ -351,6 +351,7 @@
{ {
"name": "size", "name": "size",
"kind": "let", "kind": "let",
"description": "Determine the current Carbon grid breakpoint size",
"type": "BreakpointSize", "type": "BreakpointSize",
"isFunction": false, "isFunction": false,
"constant": false, "constant": false,
@ -359,8 +360,9 @@
{ {
"name": "sizes", "name": "sizes",
"kind": "let", "kind": "let",
"description": "Carbon grid sizes as an object",
"type": "Record<BreakpointSize, boolean>", "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, "isFunction": false,
"constant": false, "constant": false,
"reactive": true "reactive": true
@ -368,8 +370,9 @@
{ {
"name": "breakpoints", "name": "breakpoints",
"kind": "const", "kind": "const",
"description": "Reference the Carbon grid breakpoints",
"type": "Record<BreakpointSize, BreakpointValue>", "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, "isFunction": false,
"constant": true, "constant": true,
"reactive": false "reactive": false
@ -379,7 +382,7 @@
{ {
"name": "__default__", "name": "__default__",
"default": true, "default": true,
"slot_props": "{ sizes: Record<BreakpointSize, boolean>, size: BreakpointSize }" "slot_props": "{ size: BreakpointSize; sizes: Record<BreakpointSize, boolean>; }"
} }
], ],
"events": [ "events": [

22
src/Breakpoint/Breakpoint.svelte
View file

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