Vue Image Selector

Vue Image Selector is a flexible Vue 3 component and composable for handling image selection, preview, and validation within Vue applications.

Installation

Install the package using npm or yarn:

npm install @medelm/vue-image-selector
# or
yarn add @medelm/vue-image-selector

Usage

1. Setup Plugin in Your Vue App

Import and use the plugin in your main application file (main.js or main.ts):

import { createApp } from 'vue';
import App from './App.vue';
import imageSelectorPlugin from '@medelm/vue-image-selector';
import '@medelm/vue-image-selector/style.css';

createApp(App)
  .use(imageSelectorPlugin)
  .mount('#app');

2. Use the Component

Use the ImageSelector component in your Vue components:

<template>
  <ImageSelector v-bind="imageSelector" />
</template>

<script setup>
  import { useImageSelector } from '@medelm/vue-image-selector';

  const imageSelector = useImageSelector();

  // Optional: Handle callbacks or additional logic
</script>

<style scoped>
  /* Your scoped styles here */
</style>

3. Customization

• Styling: Customize the appearance using scoped CSS or by overriding classes in your project's stylesheets.
• Callbacks: Implement onSelect and onReset callbacks to handle image selection and reset events.

4. Composable API

The composable useImageSelector provides the following methods and reactive state:

• select(event): Handles file input change and drag-and-drop events.
• reset(): Resets the image selection state.
• onSelect(callback): Sets a callback function for when an image is selected.
• onReset(callback): Sets a callback function for when the image selection is reset.
• hasError(): Checks if there is an error in image selection.
• getError(): Retrieves the error message, if any.
• setError(errorMessage): Sets a custom error message.

Contributing

Contributions are welcome! If you have any suggestions, bug reports, or want to contribute code, please open an issue or submit a pull request on GitHub.

License

This project is licensed under the MIT License