mirror of
https://github.com/sst/opencode.git
synced 2025-12-23 10:11:41 +00:00
wip(desktop): progress
This commit is contained in:
Adam
parent
8e15bcb68e
commit
3bb546c94d
12 changed files with 474 additions and 97 deletions
|
|
@ -579,54 +579,61 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
|
|||
</div>
|
||||
<div class="px-1.5 pb-1.5">
|
||||
<div class="w-full rounded-sm border border-border-weak-base bg-surface-raised-base">
|
||||
<div class="w-full flex flex-col items-start gap-4 px-1.5 pt-4 pb-6">
|
||||
<div class="w-full flex flex-col items-start gap-4 px-1.5 pt-4 pb-4">
|
||||
<div class="px-2 text-14-medium text-text-base">
|
||||
Add more models from popular providers
|
||||
</div>
|
||||
<List
|
||||
class="w-full"
|
||||
key={(x) => x?.id}
|
||||
items={providers().popular()}
|
||||
activeIcon="plus-small"
|
||||
sortBy={(a, b) => {
|
||||
if (popularProviders.includes(a.id) && popularProviders.includes(b.id))
|
||||
return popularProviders.indexOf(a.id) - popularProviders.indexOf(b.id)
|
||||
return a.name.localeCompare(b.name)
|
||||
}}
|
||||
onSelect={(x) => {
|
||||
layout.dialog.close("model")
|
||||
}}
|
||||
>
|
||||
{(i) => (
|
||||
<div class="w-full flex items-center gap-x-4">
|
||||
<ProviderIcon
|
||||
data-slot="list-item-extra-icon"
|
||||
id={i.id as IconName}
|
||||
// TODO: clean this up after we update icon in models.dev
|
||||
classList={{
|
||||
"text-icon-weak-base": true,
|
||||
"size-4 mx-0.5": i.id === "opencode",
|
||||
"size-5": i.id !== "opencode",
|
||||
}}
|
||||
/>
|
||||
<span>{i.name}</span>
|
||||
<Show when={i.id === "opencode"}>
|
||||
<Tag>Recommended</Tag>
|
||||
</Show>
|
||||
<Show when={i.id === "anthropic"}>
|
||||
<div class="text-14-regular text-text-weak">
|
||||
Connect with Claude Pro/Max or API key
|
||||
</div>
|
||||
</Show>
|
||||
</div>
|
||||
)}
|
||||
</List>
|
||||
<Button variant="ghost" class="w-full justify-start">
|
||||
<div class="flex items-center gap-2">
|
||||
<Icon name="plus-small" />
|
||||
<div class="text-text-strong">View all providers</div>
|
||||
</div>
|
||||
</Button>
|
||||
<div class="w-full">
|
||||
<List
|
||||
class="w-full"
|
||||
key={(x) => x?.id}
|
||||
items={providers().popular()}
|
||||
activeIcon="plus-small"
|
||||
sortBy={(a, b) => {
|
||||
if (popularProviders.includes(a.id) && popularProviders.includes(b.id))
|
||||
return popularProviders.indexOf(a.id) - popularProviders.indexOf(b.id)
|
||||
return a.name.localeCompare(b.name)
|
||||
}}
|
||||
onSelect={(x) => {
|
||||
if (!x) return
|
||||
layout.dialog.connect(x.id)
|
||||
}}
|
||||
>
|
||||
{(i) => (
|
||||
<div class="w-full flex items-center gap-x-4">
|
||||
<ProviderIcon
|
||||
data-slot="list-item-extra-icon"
|
||||
id={i.id as IconName}
|
||||
// TODO: clean this up after we update icon in models.dev
|
||||
classList={{
|
||||
"text-icon-weak-base": true,
|
||||
"size-4 mx-0.5": i.id === "opencode",
|
||||
"size-5": i.id !== "opencode",
|
||||
}}
|
||||
/>
|
||||
<span>{i.name}</span>
|
||||
<Show when={i.id === "opencode"}>
|
||||
<Tag>Recommended</Tag>
|
||||
</Show>
|
||||
<Show when={i.id === "anthropic"}>
|
||||
<div class="text-14-regular text-text-weak">
|
||||
Connect with Claude Pro/Max or API key
|
||||
</div>
|
||||
</Show>
|
||||
</div>
|
||||
)}
|
||||
</List>
|
||||
<Button
|
||||
variant="ghost"
|
||||
class="w-full justify-start px-[11px] py-3.5 gap-4.5 text-14-medium"
|
||||
icon="dot-grid"
|
||||
onClick={() => {
|
||||
layout.dialog.open("provider")
|
||||
}}
|
||||
>
|
||||
View all providers
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -12,11 +12,13 @@ import type {
|
|||
Todo,
|
||||
SessionStatus,
|
||||
ProviderListResponse,
|
||||
ProviderAuthResponse,
|
||||
} from "@opencode-ai/sdk/v2"
|
||||
import { createStore, produce, reconcile } from "solid-js/store"
|
||||
import { Binary } from "@opencode-ai/util/binary"
|
||||
import { createSimpleContext } from "@opencode-ai/ui/context"
|
||||
import { useGlobalSDK } from "./global-sdk"
|
||||
import { onMount } from "solid-js"
|
||||
|
||||
type State = {
|
||||
ready: boolean
|
||||
|
|
@ -54,11 +56,13 @@ export const { use: useGlobalSync, provider: GlobalSyncProvider } = createSimple
|
|||
ready: boolean
|
||||
project: Project[]
|
||||
provider: ProviderListResponse
|
||||
provider_auth: ProviderAuthResponse
|
||||
children: Record<string, State>
|
||||
}>({
|
||||
ready: false,
|
||||
project: [],
|
||||
provider: { all: [], connected: [], default: {} },
|
||||
provider_auth: {},
|
||||
children: {},
|
||||
})
|
||||
|
||||
|
|
@ -113,6 +117,10 @@ export const { use: useGlobalSync, provider: GlobalSyncProvider } = createSimple
|
|||
|
||||
const [store, setStore] = child(directory)
|
||||
switch (event.type) {
|
||||
// case "server.instance.disposed": {
|
||||
// bootstrap()
|
||||
// break
|
||||
// }
|
||||
case "session.updated": {
|
||||
const result = Binary.search(store.session, event.properties.info.id, (s) => s.id)
|
||||
if (result.found) {
|
||||
|
|
@ -181,19 +189,28 @@ export const { use: useGlobalSync, provider: GlobalSyncProvider } = createSimple
|
|||
}
|
||||
})
|
||||
|
||||
Promise.all([
|
||||
sdk.client.project.list().then(async (x) => {
|
||||
setGlobalStore(
|
||||
"project",
|
||||
x
|
||||
.data!.filter((p) => !p.worktree.includes("opencode-test") && p.vcs)
|
||||
.sort((a, b) => a.id.localeCompare(b.id)),
|
||||
)
|
||||
}),
|
||||
sdk.client.provider.list().then((x) => {
|
||||
setGlobalStore("provider", x.data ?? {})
|
||||
}),
|
||||
]).then(() => setGlobalStore("ready", true))
|
||||
async function bootstrap() {
|
||||
return Promise.all([
|
||||
sdk.client.project.list().then(async (x) => {
|
||||
setGlobalStore(
|
||||
"project",
|
||||
x
|
||||
.data!.filter((p) => !p.worktree.includes("opencode-test") && p.vcs)
|
||||
.sort((a, b) => a.id.localeCompare(b.id)),
|
||||
)
|
||||
}),
|
||||
sdk.client.provider.list().then((x) => {
|
||||
setGlobalStore("provider", x.data ?? {})
|
||||
}),
|
||||
sdk.client.provider.auth().then((x) => {
|
||||
setGlobalStore("provider_auth", x.data ?? {})
|
||||
}),
|
||||
]).then(() => setGlobalStore("ready", true))
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
bootstrap()
|
||||
})
|
||||
|
||||
return {
|
||||
data: globalStore,
|
||||
|
|
@ -201,6 +218,7 @@ export const { use: useGlobalSync, provider: GlobalSyncProvider } = createSimple
|
|||
return globalStore.ready
|
||||
},
|
||||
child,
|
||||
bootstrap,
|
||||
}
|
||||
},
|
||||
})
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { createStore } from "solid-js/store"
|
||||
import { createMemo, onMount } from "solid-js"
|
||||
import { batch, createMemo, onMount } from "solid-js"
|
||||
import { createSimpleContext } from "@opencode-ai/ui/context"
|
||||
import { makePersisted } from "@solid-primitives/storage"
|
||||
import { useGlobalSync } from "./global-sync"
|
||||
|
|
@ -19,6 +19,8 @@ const PASTEL_COLORS = [
|
|||
"#C1E1C1", // pastel mint
|
||||
]
|
||||
|
||||
type Dialog = "provider" | "model" | "connect"
|
||||
|
||||
export const { use: useLayout, provider: LayoutProvider } = createSimpleContext({
|
||||
name: "Layout",
|
||||
init: () => {
|
||||
|
|
@ -44,8 +46,11 @@ export const { use: useLayout, provider: LayoutProvider } = createSimpleContext(
|
|||
},
|
||||
)
|
||||
const [ephemeral, setEphemeral] = createStore({
|
||||
connect: {
|
||||
provider: undefined as undefined | string,
|
||||
},
|
||||
dialog: {
|
||||
open: undefined as undefined | "provider" | "model",
|
||||
open: undefined as undefined | Dialog,
|
||||
},
|
||||
})
|
||||
const usedColors = new Set<string>()
|
||||
|
|
@ -169,14 +174,23 @@ export const { use: useLayout, provider: LayoutProvider } = createSimpleContext(
|
|||
},
|
||||
dialog: {
|
||||
opened: createMemo(() => ephemeral.dialog?.open),
|
||||
open(dialog: "provider" | "model") {
|
||||
open(dialog: Dialog) {
|
||||
setEphemeral("dialog", "open", dialog)
|
||||
},
|
||||
close(dialog: "provider" | "model") {
|
||||
close(dialog: Dialog) {
|
||||
if (ephemeral.dialog?.open === dialog) {
|
||||
setEphemeral("dialog", "open", undefined)
|
||||
}
|
||||
},
|
||||
connect(provider: string) {
|
||||
batch(() => {
|
||||
setEphemeral("dialog", "open", "connect")
|
||||
setEphemeral("connect", "provider", provider)
|
||||
})
|
||||
},
|
||||
},
|
||||
connect: {
|
||||
provider: createMemo(() => ephemeral.connect.provider),
|
||||
},
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { produce } from "solid-js/store"
|
||||
import { createMemo } from "solid-js"
|
||||
import { createMemo, onMount } from "solid-js"
|
||||
import { Binary } from "@opencode-ai/util/binary"
|
||||
import { createSimpleContext } from "@opencode-ai/ui/context"
|
||||
import { useGlobalSync } from "./global-sync"
|
||||
|
|
@ -31,7 +31,24 @@ export const { use: useSync, provider: SyncProvider } = createSimpleContext({
|
|||
node: () => sdk.client.file.list({ path: "/" }).then((x) => setStore("node", x.data!)),
|
||||
}
|
||||
|
||||
Promise.all(Object.values(load).map((p) => p())).then(() => setStore("ready", true))
|
||||
async function bootstrap() {
|
||||
return Promise.all(Object.values(load).map((p) => p())).then(() => setStore("ready", true))
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
bootstrap()
|
||||
})
|
||||
|
||||
sdk.event.listen((e) => {
|
||||
if (e.name !== sdk.directory) return
|
||||
const event = e.details
|
||||
switch (event.type) {
|
||||
case "server.instance.disposed": {
|
||||
bootstrap()
|
||||
break
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
const absolute = (path: string) => (store.path.directory + "/" + path).replace("//", "/")
|
||||
|
||||
|
|
@ -82,7 +99,7 @@ export const { use: useSync, provider: SyncProvider } = createSimpleContext({
|
|||
},
|
||||
more: createMemo(() => store.session.length >= store.limit),
|
||||
},
|
||||
load,
|
||||
bootstrap,
|
||||
absolute,
|
||||
get directory() {
|
||||
return store.path.directory
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ import { DiffChanges } from "@opencode-ai/ui/diff-changes"
|
|||
import { getFilename } from "@opencode-ai/util/path"
|
||||
import { Select } from "@opencode-ai/ui/select"
|
||||
import { DropdownMenu } from "@opencode-ai/ui/dropdown-menu"
|
||||
import { Session, Project } from "@opencode-ai/sdk/v2/client"
|
||||
import { Session, Project, ProviderAuthMethod } from "@opencode-ai/sdk/v2/client"
|
||||
import { usePlatform } from "@/context/platform"
|
||||
import { createStore } from "solid-js/store"
|
||||
import {
|
||||
|
|
@ -34,6 +34,11 @@ import { SelectDialog } from "@opencode-ai/ui/select-dialog"
|
|||
import { Tag } from "@opencode-ai/ui/tag"
|
||||
import { IconName } from "@opencode-ai/ui/icons/provider"
|
||||
import { popularProviders, useProviders } from "@/hooks/use-providers"
|
||||
import { Dialog } from "@opencode-ai/ui/dialog"
|
||||
import { iife } from "@opencode-ai/util/iife"
|
||||
import { List, ListRef } from "@opencode-ai/ui/list"
|
||||
import { Input } from "@opencode-ai/ui/input"
|
||||
import { useGlobalSDK } from "@/context/global-sdk"
|
||||
|
||||
export default function Layout(props: ParentProps) {
|
||||
const [store, setStore] = createStore({
|
||||
|
|
@ -42,6 +47,7 @@ export default function Layout(props: ParentProps) {
|
|||
})
|
||||
|
||||
const params = useParams()
|
||||
const globalSDK = useGlobalSDK()
|
||||
const globalSync = useGlobalSync()
|
||||
const layout = useLayout()
|
||||
const platform = usePlatform()
|
||||
|
|
@ -562,7 +568,6 @@ export default function Layout(props: ParentProps) {
|
|||
activeIcon="plus-small"
|
||||
key={(x) => x?.id}
|
||||
items={providers().all}
|
||||
// current={local.model.current()}
|
||||
filterKeys={["id", "name"]}
|
||||
groupBy={(x) => (popularProviders.includes(x.id) ? "Popular" : "Other")}
|
||||
sortBy={(a, b) => {
|
||||
|
|
@ -575,7 +580,10 @@ export default function Layout(props: ParentProps) {
|
|||
if (b.category === "Popular" && a.category !== "Popular") return 1
|
||||
return 0
|
||||
}}
|
||||
// onSelect={(x) => }
|
||||
onSelect={(x) => {
|
||||
if (!x) return
|
||||
layout.dialog.connect(x.id)
|
||||
}}
|
||||
onOpenChange={(open) => {
|
||||
if (open) {
|
||||
layout.dialog.open("provider")
|
||||
|
|
@ -607,6 +615,205 @@ export default function Layout(props: ParentProps) {
|
|||
)}
|
||||
</SelectDialog>
|
||||
</Show>
|
||||
<Show when={layout.dialog?.opened() === "connect"}>
|
||||
{iife(() => {
|
||||
const [store, setStore] = createStore({
|
||||
method: undefined as undefined | ProviderAuthMethod,
|
||||
})
|
||||
const providerID = layout.connect.provider()!
|
||||
const provider = globalSync.data.provider.all.find((x) => x.id === providerID)!
|
||||
const methods = globalSync.data.provider_auth[providerID] ?? [
|
||||
{
|
||||
type: "api",
|
||||
label: "API key",
|
||||
},
|
||||
]
|
||||
if (methods.length === 1) {
|
||||
setStore("method", methods[0])
|
||||
}
|
||||
|
||||
let listRef: ListRef | undefined
|
||||
const handleKey = (e: KeyboardEvent) => {
|
||||
if (e.key === "Escape") return
|
||||
listRef?.onKeyDown(e)
|
||||
}
|
||||
|
||||
return (
|
||||
<Dialog
|
||||
modal
|
||||
defaultOpen
|
||||
onOpenChange={(open) => {
|
||||
if (open) {
|
||||
layout.dialog.open("connect")
|
||||
} else {
|
||||
layout.dialog.close("connect")
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Dialog.Header class="px-4.5">
|
||||
<Dialog.Title class="flex items-center">
|
||||
<IconButton
|
||||
tabIndex={-1}
|
||||
icon="arrow-left"
|
||||
variant="ghost"
|
||||
onClick={() => {
|
||||
if (store.method && methods.length > 1) {
|
||||
setStore("method", undefined)
|
||||
return
|
||||
}
|
||||
layout.dialog.open("provider")
|
||||
}}
|
||||
/>
|
||||
</Dialog.Title>
|
||||
<Dialog.CloseButton tabIndex={-1} />
|
||||
</Dialog.Header>
|
||||
<Dialog.Body>
|
||||
<div class="flex flex-col gap-6 px-2.5 pb-3">
|
||||
<div class="px-2.5 flex gap-4 items-center">
|
||||
<ProviderIcon id={providerID as IconName} class="size-5 shrink-0 icon-strong-base" />
|
||||
<div class="text-16-medium text-text-strong">Connect {provider.name}</div>
|
||||
</div>
|
||||
<Show when={store.method === undefined}>
|
||||
<div class="px-2.5 text-14-regular text-text-base">Select login method for {provider.name}.</div>
|
||||
<div class="">
|
||||
<Input hidden type="text" class="opacity-0 size-0" autofocus onKeyDown={handleKey} />
|
||||
<List
|
||||
ref={(ref) => (listRef = ref)}
|
||||
items={methods}
|
||||
key={(m) => m?.label}
|
||||
onSelect={(method) => {
|
||||
if (!method) return
|
||||
setStore("method", method)
|
||||
|
||||
if (method.type === "oauth") {
|
||||
// const result = await sdk.client.provider.oauth.authorize({
|
||||
// providerID: provider.id,
|
||||
// method: index,
|
||||
// })
|
||||
// if (result.data?.method === "code") {
|
||||
// dialog.replace(() => (
|
||||
// <CodeMethod
|
||||
// providerID={provider.id}
|
||||
// title={method.label}
|
||||
// index={index}
|
||||
// authorization={result.data!}
|
||||
// />
|
||||
// ))
|
||||
// }
|
||||
// if (result.data?.method === "auto") {
|
||||
// dialog.replace(() => (
|
||||
// <AutoMethod
|
||||
// providerID={provider.id}
|
||||
// title={method.label}
|
||||
// index={index}
|
||||
// authorization={result.data!}
|
||||
// />
|
||||
// ))
|
||||
// }
|
||||
}
|
||||
if (method.type === "api") {
|
||||
// return dialog.replace(() => <ApiMethod providerID={provider.id} title={method.label} />)
|
||||
}
|
||||
}}
|
||||
>
|
||||
{(i) => (
|
||||
<div class="w-full flex items-center gap-x-2.5">
|
||||
{/* TODO: add checkmark thing */}
|
||||
<span>{i.label}</span>
|
||||
</div>
|
||||
)}
|
||||
</List>
|
||||
</div>
|
||||
</Show>
|
||||
<Show when={store.method?.type === "api"}>
|
||||
{iife(() => {
|
||||
const [formStore, setFormStore] = createStore({
|
||||
value: "",
|
||||
error: undefined as string | undefined,
|
||||
})
|
||||
|
||||
async function handleSubmit(e: SubmitEvent) {
|
||||
e.preventDefault()
|
||||
|
||||
const form = e.currentTarget as HTMLFormElement
|
||||
const formData = new FormData(form)
|
||||
const apiKey = formData.get("apiKey") as string
|
||||
|
||||
if (!apiKey?.trim()) {
|
||||
setFormStore("error", "API key is required")
|
||||
return
|
||||
}
|
||||
|
||||
setFormStore("error", undefined)
|
||||
globalSDK.client.auth.set({
|
||||
providerID,
|
||||
auth: {
|
||||
type: "api",
|
||||
key: apiKey,
|
||||
},
|
||||
})
|
||||
await globalSDK.client.instance.dispose()
|
||||
}
|
||||
|
||||
return (
|
||||
<div class="px-2.5 pb-10 flex flex-col gap-6">
|
||||
<Switch>
|
||||
<Match when={provider.id === "opencode"}>
|
||||
<div class="flex flex-col gap-4">
|
||||
<div class="text-14-regular text-text-base">
|
||||
OpenCode Zen gives you access to a curated set of reliable optimized models for
|
||||
coding agents.
|
||||
</div>
|
||||
<div class="text-14-regular text-text-base">
|
||||
With a single API key you’ll get access to models such as Claude, GPT, Gemini, GLM
|
||||
and more.
|
||||
</div>
|
||||
<div class="text-14-regular text-text-base">
|
||||
Visit{" "}
|
||||
<button
|
||||
tabIndex={-1}
|
||||
class="text-text-strong underline"
|
||||
onClick={() => platform.openLink("https://opencode.ai/zen")}
|
||||
>
|
||||
opencode.ai/zen
|
||||
</button>{" "}
|
||||
to collect your API key.
|
||||
</div>
|
||||
</div>
|
||||
</Match>
|
||||
<Match when={true}>
|
||||
<div class="text-14-regular text-text-base">
|
||||
Enter your {provider.name} API key to connect your account and use {provider.name}{" "}
|
||||
models in OpenCode.
|
||||
</div>
|
||||
</Match>
|
||||
</Switch>
|
||||
<form onSubmit={handleSubmit} class="flex flex-col items-start gap-4">
|
||||
<Input
|
||||
autofocus
|
||||
type="text"
|
||||
label={`${provider.name} API key`}
|
||||
placeholder="API key"
|
||||
name="apiKey"
|
||||
value={formStore.value}
|
||||
onChange={setFormStore.bind(null, "value")}
|
||||
validationState={formStore.error ? "invalid" : undefined}
|
||||
error={formStore.error}
|
||||
/>
|
||||
<Button class="w-auto" type="submit" size="large" variant="primary">
|
||||
Submit
|
||||
</Button>
|
||||
</form>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</Show>
|
||||
</div>
|
||||
</Dialog.Body>
|
||||
</Dialog>
|
||||
)
|
||||
})}
|
||||
</Show>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -11,27 +11,29 @@
|
|||
outline: none;
|
||||
|
||||
&[data-variant="primary"] {
|
||||
border-color: var(--border-base);
|
||||
background-color: var(--surface-brand-base);
|
||||
color: var(--text-on-brand-strong);
|
||||
background-color: var(--icon-strong-base);
|
||||
border-color: var(--border-weak-base);
|
||||
color: var(--icon-invert-base);
|
||||
|
||||
[data-slot="icon-svg"] {
|
||||
color: var(--icon-invert-base);
|
||||
}
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
border-color: var(--border-hover);
|
||||
background-color: var(--surface-brand-hover);
|
||||
background-color: var(--icon-strong-hover);
|
||||
}
|
||||
&:focus:not(:disabled) {
|
||||
border-color: var(--border-focus);
|
||||
background-color: var(--surface-brand-focus);
|
||||
background-color: var(--icon-strong-focus);
|
||||
}
|
||||
&:active:not(:disabled) {
|
||||
border-color: var(--border-active);
|
||||
background-color: var(--surface-brand-active);
|
||||
background-color: var(--icon-strong-active);
|
||||
}
|
||||
&:disabled {
|
||||
border-color: var(--border-disabled);
|
||||
background-color: var(--surface-disabled);
|
||||
color: var(--text-weak);
|
||||
cursor: not-allowed;
|
||||
background-color: var(--icon-strong-disabled);
|
||||
|
||||
[data-slot="icon-svg"] {
|
||||
color: var(--icon-invert-base);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -120,13 +122,13 @@
|
|||
|
||||
&[data-size="large"] {
|
||||
height: 32px;
|
||||
padding: 0 8px;
|
||||
padding: 6px 12px;
|
||||
|
||||
&[data-icon] {
|
||||
padding: 0 12px 0 8px;
|
||||
}
|
||||
|
||||
gap: 8px;
|
||||
gap: 4px;
|
||||
|
||||
/* text-14-medium */
|
||||
font-family: var(--font-family-sans);
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ import {
|
|||
DialogCloseButtonProps,
|
||||
DialogDescriptionProps,
|
||||
} from "@kobalte/core/dialog"
|
||||
import { ComponentProps, type JSX, onCleanup, Show, splitProps } from "solid-js"
|
||||
import { ComponentProps, type JSX, onCleanup, onMount, Show, splitProps } from "solid-js"
|
||||
import { IconButton } from "./icon-button"
|
||||
|
||||
export interface DialogProps extends DialogRootProps {
|
||||
|
|
@ -35,6 +35,11 @@ export function DialogRoot(props: DialogProps) {
|
|||
})
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
// @ts-ignore
|
||||
document?.activeElement?.blur?.()
|
||||
})
|
||||
|
||||
return (
|
||||
<Kobalte {...others}>
|
||||
<Show when={props.trigger}>
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ import { splitProps, type ComponentProps } from "solid-js"
|
|||
const icons = {
|
||||
"align-right": `<path d="M12.292 6.04167L16.2503 9.99998L12.292 13.9583M2.91699 9.99998H15.6253M17.0837 3.75V16.25" stroke="currentColor" stroke-linecap="square"/>`,
|
||||
"arrow-up": `<path fill-rule="evenodd" clip-rule="evenodd" d="M9.99991 2.24121L16.0921 8.33343L15.2083 9.21731L10.6249 4.63397V17.5001H9.37492V4.63398L4.7916 9.21731L3.90771 8.33343L9.99991 2.24121Z" fill="currentColor"/>`,
|
||||
"arrow-left": `<path d="M8.33464 4.58398L2.91797 10.0007L8.33464 15.4173M3.33464 10.0007H17.0846" stroke="currentColor" stroke-linecap="square"/>`,
|
||||
"bubble-5": `<path d="M18.3327 9.99935C18.3327 5.57227 15.0919 2.91602 9.99935 2.91602C4.90676 2.91602 1.66602 5.57227 1.66602 9.99935C1.66602 11.1487 2.45505 13.1006 2.57637 13.3939C2.58707 13.4197 2.59766 13.4434 2.60729 13.4697C2.69121 13.6987 3.04209 14.9354 1.66602 16.7674C3.51787 17.6528 5.48453 16.1973 5.48453 16.1973C6.84518 16.9193 8.46417 17.0827 9.99935 17.0827C15.0919 17.0827 18.3327 14.4264 18.3327 9.99935Z" stroke="currentColor" stroke-linecap="square"/>`,
|
||||
"bullet-list": `<path d="M9.58329 13.7497H17.0833M9.58329 6.24967H17.0833M6.24996 6.24967C6.24996 7.17015 5.50377 7.91634 4.58329 7.91634C3.66282 7.91634 2.91663 7.17015 2.91663 6.24967C2.91663 5.3292 3.66282 4.58301 4.58329 4.58301C5.50377 4.58301 6.24996 5.3292 6.24996 6.24967ZM6.24996 13.7497C6.24996 14.6701 5.50377 15.4163 4.58329 15.4163C3.66282 15.4163 2.91663 14.6701 2.91663 13.7497C2.91663 12.8292 3.66282 12.083 4.58329 12.083C5.50377 12.083 6.24996 12.8292 6.24996 13.7497Z" stroke="currentColor" stroke-linecap="square"/>`,
|
||||
"check-small": `<path d="M6.5 11.4412L8.97059 13.5L13.5 6.5" stroke="currentColor" stroke-linecap="square"/>`,
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
[data-component="input"] {
|
||||
width: 100%;
|
||||
/* [data-slot="input-label"] {} */
|
||||
|
||||
[data-slot="input-input"] {
|
||||
width: 100%;
|
||||
|
|
@ -22,4 +21,79 @@
|
|||
color: var(--text-weak);
|
||||
}
|
||||
}
|
||||
|
||||
&[data-variant="normal"] {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
|
||||
[data-slot="input-label"] {
|
||||
color: var(--text-weak);
|
||||
|
||||
/* text-12-medium */
|
||||
font-family: var(--font-family-sans);
|
||||
font-size: var(--font-size-small);
|
||||
font-style: normal;
|
||||
font-weight: var(--font-weight-medium);
|
||||
line-height: 18px; /* 150% */
|
||||
letter-spacing: var(--letter-spacing-normal);
|
||||
}
|
||||
|
||||
[data-slot="input-input"] {
|
||||
color: var(--text-strong);
|
||||
|
||||
display: flex;
|
||||
height: 32px;
|
||||
padding: 2px 12px;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
align-self: stretch;
|
||||
|
||||
border-radius: var(--radius-md);
|
||||
border: 1px solid var(--border-weak-base);
|
||||
background: var(--input-base);
|
||||
|
||||
/* text-14-regular */
|
||||
font-family: var(--font-family-sans);
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: var(--font-weight-regular);
|
||||
line-height: var(--line-height-large); /* 142.857% */
|
||||
letter-spacing: var(--letter-spacing-normal);
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
|
||||
/* border/shadow-xs/select */
|
||||
box-shadow:
|
||||
0 0 0 3px var(--border-weak-selected),
|
||||
0 0 0 1px var(--border-selected),
|
||||
0 1px 2px -1px rgba(19, 16, 16, 0.25),
|
||||
0 1px 2px 0 rgba(19, 16, 16, 0.08),
|
||||
0 1px 3px 0 rgba(19, 16, 16, 0.12);
|
||||
}
|
||||
|
||||
&[data-invalid] {
|
||||
background: var(--surface-critical-weak);
|
||||
border: 1px solid var(--border-critical-selected);
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
color: var(--text-weak);
|
||||
}
|
||||
}
|
||||
|
||||
[data-slot="input-error"] {
|
||||
color: var(--text-on-critical-base);
|
||||
|
||||
/* text-12-medium */
|
||||
font-family: var(--font-family-sans);
|
||||
font-size: var(--font-size-small);
|
||||
font-style: normal;
|
||||
font-weight: var(--font-weight-medium);
|
||||
line-height: 18px; /* 150% */
|
||||
letter-spacing: var(--letter-spacing-normal);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,31 +4,61 @@ import type { ComponentProps } from "solid-js"
|
|||
|
||||
export interface InputProps
|
||||
extends ComponentProps<typeof Kobalte.Input>,
|
||||
Partial<Pick<ComponentProps<typeof Kobalte>, "value" | "onChange" | "onKeyDown">> {
|
||||
Partial<
|
||||
Pick<
|
||||
ComponentProps<typeof Kobalte>,
|
||||
| "name"
|
||||
| "defaultValue"
|
||||
| "value"
|
||||
| "onChange"
|
||||
| "onKeyDown"
|
||||
| "validationState"
|
||||
| "required"
|
||||
| "disabled"
|
||||
| "readOnly"
|
||||
>
|
||||
> {
|
||||
label?: string
|
||||
hideLabel?: boolean
|
||||
hidden?: boolean
|
||||
description?: string
|
||||
error?: string
|
||||
variant?: "normal" | "ghost"
|
||||
}
|
||||
|
||||
export function Input(props: InputProps) {
|
||||
const [local, others] = splitProps(props, [
|
||||
"name",
|
||||
"defaultValue",
|
||||
"value",
|
||||
"onChange",
|
||||
"onKeyDown",
|
||||
"validationState",
|
||||
"required",
|
||||
"disabled",
|
||||
"readOnly",
|
||||
"class",
|
||||
"label",
|
||||
"hidden",
|
||||
"hideLabel",
|
||||
"description",
|
||||
"value",
|
||||
"onChange",
|
||||
"onKeyDown",
|
||||
"error",
|
||||
"variant",
|
||||
])
|
||||
return (
|
||||
<Kobalte
|
||||
data-component="input"
|
||||
style={{ height: local.hidden ? 0 : undefined }}
|
||||
data-variant={local.variant || "normal"}
|
||||
name={local.name}
|
||||
defaultValue={local.defaultValue}
|
||||
value={local.value}
|
||||
onChange={local.onChange}
|
||||
onKeyDown={local.onKeyDown}
|
||||
required={local.required}
|
||||
disabled={local.disabled}
|
||||
readOnly={local.readOnly}
|
||||
style={{ height: local.hidden ? 0 : undefined }}
|
||||
validationState={local.validationState}
|
||||
>
|
||||
<Show when={local.label}>
|
||||
<Kobalte.Label data-slot="input-label" classList={{ "sr-only": local.hideLabel }}>
|
||||
|
|
@ -39,7 +69,7 @@ export function Input(props: InputProps) {
|
|||
<Show when={local.description}>
|
||||
<Kobalte.Description data-slot="input-description">{local.description}</Kobalte.Description>
|
||||
</Show>
|
||||
<Kobalte.ErrorMessage data-slot="input-error" />
|
||||
<Kobalte.ErrorMessage data-slot="input-error">{local.error}</Kobalte.ErrorMessage>
|
||||
</Kobalte>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
import { createEffect, Show, type JSX, splitProps, createSignal } from "solid-js"
|
||||
import { Dialog, DialogProps } from "./dialog"
|
||||
import { Icon } from "./icon"
|
||||
import { Input } from "./input"
|
||||
import { IconButton } from "./icon-button"
|
||||
import { List, ListRef, ListProps } from "./list"
|
||||
import { Input } from "./input"
|
||||
|
||||
interface SelectDialogProps<T>
|
||||
extends Omit<ListProps<T>, "filter">,
|
||||
|
|
@ -29,8 +29,8 @@ export function SelectDialog<T>(props: SelectDialogProps<T>) {
|
|||
})
|
||||
})
|
||||
|
||||
const handleSelect = (item: T | undefined) => {
|
||||
others.onSelect?.(item)
|
||||
const handleSelect = (item: T | undefined, index: number) => {
|
||||
others.onSelect?.(item, index)
|
||||
closeButton.click()
|
||||
}
|
||||
|
||||
|
|
@ -58,6 +58,7 @@ export function SelectDialog<T>(props: SelectDialogProps<T>) {
|
|||
<Input
|
||||
ref={inputRef}
|
||||
autofocus
|
||||
variant="ghost"
|
||||
data-slot="select-dialog-input"
|
||||
type="text"
|
||||
value={filter()}
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ export interface FilteredListProps<T> {
|
|||
groupBy?: (x: T) => string
|
||||
sortBy?: (a: T, b: T) => number
|
||||
sortGroupsBy?: (a: { category: string; items: T[] }, b: { category: string; items: T[] }) => number
|
||||
onSelect?: (value: T | undefined) => void
|
||||
onSelect?: (value: T | undefined, index: number) => void
|
||||
}
|
||||
|
||||
export function useFilteredList<T>(props: FilteredListProps<T>) {
|
||||
|
|
@ -63,8 +63,9 @@ export function useFilteredList<T>(props: FilteredListProps<T>) {
|
|||
const onKeyDown = (event: KeyboardEvent) => {
|
||||
if (event.key === "Enter") {
|
||||
event.preventDefault()
|
||||
const selected = flat().find((x) => props.key(x) === list.active())
|
||||
if (selected) props.onSelect?.(selected)
|
||||
const selectedIndex = flat().findIndex((x) => props.key(x) === list.active())
|
||||
const selected = flat()[selectedIndex]
|
||||
if (selected) props.onSelect?.(selected, selectedIndex)
|
||||
} else {
|
||||
list.onKeyDown(event)
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue