DuskMoon workflow duskmoon implemented 3 demos

DmQuery

DmQuery documents the DmQuery export from duskmoon.

Import @duskmoon-dev/components/dm-query

3 API sections

6 documented props

1 behavior scenarios

Key API

queryItemfastFilterItemcollapsedformonResetretractChange

Usage

When to use

Use it in DuskMoon application screens that need a packaged, opinionated workflow component.
Reach for the lower-level standard component when the screen needs custom composition.

Implementation notes

Stylesheet Import @duskmoon-dev/components/styles.css once in the app or docs shell.

State Start with default props for static examples, then switch to controlled props when state must be shared.

Theme The preview inherits the active DuskMoon data-theme value from the docs layout.

Features

DuskMoon workflow wrapper

Wraps lower-level primitives into a higher-level DuskMoon-prefixed workflow API.

Application defaults

Examples show the defaults and composition points expected by internal DuskMoon app screens.

Primary API surface

DmQuery is most often configured through `queryItem`, `fastFilterItem`, `collapsed`, `form`.

Covered behavior

Maps queryItem to Dm search items and exposes retractChange

Feature Demos

Feature demos are authored for the component page, then supplemented with behavior scenarios from the component test coverage.

Preview

Basic usage

authored

Import the component stylesheet and DmQuery from its package subpath, then render it with the core props.

Source

import "@duskmoon-dev/components/styles.css";
import { DmQuery } from "@duskmoon-dev/components/dm-query";

export function Example() {
  return (<DmQuery
  queryItem={[{
    key: "name",
    type: "input",
    label: "Name",
    name: "name"
  }]}
  onSearch={(values) => console.log(values)}
/>);
}

Preview

Maps queryItem to Dm search items and exposes retractChange

test-backed

DmQuery scenario from the component test coverage: maps queryitem to dm search items and exposes retractchange.

Source

import "@duskmoon-dev/components/styles.css";
import { DmQuery } from "@duskmoon-dev/components/dm-query";

export function DmQueryMapsQueryItemToDmDemo() {
  return (<DmQuery
  queryItem={[{
    key: "name",
    type: "input",
    label: "Name",
    name: "name"
  }]}
  onSearch={(values) => console.log(values)}
/>);
}

Preview

Sunshine Theme

Moonlight Theme

Theme aware

authored

Docs previews inherit the DuskMoon data-theme value. Use the header switch to compare light and dark rendering.

Source

<div data-theme="sunshine">
  <DmQuery
  queryItem={[{
    key: "name",
    type: "input",
    label: "Name",
    name: "name"
  }]}
  onSearch={(values) => console.log(values)}
/>
</div>

<div data-theme="moonlight">
  <DmQuery
  queryItem={[{
    key: "name",
    type: "input",
    label: "Name",
    name: "name"
  }]}
  onSearch={(values) => console.log(values)}
/>
</div>

API

The API reference below lists every parsed exported type or interface for DmQuery. Start with `queryItem`, `fastFilterItem`, `collapsed`, `form` for common usage.

Types: packages/components/src/components/dm-query/DmQuery.types.ts Scenarios: packages/components/src/components/dm-query/DmQuery.test.tsx

DmQueryProps interface extends Omit<DmSearchProps, "items" | "fastFilterItem" | "ref">, RefAttributes<DmQueryRef>

Prop	Type	Required	Description
`queryItem`	`DmQueryItem[]`	Yes	queryItem configures DmQuery.
`fastFilterItem`	`DmQueryItem`	No	fastFilterItem configures DmQuery.
`collapsed`	`boolean`	No	collapsed configures DmQuery.
`form`	`unknown`	No	form configures DmQuery.
`onReset`	`() => void`	No	onReset configures DmQuery.

DmQueryRef interface extends DmSearchRef

Prop	Type	Required	Description
`retractChange`	`(value: string, data?: DmQueryItem[]) => void`	Yes	retractChange configures DmQuery.

DmQueryItem type

{ key: string