diff --git a/src/app.css b/src/app.css index e3878fa..32f54b5 100644 --- a/src/app.css +++ b/src/app.css @@ -30,16 +30,11 @@ --text-1: light-dark(oklch(from var(--primary-500) .2 .02 h), oklch(from var(--primary-500) .9 .02 h)); --text-2: oklch(from var(--text-1) calc(l + .1) c h); - --weight-lighter: 100; - --weight-light: 300; - --weight-normal: 500; - --weight-bold: 700; - --weight-bolder: 900; - - --radii-s: .125em; - --radii-m: .25em; - --radii-l: .5em; - --radii-xl: 1em; + --text-lighter: 100; + --text-light: 300; + --text-normal: 500; + --text-bold: 700; + --text-bolder: 900; --text-s: .8rem; --text-m: 1rem; @@ -47,6 +42,12 @@ --text-xl: 1.6rem; --text-xxl: 2rem; + --radii-s: .125em; + --radii-m: .25em; + --radii-l: .5em; + --radii-xl: 1em; + + --padding-xs: .125em; --padding-s: .25em; --padding-m: .5em; --padding-l: .75em; @@ -160,6 +161,26 @@ del { color: oklch(from var(--fail) .1 .2 h); } +kbd { + background-color: var(--surface-600); + border-radius: var(--radii-m); + border: 1px solid var(--surface-500); + box-shadow: + 0 1px 1px rgba(0, 0, 0, 0.2), + 0 2px 0 0 rgba(255, 255, 255, 0.7) inset; + color: var(--text-2); + display: inline-block; + font-size: var(--text-s); + font-weight: var(--text-bold); + line-height: 1; + padding: var(--padding-xs) var(--padding-s); + white-space: nowrap; +} + +samp { + display: inline-block; +} + @property --hue { syntax: ''; inherits: false; diff --git a/src/components/table/table.module.css b/src/components/table/table.module.css index 20b6fe2..b29cccb 100644 --- a/src/components/table/table.module.css +++ b/src/components/table/table.module.css @@ -60,6 +60,12 @@ z-index: 1; } + & .caption { + /* grid-column: 1 / -1; */ + position: sticky; + inset-inline-start: 0; + } + & :is(.header, .main, .footer) { grid-column: 1 / -1; display: block grid; @@ -106,7 +112,7 @@ animation: header-scroll-shadow linear both; animation-timeline: scroll(); animation-range: 0 2em; - font-weight: var(--weight-bold); + font-weight: var(--text-bold); & > tr { all: inherit; @@ -139,7 +145,7 @@ animation: header-scroll-shadow linear both reverse; animation-timeline: scroll(); animation-range: calc(100% - 2em) 100%; - font-weight: var(--weight-bold); + font-weight: var(--text-bold); } & details { diff --git a/src/components/table/table.tsx b/src/components/table/table.tsx index 1b79d59..c28a1c5 100644 --- a/src/components/table/table.tsx +++ b/src/components/table/table.tsx @@ -86,11 +86,11 @@ function InnerTable>(props: InnerTableProps) { const columnCount = createMemo(() => table.columns().length); return - {/* 0 ? props.summary : undefined}>{ + 0 ? props.summary : undefined}>{ summary => { - return ; + return ; } - } */} + } @@ -246,4 +246,12 @@ function Group>(props: { key: keyof T, groupedBy: node => } ; -}; \ No newline at end of file +}; + +declare module "solid-js" { + namespace JSX { + interface HTMLAttributes { + indeterminate?: boolean | undefined; + } + } +} \ No newline at end of file diff --git a/src/features/command/contextMenu.tsx b/src/features/command/contextMenu.tsx index ec38ac1..5b8aff0 100644 --- a/src/features/command/contextMenu.tsx +++ b/src/features/command/contextMenu.tsx @@ -1,4 +1,4 @@ -import { Accessor, Component, createContext, createEffect, createMemo, createSignal, createUniqueId, For, JSX, ParentComponent, splitProps, useContext } from "solid-js"; +import { Accessor, Component, createContext, createEffect, createMemo, createSignal, For, JSX, ParentComponent, splitProps, useContext } from "solid-js"; import { CommandType } from "./index"; import css from "./contextMenu.module.css"; @@ -62,11 +62,11 @@ const Menu: Component<{ children: (command: CommandType) => JSX.Element }> = (pr command(); }; - return
    + return { command =>
  • {props.children(command)}
    • }     -
; + ; }; const Handle: ParentComponent> = (props) => { @@ -75,7 +75,7 @@ const Handle: ParentComponent> = (props) => { const context = useContext(ContextMenu)!; const [handle, setHandle] = createSignal(); - return { + return { e.preventDefault(); context.show(handle()!); @@ -84,4 +84,7 @@ const Handle: ParentComponent> = (props) => { }}>{local.children}; }; +let handleCounter = 0; +const createUniqueId = () => `handle-${handleCounter++}` + export const Context = { Root, Menu, Handle }; \ No newline at end of file diff --git a/src/features/command/index.tsx b/src/features/command/index.tsx index cd843d8..137de5b 100644 --- a/src/features/command/index.tsx +++ b/src/features/command/index.tsx @@ -1,4 +1,4 @@ -import { Accessor, children, Component, createContext, createEffect, createMemo, JSX, ParentComponent, ParentProps, Show, useContext } from 'solid-js'; +import { Accessor, children, Component, createContext, createEffect, createMemo, For, JSX, ParentComponent, ParentProps, Show, useContext } from 'solid-js'; interface CommandContextType { set(commands: CommandType[]): void; @@ -115,19 +115,27 @@ const Context = any = any>(props: ParentProps<{ f }; const Handle: Component<{ command: CommandType }> = (props) => { - return <> + return {props.command.label} { shortcut => { - const shift = shortcut().modifier & Modifier.Shift ? 'Shft+' : ''; - const ctrl = shortcut().modifier & Modifier.Control ? 'Ctrl+' : ''; - const meta = shortcut().modifier & Modifier.Meta ? 'Meta+' : ''; - const alt = shortcut().modifier & Modifier.Alt ? 'Alt+' : ''; + const modifier = shortcut().modifier; + const modifierMap: Record = { + [Modifier.Shift]: 'Shft', + [Modifier.Control]: 'Ctrl', + [Modifier.Meta]: 'Meta', + [Modifier.Alt]: 'Alt', + }; - return {ctrl}{shift}{meta}{alt}{shortcut().key}; + return <>  + typeof m === 'number').filter(m => modifier & m)}>{ + (m) => <>{modifierMap[m]}+ + } + {shortcut().key} + ; } } - ; + ; }; export const Command = { Root, Handle, Add, Context }; diff --git a/src/features/menu/index.tsx b/src/features/menu/index.tsx index 4709e31..df8ef07 100644 --- a/src/features/menu/index.tsx +++ b/src/features/menu/index.tsx @@ -182,7 +182,7 @@ const Root: ParentComponent<{}> = (props) => { const Mount: Component = (props) => { const menu = useMenu(); - return
; + return ; }; export const Menu = { Mount, Root, Item, Separator } as const; @@ -233,7 +233,7 @@ export const CommandPalette: Component<{ api?: (api: CommandPaletteApi) => any, }; return setOpen(false)}> - items={context.commands()} keySelector={item => item.label} context={setSearch} onSubmit={onSubmit}>{ + item.label} context={setSearch} onSubmit={onSubmit}>{ (item, ctx) => { (part, index) => <> {ctx.filter()} @@ -258,6 +258,7 @@ interface SearchContext { interface SearchableListProps { items: T[]; + title?: string; keySelector(item: T): string; filter?: (item: T, search: string) => boolean; children(item: T, context: SearchContext): JSX.Element; @@ -333,15 +334,17 @@ function SearchableList(props: SearchableListProps): JSX.Element { props.onSubmit?.(v); }; - return
- setTerm(e.target.value)} placeholder="start typing for command" autofocus autocomplete="off" enterkeyhint="go" /> + return + + setTerm(e.target.value)} placeholder="start typing for command" autofocus autocomplete="off" enterkeyhint="go" /> - - { - (result, index) =>
{props.children(result, ctx)}
- } - - ; + + { + (result, index) =>
{props.children(result, ctx)}
+ } + + + ; }; declare module "solid-js" { diff --git a/src/features/selectable/index.tsx b/src/features/selectable/index.tsx index ae54a29..aeef27e 100644 --- a/src/features/selectable/index.tsx +++ b/src/features/selectable/index.tsx @@ -1,4 +1,4 @@ -import { Accessor, children, createContext, createEffect, createMemo, createRenderEffect, createSignal, createUniqueId, onCleanup, onMount, ParentComponent, ParentProps, Setter, Signal, useContext } from "solid-js"; +import { Accessor, children, createContext, createEffect, createMemo, createRenderEffect, createSignal, onCleanup, onMount, ParentComponent, ParentProps, Setter, Signal, useContext } from "solid-js"; import { createStore } from "solid-js/store"; import { isServer } from "solid-js/web"; import css from "./index.module.css"; @@ -280,6 +280,9 @@ export function selectable(element: HTMLElement, options: Acce element.dataset.selectionKey = selectionKey; }; +let keyCounter = 0; +const createUniqueId = () => `key-${keyCounter++}`; + declare module "solid-js" { namespace JSX { interface Directives { diff --git a/src/routes/(editor)/experimental/table.tsx b/src/routes/(editor)/experimental/table.tsx index 3db6bf2..4ad4016 100644 --- a/src/routes/(editor)/experimental/table.tsx +++ b/src/routes/(editor)/experimental/table.tsx @@ -4,6 +4,8 @@ import { createStore } from 'solid-js/store'; import { Person, people } from './experimental.data'; import { createEffect, createMemo, For } from 'solid-js'; import css from './table.module.css'; +import { Menu } from '~/features/menu'; +import { Command, createCommand, Modifier } from '~/features/command'; export default function TableExperiment() { const columns: Column[] = [ @@ -57,7 +59,7 @@ export default function TableExperiment() { sort: undefined, }); - const rows = createMemo(() => createDataSet(people.slice(0, 1))); + const rows = createMemo(() => createDataSet(people)); createEffect(() => { rows().setGrouping(store.group); @@ -69,6 +71,12 @@ export default function TableExperiment() { return
+
+ Commands + + { }, { key: 'k', modifier: Modifier.Control })} /> +
+
table properties @@ -117,7 +125,7 @@ export default function TableExperiment() {
-
Kaas {summary()}{summary()}
+
; } \ No newline at end of file