mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-15 02:11:05 +00:00
Eric Liu
parent
cd68f8f676
commit
4e578bc55d
17 changed files with 282 additions and 20 deletions
|
|
@ -56,6 +56,8 @@ Currently, the following components are supported:
|
||||||
- NotificationButton
|
- NotificationButton
|
||||||
- NotificationIcon
|
- NotificationIcon
|
||||||
- NotificationTextDetails
|
- NotificationTextDetails
|
||||||
|
- NumberInput
|
||||||
|
- NumberInputSkeleton
|
||||||
- OrderedList
|
- OrderedList
|
||||||
- OverflowMenu
|
- OverflowMenu
|
||||||
- OverflowMenuItem
|
- OverflowMenuItem
|
||||||
|
|
|
||||||
|
|
@ -70,4 +70,4 @@
|
||||||
}</script><style>#root[hidden],
|
}</script><style>#root[hidden],
|
||||||
#docs-root[hidden] {
|
#docs-root[hidden] {
|
||||||
display: none !important;
|
display: none !important;
|
||||||
}</style></head><body><div class="sb-nopreview sb-wrapper"><div class="sb-nopreview_main"><h1 class="sb-nopreview_heading sb-heading">No Preview</h1><p>Sorry, but you either have no stories or none are selected somehow.</p><ul><li>Please check the Storybook config.</li><li>Try reloading the page.</li></ul><p>If the problem persists, check the browser console, or the terminal you've run Storybook from.</p></div></div><div class="sb-errordisplay sb-wrapper"><pre id="error-message" class="sb-heading"></pre><pre class="sb-errordisplay_code"><code id="error-stack"></code></pre></div><div id="root"></div><div id="docs-root"></div><script src="runtime~main.075acd964d46ea3e765c.bundle.js"></script><script src="vendors~main.075acd964d46ea3e765c.bundle.js"></script><script src="main.075acd964d46ea3e765c.bundle.js"></script></body></html>
|
}</style></head><body><div class="sb-nopreview sb-wrapper"><div class="sb-nopreview_main"><h1 class="sb-nopreview_heading sb-heading">No Preview</h1><p>Sorry, but you either have no stories or none are selected somehow.</p><ul><li>Please check the Storybook config.</li><li>Try reloading the page.</li></ul><p>If the problem persists, check the browser console, or the terminal you've run Storybook from.</p></div></div><div class="sb-errordisplay sb-wrapper"><pre id="error-message" class="sb-heading"></pre><pre class="sb-errordisplay_code"><code id="error-stack"></code></pre></div><div id="root"></div><div id="docs-root"></div><script src="runtime~main.e9585d931aedb4990ba2.bundle.js"></script><script src="vendors~main.e9585d931aedb4990ba2.bundle.js"></script><script src="main.e9585d931aedb4990ba2.bundle.js"></script></body></html>
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -1 +0,0 @@
|
||||||
{"version":3,"file":"main.075acd964d46ea3e765c.bundle.js","sources":["webpack:///main.075acd964d46ea3e765c.bundle.js"],"mappings":"AAAA","sourceRoot":""}
|
|
||||||
2
docs/main.e9585d931aedb4990ba2.bundle.js
Normal file
2
docs/main.e9585d931aedb4990ba2.bundle.js
Normal file
File diff suppressed because one or more lines are too long
1
docs/main.e9585d931aedb4990ba2.bundle.js.map
Normal file
1
docs/main.e9585d931aedb4990ba2.bundle.js.map
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
{"version":3,"file":"main.e9585d931aedb4990ba2.bundle.js","sources":["webpack:///main.e9585d931aedb4990ba2.bundle.js"],"mappings":"AAAA","sourceRoot":""}
|
||||||
|
|
@ -1,2 +1,2 @@
|
||||||
!function(modules){function webpackJsonpCallback(data){for(var moduleId,chunkId,chunkIds=data[0],moreModules=data[1],executeModules=data[2],i=0,resolves=[];i<chunkIds.length;i++)chunkId=chunkIds[i],Object.prototype.hasOwnProperty.call(installedChunks,chunkId)&&installedChunks[chunkId]&&resolves.push(installedChunks[chunkId][0]),installedChunks[chunkId]=0;for(moduleId in moreModules)Object.prototype.hasOwnProperty.call(moreModules,moduleId)&&(modules[moduleId]=moreModules[moduleId]);for(parentJsonpFunction&&parentJsonpFunction(data);resolves.length;)resolves.shift()();return deferredModules.push.apply(deferredModules,executeModules||[]),checkDeferredModules()}function checkDeferredModules(){for(var result,i=0;i<deferredModules.length;i++){for(var deferredModule=deferredModules[i],fulfilled=!0,j=1;j<deferredModule.length;j++){var depId=deferredModule[j];0!==installedChunks[depId]&&(fulfilled=!1)}fulfilled&&(deferredModules.splice(i--,1),result=__webpack_require__(__webpack_require__.s=deferredModule[0]))}return result}var installedModules={},installedChunks={1:0},deferredModules=[];function __webpack_require__(moduleId){if(installedModules[moduleId])return installedModules[moduleId].exports;var module=installedModules[moduleId]={i:moduleId,l:!1,exports:{}};return modules[moduleId].call(module.exports,module,module.exports,__webpack_require__),module.l=!0,module.exports}__webpack_require__.m=modules,__webpack_require__.c=installedModules,__webpack_require__.d=function(exports,name,getter){__webpack_require__.o(exports,name)||Object.defineProperty(exports,name,{enumerable:!0,get:getter})},__webpack_require__.r=function(exports){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(exports,"__esModule",{value:!0})},__webpack_require__.t=function(value,mode){if(1&mode&&(value=__webpack_require__(value)),8&mode)return value;if(4&mode&&"object"==typeof value&&value&&value.__esModule)return value;var ns=Object.create(null);if(__webpack_require__.r(ns),Object.defineProperty(ns,"default",{enumerable:!0,value:value}),2&mode&&"string"!=typeof value)for(var key in value)__webpack_require__.d(ns,key,function(key){return value[key]}.bind(null,key));return ns},__webpack_require__.n=function(module){var getter=module&&module.__esModule?function getDefault(){return module.default}:function getModuleExports(){return module};return __webpack_require__.d(getter,"a",getter),getter},__webpack_require__.o=function(object,property){return Object.prototype.hasOwnProperty.call(object,property)},__webpack_require__.p="";var jsonpArray=window.webpackJsonp=window.webpackJsonp||[],oldJsonpFunction=jsonpArray.push.bind(jsonpArray);jsonpArray.push=webpackJsonpCallback,jsonpArray=jsonpArray.slice();for(var i=0;i<jsonpArray.length;i++)webpackJsonpCallback(jsonpArray[i]);var parentJsonpFunction=oldJsonpFunction;checkDeferredModules()}([]);
|
!function(modules){function webpackJsonpCallback(data){for(var moduleId,chunkId,chunkIds=data[0],moreModules=data[1],executeModules=data[2],i=0,resolves=[];i<chunkIds.length;i++)chunkId=chunkIds[i],Object.prototype.hasOwnProperty.call(installedChunks,chunkId)&&installedChunks[chunkId]&&resolves.push(installedChunks[chunkId][0]),installedChunks[chunkId]=0;for(moduleId in moreModules)Object.prototype.hasOwnProperty.call(moreModules,moduleId)&&(modules[moduleId]=moreModules[moduleId]);for(parentJsonpFunction&&parentJsonpFunction(data);resolves.length;)resolves.shift()();return deferredModules.push.apply(deferredModules,executeModules||[]),checkDeferredModules()}function checkDeferredModules(){for(var result,i=0;i<deferredModules.length;i++){for(var deferredModule=deferredModules[i],fulfilled=!0,j=1;j<deferredModule.length;j++){var depId=deferredModule[j];0!==installedChunks[depId]&&(fulfilled=!1)}fulfilled&&(deferredModules.splice(i--,1),result=__webpack_require__(__webpack_require__.s=deferredModule[0]))}return result}var installedModules={},installedChunks={1:0},deferredModules=[];function __webpack_require__(moduleId){if(installedModules[moduleId])return installedModules[moduleId].exports;var module=installedModules[moduleId]={i:moduleId,l:!1,exports:{}};return modules[moduleId].call(module.exports,module,module.exports,__webpack_require__),module.l=!0,module.exports}__webpack_require__.m=modules,__webpack_require__.c=installedModules,__webpack_require__.d=function(exports,name,getter){__webpack_require__.o(exports,name)||Object.defineProperty(exports,name,{enumerable:!0,get:getter})},__webpack_require__.r=function(exports){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(exports,"__esModule",{value:!0})},__webpack_require__.t=function(value,mode){if(1&mode&&(value=__webpack_require__(value)),8&mode)return value;if(4&mode&&"object"==typeof value&&value&&value.__esModule)return value;var ns=Object.create(null);if(__webpack_require__.r(ns),Object.defineProperty(ns,"default",{enumerable:!0,value:value}),2&mode&&"string"!=typeof value)for(var key in value)__webpack_require__.d(ns,key,function(key){return value[key]}.bind(null,key));return ns},__webpack_require__.n=function(module){var getter=module&&module.__esModule?function getDefault(){return module.default}:function getModuleExports(){return module};return __webpack_require__.d(getter,"a",getter),getter},__webpack_require__.o=function(object,property){return Object.prototype.hasOwnProperty.call(object,property)},__webpack_require__.p="";var jsonpArray=window.webpackJsonp=window.webpackJsonp||[],oldJsonpFunction=jsonpArray.push.bind(jsonpArray);jsonpArray.push=webpackJsonpCallback,jsonpArray=jsonpArray.slice();for(var i=0;i<jsonpArray.length;i++)webpackJsonpCallback(jsonpArray[i]);var parentJsonpFunction=oldJsonpFunction;checkDeferredModules()}([]);
|
||||||
//# sourceMappingURL=runtime~main.075acd964d46ea3e765c.bundle.js.map
|
//# sourceMappingURL=runtime~main.e9585d931aedb4990ba2.bundle.js.map
|
||||||
|
|
@ -1 +1 @@
|
||||||
{"version":3,"file":"runtime~main.075acd964d46ea3e765c.bundle.js","sources":["webpack:///runtime~main.3fc22874a0adf047f1de.bundle.js"],"mappings":"AAAA","sourceRoot":""}
|
{"version":3,"file":"runtime~main.e9585d931aedb4990ba2.bundle.js","sources":["webpack:///runtime~main.3fc22874a0adf047f1de.bundle.js"],"mappings":"AAAA","sourceRoot":""}
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
{"version":3,"file":"vendors~main.075acd964d46ea3e765c.bundle.js","sources":["webpack:///vendors~main.075acd964d46ea3e765c.bundle.js"],"mappings":"AAAA;;;;;;;;;;;;;;AAmmPA;;;;;AAy9WA;;AAu8BA;;;;;;;;;;;;;;AAmBA;;;;;AA68NA;;;;;AAkkEA;;;;;;;;;AAukBA;;;AA8odA;;;;;;;;AAg/BA;;;;;;;;AAqEA;;;;;;;;AAkTA;;;;;;;AAyrDA;;;;;;;AAy7CA;;;;;;;AA8cA;;;;;;;AAfA","sourceRoot":""}
|
|
||||||
File diff suppressed because one or more lines are too long
1
docs/vendors~main.e9585d931aedb4990ba2.bundle.js.map
Normal file
1
docs/vendors~main.e9585d931aedb4990ba2.bundle.js.map
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
{"version":3,"file":"vendors~main.e9585d931aedb4990ba2.bundle.js","sources":["webpack:///vendors~main.e9585d931aedb4990ba2.bundle.js"],"mappings":"AAAA;;;;;;;;;;;;;;AAmmPA;;;;;AAq7XA;;AAu8BA;;;;;;;;;;;;;;AAmBA;;;;;AA68NA;;;;;AAkkEA;;;;;;;;;AAukBA;;;AA8odA;;;;;;;;AAg/BA;;;;;;;;AAqEA;;;;;;;;AAkTA;;;;;;;AAyrDA;;;;;;;AAy7CA;;;;;;;AA+cA;;;;;;;AAfA","sourceRoot":""}
|
||||||
15
src/components/NumberInput/NumberInput.Skeleton.svelte
Normal file
15
src/components/NumberInput/NumberInput.Skeleton.svelte
Normal file
|
|
@ -0,0 +1,15 @@
|
||||||
|
<script>
|
||||||
|
let className = undefined;
|
||||||
|
export { className as class };
|
||||||
|
export let hideLabel = false;
|
||||||
|
export let style = undefined;
|
||||||
|
|
||||||
|
import { cx } from '../../lib';
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div on:click on:mouseover on:mouseenter on:mouseleave class={cx('--form-item', className)} {style}>
|
||||||
|
{#if !hideLabel}
|
||||||
|
<span class={cx('--label', '--skeleton')} />
|
||||||
|
{/if}
|
||||||
|
<div class={cx('--number', '--skeleton')} />
|
||||||
|
</div>
|
||||||
23
src/components/NumberInput/NumberInput.Story.svelte
Normal file
23
src/components/NumberInput/NumberInput.Story.svelte
Normal file
|
|
@ -0,0 +1,23 @@
|
||||||
|
<script>
|
||||||
|
export let story = undefined;
|
||||||
|
|
||||||
|
import Layout from '../../internal/ui/Layout.svelte';
|
||||||
|
import NumberInput from './NumberInput.svelte';
|
||||||
|
import NumberInputSkeleton from './NumberInput.Skeleton.svelte';
|
||||||
|
|
||||||
|
let value = $$props.value;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<Layout>
|
||||||
|
{#if story === 'skeleton'}
|
||||||
|
<NumberInputSkeleton {...$$props} />
|
||||||
|
{:else}
|
||||||
|
<NumberInput
|
||||||
|
{...$$props}
|
||||||
|
id="slider"
|
||||||
|
bind:value
|
||||||
|
on:change={({ detail }) => {
|
||||||
|
console.log('on:change', detail);
|
||||||
|
}} />
|
||||||
|
{/if}
|
||||||
|
</Layout>
|
||||||
32
src/components/NumberInput/NumberInput.stories.js
Normal file
32
src/components/NumberInput/NumberInput.stories.js
Normal file
|
|
@ -0,0 +1,32 @@
|
||||||
|
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: 'number-input',
|
||||||
|
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),
|
||||||
|
isMobile: boolean('Mobile variant', false),
|
||||||
|
invalidText: text('Form validation UI content (invalidText)', 'Number is not valid'),
|
||||||
|
helperText: text('Helper text (helperText)', 'Optional helper text.'),
|
||||||
|
light: boolean('Light variant (light)', false)
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
export const Skeleton = () => ({
|
||||||
|
Component,
|
||||||
|
props: {
|
||||||
|
story: 'skeleton',
|
||||||
|
hideLabel: boolean('Hide label (hideLabel)', false)
|
||||||
|
}
|
||||||
|
});
|
||||||
183
src/components/NumberInput/NumberInput.svelte
Normal file
183
src/components/NumberInput/NumberInput.svelte
Normal file
|
|
@ -0,0 +1,183 @@
|
||||||
|
<script>
|
||||||
|
let className = undefined;
|
||||||
|
export { className as class };
|
||||||
|
export let disabled = false;
|
||||||
|
export let hideLabel = false;
|
||||||
|
export let iconDescription = '';
|
||||||
|
export let id = Math.random();
|
||||||
|
export let label = '';
|
||||||
|
export let max = undefined;
|
||||||
|
export let min = undefined;
|
||||||
|
export let step = 1;
|
||||||
|
export let value = '';
|
||||||
|
export let readonly = false;
|
||||||
|
export let invalid = false;
|
||||||
|
export let invalidText = 'Provide invalidText';
|
||||||
|
export let helperText = '';
|
||||||
|
export let light = false;
|
||||||
|
export let allowEmpty = false;
|
||||||
|
export let isMobile = false;
|
||||||
|
export const translationIds = { increment: 'increment', decrement: 'decrement' };
|
||||||
|
export let translateWithId = id => defaultTranslations[id];
|
||||||
|
export let style = undefined;
|
||||||
|
|
||||||
|
import { createEventDispatcher, afterUpdate } from 'svelte';
|
||||||
|
import WarningFilled16 from 'carbon-icons-svelte/lib/WarningFilled16';
|
||||||
|
import CaretDownGlyph from 'carbon-icons-svelte/lib/CaretDownGlyph';
|
||||||
|
import CaretUpGlyph from 'carbon-icons-svelte/lib/CaretUpGlyph';
|
||||||
|
import { cx } from '../../lib';
|
||||||
|
|
||||||
|
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 on:click on:mouseover on:mouseenter on:mouseleave class={cx('--form-item', className)} {style}>
|
||||||
|
<div
|
||||||
|
data-invalid={error || undefined}
|
||||||
|
class={cx('--number', '--number--helpertext', readonly && '--number--readonly', light && '--number--light', hideLabel && '--number--nolabel', isMobile && '--number--mobile')}>
|
||||||
|
{#if isMobile}
|
||||||
|
{#if label}
|
||||||
|
<label class={cx('--label', hideLabel && '--visually-hidden')} for={id}>
|
||||||
|
<slot name="label">{label}</slot>
|
||||||
|
</label>
|
||||||
|
{/if}
|
||||||
|
{#if helperText}
|
||||||
|
<div class={cx('--form__helper-text')}>{helperText}</div>
|
||||||
|
{/if}
|
||||||
|
<div class={cx('--number__input-wrapper')}>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
aria-live="polite"
|
||||||
|
aria-atomic="true"
|
||||||
|
title={decrementLabel}
|
||||||
|
aria-label={decrementLabel || iconDescription}
|
||||||
|
class={cx('--number__control-btn', 'down-icon')}
|
||||||
|
on:click={() => {
|
||||||
|
updateValue(-1);
|
||||||
|
}}
|
||||||
|
{disabled}>
|
||||||
|
<CaretDownGlyph class="down-icon" />
|
||||||
|
</button>
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
pattern="[0-9]*"
|
||||||
|
aria-label={label ? undefined : ariaLabel}
|
||||||
|
on:input
|
||||||
|
on:input={({ target }) => {
|
||||||
|
value = target.value;
|
||||||
|
}}
|
||||||
|
{disabled}
|
||||||
|
{id}
|
||||||
|
{max}
|
||||||
|
{min}
|
||||||
|
{step}
|
||||||
|
{value}
|
||||||
|
{readonly} />
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
aria-live="polite"
|
||||||
|
aria-atomic="true"
|
||||||
|
title={incrementLabel}
|
||||||
|
aria-label={incrementLabel || iconDescription}
|
||||||
|
class={cx('--number__control-btn', 'up-icon')}
|
||||||
|
on:click={() => {
|
||||||
|
updateValue(1);
|
||||||
|
}}
|
||||||
|
{disabled}>
|
||||||
|
<CaretUpGlyph class="up-icon" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
{:else}
|
||||||
|
{#if label}
|
||||||
|
<label class={cx('--label', hideLabel && '--visually-hidden')} for={id}>
|
||||||
|
<slot name="label">{label}</slot>
|
||||||
|
</label>
|
||||||
|
{/if}
|
||||||
|
{#if helperText}
|
||||||
|
<div class={cx('--form__helper-text')}>{helperText}</div>
|
||||||
|
{/if}
|
||||||
|
<div class={cx('--number__input-wrapper')}>
|
||||||
|
<input
|
||||||
|
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={cx('--number__invalid')} />
|
||||||
|
{/if}
|
||||||
|
<div class={cx('--number__controls')}>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
aria-live="polite"
|
||||||
|
aria-atomic="true"
|
||||||
|
title={incrementLabel || iconDescription}
|
||||||
|
aria-label={incrementLabel || iconDescription}
|
||||||
|
class={cx('--number__control-btn', 'up-icon')}
|
||||||
|
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={cx('--number__control-btn', 'down-icon')}
|
||||||
|
on:click={() => {
|
||||||
|
updateValue(-1);
|
||||||
|
}}
|
||||||
|
{disabled}>
|
||||||
|
<CaretDownGlyph class="down-icon" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
{#if error}
|
||||||
|
<div class={cx('--form-requirement')} id={errorId}>{invalidText}</div>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
4
src/components/NumberInput/index.js
Normal file
4
src/components/NumberInput/index.js
Normal file
|
|
@ -0,0 +1,4 @@
|
||||||
|
import NumberInput from './NumberInput.svelte';
|
||||||
|
|
||||||
|
export default NumberInput;
|
||||||
|
export { default as NumberInputSkeleton } from './NumberInput.Skeleton.svelte';
|
||||||
|
|
@ -33,6 +33,7 @@ import {
|
||||||
NotificationIcon,
|
NotificationIcon,
|
||||||
NotificationTextDetails
|
NotificationTextDetails
|
||||||
} from './components/Notification';
|
} from './components/Notification';
|
||||||
|
import NumberInput, { NumberInputSkeleton } from './components/NumberInput';
|
||||||
import OrderedList from './components/OrderedList';
|
import OrderedList from './components/OrderedList';
|
||||||
import OverflowMenu, { OverflowMenuItem } from './components/OverflowMenu';
|
import OverflowMenu, { OverflowMenuItem } from './components/OverflowMenu';
|
||||||
import Pagination, { PaginationSkeleton } from './components/Pagination';
|
import Pagination, { PaginationSkeleton } from './components/Pagination';
|
||||||
|
|
@ -122,6 +123,8 @@ export {
|
||||||
NotificationButton,
|
NotificationButton,
|
||||||
NotificationIcon,
|
NotificationIcon,
|
||||||
NotificationTextDetails,
|
NotificationTextDetails,
|
||||||
|
NumberInput,
|
||||||
|
NumberInputSkeleton,
|
||||||
OrderedList,
|
OrderedList,
|
||||||
OverflowMenu,
|
OverflowMenu,
|
||||||
OverflowMenuItem,
|
OverflowMenuItem,
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue