@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