├── .gitignore ├── LICENSE.md ├── README.md ├── babel.config.js ├── cli.js ├── jest.config.js ├── main.js ├── package.json ├── rollup.config.js ├── src ├── base │ └── Toolkit │ │ ├── Toolkit.scss │ │ └── Toolkit.svelte ├── charts │ ├── BarChart │ │ ├── BarChart.scss │ │ ├── BarChart.svelte │ │ └── _notes.txt │ ├── ChartGridLines │ │ ├── ChartGridLines.scss │ │ └── ChartGridLines.svelte │ ├── LineChart │ │ ├── LineChart.scss │ │ ├── LineChart.svelte │ │ └── _notes.txt │ ├── PieChart │ │ ├── PieChart.scss │ │ ├── PieChart.svelte │ │ └── _notes.txt │ ├── ScatterChart │ │ ├── ScatterChart.scss │ │ └── ScatterChart.svelte │ ├── Sparkline │ │ ├── Sparkline.scss │ │ └── Sparkline.svelte │ ├── XAxis │ │ ├── XAxis.scss │ │ └── XAxis.svelte │ └── YAxis │ │ ├── YAxis.scss │ │ └── YAxis.svelte ├── components │ ├── Accordion │ │ ├── Accordion.scss │ │ ├── Accordion.svelte │ │ ├── AccordionItem.scss │ │ ├── AccordionItem.svelte │ │ └── _notes.txt │ ├── Alert │ │ ├── Alert.scss │ │ ├── Alert.svelte │ │ ├── _notes.txt │ │ └── show-alert.js │ ├── AutoComplete │ │ ├── AutoComplete.scss │ │ ├── AutoComplete.svelte │ │ ├── AutoCompleteItem.scss │ │ ├── AutoCompleteItem.svelte │ │ └── _notes.txt │ ├── Badge │ │ ├── Badge.scss │ │ └── Badge.svelte │ ├── Breadcrumb │ │ ├── Breadcrumb.scss │ │ ├── Breadcrumb.svelte │ │ ├── BreadcrumbItem.scss │ │ ├── BreadcrumbItem.svelte │ │ └── _notes.txt │ ├── Button │ │ ├── Button.scss │ │ ├── Button.svelte │ │ └── _notes.txt │ ├── Calendar │ │ ├── Calendar.scss │ │ ├── Calendar.svelte │ │ ├── CalendarDay.scss │ │ └── CalendarDay.svelte │ ├── Card │ │ ├── Card.scss │ │ └── Card.svelte │ ├── ColorPicker │ │ ├── ColorPicker.scss │ │ ├── ColorPicker.svelte │ │ └── _notes.txt │ ├── CoverImage │ │ ├── CoverImage.scss │ │ └── CoverImage.svelte │ ├── DataTable │ │ ├── DataTable.svelte │ │ ├── DataTableColumn.svelte │ │ └── DataTableHeader.svelte │ ├── DatePicker │ │ ├── DatePicker.scss │ │ ├── DatePicker.svelte │ │ └── _notes.txt │ ├── DropDown │ │ ├── DropDown.scss │ │ └── DropDown.svelte │ ├── DropDownButton │ │ ├── DropDownButton.scss │ │ └── DropDownButton.svelte │ ├── DropDownLink │ │ ├── DropDownLink.scss │ │ └── DropDownLink.svelte │ ├── DropDownMenu │ │ ├── DropDownMenu.scss │ │ ├── DropDownMenu.svelte │ │ ├── DropDownMenuDivider.scss │ │ ├── DropDownMenuDivider.svelte │ │ ├── DropDownMenuItem.scss │ │ └── DropDownMenuItem.svelte │ ├── FocusGroup │ │ ├── FocusGroup.scss │ │ ├── FocusGroup.svelte │ │ ├── FocusGroupItem.scss │ │ └── FocusGroupItem.svelte │ ├── ImageButton │ │ ├── ImageButton.scss │ │ ├── ImageButton.svelte │ │ └── _notes.txt │ ├── Notification │ │ ├── Notification.scss │ │ ├── Notification.svelte │ │ └── _notes.txt │ ├── OffScreen │ │ ├── OffScreen.scss │ │ ├── OffScreen.svelte │ │ └── _notes.txt │ ├── Palette │ │ ├── Palette.scss │ │ ├── Palette.svelte │ │ └── _notes.txt │ ├── Progress │ │ ├── Progress.scss │ │ └── Progress.svelte │ ├── Slider │ │ ├── Slider.scss │ │ └── Slider.svelte │ ├── TabGroup │ │ ├── TabGroup.scss │ │ ├── TabGroup.svelte │ │ ├── TabHeader.scss │ │ ├── TabHeader.svelte │ │ ├── TabItem.scss │ │ ├── TabItem.svelte │ │ └── _notes.txt │ ├── Tag │ │ ├── Tag.scss │ │ └── Tag.svelte │ ├── TagInput │ │ ├── TagInput.scss │ │ ├── TagInput.svelte │ │ ├── TagInputItem.scss │ │ ├── TagInputItem.svelte │ │ ├── TagInputValue.scss │ │ ├── TagInputValue.svelte │ │ └── _notes.txt │ └── TimePicker │ │ ├── TimePicker.scss │ │ ├── TimePicker.svelte │ │ └── _notes.txt ├── dialogs │ ├── Confirm │ │ ├── Confirm.scss │ │ ├── Confirm.svelte │ │ ├── _notes.txt │ │ └── show-confirm.js │ ├── DialogButton │ │ ├── DialogButton.scss │ │ └── DialogButton.svelte │ ├── Info │ │ ├── Info.scss │ │ ├── Info.svelte │ │ ├── _notes.txt │ │ └── show-info.js │ ├── Modal │ │ ├── Modal.scss │ │ ├── Modal.svelte │ │ └── _notes.txt │ ├── Prompt │ │ ├── Prompt.scss │ │ ├── Prompt.svelte │ │ ├── _notes.txt │ │ └── show-prompt.js │ └── dialogs.scss ├── forms │ ├── CheckBox │ │ ├── CheckBox.scss │ │ └── CheckBox.svelte │ ├── Currency │ │ ├── Currency.scss │ │ └── Currency.svelte │ ├── Field │ │ ├── Field.scss │ │ ├── Field.svelte │ │ ├── FieldMessage.scss │ │ └── FieldMessage.svelte │ ├── File │ │ ├── File.scss │ │ └── File.svelte │ ├── Number │ │ ├── Number.scss │ │ └── Number.svelte │ ├── Radio │ │ ├── Radio.scss │ │ └── Radio.svelte │ ├── Select │ │ └── Select.svelte │ ├── TextArea │ │ └── TextArea.svelte │ ├── TextBox │ │ └── TextBox.svelte │ ├── ValidationSummary │ │ ├── ValidationSummary.scss │ │ └── ValidationSummary.svelte │ └── Validator.js ├── icons │ ├── ArrowDown │ │ ├── ArrowDown.scss │ │ └── ArrowDown.svelte │ ├── ArrowLeft │ │ ├── ArrowLeft.scss │ │ └── ArrowLeft.svelte │ ├── ArrowRight │ │ ├── ArrowRight.scss │ │ └── ArrowRight.svelte │ ├── ArrowUp │ │ ├── ArrowUp.scss │ │ └── ArrowUp.svelte │ ├── Bars │ │ ├── Bars.scss │ │ └── Bars.svelte │ ├── Check │ │ ├── Check.scss │ │ └── Check.svelte │ ├── ChevronDown │ │ ├── ChevronDown.scss │ │ └── ChevronDown.svelte │ ├── ChevronLeft │ │ ├── ChevronLeft.scss │ │ └── ChevronLeft.svelte │ ├── ChevronRight │ │ ├── ChevronRight.scss │ │ └── ChevronRight.svelte │ ├── ChevronUp │ │ ├── ChevronUp.scss │ │ └── ChevronUp.svelte │ ├── Cross │ │ ├── Cross.scss │ │ └── Cross.svelte │ ├── Loading │ │ ├── Loading.scss │ │ └── Loading.svelte │ ├── Minus │ │ ├── Minus.scss │ │ └── Minus.svelte │ ├── Plus │ │ ├── Plus.scss │ │ └── Plus.svelte │ └── icons.scss ├── layout │ ├── Container │ │ ├── Container.scss │ │ └── Container.svelte │ ├── Grid │ │ ├── Grid.scss │ │ ├── Grid.svelte │ │ ├── GridItem.scss │ │ └── GridItem.svelte │ ├── Level │ │ ├── Level.scss │ │ ├── Level.svelte │ │ ├── LevelItem.scss │ │ └── LevelItem.svelte │ ├── Page │ │ ├── Page.scss │ │ ├── Page.svelte │ │ ├── PageBody.scss │ │ ├── PageBody.svelte │ │ ├── PageFooter.scss │ │ ├── PageFooter.svelte │ │ ├── PageHeader.scss │ │ └── PageHeader.svelte │ ├── Panel │ │ ├── Panel.scss │ │ └── Panel.svelte │ ├── Stack │ │ ├── Stack.scss │ │ ├── Stack.svelte │ │ ├── StackItem.scss │ │ └── StackItem.svelte │ └── Table │ │ ├── Table.scss │ │ ├── Table.svelte │ │ ├── TableBody.svelte │ │ ├── TableCell.scss │ │ ├── TableCell.svelte │ │ ├── TableFooter.svelte │ │ ├── TableHeader.svelte │ │ ├── TableHeaderCell.scss │ │ ├── TableHeaderCell.svelte │ │ ├── TableRow.scss │ │ └── TableRow.svelte ├── navigation │ ├── DotNav │ │ ├── DotNav.scss │ │ └── DotNav.svelte │ ├── NavBar │ │ ├── NavBar.scss │ │ ├── NavBar.svelte │ │ ├── NavLogo.scss │ │ ├── NavLogo.svelte │ │ ├── NavMenu.scss │ │ ├── NavMenu.svelte │ │ ├── NavMenuDropDown.scss │ │ ├── NavMenuDropDown.svelte │ │ ├── NavMenuItem.scss │ │ ├── NavMenuItem.svelte │ │ └── _notes.txt │ ├── Pagination │ │ ├── Pagination.scss │ │ └── Pagination.svelte │ ├── StoryNav │ │ ├── StoryNav.scss │ │ └── StoryNav.svelte │ ├── SubNavMenu │ │ ├── SubNavMenu.scss │ │ ├── SubNavMenu.svelte │ │ ├── SubNavMenuHeader.scss │ │ ├── SubNavMenuHeader.svelte │ │ ├── SubNavMenuItem.scss │ │ ├── SubNavMenuItem.svelte │ │ └── _notes.txt │ ├── Switcher │ │ ├── Switcher.svelte │ │ ├── SwitcherItem.scss │ │ └── SwitcherItem.svelte │ └── WizardNav │ │ ├── WizardNav.scss │ │ └── WizardNav.svelte ├── styles │ ├── _theme.scss │ ├── _variables.scss │ ├── base │ │ ├── base.scss │ │ ├── form.scss │ │ └── layout.scss │ ├── get-theme.js │ ├── load-theme.js │ └── shared │ │ ├── animation.scss │ │ ├── button-base.scss │ │ ├── color-functions.scss │ │ ├── drop-down-item.scss │ │ ├── drop-down-list.scss │ │ ├── drop-down.scss │ │ └── input-button.scss └── utils │ ├── chart-colors.js │ ├── chart-utils.js │ ├── color-utils.js │ ├── date-utils.js │ ├── document-events.js │ └── key-codes.js ├── stk.config.json └── test ├── charts ├── BarChart.spec.js ├── LineChart.spec.js ├── PieChart.spec.js ├── ScatterChart.spec.js └── Sparkline.spec.js ├── components ├── Accordion │ ├── Accordion.spec.js │ └── AccordionSpec.svelte ├── Alert.spec.js ├── AutoComplete.spec.js ├── Badge.spec.js ├── Breadcrumb.spec.js ├── Button.spec.js ├── Calendar.spec.js ├── Card.spec.js ├── ColorPicker.spec.js ├── CoverImage.spec.js ├── DataTable.spec.js ├── DatePicker.spec.js ├── DropDown.spec.js ├── DropDownButton.spec.js ├── DropDownLink.spec.js ├── FocusGroup.spec.js ├── Icons.spec.js ├── ImageButton.spec.js ├── Notification.spec.js ├── OffScreen.spec.js ├── Palette.spec.js ├── Progress.spec.js ├── Slider.spec.js ├── TabGroup.spec.js ├── Tag.spec.js ├── TagInput.spec.js └── TimePicker.spec.js ├── dialogs ├── Confirm.spec.js ├── DialogButton.spec.js ├── Info.spec.js └── Prompt.spec.js ├── forms ├── CheckBox.spec.js ├── Currency.spec.js ├── Field.spec.js ├── File.spec.js ├── Number.spec.js ├── Radio.spec.js ├── Select.spec.js ├── TextArea.spec.js ├── TextBox.spec.js ├── ValidationSummary.spec.js └── Validator.spec.js ├── layout ├── Container.spec.js ├── Grid.spec.js ├── Level.spec.js ├── Page.spec.js ├── Panel.spec.js ├── Stack.spec.js └── Table.spec.js └── navigation ├── DotNav.spec.js ├── NavBar.spec.js ├── Pagination.spec.js ├── StoryNav.spec.js ├── SubNavMenu.spec.js ├── Switcher.spec.js └── WizardNav.spec.js /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | /build/ 3 | /node_modules/ 4 | package-lock.json 5 | yarn.lock 6 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright © 2019 Andrew K 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Svelte Toolkit 2 | 3 | A collection of UI components for [`Svelte`](https://svelte.dev/). 4 | 5 | [View the documentation.](https://andrewjk.github.io/svelte-toolkit-docs/) 6 | 7 | ## Getting Started 8 | 9 | The use of the [yarn](https://yarnpkg.com/) package manager is **strongly** recommended, as opposed to using `npm`. 10 | 11 | ```bash 12 | yarn add -D svelte-toolkit 13 | ``` 14 | 15 | ## Consuming from SvelteKit 16 | 17 | Import and add the Toolkit component in \_\_layout.svelte to provide shared styles: 18 | 19 | ```javascript 20 | import { Toolkit } from "svelte-toolkit"; 21 | ... 22 | 23 | ``` 24 | 25 | Import toolkit components in your svelte component: 26 | 27 | ```javascript 28 | import { Button } from "svelte-toolkit"; 29 | ``` 30 | 31 | ## Consuming from Sapper 32 | 33 | Import and add the Toolkit component in \_layout.svelte to provide shared styles: 34 | 35 | ```javascript 36 | import { Toolkit } from "svelte-toolkit"; 37 | ... 38 | 39 | ``` 40 | 41 | Import toolkit components in your svelte component: 42 | 43 | ```javascript 44 | import { Button } from "svelte-toolkit"; 45 | ``` 46 | 47 | If you receive a warning about SSR, change it to: 48 | 49 | ```javascript 50 | import { Button } from "svelte-toolkit/main.js"; 51 | ``` 52 | 53 | (I'm not 100% sure why this happens some times and not others) 54 | 55 | ## Consuming from Electron 56 | 57 | Import the SCSS styles in your renderer.js or renderer/index.js: 58 | 59 | ```javascript 60 | require("svelte-toolkit/main.scss"); 61 | ``` 62 | 63 | Import toolkit components in your svelte component: 64 | 65 | ```javascript 66 | import { Button } from "svelte-toolkit"; 67 | ``` 68 | 69 | ## Customising 70 | 71 | TODO: 72 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [["@babel/preset-env", { "targets": { "node": "current" } }]] 3 | } 4 | -------------------------------------------------------------------------------- /jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | testEnvironment: "jsdom", 3 | transform: { 4 | "^.+\\.js$": "babel-jest", 5 | "^.+\\.svelte$": [ 6 | "svelte-jester", 7 | { 8 | "preprocess": true 9 | } 10 | ] 11 | }, 12 | moduleFileExtensions: [ 13 | "js", 14 | "svelte" 15 | ], 16 | setupFiles: [ 17 | "jest-canvas-mock" 18 | ], 19 | setupFilesAfterEnv: [ 20 | "@testing-library/jest-dom/extend-expect" 21 | ] 22 | } 23 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "svelte-toolkit", 3 | "description": "A collection of UI components for Svelte", 4 | "version": "0.7.1", 5 | "license": "MIT", 6 | "svelte": "main.js", 7 | "module": "build/index.mjs", 8 | "main": "build/index.js", 9 | "scripts": { 10 | "prebuild": "node ./cli.js theme -f -s ./src", 11 | "build": "rollup -c", 12 | "test": "jest test", 13 | "test:watch": "npm run test -- --watch" 14 | }, 15 | "bin": { 16 | "stk": "./cli.js" 17 | }, 18 | "devDependencies": { 19 | "@babel/core": "^7.15.8", 20 | "@babel/preset-env": "^7.15.8", 21 | "@testing-library/jest-dom": "^5.14.1", 22 | "@testing-library/svelte": "^3.0.3", 23 | "babel-jest": "^27.2.4", 24 | "browser-env": "^3.3.0", 25 | "jest": "^27.2.4", 26 | "jest-canvas-mock": "^2.3.1", 27 | "node-sass": "^6.0.1", 28 | "raf": "^3.4.1", 29 | "rollup": "^2.58.0", 30 | "rollup-plugin-node-resolve": "^5.2.0", 31 | "rollup-plugin-scss": "^3.0.0", 32 | "rollup-plugin-svelte": "^7.1.0", 33 | "svelte": "^3.43.1", 34 | "svelte-jester": "^2.1.5", 35 | "svelte-preprocess": "^4.9.8" 36 | }, 37 | "keywords": [ 38 | "svelte" 39 | ], 40 | "files": [ 41 | "build", 42 | "src", 43 | "main.js", 44 | "cli.js" 45 | ] 46 | } 47 | -------------------------------------------------------------------------------- /rollup.config.js: -------------------------------------------------------------------------------- 1 | import svelte from "rollup-plugin-svelte"; 2 | import autoPreprocess from "svelte-preprocess"; 3 | import scss from "rollup-plugin-scss"; 4 | import resolve from "rollup-plugin-node-resolve"; 5 | import pkg from "./package.json"; 6 | 7 | const name = pkg.name 8 | .replace(/^(@\S+\/)?(svelte-)?(\S+)/, "$3") 9 | .replace(/^\w/, (m) => m.toUpperCase()) 10 | .replace(/-\w/g, (m) => m[1].toUpperCase()); 11 | 12 | export default { 13 | input: "main.js", 14 | output: [ 15 | { file: pkg.module, format: "es" }, 16 | { file: pkg.main, format: "umd", name }, 17 | ], 18 | plugins: [ 19 | svelte({ 20 | preprocess: autoPreprocess({ 21 | /* options */ 22 | }), 23 | }), 24 | scss({ 25 | output: "build/index.css", 26 | }), 27 | resolve(), 28 | ], 29 | }; 30 | -------------------------------------------------------------------------------- /src/base/Toolkit/Toolkit.scss: -------------------------------------------------------------------------------- 1 | /* 2 | The _variables file contains Sass variables for colors and sizes, among other things, which you 3 | can use to customize styles 4 | */ 5 | @import "../../styles/_variables"; 6 | 7 | /* 8 | The base file contains styles for elements such as text and headings 9 | */ 10 | @import "../../styles/base/base"; 11 | 12 | /* 13 | The layout file contains styles for laying out the page, including styles for headers, mains, 14 | footers and containers 15 | */ 16 | @import "../../styles/base/layout"; 17 | 18 | /* 19 | The forms file contains styles for basic form elements 20 | */ 21 | @import "../../styles/base/form"; 22 | -------------------------------------------------------------------------------- /src/charts/BarChart/BarChart.scss: -------------------------------------------------------------------------------- 1 | @import "../../styles/_variables"; 2 | 3 | .chart { 4 | font-size: 1.2rem; 5 | margin: 0 0 var(--element-margin, $element-margin); 6 | } 7 | 8 | .chart:last-child { 9 | margin: 0; 10 | } 11 | -------------------------------------------------------------------------------- /src/charts/BarChart/_notes.txt: -------------------------------------------------------------------------------- 1 | TODO: 2 | ===== 3 | 4 | * Fix reactivity on value and color 5 | * Add labels on hover 6 | -------------------------------------------------------------------------------- /src/charts/ChartGridLines/ChartGridLines.scss: -------------------------------------------------------------------------------- 1 | @import "../../styles/_variables"; 2 | 3 | .chart-gridline { 4 | stroke: var(--light-border-color, $light-border-color); 5 | stroke-width: 1px; 6 | } 7 | -------------------------------------------------------------------------------- /src/charts/ChartGridLines/ChartGridLines.svelte: -------------------------------------------------------------------------------- 1 | 20 | 21 | 28 | 29 | {#if showHLines} 30 | {#each yStepLabels as label, i} 31 | 37 | {/each} 38 | {/if} 39 | 40 | {#if showVLines} 41 | {#if xStepLabels.length && xStepValue} 42 | {#each xStepLabels as label, i} 43 | 49 | {/each} 50 | {:else} 51 | {#each labels as label, i} 52 | 58 | {/each} 59 | {/if} 60 | {/if} 61 | -------------------------------------------------------------------------------- /src/charts/LineChart/LineChart.scss: -------------------------------------------------------------------------------- 1 | @import "../../styles/_variables"; 2 | 3 | .chart { 4 | font-size: 1.2rem; 5 | margin: 0 0 var(--element-margin, $element-margin); 6 | } 7 | 8 | .chart:last-child { 9 | margin: 0; 10 | } 11 | -------------------------------------------------------------------------------- /src/charts/LineChart/_notes.txt: -------------------------------------------------------------------------------- 1 | TODO: 2 | ===== 3 | 4 | * Fix reactivity on value and color 5 | * Add labels on hover 6 | -------------------------------------------------------------------------------- /src/charts/PieChart/PieChart.scss: -------------------------------------------------------------------------------- 1 | @import "../../styles/_variables"; 2 | 3 | .chart { 4 | font-size: 1.2rem; 5 | margin: 0 0 var(--element-margin, $element-margin); 6 | } 7 | 8 | .chart:last-child { 9 | margin: 0; 10 | } 11 | 12 | .chart-segment { 13 | stroke: white; 14 | stroke-width: 2px; 15 | } 16 | -------------------------------------------------------------------------------- /src/charts/PieChart/_notes.txt: -------------------------------------------------------------------------------- 1 | TODO: 2 | ===== 3 | 4 | * Fix reactivity on value and color 5 | * Add labels on hover 6 | -------------------------------------------------------------------------------- /src/charts/ScatterChart/ScatterChart.scss: -------------------------------------------------------------------------------- 1 | @import "../../styles/_variables"; 2 | 3 | .chart { 4 | font-size: 1.2rem; 5 | margin: 0 0 var(--element-margin, $element-margin); 6 | } 7 | 8 | .chart:last-child { 9 | margin: 0; 10 | } 11 | -------------------------------------------------------------------------------- /src/charts/Sparkline/Sparkline.scss: -------------------------------------------------------------------------------- 1 | @import "../../styles/_variables"; 2 | 3 | .chart { 4 | font-size: 1.2rem; 5 | margin: 0 0 var(--element-margin, $element-margin); 6 | } 7 | 8 | .chart:last-child { 9 | margin: 0; 10 | } 11 | -------------------------------------------------------------------------------- /src/charts/Sparkline/Sparkline.svelte: -------------------------------------------------------------------------------- 1 | 35 | 36 |
37 | 38 | 39 | `${p.x},${p.y}`).join(" ")} 42 | stroke={color || chartColors[0]} 43 | stroke-width="2" 44 | fill="none" 45 | /> 46 | 47 | 48 |
49 | 50 | 61 | -------------------------------------------------------------------------------- /src/charts/XAxis/XAxis.scss: -------------------------------------------------------------------------------- 1 | @import "../../styles/_variables"; 2 | 3 | .chart-axis { 4 | stroke: var(--border-color, $border-color); 5 | stroke-width: 1px; 6 | } 7 | -------------------------------------------------------------------------------- /src/charts/XAxis/XAxis.svelte: -------------------------------------------------------------------------------- 1 | 22 | 23 | 30 | 31 | {#if showAxis} 32 | 38 | {/if} 39 | {#if xLabel} 40 | 45 | {xLabel} 46 | 47 | {/if} 48 | {#if stepLabels.length && stepValue} 49 | {#each stepLabels as label, i} 50 | 55 | {label} 56 | 57 | {/each} 58 | {:else} 59 | {#each labels as label, i} 60 | 65 | {label} 66 | 67 | {/each} 68 | {/if} 69 | -------------------------------------------------------------------------------- /src/charts/YAxis/YAxis.scss: -------------------------------------------------------------------------------- 1 | @import "../../styles/_variables"; 2 | 3 | .chart-axis { 4 | stroke: var(--border-color, $border-color); 5 | stroke-width: 1px; 6 | } 7 | -------------------------------------------------------------------------------- /src/charts/YAxis/YAxis.svelte: -------------------------------------------------------------------------------- 1 | 14 | 15 | 22 | 23 | {#if showAxis} 24 | 30 | {/if} 31 | {#if yLabel} 32 | 38 | {yLabel} 39 | 40 | {/if} 41 | {#each stepLabels as label, i} 42 | 47 | {label} 48 | 49 | {/each} 50 | -------------------------------------------------------------------------------- /src/components/Accordion/Accordion.scss: -------------------------------------------------------------------------------- 1 | @import "../../styles/_variables"; 2 | 3 | .accordion { 4 | margin: 0 0 var(--element-margin, $element-margin); 5 | } 6 | 7 | .accordion:last-child { 8 | margin: 0; 9 | } 10 | -------------------------------------------------------------------------------- /src/components/Accordion/AccordionItem.scss: -------------------------------------------------------------------------------- 1 | @import "../../styles/_variables"; 2 | @import "../../styles/shared/button-base"; 3 | 4 | .accordion-header-button { 5 | font-size: var(--font-size-title, $font-size-title); 6 | margin: 0 0 calc(var(--element-margin, #{$element-margin}) / 4); 7 | padding: calc(var(--element-padding, #{$element-padding}) / 4) calc(var(--element-padding, #{$element-padding}) / 2) !important; 8 | justify-content: flex-start; 9 | width: 100%; 10 | } 11 | 12 | .accordion-panel { 13 | padding: 0 calc(var(--element-padding, #{$element-padding}) / 2); 14 | } 15 | 16 | .accordion-item { 17 | margin: 0 0 calc(var(--element-margin, #{$element-margin}) / 4); 18 | } 19 | 20 | .accordion-item:last-child { 21 | margin: 0; 22 | } 23 | -------------------------------------------------------------------------------- /src/components/Accordion/_notes.txt: -------------------------------------------------------------------------------- 1 | TODO 2 | ==== 3 | 4 | * Support a collapsed/expanded icon in the header 5 | * You can do this with styles, but it's not that nice 6 | 7 | See https://www.w3.org/TR/wai-aria-practices-1.1/#accordion 8 | -------------------------------------------------------------------------------- /src/components/Alert/Alert.scss: -------------------------------------------------------------------------------- 1 | @import "../../styles/_variables"; 2 | 3 | .alert { 4 | background-color: var(--light-back-color, $light-back-color); 5 | border: 1px solid var(--border-color, $border-color); 6 | border-radius: var(--border-radius, $border-radius); 7 | display: flex; 8 | margin: 0 0 var(--element-margin, $element-margin); 9 | padding: calc(var(--element-padding, #{$element-padding}) / 2) var(--element-padding, $element-padding); 10 | position: fixed; 11 | } 12 | 13 | .alert:last-child { 14 | margin: 0; 15 | } 16 | 17 | .alert-content { 18 | flex: 1 1 auto; 19 | } 20 | 21 | .alert-close { 22 | flex: 0 0 auto; 23 | margin-left: var(--element-margin, $element-margin); 24 | margin-right: calc(var(--element-margin, #{$element-margin}) * -1 / 2); 25 | } 26 | 27 | .alert.top-left { 28 | left: 20px; 29 | top: 20px; 30 | } 31 | 32 | .alert.top { 33 | top: 20px; 34 | margin: 0 auto; 35 | } 36 | 37 | .alert.top-right { 38 | top: 20px; 39 | right: 20px; 40 | } 41 | 42 | .alert.bottom-left { 43 | left: 20px; 44 | bottom: 20px; 45 | } 46 | 47 | .alert.bottom { 48 | bottom: 20px; 49 | margin: 0 auto; 50 | } 51 | 52 | .alert.bottom-right { 53 | right: 20px; 54 | bottom: 20px; 55 | } 56 | 57 | .alert.primary, 58 | .alert.info, 59 | .alert.success, 60 | .alert.warning, 61 | .alert.danger { 62 | border: 1px solid rgba(0, 0, 0, 0.06); 63 | color: white; 64 | } 65 | 66 | .alert.primary { 67 | background-color: var(--primary-color, $primary-color); 68 | color: var(--primary-text-color, $primary-text-color); 69 | } 70 | 71 | .alert.info { 72 | background-color: var(--info-color, $info-color); 73 | color: var(--info-text-color, $info-text-color); 74 | } 75 | 76 | .alert.success { 77 | background-color: var(--success-color, $success-color); 78 | color: var(--success-text-color, $success-text-color); 79 | } 80 | 81 | .alert.warning { 82 | background-color: var(--warning-color, $warning-color); 83 | color: var(--warning-text-color, $warning-text-color); 84 | } 85 | 86 | .alert.danger { 87 | background-color: var(--danger-color, $danger-color); 88 | color: var(--danger-text-color, $danger-text-color); 89 | } 90 | -------------------------------------------------------------------------------- /src/components/Alert/_notes.txt: -------------------------------------------------------------------------------- 1 | TODO 2 | ==== 3 | 4 | * Support queuing 5 | 6 | See https://www.w3.org/TR/wai-aria-practices-1.1/#alert 7 | -------------------------------------------------------------------------------- /src/components/Alert/show-alert.js: -------------------------------------------------------------------------------- 1 | import Alert from './Alert.svelte'; 2 | 3 | export default function showAlert(props) { 4 | const alert = new Alert({ 5 | target: document.body, 6 | props, 7 | intro: true 8 | }); 9 | } 10 | -------------------------------------------------------------------------------- /src/components/AutoComplete/AutoComplete.scss: -------------------------------------------------------------------------------- 1 | @import "../../styles/_variables"; 2 | @import "../../styles/shared/drop-down"; 3 | -------------------------------------------------------------------------------- /src/components/AutoComplete/AutoCompleteItem.scss: -------------------------------------------------------------------------------- 1 | @import "../../styles/_variables"; 2 | @import "../../styles/shared/drop-down-item"; 3 | -------------------------------------------------------------------------------- /src/components/AutoComplete/AutoCompleteItem.svelte: -------------------------------------------------------------------------------- 1 | 45 | 46 |
dispatch("select", index)} 53 | > 54 | 55 |
56 | 57 | 76 | -------------------------------------------------------------------------------- /src/components/AutoComplete/_notes.txt: -------------------------------------------------------------------------------- 1 | TODO 2 | ==== 3 | 4 | * Allow loading items from network 5 | * Allow setting value to different from text 6 | * Allow restricting the value to items in the list 7 | -------------------------------------------------------------------------------- /src/components/Badge/Badge.scss: -------------------------------------------------------------------------------- 1 | @import "../../styles/_variables"; 2 | 3 | .badge { 4 | background-color: var(--light-back-color, $light-back-color); 5 | border: 1px solid var(--border-color, $border-color); 6 | border-radius: 2rem; 7 | display: inline-block; 8 | font-weight: bold; 9 | font-size: var(--font-size-small, $font-size-small); 10 | margin: 0 calc(var(--element-margin, #{$element-margin}) / 4); 11 | padding: 0 calc(var(--element-padding, #{$element-padding}) / 4); 12 | text-align: center; 13 | vertical-align: top; 14 | } 15 | 16 | .badge.boxed { 17 | border-radius: 4px; 18 | } 19 | 20 | .badge.primary, 21 | .badge.info, 22 | .badge.success, 23 | .badge.warning, 24 | .badge.danger { 25 | border: 1px solid rgba(0, 0, 0, 0.06); 26 | color: white; 27 | text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2); 28 | } 29 | 30 | .badge.primary { 31 | background-color: var(--primary-color, $primary-color); 32 | color: var(--primary-text-color, $primary-text-color); 33 | } 34 | 35 | .badge.info { 36 | background-color: var(--info-color, $info-color); 37 | color: var(--info-text-color, $info-text-color); 38 | } 39 | 40 | .badge.success { 41 | background-color: var(--success-color, $success-color); 42 | color: var(--success-text-color, $success-text-color); 43 | } 44 | 45 | .badge.warning { 46 | background-color: var(--warning-color, $warning-color); 47 | color: var(--warning-text-color, $warning-text-color); 48 | } 49 | 50 | .badge.danger { 51 | background-color: var(--danger-color, $danger-color); 52 | color: var(--danger-text-color, $danger-text-color); 53 | } 54 | 55 | .badge.cancel { 56 | background-color: var(--cancel-color, $cancel-color); 57 | } 58 | -------------------------------------------------------------------------------- /src/components/Badge/Badge.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 | 67 | 68 | 69 | {content} 70 | 71 | -------------------------------------------------------------------------------- /src/components/Breadcrumb/Breadcrumb.scss: -------------------------------------------------------------------------------- 1 | .breadcrumb ol { 2 | list-style-type: none; 3 | margin: 0; 4 | padding: 0; 5 | } 6 | -------------------------------------------------------------------------------- /src/components/Breadcrumb/Breadcrumb.svelte: -------------------------------------------------------------------------------- 1 | 7 | 8 | 17 | 18 | 26 | -------------------------------------------------------------------------------- /src/components/Breadcrumb/BreadcrumbItem.scss: -------------------------------------------------------------------------------- 1 | li { 2 | display: inline; 3 | } 4 | 5 | :global(.breadcrumb-item + .breadcrumb-item:before) { 6 | content: " / "; 7 | } 8 | -------------------------------------------------------------------------------- /src/components/Breadcrumb/BreadcrumbItem.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 |
  • 10 | {#if current} 11 | 12 | 13 | 14 | {:else} 15 | 16 | 17 | 18 | {/if} 19 |
    • 20 | 21 | 31 | -------------------------------------------------------------------------------- /src/components/Breadcrumb/_notes.txt: -------------------------------------------------------------------------------- 1 | TODO 2 | ==== 3 | 4 | * Support setting the content before 5 | * Don't show aria-current when not set 6 | * Add styles 7 | 8 | See https://www.w3.org/TR/wai-aria-practices-1.1/#breadcrumb 9 | -------------------------------------------------------------------------------- /src/components/Button/_notes.txt: -------------------------------------------------------------------------------- 1 | TODO 2 | ==== 3 | 4 | * Support setting icons on either side? 5 | * Add styles 6 | * Add events 7 | 8 | See https://www.w3.org/TR/wai-aria-practices-1.1/#button 9 | -------------------------------------------------------------------------------- /src/components/Calendar/Calendar.scss: -------------------------------------------------------------------------------- 1 | @import "../../styles/_variables"; 2 | 3 | .calendar { 4 | display: inline-block; 5 | margin: 0 0 var(--element-margin, $element-margin); 6 | } 7 | 8 | .calendar:last-child { 9 | margin: 0; 10 | } 11 | 12 | .calendar-header { 13 | padding: 0.8rem 0; 14 | white-space: nowrap; 15 | 16 | display: flex; 17 | justify-content: center; 18 | align-items: center; 19 | } 20 | 21 | .calendar-body { 22 | margin: 0 0 var(--element-margin, $element-margin); 23 | 24 | display: flex; 25 | flex-wrap: wrap; 26 | justify-content: center; 27 | align-items: top; 28 | } 29 | 30 | .calendar-body:last-child { 31 | margin: 0; 32 | } 33 | 34 | .calendar-nav { 35 | display: inline-block; 36 | font-size: 2rem; 37 | font-weight: bold; 38 | line-height: 2rem; 39 | text-align: center; 40 | width: 14.2857%; 41 | } 42 | 43 | .calendar-title { 44 | display: inline-block; 45 | font-size: var(--font-size-title, $font-size-title); 46 | text-align: center; 47 | width: 71.4285%; 48 | } 49 | 50 | .calendar-day-header { 51 | display: inline-block; 52 | font-weight: bold; 53 | padding: 0.8rem 0; 54 | text-align: center; 55 | vertical-align: top; 56 | width: 14.2857%; 57 | } -------------------------------------------------------------------------------- /src/components/Calendar/CalendarDay.scss: -------------------------------------------------------------------------------- 1 | @import "../../styles/_variables"; 2 | 3 | .calendar-day { 4 | display: inline-block; 5 | text-align: center; 6 | vertical-align: top; 7 | width: 14.2857%; 8 | } 9 | 10 | .calendar-day-text { 11 | border-radius: var(--border-radius, $border-radius); 12 | } 13 | 14 | .calendar-day-text.muted { 15 | color: #CCCCCC; 16 | } 17 | 18 | .calendar-day-text.today { 19 | background-color: #0077DD; 20 | color: white; 21 | } 22 | 23 | .calendar-day-text.active { 24 | background-color: var(--select-color, $select-color); 25 | color: var(--select-text-color, $select-text-color); 26 | } 27 | 28 | .calendar-number { 29 | display: inline-block; 30 | padding: 0.8rem 0; 31 | } 32 | 33 | .calendar-day-button { 34 | background-color: transparent; 35 | border: none; 36 | cursor: pointer; 37 | font-size: inherit; 38 | margin: 0; 39 | min-width: 0; 40 | padding: 0; 41 | width: 100%; 42 | } 43 | 44 | .calendar-day-button:focus { 45 | background-color: transparent; 46 | } 47 | 48 | ul.calendar-event-list { 49 | line-height: 0.6rem; 50 | min-height: 0.6rem; 51 | margin: -4px 0 2px; 52 | padding: 0; 53 | } 54 | 55 | li.calendar-event { 56 | background-color: var(--select-color, $select-color); 57 | border-radius: 50%; 58 | display: inline-block; 59 | margin: 0; 60 | height: 0.6rem; 61 | width: 0.6rem; 62 | } 63 | -------------------------------------------------------------------------------- /src/components/Card/Card.scss: -------------------------------------------------------------------------------- 1 | @import "../../styles/_variables"; 2 | 3 | .card { 4 | background-color: white; 5 | border: 1px solid var(--border-color, $border-color); 6 | margin: -1px 0; 7 | padding: var(--element-padding, $element-padding); 8 | } 9 | 10 | .card.transparent { 11 | background-color: transparent; 12 | } 13 | 14 | .card.light { 15 | background-color: var(--light-back-color, $light-back-color); 16 | } 17 | 18 | .card.dark { 19 | background-color: var(--dark-back-color, $dark-back-color); 20 | border-color: var(--dark-back-color, $dark-back-color); 21 | color: white; 22 | } 23 | 24 | .card.primary, 25 | .card.info, 26 | .card.success, 27 | .card.warning, 28 | .card.danger { 29 | :global(a) { 30 | color: inherit; 31 | border-bottom: 1px solid; 32 | } 33 | :global(a:hover), 34 | :global(a:focus) { 35 | border-bottom: 1px double; 36 | } 37 | } 38 | 39 | .card.primary { 40 | background-color: var(--light-primary-color, $light-primary-color); 41 | border: 1px solid var(--light-primary-border-color, $light-primary-border-color); 42 | color: var(--light-primary-text-color, $light-primary-text-color); 43 | } 44 | 45 | .card.info { 46 | background-color: var(--light-info-color, $light-info-color); 47 | border: 1px solid var(--light-info-border-color, $light-info-border-color); 48 | color: var(--light-info-text-color, $light-info-text-color); 49 | } 50 | 51 | .card.success { 52 | background-color: var(--light-success-color, $light-success-color); 53 | border: 1px solid var(--light-success-border-color, $light-success-border-color); 54 | color: var(--light-success-text-color, $light-success-text-color); 55 | } 56 | 57 | .card.warning { 58 | background-color: var(--light-warning-color, $light-warning-color); 59 | border: 1px solid var(--light-warning-border-color, $light-warning-border-color); 60 | color: var(--light-warning-text-color, $light-warning-text-color); 61 | } 62 | 63 | .card.danger { 64 | background-color: var(--light-danger-color, $light-danger-color); 65 | border: 1px solid var(--light-danger-border-color, $light-danger-border-color); 66 | color: var(--light-danger-text-color, $light-danger-text-color); 67 | } 68 | -------------------------------------------------------------------------------- /src/components/Card/Card.svelte: -------------------------------------------------------------------------------- 1 | 7 | 8 | 83 | 84 |
    87 | 88 |
    89 | -------------------------------------------------------------------------------- /src/components/ColorPicker/ColorPicker.scss: -------------------------------------------------------------------------------- 1 | @import "../../styles/_variables"; 2 | @import "../../styles/shared/drop-down"; 3 | @import "../../styles/shared/input-button"; 4 | 5 | .drop-down-list { 6 | max-height: initial; 7 | } 8 | 9 | .color-picker-preview { 10 | border-radius: 2px; 11 | margin: 4px; 12 | width: 2.4rem; 13 | } 14 | -------------------------------------------------------------------------------- /src/components/ColorPicker/_notes.txt: -------------------------------------------------------------------------------- 1 | TODO 2 | ==== 3 | 4 | * Better keyboard shortcuts 5 | -------------------------------------------------------------------------------- /src/components/CoverImage/CoverImage.scss: -------------------------------------------------------------------------------- 1 | 2 | .cover-image { 3 | background-position: 50% 50%; 4 | background-repeat: no-repeat; 5 | background-size: cover; 6 | vertical-align: top; 7 | } 8 | -------------------------------------------------------------------------------- /src/components/CoverImage/CoverImage.svelte: -------------------------------------------------------------------------------- 1 | 36 | 37 | 46 | 47 |