hc-helper

• HTTP Client
• Convertors
• Message
• Toast
• Score
• Modal

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|