bombsight-gallery
v0.0.34
Published
This is a Vue.js plugin that will help you browse bombsight images and upload images or files to bombsight
Downloads
39
Readme
bomsight-gallery
This is a Vue.js plugin that will help you browse bombsight images and upload images or files to bombsight
Installation
Install from npm:
npm install bombsight-gallery@latest
In your vue app use the plugin:
// main.ts
import { createApp } from "vue";
import App from "./App.vue";
import BombsightGalleryPlugin from "bombsight-gallery";
const app = createApp(App);
app.use(BombsightGalleryPlugin, { apiKey: "YOUR_API_KEY" });
app.mount("#app");
Available components
BombsightGallery
<BombsightGallery />
will enable you select from a list of bombsight image for use or upload for use.
<template>
<main>
<BombsightGallery
@image-selected="onImageSelected"
@image-uploaded="onImageUploaded"
@cancel="onCancel"
/>
</main>
</template>
<script setup lang="ts">
import { BombsightGallery } from "bombsight-gallery";
const onImageSelected(image: Image) {
// do whatever you want with the image.
// most likely take the url of the image (image.url)
}
const onImageUploaded(image: Image) {
// do whatever you want with the image.
}
const onCancel(image: Image) {
// this event is called when the cancel button is clicked
// you can close a dialog or navigate to a new page when this event is triggered
}
</script>
BombsightMediaLibrary
<BombsightMediaLibrary />
is to show you a list of images you have on bombsight and some details. you can also upload images
<template>
<main>
<BombsightMediaLibrary
@image-uploaded="onImageUploaded"
/>
</main>
</template>
<script setup lang="ts">
import { BombsightMediaLibrary } from "bombsight-gallery";
const onImageUploaded(image: Image) {
// do whatever you want with the image.
}
</script>
Bombsight Image
interface
the Image passed in the events has the following shape.
export interface Image {
name: string;
originalName: string;
path: string;
extension: string;
mimeType: string;
projectID: string;
environment: "development" | "production";
url: string;
createdAt: Date;
updatedAt: Date;
}