Peopleshr-hcx NPM

peopleshr-hcx

hSenid cosmic experience component library based on Vue.js version 2.6

Install Package

npm i peopleshr-hcx

Available Components

HCX Button
HCX Loading
HCX Numeric
HCX Select
HCX Datepicker
HCX Radio
HCX Checkbox
HCX Alert
HCX Confirm
HCX Modal
HCX Switch

HCX Button

How use hcx button component

<template>
  <div id="app">
    <hcx-button
      text="HCX Button"
      type="button"
      class="btn btn-primary"
      :data="{ d1: 'test' }"
      :on-click="testButtonOnClick"
      :is-loading="isLoadingBtn"
      :readonly="false"
    />
  </div>
</template>

<script>
import { HcxButton } from "peopleshr-hcx";
export default {
  name: "App",
  components: {
    'hcx-button': HcxButton
  },
  data: function () {
    return {
      isLoadingBtn: false,
    };
  },
  methods: {
    testButtonOnClick: function (data) {
      var self = this;
      self.isLoadingBtn = true;
      //do task
      setTimeout(function () {
        console.log('testButtonOnClick end')
        self.isLoadingBtn = false;
      }, 3000);
    },
  },
};
</script>

Default values for optional props

data = null
isLoading = false
onClick = () => {}
readonly = false

HCX Loading

How use hcx loading component (This is support with ibox only)

<template>
  <div class="ibox">
    <div class="ibox-content" v-bind:class="{ 'hcx-loading': isLoading }">
      <hcx-loading></hcx-loading>
      <form>
        <!-- your content -->
      </form>
    </div>
  </div>
</template>

<script>
import { HcxLoading } from "peopleshr-hcx";
export default {
  components: {
    "hcx-loading": HcxLoading,
  },
  data: function () {
    return {
      isLoading: false, //set this to true when you want to display loading
    };
  },
};
</script>

Default values for optional props

size="medium" // available values for size ('small', 'medium', 'large')

HCX Numeric

How use hcx numeric component

<hcx-numeric
  class="form-control form-control-sm"
  v-model="numericValue"
  :readonly="false"
  id="idNumericValue"

  currency="%"
  currency-symbol-position="suffix"
  :min="-100"
  :max="200"
  :precision="3"
  :minus="true"
/>

Default values for optional props

readonly = false
currency = null
currencySymbolPosition = null
min = 0
max = 9007199254740991 //Number.MAX_SAFE_INTEGER
precision = 0
minus = false

HCX Select

Need to add "select2.min.css" and "select2.min.js" reference globally
How use hcx select component

<hcx-select
  :readonly="false"
  id="isMultiSelect"
  v-model="selectedValue"
  :options="optionsList"
  @change="selectOnChange"
  @select="selectOnSelect"
  :settings="{
    width: '100%',
    multiple: true,
  }"
  placeholder="select item"
/>

Default values for optional props

readonly = false
options = []
@change = (values) => {}
@select = (obj) => {}
settings = { width: "100%", multiple: false }
placeholder = ""

//sample options list
// optionsList: [
//                 { id: "1", text: "option 1", data: "more data 1" },
//                 { id: "2", text: "option 2", data: "more data 2" },
//                 { id: "3", text: "option 3", data: "more data 3" },
//                 { id: "4", text: "option 4", data: "more data 4" },
//                 { id: "5", text: "option 5", data: "more data 5" },
//             ]

HCX Datepicker

How use hcx datepicker component

<hcx-datepicker
  v-model="datevalue"
  date-format="dd/mm/yyyy"
  :on-change="datepickerOnChange"
  :readonly="false"
  start-date="20/10/2021"
  end-date="28/10/2021"
  id="idDatepicker"
/>
<!-- id should be unique value -->

Default values for optional props

readonly = false
dateFormat = "dd/mm/yyyy"
startDate = '1899-11-30'
endDate = '9999-01-01'
onChange = (value) => {}

HCX Radio

Need to add icheck-bootstrap.min.css reference globally
How use hcx radio component

<hcx-radio
  v-model="selectedValueRadio"
  :on-change="radioOnChange"
  :options="[
    { value: '1', text: 'Approved', class: 'icheck-success' },
    { value: '2', text: 'Pending', class: 'icheck-warning' },
    { value: '-1', text: 'Rejected', class: 'icheck-danger' },
  ]"
  :readonly="false"
  :inline="true"
  name="radioBtnName"
/>
<!-- name should be unique value -->

<!-- available classes for options -->
<!--icheck-default
    icheck-primary
    icheck-success
    icheck-info
    icheck-warning
    icheck-danger -->

Default values for optional props

readonly = false
onChange = (event) => {}
options = []
inline = true

HCX Checkbox

Need to add icheck-bootstrap.min.css reference globally
How use hcx checkbox component

<hcx-checkbox
  v-model="selectedValueCheckbox"
  :on-change="checkboxOnChange"
  class="icheck-success"
  :readonly="false"
  :inline="true"
  id="idCheckbox"
  true-value="1"
  false-value="0"
  text='Approved'
/>

<!-- id should be unique value -->

<!-- available classes -->
<!--icheck-default
    icheck-primary
    icheck-success
    icheck-info
    icheck-warning
    icheck-danger -->

Default values for optional props

readonly = false
onChange = (event) => {}
inline = true
text = ''
trueValue = true //valid data types [Boolean, String, Number]
falseValue = false //valid data types [Boolean, String, Number]

HCX Alert

How use hcx alert component

<script>
import { HcxAlert } from "peopleshr-hcx";
export default {
  name: "App",
  methods: {
    openAlertModal: function () {
      HcxAlert({
        body: "You are not allowed to apply from this page.",
        okText: "Ok",
      });
      //you can call this HcxAlert function anywhere
    },
    openAlertModalAdvanced: function () {
      HcxAlert({
        body: "You are not allowed to apply from this page.",
        okText: "Ok",
        callback: function (returnData) {
          //do some logic with ok
          console.log("callback", returnData);
        },
        data: { testData1: "data1", testData2: "data2" },
      });
      //you can call this HcxAlert function anywhere
    },
  },
};

</script>

Default values for optional props

animation = 'fade' // set empty string (animation = '') if you don't want modal animation

HCX Confirm

How use hcx confirm component

<script>
import { HcxAlert } from "peopleshr-hcx";
export default {
  name: "App",
  methods: {
    openConfirmModal: function () {
      HcxAlert({
        title: "Confirm",
        body: "Are you sure you want to confirm this item?",
        okText: "Ok",
        cancelText: "Cancel",
        callback: function (returnData) {
          //do some logic with confirm
          console.log("callback", returnData);
        },
        callbackCancel: function (returnData) {
          //do some logic with cancel
          console.log("callbackCancel", returnData);
        },
        data: { testData1: "data1", testData2: "data2" },
      });
      //you can call this HcxAlert function anywhere
    },
  },
};

</script>

Default values for optional props

animation = 'fade' // set empty string (animation = '') if you don't want modal animation

HCX Modal

How use hcx modal component

<script>
import { HcxModal } from "peopleshr-hcx";
import Vue from "vue";

// Globally register your modal component
import TestModal from "./TestModal.vue";
Vue.component("test-modal", TestModal);

export default {
  name: "App",
  methods: {
    openModal: function () {
      HcxModal({
        title: "Test Modal",
        component: "test-modal", //your component registered name
        size: "modal-lg",
        propsData: { //your component props
          data: { testData1: "data1", testData2: "data2" },
          callback: function (returnData) {
            //do some logic with callback
            console.log("callback", returnData);
          },
        },
      });
      //you can call this HcxModal function anywhere
    },
  },
};

</script>

Default values for optional props

title = null
size = '' // available values for size ('modal-sm', 'modal-lg', 'modal-xl')
propsData = null
animation = 'fade' // set empty string (animation = '') if you don't want modal animation

Sample test modal for your reference, you can create any component. propsData para will pass props into your component. you can define additional "close" function inside your component prop and you can call "close" function if you want to close the modal

<!-- TestModal.vue -->
<template>
  <div>
    <p>
      test modal content text
    </p>
    <br />
    {{ data }}
    <br />
    <hcx-button
      text="Test Callback"
      type="button"
      class="btn btn-primary"
      :on-click="btnCallbackOnClick"
    />
  </div>
</template>

<script>
export default {
  name: "TestModal",
  props: {
    callback: {
      type: Function,
      required: false,
      default: () => {},
    },

    data: {
      type: Object,
      required: false,
    },

    close: { //additional "close" function
      type: Function,
      required: false,
      default: () => {},
    },
  },

  methods: {
    btnCallbackOnClick: function () {
      var self = this;
      self.callback(self.data);
      self.close();
    },
  },
};
</script>

HCX Switch

How use hcx switch component

<hcx-switch
  v-model="selectedValueSwitch"
  :on-change="switchOnChange"
  :readonly="false"
  id="idSwitch"
  true-value="1"
  false-value="0"
  true-text="YES"
  false-text="NO"
/>

<!-- id should be unique value -->
<!-- true-text and false-text only support 3 letters -->

Default values for optional props

readonly = false
onChange = (event) => {}
trueValue = true //valid data types [Boolean, String, Number]
falseValue = false //valid data types [Boolean, String, Number]
trueText = "YES"
falseText = "NO"