mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-15 10:21:05 +00:00
Merge pull request #78 from IBM/develop
feat(component): add TimePicker
This commit is contained in:
Eric Liu
GitHub
commit
5ee379e79f
22 changed files with 213 additions and 30 deletions
|
|
@ -100,6 +100,8 @@ Currently, the following components are supported:
|
||||||
- Tile
|
- Tile
|
||||||
- TileGroup
|
- TileGroup
|
||||||
- RadioTile
|
- RadioTile
|
||||||
|
- TimePicker
|
||||||
|
- TimePickerSelect
|
||||||
- Toggle
|
- Toggle
|
||||||
- ToggleSkeleton
|
- ToggleSkeleton
|
||||||
- ToggleSmall
|
- ToggleSmall
|
||||||
|
|
|
||||||
|
|
@ -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.d4781677fb9dd4f4edea.bundle.js"></script><script src="vendors~main.d4781677fb9dd4f4edea.bundle.js"></script><script src="main.d4781677fb9dd4f4edea.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.3712b637752924c5c109.bundle.js"></script><script src="vendors~main.3712b637752924c5c109.bundle.js"></script><script src="main.3712b637752924c5c109.bundle.js"></script></body></html>
|
||||||
2
docs/main.3712b637752924c5c109.bundle.js
Normal file
2
docs/main.3712b637752924c5c109.bundle.js
Normal file
File diff suppressed because one or more lines are too long
1
docs/main.3712b637752924c5c109.bundle.js.map
Normal file
1
docs/main.3712b637752924c5c109.bundle.js.map
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
{"version":3,"file":"main.3712b637752924c5c109.bundle.js","sources":["webpack:///main.3712b637752924c5c109.bundle.js"],"mappings":"AAAA","sourceRoot":""}
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -1 +0,0 @@
|
||||||
{"version":3,"file":"main.d4781677fb9dd4f4edea.bundle.js","sources":["webpack:///main.d4781677fb9dd4f4edea.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.d4781677fb9dd4f4edea.bundle.js.map
|
//# sourceMappingURL=runtime~main.3712b637752924c5c109.bundle.js.map
|
||||||
|
|
@ -1 +1 @@
|
||||||
{"version":3,"file":"runtime~main.d4781677fb9dd4f4edea.bundle.js","sources":["webpack:///runtime~main.ce61f8335d8fdea2cda4.bundle.js"],"mappings":"AAAA","sourceRoot":""}
|
{"version":3,"file":"runtime~main.3712b637752924c5c109.bundle.js","sources":["webpack:///runtime~main.ce61f8335d8fdea2cda4.bundle.js"],"mappings":"AAAA","sourceRoot":""}
|
||||||
File diff suppressed because one or more lines are too long
1
docs/vendors~main.3712b637752924c5c109.bundle.js.map
Normal file
1
docs/vendors~main.3712b637752924c5c109.bundle.js.map
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
{"version":3,"file":"vendors~main.3712b637752924c5c109.bundle.js","sources":["webpack:///vendors~main.3712b637752924c5c109.bundle.js"],"mappings":"AAAA;;;;;AA05eA;;;;;AAmuJA;;;;;AAkkEA;;;;;;;;;AAukBA;;;AA8odA;;;;;;;;AAg/BA;;;;;;;;AAqEA;;;;;;;;AAkTA;;;;;;;AAyrDA;;;;;;;AAy7CA;;;;;;;AA8fA;;;;;;;AAfA","sourceRoot":""}
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
{"version":3,"file":"vendors~main.d4781677fb9dd4f4edea.bundle.js","sources":["webpack:///vendors~main.d4781677fb9dd4f4edea.bundle.js"],"mappings":"AAAA;;;;;AA2qeA;;;;;AAi9JA;;;;;AAkkEA;;;;;;;;;AAukBA;;;AA8odA;;;;;;;;AAg/BA;;;;;;;;AAqEA;;;;;;;;AAkTA;;;;;;;AAyrDA;;;;;;;AAy7CA;;;;;;;AAsfA;;;;;;;AAfA","sourceRoot":""}
|
|
||||||
|
|
@ -4,8 +4,8 @@
|
||||||
export let passiveModal = false;
|
export let passiveModal = false;
|
||||||
export let hasForm = false;
|
export let hasForm = false;
|
||||||
export let id = Math.random();
|
export let id = Math.random();
|
||||||
export let modalHeading = undefined; // node
|
export let modalHeading = undefined;
|
||||||
export let modalLabel = undefined; // node
|
export let modalLabel = undefined;
|
||||||
export let open = false;
|
export let open = false;
|
||||||
export let iconDescription = 'Close the modal';
|
export let iconDescription = 'Close the modal';
|
||||||
export let primaryButtonDisabled = false;
|
export let primaryButtonDisabled = false;
|
||||||
|
|
|
||||||
|
|
@ -57,8 +57,8 @@
|
||||||
aria-describedby={invalid ? errorId : undefined}
|
aria-describedby={invalid ? errorId : undefined}
|
||||||
disabled={disabled || undefined}
|
disabled={disabled || undefined}
|
||||||
aria-invalid={invalid || undefined}
|
aria-invalid={invalid || undefined}
|
||||||
on:change={event => {
|
on:change={({ target }) => {
|
||||||
selected.set(event.target.value);
|
selected.set(target.value);
|
||||||
}}
|
}}
|
||||||
{id}>
|
{id}>
|
||||||
<slot />
|
<slot />
|
||||||
|
|
@ -86,8 +86,8 @@
|
||||||
disabled={disabled || undefined}
|
disabled={disabled || undefined}
|
||||||
aria-invalid={invalid || undefined}
|
aria-invalid={invalid || undefined}
|
||||||
on:change
|
on:change
|
||||||
on:change={event => {
|
on:change={({ target }) => {
|
||||||
selected.set(event.target.value);
|
selected.set(target.value);
|
||||||
}}
|
}}
|
||||||
{id}>
|
{id}>
|
||||||
<slot />
|
<slot />
|
||||||
|
|
|
||||||
|
|
@ -10,11 +10,11 @@
|
||||||
import { getContext } from 'svelte';
|
import { getContext } from 'svelte';
|
||||||
import { cx } from '../../lib';
|
import { cx } from '../../lib';
|
||||||
|
|
||||||
const { selected } = getContext('Select');
|
const ctx = getContext('Select') || getContext('TimePickerSelect');
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<option
|
<option
|
||||||
selected={$selected === value}
|
selected={ctx.$selected === value}
|
||||||
class={cx('--select-option', className)}
|
class={cx('--select-option', className)}
|
||||||
{value}
|
{value}
|
||||||
{disabled}
|
{disabled}
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,9 @@
|
||||||
<script>
|
<script>
|
||||||
import { cx } from '../../lib';
|
let className = undefined;
|
||||||
|
export { className as class };
|
||||||
export let style = undefined;
|
export let style = undefined;
|
||||||
|
|
||||||
|
import { cx } from '../../lib';
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<span
|
<span
|
||||||
|
|
@ -8,7 +11,7 @@
|
||||||
on:mouseover
|
on:mouseover
|
||||||
on:mouseenter
|
on:mouseenter
|
||||||
on:mouseleave
|
on:mouseleave
|
||||||
class={cx('--tile-content__above-the-fold')}
|
class={cx('--tile-content__above-the-fold', className)}
|
||||||
{style}>
|
{style}>
|
||||||
<slot />
|
<slot />
|
||||||
</span>
|
</span>
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,9 @@
|
||||||
<script>
|
<script>
|
||||||
import { cx } from '../../lib';
|
let className = undefined;
|
||||||
|
export { className as class };
|
||||||
export let style = undefined;
|
export let style = undefined;
|
||||||
|
|
||||||
|
import { cx } from '../../lib';
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<span
|
<span
|
||||||
|
|
@ -8,7 +11,7 @@
|
||||||
on:mouseover
|
on:mouseover
|
||||||
on:mouseenter
|
on:mouseenter
|
||||||
on:mouseleave
|
on:mouseleave
|
||||||
class={cx('--tile-content__below-the-fold')}
|
class={cx('--tile-content__below-the-fold', className)}
|
||||||
{style}>
|
{style}>
|
||||||
<slot />
|
<slot />
|
||||||
</span>
|
</span>
|
||||||
|
|
|
||||||
23
src/components/TimePicker/TimePicker.Story.svelte
Normal file
23
src/components/TimePicker/TimePicker.Story.svelte
Normal file
|
|
@ -0,0 +1,23 @@
|
||||||
|
<script>
|
||||||
|
import Layout from '../../internal/ui/Layout.svelte';
|
||||||
|
import TimePicker from './TimePicker.svelte';
|
||||||
|
import TimePickerSelect from './TimePickerSelect.svelte';
|
||||||
|
import { SelectItem } from '../Select';
|
||||||
|
|
||||||
|
let value = '';
|
||||||
|
let select1 = 'PM';
|
||||||
|
let select2 = 'Time zone 1';
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<Layout>
|
||||||
|
<TimePicker id="time-picker" {...$$props.timepicker} bind:value>
|
||||||
|
<TimePickerSelect {...$$props.select} id="time-picker-select-1" bind:value={select1}>
|
||||||
|
<SelectItem value="AM" text="AM" />
|
||||||
|
<SelectItem value="PM" text="PM" />
|
||||||
|
</TimePickerSelect>
|
||||||
|
<TimePickerSelect {...$$props.select} id="time-picker-select-2" bind:value={select2}>
|
||||||
|
<SelectItem value="Time zone 1" text="Time zone 1" />
|
||||||
|
<SelectItem value="Time zone 2" text="Time zone 2" />
|
||||||
|
</TimePickerSelect>
|
||||||
|
</TimePicker>
|
||||||
|
</Layout>
|
||||||
36
src/components/TimePicker/TimePicker.stories.js
Normal file
36
src/components/TimePicker/TimePicker.stories.js
Normal file
|
|
@ -0,0 +1,36 @@
|
||||||
|
import { withKnobs, number, boolean, text } from '@storybook/addon-knobs';
|
||||||
|
import Component from './TimePicker.Story.svelte';
|
||||||
|
|
||||||
|
export default { title: 'TimePicker', decorators: [withKnobs] };
|
||||||
|
|
||||||
|
export const Default = () => ({
|
||||||
|
Component,
|
||||||
|
props: {
|
||||||
|
timepicker: {
|
||||||
|
pattern: text(
|
||||||
|
'Regular expression for the value (pattern in <TimePicker>)',
|
||||||
|
'(1[012]|[1-9]):[0-5][0-9](\\s)?'
|
||||||
|
),
|
||||||
|
placeholder: text('Placeholder text (placeholder in <TimePicker>)', 'hh:mm'),
|
||||||
|
disabled: boolean('Disabled (disabled in <TimePicker>)', false),
|
||||||
|
light: boolean('Light variant (light in <TimePicker>)', false),
|
||||||
|
hideLabel: boolean('No label (hideLabel in <TimePicker>)', false),
|
||||||
|
labelText: text('Label text (labelText in <TimePicker>)', 'Select a time'),
|
||||||
|
invalid: boolean('Show form validation UI (invalid in <TimePicker>)', false),
|
||||||
|
invalidText: text(
|
||||||
|
'Form validation UI content (invalidText in <TimePicker>)',
|
||||||
|
'A valid value is required'
|
||||||
|
),
|
||||||
|
maxlength: number('Maximum length (maxlength in <TimePicker>)', 5)
|
||||||
|
},
|
||||||
|
select: {
|
||||||
|
disabled: boolean('Disabled (disabled in <TimePickerSelect>)', false),
|
||||||
|
hideLabel: boolean('No label (hideLabel in <TimePickerSelect>)', true),
|
||||||
|
labelText: text('Label text (labelText in <TimePickerSelect>)', 'Please select'),
|
||||||
|
iconDescription: text(
|
||||||
|
'Trigger icon description (iconDescription in <TimePickerSelect>)',
|
||||||
|
'open list of options'
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
55
src/components/TimePicker/TimePicker.svelte
Normal file
55
src/components/TimePicker/TimePicker.svelte
Normal file
|
|
@ -0,0 +1,55 @@
|
||||||
|
<script>
|
||||||
|
let className = undefined;
|
||||||
|
export { className as class };
|
||||||
|
export let id = Math.random();
|
||||||
|
export let value = '';
|
||||||
|
export let labelText = '';
|
||||||
|
export let hideLabel = false;
|
||||||
|
export let type = 'text';
|
||||||
|
export let pattern = '(1[012]|[1-9]):[0-5][0-9](\\s)?';
|
||||||
|
export let placeholder = 'hh=mm';
|
||||||
|
export let maxlength = 5;
|
||||||
|
export let invalidText = 'Invalid time format.';
|
||||||
|
export let invalid = false;
|
||||||
|
export let disabled = false;
|
||||||
|
export let light = false;
|
||||||
|
export let style = undefined;
|
||||||
|
|
||||||
|
import { createEventDispatcher } from 'svelte';
|
||||||
|
import { cx } from '../../lib';
|
||||||
|
|
||||||
|
const dispatch = createEventDispatcher();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div on:click on:mouseover on:mouseenter on:mouseleave class={cx('--form-item', className)} {style}>
|
||||||
|
<div class={cx('--time-picker', light && '--time-picker--light', light && '--select--light')}>
|
||||||
|
<div class={cx('--time-picker__input')}>
|
||||||
|
{#if labelText}
|
||||||
|
<label
|
||||||
|
for={id}
|
||||||
|
class={cx('--label', hideLabel && '--visually-hidden', disabled && '--label--disabled')}>
|
||||||
|
{labelText}
|
||||||
|
</label>
|
||||||
|
{/if}
|
||||||
|
<input
|
||||||
|
data-invalid={invalid || undefined}
|
||||||
|
class={cx('--time-picker__input-field', '--text-input', light && '--text-input--light', invalid && '--text-input--invalid')}
|
||||||
|
on:input
|
||||||
|
on:input={({ target }) => {
|
||||||
|
value = target.value;
|
||||||
|
}}
|
||||||
|
{pattern}
|
||||||
|
{placeholder}
|
||||||
|
{maxlength}
|
||||||
|
{id}
|
||||||
|
{type}
|
||||||
|
{value}
|
||||||
|
{disabled} />
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<slot />
|
||||||
|
</div>
|
||||||
|
{#if invalid}
|
||||||
|
<div class={cx('--form-requirement')}>{invalidText}</div>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
54
src/components/TimePicker/TimePickerSelect.svelte
Normal file
54
src/components/TimePicker/TimePickerSelect.svelte
Normal file
|
|
@ -0,0 +1,54 @@
|
||||||
|
<script>
|
||||||
|
let className = undefined;
|
||||||
|
export { className as class };
|
||||||
|
export let id = Math.random();
|
||||||
|
export let value = '';
|
||||||
|
export let labelText = '';
|
||||||
|
export let hideLabel = true;
|
||||||
|
export let iconDescription = 'Open list of options';
|
||||||
|
export let disabled = false;
|
||||||
|
export let style = undefined;
|
||||||
|
|
||||||
|
import { createEventDispatcher, setContext } from 'svelte';
|
||||||
|
import { writable } from 'svelte/store';
|
||||||
|
import ChevronDownGlyph from 'carbon-icons-svelte/lib/ChevronDownGlyph';
|
||||||
|
import { cx } from '../../lib';
|
||||||
|
|
||||||
|
const dispatch = createEventDispatcher();
|
||||||
|
|
||||||
|
let selected = writable(value);
|
||||||
|
|
||||||
|
setContext('TimePickerSelect', { selected });
|
||||||
|
|
||||||
|
$: {
|
||||||
|
selected.set(value);
|
||||||
|
dispatch('change', $selected);
|
||||||
|
}
|
||||||
|
$: value = $selected;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div
|
||||||
|
on:click
|
||||||
|
on:mouseover
|
||||||
|
on:mouseenter
|
||||||
|
on:mouseleave
|
||||||
|
class={cx('--select', '--time-picker__select', className)}
|
||||||
|
{style}>
|
||||||
|
{#if labelText}
|
||||||
|
<label class={cx('--label', hideLabel && '--visually-hidden')} for={id}>{labelText}</label>
|
||||||
|
{/if}
|
||||||
|
<select
|
||||||
|
class={cx('--select-input')}
|
||||||
|
{id}
|
||||||
|
{disabled}
|
||||||
|
{value}
|
||||||
|
on:change={({ target }) => {
|
||||||
|
selected.set(target.value);
|
||||||
|
}}>
|
||||||
|
<slot />
|
||||||
|
</select>
|
||||||
|
<ChevronDownGlyph
|
||||||
|
aria-label={iconDescription}
|
||||||
|
title={iconDescription}
|
||||||
|
class={cx('--select__arrow')} />
|
||||||
|
</div>
|
||||||
4
src/components/TimePicker/index.js
Normal file
4
src/components/TimePicker/index.js
Normal file
|
|
@ -0,0 +1,4 @@
|
||||||
|
import TimePicker from './TimePicker.svelte';
|
||||||
|
|
||||||
|
export default TimePicker;
|
||||||
|
export { default as TimePickerSelect } from './TimePickerSelect.svelte';
|
||||||
|
|
@ -65,6 +65,7 @@ import Tile, {
|
||||||
TileAboveTheFoldContent,
|
TileAboveTheFoldContent,
|
||||||
TileBelowTheFoldContent
|
TileBelowTheFoldContent
|
||||||
} from './components/Tile';
|
} from './components/Tile';
|
||||||
|
import TimePicker, { TimePickerSelect } from './components/TimePicker';
|
||||||
import Toggle, { ToggleSkeleton } from './components/Toggle';
|
import Toggle, { ToggleSkeleton } from './components/Toggle';
|
||||||
import ToggleSmall, { ToggleSmallSkeleton } from './components/ToggleSmall';
|
import ToggleSmall, { ToggleSmallSkeleton } from './components/ToggleSmall';
|
||||||
import TooltipDefinition from './components/TooltipDefinition';
|
import TooltipDefinition from './components/TooltipDefinition';
|
||||||
|
|
@ -157,6 +158,8 @@ export {
|
||||||
TileBelowTheFoldContent,
|
TileBelowTheFoldContent,
|
||||||
TileGroup,
|
TileGroup,
|
||||||
ToastNotification,
|
ToastNotification,
|
||||||
|
TimePicker,
|
||||||
|
TimePickerSelect,
|
||||||
Toggle,
|
Toggle,
|
||||||
ToggleSkeleton,
|
ToggleSkeleton,
|
||||||
ToggleSmall,
|
ToggleSmall,
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue