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

package/README.md

@@ -0,0 +1,172 @@
+# Vue3 组件说明（jc-utils）
+
+## 组件清单
+
+当前 `packages/vue3` 对外导出的核心组件如下：
+
+- `ApplyDataDialog`
+- `GlobalModal`
+- `JcSearch`
+- `JcMSearch`
+- `JcVerifySlide`
+- `JcCarrierSearch`
+- `AirCarrierSearch`
+- `SeaCarrierSearch`
+- `AirLineSearch`
+- `SeaLineSearch`
+- `LineCascader`
+- `ChineseCompanySearch`
+- `JcLoginDialog`
+- `CodeInput`
+- `GoogleInput`
+- `JcFloatInput`
+- `JcFloatWrapper`
+
+## 快速使用
+
+```ts
+import { createApp } from "vue";
+import App from "./App.vue";
+import JCtransComps from "@jctrans-materials/comps-vue3";
+import "@jctrans-materials/comps-vue3/index.css";
+
+const app = createApp(App);
+app.use(JCtransComps);
+app.mount("#app");
+```
+
+## 组件能力速览
+
+### 搜索类
+
+- `JcSearch`：通用地点搜索（国家/城市/港口/机场）
+- `JcMSearch`：移动端/轻量交互搜索
+- `JcCarrierSearch` 及 `Air/Sea Carrier/Line`：承运人与航线搜索
+- `LineCascader`：航线-国家级联选择
+- `ChineseCompanySearch`：中国公司名称联想搜索
+
+### 验证与登录类
+
+- `JcVerifySlide`：滑块验证码
+- `JcLoginDialog`：登录/注册弹窗
+- `CodeInput` / `GoogleInput`：验证码输入
+
+### 输入与弹窗基础类
+
+- `JcFloatInput` / `JcFloatWrapper`：浮动标签输入容器
+- `ApplyDataDialog`：补充数据申请
+- `GlobalModal`：全局弹窗容器
+
+## 重点事件补充
+
+`JcCarrierSearch` 现已透出输入框事件：
+
+- `focus`
+- `blur`
+- `remove-tag`
+
+便于在业务侧跟踪输入焦点、标签移除行为。
+
+## Playground 示例
+
+可在以下页面查看 Vue3 组件演示：
+
+- `playground/v3play/src/App.vue`
+  - `Base Demo`：`JcSearch` + `ApplyDataDialog`
+  - `Carrier/Line Demo`：`JcCarrierSearch` + `LineCascader`
+  - `MSearch Demo`：`JcMSearch`
+  - `Login Dialog Demo`：`JcLoginDialog`
+  - `Company Search Demo`：`ChineseCompanySearch`
+  - `Verify Slide Demo`：`JcVerifySlide`
+
+`JcSearch` 的详细参数说明可参考：
+
+- `packages/vue3/src/components/JcSearch/README.md`
+
+## GIO 埋点接入（Vue3）
+
+### 1) 按需启用（不传配置即不启用）
+
+```ts
+import { createApp } from "vue";
+import App from "./App.vue";
+import JCtransComps from "@jctrans-materials/comps-vue3";
+
+const app = createApp(App);
+
+app.use(JCtransComps, {
+  tracking: {
+    enabled: true,
+    autoInit: true,
+    directiveName: "gio-track",
+    accountId: import.meta.env.VITE_GIO_ACCOUNT_ID,
+    dataSourceId: import.meta.env.VITE_GIO_DATA_SOURCE_ID,
+    appId: import.meta.env.VITE_GIO_APP_ID,
+    initOptions: {
+      debug: import.meta.env.DEV,
+      trackPage: false,
+      serverUrl: import.meta.env.VITE_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
+const vm = getCurrentInstance()?.proxy;
+vm?.$trackEvent("manual_track", { source: "manual" });
+vm?.$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 单测（Vue3）
+
+测试文件：`src/gio.test.ts`
+
+覆盖点：
+
+- 初始化分支：
+  - 有 `appId`（4 参数 `init`）
+  - 无 `appId`（3 参数 `init`）
+  - 缺少必填配置时不初始化
+- 指令行为：`mounted` / `updated` / `beforeUnmount` 的绑定、重绑、清理
+- 回调行为：`onTracked` 在 `track` 回调后触发
+- 暴露能力：`$trackEvent` 与 `$gio` 常用 API
+
+结合 GrowingIO WebJS 常用 API 文档（含 `trackTimerStart`）对齐了以下接口可用性：
+
+- `setUserId`
+- `clearUserId`
+- `setVisitor`
+- `trackTimerStart`
+- `trackTimerEnd`
+
+运行方式：
+
+```bash
+pnpm -C packages/vue3 test:run
+```

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

@@ -11,9 +11,12 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
         default: boolean;
     };
 }>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    blur: (...args: any[]) => void;
     change: (...args: any[]) => void;
+    focus: (...args: any[]) => void;
     "update:modelValue": (...args: any[]) => void;
     apply: (...args: any[]) => void;
+    "remove-tag": (...args: any[]) => void;
 }, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
     modelValue: {
         required: true;
@@ -26,9 +29,12 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
         default: boolean;
     };
 }>> & Readonly<{
+    onBlur?: ((...args: any[]) => any) | undefined;
     onChange?: ((...args: any[]) => any) | undefined;
+    onFocus?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     onApply?: ((...args: any[]) => any) | undefined;
+    "onRemove-tag"?: ((...args: any[]) => any) | undefined;
 }>, {
     showApplyData: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

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

@@ -11,9 +11,12 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
         default: boolean;
     };
 }>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    blur: (...args: any[]) => void;
     change: (...args: any[]) => void;
+    focus: (...args: any[]) => void;
     "update:modelValue": (...args: any[]) => void;
     apply: (...args: any[]) => void;
+    "remove-tag": (...args: any[]) => void;
 }, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
     modelValue: {
         required: true;
@@ -26,9 +29,12 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
         default: boolean;
     };
 }>> & Readonly<{
+    onBlur?: ((...args: any[]) => any) | undefined;
     onChange?: ((...args: any[]) => any) | undefined;
+    onFocus?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     onApply?: ((...args: any[]) => any) | undefined;
+    "onRemove-tag"?: ((...args: any[]) => any) | undefined;
 }>, {
     showApplyData: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

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

@@ -11,9 +11,12 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
         default: boolean;
     };
 }>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    blur: (...args: any[]) => void;
     change: (...args: any[]) => void;
+    focus: (...args: any[]) => void;
     "update:modelValue": (...args: any[]) => void;
     apply: (...args: any[]) => void;
+    "remove-tag": (...args: any[]) => void;
 }, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
     modelValue: {
         required: true;
@@ -26,9 +29,12 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
         default: boolean;
     };
 }>> & Readonly<{
+    onBlur?: ((...args: any[]) => any) | undefined;
     onChange?: ((...args: any[]) => any) | undefined;
+    onFocus?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     onApply?: ((...args: any[]) => any) | undefined;
+    "onRemove-tag"?: ((...args: any[]) => any) | undefined;
 }>, {
     showApplyData: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

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

@@ -11,9 +11,12 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
         default: boolean;
     };
 }>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    blur: (...args: any[]) => void;
     change: (...args: any[]) => void;
+    focus: (...args: any[]) => void;
     "update:modelValue": (...args: any[]) => void;
     apply: (...args: any[]) => void;
+    "remove-tag": (...args: any[]) => void;
 }, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
     modelValue: {
         required: true;
@@ -26,9 +29,12 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
         default: boolean;
     };
 }>> & Readonly<{
+    onBlur?: ((...args: any[]) => any) | undefined;
     onChange?: ((...args: any[]) => any) | undefined;
+    onFocus?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     onApply?: ((...args: any[]) => any) | undefined;
+    "onRemove-tag"?: ((...args: any[]) => any) | undefined;
 }>, {
     showApplyData: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

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

@@ -59,9 +59,12 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
         default: () => never[];
     };
 }>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    blur: (...args: any[]) => void;
     change: (...args: any[]) => void;
+    focus: (...args: any[]) => void;
     "update:modelValue": (...args: any[]) => void;
     apply: (...args: any[]) => void;
+    "remove-tag": (...args: any[]) => void;
 }, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
     modelValue: {
         type: PropType<string | number | Array<any> | null | undefined>;
@@ -96,9 +99,12 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
         default: () => never[];
     };
 }>> & Readonly<{
+    onBlur?: ((...args: any[]) => any) | undefined;
     onChange?: ((...args: any[]) => any) | undefined;
+    onFocus?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     onApply?: ((...args: any[]) => any) | undefined;
+    "onRemove-tag"?: ((...args: any[]) => any) | undefined;
 }>, {
     modelValue: string | number | any[] | null | undefined;
     placeholder: string;

package/dist/components/hooks/useModelValueHydration.d.ts

@@ -0,0 +1,18 @@
+export interface HydrationBaseItem<TType extends string = string> {
+    id?: string | number | null;
+    type?: TType | null;
+    display?: string;
+    [key: string]: any;
+}
+interface FetchResponse<T> {
+    records?: T[];
+}
+type FetchByTypeFn<T extends HydrationBaseItem<TType>, TType extends string> = (ids: Array<string | number> | string | number, type: TType) => Promise<FetchResponse<T>>;
+export declare function useModelValueHydration<TType extends string, T extends HydrationBaseItem<TType>>(fetchByType: FetchByTypeFn<T, TType>): {
+    hydrateMultiple: (list: T[]) => Promise<{
+        updatedList: T[];
+        hasChanged: boolean;
+    }>;
+    hydrateSingle: (item: T | null | undefined) => Promise<T | null | undefined>;
+};
+export {};

package/dist/gio.d.ts

@@ -0,0 +1,60 @@
+import { App } from 'vue';
+
+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(app: App): void;
+};

package/dist/gio.test.d.ts

@@ -0,0 +1 @@
+export {};