mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-15 10:21:05 +00:00
chore: lift components folder
This commit is contained in:
Eric Liu
parent
76df51674d
commit
2200b29b92
301 changed files with 57 additions and 76 deletions
16
src/NumberInput/NumberInput.Skeleton.svelte
Normal file
16
src/NumberInput/NumberInput.Skeleton.svelte
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
<script>
|
||||
export let hideLabel = false;
|
||||
</script>
|
||||
|
||||
<div
|
||||
class:bx--form-item={true}
|
||||
{...$$restProps}
|
||||
on:click
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave>
|
||||
{#if !hideLabel}
|
||||
<span class:bx--label={true} class:bx--skeleton={true} />
|
||||
{/if}
|
||||
<div class:bx--number={true} class:bx--skeleton={true} />
|
||||
</div>
|
||||
21
src/NumberInput/NumberInput.Story.svelte
Normal file
21
src/NumberInput/NumberInput.Story.svelte
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
<script>
|
||||
export let story = undefined;
|
||||
|
||||
import NumberInput from "./NumberInput.svelte";
|
||||
import NumberInputSkeleton from "./NumberInput.Skeleton.svelte";
|
||||
|
||||
$: value = $$props.value;
|
||||
</script>
|
||||
|
||||
{#if story === 'skeleton'}
|
||||
<NumberInputSkeleton {...$$props} />
|
||||
{:else}
|
||||
<NumberInput
|
||||
{...$$props}
|
||||
id="number-input-id"
|
||||
name="number-input-id"
|
||||
bind:value
|
||||
on:change={({ detail }) => {
|
||||
console.log('on:change', detail);
|
||||
}} />
|
||||
{/if}
|
||||
35
src/NumberInput/NumberInput.stories.js
Normal file
35
src/NumberInput/NumberInput.stories.js
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
import { withKnobs, text, boolean, number } from "@storybook/addon-knobs";
|
||||
import Component from "./NumberInput.Story.svelte";
|
||||
|
||||
export default { title: "NumberInput", decorators: [withKnobs] };
|
||||
|
||||
export const Default = () => ({
|
||||
Component,
|
||||
props: {
|
||||
id: text("NumberInput id", "number-input-id"),
|
||||
name: text("NumberInput name", "number-input-name"),
|
||||
label: text("Label (label)", "Number Input label"),
|
||||
hideLabel: boolean("Hide label (hideLabel)", false),
|
||||
min: number("Minimum value (min)", 0),
|
||||
max: number("Maximum value (max)", 100),
|
||||
value: number("Value (value)", 50),
|
||||
step: number("Step of up/down arrow (step)", 10),
|
||||
disabled: boolean("Disabled (disabled)", false),
|
||||
readonly: boolean("Read only (readonly)", false),
|
||||
invalid: boolean("Show form validation UI (invalid)", false),
|
||||
mobile: boolean("Mobile variant (mobile)", false),
|
||||
invalidText: text(
|
||||
"Form validation UI content (invalidText)",
|
||||
"Number is not valid"
|
||||
),
|
||||
light: boolean("Light variant (light)", false),
|
||||
},
|
||||
});
|
||||
|
||||
export const Skeleton = () => ({
|
||||
Component,
|
||||
props: {
|
||||
story: "skeleton",
|
||||
hideLabel: boolean("Hide label (hideLabel)", false),
|
||||
},
|
||||
});
|
||||
210
src/NumberInput/NumberInput.svelte
Normal file
210
src/NumberInput/NumberInput.svelte
Normal file
|
|
@ -0,0 +1,210 @@
|
|||
<script>
|
||||
export let value = "";
|
||||
export let step = 1;
|
||||
export let max = undefined;
|
||||
export let min = undefined;
|
||||
export let light = false;
|
||||
export let readonly = false;
|
||||
export let mobile = false;
|
||||
export let allowEmpty = false;
|
||||
export let disabled = false;
|
||||
export let iconDescription = "";
|
||||
export let id = "ccs-" + Math.random().toString(36);
|
||||
export let name = undefined;
|
||||
export let invalid = false;
|
||||
export let invalidText = "Provide invalidText";
|
||||
export let helperText = "";
|
||||
export let label = "";
|
||||
export let hideLabel = false;
|
||||
export let ref = null;
|
||||
export let translateWithId = id => defaultTranslations[id];
|
||||
export const translationIds = {
|
||||
increment: "increment",
|
||||
decrement: "decrement"
|
||||
};
|
||||
|
||||
import { createEventDispatcher, afterUpdate } from "svelte";
|
||||
import CaretDownGlyph from "carbon-icons-svelte/lib/CaretDownGlyph";
|
||||
import CaretUpGlyph from "carbon-icons-svelte/lib/CaretUpGlyph";
|
||||
import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16";
|
||||
|
||||
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);
|
||||
});
|
||||
|
||||
$: incrementLabel = translateWithId("increment");
|
||||
$: decrementLabel = translateWithId("decrement");
|
||||
$: value = Number(value);
|
||||
$: 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}
|
||||
{...$$restProps}
|
||||
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--mobile={mobile}>
|
||||
{#if mobile}
|
||||
{#if label}
|
||||
<label
|
||||
for={id}
|
||||
class:bx--label={true}
|
||||
class:bx--visually-hidden={hideLabel}>
|
||||
<slot name="label">{label}</slot>
|
||||
</label>
|
||||
{/if}
|
||||
{#if helperText}
|
||||
<div class:bx--form__helper-text={true}>{helperText}</div>
|
||||
{/if}
|
||||
<div class:bx--number__input-wrapper={true}>
|
||||
<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}>
|
||||
<CaretDownGlyph class="down-icon" />
|
||||
</button>
|
||||
<input
|
||||
bind:this={ref}
|
||||
type="number"
|
||||
pattern="[0-9]*"
|
||||
aria-label={label ? undefined : ariaLabel}
|
||||
on:input
|
||||
on:input={({ target }) => {
|
||||
value = target.value;
|
||||
}}
|
||||
{disabled}
|
||||
{id}
|
||||
{name}
|
||||
{max}
|
||||
{min}
|
||||
{step}
|
||||
{value}
|
||||
{readonly} />
|
||||
<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}>
|
||||
<CaretUpGlyph class="up-icon" />
|
||||
</button>
|
||||
</div>
|
||||
{:else}
|
||||
{#if label}
|
||||
<label
|
||||
for={id}
|
||||
class:bx--label={true}
|
||||
class:bx--visually-hidden={hideLabel}>
|
||||
<slot name="label">{label}</slot>
|
||||
</label>
|
||||
{/if}
|
||||
{#if helperText}
|
||||
<div class:bx--form__helper-text={true}>{helperText}</div>
|
||||
{/if}
|
||||
<div class:bx--number__input-wrapper={true}>
|
||||
<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}
|
||||
on:input
|
||||
on:input={({ target }) => {
|
||||
value = target.value;
|
||||
}}
|
||||
{disabled}
|
||||
{id}
|
||||
{max}
|
||||
{min}
|
||||
{step}
|
||||
{value}
|
||||
{readonly} />
|
||||
{#if invalid}
|
||||
<WarningFilled16 class="bx--number__invalid" />
|
||||
{/if}
|
||||
<div class:bx--number__controls={true}>
|
||||
<button
|
||||
type="button"
|
||||
aria-live="polite"
|
||||
aria-atomic="true"
|
||||
title={incrementLabel || iconDescription}
|
||||
aria-label={incrementLabel || iconDescription}
|
||||
class:bx--number__control-btn={true}
|
||||
class:up-icon={true}
|
||||
on:click={() => {
|
||||
updateValue(1);
|
||||
}}
|
||||
{disabled}>
|
||||
<CaretUpGlyph class="up-icon" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
aria-live="polite"
|
||||
aria-atomic="true"
|
||||
title={decrementLabel || iconDescription}
|
||||
aria-label={decrementLabel || iconDescription}
|
||||
class:bx--number__control-btn={true}
|
||||
class:down-icon={true}
|
||||
on:click={() => {
|
||||
updateValue(-1);
|
||||
}}
|
||||
{disabled}>
|
||||
<CaretDownGlyph class="down-icon" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
{#if error}
|
||||
<div id={errorId} class:bx--form-requirement={true}>{invalidText}</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
2
src/NumberInput/index.js
Normal file
2
src/NumberInput/index.js
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
export { default as NumberInput } from "./NumberInput.svelte";
|
||||
export { default as NumberInputSkeleton } from "./NumberInput.Skeleton.svelte";
|
||||
Loading…
Add table
Add a link
Reference in a new issue