Prepare v1.2.0 (#19)

Many changes in description and docu

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -34,20 +34,6 @@ body:
       placeholder: 'Instead, the following should happen: ...'
     validations:
       required: false
-  - type: dropdown
-    id: browser
-    attributes:
-      label: Browser
-      options:
-        - Firefox
-        - Chrome
-        - Opera
-        - Safari
-        - Edge
-        - Other (please specify in additional context)
-      multiple: true
-    validations:
-      required: true
   - type: input
     id: version
     attributes:

.github/workflows/main.yml

@@ -17,10 +17,10 @@ jobs:
 
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
 
       - name: Setup Node.js
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: '21'
 

.github/workflows/static.yml

@@ -1,30 +1,21 @@
-# Simple workflow for deploying static content to GitHub Pages
-name: Deploy static content to Pages
+name: Deploy to Pages
 
 on:
-  # Runs on pushes targeting the default branch
-  push:
-    branches: ['release']
-    paths:
-      - 'examples/**'
+  release:
+    types: [created]
 
-  # Allows you to run this workflow manually from the Actions tab
   workflow_dispatch:
 
-# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
 permissions:
   contents: read
   pages: write
   id-token: write
 
-# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
-# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
 concurrency:
   group: 'pages'
   cancel-in-progress: false
 
 jobs:
-  # Single deploy job since we're just deploying
   deploy:
     environment:
       name: github-pages
@@ -33,13 +24,15 @@ jobs:
     steps:
       - name: Checkout
         uses: actions/checkout@v4
+
       - name: Setup Pages
         uses: actions/configure-pages@v5
-      - name: Upload artifact
+
+      - name: Upload artifacts
         uses: actions/upload-pages-artifact@v3
         with:
-          # Upload entire repository
           path: './examples'
+
       - name: Deploy to GitHub Pages
         id: deployment
         uses: actions/deploy-pages@v4

.prettierrc.json

@@ -3,5 +3,13 @@
   "tabWidth": 2,
   "singleQuote": true,
   "printWidth": 80,
-  "trailingComma": "es5"
+  "trailingComma": "es5",
+  "overrides": [
+    {
+      "files": "*.html",
+      "options": {
+        "printWidth": 120
+      }
+    }
+  ]
 }

CHANGELOG.md

@@ -1,9 +1,19 @@
 # Leaflet.SidePanel Changelog
 
+## v1.2.0 (2024-08-29) <img src="./examples/assets/language-typescript.svg" height="20px" />
+
+- feat: add typescript <img src="./examples/assets/language-typescript.svg" height="16px" /> support
+- feat: new option `onToggle`
+- chore: improve docu
+- chore: change prettier scope
+- chore: ⚠️ BREAKING ⚠️ save map instance in panel<br>
+  To update your code you have remove the map from `toggle`, `open` and `close` calls
+- chore: ⚠️ BREAKING ⚠️ rename startTab to defaultTab
+
 ## v1.1.0 (2024-08-25)
 
 - feat: trigger toggle, open, close programmatically with js
-- feat: Add on tab switch event
+- feat: new option `onTabClick`
 - fix: cannot toggle sidebar when hasTabs is false
 - chore: Some change in docu, readme, ...
 

README.md

@@ -1,10 +1,11 @@
-![npm version](https://img.shields.io/npm/v/leaflet.sidepanel)
-![npm downloads](https://img.shields.io/npm/dt/leaflet.sidepanel)
-![npm license](https://img.shields.io/npm/l/leaflet.sidepanel)
+[![npm version](https://img.shields.io/npm/v/leaflet.sidepanel)](https://www.npmjs.com/package/leaflet.sidepanel)
+[![npm downloads](https://img.shields.io/npm/dt/leaflet.sidepanel)](https://www.npmjs.com/package/leaflet.sidepanel)
+[![npm license](https://img.shields.io/npm/l/leaflet.sidepanel)](https://github.com/cyclingbyte/leaflet.sidepanel?tab=MIT-1-ov-file#readme)
 ![last commit](https://img.shields.io/github/last-commit/cyclingbyte/Leaflet.SidePanel)
-![issues open](https://img.shields.io/github/issues/cyclingbyte/Leaflet.SidePanel)![issues closed](https://img.shields.io/github/issues-closed/cyclingbyte/Leaflet.SidePanel?label=)
+[![npm dependents](https://img.shields.io/librariesio/dependents/npm/leaflet.sidepanel)](https://www.npmjs.com/package/leaflet.sidepanel?activeTab=dependents)
+<img src="./examples/assets/language-typescript.svg" height="24px" />
 
-<!-- ![npm dependents](https://img.shields.io/librariesio/dependents/npm/leaflet.sidepanel) -->
+<!-- [![jsdelivr downloads](https://data.jsdelivr.com/v1/package/npm/leaflet.sidepanel/badge?style=rounded)](https://www.jsdelivr.com/package/npm/leaflet.sidepanel) -->
 <!-- ![git stars](https://img.shields.io/github/stars/cyclingbyte/Leaflet.SidePanel) -->
 
 # Leaflet.SidePanel
@@ -13,47 +14,51 @@ Slide side panel plugin for [Leaflet](https://leafletjs.com/ 'Leaflet Homepage')
 
 This repository is a copy of [maxwell-ilai/Leaflet.SidePanel](https://github.com/maxwell-ilai/Leaflet.SidePanel 'Leaflet.SidePanel by maxwell-ilai')
 
-## Installation
+## Demo
+
+You can find a demo [here](https://cyclingbyte.github.io/Leaflet.SidePanel/ 'Demo for Leaflet.SidePanel')
 
-### NPM
+## Prerequirements
+
+- [leaflet](https://github.com/Leaflet/Leaflet) (v1.0.0 or higher)
+  (Tested with 1.8.0)
+
+## Installation
 
 ```sh
-npm i Leaflet.SidePanel
-```
+# NPM
+npm i leaflet.sidepanel
+
+# yarn
+yarn add leaflet.sidepanel
 
-### Browser | HTML
+# pnpm
+pnpm i leaflet.sidepanel
+```
 
-Include the script and css in your html file
+Or include the script and css in your html file
 
 ```html
 <link
   rel="stylesheet"
-  href="https://www.unpkg.com/leaflet.sidepanel@1.1.0/dist/style.css"
+  href="https://cdn.jsdelivr.net/npm/leaflet.sidepanel@1.2.0/dist/style.css"
 />
-<script src="https://www.unpkg.com/leaflet.sidepanel@1.1.0/dist/leaflet-sidepanel.umd.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/leaflet.sidepanel@1.2.0"></script>
 ```
 
-## Requirements
-
-- [leaflet](https://github.com/Leaflet/Leaflet) (v1.0.0 or higher)
-  (Tested with 1.8.0)
-
 ## Options
 
 - panelPosition: _'left' (default)_ | 'right' [string]
 - hasTabs: _true (default)_ | false [boolean]
 - tabsPosition: _'top' (default)_ | 'right' | 'bottom' | 'left' [string]
 - darkMode: true | _false (default)_ [boolean]
-- pushControls: true | _false (default)_ [boolean]
-- startTab: _1 (default)_ [number | string]
+- pushControls: true | _false (default)_ [boolean]<br />
+  Shifts the map controls (like zoom) when the side panels open, to keep them visible and usabe
+- defaultTab: _1 (default)_ [number | string]
 
-## Demo
+## Usage
 
-You can find a demo [here](https://cyclingbyte.github.io/Leaflet.SidePanel/ 'Demo for Leaflet.SidePanel')
-
-## Example
-
-**_Javascript_**
+### Javascript
 
 ```javascript
 import L from 'leaflet';
@@ -67,12 +72,12 @@ const panelRight = L.control
     tabsPosition: 'top',
     pushControls: true,
     darkMode: true,
-    startTab: 'tab-5',
+    defaultTab: 'tab-5',
   })
   .addTo(map);
 ```
 
-**_Html_**
+### Html
 
 ```html
 <div id="panelID" class="sidepanel" aria-label="side panel" aria-hidden="false">
@@ -81,14 +86,8 @@ const panelRight = L.control
       <ul class="sidepanel-tabs">
         <li class="sidepanel-tab">
           <a href="#" class="sidebar-tab-link" role="tab" data-tab-link="tab-1">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="24"
-              height="24"
-              fill="currentColor"
-            >
-              <path fill-rule="evenodd" />
-            </svg>
+            <!-- [You can also use images / icons] -->
+            Tab 1
           </a>
         </li>
         <!-- [...] -->
@@ -113,10 +112,15 @@ const panelRight = L.control
 </div>
 ```
 
-## Special Thanks
+### Vue
+
+There is a Vue wrapper available on [vue-leaflet-sidepanel](https://github.com/cyclingbyte/vue-leaflet-sidepanel)<br />
+This wrapper was build for Vue 3, there were no tests with Vue 2
+
+## Credits
 
 Special thanks to **[maxwell-ilai](https://github.com/maxwell-ilai 'Maxwell Ilai')** for the original project [maxwell-ilai/Leaflet.SidePanel](https://github.com/maxwell-ilai/Leaflet.SidePanel 'Leaflet.SidePanel by maxwell-ilai')
 
 ## Visitors
 
-<a href="https://info.flagcounter.com/Qvel"><img src="https://s01.flagcounter.com/count2/Qvel/bg_FFFFFF/txt_000000/border_CCCCCC/columns_6/maxflags_18/viewers_0/labels_0/pageviews_1/flags_0/percent_0/" alt="Flag Counter" border="0"></a>
+[![Flag Counter](https://s01.flagcounter.com/count2/Qvel/bg_FFFFFF/txt_000000/border_CCCCCC/columns_6/maxflags_18/viewers_0/labels_0/pageviews_1/flags_0/percent_0/)](https://info.flagcounter.com/Qvel)