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

Add required prop to Select. (#968)

Browse source 
Upgrade sveld to set paths correctly on Windows.
Make Prettier script compatible with Windows and run it.
This commit is contained in:
brunnerh 2022-01-03 19:46:12 +01:00 • committed by GitHub
commit 6458c97c1a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
14 changed files with 49 additions and 48 deletions
Download patch file Download diff file Expand all files Collapse all files

1
COMPONENT_INDEX.md
View file

@ -3242,6 +3242,7 @@ None.
| noLabel | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to not render a label |
| labelText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label text |
| hideLabel | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to visually hide the label text |
| required | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to mark the field as required |
### Slots

11
docs/src/COMPONENT_API.json
View file

@ -9419,6 +9419,17 @@
"isFunctionDeclaration": false,
"constant": false,
"reactive": true
},
{
"name": "required",
"kind": "let",
"description": "Set to `true` to mark the field as required",
"type": "boolean",
"value": "false",
"isFunction": false,
"isFunctionDeclaration": false,
"constant": false,
"reactive": false
}
],
"slots": [

2
docs/src/pages/framed/Breakpoint/Breakpoint.svelte
View file

@ -13,7 +13,7 @@
<h6>on:match</h6>
<pre>
{JSON.stringify(events,null, 2)}
{JSON.stringify(events, null, 2)}
</pre>
<style>

4
package.json
View file

@ -18,7 +18,7 @@
"build:api": "node scripts/build-api",
"build:lib": "rollup -c",
"prepack": "run-p build:*",
"format": "prettier --write './**/*.{svelte,js,md}'"
"format": "prettier --write \"./**/*.{svelte,js,md}\""
},
"dependencies": {
"flatpickr": "4.6.9"
@ -41,7 +41,7 @@
"rollup-plugin-svelte": "^7.1.0",
"rollup-plugin-terser": "^7.0.2",
"sass": "^1.42.1",
"sveld": "^0.10.2",
"sveld": "^0.11.1",
"svelte": "^3.44.3",
"svelte-check": "^1.1.32",
"typescript": "^4.1.3"

15
src/CodeSnippet/CodeSnippet.svelte
View file

@ -150,14 +150,10 @@
feedback="{feedback}"
feedbackTimeout="{feedbackTimeout}"
class="bx--snippet {type && `bx--snippet--${type}`}
{type ===
'inline' && 'bx--btn--copy'}
{expanded &&
'bx--snippet--expand'}
{light &&
'bx--snippet--light'}
{hideCopyButton &&
'bx--snippet--no-copy'}
{type === 'inline' && 'bx--btn--copy'}
{expanded && 'bx--snippet--expand'}
{light && 'bx--snippet--light'}
{hideCopyButton && 'bx--snippet--no-copy'}
{wrapText && 'bx--snippet--wraptext'}"
{...$$restProps}
on:click
@ -194,8 +190,7 @@
class:bx--snippet-container="{true}"
style="width: 100%; min-height: {minHeight}px; max-height: {maxHeight}"
>
<pre
bind:this="{ref}">
<pre bind:this="{ref}">
<code><slot>{code}</slot></code>
</pre>
</div>

3
src/DatePicker/DatePicker.svelte
View file

@ -229,8 +229,7 @@
class:bx--date-picker="{true}"
class:bx--date-picker--short="{short}"
class:bx--date-picker--light="{light}"
class="{datePickerType &&
`bx--date-picker--${datePickerType}`}
class="{datePickerType && `bx--date-picker--${datePickerType}`}
{datePickerType === 'range' &&
$labelTextEmpty &&
'bx--date-picker--nolabel'}"

12
src/Dropdown/Dropdown.svelte
View file

@ -170,14 +170,10 @@
'bx--dropdown--invalid'} {!invalid &&
warn &&
'bx--dropdown--warning'} {open && 'bx--dropdown--open'}
{size ===
'sm' && 'bx--dropdown--sm'}
{size === 'xl' &&
'bx--dropdown--xl'}
{inline &&
'bx--dropdown--inline'}
{disabled &&
'bx--dropdown--disabled'}
{size === 'sm' && 'bx--dropdown--sm'}
{size === 'xl' && 'bx--dropdown--xl'}
{inline && 'bx--dropdown--inline'}
{disabled && 'bx--dropdown--disabled'}
{light && 'bx--dropdown--light'}"
on:click="{({ target }) => {
open = ref.contains(target) ? !open : false;

12
src/MultiSelect/MultiSelect.svelte
View file

@ -280,14 +280,10 @@
warnText="{warnText}"
class="bx--multi-select {direction === 'top' &&
'bx--list-box--up'} {filterable && 'bx--combo-box'}
{filterable &&
'bx--multi-select--filterable'}
{invalid &&
'bx--multi-select--invalid'}
{inline &&
'bx--multi-select--inline'}
{checked.length > 0 &&
'bx--multi-select--selected'}"
{filterable && 'bx--multi-select--filterable'}
{invalid && 'bx--multi-select--invalid'}
{inline && 'bx--multi-select--inline'}
{checked.length > 0 && 'bx--multi-select--selected'}"
>
{#if invalid}
<WarningFilled16 class="bx--list-box__invalid-icon" />

3
src/ProgressIndicator/ProgressStep.svelte
View file

@ -95,8 +95,7 @@
<title>{description}</title>
<path
d="M8 1C4.1 1 1 4.1 1 8s3.1 7 7 7 7-3.1 7-7-3.1-7-7-7zm0 13c-3.3
0-6-2.7-6-6s2.7-6 6-6 6 2.7 6 6-2.7 6-6 6z"
></path>
0-6-2.7-6-6s2.7-6 6-6 6 2.7 6 6-2.7 6-6 6z"></path>
</svg>
{/if}
<slot props="{{ class: 'bx--progress-label' }}">

5
src/Select/Select.svelte
View file

@ -60,6 +60,9 @@
/** Obtain a reference to the select HTML element */
export let ref = null;
/** Set to `true` to mark the field as required */
export let required = false;
import { createEventDispatcher, setContext, afterUpdate } from "svelte";
import { writable } from "svelte/store";
import ChevronDown16 from "../icons/ChevronDown16.svelte";
@ -112,6 +115,7 @@
aria-describedby="{invalid ? errorId : undefined}"
aria-invalid="{invalid || undefined}"
disabled="{disabled || undefined}"
required="{required || undefined}"
id="{id}"
name="{name}"
class:bx--select-input="{true}"
@ -156,6 +160,7 @@
name="{name}"
aria-describedby="{invalid ? errorId : undefined}"
disabled="{disabled || undefined}"
required="{required || undefined}"
aria-invalid="{invalid || undefined}"
class:bx--select-input="{true}"
class="{size && `bx--select-input--${size}`}"

6
src/TextInput/PasswordInput.svelte
View file

@ -198,10 +198,8 @@
class:bx--btn--disabled="{disabled}"
class:bx--tooltip__trigger="{true}"
class:bx--tooltip--a11y="{true}"
class="{tooltipPosition &&
`bx--tooltip--${tooltipPosition}`}
{tooltipAlignment &&
`bx--tooltip--align-${tooltipAlignment}`}"
class="{tooltipPosition && `bx--tooltip--${tooltipPosition}`}
{tooltipAlignment && `bx--tooltip--align-${tooltipAlignment}`}"
on:click="{() => {
type = type === 'password' ? 'text' : 'password';
}}"

9
src/TreeView/TreeViewNode.svelte
View file

@ -55,13 +55,8 @@
let refLabel = null;
let prevActiveId = undefined;
const {
activeNodeId,
selectedNodeIds,
clickNode,
selectNode,
focusNode,
} = getContext("TreeView");
const { activeNodeId, selectedNodeIds, clickNode, selectNode, focusNode } =
getContext("TreeView");
const offset = () =>
computeTreeLeafDepth(refLabel) + (leaf && icon ? 2 : 2.5);

6
types/Select/Select.svelte.d.ts vendored
View file

@ -95,6 +95,12 @@ export interface SelectProps
* @default null
*/
ref?: null | HTMLSelectElement;
/**
* Set to `true` to mark the field as required
* @default false
*/
required?: boolean;
}
export default class Select extends SvelteComponentTyped<

8
yarn.lock
View file

@ -2292,10 +2292,10 @@ supports-color@^7.0.0, supports-color@^7.1.0:
dependencies:
has-flag "^4.0.0"
sveld@^0.10.2:
version "0.10.2"
resolved "https://registry.yarnpkg.com/sveld/-/sveld-0.10.2.tgz#24366250a2b8021d76a0c4c641adc4f858c2a56f"
integrity sha512-51pf6aNw9Ks13/7DiA7UvriqittW6320g/14a9XxiN5/f7Yg6/IfByoKkFHyTf2RdeREvjITuJT5G8Me0tDvxw==
sveld@^0.11.1:
version "0.11.1"
resolved "https://registry.yarnpkg.com/sveld/-/sveld-0.11.1.tgz#2b24fb8dae6fcd9bb14f826c89480cf88b079dca"
integrity sha512-cb6sUB6yVomLgeDny0sXSGxgNGrwYPg8CHuI0k80DcGFNF2ML6k7yZeVeFjWjh2Tmj8+/PgSLJj5IYuZEjyQVA==
dependencies:
"@rollup/plugin-node-resolve" "^11.0.1"
acorn "^8.4.1"