0.1.2 • Published 5 years ago

hc-helper v0.1.2

Weekly downloads
10
License
-
Repository
-
Last release
5 years ago

hc-helper

Installation

npm i @haftcinco/hc-helper

HTTP Client

import {httpClient} from "@haftcinco/hc-helper";

Convertors

import {convertors} from "@haftcinco/hc-helper";

functions


NameInputDescription
convertDatedate , formatConverts date to custom format.
getNextDaydateReturns next day's date.
getPrevDaydateReturns Previous day's date.
isTodaydateChecks if entered date is today's date or not?
getNewDateReturns the Today's date.
getMaxDateReturns 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


NameInputDescription
showAlertmsg, title, typeDisplays alerts
showConfirmconfirmText, cancelText, msg, title, ok, cancelDisplays a confirmation message

showAlert


NameDefaultDescription
msgaccepts Message text
titleMessageaccepts Headline for title
typewarningAcceptable inputs: error, success, warning, info,question
messages.showAlert('hello world!','message','warning');

showConfirm


NameDefaultDescription
confirmTextAccepts text for Confirm button
cancelTextAccepts text for Cancel button
msgaccepts Message text
titleaccepts Headline for title
okThis is a call back for confirm button
cancelThis 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 :

Demo:

functions


NameInputDescription
infomsgdisplays a blue Toast
errormsgdisplays a red Toast
successmsgdisplays 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


NameInputDescription
isEmptyobjAccepts 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

NameRequiredTypeDefaultDescription
nametrueString, NumberName of the modal
delayfalseNumber0Delay between showing overlay and actual modal box
resizablefalseBooleanfalseIf true allows resizing the modal window, keeping it in the center of the screen.
adaptivefalseBooleanfalseIf true, modal box will try to adapt to the window size
draggablefalseBoolean, StringfalseIf true, modal box will be draggable.
scrollablefalseBooleanfalseIf height property is auto and the modal height exceeds window height - you will be able to scroll modal
resetfalseBooleanfalseResets position and size before showing modal
clickToClosefalseBooleantrueIf set to false, it will not be possible to close modal by clicking on the background
transitionfalseStringTransition name
overlayTransitionfalseString'overlay-fade'Transition name for the background overlay
classesfalseString, Array'v--modal'Classes that will be applied to the actual modal box, if not specified, the default v--modal class will be applied
widthfalseString, Number600Width in pixels or percents (e.g. 50 or "50px", "50%")
heightfalseString, Number300Height in pixels or percents (e.g. 50 or "50px", "50%") or "auto"
minWidthfalseNumber (px)0The minimum width to which modal can be resized
minHeightfalseNumber (px)0The minimum height to which modal can be resized
maxWidthfalseNumber (px)InfinityThe maximum width of the modal (if the value is greater than window width, window width will be used instead
maxHeightfalseNumber (px)InfinityThe maximum height of the modal (if the value is greater than window height, window height will be used instead
pivotXfalseNumber (0 - 1.0)0.5Horizontal position in %, default is 0.5 (meaning that modal box will be in the middle (50% from left) of the window
pivotYfalseNumber (0 - 1.0)0.5Vertical position in %, default is 0.5 (meaning that modal box will be in the middle (50% from top) of the window
rootfalseVue instancenull\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