@bcc-code/vue-bcc-chat-ui 1.0.8 → 1.1.1

package/README.md

@@ -11,23 +11,78 @@
 npm -i @bcc-code/vue-bcc-chat-ui
 
 ```
-
-2. Use component in Vue
+2. Register component in the Vue App
 ```ts
+import { chat } from "@bcc-code/vue-bcc-chat-ui";
+import "@bcc-code/vue-bcc-chat-ui/dist/styles.css";
 
-<template>
-   <div>
-      <BccChatMessageList :authToken="token" :chat="chatId" />
-   </div>
-</template>
+const app = createApp(App);
+app.use(chat, { environment: "prod", themeMode: "light" });
+```
 
+3. Use component in Vue
+```ts
 <script lang="ts" setup>
 import { BccChatMessageList } from '@bcc-code/vue-bcc-chat-ui';
 
 const authToken = ref('....');
-const chatId = ref('my-chat-id');
+const chatUid = ref('my-chat-id');
 
 </script>
 
+<template>
+   <div>
+      <BccChatMessageList :authToken="token" :chatUid="chatUid" />
+   </div>
+</template>
+
 ```
 
+
+## Styling
+
+The component can by styled with the folowing styles
+
+```css
+.bcc-chat-message-list {
+  /* 1. Wrapper for Messages component */
+  .cc-messages-wrapper {
+
+    /* 1.1 Messages component */
+    .cc-messages-wrapper__messages {
+     
+      /* 1.1.1 Wrapper for Messages List */
+      .cc-messages-wrapper__messages-list {
+
+        /* 1.1.1.1 Messages List header view */
+        .cc__messagelist__headerview {
+        }
+        
+        /* 1.1.1.2 Messages List messages */
+        .cc-messagelist {
+            .cc-list__wrapper {
+              .cc-list__header {
+              }
+              .cc-list__list {
+              }
+            }
+        }
+
+        /* 1.1.1.3 Message List footer */
+        .cc__messagelist__footerview {
+        }
+      }
+
+      /* 1.1.2 Wrapper for Composer */
+      .cc-messages-wrapper__composer {
+      }
+
+      /* 1.1.3 Wrapper for Live Reaction */
+      .cc__messages__livereaction {
+      }
+
+    }
+
+  }
+}
+```

package/dist/chat/connection.d.ts

@@ -1,7 +1,14 @@
-export declare const connect: (authToken: string | (() => string)) => Promise<import("@cometchat/chat-sdk-javascript").User | undefined>;
-export declare const disconnect: () => Promise<void>;
+import { Ref } from "vue";
+export declare const setAccessToken: (token: string | null | undefined) => void;
+export declare const connect: (connectionName: string | null | undefined) => Promise<import("@cometchat/chat-sdk-javascript").User | null | undefined>;
+export declare const disconnect: (connectionName: string | null | undefined) => Promise<void>;
+export declare const reconnect: () => Promise<boolean>;
 declare const _default: {
-    connect: (authToken: string | (() => string)) => Promise<import("@cometchat/chat-sdk-javascript").User | undefined>;
-    disconnect: () => Promise<void>;
+    accessToken: Ref<string | null | undefined>;
+    setAccessToken: (token: string | null | undefined) => void;
+    connect: (connectionName: string | null | undefined) => Promise<import("@cometchat/chat-sdk-javascript").User | null | undefined>;
+    disconnect: (connectionName: string | null | undefined) => Promise<void>;
+    reconnect: () => Promise<boolean>;
+    connected: import("vue").ComputedRef<boolean>;
 };
 export default _default;

package/dist/chat/index.d.ts

@@ -1,7 +1,15 @@
+import { Ref } from "vue";
 export interface ChatInstallOptions {
     environment: string;
     themeMode: string;
+    accessToken?: Ref<string | null | undefined> | null | undefined | string;
 }
+export * as theme from "./theme";
+export * as uiKit from "./uiKit";
+export * as mobileView from "./mobileView";
+export * as connection from "./connection";
+export * as data from "./data";
+export * as environment from "./environment";
 declare const _default: {
     install: (app: any, options: ChatInstallOptions) => Promise<void>;
     environment: {
@@ -21,8 +29,12 @@ declare const _default: {
         isMobileView: any;
     };
     connection: {
-        connect: (authToken: string | (() => string)) => Promise<import("@cometchat/chat-sdk-javascript").User | undefined>;
-        disconnect: () => Promise<void>;
+        accessToken: Ref<string | null | undefined>;
+        setAccessToken: (token: string | null | undefined) => void;
+        connect: (connectionName: string | null | undefined) => Promise<import("@cometchat/chat-sdk-javascript").User | null | undefined>;
+        disconnect: (connectionName: string | null | undefined) => Promise<void>;
+        reconnect: () => Promise<boolean>;
+        connected: import("vue").ComputedRef<boolean>;
     };
     data: {
         getGroup: typeof import("@cometchat/chat-sdk-javascript").CometChat.getGroup;

package/dist/chat/uiKit.d.ts

@@ -1,4 +1,3 @@
-import "@cometchat/chat-uikit-vue/dist/style.css";
 export declare const init: () => Promise<void>;
 declare const _default: {
     init: () => Promise<void>;

package/dist/components/BccChatMessageList.vue.d.ts

@@ -1,12 +1,12 @@
 declare const _default: import("vue").DefineComponent<{
-    accessToken: StringConstructor;
-    chatUid: StringConstructor;
-    active: BooleanConstructor;
+    chatUid: {
+        type: StringConstructor;
+        required: true;
+    };
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    accessToken: StringConstructor;
-    chatUid: StringConstructor;
-    active: BooleanConstructor;
-}>>, {
-    active: boolean;
-}, {}>;
+    chatUid: {
+        type: StringConstructor;
+        required: true;
+    };
+}>>, {}, {}>;
 export default _default;

package/dist/index.d.ts

@@ -1,3 +1,3 @@
-import './style.css';
-import BccChatMessageList from './components/BccChatMessageList.vue';
-export { BccChatMessageList };
+import BccChatMessageList from "./components/BccChatMessageList.vue";
+import chat from "./chat";
+export { BccChatMessageList, chat };