tg-map-vue3 3.0.9 → 3.1.1

package/dist/src/components/TgMap.vue.d.ts

@@ -1,9 +1,20 @@
 import { LatLng } from '../map/lat-lng';
 import { TgMapType } from '../map/map-factory';
 import type { AbstractMap } from '../map/map/map';
-import { GestureHandlingOptions, type InfoWindowMode } from '../map/map/map-options';
-import { BuildInMapTypeId } from '../map/map/map-type';
+import { GestureHandlingOptions } from '../map/map/map-options';
+import { BuildInMapTypeId, MapType } from '../map/map/map-type';
 import { type StringEnumValue } from '../utils/mapped-types';
+import { type EventEmits } from '../utils/vue-utils';
+type TgMapEmits = {
+    load: AbstractMap;
+    error: any;
+    'update:center': LatLng;
+    'update:current-center': LatLng;
+    'update:zoom': number;
+    'update:map-type': MapType;
+    'update:map-type-id': string;
+    'update:last-center': LatLng;
+};
 declare const _default: import("vue").DefineComponent<{
     /** type没做响应式, 但外部可以把type作为tg-map的key, 让type修改时完全重建tg-map */
     type: {
@@ -50,7 +61,7 @@ declare const _default: import("vue").DefineComponent<{
         required: true;
     };
     infoWindowMode: {
-        type: import("vue").PropType<InfoWindowMode>;
+        type: import("vue").PropType<"single" | "multi">;
     };
     gestureHandling: {
         type: import("vue").PropType<StringEnumValue<typeof GestureHandlingOptions>>;
@@ -71,18 +82,27 @@ declare const _default: import("vue").DefineComponent<{
     mapType: {
         type: import("vue").PropType<any>;
     };
+    onLoad: import("vue").Prop<import("../utils/vue-utils").EventCallback<AbstractMap>, import("../utils/vue-utils").EventCallback<AbstractMap>>;
+    'onUpdate:center': import("vue").Prop<import("../utils/vue-utils").EventCallback<LatLng>, import("../utils/vue-utils").EventCallback<LatLng>>;
+    'onUpdate:current-center': import("vue").Prop<import("../utils/vue-utils").EventCallback<LatLng>, import("../utils/vue-utils").EventCallback<LatLng>>;
+    'onUpdate:last-center': import("vue").Prop<import("../utils/vue-utils").EventCallback<LatLng>, import("../utils/vue-utils").EventCallback<LatLng>>;
+    'onUpdate:map-type': import("vue").Prop<import("../utils/vue-utils").EventCallback<MapType>, import("../utils/vue-utils").EventCallback<MapType>>;
+    'onUpdate:map-type-id': import("vue").Prop<import("../utils/vue-utils").EventCallback<string>, import("../utils/vue-utils").EventCallback<string>>;
+    'onUpdate:zoom': import("vue").Prop<import("../utils/vue-utils").EventCallback<number>, import("../utils/vue-utils").EventCallback<number>>;
+    onError: import("vue").Prop<import("../utils/vue-utils").EventCallback<any>, import("../utils/vue-utils").EventCallback<any>>;
 }, {
-    attrs: {
+    attrs: import("vue").ComputedRef<{
         binds: Record<string, unknown>;
         listeners: Record<string, unknown>;
-    };
+        listenerProps: Record<string, unknown>;
+    }>;
     centerSyncTimeoutId: number;
 }, {
     map: AbstractMap | undefined;
     isDestroyed: boolean;
 }, {
     propsJson(): string;
-}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, EventEmits<TgMapEmits>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     /** type没做响应式, 但外部可以把type作为tg-map的key, 让type修改时完全重建tg-map */
     type: {
         type: import("vue").PropType<StringEnumValue<typeof TgMapType>>;
@@ -128,7 +148,7 @@ declare const _default: import("vue").DefineComponent<{
         required: true;
     };
     infoWindowMode: {
-        type: import("vue").PropType<InfoWindowMode>;
+        type: import("vue").PropType<"single" | "multi">;
     };
     gestureHandling: {
         type: import("vue").PropType<StringEnumValue<typeof GestureHandlingOptions>>;
@@ -149,7 +169,24 @@ declare const _default: import("vue").DefineComponent<{
     mapType: {
         type: import("vue").PropType<any>;
     };
-}>>, {
+    onLoad: import("vue").Prop<import("../utils/vue-utils").EventCallback<AbstractMap>, import("../utils/vue-utils").EventCallback<AbstractMap>>;
+    'onUpdate:center': import("vue").Prop<import("../utils/vue-utils").EventCallback<LatLng>, import("../utils/vue-utils").EventCallback<LatLng>>;
+    'onUpdate:current-center': import("vue").Prop<import("../utils/vue-utils").EventCallback<LatLng>, import("../utils/vue-utils").EventCallback<LatLng>>;
+    'onUpdate:last-center': import("vue").Prop<import("../utils/vue-utils").EventCallback<LatLng>, import("../utils/vue-utils").EventCallback<LatLng>>;
+    'onUpdate:map-type': import("vue").Prop<import("../utils/vue-utils").EventCallback<MapType>, import("../utils/vue-utils").EventCallback<MapType>>;
+    'onUpdate:map-type-id': import("vue").Prop<import("../utils/vue-utils").EventCallback<string>, import("../utils/vue-utils").EventCallback<string>>;
+    'onUpdate:zoom': import("vue").Prop<import("../utils/vue-utils").EventCallback<number>, import("../utils/vue-utils").EventCallback<number>>;
+    onError: import("vue").Prop<import("../utils/vue-utils").EventCallback<any>, import("../utils/vue-utils").EventCallback<any>>;
+}>> & {
+    onLoad?: ((event: AbstractMap) => any) | undefined;
+    onError?: ((event: any) => any) | undefined;
+    "onUpdate:center"?: ((event: LatLng) => any) | undefined;
+    "onUpdate:current-center"?: ((event: LatLng) => any) | undefined;
+    "onUpdate:zoom"?: ((event: number) => any) | undefined;
+    "onUpdate:map-type"?: ((event: MapType) => any) | undefined;
+    "onUpdate:map-type-id"?: ((event: string) => any) | undefined;
+    "onUpdate:last-center"?: ((event: LatLng) => any) | undefined;
+}, {
     type: StringEnumValue<typeof TgMapType>;
     centerSyncDelay: number;
 }>;

package/dist/src/components/layers/TgTrafficLayer.vue.d.ts

@@ -1,13 +1,7 @@
 import { TrafficLayer } from '../../map/map/map-type';
-declare const _default: import("vue").DefineComponent<Readonly<import("vue").ComponentPropsOptions<{
-    [x: string]: unknown;
-}>>, {
+declare const _default: import("vue").DefineComponent<{}, {
     layer: TrafficLayer;
-}, unknown, {}, {}, import("vue").DefineComponent<{}, {}, {}, {}, {
+}, {}, {}, {}, import("vue").DefineComponent<{}, {}, {}, {}, {
     recreate(): void;
-}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, readonly string[] | Readonly<import("vue").ExtractPropTypes<Readonly<import("vue").ComponentObjectPropsOptions<{
-    [x: string]: unknown;
-}>>>>, {
-    [x: number]: string;
-} | {}>;
+}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
 export default _default;

package/dist/src/components/overlays/TgCircle.vue.d.ts

@@ -34,10 +34,11 @@ declare const _default: import("vue").DefineComponent<{
         type: import("vue").PropType<number>;
     };
 }, {
-    attrs: {
+    attrs: import("vue").ComputedRef<{
         binds: Record<string, unknown>;
         listeners: Record<string, unknown>;
-    };
+        listenerProps: Record<string, unknown>;
+    }>;
     overlay: CircleOverlay;
 }, unknown, {}, {}, import("vue").DefineComponent<{}, {}, {}, {}, {
     recreate(): void;

package/dist/src/components/overlays/TgInfoBox.vue.d.ts

@@ -1,7 +1,11 @@
+import { type EventEmits } from '../../utils/vue-utils';
 import { LatLng } from '../../map/lat-lng';
 import { type TgMarkerPublicInstance } from './TgMarker.vue';
 import type { InfoBoxOverlay, InfoBoxOptions } from '../../map/map/overlay/info-box';
 import type { MarkerOverlay } from '../../map/map/overlay/marker';
+type TgInfoBoxEmits = {
+    'update:show': boolean;
+};
 declare const TgInfoBox: import("vue").DefineComponent<{
     show: {
         type: import("vue").PropType<boolean>;
@@ -22,11 +26,13 @@ declare const TgInfoBox: import("vue").DefineComponent<{
     zIndex: {
         type: import("vue").PropType<number>;
     };
+    'onUpdate:show': import("vue").Prop<import("../../utils/vue-utils").EventCallback<boolean>, import("../../utils/vue-utils").EventCallback<boolean>>;
 }, {
-    attrs: {
+    attrs: import("vue").ComputedRef<{
         binds: Record<string, unknown>;
         listeners: Record<string, unknown>;
-    };
+        listenerProps: Record<string, unknown>;
+    }>;
     overlay: InfoBoxOverlay;
 }, unknown, {}, {
     getOptions(): InfoBoxOptions;
@@ -36,7 +42,7 @@ declare const TgInfoBox: import("vue").DefineComponent<{
     close(): void;
 }, import("vue").DefineComponent<{}, {}, {}, {}, {
     recreate(): void;
-}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>, import("vue").ComponentOptionsMixin, EventEmits<TgInfoBoxEmits>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     show: {
         type: import("vue").PropType<boolean>;
         required: true;
@@ -56,6 +62,9 @@ declare const TgInfoBox: import("vue").DefineComponent<{
     zIndex: {
         type: import("vue").PropType<number>;
     };
-}>>, {}>;
+    'onUpdate:show': import("vue").Prop<import("../../utils/vue-utils").EventCallback<boolean>, import("../../utils/vue-utils").EventCallback<boolean>>;
+}>> & {
+    "onUpdate:show"?: ((event: boolean) => any) | undefined;
+}, {}>;
 type TgInfoBox = InstanceType<typeof TgInfoBox>;
 export default TgInfoBox;

package/dist/src/components/overlays/TgInfoWindow.vue.d.ts

@@ -19,10 +19,11 @@ declare const TgInfoWindow: import("vue").DefineComponent<{
         type: import("vue").PropType<boolean>;
     };
 }, {
-    attrs: {
+    attrs: import("vue").ComputedRef<{
         binds: Record<string, unknown>;
         listeners: Record<string, unknown>;
-    };
+        listenerProps: Record<string, unknown>;
+    }>;
     overlay: InfoWindowOverlay;
 }, unknown, {}, {
     content(): HTMLElement;

package/dist/src/components/overlays/TgLabel.vue.d.ts

@@ -13,10 +13,11 @@ declare const TgLabel: import("vue").DefineComponent<{
         type: import("vue").PropType<number>;
     };
 }, {
-    attrs: {
+    attrs: import("vue").ComputedRef<{
         binds: Record<string, unknown>;
         listeners: Record<string, unknown>;
-    };
+        listenerProps: Record<string, unknown>;
+    }>;
     overlay: LabelOverlay;
 }, unknown, {}, {
     content(): HTMLElement;

package/dist/src/components/overlays/TgMarker.vue.d.ts

@@ -34,10 +34,11 @@ declare const TgMarker: import("vue").DefineComponent<{
         type: import("vue").PropType<boolean>;
     };
 }, {
-    attrs: {
+    attrs: import("vue").ComputedRef<{
         binds: Record<string, unknown>;
         listeners: Record<string, unknown>;
-    };
+        listenerProps: Record<string, unknown>;
+    }>;
     marker: MarkerOverlay;
     label: ({
         $: import("vue").ComponentInternalInstance;
@@ -77,10 +78,11 @@ declare const TgMarker: import("vue").DefineComponent<{
                 type: import("vue").PropType<number>;
             };
         }>>, {
-            attrs: {
+            attrs: import("vue").ComputedRef<{
                 binds: Record<string, unknown>;
                 listeners: Record<string, unknown>;
-            };
+                listenerProps: Record<string, unknown>;
+            }>;
             overlay: import("../../map/map/overlay/label").LabelOverlay;
         }, unknown, {}, {
             content(): HTMLElement;
@@ -120,10 +122,11 @@ declare const TgMarker: import("vue").DefineComponent<{
             type: import("vue").PropType<number>;
         };
     }>> & import("vue").ShallowUnwrapRef<{
-        attrs: {
+        attrs: import("vue").ComputedRef<{
             binds: Record<string, unknown>;
             listeners: Record<string, unknown>;
-        };
+            listenerProps: Record<string, unknown>;
+        }>;
         overlay: import("../../map/map/overlay/label").LabelOverlay;
     }> & {} & {
         recreate(): void;

package/dist/src/components/overlays/TgPolygon.vue.d.ts

@@ -31,10 +31,11 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<number>;
     };
 }, {
-    attrs: {
+    attrs: import("vue").ComputedRef<{
         binds: Record<string, unknown>;
         listeners: Record<string, unknown>;
-    };
+        listenerProps: Record<string, unknown>;
+    }>;
     polygon: PolygonOverlay;
 }, unknown, {}, {}, import("vue").DefineComponent<{}, {}, {}, {}, {
     recreate(): void;

package/dist/src/components/overlays/TgPolyline.vue.d.ts

@@ -25,10 +25,11 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<boolean>;
     };
 }, {
-    attrs: {
+    attrs: import("vue").ComputedRef<{
         binds: Record<string, unknown>;
         listeners: Record<string, unknown>;
-    };
+        listenerProps: Record<string, unknown>;
+    }>;
     polyline: PolylineOverlay;
 }, unknown, {}, {}, import("vue").DefineComponent<{}, {}, {}, {}, {
     recreate(): void;

package/dist/src/map/map/map-options.d.ts

@@ -1,7 +1,8 @@
 /// <reference types="googlemaps" />
 import { LatLng } from '../lat-lng';
 import type { BuildInMapTypeId } from './map-type';
-export type InfoWindowMode = 'single' | 'multi';
+export declare const InfoWindowModeValues: readonly ["single", "multi"];
+export type InfoWindowMode = typeof InfoWindowModeValues[number];
 /**
  * 完全模仿google的模式, 合并如下配置:
  * - draggable

package/dist/src/utils/strings.d.ts

@@ -7,4 +7,6 @@ export declare namespace Strings {
     */
     function toEnumOrNull<E extends StringEnumLike>(value: string | undefined, enumObject: E): E[keyof E] | undefined;
     function trimIndent(str: string): string;
+    /** 转换: `FuckYou` -> `fuck-you` */
+    function pascal2kebab(str: string): string;
 }

package/dist/src/utils/vue-utils.d.ts

@@ -1,4 +1,4 @@
-import type { Component, ComponentOptions, ComponentPublicInstance, Prop, PropType, RendererElement, RendererNode, Slots, VNode, WritableComputedOptions } from 'vue';
+import { type Component, type ComponentOptions, type ComponentPublicInstance, type Prop, type PropType, type RendererElement, type RendererNode, type Slots, type VNode, type WritableComputedOptions } from 'vue';
 import type { AbstractConstructor, KeysMatching, StringEnumLike, StringEnumValue, Thing } from './mapped-types';
 /** 组件选项中的hook名 */
 export type VueHookName = ExcludeSubtype<KeysMatching<OmitStartsWith<RemoveIndex<ComponentOptions>, '_'>, {
@@ -45,12 +45,12 @@ export declare function stringEnumProp<E extends StringEnumLike>(enumObject: E,
 export declare function stringEnumProp<E extends StringEnumLike>(enumObject: E): {
     type: PropType<StringEnumValue<E>>;
 };
-export declare function stringEnumPropFromArray<T extends string>(enums: T[], defaultValue: T): {
-    type: PropType<T>;
+export declare function stringUnionPropFromValues<T extends string>(values: readonly T[], defaultValue: T): {
+    type: PropType<T[][number]>;
     default: T;
 };
-export declare function stringEnumPropFromArray<T extends string>(enums: T[]): {
-    type: PropType<T>;
+export declare function stringUnionPropFromValues<T extends string>(values: readonly T[]): {
+    type: PropType<T[][number]>;
 };
 export declare function requiredProp<T>(type: PropType<T>): {
     type: PropType<T>;
@@ -99,7 +99,10 @@ export declare function createEmptyVNode(): VNode;
  * @see https://github.com/vuejs/vue/blob/43b98fe25151b0b6bacd36f3ee27c5d61add5fdb/packages/weex-vue-framework/factory.js/#L2906
  * */
 export declare function callHook(vm: ComponentPublicInstance, hookName: VueHookName): void;
-/** {@link import('./mapped-types.ts').safeAsComponent} */
+/**
+ * {@link import('./mapped-types.ts').safeAsComponent}
+ * @deprecated Vue3已经不能遍历子组件的实例了, 所以这个方法目前没用
+ */
 export declare function findByComponentType<T extends Component & AbstractConstructor>(arr: ComponentPublicInstance[], component: T): InstanceType<T> | undefined;
 /**
  * 通过构造slots内容的方式, 提取出slots中对应{@link component}的VNode, {@link VNode.props}就是当前给组件设置的属性值
@@ -110,20 +113,69 @@ export declare function findByComponentType<T extends Component & AbstractConstr
  */
 export declare function extractVNodeFromSlotsByComponent<Props>(slots: Slots, component: ComponentOptions<Props>): VNode<RendererNode, RendererElement, Props> | undefined;
 /**
- * Vue3中 class/style/未声明的事件/未声明的属性 都会集合到{@link SetupContext.attrs}中
- * 默认情况下({@link ComponentOptions.inheritAttrs}为true), 将被透传给组件的根节点
+ * Vue3中 class/style/未声明的事件/未声明的属性 都会集合到`this.$attrs`中
+ * 默认情况下(`inheritAttrs`为true), 将被透传给组件的根节点
+ *
+ * 而Vue2, `this.$attrs`值包含 未声明的属性, 所有事件放到了`this.$listeners`中
+ *
+ * 这里模仿Vue2的行为, 从{@link attrs}中拆分出未声明的事件, 方便将他们透传给地图的对象
+ * 同时若传入{@link props}, 也会从它里面拆分出 声明的事件类型的属性
+ *
+ * ## 如何给事件添加类型信息
  *
- * 而Vue2, 默认只会透传 未声明的属性, 事件通过`$listeners`暴露
+ * - 声明在`emits`中的事件, 会给emit方法添加类型信息, 但没办法在运行时判断是否有被设置
+ * - 声明在`props`中的事件, 不会.................. , 但可以通过读取`this.$props`判断是否被设置
  *
- * 这里模仿Vue2的行为, 拆分出未声明的事件, 方便将他们透传给地图的对象
+ * 所有我们最终选择用{@link EventProps}在`props`中声明事件, 同时用{@link EventEmits}在`emits`上声明事件的类型,
+ * 达到既有类型信息, 又能判断是否存在的效果, 写法如下:
+ * ```
+ * {
+ *   props: {...} satisfies EventProps<TgMapEmits>,
+ *   emits: undefined as any as EventEmits<TgMapEmits>,
+ * }
+ * ```
  *
- * @see https://cn.vuejs.org/guide/components/attrs.html#disabling-attribute-inheritance
- * @see https://v3-migration.vuejs.org/zh/breaking-changes/listeners-removed.html
+ * ## 参考
+ * - https://cn.vuejs.org/guide/components/attrs.html#disabling-attribute-inheritance
+ * - https://v3-migration.vuejs.org/zh/breaking-changes/listeners-removed.html
+ * - https://eslint.vuejs.org/rules/require-explicit-emits.html#options
  */
-export declare function splitAttrs(attrs: Record<string, unknown>): {
+export declare function splitAttrs(attrs: Record<string, unknown>, props?: Record<string, unknown>): {
+    /** class/style/未声明的属性 等 */
     binds: Record<string, unknown>;
+    /** 未声明的事件 */
     listeners: Record<string, unknown>;
+    /** 声明在`props`中的事件 */
+    listenerProps: Record<string, unknown>;
+};
+/** 响应式的{@link splitAttrs} */
+export declare function useSplittedAttrs(attrs: Record<string, unknown>, props?: Record<string, unknown>): import("vue").ComputedRef<{
+    /** class/style/未声明的属性 等 */
+    binds: Record<string, unknown>;
+    /** 未声明的事件 */
+    listeners: Record<string, unknown>;
+    /** 声明在`props`中的事件 */
+    listenerProps: Record<string, unknown>;
+}>;
+export type EventCallback<E = any> = (event: E) => void;
+/**
+ * 事件类型的属性
+ * @see splitAttrs
+ * */
+export type EventProps<Emits> = Emits extends string ? {
+    [K in Emits as `on${Capitalize<K>}`]: Prop<Function>;
+} : {
+    [K in keyof Emits as K extends string ? `on${Capitalize<K>}` : never]: Prop<EventCallback<Emits[K]>>;
+};
+/**
+ * 用来声明事件的类型信息
+ * @see splitAttrs
+ *  */
+export type EventEmits<T> = {
+    [K in keyof T]: (event: T[K]) => boolean;
 };
+/** 给事件类型的属性标注类型 */
+export declare function eventProp<E = any>(): Prop<EventCallback<E>>;
 export declare const eventLogMethods: {
     /**
      * @event 一般来说传{@link Tg.Event}对象, 但传其他对象也不会报错