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

Some fixes

Browse source
This commit is contained in:
Richard O'flynn 2020-11-30 21:31:41 +00:00
commit 184c3d9219
13 changed files with 95 additions and 32710 deletions
Download patch file Download diff file Expand all files Collapse all files

15
COMPONENT_INDEX.md
View file

@ -2697,8 +2697,8 @@ None.
| Prop name | Kind | Reactive | Type | Default value | Description |
| :-------------- | :--------------- | :------- | :---------------------------------------- | ------------------------------------------------ | -------------------------------------------------------- |
| ref | <code>let</code> | Yes | <code>null &#124; HTMLInputElement</code> | <code>null</code> | Obtain a reference to the input HTML element |
| light | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
| checked | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to check the tile |
| light | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
| value | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the value of the radio input |
| title | <code>let</code> | No | <code>string</code> | <code>"title"</code> | Specify the title of the selectable tile |
| tabindex | <code>let</code> | No | <code>string</code> | <code>"0"</code> | Specify the tabindex |
@ -2727,12 +2727,11 @@ None.
### Props
| Prop name | Kind | Reactive | Type | Default value | Description |
| :------------ | :--------------- | :------- | :------------------- | ------------------ | ----------------------------------------- |
| selectedValue | <code>let</code> | Yes | <code>string</code> | -- | Specify the selected tile value |
| disabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the tile group |
| light | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
| legend | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the legend text |
| Prop name | Kind | Reactive | Type | Default value | Description |
| :------------ | :--------------- | :------- | :------------------- | ------------------ | --------------------------------------- |
| selectedValue | <code>let</code> | Yes | <code>string</code> | -- | Specify the selected tile value |
| disabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the tile group |
| legend | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the legend text |
### Slots
@ -2931,8 +2930,8 @@ None.
| Prop name | Kind | Reactive | Type | Default value | Description |
| :-------------- | :--------------- | :------- | :---------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------- |
| ref | <code>let</code> | Yes | <code>null &#124; HTMLInputElement</code> | <code>null</code> | Obtain a reference to the input HTML element |
| light | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
| selected | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to select the tile |
| light | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
| title | <code>let</code> | No | <code>string</code> | <code>"title"</code> | Specify the title of the selectable tile |
| value | <code>let</code> | No | <code>string</code> | <code>"value"</code> | Specify the value of the selectable tile |
| tabindex | <code>let</code> | No | <code>string</code> | <code>"0"</code> | Specify the tabindex |

16
docs/src/COMPONENT_API.json
View file

@ -3356,7 +3356,7 @@
{ "type": "forwarded", "name": "mouseleave", "element": "table" }
],
"typedefs": [],
"rest_props": { "type": "Element", "name": "div" },
"rest_props": { "type": "Element", "name": "table" },
"extends": {
"interface": "DataTableHeader",
"import": "\"../DataTable/DataTable\""
@ -8534,7 +8534,7 @@
"value": "false",
"isFunction": false,
"constant": false,
"reactive": true
"reactive": false
},
{
"name": "title",
@ -8640,7 +8640,7 @@
"value": "false",
"isFunction": false,
"constant": false,
"reactive": true
"reactive": false
},
{
"name": "value",
@ -8787,16 +8787,6 @@
"constant": false,
"reactive": false
},
{
"name": "light",
"kind": "let",
"description": "Set to `true` to enable the light variant",
"type": "boolean",
"value": "false",
"isFunction": false,
"constant": false,
"reactive": false
},
{
"name": "legend",
"kind": "let",

8
docs/src/pages/components/RadioTile.svx
View file

@ -29,14 +29,14 @@ components: ["RadioTileGroup", "RadioTile"]
### Light variant
<RadioTileGroup light legend="Service pricing tiers">
<RadioTile value="0" checked>
<RadioTileGroup legend="Service pricing tiers">
<RadioTile light value="0" checked>
Lite plan
</RadioTile>
<RadioTile value="1">
<RadioTile light value="1">
Standard plan
</RadioTile>
<RadioTile value="2">
<RadioTile light value="2">
Plus plan
</RadioTile>
</TileGroup>

16
docs/src/pages/components/SelectableTile.svx
View file

@ -9,34 +9,34 @@ components: ["SelectableTile", "SelectableTileGroup"]
### Multi-selectable tiles
<SelectableTileGroup legend="Select the options you require" light>
<SelectableTileGroup legend="Select the options you require">
<SelectableTile title="Option 1" selected>
Option 1
</SelectableTile>
<SelectableTile title="Option 2" selected>
Option 2
</SelectableTile>
<SelectableTile title="Option 3£>
<SelectableTile title="Option 3">
Option 3
</SelectableTile>
<SelectableTile light title="Option 4£>
<SelectableTile light title="Option 4">
Option 4 (light variant)
</SelectableTile>
</div>
### Multi-selectable tiles with light variant
<SelectableTileGroup light legend="Select the options you require" light>
<SelectableTile title="Option 1" selected>
<SelectableTileGroup legend="Select the options you require" light>
<SelectableTile light title="Option 1" selected>
Option 1
</SelectableTile>
<SelectableTile title="Option 2" selected>
<SelectableTile light title="Option 2" selected>
Option 2
</SelectableTile>
<SelectableTile title="Option 3£>
<SelectableTile light title="Option 3">
Option 3
</SelectableTile>
<SelectableTile title="Option 4£>
<SelectableTile light title="Option 4">
Option 4
</SelectableTile>
</div>

4136
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

28525
palimpsest/package-lock.json generated
View file

File diff suppressed because it is too large Load diff

8
src/DataTableSkeleton/DataTableSkeleton.svelte
View file

@ -41,11 +41,7 @@
);
</script>
<div
class:bx--skeleton="{true}"
class:bx--data-table-container="{true}"
{...$$restProps}
>
<div class:bx--skeleton="{true}" class:bx--data-table-container="{true}">
{#if showHeader}
<div class:bx--data-table-header="{true}">
<div class:bx--data-table-header__title="{true}"></div>
@ -64,6 +60,7 @@
</section>
{/if}
<table
{...$$restProps}
class:bx--skeleton="{true}"
class:bx--data-table="{true}"
class:bx--data-table--compact="{size === 'compact'}"
@ -74,6 +71,7 @@
on:mouseover
on:mouseenter
on:mouseleave
{...$$restProps}
>
<thead>
<tr>

4
src/Tile/RadioTile.svelte
View file

@ -29,9 +29,7 @@
import { getContext } from "svelte";
import CheckmarkFilled16 from "carbon-icons-svelte/lib/CheckmarkFilled16";
const { _light, add, update, selectedValue } = getContext("RadioTileGroup");
light = light || _light;
const { add, update, selectedValue } = getContext("RadioTileGroup");
add({ value, checked });

4
src/Tile/RadioTileGroup.svelte
View file

@ -8,9 +8,6 @@
/** Set to `true` to disable the tile group */
export let disabled = false;
/** Set to `true` to enable the light variant */
export let light = false;
/** Specify the legend text */
export let legend = "";
@ -21,7 +18,6 @@
const _selectedValue = writable(selectedValue);
setContext("RadioTileGroup", {
_light: light,
selectedValue: _selectedValue,
add: ({ checked, value }) => {
if (checked) {

4
src/Tile/SelectableTile.svelte
View file

@ -32,9 +32,7 @@
import { getContext } from "svelte";
import CheckmarkFilled16 from "carbon-icons-svelte/lib/CheckmarkFilled16";
const { _light, update, selectedValues } = getContext("SelectableTileGroup");
light = light || _light;
const { update, selectedValues } = getContext("SelectableTileGroup");
update({ value, selected });

2
types/DataTableSkeleton/DataTableSkeleton.d.ts vendored
View file

@ -3,7 +3,7 @@ import { DataTableHeader } from "../DataTable/DataTable";
export interface DataTableSkeletonProps
extends DataTableHeader,
svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["table"]> {
/**
* Specify the number of columns
* Superseded by `headers` if `headers` is a non-empty array

30
types/Tile/RadioTileGroup.d.ts vendored Normal file
View file

@ -0,0 +1,30 @@
/// <reference types="svelte" />
export interface RadioTileGroupProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["fieldset"]> {
/**
* Specify the selected tile value
*/
selectedValue?: string;
/**
* Set to `true` to disable the tile group
* @default false
*/
disabled?: boolean;
/**
* Specify the legend text
* @default ""
*/
legend?: string;
}
export default class RadioTileGroup {
$$prop_def: RadioTileGroupProps;
$$slot_def: {
default: {};
};
$on(eventname: "select", cb: (event: CustomEvent<any>) => void): () => void;
$on(eventname: string, cb: (event: Event) => void): () => void;
}

37
types/Tile/SelectableTileGroup.d.ts vendored Normal file
View file

@ -0,0 +1,37 @@
/// <reference types="svelte" />
export interface SelectableTileGroupProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["fieldset"]> {
/**
* Specify the selected tile's
* @default []
*/
selectedValues?: string;
/**
* Set to `true` to disable the tile group
* @default false
*/
disabled?: boolean;
/**
* Set to `true` to enable the light variant
* @default false
*/
light?: boolean;
/**
* Specify the legend text
* @default ""
*/
legend?: string;
}
export default class SelectableTileGroup {
$$prop_def: SelectableTileGroupProps;
$$slot_def: {
default: {};
};
$on(eventname: "select", cb: (event: CustomEvent<any>) => void): () => void;
$on(eventname: string, cb: (event: Event) => void): () => void;
}