@retailcrm/embed-ui 0.2.6 → 0.2.7
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/CHANGELOG.md +12 -0
- package/README.md +67 -1
- package/dist/index.cjs +24 -14
- package/dist/index.mjs +24 -14
- package/dist/meta.json +2 -2
- package/index.d.ts +21 -18
- package/package.json +1 -1
- package/types/context/index.d.ts +1 -1
- package/types/host/callable.d.ts +11 -0
- package/types/widget.d.ts +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,18 @@
|
|
|
2
2
|
|
|
3
3
|
All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
|
|
4
4
|
|
|
5
|
+
### [0.2.7](https://github.com/retailcrm/embed-ui/compare/v0.2.6...v0.2.7) (2024-11-13)
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
### Features
|
|
9
|
+
|
|
10
|
+
* Added useHost composable for calling host methods & first method httpCall ([72ec875](https://github.com/retailcrm/embed-ui/commit/72ec87502b8a08238c9e1aa8d3016ee0e2705a86))
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
### Fixes
|
|
14
|
+
|
|
15
|
+
* Fixed customer/card.phone => customer.card:phone naming ([9356313](https://github.com/retailcrm/embed-ui/commit/9356313b57ae314b65735f83900bb8742dd03c3c))
|
|
16
|
+
|
|
5
17
|
### [0.2.6](https://github.com/retailcrm/embed-ui/compare/v0.2.5...v0.2.6) (2024-11-11)
|
|
6
18
|
|
|
7
19
|
|
package/README.md
CHANGED
|
@@ -1,2 +1,68 @@
|
|
|
1
|
-
# embed-ui
|
|
1
|
+
# @retailcrm/embed-ui
|
|
2
2
|
API и компоненты для создания расширений интерфейса RetailCRM
|
|
3
|
+
|
|
4
|
+
## Цели
|
|
5
|
+
|
|
6
|
+
### `customer/card:phone`
|
|
7
|
+
|
|
8
|
+
Для виджетов в списке телефонов клиента в карточке клиента
|
|
9
|
+
|
|
10
|
+
### `order/card:customer.after`
|
|
11
|
+
|
|
12
|
+
Для виджетов, выводимых после полей в секции данных клиента в карточке заказа
|
|
13
|
+
|
|
14
|
+
### `order/card:customer.email`
|
|
15
|
+
|
|
16
|
+
Для виджетов, выводимых после поля "Email" в секции данных клиента в карточке заказа
|
|
17
|
+
|
|
18
|
+
### `order/card:customer.phone`
|
|
19
|
+
|
|
20
|
+
Для виджетов, выводимых после поля "Телефон" в секции данных клиента в карточке заказа
|
|
21
|
+
|
|
22
|
+
### `order/card:delivery.address`
|
|
23
|
+
|
|
24
|
+
Для виджетов, выводимых после поля "Адрес" в секции данных доставки в карточке заказа
|
|
25
|
+
|
|
26
|
+
## Контексты
|
|
27
|
+
|
|
28
|
+
Предоставляют данные из системы, реактивны.
|
|
29
|
+
|
|
30
|
+
### `customer/card`
|
|
31
|
+
|
|
32
|
+
Данные карточки клиента
|
|
33
|
+
|
|
34
|
+
```typescript
|
|
35
|
+
import { useCustomerCardContext } from '@retailcrm/embed-ui'
|
|
36
|
+
|
|
37
|
+
const customer = useCustomerCardContext()
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
### `customer/card:phone`
|
|
41
|
+
|
|
42
|
+
Данные телефона клиента
|
|
43
|
+
|
|
44
|
+
```typescript
|
|
45
|
+
import { useCustomerCardPhoneContext } from '@retailcrm/embed-ui'
|
|
46
|
+
|
|
47
|
+
const phone = useCustomerCardPhoneContext()
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
### `order/card`
|
|
51
|
+
|
|
52
|
+
Данные карточки заказа
|
|
53
|
+
|
|
54
|
+
```typescript
|
|
55
|
+
import { useOrderCardContext } from '@retailcrm/embed-ui'
|
|
56
|
+
|
|
57
|
+
const order = useOrderCardContext()
|
|
58
|
+
```
|
|
59
|
+
|
|
60
|
+
### `settings`
|
|
61
|
+
|
|
62
|
+
Настройки CRM
|
|
63
|
+
|
|
64
|
+
```typescript
|
|
65
|
+
import { useSettingsContext } from '@retailcrm/embed-ui'
|
|
66
|
+
|
|
67
|
+
const settings = useSettingsContext()
|
|
68
|
+
```
|
package/dist/index.cjs
CHANGED
|
@@ -4,12 +4,12 @@ const rpc = require("@remote-ui/rpc");
|
|
|
4
4
|
const pinia = require("pinia");
|
|
5
5
|
const remote = require("@omnicajs/vue-remote/remote");
|
|
6
6
|
const vue = require("vue");
|
|
7
|
-
const
|
|
8
|
-
const injectAccessor = (endpoint) => {
|
|
7
|
+
const injectEndpoint = (endpoint) => {
|
|
9
8
|
return (context) => {
|
|
10
9
|
context.store.endpoint = endpoint;
|
|
11
10
|
};
|
|
12
11
|
};
|
|
12
|
+
const keysOf = (o) => Object.keys(o);
|
|
13
13
|
const defineContext = (id, schema2) => {
|
|
14
14
|
return pinia.defineStore(id, {
|
|
15
15
|
state() {
|
|
@@ -53,17 +53,6 @@ const defineContext = (id, schema2) => {
|
|
|
53
53
|
}
|
|
54
54
|
});
|
|
55
55
|
};
|
|
56
|
-
const useField = (store, field) => {
|
|
57
|
-
if (store.schema[field].readonly) {
|
|
58
|
-
return vue.computed(() => store[field]);
|
|
59
|
-
}
|
|
60
|
-
return vue.computed({
|
|
61
|
-
get: () => store[field],
|
|
62
|
-
set: (value) => {
|
|
63
|
-
store.set(field, value);
|
|
64
|
-
}
|
|
65
|
-
});
|
|
66
|
-
};
|
|
67
56
|
const withMeta = (predicate, type) => {
|
|
68
57
|
return Object.assign(predicate, { type });
|
|
69
58
|
};
|
|
@@ -159,6 +148,26 @@ const schema = {
|
|
|
159
148
|
}
|
|
160
149
|
};
|
|
161
150
|
const useContext = defineContext("settings", schema);
|
|
151
|
+
const useField = (store, field) => {
|
|
152
|
+
if (store.schema[field].readonly) {
|
|
153
|
+
return vue.computed(() => store[field]);
|
|
154
|
+
}
|
|
155
|
+
return vue.computed({
|
|
156
|
+
get: () => store[field],
|
|
157
|
+
set: (value) => {
|
|
158
|
+
store.set(field, value);
|
|
159
|
+
}
|
|
160
|
+
});
|
|
161
|
+
};
|
|
162
|
+
const useInternal = pinia.defineStore("@retailcrm/embed-ui/_internal", {});
|
|
163
|
+
const useHost = () => {
|
|
164
|
+
const store = useInternal();
|
|
165
|
+
return {
|
|
166
|
+
httpCall(action, payload) {
|
|
167
|
+
return store.endpoint.call.httpCall(action, payload);
|
|
168
|
+
}
|
|
169
|
+
};
|
|
170
|
+
};
|
|
162
171
|
const createRoot = async (channel) => {
|
|
163
172
|
const root = remote.createRemoteRoot(channel, {
|
|
164
173
|
components: [
|
|
@@ -183,7 +192,7 @@ const createRoot = async (channel) => {
|
|
|
183
192
|
const createWidgetEndpoint = (widget, messenger) => {
|
|
184
193
|
const endpoint = rpc.createEndpoint(messenger);
|
|
185
194
|
const pinia$1 = pinia.createPinia();
|
|
186
|
-
pinia$1.use(
|
|
195
|
+
pinia$1.use(injectEndpoint(endpoint));
|
|
187
196
|
let onRelease = () => {
|
|
188
197
|
};
|
|
189
198
|
endpoint.expose({
|
|
@@ -214,5 +223,6 @@ exports.settingsSchema = schema;
|
|
|
214
223
|
exports.useCustomerCardContext = useContext$3;
|
|
215
224
|
exports.useCustomerCardPhoneContext = useContext$2;
|
|
216
225
|
exports.useField = useField;
|
|
226
|
+
exports.useHost = useHost;
|
|
217
227
|
exports.useOrderCardContext = useContext$1;
|
|
218
228
|
exports.useSettingsContext = useContext;
|
package/dist/index.mjs
CHANGED
|
@@ -2,12 +2,12 @@ import { createEndpoint, retain, release } from "@remote-ui/rpc";
|
|
|
2
2
|
import { defineStore, createPinia } from "pinia";
|
|
3
3
|
import { createRemoteRenderer, createRemoteRoot } from "@omnicajs/vue-remote/remote";
|
|
4
4
|
import { computed } from "vue";
|
|
5
|
-
const
|
|
6
|
-
const injectAccessor = (endpoint) => {
|
|
5
|
+
const injectEndpoint = (endpoint) => {
|
|
7
6
|
return (context) => {
|
|
8
7
|
context.store.endpoint = endpoint;
|
|
9
8
|
};
|
|
10
9
|
};
|
|
10
|
+
const keysOf = (o) => Object.keys(o);
|
|
11
11
|
const defineContext = (id, schema2) => {
|
|
12
12
|
return defineStore(id, {
|
|
13
13
|
state() {
|
|
@@ -51,17 +51,6 @@ const defineContext = (id, schema2) => {
|
|
|
51
51
|
}
|
|
52
52
|
});
|
|
53
53
|
};
|
|
54
|
-
const useField = (store, field) => {
|
|
55
|
-
if (store.schema[field].readonly) {
|
|
56
|
-
return computed(() => store[field]);
|
|
57
|
-
}
|
|
58
|
-
return computed({
|
|
59
|
-
get: () => store[field],
|
|
60
|
-
set: (value) => {
|
|
61
|
-
store.set(field, value);
|
|
62
|
-
}
|
|
63
|
-
});
|
|
64
|
-
};
|
|
65
54
|
const withMeta = (predicate, type) => {
|
|
66
55
|
return Object.assign(predicate, { type });
|
|
67
56
|
};
|
|
@@ -157,6 +146,26 @@ const schema = {
|
|
|
157
146
|
}
|
|
158
147
|
};
|
|
159
148
|
const useContext = defineContext("settings", schema);
|
|
149
|
+
const useField = (store, field) => {
|
|
150
|
+
if (store.schema[field].readonly) {
|
|
151
|
+
return computed(() => store[field]);
|
|
152
|
+
}
|
|
153
|
+
return computed({
|
|
154
|
+
get: () => store[field],
|
|
155
|
+
set: (value) => {
|
|
156
|
+
store.set(field, value);
|
|
157
|
+
}
|
|
158
|
+
});
|
|
159
|
+
};
|
|
160
|
+
const useInternal = defineStore("@retailcrm/embed-ui/_internal", {});
|
|
161
|
+
const useHost = () => {
|
|
162
|
+
const store = useInternal();
|
|
163
|
+
return {
|
|
164
|
+
httpCall(action, payload) {
|
|
165
|
+
return store.endpoint.call.httpCall(action, payload);
|
|
166
|
+
}
|
|
167
|
+
};
|
|
168
|
+
};
|
|
160
169
|
const createRoot = async (channel) => {
|
|
161
170
|
const root = createRemoteRoot(channel, {
|
|
162
171
|
components: [
|
|
@@ -181,7 +190,7 @@ const createRoot = async (channel) => {
|
|
|
181
190
|
const createWidgetEndpoint = (widget, messenger) => {
|
|
182
191
|
const endpoint = createEndpoint(messenger);
|
|
183
192
|
const pinia = createPinia();
|
|
184
|
-
pinia.use(
|
|
193
|
+
pinia.use(injectEndpoint(endpoint));
|
|
185
194
|
let onRelease = () => {
|
|
186
195
|
};
|
|
187
196
|
endpoint.expose({
|
|
@@ -213,6 +222,7 @@ export {
|
|
|
213
222
|
useContext$3 as useCustomerCardContext,
|
|
214
223
|
useContext$2 as useCustomerCardPhoneContext,
|
|
215
224
|
useField,
|
|
225
|
+
useHost,
|
|
216
226
|
useContext$1 as useOrderCardContext,
|
|
217
227
|
useContext as useSettingsContext
|
|
218
228
|
};
|
package/dist/meta.json
CHANGED
|
@@ -42,7 +42,7 @@
|
|
|
42
42
|
"readonly": true
|
|
43
43
|
}
|
|
44
44
|
],
|
|
45
|
-
"customer/card
|
|
45
|
+
"customer/card:phone": [
|
|
46
46
|
{
|
|
47
47
|
"name": "value",
|
|
48
48
|
"type": "string",
|
|
@@ -144,7 +144,7 @@
|
|
|
144
144
|
},
|
|
145
145
|
"contexts": [
|
|
146
146
|
"customer/card",
|
|
147
|
-
"customer/card
|
|
147
|
+
"customer/card:phone",
|
|
148
148
|
"settings"
|
|
149
149
|
]
|
|
150
150
|
},
|
package/index.d.ts
CHANGED
|
@@ -1,20 +1,21 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
6
|
-
import {
|
|
7
|
-
import {
|
|
8
|
-
import {
|
|
9
|
-
import { Schema
|
|
10
|
-
import { Schema as
|
|
11
|
-
import { Schema as
|
|
12
|
-
import {
|
|
13
|
-
import {
|
|
14
|
-
import {
|
|
15
|
-
import {
|
|
16
|
-
import {
|
|
17
|
-
import {
|
|
1
|
+
import type { Callable } from './types/host/callable'
|
|
2
|
+
import type { ComputedRef } from 'vue'
|
|
3
|
+
import type { Context } from './types/context/schema'
|
|
4
|
+
import type { ContextAccessor } from './types/context/schema'
|
|
5
|
+
import type { ContextSchema } from './types/context/schema'
|
|
6
|
+
import type { Endpoint, RemoteCallable } from '@remote-ui/rpc'
|
|
7
|
+
import type { IsReadonly } from './types/context/schema'
|
|
8
|
+
import type { MessageEndpoint } from '@remote-ui/rpc'
|
|
9
|
+
import type { Schema } from './types/context/customer/card'
|
|
10
|
+
import type { Schema as Schema_2 } from './types/context/customer/card-phone'
|
|
11
|
+
import type { Schema as Schema_3 } from './types/context/order/card'
|
|
12
|
+
import type { Schema as Schema_4 } from './types/context/settings'
|
|
13
|
+
import type { SchemaList } from '../types/context'
|
|
14
|
+
import type { Store } from 'pinia'
|
|
15
|
+
import type { StoreDefinition } from 'pinia'
|
|
16
|
+
import type { TypeOf } from './types/context/schema'
|
|
17
|
+
import type { WidgetRunner } from './types/widget'
|
|
18
|
+
import type { WritableComputedRef } from 'vue'
|
|
18
19
|
|
|
19
20
|
declare type Computed<S extends ContextSchema, F extends keyof S> = IsReadonly<S[F]> extends true ? ComputedRef<TypeOf<S[F]>> : WritableComputedRef<TypeOf<S[F]>>;
|
|
20
21
|
|
|
@@ -49,6 +50,8 @@ export declare const useField: <S extends ContextSchema, F extends keyof S>(stor
|
|
|
49
50
|
set<F_1 extends keyof S>(field: F_1, value: TypeOf<S[F_1]>): void;
|
|
50
51
|
}>, field: F) => Computed<S, F>
|
|
51
52
|
|
|
53
|
+
export declare const useHost = () => RemoteCallable<Callable>
|
|
54
|
+
|
|
52
55
|
export declare const useOrderCardContext: StoreDefinition<'order/card', Context<Schema_3>, {
|
|
53
56
|
schema: () => Schema_3;
|
|
54
57
|
}, {
|
|
@@ -65,6 +68,6 @@ export declare const useSettingsContext: StoreDefinition<'settings', Context<Sch
|
|
|
65
68
|
|
|
66
69
|
declare module 'pinia' {
|
|
67
70
|
interface PiniaCustomProperties {
|
|
68
|
-
endpoint: Endpoint<ContextAccessor>;
|
|
71
|
+
endpoint: Endpoint<ContextAccessor & Callable>;
|
|
69
72
|
}
|
|
70
73
|
}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@retailcrm/embed-ui",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "0.2.
|
|
4
|
+
"version": "0.2.7",
|
|
5
5
|
"description": "API and components for creating RetailCRM UI extensions",
|
|
6
6
|
"repository": "git@github.com:retailcrm/embed-ui.git",
|
|
7
7
|
"author": "RetailDriverLLC <integration@retailcrm.ru>",
|
package/types/context/index.d.ts
CHANGED
|
@@ -5,7 +5,7 @@ import type { Schema as SettingsSchema } from './settings'
|
|
|
5
5
|
|
|
6
6
|
export type SchemaList = {
|
|
7
7
|
'customer/card': CustomerCardSchema;
|
|
8
|
-
'customer/card
|
|
8
|
+
'customer/card:phone': CustomerCardPhoneSchema;
|
|
9
9
|
'order/card': OrderCardSchema;
|
|
10
10
|
'settings': SettingsSchema;
|
|
11
11
|
}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
type Scalar = string | number | boolean | null
|
|
2
|
+
type Pojo = {
|
|
3
|
+
[key: string]: Scalar | Pojo | Array<Scalar | Pojo>
|
|
4
|
+
}
|
|
5
|
+
|
|
6
|
+
export type Callable = {
|
|
7
|
+
httpCall (
|
|
8
|
+
action: string,
|
|
9
|
+
payload: string | Pojo
|
|
10
|
+
): Promise<{ body: string; status: number }>;
|
|
11
|
+
}
|
package/types/widget.d.ts
CHANGED
|
@@ -34,7 +34,7 @@ export type SchemaListOf<T extends WidgetTarget> = SchemaListByTarget[T]
|
|
|
34
34
|
export type SchemaListByTarget = {
|
|
35
35
|
'customer/card:phone': Pick<SchemaList,
|
|
36
36
|
| 'customer/card'
|
|
37
|
-
| 'customer/card
|
|
37
|
+
| 'customer/card:phone'
|
|
38
38
|
| 'settings'
|
|
39
39
|
>;
|
|
40
40
|
'order/card:customer.after': Pick<SchemaList,
|