mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-15 10:21:05 +00:00
commit
07d97da8a7
5 changed files with 55 additions and 127 deletions
1
.prettierignore
Normal file
1
.prettierignore
Normal file
|
@ -0,0 +1 @@
|
||||||
|
README.md
|
11
CHANGELOG.md
11
CHANGELOG.md
|
@ -5,6 +5,17 @@ All notable changes to this project will be documented in this file.
|
||||||
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
|
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
|
||||||
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
|
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
|
||||||
|
|
||||||
|
## [0.2.1](https://github.com/IBM/carbon-components-svelte/releases/tag/v0.2.1) - 2020-01-08
|
||||||
|
|
||||||
|
- Check if `l10n.en` is defined in `DatePicker` component to resolve Svelte REPL compilation
|
||||||
|
|
||||||
|
## [0.2.0](https://github.com/IBM/carbon-components-svelte/releases/tag/v0.2.0) - 2020-01-08
|
||||||
|
|
||||||
|
- Include `src` in files published to npm to resolve Svelte module entry
|
||||||
|
([#102](https://github.com/IBM/carbon-components-svelte/issues/102))
|
||||||
|
|
||||||
|
- Support most Carbon components (See the [GitHub project](https://github.com/IBM/carbon-components-svelte/projects/1))
|
||||||
|
|
||||||
## [0.1.0](https://github.com/IBM/carbon-components-svelte/releases/tag/v0.1.0) - 2019-12-15
|
## [0.1.0](https://github.com/IBM/carbon-components-svelte/releases/tag/v0.1.0) - 2019-12-15
|
||||||
|
|
||||||
- Initial release
|
- Initial release
|
||||||
|
|
153
README.md
153
README.md
|
@ -1,131 +1,39 @@
|
||||||
# carbon-components-svelte
|
# carbon-components-svelte
|
||||||
|
|
||||||
> 🚧 UNDER CONSTRUCTION
|
[![NPM][npm]][npm-url]
|
||||||
|
[![Build][build]][build-badge]
|
||||||
|
|
||||||
> Svelte implementation of the Carbon Design System
|
> Svelte implementation of the [Carbon Design System](https://github.com/carbon-design-system)
|
||||||
|
|
||||||
Currently, this project is under active development. See the [ongoing project](https://github.com/IBM/carbon-components-svelte/projects/1) for the anticipated v1.0.0 release.
|
**NOTE**: Currently, this project is under active development. See the [issue tracker](https://github.com/IBM/carbon-components-svelte/projects/1) for the anticipated v1.0.0 release.
|
||||||
|
|
||||||
## [Storybook](https://ibm.github.io/carbon-components-svelte)
|
## [Storybook](https://ibm.github.io/carbon-components-svelte) · [CodeSandbox](https://codesandbox.io/s/carbon-components-svelte021-lhvc4)
|
||||||
|
|
||||||
## Supported Components
|
## Getting Started
|
||||||
|
|
||||||
Currently, the following components are supported:
|
`carbon-components-svelte` can be installed as a development dependency.
|
||||||
|
|
||||||
- Accordion
|
```bash
|
||||||
- AccordionItem
|
yarn add -D carbon-components-svelte
|
||||||
- AccordionSkeleton
|
```
|
||||||
- Breadcrumb
|
|
||||||
- BreadcrumbItem
|
## Usage
|
||||||
- BreadcrumbSkeleton
|
|
||||||
- Button
|
```html
|
||||||
- ButtonSkeleton
|
<script>
|
||||||
- Checkbox
|
import { Button } from 'carbon-components-svelte';
|
||||||
- CheckboxSkeleton
|
</script>
|
||||||
- CodeSnippet
|
|
||||||
- CodeSnippetSkeleton
|
<svelte:head>
|
||||||
- ComboBox
|
<link
|
||||||
- ComposedModal
|
rel="stylesheet"
|
||||||
- ModalHeader
|
href="https://unpkg.com/carbon-components@10.9.0/css/carbon-components.min.css" />
|
||||||
- ModalBody
|
</svelte:head>
|
||||||
- ModalFooter
|
|
||||||
- ContentSwitcher
|
<Button>Primary</Button>
|
||||||
- Switch
|
```
|
||||||
- Copy
|
|
||||||
- CopyButton
|
Try it in the [CodeSandbox](https://codesandbox.io/s/carbon-components-svelte021-lhvc4).
|
||||||
- DataTable
|
|
||||||
- DataTableSkeleton
|
|
||||||
- DatePicker
|
|
||||||
- DatePickerInput
|
|
||||||
- FileUploader
|
|
||||||
- FileUploaderButton
|
|
||||||
- FileUploaderItem
|
|
||||||
- FileUploaderDropContainer
|
|
||||||
- Filename
|
|
||||||
- Form
|
|
||||||
- FormGroup
|
|
||||||
- FormItem
|
|
||||||
- FormLabel
|
|
||||||
- Icon
|
|
||||||
- IconSkeleton
|
|
||||||
- InlineLoading
|
|
||||||
- Link
|
|
||||||
- ListBox
|
|
||||||
- ListBoxField
|
|
||||||
- ListBoxMenu
|
|
||||||
- ListBoxMenuIcon
|
|
||||||
- ListBoxMenuItem
|
|
||||||
- ListBoxSelection
|
|
||||||
- ListItem
|
|
||||||
- Loading
|
|
||||||
- MultiSelect
|
|
||||||
- Modal
|
|
||||||
- Notification
|
|
||||||
- ToastNotification
|
|
||||||
- InlineNotification
|
|
||||||
- NotificationActionButton
|
|
||||||
- NotificationButton
|
|
||||||
- NotificationIcon
|
|
||||||
- NotificationTextDetails
|
|
||||||
- NumberInput
|
|
||||||
- NumberInputSkeleton
|
|
||||||
- OrderedList
|
|
||||||
- OverflowMenu
|
|
||||||
- OverflowMenuItem
|
|
||||||
- Pagination
|
|
||||||
- PaginationSkeleton
|
|
||||||
- ProgressIndicator
|
|
||||||
- ProgressIndicatorSkeleton
|
|
||||||
- ProgressStep
|
|
||||||
- RadioButton
|
|
||||||
- RadioButtonSkeleton
|
|
||||||
- RadioButtonGroup
|
|
||||||
- Search
|
|
||||||
- SearchSkeleton
|
|
||||||
- Select
|
|
||||||
- SelectSkeleton
|
|
||||||
- SelectItem
|
|
||||||
- SelectItemGroup
|
|
||||||
- SkeletonPlaceholder
|
|
||||||
- SkeletonText
|
|
||||||
- Slider
|
|
||||||
- SliderSkeleton
|
|
||||||
- StructuredList
|
|
||||||
- StructuredListSkeleton
|
|
||||||
- StructuredListBody
|
|
||||||
- StructuredListHead
|
|
||||||
- StructuredListCell
|
|
||||||
- StructuredListRow
|
|
||||||
- StructuredListInput
|
|
||||||
- Tabs
|
|
||||||
- Tab
|
|
||||||
- TabContent
|
|
||||||
- TabsSkeleton
|
|
||||||
- Tag
|
|
||||||
- TagSkeleton
|
|
||||||
- TextArea
|
|
||||||
- TextAreaSkeleton
|
|
||||||
- TextInput
|
|
||||||
- TextInputSkeleton
|
|
||||||
- PasswordInput
|
|
||||||
- Tile
|
|
||||||
- ClickableTile
|
|
||||||
- SelectableTile
|
|
||||||
- ExpandableTile
|
|
||||||
- RadioTile
|
|
||||||
- Tile
|
|
||||||
- TileGroup
|
|
||||||
- RadioTile
|
|
||||||
- TimePicker
|
|
||||||
- TimePickerSelect
|
|
||||||
- Toggle
|
|
||||||
- ToggleSkeleton
|
|
||||||
- ToggleSmall
|
|
||||||
- ToggleSmallSkeleton
|
|
||||||
- Tooltip
|
|
||||||
- TooltipDefinition
|
|
||||||
- TooltipIcon
|
|
||||||
- UnorderedList
|
|
||||||
|
|
||||||
## Contributing
|
## Contributing
|
||||||
|
|
||||||
|
@ -136,3 +44,8 @@ Refer to the [Contributing guidelines](CONTRIBUTING.md).
|
||||||
## License
|
## License
|
||||||
|
|
||||||
[Apache 2.0](LICENSE)
|
[Apache 2.0](LICENSE)
|
||||||
|
|
||||||
|
[npm]: https://img.shields.io/npm/v/carbon-components-svelte.svg?color=blue
|
||||||
|
[npm-url]: https://npmjs.com/package/carbon-components-svelte
|
||||||
|
[build]: https://travis-ci.com/ibm/carbon-components-svelte.svg?branch=master
|
||||||
|
[build-badge]: https://travis-ci.com/ibm/carbon-components-svelte
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "carbon-components-svelte",
|
"name": "carbon-components-svelte",
|
||||||
"version": "0.1.0",
|
"version": "0.2.1",
|
||||||
"license": "Apache-2.0",
|
"license": "Apache-2.0",
|
||||||
"description": "Svelte implementation of the Carbon Design System",
|
"description": "Svelte implementation of the Carbon Design System",
|
||||||
"svelte": "src/index.js",
|
"svelte": "src/index.js",
|
||||||
|
@ -124,7 +124,8 @@
|
||||||
"svelte"
|
"svelte"
|
||||||
],
|
],
|
||||||
"files": [
|
"files": [
|
||||||
"lib"
|
"lib",
|
||||||
|
"src"
|
||||||
],
|
],
|
||||||
"bugs": "https://github.com/ibm/carbon-components-svelte/issues"
|
"bugs": "https://github.com/ibm/carbon-components-svelte/issues"
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,12 +1,14 @@
|
||||||
import flatpickr from 'flatpickr';
|
import flatpickr from 'flatpickr';
|
||||||
import l10n from 'flatpickr/dist/l10n';
|
import l10n from 'flatpickr/dist/l10n/index.js';
|
||||||
import rangePlugin from 'flatpickr/dist/plugins/rangePlugin';
|
import rangePlugin from 'flatpickr/dist/plugins/rangePlugin';
|
||||||
import { cx } from '../../lib';
|
import { cx } from '../../lib';
|
||||||
|
|
||||||
l10n.en.weekdays.shorthand.forEach((_, index) => {
|
if (l10n.en) {
|
||||||
const shorthand = _.slice(0, 2);
|
l10n.en.weekdays.shorthand.forEach((_, index) => {
|
||||||
l10n.en.weekdays.shorthand[index] = shorthand === 'Th' ? 'Th' : shorthand.charAt(0);
|
const shorthand = _.slice(0, 2);
|
||||||
});
|
l10n.en.weekdays.shorthand[index] = shorthand === 'Th' ? 'Th' : shorthand.charAt(0);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
function updateClasses(instance) {
|
function updateClasses(instance) {
|
||||||
const { calendarContainer, days, daysContainer, weekdayContainer, selectedDates } = instance;
|
const { calendarContainer, days, daysContainer, weekdayContainer, selectedDates } = instance;
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue