0.0.34 • Published 1 year ago

bombsight-gallery v0.0.34

Weekly downloads
-
License
-
Repository
-
Last release
1 year ago

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;
}
0.0.34

1 year ago

0.0.33

1 year ago

0.0.32

1 year ago

0.0.31

3 years ago

0.0.30

3 years ago

0.0.29

3 years ago

0.0.28

3 years ago

0.0.27

3 years ago

0.0.26

3 years ago

0.0.25

3 years ago

0.0.24

3 years ago

0.0.23

3 years ago

0.0.22

3 years ago

0.0.21

3 years ago

0.0.20

3 years ago

0.0.19

3 years ago

0.0.18

3 years ago

0.0.17

3 years ago

0.0.16

3 years ago

0.0.15

3 years ago

0.0.14

3 years ago

0.0.13

3 years ago

0.0.12

3 years ago

0.0.11

3 years ago

0.0.10

3 years ago

0.0.9

3 years ago

0.0.8

3 years ago

0.0.7

3 years ago

0.0.6

3 years ago

0.0.5

3 years ago

0.0.4

3 years ago

0.0.3

3 years ago

0.0.2

3 years ago

0.0.1

3 years ago

0.0.0

3 years ago