@feedvalue/vue 0.1.6 → 0.1.7

package/dist/index.d.cts

@@ -1,6 +1,7 @@
-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';
+import * as vue from 'vue';
+import { InjectionKey, App, ShallowRef, Ref, ComputedRef, PropType } from 'vue';
+import { FeedValueInstance, FeedValueConfig, FeedbackData, UserTraits, ReactionOption, ButtonSize, FollowUpTrigger } from '@feedvalue/core';
+export { FeedValueConfig, FeedValueEvents, FeedValueState, FeedbackData, FeedbackMetadata, ReactionConfig, ReactionOption, ReactionState, ReactionTemplate, UserData, UserTraits } from '@feedvalue/core';
 
 /**
  * @feedvalue/vue - Plugin
@@ -139,4 +140,180 @@ interface UseFeedValueReturn {
  */
 declare function useFeedValue(widgetId?: string, config?: Partial<FeedValueConfig>): UseFeedValueReturn;
 
-export { FEEDVALUE_KEY, FEEDVALUE_OPTIONS_KEY, type FeedValuePluginOptions, type UseFeedValueReturn, createFeedValue, useFeedValue };
+/**
+ * @feedvalue/vue - useReaction Composable
+ *
+ * Composable for reaction widgets in Vue applications.
+ * Provides a simple API for submitting reactions.
+ */
+
+/**
+ * Return type for useReaction composable
+ */
+interface UseReactionReturn {
+    /** Available reaction options */
+    options: ComputedRef<ReactionOption[] | null>;
+    /** Currently submitting */
+    isSubmitting: Readonly<Ref<boolean>>;
+    /** Successfully submitted value (null if not yet submitted) */
+    submitted: Readonly<Ref<string | null>>;
+    /** Error if submission failed */
+    error: Readonly<Ref<Error | null>>;
+    /** Option value requiring follow-up input (null if none) */
+    showFollowUp: Readonly<Ref<string | null>>;
+    /** Submit a reaction */
+    react: (value: string, followUp?: string) => Promise<void>;
+    /** Set which option is showing follow-up input */
+    setShowFollowUp: (value: string | null) => void;
+    /** Clear the submitted state to allow re-submission */
+    clearSubmitted: () => void;
+    /** Check if widget is a reaction type */
+    isReactionWidget: ComputedRef<boolean>;
+    /** Widget configuration is ready */
+    isReady: Readonly<Ref<boolean>>;
+    /** Whether to show text labels next to icons */
+    showLabels: ComputedRef<boolean>;
+    /** Button size */
+    buttonSize: ComputedRef<ButtonSize>;
+    /** When to show follow-up input */
+    followUpTrigger: ComputedRef<FollowUpTrigger>;
+    /** Check if an option should show follow-up based on followUpTrigger */
+    shouldShowFollowUp: (optionValue: string) => boolean;
+}
+/**
+ * Composable for reaction widgets
+ *
+ * Provides reaction options, submission handling, and follow-up state management.
+ * Can be used with or without the FeedValue plugin.
+ *
+ * @param widgetId - Optional widget ID override (uses plugin widget if not provided)
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * import { useReaction } from '@feedvalue/vue';
+ *
+ * const {
+ *   options,
+ *   react,
+ *   isSubmitting,
+ *   submitted,
+ *   error,
+ *   showFollowUp,
+ *   setShowFollowUp,
+ *   isReady,
+ * } = useReaction();
+ *
+ * const handleClick = (option) => {
+ *   if (option.showFollowUp) {
+ *     setShowFollowUp(option.value);
+ *   } else {
+ *     react(option.value);
+ *   }
+ * };
+ * </script>
+ *
+ * <template>
+ *   <div v-if="isReady && options">
+ *     <div v-if="submitted">Thanks for your feedback!</div>
+ *
+ *     <template v-else>
+ *       <button
+ *         v-for="option in options"
+ *         :key="option.value"
+ *         @click="handleClick(option)"
+ *         :disabled="isSubmitting"
+ *       >
+ *         {{ option.icon }} {{ option.label }}
+ *       </button>
+ *
+ *       <form v-if="showFollowUp" @submit.prevent="react(showFollowUp, followUpText)">
+ *         <input v-model="followUpText" placeholder="Tell us more..." />
+ *         <button type="submit">Send</button>
+ *       </form>
+ *
+ *       <div v-if="error">Error: {{ error.message }}</div>
+ *     </template>
+ *   </div>
+ * </template>
+ * ```
+ */
+declare function useReaction(widgetId?: string): UseReactionReturn;
+
+/**
+ * ReactionButtons Component
+ *
+ * Pre-built reaction buttons with follow-up input support.
+ *
+ * @example
+ * ```vue
+ * <template>
+ *   <ReactionButtons widget-id="xxx" @react="onReact" />
+ * </template>
+ *
+ * <script setup>
+ * import { ReactionButtons } from '@feedvalue/vue';
+ *
+ * const onReact = (value, followUp) => {
+ *   console.log('Reacted:', value, followUp);
+ * };
+ * </script>
+ * ```
+ */
+declare const ReactionButtons: vue.DefineComponent<vue.ExtractPropTypes<{
+    /** Widget ID (optional if using FeedValue plugin) */
+    widgetId: {
+        type: PropType<string | undefined>;
+        default: undefined;
+    };
+    /** Custom thank you message (overrides widget config) */
+    thankYouMessage: {
+        type: PropType<string | undefined>;
+        default: undefined;
+    };
+    /** Custom class for the container */
+    containerClass: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** Custom class for buttons */
+    buttonClass: {
+        type: StringConstructor;
+        default: string;
+    };
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}> | null, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
+    /** Emitted when a reaction is submitted */
+    react: (value: string, _followUp?: string) => boolean;
+}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    /** Widget ID (optional if using FeedValue plugin) */
+    widgetId: {
+        type: PropType<string | undefined>;
+        default: undefined;
+    };
+    /** Custom thank you message (overrides widget config) */
+    thankYouMessage: {
+        type: PropType<string | undefined>;
+        default: undefined;
+    };
+    /** Custom class for the container */
+    containerClass: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** Custom class for buttons */
+    buttonClass: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & Readonly<{
+    onReact?: (value: string, _followUp?: string | undefined) => any;
+}>, {
+    widgetId: string | undefined;
+    thankYouMessage: string | undefined;
+    containerClass: string;
+    buttonClass: string;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+
+export { FEEDVALUE_KEY, FEEDVALUE_OPTIONS_KEY, type FeedValuePluginOptions, ReactionButtons, type UseFeedValueReturn, type UseReactionReturn, createFeedValue, useFeedValue, useReaction };

package/dist/index.d.ts

@@ -1,6 +1,7 @@
-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';
+import * as vue from 'vue';
+import { InjectionKey, App, ShallowRef, Ref, ComputedRef, PropType } from 'vue';
+import { FeedValueInstance, FeedValueConfig, FeedbackData, UserTraits, ReactionOption, ButtonSize, FollowUpTrigger } from '@feedvalue/core';
+export { FeedValueConfig, FeedValueEvents, FeedValueState, FeedbackData, FeedbackMetadata, ReactionConfig, ReactionOption, ReactionState, ReactionTemplate, UserData, UserTraits } from '@feedvalue/core';
 
 /**
  * @feedvalue/vue - Plugin
@@ -139,4 +140,180 @@ interface UseFeedValueReturn {
  */
 declare function useFeedValue(widgetId?: string, config?: Partial<FeedValueConfig>): UseFeedValueReturn;
 
-export { FEEDVALUE_KEY, FEEDVALUE_OPTIONS_KEY, type FeedValuePluginOptions, type UseFeedValueReturn, createFeedValue, useFeedValue };
+/**
+ * @feedvalue/vue - useReaction Composable
+ *
+ * Composable for reaction widgets in Vue applications.
+ * Provides a simple API for submitting reactions.
+ */
+
+/**
+ * Return type for useReaction composable
+ */
+interface UseReactionReturn {
+    /** Available reaction options */
+    options: ComputedRef<ReactionOption[] | null>;
+    /** Currently submitting */
+    isSubmitting: Readonly<Ref<boolean>>;
+    /** Successfully submitted value (null if not yet submitted) */
+    submitted: Readonly<Ref<string | null>>;
+    /** Error if submission failed */
+    error: Readonly<Ref<Error | null>>;
+    /** Option value requiring follow-up input (null if none) */
+    showFollowUp: Readonly<Ref<string | null>>;
+    /** Submit a reaction */
+    react: (value: string, followUp?: string) => Promise<void>;
+    /** Set which option is showing follow-up input */
+    setShowFollowUp: (value: string | null) => void;
+    /** Clear the submitted state to allow re-submission */
+    clearSubmitted: () => void;
+    /** Check if widget is a reaction type */
+    isReactionWidget: ComputedRef<boolean>;
+    /** Widget configuration is ready */
+    isReady: Readonly<Ref<boolean>>;
+    /** Whether to show text labels next to icons */
+    showLabels: ComputedRef<boolean>;
+    /** Button size */
+    buttonSize: ComputedRef<ButtonSize>;
+    /** When to show follow-up input */
+    followUpTrigger: ComputedRef<FollowUpTrigger>;
+    /** Check if an option should show follow-up based on followUpTrigger */
+    shouldShowFollowUp: (optionValue: string) => boolean;
+}
+/**
+ * Composable for reaction widgets
+ *
+ * Provides reaction options, submission handling, and follow-up state management.
+ * Can be used with or without the FeedValue plugin.
+ *
+ * @param widgetId - Optional widget ID override (uses plugin widget if not provided)
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * import { useReaction } from '@feedvalue/vue';
+ *
+ * const {
+ *   options,
+ *   react,
+ *   isSubmitting,
+ *   submitted,
+ *   error,
+ *   showFollowUp,
+ *   setShowFollowUp,
+ *   isReady,
+ * } = useReaction();
+ *
+ * const handleClick = (option) => {
+ *   if (option.showFollowUp) {
+ *     setShowFollowUp(option.value);
+ *   } else {
+ *     react(option.value);
+ *   }
+ * };
+ * </script>
+ *
+ * <template>
+ *   <div v-if="isReady && options">
+ *     <div v-if="submitted">Thanks for your feedback!</div>
+ *
+ *     <template v-else>
+ *       <button
+ *         v-for="option in options"
+ *         :key="option.value"
+ *         @click="handleClick(option)"
+ *         :disabled="isSubmitting"
+ *       >
+ *         {{ option.icon }} {{ option.label }}
+ *       </button>
+ *
+ *       <form v-if="showFollowUp" @submit.prevent="react(showFollowUp, followUpText)">
+ *         <input v-model="followUpText" placeholder="Tell us more..." />
+ *         <button type="submit">Send</button>
+ *       </form>
+ *
+ *       <div v-if="error">Error: {{ error.message }}</div>
+ *     </template>
+ *   </div>
+ * </template>
+ * ```
+ */
+declare function useReaction(widgetId?: string): UseReactionReturn;
+
+/**
+ * ReactionButtons Component
+ *
+ * Pre-built reaction buttons with follow-up input support.
+ *
+ * @example
+ * ```vue
+ * <template>
+ *   <ReactionButtons widget-id="xxx" @react="onReact" />
+ * </template>
+ *
+ * <script setup>
+ * import { ReactionButtons } from '@feedvalue/vue';
+ *
+ * const onReact = (value, followUp) => {
+ *   console.log('Reacted:', value, followUp);
+ * };
+ * </script>
+ * ```
+ */
+declare const ReactionButtons: vue.DefineComponent<vue.ExtractPropTypes<{
+    /** Widget ID (optional if using FeedValue plugin) */
+    widgetId: {
+        type: PropType<string | undefined>;
+        default: undefined;
+    };
+    /** Custom thank you message (overrides widget config) */
+    thankYouMessage: {
+        type: PropType<string | undefined>;
+        default: undefined;
+    };
+    /** Custom class for the container */
+    containerClass: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** Custom class for buttons */
+    buttonClass: {
+        type: StringConstructor;
+        default: string;
+    };
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}> | null, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
+    /** Emitted when a reaction is submitted */
+    react: (value: string, _followUp?: string) => boolean;
+}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    /** Widget ID (optional if using FeedValue plugin) */
+    widgetId: {
+        type: PropType<string | undefined>;
+        default: undefined;
+    };
+    /** Custom thank you message (overrides widget config) */
+    thankYouMessage: {
+        type: PropType<string | undefined>;
+        default: undefined;
+    };
+    /** Custom class for the container */
+    containerClass: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** Custom class for buttons */
+    buttonClass: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & Readonly<{
+    onReact?: (value: string, _followUp?: string | undefined) => any;
+}>, {
+    widgetId: string | undefined;
+    thankYouMessage: string | undefined;
+    containerClass: string;
+    buttonClass: string;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+
+export { FEEDVALUE_KEY, FEEDVALUE_OPTIONS_KEY, type FeedValuePluginOptions, ReactionButtons, type UseFeedValueReturn, type UseReactionReturn, createFeedValue, useFeedValue, useReaction };