@rural-environmental-registry/map_component 2.0.0 → 2.0.1

package/dist/types/index.d.ts

@@ -19,6 +19,7 @@ export type LayerActionDefaultItem = {
     key?: string;
     name: string;
     icon?: FaIconName;
+    tooltip?: string;
     style?: LayerActionStyle;
     disabled?: boolean;
     visible?: boolean;
@@ -37,6 +38,7 @@ export type LayerActionConfig = {
     type?: 'edit' | 'import' | 'delete' | 'visibility' | 'custom' | 'cancel' | 'conclude';
     disabled?: boolean;
     visible?: boolean;
+    tooltip?: string;
     style?: LayerActionStyle;
 };
 export type LayerMetricsConfig = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rural-environmental-registry/map_component",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "Map component for Vue.js applications",
   "main": "dist/index.mjs",
   "module": "dist/index.mjs",

package/src/components/menu/ChildMenu.vue

@@ -84,19 +84,26 @@
             v-if="!hideControls && visibleActions.length"
             class="child-menu-actions"
           >
-            <button
+            <ElTooltip
               v-for="action in visibleActions"
               :key="action.key"
-              type="button"
-              class="child-action-button"
-              :disabled="action.disabled"
-              @click.stop="onActionClick(action)"
+              :content="action.tooltip || action.name"
+              :disabled="!(action.tooltip || action.name)"
+              placement="top"
             >
-              <FontAwesomeIcon
-                v-if="action.icon"
-                :iconName="action.icon"
-              />
-            </button>
+              <button
+                type="button"
+                class="child-action-button"
+                :disabled="action.disabled"
+                :aria-label="action.tooltip || action.name"
+                @click.stop="onActionClick(action)"
+              >
+                <FontAwesomeIcon
+                  v-if="action.icon"
+                  :iconName="action.icon"
+                />
+              </button>
+            </ElTooltip>
           </div>
           <template v-else-if="!hideControls && visibilityMode !== 'eye'">
             <ElSwitch
@@ -367,7 +374,7 @@
     align-items: center;
     justify-content: center;
     border: none !important;
-    background: transparent !important;;
+    background: transparent !important;
     color: var(--mapa-base-green);
     cursor: pointer;
     padding: var(--mapa-size-base-2);

package/src/components/menu/LayerMenu.vue

@@ -469,8 +469,7 @@
   .layer-menu > .map-custom-menu {
     box-shadow: var(--mapa-base-box-shadow);
     padding: var(--mapa-size-base-10);
-    overflow-y: scroll;
-    scrollbar-width: none;
+    overflow-y: auto;
     height: 100%;
   }
 

package/src/types/index.ts

@@ -47,6 +47,7 @@ export type LayerActionDefaultItem = {
   key?: string
   name: string
   icon?: FaIconName
+  tooltip?: string
   style?: LayerActionStyle
   disabled?: boolean
   visible?: boolean
@@ -67,6 +68,7 @@ export type LayerActionConfig = {
   type?: 'edit' | 'import' | 'delete' | 'visibility' | 'custom' | 'cancel' | 'conclude'
   disabled?: boolean
   visible?: boolean
+  tooltip?: string
   style?: LayerActionStyle
 }
 

package/src/utils/layersConfigNormalizer.ts

@@ -110,6 +110,7 @@ export const resolveLayerActions = (
       name: defaults.edit.name,
       icon: defaults.edit.icon ?? 'pencil',
       type: 'edit',
+      tooltip: defaults.edit.tooltip,
       style: defaults.edit.style,
       disabled: defaults.edit.disabled
     })
@@ -121,6 +122,7 @@ export const resolveLayerActions = (
       name: defaults.import.name,
       icon: defaults.import.icon ?? 'upload',
       type: 'import',
+      tooltip: defaults.import.tooltip,
       style: defaults.import.style,
       disabled: defaults.import.disabled
     })
@@ -132,6 +134,7 @@ export const resolveLayerActions = (
       name: defaults.delete.name,
       icon: defaults.delete.icon ?? 'trash',
       type: 'delete',
+      tooltip: defaults.delete.tooltip,
       style: defaults.delete.style,
       disabled: defaults.delete.disabled
     })