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

@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