├── .editorconfig ├── .eslintrc.cjs ├── .gitignore ├── .husky └── pre-commit ├── .npmrc ├── .prettierrc ├── LICENSE ├── README.md ├── mdsvex.config.js ├── package-lock.json ├── package.json ├── src ├── global.d.ts ├── lib │ ├── Spectre.svelte │ ├── components │ │ ├── Accordion │ │ │ ├── Accordion.svelte │ │ │ ├── Accordioner.svelte │ │ │ └── index.ts │ │ ├── Autocomplete │ │ │ ├── Autocomplete.svelte │ │ │ ├── index.ts │ │ │ └── utils.ts │ │ ├── Avatar │ │ │ ├── Avatar.svelte │ │ │ └── index.ts │ │ ├── Badge │ │ │ ├── Badge.svelte │ │ │ ├── action.ts │ │ │ └── index.ts │ │ ├── Bars │ │ │ ├── Bars.svelte │ │ │ └── index.ts │ │ ├── Breadcrumbs │ │ │ ├── Breadcrumbs.svelte │ │ │ └── index.ts │ │ ├── Button │ │ │ ├── Button.svelte │ │ │ ├── Group.svelte │ │ │ ├── IconButton.svelte │ │ │ └── index.ts │ │ ├── Checkbox │ │ │ ├── Checkbox.svelte │ │ │ └── index.ts │ │ ├── Chip │ │ │ ├── Chip.svelte │ │ │ └── index.ts │ │ ├── Divider │ │ │ ├── Divider.svelte │ │ │ └── index.ts │ │ ├── Icon │ │ │ ├── Icon.svelte │ │ │ └── index.ts │ │ ├── Input │ │ │ ├── Group.svelte │ │ │ ├── Input.svelte │ │ │ └── index.ts │ │ ├── Menu │ │ │ ├── Menu.svelte │ │ │ └── index.ts │ │ ├── Meter │ │ │ ├── Meter.svelte │ │ │ └── index.ts │ │ ├── Pagination │ │ │ ├── Pagination.svelte │ │ │ └── index.ts │ │ ├── PeriodicTable │ │ │ ├── PeriodicTable.svelte │ │ │ ├── chemical_content.json │ │ │ ├── index.ts │ │ │ └── table_data.json │ │ ├── Progress │ │ │ ├── Progress.svelte │ │ │ └── index.ts │ │ ├── Radio │ │ │ ├── Radio.svelte │ │ │ └── index.ts │ │ ├── Range │ │ │ ├── Range.svelte │ │ │ └── index.ts │ │ ├── Select │ │ │ ├── Select.svelte │ │ │ └── index.ts │ │ ├── Steps │ │ │ ├── Steps.svelte │ │ │ └── index.ts │ │ ├── Switch │ │ │ ├── Switch.svelte │ │ │ └── index.ts │ │ ├── Tabs │ │ │ ├── Tabs.svelte │ │ │ └── index.ts │ │ ├── Toast │ │ │ ├── Toast.svelte │ │ │ ├── Toaster.svelte │ │ │ ├── index.ts │ │ │ ├── positions.ts │ │ │ ├── timer.ts │ │ │ └── toast.ts │ │ ├── Transition │ │ │ ├── Transition.svelte │ │ │ └── index.ts │ │ └── index.ts │ ├── dark.scss │ ├── helpers │ │ ├── actions.ts │ │ ├── str_to_rgb.ts │ │ └── uuid.ts │ ├── index.ts │ ├── layouts │ │ ├── Card │ │ │ ├── Card.svelte │ │ │ └── index.ts │ │ ├── Code │ │ │ ├── Code.svelte │ │ │ └── index.ts │ │ ├── Container │ │ │ ├── Container.svelte │ │ │ └── index.ts │ │ ├── Dropdown │ │ │ ├── Dropdown.svelte │ │ │ └── index.ts │ │ ├── Empty │ │ │ ├── Empty.svelte │ │ │ └── index.ts │ │ ├── Figure │ │ │ ├── Figure.svelte │ │ │ └── index.ts │ │ ├── Form │ │ │ ├── Form.svelte │ │ │ ├── Group.svelte │ │ │ └── index.ts │ │ ├── Grid │ │ │ ├── Col.svelte │ │ │ ├── Grid.svelte │ │ │ └── index.ts │ │ ├── Hero │ │ │ ├── Hero.svelte │ │ │ └── index.ts │ │ ├── Modal │ │ │ ├── Modal.svelte │ │ │ └── index.ts │ │ ├── Navbar │ │ │ ├── Navbar.svelte │ │ │ └── index.ts │ │ ├── Panel │ │ │ ├── Panel.svelte │ │ │ └── index.ts │ │ ├── Popover │ │ │ ├── Popover.svelte │ │ │ └── index.ts │ │ ├── Sidebar │ │ │ ├── Sidebar.svelte │ │ │ └── index.ts │ │ ├── Tile │ │ │ ├── Tile.svelte │ │ │ └── index.ts │ │ ├── Toggle │ │ │ ├── Toggle.svelte │ │ │ └── index.ts │ │ └── index.ts │ ├── spectre.scss │ └── types │ │ ├── asset.d.ts │ │ ├── bg.d.ts │ │ ├── const.ts │ │ ├── display.d.ts │ │ ├── icons.d.ts │ │ ├── position.d.ts │ │ ├── shape.d.ts │ │ ├── size.d.ts │ │ └── text.d.ts └── www │ ├── +layout.server.ts │ ├── +layout.svelte │ ├── +page.svelte │ ├── app.html │ ├── app.scss │ ├── assets │ ├── .nojekyll │ ├── favicon.svg │ ├── fonts │ │ └── Exo2_64_Latin-ext.scss │ ├── github.svg │ ├── img │ │ ├── 04696e1a-eb5d-43b9-bb1d-d2ee117f4430.webp │ │ ├── 1b9a004a-db27-45e4-b762-0fa21bc97277.webp │ │ ├── 4603a846-4daf-4018-aa74-e3ab567a69fc.webp │ │ ├── avatar-1.png │ │ ├── avatar-2.png │ │ ├── avatar-3.png │ │ ├── avatar-4.png │ │ ├── avatar-5.png │ │ ├── b64f151d-e194-497a-9b70-e15ffdd8730d.webp │ │ └── c2179403-954f-4f5d-82a4-3dfdeaba9597.webp │ └── metis.svg │ ├── docs │ ├── +layout.svelte │ ├── +page.svelte │ ├── 01-getting_started │ │ ├── 01-installation │ │ │ └── +page.md │ │ ├── 02-customize │ │ │ └── +page.md │ │ ├── browser-support │ │ │ └── +page.md │ │ └── changelog │ │ │ └── +page.md │ ├── code.scss │ ├── components │ │ ├── accordion │ │ │ └── +page.md │ │ ├── autocomplete │ │ │ └── +page.md │ │ ├── avatar │ │ │ └── +page.md │ │ ├── badge │ │ │ └── +page.md │ │ ├── bars │ │ │ └── +page.md │ │ ├── breadcrumbs │ │ │ └── +page.md │ │ ├── button │ │ │ └── +page.md │ │ ├── checkbox │ │ │ └── +page.md │ │ ├── chip │ │ │ └── +page.md │ │ ├── divider │ │ │ └── +page.md │ │ ├── icon │ │ │ └── +page.md │ │ ├── input │ │ │ └── +page.md │ │ ├── menu │ │ │ └── +page.md │ │ ├── meter │ │ │ └── +page.md │ │ ├── pagination │ │ │ └── +page.md │ │ ├── periodictable │ │ │ └── +page.md │ │ ├── progress │ │ │ └── +page.md │ │ ├── radio │ │ │ └── +page.md │ │ ├── range │ │ │ └── +page.md │ │ ├── select │ │ │ └── +page.md │ │ ├── steps │ │ │ └── +page.md │ │ ├── switch │ │ │ └── +page.md │ │ ├── tabs │ │ │ └── +page.md │ │ ├── toast │ │ │ └── +page.md │ │ └── transition │ │ │ └── +page.md │ ├── knobs.svelte │ └── layouts │ │ ├── card │ │ └── +page.md │ │ ├── code │ │ └── +page.md │ │ ├── container │ │ └── +page.md │ │ ├── dropdown │ │ └── +page.md │ │ ├── empty │ │ └── +page.md │ │ ├── figure │ │ └── +page.md │ │ ├── form │ │ └── +page.md │ │ ├── grid │ │ └── +page.md │ │ ├── hero │ │ └── +page.md │ │ ├── modal │ │ └── +page.md │ │ ├── navbar │ │ └── +page.md │ │ ├── panel │ │ └── +page.md │ │ ├── popover │ │ └── +page.md │ │ ├── sidebar │ │ └── +page.md │ │ ├── tile │ │ └── +page.md │ │ └── toggle │ │ └── +page.md │ ├── media.ts │ └── types.ts ├── svelte.config.js ├── tests ├── components │ ├── Accordion │ │ └── Accordion.spec.ts │ ├── Avatar │ │ └── Avatar.spec.ts │ ├── Badge │ │ └── Badge.spec.ts │ ├── Breadcrumbs │ │ └── Breadcrumbs.spec.ts │ ├── Button │ │ ├── Button.spec.ts │ │ ├── Group.spec.ts │ │ └── IconButton.spec.ts │ ├── Checkbox │ │ └── Checkbox.spec.ts │ ├── Chip │ │ └── Chip.spec.ts │ ├── Divider │ │ └── Divider.spec.ts │ ├── Icon │ │ └── Icon.spec.ts │ ├── Input │ │ ├── Group.spec.ts │ │ └── Input.spec.ts │ ├── Pagination │ │ └── Pagination.spec.ts │ ├── Progress │ │ └── Progress.spec.ts │ ├── Radio │ │ └── Radio.spec.ts │ ├── Range │ │ └── Range.spec.ts │ ├── Select │ │ └── Select.spec.ts │ ├── Steps │ │ └── Steps.spec.ts │ ├── Switch │ │ └── Switch.spec.ts │ ├── Tabs │ │ └── Tabs.spec.ts │ ├── Toast │ │ └── Toast.spec.ts │ └── Transition │ │ └── Transition.spec.ts ├── layouts │ ├── Card │ │ └── Card.spec.ts │ ├── Code │ │ └── Code.spec.ts │ ├── Container │ │ └── Container.spec.ts │ ├── Dropdown │ │ └── Dropdown.spec.ts │ ├── Empty │ │ └── Empty.spec.ts │ ├── Figure │ │ └── Figure.spec.ts │ ├── Form │ │ ├── Form.spec.ts │ │ └── FormGroup.spec.ts │ ├── Grid │ │ ├── Col.spec.ts │ │ └── Grid.spec.ts │ ├── Hero │ │ └── Hero.spec.ts │ ├── Modal │ │ └── Modal.spec.ts │ ├── Navbar │ │ └── Navbar.spec.ts │ ├── Panel │ │ └── Panel.spec.ts │ ├── Popover │ │ └── Popover.spec.ts │ ├── Sidebar │ │ └── Sidebar.spec.ts │ └── Tile │ │ └── Tile.spec.ts └── setup │ ├── preprocess.js │ ├── register.js │ ├── slots.js │ ├── svelteconfig.js │ ├── testenv.js │ └── transformer.js ├── tsconfig.json └── vite.config.js /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | end_of_line = lf 5 | insert_final_newline = true 6 | 7 | [*.{js,css,html,json,svelte,yaml}] 8 | charset = utf-8 9 | indent_style = tab 10 | indent_size = 4 11 | trim_trailing_whitespace = true 12 | max_line_length = 100 13 | -------------------------------------------------------------------------------- /.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | parser: '@typescript-eslint/parser', 4 | extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'prettier'], 5 | plugins: ['svelte3', '@typescript-eslint'], 6 | ignorePatterns: ['*.cjs'], 7 | overrides: [{ files: ['*.svelte'], processor: 'svelte3/svelte3' }], 8 | settings: { 9 | 'svelte3/typescript': () => require('typescript') 10 | }, 11 | parserOptions: { 12 | sourceType: 'module', 13 | ecmaVersion: 2020 14 | }, 15 | env: { 16 | browser: true, 17 | es2017: true, 18 | node: true 19 | } 20 | }; 21 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /build 4 | /.svelte-kit 5 | /package 6 | .env 7 | .env.* 8 | !.env.example 9 | -------------------------------------------------------------------------------- /.husky/pre-commit: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | . "$(dirname "$0")/_/husky.sh" 3 | 4 | npm run format 5 | -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | engine-strict=true 2 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "tabWidth": 4, 3 | "semi": true, 4 | "singleQuote": true, 5 | "svelteSortOrder": "options-markup-scripts-styles", 6 | "svelteStrictMode": false, 7 | "svelteAllowShorthand": true, 8 | "svelteIndentScriptAndStyle": true, 9 | "plugins": [ 10 | "prettier-plugin-svelte" 11 | ] 12 | } 13 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright 2021-2022 BASF SE 2 | 3 | Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met: 4 | 5 | 1. Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer. 6 | 7 | 2. Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution. 8 | 9 | 3. Neither the name of the copyright holder nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission. 10 | 11 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Svelte-spectre 2 | 3 | [![NPM version](https://img.shields.io/npm/v/svelte-spectre.svg?style=flat)](https://www.npmjs.com/package/svelte-spectre) 4 | [![NPM downloads](https://img.shields.io/npm/dm/svelte-spectre.svg?style=flat)](https://www.npmjs.com/package/svelte-spectre) 5 | [![GitHub issues](https://img.shields.io/github/issues/basf/svelte-spectre?style=flat)](https://github.com/basf/svelte-spectre/issues) 6 | 7 | UI-kit based on [spectre.css](https://picturepan2.github.io/spectre/) and powered by SvelteJS. See the [documentation](https://kit.optimade.science), which is also a component explorer (storybook). 8 | 9 | ### Requirements 10 | 11 | - `node -v >= 15` 12 | - `npm -v >= 7` 13 | 14 | ## Installation 15 | 16 | ```bash 17 | npm install 18 | ``` 19 | 20 | ## Building package 21 | 22 | This builds the GUI components in a `package` folder: 23 | 24 | ```bash 25 | npm run package 26 | ``` 27 | 28 | ## Developing 29 | 30 | This serves a [demonstration website](https://kit.optimade.science): 31 | 32 | ```bash 33 | npm run dev 34 | 35 | # or start the server and open the app in a new browser tab 36 | npm run dev -- --open 37 | ``` 38 | 39 | The demo website lives in a separate repo https://github.com/tilde-lab/svelte-spectre-storybook. 40 | 41 | ## Integration 42 | 43 | Before creating a production version of your app, install an [adapter](https://kit.svelte.dev/docs#adapters) for your target environment. Then run: 44 | 45 | ```bash 46 | npm run build 47 | ``` 48 | 49 | You can preview the built app with `npm run preview`, regardless of whether you installed an adapter. This should _not_ be used to serve your app in production. 50 | 51 | ## License 52 | 53 | Copyright 2024-2025 Materials Platform for Data Science LLC 54 | 55 | Copyright 2021-2023 BASF SE 56 | 57 | BSD 3-Clause 58 | -------------------------------------------------------------------------------- /mdsvex.config.js: -------------------------------------------------------------------------------- 1 | const config = { 2 | extensions: ['.svelte.md', '.md', '.svx'], 3 | smartypants: { 4 | dashes: 'oldschool', 5 | }, 6 | remarkPlugins: [], 7 | rehypePlugins: [], 8 | }; 9 | 10 | export default config; 11 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "svelte-spectre", 3 | "version": "0.4.19", 4 | "description": "UI-kit based on spectre.css and powered by SvelteJS", 5 | "main": "./package/index.js", 6 | "files": [ 7 | "package/" 8 | ], 9 | "type": "module", 10 | "scripts": { 11 | "dev": "vite dev", 12 | "build": "vite build", 13 | "preview": "vite preview", 14 | "package": "svelte-package && sass src/lib/spectre.scss package/spectre.css --style=compressed --no-source-map --quiet-deps && prettier --ignore-path .gitignore --write \"{,package/**/}*.{js,ts,md,svelte}\"", 15 | "check": "svelte-check --tsconfig ./tsconfig.json", 16 | "check:watch": "svelte-check --tsconfig ./tsconfig.json --watch", 17 | "lint": "npm run format && eslint --ignore-path .gitignore .", 18 | "format": "prettier --ignore-path .gitignore --write \"{,(src|tests|package)/**/}*.{js,ts,md,svelte}\"", 19 | "test": "uvu tests '.spec.ts' -r tsm -r tests/setup/register -i setup", 20 | "prepublishOnly": "npm run package", 21 | "husky:init": "npx husky install", 22 | "prepare": "husky install" 23 | }, 24 | "author": "Alexander Volkov", 25 | "license": "BSD 3-Clause", 26 | "repository": { 27 | "type": "git", 28 | "url": "git+https://github.com/basf/svelte-spectre.git" 29 | }, 30 | "engines": { 31 | "node": ">= 14" 32 | }, 33 | "devDependencies": { 34 | "@poppanator/sveltekit-svg": "^0.3.4", 35 | "@sveltejs/adapter-static": "^1.0.0-next.43", 36 | "@sveltejs/kit": "^1.0.0-next.504", 37 | "@sveltejs/package": "1.0.0-next.3", 38 | "@types/jsdom": "^20.0.0", 39 | "@typescript-eslint/eslint-plugin": "^5.38.1", 40 | "@typescript-eslint/parser": "^5.38.1", 41 | "eslint": "^8.24.0", 42 | "eslint-config-prettier": "^8.5.0", 43 | "eslint-plugin-svelte3": "^4.0.0", 44 | "husky": "^8.0.1", 45 | "jsdom": "^20.0.0", 46 | "mdsvex": "^0.10.6", 47 | "pirates": "^4.0.5", 48 | "prettier": "^2.7.1", 49 | "prettier-plugin-svelte": "^2.7.1", 50 | "sass": "^1.55.0", 51 | "spectre.css": "^0.5.9", 52 | "svelte": "^3.50.1", 53 | "svelte-check": "^2.9.1", 54 | "svelte-preprocess": "^4.10.7", 55 | "svelte2tsx": "^0.5.19", 56 | "tslib": "^2.4.0", 57 | "tsm": "^2.2.2", 58 | "typescript": "~4.7.4", 59 | "uvu": "^0.5.6", 60 | "vite": "^3.1.3" 61 | }, 62 | "dependencies": { 63 | "@ctrl/tinycolor": "^3.4.1" 64 | } 65 | } 66 | -------------------------------------------------------------------------------- /src/global.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | declare module '*.svg?src' { 3 | const content: string; 4 | export default content; 5 | } 6 | 7 | declare module '*.svg?component' { 8 | const content: string; 9 | export default content; 10 | } 11 | 12 | declare module '*.svg?url' { 13 | const content: string; 14 | export default content; 15 | } 16 | -------------------------------------------------------------------------------- /src/lib/components/Accordion/Accordion.svelte: -------------------------------------------------------------------------------- 1 |
2 | 3 | 4 | 5 | {#if opened} 6 |
7 | 8 |
9 | {/if} 10 |
11 | 12 | 17 | 18 | 52 | 53 | 79 | -------------------------------------------------------------------------------- /src/lib/components/Accordion/Accordioner.svelte: -------------------------------------------------------------------------------- 1 | 2 | 3 | 7 | -------------------------------------------------------------------------------- /src/lib/components/Accordion/index.ts: -------------------------------------------------------------------------------- 1 | export * from './Accordion.svelte'; 2 | export { default } from './Accordion.svelte'; 3 | export { default as Accordion } from './Accordion.svelte'; 4 | export { default as Accordioner } from './Accordioner.svelte'; 5 | -------------------------------------------------------------------------------- /src/lib/components/Autocomplete/index.ts: -------------------------------------------------------------------------------- 1 | export * from './Autocomplete.svelte'; 2 | export { default } from './Autocomplete.svelte'; 3 | export { default as Autocomplete } from './Autocomplete.svelte'; 4 | -------------------------------------------------------------------------------- /src/lib/components/Autocomplete/utils.ts: -------------------------------------------------------------------------------- 1 | import type { Color } from '../../types/text'; 2 | 3 | export type Item = { 4 | index?: number; 5 | label?: string; 6 | value?: any; 7 | group?: string; 8 | type?: Color | string; 9 | style?: string; 10 | }; 11 | 12 | function calcSuggestion( 13 | predefined: Item[], 14 | selected: Item[], 15 | value: string 16 | ): Item[] { 17 | return predefined.filter( 18 | (p) => 19 | stringIndex(p.label, value) >= 0 && 20 | !selected.some((s) => s.index === p.index) 21 | ); 22 | } 23 | 24 | function calcPrompt(suggested: Item[], value: string, active: number): string { 25 | return stringIndex(suggested[active]?.label, value) === 0 26 | ? suggested[active].label 27 | : ''; 28 | } 29 | 30 | function stringIndex(item: string, value: string): number { 31 | const regexp = new RegExp(value, 'i'); 32 | return item?.search(regexp); 33 | } 34 | 35 | function stringMatch(item: string, value: string): string { 36 | const regex = new RegExp(value, 'i'); 37 | return item?.match(regex).join(''); 38 | } 39 | 40 | function markSuggestion(item: string, value: string): string { 41 | const match = stringMatch(item, value); 42 | return item.replace(match, `${match}`); 43 | } 44 | 45 | function createObject( 46 | item: string, 47 | items: string[] | Item[], 48 | index?: number 49 | ): Item { 50 | return { 51 | index: index >= 0 ? index : items.length, 52 | value: item, 53 | label: `${item || ''}`, 54 | }; 55 | } 56 | 57 | function createIndexes(items: Item[]): Item[] { 58 | return items?.some((item) => !item?.hasOwnProperty('index')) 59 | ? items.map((item: Item, i) => ({ ...item, index: i })) 60 | : items; 61 | } 62 | 63 | function makeGroups(items: Item[]): any[] | Item { 64 | if (!items || !items.length) { 65 | console.warn(`Autocomplete haven't items`); 66 | return []; 67 | } else { 68 | return items.reduce((a, c) => { 69 | a[c.group] = a[c.group] || []; 70 | a[c.group]?.push(c); 71 | return a; 72 | }, {}); 73 | } 74 | } 75 | 76 | export { 77 | calcSuggestion, 78 | calcPrompt, 79 | createObject, 80 | createIndexes, 81 | markSuggestion, 82 | makeGroups, 83 | stringIndex, 84 | stringMatch, 85 | }; 86 | -------------------------------------------------------------------------------- /src/lib/components/Avatar/Avatar.svelte: -------------------------------------------------------------------------------- 1 |
12 | 13 | 14 | {#if status} 15 | 16 | {:else if $$slots.sub} 17 | 18 | 19 | 20 | {/if} 21 | {#if caption || $$slots.caption} 22 |
23 | {name} 24 |
25 | {/if} 26 |
27 | 28 | 39 | 40 | 62 | 63 | 106 | -------------------------------------------------------------------------------- /src/lib/components/Avatar/index.ts: -------------------------------------------------------------------------------- 1 | export * from './Avatar.svelte'; 2 | export { default } from './Avatar.svelte'; 3 | export { default as Avatar } from './Avatar.svelte'; 4 | -------------------------------------------------------------------------------- /src/lib/components/Badge/Badge.svelte: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 8 | 9 | 13 | 14 | 28 | -------------------------------------------------------------------------------- /src/lib/components/Badge/action.ts: -------------------------------------------------------------------------------- 1 | export default function addBadge(node: HTMLElement, badge: string) { 2 | function update(badge: string) { 3 | if (!badge && !badge?.length) return destroy(); 4 | node.classList.add('badge'); 5 | badge.length > 0 6 | ? node.setAttribute('data-badge', badge) 7 | : node.removeAttribute('data-badge'); 8 | } 9 | function destroy() { 10 | node.classList.remove('badge'); 11 | node.removeAttribute('data-badge'); 12 | } 13 | update(badge); 14 | return { update, destroy }; 15 | } 16 | -------------------------------------------------------------------------------- /src/lib/components/Badge/index.ts: -------------------------------------------------------------------------------- 1 | export * from './Badge.svelte'; 2 | export { default } from './Badge.svelte'; 3 | export { default as Badge } from './Badge.svelte'; 4 | export { default as badge } from './action'; 5 | -------------------------------------------------------------------------------- /src/lib/components/Bars/Bars.svelte: -------------------------------------------------------------------------------- 1 |
2 | {#each items as item, i} 3 | {#if !item.invisible} 4 |
12 | {labled ? item.label || item.value : ''} 13 |
14 | {/if} 15 | {/each} 16 |
17 | 18 | 33 | 34 | 87 | 88 | 138 | -------------------------------------------------------------------------------- /src/lib/components/Bars/index.ts: -------------------------------------------------------------------------------- 1 | export * from './Bars.svelte'; 2 | export { default } from './Bars.svelte'; 3 | export { default as Bars } from './Bars.svelte'; 4 | -------------------------------------------------------------------------------- /src/lib/components/Breadcrumbs/Breadcrumbs.svelte: -------------------------------------------------------------------------------- 1 | 10 | 11 | 19 | 20 | 23 | 24 | 27 | -------------------------------------------------------------------------------- /src/lib/components/Breadcrumbs/index.ts: -------------------------------------------------------------------------------- 1 | export * from './Breadcrumbs.svelte'; 2 | export { default } from './Breadcrumbs.svelte'; 3 | export { default as Breadcrumbs } from './Breadcrumbs.svelte'; 4 | -------------------------------------------------------------------------------- /src/lib/components/Button/Button.svelte: -------------------------------------------------------------------------------- 1 | {#if href} 2 | 21 | 22 | 23 | {:else} 24 | 44 | {/if} 45 | 46 | 55 | 56 | 71 | 72 | 106 | -------------------------------------------------------------------------------- /src/lib/components/Button/Group.svelte: -------------------------------------------------------------------------------- 1 |
2 | 3 |
4 | 5 | 8 | 9 | 14 | -------------------------------------------------------------------------------- /src/lib/components/Button/IconButton.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 14 | 15 | 20 | -------------------------------------------------------------------------------- /src/lib/components/Button/index.ts: -------------------------------------------------------------------------------- 1 | export * from './Button.svelte'; 2 | export { default } from './Button.svelte'; 3 | export { default as Button } from './Button.svelte'; 4 | export { default as ButtonGroup } from './Group.svelte'; 5 | export { default as IconButton } from './IconButton.svelte'; 6 | -------------------------------------------------------------------------------- /src/lib/components/Checkbox/Checkbox.svelte: -------------------------------------------------------------------------------- 1 | 11 | 12 | 19 | 20 | 28 | 29 | 32 | -------------------------------------------------------------------------------- /src/lib/components/Checkbox/index.ts: -------------------------------------------------------------------------------- 1 | export * from './Checkbox.svelte'; 2 | export { default } from './Checkbox.svelte'; 3 | export { default as Checkbox } from './Checkbox.svelte'; 4 | -------------------------------------------------------------------------------- /src/lib/components/Chip/Chip.svelte: -------------------------------------------------------------------------------- 1 |
2 | {#if avatar} 3 | 4 | 5 | 6 | {/if} 7 | 8 | {#if closable} 9 |
16 | 17 | 26 | 27 | 38 | 39 | 94 | -------------------------------------------------------------------------------- /src/lib/components/Chip/index.ts: -------------------------------------------------------------------------------- 1 | export * from './Chip.svelte'; 2 | export { default } from './Chip.svelte'; 3 | export { default as Chip } from './Chip.svelte'; 4 | -------------------------------------------------------------------------------- /src/lib/components/Divider/Divider.svelte: -------------------------------------------------------------------------------- 1 |
11 | 12 | 18 | 19 | 25 | 26 | 51 | -------------------------------------------------------------------------------- /src/lib/components/Divider/index.ts: -------------------------------------------------------------------------------- 1 | export * from './Divider.svelte'; 2 | export { default } from './Divider.svelte'; 3 | export { default as Divider } from './Divider.svelte'; 4 | -------------------------------------------------------------------------------- /src/lib/components/Icon/index.ts: -------------------------------------------------------------------------------- 1 | export * from './Icon.svelte'; 2 | export { default } from './Icon.svelte'; 3 | export { default as Icon } from './Icon.svelte'; 4 | -------------------------------------------------------------------------------- /src/lib/components/Input/Group.svelte: -------------------------------------------------------------------------------- 1 |
2 | {#if $$slots.addon} 3 | 4 | {/if} 5 | {#if $$slots.default} 6 | 7 | {/if} 8 | {#if $$slots.button} 9 | 10 | {/if} 11 |
12 | 13 | 17 | 18 | 22 | 23 | 26 | -------------------------------------------------------------------------------- /src/lib/components/Input/Input.svelte: -------------------------------------------------------------------------------- 1 | {#if $$slots.default} 2 |
3 | 6 |
7 | {/if} 8 |
14 | {#if rows > 1} 15 |