@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 |