@feedvalue/vue 0.1.0

package/README.md

@@ -0,0 +1,248 @@
+# @feedvalue/vue
+
+Vue SDK for FeedValue feedback widget. Provides Plugin and Composables for Vue 3+.
+
+## Installation
+
+```bash
+npm install @feedvalue/vue
+# or
+pnpm add @feedvalue/vue
+# or
+yarn add @feedvalue/vue
+```
+
+## Usage
+
+### Setup with Plugin
+
+```typescript
+// main.ts
+import { createApp } from 'vue';
+import { createFeedValue } from '@feedvalue/vue';
+import App from './App.vue';
+
+const app = createApp(App);
+
+app.use(createFeedValue({
+  widgetId: 'your-widget-id',
+  config: {
+    theme: 'auto',
+  },
+}));
+
+app.mount('#app');
+```
+
+### Using the Composable
+
+```vue
+<script setup>
+import { useFeedValue } from '@feedvalue/vue';
+
+const { open, isReady, isOpen } = useFeedValue();
+</script>
+
+<template>
+  <button @click="open" :disabled="!isReady">
+    {{ isOpen ? 'Close' : 'Give Feedback' }}
+  </button>
+</template>
+```
+
+### Standalone Usage (No Plugin)
+
+```vue
+<script setup>
+import { useFeedValue } from '@feedvalue/vue';
+
+// Pass widgetId directly when not using plugin
+const { open, isReady } = useFeedValue('your-widget-id');
+</script>
+
+<template>
+  <button @click="open" :disabled="!isReady">
+    Feedback
+  </button>
+</template>
+```
+
+### Programmatic Submission
+
+```vue
+<script setup>
+import { ref } from 'vue';
+import { useFeedValue } from '@feedvalue/vue';
+
+const { submit, isSubmitting, error } = useFeedValue();
+const message = ref('');
+
+async function handleSubmit() {
+  try {
+    await submit({ message: message.value });
+    message.value = '';
+    console.log('Feedback submitted!');
+  } catch (err) {
+    console.error('Failed:', err);
+  }
+}
+</script>
+
+<template>
+  <form @submit.prevent="handleSubmit">
+    <textarea v-model="message" placeholder="Your feedback..." />
+    <button type="submit" :disabled="isSubmitting">
+      {{ isSubmitting ? 'Submitting...' : 'Submit' }}
+    </button>
+    <p v-if="error" class="error">{{ error.message }}</p>
+  </form>
+</template>
+```
+
+### User Identification
+
+```vue
+<script setup>
+import { watch } from 'vue';
+import { useFeedValue } from '@feedvalue/vue';
+
+const props = defineProps<{ user: User | null }>();
+const { identify, setData, reset } = useFeedValue();
+
+watch(() => props.user, (user) => {
+  if (user) {
+    identify(user.id, {
+      name: user.name,
+      email: user.email,
+      plan: user.plan,
+    });
+    setData({ company: user.company });
+  } else {
+    reset();
+  }
+}, { immediate: true });
+</script>
+```
+
+### Options API Support
+
+```vue
+<script>
+export default {
+  methods: {
+    openFeedback() {
+      // Access via global property
+      this.$feedvalue?.open();
+    },
+  },
+};
+</script>
+
+<template>
+  <button @click="openFeedback">Feedback</button>
+</template>
+```
+
+## API Reference
+
+### `createFeedValue(options)`
+
+Creates a Vue plugin for FeedValue.
+
+| Option | Type | Required | Description |
+|--------|------|----------|-------------|
+| `widgetId` | `string` | Yes | Widget ID from FeedValue dashboard |
+| `apiBaseUrl` | `string` | No | Custom API URL (for self-hosted) |
+| `config` | `Partial<FeedValueConfig>` | No | Configuration overrides |
+
+### `useFeedValue(widgetId?, config?)`
+
+Composable to access FeedValue functionality.
+
+**Parameters:**
+
+| Param | Type | Description |
+|-------|------|-------------|
+| `widgetId` | `string` | Optional widget ID (not needed if plugin is installed) |
+| `config` | `Partial<FeedValueConfig>` | Optional config overrides |
+
+**Returns:**
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `instance` | `Readonly<ShallowRef<FeedValueInstance \| null>>` | Raw instance |
+| `isReady` | `Readonly<Ref<boolean>>` | Widget initialized |
+| `isOpen` | `Readonly<Ref<boolean>>` | Modal is open |
+| `isVisible` | `Readonly<Ref<boolean>>` | Trigger is visible |
+| `error` | `Readonly<Ref<Error \| null>>` | Current error |
+| `isSubmitting` | `Readonly<Ref<boolean>>` | Submission in progress |
+| `open` | `() => void` | Open modal |
+| `close` | `() => void` | Close modal |
+| `toggle` | `() => void` | Toggle modal |
+| `show` | `() => void` | Show trigger |
+| `hide` | `() => void` | Hide trigger |
+| `submit` | `(feedback) => Promise<void>` | Submit feedback |
+| `identify` | `(userId, traits?) => void` | Identify user |
+| `setData` | `(data) => void` | Set user data |
+| `reset` | `() => void` | Reset user data |
+
+### Injection Keys
+
+For advanced usage with `inject()`:
+
+```typescript
+import { inject } from 'vue';
+import { FEEDVALUE_KEY, FEEDVALUE_OPTIONS_KEY } from '@feedvalue/vue';
+
+// Get raw FeedValue instance
+const instance = inject(FEEDVALUE_KEY);
+
+// Get plugin options
+const options = inject(FEEDVALUE_OPTIONS_KEY);
+```
+
+## Nuxt 3 Integration
+
+Create a plugin file:
+
+```typescript
+// plugins/feedvalue.client.ts
+import { createFeedValue } from '@feedvalue/vue';
+
+export default defineNuxtPlugin((nuxtApp) => {
+  nuxtApp.vueApp.use(createFeedValue({
+    widgetId: 'your-widget-id',
+  }));
+});
+```
+
+The `.client.ts` suffix ensures the plugin only runs on the client side.
+
+## SSR Support
+
+The SDK handles SSR automatically:
+- Plugin only initializes on client side
+- Composable returns safe defaults during SSR
+- No hydration mismatches
+
+```vue
+<script setup>
+import { useFeedValue } from '@feedvalue/vue';
+
+const { isReady } = useFeedValue();
+// isReady.value is false during SSR
+</script>
+
+<template>
+  <!-- Safe to use in SSR context -->
+  <button :disabled="!isReady">Feedback</button>
+</template>
+```
+
+## Requirements
+
+- Vue 3.3.0 or higher
+
+## License
+
+MIT

package/dist/index.cjs

@@ -0,0 +1,116 @@
+'use strict';
+
+var core = require('@feedvalue/core');
+var vue = require('vue');
+
+// src/plugin.ts
+var FEEDVALUE_KEY = /* @__PURE__ */ Symbol("feedvalue");
+var FEEDVALUE_OPTIONS_KEY = /* @__PURE__ */ Symbol("feedvalue-options");
+function createFeedValue(options) {
+  let instance = null;
+  return {
+    install(app) {
+      if (typeof window !== "undefined") {
+        instance = core.FeedValue.init({
+          widgetId: options.widgetId,
+          apiBaseUrl: options.apiBaseUrl,
+          config: options.config,
+          headless: options.headless
+        });
+        app.provide(FEEDVALUE_KEY, instance);
+        app.config.globalProperties.$feedvalue = instance;
+      }
+      app.provide(FEEDVALUE_OPTIONS_KEY, options);
+    }
+  };
+}
+function useFeedValue(widgetId, config) {
+  const injectedInstance = vue.inject(FEEDVALUE_KEY, null);
+  const injectedOptions = vue.inject(FEEDVALUE_OPTIONS_KEY, null);
+  const instance = vue.shallowRef(null);
+  const isReady = vue.ref(false);
+  const isOpen = vue.ref(false);
+  const isVisible = vue.ref(false);
+  const error = vue.ref(null);
+  const isSubmitting = vue.ref(false);
+  const isHeadless = vue.ref(false);
+  let ownsInstance = false;
+  let unsubscribe = null;
+  const syncState = () => {
+    const state = instance.value?.getSnapshot();
+    if (state) {
+      isReady.value = state.isReady;
+      isOpen.value = state.isOpen;
+      isVisible.value = state.isVisible;
+      error.value = state.error;
+      isSubmitting.value = state.isSubmitting;
+    }
+  };
+  vue.onMounted(() => {
+    if (injectedInstance && !widgetId) {
+      instance.value = injectedInstance;
+      isHeadless.value = injectedInstance.isHeadless();
+    } else {
+      const effectiveWidgetId = widgetId ?? injectedOptions?.widgetId;
+      if (!effectiveWidgetId) {
+        console.error(
+          "[FeedValue] No widgetId provided. Either install the plugin with createFeedValue() or pass widgetId to useFeedValue()."
+        );
+        return;
+      }
+      instance.value = core.FeedValue.init({
+        widgetId: effectiveWidgetId,
+        apiBaseUrl: injectedOptions?.apiBaseUrl,
+        config: config ?? injectedOptions?.config,
+        headless: injectedOptions?.headless
+      });
+      ownsInstance = true;
+    }
+    if (instance.value) {
+      unsubscribe = instance.value.subscribe(syncState);
+      isHeadless.value = instance.value.isHeadless();
+      syncState();
+    }
+  });
+  vue.onUnmounted(() => {
+    unsubscribe?.();
+    if (ownsInstance && instance.value) {
+      instance.value.destroy();
+    }
+    instance.value = null;
+  });
+  const open = () => instance.value?.open();
+  const close = () => instance.value?.close();
+  const toggle = () => instance.value?.toggle();
+  const show = () => instance.value?.show();
+  const hide = () => instance.value?.hide();
+  const submit = (feedback) => instance.value?.submit(feedback) ?? Promise.reject(new Error("Not initialized"));
+  const identify = (userId, traits) => instance.value?.identify(userId, traits);
+  const setData = (data) => instance.value?.setData(data);
+  const reset = () => instance.value?.reset();
+  return {
+    instance: vue.readonly(instance),
+    isReady: vue.readonly(isReady),
+    isOpen: vue.readonly(isOpen),
+    isVisible: vue.readonly(isVisible),
+    error: vue.readonly(error),
+    isSubmitting: vue.readonly(isSubmitting),
+    isHeadless: vue.readonly(isHeadless),
+    open,
+    close,
+    toggle,
+    show,
+    hide,
+    submit,
+    identify,
+    setData,
+    reset
+  };
+}
+
+exports.FEEDVALUE_KEY = FEEDVALUE_KEY;
+exports.FEEDVALUE_OPTIONS_KEY = FEEDVALUE_OPTIONS_KEY;
+exports.createFeedValue = createFeedValue;
+exports.useFeedValue = useFeedValue;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/plugin.ts","../src/composables.ts"],"names":["FeedValue","inject","shallowRef","ref","onMounted","onUnmounted","readonly"],"mappings":"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","file":"index.cjs","sourcesContent":["/**\n * @feedvalue/vue - Plugin\n *\n * Vue plugin for FeedValue. Provides app-level configuration\n * and automatic initialization.\n */\n\nimport type { App, InjectionKey } from 'vue';\nimport { FeedValue, type FeedValueConfig, type FeedValueInstance } from '@feedvalue/core';\n\n/**\n * Plugin options\n */\nexport interface FeedValuePluginOptions {\n  /** Widget ID from FeedValue dashboard */\n  widgetId: string;\n  /** API base URL (for self-hosted) */\n  apiBaseUrl?: string;\n  /** Configuration overrides */\n  config?: Partial<FeedValueConfig>;\n  /**\n   * Headless mode - disables all DOM rendering.\n   * Use this when you want full control over the UI.\n   * The SDK will still fetch config and provide all API methods\n   * but won't render any trigger button or modal.\n   *\n   * @default false\n   */\n  headless?: boolean;\n}\n\n/**\n * Injection key for FeedValue instance\n */\nexport const FEEDVALUE_KEY: InjectionKey<FeedValueInstance> = Symbol('feedvalue');\n\n/**\n * Injection key for widget ID (used by useFeedValue when no instance is injected)\n */\nexport const FEEDVALUE_OPTIONS_KEY: InjectionKey<FeedValuePluginOptions> = Symbol('feedvalue-options');\n\n/**\n * Create FeedValue Vue plugin\n *\n * @example\n * ```ts\n * // main.ts\n * import { createApp } from 'vue';\n * import { createFeedValue } from '@feedvalue/vue';\n * import App from './App.vue';\n *\n * const app = createApp(App);\n *\n * app.use(createFeedValue({\n *   widgetId: 'your-widget-id',\n *   config: { theme: 'dark' }\n * }));\n *\n * app.mount('#app');\n * ```\n */\nexport function createFeedValue(options: FeedValuePluginOptions) {\n  let instance: FeedValueInstance | null = null;\n\n  return {\n    install(app: App) {\n      // Only initialize on client side\n      if (typeof window !== 'undefined') {\n        instance = FeedValue.init({\n          widgetId: options.widgetId,\n          apiBaseUrl: options.apiBaseUrl,\n          config: options.config,\n          headless: options.headless,\n        });\n\n        // Provide instance to all components\n        app.provide(FEEDVALUE_KEY, instance);\n\n        // Also provide to global properties for Options API access\n        app.config.globalProperties.$feedvalue = instance;\n      }\n\n      // Always provide options (for SSR where we don't initialize)\n      app.provide(FEEDVALUE_OPTIONS_KEY, options);\n    },\n  };\n}\n\n/**\n * Type augmentation for global properties\n */\ndeclare module 'vue' {\n  interface ComponentCustomProperties {\n    $feedvalue: FeedValueInstance | undefined;\n  }\n}\n","/**\n * @feedvalue/vue - Composables\n *\n * Vue composables for FeedValue. Provides reactive state and methods.\n */\n\nimport {\n  ref,\n  shallowRef,\n  readonly,\n  onMounted,\n  onUnmounted,\n  inject,\n  type Ref,\n  type ShallowRef,\n} from 'vue';\nimport {\n  FeedValue,\n  type FeedValueConfig,\n  type FeedValueInstance,\n  type FeedbackData,\n  type UserTraits,\n} from '@feedvalue/core';\nimport { FEEDVALUE_KEY, FEEDVALUE_OPTIONS_KEY } from './plugin';\n\n/**\n * Return type for useFeedValue composable\n */\nexport interface UseFeedValueReturn {\n  /** FeedValue instance (for advanced usage) */\n  instance: Readonly<ShallowRef<FeedValueInstance | null>>;\n  /** Widget is ready */\n  isReady: Readonly<Ref<boolean>>;\n  /** Modal is open */\n  isOpen: Readonly<Ref<boolean>>;\n  /** Widget is visible */\n  isVisible: Readonly<Ref<boolean>>;\n  /** Current error */\n  error: Readonly<Ref<Error | null>>;\n  /** Submission in progress */\n  isSubmitting: Readonly<Ref<boolean>>;\n  /** Running in headless mode (no default UI rendered) */\n  isHeadless: Readonly<Ref<boolean>>;\n  /** Open the feedback modal */\n  open: () => void;\n  /** Close the feedback modal */\n  close: () => void;\n  /** Toggle the feedback modal */\n  toggle: () => void;\n  /** Show the trigger button */\n  show: () => void;\n  /** Hide the trigger button */\n  hide: () => void;\n  /** Submit feedback programmatically */\n  submit: (feedback: Partial<FeedbackData>) => Promise<void>;\n  /** Identify user */\n  identify: (userId: string, traits?: UserTraits) => void;\n  /** Set user data */\n  setData: (data: Record<string, string>) => void;\n  /** Reset user data */\n  reset: () => void;\n}\n\n/**\n * FeedValue composable\n *\n * Can be used with or without plugin. If plugin is installed, uses the\n * provided instance. Otherwise, creates a new instance.\n *\n * @example\n * ```vue\n * <script setup>\n * import { useFeedValue } from '@feedvalue/vue';\n *\n * // With plugin installed\n * const { open, isReady } = useFeedValue();\n *\n * // Or standalone with widgetId\n * const { open, isReady } = useFeedValue('your-widget-id');\n * </script>\n *\n * <template>\n *   <button @click=\"open\" :disabled=\"!isReady\">\n *     Give Feedback\n *   </button>\n * </template>\n * ```\n */\nexport function useFeedValue(\n  widgetId?: string,\n  config?: Partial<FeedValueConfig>\n): UseFeedValueReturn {\n  // Try to inject instance from plugin\n  const injectedInstance = inject(FEEDVALUE_KEY, null);\n  const injectedOptions = inject(FEEDVALUE_OPTIONS_KEY, null);\n\n  // Refs for reactive state\n  const instance = shallowRef<FeedValueInstance | null>(null);\n  const isReady = ref(false);\n  const isOpen = ref(false);\n  const isVisible = ref(false);\n  const error = ref<Error | null>(null);\n  const isSubmitting = ref(false);\n  const isHeadless = ref(false);\n\n  // Track if we own the instance (need to destroy on unmount)\n  let ownsInstance = false;\n  let unsubscribe: (() => void) | null = null;\n\n  /**\n   * Sync reactive state from instance\n   */\n  const syncState = () => {\n    const state = instance.value?.getSnapshot();\n    if (state) {\n      isReady.value = state.isReady;\n      isOpen.value = state.isOpen;\n      isVisible.value = state.isVisible;\n      error.value = state.error;\n      isSubmitting.value = state.isSubmitting;\n    }\n  };\n\n  onMounted(() => {\n    // Use injected instance if available and no widgetId override\n    if (injectedInstance && !widgetId) {\n      instance.value = injectedInstance;\n      isHeadless.value = injectedInstance.isHeadless();\n    } else {\n      // Create new instance\n      const effectiveWidgetId = widgetId ?? injectedOptions?.widgetId;\n\n      if (!effectiveWidgetId) {\n        console.error(\n          '[FeedValue] No widgetId provided. Either install the plugin with createFeedValue() ' +\n            'or pass widgetId to useFeedValue().'\n        );\n        return;\n      }\n\n      instance.value = FeedValue.init({\n        widgetId: effectiveWidgetId,\n        apiBaseUrl: injectedOptions?.apiBaseUrl,\n        config: config ?? injectedOptions?.config,\n        headless: injectedOptions?.headless,\n      });\n      ownsInstance = true;\n    }\n\n    // Subscribe to state changes\n    if (instance.value) {\n      unsubscribe = instance.value.subscribe(syncState);\n      isHeadless.value = instance.value.isHeadless();\n      syncState(); // Initial sync\n    }\n  });\n\n  onUnmounted(() => {\n    unsubscribe?.();\n    if (ownsInstance && instance.value) {\n      instance.value.destroy();\n    }\n    instance.value = null;\n  });\n\n  // Methods that delegate to instance\n  const open = () => instance.value?.open();\n  const close = () => instance.value?.close();\n  const toggle = () => instance.value?.toggle();\n  const show = () => instance.value?.show();\n  const hide = () => instance.value?.hide();\n  const submit = (feedback: Partial<FeedbackData>) =>\n    instance.value?.submit(feedback) ?? Promise.reject(new Error('Not initialized'));\n  const identify = (userId: string, traits?: UserTraits) =>\n    instance.value?.identify(userId, traits);\n  const setData = (data: Record<string, string>) => instance.value?.setData(data);\n  const reset = () => instance.value?.reset();\n\n  return {\n    instance: readonly(instance),\n    isReady: readonly(isReady),\n    isOpen: readonly(isOpen),\n    isVisible: readonly(isVisible),\n    error: readonly(error),\n    isSubmitting: readonly(isSubmitting),\n    isHeadless: readonly(isHeadless),\n    open,\n    close,\n    toggle,\n    show,\n    hide,\n    submit,\n    identify,\n    setData,\n    reset,\n  };\n}\n"]}

package/dist/index.d.cts

@@ -0,0 +1,142 @@
+import { InjectionKey, App, ShallowRef, Ref } from 'vue';
+import { FeedValueInstance, FeedValueConfig, FeedbackData, UserTraits } from '@feedvalue/core';
+export { FeedValueConfig, FeedValueEvents, FeedValueState, FeedbackData, FeedbackMetadata, UserData, UserTraits } from '@feedvalue/core';
+
+/**
+ * @feedvalue/vue - Plugin
+ *
+ * Vue plugin for FeedValue. Provides app-level configuration
+ * and automatic initialization.
+ */
+
+/**
+ * Plugin options
+ */
+interface FeedValuePluginOptions {
+    /** Widget ID from FeedValue dashboard */
+    widgetId: string;
+    /** API base URL (for self-hosted) */
+    apiBaseUrl?: string;
+    /** Configuration overrides */
+    config?: Partial<FeedValueConfig>;
+    /**
+     * Headless mode - disables all DOM rendering.
+     * Use this when you want full control over the UI.
+     * The SDK will still fetch config and provide all API methods
+     * but won't render any trigger button or modal.
+     *
+     * @default false
+     */
+    headless?: boolean;
+}
+/**
+ * Injection key for FeedValue instance
+ */
+declare const FEEDVALUE_KEY: InjectionKey<FeedValueInstance>;
+/**
+ * Injection key for widget ID (used by useFeedValue when no instance is injected)
+ */
+declare const FEEDVALUE_OPTIONS_KEY: InjectionKey<FeedValuePluginOptions>;
+/**
+ * Create FeedValue Vue plugin
+ *
+ * @example
+ * ```ts
+ * // main.ts
+ * import { createApp } from 'vue';
+ * import { createFeedValue } from '@feedvalue/vue';
+ * import App from './App.vue';
+ *
+ * const app = createApp(App);
+ *
+ * app.use(createFeedValue({
+ *   widgetId: 'your-widget-id',
+ *   config: { theme: 'dark' }
+ * }));
+ *
+ * app.mount('#app');
+ * ```
+ */
+declare function createFeedValue(options: FeedValuePluginOptions): {
+    install(app: App): void;
+};
+/**
+ * Type augmentation for global properties
+ */
+declare module 'vue' {
+    interface ComponentCustomProperties {
+        $feedvalue: FeedValueInstance | undefined;
+    }
+}
+
+/**
+ * @feedvalue/vue - Composables
+ *
+ * Vue composables for FeedValue. Provides reactive state and methods.
+ */
+
+/**
+ * Return type for useFeedValue composable
+ */
+interface UseFeedValueReturn {
+    /** FeedValue instance (for advanced usage) */
+    instance: Readonly<ShallowRef<FeedValueInstance | null>>;
+    /** Widget is ready */
+    isReady: Readonly<Ref<boolean>>;
+    /** Modal is open */
+    isOpen: Readonly<Ref<boolean>>;
+    /** Widget is visible */
+    isVisible: Readonly<Ref<boolean>>;
+    /** Current error */
+    error: Readonly<Ref<Error | null>>;
+    /** Submission in progress */
+    isSubmitting: Readonly<Ref<boolean>>;
+    /** Running in headless mode (no default UI rendered) */
+    isHeadless: Readonly<Ref<boolean>>;
+    /** Open the feedback modal */
+    open: () => void;
+    /** Close the feedback modal */
+    close: () => void;
+    /** Toggle the feedback modal */
+    toggle: () => void;
+    /** Show the trigger button */
+    show: () => void;
+    /** Hide the trigger button */
+    hide: () => void;
+    /** Submit feedback programmatically */
+    submit: (feedback: Partial<FeedbackData>) => Promise<void>;
+    /** Identify user */
+    identify: (userId: string, traits?: UserTraits) => void;
+    /** Set user data */
+    setData: (data: Record<string, string>) => void;
+    /** Reset user data */
+    reset: () => void;
+}
+/**
+ * FeedValue composable
+ *
+ * Can be used with or without plugin. If plugin is installed, uses the
+ * provided instance. Otherwise, creates a new instance.
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * import { useFeedValue } from '@feedvalue/vue';
+ *
+ * // With plugin installed
+ * const { open, isReady } = useFeedValue();
+ *
+ * // Or standalone with widgetId
+ * const { open, isReady } = useFeedValue('your-widget-id');
+ * </script>
+ *
+ * <template>
+ *   <button @click="open" :disabled="!isReady">
+ *     Give Feedback
+ *   </button>
+ * </template>
+ * ```
+ */
+declare function useFeedValue(widgetId?: string, config?: Partial<FeedValueConfig>): UseFeedValueReturn;
+
+export { FEEDVALUE_KEY, FEEDVALUE_OPTIONS_KEY, type FeedValuePluginOptions, type UseFeedValueReturn, createFeedValue, useFeedValue };

package/dist/index.d.ts

@@ -0,0 +1,142 @@
+import { InjectionKey, App, ShallowRef, Ref } from 'vue';
+import { FeedValueInstance, FeedValueConfig, FeedbackData, UserTraits } from '@feedvalue/core';
+export { FeedValueConfig, FeedValueEvents, FeedValueState, FeedbackData, FeedbackMetadata, UserData, UserTraits } from '@feedvalue/core';
+
+/**
+ * @feedvalue/vue - Plugin
+ *
+ * Vue plugin for FeedValue. Provides app-level configuration
+ * and automatic initialization.
+ */
+
+/**
+ * Plugin options
+ */
+interface FeedValuePluginOptions {
+    /** Widget ID from FeedValue dashboard */
+    widgetId: string;
+    /** API base URL (for self-hosted) */
+    apiBaseUrl?: string;
+    /** Configuration overrides */
+    config?: Partial<FeedValueConfig>;
+    /**
+     * Headless mode - disables all DOM rendering.
+     * Use this when you want full control over the UI.
+     * The SDK will still fetch config and provide all API methods
+     * but won't render any trigger button or modal.
+     *
+     * @default false
+     */
+    headless?: boolean;
+}
+/**
+ * Injection key for FeedValue instance
+ */
+declare const FEEDVALUE_KEY: InjectionKey<FeedValueInstance>;
+/**
+ * Injection key for widget ID (used by useFeedValue when no instance is injected)
+ */
+declare const FEEDVALUE_OPTIONS_KEY: InjectionKey<FeedValuePluginOptions>;
+/**
+ * Create FeedValue Vue plugin
+ *
+ * @example
+ * ```ts
+ * // main.ts
+ * import { createApp } from 'vue';
+ * import { createFeedValue } from '@feedvalue/vue';
+ * import App from './App.vue';
+ *
+ * const app = createApp(App);
+ *
+ * app.use(createFeedValue({
+ *   widgetId: 'your-widget-id',
+ *   config: { theme: 'dark' }
+ * }));
+ *
+ * app.mount('#app');
+ * ```
+ */
+declare function createFeedValue(options: FeedValuePluginOptions): {
+    install(app: App): void;
+};
+/**
+ * Type augmentation for global properties
+ */
+declare module 'vue' {
+    interface ComponentCustomProperties {
+        $feedvalue: FeedValueInstance | undefined;
+    }
+}
+
+/**
+ * @feedvalue/vue - Composables
+ *
+ * Vue composables for FeedValue. Provides reactive state and methods.
+ */
+
+/**
+ * Return type for useFeedValue composable
+ */
+interface UseFeedValueReturn {
+    /** FeedValue instance (for advanced usage) */
+    instance: Readonly<ShallowRef<FeedValueInstance | null>>;
+    /** Widget is ready */
+    isReady: Readonly<Ref<boolean>>;
+    /** Modal is open */
+    isOpen: Readonly<Ref<boolean>>;
+    /** Widget is visible */
+    isVisible: Readonly<Ref<boolean>>;
+    /** Current error */
+    error: Readonly<Ref<Error | null>>;
+    /** Submission in progress */
+    isSubmitting: Readonly<Ref<boolean>>;
+    /** Running in headless mode (no default UI rendered) */
+    isHeadless: Readonly<Ref<boolean>>;
+    /** Open the feedback modal */
+    open: () => void;
+    /** Close the feedback modal */
+    close: () => void;
+    /** Toggle the feedback modal */
+    toggle: () => void;
+    /** Show the trigger button */
+    show: () => void;
+    /** Hide the trigger button */
+    hide: () => void;
+    /** Submit feedback programmatically */
+    submit: (feedback: Partial<FeedbackData>) => Promise<void>;
+    /** Identify user */
+    identify: (userId: string, traits?: UserTraits) => void;
+    /** Set user data */
+    setData: (data: Record<string, string>) => void;
+    /** Reset user data */
+    reset: () => void;
+}
+/**
+ * FeedValue composable
+ *
+ * Can be used with or without plugin. If plugin is installed, uses the
+ * provided instance. Otherwise, creates a new instance.
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * import { useFeedValue } from '@feedvalue/vue';
+ *
+ * // With plugin installed
+ * const { open, isReady } = useFeedValue();
+ *
+ * // Or standalone with widgetId
+ * const { open, isReady } = useFeedValue('your-widget-id');
+ * </script>
+ *
+ * <template>
+ *   <button @click="open" :disabled="!isReady">
+ *     Give Feedback
+ *   </button>
+ * </template>
+ * ```
+ */
+declare function useFeedValue(widgetId?: string, config?: Partial<FeedValueConfig>): UseFeedValueReturn;
+
+export { FEEDVALUE_KEY, FEEDVALUE_OPTIONS_KEY, type FeedValuePluginOptions, type UseFeedValueReturn, createFeedValue, useFeedValue };

package/dist/index.js

@@ -0,0 +1,111 @@
+import { FeedValue } from '@feedvalue/core';
+import { inject, shallowRef, ref, onMounted, onUnmounted, readonly } from 'vue';
+
+// src/plugin.ts
+var FEEDVALUE_KEY = /* @__PURE__ */ Symbol("feedvalue");
+var FEEDVALUE_OPTIONS_KEY = /* @__PURE__ */ Symbol("feedvalue-options");
+function createFeedValue(options) {
+  let instance = null;
+  return {
+    install(app) {
+      if (typeof window !== "undefined") {
+        instance = FeedValue.init({
+          widgetId: options.widgetId,
+          apiBaseUrl: options.apiBaseUrl,
+          config: options.config,
+          headless: options.headless
+        });
+        app.provide(FEEDVALUE_KEY, instance);
+        app.config.globalProperties.$feedvalue = instance;
+      }
+      app.provide(FEEDVALUE_OPTIONS_KEY, options);
+    }
+  };
+}
+function useFeedValue(widgetId, config) {
+  const injectedInstance = inject(FEEDVALUE_KEY, null);
+  const injectedOptions = inject(FEEDVALUE_OPTIONS_KEY, null);
+  const instance = shallowRef(null);
+  const isReady = ref(false);
+  const isOpen = ref(false);
+  const isVisible = ref(false);
+  const error = ref(null);
+  const isSubmitting = ref(false);
+  const isHeadless = ref(false);
+  let ownsInstance = false;
+  let unsubscribe = null;
+  const syncState = () => {
+    const state = instance.value?.getSnapshot();
+    if (state) {
+      isReady.value = state.isReady;
+      isOpen.value = state.isOpen;
+      isVisible.value = state.isVisible;
+      error.value = state.error;
+      isSubmitting.value = state.isSubmitting;
+    }
+  };
+  onMounted(() => {
+    if (injectedInstance && !widgetId) {
+      instance.value = injectedInstance;
+      isHeadless.value = injectedInstance.isHeadless();
+    } else {
+      const effectiveWidgetId = widgetId ?? injectedOptions?.widgetId;
+      if (!effectiveWidgetId) {
+        console.error(
+          "[FeedValue] No widgetId provided. Either install the plugin with createFeedValue() or pass widgetId to useFeedValue()."
+        );
+        return;
+      }
+      instance.value = FeedValue.init({
+        widgetId: effectiveWidgetId,
+        apiBaseUrl: injectedOptions?.apiBaseUrl,
+        config: config ?? injectedOptions?.config,
+        headless: injectedOptions?.headless
+      });
+      ownsInstance = true;
+    }
+    if (instance.value) {
+      unsubscribe = instance.value.subscribe(syncState);
+      isHeadless.value = instance.value.isHeadless();
+      syncState();
+    }
+  });
+  onUnmounted(() => {
+    unsubscribe?.();
+    if (ownsInstance && instance.value) {
+      instance.value.destroy();
+    }
+    instance.value = null;
+  });
+  const open = () => instance.value?.open();
+  const close = () => instance.value?.close();
+  const toggle = () => instance.value?.toggle();
+  const show = () => instance.value?.show();
+  const hide = () => instance.value?.hide();
+  const submit = (feedback) => instance.value?.submit(feedback) ?? Promise.reject(new Error("Not initialized"));
+  const identify = (userId, traits) => instance.value?.identify(userId, traits);
+  const setData = (data) => instance.value?.setData(data);
+  const reset = () => instance.value?.reset();
+  return {
+    instance: readonly(instance),
+    isReady: readonly(isReady),
+    isOpen: readonly(isOpen),
+    isVisible: readonly(isVisible),
+    error: readonly(error),
+    isSubmitting: readonly(isSubmitting),
+    isHeadless: readonly(isHeadless),
+    open,
+    close,
+    toggle,
+    show,
+    hide,
+    submit,
+    identify,
+    setData,
+    reset
+  };
+}
+
+export { FEEDVALUE_KEY, FEEDVALUE_OPTIONS_KEY, createFeedValue, useFeedValue };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/plugin.ts","../src/composables.ts"],"names":["FeedValue"],"mappings":"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","file":"index.js","sourcesContent":["/**\n * @feedvalue/vue - Plugin\n *\n * Vue plugin for FeedValue. Provides app-level configuration\n * and automatic initialization.\n */\n\nimport type { App, InjectionKey } from 'vue';\nimport { FeedValue, type FeedValueConfig, type FeedValueInstance } from '@feedvalue/core';\n\n/**\n * Plugin options\n */\nexport interface FeedValuePluginOptions {\n  /** Widget ID from FeedValue dashboard */\n  widgetId: string;\n  /** API base URL (for self-hosted) */\n  apiBaseUrl?: string;\n  /** Configuration overrides */\n  config?: Partial<FeedValueConfig>;\n  /**\n   * Headless mode - disables all DOM rendering.\n   * Use this when you want full control over the UI.\n   * The SDK will still fetch config and provide all API methods\n   * but won't render any trigger button or modal.\n   *\n   * @default false\n   */\n  headless?: boolean;\n}\n\n/**\n * Injection key for FeedValue instance\n */\nexport const FEEDVALUE_KEY: InjectionKey<FeedValueInstance> = Symbol('feedvalue');\n\n/**\n * Injection key for widget ID (used by useFeedValue when no instance is injected)\n */\nexport const FEEDVALUE_OPTIONS_KEY: InjectionKey<FeedValuePluginOptions> = Symbol('feedvalue-options');\n\n/**\n * Create FeedValue Vue plugin\n *\n * @example\n * ```ts\n * // main.ts\n * import { createApp } from 'vue';\n * import { createFeedValue } from '@feedvalue/vue';\n * import App from './App.vue';\n *\n * const app = createApp(App);\n *\n * app.use(createFeedValue({\n *   widgetId: 'your-widget-id',\n *   config: { theme: 'dark' }\n * }));\n *\n * app.mount('#app');\n * ```\n */\nexport function createFeedValue(options: FeedValuePluginOptions) {\n  let instance: FeedValueInstance | null = null;\n\n  return {\n    install(app: App) {\n      // Only initialize on client side\n      if (typeof window !== 'undefined') {\n        instance = FeedValue.init({\n          widgetId: options.widgetId,\n          apiBaseUrl: options.apiBaseUrl,\n          config: options.config,\n          headless: options.headless,\n        });\n\n        // Provide instance to all components\n        app.provide(FEEDVALUE_KEY, instance);\n\n        // Also provide to global properties for Options API access\n        app.config.globalProperties.$feedvalue = instance;\n      }\n\n      // Always provide options (for SSR where we don't initialize)\n      app.provide(FEEDVALUE_OPTIONS_KEY, options);\n    },\n  };\n}\n\n/**\n * Type augmentation for global properties\n */\ndeclare module 'vue' {\n  interface ComponentCustomProperties {\n    $feedvalue: FeedValueInstance | undefined;\n  }\n}\n","/**\n * @feedvalue/vue - Composables\n *\n * Vue composables for FeedValue. Provides reactive state and methods.\n */\n\nimport {\n  ref,\n  shallowRef,\n  readonly,\n  onMounted,\n  onUnmounted,\n  inject,\n  type Ref,\n  type ShallowRef,\n} from 'vue';\nimport {\n  FeedValue,\n  type FeedValueConfig,\n  type FeedValueInstance,\n  type FeedbackData,\n  type UserTraits,\n} from '@feedvalue/core';\nimport { FEEDVALUE_KEY, FEEDVALUE_OPTIONS_KEY } from './plugin';\n\n/**\n * Return type for useFeedValue composable\n */\nexport interface UseFeedValueReturn {\n  /** FeedValue instance (for advanced usage) */\n  instance: Readonly<ShallowRef<FeedValueInstance | null>>;\n  /** Widget is ready */\n  isReady: Readonly<Ref<boolean>>;\n  /** Modal is open */\n  isOpen: Readonly<Ref<boolean>>;\n  /** Widget is visible */\n  isVisible: Readonly<Ref<boolean>>;\n  /** Current error */\n  error: Readonly<Ref<Error | null>>;\n  /** Submission in progress */\n  isSubmitting: Readonly<Ref<boolean>>;\n  /** Running in headless mode (no default UI rendered) */\n  isHeadless: Readonly<Ref<boolean>>;\n  /** Open the feedback modal */\n  open: () => void;\n  /** Close the feedback modal */\n  close: () => void;\n  /** Toggle the feedback modal */\n  toggle: () => void;\n  /** Show the trigger button */\n  show: () => void;\n  /** Hide the trigger button */\n  hide: () => void;\n  /** Submit feedback programmatically */\n  submit: (feedback: Partial<FeedbackData>) => Promise<void>;\n  /** Identify user */\n  identify: (userId: string, traits?: UserTraits) => void;\n  /** Set user data */\n  setData: (data: Record<string, string>) => void;\n  /** Reset user data */\n  reset: () => void;\n}\n\n/**\n * FeedValue composable\n *\n * Can be used with or without plugin. If plugin is installed, uses the\n * provided instance. Otherwise, creates a new instance.\n *\n * @example\n * ```vue\n * <script setup>\n * import { useFeedValue } from '@feedvalue/vue';\n *\n * // With plugin installed\n * const { open, isReady } = useFeedValue();\n *\n * // Or standalone with widgetId\n * const { open, isReady } = useFeedValue('your-widget-id');\n * </script>\n *\n * <template>\n *   <button @click=\"open\" :disabled=\"!isReady\">\n *     Give Feedback\n *   </button>\n * </template>\n * ```\n */\nexport function useFeedValue(\n  widgetId?: string,\n  config?: Partial<FeedValueConfig>\n): UseFeedValueReturn {\n  // Try to inject instance from plugin\n  const injectedInstance = inject(FEEDVALUE_KEY, null);\n  const injectedOptions = inject(FEEDVALUE_OPTIONS_KEY, null);\n\n  // Refs for reactive state\n  const instance = shallowRef<FeedValueInstance | null>(null);\n  const isReady = ref(false);\n  const isOpen = ref(false);\n  const isVisible = ref(false);\n  const error = ref<Error | null>(null);\n  const isSubmitting = ref(false);\n  const isHeadless = ref(false);\n\n  // Track if we own the instance (need to destroy on unmount)\n  let ownsInstance = false;\n  let unsubscribe: (() => void) | null = null;\n\n  /**\n   * Sync reactive state from instance\n   */\n  const syncState = () => {\n    const state = instance.value?.getSnapshot();\n    if (state) {\n      isReady.value = state.isReady;\n      isOpen.value = state.isOpen;\n      isVisible.value = state.isVisible;\n      error.value = state.error;\n      isSubmitting.value = state.isSubmitting;\n    }\n  };\n\n  onMounted(() => {\n    // Use injected instance if available and no widgetId override\n    if (injectedInstance && !widgetId) {\n      instance.value = injectedInstance;\n      isHeadless.value = injectedInstance.isHeadless();\n    } else {\n      // Create new instance\n      const effectiveWidgetId = widgetId ?? injectedOptions?.widgetId;\n\n      if (!effectiveWidgetId) {\n        console.error(\n          '[FeedValue] No widgetId provided. Either install the plugin with createFeedValue() ' +\n            'or pass widgetId to useFeedValue().'\n        );\n        return;\n      }\n\n      instance.value = FeedValue.init({\n        widgetId: effectiveWidgetId,\n        apiBaseUrl: injectedOptions?.apiBaseUrl,\n        config: config ?? injectedOptions?.config,\n        headless: injectedOptions?.headless,\n      });\n      ownsInstance = true;\n    }\n\n    // Subscribe to state changes\n    if (instance.value) {\n      unsubscribe = instance.value.subscribe(syncState);\n      isHeadless.value = instance.value.isHeadless();\n      syncState(); // Initial sync\n    }\n  });\n\n  onUnmounted(() => {\n    unsubscribe?.();\n    if (ownsInstance && instance.value) {\n      instance.value.destroy();\n    }\n    instance.value = null;\n  });\n\n  // Methods that delegate to instance\n  const open = () => instance.value?.open();\n  const close = () => instance.value?.close();\n  const toggle = () => instance.value?.toggle();\n  const show = () => instance.value?.show();\n  const hide = () => instance.value?.hide();\n  const submit = (feedback: Partial<FeedbackData>) =>\n    instance.value?.submit(feedback) ?? Promise.reject(new Error('Not initialized'));\n  const identify = (userId: string, traits?: UserTraits) =>\n    instance.value?.identify(userId, traits);\n  const setData = (data: Record<string, string>) => instance.value?.setData(data);\n  const reset = () => instance.value?.reset();\n\n  return {\n    instance: readonly(instance),\n    isReady: readonly(isReady),\n    isOpen: readonly(isOpen),\n    isVisible: readonly(isVisible),\n    error: readonly(error),\n    isSubmitting: readonly(isSubmitting),\n    isHeadless: readonly(isHeadless),\n    open,\n    close,\n    toggle,\n    show,\n    hide,\n    submit,\n    identify,\n    setData,\n    reset,\n  };\n}\n"]}

package/package.json

@@ -0,0 +1,79 @@
+{
+  "name": "@feedvalue/vue",
+  "version": "0.1.0",
+  "description": "FeedValue Vue 3 SDK - Plugin and Composables for Vue 3+",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    }
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "sideEffects": false,
+  "peerDependencies": {
+    "vue": ">=3.3.0"
+  },
+  "dependencies": {
+    "@feedvalue/core": "^0.1.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.2.0",
+    "@vitest/coverage-v8": "^2.1.0",
+    "@vue/test-utils": "^2.4.0",
+    "eslint": "^9.17.0",
+    "happy-dom": "^15.11.0",
+    "tsup": "^8.3.0",
+    "typescript": "^5.7.0",
+    "vitest": "^2.1.0",
+    "vue": "^3.5.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/sarverenterprises/feedvalue-packages.git",
+    "directory": "packages/vue"
+  },
+  "homepage": "https://feedvalue.com",
+  "bugs": {
+    "url": "https://github.com/sarverenterprises/feedvalue-packages/issues"
+  },
+  "license": "MIT",
+  "author": "Sarver Enterprises",
+  "keywords": [
+    "feedvalue",
+    "feedback",
+    "widget",
+    "vue",
+    "vue3",
+    "composable",
+    "nuxt"
+  ],
+  "engines": {
+    "node": ">=18"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "lint": "eslint src --ext .ts",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage",
+    "typecheck": "tsc --noEmit",
+    "clean": "rm -rf dist"
+  }
+}