Data EntryDmduskmoonimplemented3 demos

DmQuery

DmQuery builds a query form from field definitions with search and reset controls.

Import@duskmoon-dev/components/dm-query

3API sections

6documented props

1behavior 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

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

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

ThemeThe 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.tsScenarios: packages/components/src/components/dm-query/DmQuery.test.tsx

DmQueryPropsinterface 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.

DmQueryRefinterface extends DmSearchRef

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

DmQueryItemtype

{ key: string