Timo Vue Feedback Component

A Vue 3 component for collecting user feedback and bug reports.

Installation

npm install @timoai/vue
# or
yarn add @timoai/vue

Usage

Global Registration

import { createApp } from "vue";
import TimoModal from "@timoai/vue";
import App from "./App.vue";

const app = createApp(App);
app.use(TimoModal);
app.mount("#app");

Local Registration

<template>
  <TimoModal
    api-key="your-api-key"
    base-url="https://api.timo.zeratus.com"
    button-label="Feedback"
    modal-title="Submit Feedback"
    :theme="{
      primaryColor: '#7B7FEF',
      secondaryColor: '#f3f4f6',
      borderRadius: '12px',
      fontFamily: 'Inter, system-ui, sans-serif',
    }"
    @submit-success="handleSuccess"
    @submit-error="handleError"
  />
</template>

<script>
import { TimoModal } from "@timoai/vue";

export default {
  components: {
    TimoModal,
  },
  methods: {
    handleSuccess(data) {
      console.log("Feedback submitted:", data);
    },
    handleError(error) {
      console.error("Error submitting feedback:", error);
    },
  },
};
</script>

Props

| Prop | Type | Default | Description | | ----------------- | ------ | --------------------- | ---------------------------------------------------------------------------------------- | | apiKey | string | "" | Required API key for authentication | | baseUrl | string | "https://api.timo.zeratus.com"| API base URL (optional, defaults to production) | | position | string | "bottom-right" | Position of the feedback button ("bottom-right", "bottom-left", "top-right", "top-left") | | buttonLabel | string | "Complaint" | Text displayed on the feedback button | | modalTitle | string | "Submit Complaint" | Title of the feedback modal | | inputPlaceholder | string | "Describe your issue" | Placeholder text for the feedback input | | submitButtonLabel | string | "Submit" | Text displayed on the submit button | | logoSrc | string | "" | URL of the logo to display (optional) | | theme | object | {} | Theme customization object | | metadata | object | {} | Additional metadata to send with the feedback | | maxFileSize | number | 10 | Maximum file size in MB | | allowedFileTypes | array | [] | Array of allowed file extensions |

Theme Object

interface Theme {
  primaryColor?: string; // Primary color for buttons and accents
  secondaryColor?: string; // Secondary color for backgrounds
  borderRadius?: string; // Border radius for components
  fontFamily?: string; // Font family for text
}

Events

| Event | Payload | Description | | -------------- | ------------- | ------------------------------------------------- | | submit-success | Response data | Emitted when feedback is successfully submitted | | submit-error | Error object | Emitted when there's an error submitting feedback |

Features

• Modern, responsive design
• File upload support with drag & drop
• Customizable themes
• Form validation
• Loading states
• Error handling
• Accessibility support
• Transition animations