Link default props in vanilla and vue

src/controls/MMapRotateControl/index.ts

@@ -1,7 +1,8 @@
 import type {EasingFunctionDescription, MMapControl, MMapListener} from '@mappable-world/mappable-types';
 import {MMapCameraRequest} from '@mappable-world/mappable-types/imperative/MMap';
+import type {CustomVuefyOptions} from '@mappable-world/mappable-types/modules/vuefy';
+import type TVue from '@vue/runtime-core';
 import {Position, getDeltaAzimuth, toggleRotate} from '../utils/angle-utils';
-import {MMapRotateControlVuefyOptions} from './vue';
 
 import './index.css';
 
@@ -17,6 +18,13 @@ export type MMapRotateControlProps = {
 const defaultProps = Object.freeze({duration: 200});
 type DefaultProps = typeof defaultProps;
 
+export const MMapRotateControlVuefyOptions: CustomVuefyOptions<MMapRotateControl> = {
+    props: {
+        easing: [Function, String, Object] as TVue.PropType<EasingFunctionDescription>,
+        duration: {type: Number, default: defaultProps.duration}
+    }
+};
+
 /**
  * Display rotate control on a map.
  *

src/controls/MMapRotateTiltControl/index.ts

@@ -1,7 +1,8 @@
 import type {EasingFunctionDescription, MMapControl} from '@mappable-world/mappable-types';
+import type {CustomVuefyOptions} from '@mappable-world/mappable-types/modules/vuefy';
+import type TVue from '@vue/runtime-core';
 import {MMapRotateControl} from './MMapRotateControl';
 import {MMapTiltControl} from './MMapTiltControl';
-import {MMapRotateTiltControlVuefyOptions} from './vue';
 
 /**
  * MMapRotateTiltControl props
@@ -15,6 +16,13 @@ export type MMapRotateTiltControlProps = {
 const defaultProps = Object.freeze({duration: 200});
 type DefaultProps = typeof defaultProps;
 
+export const MMapRotateTiltControlVuefyOptions: CustomVuefyOptions<MMapRotateTiltControl> = {
+    props: {
+        easing: [Function, String, Object] as TVue.PropType<EasingFunctionDescription>,
+        duration: {type: Number, default: defaultProps.duration}
+    }
+};
+
 /**
  * Display tilt and rotation controls on a map.
  *

src/controls/MMapRouteControl/index.ts

@@ -64,13 +64,16 @@ type DefaultProps = typeof defaultProps;
 
 const MMapRouteControlVuefyOptions: CustomVuefyOptions<MMapRouteControl> = {
     props: {
-        geolocationTextInput: String,
-        clearFieldsText: String,
-        changeOrderText: String,
-        availableTypes: Array as TVue.PropType<AvailableTypes[]>,
+        geolocationTextInput: {type: String, default: defaultProps.geolocationTextInput},
+        clearFieldsText: {type: String, default: defaultProps.clearFieldsText},
+        changeOrderText: {type: String, default: defaultProps.changeOrderText},
+        availableTypes: {type: Array as TVue.PropType<AvailableTypes[]>, default: defaultProps.availableTypes},
         truckParameters: Object as TVue.PropType<TruckParameters>,
         waypoints: Array as unknown as TVue.PropType<[LngLat | null, LngLat | null]>,
-        waypointsPlaceholders: Array as unknown as TVue.PropType<[string, string]>,
+        waypointsPlaceholders: {
+            type: Array as unknown as TVue.PropType<[string, string]>,
+            default: defaultProps.waypointsPlaceholders
+        },
         search: Function as TVue.PropType<MMapRouteControlProps['search']>,
         suggest: Function as TVue.PropType<MMapRouteControlProps['suggest']>,
         route: Function as TVue.PropType<MMapRouteControlProps['route']>,

src/controls/MMapSearchControl/index.ts

@@ -1,8 +1,10 @@
 import type {DomDetach} from '@mappable-world/mappable-types/imperative/DomContext';
-import type {MMapControl} from '@mappable-world/mappable-types/imperative/MMapControl';
 import type {MMap} from '@mappable-world/mappable-types/imperative/MMap';
+import type {MMapControl} from '@mappable-world/mappable-types/imperative/MMapControl';
 import type {SearchResponse} from '@mappable-world/mappable-types/imperative/search';
 import type {SuggestResponse} from '@mappable-world/mappable-types/imperative/suggest';
+import {CustomVuefyOptions} from '@mappable-world/mappable-types/modules/vuefy';
+import type TVue from '@vue/runtime-core';
 import {debounce} from 'lodash';
 import {MMapSuggest} from './MMapSuggest';
 
@@ -29,19 +31,33 @@ export type CustomSearch = {
     map: MMap;
 };
 
+export type SearchCallback = (params: CustomSearch) => Promise<SearchResponse> | SearchResponse;
+export type SuggestCallback = (params: CustomSuggest) => Promise<SuggestResponse> | SuggestResponse;
+export type SearchResultCallback = (result: SearchResponse) => void;
+
 type MMapSearchControlProps = {
     placeholder?: string;
-    search?: ({params, map}: CustomSearch) => Promise<SearchResponse> | SearchResponse;
-    suggest?: ({text, map}: CustomSuggest) => Promise<SuggestResponse> | SuggestResponse;
-    searchResult: (result: SearchResponse) => void;
+    search?: SearchCallback;
+    suggest?: SuggestCallback;
+    searchResult: SearchResultCallback;
 };
 
 const defaultProps = Object.freeze({
     placeholder: 'Enter an address'
 });
 
+const MMapSearchControlVuefyOptions: CustomVuefyOptions<MMapSearchControl> = {
+    props: {
+        placeholder: {type: String, default: defaultProps.placeholder},
+        search: {type: Function as TVue.PropType<SearchCallback>},
+        suggest: {type: Function as TVue.PropType<SuggestCallback>},
+        searchResult: {type: Function as TVue.PropType<SearchResultCallback>}
+    }
+};
+
 class MMapSearchCommonControl extends mappable.MMapComplexEntity<MMapSearchControlProps, typeof defaultProps> {
     static defaultProps = defaultProps;
+    static [mappable.optionsKeyVuefy] = MMapSearchControlVuefyOptions;
 
     private _detachDom?: DomDetach;
     private _rootElement?: HTMLElement;

src/controls/MMapTiltControl/index.ts

@@ -1,7 +1,8 @@
 import type {EasingFunctionDescription, MMapControl, MMapListener} from '@mappable-world/mappable-types';
 import {MMapCameraRequest} from '@mappable-world/mappable-types/imperative/MMap';
+import type {CustomVuefyOptions} from '@mappable-world/mappable-types/modules/vuefy';
+import type TVue from '@vue/runtime-core';
 import {CLICK_TOLERANCE_PX, Position, radToDeg, toggleTilt} from '../utils/angle-utils';
-import {MMapTiltControlVuefyOptions} from './vue';
 
 import './index.css';
 
@@ -17,6 +18,13 @@ export type MMapTiltControlProps = {
 const defaultProps = Object.freeze({duration: 200});
 type DefaultProps = typeof defaultProps;
 
+export const MMapTiltControlVuefyOptions: CustomVuefyOptions<MMapTiltControl> = {
+    props: {
+        easing: [Function, String, Object] as TVue.PropType<EasingFunctionDescription>,
+        duration: {type: Number, default: defaultProps.duration}
+    }
+};
+
 /**
  * Display tilt control on a map.
  *

src/controls/index.ts

@@ -2,6 +2,6 @@ export {MMapGeolocationControl, MMapGeolocationControlProps} from './MMapGeoloca
 export {MMapRotateControl, MMapRotateControlProps} from './MMapRotateControl';
 export {MMapRotateTiltControl, MMapRotateTiltControlProps} from './MMapRotateTiltControl';
 export * from './MMapRouteControl';
-export {MMapSearchControl, MMapSearchControlProps} from './MMapSearchControl';
+export * from './MMapSearchControl';
 export {MMapTiltControl, MMapTiltControlProps} from './MMapTiltControl';
 export {MMapZoomControl, MMapZoomControlProps} from './MMapZoomControl';

src/markers/MMapDefaultMarker/index.ts

@@ -10,6 +10,7 @@ import normalPinStrokeSVG from './backgrounds/normal-pin-stroke.svg';
 import normalPinSVG from './backgrounds/normal-pin.svg';
 import smallPoiStrokeSVG from './backgrounds/small-poi-stroke.svg';
 import smallPoiSVG from './backgrounds/small-poi.svg';
+import {DefaultProps, defaultProps} from './props';
 
 import './index.css';
 
@@ -63,9 +64,6 @@ export type MMapDefaultMarkerProps = MMapMarkerProps & {
     popup?: MarkerPopupProps;
 };
 
-const defaultProps = Object.freeze({color: 'black', size: 'small', staticHint: true});
-type DefaultProps = typeof defaultProps;
-
 type BackgroundAndIcon = {background: HTMLElement; stroke: HTMLElement; icon: HTMLElement};
 
 export class MMapDefaultMarker extends mappable.MMapComplexEntity<MMapDefaultMarkerProps, DefaultProps> {

src/markers/MMapDefaultMarker/props.ts

@@ -0,0 +1,2 @@
+export const defaultProps = Object.freeze({color: 'black', size: 'small', staticHint: true});
+export type DefaultProps = typeof defaultProps;

src/markers/MMapDefaultMarker/vue/index.ts

@@ -3,6 +3,7 @@ import {CustomVuefyFn, CustomVuefyOptions} from '@mappable-world/mappable-types/
 import type TVue from '@vue/runtime-core';
 import {MMapDefaultMarker, MMapDefaultMarkerProps, MarkerColorProps, MarkerPopupProps, MarkerSizeProps} from '../';
 import {IconName} from '../../../icons';
+import {defaultProps} from '../props';
 
 type VuefyMarkerPopup = Omit<MarkerPopupProps, 'content'>;
 
@@ -13,12 +14,12 @@ export const MMapDefaultMarkerVuefyOptions: CustomVuefyOptions<
     props: {
         coordinates: {type: Object, required: true},
         source: String,
-        zIndex: {type: Number, default: 0},
+        zIndex: {type: Number, default: undefined},
         properties: Object,
         id: String,
         disableRoundCoordinates: {type: Boolean, default: undefined},
-        hideOutsideViewport: {type: [Object, Boolean], default: false},
-        draggable: {type: Boolean, default: false},
+        hideOutsideViewport: {type: [Object, Boolean], default: undefined},
+        draggable: {type: Boolean, default: undefined},
         mapFollowsOnDrag: {type: [Boolean, Object]},
         onDragStart: Function as TVue.PropType<MMapMarkerEventHandler>,
         onDragEnd: Function as TVue.PropType<MMapMarkerEventHandler>,
@@ -29,11 +30,11 @@ export const MMapDefaultMarkerVuefyOptions: CustomVuefyOptions<
         onClick: Function as TVue.PropType<MMapFeatureProps['onClick']>,
         onFastClick: Function as TVue.PropType<MMapFeatureProps['onFastClick']>,
         iconName: {type: String as TVue.PropType<IconName>},
-        color: {type: [Object, String] as TVue.PropType<MarkerColorProps>, default: 'darkgray'},
-        size: {type: String as TVue.PropType<MarkerSizeProps>, default: 'small'},
+        color: {type: [Object, String] as TVue.PropType<MarkerColorProps>, default: defaultProps.color},
+        size: {type: String as TVue.PropType<MarkerSizeProps>, default: defaultProps.size},
         title: {type: String},
         subtitle: {type: String},
-        staticHint: {type: Boolean, default: true},
+        staticHint: {type: Boolean, default: defaultProps.staticHint},
         popup: {type: Object as TVue.PropType<VuefyMarkerPopup>}
     }
 };

src/markers/MMapPopupMarker/index.ts

@@ -1,4 +1,5 @@
 import {LngLat, MMapMarker, MMapMarkerProps} from '@mappable-world/mappable-types';
+import {DefaultProps, defaultProps} from './props';
 import {MMapPopupMarkerReactifyOverride} from './react';
 import {MMapPopupMarkerVuefyOptions, MMapPopupMarkerVuefyOverride} from './vue';
 
@@ -30,9 +31,6 @@ export type MMapPopupMarkerProps = MMapMarkerProps & {
     onOpen?: () => void;
 };
 
-const defaultProps = Object.freeze({position: 'top', offset: 0, show: true});
-type DefaultProps = typeof defaultProps;
-
 /**
  * `MMapPopupMarker` is a popup with customized content.
  * @example

src/markers/MMapPopupMarker/props.ts

@@ -0,0 +1,2 @@
+export const defaultProps = Object.freeze({position: 'top', offset: 0, show: true});
+export type DefaultProps = typeof defaultProps;

src/markers/MMapPopupMarker/vue/index.ts

@@ -2,17 +2,18 @@ import {MMapFeatureProps, MMapMarkerEventHandler} from '@mappable-world/mappable
 import {CustomVuefyFn, CustomVuefyOptions} from '@mappable-world/mappable-types/modules/vuefy';
 import type TVue from '@vue/runtime-core';
 import {MMapPopupContentProps, MMapPopupMarker, MMapPopupMarkerProps, MMapPopupPositionProps} from '../';
+import {defaultProps} from '../props';
 
 export const MMapPopupMarkerVuefyOptions: CustomVuefyOptions<MMapPopupMarker> = {
     props: {
         coordinates: {type: Object, required: true},
         source: String,
-        zIndex: {type: Number, default: 0},
+        zIndex: {type: Number, default: undefined},
         properties: Object,
         id: String,
         disableRoundCoordinates: {type: Boolean, default: undefined},
-        hideOutsideViewport: {type: [Object, Boolean], default: false},
-        draggable: {type: Boolean, default: false},
+        hideOutsideViewport: {type: [Object, Boolean], default: undefined},
+        draggable: {type: Boolean, default: undefined},
         mapFollowsOnDrag: {type: [Boolean, Object]},
         onDragStart: Function as TVue.PropType<MMapMarkerEventHandler>,
         onDragEnd: Function as TVue.PropType<MMapMarkerEventHandler>,
@@ -23,9 +24,9 @@ export const MMapPopupMarkerVuefyOptions: CustomVuefyOptions<MMapPopupMarker> =
         onClick: Function as TVue.PropType<MMapFeatureProps['onClick']>,
         onFastClick: Function as TVue.PropType<MMapFeatureProps['onFastClick']>,
         content: {type: [Function, String] as TVue.PropType<MMapPopupContentProps>, required: true},
-        position: {type: String as TVue.PropType<MMapPopupPositionProps>},
-        offset: {type: Number, default: 0},
-        show: {type: Boolean, default: true},
+        position: {type: String as TVue.PropType<MMapPopupPositionProps>, default: defaultProps.position},
+        offset: {type: Number, default: defaultProps.offset},
+        show: {type: Boolean, default: defaultProps.show},
         onClose: {type: Function as TVue.PropType<MMapPopupMarkerProps['onClose']>},
         onOpen: {type: Function as TVue.PropType<MMapPopupMarkerProps['onOpen']>}
     }