mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-14 20:19:34 +01:00
feat(module)!: migrate to reka-ui (#2448)
This commit is contained in:
@@ -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),
|
||||
|
||||
@@ -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),
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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
|
||||
},
|
||||
{
|
||||
|
||||
@@ -72,7 +72,7 @@ const users = [
|
||||
}
|
||||
]
|
||||
|
||||
const searchTerm = ref('')
|
||||
const searchTerm = ref('B')
|
||||
|
||||
function onSelect() {
|
||||
searchTerm.value = ''
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
@@ -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>
|
||||
@@ -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"
|
||||
|
||||
@@ -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"
|
||||
>
|
||||
@@ -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>
|
||||
|
||||
|
||||
@@ -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'
|
||||
}"
|
||||
|
||||
@@ -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>
|
||||
@@ -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"
|
||||
|
||||
@@ -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"
|
||||
@@ -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()"
|
||||
/>
|
||||
|
||||
@@ -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()"
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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'
|
||||
})
|
||||
}, {
|
||||
|
||||
Reference in New Issue
Block a user