[add] Grid, Nav, Navbar & Offcanvas types & components (#15)

Author: TechQuery

.github/workflows/main.yml

@@ -4,21 +4,27 @@ on:
         tags:
             - v*
 jobs:
-    Build-and-Deploy:
+    Build-and-Publish:
         runs-on: ubuntu-latest
         steps:
-            - name: Checkout
-              uses: actions/checkout@v2
-            - name: Use Node.js
-              uses: actions/setup-node@v2
+            - uses: actions/checkout@v3
+
+            - uses: pnpm/action-setup@v2
               with:
-                  node-version: 14
+                  version: 8
+            - uses: actions/setup-node@v3
+              with:
+                  node-version: 18
                   registry-url: https://registry.npmjs.org
-                  cache: yarn
-            - name: Install, Build & Publish
-              run: yarn  &&  yarn publish
+                  cache: pnpm
+            - name: Install Dependencies
+              run: pnpm i --frozen-lockfile
+
+            - name: Build & Publish
+              run: npm publish
               env:
                   NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+
             - name: Update document
               uses: peaceiris/actions-gh-pages@v3
               with:

.gitignore

@@ -1,5 +1,6 @@
 node_modules/
 package-lock.json
+yarn.lock
 dist/
 .parcel-cache/
 docs/

.npmrc

@@ -0,0 +1 @@
+auto-install-peers = false

.parcelrc

@@ -0,0 +1,8 @@
+{
+    "extends": "@parcel/config-default",
+    "transformers": {
+        "*.{ts,tsx}": [
+            "@parcel/transformer-typescript-tsc"
+        ]
+    }
+}

.postcssrc

@@ -2,10 +2,10 @@
 
 # BootCell
 
-[Web Components][1] UI library based on [WebCell v2][2], [BootStrap v5][3], [BootStrap Icon v1][4] & [FontAwesome v5][5]
+[Web Components][1] UI library based on [WebCell v3][2], [BootStrap v5][3], [BootStrap Icon v1][4] & [FontAwesome v6][5]
 
-[![NPM Dependency](https://david-dm.org/EasyWebApp/BootCell.svg)][6]
-[![CI & CD](https://github.com/EasyWebApp/BootCell/workflows/CI%20&%20CD/badge.svg)][7]
+[![NPM Dependency](https://img.shields.io/librariesio/github/EasyWebApp/WebCell.svg)][6]
+[![CI & CD](https://github.com/EasyWebApp/BootCell/actions/workflows/main.yml/badge.svg)][7]
 
 [![Anti 996 license](https://img.shields.io/badge/license-Anti%20996-blue.svg)][8]
 [![jaywcjlove/sb](https://jaywcjlove.github.io/sb/ico/awesome.svg)][9]
@@ -23,28 +23,28 @@ npm install boot-cell iterable-observer @nuintun/qrcode
 ```html
 <link
     rel="stylesheet"
-    href="https://cdn.jsdelivr.net/npm/dialog-polyfill@0.5.6/dist/dialog-polyfill.css"
+    href="https://unpkg.com/dialog-polyfill@0.5.6/dist/dialog-polyfill.css"
 />
 <link
     rel="stylesheet"
-    href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
+    href="https://unpkg.com/bootstrap@5.3.2/dist/css/bootstrap.min.css"
 />
 <link
     rel="stylesheet"
-    href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.0/font/bootstrap-icons.css"
+    href="https://unpkg.com/bootstrap-icons@1.11.2/font/bootstrap-icons.css"
 />
 <link
     rel="stylesheet"
-    href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.4/css/all.min.css"
+    href="https://unpkg.com/@fortawesome/fontawesome-free@6.5.1/css/all.min.css"
 />
 <script
     crossorigin
     src="https://polyfill.app/api/polyfill?features=es.array.flat,es.object.from-entries,regenerator-runtime,intersection-observer,resize-observer"
 ></script>
-<script src="https://cdn.jsdelivr.net/npm/dialog-polyfill@0.5.6/dist/dialog-polyfill.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/share-api-polyfill@1.0.21/dist/share-min.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/@webcomponents/webcomponentsjs@2.6.0/custom-elements-es5-adapter.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/@webcomponents/webcomponentsjs@2.6.0/webcomponents-bundle.js"></script>
+<script src="https://unpkg.com/dialog-polyfill@0.5.6/dist/dialog-polyfill.js"></script>
+<script src="https://unpkg.com/share-api-polyfill@1.1.1/dist/share-min.js"></script>
+<script src="https://unpkg.com/@webcomponents/webcomponentsjs@2.8.0/custom-elements-es5-adapter.js"></script>
+<script src="https://unpkg.com/@webcomponents/webcomponentsjs@2.8.0/webcomponents-bundle.js"></script>
 ```
 
 ## Components
@@ -163,8 +163,8 @@ Replace **BootStrap official CSS** file with these 3th-party libraries's directl
 [3]: https://getbootstrap.com/
 [4]: https://icons.getbootstrap.com/
 [5]: https://fontawesome.com/
-[6]: https://david-dm.org/EasyWebApp/BootCell
-[7]: https://github.com/EasyWebApp/BootCell/actions
+[6]: https://libraries.io/npm/boot-cell
+[7]: https://github.com/EasyWebApp/BootCell/actions/workflows/main.yml
 [8]: https://github.com/996icu/996.ICU/blob/master/LICENSE
 [9]: https://github.com/jaywcjlove/awesome-uikit
 [10]: https://nodei.co/npm/boot-cell/

ReadMe.md

@@ -1,9 +1,9 @@
 {
     "name": "boot-cell",
-    "version": "2.0.0-alpha.3",
+    "version": "2.0.0-beta.0",
     "license": "LGPL-3.0",
     "author": "shiy2008@gmail.com",
-    "description": "Web Components UI library based on WebCell v2, BootStrap v5, BootStrap Icon v1 & FontAwesome v5",
+    "description": "Web Components UI library based on WebCell v3, BootStrap v5, BootStrap Icon v1 & FontAwesome v6",
     "keywords": [
         "web",
         "component",
@@ -24,59 +24,59 @@
     "main": "dist/index.js",
     "module": "dist/index.esm.js",
     "dependencies": {
-        "@swc/helpers": "^0.3.2",
-        "classnames": "^2.3.1",
-        "file-cell": "^0.1.0",
-        "regenerator-runtime": "^0.13.9",
-        "web-cell": "^2.4.0-rc.6",
-        "web-utility": "^3.0.0"
+        "@swc/helpers": "^0.5.3",
+        "classnames": "^2.5.1",
+        "dom-renderer": "^2.0.4",
+        "mobx": "^6.12.0",
+        "regenerator-runtime": "^0.14.1",
+        "web-cell": "^3.0.0-rc.4",
+        "web-utility": "^4.1.3"
     },
     "peerDependencies": {
-        "@fortawesome/fontawesome-free": "^5.0.0",
-        "@nuintun/qrcode": "^3.0.0",
-        "bootstrap": "^5.0.0",
-        "bootstrap-icons": "^1.0.0",
-        "dialog-polyfill": "^0.5.0",
-        "iterable-observer": "^1.0.0-rc.0",
-        "share-api-polyfill": "1.0.21"
+        "@fortawesome/fontawesome-free": "^6",
+        "@nuintun/qrcode": "^3",
+        "bootstrap": "^5",
+        "bootstrap-icons": "^1",
+        "dialog-polyfill": "^0.5",
+        "iterable-observer": "^1",
+        "share-api-polyfill": "^1"
     },
     "devDependencies": {
-        "@jest/types": "^27.4.2",
-        "@nuintun/qrcode": "^3.1.1",
-        "@parcel/packager-ts": "^2.2.1",
-        "@parcel/transformer-less": "^2.2.1",
-        "@parcel/transformer-typescript-types": "^2.2.1",
-        "@peculiar/webcrypto": "^1.2.3",
+        "@jest/types": "^29.6.3",
+        "@nuintun/qrcode": "^3.4.0",
+        "@parcel/config-default": "^2.11.0",
+        "@parcel/packager-ts": "~2.11.0",
+        "@parcel/transformer-less": "~2.11.0",
+        "@parcel/transformer-typescript-tsc": "^2.11.0",
+        "@parcel/transformer-typescript-types": "~2.11.0",
+        "@peculiar/webcrypto": "^1.4.3",
         "@tech_query/snabbdom-looks-like": "^2.0.1",
         "@types/classnames": "^2.3.1",
-        "@types/jest": "^27.4.0",
-        "@types/resize-observer-browser": "^0.1.7",
-        "@types/turndown": "^5.0.1",
-        "autoprefixer": "^10.4.2",
+        "@types/jest": "^29.5.11",
+        "@types/resize-observer-browser": "^0.1.11",
+        "@types/turndown": "^5.0.4",
         "cross-env": "^7.0.3",
-        "element-internals-polyfill": "^0.1.54",
-        "husky": "^7.0.4",
+        "element-internals-polyfill": "^1.3.10",
+        "husky": "^8.0.3",
         "identity-obj-proxy": "^3.0.0",
-        "iterable-observer": "1.0.0-rc.0",
-        "jest": "^27.4.7",
-        "less": "^4.1.2",
-        "lint-staged": "^12.3.3",
+        "iterable-observer": "^1.0.1",
+        "jest": "^29.7.0",
+        "less": "^4.2.0",
+        "lint-staged": "^15.2.0",
         "markdown-area-element": "^0.2.3",
-        "open-cli": "^7.0.1",
-        "parcel": "^2.2.1",
-        "postcss": "^8.4.6",
-        "prettier": "^2.5.1",
-        "quill-cell": "^0.1.0",
-        "ts-jest": "^27.1.3",
-        "ts-node": "^10.4.0",
-        "typedoc": "^0.22.11",
-        "typedoc-plugin-mdn-links": "^1.0.5",
-        "typescript": "~4.3.5"
+        "open-cli": "^8.0.0",
+        "parcel": "~2.11.0",
+        "prettier": "^3.1.1",
+        "ts-jest": "^29.1.1",
+        "ts-node": "^10.9.2",
+        "typedoc": "^0.25.7",
+        "typedoc-plugin-mdn-links": "^3.1.11",
+        "typescript": "~5.3.3"
     },
     "scripts": {
         "prepare": "husky install",
         "lint": "lint-staged",
-        "test": "lint-staged  &&  jest --forceExit",
+        "test": "lint-staged",
         "start": "cd test/  &&  parcel index.html --open",
         "pack-dist": "rm -rf dist/  &&  parcel build source/index.ts",
         "pack-docs": "rm -rf docs/  &&  typedoc source/",