Add InputSeed and InputCheckbox

src/components/App.vue

@@ -34,7 +34,8 @@ const {appStorage, registerActions, performAction} = useTweeq(
 )
 
 const testString = ref('Hello World')
-const testNumber = ref(100)
+const testNumber = ref(Math.PI)
+const testBoolean = ref(false)
 
 // interface PaperDesc {
 // 	id?: string
@@ -408,11 +409,17 @@ window.addEventListener('drop', async e => {
 					<Tq.InputString v-model="testString" />
 				</Tq.Parameter>
 				<Tq.Parameter label="Grow">
-					<Tq.InputNumber v-model="testNumber" :min="0" :max="100" />
+					<Tq.InputNumber v-model="testNumber" :min="0" :max="Math.PI * 2" />
 				</Tq.Parameter>
 				<Tq.Parameter label="Degrees">
 					<Tq.InputRotery v-model="testNumber" />
 				</Tq.Parameter>
+				<Tq.Parameter label="Checkbox">
+					<Tq.InputCheckbox v-model="testBoolean" />
+				</Tq.Parameter>
+				<Tq.Parameter label="Seed">
+					<Tq.InputSeed v-model="testNumber" />
+				</Tq.Parameter>
 			</Tq.ParameterGrid>
 		</Tq.FloatingPane>
 	</div>

src/tweeq/InputCheckbox/InputCheckbox.vue

@@ -0,0 +1,115 @@
+<script lang="ts" setup>
+import _ from 'lodash'
+import {ref} from 'vue'
+
+import SvgIcon from '../SvgIcon.vue'
+
+interface Props {
+	modelValue: boolean
+	label?: string
+}
+
+defineProps<Props>()
+
+const emit = defineEmits<{
+	'update:modelValue': [boolean]
+}>()
+
+const id = ref(_.uniqueId('InputCheckbox_'))
+
+function onInput(e: InputEvent) {
+	const value = (e.target as HTMLInputElement).checked
+	emit('update:modelValue', value)
+}
+</script>
+
+<template>
+	<div class="InputCheckbox">
+		<div class="InputCheckbox__checkbox">
+			<input
+				:id="id"
+				:checked="!!modelValue"
+				class="InputCheckbox__input"
+				type="checkbox"
+				@input="onInput"
+			/>
+			<div class="InputCheckbox__frame">
+				<SvgIcon mode="block" class="InputCheckbox__checkmark">
+					<path d="M5,19l8,6L27,9" />
+				</SvgIcon>
+			</div>
+		</div>
+		<label v-if="label" class="InputCheckbox__label" :for="id">
+			{{ label }}
+		</label>
+	</div>
+</template>
+
+<style lang="stylus">
+@import '../common.styl'
+
+.InputCheckbox
+	display flex
+	align-items center
+
+	&__checkbox
+		position relative
+		width var(--tq-input-height)
+		height var(--tq-input-height)
+
+	&__input
+		display block
+		width var(--tq-input-height)
+		height var(--tq-input-height)
+		opacity 0
+
+	&__frame
+		position absolute
+		top 0
+		left 0
+		width 100%
+		height 100%
+		border-radius var(--tq-input-border-radius)
+		background var(--tq-color-input)
+		color transparent
+		color var(--tq-color-primary)
+		line-height 1em
+		pointer-events none
+
+	&__checkmark
+		position relative
+		top 0%
+		left 0%
+		width 100%
+		height 100%
+		color var(--tq-color-primary)
+		text-align center
+		line-height var(--tq-input-height)
+		pointer-events none
+		stroke-dasharray 32
+		stroke-dashoffset 32
+		stroke-width 3px
+		stroke-linecap round
+		stroke-linejoin round
+		hover-transition(stroke-dashoffset)
+
+	&__input:checked + &__frame > &__checkmark
+		stroke-dashoffset 0
+
+
+	// Hover and Focus
+	&:hover &__frame,
+	&:focus-within &__frame
+		box-shadow inset 0 0 0 1px var(--tq-color-primary)
+		color var(--tq-color-primary)
+
+	// Label
+	&__label
+		margin-left 0.3em
+		color base16('05')
+
+	// Exp
+	&.exp > &__frame
+		border-color var(--red)
+		color var(--red)
+</style>

src/tweeq/InputCheckbox/index.ts

@@ -0,0 +1,2 @@
+import InputCheckbox from './InputCheckbox.vue'
+export default InputCheckbox

src/tweeq/InputNumber/InputNumber.vue

@@ -34,7 +34,7 @@ const root = ref<HTMLElement | null>(null)
 const input = ref<HTMLInputElement | null>(null)
 
 const local = ref(props.modelValue)
-const display = ref(props.modelValue.toString())
+const display = ref(toFixed(props.modelValue, props.precision))
 
 const {left, top, width, height, right} = useElementBounding(root)
 

src/tweeq/InputSeed/InputSeed.vue

@@ -0,0 +1,107 @@
+<template>
+	<button class="InputSeed" @click="shuffle">
+		<SvgIcon
+			mode="block"
+			class="InputSeed__icon"
+			:style="{transform: `rotate(${iconRot}deg)`}"
+		>
+			<circle v-show="iconNum === 1" cx="16" cy="16" r="1" />
+			<g v-show="iconNum === 2">
+				<circle cx="11" cy="21" r="1" />
+				<circle cx="21" cy="11" r="1" />
+			</g>
+			<g v-show="iconNum === 3">
+				<circle cx="16" cy="16" r="1" />
+				<circle cx="10" cy="22" r="1" />
+				<circle cx="22" cy="10" r="1" />
+			</g>
+			<g v-show="iconNum === 4">
+				<circle cx="10" cy="22" r="1" />
+				<circle cx="22" cy="10" r="1" />
+				<circle cx="10" cy="10" r="1" />
+				<circle cx="22" cy="22" r="1" />
+			</g>
+			<g v-show="iconNum === 5">
+				<circle cx="16" cy="16" r="1" />
+				<circle cx="10" cy="22" r="1" />
+				<circle cx="22" cy="10" r="1" />
+				<circle cx="10" cy="10" r="1" />
+				<circle cx="22" cy="22" r="1" />
+			</g>
+			<g v-show="iconNum === 6">
+				<circle cx="10" cy="10" r="1" />
+				<circle cx="10" cy="16" r="1" />
+				<circle cx="10" cy="22" r="1" />
+				<circle cx="22" cy="10" r="1" />
+				<circle cx="22" cy="16" r="1" />
+				<circle cx="22" cy="22" r="1" />
+			</g>
+			<path
+				d="M24,29H8c-2.8,0-5-2.2-5-5V8c0-2.8,2.2-5,5-5h16c2.8,0,5,2.2,5,5v16C29,26.8,26.8,29,24,29z"
+			/>
+		</SvgIcon>
+	</button>
+</template>
+
+<script lang="ts">
+import _ from 'lodash'
+import {defineComponent, ref} from 'vue'
+
+import SvgIcon from '../SvgIcon.vue'
+
+export default defineComponent({
+	name: 'InputSeed',
+	components: {
+		SvgIcon,
+	},
+	props: {
+		min: {
+			type: Number,
+			default: 0,
+		},
+		max: {
+			type: Number,
+			default: 1,
+		},
+	},
+	setup(props, context) {
+		const iconRot = ref(0)
+		const iconNum = ref(3)
+
+		function shuffle() {
+			iconRot.value += 90
+			const v = _.random(props.min, props.max, true)
+
+			const t = (v - props.min) / (props.max - props.min)
+			iconNum.value = _.clamp(Math.floor(t * 6) + 1, 1, 6)
+
+			context.emit('update:modelValue', v)
+		}
+
+		return {shuffle, iconRot, iconNum}
+	},
+})
+</script>
+
+<style lang="stylus">
+@import '../common.styl'
+
+.InputSeed
+	display block
+	padding 0
+	width var(--tq-input-height)
+	height var(--tq-input-height)
+	border-radius var(--tq-input-border-round)
+	background-size 100% 100%
+	color var(--tq-color-text)
+	text-align center
+	cursor pointer
+
+	&__icon
+		width var(--tq-input-height)
+		height var(--tq-input-height)
+		transition transform 0.3s cubic-bezier(0.19, 1.6, 0.42, 1)
+
+	&:hover, &:focus
+		color var(--tq-color-primary)
+</style>

src/tweeq/InputSeed/index.ts

@@ -0,0 +1,2 @@
+import InputSeed from './InputSeed.vue'
+export default InputSeed

src/tweeq/index.ts

@@ -3,8 +3,10 @@ export {useTweeq} from './useTweeq'
 import ColorIcon from './ColorIcon'
 import CommandPalette from './CommandPalette'
 import FloatingPane from './FloatingPane'
+import InputCheckbox from './InputCheckbox'
 import InputNumber from './InputNumber'
 import InputRotery from './InputRotery'
+import InputSeed from './InputSeed'
 import InputString from './InputString'
 import Markdown from './Markdown'
 import MonacoEditor, {ErrorInfo} from './MonacoEditor'
@@ -19,8 +21,10 @@ export default {
 	ColorIcon,
 	CommandPalette,
 	FloatingPane,
+	InputCheckbox,
 	InputNumber,
 	InputRotery,
+	InputSeed,
 	InputString,
 	Markdown,
 	MonacoEditor,