import {
  Title, Subtitle, Description, Primary, Controls, Stories, Meta, Story, Canvas, Markdown
} from '@storybook/blocks';
import * as ComponentStories from './dt-location.stories.js';


<Meta name="Docs" of={ComponentStories} />

<Title />
<Subtitle />

## Overview
<Description />
<Primary />

## Parameters
<Controls />

### `filters`
Array of objects, each with an `id` and `label`, used to populate the filter dropdown.

## Slots

Inherits slots from
- [DtFormBase](?path=/docs/architecture-base-classes--docs#slots)
- [DTMultiSelect](?path=/docs/components-form-multi-select--docs#slots)
- [DtTags](?path=/docs/components-form-tags--docs#slots)

## Events

### `change`

**Event Detail:**
```json
{
  field: string,    // name attribute of field
  oldValue: object, // previous value before current change (object with id, label, possibly delete:true)
  newValue: object  // updated value (object with id, label, possibly delete:true)
}
```

### `dt:add-new`

Called when a new item is added to the list (e.g., via the add button or keyboard).

**Event Detail:**
```json
{
  field: string,    // name attribute of field
  value: object     // the new value that was added (object with id, label, isNew:true)
}
```

### `dt:get-data`

Called when the component is requesting a new list of options based on a
user search. This is usually used to retrieve a list from an API.
It should return a result that is a list of options via the `onSuccess` function.

**Event Detail:**
```json
{
  field: string,        // name attribute of field
  query: string,        // query typed by user to
  filter: string,       // current value of the filter dropdown
  onSuccess: function   // success function to call with resulting options (e.g. `onSuccess(newOptions);`
  onError: function     // error function to call in case of error
}
```

## CSS Properties / Theming

Inherits custom properties from
- [DtFormBase](?path=/docs/architecture-base-classes--docs#css-properties)
- [DTMultiSelect](?path=/docs/components-form-multi-select--docs#css-properties--theming)
- [DtTags](?path=/docs/components-form-tags--docs#css-properties--theming)

| Custom Property      | Description                                     | Default Value |
| :------------------- | :---------------------------------------------- | :------------ |
| `--select-width`     | Width of the filter select element, for layout. | `auto`        |

## Parts

| Part Name     | Description                     |
| :------------ | :------------------------------ |
| `filter-select` | The filter select element.      |