mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-15 10:21:05 +00:00
refactor(components): alphabetize exported props for scannability
This commit is contained in:
parent
d4abc1dfd3
commit
b1fe3de8ad
78 changed files with 265 additions and 264 deletions
|
@ -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.548a6af97ccb098d1b95.bundle.js"></script><script src="vendors~main.548a6af97ccb098d1b95.bundle.js"></script><script src="main.548a6af97ccb098d1b95.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.977ebf979d865a2cb35d.bundle.js"></script><script src="vendors~main.977ebf979d865a2cb35d.bundle.js"></script><script src="main.977ebf979d865a2cb35d.bundle.js"></script></body></html>
|
File diff suppressed because one or more lines are too long
|
@ -1 +0,0 @@
|
||||||
{"version":3,"file":"main.548a6af97ccb098d1b95.bundle.js","sources":["webpack:///main.548a6af97ccb098d1b95.bundle.js"],"mappings":"AAAA","sourceRoot":""}
|
|
2
docs/main.977ebf979d865a2cb35d.bundle.js
Normal file
2
docs/main.977ebf979d865a2cb35d.bundle.js
Normal file
File diff suppressed because one or more lines are too long
1
docs/main.977ebf979d865a2cb35d.bundle.js.map
Normal file
1
docs/main.977ebf979d865a2cb35d.bundle.js.map
Normal file
|
@ -0,0 +1 @@
|
||||||
|
{"version":3,"file":"main.977ebf979d865a2cb35d.bundle.js","sources":["webpack:///main.977ebf979d865a2cb35d.bundle.js"],"mappings":"AAAA","sourceRoot":""}
|
|
@ -1 +0,0 @@
|
||||||
{"version":3,"file":"runtime~main.548a6af97ccb098d1b95.bundle.js","sources":["webpack:///runtime~main.548a6af97ccb098d1b95.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.548a6af97ccb098d1b95.bundle.js.map
|
//# sourceMappingURL=runtime~main.977ebf979d865a2cb35d.bundle.js.map
|
1
docs/runtime~main.977ebf979d865a2cb35d.bundle.js.map
Normal file
1
docs/runtime~main.977ebf979d865a2cb35d.bundle.js.map
Normal file
|
@ -0,0 +1 @@
|
||||||
|
{"version":3,"file":"runtime~main.977ebf979d865a2cb35d.bundle.js","sources":["webpack:///runtime~main.977ebf979d865a2cb35d.bundle.js"],"mappings":"AAAA","sourceRoot":""}
|
|
@ -1 +0,0 @@
|
||||||
{"version":3,"file":"vendors~main.548a6af97ccb098d1b95.bundle.js","sources":["webpack:///vendors~main.548a6af97ccb098d1b95.bundle.js"],"mappings":"AAAA;;;;;;;;;;;;;;AAg4PA;;;;;AAq/XA;;AAu8BA;;;;;;;;;;;;;;AAmBA;;;;;AA6gPA;;;;;AAkkEA;;;;;;;;;AAukBA;;;AA8odA;;;;;;;;AAg/BA;;;;;;;;AAqEA;;;;;;;;AAkTA;;;;;;;AAyrDA;;;;;;;AAy7CA;;;;;;;AAmdA;;;;;;;AAfA","sourceRoot":""}
|
|
File diff suppressed because one or more lines are too long
1
docs/vendors~main.977ebf979d865a2cb35d.bundle.js.map
Normal file
1
docs/vendors~main.977ebf979d865a2cb35d.bundle.js.map
Normal file
|
@ -0,0 +1 @@
|
||||||
|
{"version":3,"file":"vendors~main.977ebf979d865a2cb35d.bundle.js","sources":["webpack:///vendors~main.977ebf979d865a2cb35d.bundle.js"],"mappings":"AAAA;;;;;;;;;;;;;;AAk4PA;;;;;AAq/XA;;AAu8BA;;;;;;;;;;;;;;AAmBA;;;;;AA6gPA;;;;;AAkkEA;;;;;;;;;AAukBA;;;AA8odA;;;;;;;;AAg/BA;;;;;;;;AAqEA;;;;;;;;AAkTA;;;;;;;AAyrDA;;;;;;;AAy7CA;;;;;;;AAodA;;;;;;;AAfA","sourceRoot":""}
|
|
@ -1,8 +1,8 @@
|
||||||
<script>
|
<script>
|
||||||
let className = undefined;
|
let className = undefined;
|
||||||
export { className as class };
|
export { className as class };
|
||||||
export let open = true;
|
|
||||||
export let count = 4;
|
export let count = 4;
|
||||||
|
export let open = true;
|
||||||
export let style = undefined;
|
export let style = undefined;
|
||||||
|
|
||||||
import ChevronRight16 from 'carbon-icons-svelte/lib/ChevronRight16';
|
import ChevronRight16 from 'carbon-icons-svelte/lib/ChevronRight16';
|
||||||
|
|
|
@ -1,10 +1,10 @@
|
||||||
<script>
|
<script>
|
||||||
let className = undefined;
|
let className = undefined;
|
||||||
export { className as class };
|
export { className as class };
|
||||||
export let title = undefined;
|
|
||||||
export let iconDescription = 'Expand/Collapse';
|
export let iconDescription = 'Expand/Collapse';
|
||||||
export let open = false;
|
export let open = false;
|
||||||
export let style = undefined;
|
export let style = undefined;
|
||||||
|
export let title = undefined;
|
||||||
|
|
||||||
import ChevronRight16 from 'carbon-icons-svelte/lib/ChevronRight16';
|
import ChevronRight16 from 'carbon-icons-svelte/lib/ChevronRight16';
|
||||||
import { cx } from '../../lib';
|
import { cx } from '../../lib';
|
||||||
|
|
|
@ -1,8 +1,8 @@
|
||||||
<script>
|
<script>
|
||||||
let className = undefined;
|
let className = undefined;
|
||||||
export { className as class };
|
export { className as class };
|
||||||
export let small = false;
|
|
||||||
export let href = undefined;
|
export let href = undefined;
|
||||||
|
export let small = false;
|
||||||
export let style = undefined;
|
export let style = undefined;
|
||||||
|
|
||||||
import { cx } from '../../lib';
|
import { cx } from '../../lib';
|
||||||
|
|
|
@ -3,16 +3,16 @@
|
||||||
export { className as class };
|
export { className as class };
|
||||||
export let as = undefined;
|
export let as = undefined;
|
||||||
export let disabled = false;
|
export let disabled = false;
|
||||||
export let size = 'default';
|
|
||||||
export let kind = 'primary';
|
|
||||||
export let href = undefined;
|
export let href = undefined;
|
||||||
export let tabindex = '0';
|
|
||||||
export let type = 'button';
|
|
||||||
export let icon = undefined;
|
export let icon = undefined;
|
||||||
export let iconDescription = undefined;
|
export let iconDescription = undefined;
|
||||||
export let tooltipPosition = undefined;
|
export let kind = 'primary';
|
||||||
export let tooltipAlignment = undefined;
|
export let size = 'default';
|
||||||
export let style = undefined;
|
export let style = undefined;
|
||||||
|
export let tabindex = '0';
|
||||||
|
export let tooltipAlignment = undefined;
|
||||||
|
export let tooltipPosition = undefined;
|
||||||
|
export let type = 'button';
|
||||||
|
|
||||||
import { getContext } from 'svelte';
|
import { getContext } from 'svelte';
|
||||||
import { cx } from '../../lib';
|
import { cx } from '../../lib';
|
||||||
|
|
|
@ -2,15 +2,15 @@
|
||||||
let className = undefined;
|
let className = undefined;
|
||||||
export { className as class };
|
export { className as class };
|
||||||
export let checked = false;
|
export let checked = false;
|
||||||
export let indeterminate = false;
|
|
||||||
export let disabled = false;
|
export let disabled = false;
|
||||||
|
export let hideLabel = false;
|
||||||
export let id = Math.random();
|
export let id = Math.random();
|
||||||
|
export let indeterminate = false;
|
||||||
export let labelText = '';
|
export let labelText = '';
|
||||||
export let name = '';
|
export let name = '';
|
||||||
export let readonly = false;
|
export let readonly = false;
|
||||||
export let hideLabel = false;
|
|
||||||
export let title = '';
|
|
||||||
export let style = undefined;
|
export let style = undefined;
|
||||||
|
export let title = '';
|
||||||
|
|
||||||
import { createEventDispatcher } from 'svelte';
|
import { createEventDispatcher } from 'svelte';
|
||||||
import { cx } from '../../lib';
|
import { cx } from '../../lib';
|
||||||
|
|
|
@ -1,8 +1,8 @@
|
||||||
<script>
|
<script>
|
||||||
let className = undefined;
|
let className = undefined;
|
||||||
export { className as class };
|
export { className as class };
|
||||||
export let type = 'single';
|
|
||||||
export let style = undefined;
|
export let style = undefined;
|
||||||
|
export let type = 'single';
|
||||||
|
|
||||||
import { cx } from '../../lib';
|
import { cx } from '../../lib';
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -1,15 +1,15 @@
|
||||||
<script>
|
<script>
|
||||||
let className = undefined;
|
let className = undefined;
|
||||||
export { className as class };
|
export { className as class };
|
||||||
export let type = 'single';
|
|
||||||
export let feedback = undefined;
|
|
||||||
export let feedbackTimeout = undefined;
|
|
||||||
export let copyButtonDescription = undefined;
|
export let copyButtonDescription = undefined;
|
||||||
export let copyLabel = undefined;
|
export let copyLabel = undefined;
|
||||||
export let showMoreText = 'Show more';
|
export let feedback = undefined;
|
||||||
export let showLessText = 'Show less';
|
export let feedbackTimeout = undefined;
|
||||||
export let light = false;
|
export let light = false;
|
||||||
|
export let showLessText = 'Show less';
|
||||||
|
export let showMoreText = 'Show more';
|
||||||
export let style = undefined;
|
export let style = undefined;
|
||||||
|
export let type = 'single';
|
||||||
|
|
||||||
import { afterUpdate } from 'svelte';
|
import { afterUpdate } from 'svelte';
|
||||||
import ChevronDown16 from 'carbon-icons-svelte/lib/ChevronDown16';
|
import ChevronDown16 from 'carbon-icons-svelte/lib/ChevronDown16';
|
||||||
|
|
|
@ -1,23 +1,23 @@
|
||||||
<script>
|
<script>
|
||||||
let className = undefined;
|
let className = undefined;
|
||||||
export { className as class };
|
export { className as class };
|
||||||
export let id = Math.random();
|
|
||||||
export let titleText = '';
|
|
||||||
export let helperText = '';
|
|
||||||
export let disabled = false;
|
export let disabled = false;
|
||||||
export let value = '';
|
export let helperText = '';
|
||||||
export let open = false;
|
export let id = Math.random();
|
||||||
export let selectedIndex = -1;
|
|
||||||
export let items = [];
|
|
||||||
export let itemToString = item => item.text || item.id;
|
|
||||||
export let placeholder = '';
|
|
||||||
export let shouldFilterItem = () => true;
|
|
||||||
export let invalid = false;
|
export let invalid = false;
|
||||||
export let invalidText = '';
|
export let invalidText = '';
|
||||||
export let translateWithId = undefined;
|
export let items = [];
|
||||||
export let size = undefined;
|
export let itemToString = item => item.text || item.id;
|
||||||
export let light = false;
|
export let light = false;
|
||||||
|
export let open = false;
|
||||||
|
export let placeholder = '';
|
||||||
|
export let selectedIndex = -1;
|
||||||
|
export let shouldFilterItem = () => true;
|
||||||
|
export let size = undefined;
|
||||||
export let style = undefined;
|
export let style = undefined;
|
||||||
|
export let titleText = '';
|
||||||
|
export let translateWithId = undefined;
|
||||||
|
export let value = '';
|
||||||
|
|
||||||
import { afterUpdate } from 'svelte';
|
import { afterUpdate } from 'svelte';
|
||||||
import WarningFilled16 from 'carbon-icons-svelte/lib/WarningFilled16';
|
import WarningFilled16 from 'carbon-icons-svelte/lib/WarningFilled16';
|
||||||
|
|
|
@ -2,8 +2,8 @@
|
||||||
let className = undefined;
|
let className = undefined;
|
||||||
export { className as class };
|
export { className as class };
|
||||||
export let containerClass = undefined;
|
export let containerClass = undefined;
|
||||||
export let open = false;
|
|
||||||
export let danger = false;
|
export let danger = false;
|
||||||
|
export let open = false;
|
||||||
export let selectorPrimaryFocus = '[data-modal-primary-focus]';
|
export let selectorPrimaryFocus = '[data-modal-primary-focus]';
|
||||||
export let size = undefined;
|
export let size = undefined;
|
||||||
export let style = undefined;
|
export let style = undefined;
|
||||||
|
|
|
@ -9,6 +9,7 @@
|
||||||
import { cx } from '../../lib';
|
import { cx } from '../../lib';
|
||||||
|
|
||||||
const dispatch = createEventDispatcher();
|
const dispatch = createEventDispatcher();
|
||||||
|
|
||||||
let currentId = writable(null);
|
let currentId = writable(null);
|
||||||
let currentIndex = selectedIndex;
|
let currentIndex = selectedIndex;
|
||||||
let switches = [];
|
let switches = [];
|
||||||
|
|
|
@ -1,9 +1,9 @@
|
||||||
<script>
|
<script>
|
||||||
let className = undefined;
|
let className = undefined;
|
||||||
export { className as class };
|
export { className as class };
|
||||||
export let iconDescription = 'Copy to clipboard';
|
|
||||||
export let feedback = 'Copied!';
|
export let feedback = 'Copied!';
|
||||||
export let feedbackTimeout = 2000;
|
export let feedbackTimeout = 2000;
|
||||||
|
export let iconDescription = 'Copy to clipboard';
|
||||||
export let style = undefined;
|
export let style = undefined;
|
||||||
|
|
||||||
import { afterUpdate, onDestroy } from 'svelte';
|
import { afterUpdate, onDestroy } from 'svelte';
|
||||||
|
|
|
@ -1,12 +1,12 @@
|
||||||
<script>
|
<script>
|
||||||
let className = undefined;
|
let className = undefined;
|
||||||
export { className as class };
|
export { className as class };
|
||||||
export let zebra = false;
|
export let columns = 5;
|
||||||
export let compact = false;
|
export let compact = false;
|
||||||
export let headers = [];
|
export let headers = [];
|
||||||
export let rows = 5;
|
export let rows = 5;
|
||||||
export let columns = 5;
|
|
||||||
export let style = undefined;
|
export let style = undefined;
|
||||||
|
export let zebra = false;
|
||||||
|
|
||||||
import { cx, fillArray } from '../../lib';
|
import { cx, fillArray } from '../../lib';
|
||||||
|
|
||||||
|
|
|
@ -3,8 +3,8 @@
|
||||||
|
|
||||||
import Layout from '../../internal/ui/Layout.svelte';
|
import Layout from '../../internal/ui/Layout.svelte';
|
||||||
import DatePicker from './DatePicker.svelte';
|
import DatePicker from './DatePicker.svelte';
|
||||||
import DatePickerSkeleton from './DatePicker.Skeleton.svelte';
|
|
||||||
import DatePickerInput from './DatePickerInput.svelte';
|
import DatePickerInput from './DatePickerInput.svelte';
|
||||||
|
import DatePickerSkeleton from './DatePicker.Skeleton.svelte';
|
||||||
|
|
||||||
let datePickerType = 'simple';
|
let datePickerType = 'simple';
|
||||||
let value = '';
|
let value = '';
|
||||||
|
|
|
@ -1,21 +1,21 @@
|
||||||
<script>
|
<script>
|
||||||
let className = undefined;
|
let className = undefined;
|
||||||
export { className as class };
|
export { className as class };
|
||||||
export let id = Math.random();
|
|
||||||
export let short = false;
|
|
||||||
export let datePickerType = 'simple';
|
|
||||||
export let dateFormat = 'm/d/Y';
|
|
||||||
export let locale = 'en';
|
|
||||||
export let value = '';
|
|
||||||
export let appendTo = document.body;
|
export let appendTo = document.body;
|
||||||
export let minDate = null;
|
export let dateFormat = 'm/d/Y';
|
||||||
export let maxDate = null;
|
export let datePickerType = 'simple';
|
||||||
|
export let id = Math.random();
|
||||||
export let light = false;
|
export let light = false;
|
||||||
|
export let locale = 'en';
|
||||||
|
export let maxDate = null;
|
||||||
|
export let minDate = null;
|
||||||
|
export let short = false;
|
||||||
export let style = undefined;
|
export let style = undefined;
|
||||||
|
export let value = '';
|
||||||
|
|
||||||
import { createEventDispatcher, setContext, afterUpdate, onDestroy } from 'svelte';
|
import { createEventDispatcher, setContext, afterUpdate, onDestroy } from 'svelte';
|
||||||
import { writable, derived } from 'svelte/store';
|
import { writable, derived } from 'svelte/store';
|
||||||
import { createCalendar } from './flatpickr';
|
import { createCalendar } from './createCalendar';
|
||||||
import { cx } from '../../lib';
|
import { cx } from '../../lib';
|
||||||
|
|
||||||
const dispatch = createEventDispatcher();
|
const dispatch = createEventDispatcher();
|
||||||
|
|
|
@ -1,17 +1,17 @@
|
||||||
<script>
|
<script>
|
||||||
let className = undefined;
|
let className = undefined;
|
||||||
export { className as class };
|
export { className as class };
|
||||||
export let id = Math.random();
|
|
||||||
export let iconDescription = '';
|
|
||||||
export let labelText = '';
|
|
||||||
export let hideLabel = false;
|
|
||||||
export let pattern = '\\d{1,2}\\/\\d{1,2}\\/\\d{4}';
|
|
||||||
export let type = 'text';
|
|
||||||
export let placeholder = '';
|
|
||||||
export let disabled = false;
|
export let disabled = false;
|
||||||
|
export let hideLabel = false;
|
||||||
|
export let iconDescription = '';
|
||||||
|
export let id = Math.random();
|
||||||
export let invalid = false;
|
export let invalid = false;
|
||||||
export let invalidText = '';
|
export let invalidText = '';
|
||||||
|
export let labelText = '';
|
||||||
|
export let pattern = '\\d{1,2}\\/\\d{1,2}\\/\\d{4}';
|
||||||
|
export let placeholder = '';
|
||||||
export let style = undefined;
|
export let style = undefined;
|
||||||
|
export let type = 'text';
|
||||||
|
|
||||||
import { getContext, onMount } from 'svelte';
|
import { getContext, onMount } from 'svelte';
|
||||||
import Calendar16 from 'carbon-icons-svelte/lib/Calendar16';
|
import Calendar16 from 'carbon-icons-svelte/lib/Calendar16';
|
||||||
|
|
|
@ -4,8 +4,8 @@
|
||||||
export let style = undefined;
|
export let style = undefined;
|
||||||
|
|
||||||
import { cx } from '../../lib';
|
import { cx } from '../../lib';
|
||||||
import SkeletonText from '../SkeletonText';
|
|
||||||
import { ButtonSkeleton } from '../Button';
|
import { ButtonSkeleton } from '../Button';
|
||||||
|
import SkeletonText from '../SkeletonText';
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div on:click on:mouseover on:mouseenter on:mouseleave class={cx('--form-item', className)} {style}>
|
<div on:click on:mouseover on:mouseenter on:mouseleave class={cx('--form-item', className)} {style}>
|
||||||
|
|
|
@ -6,8 +6,8 @@
|
||||||
import Button from '../Button';
|
import Button from '../Button';
|
||||||
import FileUploader from './FileUploader.svelte';
|
import FileUploader from './FileUploader.svelte';
|
||||||
import FileUploaderButton from './FileUploaderButton.svelte';
|
import FileUploaderButton from './FileUploaderButton.svelte';
|
||||||
import FileUploaderItem from './FileUploaderItem.svelte';
|
|
||||||
import FileUploaderDropContainer from './FileUploaderDropContainer.svelte';
|
import FileUploaderDropContainer from './FileUploaderDropContainer.svelte';
|
||||||
|
import FileUploaderItem from './FileUploaderItem.svelte';
|
||||||
import FileUploaderSkeleton from './FileUploader.Skeleton.svelte';
|
import FileUploaderSkeleton from './FileUploader.Skeleton.svelte';
|
||||||
|
|
||||||
let fileUploader = undefined;
|
let fileUploader = undefined;
|
||||||
|
|
|
@ -1,17 +1,17 @@
|
||||||
<script>
|
<script>
|
||||||
let className = undefined;
|
let className = undefined;
|
||||||
export { className as class };
|
export { className as class };
|
||||||
export let files = [];
|
|
||||||
export const clearFiles = () => (files = []);
|
export const clearFiles = () => (files = []);
|
||||||
export let name = '';
|
export let accept = [];
|
||||||
|
export let buttonLabel = '';
|
||||||
|
export let files = [];
|
||||||
|
export let iconDescription = 'Provide icon description';
|
||||||
|
export let kind = 'primary';
|
||||||
export let labelDescription = '';
|
export let labelDescription = '';
|
||||||
export let labelTitle = '';
|
export let labelTitle = '';
|
||||||
export let iconDescription = 'Provide icon description';
|
|
||||||
export let status = 'uploading';
|
|
||||||
export let buttonLabel = '';
|
|
||||||
export let kind = 'primary';
|
|
||||||
export let multiple = false;
|
export let multiple = false;
|
||||||
export let accept = [];
|
export let name = '';
|
||||||
|
export let status = 'uploading';
|
||||||
export let style = undefined;
|
export let style = undefined;
|
||||||
|
|
||||||
import { createEventDispatcher, afterUpdate } from 'svelte';
|
import { createEventDispatcher, afterUpdate } from 'svelte';
|
||||||
|
|
|
@ -1,17 +1,17 @@
|
||||||
<script>
|
<script>
|
||||||
let className = undefined;
|
let className = undefined;
|
||||||
export { className as class };
|
export { className as class };
|
||||||
|
export let accept = [];
|
||||||
|
export let disabled = false;
|
||||||
export let disableLabelChanges = false;
|
export let disableLabelChanges = false;
|
||||||
export let id = Math.random();
|
export let id = Math.random();
|
||||||
|
export let kind = 'primary';
|
||||||
export let labelText = 'Add file';
|
export let labelText = 'Add file';
|
||||||
export let multiple = false;
|
export let multiple = false;
|
||||||
export let name = '';
|
export let name = '';
|
||||||
export let role = 'button';
|
export let role = 'button';
|
||||||
export let tabindex = '0';
|
|
||||||
export let kind = 'primary';
|
|
||||||
export let accept = [];
|
|
||||||
export let disabled = false;
|
|
||||||
export let style = undefined;
|
export let style = undefined;
|
||||||
|
export let tabindex = '0';
|
||||||
|
|
||||||
import { cx } from '../../lib';
|
import { cx } from '../../lib';
|
||||||
|
|
||||||
|
|
|
@ -1,16 +1,16 @@
|
||||||
<script>
|
<script>
|
||||||
let className = undefined;
|
let className = undefined;
|
||||||
export { className as class };
|
export { className as class };
|
||||||
export let name = '';
|
export let accept = [];
|
||||||
export let role = 'button';
|
|
||||||
export let id = Math.random();
|
|
||||||
export let disabled = false;
|
export let disabled = false;
|
||||||
export let tabindex = '0';
|
export let id = Math.random();
|
||||||
export let labelText = 'Add file';
|
export let labelText = 'Add file';
|
||||||
export let multiple = false;
|
export let multiple = false;
|
||||||
export let accept = [];
|
export let name = '';
|
||||||
export let validateFiles = files => files;
|
export let role = 'button';
|
||||||
export let style = undefined;
|
export let style = undefined;
|
||||||
|
export let tabindex = '0';
|
||||||
|
export let validateFiles = files => files;
|
||||||
|
|
||||||
import { createEventDispatcher } from 'svelte';
|
import { createEventDispatcher } from 'svelte';
|
||||||
import { cx } from '../../lib';
|
import { cx } from '../../lib';
|
||||||
|
|
|
@ -1,13 +1,13 @@
|
||||||
<script>
|
<script>
|
||||||
let className = undefined;
|
let className = undefined;
|
||||||
export { className as class };
|
export { className as class };
|
||||||
export let id = Math.random();
|
|
||||||
export let status = 'uploading';
|
|
||||||
export let iconDescription = '';
|
|
||||||
export let name = '';
|
|
||||||
export let invalid = false;
|
|
||||||
export let errorSubject = '';
|
|
||||||
export let errorBody = '';
|
export let errorBody = '';
|
||||||
|
export let errorSubject = '';
|
||||||
|
export let iconDescription = '';
|
||||||
|
export let id = Math.random();
|
||||||
|
export let invalid = false;
|
||||||
|
export let name = '';
|
||||||
|
export let status = 'uploading';
|
||||||
export let style = undefined;
|
export let style = undefined;
|
||||||
|
|
||||||
import { createEventDispatcher } from 'svelte';
|
import { createEventDispatcher } from 'svelte';
|
||||||
|
|
|
@ -1,11 +1,11 @@
|
||||||
<script>
|
<script>
|
||||||
let className = undefined;
|
let className = undefined;
|
||||||
export { className as class };
|
export { className as class };
|
||||||
export let status = 'uploading';
|
|
||||||
export let iconDescription = '';
|
export let iconDescription = '';
|
||||||
export let invalid = false;
|
export let invalid = false;
|
||||||
export let tabindex = '0';
|
export let status = 'uploading';
|
||||||
export let style = undefined;
|
export let style = undefined;
|
||||||
|
export let tabindex = '0';
|
||||||
|
|
||||||
import Close16 from 'carbon-icons-svelte/lib/Close16';
|
import Close16 from 'carbon-icons-svelte/lib/Close16';
|
||||||
import CheckmarkFilled16 from 'carbon-icons-svelte/lib/CheckmarkFilled16';
|
import CheckmarkFilled16 from 'carbon-icons-svelte/lib/CheckmarkFilled16';
|
||||||
|
|
|
@ -1,8 +1,8 @@
|
||||||
<script>
|
<script>
|
||||||
let className = undefined;
|
let className = undefined;
|
||||||
export { className as class };
|
export { className as class };
|
||||||
export let legendText = '';
|
|
||||||
export let invalid = false;
|
export let invalid = false;
|
||||||
|
export let legendText = '';
|
||||||
export let message = false;
|
export let message = false;
|
||||||
export let messageText = '';
|
export let messageText = '';
|
||||||
export let style = undefined;
|
export let style = undefined;
|
||||||
|
|
|
@ -1,12 +1,12 @@
|
||||||
<script>
|
<script>
|
||||||
let className = undefined;
|
let className = undefined;
|
||||||
export { className as class };
|
export { className as class };
|
||||||
export let skeleton = false;
|
|
||||||
export let render = undefined;
|
|
||||||
export let title = undefined;
|
|
||||||
export let tabindex = undefined;
|
|
||||||
export let focusable = false;
|
export let focusable = false;
|
||||||
|
export let render = undefined;
|
||||||
|
export let skeleton = false;
|
||||||
export let style = undefined;
|
export let style = undefined;
|
||||||
|
export let tabindex = undefined;
|
||||||
|
export let title = undefined;
|
||||||
|
|
||||||
import IconSkeleton from './Icon.Skeleton.svelte';
|
import IconSkeleton from './Icon.Skeleton.svelte';
|
||||||
|
|
||||||
|
|
|
@ -1,11 +1,11 @@
|
||||||
<script>
|
<script>
|
||||||
let className = undefined;
|
let className = undefined;
|
||||||
export { className as class };
|
export { className as class };
|
||||||
export let status = 'active';
|
|
||||||
export let description = undefined;
|
export let description = undefined;
|
||||||
export let iconDescription = undefined;
|
export let iconDescription = undefined;
|
||||||
export let successDelay = 1500;
|
export let status = 'active';
|
||||||
export let style = undefined;
|
export let style = undefined;
|
||||||
|
export let successDelay = 1500;
|
||||||
|
|
||||||
import { createEventDispatcher, afterUpdate, onDestroy } from 'svelte';
|
import { createEventDispatcher, afterUpdate, onDestroy } from 'svelte';
|
||||||
import CheckmarkFilled16 from 'carbon-icons-svelte/lib/CheckmarkFilled16';
|
import CheckmarkFilled16 from 'carbon-icons-svelte/lib/CheckmarkFilled16';
|
||||||
|
|
|
@ -1,8 +1,8 @@
|
||||||
<script>
|
<script>
|
||||||
let className = undefined;
|
let className = undefined;
|
||||||
export { className as class };
|
export { className as class };
|
||||||
export let href = undefined;
|
|
||||||
export let disabled = false;
|
export let disabled = false;
|
||||||
|
export let href = undefined;
|
||||||
export let inline = false;
|
export let inline = false;
|
||||||
export let style = undefined;
|
export let style = undefined;
|
||||||
|
|
||||||
|
|
|
@ -1,15 +1,15 @@
|
||||||
<script>
|
<script>
|
||||||
let className = undefined;
|
let className = undefined;
|
||||||
export { className as class };
|
export { className as class };
|
||||||
export let id = Math.random();
|
|
||||||
export let size = undefined;
|
|
||||||
export let type = 'default';
|
|
||||||
export let disabled = false;
|
export let disabled = false;
|
||||||
|
export let id = Math.random();
|
||||||
export let invalid = false;
|
export let invalid = false;
|
||||||
export let invalidText = '';
|
export let invalidText = '';
|
||||||
export let open = false;
|
|
||||||
export let light = false;
|
export let light = false;
|
||||||
|
export let open = false;
|
||||||
|
export let size = undefined;
|
||||||
export let style = undefined;
|
export let style = undefined;
|
||||||
|
export let type = 'default';
|
||||||
|
|
||||||
import { cx } from '../../lib';
|
import { cx } from '../../lib';
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -1,13 +1,13 @@
|
||||||
<script>
|
<script>
|
||||||
let className = undefined;
|
let className = undefined;
|
||||||
export { className as class };
|
export { className as class };
|
||||||
export let id = Math.random();
|
|
||||||
export let tabindex = '-1';
|
|
||||||
export let role = 'combobox';
|
|
||||||
export let disabled = false;
|
|
||||||
export const translationIds = { close: 'close', open: 'open' };
|
export const translationIds = { close: 'close', open: 'open' };
|
||||||
export let translateWithId = id => defaultTranslations[id];
|
export let disabled = false;
|
||||||
|
export let id = Math.random();
|
||||||
|
export let role = 'combobox';
|
||||||
export let style = undefined;
|
export let style = undefined;
|
||||||
|
export let tabindex = '-1';
|
||||||
|
export let translateWithId = id => defaultTranslations[id];
|
||||||
|
|
||||||
import { getContext } from 'svelte';
|
import { getContext } from 'svelte';
|
||||||
import { cx } from '../../lib';
|
import { cx } from '../../lib';
|
||||||
|
|
|
@ -1,10 +1,10 @@
|
||||||
<script>
|
<script>
|
||||||
let className = undefined;
|
let className = undefined;
|
||||||
export { className as class };
|
export { className as class };
|
||||||
export let open = false;
|
|
||||||
export const translationIds = { close: 'close', open: 'open' };
|
export const translationIds = { close: 'close', open: 'open' };
|
||||||
export let translateWithId = id => defaultTranslations[id];
|
export let open = false;
|
||||||
export let style = undefined;
|
export let style = undefined;
|
||||||
|
export let translateWithId = id => defaultTranslations[id];
|
||||||
|
|
||||||
import ChevronDown16 from 'carbon-icons-svelte/lib/ChevronDown16';
|
import ChevronDown16 from 'carbon-icons-svelte/lib/ChevronDown16';
|
||||||
import { cx } from '../../lib';
|
import { cx } from '../../lib';
|
||||||
|
|
|
@ -1,11 +1,11 @@
|
||||||
<script>
|
<script>
|
||||||
let className = undefined;
|
let className = undefined;
|
||||||
export { className as class };
|
export { className as class };
|
||||||
|
export const translationIds = { clearAll: 'clearAll', clearSelection: 'clearSelection' };
|
||||||
export let disabled = false;
|
export let disabled = false;
|
||||||
export let selectionCount = undefined;
|
export let selectionCount = undefined;
|
||||||
export const translationIds = { clearAll: 'clearAll', clearSelection: 'clearSelection' };
|
|
||||||
export let translateWithId = id => defaultTranslations[id];
|
|
||||||
export let style = undefined;
|
export let style = undefined;
|
||||||
|
export let translateWithId = id => defaultTranslations[id];
|
||||||
|
|
||||||
import { createEventDispatcher, getContext } from 'svelte';
|
import { createEventDispatcher, getContext } from 'svelte';
|
||||||
import Close16 from 'carbon-icons-svelte/lib/Close16';
|
import Close16 from 'carbon-icons-svelte/lib/Close16';
|
||||||
|
|
|
@ -2,10 +2,10 @@
|
||||||
let className = undefined;
|
let className = undefined;
|
||||||
export { className as class };
|
export { className as class };
|
||||||
export let active = true;
|
export let active = true;
|
||||||
export let withOverlay = true;
|
|
||||||
export let small = false;
|
|
||||||
export let description = 'Active loading indicator';
|
export let description = 'Active loading indicator';
|
||||||
|
export let small = false;
|
||||||
export let style = undefined;
|
export let style = undefined;
|
||||||
|
export let withOverlay = true;
|
||||||
|
|
||||||
import { cx } from '../../lib';
|
import { cx } from '../../lib';
|
||||||
|
|
||||||
|
|
|
@ -1,21 +1,21 @@
|
||||||
<script>
|
<script>
|
||||||
let className = undefined;
|
let className = undefined;
|
||||||
export { className as class };
|
export { className as class };
|
||||||
export let passiveModal = false;
|
export let danger = false;
|
||||||
export let hasForm = false;
|
export let hasForm = false;
|
||||||
|
export let hasScrollingContent = false;
|
||||||
|
export let iconDescription = 'Close the modal';
|
||||||
export let id = Math.random();
|
export let id = Math.random();
|
||||||
|
export let modalAriaLabel = undefined;
|
||||||
export let modalHeading = undefined;
|
export let modalHeading = undefined;
|
||||||
export let modalLabel = undefined;
|
export let modalLabel = undefined;
|
||||||
export let modalAriaLabel = undefined;
|
|
||||||
export let open = false;
|
export let open = false;
|
||||||
export let iconDescription = 'Close the modal';
|
export let passiveModal = false;
|
||||||
export let primaryButtonDisabled = false;
|
export let primaryButtonDisabled = false;
|
||||||
export let primaryButtonText = '';
|
export let primaryButtonText = '';
|
||||||
export let secondaryButtonText = '';
|
export let secondaryButtonText = '';
|
||||||
export let danger = false;
|
|
||||||
export let shouldSubmitOnEnter = true;
|
|
||||||
export let hasScrollingContent = false;
|
|
||||||
export let selectorPrimaryFocus = '[data-modal-primary-focus]';
|
export let selectorPrimaryFocus = '[data-modal-primary-focus]';
|
||||||
|
export let shouldSubmitOnEnter = true;
|
||||||
export let size = undefined;
|
export let size = undefined;
|
||||||
export let style = undefined;
|
export let style = undefined;
|
||||||
|
|
||||||
|
|
|
@ -1,30 +1,30 @@
|
||||||
<script>
|
<script>
|
||||||
let className = undefined;
|
let className = undefined;
|
||||||
export { className as class };
|
export { className as class };
|
||||||
export let id = Math.random();
|
|
||||||
export let titleText = '';
|
|
||||||
export let helperText = '';
|
|
||||||
export let disabled = false;
|
export let disabled = false;
|
||||||
export let value = '';
|
|
||||||
export let open = false;
|
|
||||||
export let selectedIds = [];
|
|
||||||
export let items = [];
|
|
||||||
export let itemToString = item => item.text || item.id;
|
|
||||||
export let placeholder = '';
|
|
||||||
export let filterable = false;
|
export let filterable = false;
|
||||||
|
export let filterItem = (item, value) => item.text.toLowerCase().includes(value.toLowerCase());
|
||||||
|
export let helperText = '';
|
||||||
|
export let id = Math.random();
|
||||||
export let invalid = false;
|
export let invalid = false;
|
||||||
export let invalidText = '';
|
export let invalidText = '';
|
||||||
export let translateWithId = undefined;
|
export let items = [];
|
||||||
export let size = undefined;
|
export let itemToString = item => item.text || item.id;
|
||||||
export let type = 'default';
|
|
||||||
export let locale = 'en';
|
|
||||||
export let sortItem = (a, b) => a.text.localeCompare(b.text, locale, { numeric: true });
|
|
||||||
export let filterItem = (item, value) => item.text.toLowerCase().includes(value.toLowerCase());
|
|
||||||
export let label = '';
|
export let label = '';
|
||||||
export let useTitleInItem = false;
|
|
||||||
export let selectionFeedback = 'top-after-reopen';
|
|
||||||
export let light = false;
|
export let light = false;
|
||||||
|
export let locale = 'en';
|
||||||
|
export let open = false;
|
||||||
|
export let placeholder = '';
|
||||||
|
export let selectedIds = [];
|
||||||
|
export let selectionFeedback = 'top-after-reopen';
|
||||||
|
export let size = undefined;
|
||||||
|
export let sortItem = (a, b) => a.text.localeCompare(b.text, locale, { numeric: true });
|
||||||
export let style = undefined;
|
export let style = undefined;
|
||||||
|
export let titleText = '';
|
||||||
|
export let translateWithId = undefined;
|
||||||
|
export let type = 'default';
|
||||||
|
export let useTitleInItem = false;
|
||||||
|
export let value = '';
|
||||||
|
|
||||||
import { afterUpdate, setContext } from 'svelte';
|
import { afterUpdate, setContext } from 'svelte';
|
||||||
import WarningFilled16 from 'carbon-icons-svelte/lib/WarningFilled16';
|
import WarningFilled16 from 'carbon-icons-svelte/lib/WarningFilled16';
|
||||||
|
|
|
@ -1,15 +1,15 @@
|
||||||
<script>
|
<script>
|
||||||
let className = undefined;
|
let className = undefined;
|
||||||
export { className as class };
|
export { className as class };
|
||||||
export let kind = 'error';
|
|
||||||
export let title = 'provide a title';
|
|
||||||
export let subtitle = ''; // TODO: support subtitle slot?
|
|
||||||
export let role = 'alert';
|
|
||||||
export let notificationType = 'inline';
|
|
||||||
export let iconDescription = 'closes notification';
|
|
||||||
export let hideCloseButton = false;
|
export let hideCloseButton = false;
|
||||||
|
export let iconDescription = 'closes notification';
|
||||||
|
export let kind = 'error';
|
||||||
export let lowContrast = false;
|
export let lowContrast = false;
|
||||||
|
export let notificationType = 'inline';
|
||||||
|
export let role = 'alert';
|
||||||
export let style = undefined;
|
export let style = undefined;
|
||||||
|
export let subtitle = ''; // TODO: support subtitle slot?
|
||||||
|
export let title = 'provide a title';
|
||||||
|
|
||||||
import { createEventDispatcher } from 'svelte';
|
import { createEventDispatcher } from 'svelte';
|
||||||
import NotificationIcon from './NotificationIcon.svelte';
|
import NotificationIcon from './NotificationIcon.svelte';
|
||||||
|
|
|
@ -3,8 +3,8 @@
|
||||||
|
|
||||||
import Layout from '../../internal/ui/Layout.svelte';
|
import Layout from '../../internal/ui/Layout.svelte';
|
||||||
import InlineNotification from './InlineNotification.svelte';
|
import InlineNotification from './InlineNotification.svelte';
|
||||||
import ToastNotification from './ToastNotification.svelte';
|
|
||||||
import NotificationActionButton from './NotificationActionButton.svelte';
|
import NotificationActionButton from './NotificationActionButton.svelte';
|
||||||
|
import ToastNotification from './ToastNotification.svelte';
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<Layout>
|
<Layout>
|
||||||
|
|
|
@ -3,8 +3,8 @@
|
||||||
export { className as class };
|
export { className as class };
|
||||||
export let style = undefined;
|
export let style = undefined;
|
||||||
|
|
||||||
import Button from '../Button';
|
|
||||||
import { cx } from '../../lib';
|
import { cx } from '../../lib';
|
||||||
|
import Button from '../Button';
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<Button
|
<Button
|
||||||
|
|
|
@ -1,12 +1,12 @@
|
||||||
<script>
|
<script>
|
||||||
let className = undefined;
|
let className = undefined;
|
||||||
export { className as class };
|
export { className as class };
|
||||||
export let notificationType = 'toast';
|
|
||||||
export let type = 'button';
|
|
||||||
export let iconDescription = 'close icon';
|
export let iconDescription = 'close icon';
|
||||||
|
export let notificationType = 'toast';
|
||||||
export let renderIcon = Close20;
|
export let renderIcon = Close20;
|
||||||
export let title = undefined;
|
|
||||||
export let style = undefined;
|
export let style = undefined;
|
||||||
|
export let title = undefined;
|
||||||
|
export let type = 'button';
|
||||||
|
|
||||||
import Close20 from 'carbon-icons-svelte/lib/Close20';
|
import Close20 from 'carbon-icons-svelte/lib/Close20';
|
||||||
import { cx } from '../../lib';
|
import { cx } from '../../lib';
|
||||||
|
|
|
@ -3,8 +3,8 @@
|
||||||
export let notificationType = 'toast';
|
export let notificationType = 'toast';
|
||||||
export let iconDescription = 'closes notification';
|
export let iconDescription = 'closes notification';
|
||||||
|
|
||||||
import ErrorFilled20 from 'carbon-icons-svelte/lib/ErrorFilled20';
|
|
||||||
import CheckmarkFilled20 from 'carbon-icons-svelte/lib/CheckmarkFilled20';
|
import CheckmarkFilled20 from 'carbon-icons-svelte/lib/CheckmarkFilled20';
|
||||||
|
import ErrorFilled20 from 'carbon-icons-svelte/lib/ErrorFilled20';
|
||||||
import WarningFilled20 from 'carbon-icons-svelte/lib/WarningFilled20';
|
import WarningFilled20 from 'carbon-icons-svelte/lib/WarningFilled20';
|
||||||
import { cx } from '../../lib';
|
import { cx } from '../../lib';
|
||||||
|
|
||||||
|
|
|
@ -1,8 +1,8 @@
|
||||||
<script>
|
<script>
|
||||||
export let title = 'title';
|
|
||||||
export let subtitle = '';
|
|
||||||
export let caption = 'caption';
|
export let caption = 'caption';
|
||||||
export let notificationType = 'toast';
|
export let notificationType = 'toast';
|
||||||
|
export let subtitle = '';
|
||||||
|
export let title = 'title';
|
||||||
|
|
||||||
import { cx } from '../../lib';
|
import { cx } from '../../lib';
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -1,22 +1,22 @@
|
||||||
<script>
|
<script>
|
||||||
let className = undefined;
|
let className = undefined;
|
||||||
export { className as class };
|
export { className as class };
|
||||||
export let kind = 'error';
|
|
||||||
export let title = 'provide a title';
|
|
||||||
export let subtitle = ''; // TODO: support subtitle slot?
|
|
||||||
export let caption = 'provide a caption';
|
export let caption = 'provide a caption';
|
||||||
export let role = 'alert';
|
|
||||||
export let notificationType = 'toast';
|
|
||||||
export let iconDescription = 'closes notification';
|
|
||||||
export let hideCloseButton = false;
|
export let hideCloseButton = false;
|
||||||
|
export let iconDescription = 'closes notification';
|
||||||
|
export let kind = 'error';
|
||||||
export let lowContrast = false;
|
export let lowContrast = false;
|
||||||
export let timeout = 0;
|
export let notificationType = 'toast';
|
||||||
|
export let role = 'alert';
|
||||||
export let style = undefined;
|
export let style = undefined;
|
||||||
|
export let subtitle = ''; // TODO: support subtitle slot?
|
||||||
|
export let timeout = 0;
|
||||||
|
export let title = 'provide a title';
|
||||||
|
|
||||||
import { createEventDispatcher, onMount } from 'svelte';
|
import { createEventDispatcher, onMount } from 'svelte';
|
||||||
|
import NotificationButton from './NotificationButton.svelte';
|
||||||
import NotificationIcon from './NotificationIcon.svelte';
|
import NotificationIcon from './NotificationIcon.svelte';
|
||||||
import NotificationTextDetails from './NotificationTextDetails.svelte';
|
import NotificationTextDetails from './NotificationTextDetails.svelte';
|
||||||
import NotificationButton from './NotificationButton.svelte';
|
|
||||||
import { cx } from '../../lib';
|
import { cx } from '../../lib';
|
||||||
|
|
||||||
const dispatch = createEventDispatcher();
|
const dispatch = createEventDispatcher();
|
||||||
|
|
|
@ -16,7 +16,7 @@ export const Default = () => ({
|
||||||
disabled: boolean('Disabled (disabled)', false),
|
disabled: boolean('Disabled (disabled)', false),
|
||||||
readonly: boolean('Read only (readonly)', false),
|
readonly: boolean('Read only (readonly)', false),
|
||||||
invalid: boolean('Show form validation UI (invalid)', false),
|
invalid: boolean('Show form validation UI (invalid)', false),
|
||||||
isMobile: boolean('Mobile variant', false),
|
mobile: boolean('Mobile variant (mobile)', false),
|
||||||
invalidText: text('Form validation UI content (invalidText)', 'Number is not valid'),
|
invalidText: text('Form validation UI content (invalidText)', 'Number is not valid'),
|
||||||
helperText: text('Helper text (helperText)', 'Optional helper text.'),
|
helperText: text('Helper text (helperText)', 'Optional helper text.'),
|
||||||
light: boolean('Light variant (light)', false)
|
light: boolean('Light variant (light)', false)
|
||||||
|
|
|
@ -1,30 +1,30 @@
|
||||||
<script>
|
<script>
|
||||||
let className = undefined;
|
let className = undefined;
|
||||||
export { className as class };
|
export { className as class };
|
||||||
|
export const translationIds = { increment: 'increment', decrement: 'decrement' };
|
||||||
|
export let allowEmpty = false;
|
||||||
export let disabled = false;
|
export let disabled = false;
|
||||||
|
export let helperText = '';
|
||||||
export let hideLabel = false;
|
export let hideLabel = false;
|
||||||
export let iconDescription = '';
|
export let iconDescription = '';
|
||||||
export let id = Math.random();
|
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 invalid = false;
|
||||||
export let invalidText = 'Provide invalidText';
|
export let invalidText = 'Provide invalidText';
|
||||||
export let helperText = '';
|
export let mobile = false;
|
||||||
|
export let label = '';
|
||||||
export let light = false;
|
export let light = false;
|
||||||
export let allowEmpty = false;
|
export let max = undefined;
|
||||||
export let isMobile = false;
|
export let min = undefined;
|
||||||
export const translationIds = { increment: 'increment', decrement: 'decrement' };
|
export let readonly = false;
|
||||||
export let translateWithId = id => defaultTranslations[id];
|
export let step = 1;
|
||||||
export let style = undefined;
|
export let style = undefined;
|
||||||
|
export let translateWithId = id => defaultTranslations[id];
|
||||||
|
export let value = '';
|
||||||
|
|
||||||
import { createEventDispatcher, afterUpdate } from 'svelte';
|
import { createEventDispatcher, afterUpdate } from 'svelte';
|
||||||
import WarningFilled16 from 'carbon-icons-svelte/lib/WarningFilled16';
|
|
||||||
import CaretDownGlyph from 'carbon-icons-svelte/lib/CaretDownGlyph';
|
import CaretDownGlyph from 'carbon-icons-svelte/lib/CaretDownGlyph';
|
||||||
import CaretUpGlyph from 'carbon-icons-svelte/lib/CaretUpGlyph';
|
import CaretUpGlyph from 'carbon-icons-svelte/lib/CaretUpGlyph';
|
||||||
|
import WarningFilled16 from 'carbon-icons-svelte/lib/WarningFilled16';
|
||||||
import { cx } from '../../lib';
|
import { cx } from '../../lib';
|
||||||
|
|
||||||
const defaultTranslations = {
|
const defaultTranslations = {
|
||||||
|
@ -62,8 +62,8 @@
|
||||||
<div on:click on:mouseover on:mouseenter on:mouseleave class={cx('--form-item', className)} {style}>
|
<div on:click on:mouseover on:mouseenter on:mouseleave class={cx('--form-item', className)} {style}>
|
||||||
<div
|
<div
|
||||||
data-invalid={error || undefined}
|
data-invalid={error || undefined}
|
||||||
class={cx('--number', '--number--helpertext', readonly && '--number--readonly', light && '--number--light', hideLabel && '--number--nolabel', isMobile && '--number--mobile')}>
|
class={cx('--number', '--number--helpertext', readonly && '--number--readonly', light && '--number--light', hideLabel && '--number--nolabel', mobile && '--number--mobile')}>
|
||||||
{#if isMobile}
|
{#if mobile}
|
||||||
{#if label}
|
{#if label}
|
||||||
<label class={cx('--label', hideLabel && '--visually-hidden')} for={id}>
|
<label class={cx('--label', hideLabel && '--visually-hidden')} for={id}>
|
||||||
<slot name="label">{label}</slot>
|
<slot name="label">{label}</slot>
|
||||||
|
|
|
@ -1,17 +1,17 @@
|
||||||
<script>
|
<script>
|
||||||
let className = undefined;
|
let className = undefined;
|
||||||
export { className as class };
|
export { className as class };
|
||||||
export let open = false;
|
|
||||||
export let direction = 'bottom';
|
export let direction = 'bottom';
|
||||||
export let flipped = false;
|
export let flipped = false;
|
||||||
export let tabindex = '0';
|
|
||||||
export let id = Math.random();
|
|
||||||
export let iconDescription = 'Open and close list of options';
|
|
||||||
export let iconClass = undefined;
|
|
||||||
export let icon = OverflowMenuVertical16;
|
export let icon = OverflowMenuVertical16;
|
||||||
|
export let iconClass = undefined;
|
||||||
|
export let iconDescription = 'Open and close list of options';
|
||||||
|
export let id = Math.random();
|
||||||
export let light = false;
|
export let light = false;
|
||||||
export let menuOptionsClass = undefined;
|
export let menuOptionsClass = undefined;
|
||||||
|
export let open = false;
|
||||||
export let style = undefined;
|
export let style = undefined;
|
||||||
|
export let tabindex = '0';
|
||||||
|
|
||||||
import { createEventDispatcher, setContext, afterUpdate } from 'svelte';
|
import { createEventDispatcher, setContext, afterUpdate } from 'svelte';
|
||||||
import { writable } from 'svelte/store';
|
import { writable } from 'svelte/store';
|
||||||
|
|
|
@ -1,14 +1,14 @@
|
||||||
<script>
|
<script>
|
||||||
let className = undefined;
|
let className = undefined;
|
||||||
export { className as class };
|
export { className as class };
|
||||||
export let text = 'Provide text';
|
|
||||||
export let href = '';
|
|
||||||
export let hasDivider = false;
|
|
||||||
export let danger = false;
|
export let danger = false;
|
||||||
export let disabled = false;
|
export let disabled = false;
|
||||||
|
export let hasDivider = false;
|
||||||
|
export let href = '';
|
||||||
export let primaryFocus = false;
|
export let primaryFocus = false;
|
||||||
export let requireTitle = true;
|
export let requireTitle = true;
|
||||||
export let style = undefined;
|
export let style = undefined;
|
||||||
|
export let text = 'Provide text';
|
||||||
|
|
||||||
import { getContext, afterUpdate } from 'svelte';
|
import { getContext, afterUpdate } from 'svelte';
|
||||||
import { cx } from '../../lib';
|
import { cx } from '../../lib';
|
||||||
|
|
|
@ -3,8 +3,8 @@
|
||||||
export { className as class };
|
export { className as class };
|
||||||
export let style = undefined;
|
export let style = undefined;
|
||||||
|
|
||||||
import SkeletonText from '../SkeletonText';
|
|
||||||
import { cx } from '../../lib';
|
import { cx } from '../../lib';
|
||||||
|
import SkeletonText from '../SkeletonText';
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div
|
<div
|
||||||
|
|
|
@ -2,26 +2,26 @@
|
||||||
let className = undefined;
|
let className = undefined;
|
||||||
export { className as class };
|
export { className as class };
|
||||||
export let backwardText = 'Previous page';
|
export let backwardText = 'Previous page';
|
||||||
export let itemRangeText = (min, max, total) => `${min}–${max} of ${total} items`;
|
export let disabled = false;
|
||||||
export let forwardText = 'Next page';
|
export let forwardText = 'Next page';
|
||||||
export let id = Math.random();
|
export let id = Math.random();
|
||||||
|
export let itemRangeText = (min, max, total) => `${min}–${max} of ${total} items`;
|
||||||
export let itemsPerPageText = 'Items per page:';
|
export let itemsPerPageText = 'Items per page:';
|
||||||
export let itemText = (min, max) => `${min}–${max} items`;
|
export let itemText = (min, max) => `${min}–${max} items`;
|
||||||
export let pageRangeText = (current, total) => `of ${total} pages`;
|
|
||||||
export let pageText = page => `page ${page}`;
|
|
||||||
export let pageSizes = [10];
|
|
||||||
export let totalItems = 0;
|
|
||||||
export let disabled = false;
|
|
||||||
export let page = 1;
|
export let page = 1;
|
||||||
export let pageSize = 10;
|
|
||||||
export let pagesUnknown = false;
|
|
||||||
export let pageInputDisabled = false;
|
export let pageInputDisabled = false;
|
||||||
|
export let pageRangeText = (current, total) => `of ${total} pages`;
|
||||||
|
export let pageSize = 10;
|
||||||
|
export let pageSizes = [10];
|
||||||
|
export let pagesUnknown = false;
|
||||||
|
export let pageText = page => `page ${page}`;
|
||||||
export let style = undefined;
|
export let style = undefined;
|
||||||
|
export let totalItems = 0;
|
||||||
|
|
||||||
import CaretRight24 from 'carbon-icons-svelte/lib/CaretRight24';
|
|
||||||
import CaretLeft24 from 'carbon-icons-svelte/lib/CaretLeft24';
|
import CaretLeft24 from 'carbon-icons-svelte/lib/CaretLeft24';
|
||||||
import Select, { SelectItem } from '../Select';
|
import CaretRight24 from 'carbon-icons-svelte/lib/CaretRight24';
|
||||||
import { cx, fillArray } from '../../lib';
|
import { cx, fillArray } from '../../lib';
|
||||||
|
import Select, { SelectItem } from '../Select';
|
||||||
|
|
||||||
$: totalPages = Math.max(Math.ceil(totalItems / pageSize), 1);
|
$: totalPages = Math.max(Math.ceil(totalItems / pageSize), 1);
|
||||||
$: selectItems = fillArray(totalPages);
|
$: selectItems = fillArray(totalPages);
|
||||||
|
|
|
@ -1,8 +1,8 @@
|
||||||
<script>
|
<script>
|
||||||
let className = undefined;
|
let className = undefined;
|
||||||
export { className as class };
|
export { className as class };
|
||||||
export let vertical = false;
|
|
||||||
export let style = undefined;
|
export let style = undefined;
|
||||||
|
export let vertical = false;
|
||||||
|
|
||||||
import { cx } from '../../lib';
|
import { cx } from '../../lib';
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -3,8 +3,8 @@
|
||||||
|
|
||||||
import Layout from '../../internal/ui/Layout.svelte';
|
import Layout from '../../internal/ui/Layout.svelte';
|
||||||
import ProgressIndicator from './ProgressIndicator.svelte';
|
import ProgressIndicator from './ProgressIndicator.svelte';
|
||||||
import ProgressStep from './ProgressStep.svelte';
|
|
||||||
import ProgressIndicatorSkeleton from './ProgressIndicator.Skeleton.svelte';
|
import ProgressIndicatorSkeleton from './ProgressIndicator.Skeleton.svelte';
|
||||||
|
import ProgressStep from './ProgressStep.svelte';
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<Layout>
|
<Layout>
|
||||||
|
@ -39,8 +39,8 @@
|
||||||
<ProgressStep
|
<ProgressStep
|
||||||
label="Fourth step"
|
label="Fourth step"
|
||||||
description="Step 4: Getting started with Carbon Design System"
|
description="Step 4: Getting started with Carbon Design System"
|
||||||
invalid
|
secondaryLabel="Example invalid step"
|
||||||
secondaryLabel="Example invalid step" />
|
invalid />
|
||||||
<ProgressStep
|
<ProgressStep
|
||||||
label="Fifth step"
|
label="Fifth step"
|
||||||
description="Step 5: Getting started with Carbon Design System"
|
description="Step 5: Getting started with Carbon Design System"
|
||||||
|
|
|
@ -2,8 +2,8 @@
|
||||||
let className = undefined;
|
let className = undefined;
|
||||||
export { className as class };
|
export { className as class };
|
||||||
export let currentIndex = 0;
|
export let currentIndex = 0;
|
||||||
export let vertical = false;
|
|
||||||
export let style = undefined;
|
export let style = undefined;
|
||||||
|
export let vertical = false;
|
||||||
|
|
||||||
import { createEventDispatcher, setContext } from 'svelte';
|
import { createEventDispatcher, setContext } from 'svelte';
|
||||||
import { writable, derived } from 'svelte/store';
|
import { writable, derived } from 'svelte/store';
|
||||||
|
|
|
@ -1,18 +1,18 @@
|
||||||
<script>
|
<script>
|
||||||
let className = undefined;
|
let className = undefined;
|
||||||
export { className as class };
|
export { className as class };
|
||||||
export let label = '';
|
|
||||||
export let current = false;
|
|
||||||
export let complete = false;
|
export let complete = false;
|
||||||
|
export let current = false;
|
||||||
export let description = '';
|
export let description = '';
|
||||||
export let invalid = false;
|
|
||||||
export let secondaryLabel = '';
|
|
||||||
export let disabled = false;
|
export let disabled = false;
|
||||||
|
export let invalid = false;
|
||||||
|
export let label = '';
|
||||||
|
export let secondaryLabel = '';
|
||||||
export let style = undefined;
|
export let style = undefined;
|
||||||
|
|
||||||
import { getContext } from 'svelte';
|
import { getContext } from 'svelte';
|
||||||
import Warning16 from 'carbon-icons-svelte/lib/Warning16';
|
|
||||||
import CheckmarkOutline16 from 'carbon-icons-svelte/lib/CheckmarkOutline16';
|
import CheckmarkOutline16 from 'carbon-icons-svelte/lib/CheckmarkOutline16';
|
||||||
|
import Warning16 from 'carbon-icons-svelte/lib/Warning16';
|
||||||
import { cx } from '../../lib';
|
import { cx } from '../../lib';
|
||||||
|
|
||||||
const id = Math.random();
|
const id = Math.random();
|
||||||
|
|
|
@ -1,11 +1,11 @@
|
||||||
<script>
|
<script>
|
||||||
let className = undefined;
|
let className = undefined;
|
||||||
export { className as class };
|
export { className as class };
|
||||||
export let paragraph = false;
|
|
||||||
export let lines = 3;
|
|
||||||
export let width = '100%';
|
|
||||||
export let heading = false;
|
export let heading = false;
|
||||||
|
export let lines = 3;
|
||||||
|
export let paragraph = false;
|
||||||
export let style = undefined;
|
export let style = undefined;
|
||||||
|
export let width = '100%';
|
||||||
|
|
||||||
import { cx } from '../../lib';
|
import { cx } from '../../lib';
|
||||||
|
|
||||||
|
|
|
@ -1,12 +1,12 @@
|
||||||
<script>
|
<script>
|
||||||
let className = undefined;
|
let className = undefined;
|
||||||
export { className as class };
|
export { className as class };
|
||||||
export let role = 'presentation';
|
|
||||||
export let label = '';
|
|
||||||
export let tabindex = '0';
|
|
||||||
export let href = '#';
|
|
||||||
export let disabled = false;
|
export let disabled = false;
|
||||||
|
export let href = '#';
|
||||||
|
export let label = '';
|
||||||
|
export let role = 'presentation';
|
||||||
export let style = undefined;
|
export let style = undefined;
|
||||||
|
export let tabindex = '0';
|
||||||
|
|
||||||
import { getContext } from 'svelte';
|
import { getContext } from 'svelte';
|
||||||
import { cx } from '../../lib';
|
import { cx } from '../../lib';
|
||||||
|
|
|
@ -2,9 +2,9 @@
|
||||||
export let story = undefined;
|
export let story = undefined;
|
||||||
|
|
||||||
import Layout from '../../internal/ui/Layout.svelte';
|
import Layout from '../../internal/ui/Layout.svelte';
|
||||||
import Tabs from './Tabs.svelte';
|
|
||||||
import Tab from './Tab.svelte';
|
import Tab from './Tab.svelte';
|
||||||
import TabContent from './TabContent.svelte';
|
import TabContent from './TabContent.svelte';
|
||||||
|
import Tabs from './Tabs.svelte';
|
||||||
import TabsSkeleton from './TabsSkeleton.svelte';
|
import TabsSkeleton from './TabsSkeleton.svelte';
|
||||||
|
|
||||||
const { tabProps, ...tabsProps } = $$props;
|
const { tabProps, ...tabsProps } = $$props;
|
||||||
|
|
|
@ -1,12 +1,12 @@
|
||||||
<script>
|
<script>
|
||||||
let className = undefined;
|
let className = undefined;
|
||||||
export { className as class };
|
export { className as class };
|
||||||
export let selected = 0;
|
|
||||||
export let iconDescription = 'Show menu options';
|
export let iconDescription = 'Show menu options';
|
||||||
export let role = 'navigation';
|
export let role = 'navigation';
|
||||||
export let type = 'default';
|
export let selected = 0;
|
||||||
export let triggerHref = '#';
|
|
||||||
export let style = undefined;
|
export let style = undefined;
|
||||||
|
export let triggerHref = '#';
|
||||||
|
export let type = 'default';
|
||||||
|
|
||||||
import { createEventDispatcher, setContext } from 'svelte';
|
import { createEventDispatcher, setContext } from 'svelte';
|
||||||
import { writable, derived } from 'svelte/store';
|
import { writable, derived } from 'svelte/store';
|
||||||
|
|
|
@ -1,9 +1,9 @@
|
||||||
<script>
|
<script>
|
||||||
export let story = undefined;
|
|
||||||
export let type = undefined;
|
|
||||||
export let disabled = undefined;
|
export let disabled = undefined;
|
||||||
export let filter = undefined;
|
export let filter = undefined;
|
||||||
export let slot = undefined;
|
export let slot = undefined;
|
||||||
|
export let story = undefined;
|
||||||
|
export let type = undefined;
|
||||||
|
|
||||||
import Layout from '../../internal/ui/Layout.svelte';
|
import Layout from '../../internal/ui/Layout.svelte';
|
||||||
import Tag from './Tag.svelte';
|
import Tag from './Tag.svelte';
|
||||||
|
|
|
@ -1,11 +1,11 @@
|
||||||
<script>
|
<script>
|
||||||
let className = undefined;
|
let className = undefined;
|
||||||
export { className as class };
|
export { className as class };
|
||||||
export let type = undefined;
|
|
||||||
export let disabled = false;
|
export let disabled = false;
|
||||||
export let filter = false;
|
export let filter = false;
|
||||||
export let title = 'Clear filter';
|
|
||||||
export let style = undefined;
|
export let style = undefined;
|
||||||
|
export let title = 'Clear filter';
|
||||||
|
export let type = undefined;
|
||||||
|
|
||||||
import Close16 from 'carbon-icons-svelte/lib/Close16';
|
import Close16 from 'carbon-icons-svelte/lib/Close16';
|
||||||
import { cx } from '../../lib';
|
import { cx } from '../../lib';
|
||||||
|
|
|
@ -1,19 +1,19 @@
|
||||||
<script>
|
<script>
|
||||||
let className = undefined;
|
let className = undefined;
|
||||||
export { className as class };
|
export { className as class };
|
||||||
export let rows = 4;
|
|
||||||
export let cols = 50;
|
export let cols = 50;
|
||||||
export let disabled = false;
|
export let disabled = false;
|
||||||
export let id = Math.random();
|
|
||||||
export let labelText = '';
|
|
||||||
export let placeholder = '';
|
|
||||||
export let value = '';
|
|
||||||
export let invalid = false;
|
|
||||||
export let invalidText = '';
|
|
||||||
export let helperText = '';
|
export let helperText = '';
|
||||||
export let hideLabel = false;
|
export let hideLabel = false;
|
||||||
|
export let id = Math.random();
|
||||||
|
export let invalid = false;
|
||||||
|
export let invalidText = '';
|
||||||
|
export let labelText = '';
|
||||||
export let light = false;
|
export let light = false;
|
||||||
|
export let placeholder = '';
|
||||||
|
export let rows = 4;
|
||||||
export let style = undefined;
|
export let style = undefined;
|
||||||
|
export let value = '';
|
||||||
|
|
||||||
import WarningFilled16 from 'carbon-icons-svelte/lib/WarningFilled16';
|
import WarningFilled16 from 'carbon-icons-svelte/lib/WarningFilled16';
|
||||||
import { cx } from '../../lib';
|
import { cx } from '../../lib';
|
||||||
|
|
|
@ -2,21 +2,21 @@
|
||||||
let className = undefined;
|
let className = undefined;
|
||||||
export { className as class };
|
export { className as class };
|
||||||
export let disabled = false;
|
export let disabled = false;
|
||||||
export let id = Math.random();
|
|
||||||
export let labelText = '';
|
|
||||||
export let placeholder = '';
|
|
||||||
export let type = 'password';
|
|
||||||
export let value = '';
|
|
||||||
export let invalid = false;
|
|
||||||
export let invalidText = '';
|
|
||||||
export let helperText = '';
|
export let helperText = '';
|
||||||
export let hideLabel = false;
|
export let hideLabel = false;
|
||||||
export let light = false;
|
|
||||||
export let tooltipPosition = 'bottom';
|
|
||||||
export let tooltipAlignment = 'center';
|
|
||||||
export let hidePasswordLabel = 'Hide password';
|
export let hidePasswordLabel = 'Hide password';
|
||||||
|
export let id = Math.random();
|
||||||
|
export let invalid = false;
|
||||||
|
export let invalidText = '';
|
||||||
|
export let labelText = '';
|
||||||
|
export let light = false;
|
||||||
|
export let placeholder = '';
|
||||||
export let showPasswordLabel = 'Show password';
|
export let showPasswordLabel = 'Show password';
|
||||||
export let style = undefined;
|
export let style = undefined;
|
||||||
|
export let tooltipAlignment = 'center';
|
||||||
|
export let tooltipPosition = 'bottom';
|
||||||
|
export let type = 'password';
|
||||||
|
export let value = '';
|
||||||
|
|
||||||
import WarningFilled16 from 'carbon-icons-svelte/lib/WarningFilled16';
|
import WarningFilled16 from 'carbon-icons-svelte/lib/WarningFilled16';
|
||||||
import View16 from 'carbon-icons-svelte/lib/View16';
|
import View16 from 'carbon-icons-svelte/lib/View16';
|
||||||
|
|
|
@ -2,8 +2,8 @@
|
||||||
export let story = undefined;
|
export let story = undefined;
|
||||||
|
|
||||||
import Layout from '../../internal/ui/Layout.svelte';
|
import Layout from '../../internal/ui/Layout.svelte';
|
||||||
import TextInput from './TextInput.svelte';
|
|
||||||
import PasswordInput from './PasswordInput.svelte';
|
import PasswordInput from './PasswordInput.svelte';
|
||||||
|
import TextInput from './TextInput.svelte';
|
||||||
import TextInputSkeleton from './TextInput.Skeleton.svelte';
|
import TextInputSkeleton from './TextInput.Skeleton.svelte';
|
||||||
|
|
||||||
let value = '';
|
let value = '';
|
||||||
|
|
|
@ -2,17 +2,17 @@
|
||||||
let className = undefined;
|
let className = undefined;
|
||||||
export { className as class };
|
export { className as class };
|
||||||
export let disabled = false;
|
export let disabled = false;
|
||||||
export let id = Math.random();
|
|
||||||
export let labelText = '';
|
|
||||||
export let placeholder = '';
|
|
||||||
export let type = '';
|
|
||||||
export let value = '';
|
|
||||||
export let invalid = false;
|
|
||||||
export let invalidText = '';
|
|
||||||
export let helperText = '';
|
export let helperText = '';
|
||||||
export let hideLabel = false;
|
export let hideLabel = false;
|
||||||
|
export let id = Math.random();
|
||||||
|
export let invalid = false;
|
||||||
|
export let invalidText = '';
|
||||||
|
export let labelText = '';
|
||||||
export let light = false;
|
export let light = false;
|
||||||
|
export let placeholder = '';
|
||||||
export let style = undefined;
|
export let style = undefined;
|
||||||
|
export let type = '';
|
||||||
|
export let value = '';
|
||||||
|
|
||||||
import WarningFilled16 from 'carbon-icons-svelte/lib/WarningFilled16';
|
import WarningFilled16 from 'carbon-icons-svelte/lib/WarningFilled16';
|
||||||
import { cx } from '../../lib';
|
import { cx } from '../../lib';
|
||||||
|
|
|
@ -1,10 +1,10 @@
|
||||||
<script>
|
<script>
|
||||||
let className = undefined;
|
let className = undefined;
|
||||||
export { className as class };
|
export { className as class };
|
||||||
export let href = undefined;
|
|
||||||
export let rel = undefined;
|
|
||||||
export let light = false;
|
|
||||||
export let clicked = false;
|
export let clicked = false;
|
||||||
|
export let href = undefined;
|
||||||
|
export let light = false;
|
||||||
|
export let rel = undefined;
|
||||||
export let style = undefined;
|
export let style = undefined;
|
||||||
|
|
||||||
import { cx } from '../../lib';
|
import { cx } from '../../lib';
|
||||||
|
|
|
@ -26,6 +26,8 @@ export const MultiSelect = () => ({
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
MultiSelect.story = { name: 'Multi-select' };
|
||||||
|
|
||||||
export const Selectable = () => ({
|
export const Selectable = () => ({
|
||||||
Component,
|
Component,
|
||||||
props: {
|
props: {
|
||||||
|
|
|
@ -1,13 +1,13 @@
|
||||||
<script>
|
<script>
|
||||||
let className = undefined;
|
let className = undefined;
|
||||||
export { className as class };
|
export { className as class };
|
||||||
export let id = Math.random();
|
|
||||||
export let toggled = false;
|
|
||||||
export let disabled = false;
|
export let disabled = false;
|
||||||
export let labelText = '';
|
export let id = Math.random();
|
||||||
export let labelA = 'Off';
|
export let labelA = 'Off';
|
||||||
export let labelB = 'On';
|
export let labelB = 'On';
|
||||||
|
export let labelText = '';
|
||||||
export let style = undefined;
|
export let style = undefined;
|
||||||
|
export let toggled = false;
|
||||||
|
|
||||||
import { cx } from '../../lib';
|
import { cx } from '../../lib';
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -1,13 +1,13 @@
|
||||||
<script>
|
<script>
|
||||||
let className = undefined;
|
let className = undefined;
|
||||||
export { className as class };
|
export { className as class };
|
||||||
export let id = Math.random();
|
|
||||||
export let toggled = false;
|
|
||||||
export let disabled = false;
|
export let disabled = false;
|
||||||
export let labelText = '';
|
export let id = Math.random();
|
||||||
export let labelA = 'Off';
|
export let labelA = 'Off';
|
||||||
export let labelB = 'On';
|
export let labelB = 'On';
|
||||||
|
export let labelText = '';
|
||||||
export let style = undefined;
|
export let style = undefined;
|
||||||
|
export let toggled = false;
|
||||||
|
|
||||||
import { cx } from '../../lib';
|
import { cx } from '../../lib';
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -19,7 +19,6 @@ const alignments = {
|
||||||
export const Default = () => ({
|
export const Default = () => ({
|
||||||
Component,
|
Component,
|
||||||
props: {
|
props: {
|
||||||
triggerClass: text('Trigger element CSS class name (triggerClassName)', ''),
|
|
||||||
direction: select('Tooltip direction (direction)', directions, 'bottom'),
|
direction: select('Tooltip direction (direction)', directions, 'bottom'),
|
||||||
align: select('Tooltip alignment to trigger button (align)', alignments, 'start'),
|
align: select('Tooltip alignment to trigger button (align)', alignments, 'start'),
|
||||||
tooltipText: text(
|
tooltipText: text(
|
||||||
|
|
|
@ -1,12 +1,11 @@
|
||||||
<script>
|
<script>
|
||||||
let className = undefined;
|
let className = undefined;
|
||||||
export { className as class };
|
export { className as class };
|
||||||
export let direction = 'bottom';
|
|
||||||
export let align = 'center';
|
export let align = 'center';
|
||||||
|
export let direction = 'bottom';
|
||||||
export let id = Math.random();
|
export let id = Math.random();
|
||||||
export let triggerClass = undefined;
|
|
||||||
export let tooltipText = '';
|
|
||||||
export let style = undefined;
|
export let style = undefined;
|
||||||
|
export let tooltipText = '';
|
||||||
|
|
||||||
import { cx } from '../../lib';
|
import { cx } from '../../lib';
|
||||||
</script>
|
</script>
|
||||||
|
@ -17,7 +16,7 @@
|
||||||
on:mouseover
|
on:mouseover
|
||||||
on:mouseenter
|
on:mouseenter
|
||||||
on:mouseleave
|
on:mouseleave
|
||||||
class={cx('--tooltip__trigger', '--tooltip--a11y', '--tooltip__trigger--definition', `--tooltip--${direction}`, `--tooltip--align-${align}`, triggerClass)}
|
class={cx('--tooltip__trigger', '--tooltip--a11y', '--tooltip__trigger--definition', `--tooltip--${direction}`, `--tooltip--align-${align}`)}
|
||||||
aria-describedby={id}>
|
aria-describedby={id}>
|
||||||
<slot />
|
<slot />
|
||||||
</button>
|
</button>
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue