feat(Toggle): new component

playground-vue/src/app.vue

@@ -64,6 +64,7 @@ const components = [
   'textarea',
   'timeline',
   'toast',
+  'toggle',
   'tooltip',
   'tree'
 ]

playground/app/app.vue

@@ -64,6 +64,7 @@ const components = [
   'textarea',
   'timeline',
   'toast',
+  'toggle',
   'tooltip',
   'tree'
 ]

playground/app/pages/components/toggle.vue

@@ -0,0 +1,89 @@
+<script lang="ts" setup>
+import theme from '#build/ui/button'
+
+const sizes = Object.keys(theme.variants.size) as Array<keyof typeof theme.variants.size>
+const colors = Object.keys(theme.variants.color) as Array<keyof typeof theme.variants.color>
+const variants = Object.keys(theme.variants.variant) as Array<keyof typeof theme.variants.variant>
+
+const state = ref(false)
+</script>
+
+<template>
+  <div class="flex flex-col gap-2 items-center">
+    <div class="flex items-center gap-1.5">
+      <UToggle
+        v-for="size in sizes"
+        :key="size"
+        v-model="state"
+        icon="i-lucide-x"
+        :size="size"
+      />
+    </div>
+    <div class="flex items-center gap-1.5">
+      <UToggle
+        v-for="size in sizes"
+        :key="size"
+        v-model="state"
+        label="toggle"
+        icon="i-lucide-x"
+        :size="size"
+      />
+    </div>
+    <div class="flex items-center gap-1.5">
+      <UToggle
+        v-for="color in colors"
+        :key="color"
+        v-model="state"
+        icon="i-lucide-x"
+        :color="color"
+      />
+    </div>
+    <div class="flex items-center gap-1.5">
+      <UToggle
+        v-for="color in colors"
+        :key="color"
+        v-model="state"
+        icon="i-lucide-x"
+        :active-color="color"
+      />
+    </div>
+    <div class="flex items-center gap-1.5">
+      <UToggle
+        v-for="variant in variants"
+        :key="variant"
+        v-model="state"
+        icon="i-lucide-x"
+        :variant="variant"
+      />
+    </div>
+    <div class="flex items-center gap-1.5">
+      <UToggle
+        v-for="variant in variants"
+        :key="variant"
+        v-model="state"
+        icon="i-lucide-x"
+        :active-variant="variant"
+      />
+    </div>
+    <div class="flex items-center gap-1.5">
+      <UToggle
+        v-for="size in sizes"
+        :key="size"
+        v-model="state"
+        icon="i-lucide-x"
+        :size="size"
+        class="rounded-none"
+      />
+    </div>
+    <div class="flex items-center gap-1.5">
+      <UToggle
+        v-for="size in sizes"
+        :key="size"
+        v-model="state"
+        icon="i-lucide-x"
+        :size="size"
+        :ui="{ base: 'rounded-none' }"
+      />
+    </div>
+  </div>
+</template>

src/runtime/components/Toggle.vue

@@ -0,0 +1,74 @@
+<script lang="ts">
+import { useForwardProps, type ToggleProps as RekaToggleProps } from 'reka-ui'
+import type { ButtonProps } from './Button.vue'
+
+export interface ToggleProps extends
+  Pick<RekaToggleProps, 'disabled' | 'name' | 'required' | 'defaultValue'>,
+  Pick<ButtonProps, 'label' | 'icon' | 'trailingIcon' | 'color' | 'variant' | 'activeColor' | 'activeVariant' | 'size' | 'class' | 'ui'> {
+  as?: any
+  loading?: boolean
+}
+
+export type ToggleEmits = {
+  change: [payload: Event]
+}
+</script>
+
+<script setup lang="ts">
+import { useId } from 'vue'
+import { reactivePick } from '@vueuse/core'
+import { useFormField } from '../composables/useFormField'
+import { Toggle } from 'reka-ui'
+
+defineOptions({ inheritAttrs: false })
+const props = withDefaults(defineProps<ToggleProps>(), {
+  color: 'neutral',
+  variant: 'soft',
+  activeVariant: 'solid'
+})
+const emits = defineEmits<ToggleEmits>()
+
+const modelValue = defineModel<boolean>({ default: undefined })
+
+const rootProps = useForwardProps(reactivePick(props, 'required', 'defaultValue'))
+
+const { id: _id, emitFormChange, emitFormInput, size, name, disabled, ariaAttrs } = useFormField<ToggleProps>(props)
+
+const id = _id.value ?? useId()
+
+function onUpdate(value: boolean) {
+  // @ts-expect-error - 'target' does not exist in type 'EventInit'
+  const event = new Event('change', { target: { value } })
+  emits('change', event)
+  emitFormChange()
+  emitFormInput()
+}
+</script>
+
+<!-- eslint-disable vue/no-template-shadow -->
+<template>
+  <Toggle
+    :id="id"
+    v-bind="{ ...rootProps, ...$attrs, ...ariaAttrs }"
+    v-model="modelValue"
+    as-child
+    :name="name"
+    :disabled="disabled"
+    @update:model-value="onUpdate"
+  >
+    <template #default="{ modelValue }">
+      <UButton
+        :icon="icon"
+        :label="label"
+        :color="color"
+        :variant="variant"
+        :active-color="activeColor"
+        :active-variant="activeVariant"
+        :active="modelValue"
+        :size="size"
+        :class="[props.class]"
+        :ui="ui"
+      />
+    </template>
+  </Toggle>
+</template>

src/runtime/types/index.ts

@@ -50,6 +50,7 @@ export * from '../components/Textarea.vue'
 export * from '../components/Timeline.vue'
 export * from '../components/Toast.vue'
 export * from '../components/Toaster.vue'
+export * from '../components/Toggle.vue'
 export * from '../components/Tooltip.vue'
 export * from '../components/Tree.vue'
 export * from './form'

test/components/Toggle.spec.ts

@@ -0,0 +1,29 @@
+import { describe, it, expect } from 'vitest'
+import Toggle from '../../src/runtime/components/Toggle.vue'
+import type { ToggleProps } from '../../src/runtime/components/Toggle.vue'
+import ComponentRender from '../component-render'
+import theme from '#build/ui/button'
+
+describe('Toggle', () => {
+  const sizes = Object.keys(theme.variants.size) as any
+  const variants = Object.keys(theme.variants.variant) as any
+  const colors = Object.keys(theme.variants.color) as any
+
+  it.each([
+    // Props
+    ['with label', { props: { label: 'Toggle' } }],
+    ...sizes.map((size: string) => [`with size ${size}`, { props: { label: 'Toggle', size } }]),
+    ...variants.map((variant: string) => [`with primary variant ${variant}`, { props: { label: 'Toggle', variant } }]),
+    ...colors.map((color: string) => [`with neutral color ${color}`, { props: { label: 'Toggle', color } }]),
+    ['with icon', { props: { icon: 'i-lucide-rocket' } }],
+    ['with leading and icon', { props: { leading: true, icon: 'i-lucide-arrow-left' } }],
+    ['with leadingIcon', { props: { leadingIcon: 'i-lucide-arrow-left' } }],
+    ['with trailing and icon', { props: { trailing: true, icon: 'i-lucide-arrow-right' } }],
+    ['with trailingIcon', { props: { trailingIcon: 'i-lucide-arrow-right' } }],
+    ['with class', { props: { label: 'Toggle', class: 'rounded-none' } }],
+    ['with ui', { props: { label: 'Toggle', ui: { base: 'rounded-none' } } }]
+  ])('renders %s correctly', async (nameOrHtml: string, options: { props?: ToggleProps }) => {
+    const html = await ComponentRender(nameOrHtml, options, Toggle)
+    expect(html).toMatchSnapshot()
+  })
+})