mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-14 20:19:34 +01:00
feat(module): define neutral utilities (#3629)
Co-authored-by: Sébastien Chopin <atinux@gmail.com>
This commit is contained in:
@@ -100,7 +100,7 @@ const columnFilters = ref([{
|
||||
|
||||
<template>
|
||||
<div class="flex flex-col flex-1 w-full">
|
||||
<div class="flex px-4 py-3.5 border-b border-(--ui-border-accented)">
|
||||
<div class="flex px-4 py-3.5 border-b border-accented">
|
||||
<UInput
|
||||
:model-value="(table?.tableApi?.getColumn('email')?.getFilterValue() as string)"
|
||||
class="max-w-sm"
|
||||
|
||||
@@ -131,7 +131,7 @@ function getHeader(column: Column<Payment>, label: string) {
|
||||
'variant': 'ghost',
|
||||
label,
|
||||
'icon': isSorted ? (isSorted === 'asc' ? 'i-lucide-arrow-up-narrow-wide' : 'i-lucide-arrow-down-wide-narrow') : 'i-lucide-arrow-up-down',
|
||||
'class': '-mx-2.5 data-[state=open]:bg-(--ui-bg-elevated)',
|
||||
'class': '-mx-2.5 data-[state=open]:bg-elevated',
|
||||
'aria-label': `Sort by ${isSorted === 'asc' ? 'descending' : 'ascending'}`
|
||||
}))
|
||||
}
|
||||
|
||||
@@ -100,7 +100,7 @@ const columnVisibility = ref({
|
||||
|
||||
<template>
|
||||
<div class="flex flex-col flex-1 w-full">
|
||||
<div class="flex justify-end px-4 py-3.5 border-b border-(--ui-border-accented)">
|
||||
<div class="flex justify-end px-4 py-3.5 border-b border-accented">
|
||||
<UDropdownMenu
|
||||
:items="table?.tableApi?.getAllColumns().filter(column => column.getCanHide()).map(column => ({
|
||||
label: upperFirst(column.id),
|
||||
|
||||
@@ -265,7 +265,7 @@ function randomize() {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex-1 divide-y divide-(--ui-border-accented) w-full">
|
||||
<div class="flex-1 divide-y divide-accented w-full">
|
||||
<div class="flex items-center gap-2 px-4 py-3.5 overflow-x-auto">
|
||||
<UInput
|
||||
:model-value="(table?.tableApi?.getColumn('email')?.getFilterValue() as string)"
|
||||
@@ -313,7 +313,7 @@ function randomize() {
|
||||
</template>
|
||||
</UTable>
|
||||
|
||||
<div class="px-4 py-3.5 text-sm text-(--ui-text-muted)">
|
||||
<div class="px-4 py-3.5 text-sm text-muted">
|
||||
{{ table?.tableApi?.getFilteredSelectedRowModel().rows.length || 0 }} of
|
||||
{{ table?.tableApi?.getFilteredRowModel().rows.length || 0 }} row(s) selected.
|
||||
</div>
|
||||
|
||||
@@ -36,7 +36,7 @@ const columns: TableColumn<User>[] = [{
|
||||
size: 'lg'
|
||||
}),
|
||||
h('div', undefined, [
|
||||
h('p', { class: 'font-medium text-(--ui-text-highlighted)' }, row.original.name),
|
||||
h('p', { class: 'font-medium text-highlighted' }, row.original.name),
|
||||
h('p', { class: '' }, `@${row.original.username}`)
|
||||
])
|
||||
])
|
||||
|
||||
@@ -95,7 +95,7 @@ const globalFilter = ref('45')
|
||||
|
||||
<template>
|
||||
<div class="flex flex-col flex-1 w-full">
|
||||
<div class="flex px-4 py-3.5 border-b border-(--ui-border-accented)">
|
||||
<div class="flex px-4 py-3.5 border-b border-accented">
|
||||
<UInput
|
||||
v-model="globalFilter"
|
||||
class="max-w-sm"
|
||||
|
||||
@@ -162,7 +162,7 @@ const pagination = ref({
|
||||
class="flex-1"
|
||||
/>
|
||||
|
||||
<div class="flex justify-center border-t border-(--ui-border) pt-4">
|
||||
<div class="flex justify-center border-t border-default pt-4">
|
||||
<UPagination
|
||||
:default-page="(table?.tableApi?.getState().pagination.pageIndex || 0) + 1"
|
||||
:items-per-page="table?.tableApi?.getState().pagination.pageSize"
|
||||
|
||||
@@ -112,7 +112,7 @@ const expanded = ref({ 1: true })
|
||||
v-model:expanded="expanded"
|
||||
:data="data"
|
||||
:columns="columns"
|
||||
:ui="{ tr: 'data-[expanded=true]:bg-(--ui-bg-elevated)/50' }"
|
||||
:ui="{ tr: 'data-[expanded=true]:bg-elevated/50' }"
|
||||
class="flex-1"
|
||||
>
|
||||
<template #expanded="{ row }">
|
||||
|
||||
@@ -122,7 +122,7 @@ function onSelect(row: TableRow<Payment>, e?: Event) {
|
||||
@select="onSelect"
|
||||
/>
|
||||
|
||||
<div class="px-4 py-3.5 border-t border-[var(--ui-border-accented)] text-sm text-[var(--ui-text-muted)]">
|
||||
<div class="px-4 py-3.5 border-t border-accented text-sm text-muted">
|
||||
{{ table?.tableApi?.getFilteredSelectedRowModel().rows.length || 0 }} of
|
||||
{{ table?.tableApi?.getFilteredRowModel().rows.length || 0 }} row(s) selected.
|
||||
</div>
|
||||
|
||||
@@ -113,7 +113,7 @@ const rowSelection = ref({ 1: true })
|
||||
:columns="columns"
|
||||
/>
|
||||
|
||||
<div class="px-4 py-3.5 border-t border-(--ui-border-accented) text-sm text-(--ui-text-muted)">
|
||||
<div class="px-4 py-3.5 border-t border-accented text-sm text-muted">
|
||||
{{ table?.tableApi?.getFilteredSelectedRowModel().rows.length || 0 }} of
|
||||
{{ table?.tableApi?.getFilteredRowModel().rows.length || 0 }} row(s) selected.
|
||||
</div>
|
||||
|
||||
@@ -97,7 +97,7 @@ function getDropdownActions(user: User): DropdownMenuItem[][] {
|
||||
<div class="flex items-center gap-3">
|
||||
<UAvatar :src="`https://i.pravatar.cc/120?img=${row.original.id}`" size="lg" :alt="`${row.original.name} avatar`" />
|
||||
<div>
|
||||
<p class="font-medium text-(--ui-text-highlighted)">
|
||||
<p class="font-medium text-highlighted">
|
||||
{{ row.original.name }}
|
||||
</p>
|
||||
<p>
|
||||
|
||||
Reference in New Issue
Block a user