@retailcrm/embed-ui 0.2.5 → 0.2.7

package/CHANGELOG.md

@@ -2,6 +2,25 @@
 
 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.
 
+### [0.2.7](https://github.com/retailcrm/embed-ui/compare/v0.2.6...v0.2.7) (2024-11-13)
+
+
+### Features
+
+* Added useHost composable for calling host methods & first method httpCall ([72ec875](https://github.com/retailcrm/embed-ui/commit/72ec87502b8a08238c9e1aa8d3016ee0e2705a86))
+
+
+### Fixes
+
+* Fixed customer/card.phone => customer.card:phone naming ([9356313](https://github.com/retailcrm/embed-ui/commit/9356313b57ae314b65735f83900bb8742dd03c3c))
+
+### [0.2.6](https://github.com/retailcrm/embed-ui/compare/v0.2.5...v0.2.6) (2024-11-11)
+
+
+### Fixes
+
+* Metadata types for protection from missing fields & generation ([c6541f3](https://github.com/retailcrm/embed-ui/commit/c6541f3cffc8f50a0b1439838e19b4ae08a9a309))
+
 ### [0.2.5](https://github.com/retailcrm/embed-ui/compare/v0.2.4...v0.2.5) (2024-11-04)
 
 

package/README.md

@@ -1,2 +1,68 @@
-# embed-ui
+# @retailcrm/embed-ui
 API и компоненты для создания расширений интерфейса RetailCRM
+
+## Цели
+
+### `customer/card:phone`
+
+Для виджетов в списке телефонов клиента в карточке клиента
+
+### `order/card:customer.after`
+
+Для виджетов, выводимых после полей в секции данных клиента в карточке заказа
+
+### `order/card:customer.email`
+
+Для виджетов, выводимых после поля "Email" в секции данных  клиента в карточке заказа
+
+### `order/card:customer.phone`
+
+Для виджетов, выводимых после поля "Телефон" в секции данных клиента в карточке заказа
+
+### `order/card:delivery.address`
+
+Для виджетов, выводимых после поля "Адрес" в секции данных доставки в карточке заказа
+
+## Контексты
+
+Предоставляют данные из системы, реактивны.
+
+### `customer/card`
+
+Данные карточки клиента
+
+```typescript
+import { useCustomerCardContext } from '@retailcrm/embed-ui'
+
+const customer = useCustomerCardContext()
+```
+
+### `customer/card:phone`
+
+Данные телефона клиента
+
+```typescript
+import { useCustomerCardPhoneContext } from '@retailcrm/embed-ui'
+
+const phone = useCustomerCardPhoneContext()
+```
+
+### `order/card`
+
+Данные карточки заказа
+
+```typescript
+import { useOrderCardContext } from '@retailcrm/embed-ui'
+
+const order = useOrderCardContext()
+```
+
+### `settings`
+
+Настройки CRM
+
+```typescript
+import { useSettingsContext } from '@retailcrm/embed-ui'
+
+const settings = useSettingsContext()
+```

package/dist/index.cjs

@@ -4,12 +4,12 @@ const rpc = require("@remote-ui/rpc");
 const pinia = require("pinia");
 const remote = require("@omnicajs/vue-remote/remote");
 const vue = require("vue");
-const keysOf = (o) => Object.keys(o);
-const injectAccessor = (endpoint) => {
+const injectEndpoint = (endpoint) => {
   return (context) => {
     context.store.endpoint = endpoint;
   };
 };
+const keysOf = (o) => Object.keys(o);
 const defineContext = (id, schema2) => {
   return pinia.defineStore(id, {
     state() {
@@ -53,17 +53,6 @@ const defineContext = (id, schema2) => {
     }
   });
 };
-const useField = (store, field) => {
-  if (store.schema[field].readonly) {
-    return vue.computed(() => store[field]);
-  }
-  return vue.computed({
-    get: () => store[field],
-    set: (value) => {
-      store.set(field, value);
-    }
-  });
-};
 const withMeta = (predicate, type) => {
   return Object.assign(predicate, { type });
 };
@@ -159,6 +148,26 @@ const schema = {
   }
 };
 const useContext = defineContext("settings", schema);
+const useField = (store, field) => {
+  if (store.schema[field].readonly) {
+    return vue.computed(() => store[field]);
+  }
+  return vue.computed({
+    get: () => store[field],
+    set: (value) => {
+      store.set(field, value);
+    }
+  });
+};
+const useInternal = pinia.defineStore("@retailcrm/embed-ui/_internal", {});
+const useHost = () => {
+  const store = useInternal();
+  return {
+    httpCall(action, payload) {
+      return store.endpoint.call.httpCall(action, payload);
+    }
+  };
+};
 const createRoot = async (channel) => {
   const root = remote.createRemoteRoot(channel, {
     components: [
@@ -183,7 +192,7 @@ const createRoot = async (channel) => {
 const createWidgetEndpoint = (widget, messenger) => {
   const endpoint = rpc.createEndpoint(messenger);
   const pinia$1 = pinia.createPinia();
-  pinia$1.use(injectAccessor(endpoint));
+  pinia$1.use(injectEndpoint(endpoint));
   let onRelease = () => {
   };
   endpoint.expose({
@@ -214,5 +223,6 @@ exports.settingsSchema = schema;
 exports.useCustomerCardContext = useContext$3;
 exports.useCustomerCardPhoneContext = useContext$2;
 exports.useField = useField;
+exports.useHost = useHost;
 exports.useOrderCardContext = useContext$1;
 exports.useSettingsContext = useContext;

package/dist/index.mjs

@@ -2,12 +2,12 @@ import { createEndpoint, retain, release } from "@remote-ui/rpc";
 import { defineStore, createPinia } from "pinia";
 import { createRemoteRenderer, createRemoteRoot } from "@omnicajs/vue-remote/remote";
 import { computed } from "vue";
-const keysOf = (o) => Object.keys(o);
-const injectAccessor = (endpoint) => {
+const injectEndpoint = (endpoint) => {
   return (context) => {
     context.store.endpoint = endpoint;
   };
 };
+const keysOf = (o) => Object.keys(o);
 const defineContext = (id, schema2) => {
   return defineStore(id, {
     state() {
@@ -51,17 +51,6 @@ const defineContext = (id, schema2) => {
     }
   });
 };
-const useField = (store, field) => {
-  if (store.schema[field].readonly) {
-    return computed(() => store[field]);
-  }
-  return computed({
-    get: () => store[field],
-    set: (value) => {
-      store.set(field, value);
-    }
-  });
-};
 const withMeta = (predicate, type) => {
   return Object.assign(predicate, { type });
 };
@@ -157,6 +146,26 @@ const schema = {
   }
 };
 const useContext = defineContext("settings", schema);
+const useField = (store, field) => {
+  if (store.schema[field].readonly) {
+    return computed(() => store[field]);
+  }
+  return computed({
+    get: () => store[field],
+    set: (value) => {
+      store.set(field, value);
+    }
+  });
+};
+const useInternal = defineStore("@retailcrm/embed-ui/_internal", {});
+const useHost = () => {
+  const store = useInternal();
+  return {
+    httpCall(action, payload) {
+      return store.endpoint.call.httpCall(action, payload);
+    }
+  };
+};
 const createRoot = async (channel) => {
   const root = createRemoteRoot(channel, {
     components: [
@@ -181,7 +190,7 @@ const createRoot = async (channel) => {
 const createWidgetEndpoint = (widget, messenger) => {
   const endpoint = createEndpoint(messenger);
   const pinia = createPinia();
-  pinia.use(injectAccessor(endpoint));
+  pinia.use(injectEndpoint(endpoint));
   let onRelease = () => {
   };
   endpoint.expose({
@@ -213,6 +222,7 @@ export {
   useContext$3 as useCustomerCardContext,
   useContext$2 as useCustomerCardPhoneContext,
   useField,
+  useHost,
   useContext$1 as useOrderCardContext,
   useContext as useSettingsContext
 };

package/dist/meta.json

@@ -42,7 +42,7 @@
         "readonly": true
       }
     ],
-    "customer/card.phone": [
+    "customer/card:phone": [
       {
         "name": "value",
         "type": "string",
@@ -144,6 +144,7 @@
       },
       "contexts": [
         "customer/card",
+        "customer/card:phone",
         "settings"
       ]
     },

package/index.d.ts

@@ -1,20 +1,21 @@
-import { ComputedRef } from 'vue'
-import { Context } from './types/context/schema'
-import { ContextAccessor } from './types/context/schema'
-import { ContextSchema } from './types/context/schema'
-import { Endpoint } from '@remote-ui/rpc'
-import { IsReadonly } from './types/context/schema'
-import { MessageEndpoint } from '@remote-ui/rpc'
-import { Schema } from './types/context/customer/card'
-import { Schema as Schema_2 } from './types/context/customer/card-phone'
-import { Schema as Schema_3 } from './types/context/order/card'
-import { Schema as Schema_4 } from './types/context/settings'
-import { SchemaList } from '../types/context'
-import { Store } from 'pinia'
-import { StoreDefinition } from 'pinia'
-import { TypeOf } from './types/context/schema'
-import { WidgetRunner } from './types/widget'
-import { WritableComputedRef } from 'vue'
+import type { Callable } from './types/host/callable'
+import type { ComputedRef } from 'vue'
+import type { Context } from './types/context/schema'
+import type { ContextAccessor } from './types/context/schema'
+import type { ContextSchema } from './types/context/schema'
+import type { Endpoint, RemoteCallable } from '@remote-ui/rpc'
+import type { IsReadonly } from './types/context/schema'
+import type { MessageEndpoint } from '@remote-ui/rpc'
+import type { Schema } from './types/context/customer/card'
+import type { Schema as Schema_2 } from './types/context/customer/card-phone'
+import type { Schema as Schema_3 } from './types/context/order/card'
+import type { Schema as Schema_4 } from './types/context/settings'
+import type { SchemaList } from '../types/context'
+import type { Store } from 'pinia'
+import type { StoreDefinition } from 'pinia'
+import type { TypeOf } from './types/context/schema'
+import type { WidgetRunner } from './types/widget'
+import type { WritableComputedRef } from 'vue'
 
 declare type Computed<S extends ContextSchema, F extends keyof S> = IsReadonly<S[F]> extends true ? ComputedRef<TypeOf<S[F]>> : WritableComputedRef<TypeOf<S[F]>>;
 
@@ -49,6 +50,8 @@ export declare const useField: <S extends ContextSchema, F extends keyof S>(stor
   set<F_1 extends keyof S>(field: F_1, value: TypeOf<S[F_1]>): void;
 }>, field: F) => Computed<S, F>
 
+export declare const useHost = () => RemoteCallable<Callable>
+
 export declare const useOrderCardContext: StoreDefinition<'order/card', Context<Schema_3>, {
   schema: () => Schema_3;
 }, {
@@ -65,6 +68,6 @@ export declare const useSettingsContext: StoreDefinition<'settings', Context<Sch
 
 declare module 'pinia' {
   interface PiniaCustomProperties {
-    endpoint: Endpoint<ContextAccessor>;
+    endpoint: Endpoint<ContextAccessor & Callable>;
   }
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@retailcrm/embed-ui",
   "type": "module",
-  "version": "0.2.5",
+  "version": "0.2.7",
   "description": "API and components for creating RetailCRM UI extensions",
   "repository": "git@github.com:retailcrm/embed-ui.git",
   "author": "RetailDriverLLC <integration@retailcrm.ru>",

package/types/context/index.d.ts

@@ -5,7 +5,7 @@ import type { Schema as SettingsSchema } from './settings'
 
 export type SchemaList = {
   'customer/card': CustomerCardSchema;
-  'customer/card.phone': CustomerCardPhoneSchema;
+  'customer/card:phone': CustomerCardPhoneSchema;
   'order/card': OrderCardSchema;
   'settings': SettingsSchema;
 }

package/types/host/callable.d.ts

@@ -0,0 +1,11 @@
+type Scalar = string | number | boolean | null
+type Pojo = {
+  [key: string]: Scalar | Pojo | Array<Scalar | Pojo>
+}
+
+export type Callable = {
+  httpCall (
+    action: string,
+    payload: string | Pojo
+  ): Promise<{ body: string; status: number }>;
+}

package/types/widget.d.ts

@@ -34,7 +34,7 @@ export type SchemaListOf<T extends WidgetTarget> = SchemaListByTarget[T]
 export type SchemaListByTarget = {
   'customer/card:phone': Pick<SchemaList,
     | 'customer/card'
-    | 'customer/card.phone'
+    | 'customer/card:phone'
     | 'settings'
   >;
   'order/card:customer.after': Pick<SchemaList,