@jctrans-materials/comps-vue2 1.0.37-beta.2 → 1.0.37-beta.20

package/README.md

@@ -0,0 +1,159 @@
+# Vue2 组件说明（jc-utils）
+
+## 组件清单
+
+当前 `packages/vue2` 对外导出的核心组件如下：
+
+- `ApplyDataDialog`
+- `GlobalModal`
+- `JcSearch`
+- `JcVerifySlide`
+- `JcCarrierSearch`
+- `AirCarrierSearch`
+- `SeaCarrierSearch`
+- `AirLineSearch`
+- `SeaLineSearch`
+
+## 快速使用
+
+```ts
+import Vue from "vue";
+import JCtransComps from "@jctrans-materials/comps-vue2";
+import "@jctrans-materials/comps-vue2/style.css";
+
+Vue.use(JCtransComps);
+```
+
+如果你在 Vue 2.6 环境下使用，请额外安装并注册 `@vue/composition-api`；Vue 2.7 及以上版本不需要这一步。
+
+## 组件能力速览
+
+### 1) `JcSearch`
+
+- 用途：国家/城市/港口/机场等通用地点搜索
+- 常用 Props：`value` / `modelValue`、`multiple`、`searchTypeList`、`historyKey`
+- 常用事件：`select`、`change`、`input`、`update:modelValue`
+
+### 2) `JcVerifySlide`
+
+- 用途：滑块验证码验证
+- 常用 Props：`visible`、`lang`、`mode`、`imgSize`、`barSize`
+- 常用事件：`success`、`update:visible`
+
+### 3) `JcCarrierSearch` 及包装组件
+
+- 用途：承运人/航线搜索（海运、空运）
+- 常用 Props：`value` / `modelValue`、`type`、`lineType`、`multiple`、`showApplyData`
+- 常用事件：
+  - 业务：`change`、`apply`
+  - 输入框：`focus`、`blur`、`remove-tag`
+
+包装组件：
+
+- `AirCarrierSearch`（航空公司）
+- `SeaCarrierSearch`（船公司）
+- `AirLineSearch`（空运航线）
+- `SeaLineSearch`（海运航线）
+
+### 4) `ApplyDataDialog`
+
+- 用途：申请补充数据弹窗
+- 常用 Props：`value`
+- 常用事件：`confirm`、`input` / `update:value`
+
+### 5) `GlobalModal`
+
+- 用途：全局业务弹窗容器（配合插件/事件总线）
+
+## Playground 示例
+
+可在以下页面查看 Vue2 组件演示：
+
+- `playground/v2play/src/App.vue`
+  - `Base Demo`：`JcSearch` + `ApplyDataDialog` + `GlobalModal`
+  - `Carrier Search Demo`：`JcCarrierSearch` 系列
+  - `Verify Slide Demo`：`JcVerifySlide`
+
+## GIO 埋点接入（Vue2）
+
+### 1) 按需启用（不传配置即不启用）
+
+```ts
+import Vue from "vue";
+import JCtransComps from "@jctrans-materials/comps-vue2";
+
+Vue.use(JCtransComps, {
+  tracking: {
+    enabled: true,
+    autoInit: true,
+    directiveName: "gio-track",
+    accountId: process.env.VUE_APP_GIO_ACCOUNT_ID,
+    dataSourceId: process.env.VUE_APP_GIO_DATA_SOURCE_ID,
+    appId: process.env.VUE_APP_GIO_APP_ID,
+    initOptions: {
+      debug: process.env.NODE_ENV !== "production",
+      trackPage: false,
+      serverUrl: process.env.VUE_APP_GIO_SERVER_URL,
+    },
+  },
+});
+```
+
+如果不传 `tracking`，则不会初始化 GIO。
+
+### 2) 指令与 API 用法
+
+```vue
+<button v-gio-track="'order_submit'">提交订单</button>
+
+<button
+  v-gio-track="{
+    event: 'order_submit',
+    attrs: { source: 'cart' },
+    onTracked: ({ eventName }) => console.log(eventName),
+  }"
+>
+  提交并回调
+</button>
+```
+
+```ts
+this.$trackEvent("manual_track", { source: "manual" });
+this.$gio.track("direct_track", { source: "direct" }, () => {
+  console.log("done");
+});
+```
+
+### 3) 配置优先级
+
+1. `window.__JCTRANS_GIO_CONFIG__`（或 `globalVarName` 指定对象）
+2. `tracking` 传入配置
+3. `import.meta.env.VITE_GIO_*`
+
+### 4) GIO 单测（Vue2）
+
+测试文件：`src/gio.test.ts`
+
+覆盖点：
+
+- 初始化分支：
+  - 有 `appId`（4 参数 `init`）
+  - 无 `appId`（3 参数 `init`）
+  - 缺少必填配置时不初始化
+- 指令行为：`bind` / `update` / `unbind` 的绑定、重绑、清理
+- 回调行为：`onTracked` 在 `track` 回调后触发
+- 暴露能力：`$trackEvent` 与 `$gio` 常用 API
+
+结合 GrowingIO WebJS 常用 API 文档（含 `trackTimerStart`）对齐了以下接口可用性：
+
+- `setUserId`
+- `clearUserId`
+- `setVisitor`
+- `trackTimerStart`
+- `trackTimerEnd`
+
+运行方式：
+
+```bash
+pnpm -C packages/vue2 test:run
+```

package/dist/components/JcCarrierSearch/AirCarrierSearch.d.ts

@@ -1,4 +1,4 @@
-declare const _default: import('vue').DefineComponent<{
+declare const _default: import('../../../vue-demi').DefineComponent<{
     value: {
         type: (StringConstructor | NumberConstructor)[];
         default: string;
@@ -20,12 +20,12 @@ declare const _default: import('vue').DefineComponent<{
         default: boolean;
     };
 }, {
-    carrierId: import('vue').WritableComputedRef<string | number>;
-    currentPlaceholder: import('vue').ComputedRef<string>;
+    carrierId: import('../../../vue-demi').WritableComputedRef<string | number>;
+    currentPlaceholder: import('../../../vue-demi').ComputedRef<string>;
     onCarrierChange: (value: string | number) => void;
     lang: string;
     showApplyData: boolean;
-}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, ("input" | "update:modelValue" | "update:value" | "change" | "apply")[], string, Readonly<import('vue').ExtractPropTypes<{
+}, {}, {}, {}, import('../../../vue-demi').ComponentOptionsMixin, import('../../../vue-demi').ComponentOptionsMixin, ("input" | "update:modelValue" | "update:value" | "change" | "apply" | "focus" | "blur" | "remove-tag")[], string, Readonly<import('../../../vue-demi').ExtractPropTypes<{
     value: {
         type: (StringConstructor | NumberConstructor)[];
         default: string;

package/dist/components/JcCarrierSearch/AirLineSearch.d.ts

@@ -1,4 +1,4 @@
-declare const _default: import('vue').DefineComponent<{
+declare const _default: import('../../../vue-demi').DefineComponent<{
     value: {
         type: (StringConstructor | NumberConstructor)[];
         default: string;
@@ -20,12 +20,12 @@ declare const _default: import('vue').DefineComponent<{
         default: boolean;
     };
 }, {
-    carrierId: import('vue').WritableComputedRef<string | number>;
-    currentPlaceholder: import('vue').ComputedRef<string>;
+    carrierId: import('../../../vue-demi').WritableComputedRef<string | number>;
+    currentPlaceholder: import('../../../vue-demi').ComputedRef<string>;
     onCarrierChange: (value: string | number) => void;
     lang: string;
     showApplyData: boolean;
-}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, ("input" | "update:modelValue" | "update:value" | "change" | "apply")[], string, Readonly<import('vue').ExtractPropTypes<{
+}, {}, {}, {}, import('../../../vue-demi').ComponentOptionsMixin, import('../../../vue-demi').ComponentOptionsMixin, ("input" | "update:modelValue" | "update:value" | "change" | "apply" | "focus" | "blur" | "remove-tag")[], string, Readonly<import('../../../vue-demi').ExtractPropTypes<{
     value: {
         type: (StringConstructor | NumberConstructor)[];
         default: string;

package/dist/components/JcCarrierSearch/SeaCarrierSearch.d.ts

@@ -1,4 +1,4 @@
-declare const _default: import('vue').DefineComponent<{
+declare const _default: import('../../../vue-demi').DefineComponent<{
     value: {
         type: (StringConstructor | NumberConstructor)[];
         default: string;
@@ -20,12 +20,12 @@ declare const _default: import('vue').DefineComponent<{
         default: boolean;
     };
 }, {
-    carrierId: import('vue').WritableComputedRef<string | number>;
-    currentPlaceholder: import('vue').ComputedRef<string>;
+    carrierId: import('../../../vue-demi').WritableComputedRef<string | number>;
+    currentPlaceholder: import('../../../vue-demi').ComputedRef<string>;
     onCarrierChange: (value: string | number) => void;
     lang: string;
     showApplyData: boolean;
-}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, ("input" | "update:modelValue" | "update:value" | "change" | "apply")[], string, Readonly<import('vue').ExtractPropTypes<{
+}, {}, {}, {}, import('../../../vue-demi').ComponentOptionsMixin, import('../../../vue-demi').ComponentOptionsMixin, ("input" | "update:modelValue" | "update:value" | "change" | "apply" | "focus" | "blur" | "remove-tag")[], string, Readonly<import('../../../vue-demi').ExtractPropTypes<{
     value: {
         type: (StringConstructor | NumberConstructor)[];
         default: string;

package/dist/components/JcCarrierSearch/SeaLineSearch.d.ts

@@ -1,4 +1,4 @@
-declare const _default: import('vue').DefineComponent<{
+declare const _default: import('../../../vue-demi').DefineComponent<{
     value: {
         type: (StringConstructor | NumberConstructor)[];
         default: string;
@@ -20,12 +20,12 @@ declare const _default: import('vue').DefineComponent<{
         default: boolean;
     };
 }, {
-    carrierId: import('vue').WritableComputedRef<string | number>;
-    currentPlaceholder: import('vue').ComputedRef<string>;
+    carrierId: import('../../../vue-demi').WritableComputedRef<string | number>;
+    currentPlaceholder: import('../../../vue-demi').ComputedRef<string>;
     onCarrierChange: (value: string | number) => void;
     lang: string;
     showApplyData: boolean;
-}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, ("input" | "update:modelValue" | "update:value" | "change" | "apply")[], string, Readonly<import('vue').ExtractPropTypes<{
+}, {}, {}, {}, import('../../../vue-demi').ComponentOptionsMixin, import('../../../vue-demi').ComponentOptionsMixin, ("input" | "update:modelValue" | "update:value" | "change" | "apply" | "focus" | "blur" | "remove-tag")[], string, Readonly<import('../../../vue-demi').ExtractPropTypes<{
     value: {
         type: (StringConstructor | NumberConstructor)[];
         default: string;

package/dist/components/JcCarrierSearch/index.d.ts

@@ -1,6 +1,6 @@
 import { LocationUnifiedItem, LocationType } from '@jctrans-materials/shared';
 
-declare const _default: import('vue').DefineComponent<{
+declare const _default: import('../../../vue-demi').DefineComponent<{
     value: {
         type: (StringConstructor | NumberConstructor | ArrayConstructor)[];
         default: undefined;
@@ -38,10 +38,10 @@ declare const _default: import('vue').DefineComponent<{
         default: () => never[];
     };
 }, {
-    selectRef: import('vue').Ref<any>;
-    innerValue: import('vue').WritableComputedRef<string | number | unknown[]>;
-    loading: import('vue').Ref<boolean>;
-    options: import('vue').Ref<{
+    selectRef: import('../../../vue-demi').Ref<any>;
+    innerValue: import('../../../vue-demi').WritableComputedRef<string | number | unknown[]>;
+    loading: import('../../../vue-demi').Ref<boolean>;
+    options: import('../../../vue-demi').Ref<{
         id: number | string;
         type: LocationType;
         nameCn?: string | undefined;
@@ -60,18 +60,19 @@ declare const _default: import('vue').DefineComponent<{
         province?: Record<string, any> | undefined;
         raw?: any;
     }[]>;
-    currentPlaceholder: import('vue').ComputedRef<string>;
-    isEn: import('vue').ComputedRef<boolean>;
+    currentPlaceholder: import('../../../vue-demi').ComputedRef<string>;
+    isEn: import('../../../vue-demi').ComputedRef<boolean>;
     onRemoteMethod: (query: string) => void;
     handleVisibleChange: (visible: boolean) => void;
     handleClear: () => void;
     handleChange: (val: any) => void;
     handleApply: () => void;
+    handleRemoveTag: (tag: any) => void;
     ICON_MORE: string;
     showApplyData: boolean;
     normalizeOptionValue: (id: any) => any;
     multiple: boolean;
-}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, ("input" | "update:modelValue" | "update:value" | "change" | "apply")[], string, Readonly<import('vue').ExtractPropTypes<{
+}, {}, {}, {}, import('../../../vue-demi').ComponentOptionsMixin, import('../../../vue-demi').ComponentOptionsMixin, ("input" | "update:modelValue" | "update:value" | "change" | "apply" | "focus" | "blur" | "remove-tag")[], string, Readonly<import('../../../vue-demi').ExtractPropTypes<{
     value: {
         type: (StringConstructor | NumberConstructor | ArrayConstructor)[];
         default: undefined;

package/dist/components/JcSearch/hooks/useSearchHistory.d.ts

@@ -1,4 +1,4 @@
-import { Ref } from 'vue';
+import { Ref } from 'vue-demi';
 import { SearchItem } from '../type';
 
 export declare function useSearchHistory(historyKey: Ref<string | undefined | any>): {
@@ -15,5 +15,5 @@ export declare function useSearchHistory(historyKey: Ref<string | undefined | an
     }[]>;
     saveToHistory: (item: SearchItem) => void;
     clearHistory: () => void;
-    HasHistory: import('vue').ComputedRef<boolean>;
+    HasHistory: import('../../../../vue-demi').ComputedRef<boolean>;
 };

package/dist/components/JcSearch/hooks/useSearchLogic.d.ts

@@ -1,4 +1,4 @@
-import { Ref } from 'vue';
+import { Ref } from 'vue-demi';
 import { SearchItem } from '../type';
 
 export declare function useSearchLogic(query: Ref<string>, searchTypeList: Ref<string[]>): {
@@ -15,7 +15,7 @@ export declare function useSearchLogic(query: Ref<string>, searchTypeList: Ref<s
     }[]>;
     loading: Ref<boolean>;
     isFetchingMore: Ref<boolean>;
-    isFinished: import('vue').ComputedRef<boolean>;
+    isFinished: import('../../../../vue-demi').ComputedRef<boolean>;
     currentPage: Ref<number>;
     total: Ref<number>;
     fetchData: (page?: number, appendMode?: boolean) => Promise<void>;

package/dist/components/JcSearch/hooks/useSelectBehavior.d.ts

@@ -1,4 +1,4 @@
-import { Ref } from 'vue';
+import { Ref } from 'vue-demi';
 
 export declare function useSelectBehavior(multiple: boolean, inputRef: Ref<HTMLInputElement | null>, query: Ref<string>): {
     isDropdownVisible: Ref<boolean>;

package/dist/components/JcSearch/index.d.ts

@@ -1,4 +1,4 @@
-declare const _default: import('vue').DefineComponent<{
+declare const _default: import('../../../vue-demi').DefineComponent<{
     value: {
         type: (ArrayConstructor | ObjectConstructor)[];
         default: null;
@@ -44,16 +44,16 @@ declare const _default: import('vue').DefineComponent<{
         default: boolean;
     };
 }, {
-    query: import('vue').Ref<string>;
-    isSelected: import('vue').Ref<boolean>;
-    isDropdownVisible: import('vue').Ref<boolean>;
-    applyDataVisible: import('vue').Ref<boolean>;
-    selectedLabel: import('vue').Ref<string>;
-    inputRef: import('vue').Ref<null>;
-    referenceRef: import('vue').Ref<null>;
-    floatingRef: import('vue').Ref<null>;
-    hasContentToShow: import('vue').ComputedRef<string | boolean>;
-    searchHistory: import('vue').Ref<{
+    query: import('../../../vue-demi').Ref<string>;
+    isSelected: import('../../../vue-demi').Ref<boolean>;
+    isDropdownVisible: import('../../../vue-demi').Ref<boolean>;
+    applyDataVisible: import('../../../vue-demi').Ref<boolean>;
+    selectedLabel: import('../../../vue-demi').Ref<string>;
+    inputRef: import('../../../vue-demi').Ref<null>;
+    referenceRef: import('../../../vue-demi').Ref<null>;
+    floatingRef: import('../../../vue-demi').Ref<null>;
+    hasContentToShow: import('../../../vue-demi').ComputedRef<string | boolean>;
+    searchHistory: import('../../../vue-demi').Ref<{
         [x: string]: any;
         id?: string | number | undefined;
         type: string;
@@ -64,7 +64,7 @@ declare const _default: import('vue').DefineComponent<{
         nameEn?: string | undefined;
         nameCn?: string | undefined;
     }[]>;
-    searchResults: import('vue').Ref<{
+    searchResults: import('../../../vue-demi').Ref<{
         [x: string]: any;
         id?: string | number | undefined;
         type: string;
@@ -75,11 +75,11 @@ declare const _default: import('vue').DefineComponent<{
         nameEn?: string | undefined;
         nameCn?: string | undefined;
     }[]>;
-    loading: import('vue').Ref<boolean>;
-    isFetchingMore: import('vue').Ref<boolean>;
-    isFinished: import('vue').ComputedRef<boolean>;
-    currentPage: import('vue').Ref<number>;
-    floatingStyles: import('vue').Ref<import('vue').CSSProperties>;
+    loading: import('../../../vue-demi').Ref<boolean>;
+    isFetchingMore: import('../../../vue-demi').Ref<boolean>;
+    isFinished: import('../../../vue-demi').ComputedRef<boolean>;
+    currentPage: import('../../../vue-demi').Ref<number>;
+    floatingStyles: import('../../../vue-demi').Ref<import('../../../vue-demi').CSSProperties>;
     saveToHistory: (item: import('./type').SearchItem) => void;
     clearHistory: () => void;
     fetchData: (page?: number, appendMode?: boolean) => Promise<void>;
@@ -113,7 +113,7 @@ declare const _default: import('vue').DefineComponent<{
     handleSearch(): void;
     getIconUrl(type: string): any;
     handleScroll(e: any): void;
-}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, Readonly<import('vue').ExtractPropTypes<{
+}, import('../../../vue-demi').ComponentOptionsMixin, import('../../../vue-demi').ComponentOptionsMixin, {}, string, Readonly<import('../../../vue-demi').ExtractPropTypes<{
     value: {
         type: (ArrayConstructor | ObjectConstructor)[];
         default: null;

package/dist/gio.d.ts

@@ -0,0 +1,60 @@
+import { VueConstructor } from '../vue-demi';
+
+export type TrackAttrs = Record<string, string | number | Array<string | number>>;
+export type TrackDirectiveValue = string | {
+    event?: string;
+    name?: string;
+    attrs?: TrackAttrs;
+    attributes?: TrackAttrs;
+    trigger?: string;
+    once?: boolean;
+    stop?: boolean;
+    prevent?: boolean;
+    callback?: (payload: {
+        event: Event;
+        eventName: string;
+        attrs: TrackAttrs;
+        trigger: string;
+    }) => void;
+    onTracked?: (payload: {
+        event: Event;
+        eventName: string;
+        attrs: TrackAttrs;
+        trigger: string;
+    }) => void;
+};
+export type TrackConfig = {
+    enabled?: boolean;
+    autoInit?: boolean;
+    directiveName?: string;
+    globalVarName?: string;
+    accountId?: string;
+    dataSourceId?: string;
+    appId?: string;
+    serverUrl?: string;
+    initOptions?: {
+        debug?: boolean;
+        trackPage?: boolean;
+        forceLogin?: boolean;
+        idMapping?: boolean;
+        hashtag?: boolean;
+        serverUrl?: string;
+    };
+};
+export type GioPublicApi = {
+    isInitialized: () => boolean;
+    isBrowser: () => boolean;
+    init: (...args: any[]) => void;
+    track: (eventName: string, attrs?: TrackAttrs, callback?: () => void) => void;
+    setUserId: (userId: string) => void;
+    clearUserId: () => void;
+    setVisitor: (visitor: Record<string, any>) => void;
+    setGeneralProps: (props: Record<string, any>) => void;
+    setPageAttributes: (props: Record<string, any>) => void;
+    sendPage: () => void;
+    trackTimerStart: (eventName: string) => void;
+    trackTimerEnd: (eventName: string, attrs?: TrackAttrs) => void;
+};
+export declare function createGioTrackingPlugin(rawConfig?: TrackConfig): {
+    install(Vue: VueConstructor): void;
+};

package/dist/gio.test.d.ts

@@ -0,0 +1,2 @@
+/** 🤡 Powered by My Super Rules */
+export {};

package/dist/hooks/useLang.d.ts

@@ -1,3 +1,3 @@
 export declare function useLang(lang?: string): {
-    isEn: import('vue').ComputedRef<boolean>;
+    isEn: import('../../vue-demi').ComputedRef<boolean>;
 };