@dpa-id-components/dpa-shared-components 21.1.1 → 22.0.0-next.1

package/src/components/UiMenu/README.md

@@ -9,11 +9,73 @@
 
 <script setup>
 import { UiMenu } from "@dpa-id-components/dpa-shared-components";
+import { ref } from "vue";
+
+const options = ref([
+  {
+    value: "code",
+    label: "Code",
+    selected: true,
+  },
+  {
+    value: "issues",
+    label: "Issues",
+    selected: false,
+  },
+  {
+    value: "pull_requests",
+    label: "Pull requests",
+    selected: false,
+  },
+]);
+</script>
+```
+
+**With search**:
+
+```vue
+<template>
+  <UiMenu
+    v-model:query="query"
+    :options="options"
+    has-search
+    has-reset-option
+  />
+</template>
+
+<script setup>
+import { UiMenu } from "@dpa-id-components/dpa-shared-components";
+import { ref } from "vue";
+
+const query = ref("");
+const options = ref([
+  {
+    value: "code",
+    label: "Code",
+    selected: true,
+  },
+  {
+    value: "issues",
+    label: "Issues",
+    selected: false,
+  },
+  {
+    value: "pull_requests",
+    label: "Pull requests",
+    selected: false,
+  },
+]);
 </script>
 ```
 
 ## API
 
+### Models
+
+| Name   | Type     | Default | Description          |
+|--------|----------|---------|----------------------|
+| `query`| `string` | `""`    | Search `input` value |
+
 ### Props
 
 | Name                   | Type                                                                                                            | Default                       | Description                                                                                                                                                                                                                                  |
@@ -21,16 +83,15 @@ import { UiMenu } from "@dpa-id-components/dpa-shared-components";
 | `options`              | `UiMenuOptionType<Value>[]`                                     | required (un-grouped variant) | Array of options for selection.                                                                                                                                                                                                              |
 | `groupedOptions`       | `UiMenuGroupedOption<Value>[];` | required (grouped variant)    | Array of grouped options for selection.                                                                                                                                                                                                      |
 | `defaultTitle`         | `string`                                                                                                        | `""`                          | Default title to display when nothing is selected.                                                                                                                                                                                           |
-| `isOpen`               | `boolean`                                                                                                       | `false`                       | Toggles visibility selection list.                                                                                                                                                                                                           |
+| `isOpen`               | `boolean`                                                                                                       | `false`                       | Whether the menu is initially open.                                                                                                                                                                                                           |
 | `disabled`             | `boolean`                                                                                                       | `false`                       | Disables the button to open selection.                                                                                                                                                                                                       |
 | `active`               | `boolean`                                                                                                       | `false`                       | Sets active style to indicate an active filter selection.                                                                                                                                                                                    |
-| `buttonVariant`        | `"blue rounded" &#124; "white-rounded" &#124; "transparent-rounded" &#124; "blank"`                             | `"white-rounded"`             | Button style, see UiFilterButton.                                                                                                                                                                                                            |
+| `buttonAppearance` | `"primary"`, `"secondary"`, `"secondary-alt"`, or `"ghost"` | `"secondary-alt"` |  |
 | `listVariant`          | `"checkbox" &#124; "selectable" &#124; "blank"`                                                                 | `"blank"`                     | Menu style.                                                                                                                                                                                                                                  |
 | `checkboxColor`        | `"blue" &#124; "gray"`                                                                                          | `"blue"`                      | Checkbox color style.                                                                                                                                                                                                                        |
 | `checkboxSize`         | `"small" &#124; "medium"`                                                                                       | `"medium"`                    | Checkbox size style.                                                                                                                                                                                                                         |
 | `imageShape`           | `"rounded" &#124; "square"`                                                                                     | `"square"`                    | shape of image.                                                                                                                                                                                                                              |
 | `hasResetOption`       | `boolean`                                                                                                       | `false`                       | Toggles option for a reset button                                                                                                                                                                                                            |
-| `disabledReset`        | `boolean`                                                                                                       | `false`                       | Disables reset button.                                                                                                                                                                                                                       |
 | `resetLabel`           | `string`                                                                                                        | `""`                         | Sets text of reset button.                                                                                                                                                                                                                   |
 | `searchPlaceholder`    | `string`                                                                                                        | `""`                         | Sets text of search input placeholder.                                                                                                                                                                                                       |
 | `hasSearch`            | `boolean`                                                                                                       | `false`                       | Toggles option for a search input.                                                                                                                                                                                                           |
@@ -39,9 +100,7 @@ import { UiMenu } from "@dpa-id-components/dpa-shared-components";
 | `noTitle`              | `boolean`                                                                                                       | `false`                       | Enabled prop displays dropdown without a title.                                                                                                                                                                                              |
 | `floatingStylesActive` | `boolean`                                                                                                       | `true`                        | prop to disable styles from floating-ui.                                                                                                                                                                                                     |
 | `floatingUiPlacement`  | `Placement`                                                                                                     | `bottom-start`                | Options for [Floating Ui](https://floating-ui.com/) [Interface](https://github.com/floating-ui/floating-ui/blob/afca34cc59321569ccfca9b41934859809c47a3d/packages/utils/src/index.ts#L8)                                                     |
-| `floatingUiOptions`    | `UseFloatingOptions`                                                                                            | `null`                        | Options for [Floating Ui](https://floating-ui.com/) [Interface](https://github.com/floating-ui/floating-ui/blob/afca34cc59321569ccfca9b41934859809c47a3d/packages/vue/src/types.ts#L60)                                                      |
 | `animate`              | `boolean`                                                                                                       | `false`                       | Animate the opening and closing of the menu, the duration can be changed when applying `placed-list-class="[--transition-duration:3000ms]"` for animating in and `placed-list-class="[-transition-close-duration:2000ms]"` for animating out |
-| `query`| `string` | `""` | Initial value for the search input. |
 
 ### Events
 
@@ -50,9 +109,7 @@ import { UiMenu } from "@dpa-id-components/dpa-shared-components";
 | `open`            | none     |  |
 | `close`           | none     |  |
 | `option-selected` | `UiMenuSelectedOption<Value>` |  |
-| `input`           | `string` | Emits the string whenever the value in search input changes |
 | `reset`           | none     | Emitted when reset button is clicked                        |
-| `placed`          | none     |  |
 
 ### Slots