@rural-environmental-registry/map_component 2.0.0 → 2.0.2

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 = {
@@ -73,7 +75,7 @@ export type LayerData = {
     name: string;
     active: boolean;
     activeDefault: boolean;
-    role?: 'layer' | 'separator';
+    role?: 'layer' | 'separator' | 'subgroup';
     tooltip?: string;
     toggle?: {
         active: string;
@@ -102,6 +104,8 @@ export type LayerData = {
     infoIcons?: LayerInfoIconConfig[];
     required?: boolean;
     editActions?: LayerActionConfig[];
+    children?: LayerData[];
+    collapsed?: boolean;
     meta?: Record<string, unknown>;
 };
 export type GroupLayerData = {

package/dist/utils/layersConfigNormalizer.d.ts

@@ -5,6 +5,8 @@ export declare const normalizeLayersConfig: (config?: LayersConfig | null) => Se
 export declare const resolveLayerActions: (layer: LayerData, defaults?: LayerActionDefaults) => LayerActionConfig[];
 export declare const resolveEditControlAction: (defaults: LayerActionDefaults | undefined, kind: "cancel" | "conclude") => LayerActionConfig;
 export declare const isMenuSeparator: (layer: LayerData | null | undefined) => boolean;
+export declare const isMenuSubgroup: (layer: LayerData | null | undefined) => boolean;
+export declare const walkMenuLayers: (layers: LayerData[] | undefined, visitor: (layer: LayerData) => void) => void;
 export declare const shouldApplyMapOverlay: (layer: LayerData) => boolean;
 export declare const collectLayerMetricsMap: (config?: LayersConfig | null) => LayerMetricsMap;
 export declare const resolveLayerMetrics: (layer: LayerData | null | undefined) => LayerMetricsConfig[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rural-environmental-registry/map_component",
-  "version": "2.0.0",
+  "version": "2.0.2",
   "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

@@ -49,8 +49,10 @@
     SectionSelectPayload
   } from '../../types'
   import {
+    isMenuSubgroup,
     normalizeLayersConfig,
-    shouldApplyMapOverlay
+    shouldApplyMapOverlay,
+    walkMenuLayers
   } from '../../utils/layersConfigNormalizer'
   import {
     resolveGroupCollapsedState,
@@ -152,6 +154,15 @@
             ? group.collapsed
             : resolveGroupCollapsedState(group.key, undefined, persist)
         if (!collapsed) openeds.push(group.key)
+
+        ;(group.layers || []).forEach((layer) => {
+          if (!isMenuSubgroup(layer)) return
+          const subCollapsed =
+            layer.collapsed !== undefined
+              ? layer.collapsed
+              : resolveGroupCollapsedState(layer.key, true, persist)
+          if (!subCollapsed) openeds.push(layer.key)
+        })
       })
     })
 
@@ -279,7 +290,7 @@
 
     normalizedSections.value.forEach((section) => {
       section.groups.forEach((group) => {
-        group.layers?.forEach((layer) => {
+        walkMenuLayers(group.layers, (layer) => {
           if (initializedLayerKeys.has(layer.key)) return
           if (!shouldApplyMapOverlay(layer)) return
           if (!shouldInitLayerOnMap(layer, persist)) return
@@ -313,7 +324,7 @@
   }
 
   const onGroupLayerToggle = (parent: GroupLayerData): void => {
-    parent.layers.forEach((childLayer: LayerData) => {
+    walkMenuLayers(parent.layers, (childLayer) => {
       applyLayerOverlay(childLayer)
     })
 
@@ -363,7 +374,8 @@
 
   const handleWmsLayer = (layer: LayerData): void => {
     if (convertedLayers.value[layer.key]) {
-      if (!layer.active) return removeWmsLayer(layer)
+      if (!layer.active) removeWmsLayer(layer)
+      return
     }
 
     if (!layer.active) return
@@ -415,7 +427,9 @@
 
   const handleGeoJsonLayer = (layer: LayerData): void => {
     if (convertedGeoJsonLayers.value[layer.key]) {
-      if (!layer.active) return removeGeoJsonLayer(layer)
+      // Já no mapa: só remove se desativada — evita GeoJSON órfão ao reaplicar active=true.
+      if (!layer.active) removeGeoJsonLayer(layer)
+      return
     }
 
     if (!layer.active) return
@@ -469,8 +483,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/components/menu/ParentMenu.vue

@@ -51,8 +51,29 @@
       v-for="(child, idx) in childrenLayers"
       :key="child.key"
     >
+      <ElSubMenu
+        v-if="isMenuSubgroup(child)"
+        :index="child.key"
+        class="parent-menu-subgroup-accordion"
+      >
+        <template #title>
+          <div class="parent-menu-subgroup-title">{{ child.name }}</div>
+        </template>
+        <ChildMenu
+          v-for="(nested, nestedIdx) in child.children || []"
+          :key="nested.key"
+          :actionDefaults="actionDefaults"
+          :data="nested"
+          :groupKey="groupData.key"
+          :persist="props.persist"
+          :sectionKey="sectionKey"
+          :visibilityMode="visibilityMode"
+          @onChildLayerToggle="onNestedChildChange($event, idx, nestedIdx)"
+          @onLayerAction="emit('onLayerAction', $event)"
+        />
+      </ElSubMenu>
       <ElMenuItem
-        v-if="isMenuSeparator(child)"
+        v-else-if="isMenuSeparator(child)"
         :index="child.key"
         class="parent-menu-subgroup-header"
         disabled
@@ -114,6 +135,7 @@
   } from '../../types'
   import {
     isMenuSeparator,
+    isMenuSubgroup,
     resolveActiveGroupActions
   } from '../../utils/layersConfigNormalizer'
   import { resolveLayerActiveState, setHistory } from '../../utils/menuHistory.ts'
@@ -154,16 +176,26 @@
     onLayerAction: [LayerActionPayload]
   }>()
 
+  const resolveMenuEntry = (layer: LayerData): LayerData => {
+    if (isMenuSubgroup(layer)) {
+      return {
+        ...layer,
+        children: (layer.children || []).map((child) =>
+          resolveLayerActiveState(child, props.persist)
+        )
+      }
+    }
+    return resolveLayerActiveState(layer, props.persist)
+  }
+
   const childrenLayers = ref<LayerData[]>(
-    (props.groupData.layers ?? []).map((layer) => resolveLayerActiveState(layer, props.persist))
+    (props.groupData.layers ?? []).map((layer) => resolveMenuEntry(layer))
   )
 
   watch(
     () => props.groupData.layers,
     (layers) => {
-      childrenLayers.value = (layers ?? []).map((layer) =>
-        resolveLayerActiveState(layer, props.persist)
-      )
+      childrenLayers.value = (layers ?? []).map((layer) => resolveMenuEntry(layer))
     },
     { deep: true }
   )
@@ -190,9 +222,20 @@
       'Ocultar'
   )
 
-  const toggleableLayers = computed(() =>
-    childrenLayers.value.filter((layer: LayerData) => !isMenuSeparator(layer))
-  )
+  const collectToggleableLeaves = (layers: LayerData[]): LayerData[] => {
+    const leaves: LayerData[] = []
+    for (const layer of layers) {
+      if (isMenuSeparator(layer)) continue
+      if (isMenuSubgroup(layer)) {
+        leaves.push(...collectToggleableLeaves(layer.children || []))
+        continue
+      }
+      leaves.push(layer)
+    }
+    return leaves
+  }
+
+  const toggleableLayers = computed(() => collectToggleableLeaves(childrenLayers.value))
 
   const toggleVisibleAllLayers = (): void => {
     if (props.persist) {
@@ -210,6 +253,12 @@
     set: (active: boolean) => {
       childrenLayers.value = (props.groupData.layers ?? []).map((layer: LayerData) => {
         if (isMenuSeparator(layer)) return resolveLayerActiveState(layer, props.persist)
+        if (isMenuSubgroup(layer)) {
+          return {
+            ...layer,
+            children: (layer.children || []).map((child) => ({ ...child, active }))
+          }
+        }
         return { ...layer, active }
       })
 
@@ -222,6 +271,19 @@
     emit('onChildLayerToggle', layer)
   }
 
+  const onNestedChildChange = (
+    layer: LayerData,
+    subgroupIdx: number,
+    nestedIdx: number
+  ): void => {
+    const subgroup = childrenLayers.value[subgroupIdx]
+    if (!subgroup) return
+    const children = [...(subgroup.children || [])]
+    children[nestedIdx] = layer
+    childrenLayers.value[subgroupIdx] = { ...subgroup, children }
+    emit('onChildLayerToggle', layer)
+  }
+
   const onGroupActionClick = (action: GroupActionConfig): void => {
     if (action.disabled) return
 
@@ -337,7 +399,6 @@
     margin: 0 !important;
   }
 
-  /* Título de subgrupo: separador visual, sem accordion */
   .parent-menu .parent-menu-subgroup-header {
     height: auto !important;
     line-height: normal !important;
@@ -355,6 +416,21 @@
     opacity: 1 !important;
   }
 
+  .parent-menu .parent-menu-subgroup-accordion {
+    padding-left: 0 !important;
+  }
+
+  .parent-menu .parent-menu-subgroup-accordion > .el-sub-menu__title {
+    height: auto !important;
+    line-height: normal !important;
+    white-space: normal !important;
+    padding: var(--mapa-size-base-10) var(--mapa-size-base-20) var(--mapa-size-base-5) !important;
+  }
+
+  .parent-menu .parent-menu-subgroup-accordion > .el-sub-menu__title:hover {
+    background-color: transparent !important;
+  }
+
   .parent-menu .parent-menu-subgroup-title {
     font-size: var(--mapa-fs-12);
     font-weight: 700;

package/src/index.ts

@@ -40,6 +40,8 @@ export {
   resolveEditControlAction,
   shouldApplyMapOverlay,
   isMenuSeparator,
+  isMenuSubgroup,
+  walkMenuLayers,
   collectLayerMetricsMap,
   resolveLayerMetrics,
   collectLayerInfoIconsMap,

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
 }
 
@@ -115,7 +117,7 @@ export type LayerData = {
   name: string
   active: boolean
   activeDefault: boolean
-  role?: 'layer' | 'separator'
+  role?: 'layer' | 'separator' | 'subgroup'
   tooltip?: string
   toggle?: {
     active: string
@@ -145,6 +147,8 @@ export type LayerData = {
   infoIcons?: LayerInfoIconConfig[]
   required?: boolean
   editActions?: LayerActionConfig[]
+  children?: LayerData[]
+  collapsed?: boolean
   meta?: Record<string, unknown>
 }
 

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
     })
@@ -163,8 +166,26 @@ export const isMenuSeparator = (layer: LayerData | null | undefined): boolean =>
   return layer?.role === 'separator' || !!layer?.meta?.isSeparator
 }
 
+export const isMenuSubgroup = (layer: LayerData | null | undefined): boolean => {
+  return layer?.role === 'subgroup' || !!layer?.meta?.isSubgroup
+}
+
+export const walkMenuLayers = (
+  layers: LayerData[] | undefined,
+  visitor: (layer: LayerData) => void
+): void => {
+  for (const layer of layers || []) {
+    if (isMenuSubgroup(layer) && layer.children?.length) {
+      walkMenuLayers(layer.children, visitor)
+      continue
+    }
+    if (isMenuSeparator(layer)) continue
+    visitor(layer)
+  }
+}
+
 export const shouldApplyMapOverlay = (layer: LayerData): boolean => {
-  if (isMenuSeparator(layer)) return false
+  if (isMenuSeparator(layer) || isMenuSubgroup(layer)) return false
   if (layer.mapSource === 'none' || layer.mapSource === 'consumer') return false
   if (layer.mapSource === 'wms' || layer.mapSource === 'geojson') return true
   if (layer.geojson) return true