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

<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>