0.0.3 • Published 2 years ago
@adel-batal/popup-vue-lib v0.0.3
Popup manager and controller Vue library
To install in your project
npm install @adel-batal/valsdkflskd
How to test immediately
- Clone the repoistory to your machine.
- In the root directory open a command line window and run
npm install
to install all of the required dependencies. - To start testing the library, first run the dev server by running
npm run serve
. - For immediate testing, this library currenlty has a json-server fake backend for testing persiting popup data which is saved in
db.json
in the root directory, so running an additional server is required. - Open another command line in the root directory and run
npm run fake-backend
. - You can add new popups by either manually adding json data in the
db.json
file (may require re-running the backend server), or by using the PopupManager Graphical User Interface.
How to use
The library consists of two components. PopupManager is the admin UI and is used to create,edit and delete popup entries. PopupController is the library that runs on the user's end.
PopupController
To use PopupController on its own you either have to define a custom Popup component with the required interface or add no children and it will use the default Popup component included in the lib.
Custom Popup Usage
<PopupController :popups="popups" ref="controller">
<template v-slot:default="popupProps">
<CustomPopup :popup="popupProps.popup" @close="popupProps.close" />
</template>
</PopupController>
PopupManager GUI
The available options for a popup configuration object are:
Triggers (Popup Editor Component)
- Scroll based
- Accepts value for:
- Scroll percentage
- Frequency in days
- Accepts value for:
- Timer based
- Accepts value for
- Specified time period
- Frequency in days
- Accepts value for
- Exit-intent based, fires on cursor exiting browser screen
- Touch screen exit-intent based, fires on fast scrolling towards up
- Hover based, triggers on hovering an element
- Click based, triggers on clicking an element
PopupManager screenshots
Main view
Form views
Notes
- There are 7 intreis in the
db.json
file so you can immediately test - The Vue router library was added to the project for the convenience of the tester and only that
Build lib
npm run build
Lint lib
npm run lint
Publish
npm run build-lib
npm publish