@bluexlab/bluex-components v0.1.98

bluex-components

Installation

npm install @bluexlab/bluex-components

Mocking in unit tests

You can expand on this, but the most basic working mock works as follows:

jest.mock('@bluexlab/bluex-components', () => ({
  MaskedInput: { name: 'MaskedInput' },
  Dropdown: { name: 'Dropdown' }
}))

Components

• Checkbox
• DatePicker
• Dropdown
• InputWithDropdown
• MaskedInput
• Modal
• PaginationBar
• PlaintextDropdown
• RadioButton
• Searchbar
• Toggle

• Tooltip

  Designs and colors are all based on BlueX design specs

  https://zpl.io/2yqw11L

  https://zpl.io/VQRdJyA

  Even though these are Vue components, if you'd like to understand the choices I made for the functionality of these components, read up on React controlled components and React Native components.

Examples from React Native (so you can see the similarities): TextInput Switch AlertIOS

A note on input masks

If you're not using an input mask, any component that accepts input will default to ascii only input. These components are designed for BluexTrade engineering. Ascii only was a company decision. You can get around this by passing an empty object to the :mask prop.

Checkbox

Custom checkbox component to meet design specs

Props:

Example:

<Checkbox
  :checkbox-id="'someCheckbox'"
  :label="$t('some_locale_string')"
  :selected="someCheckboxSelected"
  :on-select="handleClickCheckbox"
/>

DatePicker

Wraps vue2-datepicker plugin in a custom component

Props:

Example:

<DatePicker
  :date="dateForPicker"
  :on-change="handleDateChange"
/>

Dropdown

Acts like a React controlled component. Uses vue-inputmask. Can be used as a traditional listbox with no input (but will jump to a match if you start typing while it's focused), works with keyboard navgation (arrow up, down, enter, tab), and can also act as a searchbar similar to those seen on search engines.

Props:

Example:

<Dropdown
  :data="arrayForDropdown"
  :title="$t('your_locale_string')"
  :on-select="handleDropdownSelection"
  :searchable="false"
  :value="dropdownValue"
/>

InputWithDropdown

Dropdown and MaskedInput combined

Example:

<InputWithDropdown
  :title="$t('locale_string')"
  :on-input="handleInput"
  :input-value="inputValue"
  :dropdown-value="dropdownValue"
  :on-select="handleSelect"
  :dropdown-data="arrayForDropdown"
/>

MaskedInput

Acts like a React controlled component. Uses vue-inputmask. On blur, leading and trailing whitespace is trimmed and returned to the parent via onInput.

Props:

Example:

<MaskedInput
  :title="$t('locale_string')"
  :on-input="handleInput"
  :required="true"
  :prompt-required="promptRequiredBool"
  :value="inputValue"
/>

Modal (can also be an error alert)

A modal component is in App.vue. You can render it via Vuex action (structure based on React Native's Alert component) which has been attached globally. You'll have to create this action in your code base and simply render Modal conditionally. Here's an example:

<Modal
  v-if="showModal"
  :settings="modalSettings"
  :close="closeModal"
/>

...

<script>
export {
  ...
  data () {
    ...
    showModal: false,
    modalSettings: {}
  },
  mounted () {
    this.vuexUnsubscribe = this.$store.subscribe(({ payload, type }) => {
      switch (type) {
        case 'setShowModal':
          this.showModal = true
          this.modalSettings = payload
          break
        ...
      }
    })
  }
}
</script>

// Show
  this.$toggleModal({
    modalType: 'confirmDelete', // If not included Modal will default to a generic modal
    title: $t('confirm_logout'),
    message: $t('cannot_be_undone'),
    buttons: [
      {
        title: $t('cancel'), // Required
        className: 'gray' // Styles button. className must match an existing button class as seen in app.scss
      },
      {
        title: $t('delete'),
        onClick: () => this.commitDelete(uuid), // If not included, Modal will close on click
        className: 'warning'
      }
    ],
    cancelable: false, // Optional. If true or not defined, clicking outside of the modal will close it. If false, close(x) button will be hidden.
  })
// Hide
this.$toggleModal({})

Available modalTypes and resulting bahavior: confirmAction: Shows warning symbol (exclamation point in a triangle). confirmDelete: Shows trashcan icon and default confirmation button color is red. confirmSuccess: Shows a checkmark in a circle. confirmInfo: Shows the letter "i" in a circle.

If modalType is received, Modal will render a plain modal with no image in the center and all buttons will be gray unless className is added to a button object

PaginationBar

As seen in bookings and documents list. Has previous and next bottons, and individual buttons for each page.

Props:

Example:

<PaginationBar
  :page-size="pageSize"
  :number-of-results="totalResults"
  :current-page="currentPage"
  :on-click-next="handleNext"
  :on-click-prev="handlePrevious"
  :jump-to-page="jumpToPage"
/>

PlaintextDropdown

A dropdown/listbox that does not accept typed input/searching. The seleted item is displayed as plain text, not inside of a container, and the list appears beneath it when clicked.

Example:

<PlaintextDropdown
  :selected="selected"
  :items="arrayForDropdown"
  :on-select="handleSelect"
/>

RadioButton

Custom radio button

Example:

<RadioButton
  :label="'radio-button-1'"
  :radio-id="'radioButton1'"
  :checked="selected === 'radioButton1'"
  :on-change="handleSelect"
/>

Searchbar

Custom styled searchbar

Example:

<Searchbar
  :value="searchbarValue"
  :placeholder="$t('locale_string')"
  :on-input="handleSearchBarInput"
  :on-enter="handleSearchBarSubmit"
  :on-clear="handleSearchBarClear"
/>

Toggle

Like React Natives "Switch" component, toggles on or off on click.

Example:

<Toggle
  :on-value-change="handleToggle"
  :value="toggleValue"
/>

Tooltip

Accepts a slot for

Example:

<Tooltip :loading="someTogglingBoolean">
  <div>your stuff</div>
</Tooltip>

For absolute positioning, use a wrapper

<div class="your-item">
  <div class="your-item-tooltip-wrapper">
    <Tooltip :loading="someTogglingBoolean">
      <div>your stuff</div>
    </Tooltip>
  </div>
</div>

.your-item {
  position: relative;
  &-tooltip-wrapper {
    position: absolute;
    top: 0;
    left: 0;
  }
}