fix: tableSizeClassName not been generated by tailwindcss

This commit is contained in:
kunish 2023-09-06 10:37:25 +08:00
parent 986e8c2632
commit 5f4f9a8ae8
No known key found for this signature in database
GPG Key ID: 647A12B4F782C430
4 changed files with 14 additions and 14 deletions

View File

@ -40,6 +40,7 @@ import {
import { formatTimeFromNow } from '~/helpers' import { formatTimeFromNow } from '~/helpers'
import { import {
secret, secret,
tableSize,
tableSizeClassName, tableSizeClassName,
useRequest, useRequest,
wsEndpointURL, wsEndpointURL,
@ -336,10 +337,7 @@ export default () => {
<For each={tabs()}> <For each={tabs()}>
{(tab) => ( {(tab) => (
<button <button
class={twMerge( class={twMerge(activeTab() === tab.type && 'tab-active', 'tab')}
activeTab() === tab.type && 'tab-active',
'tab tab-xs',
)}
onClick={() => setActiveTab(tab.type)} onClick={() => setActiveTab(tab.type)}
> >
{tab.name} ({tab.count}) {tab.name} ({tab.count})
@ -350,26 +348,26 @@ export default () => {
<div class="flex w-full flex-wrap items-center gap-2"> <div class="flex w-full flex-wrap items-center gap-2">
<input <input
class="input input-primary input-sm flex-1" class="input input-primary flex-1"
placeholder={t('search')} placeholder={t('search')}
onInput={(e) => setSearch(e.target.value)} onInput={(e) => setSearch(e.target.value)}
/> />
<Button <Button
class="btn-circle btn-sm" class="btn-circle"
onClick={() => setPaused((paused) => !paused)} onClick={() => setPaused((paused) => !paused)}
> >
{paused() ? <IconPlayerPlay /> : <IconPlayerPause />} {paused() ? <IconPlayerPlay /> : <IconPlayerPause />}
</Button> </Button>
<Button <Button
class="btn-circle btn-sm" class="btn-circle"
onClick={() => request.delete('connections')} onClick={() => request.delete('connections')}
> >
<IconCircleX /> <IconCircleX />
</Button> </Button>
<label for="connection-modal" class="btn btn-circle btn-sm"> <label for="connection-modal" class="btn btn-circle">
<IconSettings /> <IconSettings />
</label> </label>
@ -388,7 +386,7 @@ export default () => {
<div class="overflow-x-auto whitespace-nowrap rounded-md bg-base-300"> <div class="overflow-x-auto whitespace-nowrap rounded-md bg-base-300">
<table <table
class={twMerge( class={twMerge(
tableSizeClassName(), tableSizeClassName(tableSize()),
'table table-zebra relative rounded-none', 'table table-zebra relative rounded-none',
)} )}
> >

View File

@ -9,7 +9,7 @@ import {
} from '@tanstack/solid-table' } from '@tanstack/solid-table'
import { For, createEffect, createSignal } from 'solid-js' import { For, createEffect, createSignal } from 'solid-js'
import { twMerge } from 'tailwind-merge' import { twMerge } from 'tailwind-merge'
import { secret, tableSizeClassName, wsEndpointURL } from '~/signals' import { secret, tableSize, tableSizeClassName, wsEndpointURL } from '~/signals'
import { Log } from '~/types' import { Log } from '~/types'
type LogWithSeq = Log & { seq: number } type LogWithSeq = Log & { seq: number }
@ -77,7 +77,10 @@ export default () => {
<div class="overflow-x-auto whitespace-nowrap rounded-md bg-base-300"> <div class="overflow-x-auto whitespace-nowrap rounded-md bg-base-300">
<table <table
class={twMerge(tableSizeClassName(), 'table relative rounded-none')} class={twMerge(
tableSizeClassName(tableSize()),
'table relative rounded-none',
)}
> >
<thead class="sticky top-0 z-10"> <thead class="sticky top-0 z-10">
<For each={table.getHeaderGroups()}> <For each={table.getHeaderGroups()}>

View File

@ -55,8 +55,7 @@ export const [tableSize, setTableSize] = makePersisted(
{ name: 'tableSize', storage: localStorage }, { name: 'tableSize', storage: localStorage },
) )
export const tableSizeClassName = () => { export const tableSizeClassName = (size: TAILWINDCSS_SIZE) => {
const size = tableSize()
let className = 'table-xs' let className = 'table-xs'
switch (size) { switch (size) {

View File

@ -5,7 +5,7 @@ import { Config } from 'tailwindcss'
import safeArea from 'tailwindcss-safe-area' import safeArea from 'tailwindcss-safe-area'
export default { export default {
content: ['./src/**/*.{css,tsx}'], content: ['./src/**/*.{css,ts,tsx}'],
plugins: [daisyui, safeArea], plugins: [daisyui, safeArea],
daisyui: { themes: true }, daisyui: { themes: true },
theme: { theme: {