chore: use new syntax for css variables (#3258)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>
This commit is contained in:
Sandro Circi
2025-02-07 11:24:14 +01:00
committed by GitHub
parent 8e7c52e1fb
commit 104852a55c
230 changed files with 12934 additions and 12958 deletions

View File

@@ -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-[var(--ui-border-accented)]">
<div class="flex px-4 py-3.5 border-b border-(--ui-border-accented)">
<UInput
:model-value="(table?.tableApi?.getColumn('email')?.getFilterValue() as string)"
class="max-w-sm"

View File

@@ -130,7 +130,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-[var(--ui-bg-elevated)]'
class: '-mx-2.5 data-[state=open]:bg-(--ui-bg-elevated)'
}))
}

View File

@@ -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-[var(--ui-border-accented)]">
<div class="flex justify-end px-4 py-3.5 border-b border-(--ui-border-accented)">
<UDropdownMenu
:items="table?.tableApi?.getAllColumns().filter(column => column.getCanHide()).map(column => ({
label: upperFirst(column.id),

View File

@@ -263,7 +263,7 @@ function randomize() {
</script>
<template>
<div class="flex-1 divide-y divide-[var(--ui-border-accented)] w-full">
<div class="flex-1 divide-y divide-(--ui-border-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)"
@@ -310,7 +310,7 @@ function randomize() {
</template>
</UTable>
<div class="px-4 py-3.5 text-sm text-[var(--ui-text-muted)]">
<div class="px-4 py-3.5 text-sm text-(--ui-text-muted)">
{{ table?.tableApi?.getFilteredSelectedRowModel().rows.length || 0 }} of
{{ table?.tableApi?.getFilteredRowModel().rows.length || 0 }} row(s) selected.
</div>

View File

@@ -35,7 +35,7 @@ const columns: TableColumn<User>[] = [{
size: 'lg'
}),
h('div', undefined, [
h('p', { class: 'font-medium text-[var(--ui-text-highlighted)]' }, row.original.name),
h('p', { class: 'font-medium text-(--ui-text-highlighted)' }, row.original.name),
h('p', { class: '' }, `@${row.original.username}`)
])
])

View File

@@ -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-[var(--ui-border-accented)]">
<div class="flex px-4 py-3.5 border-b border-(--ui-border-accented)">
<UInput
v-model="globalFilter"
class="max-w-sm"

View File

@@ -162,7 +162,7 @@ const pagination = ref({
class="flex-1"
/>
<div class="flex justify-center border-t border-[var(--ui-border)] pt-4">
<div class="flex justify-center border-t border-(--ui-border) pt-4">
<UPagination
:default-page="(table?.tableApi?.getState().pagination.pageIndex || 0) + 1"
:items-per-page="table?.tableApi?.getState().pagination.pageSize"

View File

@@ -111,7 +111,7 @@ const expanded = ref({ 1: true })
v-model:expanded="expanded"
:data="data"
:columns="columns"
:ui="{ tr: 'data-[expanded=true]:bg-[var(--ui-bg-elevated)]/50' }"
:ui="{ tr: 'data-[expanded=true]:bg-(--ui-bg-elevated)/50' }"
class="flex-1"
>
<template #expanded="{ row }">

View File

@@ -113,7 +113,7 @@ const rowSelection = ref({ 1: true })
:columns="columns"
/>
<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-(--ui-border-accented) text-sm text-(--ui-text-muted)">
{{ table?.tableApi?.getFilteredSelectedRowModel().rows.length || 0 }} of
{{ table?.tableApi?.getFilteredRowModel().rows.length || 0 }} row(s) selected.
</div>

View File

@@ -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" />
<div>
<p class="font-medium text-[var(--ui-text-highlighted)]">
<p class="font-medium text-(--ui-text-highlighted)">
{{ row.original.name }}
</p>
<p>