@tugitark/vue-widget 1.0.4 → 1.1.0

package/index.js

@@ -1,7 +1,93 @@
 // Copyright (c) 2026, TugiTark.  All rights reserved.
 
-/// <reference types="Widget" />
+import render from '@tugitark/declarative-widget';
 
-import Widget from './Widget.vue';
-export default Widget;
+// Weirdly, this way of declaring a `vue` component has absolutly no dependencies on `vue`...
+export default {
+	data() {
+		return {
+			firstTime_: true,
+			props_: {},
+			props_: {},
+		};
+	},
+	props: {
+		// Full props.
+		user: [String, null],
+		jwtFn: Function,
+		tenantId: String,
+		brandId: String,
+		brandName: String,
+		language: String,
+		customize: Object,
+		httpUrl: String,
+		wsUrl: String,
+		// Free props.
+		chatDisabledReason: String,
+		title: String,
+		body: String,
+		sections: Array,
+		// Display props.
+		open: {
+			type: Boolean,
+			default: undefined,
+		},
+		visible: {
+			type: Boolean,
+			default: undefined,
+		},
+		onNotification: Function,
+		onReady: Function,
+		onOpened: Function,
+		onClosed: Function,
+		onError: Function,
+		// Two of these are required to open a message.
+		proactiveMessage: String,
+		proactiveContext: String,
+		ticketLanguageCode: String,
+	},
+	methods: {
+		onNotification_(hasNotification) {
+			if (this.jwtFn == null && this.user == null) {
+				if (this.firstTime_) {
+					// Replicate FAQ internal behaviour at a per-component level.
+					this.onNotification?.(hasNotification);
+				}
+			} else {
+				this.onNotification?.(hasNotification);
+			}
+		},
+		onReady_() {
+			if (this.firstTime_) {
+				this.firstTime_ = false;
+				this.onReady?.();
+			}
+		},
+		onOpened_() { return this.onOpened?.(); },
+		onClosed_() { return this.onClosed?.(); },
+		onError_(e) { return this.onError?.(e); },
+	},
+	watc() {
+		return render(this.props_);
+	},
+	watch: {
+		$props: {
+			handler(props) {
+				render({
+					...props,
+					onNotification: this.onNotification_,
+					onReady: this.onReady_,
+					onOpened: this.onOpened_,
+					onClosed: this.onClosed_,
+					onError: this.onError_,
+				});
+			},
+			deep: true,
+			immediate: true,
+		},
+	},
+	render() {
+		return null;
+	},
+};
 

package/index.md

@@ -24,14 +24,14 @@ const props = defineProps({
 <template>
 	<TugiWidget
 		:user="props.userId"
-		brand_id="a040050697fc4b2db16acfbbad1d0da4"
-		brand_name="Super Casino"
-		tenant_id="gb-casinos-ltd"
+		brand-id="a040050697fc4b2db16acfbbad1d0da4"
+		brand-name="Super Casino"
+		tenant-id="gb-casinos-ltd"
 	/>
 </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 `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.
+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 `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.
 
 `user` is the ID within your system of the current player.  How you determine the current player's unique ID depends entirely on your system and is left as a provided parameter here.  This is the ID that the widget will internally pass to the `/.tugi/jwt/issue` endpoint to retrieve the player's profile, and so must in some way identify an end-user on your server.
 
@@ -63,9 +63,9 @@ async function jwtFn() {
 <template>
 	<TugiWidget
 		:jwt-fn="jwtFn"
-		brand_id="a040050697fc4b2db16acfbbad1d0da4"
-		brand_name="Super Casino"
-		tenant_id="gb-casinos-ltd"
+		brand-id="a040050697fc4b2db16acfbbad1d0da4"
+		brand-name="Super Casino"
+		tenant-id="gb-casinos-ltd"
 		http-url="https://app.tugi.ai/tugi.widget"
 		ws-url="wss://ws.tugi.ai"
 		:customize="{

package/package.json

@@ -1,18 +1,17 @@
 {
 	"name": "@tugitark/vue-widget",
-	"version": "1.0.4",
+	"version": "1.1.0",
 	"description": "Wraps the tugitark widget in a Vue component.",
-	"scripts": {
-		"release": "npm publish --access public"
-	},
 	"files": [
 		"Widget.vue",
 		"index.js",
 		"index.md"
 	],
 	"dependencies": {
-		"@tugitark/declarative-widget": "^1.0.0",
-		"vue": "^3.3.0"
+		"@tugitark/declarative-widget": "^1.0.1"
+	},
+	"peerDependencies": {
+		"vue": ">=0.0.0"
 	},
 	"keywords": [
 		"Typescript",

package/Widget.vue

@@ -1,43 +0,0 @@
-// Copyright (c) 2026, TugiTark.  All rights reserved.
-
-<script setup lang="ts">
-	/// <reference types="Widget" />
-
-	import { watch, ref, onMounted, onUnmounted } from 'vue';
-	import render, { Props } from '@tugitark/declarative-widget';
-
-	// Weird vue behaviour with optional boolean props.	Ensure they don't default to `false`.
-	const props = withDefaults(defineProps<Props>(), {
-		open: void 0,
-		visible: void 0,
-	});
-
-	// Is this the first time this component has been rendered ever?
-	const firstTime = ref(true);
-
-	function onNotification(hasNotification: boolean) {
-		if (props.jwtFn == null && props.user == null) {
-			if (firstTime.value) {
-				// Replicate FAQ internal behaviour at a per-component level.
-				props.onNotification?.(hasNotification);
-			}
-		}
-	}
-
-	function onReady() {
-		if (firstTime.value) {
-			firstTime.value = false;
-			props.onReady?.();
-		}
-	}
-
-	watch(props, (p) => render({ ...p, onReady, onNotification }), { deep: true, immediate: true });
-
-	// Listen for events that require us to re-initialise the widget.
-	//onMounted(reloadScript);
-	//onUnmounted(unloadScript);
-</script>
-
-<template>
-</template>
-