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

feat(grid)!: replace as with tag prop

Browse source
This commit is contained in:
Eric Liu 2023-01-08 14:19:30 -08:00
commit 0752447667
4 changed files with 38 additions and 59 deletions
Download patch file Download diff file Expand all files Collapse all files

26
COMPONENT_INDEX.md
View file

@ -1542,22 +1542,22 @@ None.
### Props ### Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description | | Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :------------ | :------- | :--------------- | :------- | -------------------- | ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | :------------ | :------- | :--------------- | :------- | -------------------- | ------------------ | ---------------------------------------------------------- |
| as | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to render a custom HTML element<br />Props are destructured as `props` in the default slot (e.g., &lt;Grid let:props&gt;&lt;header {...props}&gt;...&lt;/header&gt;&lt;/Grid&gt;) | | tag | No | <code>let</code> | No | <code>string</code> | <code>"div"</code> | Specify the element tag |
| condensed | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the condensed variant | | condensed | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the condensed variant |
| narrow | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the narrow variant | | narrow | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the narrow variant |
| fullWidth | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the fullWidth variant | | fullWidth | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the fullWidth variant |
| noGutter | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to remove the gutter | | noGutter | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to remove the gutter |
| noGutterLeft | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to remove the left gutter | | noGutterLeft | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to remove the left gutter |
| noGutterRight | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to remove the right gutter | | noGutterRight | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to remove the right gutter |
| padding | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to add top and bottom padding to all columns | | padding | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to add top and bottom padding to all columns |
### Slots ### Slots
| Slot name | Default | Props | Fallback | | Slot name | Default | Props | Fallback |
| :-------- | :------ | :-------------------------------------------------------------- | :------- | | :-------- | :------ | :---- | :------- |
| -- | Yes | <code>{ props: { class: string; [key: string]: any; } } </code> | -- | | -- | Yes | -- | -- |
### Events ### Events

16
docs/src/COMPONENT_API.json
View file

@ -4584,11 +4584,11 @@
"filePath": "src/Grid/Grid.svelte", "filePath": "src/Grid/Grid.svelte",
"props": [ "props": [
{ {
"name": "as", "name": "tag",
"kind": "let", "kind": "let",
"description": "Set to `true` to render a custom HTML element\nProps are destructured as `props` in the default slot (e.g., <Grid let:props><header {...props}>...</header></Grid>)", "description": "Specify the element tag",
"type": "boolean", "type": "string",
"value": "false", "value": "\"div\"",
"isFunction": false, "isFunction": false,
"isFunctionDeclaration": false, "isFunctionDeclaration": false,
"isRequired": false, "isRequired": false,
@ -4681,13 +4681,7 @@
} }
], ],
"moduleExports": [], "moduleExports": [],
"slots": [ "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
{
"name": "__default__",
"default": true,
"slot_props": "{ props: { class: string; [key: string]: any; } }"
}
],
"events": [], "events": [],
"typedefs": [], "typedefs": [],
"rest_props": { "type": "Element", "name": "div" } "rest_props": { "type": "Element", "name": "div" }

46
src/Grid/Grid.svelte
View file

@ -1,14 +1,10 @@
<script> <script>
/** /**
* @restProps {div} * @restProps {div}
* @slot {{ props: { class: string; [key: string]: any; } }}
*/ */
/** /** Specify the element tag */
* Set to `true` to render a custom HTML element export let tag = "div";
* Props are destructured as `props` in the default slot (e.g., <Grid let:props><header {...props}>...</header></Grid>)
*/
export let as = false;
/** Set to `true` to use the condensed variant */ /** Set to `true` to use the condensed variant */
export let condensed = false; export let condensed = false;
@ -30,29 +26,19 @@
/** Set to `true` to add top and bottom padding to all columns */ /** Set to `true` to add top and bottom padding to all columns */
export let padding = false; export let padding = false;
$: props = {
...$$restProps,
class: [
$$restProps.class,
"bx--grid",
condensed && "bx--grid--condensed",
narrow && "bx--grid--narrow",
fullWidth && "bx--grid--full-width",
noGutter && "bx--no-gutter",
noGutterLeft && "bx--no-gutter--left",
noGutterRight && "bx--no-gutter--right",
padding && "bx--row-padding",
]
.filter(Boolean)
.join(" "),
};
</script> </script>
{#if as} <svelte:element
<slot props="{props}" /> this="{tag}"
{:else} class:bx--grid="{true}"
<div {...props}> class:bx--grid--condensed="{condensed}"
<slot /> class:bx--grid--narrow="{narrow}"
</div> class:bx--grid--full-width="{fullWidth}"
{/if} class:bx--no-gutter="{noGutter}"
class:bx--no-gutter--left="{noGutterLeft}"
class:bx--no-gutter--right="{noGutterRight}"
class:bx--row-padding="{padding}"
{...$$restProps}
>
<slot />
</svelte:element>

9
types/Grid/Grid.svelte.d.ts vendored
View file

@ -4,11 +4,10 @@ import type { SvelteComponentTyped } from "svelte";
export interface GridProps export interface GridProps
extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> { extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
/** /**
* Set to `true` to render a custom HTML element * Specify the element tag
* Props are destructured as `props` in the default slot (e.g., <Grid let:props><header {...props}>...</header></Grid>) * @default "div"
* @default false
*/ */
as?: boolean; tag?: string;
/** /**
* Set to `true` to use the condensed variant * Set to `true` to use the condensed variant
@ -56,5 +55,5 @@ export interface GridProps
export default class Grid extends SvelteComponentTyped< export default class Grid extends SvelteComponentTyped<
GridProps, GridProps,
{}, {},
{ default: { props: { class: string; [key: string]: any } } } { default: {} }
> {} > {}