hc-helper
Installation
npm i @haftcinco/hc-helper
HTTP Client
import {httpClient} from "@haftcinco/hc-helper";
Convertors
import {convertors} from "@haftcinco/hc-helper";
functions
| Name | Input | Description |
|---|
| convertDate | date , format | Converts date to custom format. |
| getNextDay | date | Returns next day's date. |
| getPrevDay | date | Returns Previous day's date. |
| isToday | date | Checks if entered date is today's date or not? |
| getNewDate | | Returns the Today's date. |
| getMaxDate | | Returns next year same day's date |
Example
convertors.convertDate(Date.now(),"YYYY,MM,DD");
// 2019,08,08
convertors.getNextDay(Date.now());
// 2019-08-09
convertors.getPrevDay(Date.now());
// 2019-08-07
convertors.isToday(Date.now());
// true
convertors.getNewDate();
// current date and time
convertors.getMaxDate();
// 2020-08-08
// Next year's date
Messages
Built on Sweet alert 2
import {messages} from "@haftcinco/hc-helper";
functions
| Name | Input | Description |
|---|
| showAlert | msg, title, type | Displays alerts |
| showConfirm | confirmText, cancelText, msg, title, ok, cancel | Displays a confirmation message |
showAlert
| Name | Default | Description |
|---|
| msg | | accepts Message text |
| title | Message | accepts Headline for title |
| type | warning | Acceptable inputs: error, success, warning, info,question |
messages.showAlert('hello world!','message','warning');
showConfirm
| Name | Default | Description |
|---|
| confirmText | | Accepts text for Confirm button |
| cancelText | | Accepts text for Cancel button |
| msg | | accepts Message text |
| title | | accepts Headline for title |
| ok | | This is a call back for confirm button |
| cancel | | This is a call back for cancel button |
messages.showConfirm({
confirmText: "confirmText",
cancelText: "cancelText",
msg: "msg",
title: "title",
ok: () => {
alert('hello world!');
},
cancel: () => {
alert("cancel");
}
});
Toast
Built on vue-toasted
import {toast} from "@haftcinco/hc-helper";
Demo :

functions
| Name | Input | Description |
|---|
| info | msg | displays a blue Toast |
| error | msg | displays a red Toast |
| success | msg | displays a green Toast |
//Info
toast.info('hello world!');
//Error
toast.error('hello world!');
//Success
toast.success('hello world!');
Score
import {score} from "@haftcinco/hc-helper";
function
| Name | Input | Description |
|---|
| isEmpty | obj | Accepts an object as input and checks if it is empty or not |
let obj = {
name:"score",
message:"hello world!"
};
score.isEmpty(obj);
//false
Modal
Built on vue-js-modal
import {modal} from "@haftcinco/hc-helper";
Example
modal.showVModal(
Component Name,
{ Props },
{ Options }
);
Options
| Name | Required | Type | Default | Description |
|---|
| name | true | String, Number | | Name of the modal |
| delay | false | Number | 0 | Delay between showing overlay and actual modal box |
| resizable | false | Boolean | false | If true allows resizing the modal window, keeping it in the center of the screen. |
| adaptive | false | Boolean | false | If true, modal box will try to adapt to the window size |
| draggable | false | Boolean, String | false | If true, modal box will be draggable. |
| scrollable | false | Boolean | false | If height property is auto and the modal height exceeds window height - you will be able to scroll modal |
| reset | false | Boolean | false | Resets position and size before showing modal |
| clickToClose | false | Boolean | true | If set to false, it will not be possible to close modal by clicking on the background |
| transition | false | String | | Transition name |
| overlayTransition | false | String | 'overlay-fade' | Transition name for the background overlay |
| classes | false | String, Array | 'v--modal' | Classes that will be applied to the actual modal box, if not specified, the default v--modal class will be applied |
| width | false | String, Number | 600 | Width in pixels or percents (e.g. 50 or "50px", "50%") |
| height | false | String, Number | 300 | Height in pixels or percents (e.g. 50 or "50px", "50%") or "auto" |
| minWidth | false | Number (px) | 0 | The minimum width to which modal can be resized |
| minHeight | false | Number (px) | 0 | The minimum height to which modal can be resized |
| maxWidth | false | Number (px) | Infinity | The maximum width of the modal (if the value is greater than window width, window width will be used instead |
| maxHeight | false | Number (px) | Infinity | The maximum height of the modal (if the value is greater than window height, window height will be used instead |
| pivotX | false | Number (0 - 1.0) | 0.5 | Horizontal position in %, default is 0.5 (meaning that modal box will be in the middle (50% from left) of the window |
| pivotY | false | Number (0 - 1.0) | 0.5 | Vertical position in %, default is 0.5 (meaning that modal box will be in the middle (50% from top) of the window |
| root | false | Vue instance | null\Root instance to obtain modal container from. This property is only necessary when using dynamic modals with more than one root instance, which is uncommon |