dumtruck/konobangu
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: merge playground into webui

Browse Source
This commit is contained in:
master
2025-03-07 01:50:53 +08:00
parent 383e6340ea
commit 27cdcdef58
100 changed files with 4119 additions and 3757 deletions
Download Patch File Download Diff File Expand all files Collapse all files

206
apps/webui/src/components/ui/date-picker.tsx
View File

@@ -1,53 +1,53 @@
import { children, Show, splitProps } from "solid-js"
import { Show, children, splitProps } from 'solid-js';
import { DatePicker as DatePickerPrimitive } from "@ark-ui/solid"
import { DatePicker as DatePickerPrimitive } from '@ark-ui/solid';
import { cn } from "~/styles/utils"
import { buttonVariants } from "~/components/ui/button"
import { buttonVariants } from '~/components/ui/button';
import { cn } from '~/utils/styles';
const DatePicker = DatePickerPrimitive.Root
const DatePickerLabel = DatePickerPrimitive.Label
const DatePickerContext = DatePickerPrimitive.Context
const DatePickerTableHead = DatePickerPrimitive.TableHead
const DatePickerTableBody = DatePickerPrimitive.TableBody
const DatePickerYearSelect = DatePickerPrimitive.YearSelect
const DatePickerMonthSelect = DatePickerPrimitive.MonthSelect
const DatePickerPositioner = DatePickerPrimitive.Positioner
const DatePicker = DatePickerPrimitive.Root;
const DatePickerLabel = DatePickerPrimitive.Label;
const DatePickerContext = DatePickerPrimitive.Context;
const DatePickerTableHead = DatePickerPrimitive.TableHead;
const DatePickerTableBody = DatePickerPrimitive.TableBody;
const DatePickerYearSelect = DatePickerPrimitive.YearSelect;
const DatePickerMonthSelect = DatePickerPrimitive.MonthSelect;
const DatePickerPositioner = DatePickerPrimitive.Positioner;
const DatePickerControl = (props: DatePickerPrimitive.ControlProps) => {
const [local, others] = splitProps(props, ["class"])
const [local, others] = splitProps(props, ['class']);
return (
<DatePickerPrimitive.Control
class={cn("inline-flex items-center gap-1", local.class)}
class={cn('inline-flex items-center gap-1', local.class)}
{...others}
/>
)
}
);
};
const DatePickerInput = (props: DatePickerPrimitive.InputProps) => {
const [local, others] = splitProps(props, ["class"])
const [local, others] = splitProps(props, ['class']);
return (
<DatePickerPrimitive.Input
class={cn(
"h-9 w-full rounded-md border border-border bg-background px-3 py-1 text-sm shadow-sm transition-shadow placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-[1.5px] focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
'h-9 w-full rounded-md border border-border bg-background px-3 py-1 text-sm shadow-sm transition-shadow placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-[1.5px] focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
local.class
)}
{...others}
/>
)
}
);
};
const DatePickerTrigger = (props: DatePickerPrimitive.TriggerProps) => {
const [local, others] = splitProps(props, ["class", "children"])
const [local, others] = splitProps(props, ['class', 'children']);
// prevents rendering children twice
const resolvedChildren = children(() => local.children)
const hasChildren = () => resolvedChildren.toArray().length !== 0
const resolvedChildren = children(() => local.children);
const hasChildren = () => resolvedChildren.toArray().length !== 0;
return (
<DatePickerPrimitive.Trigger
class={cn(
"flex min-h-9 min-w-9 items-center justify-center rounded-md border border-border bg-background transition-[box-shadow,background-color] hover:bg-accent/50 focus-visible:outline-none focus-visible:ring-[1.5px] focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>svg]:size-4",
'flex min-h-9 min-w-9 items-center justify-center rounded-md border border-border bg-background transition-[box-shadow,background-color] hover:bg-accent/50 focus-visible:outline-none focus-visible:ring-[1.5px] focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>svg]:size-4',
local.class
)}
{...others}
@@ -73,54 +73,59 @@ const DatePickerTrigger = (props: DatePickerPrimitive.TriggerProps) => {
</svg>
</Show>
</DatePickerPrimitive.Trigger>
)
}
);
};
const DatePickerContent = (props: DatePickerPrimitive.ContentProps) => {
const [local, others] = splitProps(props, ["class", "children"])
const [local, others] = splitProps(props, ['class', 'children']);
return (
<DatePickerPrimitive.Content
class={cn(
"z-50 rounded-md border bg-popover p-3 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 z-50 rounded-md border bg-popover p-3 text-popover-foreground shadow-md outline-none data-[state=closed]:animate-out data-[state=open]:animate-in',
local.class
)}
{...others}
>
{local.children}
</DatePickerPrimitive.Content>
)
}
);
};
const DatePickerView = (props: DatePickerPrimitive.ViewProps) => {
const [local, others] = splitProps(props, ["class"])
return <DatePickerPrimitive.View class={cn("space-y-4", local.class)} {...others} />
}
const DatePickerViewControl = (props: DatePickerPrimitive.ViewControlProps) => {
const [local, others] = splitProps(props, ["class"])
const [local, others] = splitProps(props, ['class']);
return (
<DatePickerPrimitive.ViewControl
class={cn("flex items-center justify-between gap-4", local.class)}
<DatePickerPrimitive.View
class={cn('space-y-4', local.class)}
{...others}
/>
)
}
);
};
const DatePickerViewControl = (props: DatePickerPrimitive.ViewControlProps) => {
const [local, others] = splitProps(props, ['class']);
return (
<DatePickerPrimitive.ViewControl
class={cn('flex items-center justify-between gap-4', local.class)}
{...others}
/>
);
};
const DatePickerPrevTrigger = (props: DatePickerPrimitive.PrevTriggerProps) => {
const [local, others] = splitProps(props, ["class", "children"])
const [local, others] = splitProps(props, ['class', 'children']);
// prevents rendering children twice
const resolvedChildren = children(() => local.children)
const hasChildren = () => resolvedChildren.toArray().length !== 0
const resolvedChildren = children(() => local.children);
const hasChildren = () => resolvedChildren.toArray().length !== 0;
return (
<DatePickerPrimitive.PrevTrigger
class={cn(
buttonVariants({
variant: "outline"
variant: 'outline',
}),
"size-7 bg-transparent p-0 opacity-50 hover:opacity-100",
'size-7 bg-transparent p-0 opacity-50 hover:opacity-100',
local.class
)}
{...others}
@@ -141,23 +146,23 @@ const DatePickerPrevTrigger = (props: DatePickerPrimitive.PrevTriggerProps) => {
</svg>
</Show>
</DatePickerPrimitive.PrevTrigger>
)
}
);
};
const DatePickerNextTrigger = (props: DatePickerPrimitive.NextTriggerProps) => {
const [local, others] = splitProps(props, ["class", "children"])
const [local, others] = splitProps(props, ['class', 'children']);
// prevents rendering children twice
const resolvedChildren = children(() => local.children)
const hasChildren = () => resolvedChildren.toArray().length !== 0
const resolvedChildren = children(() => local.children);
const hasChildren = () => resolvedChildren.toArray().length !== 0;
return (
<DatePickerPrimitive.NextTrigger
class={cn(
buttonVariants({
variant: "outline"
variant: 'outline',
}),
"size-7 bg-transparent p-0 opacity-50 hover:opacity-100",
'size-7 bg-transparent p-0 opacity-50 hover:opacity-100',
local.class
)}
{...others}
@@ -178,83 +183,96 @@ const DatePickerNextTrigger = (props: DatePickerPrimitive.NextTriggerProps) => {
</svg>
</Show>
</DatePickerPrimitive.NextTrigger>
)
}
);
};
const DatePickerViewTrigger = (props: DatePickerPrimitive.ViewTriggerProps) => {
const [local, others] = splitProps(props, ["class"])
const [local, others] = splitProps(props, ['class']);
return (
<DatePickerPrimitive.ViewTrigger
class={cn(buttonVariants({ variant: "ghost" }), "h-7", local.class)}
class={cn(buttonVariants({ variant: 'ghost' }), 'h-7', local.class)}
{...others}
/>
)
}
);
};
const DatePickerRangeText = (props: DatePickerPrimitive.RangeTextProps) => {
const [local, others] = splitProps(props, ["class"])
const [local, others] = splitProps(props, ['class']);
return (
<DatePickerPrimitive.RangeText class={cn("text-sm font-medium", local.class)} {...others} />
)
}
<DatePickerPrimitive.RangeText
class={cn('font-medium text-sm', local.class)}
{...others}
/>
);
};
const DatePickerTable = (props: DatePickerPrimitive.TableProps) => {
const [local, others] = splitProps(props, ["class"])
const [local, others] = splitProps(props, ['class']);
return (
<DatePickerPrimitive.Table
class={cn("w-full border-collapse space-y-1", local.class)}
class={cn('w-full border-collapse space-y-1', local.class)}
{...others}
/>
)
}
);
};
const DatePickerTableRow = (props: DatePickerPrimitive.TableRowProps) => {
const [local, others] = splitProps(props, ["class"])
return <DatePickerPrimitive.TableRow class={cn("mt-2 flex w-full", local.class)} {...others} />
}
const DatePickerTableHeader = (props: DatePickerPrimitive.TableHeaderProps) => {
const [local, others] = splitProps(props, ["class"])
const [local, others] = splitProps(props, ['class']);
return (
<DatePickerPrimitive.TableHeader
class={cn("w-8 flex-1 text-[0.8rem] font-normal text-muted-foreground", local.class)}
<DatePickerPrimitive.TableRow
class={cn('mt-2 flex w-full', local.class)}
{...others}
/>
)
}
);
};
const DatePickerTableHeader = (props: DatePickerPrimitive.TableHeaderProps) => {
const [local, others] = splitProps(props, ['class']);
return (
<DatePickerPrimitive.TableHeader
class={cn(
'w-8 flex-1 font-normal text-[0.8rem] text-muted-foreground',
local.class
)}
{...others}
/>
);
};
const DatePickerTableCell = (props: DatePickerPrimitive.TableCellProps) => {
const [local, others] = splitProps(props, ["class"])
const [local, others] = splitProps(props, ['class']);
return (
<DatePickerPrimitive.TableCell
class={cn(
"flex-1 p-0 text-center text-sm has-[[data-range-end]]:rounded-r-md has-[[data-range-start]]:rounded-l-md has-[[data-in-range]]:bg-accent has-[[data-outside-range][data-in-range]]:bg-accent/50 has-[[data-in-range]]:first-of-type:rounded-l-md has-[[data-in-range]]:last-of-type:rounded-r-md",
'flex-1 p-0 text-center text-sm has-[[data-range-end]]:rounded-r-md has-[[data-range-start]]:rounded-l-md has-[[data-in-range]]:bg-accent has-[[data-outside-range][data-in-range]]:bg-accent/50 has-[[data-in-range]]:last-of-type:rounded-r-md has-[[data-in-range]]:first-of-type:rounded-l-md',
local.class
)}
{...others}
/>
)
}
);
};
const DatePickerTableCellTrigger = (props: DatePickerPrimitive.TableCellTriggerProps) => {
const [local, others] = splitProps(props, ["class"])
const DatePickerTableCellTrigger = (
props: DatePickerPrimitive.TableCellTriggerProps
) => {
const [local, others] = splitProps(props, ['class']);
return (
<DatePickerPrimitive.TableCellTrigger
class={cn(
buttonVariants({ variant: "ghost" }),
"size-8 w-full p-0 font-normal data-[selected]:opacity-100",
"data-[today]:bg-accent data-[today]:text-accent-foreground",
"[&:is([data-today][data-selected])]:bg-primary [&:is([data-today][data-selected])]:text-primary-foreground",
"data-[selected]:bg-primary data-[selected]:text-primary-foreground data-[selected]:hover:bg-primary data-[selected]:hover:text-primary-foreground",
"data-[disabled]:text-muted-foreground data-[disabled]:opacity-50",
"data-[outside-range]:text-muted-foreground data-[outside-range]:opacity-50",
"[&:is([data-outside-range][data-in-range])]:bg-accent/50 [&:is([data-outside-range][data-in-range])]:text-muted-foreground [&:is([data-outside-range][data-in-range])]:opacity-30",
buttonVariants({ variant: 'ghost' }),
'size-8 w-full p-0 font-normal data-[selected]:opacity-100',
'data-[today]:bg-accent data-[today]:text-accent-foreground',
'[&:is([data-today][data-selected])]:bg-primary [&:is([data-today][data-selected])]:text-primary-foreground',
'data-[selected]:bg-primary data-[selected]:text-primary-foreground data-[selected]:hover:bg-primary data-[selected]:hover:text-primary-foreground',
'data-[disabled]:text-muted-foreground data-[disabled]:opacity-50',
'data-[outside-range]:text-muted-foreground data-[outside-range]:opacity-50',
'[&:is([data-outside-range][data-in-range])]:bg-accent/50 [&:is([data-outside-range][data-in-range])]:text-muted-foreground [&:is([data-outside-range][data-in-range])]:opacity-30',
local.class
)}
{...others}
/>
)
}
);
};
export {
DatePicker,
@@ -279,5 +297,5 @@ export {
DatePickerTableCellTrigger,
DatePickerYearSelect,
DatePickerMonthSelect,
DatePickerPositioner
}
DatePickerPositioner,
};