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

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

View File

@@ -1,6 +1,6 @@
<script setup lang="ts">
import { CalendarDate } from '@internationalized/date'
import type { Matcher } from 'radix-vue/date'
import type { Matcher } from 'reka-ui/date'
const modelValue = shallowRef({
start: new CalendarDate(2022, 1, 1),

View File

@@ -1,6 +1,6 @@
<script setup lang="ts">
import { CalendarDate } from '@internationalized/date'
import type { Matcher } from 'radix-vue/date'
import type { Matcher } from 'reka-ui/date'
const modelValue = shallowRef({
start: new CalendarDate(2022, 1, 1),

View File

@@ -14,7 +14,7 @@ const groups = computed(() => [{
id: 'users',
label: searchTerm.value ? `Users matching “${searchTerm.value}”...` : 'Users',
items: users.value || [],
filter: false
ignoreFilter: true
}])
</script>

View File

@@ -11,8 +11,8 @@ const items = [
level: 2
},
{
id: '/getting-started#radix-vue-3',
label: 'Radix Vue',
id: '/getting-started#reka-ui-radix-vue',
label: 'Reka UI',
level: 3
},
{

View File

@@ -72,7 +72,7 @@ const users = [
}
]
const searchTerm = ref('')
const searchTerm = ref('B')
function onSelect() {
searchTerm.value = ''

View File

@@ -13,7 +13,7 @@ const groups = computed(() => [{
id: 'users',
label: searchTerm.value ? `Users matching “${searchTerm.value}”...` : 'Users',
items: users.value || [],
filter: false
ignoreFilter: true
}])
</script>

View File

@@ -0,0 +1,20 @@
<script setup lang="ts">
const items = ref(['Backlog', 'Todo', 'In Progress', 'Done'])
const value = ref('Backlog')
function onCreate(item: string) {
items.value.push(item)
value.value = item
}
</script>
<template>
<UInputMenu
v-model="value"
create-item
:items="items"
class="w-48"
@create="onCreate"
/>
</template>

View File

@@ -16,7 +16,7 @@ const { data: users, status } = await useFetch('https://jsonplaceholder.typicode
<UInputMenu
:items="users || []"
:loading="status === 'pending'"
:filter="['label', 'email']"
:filter-fields="['label', 'email']"
icon="i-lucide-user"
placeholder="Select user"
class="w-80"

View File

@@ -20,7 +20,7 @@ const { data: users, status } = await useFetch('https://jsonplaceholder.typicode
v-model:search-term="searchTerm"
:items="users || []"
:loading="status === 'pending'"
:filter="false"
ignore-filter
icon="i-lucide-user"
placeholder="Select user"
>

View File

@@ -13,7 +13,7 @@ const groups = computed(() => [{
id: 'users',
label: searchTerm.value ? `Users matching “${searchTerm.value}”...` : 'Users',
items: users.value || [],
filter: false
ignoreFilter: true
}])
</script>

View File

@@ -61,7 +61,7 @@ const items = [
:items="items"
class="justify-center"
:ui="{
viewport: 'sm:w-[var(--radix-navigation-menu-viewport-width)]',
viewport: 'sm:w-[var(--reka-navigation-menu-viewport-width)]',
childList: 'sm:w-96',
childLinkDescription: 'text-balance line-clamp-2'
}"

View File

@@ -0,0 +1,20 @@
<script setup lang="ts">
const items = ref(['Backlog', 'Todo', 'In Progress', 'Done'])
const value = ref('Backlog')
function onCreate(item: string) {
items.value.push(item)
value.value = item
}
</script>
<template>
<USelectMenu
v-model="value"
create-item
:items="items"
class="w-48"
@create="onCreate"
/>
</template>

View File

@@ -16,7 +16,7 @@ const { data: users, status } = await useFetch('https://jsonplaceholder.typicode
<USelectMenu
:items="users || []"
:loading="status === 'pending'"
:filter="['label', 'email']"
:filter-fields="['label', 'email']"
icon="i-lucide-user"
placeholder="Select user"
class="w-80"

View File

@@ -20,7 +20,7 @@ const { data: users, status } = await useFetch('https://jsonplaceholder.typicode
v-model:search-term="searchTerm"
:items="users || []"
:loading="status === 'pending'"
:filter="false"
ignore-filter
icon="i-lucide-user"
placeholder="Select user"
class="w-48"

View File

@@ -26,7 +26,7 @@ function getUserAvatar(value: string) {
<template #leading="{ modelValue, ui }">
<UAvatar
v-if="modelValue"
v-bind="getUserAvatar(modelValue)"
v-bind="getUserAvatar(modelValue as string)"
:size="ui.leadingAvatarSize()"
:class="ui.leadingAvatar()"
/>

View File

@@ -34,7 +34,7 @@ function getChip(value: string) {
<template #leading="{ modelValue, ui }">
<UChip
v-if="modelValue"
v-bind="getChip(modelValue)"
v-bind="getChip(modelValue as string)"
inset
standalone
:size="ui.itemLeadingChipSize()"

View File

@@ -143,14 +143,13 @@ const data = ref<Payment[]>([{
const columns: TableColumn<Payment>[] = [{
id: 'select',
header: ({ table }) => h(UCheckbox, {
'modelValue': table.getIsAllPageRowsSelected(),
'indeterminate': table.getIsSomePageRowsSelected(),
'onUpdate:modelValue': (value: boolean) => table.toggleAllPageRowsSelected(!!value),
'modelValue': table.getIsSomePageRowsSelected() ? 'indeterminate' : table.getIsAllPageRowsSelected(),
'onUpdate:modelValue': (value: boolean | 'indeterminate') => table.toggleAllPageRowsSelected(!!value),
'ariaLabel': 'Select all'
}),
cell: ({ row }) => h(UCheckbox, {
'modelValue': row.getIsSelected(),
'onUpdate:modelValue': (value: boolean) => row.toggleSelected(!!value),
'onUpdate:modelValue': (value: boolean | 'indeterminate') => row.toggleSelected(!!value),
'ariaLabel': 'Select row'
}),
enableSorting: false,

View File

@@ -48,14 +48,13 @@ const data = ref<Payment[]>([{
const columns: TableColumn<Payment>[] = [{
id: 'select',
header: ({ table }) => h(UCheckbox, {
'modelValue': table.getIsAllPageRowsSelected(),
'indeterminate': table.getIsSomePageRowsSelected(),
'onUpdate:modelValue': (value: boolean) => table.toggleAllPageRowsSelected(!!value),
'modelValue': table.getIsSomePageRowsSelected() ? 'indeterminate' : table.getIsAllPageRowsSelected(),
'onUpdate:modelValue': (value: boolean | 'indeterminate') => table.toggleAllPageRowsSelected(!!value),
'ariaLabel': 'Select all'
}),
cell: ({ row }) => h(UCheckbox, {
'modelValue': row.getIsSelected(),
'onUpdate:modelValue': (value: boolean) => row.toggleSelected(!!value),
'onUpdate:modelValue': (value: boolean | 'indeterminate') => row.toggleSelected(!!value),
'ariaLabel': 'Select row'
})
}, {