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 |