@jctrans-materials/comps-vue3 1.0.37-beta.3 → 1.0.37-beta.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +84 -0
- package/dist/components/hooks/useModelValueHydration.d.ts +18 -0
- package/dist/index.cjs.js +1 -1
- package/dist/index.css +1 -1
- package/dist/index.esm.js +1 -1
- package/package.json +2 -2
package/README.md
ADDED
|
@@ -0,0 +1,84 @@
|
|
|
1
|
+
# Vue3 组件说明（jc-utils）
|
|
2
|
+
|
|
3
|
+
## 组件清单
|
|
4
|
+
|
|
5
|
+
当前 `packages/vue3` 对外导出的核心组件如下：
|
|
6
|
+
|
|
7
|
+
- `ApplyDataDialog`
|
|
8
|
+
- `GlobalModal`
|
|
9
|
+
- `JcSearch`
|
|
10
|
+
- `JcMSearch`
|
|
11
|
+
- `JcVerifySlide`
|
|
12
|
+
- `JcCarrierSearch`
|
|
13
|
+
- `AirCarrierSearch`
|
|
14
|
+
- `SeaCarrierSearch`
|
|
15
|
+
- `AirLineSearch`
|
|
16
|
+
- `SeaLineSearch`
|
|
17
|
+
- `LineCascader`
|
|
18
|
+
- `ChineseCompanySearch`
|
|
19
|
+
- `JcLoginDialog`
|
|
20
|
+
- `CodeInput`
|
|
21
|
+
- `GoogleInput`
|
|
22
|
+
- `JcFloatInput`
|
|
23
|
+
- `JcFloatWrapper`
|
|
24
|
+
|
|
25
|
+
## 快速使用
|
|
26
|
+
|
|
27
|
+
```ts
|
|
28
|
+
import { createApp } from "vue";
|
|
29
|
+
import App from "./App.vue";
|
|
30
|
+
import JCtransComps from "@jctrans-materials/comps-vue3";
|
|
31
|
+
import "@jctrans-materials/comps-vue3/index.css";
|
|
32
|
+
|
|
33
|
+
const app = createApp(App);
|
|
34
|
+
app.use(JCtransComps);
|
|
35
|
+
app.mount("#app");
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
## 组件能力速览
|
|
39
|
+
|
|
40
|
+
### 搜索类
|
|
41
|
+
|
|
42
|
+
- `JcSearch`：通用地点搜索（国家/城市/港口/机场）
|
|
43
|
+
- `JcMSearch`：移动端/轻量交互搜索
|
|
44
|
+
- `JcCarrierSearch` 及 `Air/Sea Carrier/Line`：承运人与航线搜索
|
|
45
|
+
- `LineCascader`：航线-国家级联选择
|
|
46
|
+
- `ChineseCompanySearch`：中国公司名称联想搜索
|
|
47
|
+
|
|
48
|
+
### 验证与登录类
|
|
49
|
+
|
|
50
|
+
- `JcVerifySlide`：滑块验证码
|
|
51
|
+
- `JcLoginDialog`：登录/注册弹窗
|
|
52
|
+
- `CodeInput` / `GoogleInput`：验证码输入
|
|
53
|
+
|
|
54
|
+
### 输入与弹窗基础类
|
|
55
|
+
|
|
56
|
+
- `JcFloatInput` / `JcFloatWrapper`：浮动标签输入容器
|
|
57
|
+
- `ApplyDataDialog`：补充数据申请
|
|
58
|
+
- `GlobalModal`：全局弹窗容器
|
|
59
|
+
|
|
60
|
+
## 重点事件补充
|
|
61
|
+
|
|
62
|
+
`JcCarrierSearch` 现已透出输入框事件：
|
|
63
|
+
|
|
64
|
+
- `focus`
|
|
65
|
+
- `blur`
|
|
66
|
+
- `remove-tag`
|
|
67
|
+
|
|
68
|
+
便于在业务侧跟踪输入焦点、标签移除行为。
|
|
69
|
+
|
|
70
|
+
## Playground 示例
|
|
71
|
+
|
|
72
|
+
可在以下页面查看 Vue3 组件演示：
|
|
73
|
+
|
|
74
|
+
- `playground/v3play/src/App.vue`
|
|
75
|
+
- `Base Demo`：`JcSearch` + `ApplyDataDialog`
|
|
76
|
+
- `Carrier/Line Demo`：`JcCarrierSearch` + `LineCascader`
|
|
77
|
+
- `MSearch Demo`：`JcMSearch`
|
|
78
|
+
- `Login Dialog Demo`：`JcLoginDialog`
|
|
79
|
+
- `Company Search Demo`：`ChineseCompanySearch`
|
|
80
|
+
- `Verify Slide Demo`：`JcVerifySlide`
|
|
81
|
+
|
|
82
|
+
`JcSearch` 的详细参数说明可参考：
|
|
83
|
+
|
|
84
|
+
- `packages/vue3/src/components/JcSearch/README.md`
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
export interface HydrationBaseItem<TType extends string = string> {
|
|
2
|
+
id?: string | number | null;
|
|
3
|
+
type?: TType | null;
|
|
4
|
+
display?: string;
|
|
5
|
+
[key: string]: any;
|
|
6
|
+
}
|
|
7
|
+
interface FetchResponse<T> {
|
|
8
|
+
records?: T[];
|
|
9
|
+
}
|
|
10
|
+
type FetchByTypeFn<T extends HydrationBaseItem<TType>, TType extends string> = (ids: Array<string | number> | string | number, type: TType) => Promise<FetchResponse<T>>;
|
|
11
|
+
export declare function useModelValueHydration<TType extends string, T extends HydrationBaseItem<TType>>(fetchByType: FetchByTypeFn<T, TType>): {
|
|
12
|
+
hydrateMultiple: (list: T[]) => Promise<{
|
|
13
|
+
updatedList: T[];
|
|
14
|
+
hasChanged: boolean;
|
|
15
|
+
}>;
|
|
16
|
+
hydrateSingle: (item: T | null | undefined) => Promise<T | null | undefined>;
|
|
17
|
+
};
|
|
18
|
+
export {};
|