Skip to content

Commit 00360d6

Browse files
metonymmetonym
committed
v0.1.0
0 parents  commit 00360d6

File tree

62 files changed

+3321
-0
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

62 files changed

+3321
-0
lines changed

‎.gitignore

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
.DS_Store
2+
*.tgz
3+
/lib
4+
/node_modules
5+
yarn-debug.log*
6+
yarn-error.log*

‎.travis.yml

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
language: node_js
2+
node_js: 10
3+
cache: yarn
4+
scripts:
5+
- rollup -c

‎CHANGELOG.md

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
# Changelog
2+
3+
All notable changes to this project will be documented in this file.
4+
5+
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
6+
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
7+
8+
## [0.1.0](https://github.com/metonym/svelte-radio/releases/tag/v0.1.0) - 2020-04-13
9+
10+
- Initial release

‎LICENSE

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2020-present Eric Liu
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.

‎README.md

+86
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
# svelte-radio
2+
3+
[![NPM][npm]][npm-url]
4+
[![Build][build]][build-badge]
5+
6+
> Customizable radio button component for Svelte.
7+
8+
## Install
9+
10+
```bash
11+
yarn add -D svelte-radio
12+
```
13+
14+
## Usage
15+
16+
```html
17+
<script>
18+
import Radio from "svelte-radio";
19+
20+
let value = "1";
21+
</script>
22+
23+
<Radio.Group bind:value>
24+
<Radio.Button label="Label 1" value="1" />
25+
<Radio.Button label="Label 2" value="2" />
26+
<Radio.Button label="Label 3" value="3" />
27+
</Radio.Group>
28+
```
29+
30+
## API
31+
32+
### `Radio.Group`
33+
34+
| Property name | Value |
35+
| :--------------- | :-------------------------------------------- |
36+
| legend | `string` |
37+
| value | `string` (default: `undefined`) |
38+
| `...$$restProps` | (forward to the top-level `fieldset` element) |
39+
40+
### `Radio.Button`
41+
42+
| Property name | Value |
43+
| :--------------- | :-------------------------------------------- |
44+
| label | `string` |
45+
| value | `string` (default: `undefined`) |
46+
| checked | `boolean` (default: `false` |
47+
| `...$$restProps` | (forward to the second-level `input` element) |
48+
49+
## Forwarded events
50+
51+
### `Radio.Group`
52+
53+
| Event name | Description |
54+
| :---------- | :--------------------------------- |
55+
| `on:change` | triggered if the selection changes |
56+
57+
```html
58+
<Radio.Group on:change={({ detail }) => { console.log(detail); }} />
59+
<!--
60+
{
61+
"selected": {
62+
"id": string,
63+
"value": string,
64+
"label": string,
65+
"checked": true
66+
}
67+
}
68+
-->
69+
```
70+
71+
### `Radio.Button`
72+
73+
```html
74+
<Radio.Button on:focus on:blur on:change on:keydown />
75+
```
76+
77+
## [Changelog](CHANGELOG.md)
78+
79+
## License
80+
81+
[MIT](LICENSE)
82+
83+
[npm]: https://img.shields.io/npm/v/svelte-radio.svg?color=blue
84+
[npm-url]: https://npmjs.com/package/svelte-radio
85+
[build]: https://travis-ci.com/metonym/svelte-radio.svg?branch=master
86+
[build-badge]: https://travis-ci.com/metonym/svelte-radio

‎demo/.gitignore

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
.DS_Store
2+
/__sapper__
3+
/**/node_modules
4+
/public
5+
yarn-error.log

‎demo/README.md

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# sapper-template
2+
3+
> Custom Sapper webpack template based on the default [Sapper](https://github.com/sveltejs/sapper) template deployable to GitHub Pages.
4+
5+
This template uses a fork of sapper (@metonym/sapper) that removes the service worker and exports the static build to `public`.
6+
7+
## Getting started
8+
9+
Clone the repo and install its dependencies.
10+
11+
```bash
12+
cd sapper-webpack
13+
yarn
14+
```
15+
16+
## Available scripts
17+
18+
### `yarn develop`
19+
20+
Runs the project in development mode. Watches `src` for changes.
21+
22+
### `yarn build`
23+
24+
Exports the sapper app to the `public` folder.

‎demo/gh-pages.js

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
require("gh-pages").publish("public/svelte-radio");

‎demo/package.json

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
{
2+
"version": "0.0.1",
3+
"private": true,
4+
"scripts": {
5+
"develop": "sapper dev",
6+
"build": "sapper export --basepath svelte-radio",
7+
"deploy": "node gh-pages"
8+
},
9+
"dependencies": {
10+
"polka": "next",
11+
"sirv": "^0.4.0"
12+
},
13+
"devDependencies": {
14+
"@metonym/sapper": "^0.27.12",
15+
"gh-pages": "^2.2.0",
16+
"svelte": "^3.0.0",
17+
"svelte-loader": "^2.9.0",
18+
"webpack": "^4.7.0",
19+
"svelte-radio": "../"
20+
}
21+
}

‎demo/src/client.js

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import * as sapper from "@sapper/app";
2+
3+
sapper.start({ target: document.querySelector("#sapper") });

‎demo/src/routes/_error.svelte

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<script>
2+
export let status;
3+
export let error;
4+
5+
const dev = process.env.NODE_ENV === "development";
6+
</script>
7+
8+
<svelte:head>
9+
<title>{status}</title>
10+
</svelte:head>
11+
12+
<h1>{status}</h1>
13+
14+
<p>{error.message}</p>
15+
16+
{#if dev && error.stack}
17+
<pre>{error.stack}</pre>
18+
{/if}

‎demo/src/routes/_layout.svelte

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<style>
2+
:global(*) {
3+
margin: 0;
4+
padding: 0;
5+
box-sizing: border-box;
6+
}
7+
8+
:global(body) {
9+
font-family: "Public Sans", sans-serif;
10+
font-weight: 500;
11+
overflow-y: scroll;
12+
letter-spacing: 0.01rem;
13+
color: #161616;
14+
}
15+
16+
main {
17+
position: relative;
18+
max-width: 36rem;
19+
padding: 1rem;
20+
margin: 0 auto;
21+
}
22+
</style>
23+
24+
<main>
25+
<slot />
26+
</main>

‎demo/src/routes/index.svelte

+147
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,147 @@
1+
<script>
2+
import Radio from "svelte-radio";
3+
4+
let value = "2";
5+
let events = [];
6+
7+
function logEvent(type, detail) {
8+
events = [...events, { type, detail }];
9+
}
10+
</script>
11+
12+
<style>
13+
:global(.svelte-radio-group) {
14+
border: 2px solid #e0e0e0;
15+
padding: 1rem;
16+
}
17+
18+
:global(.svelte-radio) {
19+
margin-bottom: 0.5rem;
20+
}
21+
22+
:global(.svelte-radio label) {
23+
margin-left: 0.25rem;
24+
}
25+
26+
h2 {
27+
font-size: 0.75rem;
28+
font-weight: 800;
29+
text-transform: uppercase;
30+
letter-spacing: 0.1rem;
31+
margin-bottom: 0.5rem;
32+
margin-top: 1rem;
33+
}
34+
35+
.padding {
36+
padding: 1rem;
37+
}
38+
39+
.empty {
40+
padding: 0.5rem 0;
41+
color: #6f6f6f;
42+
}
43+
44+
ul {
45+
list-style: none;
46+
}
47+
48+
li {
49+
color: #393939;
50+
padding: 0.5rem 0;
51+
border-bottom: 1px solid #e0e0e0;
52+
}
53+
54+
.tag {
55+
font-size: 0.875rem;
56+
padding: 0.25rem;
57+
color: #393939;
58+
background-color: #f4f4f4;
59+
border-radius: 0.25rem;
60+
}
61+
62+
.tag pre {
63+
margin: 0.5rem 0;
64+
padding: 0.5rem 1rem;
65+
border-radius: 0.25rem;
66+
background-color: #f4f4f4;
67+
}
68+
69+
.tag:before {
70+
content: "“";
71+
}
72+
73+
.tag:after {
74+
content: "”";
75+
}
76+
77+
button {
78+
background: none;
79+
border: 0;
80+
cursor: pointer;
81+
font: inherit;
82+
font-size: 0.875rem;
83+
padding: 0.5rem 1rem;
84+
border-radius: 0.25rem;
85+
outline: 2px solid #e0e0e0;
86+
margin-right: 0.5rem;
87+
margin-bottom: 0.25rem;
88+
}
89+
90+
button:active {
91+
outline-color: #0f62fe;
92+
color: #0f62fe;
93+
}
94+
95+
button:focus {
96+
outline-color: #0f62fe;
97+
}
98+
99+
.buttons {
100+
margin-top: 1rem;
101+
}
102+
</style>
103+
104+
<svelte:head>
105+
<title>svelte-radio</title>
106+
</svelte:head>
107+
108+
<Radio.Group
109+
bind:value
110+
on:change={({ detail }) => {
111+
logEvent('change', detail);
112+
}}>
113+
<Radio.Button label="Label 1" value="1" />
114+
<Radio.Button label="Label 2" value="2" />
115+
<Radio.Button label="Label 3" value="3" />
116+
</Radio.Group>
117+
118+
<div class="padding">
119+
<h2>Bound value</h2>
120+
<span class="tag">{value}</span>
121+
</div>
122+
123+
<div class="buttons">
124+
<button
125+
type="button"
126+
on:click={() => {
127+
value = '1';
128+
}}>
129+
Set value to 1
130+
</button>
131+
132+
</div>
133+
134+
<ul class="padding">
135+
<h2>Events</h2>
136+
{#if events.length === 0}
137+
<div class="empty">No events.</div>
138+
{/if}
139+
{#each events as event}
140+
<li>
141+
{event.type}
142+
<span class="tag">
143+
<pre>{JSON.stringify(event.detail, null, 2)}</pre>
144+
</span>
145+
</li>
146+
{/each}
147+
</ul>

0 commit comments

Comments
 (0)