mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-15 02:11:05 +00:00
db645c30f0* chore(deps-dev): upgrade carbon-components to v10.35
* feat(tooltip-icon): add icon prop
This allows consumers to pass a Carbon icon as a prop instead of using the default slot.
* fix(tooltip): make screenreader description less verbose
Ref: b5f40d8fc
* feat(search): allow custom search icon
Allows consumers to render a different Carbon icon instead of the default Search16 icon.
* feat(number-input): add hideSteppers prop
Allows consumers to hide the input stepper buttons.
* feat: support expressive styles for Button, UnorderedList, OrderedList
* feat(button): support large size button
Set size to "lg" to use the large size.
* feat(button-skeleton): support xl, lg sizes
* docs(button): add "lg" size to expressive styles example
* feat(file-uploader-item): support field, small sizes
* feat(tooltip-icon): support disabled state
329 lines
8.8 KiB
Svelte
329 lines
8.8 KiB
Svelte
<script>
|
|
/**
|
|
* @typedef {"increment" | "decrement"} NumberInputTranslationId
|
|
* @event {number} change
|
|
*/
|
|
|
|
/**
|
|
* Set the size of the input
|
|
* @type {"sm" | "xl"}
|
|
*/
|
|
export let size = undefined;
|
|
|
|
/**
|
|
* Specify the input value
|
|
* @type {number | string}
|
|
*/
|
|
export let value = "";
|
|
|
|
/** Specify the step increment */
|
|
export let step = 1;
|
|
|
|
/**
|
|
* Specify the maximum value
|
|
* @type {number}
|
|
*/
|
|
export let max = undefined;
|
|
|
|
/**
|
|
* Specify the minimum value
|
|
* @type {number}
|
|
*/
|
|
export let min = undefined;
|
|
|
|
/** Set to `true` to enable the light variant */
|
|
export let light = false;
|
|
|
|
/** Set to `true` for the input to be read-only */
|
|
export let readonly = false;
|
|
|
|
/**
|
|
* Set to `true` to enable the mobile variant
|
|
* @deprecated
|
|
*/
|
|
export let mobile = false;
|
|
|
|
/** Set to `true` to allow for an empty value */
|
|
export let allowEmpty = false;
|
|
|
|
/** Set to `true` to disable the input */
|
|
export let disabled = false;
|
|
|
|
/** Set to `true` to hide the input stepper buttons */
|
|
export let hideSteppers = false;
|
|
|
|
/** Specify the ARIA label for the increment icons */
|
|
export let iconDescription = "";
|
|
|
|
/** Set to `true` to indicate an invalid state */
|
|
export let invalid = false;
|
|
|
|
/** Specify the invalid state text */
|
|
export let invalidText = "";
|
|
|
|
/** Set to `true` to indicate an warning state */
|
|
export let warn = false;
|
|
|
|
/** Specify the warning state text */
|
|
export let warnText = "";
|
|
|
|
/** Specify the helper text */
|
|
export let helperText = "";
|
|
|
|
/** Specify the label text */
|
|
export let label = "";
|
|
|
|
/** Set to `true` to visually hide the label text */
|
|
export let hideLabel = false;
|
|
|
|
/**
|
|
* Override the default translation ids
|
|
* @type {(id: NumberInputTranslationId) => string}
|
|
*/
|
|
export let translateWithId = (id) => defaultTranslations[id];
|
|
|
|
/**
|
|
* Default translation ids
|
|
* @type {{ increment: "increment"; decrement: "decrement" }}
|
|
*/
|
|
export const translationIds = {
|
|
increment: "increment",
|
|
decrement: "decrement",
|
|
};
|
|
|
|
/** Set an id for the input element */
|
|
export let id = "ccs-" + Math.random().toString(36);
|
|
|
|
/**
|
|
* Specify a name attribute for the input
|
|
* @type {string}
|
|
*/
|
|
export let name = undefined;
|
|
|
|
/** Obtain a reference to the input HTML element */
|
|
export let ref = null;
|
|
|
|
import { createEventDispatcher, afterUpdate } from "svelte";
|
|
import Add16 from "carbon-icons-svelte/lib/Add16/Add16.svelte";
|
|
import Subtract16 from "carbon-icons-svelte/lib/Subtract16/Subtract16.svelte";
|
|
import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16/WarningFilled16.svelte";
|
|
import WarningAltFilled16 from "carbon-icons-svelte/lib/WarningAltFilled16/WarningAltFilled16.svelte";
|
|
|
|
const defaultTranslations = {
|
|
[translationIds.increment]: "Increment number",
|
|
[translationIds.decrement]: "Decrement number",
|
|
};
|
|
|
|
const dispatch = createEventDispatcher();
|
|
|
|
function updateValue(direction) {
|
|
const nextValue = (value += direction * step);
|
|
|
|
if (nextValue < min) {
|
|
value = min;
|
|
} else if (nextValue > max) {
|
|
value = max;
|
|
} else {
|
|
value = nextValue;
|
|
}
|
|
}
|
|
|
|
afterUpdate(() => {
|
|
dispatch("change", value);
|
|
});
|
|
|
|
let inputValue = value;
|
|
|
|
$: incrementLabel = translateWithId("increment");
|
|
$: decrementLabel = translateWithId("decrement");
|
|
$: value = Number(inputValue);
|
|
$: error =
|
|
invalid || (!allowEmpty && value === "") || value > max || value < min;
|
|
$: errorId = `error-${id}`;
|
|
$: ariaLabel =
|
|
$$props["aria-label"] ||
|
|
"Numeric input field with increment and decrement buttons";
|
|
</script>
|
|
|
|
<div
|
|
class:bx--form-item="{true}"
|
|
on:click
|
|
on:mouseover
|
|
on:mouseenter
|
|
on:mouseleave
|
|
>
|
|
<div
|
|
data-invalid="{error || undefined}"
|
|
class:bx--number="{true}"
|
|
class:bx--number--helpertext="{true}"
|
|
class:bx--number--readonly="{readonly}"
|
|
class:bx--number--light="{light}"
|
|
class:bx--number--nolabel="{hideLabel}"
|
|
class:bx--number--nosteppers="{hideSteppers}"
|
|
class:bx--number--mobile="{mobile}"
|
|
class="{size && `bx--number--${size}`}"
|
|
>
|
|
{#if mobile}
|
|
{#if label}
|
|
<label
|
|
for="{id}"
|
|
class:bx--label="{true}"
|
|
class:bx--label--disabled="{disabled}"
|
|
class:bx--visually-hidden="{hideLabel}"
|
|
>
|
|
<slot name="label">{label}</slot>
|
|
</label>
|
|
{/if}
|
|
<div
|
|
class:bx--number__input-wrapper="{true}"
|
|
class:bx--number__input-wrapper--warning="{!invalid && warn}"
|
|
>
|
|
<button
|
|
type="button"
|
|
aria-live="polite"
|
|
aria-atomic="true"
|
|
title="{decrementLabel}"
|
|
aria-label="{decrementLabel || iconDescription}"
|
|
class:bx--number__control-btn="{true}"
|
|
class:down-icon="{true}"
|
|
on:click="{() => {
|
|
updateValue(-1);
|
|
}}"
|
|
disabled="{disabled}"
|
|
>
|
|
<Subtract16 class="down-icon" />
|
|
</button>
|
|
<input
|
|
bind:this="{ref}"
|
|
type="number"
|
|
pattern="[0-9]*"
|
|
aria-label="{label ? undefined : ariaLabel}"
|
|
disabled="{disabled}"
|
|
id="{id}"
|
|
name="{name}"
|
|
max="{max}"
|
|
min="{min}"
|
|
step="{step}"
|
|
value="{value}"
|
|
readonly="{readonly}"
|
|
{...$$restProps}
|
|
on:input
|
|
on:input="{({ target }) => {
|
|
inputValue = target.value;
|
|
}}"
|
|
/>
|
|
<button
|
|
type="button"
|
|
aria-live="polite"
|
|
aria-atomic="true"
|
|
title="{incrementLabel}"
|
|
aria-label="{incrementLabel || iconDescription}"
|
|
class:bx--number__control-btn="{true}"
|
|
class:up-icon="{true}"
|
|
on:click="{() => {
|
|
updateValue(1);
|
|
}}"
|
|
disabled="{disabled}"
|
|
>
|
|
<Add16 class="up-icon" />
|
|
</button>
|
|
</div>
|
|
{:else}
|
|
{#if label}
|
|
<label
|
|
for="{id}"
|
|
class:bx--label="{true}"
|
|
class:bx--label--disabled="{disabled}"
|
|
class:bx--visually-hidden="{hideLabel}"
|
|
>
|
|
<slot name="label">{label}</slot>
|
|
</label>
|
|
{/if}
|
|
<div
|
|
class:bx--number__input-wrapper="{true}"
|
|
class:bx--number__input-wrapper--warning="{!invalid && warn}"
|
|
>
|
|
<input
|
|
bind:this="{ref}"
|
|
type="number"
|
|
pattern="[0-9]*"
|
|
aria-describedby="{errorId}"
|
|
data-invalid="{invalid || undefined}"
|
|
aria-invalid="{invalid || undefined}"
|
|
aria-label="{label ? undefined : ariaLabel}"
|
|
disabled="{disabled}"
|
|
id="{id}"
|
|
name="{name}"
|
|
max="{max}"
|
|
min="{min}"
|
|
step="{step}"
|
|
value="{value}"
|
|
readonly="{readonly}"
|
|
{...$$restProps}
|
|
on:input
|
|
on:input="{({ target }) => {
|
|
inputValue = target.value;
|
|
}}"
|
|
/>
|
|
{#if invalid}
|
|
<WarningFilled16 class="bx--number__invalid" />
|
|
{/if}
|
|
{#if !invalid && warn}
|
|
<WarningAltFilled16
|
|
class="bx--number__invalid bx--number__invalid--warning"
|
|
/>
|
|
{/if}
|
|
{#if !hideSteppers}
|
|
<div class:bx--number__controls="{true}">
|
|
<button
|
|
type="button"
|
|
tabindex="-1"
|
|
title="{decrementLabel || iconDescription}"
|
|
aria-label="{decrementLabel || iconDescription}"
|
|
class:bx--number__control-btn="{true}"
|
|
class:down-icon="{true}"
|
|
on:click="{() => {
|
|
updateValue(-1);
|
|
}}"
|
|
disabled="{disabled}"
|
|
>
|
|
<Subtract16 class="down-icon" />
|
|
</button>
|
|
<div class:bx--number__rule-divider="{true}"></div>
|
|
<button
|
|
type="button"
|
|
tabindex="-1"
|
|
title="{incrementLabel || iconDescription}"
|
|
aria-label="{incrementLabel || iconDescription}"
|
|
class:bx--number__control-btn="{true}"
|
|
class:up-icon="{true}"
|
|
on:click="{() => {
|
|
updateValue(1);
|
|
}}"
|
|
disabled="{disabled}"
|
|
>
|
|
<Add16 class="up-icon" />
|
|
</button>
|
|
<div class:bx--number__rule-divider="{true}"></div>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
{/if}
|
|
{#if !error && !warn && helperText}
|
|
<div
|
|
class:bx--form__helper-text="{true}"
|
|
class:bx--form__helper-text--disabled="{disabled}"
|
|
>
|
|
{helperText}
|
|
</div>
|
|
{/if}
|
|
{#if error}
|
|
<div id="{errorId}" class:bx--form-requirement="{true}">
|
|
{invalidText}
|
|
</div>
|
|
{/if}
|
|
{#if !error && warn}
|
|
<div id="{errorId}" class:bx--form-requirement="{true}">{warnText}</div>
|
|
{/if}
|
|
</div>
|
|
</div>
|