- add EventEmmitter for directly binding Events to component

- add NotificationToast for messages
- add leaflet map component and zoom control component
- change focus:ring to focus:ring-2 inside BaseButton
-  `@tailwindcss/line-clamp` plugin is now included by default...remove it from tailwind.config.js
- npm updates

resources/js/Components/Map/zoom.component.vue

@@ -0,0 +1,106 @@
+<template>
+    <div class="gba-control-zoom btn-group-vertical">
+        <!-- <button ref="inputPlus" type="button" class="button is-light is-small" :click.prevent="zoomIn">
+            <fa-icon [icon]="faPlus"></fa-icon>
+        </button> -->
+        <!-- <BaseButton ref="inputPlus" :icon="mdiPlus" color="white" rounded small @click.prevent="zoomIn" /> -->
+        <button
+            ref="inputPlus"
+            class="inline-flex cursor-pointer justify-center items-center whitespace-nowrap focus:outline-none transition-colors duration-150 border rounded ring-blue-700 bg-teal-50 text-black border-teal-50 hover:bg-gray-200 text-sm p-1"
+            type="button"
+            @click.prevent="zoomIn"
+        >
+            <BaseIcon v-if="mdiPlus" :path="mdiPlus" />
+        </button>
+
+        <button
+            ref="inputMinus"
+            class="inline-flex cursor-pointer justify-center items-center whitespace-nowrap focus:outline-none transition-colors duration-150 border rounded ring-blue-700 bg-teal-50 text-black border-teal-50 hover:bg-gray-200 text-sm p-1"
+            type="button"
+            @click.prevent="zoomOut"
+        >
+            <BaseIcon v-if="mdiMinus" :path="mdiMinus" />
+        </button>
+    </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop, Ref } from 'vue-facing-decorator';
+import { MapService } from '@/Stores/map';
+
+import BaseIcon from '@/Components/BaseIcon.vue';
+import { mdiPlus, mdiMinus } from '@mdi/js';
+
+@Component({
+    name: 'zoom-control',
+    components: {
+        BaseIcon       
+    },
+})
+export default class ZoomControlComponent extends Vue {
+    mdiPlus = mdiPlus;
+    mdiMinus = mdiMinus;
+
+    /**
+     * Connect map id.
+     */
+    @Prop() public mapId: string;
+
+    @Ref('inputPlus') private _inputPlus: HTMLElement;
+    @Ref('inputMinus') private _inpuMinus: HTMLElement;
+
+    mapService = MapService();
+
+    public zoomIn() {
+        let map = this.mapService.getMap(this.mapId);
+        map && map.zoomIn();
+    }
+
+    public zoomOut() {
+        let map = this.mapService.getMap(this.mapId);
+        map && map.zoomOut();
+    }
+
+    public updateDisabled() {
+        let map = this.mapService.getMap(this.mapId);
+        // let className = 'leaflet-disabled';
+
+        // this._inputPlus.nativeElement.disabled = false;
+        this._inputPlus.setAttribute('aria-disabled', 'false');
+
+        // this._inpuMinus.nativeElement.disabled = false;
+        this._inpuMinus.setAttribute('aria-disabled', 'false');
+
+        if (map.getZoom() === map.getMinZoom()) {
+            // this._inpuMinus.nativeElement.disabled = true;
+            this._inpuMinus.setAttribute('aria-disabled', 'true');
+        }
+        if (map.getZoom() === map.getMaxZoom()) {
+            // this._inputPlus.nativeElement.disabled = true;
+            this._inputPlus.setAttribute('aria-disabled', 'true');
+        }
+    }
+}
+</script>
+
+<style lang="css">
+.gba-control-zoom {
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    cursor: pointer;
+    border-radius: 4px;
+    position: absolute;
+    left: 10px;
+    top: 10px;
+    z-index: 500;
+}
+
+.btn-group-vertical button {
+    display: block;
+
+    margin-left: 0;
+    margin-top: 0.5em;
+}
+</style>