Merge pull request #3 from CharltonC/dev

Dev

.gitignore

@@ -1,4 +1,5 @@
 # Add any directories, files, or patterns you don't want to be tracked by version control
 node_modules/
 coverage/
-package-lock.json
+package-lock.json
+.npmrc

README.md

@@ -7,7 +7,7 @@
 #### Table of Contents:
 * About
 * Usage
-* Setup (Mac based) 
+* Development
 * CLI Build Command
 * Folder Structure
 
@@ -21,51 +21,45 @@ Primary Tech Stack:
 
 
 ## Usage (Npm Pkg)
-#### Setup:
-* ES Module (Js/Ts/Tsx file)
-```
+#### Import/Setup:
+* via ES Module (Js/Ts/Tsx file)
+```JavaScript
 import { PgnHandle } from 'pagination-handle';
 const pgnHandle = new PgnHandle();
 ```
-* CommonJs (Js file)
-```
+* via CommonJs (Js file)
+```JavaScript
 const PgnHandle = require('pagination-handle');
 const pgnHandle = new PgnHandle();
 ```
-* UMD
-```
+* via UMD
+```JavaScript
 const { PgnHandle } = window.PaginationHandle;
 const pgnHandle = new PgnHandle();
 ```
+* via Script Tag
+```HTML
+<script src="<path>/<to>/<library>/umd/main.min.js"></script>
+<script>
+    const { PgnHandle } = window.PaginationHandle;
+    const pgnHandle = new PgnHandle();
+</script>
+```
 
-#### General Use:
+#### Get Pagination State:
 ```JavaScript
+import { PgnHandle } from 'pagination-handle';
+const pgnHandle = new PgnHandle();
+
 const sampleData = [ 'a', 'b', 'c' ];
 const pgnOption = {
-    page: 0,
-    increment: [ 1, 2 ],
-    incrementIdx: 0,
-    maxSpread: 3
+    page: 0,                // start at 1st page
+    increment: [ 1, 2 ],    // typically for select dropdown: 1 per page, 2 per page
+    incrementIdx: 0,        // `increment = 1` from abov
+    maxSpread: 3          
 };
+
 const pgnState = pgnHandle.getState(sampleData, pgnOption);
-const {
-    perPage,
-    totalPage,
-    curr,
-    pageNo,
-    startIdx,
-    endIdx,
-    first,
-    prev,
-    next,
-    last,
-    totalRecord,
-    startRecord,
-    endRecord,
-    ltSpread,
-    rtSpread,
-    maxSpread
-} = pgnState;
 ```
 
 #### Use with Component Lbrary:
@@ -82,8 +76,8 @@ const {
 } = pgnHandle.createGenericCmpAttr({
     data: sampleData,
     state: pgnState,
-    option: pgnOption
-    callback: () => console.log('pgn state changed');
+    option: pgnOption,
+    callback: () => console.log('pgn state changed')
 });
 
 // JavaScript
@@ -104,12 +98,29 @@ const PgnFristBtn = (firstBtnAttr) => {
 };
 ```
 
+#### Navigation & Callback:
+```JavaScript
+const sampleData = [ 'a', 'b', 'c' ];
+const pgnOption = {
+    page: 0,                // start at 1st page
+    increment: [ 1, 2 ],    // typically for select dropdown: 1 per page, 2 per page
+    incrementIdx: 0,        // `increment = 1` from abov
+    maxSpread: 3          
+};
+
+// start with page 0
+const pgnStateOne = pgnHandle.getState(sampleData, pgnOption);
+
+// go to page 1
+const pgnStateTwo = pgnHandle.getState(sampleData, {...pgnOption, page: 1});
+```
+
 
 ## API
-#### Pagination State
-| Property Name | Type              | Description                                                                               |
+#### Pagination State Object `pgnState`
+| Property      | Type              | Description                                                                               |
 |---------------|-------------------|-------------------------------------------------------------------------------------------|
-| perPage       | integer           | current total number allowed per page                                                     |
+| perPage       | integer           | current total number displayed/allowed per page                                           |
 | totalPage     | integer           | total number of pages                                                                     |
 | curr          | integer           | current page index (starts from 0)                                                        |
 | pageNo        | integer           | current page number (starts from 1)                                                       |
@@ -121,21 +132,22 @@ const PgnFristBtn = (firstBtnAttr) => {
 | last          | integer           | index for last page                                                                       |
 | totalRecord   | integer           | total number of records in data                                                           |
 | startRecord   | integer           | starting index for current displayed data                                                 |
-| endRecord     | integer           | end index (exclusive) for current displayed data                                          |
+| endRecord     | integer           | end index (non-inclusive) for current displayed data                                      |
 | ltSpread      | integer or string | either a number (if less than the maxSpread) or '...' to indicate the non-displayed pages |
 | rtSpread      | integer or string | either a number (if less than the maxSpread) or '...' to indicate the non-displayed pages |
 | maxSpread     | integer           | total page interval that is represented by the spread '...', i.e. not shown               |
 
-#### Pagination Option
-| Property Name | Type              | Description                                                             |
+#### Pagination Option `pgnOption`
+| Property      | Type              | Description                                                             |
 |---------------|-------------------|-------------------------------------------------------------------------|
 | page          | integer           | index for default/starting page number (starts from 0)                  |
 | increment     | array of integers | available increments typically for the dropdown, e.g. [10, 20]          |
 | incrementIdx  | integer           | the default increment value above                                       |
 | maxSpread     | integer           | maximum number of page interval that is represented by the spread '...' |
 
 
-## CLI Command
+## Development
+#### CLI Command
 * Build
 ```
 npm run build
@@ -161,25 +173,28 @@ npm run compile-dts
 npm run clean
 ```
 
-## Folder Structure
+#### Folder Structure
     dist/                       // output files
         cjs/                    // common js format
             index.js            
             index.js.map
             index.min.js
         esm/                    // es module js format
-            ..
+            index.js            
+            index.js.map
+            index.min.js
         umd/                    // universal module definition format
-            ..
+            index.js            
+            index.js.map
+            index.min.js
         index.d.ts              // typings
         
-    node_modules/               // dependencies
-
     src/                        // source code
         index.ts                // main entry file
         index.spec.ts           // unit test
         type.ts                 // typings
 
+    rollup.config.js            // rollup (bundler/build) config
     .eslintrc.js                // EsLint config
     tsconfig.json               // TypeScript config 
     babel.config.js             // Babel config - transform TS and new Js features into ES5/Standard JavaScript

package.json

@@ -9,17 +9,20 @@
   "homepage": "https://github.com/CharltonC/pagination-handle",
   "repository": {
     "type": "git",
-    "url": "https://github.com/CharltonC/pagination-handle"
+    "url": "https://github.com/CharltonC/pagination-handle.git"
   },
-  "version": "0.0.1",
-  "license": "CC BY 4.0",
+  "version": "0.0.2",
+  "license": "MIT",
   "engines": {
     "npm": ">=6.14.4"
   },
   "author": {
     "name": "Charlton Cheng",
     "url": "https://github.com/charltonc"
   },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.com/"
+  },
   "scripts": {
     "build": "npm run clean && npm run lint && npm run test && npm run compile-dts && npm run compile-js",
     "clean": "if [ -d './dist' ]; then rm -r dist; fi",
@@ -30,7 +33,6 @@
     "compile-js": "npx rollup -c",
     "compile-dts": "npx dts-bundle-generator -o dist/index.d.ts src/index.ts"
   },
-  "publishConfig": { "registry": "https://npm.pkg.github.com/" },
   "main": "dist/esm/index.js",
   "types": "dist/index.d.ts",
   "files": [ "dist" ],