ModuleContainer

Usecase

• Wrap custom controls with consistent draggable/toggleable behavior.
• Standardize control chrome (button, header) across modules.

Props

Prop	Description	Type	Required	Default Value
mapId		string	false	--
dragId		string	false	--
btnWidth		number	false	40
position		'top-left', 'top-right', 'bottom-left', 'bottom-right'	false	'bottom-right'
controlVisible		boolean	false	true

Events

Slots

Name	Description
btn
draggable

Usage

Vue

<script setup lang="ts">
import { MapControlButton, ModuleContainer, withMapProps } from '@hungpvq/vue-map-core';
const props = defineProps({
  ...withMapProps,
  title: {
    type: String,
    default: '',
  },
});
const { moduleContainerProps } = useMap(props);
</script>
<template>
  <ModuleContainer v-bind="moduleContainerProps">
    <template #btn>
      <MapControlButton>
        <SvgIcon :size="18" type="mdi" :path="mdiHome" />
      </MapControlButton>
    </template>
    <slot />
  </ModuleContainer>
</template>

<script setup lang="ts">
import { MapControlButton, ModuleContainer, { ... defaultMapProps}, type WithMapPropType } from '@hungpvq/vue-map-core';
const props = withDefaults(
  defineProps<
    WithMapPropType & {
      title: string;
    }
  >(),
  {
    ...defaultMapProps,
    title: '',
  },
);
const { moduleContainerProps } = useMap(props);
</script>
<template>
  <ModuleContainer v-bind="moduleContainerProps">
    <template #btn>
      <MapControlButton>
        <SvgIcon :size="18" type="mdi" :path="mdiHome" />
      </MapControlButton>
    </template>
    <slot />
  </ModuleContainer>
</template>

React

import {
  MapControlButton,
  ModuleContainer,
  defaultMapProps,
  useMap,
  type WithMapPropType,
} from '@hungpvq/react-map-core';
import { Icon } from '@mdi/react';
import { mdiHome } from '@mdi/js';
import type { ReactNode } from 'react';

type Props = WithMapPropType & {
  title?: string;
  children?: ReactNode;
};

function HomeModule(props: Props) {
  const merged = { ...defaultMapProps, title: '', ...props };
  const { moduleContainerProps } = useMap(merged);

  return (
    <ModuleContainer
      {...moduleContainerProps}
      btn={
        <MapControlButton>
          <Icon path={mdiHome} size="18px" />
        </MapControlButton>
      }
    >
      {props.children}
    </ModuleContainer>
  );
}