feat: custom plugin

Author: brandonxiang

.release-it.json

@@ -0,0 +1,8 @@
+{
+  "git": {
+    "commitMessage": "chore: release v${version}"
+  },
+  "github": {
+    "release": true
+  }
+}

examples/LCustomPlugin.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import L from 'leaflet'
+import { PropType, inject, nextTick } from 'vue';
+import { MAP_PROVIDE, getMapInjectKey, type MapProvide } from '../src';
+
+
+const mapProvide = inject<MapProvide>(MAP_PROVIDE);
+
+const key = getMapInjectKey();
+
+const props = defineProps({
+  options: {
+    type: Object as PropType<L.Control.ZoomOptions>,
+    required: false
+  }
+})
+
+nextTick(() => {
+  const zoom = L.control.zoom(props.options);
+  mapProvide?.getMap(key)?.addControl(zoom);
+})
+
+</script>  
+
+<template></template>

examples/Layout.vue

@@ -18,7 +18,7 @@ import {
 } from "../src";
 import "../node_modules/leaflet/dist/leaflet.css";
 import L from "leaflet";
-// import { type GeoJsonObject } from 'geojson';
+import LCustomPlugin from './LCustomPlugin.vue';
 
 const mapOptions = {
   zoom: 13,
@@ -69,12 +69,14 @@ const tmpGeojson = {
        }
    };
 
+
+
 </script>
 
 <template>
   <div>
     <h1>Basic UI Layers</h1>
-    <l-map id="map1" :options="mapOptions">
+    <l-map id="map1" :options="mapOptions" ref="map1">
       <l-tilelayer
         urlTemplate="https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}"
         :options="tileLayerOptions"
@@ -189,6 +191,19 @@ const tmpGeojson = {
       <LGeojson :geojson="tmpGeojson" />
     </l-map>
   </div>
+  <div>
+    <h1>Custom Plugin</h1>
+    <l-map
+      id="map5"
+      :options="mapOptions"
+    >
+      <l-tilelayer
+        urlTemplate="https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}"
+        :options="tileLayerOptions"
+      />
+      <LCustomPlugin />
+    </l-map>
+  </div>
 </template>
 
 <style lang="css">
@@ -200,7 +215,8 @@ const tmpGeojson = {
 #map1,
 #map2,
 #map3,
-#map4 {
+#map4,
+#map5 {
   height: 300px;
 }
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueleaflet",
-  "version": "3.0.2",
+  "version": "3.0.1",
   "type": "module",
   "files": ["dist"],
   "main": "./dist/vueleaflet.umd.js",
@@ -30,7 +30,8 @@
     "@vitejs/plugin-vue": "^4.3.4",
     "typescript": "^4.5.4",
     "vite": "^4.4.9",
-    "vue-tsc": "^1.8.13"
+    "vue-tsc": "^1.8.13",
+    "release-it": "^16.1.0"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"