Added a radio knob

README.md

@@ -1,3 +1,5 @@
+**Note: in this fork of svelte-knobby, I added a select, radio button and the ability to drag your window around** 
+
 # svelte-knobby
 
 Add knobs to your Svelte apps. [Demo](https://svelte.dev/repl/85c0f69007524dd9a45a8bf72d2401ba)
@@ -21,6 +23,8 @@ const text = knobby.text('my text control', 'text');
 const checked = knobby.checkbox('my checkbox control', true);
 const color = knobby.color('my color control', '#ff3e00');
 const number = knobby.range('my range control', 50, { min: 0, max: 100, step: 1 });
+const radio = knobby.radio('my radio control', 'one', { options: ['one','two','three'] });
+const select = knobby.select('my select control', 'a', { options: ['a','b','c'] });
 ```
 
 Controls are added to the control panel when their stores are subscribed to, and removed when there are no more subscribers.

package.json

@@ -1,6 +1,7 @@
 {
-	"name": "svelte-knobby",
-	"version": "0.0.8",
+	"name": "svelte-knobby-wolfr",
+	"description": "based on svelte-knobby 0.0.8",
+	"version": "0.0.1",
 	"scripts": {
 		"dev": "svelte-kit dev",
 		"build": "svelte-kit build",

src/lib/Knobby.svelte

@@ -1,22 +1,33 @@
 <script>
 	export let knobs = [];
 
+	import { draggable } from './draggable.js'
+	import { dragCoords } from './dragcoords.js';
+
+	function dragMove(event) {
+		dragCoords.update($dragCoords => ([
+			$dragCoords[0] + event.detail.dx,
+			$dragCoords[1] + event.detail.dy
+		]));
+	}
+
 </script>
 
-<div class="knobby">
+<div class="knobby" style="transform: translate({$dragCoords[0]}px,{$dragCoords[1]}px)">
+	<button class="knobby-button move-button" use:draggable on:dragmove={dragMove}>Drag to move</button>
 	{#each knobs as { component, ...knob }}
 		<svelte:component this={component} {...knob} />
 	{/each}
 </div>
 
 <style>
+
 	.knobby {
 		--bg: #f4f4f4;
 		--fg: #333;
 		--light: rgba(255, 255, 255, 0.2);
 		--dark: rgba(0, 0, 0, 0.05);
 		--border-radius: 2px;
-
 		position: fixed;
 		z-index: 99999;
 		top: 1rem;
@@ -44,4 +55,26 @@
 		color: var(--fg);
 	}
 
+	:global(.knobby-button) {
+		width: calc(100% - 0.5rem);
+		border-radius: 16px;
+		background: var(--bg);
+		box-shadow: 5px 5px 5px var(--dark), -5px -5px 5px var(--light);
+		border: 1px solid var(--dark);
+		border-radius: var(--border-radius);
+		font: inherit;
+		margin: 0.5rem 0 0.5rem 0.5rem;
+		padding: 0.25rem 0.5rem;
+	}
+
+	:global(.knobby-button:active) {
+		box-shadow: inset 2px 2px 2px var(--dark), inset -2px -2px 2px var(--light);
+	}
+
+	.move-button {
+		cursor: move;
+		display: block;
+		width: calc(100% - 1rem);
+	}
+
 </style>

src/lib/dragcoords.js

@@ -0,0 +1,3 @@
+import { writable } from 'svelte/store';
+
+export const dragCoords = writable([0,0]);

src/lib/draggable.js

@@ -0,0 +1,47 @@
+export function draggable(node) {
+	let x;
+	let y;
+
+	function handleMousedown(event) {
+		x = event.clientX;
+		y = event.clientY;
+
+		node.dispatchEvent(new CustomEvent('dragstart', {
+			detail: { x, y }
+		}));
+
+		window.addEventListener('mousemove', handleMousemove);
+		window.addEventListener('mouseup', handleMouseup);
+	}
+
+	function handleMousemove(event) {
+		const dx = event.clientX - x;
+		const dy = event.clientY - y;
+		x = event.clientX;
+		y = event.clientY;
+
+		node.dispatchEvent(new CustomEvent('dragmove', {
+			detail: { x, y, dx, dy }
+		}));
+	}
+
+	function handleMouseup(event) {
+		x = event.clientX;
+		y = event.clientY;
+
+		node.dispatchEvent(new CustomEvent('dragend', {
+			detail: { x, y }
+		}));
+
+		window.removeEventListener('mousemove', handleMousemove);
+		window.removeEventListener('mouseup', handleMouseup);
+	}
+
+	node.addEventListener('mousedown', handleMousedown);
+
+	return {
+		destroy() {
+			node.removeEventListener('mousedown', handleMousedown);
+		}
+	};
+}

src/lib/index.js

@@ -5,7 +5,9 @@ import Group from './Group.svelte';
 import Action from './knobs/Action.svelte';
 import Checkbox from './knobs/Checkbox.svelte';
 import Color from './knobs/Color.svelte';
+import Radio from './knobs/Radio.svelte';
 import Range from './knobs/Range.svelte';
+import Select from './knobs/Select.svelte';
 import Text from './knobs/Text.svelte';
 
 let knobby;
@@ -75,12 +77,18 @@ export const checkbox = knobber(Checkbox);
 /** @type {import('./types').Knobber<string>} */
 export const color = knobber(Color);
 
+/** @type {import('./types').Knobber<string, { options?: array }>} */
+export const radio = knobber(Radio);
+
 /** @type {import('./types').Knobber<number, { min?: number, max?: number, step?: number }>} */
 export const range = knobber(Range);
 
 /** @type {import('./types').Knobber<string>} */
 export const text = knobber(Text);
 
+/** @type {import('./types').Knobber<string, { options: array}>} */
+export const select = knobber(Select);
+
 /**
  * @param {string} label
  * @param {() => void} action

src/lib/knobs/Action.svelte

@@ -6,23 +6,5 @@
 
 </script>
 
-<button on:click={action}>{label}</button>
+<button class="knobby-button" on:click={action}>{label}</button>
 
-<style>
-	button {
-		width: calc(100% - 0.5rem);
-		border-radius: 16px;
-		background: var(--bg);
-		box-shadow: 5px 5px 5px var(--dark), -5px -5px 5px var(--light);
-		border: 1px solid var(--dark);
-		border-radius: var(--border-radius);
-		font: inherit;
-		margin: 0.5rem 0 0.5rem 0.5rem;
-		padding: 0.25rem 0.5rem;
-	}
-
-	button:active {
-		box-shadow: inset 2px 2px 2px var(--dark), inset -2px -2px 2px var(--light);
-	}
-
-</style>

src/lib/knobs/Radio.svelte

@@ -0,0 +1,19 @@
+<script>
+	import Knob from '../Knob.svelte';
+
+	export let label;
+	export let options;
+	export let store;
+
+</script>
+
+<Knob {label}>
+
+	{#each options.options as option}
+		<label>
+			<input id={option} type="radio" bind:group={$store} value={option} />
+			{option}
+		</label>
+	{/each}
+
+</Knob>

src/lib/knobs/Select.svelte

@@ -0,0 +1,16 @@
+<script>
+	import Knob from '../Knob.svelte';
+
+	export let label;
+	export let store;
+	export let options;
+
+</script>
+
+<Knob {label}>
+	<select bind:value={$store}>
+		{#each options.options as option}
+			<option>{option}</option>
+		{/each}
+	</select>
+</Knob>

src/routes/_/X.svelte

@@ -8,13 +8,19 @@
 
 	const bg = knobby.color('background', '#DCFF7A');
 	const fg = knobby.color('foreground', '#5000C7');
+
+	const c = knobby.radio('style', 'one', { options: [ 'one', 'two', 'three' ]} );
+
 </script>
 
 <div class="x" style="--bg: {$bg}; --fg: {$fg}">
 	<h2>X</h2>
 
 	<p>a: {$a}</p>
 	<p>b: {$b}</p>
+
+	<p>c: {$c}</p>
+
 </div>
 
 <style>

src/routes/_/Y.svelte

@@ -8,13 +8,18 @@
 
 	const bg = knobby.color('background', '#557899');
 	const fg = knobby.color('foreground', '#ccee33');
+
+	const e = knobby.select('e', 'a', { options: ['a','b','c','d']});
+
 </script>
 
 <div class="y" style="--bg: {$bg}; --fg: {$fg}">
 	<h2>Y</h2>
 
 	<p>c: {$c}</p>
 	<p>d: {$d}</p>
+	<p>e: {$e}</p>
+
 </div>
 
 <style>