@tugitark/vue-widget 1.5.5 → 1.5.12

package/implementation.md

@@ -1,13 +1,13 @@
  Reimplementing The Widget With A Library
 ==========================================
 
-This library uses [@tugitark/declarative-widget](https://gitlab.com/tugitark/integration/libraries/javascript/declarative-widget) to handle the heavy lifting of detecting property changes, downloading the widget script, and (un)loading the actual widget tags on changes.  Basically that library converts the imperative and static Tugi Tark chat widget in to a functional equivalent.  All this library does is call that library from inside a component.
+This library uses [@tugi/declarative-widget](https://gitlab.com/tugitark-integration/libraries/javascript/declarative-widget) to handle the heavy lifting of detecting property changes, downloading the widget script, and (un)loading the actual widget tags on changes.  Basically that library converts the imperative and static Tugi Tark chat widget in to a functional equivalent.  All this library does is call that library from inside a component.
 
 The code below, while unoptimised, demonstrates how this compoment wraps that library.  See [the source code](index.ts) for more details.
 
 ```vue
 <script setup lang="ts">
-import tugiWidget, { type Props } from '@tugitark/declarative-widget';
+import tugiWidget, { type Props } from '@tugi/declarative-widget';
 
 import { defineProps } from 'vue';
 

package/index.d.ts

@@ -1,6 +1,6 @@
 import type { PropType } from 'vue';
-import type { Props, TugiWidget, WidgetInitializeOptions, WidgetFreeVersionOptions, TugiWidgetEvents, WidgetFreeSection } from '@tugitark/declarative-widget';
-export type { Props, TugiWidget, WidgetInitializeOptions, WidgetFreeVersionOptions, TugiWidgetEvents, WidgetFreeSection, };
+import type { Props, TugiWidget as TugiWidgetType, WidgetInitializeOptions, WidgetFreeVersionOptions, TugiWidgetEvents, WidgetFreeSection } from '@tugi/declarative-widget';
+export type { Props, TugiWidgetType as TugiWidget, WidgetInitializeOptions, WidgetFreeVersionOptions, TugiWidgetEvents, WidgetFreeSection, };
 type Sections = NonNullable<Props['sections']>;
 type Customise = NonNullable<Props['customize']>;
 declare const TugiWidget: {
@@ -10,6 +10,7 @@ declare const TugiWidget: {
     props: {
         user: StringConstructor;
         jwtFn: FunctionConstructor;
+        baseAddress: StringConstructor;
         tenantId: StringConstructor;
         brandId: StringConstructor;
         brandName: StringConstructor;
@@ -49,6 +50,8 @@ declare const TugiWidget: {
             immediate: boolean;
         };
     };
+    mounted: () => void;
+    unmounted: () => void;
     render: () => any;
 };
 export default TugiWidget;

package/index.js

@@ -1 +1 @@
-import a,{isFree as r}from"@tugitark/declarative-widget";var n,t=String,e=Function,o={type:Boolean,default:void 0},s={data:function(){return{firstTime_:!0}},props:{user:t,jwtFn:e,tenantId:t,brandId:t,brandName:t,language:t,customize:Object,httpUrl:t,wsUrl:t,chatDisabledReason:t,title:t,body:t,sections:Array,open:o,visible:o,onNotification:e,onReady:e,onOpened:e,onClosed:e,onError:e,proactiveMessage:t,proactiveContext:t,ticketLanguageCode:t},methods:{onNotification_:function(i){r(this)&&!this.firstTime_||(n=this.onNotification)&&n(i)},onReady_:function(){this.firstTime_&&(this.firstTime_=!1,(n=this.onReady)&&n())}},watch:{$props:{handler:function(i){i=Object.assign({},i,{onNotification:this.onNotification_,onReady:this.onReady_}),a(i)},deep:!0,immediate:!0}},render:function(){return null}};export default s;
+import s,{destroy as d,isFree as u}from"@tugi/declarative-widget";var o,a=0,i=!1;function f(){i=!1}function c(){i||(i=!0,queueMicrotask(function(){i&&(i=!1,a===0&&d())}))}var e=String,t=Function,r={type:Boolean,default:void 0},l={data:function(){return{firstTime_:!0}},props:{user:e,jwtFn:t,baseAddress:e,tenantId:e,brandId:e,brandName:e,language:e,customize:Object,httpUrl:e,wsUrl:e,chatDisabledReason:e,title:e,body:e,sections:Array,open:r,visible:r,onNotification:t,onReady:t,onOpened:t,onClosed:t,onError:t,proactiveMessage:e,proactiveContext:e,ticketLanguageCode:e},methods:{onNotification_:function(n){u(this)&&!this.firstTime_||(o=this.onNotification)&&o(n)},onReady_:function(){this.firstTime_&&(this.firstTime_=!1,(o=this.onReady)&&o())}},watch:{$props:{handler:function(n){n=Object.assign({},n,{onNotification:this.onNotification_,onReady:this.onReady_}),s(n)},deep:!0,immediate:!0}},mounted:function(){f(),a+=1},unmounted:function(){a=Math.max(0,a-1),c()},render:function(){return null}};export default l;

package/index.md

@@ -12,19 +12,19 @@ To use the Tugi Tark widget on your page, simply call the exported default compo
 
 ```vue
 <script setup lang="js">
-import TugiWidget from '@tugitark/vue-widget';
+import TugiWidget from '@tugi/vue-widget';
 </script>
 
 <template>
-	<TugiWidget />
+	<TugiWidget language="EN" />
 </template>
 ```
 
-If your server has the standard `/.tugi` endpoints (as provided by our back-end libraries and documented in our [developer documentation](https://gitlab.com/tugitark/integration/docs)) this is enough to get started with the Tugi Widget.  The `/.tugi/jwt/issue` endpoint will be called with no ID given, and if that can return the data for the current player (e.g. from the HTTP session) this is enough.  Alternatively you can pass an ID explicitly:
+If your server has the standard `/.tugi` endpoints (as provided by our back-end libraries and documented in our [developer documentation](https://gitlab.com/tugitark-integration/docs)) this is enough to get started with the Tugi Widget.  The `/.tugi/jwt/issue` endpoint will be called with no ID given, and if that can return the data for the current player (e.g. from the HTTP session) this is enough.  Alternatively you can pass an ID explicitly:
 
 ```vue
 <script setup lang="js">
-import TugiWidget from '@tugitark/vue-widget';
+import TugiWidget from '@tugi/vue-widget';
 
 const props = defineProps({
 	userId: {
@@ -47,11 +47,11 @@ Calls to `<TugiWidget />` are idempotent, if the parameter objects are equivalen
  Custom Example
 ----------------
 
-This is a more extensive widget example, with colour-scheme customisation and an explicit JWT lookup function.  The HTTP and websocket addresses are also specified, though match the defaults.  The `brand-id`, `brand-name`, and `tenant-id` will be provided by us based on details provided by you when signing up with our system.  They are not secret, so can safely appear in client-side code, but are case-sensitive so must remain exactly as specified by us.  When not specified (as in the previous example) they are retrieved from the `/.tugi/config` endpoint - either a custom version or one served by the `Tugi Players` library.
+This is a more extensive widget example, with colour-scheme customisation and an explicit JWT lookup function.  The HTTP and websocket addresses are also specified, though match the defaults.  The `brand-id`, `brand-name`, and `tenant-id` will be provided by us based on details provided by you when signing up with our system.  They are not secret, so can safely appear in client-side code, but are case-sensitive so must remain exactly as specified by us.  When not specified (as in the previous example) they are retrieved from the `/.tugi/config` endpoint - either a custom version or one served by the `Tugi Players` library.  `language` will set the language for the ticket.  If it is not given the user will have to select one when they open a new conversation.
 
 ```vue
 <script setup lang="ts">
-import TugiWidget from '@tugitark/vue-widget';
+import TugiWidget from '@tugi/vue-widget';
 
 interface Props {
 	getUserId: () => string;
@@ -86,6 +86,7 @@ async function jwtFn() {
 			homePageBackgroundColor: 'hsla(36, 100%, 37%, 0.2)',
 			homePageTextColor: '#2c3e50',
 		}"
+		language="EN"
 	/>
 </template>
 ```
@@ -111,6 +112,7 @@ The full list of properties that can be passed to the `<TugiWidget>` component a
 * `on-error` Optional.  An event callback triggered when an error occurs.  If this is not given all errors are printed to the console.
 * `open` Optional.  When `true` the widget is forced to be open.  When `false` it is forced to be closed.  When not specified normal user control resumes.
 * `visible` Optional.  When `false` the widget can't be seen.
+* `base-address` Optional.  The JWT and widget config are requested by default from `/.tugi/jwt/issue` and '/.tugi/config` respectively.  When given, the value of `baseAddress` will be prepended to these addresses to use (when, for example, `baseAddress is `/casino`) :`/casino/.tugi/jwt/issue` and `/casino/.tugi/config`.
 
 The following two properties should all be specified together.  If either of them is missing then nothing will happen:
 
@@ -127,7 +129,7 @@ If both `tugi-fn` and `user` are missing from the `<TugiWidget>` properties AND
 
 ```vue
 <script setup lang="js">
-import TugiWidget from '@tugitark/vue-widget';
+import TugiWidget from '@tugi/vue-widget';
 </script>
 
 <template>
@@ -203,7 +205,7 @@ While there can be only one widget on the page there can be multiple `<TugiWidge
 </template>
 ```
 
-[Click here](implementation.md) to see how this component wraps the underlying [@tugitark/declarative-widget](https://gitlab.com/tugitark/integration/libraries/javascript/declarative-widget) library in a react component.
+[Click here](implementation.md) to see how this component wraps the underlying [@tugi/declarative-widget](https://gitlab.com/tugitark-integration/libraries/javascript/declarative-widget) library in a react component.
 
-[Click here](https://gitlab.com/tugitark/integration/libraries/javascript/declarative-widget/implementation.md) to get a better understanding of everything that that library is doing behind the scenes to inject the main widget script in to a page and initialise it.
+[Click here](https://gitlab.com/tugitark-integration/libraries/javascript/declarative-widget/implementation.md) to get a better understanding of everything that that library is doing behind the scenes to inject the main widget script in to a page and initialise it.
 

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@tugitark/vue-widget",
-	"version": "1.5.5",
-	"description": "Wraps the tugitark widget in a Vue component.",
+	"version": "1.5.12",
+	"description": "Wraps the Tugi Widget in a Vue component.",
 	"scripts": {
 		"build": "npx esbuild index.ts --target=es6 --outfile=index.js && sed -i 's/\\bconst\\b/var/g' index.js && sed -i 's/\\blet\\b/var/g' index.js && npx esbuild index.js --allow-overwrite --minify --target=es5 --outfile=index.js && npx tsc --noErrorTruncation --declaration --emitDeclarationOnly --target es6 --module nodenext --moduleResolution nodenext --outDir . index.ts"
 	},
@@ -12,7 +12,7 @@
 		"index.md"
 	],
 	"dependencies": {
-		"@tugitark/declarative-widget": "^1.3.5"
+		"@tugitark/declarative-widget": "^1.3.10"
 	},
 	"peerDependencies": {
 		"vue": ">=0.0.0"
@@ -26,11 +26,16 @@
 		"Typescript",
 		"Vue",
 		"Tugitark",
+		"Tugi",
 		"Casino",
 		"Integration",
 		"JWT",
 		"Library"
 	],
+	"repository": {
+		"type": "git",
+		"url": "git+https://gitlab.com/tugitark-integration/libraries/javascript/vue-widget.git"
+	},
 	"author": "alex.cole@tugitark.com",
 	"license": "(c) 2026 Tugi Tark OÜ"
-}
+}