Add zoom control

<script>

import { onMounted, ref, inject } from "vue";

import { props, setup as zoomControlSetup } from "../functions/controlZoom";

import { propsBinder } from "../utils.js";

export default {

  name: "LControlLayers",

  props,

  setup(props) {

    const leafletRef = ref({});

    const registerControl = inject("registerControl");

    const { options, methods } = zoomControlSetup(props, leafletRef);

    onMounted(async () => {

      const { control, setOptions } = await import(

        "leaflet/dist/leaflet-src.esm"

      );

      leafletRef.value = control.zoom(options);

      propsBinder(methods, leafletRef.value, props, setOptions);

      registerControl({ leafletObject: leafletRef.value });

    });

  },

  render() {

    return null;

  },

};

</script>

export { default as LControlLayers } from "./LControlLayers.vue";

export { default as LControlScale } from "./LControlScale.vue";

export { default as LControlZoom } from "./LControlZoom.vue";

export { default as LMap } from "./LMap.vue";

export { default as LMarker } from "./LMarker.vue";

export { default as LTileLayer } from "./LTileLayer.vue";

import { props as controlProps, setup as controlSetup } from "./control";

export const props = {

  ...controlProps,

  zoomInText: {

    type: String,

    default: "+",

  },

  zoomInTitle: {

    type: String,

    default: "Zoom in",

  },

  zoomOutText: {

    type: String,

    default: "-",

  },

  zoomOutTitle: {

    type: String,

    default: "Zoom out",

  },

};

export const setup = (props, leafletRef) => {

  const { options: controlOptions, methods: controlMethods } = controlSetup(

    props,

    leafletRef

  );

  const options = {

    ...controlOptions,

    zoomInText: props.zoomInText,

    zoomInTitle: props.zoomInTitle,

    zoomOutText: props.zoomOutText,

    zoomOutTitle: props.zoomOutTitle,

  };

  return { options, methods: controlMethods };

};