@dpa-id-components/ui-searchinputgroup

UiSearchInputGroup Vue 2.x input component based on the dpa Design Kit

Installation

yarn add @dpa-id-components/ui-searchinputgroup

## Usage

```html
<!-- DpaExpandedSearch.vue using UiSearchInputGroup -->
<template>
   <DpaExpandedSearch>
    <template #content>
      <UiSearchInputGroup :label="label" :placeholder="placeholder"
                          :is-checkbox="isCheckbox" :checkboxes="checkboxes" :first-entry-checks-all="true"
                          :is-dropdown="isDropdown" :dropdown-entries="dropdown"
                          :has-add-entry-option="addEntryOption" />
    </template>
    </DpaExpandedSearch>
</template>

<script>
  import DpaExpandedSearch from "@dpa-id-components/dpa-expandedsearch";
  import UiInputDialogGroup from "@dpa-id-components/ui-inputdialoggroup";

  export default {
    components: {
      DpaExpandedSearch,
      UiInputDialogGroup,
    },
   props: {
    label: "Enthält alle diese Wörter",
    placeholder: "Beispiel: Baerbock, Mercedes",
    isCheckbox: false,
    addEntryOption: true,
    checkboxes: [
    {
      name: "Alle Inhalte",
      isChecked: false,
    },
    {
      name: "Top Einträge",
      isChecked: false,
      iconName: "audio-inline",
    },
    {
      name: "Termine",
      isChecked: false,
    },
  ],
  isDropdown: false,
  dropdown: [
    {
      name: "alle Regionen",
      isChecked: false,
    },
    {
      name: "Nord",
      isChecked: false,
    },
    {
      name: "Süd",
      isChecked: false,
    },
    {
      name: "Ost",
      isChecked: false,
    },
    {
      name: "West",
      isChecked: false,
      },
    ],
   }
  };
</script>

Demo

View a demo of <ui-searchinputgroup> on Storybook

API

Props

The "CheckboxItem"-Type is used. Consisting of "name", "isChecked" and "iconName"

| Name | Type | Default | Description | | ---------------- | --------- | --------- |---------------------------------------------------------| | label | String | "default label" | Sets the label to the input element | | tooltip | String | "default tooltip" | Sets the tooltip-text | | placeholder | String | "default placeholder" | Sets the placeholder in the input field | | placeholder | String | "default placeholder" | Sets the placeholder in the input field | | dropdownOverlayHeadline | String | "default headline" | Sets the headline inside the dropdown mobile | | checkboxes | Array as CheckboxItem[] | | Sets the chekbox elements if a checkboxmenu is selected | | `dropdownEntries` | `Array as CheckboxItem[]` | | Sets the chekbox elements if a dropdownmenu is selected |

Events

| Name | Type | Description | | ---------------- | --------- | ------------------ | | input | Array | When input fields receive user input |