├── .github
    └── workflows
    │   ├── build-docs.yml
    │   └── npm-publish.yml
├── .gitignore
├── .npmignore
├── CHANGELOG.md
├── LICENSE
├── README.md
├── cmp
    ├── Button.svelte
    ├── Card.svelte
    ├── Checkbox.svelte
    ├── Col.svelte
    ├── Container.svelte
    ├── Details.svelte
    ├── Field.svelte
    ├── Icon.svelte
    ├── Input.svelte
    ├── Modal.svelte
    ├── Nav.svelte
    ├── Radio.svelte
    ├── Row.svelte
    ├── Tab.svelte
    ├── Tabs.svelte
    ├── Tag.svelte
    ├── index.js
    └── utils.js
├── docs_src
    ├── .gitignore
    ├── package.json
    ├── src
    │   ├── examples.css
    │   ├── font.css
    │   ├── includes
    │   │   ├── Details.svelte
    │   │   ├── GithubLink.svelte
    │   │   ├── error.md
    │   │   ├── logo.md
    │   │   ├── sidebar.md
    │   │   └── topbar.md
    │   ├── pages
    │   │   ├── components
    │   │   │   ├── buttons.md
    │   │   │   ├── card.md
    │   │   │   ├── container.md
    │   │   │   ├── details.md
    │   │   │   ├── form.md
    │   │   │   ├── grid.md
    │   │   │   ├── icon.md
    │   │   │   ├── modal.md
    │   │   │   ├── nav.md
    │   │   │   ├── tabs.md
    │   │   │   └── tag.md
    │   │   ├── customization.md
    │   │   ├── elements.md
    │   │   ├── getting-started.md
    │   │   ├── index.md
    │   │   ├── install.md
    │   │   ├── usage.md
    │   │   ├── utilites.md
    │   │   └── why_chota.md
    │   ├── static
    │   │   ├── favicon.png
    │   │   ├── icons
    │   │   │   ├── javascript.svg
    │   │   │   ├── sprite.svg
    │   │   │   └── svelte.svg
    │   │   ├── overpass-400.woff2
    │   │   └── overpass-600.woff2
    │   └── theme.css
    └── svelte-docs.config.js
├── esbuild.js
└── package.json


/.github/workflows/build-docs.yml:
--------------------------------------------------------------------------------
 1 | name: Build Documentation
 2 | 
 3 | on:
 4 |   push:
 5 |     paths:
 6 |       - '.github/workflows/build-docs.yml'
 7 |       - 'docs_src/*'
 8 |       - 'docs_src/*/*'
 9 |       - 'docs_src/*/*/*'
10 |       - 'docs_src/*/*/*/*'
11 |       - 'cmp/*'
12 |       - 'cmp/*/*'
13 | 
14 | jobs:
15 |   docs-build-deploy:
16 |     runs-on: ubuntu-18.04
17 |     steps:
18 |     - uses: actions/checkout@master
19 | 
20 |     - name: Setup Node
21 |       uses: actions/setup-node@v1
22 |       with:
23 |         node-version: 12.x
24 | 
25 |     - name: Build
26 |       run: npm i && cd docs_src && npm i && npm run build
27 | 
28 |     - name: Deploy
29 |       uses: peaceiris/actions-gh-pages@v2.4.0
30 |       env:
31 |         ACTIONS_DEPLOY_KEY: ${{ secrets.DEPLOY_KEY }}
32 |         PUBLISH_BRANCH: gh-pages
33 |         PUBLISH_DIR: ./docs_src/__DOCS__/dist/svelte-chota
34 |         


--------------------------------------------------------------------------------
/.github/workflows/npm-publish.yml:
--------------------------------------------------------------------------------
 1 | name: Publish on NPM
 2 | 
 3 | on:
 4 |   push:
 5 |     paths:
 6 |       - '.github/workflows/npm-publish.yml'
 7 |       - 'package.json'
 8 | 
 9 | jobs:
10 |   publish-npm:
11 |     runs-on: ubuntu-18.04
12 |     steps:
13 |       - uses: actions/checkout@v1
14 |       - name: Setup Node
15 |         uses: actions/setup-node@v1
16 |         with:
17 |           node-version: 12
18 |           registry-url: https://registry.npmjs.org/
19 |       - name: Installing NPM deps
20 |         run: npm install
21 |       - name: Building & publishing on NPM
22 |         run: npm publish
23 |         env:
24 |           NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules
3 | yarn.lock
4 | package-lock.json
5 | dist


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | docs_src


--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
 1 | # Svelte-chota changelog
 2 | 
 3 | ## 1.6.1
 4 | 
 5 | * Enchanced dropdown button
 6 | 
 7 | ## 1.6.0
 8 | 
 9 | * Add Container component
10 | 
11 | ## 1.5.0
12 | 
13 | * Icons can be set from SVG sprites
14 | * remove property `path` from the Icons 
15 | 
16 | ## 1.4.0
17 | 
18 | * More powerful icon component
19 | 
20 | ## 1.3.0
21 | 
22 | * Now you can add any atribute on the component
23 | * Added submit property for button
24 | * Refactoring Input component
25 | 
26 | ## 1.2.0
27 | 
28 | * Add events forwarders for any `on:eventname` directive. It could be used with almost any component.
29 | 
30 | ## 1.1.6
31 | 
32 | * Fix icon size on buttons
33 | 
34 | ## 1.0.0
35 | 
36 | * First release


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2019 Alexey Schebelev
 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-chota
 2 | Svelte UI components based on the super light-weight [chota](https://jenil.github.io/chota/) CSS framework.
 3 | 
 4 | [![npm](https://img.shields.io/npm/v/svelte-chota)](https://www.npmjs.com/package/svelte-chota)   [![npm](https://img.shields.io/npm/dt/svelte-chota)](https://www.npmjs.com/package/svelte-chota)    [![](https://github.com/AlexxNB/svelte-chota/workflows/Publish%20on%20NPM/badge.svg)](https://github.com/AlexxNB/svelte-chota/actions?workflow=Publish+on+NPM)    [![](https://github.com/AlexxNB/svelte-chota/workflows/Build%20Documentation/badge.svg)](https://github.com/AlexxNB/svelte-chota/actions?workflow=Build+Documentation)
 5 | 
 6 | ## Why chota?
 7 | 
 8 | When you decide to use [Svelte](https://svelte.dev) in your projects, you expect very tiny bundles of code.
 9 | 
10 | [chota](https://jenil.github.io/chota/) is a super light-weight CSS framework, which adds only ~3kb of gzipped code to your CSS bundle.
11 | 
12 | [Svelte-chota](https://github.com/AlexxNB/svelte-chota) is a UI kit for easily using [chota](https://jenil.github.io/chota/) in your [Svelte](https://svelte.dev) projects.
13 | 
14 | ## Documentation
15 | * Svelte-chota [documentation](https://alexxnb.github.io/svelte-chota).
16 | * chota [documentation](https://jenil.github.io/chota/).
17 | 
18 | ## Installation
19 | 
20 | You should install two packages:
21 | 
22 | * `chota` - css framework itself
23 | * `svelte-chota` - Svelte components for chota
24 | 
25 | ```bash
26 | npm install -D chota svelte-chota
27 | ```
28 | 
29 | Then open the app root file (usually `App.svelte`) and add `chota` import at the top of a `<script>` block:
30 | 
31 | ```html
32 | <script>
33 |     import 'chota';
34 |     ...
35 | </script>
36 | ```
37 | 
38 | ## Usage
39 | 
40 | Just import the necessary components from the svelte-chota package in your components:
41 | 
42 | ```html
43 | <script>
44 |     import {Input,Button} from 'svelte-chota';
45 | </script>
46 | 
47 | <Input placeholder="What do you want?" /> <Button>Find</Button>
48 | ```
49 | 
50 | ### Events handlers
51 | 
52 | You can use any `on:eventname` directive with any components:
53 | 
54 | ```html
55 | <script>
56 |     import {Button} from 'svelte-chota';
57 |     let button_text = 'Hover me';
58 | </script>
59 | 
60 | <Button 
61 |     on:mouseenter={ e => button_text="Don't touch me!" }
62 |     on:mouseleave={ e => button_text="Ok, hover me again" }
63 | >{button_text}</Button>
64 | ```
65 | ### Attributes
66 | 
67 | Any attribute can be passed to the component, even the `class` attribute.
68 | 
69 | ```html
70 | <script>
71 |     import {Card} from 'svelte-chota';
72 | </script>
73 | 
74 | <Card class="is-rounded text-center" style="height:100px; width:100px" title="Hello">
75 |     <h1>Hey!</h1>
76 | </Card>
77 | ```
78 | 


--------------------------------------------------------------------------------
/cmp/Button.svelte:
--------------------------------------------------------------------------------
  1 | <script>
  2 |     import {getEventsAction} from './utils';
  3 |     import Card from './Card.svelte';
  4 |     import Icon from './Icon.svelte';
  5 | 
  6 |     export let outline = null;
  7 |     export let primary = null;
  8 |     export let secondary = null;
  9 |     export let dark = null;
 10 |     export let error = null;
 11 |     export let success = null;
 12 |     export let clear = null;
 13 |     export let loading = null;
 14 |     export let icon = null;
 15 |     export let iconRight = null;
 16 |     export let dropdown = false;
 17 |     export let open = false;
 18 |     export let autoclose = false;
 19 |     export let submit = false;
 20 | 
 21 | 
 22 |     const events = getEventsAction();
 23 | 
 24 |     const hasSlot = $$props.$$slots && $$props.$$slots !== undefined;
 25 | 
 26 |     function dropdownAction(node,param) {
 27 | 
 28 |       let autoclose = param;
 29 |       let button = node.getElementsByTagName('summary')[0];
 30 | 
 31 |       const clickOutside = () => {
 32 |         if(!!node.open) node.open=false;
 33 |       }
 34 | 
 35 |       const clickButton = (e) => {
 36 |         e.stopPropagation();
 37 |       }
 38 | 
 39 |       const clickInDD = (e) => {
 40 |         e.stopPropagation();
 41 |         if(autoclose) node.open=false;
 42 |       }
 43 | 
 44 |       node.addEventListener('click',clickInDD);
 45 |       button.addEventListener('click',clickButton);
 46 |       window.addEventListener('click',clickOutside);
 47 | 
 48 | 
 49 |       return {
 50 |         update: param => autoclose = param,
 51 |         destroy: () => {
 52 |           window.removeEventListener('click',clickOutside);
 53 |           node.removeEventListener('click',clickInDD);
 54 |           button.removeEventListener('click',clickButton);
 55 |         }
 56 |       }
 57 |     }
 58 | 
 59 |     $: clIcon = ( (icon !== null || iconRight !== null) && hasSlot);
 60 |     $: clIcononly = (dropdown) ? (icon !== null && dropdown===true) : (icon !== null && !hasSlot);
 61 | </script>
 62 | 
 63 | 
 64 | {#if dropdown === false}
 65 | <button  
 66 |     class:button={1}
 67 |     class:outline
 68 |     class:primary
 69 |     class:secondary
 70 |     class:dark
 71 |     class:error
 72 |     class:success
 73 |     class:clear
 74 |     class:loading
 75 |     class:icon={clIcon}
 76 |     class:icon-only={clIcononly}
 77 | 
 78 |     {...$$restProps}
 79 |     use:events
 80 | 
 81 |     type={submit ? 'submit' : 'button'}
 82 | >
 83 | {#if icon} <span class="lefticon"> <Icon src={icon} size="24px"/> </span>{/if}
 84 | <slot></slot>
 85 | {#if iconRight} <span class="righticon"> <Icon src={iconRight} size="24px"/> </span>{/if}
 86 | </button>
 87 | {:else}
 88 |   <details class="dropdown" bind:open use:dropdownAction={autoclose}>
 89 |     <summary
 90 |         class:button={1}
 91 |         class:outline
 92 |         class:primary
 93 |         class:secondary
 94 |         class:dark
 95 |         class:error
 96 |         class:success
 97 |         class:clear
 98 |         class:loading
 99 |         
100 |         class:icon={clIcon}
101 |         class:icon-only={clIcononly}
102 | 
103 |         {...$$restProps}
104 |         use:events
105 |     >
106 |     {#if icon} <span class="lefticon"> <Icon src={icon} size="24px"/> </span>{/if}
107 |       {(dropdown !== true) ? dropdown : ''}
108 |     {#if iconRight} <span class="righticon"> <Icon src={iconRight} size="24px"/> </span>{/if}
109 |     </summary>
110 |     <Card style="z-index:1"><slot></slot></Card>
111 |   </details>
112 | {/if}
113 | 
114 | 
115 | <style>
116 | @keyframes loading {
117 |     0% {
118 |       transform: rotate(0deg);
119 |     }
120 |     100% {
121 |       transform: rotate(360deg);
122 |     }
123 | }
124 | 
125 | .loading {
126 |     color: transparent !important;
127 |     min-height: .8rem;
128 |     pointer-events: none;
129 |     position: relative;
130 | }
131 | 
132 | .loading::after {
133 |     animation: loading 500ms infinite linear;
134 |     border: .2rem solid #FFFFFF;
135 |     border-radius: 50%;
136 |     border-right-color: transparent;
137 |     border-top-color: transparent;
138 |     content: "";
139 |     display: block;
140 |     height: .8rem;
141 |     left: 50%;
142 |     margin-left: -.4rem;
143 |     margin-top: -.4rem;
144 |     position: absolute;
145 |     top: 50%;
146 |     width: .8rem;
147 |     z-index: 1;
148 | }
149 | 
150 | 
151 | .icon > .lefticon{
152 |   margin: -10px 10px -10px 0px;
153 | }
154 | 
155 | .icon > .righticon{
156 |   margin: -10px 0px -10px 10px;
157 | }
158 | 
159 | 
160 | .icon-only{
161 |   padding:.5rem .65rem;
162 | }
163 | 
164 | summary, button{
165 |   white-space: nowrap;
166 | }
167 | 
168 | summary::-webkit-details-marker {
169 |   display:none;
170 | }
171 | </style>
172 | 


--------------------------------------------------------------------------------
/cmp/Card.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 	import {getEventsAction} from './utils';
 3 | 
 4 | 	const events = getEventsAction();
 5 | </script>
 6 | 
 7 | <div class:card={1} use:events {...$$restProps}>
 8 | {#if $$slots.header}
 9 | 	<header>
10 |     	<slot name="header"></slot>
11 |   	</header>
12 | {/if}
13 | 	<slot></slot>
14 | {#if $$slots.footer}
15 | 	<footer>
16 |     	<slot name="footer"></slot>
17 |   	</footer>
18 | {/if}
19 | </div>
20 | 


--------------------------------------------------------------------------------
/cmp/Checkbox.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 	import {isArray,getEventsAction} from './utils';
 3 | 
 4 | 	export let value = '';
 5 | 	export let group = [];
 6 | 	export let checked = false;
 7 | 
 8 | 	const events = getEventsAction();
 9 | 
10 | 	let labeled = $$props.hasOwnProperty('$$slots');
11 | 
12 | 	function handleChange(on) {
13 | 		if(!isArray(group)) group = [];
14 | 		const idx = group.indexOf(value);
15 | 		if (on && idx === -1) {
16 | 			group.push(value);
17 | 			group = group;
18 | 		} else if (!on && idx !== -1) {
19 | 			group.splice(idx, 1);
20 | 			group = group;
21 | 		}
22 | 	}
23 | 
24 | 	$: if(isArray(group)) {
25 | 		checked = (group.indexOf(value) !== -1);
26 | 	} else checked = false;
27 | 		
28 | 	if(checked) handleChange(checked);
29 | 	
30 | 	
31 | </script>
32 | 
33 | {#if labeled}
34 | <label>
35 |     <input type="checkbox" 
36 | 		on:change={e=>handleChange(e.srcElement.checked)}
37 | 		use:events
38 | 		{...$$restProps}
39 | 		{checked}
40 | 	/> 
41 |     <slot />
42 | </label>
43 | {:else}
44 | <input type="checkbox" 
45 | 	on:change={e=>handleChange(e.srcElement.checked)}
46 |     use:events 
47 | 	{...$$restProps}
48 | 	{checked}
49 | /> 
50 | {/if}
51 | 
52 | 


--------------------------------------------------------------------------------
/cmp/Col.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |     import {getEventsAction} from './utils';
 3 | 
 4 |     export let size=false;
 5 |     export let sizeMD=false;
 6 |     export let sizeLG=false;
 7 | 
 8 |     const events = getEventsAction();
 9 | 
10 |     function get_col_classes(d,md,lg) {
11 |         let list = [];
12 |         if(!size || (size < 1 || size > 12)) 
13 |             list.push('col');
14 |         else if (size >=1 && size <= 12)
15 |             list.push(`col-${size}`);
16 | 
17 |         if(sizeMD)
18 |         if (sizeMD >=1 && sizeMD <= 12)
19 |             list.push(`col-${sizeMD}-md`);
20 | 
21 |         if(sizeLG)
22 |         if (sizeLG >=1 && sizeLG <= 12)
23 |             list.push(`col-${sizeLG}-lg`);
24 |         
25 |         return list.join(' ');
26 |     }
27 | 
28 |     $: classes = $$restProps.hasOwnProperty('class') ? $$restProps['class']+' '+get_col_classes(size,sizeMD,sizeLG) : get_col_classes(size,sizeMD,sizeLG);
29 | </script>
30 | 
31 | <div {...$$restProps} class={classes} use:events>
32 |     <slot></slot>
33 | </div>


--------------------------------------------------------------------------------
/cmp/Container.svelte:
--------------------------------------------------------------------------------
1 | <script>
2 | 	import {getEventsAction} from './utils';
3 | 
4 | 	const events = getEventsAction();
5 | </script>
6 | 
7 | <div class:container={1} use:events {...$$restProps}><slot></slot></div>


--------------------------------------------------------------------------------
/cmp/Details.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 	import {getEventsAction} from './utils';
 3 | 
 4 | 	export let dropdown = false;
 5 | 	export let open = false;
 6 | 
 7 | 	const events = getEventsAction();
 8 | </script>
 9 | 
10 | <details class:dropdown use:events {...$$restProps} bind:open>
11 | 	<summary><slot name="summary"></slot></summary>
12 | 	<slot></slot>
13 | </details>
14 | 
15 | <style>
16 | summary{
17 | 	cursor: pointer;
18 | }
19 | </style>


--------------------------------------------------------------------------------
/cmp/Field.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 	import { setContext } from 'svelte';
 3 | 	import { writable } from 'svelte/store';
 4 | 	import { getEventsAction } from './utils';
 5 | 	
 6 | 	export let label = false;
 7 | 	export let error = false;
 8 | 	export let success = false;
 9 | 	export let grouped = false;
10 | 	export let gapless = false;
11 | 
12 | 	const events = getEventsAction();
13 | 
14 | 	const state = writable('');
15 | 	let message = false;
16 | 
17 | 	setContext('field:state',state);
18 | 	
19 | 	$: if(gapless) grouped = true;
20 | 
21 | 	$: 	if(typeof error === 'string'){
22 | 			state.set('error');
23 | 			message = error;
24 | 		}
25 | 		else if(typeof success === 'string'){
26 | 			state.set('success');
27 | 			message = success;
28 | 		}
29 | 		else {
30 | 			state.set('');
31 | 			message = false;
32 | 		}
33 | </script>
34 | 
35 | <div class:nomessage={!message} use:events {...$$restProps}>
36 | 	{#if label}
37 | 		<!-- svelte-ignore a11y-label-has-associated-control -->
38 | 		<label>{label}</label>
39 | 	{/if}
40 | 	<p class:grouped class:gapless><slot/></p>
41 | 	{#if message}
42 | 		<p class="message" class:text-error={error} class:text-success={success}>{message}</p>
43 | 	{:else}
44 | 		<p class="message">&nbsp;</p>
45 | 	{/if}
46 | </div>
47 | 
48 | <style>
49 | p{
50 | 	margin:0px;
51 | 	padding:0px;
52 | }
53 | 
54 | .message{
55 | 	font-size: smaller;
56 | }
57 | 
58 | .grouped:not(.gapless){
59 | 	overflow-x: auto;
60 | }
61 | </style>
62 | 


--------------------------------------------------------------------------------
/cmp/Icon.svelte:
--------------------------------------------------------------------------------
  1 | <script>
  2 | 	import {getEventsAction} from './utils';
  3 | 
  4 | 	const events = getEventsAction();
  5 | 
  6 | 	export let src = null;
  7 | 	export let size = 1;
  8 | 	export let color = null;
  9 | 	export let flipH = null;
 10 | 	export let flipV = null;
 11 | 	export let rotate = 0;
 12 | 	export let spin = false;
 13 | 
 14 | 	let path = false;
 15 | 	let use = false;
 16 | 	let url = false;
 17 | 
 18 | 	//Icon source
 19 | 	$: if(!!src && src.toLowerCase().trim().endsWith('.svg')) {
 20 | 		url = src;
 21 | 		path = use = false;
 22 | 	} else if(!!src && src.toLowerCase().trim().includes('.svg#')) {
 23 | 		use = src;
 24 | 		url = path = false;
 25 | 	} else if(!!src) {
 26 | 		path = src;
 27 | 		url = use = false;
 28 | 	}
 29 | 
 30 | 	// SPIN properties
 31 | 	$: inverse = (typeof spin !== "boolean" && spin < 0) ? true : false;
 32 | 	$: spintime = Math.abs(spin === true ? 2 : spin);
 33 | 	$: spinCW = (!!spin && !inverse);
 34 | 	$: spinCCW = (!!spin && inverse);
 35 | 
 36 | 	// size
 37 | 	if(Number(size)) size = Number(size);
 38 | 	
 39 | 	// styles
 40 | 	const getStyles = () => {
 41 | 		const transform = [];
 42 | 		const styles = [];
 43 | 		if (size !== null) {
 44 | 			const width = (typeof size === "string") ? size : `${size * 1.5}rem`;
 45 | 			styles.push(['width',width]);
 46 | 			styles.push(['height',width]);
 47 | 		}
 48 | 		styles.push( ['fill', (color !== null) ? color: 'currentColor'] );
 49 | 		if (flipH) {
 50 | 			transform.push("scaleX(-1)");
 51 | 		}
 52 | 		if (flipV) {
 53 | 			transform.push("scaleY(-1)");
 54 | 		}
 55 | 		if (rotate != 0) {
 56 | 			transform.push(`rotate(${rotate}deg)`);
 57 | 	
 58 | 		}
 59 | 		if(transform.length > 0) {
 60 | 			styles.push( ['transform', transform.join(' ')] );
 61 | 			styles.push( ['transform-origin', 'center'] );
 62 | 		}
 63 | 		return styles.reduce((cur,item)=>{
 64 | 			return `${cur} ${item[0]}:${item[1]};`;
 65 | 		},'');
 66 | 	}
 67 | 	$: style = getStyles(size,color,flipH,flipV,rotate);
 68 | 	$: aniStyle = (!!spin) ? `animation-duration: ${spintime}s` : undefined;
 69 | </script>
 70 | 
 71 | {#if url}
 72 | 	<span {style} use:events {...$$restProps}>
 73 | 		<img src="{url}" alt="" width="100%" height="100%" class:spinCW class:spinCCW style={aniStyle} />
 74 | 	</span>
 75 | {:else if use}
 76 | 	<svg viewBox="0 0 24 24" {style} use:events {...$$restProps}>
 77 | 		<use xlink:href={use} class:spinCW class:spinCCW style={aniStyle}></use>
 78 | 	</svg>
 79 | {:else}
 80 | 	<svg viewBox="0 0 24 24" {style} use:events {...$$restProps}>
 81 | 	{#if spin !== false}
 82 | 		<g class:spinCW class:spinCCW style={aniStyle}>
 83 | 			<path d={path}></path>
 84 | 		</g>
 85 | 	{:else}
 86 | 		<path d={path}></path>
 87 | 	{/if} 
 88 | 	</svg>
 89 | {/if}
 90 | 
 91 | 
 92 | <style>
 93 | 	@keyframes spin { to { transform: rotate(360deg) } }
 94 | 	@keyframes spin-inverse { to { transform: rotate(-360deg) } }
 95 | 
 96 | 	svg{
 97 | 		vertical-align: middle;
 98 | 	}
 99 | 
100 | 	span{
101 | 		display: inline-block;
102 | 		line-height:1;
103 | 	}
104 | 
105 | 	span img{
106 | 		padding:0px;
107 | 		margin:0px;
108 | 		vertical-align: middle;
109 | 	}
110 | 
111 | 	.spinCW{
112 | 		animation: spin linear 2s infinite;
113 | 		transform-origin: center;
114 | 	}
115 | 
116 | 	.spinCCW{
117 | 		animation: spin-inverse linear 2s infinite;
118 | 		transform-origin: center;
119 | 	}
120 | </style>


--------------------------------------------------------------------------------
/cmp/Input.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |     import {getEventsAction} from './utils';
 3 | 	import {getContext} from 'svelte';
 4 | 	
 5 |     export let value = '';
 6 |     export let type = 'text';
 7 |     export let error = null;
 8 |     export let success = null;
 9 | 	
10 |     export let password = false;
11 |     export let number = false;
12 |     export let textarea = false;
13 |     export let color = false;
14 | 	export let date = false;
15 | 	export let range = false;
16 | 
17 | 	
18 | 	const events = getEventsAction();
19 | 
20 | 	const onInput = e => {
21 | 		const type = e.target.type;
22 | 		const val = e.target.value;
23 | 
24 | 		if(type === 'number' || type === 'range')
25 | 			value = val === '' ? undefined : +val;
26 | 		else
27 | 			value = val;
28 | 	}
29 | 
30 | 	let getState = getContext('field:state');
31 | 	let state_unsubscribe = false;
32 | 	if(getState) {
33 | 		state_unsubscribe = getState.subscribe(state => {
34 | 			if(state === 'error') 
35 | 				error = true;
36 | 			else if(state === 'success') 
37 | 				success = true;
38 | 			else
39 | 				success = error = false;
40 | 		});
41 | 	}	
42 | 
43 | 	
44 | 	$: if(password) type = 'password';
45 | 	$: if(number) type = 'number';
46 | 	$: if(textarea) type = 'textarea';
47 | 	$: if(color) type = 'color';
48 | 	$: if(date) type = 'date';
49 | 	$: if(range) type = 'range';
50 | </script>
51 | 
52 | {#if type === 'textarea'}
53 | 	<textarea
54 | 		class:error 
55 | 		class:success 
56 | 		use:events
57 | 		{...$$restProps}
58 | 		on:input={onInput}
59 | 	>{value}</textarea>
60 | {:else}
61 | 	<input type={type} 
62 | 		class:error 
63 | 		class:success 
64 | 		use:events
65 | 		{...$$restProps}
66 | 		on:input={onInput}
67 | 		{value}
68 | 	/>
69 | {/if}
70 | 
71 | <style>
72 | input[type=range]::-moz-range-track,input[type=range]::-webkit-slider-runnable-track {
73 |   background-color: var(--color-primary);
74 | }
75 | </style>


--------------------------------------------------------------------------------
/cmp/Modal.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |     import {getEventsAction} from './utils';
 3 |     import {fade} from 'svelte/transition';
 4 |     
 5 |     export let open = false;
 6 | 
 7 |     const events = getEventsAction();
 8 | 
 9 | </script>
10 | 
11 | 
12 | {#if open}
13 | <div class="container" transition:fade={{ duration: 200 }}>
14 |     <div class="background" on:click={e => open=false}/>
15 |     <div class:modal={1} use:events {...$$restProps}><slot></slot></div>
16 | </div>
17 | {/if}
18 | 
19 | <style>
20 | .container{
21 |     position:fixed;
22 |     top:0px;
23 |     left:0px;
24 |     width:100vw;
25 |     height:100vh;
26 |     z-index:10000;
27 | }
28 | 
29 | .background{
30 |     position:fixed;
31 |     top:0px;
32 |     left: 0px;
33 |     width:100vw;
34 |     height:100vh;
35 |     background-color:black;
36 |     opacity: 0.5;
37 | }
38 | 
39 | .modal{
40 |     position: fixed;
41 |     top: 50%;
42 |     left: 50%;
43 |     transform: translate(-50%, -50%);
44 |     min-width:400px;
45 |     background-color: white;
46 | }
47 | </style>
48 | 


--------------------------------------------------------------------------------
/cmp/Nav.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 	import {getEventsAction} from './utils';
 3 | 
 4 | 	const events = getEventsAction();
 5 | </script>
 6 | 
 7 | <nav class:nav={1} use:events {...$$restProps}>
 8 | {#if $$slots.left}
 9 | 	<div class="nav-left">
10 | 		<slot name="left"></slot>
11 | 	</div>
12 | {/if}
13 | {#if $$slots.center}
14 | 	<div class="nav-center">
15 | 		<slot name="center"></slot>
16 | 	</div>
17 | {/if}
18 | {#if $$slots.right}
19 | 	<div class="nav-right">
20 | 		<slot name="right"></slot>
21 | 	</div>
22 | {/if}
23 | </nav>
24 | 
25 | <style>
26 | 	nav{
27 | 		width:100%;
28 | 		flex-direction: row;
29 | 	}
30 | 
31 | 	:global(.nav-left) {
32 | 		justify-content: flex-start
33 | 	}
34 | 	:global(.nav-right) {
35 | 		justify-content: flex-end
36 | 	}
37 | </style>
38 | 


--------------------------------------------------------------------------------
/cmp/Radio.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 	import {getEventsAction} from './utils';
 3 | 
 4 | 	export let value = '';
 5 | 	export let group = '';
 6 | 
 7 | 	const events = getEventsAction();
 8 | 
 9 | 	let checked = false;
10 | 	let labeled = $$props.hasOwnProperty('$$slots');
11 | 
12 | 	function handleChange() {
13 | 		group = value;
14 | 	}
15 | 	
16 | 	$: checked = (group === value); 
17 | </script>
18 | 
19 | {#if labeled}
20 | <label>
21 |     <input type="radio"
22 | 		on:change={handleChange}
23 | 		use:events	
24 | 		{...$$restProps}
25 | 		{checked}
26 | 	/> 
27 |     <slot />
28 | </label>
29 | {:else}
30 | <input type="radio"
31 | 	on:change={handleChange}
32 | 	use:events 
33 | 	{...$$restProps}
34 | 	{checked}
35 | /> 
36 | {/if}
37 | 
38 | 


--------------------------------------------------------------------------------
/cmp/Row.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |     import {getEventsAction} from './utils';
 3 | 
 4 |     export let reverse = false;
 5 | 
 6 |     const events = getEventsAction();
 7 | </script>
 8 | 
 9 | <div class:row={1} class:reverse use:events {...$$restProps}>
10 |     <slot></slot>
11 | </div>


--------------------------------------------------------------------------------
/cmp/Tab.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   import { getEventsAction } from './utils';
 3 |   import { getContext } from 'svelte';
 4 |   
 5 |   export let tabid = false;
 6 | 
 7 |   const events = getEventsAction();
 8 | 
 9 |   const active_tab = getContext('tabs:active');
10 |   const id = getContext('tabs:getid')();
11 | 
12 |   $: active = ($active_tab === tabid || $active_tab === id);
13 | </script>
14 | 
15 | <span class:active use:events {...$$restProps} on:click|preventDefault={()=>active_tab.set( (tabid === false) ? id : tabid)}>
16 |   <slot></slot>
17 | </span>
18 | 
19 | <style>
20 |   span {
21 |       padding: 1rem 2rem;
22 |       flex: 0 1 auto;
23 |       color: var(--color-darkGrey);
24 |       border-bottom: 2px solid var(--color-lightGrey);
25 |       text-align: center;
26 |       cursor: pointer;
27 |   }
28 | 
29 |   span.active {
30 |       opacity: 1;
31 |       border-bottom: 2px solid var(--color-darkGrey);
32 |       border-color: var(--color-primary);
33 |   }
34 | 
35 | 
36 |   :global(.tabs.is-full) span {
37 |       flex: 1 1 auto;
38 |   }
39 | </style>


--------------------------------------------------------------------------------
/cmp/Tabs.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |     import {getEventsAction} from './utils';
 3 |     import { setContext } from 'svelte';
 4 |     import { writable } from 'svelte/store';
 5 | 
 6 |     export let active = 0;
 7 |     export let full = false;
 8 | 
 9 |     const events = getEventsAction();
10 | 
11 |     const active_tab = writable(active);
12 |     let num = 0;
13 | 
14 |     setContext('tabs:getid',()=>num++);
15 |     setContext('tabs:active',active_tab);
16 | 
17 |     $: active = $active_tab;
18 | </script>
19 | 
20 | <nav class:tabs={1} class:is-full={full} use:events {...$$restProps}>
21 |   <slot></slot>
22 | </nav>


--------------------------------------------------------------------------------
/cmp/Tag.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 	import {getEventsAction} from './utils';
 3 | 
 4 | 	export let small = false;
 5 | 	export let large = false;
 6 | 
 7 | 	const events = getEventsAction();
 8 | </script>
 9 | 
10 | <span class:tag={1} class:is-small={small} class:is-large={large} use:events {...$$restProps}><slot></slot></span>


--------------------------------------------------------------------------------
/cmp/index.js:
--------------------------------------------------------------------------------
 1 | import Container from './Container.svelte';
 2 | import Nav from './Nav.svelte';
 3 | import Row from './Row.svelte';
 4 | import Col from './Col.svelte';
 5 | import Button from './Button.svelte';
 6 | import Tabs from './Tabs.svelte';
 7 | import Tab from './Tab.svelte';
 8 | import Card from './Card.svelte';
 9 | import Tag from './Tag.svelte';
10 | import Details from './Details.svelte';
11 | import Input from './Input.svelte';
12 | import Field from './Field.svelte';
13 | import Radio from './Radio.svelte';
14 | import Checkbox from './Checkbox.svelte';
15 | import Modal from './Modal.svelte';
16 | import Icon from './Icon.svelte';
17 | 
18 | export {
19 |     Container,
20 |     Nav,
21 |     Row, Col,
22 |     Button,
23 |     Tabs, Tab,
24 |     Card,
25 |     Tag,
26 |     Details,
27 |     Input,
28 |     Field,
29 |     Radio,
30 |     Checkbox,
31 |     Modal,
32 |     Icon,
33 | }


--------------------------------------------------------------------------------
/cmp/utils.js:
--------------------------------------------------------------------------------
 1 | export function isArray(obj) {
 2 |     return Object.prototype.toString.call(obj) === '[object Array]'
 3 | }
 4 | 
 5 | 
 6 | import {bubble, listen,get_current_component} from 'svelte/internal';
 7 | export function getEventsAction() {
 8 |     const component = get_current_component();
 9 |     return node => {
10 |       const events = Object.keys(component.$$.callbacks);
11 |       const listeners = [];
12 | 
13 |       events.forEach(
14 |           event => listeners.push(
15 |               listen(node, event, e =>  bubble(component, e))
16 |             )
17 |         );
18 |   
19 |       return {
20 |         destroy: () => {
21 |             listeners.forEach(
22 |                 listener => listener()
23 |             );
24 |         }
25 |       }
26 |     };
27 | }


--------------------------------------------------------------------------------
/docs_src/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | __DOCS__


--------------------------------------------------------------------------------
/docs_src/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "private": true,
 3 |   "name": "svelte-docs-template",
 4 |   "version": "0.3.1",
 5 |   "dependencies": {
 6 |     "@svelte-docs/server": "^0.1.6"
 7 |   },
 8 |   "devDependencies": {
 9 |     "@mdi/js": "^4.9.95",
10 |     "@svelte-docs/core": "^0.10.13",
11 |     "@svelte-docs/publisher": "^0.2.3",
12 |     "@svelte-docs/themes": "^1.0.1",
13 |     "chota": "^0.7.1",
14 |     "npm-run-all": "^4.1.5",
15 |     "rollup": "^2.35.1"
16 |   },
17 |   "scripts": {
18 |     "build": "rollup -c node_modules/@svelte-docs/core/rollup.config.js",
19 |     "autobuild": "rollup -c node_modules/@svelte-docs/core/rollup.config.js -w",
20 |     "dev": "run-p start:dev start:pagewatch autobuild",
21 |     "start": "node node_modules/@svelte-docs/server",
22 |     "start:dev": "node node_modules/@svelte-docs/server --dev --single",
23 |     "start:pagewatch": "node node_modules/@svelte-docs/core/watcher",
24 |     "deploy": "npm run build && node node_modules/@svelte-docs/publisher"
25 |   }
26 | }
27 | 


--------------------------------------------------------------------------------
/docs_src/src/examples.css:
--------------------------------------------------------------------------------
 1 | /* Styling of the examples view */
 2 | 
 3 | @import 'chota/dist/chota.css';
 4 | body{
 5 |     padding: 1rem;
 6 | }
 7 | 
 8 | .col,
 9 | [class*=" col-"],
10 | [class^='col-'] {
11 |     background-color: #40b3ff;
12 |     text-align: center;
13 | }
14 | 


--------------------------------------------------------------------------------
/docs_src/src/font.css:
--------------------------------------------------------------------------------
 1 | @font-face {
 2 | 	font-family: 'Overpass';
 3 | 	font-style: normal;
 4 | 	font-weight: 400;
 5 | 	src:
 6 | 		url('static/overpass-400.woff2') format('woff2');
 7 | }
 8 | 
 9 | @font-face {
10 | 	font-family: 'Overpass';
11 | 	font-style: normal;
12 | 	font-weight: 500;
13 | 	src:
14 | 		url('static/overpass-600.woff2') format('woff2');
15 | }


--------------------------------------------------------------------------------
/docs_src/src/includes/Details.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 	import {Details} from 'svelte-chota';
 3 | 	export let title = '';
 4 | 	export let comment = '';
 5 | 	export let open = false;
 6 | </script>
 7 | 
 8 | <Details {open}>
 9 | 	<h3 slot="summary" class="summary">{title}</h3>
10 | 	<p slot="summary" class="comment">{comment}</p>
11 |     <slot />
12 | </Details>
13 | 
14 | <style>
15 | .summary{
16 |     display:inline-block;
17 |     margin:0px;
18 |     padding:0px;
19 | }
20 | .comment{
21 |     margin:-.5rem 0 1rem 1rem;
22 |     padding:0px;
23 |     color:var(--secondary)
24 | }
25 | </style>


--------------------------------------------------------------------------------
/docs_src/src/includes/GithubLink.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |     import { cubicInOut } from 'svelte/easing';
 3 |     import { tweened } from 'svelte/motion';
 4 | 
 5 |     /** @type {string} URL to repository */
 6 |     export let url;
 7 | 
 8 |     /** @type {bool} Should animation play on hover */
 9 |     export let animation = true;
10 | 
11 |     let hover = false;
12 |     
13 |     function mEnter () {
14 |         if(!animation) return;
15 |         hover=true
16 |     }
17 |     function mLeave () {
18 |         hover=false
19 |     }
20 |     const rotation = tweened(0, {
21 | 		duration: 500,
22 | 		easing: cubicInOut
23 |     });
24 |     
25 |     function slideLeft(node) {
26 |         return {
27 |             delay:0,
28 |             duration:500,
29 |             css: t => `width: ${cubicInOut(t) * 50}px; opacity: ${t}`
30 |         };
31 |     }
32 |     $: $rotation = (hover) ? 100 : 0;
33 | </script>
34 | 
35 | <a class="github" href={url} target="_blank" 
36 |     on:mouseenter={mEnter} on:mouseleave={mLeave}><svg viewBox="0 0 24 24" style="transform: rotate(-{$rotation}deg)">
37 |         <path d="M12,2A10,10 0 0,0 2,12C2,16.42 4.87,20.17 8.84,21.5C9.34,21.58 9.5,21.27 9.5,21C9.5,20.77 9.5,20.14 9.5,19.31C6.73,19.91 6.14,17.97 6.14,17.97C5.68,16.81 5.03,16.5 5.03,16.5C4.12,15.88 5.1,15.9 5.1,15.9C6.1,15.97 6.63,16.93 6.63,16.93C7.5,18.45 8.97,18 9.54,17.76C9.63,17.11 9.89,16.67 10.17,16.42C7.95,16.17 5.62,15.31 5.62,11.5C5.62,10.39 6,9.5 6.65,8.79C6.55,8.54 6.2,7.5 6.75,6.15C6.75,6.15 7.59,5.88 9.5,7.17C10.29,6.95 11.15,6.84 12,6.84C12.85,6.84 13.71,6.95 14.5,7.17C16.41,5.88 17.25,6.15 17.25,6.15C17.8,7.5 17.45,8.54 17.35,8.79C18,9.5 18.38,10.39 18.38,11.5C18.38,15.32 16.04,16.16 13.81,16.41C14.17,16.72 14.5,17.33 14.5,18.26C14.5,19.6 14.5,20.68 14.5,21C14.5,21.27 14.66,21.59 15.17,21.5C19.14,20.16 22,16.42 22,12A10,10 0 0,0 12,2Z"></path>
38 |     </svg>{#if hover}<span class="label" transition:slideLeft>Github</span>{/if}</a>
39 | 
40 | <style>
41 | .github {
42 |     color:var(--primary);
43 |     margin:1rem;
44 | }
45 | 
46 | .github:hover{
47 |     text-decoration: none;
48 | }
49 | 
50 | .label{
51 |     display: inline-block;
52 |     font-size: 1.2rem;
53 |     line-height: 32px;
54 |     width: 50px;
55 | }
56 | svg{
57 |     display: inline-block;
58 |     vertical-align: middle;
59 |     width:32px; 
60 |     height:32px; 
61 |     fill:currentColor;
62 | }
63 | </style>


--------------------------------------------------------------------------------
/docs_src/src/includes/error.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | layout: 'no_sidebar'
 3 | ---
 4 | # Page not found! #
 5 | 
 6 | [Go to start page](/)
 7 | 
 8 | <style>
 9 |     h1,p {text-align:center}
10 |     h1 {color: var(--primary)}
11 | </style>


--------------------------------------------------------------------------------
/docs_src/src/includes/logo.md:
--------------------------------------------------------------------------------
1 | # [<span>Svelte</span>Chota](/) #
2 | 
3 | <style>
4 |     h1{font-weight: 400}
5 |     span{color:var(--secondary);font-weight: 400}
6 | </style>


--------------------------------------------------------------------------------
/docs_src/src/includes/sidebar.md:
--------------------------------------------------------------------------------
 1 | * Getting Started
 2 |     - [Why chota?](why_chota)
 3 |     - [Installation](install)
 4 |     - [Usage](usage)
 5 | * chota
 6 |     - [Customization](customization)
 7 |     - [Utilites](utilites)
 8 |     - [Elements](elements)
 9 | * Components
10 |     - [Container](components/container)
11 |     - [Grid](components/grid)
12 |     - [Buttons](components/buttons)
13 |     - [Form](components/form)
14 |     - [Nav](components/nav)
15 |     - [Tabs](components/tabs)
16 |     - [Card](components/card)
17 |     - [Tag](components/tag)
18 |     - [Details](components/details)
19 |     - [Modal](components/modal)
20 |     - [Icon](components/icon)
21 | 


--------------------------------------------------------------------------------
/docs_src/src/includes/topbar.md:
--------------------------------------------------------------------------------
1 | import GithubLink from '@INCLUDES/GithubLink.svelte';
2 | 
3 | <GithubLink url="https://github.com/AlexxNB/svelte-chota" />
4 | 


--------------------------------------------------------------------------------
/docs_src/src/pages/components/buttons.md:
--------------------------------------------------------------------------------
  1 | # Buttons
  2 | 
  3 | ### Default buttons
  4 | 
  5 | ```example script:hide
  6 | <script>
  7 |  import {Button} from 'svelte-chota';
  8 |  document.body.style
  9 | </script>
 10 | <Button>Default</Button>
 11 | <Button primary>Primary</Button>
 12 | <Button secondary>Secondary</Button>
 13 | <Button dark>Dark</Button>
 14 | <hr/>
 15 | <Button error>Error</Button>
 16 | <Button success>Success</Button>
 17 | ```
 18 | 
 19 | ### Outline buttons
 20 | 
 21 | ```example script:hide
 22 | <script>
 23 |  import {Button} from 'svelte-chota';
 24 | </script>
 25 | <Button outline>Default</Button>
 26 | <Button primary outline>Primary</Button>
 27 | <Button secondary outline>Secondary</Button>
 28 | <Button dark outline>Dark</Button>
 29 | <Button clear>Clear</Button>
 30 | ```
 31 | 
 32 | ### Submit button 
 33 | 
 34 | ```example script:hide
 35 | <script>
 36 |  import {Button} from 'svelte-chota';
 37 | </script>
 38 | <form>
 39 |     <Button submit>Send form</Button>
 40 | </form>
 41 | ```
 42 | 
 43 | 
 44 | ### Icon buttons
 45 | 
 46 | The properties `icon` and `iconRight` accept any [valid source](components/icon) for an icon. For example, you may use the [@mdi/js](https://www.npmjs.com/package/@mdi/js) package.
 47 | 
 48 | ```example
 49 | <script>
 50 |  import {Button} from 'svelte-chota';
 51 |  import { mdiDelete,mdiAccountPlus,mdiSend } from '@mdi/js';
 52 | </script>
 53 | 
 54 | <Button primary icon={mdiAccountPlus}>Add User</Button>
 55 | <Button outline primary iconRight={mdiSend}>Submit</Button>
 56 | <Button error icon={mdiDelete} />
 57 | <Button secondary class="is-rounded" icon="static/icons/svelte.svg" />
 58 | ```
 59 | 
 60 | ### States
 61 | 
 62 | ```example script:hide
 63 | <script>
 64 |  import {Button} from 'svelte-chota';
 65 | </script>
 66 | <Button loading>Loading</Button>
 67 | <Button loading error>Loading</Button>
 68 | <Button disabled>Disabled</Button>
 69 | <Button primary disabled>Disabled</Button>
 70 | ```
 71 | 
 72 | 
 73 | ### Dropdown button
 74 | 
 75 | ```example script:hide height:130
 76 | <script>
 77 |  import {Button,Input} from 'svelte-chota';
 78 |  import { mdiWhiteBalanceSunny } from '@mdi/js';
 79 | </script>
 80 | <Button dropdown="Brightness" outline icon={mdiWhiteBalanceSunny}>
 81 |     <Input range min="1" max="100" step="10" />
 82 | </Button>
 83 | ```
 84 | 
 85 | 
 86 | ##### Autoclose
 87 | 
 88 | With the `autoclose` property the dropdown will close when clicked inside it.
 89 | 
 90 | ```example script:hide height:200
 91 | <script>
 92 |  import {Button,Tag} from 'svelte-chota';
 93 |  import { mdiChevronDown } from '@mdi/js';
 94 | </script>
 95 | <Button dropdown="My Profile" autoclose outline iconRight={mdiChevronDown}>
 96 |     <p><a href="/">Edit</a></p>
 97 |     <p><a href="/">Alerts&nbsp;<Tag>3</Tag></a></p>
 98 |     <hr>
 99 |     <p><a href="/" class="text-error">Logout</a></p>
100 | </Button>
101 | ```
102 | 
103 | ##### Open
104 | 
105 | The `open` property sets the state of the dropdown's visibility.
106 | 
107 | ```example height:230
108 | <script>
109 |  import {Button} from 'svelte-chota';
110 |  let open = false;
111 |  const close = () => open=false;
112 | </script>
113 | <Button dropdown="Login" bind:open outline>
114 |     <p><input placeholder="username"></p>
115 |     <p><input placeholder="password" type="password"></p>
116 |     <p>
117 |         <Button clear on:click={close}>Sign up</Button>
118 |         <Button primary on:click={close}>Sign in</Button>
119 |     </p>
120 | </Button>
121 | ```
122 | 


--------------------------------------------------------------------------------
/docs_src/src/pages/components/card.md:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | # Card
 4 | 
 5 | ```example script:hide
 6 | <script>
 7 |  import { Card } from 'svelte-chota';
 8 | </script>
 9 | <Card>
10 |     Lorem ipsum dolor sit amet, 
11 |     consectetur adipisicing elit. 
12 |     Doloremque cumque velit id.
13 | </Card>
14 | ```
15 | 
16 | ```example script:hide
17 | <script>
18 |  import { Card,Button } from 'svelte-chota';
19 | </script>
20 | <div style="max-width:300px">
21 |     <Card>
22 |         <h4 slot="header">Card title</h4>
23 | 
24 |         A nisi ullam impedit molestiae, sapiente id, 
25 |         numquam accusantium eius cum, iste eum iusto 
26 |         blanditiis doloribus beatae. 
27 |         Molestias iste explicabo libero nam, 
28 |         voluptas harum ipsum quod velit enim. 
29 |         Quae, cupiditate?
30 |         
31 |         <div slot="footer" class="is-right">
32 |             <Button clear>Cancel</Button>
33 |             <Button primary on:click={()=>console.log('Hi!')}>Confirm</Button>
34 |         </div>
35 |     </Card>
36 | </div>
37 | ```


--------------------------------------------------------------------------------
/docs_src/src/pages/components/container.md:
--------------------------------------------------------------------------------
1 | # Container
2 | 
3 | The `Container` component is just a wrapper for centered content on the page. 
4 | 
5 | ```svelte
6 | <Container>
7 |     Hello
8 | </Container>
9 | ```


--------------------------------------------------------------------------------
/docs_src/src/pages/components/details.md:
--------------------------------------------------------------------------------
 1 | # Details
 2 | 
 3 | ```example script:hide
 4 | <script>
 5 |  import { Details } from 'svelte-chota';
 6 | </script>
 7 | <Details>
 8 |     <span slot="summary">StarWars spoiler</span>
 9 |     
10 |     Han Solo died...
11 | </Details>
12 | ```
13 | 
14 | 
15 | ### open
16 | 
17 | The `open` property allows details to be open by default.
18 | 
19 | ```example script:hide
20 | <script>
21 |  import { Details } from 'svelte-chota';
22 | </script>
23 | <Details open>
24 |     <span slot="summary">The GoT spoiler</span>
25 | 
26 |     Everybody died...
27 | </Details>
28 | ```


--------------------------------------------------------------------------------
/docs_src/src/pages/components/form.md:
--------------------------------------------------------------------------------
  1 | # Form
  2 | 
  3 | ### Inputs
  4 | 
  5 | ```example script:hide
  6 | <script>
  7 |  import {Input} from 'svelte-chota';
  8 | </script>
  9 | <p><Input placeholder="Your name?"/></p>
 10 | <p><Input password placeholder="Your password?"/></p>
 11 | <p><Input date value="1985-12-03"/></p>
 12 | <p><Input color value="#ff3e00"/></p>
 13 | <p><Input number value="5" min="0" max="10"/></p>
 14 | <p><Input type="range" value="9" min="0" max="10"/></p>
 15 | <p><Input textarea placeholder="Textarea"/></p>
 16 | ```
 17 | 
 18 | 
 19 | 
 20 | #### States
 21 | 
 22 | ```example script:hide
 23 | <script>
 24 |  import {Input} from 'svelte-chota';
 25 | </script>
 26 | <p><Input error value="There is an error"/></p>
 27 | <p><Input success value="This is ok"/></p>
 28 | <p><Input disabled value="Disabled"/></p>
 29 | ```
 30 | 
 31 | ### Field
 32 | 
 33 | ```example script:hide
 34 | <script>
 35 |  import {Input,Field} from 'svelte-chota';
 36 | </script>
 37 | <Field label="Your name">
 38 |     <Input value="Rich"/>
 39 | </Field>
 40 | 
 41 | <Field label="Username" success="User exists">
 42 |     <Input value="admin"/>
 43 | </Field>
 44 | 
 45 | <Field label="Password" error="Wrong password">
 46 |     <Input password value="admin"/>
 47 | </Field>
 48 | ```
 49 | 
 50 | 
 51 | 
 52 | #### Grouped
 53 | 
 54 | ```example
 55 | <script>
 56 |  import { Input,Field,Button } from 'svelte-chota';
 57 |  let error = false;
 58 | </script>
 59 | 
 60 | <Field grouped {error}>
 61 |     <Input placeholder="Username"/>
 62 |     <Input password placeholder="Password"/>
 63 |     <Button 
 64 |         on:click={e=>error = (!!error) ? false : "Wrong credentials"}
 65 |     >Press me</Button>
 66 | </Field>
 67 | ```
 68 | 
 69 | #### Gapless
 70 | 
 71 | ```example 
 72 | <script>
 73 |  import { Input,Field,Button } from 'svelte-chota';
 74 |  import { mdiMagnify } from '@mdi/js';
 75 | </script>
 76 | 
 77 | <Field gapless>
 78 |     <Input placeholder="Search"/>
 79 |     <Button icon={mdiMagnify} primary/>
 80 | </Field>
 81 | ```
 82 | 
 83 | ```example
 84 | <script>
 85 |  import { Input,Field,Button } from 'svelte-chota';
 86 |  import { mdiFormatBold,mdiFormatItalic,mdiFormatUnderline } from '@mdi/js';
 87 | </script>
 88 | 
 89 | <Field gapless>
 90 |     <Button icon={mdiFormatBold} outline/>
 91 |     <Button icon={mdiFormatItalic} outline/>
 92 |     <Button icon={mdiFormatUnderline} outline/>
 93 |     <Input placeholder="Formated text here"/>
 94 | </Field>
 95 | ```
 96 | 
 97 | 
 98 | 
 99 | ### Radiobutton
100 | 
101 | ```example
102 | <script>
103 |  import {Radio} from 'svelte-chota';
104 |  let radiovalue = 'second';
105 | </script>
106 | 
107 | <Radio value="first" bind:group={radiovalue}/> - first,
108 | <Radio value="second" bind:group={radiovalue}/> - second
109 | <p>Selected: {radiovalue}</p>
110 | ```
111 | 
112 | #### Labeled radiobuttons
113 | 
114 | ```example
115 | <script>
116 |  import {Radio} from 'svelte-chota';
117 |  let radiovalue = 'third';
118 | </script>
119 | 
120 | <Radio value="first" bind:group={radiovalue}>First</Radio>
121 | <Radio value="second" bind:group={radiovalue}>Second</Radio>
122 | <Radio value="third" bind:group={radiovalue}>Third</Radio>
123 | <p>Selected: {radiovalue}</p>
124 | ```
125 | 
126 | 
127 | 
128 | ### Checkbox
129 | 
130 | ```example
131 | <script>
132 |  import {Checkbox} from 'svelte-chota';
133 |  let cbvalue = ['second'];
134 | </script>
135 | 
136 | <Checkbox value="first" bind:group={cbvalue}/> - first,
137 | <Checkbox value="second" bind:group={cbvalue}/> - second
138 | <p>Selected: {cbvalue}</p>
139 | ```
140 | 
141 | 
142 | #### Labeled checkbox
143 | 
144 | ```example script:hide
145 | <script>
146 |  import {Checkbox} from 'svelte-chota';
147 |  let cbvalue = [];
148 | </script>
149 | 
150 | <Checkbox value="first" bind:group={cbvalue}>First</Checkbox>
151 | <Checkbox value="second" bind:group={cbvalue}>Second</Checkbox>
152 | <p>Selected: {cbvalue}</p>
153 | ```
154 | 
155 | 
156 | ### Selects
157 | 
158 | Native selects don't have a component version. Just use as is.
159 | 
160 | ```example
161 | <select>
162 |     <option disabled selected>Choose</option>
163 |     <option value="1">One</option>
164 |     <option value="2">Two</option>
165 |     <option value="3">Three</option>
166 | </select>
167 | ```


--------------------------------------------------------------------------------
/docs_src/src/pages/components/grid.md:
--------------------------------------------------------------------------------
  1 | <h1>Grid</h1>
  2 | 
  3 | ```example script:hide
  4 | <script>
  5 |  import {Row,Col} from 'svelte-chota';
  6 | </script>
  7 | <Row>
  8 |     <Col> .col </Col>
  9 | </Row>
 10 | <Row>
 11 |     <Col> .col </Col>
 12 |     <Col> .col </Col>
 13 |     <Col> .col </Col>
 14 | </Row>
 15 | ```
 16 | 
 17 | ### Size
 18 | 
 19 | You can specify the size of the columns. The `size` property can be *from 1 to 12*.
 20 | 
 21 | Each column's size is specified by how many columns you want out of 12. So if you want 4 columns out of 12, use `size="4"`.
 22 | 
 23 | ```example script:hide
 24 | <script>
 25 |  import {Row,Col} from 'svelte-chota';
 26 | </script>
 27 | <Row>
 28 | {#each [1,2,3,4,5,6,7,8,9,10,11,12] as i}
 29 |     <Col size="1"> .col </Col>
 30 | {/each}
 31 | </Row>
 32 | 
 33 | <Row>
 34 | {#each [1,2,3] as i}
 35 |     <Col size="4"> .col </Col>
 36 | {/each}
 37 | </Row>
 38 | 
 39 | <Row>
 40 |     <Col size={12}> .col </Col>
 41 | </Row>
 42 | ```
 43 | 
 44 | ### Responsive grids
 45 | 
 46 | We now have responsive grids that work based on device width.
 47 | 
 48 | * All columns are 100% for device width under 600px
 49 | * `size` for all device sizes >= 600px
 50 | * `sizeMD` for >= 900px sizes
 51 | * `sizeLG` for >= 1200px sizes
 52 | 
 53 | ```example script:hide
 54 | <script>
 55 |  import {Row,Col} from 'svelte-chota';
 56 | </script>
 57 | <Row>
 58 |     <Col size="12" sizeMD="6" sizeLG="4"> 12 / 6 / 4 </Col>
 59 |     <Col size="6" sizeMD="3" sizeLG="4"> 6 / 3 / 4 </Col>
 60 |     <Col size="6" sizeMD="3" sizeLG="4"> 6 / 3 / 4 </Col>
 61 | </Row>
 62 | 
 63 | <Row>
 64 |     <Col sizeLG="6"> 6 on lg </Col>
 65 |     <Col sizeLG="3"> 3 on lg </Col>
 66 |     <Col sizeLG="3"> 3 on lg </Col>
 67 | </Row>
 68 | ```
 69 | 
 70 | 
 71 | ### Mix-n-Match
 72 | 
 73 | You can use a combination of flexible and sized columns.
 74 | 
 75 | When using a combination, the sized column takes the space specified and the remaining space is filled by the flexible column.
 76 | 
 77 |  ```example script:hide
 78 | <script>
 79 |  import {Row,Col} from 'svelte-chota';
 80 | </script>
 81 | <Row>
 82 |     <Col size="2"> col 2 </Col>
 83 |     <Col size="2"> col 2 </Col>
 84 |     <Col> auto </Col>
 85 |     <Col size="3"> col 3 </Col>
 86 | </Row>
 87 | 
 88 | <Row>
 89 |     <Col size="10"> col 10 </Col>
 90 |     <Col> auto </Col>
 91 | </Row>
 92 | 
 93 | <Row>
 94 |     <Col> auto </Col>
 95 |     <Col> auto </Col>
 96 |     <div class="is-full-width"></div>
 97 |     <Col> auto </Col>
 98 |     <Col> auto </Col>
 99 | </Row>
100 | ```
101 | 
102 | > **Pro tip:** Create equal-width columns that span multiple rows by inserting `.is-full-width` (one of the [utility class](utilites)) where you want the columns to break to a new line.
103 | 
104 | 
105 | ### Reverse Direction
106 | 
107 | Add the `reverse` property to the `Row` to reverse the column direction. 
108 | 
109 | ```example script:hide
110 | <script>
111 |  import {Row,Col} from 'svelte-chota';
112 | </script>
113 | <Row reverse>
114 |     <Col size="5"> col 5 </Col>
115 |     <Col size="4"> col 4 </Col>
116 |     <Col size="3"> col 3 </Col>
117 | </Row>
118 | ```
119 | 


--------------------------------------------------------------------------------
/docs_src/src/pages/components/icon.md:
--------------------------------------------------------------------------------
  1 | # Icon
  2 | 
  3 | ### Source
  4 | 
  5 | A `src` property can be either an *SVG-path*, *SVG sprite URL with symbol ID* or *SVG image URL*.
  6 | 
  7 | * *SVG-paths* are provided by many npm packages. For example you can use [@mdi/js](https://www.npmjs.com/package/@mdi/js) and choose from hundreds of material icons on [materialdesignicons.com](https://materialdesignicons.com/). Or you can use your own SVG-path.
  8 | 
  9 | * *SVG sprite URL with symbol ID* is a path to the SVG-sprite with a specified symbol name. There are a lot of tools to bundle many SVG-files in a single SVG-sprite. For example, you can look at the [rollup-plugin-svg-icons](https://www.npmjs.com/package/rollup-plugin-svg-icons) package.
 10 | 
 11 | * *SVG image's URL* is a path to an image which might be located in your assets or in any public libraries 
 12 |     like [icongr.am](https://icongr.am/).
 13 | 
 14 | 
 15 | ```example 
 16 | <script>
 17 |     import { Icon } from 'svelte-chota';
 18 |     import { mdiLanguageJavascript } from '@mdi/js';
 19 |     const jsicon =`M3,3H21V21H3V3M7.73,18.04C8.13,18.89 8.92,19.59 10.27,
 20 |     19.59C11.77,19.59 12.8,18.79 12.8,17.04V11.26H11.1V17C11.1,
 21 |     17.86 10.75,18.08 10.2,18.08C9.62,18.08 9.38,17.68 9.11,
 22 |     17.21L7.73,18.04M13.71,17.86C14.21,18.84 15.22,19.59 16.8,
 23 |     19.59C18.4,19.59 19.6,18.76 19.6,17.23C19.6,15.82 18.79,
 24 |     15.19 17.35,14.57L16.93,14.39C16.2,14.08 15.89,13.87 15.89,
 25 |     13.37C15.89,12.96 16.2,12.64 16.7,12.64C17.18,12.64 17.5,
 26 |     12.85 17.79,13.37L19.1,12.5C18.55,11.54 17.77,11.17 16.7,
 27 |     11.17C15.19,11.17 14.22,12.13 14.22,13.4C14.22,14.78 15.03,
 28 |     15.43 16.25,15.95L16.67,16.13C17.45,16.47 17.91,16.68 17.91,
 29 |     17.26C17.91,17.74 17.46,18.09 16.76,18.09C15.93,18.09 15.45,
 30 |     17.66 15.09,17.06L13.71,17.86Z`;
 31 | </script>
 32 | <Icon src={jsicon} color="red" size="3"/>
 33 | <Icon src={mdiLanguageJavascript} color="orange" size="3"/>
 34 | <Icon src="static/icons/javascript.svg" size="3" />
 35 | <Icon src="static/icons/sprite.svg#javascript" size="3" color="green"/>
 36 | <Icon src="https://icongr.am/material/language-javascript.svg" size="3" />
 37 | ```
 38 | 
 39 | ### Size
 40 | 
 41 | You can set the `size` property with a CSS-string like `36px` or just a multiplier for the icon's default size.
 42 | 
 43 | ```example script:hide
 44 | <script>
 45 |  import { Icon } from 'svelte-chota';
 46 | </script>
 47 | <Icon src="https://icongr.am/devicon/ember-original-wordmark.svg" size="2"/>
 48 | <Icon src="https://icongr.am/devicon/angularjs-original.svg" size="3"/>
 49 | <Icon src="static/icons/svelte.svg" size="96px" />
 50 | <Icon src="https://icongr.am/devicon/vuejs-original.svg" size={6/2}/>
 51 | <Icon src="https://icongr.am/devicon/react-original.svg" size={2}/>
 52 | ```
 53 | 
 54 | 
 55 | ### Color
 56 | 
 57 | By default, icon color is inherited from the current text color. But you can specify any color you want.
 58 | 
 59 | > **Note:** a `color` property can only be used when the source is *SVG-path* or *SVG sprite*!
 60 | 
 61 | ```example
 62 | <script>
 63 |  import { Icon } from 'svelte-chota';
 64 |  import { mdiCardsSpade,mdiCardsClub,mdiCardsDiamond,mdiCardsHeart } from '@mdi/js';
 65 | </script>
 66 | 
 67 | <Icon src={mdiCardsSpade} color="black" size="3"/>
 68 | <Icon src={mdiCardsClub} color="#000000"  size="3"/>
 69 | <Icon src={mdiCardsDiamond} color="red" size="3"/>
 70 | <Icon src={mdiCardsHeart} color="rgb(255,0,0)" size="3"/>
 71 | ```
 72 | 
 73 | ### Rotate
 74 | 
 75 | The `rotate` property is a number of degrees from -360 to 360.
 76 | 
 77 | ```example script:hide
 78 | <script>
 79 |  import { Icon } from 'svelte-chota';
 80 | </script>
 81 | <Icon src="static/icons/javascript.svg" rotate="-100"  size="2"/>
 82 | <Icon src="static/icons/javascript.svg" rotate="-55"  size="2"/>
 83 | <Icon src="static/icons/javascript.svg" rotate="0"  size="2"/>
 84 | <Icon src="static/icons/javascript.svg" rotate="45"  size="2"/>
 85 | <Icon src="static/icons/javascript.svg" rotate="70"  size="2"/>
 86 | ```
 87 | 
 88 | 
 89 | ### Flip
 90 | 
 91 | You can flip an icon vertically with the `flipV` property or horizontally with `flipH`.
 92 | 
 93 | ```example script:hide
 94 | <script>
 95 |  import { Icon } from 'svelte-chota';
 96 | </script>
 97 | <Icon src="static/icons/javascript.svg" size="2"/>
 98 | <Icon src="static/icons/javascript.svg" flipH size="2"/>
 99 | <Icon src="static/icons/javascript.svg" flipV size="2"/>
100 | <Icon src="static/icons/javascript.svg" flipV flipH size="2"/>
101 | ```
102 | 
103 | ### Spin
104 | 
105 | It is possible to make a spinning icon. `spin` is the duration of the full turn in seconds. Default is 2 seconds. 
106 | 
107 | If the value is *positive* then the icon will spin clockwise, and counterclockwise if it is *negative*
108 | 
109 | ```example script:hide
110 | <script>
111 |  import { Icon } from 'svelte-chota';
112 | </script>
113 | <Icon src="static/icons/svelte.svg" spin="-2" size="2"/>
114 | <Icon src="static/icons/svelte.svg" spin="-5" size="2"/>
115 | <Icon src="static/icons/svelte.svg" spin="-10" size="2"/>
116 | <Icon src="static/icons/svelte.svg" spin size="2"/>
117 | <Icon src="static/icons/svelte.svg" spin="1" size="2"/>
118 | <Icon src="static/icons/svelte.svg" spin="0.5" size="2"/>
119 | ```


--------------------------------------------------------------------------------
/docs_src/src/pages/components/modal.md:
--------------------------------------------------------------------------------
 1 | # Modal
 2 | 
 3 | ```example height:200
 4 | <script>
 5 |  import { Modal, Button, Card } from 'svelte-chota';
 6 |  let modal_open = false;
 7 | </script>
 8 | 
 9 | <Button on:click={event => modal_open = true}>Show modal</Button>
10 | <Modal bind:open={modal_open}>
11 |     <Card>
12 |         Hello, I am a simple modal.
13 |     </Card>
14 | </Modal>
15 | ```
16 | 
17 | 
18 | ```example height:300
19 | <script>
20 |  import { Modal, Button, Card } from 'svelte-chota';
21 |  let modal_open = false;
22 |  const modal_show = event => modal_open = true;
23 |  const modal_hide = event => modal_open = false;
24 | </script>
25 | 
26 | <Button on:click={modal_show}>Show modal</Button>
27 | <Modal bind:open={modal_open}>
28 |     <Card>
29 |         <h4 slot="header">Destroy the world</h4>
30 | 
31 |         <p>Are you sure?</p>
32 |         
33 |         <div slot="footer" class="is-right">
34 |             <Button clear on:click={modal_hide}>Cancel</Button>
35 |             <Button primary on:click={modal_hide}>Confirm</Button>
36 |         </div>
37 |     </Card>
38 | </Modal>
39 | ```
40 | 


--------------------------------------------------------------------------------
/docs_src/src/pages/components/nav.md:
--------------------------------------------------------------------------------
 1 | # Nav
 2 | 
 3 | 
 4 | ```example script:hide
 5 | <script>
 6 |  import { Nav } from 'svelte-chota';
 7 | </script>
 8 | 
 9 | <Nav>
10 |     <a slot="left" class="active" href="/">Link 1</a>
11 |     <a slot="left" href="/">Link 2</a>
12 | 
13 |     <a slot="center" href="/" class="brand">LOGO</a>
14 | 
15 |     <a slot="right" href="/">Link 3</a>
16 |     <a slot="right" href="/">Link 4</a>   
17 | </Nav>
18 | ```
19 | 
20 | ```example script:hide
21 | <script>
22 |  import { Nav } from 'svelte-chota';
23 | </script>
24 | 
25 | <Nav>
26 |     <a slot="left" href="/" class="brand">LOGO</a>
27 |     <a slot="left" class="active" href="/">Link 1</a>
28 |     <a slot="left" href="/">Link 2</a>  
29 | </Nav>
30 | ```


--------------------------------------------------------------------------------
/docs_src/src/pages/components/tabs.md:
--------------------------------------------------------------------------------
 1 | # Tabs
 2 | 
 3 | ### Simple usage
 4 | 
 5 | ```example
 6 | <script>
 7 |  import { Tabs,Tab } from 'svelte-chota';
 8 |  let active_tab = 0;
 9 | </script>
10 | 
11 | <Tabs bind:active={active_tab}>
12 |     <Tab>Tab1</Tab>
13 |     <Tab>Tab2</Tab>
14 |     <Tab>Tab3</Tab>
15 | </Tabs>
16 | 
17 | Current active tab: {active_tab}
18 | ```
19 | 
20 | 
21 | 
22 | ### Property: tabid
23 | 
24 | ```example
25 | <script>
26 |  import { Tabs,Tab } from 'svelte-chota';
27 |  let active_tab = 'second';
28 | </script>
29 | 
30 | <Tabs bind:active={active_tab}>
31 |     <Tab tabid="first">Tab1</Tab>
32 |     <Tab tabid="second">Tab2</Tab>
33 |     <Tab tabid="third">Tab3</Tab>
34 | </Tabs>
35 | 
36 | Current active tab: {active_tab}
37 | ```
38 | 
39 | 
40 | ### Full width
41 | 
42 | ```example script:hide
43 | <script>
44 |  import { Tabs,Tab } from 'svelte-chota';
45 | </script>
46 | 
47 | <Tabs full>
48 |     <Tab>Tab1</Tab>
49 |     <Tab>Tab2</Tab>
50 |     <Tab>Tab3</Tab>
51 | </Tabs>
52 | ```


--------------------------------------------------------------------------------
/docs_src/src/pages/components/tag.md:
--------------------------------------------------------------------------------
 1 | # Tag
 2 | 
 3 | ```example script:hide
 4 | <script>
 5 |  import { Tag } from 'svelte-chota';
 6 | </script>
 7 | <Tag>One</Tag>
 8 | <Tag>Two</Tag>
 9 | <Tag>Three</Tag>
10 | <Tag small>Small</Tag>
11 | <Tag large>Large</Tag>
12 | ```


--------------------------------------------------------------------------------
/docs_src/src/pages/customization.md:
--------------------------------------------------------------------------------
 1 | # Customization
 2 | 
 3 | [chota](https://jenil.github.io/chota/) is customized by setting CSS variables. See [official docs](https://jenil.github.io/chota/#customizing) for more info.
 4 | 
 5 | You can set CSS variables in an external _*.css_ file or inside `App.svelte` using the `:global` modifier.
 6 | 
 7 | ```svelte
 8 | <style>
 9 |     :global(:root) {
10 |         --color-primary: #14854F;
11 |         --color-lightGrey: #d2d6dd;
12 |         --color-grey: #747681;
13 |         --color-darkGrey: #3f4144;
14 |         --color-error: #d43939;
15 |         --color-success: #28bd14;
16 |         --grid-maxWidth: 120rem;
17 |         --grid-gutter: 2rem;
18 |         --font-size: 1.6rem;
19 |         --font-family: "Helvetica Neue", sans-serif;
20 |     }
21 | </style>
22 | ```


--------------------------------------------------------------------------------
/docs_src/src/pages/elements.md:
--------------------------------------------------------------------------------
1 | # Elements
2 | 
3 | You can find how common HTML-elements look with [chota](https://jenil.github.io/chota/) on the [Demo page](https://cdn.rawgit.com/jenil/chota/master/test/index.html).
4 | 
5 | Feel free to look at the demo page's source code for more info about their composition.
6 | 


--------------------------------------------------------------------------------
/docs_src/src/pages/getting-started.md:
--------------------------------------------------------------------------------
 1 | # About my component
 2 | 
 3 | It is a very cool button.
 4 | 
 5 | ## Installation
 6 | 
 7 | Run this command:
 8 | 
 9 | ```shell
10 | $ npm install -D my-svelte-button
11 | ```
12 | 
13 | Then you can import it in your projects:
14 | 
15 | ```html
16 | <script> 
17 |     import Button from 'my-svelte-button';
18 | </script>
19 | ```
20 | 


--------------------------------------------------------------------------------
/docs_src/src/pages/index.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: false
 3 | layout: 'no_sidebar'
 4 | ---
 5 | 
 6 | <div class="header">
 7 | # Svelte-Chota #
 8 | </div>
 9 | 
10 | <div class="slogan">
11 |     UI component library for [Svelte](https://svelte.dev) built with tiny [chota.css](https://jenil.github.io/chota/)
12 | </div>
13 | 
14 | <div class="links">
15 | [Documentation](why_chota) [Github](https://github.com/AlexxNB/svelte-chota)
16 | </div>
17 | 
18 | <style>
19 |     div{
20 |         text-align: center;
21 |     }
22 | 
23 |     .header{
24 |         margin-top: 5rem;
25 |     }
26 | 
27 |     .slogan{
28 |         text-align: center;
29 |         font-size: 1.5rem;
30 |     }
31 | 
32 |     .links{
33 |         margin-top:25%
34 |     }
35 | 
36 |     .links a{
37 |         margin: 0 2rem;
38 |         font-size: 1.2rem;
39 |     }
40 | </style>


--------------------------------------------------------------------------------
/docs_src/src/pages/install.md:
--------------------------------------------------------------------------------
 1 | import Details from '@INCLUDES/Details.svelte';
 2 | 
 3 | # Installation
 4 | 
 5 | You have two ways to start working with `chota` and `svelte-chota`. These instructions apply to the official [svelte template](https://github.com/sveltejs/template).
 6 | 
 7 | 
 8 | <Details title="a. Import CSS file in your root component"
 9 |     comment="Recommended way"
10 | >
11 | 
12 | 1.&nbsp;Install two node packages for development:
13 | 
14 | * `chota` - css framework itself
15 | * `svelte-chota` - Svelte components for chota
16 | 
17 | ```shell
18 | $ npm install --save-dev chota svelte-chota
19 | ```
20 | 
21 | 2.&nbsp;Open your root component file (usually `App.svelte`) and add the `chota` import at the top of a `<script>` block.
22 | 
23 | ```html
24 | <script>
25 |     import 'chota';
26 |     ...
27 | </script>
28 | ```
29 | 
30 | </Details>
31 | 
32 | 
33 | <Details
34 |     title="c. Import from CDN"
35 |     comment="Easiest way"
36 | >
37 | 
38 | Another way to import `chota` without Rollup's config changing is using CDN. In this case an internet connection is required for users of your app.
39 | 
40 | 1.&nbsp;Install `svelte-chota` for production:
41 | 
42 | ```shell
43 | $ npm install --save-prod svelte-chota
44 | ```
45 | 
46 | 2.&nbsp;Import styles from chota's CDN in the `style` block of the your `App.svelte`.
47 | 
48 | ```html
49 | <style>
50 |     @import "https://unpkg.com/chota@latest";
51 | </style>
52 | ```
53 | 
54 | > This way is ideal for use in sandboxes. See example on the [REPL](https://svelte.dev/repl/23f96be8ef424e12b584f9ed00761e88)
55 | </Details>
56 | 


--------------------------------------------------------------------------------
/docs_src/src/pages/usage.md:
--------------------------------------------------------------------------------
 1 | # Usage
 2 | 
 3 | Just import the necessary components from the `svelte-chota` package inside your components.
 4 | 
 5 | ```svelte
 6 | <script>
 7 |     import {Input,Button} from 'svelte-chota';
 8 | </script>
 9 | 
10 | <Input placeholder="What do you want?" /> <Button>Find</Button>
11 | ```
12 | 
13 | 
14 | ### Events handlers
15 | 
16 | You can use any `on:eventname` directive with any component.
17 | 
18 | ```example
19 | <script>
20 |     import {Button} from 'svelte-chota';
21 |     let button_text = 'Hover over me';
22 | </script>
23 | 
24 | <Button 
25 |     on:mouseenter={ e => button_text="Don't touch me!" }
26 |     on:mouseleave={ e => button_text="Ok, hover over me again" }
27 | >{button_text}</Button>
28 | ```
29 | 
30 | 
31 | ### Attributes
32 | 
33 | Any attribute can be passed to the component, even the `class` attribute.
34 | 
35 | ```example
36 | <script>
37 |     import {Card} from 'svelte-chota';
38 | </script>
39 | 
40 | <Card 
41 |     class="is-rounded text-center" 
42 |     style="height:100px; width:100px" 
43 |     title="Hello"
44 | >
45 |     <h1>Hey!</h1>
46 | </Card>
47 | ```


--------------------------------------------------------------------------------
/docs_src/src/pages/utilites.md:
--------------------------------------------------------------------------------
  1 | # Utilites
  2 | 
  3 | [chota](https://jenil.github.io/chota/) has very useful CSS classes. You can apply these helper classes to almost any element in order to alter its style.
  4 | 
  5 | 
  6 | * `text-primary` - <span class="text-primary">Primary text</span>
  7 | * `text-light` - <span class="text-light">Light text</span>
  8 | * `text-white` - <span class="bg-primary text-white">White text</span>
  9 | * `text-dark` - <span class="text-dark">Dark text</span>
 10 | * `text-grey` - <span class="text-grey">Grey text</span>
 11 | * `text-error` - <span class="text-error">Error text</span>
 12 | * `text-success` - <span class="text-success">Success text</span>
 13 | * `bg-primary` - <span class="bg-primary">primary background</span>
 14 | * `bg-light` - <span class="bg-light">Light background</span>
 15 | * `bg-dark` - <span class="bg-dark">Dark background</span>
 16 | * `bg-grey` - <span class="bg-grey">Grey background</span>
 17 | * `bg-error` - <span class="bg-error">Error background</span>
 18 | * `bg-success` - <span class="bg-success">Success background</span>
 19 | * `bd-primary` - <span class="bd-primary">primary border</span>
 20 | * `bd-light` - <span class="bd-light">Light border</span>
 21 | * `bd-dark` - <span class="bd-dark">Dark border</span>
 22 | * `bd-grey` - <span class="bd-grey">Grey border</span>
 23 | * `bd-error` - <span class="bd-error">Error border</span>
 24 | * `bd-success` - <span class="bd-success">Success border</span>
 25 | * `pull-right` - floats an element to the right
 26 | * `pull-left` - floats an element to the left
 27 | * `text-center` - center aligns text
 28 | * `text-left` - left aligns text
 29 | * `text-right` - right aligns text
 30 | * `text-justify` - justify aligns text
 31 | * `text-uppercase` - text to uppercase
 32 | * `text-lowercase` - text to lowercase
 33 | * `text-capitalize` - capitalizes text
 34 | * `is-full-screen` - makes the element 100% view height
 35 | * `is-full-width` - make the element 100% width
 36 | * `is-vertical-align` - vertically centers element using flex
 37 | * `is-horizontal-align` - horizontal centers element using flex
 38 | * `is-center` - centers element using flex
 39 | * `is-right` - right aligns element using flex
 40 | * `is-left` - left aligns element using flex
 41 | * `is-fixed` - fixed positioned element
 42 | * `is-paddingless` - removes any padding
 43 | * `is-marginless` - removes any margin
 44 | * `is-rounded` - make the element round
 45 | * `clearfix` - clears the floats
 46 | * `is-hidden` - hides the element completely
 47 | * `hide-xs` - hides the element for screens &lt;600px
 48 | * `hide-sm` - hides the element for screens &gt;=600px and &lt;900px
 49 | * `hide-md` - hides the element for screens &gt;=900px and &lt;1200px
 50 | * `hide-lg` - hides the element for screens &gt;=1200px
 51 | * `hide-pr` - hides the element for printing
 52 | 
 53 | 
 54 | <style>
 55 | 
 56 | ul{
 57 |     --color-primary: #14854F;
 58 |         --color-lightGrey: #d2d6dd;
 59 |         --color-grey: #747681;
 60 |         --color-darkGrey: #3f4144;
 61 |         --color-error: #d43939;
 62 |         --color-success: #28bd14;
 63 | }
 64 | 
 65 | /* Colors */
 66 | .bg-primary {
 67 |     background-color: var(--color-primary) !important;
 68 | }
 69 | 
 70 | .bg-light {
 71 |     background-color: var(--color-lightGrey) !important;
 72 | }
 73 | 
 74 | .bg-dark {
 75 |     background-color: var(--color-darkGrey) !important;
 76 | }
 77 | 
 78 | .bg-grey {
 79 |     background-color: var(--color-grey) !important;
 80 | }
 81 | 
 82 | .bg-error {
 83 |     background-color: var(--color-error) !important;
 84 | }
 85 | 
 86 | .bg-success {
 87 |     background-color: var(--color-success) !important;
 88 | }
 89 | 
 90 | .bd-primary {
 91 |     border: 1px solid var(--color-primary) !important;
 92 | }
 93 | 
 94 | .bd-light {
 95 |     border: 1px solid var(--color-lightGrey) !important;
 96 | }
 97 | 
 98 | .bd-dark {
 99 |     border: 1px solid var(--color-darkGrey) !important;
100 | }
101 | 
102 | .bd-grey {
103 |     border: 1px solid var(--color-grey) !important;
104 | }
105 | 
106 | .bd-error {
107 |     border: 1px solid var(--color-error) !important;
108 | }
109 | 
110 | .bd-success {
111 |     border: 1px solid var(--color-success) !important;
112 | }
113 | 
114 | .text-primary {
115 |     color: var(--color-primary) !important;
116 | }
117 | 
118 | .text-light {
119 |     color: var(--color-lightGrey) !important;
120 | }
121 | 
122 | .text-dark {
123 |     color: var(--color-darkGrey) !important;
124 | }
125 | 
126 | .text-grey {
127 |     color: var(--color-grey) !important;
128 | }
129 | 
130 | .text-error {
131 |     color: var(--color-error) !important;
132 | }
133 | 
134 | .text-success {
135 |     color: var(--color-success) !important;
136 | }
137 | 
138 | .text-white {
139 |     color: #fff !important;
140 | }
141 | </style>


--------------------------------------------------------------------------------
/docs_src/src/pages/why_chota.md:
--------------------------------------------------------------------------------
1 | # Why chota?
2 | 
3 | When you decide to use [Svelte](https://svelte.dev) in your projects, you expect very tiny bundles of code.
4 | 
5 | [chota](https://jenil.github.io/chota/) is a super light-weight CSS framework, which adds only ~3kb of gzipped code to your bundle.
6 | 
7 | Svelte-chota is a UI kit for easily using [chota](https://jenil.github.io/chota/) in your [Svelte](https://svelte.dev) projects.


--------------------------------------------------------------------------------
/docs_src/src/static/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AlexxNB/svelte-chota/0b4d259cec6a88f549fc8197bcf75c10f18aefed/docs_src/src/static/favicon.png


--------------------------------------------------------------------------------
/docs_src/src/static/icons/javascript.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 2 | <svg
 3 |    xmlns:dc="http://purl.org/dc/elements/1.1/"
 4 |    xmlns:cc="http://creativecommons.org/ns#"
 5 |    xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
 6 |    xmlns:svg="http://www.w3.org/2000/svg"
 7 |    xmlns="http://www.w3.org/2000/svg"
 8 |    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
 9 |    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
10 |    version="1.1"
11 |    width="32"
12 |    height="32"
13 |    viewBox="0 0 24 24"
14 |    fill="currentColor"
15 |    id="svg4"
16 |    sodipodi:docname="language-javascript.svg"
17 |    inkscape:version="0.92.4 (5da689c313, 2019-01-14)">
18 |   <metadata
19 |      id="metadata10">
20 |     <rdf:RDF>
21 |       <cc:Work
22 |          rdf:about="">
23 |         <dc:format>image/svg+xml</dc:format>
24 |         <dc:type
25 |            rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
26 |       </cc:Work>
27 |     </rdf:RDF>
28 |   </metadata>
29 |   <defs
30 |      id="defs8" />
31 |   <sodipodi:namedview
32 |      pagecolor="#ffffff"
33 |      bordercolor="#666666"
34 |      borderopacity="1"
35 |      objecttolerance="10"
36 |      gridtolerance="10"
37 |      guidetolerance="10"
38 |      inkscape:pageopacity="0"
39 |      inkscape:pageshadow="2"
40 |      inkscape:window-width="1920"
41 |      inkscape:window-height="1027"
42 |      id="namedview6"
43 |      showgrid="false"
44 |      inkscape:zoom="7.375"
45 |      inkscape:cx="16.271186"
46 |      inkscape:cy="16"
47 |      inkscape:window-x="0"
48 |      inkscape:window-y="25"
49 |      inkscape:window-maximized="1"
50 |      inkscape:current-layer="svg4" />
51 |   <rect
52 |      style="opacity:1;fill:#ffcc00;fill-opacity:1;stroke:none;stroke-width:1.5;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
53 |      id="rect33"
54 |      width="18"
55 |      height="18"
56 |      x="3"
57 |      y="3" />
58 |   <path
59 |      style="opacity:1;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1.5;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
60 |      d="m 16.699863,11.169863 c -1.51,0 -2.479981,0.960957 -2.479981,2.230957 0,1.38 0.810274,2.028828 2.030274,2.548828 l 0.418945,0.180176 c 0.78,0.34 1.240723,0.55086 1.240723,1.13086 0,0.48 -0.449903,0.829102 -1.149903,0.829101 C 15.929921,18.089785 15.45,17.66 15.09,17.06 l -1.379883,0.799805 c 0.5,0.98 1.509356,1.72998 3.089355,1.72998 1.600001,0 2.800782,-0.829863 2.800782,-2.359863 0,-1.41 -0.810001,-2.040156 -2.25,-2.660156 l -0.42041,-0.180176 c -0.730001,-0.31 -1.040039,-0.519531 -1.040039,-1.019531 0,-0.41 0.310058,-0.729493 0.810058,-0.729493 0.48,0 0.799843,0.209493 1.089844,0.729493 l 1.30957,-0.870118 c -0.55,-0.96 -1.329414,-1.330078 -2.399414,-1.330078 z m -5.600098,0.09082 v 5.739257 c 0,0.86 -0.349413,1.079591 -0.899414,1.079591 -0.5799998,0 -0.8213085,-0.400118 -1.0913085,-0.870118 l -1.379883,0.830566 c 0.4000005,0.850001 1.1900393,1.549806 2.5400395,1.549805 1.5,0 2.529785,-0.800293 2.529785,-2.550293 v -5.778808 z"
61 |      id="rect12"
62 |      inkscape:connector-curvature="0" />
63 | </svg>
64 | 


--------------------------------------------------------------------------------
/docs_src/src/static/icons/sprite.svg:
--------------------------------------------------------------------------------
1 | <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
2 |   <symbol id="javascript" viewBox="0 0 24 24">
3 |     <path d="M3,3H21V21H3V3M7.73,18.04C8.13,18.89 8.92,19.59 10.27,19.59C11.77,19.59 12.8,18.79 12.8,17.04V11.26H11.1V17C11.1,17.86 10.75,18.08 10.2,18.08C9.62,18.08 9.38,17.68 9.11,17.21L7.73,18.04M13.71,17.86C14.21,18.84 15.22,19.59 16.8,19.59C18.4,19.59 19.6,18.76 19.6,17.23C19.6,15.82 18.79,15.19 17.35,14.57L16.93,14.39C16.2,14.08 15.89,13.87 15.89,13.37C15.89,12.96 16.2,12.64 16.7,12.64C17.18,12.64 17.5,12.85 17.79,13.37L19.1,12.5C18.55,11.54 17.77,11.17 16.7,11.17C15.19,11.17 14.22,12.13 14.22,13.4C14.22,14.78 15.03,15.43 16.25,15.95L16.67,16.13C17.45,16.47 17.91,16.68 17.91,17.26C17.91,17.74 17.46,18.09 16.76,18.09C15.93,18.09 15.45,17.66 15.09,17.06L13.71,17.86Z"/>
4 |   </symbol>
5 | </svg>


--------------------------------------------------------------------------------
/docs_src/src/static/icons/svelte.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="107" height="128" viewBox="0 0 107 128"><title>svelte-logo</title><path d="M94.1566,22.8189c-10.4-14.8851-30.94-19.2971-45.7914-9.8348L22.2825,29.6078A29.9234,29.9234,0,0,0,8.7639,49.6506a31.5136,31.5136,0,0,0,3.1076,20.2318A30.0061,30.0061,0,0,0,7.3953,81.0653a31.8886,31.8886,0,0,0,5.4473,24.1157c10.4022,14.8865,30.9423,19.2966,45.7914,9.8348L84.7167,98.3921A29.9177,29.9177,0,0,0,98.2353,78.3493,31.5263,31.5263,0,0,0,95.13,58.117a30,30,0,0,0,4.4743-11.1824,31.88,31.88,0,0,0-5.4473-24.1157" style="fill:#ff3e00"/><path d="M45.8171,106.5815A20.7182,20.7182,0,0,1,23.58,98.3389a19.1739,19.1739,0,0,1-3.2766-14.5025,18.1886,18.1886,0,0,1,.6233-2.4357l.4912-1.4978,1.3363.9815a33.6443,33.6443,0,0,0,10.203,5.0978l.9694.2941-.0893.9675a5.8474,5.8474,0,0,0,1.052,3.8781,6.2389,6.2389,0,0,0,6.6952,2.485,5.7449,5.7449,0,0,0,1.6021-.7041L69.27,76.281a5.4306,5.4306,0,0,0,2.4506-3.631,5.7948,5.7948,0,0,0-.9875-4.3712,6.2436,6.2436,0,0,0-6.6978-2.4864,5.7427,5.7427,0,0,0-1.6.7036l-9.9532,6.3449a19.0329,19.0329,0,0,1-5.2965,2.3259,20.7181,20.7181,0,0,1-22.2368-8.2427,19.1725,19.1725,0,0,1-3.2766-14.5024,17.9885,17.9885,0,0,1,8.13-12.0513L55.8833,23.7472a19.0038,19.0038,0,0,1,5.3-2.3287A20.7182,20.7182,0,0,1,83.42,29.6611a19.1739,19.1739,0,0,1,3.2766,14.5025,18.4,18.4,0,0,1-.6233,2.4357l-.4912,1.4978-1.3356-.98a33.6175,33.6175,0,0,0-10.2037-5.1l-.9694-.2942.0893-.9675a5.8588,5.8588,0,0,0-1.052-3.878,6.2389,6.2389,0,0,0-6.6952-2.485,5.7449,5.7449,0,0,0-1.6021.7041L37.73,51.719a5.4218,5.4218,0,0,0-2.4487,3.63,5.7862,5.7862,0,0,0,.9856,4.3717,6.2437,6.2437,0,0,0,6.6978,2.4864,5.7652,5.7652,0,0,0,1.602-.7041l9.9519-6.3425a18.978,18.978,0,0,1,5.2959-2.3278,20.7181,20.7181,0,0,1,22.2368,8.2427,19.1725,19.1725,0,0,1,3.2766,14.5024,17.9977,17.9977,0,0,1-8.13,12.0532L51.1167,104.2528a19.0038,19.0038,0,0,1-5.3,2.3287" style="fill:#fff"/></svg>


--------------------------------------------------------------------------------
/docs_src/src/static/overpass-400.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AlexxNB/svelte-chota/0b4d259cec6a88f549fc8197bcf75c10f18aefed/docs_src/src/static/overpass-400.woff2


--------------------------------------------------------------------------------
/docs_src/src/static/overpass-600.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AlexxNB/svelte-chota/0b4d259cec6a88f549fc8197bcf75c10f18aefed/docs_src/src/static/overpass-600.woff2


--------------------------------------------------------------------------------
/docs_src/src/theme.css:
--------------------------------------------------------------------------------
 1 | /* Theme tunning: for full list ov variables visit the https://alexxnb.github.io/svelte-docs/theming */
 2 | @import "./font.css";
 3 | 
 4 | :root{
 5 | 
 6 |     --primary: #14854F;
 7 |     --font: 'Overpass',sans-serif
 8 | }
 9 | 
10 | body{
11 |     font-weight: 400;
12 | }
13 | 
14 | h1,h2,h3,h4,h5,strong,b{
15 |     font-weight: 500;
16 | }


--------------------------------------------------------------------------------
/docs_src/svelte-docs.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |     // if you will serve docs in subdirictory use '/subdir/'
 3 |     basepath: '/svelte-chota/',
 4 | 
 5 |     // theme 
 6 |     theme: 'light',
 7 | 
 8 |     title: {
 9 |         // constant part of page title
10 |         main: 'Svelte-Chota UI Components',
11 | 
12 |         // use first header's content as a part of page's title 
13 |         // it looks for `# Header` and `## Header` on the current page
14 |         header: true,
15 |     },    
16 | 
17 |     // URL to your favicon
18 |     favicon: 'static/favicon.png',
19 |  
20 |     pathes: {
21 |         // directory for files, generated in development mode 
22 |         dev: '__DOCS__/dev',
23 | 
24 |         // directory for builted documentaton
25 |         build: '__DOCS__/dist',
26 |     },
27 |     
28 |     aliases:{
29 |         // Virtual packages 
30 |         // <virtual_package_name>: <local_path>,
31 |         //
32 |         // Ex1: './Button.svelte': './../dist/Button.svelte',
33 |         // Ex2: 'mylib': './../dist/index.js', (don't miss `index` and `.js` at the end!)
34 |         //
35 |         //  Then you can use:
36 |         //  import Button from './Button.svelte';
37 |         //  import { Input } from 'mylib';
38 |         'svelte-chota': './../cmp/index.js'
39 |     },
40 |     
41 |     preprocess: [
42 |         // preprocessors for Svelte if needed in Examples
43 |         // syntax same as for `preprocess` option in `rollup-plugin-svelte`
44 |         // Ex:  Import preprocessor at top of the config file:
45 |         //          import {markdown} from 'svelte-preprocess-markdown';
46 |         //      Then add it here:
47 |         //          markdown({filetype: 'svelte'}),
48 | 
49 |     ]
50 | 
51 | }


--------------------------------------------------------------------------------
/esbuild.js:
--------------------------------------------------------------------------------
 1 | const esbuild = require('esbuild');
 2 | const sveltePlugin = require('esbuild-svelte');
 3 | const pkg = require('./package.json');
 4 | 
 5 | (async ()=>{
 6 |     await esbuild.build({
 7 |         entryPoints: ['cmp/index.js'],
 8 |         bundle: true,
 9 |         outfile: pkg.module,
10 |         format: 'esm',
11 |         minify: true,
12 |         external: [
13 |             'svelte',
14 |             'svelte/*'
15 |         ],
16 |         plugins: [sveltePlugin({compileOptions:{
17 |             dev: false,
18 |             css: true
19 | 		}})]
20 |     });
21 | 
22 |     await esbuild.build({
23 |         entryPoints: ['cmp/index.js'],
24 |         bundle: true,
25 |         outfile: pkg.main,
26 |         format: 'cjs',
27 |         minify: true,
28 |         external: [
29 |             'svelte',
30 |             'svelte/*'
31 |         ],
32 |         plugins: [sveltePlugin({compileOptions:{
33 |             dev: false,
34 |             css: true
35 | 		  }})]
36 |     });
37 | })()


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "svelte-chota",
 3 |   "module": "dist/index.mjs",
 4 |   "main": "dist/index.js",
 5 |   "svelte": "cmp/index.js",
 6 |   "scripts": {
 7 |     "docs-dev": "cd ./docs_src && npm run dev",
 8 |     "docs-build": "cd ./docs_src && npm run build",
 9 |     "build": "node esbuild",
10 |     "prepublishOnly": "npm run build"
11 |   },
12 |   "keywords": [
13 |     "svelte",
14 |     "chota",
15 |     "svelte ui kit",
16 |     "ui",
17 |     "ui kit",
18 |     "sveltejs"
19 |   ],
20 |   "files": [
21 |     "cmp",
22 |     "dist"
23 |   ],
24 |   "devDependencies": {
25 |     "esbuild": "^0.8.31",
26 |     "esbuild-svelte": "^0.4.0",
27 |     "svelte": "^3.31.2"
28 |   },
29 |   "description": "Svelte UI components based on super lightweight chota CSS framework.",
30 |   "version": "1.8.6",
31 |   "repository": {
32 |     "type": "git",
33 |     "url": "git+https://github.com/AlexxNB/svelte-chota.git"
34 |   },
35 |   "author": "Alexey Schebelev",
36 |   "license": "MIT",
37 |   "bugs": {
38 |     "url": "https://github.com/AlexxNB/svelte-chota/issues"
39 |   },
40 |   "homepage": "https://alexxnb.github.io/svelte-chota"
41 | }
42 | 


--------------------------------------------------------------------------------