Add LControlScale component

<script>

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

import { props, setup as scaleControlSetup } from "../functions/controlScale";

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

export default {

  name: "LControlLayers",

  props,

  setup(props) {

    const leafletRef = ref({});

    const registerControl = inject("registerControl");

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

    onMounted(async () => {

      const { control, setOptions } = await import(

        "leaflet/dist/leaflet-src.esm"

      );

      leafletRef.value = control.scale(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 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,

  maxWidth: {

    type: Number,

    default: 100,

  },

  metric: {

    type: Boolean,

    default: true,

  },

  imperial: {

    type: Boolean,

    default: true,

  },

  updateWhenIdle: {

    type: Boolean,

    default: false,

  },

};

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

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

    props,

    leafletRef

  );

  const options = {

    ...controlOptions,

    maxWidth: props.maxWidth,

    metric: props.metric,

    imperial: props.imperial,

    updateWhenIdle: props.updateWhenIdle,

  };

  return { options, methods: controlMethods };

};