@rural-environmental-registry/map_component 2.0.1 → 2.0.3

package/dist/types/index.d.ts

@@ -75,7 +75,7 @@ export type LayerData = {
     name: string;
     active: boolean;
     activeDefault: boolean;
-    role?: 'layer' | 'separator';
+    role?: 'layer' | 'separator' | 'subgroup';
     tooltip?: string;
     toggle?: {
         active: string;
@@ -104,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.1",
+  "version": "2.0.3",
   "description": "Map component for Vue.js applications",
   "main": "dist/index.mjs",
   "module": "dist/index.mjs",

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)
+        })
       })
     })
 
@@ -212,8 +223,11 @@
   ): { sectionKey: string; layer: LayerData } | null => {
     for (const section of normalizedSections.value) {
       for (const group of section.groups) {
-        const layer = group.layers?.find((item) => item.key === layerKey)
-        if (layer) return { sectionKey: section.key, layer }
+        let found: LayerData | undefined
+        walkMenuLayers(group.layers, (layer) => {
+          if (!found && layer.key === layerKey) found = layer
+        })
+        if (found) return { sectionKey: section.key, layer: found }
       }
     }
     return null
@@ -279,7 +293,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 +327,7 @@
   }
 
   const onGroupLayerToggle = (parent: GroupLayerData): void => {
-    parent.layers.forEach((childLayer: LayerData) => {
+    walkMenuLayers(parent.layers, (childLayer) => {
       applyLayerOverlay(childLayer)
     })
 
@@ -363,7 +377,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 +430,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

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/components/menu/SectionMenu.vue

@@ -148,7 +148,8 @@
   import {
     resolveEditControlAction,
     resolveLayerActions,
-    resolveLayerMetrics
+    resolveLayerMetrics,
+    walkMenuLayers
   } from '../../utils/layersConfigNormalizer'
 
   const DEFAULT_ACTION_STYLE: Required<LayerActionStyle> = {
@@ -226,8 +227,11 @@
   ): { layer: LayerData; group: GroupLayerData } | null => {
     if (!layerKey || !section.value) return null
     for (const group of section.value.groups) {
-      const layer = group.layers?.find((item) => item.key === layerKey)
-      if (layer) return { layer, group }
+      let found: LayerData | undefined
+      walkMenuLayers(group.layers, (layer) => {
+        if (!found && layer.key === layerKey) found = layer
+      })
+      if (found) return { layer: found, group }
     }
     return null
   }

package/src/index.ts

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

package/src/types/index.ts

@@ -117,7 +117,7 @@ export type LayerData = {
   name: string
   active: boolean
   activeDefault: boolean
-  role?: 'layer' | 'separator'
+  role?: 'layer' | 'separator' | 'subgroup'
   tooltip?: string
   toggle?: {
     active: string
@@ -147,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

@@ -166,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