Add table components and widget

package.json

@@ -9,6 +9,7 @@
     "lint": "eslint --ext .js,.vue --ignore-path .gitignore --fix src"
   },
   "dependencies": {
+    "@geoman-io/leaflet-geoman-free": "^2.14.2",
     "axios": "^1.3.4",
     "js-yaml": "^4.1.0",
     "leaflet": "^1.9.3",

src/assets/css/vars.css

@@ -8,8 +8,8 @@
   --color-base-foreground: 255, 255, 255;
   --color-base-background: 245, 247, 251;
   --color-base-muted: 226, 232, 240;
-  --color-base-soft: 156,163,175;
-  --color-base-lighter: 55,65,81;
+  --color-base-soft: 156, 163, 175;
+  --color-base-lighter: 55, 65, 81;
   --color-base-border: 203, 213, 225;
   --color-base-content: 0, 0, 0;
 
@@ -22,15 +22,15 @@
 .dark {
   --color-primary: 23, 23, 23;
   --color-primary-content: 255, 255, 255;
-  
+
   --color-secondary: 14, 165, 233;
   --color-secondary-content: 255, 255, 255;
 
   --color-base-background: 23, 23, 23;
   --color-base-foreground: 38, 38, 38;
   --color-base-muted: 48, 48, 48;
-  --color-base-soft: 200,200,200;
+  --color-base-soft: 200, 200, 200;
   --color-base-lighter: 220, 220, 220;
-  --color-base-border: 38, 38, 38;
+  --color-base-border: 70, 70, 70;
   --color-base-content: 255, 255, 255;
-}
+}

src/components/Autocomplete/Autocomplete.global.vue

@@ -1,69 +1,29 @@
 <template>
-  <div
-    class="
-      autocomplete
-      md:block 
-      md:mr-0
-      mr-3
-      relative
-      w-fit"
-  >
-    <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
-      <IconSearch class="w-5 h-5 text-gray-500" />
+  <div class="autocomplete md:block md:mr-0 mr-3 relative w-fit">
+    <div
+      class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none"
+    >
+      <IconSearch class="w-4 h-4 text-gray-500" />
     </div>
     <input
       v-model="typed"
       type="text"
-      class="
-        autocomplete__input
-        block
-        box-border
-        min-w-full
-        p-1.5
-        pl-10
-        text-base-content
-        rounded
-        border
-        sm:text-sm
-        placeholder:text-sm
-        dark:border-slate-700
-        border-gray-300
-        dark:placeholder:text-slate-400
-        focus:ring-primary-500
-        focus:border-primary-500"
+      class="autocomplete__input block box-border min-w-full p-1.5 pl-10 text-base-content rounded border sm:text-sm placeholder:text-sm dark:border-slate-700 border-gray-300 dark:placeholder:text-slate-400 focus:ring-primary-500 focus:border-primary-500"
       :placeholder="placeholder"
-    >
+    />
     <AutocompleteSpinner
       v-if="isSearching"
       class="absolute top-2 right-2 h-5 w-5"
     />
 
     <ul
       v-if="list.length"
-      class="
-        autocomplete__list
-        list
-        absolute
-        z-[500]
-        max-h-52
-        w-full
-        overflow-y-auto
-        border
-        bg-base-foreground
-        border-base-border
-        !m-0"
+      class="autocomplete__list list absolute z-[500] max-h-52 w-full overflow-y-auto border bg-base-foreground border-base-border !m-0"
     >
       <li
         v-for="item in list"
         :key="item.id"
-        class="
-          autocomplete__item
-          p-2 border-b 
-          text-xs
-          cursor-pointer
-          hover:bg-secondary-color
-          hover:bg-opacity-5
-          border-base-border"
+        class="autocomplete__item p-2 border-b text-xs cursor-pointer hover:bg-secondary-color hover:bg-opacity-5 border-base-border"
         @click="selectItem(item)"
       >
         <span v-html="item[label]" />
@@ -112,37 +72,36 @@ const isSearching = ref(false)
 const delay = 500
 let timeout
 
-watch(typed, newVal => {
+watch(typed, (newVal) => {
   clearTimeout(timeout)
 
   if (newVal.length) {
     timeout = setTimeout(() => {
       isSearching.value = true
-      makeAPIRequest.get(props.url, {
-        params: {
-          ...props.params,
-          [props.queryParam]: typed.value,
-        }
-      }).then(({ data }) => {
-        isSearching.value = false
-        list.value = data
-      })
+      makeAPIRequest
+        .get(props.url, {
+          params: {
+            ...props.params,
+            [props.queryParam]: typed.value
+          }
+        })
+        .then(({ data }) => {
+          isSearching.value = false
+          list.value = data
+        })
     }, delay)
   } else {
     list.value = []
   }
 })
 
-const selectItem = item => {
+const selectItem = (item) => {
   emit('select', item)
   typed.value = ''
 }
-
-
 </script>
 
 <style lang="scss" scoped>
-
 .autocomplete {
   &__list {
     display: none;
@@ -161,4 +120,4 @@ const selectItem = item => {
     display: block;
   }
 }
-</style>
+</style>

src/components/Button/VButton.global.vue

@@ -0,0 +1,28 @@
+<template>
+  <button
+    type="button"
+    class="px-2 py-2 rounded-md hover:bg-opacity-80"
+    :class="{
+      'bg-primary-color': primary,
+      'bg-secondary-color': secondary,
+      'text-primary-content': primary,
+      'text-secondary-content': secondary
+    }"
+  >
+    <slot />
+  </button>
+</template>
+
+<script setup>
+const props = defineProps({
+  primary: {
+    type: Boolean,
+    default: false
+  },
+
+  secondary: {
+    type: Boolean,
+    default: false
+  }
+})
+</script>

src/components/Icon/IconSearch.global.vue

@@ -1,7 +1,7 @@
 <template>
-  <svg 
+  <svg
     xmlns="http://www.w3.org/2000/svg"
-    class="w-5 h-5 text-gray-500"
+    class="text-gray-500"
     fill="none"
     viewBox="0 0 24 24"
     stroke="currentColor"
@@ -10,10 +10,9 @@
     <path
       stroke-linecap="round"
       stroke-linejoin="round"
-      d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+      d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"
     />
   </svg>
 </template>
 
-<script setup>
-</script>
+<script setup></script>

src/components/Icon/IconTrash.global.vue

@@ -0,0 +1,15 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke-width="1.5"
+    stroke="currentColor"
+  >
+    <path
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"
+    />
+  </svg>
+</template>

src/components/Map/VMap.global.vue

@@ -6,22 +6,16 @@
 </template>
 
 <script setup>
-
-import { 
-  computed,
-  onMounted,
-  onUnmounted,
-  ref,
-  watch,
-  nextTick
-} from 'vue'
-
+import { computed, onMounted, onUnmounted, ref, watch, nextTick } from 'vue'
 import L from 'leaflet'
 import iconRetina from 'leaflet/dist/images/marker-icon-2x.png'
 import iconUrl from 'leaflet/dist/images/marker-icon.png'
 import shadowUrl from 'leaflet/dist/images/marker-shadow.png'
 import geojsonDefaultOptions from './utils/geojsonOptions'
 
+import '@geoman-io/leaflet-geoman-free'
+import '@geoman-io/leaflet-geoman-free/dist/leaflet-geoman.css'
+
 delete L.Icon.Default.prototype._getIconUrl
 
 L.Icon.Default.mergeOptions({
@@ -33,6 +27,11 @@ L.Icon.Default.mergeOptions({
 const { map_server_tils } = __APP_ENV__
 
 const props = defineProps({
+  controls: {
+    type: Boolean,
+    default: false
+  },
+
   zoomAnimate: {
     type: Boolean,
     default: false
@@ -87,18 +86,16 @@ const tiles = {
   })
 }
 
-const fitBoundsOptions = computed(() =>
-  ({
-    maxZoom: props.zoomBounds,
-    zoom: {
-      animate: props.zoomAnimate
-    }
-  })
-)
+const fitBoundsOptions = computed(() => ({
+  maxZoom: props.zoomBounds,
+  zoom: {
+    animate: props.zoomAnimate
+  }
+}))
 
 watch(
-  () => props.geojson, 
-  newVal => {
+  () => props.geojson,
+  (newVal) => {
     geoJSONGroup.clearLayers()
     setGeoJSON(newVal)
   },
@@ -111,6 +108,17 @@ onMounted(() => {
     zoom: props.zoom
   })
 
+  if (props.controls) {
+    mapObject.pm.addControls({
+      position: 'topleft',
+      drawText: false,
+      drawCircle: false,
+      drawPolyline: false,
+      drawMarker: false,
+      cutPolygon: false
+    })
+  }
+
   geoJSONGroup = new L.FeatureGroup()
   geoJSONGroup.addTo(mapObject)
 
@@ -119,7 +127,7 @@ onMounted(() => {
 })
 
 const resizeMap = () => {
-  if(!geoJSONGroup) return
+  if (!geoJSONGroup) return
   const bounds = geoJSONGroup.getBounds()
 
   mapObject.invalidateSize()
@@ -131,7 +139,7 @@ const resizeMap = () => {
 }
 
 const initEvents = () => {
-  observeMap = new ResizeObserver(entries => {
+  observeMap = new ResizeObserver((entries) => {
     const { width } = entries[0].contentRect
     resizeMap(width)
   })
@@ -143,13 +151,13 @@ onUnmounted(() => {
   observeMap?.disconnect()
 })
 
-const setGeoJSON = geojson => {
+const setGeoJSON = (geojson) => {
   if (geojson) {
     L.geoJSON(geojson, {
       ...geojsonDefaultOptions,
       ...props.geojsonOptions
     }).addTo(geoJSONGroup)
-    
+
     const bounds = geoJSONGroup.getBounds()
 
     if (bounds.isValid()) {
@@ -159,9 +167,6 @@ const setGeoJSON = geojson => {
 
   emit('geojson:ready', geoJSONGroup)
 }
-
 </script>
 
-<style>
-
-</style>
+<style></style>

src/components/Table/VTable.vue

@@ -0,0 +1,7 @@
+<template>
+  <div class="shadow-md relative sm:rounded-lg">
+    <table class="w-full text-sm text-left text-gray-500 dark:text-gray-400">
+      <slot />
+    </table>
+  </div>
+</template>

src/components/Table/VTableBody.vue

@@ -0,0 +1,7 @@
+<template>
+  <tbody class="normal-case">
+    <slot />
+  </tbody>
+</template>
+
+<script setup></script>

src/components/Table/VTableBodyCell.vue

@@ -0,0 +1,7 @@
+<template>
+  <td class="px-6 py-4">
+    <slot />
+  </td>
+</template>
+
+<script setup></script>