arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-14 20:19:34 +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

2
docs/app/components/FrameworkSelect.vue
View File

@@ -7,7 +7,7 @@ const { frameworks } = useSharedData()
v-slot="{ open }"
:modal="false"
:items="frameworks"
:ui="{ content: 'w-(--radix-dropdown-menu-trigger-width)' }"
:ui="{ content: 'w-(--reka-dropdown-menu-trigger-width)' }"
>
<UButton
color="neutral"

2
docs/app/components/Header.vue
View File

@@ -30,7 +30,7 @@ defineShortcuts({
v-slot="{ open }"
:modal="false"
:items="[{ label: `v${config.version}`, active: true, color: 'primary', checked: true, type: 'checkbox' }, { label: 'v2.19', to: 'https://ui.nuxt.com' }]"
:ui="{ content: 'w-(--radix-dropdown-menu-trigger-width) min-w-0' }"
:ui="{ content: 'w-(--reka-dropdown-menu-trigger-width) min-w-0' }"
size="xs"
>
<UButton

5
docs/app/components/content/ComponentCode.vue
View File

@@ -280,7 +280,7 @@ const { data: ast } = await useAsyncData(`component-code-${name}-${hash({ props:
container: 'mt-0'
}"
>
<USelectMenu
<USelect
v-if="option.items?.length"
:model-value="getComponentProp(option.name)"
:items="option.items"
@@ -288,7 +288,6 @@ const { data: ast } = await useAsyncData(`component-code-${name}-${hash({ props:
color="neutral"
variant="soft"
class="rounded-[var(--ui-radius)] rounded-l-none min-w-12"
:search-input="false"
:class="[option.name.toLowerCase().endsWith('color') && 'pl-6']"
:ui="{ itemLeadingChip: 'size-2' }"
@update:model-value="setComponentProp(option.name, $event)"
@@ -303,7 +302,7 @@ const { data: ast } = await useAsyncData(`component-code-${name}-${hash({ props:
class="size-2"
/>
</template>
</USelectMenu>
</USelect>
<UInput
v-else
:type="option.type?.includes('number') ? 'number' : 'text'"

2
docs/app/components/content/FrameworkOnly.vue
View File

@@ -1,5 +1,5 @@
<script setup lang="ts">
import { Slot } from 'radix-vue'
import { Slot } from 'reka-ui'
</script>
<template>

2
docs/app/components/content/examples/calendar/CalendarDisabledDatesExample.vue
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),

2
docs/app/components/content/examples/calendar/CalendarUnavailableDatesExample.vue
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),

2
docs/app/components/content/examples/command-palette/CommandPaletteFilterExample.vue → docs/app/components/content/examples/command-palette/CommandPaletteIgnoreFilterExample.vue
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>

4
docs/app/components/content/examples/command-palette/CommandPalettePostFilterExample.vue
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
},
{

2
docs/app/components/content/examples/command-palette/CommandPaletteSearchTermExample.vue
View File

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

2
docs/app/components/content/examples/drawer/DrawerCommandPaletteExample.vue
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>

20
docs/app/components/content/examples/input-menu/InputMenuCreateItemExample.vue Normal file
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>

2
docs/app/components/content/examples/input-menu/InputMenuFilterFieldsExample.vue
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"

2
docs/app/components/content/examples/input-menu/InputMenuFilterExample.vue → docs/app/components/content/examples/input-menu/InputMenuIgnoreFilterExample.vue
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"
>

2
docs/app/components/content/examples/modal/ModalCommandPaletteExample.vue
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>

2
docs/app/components/content/examples/navigation-menu/NavigationMenuContentSlotExample.vue
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'
}"

20
docs/app/components/content/examples/select-menu/SelectMenuCreateItemExample.vue Normal file
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>

2
docs/app/components/content/examples/select-menu/SelectMenuFilterFieldsExample.vue
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"

2
docs/app/components/content/examples/select-menu/SelectMenuFilterExample.vue → docs/app/components/content/examples/select-menu/SelectMenuIgnoreFilterExample.vue
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"

2
docs/app/components/content/examples/select/SelectFetchExample.vue
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()"
/>

2
docs/app/components/content/examples/select/SelectItemsChipExample.vue
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()"

7
docs/app/components/content/examples/table/TableExample.vue
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,

7
docs/app/components/content/examples/table/TableRowSelectionExample.vue
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'
})
}, {