arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-14 12:14:41 +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
playground/app/pages/components/checkbox.vue
View File

@@ -14,7 +14,7 @@ const checked = ref(true)
<UCheckbox label="Error" color="error" :model-value="true" />
<UCheckbox label="Icon" icon="i-lucide-heart" :model-value="true" />
<UCheckbox label="Default value" :default-value="true" />
<UCheckbox label="Indeterminate" indeterminate />
<UCheckbox label="Indeterminate" default-value="indeterminate" />
<UCheckbox label="Required" required />
<UCheckbox label="Disabled" disabled />
</div>

4
playground/app/pages/components/command-palette.vue
View File

@@ -130,7 +130,7 @@ defineShortcuts({
<UButton label="Open modal" color="neutral" variant="outline" />
<template #content>
<ReuseTemplate :close="true" @close="open = false" />
<ReuseTemplate :close="true" @update:open="open = $event" />
</template>
</UModal>
@@ -138,7 +138,7 @@ defineShortcuts({
<UButton label="Open drawer" color="neutral" variant="outline" />
<template #content>
<ReuseTemplate class="border-t border-[var(--ui-border)]" />
<ReuseTemplate class="border-t border-[var(--ui-border)] mt-4" />
</template>
</UDrawer>

4
playground/app/pages/components/input-menu.vue
View File

@@ -83,7 +83,7 @@ const { data: users, status } = await useFetch('https://jsonplaceholder.typicode
<div class="flex flex-col gap-4 w-48">
<UInputMenu :items="items" placeholder="Disabled" disabled />
<UInputMenu :items="items" placeholder="Required" required />
<UInputMenu v-model="selectedItems" :items="items" placeholder="Multiple" multiple color="neutral" />
<UInputMenu v-model="selectedItems" :items="items" placeholder="Multiple" multiple />
<UInputMenu :items="items" loading placeholder="Search..." />
</div>
<div class="flex items-center gap-4">
@@ -119,7 +119,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="Search users..."
:size="size"

2
playground/app/pages/components/select-menu.vue
View File

@@ -124,7 +124,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="Search users..."
:size="size"

10
playground/app/pages/components/select.vue
View File

@@ -10,6 +10,7 @@ const fruits = ['Apple', 'Banana', 'Blueberry', 'Grapes', 'Pineapple']
const vegetables = ['Aubergine', 'Broccoli', 'Carrot', 'Courgette', 'Leek']
const items = [[{ label: 'Fruits', type: 'label' }, ...fruits], [{ label: 'Vegetables', type: 'label' }, ...vegetables]]
const selectedItems = ref([fruits[0]!, vegetables[0]!])
const statuses = [{
label: 'Backlog',
@@ -40,7 +41,7 @@ const { data: users, status } = await useFetch('https://jsonplaceholder.typicode
lazy: true
})
function getStatusIcon(value: string): string {
function getStatusIcon(value: string) {
return statuses.find(status => status.value === value)?.icon || 'i-lucide-user'
}
@@ -52,7 +53,7 @@ function getUserAvatar(value: string) {
<template>
<div class="flex flex-col items-center gap-4">
<div class="flex flex-col gap-4 w-48">
<USelect :items="items" placeholder="Search..." />
<USelect :items="items" placeholder="Search..." default-value="Apple" />
</div>
<div class="flex items-center gap-2">
<USelect
@@ -90,6 +91,7 @@ function getUserAvatar(value: string) {
<div class="flex flex-col gap-4 w-48">
<USelect :items="items" placeholder="Disabled" disabled />
<USelect :items="items" placeholder="Required" required />
<USelect v-model="selectedItems" :items="items" placeholder="Multiple" multiple />
<USelect :items="items" loading placeholder="Search..." />
</div>
<div class="flex items-center gap-4">
@@ -114,7 +116,7 @@ function getUserAvatar(value: string) {
class="w-48"
>
<template #leading="{ modelValue, ui }">
<UIcon v-if="modelValue" :name="getStatusIcon(modelValue)" :class="ui.leadingIcon()" />
<UIcon v-if="modelValue" :name="getStatusIcon(modelValue as string)" :class="ui.leadingIcon()" />
</template>
</USelect>
</div>
@@ -130,7 +132,7 @@ function getUserAvatar(value: string) {
class="w-48"
>
<template #leading="{ modelValue, ui }">
<UAvatar v-if="modelValue" :size="ui.itemLeadingAvatarSize()" v-bind="getUserAvatar(modelValue)" />
<UAvatar v-if="modelValue" :size="ui.itemLeadingAvatarSize()" v-bind="getUserAvatar(modelValue as string)" />
</template>
</USelect>
</div>

7
playground/app/pages/components/table.vue
View File

@@ -145,14 +145,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,

2
playground/nuxt.config.ts
View File

@@ -3,8 +3,8 @@ import { createResolver } from '@nuxt/kit'
const { resolve } = createResolver(import.meta.url)
export default defineNuxtConfig({
modules: ['../src/module'],
devtools: { enabled: true },
ui: {