@dpa-id-components/ui-search-bar

@dpa-id-components/ui-input

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

Installation

yarn add @dpa-id-components/ui-search-bar

Usage

<!-- SomeComponent.vue using UiInput -->
<template>
  <ui-search-bar
    v-model="value"
    :placeholder="placeholder"
    @input="handleEvent"
    @focus="handleEvent"
    @blue="handleEvent"
    @keyup="handleEvent"
  />
</template>

<script>
  import UiSearchBar from "@dpa-id-components/ui-search-bar";

  export default {
    components: {
      UiSearchBar,
    },
    data() {
      return {
        value: "",
        type:"text",
        label: "Input Label",
        placeholder: "Type something...",
      };
    },
    computed: {
      errorMessage() {
        if (this.value === "error") {
          return "Oops, an error occured...";
        }
        return "";
      },
    },
    methods: {
      handleEvent: console.log,
    },
  };
</script>

Demo

View a demo of <ui-search-bar> on Storybook

API

Props

Name	Type	Default	Description
placeholder	String	""	Text for the input's placeholder
value	String	""	The input's value
backgroundColor	String	"gray"	sets the background-color of the search bar
hiddenFilterRules	Number	0	Number of advance search criteria
isNonEditableChip	Boolean	false	Defines if the Filter Chip is non editable

Events

Name	Type	Description
blur	BlurEvent	Emitted when the input loses focus
focus	FocusEvent	Emitted when the input is focused
enter	KeyboardEvent	Emitted when a key is entered
input	String	Emitted when the internal value of the input changes