@weldsuite/helpdesk-widget-sdk 1.0.2

package/frameworks/vue/index.ts

@@ -0,0 +1,47 @@
+/**
+ * Vue 3 integration for Helpdesk Widget SDK
+ *
+ * @example
+ * ```vue
+ * // Using the component
+ * <script setup>
+ * import { HelpdeskWidget } from '@weldsuite/helpdesk-widget-sdk/vue';
+ * </script>
+ *
+ * <template>
+ *   <HelpdeskWidget widget-id="your-widget-id" />
+ * </template>
+ * ```
+ *
+ * @example
+ * ```vue
+ * // Using the composable
+ * <script setup lang="ts">
+ * import { useHelpdeskWidget } from '@weldsuite/helpdesk-widget-sdk/vue';
+ *
+ * const widget = useHelpdeskWidget({ widgetId: 'your-widget-id' });
+ * </script>
+ *
+ * <template>
+ *   <button @click="widget?.open()">Show Support</button>
+ * </template>
+ * ```
+ */
+
+export { default as HelpdeskWidget } from './HelpdeskWidget.vue';
+export { useHelpdeskWidget, useHelpdeskWidgetControls } from './useHelpdeskWidget';
+
+// Re-export core types and configs for convenience
+export type {
+  WeldConfig,
+  HelpdeskWidgetConfig,
+  WidgetEventType,
+  WidgetEvent,
+  WidgetEventHandler,
+} from '../../src/index';
+
+export {
+  DEFAULT_CONFIG,
+  WeldSDK,
+  HelpdeskWidget as HelpdeskWidgetClass,
+} from '../../src/index';

package/frameworks/vue/shims-vue.d.ts

@@ -0,0 +1,5 @@
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue';
+  const component: DefineComponent<{}, {}, any>;
+  export default component;
+}

package/frameworks/vue/useHelpdeskWidget.ts

@@ -0,0 +1,90 @@
+import { onMounted, onUnmounted, ref } from 'vue';
+import { WeldSDK, type WeldConfig } from '../../src/index';
+
+/**
+ * Vue 3 composable for the Helpdesk Widget
+ *
+ * @example
+ * ```vue
+ * <script setup lang="ts">
+ * import { useHelpdeskWidget } from '@weldsuite/helpdesk-widget-sdk/vue';
+ *
+ * const widget = useHelpdeskWidget({ widgetId: 'your-widget-id' });
+ * </script>
+ *
+ * <template>
+ *   <button @click="widget?.open()">Show Support</button>
+ * </template>
+ * ```
+ */
+export function useHelpdeskWidget(config: WeldConfig) {
+  const widget = ref<WeldSDK | null>(null);
+
+  onMounted(() => {
+    try {
+      widget.value = new WeldSDK(config);
+      widget.value.init();
+    } catch (error) {
+      console.error('Failed to initialize Helpdesk Widget:', error);
+    }
+  });
+
+  onUnmounted(() => {
+    if (widget.value) {
+      widget.value.destroy();
+      widget.value = null;
+    }
+  });
+
+  return widget;
+}
+
+/**
+ * Composable that provides widget control methods
+ *
+ * @example
+ * ```vue
+ * <script setup lang="ts">
+ * import { useHelpdeskWidgetControls } from '@weldsuite/helpdesk-widget-sdk/vue';
+ *
+ * const { open, close, toggle } = useHelpdeskWidgetControls({
+ *   widgetId: 'your-widget-id'
+ * });
+ * </script>
+ *
+ * <template>
+ *   <div>
+ *     <button @click="open">Show Support</button>
+ *     <button @click="close">Hide Support</button>
+ *     <button @click="toggle">Toggle Support</button>
+ *   </div>
+ * </template>
+ * ```
+ */
+export function useHelpdeskWidgetControls(config: WeldConfig) {
+  const widget = useHelpdeskWidget(config);
+
+  const open = () => {
+    widget.value?.open();
+  };
+
+  const close = () => {
+    widget.value?.close();
+  };
+
+  const toggle = () => {
+    widget.value?.toggle();
+  };
+
+  const sendMessage = (message: string) => {
+    widget.value?.sendMessage(message);
+  };
+
+  return {
+    widget,
+    open,
+    close,
+    toggle,
+    sendMessage,
+  };
+}

package/package.json

@@ -0,0 +1,102 @@
+{
+  "name": "@weldsuite/helpdesk-widget-sdk",
+  "version": "1.0.2",
+  "description": "Easy-to-use helpdesk widget SDK that loads via iframe",
+  "main": "dist/index.js",
+  "module": "dist/index.esm.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.esm.js",
+      "require": "./dist/index.js"
+    },
+    "./react": {
+      "types": "./dist/react.d.ts",
+      "import": "./dist/react.esm.js",
+      "require": "./dist/react.js"
+    },
+    "./vue": {
+      "types": "./frameworks/vue/index.ts",
+      "import": "./frameworks/vue/index.ts",
+      "require": "./frameworks/vue/index.ts"
+    },
+    "./angular": {
+      "types": "./dist/angular.d.ts",
+      "import": "./dist/angular.esm.js",
+      "require": "./dist/angular.js"
+    },
+    "./svelte": {
+      "types": "./frameworks/svelte/index.ts",
+      "svelte": "./frameworks/svelte/HelpdeskWidget.svelte",
+      "import": "./frameworks/svelte/index.ts",
+      "require": "./frameworks/svelte/index.ts"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "frameworks/vue",
+    "frameworks/svelte",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "build": "rollup -c",
+    "dev": "rollup -c -w",
+    "typecheck": "tsc --noEmit",
+    "prepublishOnly": "pnpm run build"
+  },
+  "keywords": [
+    "helpdesk",
+    "widget",
+    "chat",
+    "customer-support",
+    "iframe",
+    "embed",
+    "sdk"
+  ],
+  "author": "WeldSuite",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/weldcorporation/weldsuite.git",
+    "directory": "packages/helpdesk-widget-sdk"
+  },
+  "devDependencies": {
+    "@rollup/plugin-json": "^6.1.0",
+    "@rollup/plugin-typescript": "^11.1.6",
+    "@types/node": "^20.11.5",
+    "rollup": "^4.9.6",
+    "rollup-plugin-dts": "^6.1.0",
+    "tslib": "^2.6.2",
+    "typescript": "^5.3.3"
+  },
+  "peerDependencies": {
+    "@angular/core": ">=14.0.0",
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0",
+    "svelte": ">=3.0.0",
+    "vue": ">=3.0.0"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    },
+    "react-dom": {
+      "optional": true
+    },
+    "vue": {
+      "optional": true
+    },
+    "@angular/core": {
+      "optional": true
+    },
+    "svelte": {
+      "optional": true
+    }
+  },
+  "engines": {
+    "node": ">=18.0.0"
+  }
+}