mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-15 02:11:05 +00:00
chore: format files with Prettier 3
This commit is contained in:
Eric Liu
parent
1dcd09bd98
commit
8e996dc683
391 changed files with 3725 additions and 3785 deletions
|
|
@ -98,11 +98,11 @@
|
|||
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
||||
<!-- svelte-ignore a11y-no-static-element-interactions -->
|
||||
<div
|
||||
class:bx--form-item="{true}"
|
||||
class:bx--text-input-wrapper="{true}"
|
||||
class:bx--password-input-wrapper="{!isFluid}"
|
||||
class:bx--text-input-wrapper--light="{light}"
|
||||
class:bx--text-input-wrapper--inline="{inline}"
|
||||
class:bx--form-item={true}
|
||||
class:bx--text-input-wrapper={true}
|
||||
class:bx--password-input-wrapper={!isFluid}
|
||||
class:bx--text-input-wrapper--light={light}
|
||||
class:bx--text-input-wrapper--inline={inline}
|
||||
on:click
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
|
|
@ -110,13 +110,13 @@
|
|||
>
|
||||
{#if inline}
|
||||
<label
|
||||
for="{id}"
|
||||
class:bx--label="{true}"
|
||||
class:bx--visually-hidden="{hideLabel}"
|
||||
class:bx--label--disabled="{disabled}"
|
||||
class:bx--label--inline="{inline}"
|
||||
class:bx--label--inline--sm="{inline && size === 'sm'}"
|
||||
class:bx--label--inline--xl="{inline && size === 'xl'}"
|
||||
for={id}
|
||||
class:bx--label={true}
|
||||
class:bx--visually-hidden={hideLabel}
|
||||
class:bx--label--disabled={disabled}
|
||||
class:bx--label--inline={inline}
|
||||
class:bx--label--inline--sm={inline && size === "sm"}
|
||||
class:bx--label--inline--xl={inline && size === "xl"}
|
||||
>
|
||||
<slot name="labelText">
|
||||
{labelText}
|
||||
|
|
@ -124,10 +124,10 @@
|
|||
</label>
|
||||
{#if !isFluid && helperText}
|
||||
<div
|
||||
id="{helperId}"
|
||||
class:bx--form__helper-text="{true}"
|
||||
class:bx--form__helper-text--disabled="{disabled}"
|
||||
class:bx--form__helper-text--inline="{inline}"
|
||||
id={helperId}
|
||||
class:bx--form__helper-text={true}
|
||||
class:bx--form__helper-text--disabled={disabled}
|
||||
class:bx--form__helper-text--inline={inline}
|
||||
>
|
||||
{helperText}
|
||||
</div>
|
||||
|
|
@ -135,13 +135,13 @@
|
|||
{/if}
|
||||
{#if !inline && (labelText || $$slots.labelText)}
|
||||
<label
|
||||
for="{id}"
|
||||
class:bx--label="{true}"
|
||||
class:bx--visually-hidden="{hideLabel}"
|
||||
class:bx--label--disabled="{disabled}"
|
||||
class:bx--label--inline="{inline}"
|
||||
class:bx--label--inline--sm="{inline && size === 'sm'}"
|
||||
class:bx--label--inline--xl="{inline && size === 'xl'}"
|
||||
for={id}
|
||||
class:bx--label={true}
|
||||
class:bx--visually-hidden={hideLabel}
|
||||
class:bx--label--disabled={disabled}
|
||||
class:bx--label--inline={inline}
|
||||
class:bx--label--inline--sm={inline && size === "sm"}
|
||||
class:bx--label--inline--xl={inline && size === "xl"}
|
||||
>
|
||||
<slot name="labelText">
|
||||
{labelText}
|
||||
|
|
@ -149,13 +149,13 @@
|
|||
</label>
|
||||
{/if}
|
||||
<div
|
||||
class:bx--text-input__field-outer-wrapper="{true}"
|
||||
class:bx--text-input__field-outer-wrapper--inline="{inline}"
|
||||
class:bx--text-input__field-outer-wrapper={true}
|
||||
class:bx--text-input__field-outer-wrapper--inline={inline}
|
||||
>
|
||||
<div
|
||||
class:bx--text-input__field-wrapper="{true}"
|
||||
class:bx--text-input__field-wrapper--warning="{warn}"
|
||||
data-invalid="{invalid || undefined}"
|
||||
class:bx--text-input__field-wrapper={true}
|
||||
class:bx--text-input__field-wrapper--warning={warn}
|
||||
data-invalid={invalid || undefined}
|
||||
>
|
||||
{#if invalid}
|
||||
<WarningFilled class="bx--text-input__invalid-icon" />
|
||||
|
|
@ -167,35 +167,35 @@
|
|||
/>
|
||||
{/if}
|
||||
<input
|
||||
bind:this="{ref}"
|
||||
data-invalid="{invalid || undefined}"
|
||||
aria-invalid="{invalid || undefined}"
|
||||
aria-describedby="{invalid
|
||||
bind:this={ref}
|
||||
data-invalid={invalid || undefined}
|
||||
aria-invalid={invalid || undefined}
|
||||
aria-describedby={invalid
|
||||
? errorId
|
||||
: warn
|
||||
? warnId
|
||||
: helperText
|
||||
? helperId
|
||||
: undefined}"
|
||||
id="{id}"
|
||||
name="{name}"
|
||||
placeholder="{placeholder}"
|
||||
type="{type}"
|
||||
value="{value ?? ''}"
|
||||
disabled="{disabled}"
|
||||
class:bx--text-input="{true}"
|
||||
class:bx--password-input="{true}"
|
||||
class:bx--text-input--light="{light}"
|
||||
class:bx--text-input--invalid="{invalid}"
|
||||
class:bx--text-input--warning="{warn}"
|
||||
class:bx--text-input--sm="{size === 'sm'}"
|
||||
class:bx--text-input--xl="{size === 'xl'}"
|
||||
? warnId
|
||||
: helperText
|
||||
? helperId
|
||||
: undefined}
|
||||
{id}
|
||||
{name}
|
||||
{placeholder}
|
||||
{type}
|
||||
value={value ?? ""}
|
||||
{disabled}
|
||||
class:bx--text-input={true}
|
||||
class:bx--password-input={true}
|
||||
class:bx--text-input--light={light}
|
||||
class:bx--text-input--invalid={invalid}
|
||||
class:bx--text-input--warning={warn}
|
||||
class:bx--text-input--sm={size === "sm"}
|
||||
class:bx--text-input--xl={size === "xl"}
|
||||
{...$$restProps}
|
||||
on:change
|
||||
on:input
|
||||
on:input="{({ target }) => {
|
||||
on:input={({ target }) => {
|
||||
value = target.value;
|
||||
}}"
|
||||
}}
|
||||
on:keydown
|
||||
on:keyup
|
||||
on:focus
|
||||
|
|
@ -204,33 +204,33 @@
|
|||
/>
|
||||
{#if isFluid && invalid}
|
||||
<hr class="bx--text-input__divider" />
|
||||
<div class="bx--form-requirement" id="{errorId}">
|
||||
<div class="bx--form-requirement" id={errorId}>
|
||||
{invalidText}
|
||||
</div>
|
||||
{/if}
|
||||
{#if !(isFluid && invalid)}
|
||||
<button
|
||||
type="button"
|
||||
disabled="{disabled}"
|
||||
class:bx--text-input--password__visibility__toggle="{true}"
|
||||
class:bx--btn="{true}"
|
||||
class:bx--btn--icon-only="{true}"
|
||||
class:bx--btn--disabled="{disabled}"
|
||||
class:bx--tooltip__trigger="{true}"
|
||||
class:bx--tooltip--a11y="{true}"
|
||||
class:bx--tooltip--top="{tooltipPosition === 'top'}"
|
||||
class:bx--tooltip--right="{tooltipPosition === 'right'}"
|
||||
class:bx--tooltip--bottom="{tooltipPosition === 'bottom'}"
|
||||
class:bx--tooltip--left="{tooltipPosition === 'left'}"
|
||||
class:bx--tooltip--align-start="{tooltipAlignment === 'start'}"
|
||||
class:bx--tooltip--align-center="{tooltipAlignment === 'center'}"
|
||||
class:bx--tooltip--align-end="{tooltipAlignment === 'end'}"
|
||||
on:click="{() => {
|
||||
type = type === 'password' ? 'text' : 'password';
|
||||
}}"
|
||||
{disabled}
|
||||
class:bx--text-input--password__visibility__toggle={true}
|
||||
class:bx--btn={true}
|
||||
class:bx--btn--icon-only={true}
|
||||
class:bx--btn--disabled={disabled}
|
||||
class:bx--tooltip__trigger={true}
|
||||
class:bx--tooltip--a11y={true}
|
||||
class:bx--tooltip--top={tooltipPosition === "top"}
|
||||
class:bx--tooltip--right={tooltipPosition === "right"}
|
||||
class:bx--tooltip--bottom={tooltipPosition === "bottom"}
|
||||
class:bx--tooltip--left={tooltipPosition === "left"}
|
||||
class:bx--tooltip--align-start={tooltipAlignment === "start"}
|
||||
class:bx--tooltip--align-center={tooltipAlignment === "center"}
|
||||
class:bx--tooltip--align-end={tooltipAlignment === "end"}
|
||||
on:click={() => {
|
||||
type = type === "password" ? "text" : "password";
|
||||
}}
|
||||
>
|
||||
{#if !disabled}
|
||||
<span class:bx--assistive-text="{true}">
|
||||
<span class:bx--assistive-text={true}>
|
||||
{#if type === "text"}
|
||||
{hidePasswordLabel}
|
||||
{:else}{showPasswordLabel}{/if}
|
||||
|
|
@ -245,21 +245,21 @@
|
|||
{/if}
|
||||
</div>
|
||||
{#if !isFluid && invalid}
|
||||
<div class:bx--form-requirement="{true}" id="{errorId}">
|
||||
<div class:bx--form-requirement={true} id={errorId}>
|
||||
{invalidText}
|
||||
</div>
|
||||
{/if}
|
||||
{#if !invalid && !warn && !isFluid && !inline && helperText}
|
||||
<div
|
||||
class:bx--form__helper-text="{true}"
|
||||
class:bx--form__helper-text--disabled="{disabled}"
|
||||
class:bx--form__helper-text--inline="{inline}"
|
||||
class:bx--form__helper-text={true}
|
||||
class:bx--form__helper-text--disabled={disabled}
|
||||
class:bx--form__helper-text--inline={inline}
|
||||
>
|
||||
{helperText}
|
||||
</div>
|
||||
{/if}
|
||||
{#if !isFluid && !invalid && warn}
|
||||
<div class:bx--form-requirement="{true}" id="{warnId}">{warnText}</div>
|
||||
<div class:bx--form-requirement={true} id={warnId}>{warnText}</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -105,27 +105,27 @@
|
|||
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
||||
<!-- svelte-ignore a11y-no-static-element-interactions -->
|
||||
<div
|
||||
class:bx--form-item="{true}"
|
||||
class:bx--text-input-wrapper="{true}"
|
||||
class:bx--text-input-wrapper--inline="{inline}"
|
||||
class:bx--text-input-wrapper--light="{light}"
|
||||
class:bx--text-input-wrapper--readonly="{readonly}"
|
||||
class:bx--form-item={true}
|
||||
class:bx--text-input-wrapper={true}
|
||||
class:bx--text-input-wrapper--inline={inline}
|
||||
class:bx--text-input-wrapper--light={light}
|
||||
class:bx--text-input-wrapper--readonly={readonly}
|
||||
on:click
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave
|
||||
>
|
||||
{#if inline}
|
||||
<div class:bx--text-input__label-helper-wrapper="{true}">
|
||||
<div class:bx--text-input__label-helper-wrapper={true}>
|
||||
{#if labelText}
|
||||
<label
|
||||
for="{id}"
|
||||
class:bx--label="{true}"
|
||||
class:bx--visually-hidden="{hideLabel}"
|
||||
class:bx--label--disabled="{disabled}"
|
||||
class:bx--label--inline="{inline}"
|
||||
class:bx--label--inline--sm="{size === 'sm'}"
|
||||
class:bx--label--inline--xl="{size === 'xl'}"
|
||||
for={id}
|
||||
class:bx--label={true}
|
||||
class:bx--visually-hidden={hideLabel}
|
||||
class:bx--label--disabled={disabled}
|
||||
class:bx--label--inline={inline}
|
||||
class:bx--label--inline--sm={size === "sm"}
|
||||
class:bx--label--inline--xl={size === "xl"}
|
||||
>
|
||||
<slot name="labelText">
|
||||
{labelText}
|
||||
|
|
@ -134,9 +134,9 @@
|
|||
{/if}
|
||||
{#if !isFluid && helperText}
|
||||
<div
|
||||
class:bx--form__helper-text="{true}"
|
||||
class:bx--form__helper-text--disabled="{disabled}"
|
||||
class:bx--form__helper-text--inline="{inline}"
|
||||
class:bx--form__helper-text={true}
|
||||
class:bx--form__helper-text--disabled={disabled}
|
||||
class:bx--form__helper-text--inline={inline}
|
||||
>
|
||||
{helperText}
|
||||
</div>
|
||||
|
|
@ -145,13 +145,13 @@
|
|||
{/if}
|
||||
{#if !inline && (labelText || $$slots.labelText)}
|
||||
<label
|
||||
for="{id}"
|
||||
class:bx--label="{true}"
|
||||
class:bx--visually-hidden="{hideLabel}"
|
||||
class:bx--label--disabled="{disabled}"
|
||||
class:bx--label--inline="{inline}"
|
||||
class:bx--label--inline-sm="{inline && size === 'sm'}"
|
||||
class:bx--label--inline-xl="{inline && size === 'xl'}"
|
||||
for={id}
|
||||
class:bx--label={true}
|
||||
class:bx--visually-hidden={hideLabel}
|
||||
class:bx--label--disabled={disabled}
|
||||
class:bx--label--inline={inline}
|
||||
class:bx--label--inline-sm={inline && size === "sm"}
|
||||
class:bx--label--inline-xl={inline && size === "xl"}
|
||||
>
|
||||
<slot name="labelText">
|
||||
{labelText}
|
||||
|
|
@ -159,14 +159,14 @@
|
|||
</label>
|
||||
{/if}
|
||||
<div
|
||||
class:bx--text-input__field-outer-wrapper="{true}"
|
||||
class:bx--text-input__field-outer-wrapper--inline="{inline}"
|
||||
class:bx--text-input__field-outer-wrapper={true}
|
||||
class:bx--text-input__field-outer-wrapper--inline={inline}
|
||||
>
|
||||
<div
|
||||
data-invalid="{error || undefined}"
|
||||
data-warn="{warn || undefined}"
|
||||
class:bx--text-input__field-wrapper="{true}"
|
||||
class:bx--text-input__field-wrapper--warning="{!invalid && warn}"
|
||||
data-invalid={error || undefined}
|
||||
data-warn={warn || undefined}
|
||||
class:bx--text-input__field-wrapper={true}
|
||||
class:bx--text-input__field-wrapper--warning={!invalid && warn}
|
||||
>
|
||||
{#if readonly}
|
||||
<EditOff class="bx--text-input__readonly-icon" />
|
||||
|
|
@ -182,33 +182,33 @@
|
|||
{/if}
|
||||
{/if}
|
||||
<input
|
||||
bind:this="{ref}"
|
||||
data-invalid="{error || undefined}"
|
||||
aria-invalid="{error || undefined}"
|
||||
data-warn="{warn || undefined}"
|
||||
aria-describedby="{error
|
||||
bind:this={ref}
|
||||
data-invalid={error || undefined}
|
||||
aria-invalid={error || undefined}
|
||||
data-warn={warn || undefined}
|
||||
aria-describedby={error
|
||||
? errorId
|
||||
: warn
|
||||
? warnId
|
||||
: helperText
|
||||
? helperId
|
||||
: undefined}"
|
||||
disabled="{disabled}"
|
||||
id="{id}"
|
||||
name="{name}"
|
||||
placeholder="{placeholder}"
|
||||
? warnId
|
||||
: helperText
|
||||
? helperId
|
||||
: undefined}
|
||||
{disabled}
|
||||
{id}
|
||||
{name}
|
||||
{placeholder}
|
||||
bind:value
|
||||
required="{required}"
|
||||
readonly="{readonly}"
|
||||
class:bx--text-input="{true}"
|
||||
class:bx--text-input--light="{light}"
|
||||
class:bx--text-input--invalid="{error}"
|
||||
class:bx--text-input--warning="{warn}"
|
||||
class:bx--text-input--sm="{size === 'sm'}"
|
||||
class:bx--text-input--xl="{size === 'xl'}"
|
||||
{required}
|
||||
{readonly}
|
||||
class:bx--text-input={true}
|
||||
class:bx--text-input--light={light}
|
||||
class:bx--text-input--invalid={error}
|
||||
class:bx--text-input--warning={warn}
|
||||
class:bx--text-input--sm={size === "sm"}
|
||||
class:bx--text-input--xl={size === "xl"}
|
||||
{...$$restProps}
|
||||
on:change="{onChange}"
|
||||
on:input="{onInput}"
|
||||
on:change={onChange}
|
||||
on:input={onInput}
|
||||
on:keydown
|
||||
on:keyup
|
||||
on:focus
|
||||
|
|
@ -216,34 +216,34 @@
|
|||
on:paste
|
||||
/>
|
||||
{#if isFluid}
|
||||
<hr class:bx--text-input__divider="{true}" />
|
||||
<hr class:bx--text-input__divider={true} />
|
||||
{/if}
|
||||
{#if isFluid && !inline && invalid}
|
||||
<div class:bx--form-requirement="{true}" id="{errorId}">
|
||||
<div class:bx--form-requirement={true} id={errorId}>
|
||||
{invalidText}
|
||||
</div>
|
||||
{/if}
|
||||
{#if isFluid && !inline && warn}
|
||||
<div class:bx--form-requirement="{true}" id="{warnId}">{warnText}</div>
|
||||
<div class:bx--form-requirement={true} id={warnId}>{warnText}</div>
|
||||
{/if}
|
||||
</div>
|
||||
{#if !invalid && !warn && !isFluid && !inline && helperText}
|
||||
<div
|
||||
id="{helperId}"
|
||||
class:bx--form__helper-text="{true}"
|
||||
class:bx--form__helper-text--disabled="{disabled}"
|
||||
class:bx--form__helper-text--inline="{inline}"
|
||||
id={helperId}
|
||||
class:bx--form__helper-text={true}
|
||||
class:bx--form__helper-text--disabled={disabled}
|
||||
class:bx--form__helper-text--inline={inline}
|
||||
>
|
||||
{helperText}
|
||||
</div>
|
||||
{/if}
|
||||
{#if !isFluid && invalid}
|
||||
<div class:bx--form-requirement="{true}" id="{errorId}">
|
||||
<div class:bx--form-requirement={true} id={errorId}>
|
||||
{invalidText}
|
||||
</div>
|
||||
{/if}
|
||||
{#if !isFluid && !invalid && warn}
|
||||
<div class:bx--form-requirement="{true}" id="{warnId}">{warnText}</div>
|
||||
<div class:bx--form-requirement={true} id={warnId}>{warnText}</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
|
||||
<!-- svelte-ignore a11y-no-static-element-interactions -->
|
||||
<div
|
||||
class:bx--form-item="{true}"
|
||||
class:bx--form-item={true}
|
||||
{...$$restProps}
|
||||
on:click
|
||||
on:mouseover
|
||||
|
|
@ -14,7 +14,7 @@
|
|||
on:mouseleave
|
||||
>
|
||||
{#if !hideLabel}
|
||||
<span class:bx--label="{true}" class:bx--skeleton="{true}"></span>
|
||||
<span class:bx--label={true} class:bx--skeleton={true}></span>
|
||||
{/if}
|
||||
<div class:bx--skeleton="{true}" class:bx--text-input="{true}"></div>
|
||||
<div class:bx--skeleton={true} class:bx--text-input={true}></div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue