arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-21 15:31:46 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat(module)!: migrate to reka-ui (#2448)

Browse Source
This commit is contained in:
Benjamin Canac
2024-12-03 16:11:32 +01:00
committed by GitHub
parent c440c91a29
commit 81ac076219
229 changed files with 13487 additions and 13466 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/runtime/components/Switch.vue
View File

@@ -1,6 +1,6 @@
<script lang="ts">
import { tv, type VariantProps } from 'tailwind-variants'
import type { SwitchRootProps } from 'radix-vue'
import type { SwitchRootProps } from 'reka-ui'
import type { AppConfig } from '@nuxt/schema'
import _appConfig from '#build/app.config'
import theme from '#build/ui/switch'
@@ -13,7 +13,7 @@ const switchTv = tv({ extend: tv(theme), ...(appConfig.ui?.switch || {}) })
type SwitchVariants = VariantProps<typeof switchTv>
export interface SwitchProps extends Pick<SwitchRootProps, 'disabled' | 'id' | 'name' | 'required' | 'value'> {
export interface SwitchProps extends Pick<SwitchRootProps, 'disabled' | 'id' | 'name' | 'required' | 'value' | 'defaultValue'> {
/**
* The element or component this component should render as.
* @defaultValue 'div'
@@ -34,15 +34,12 @@ export interface SwitchProps extends Pick<SwitchRootProps, 'disabled' | 'id' | '
uncheckedIcon?: string
label?: string
description?: string
/** The state of the switch when it is initially rendered. Use when you do not need to control its state. */
defaultValue?: boolean
class?: any
ui?: PartialString<typeof switchTv.slots>
}
export interface SwitchEmits {
(e: 'update:modelValue', payload: boolean): void
(e: 'change', payload: Event): void
export type SwitchEmits = {
change: [payload: Event]
}
export interface SwitchSlots {
@@ -55,7 +52,7 @@ extendDevtoolsMeta({ defaultProps: { label: 'Switch me!' } })
<script setup lang="ts">
import { computed, useId } from 'vue'
import { SwitchRoot, SwitchThumb, useForwardProps, Label } from 'radix-vue'
import { Primitive, SwitchRoot, SwitchThumb, useForwardProps, Label } from 'reka-ui'
import { reactivePick } from '@vueuse/core'
import { useAppConfig } from '#imports'
import { useFormField } from '../composables/useFormField'
@@ -65,10 +62,10 @@ const props = defineProps<SwitchProps>()
const slots = defineSlots<SwitchSlots>()
const emits = defineEmits<SwitchEmits>()
const modelValue = defineModel<boolean | undefined>({ default: undefined })
const modelValue = defineModel<boolean>({ default: undefined })
const appConfig = useAppConfig()
const rootProps = useForwardProps(reactivePick(props, 'as', 'required', 'value'))
const rootProps = useForwardProps(reactivePick(props, 'required', 'value', 'defaultValue'))
const { id: _id, emitFormChange, emitFormInput, size, color, name, disabled } = useFormField<SwitchProps>(props)
const id = _id.value ?? useId()
@@ -91,17 +88,16 @@ function onUpdate(value: any) {
</script>
<template>
<div :class="ui.root({ class: [props.class, props.ui?.root] })">
<Primitive :as="as" :class="ui.root({ class: [props.class, props.ui?.root] })">
<div :class="ui.container({ class: props.ui?.container })">
<SwitchRoot
:id="id"
v-model:checked="modelValue"
:default-checked="defaultValue"
v-bind="rootProps"
v-model="modelValue"
:name="name"
:disabled="disabled || loading"
:class="ui.base({ class: props.ui?.base })"
@update:checked="onUpdate"
@update:model-value="onUpdate"
>
<SwitchThumb :class="ui.thumb({ class: props.ui?.thumb })">
<UIcon v-if="loading" :name="loadingIcon || appConfig.ui.icons.loading" :class="ui.icon({ class: props.ui?.icon, checked: true, unchecked: true })" />
@@ -124,5 +120,5 @@ function onUpdate(value: any) {
</slot>
</p>
</div>
</div>
</Primitive>
</template>