Package Exports

@timoai/vue
@timoai/vue/dist/index.esm.js
@timoai/vue/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@timoai/vue) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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