Name changes to vue-wrapping-lightbox

README.md

@@ -1,3 +1,3 @@
-# vue-simple-lightbox
+# vue-wrapping-lightbox
 
 Very basic lightbox that is Vue3 ready with little to no funcitonality.

package.json

@@ -1,6 +1,6 @@
 {
-  "name": "vue-simple-lightbox",
-  "version": "0.0.1",
+  "name": "vue-wrapping-lightbox",
+  "version": "0.0.2",
   "author": "Elke Heymans",
   "scripts": {
     "dev": "vite",
@@ -14,17 +14,32 @@
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/ElkeCodes/vue-simple-lightbox.git"
+    "url": "https://github.com/ElkeCodes/vue-wrapping-lightbox.git"
+  },
+  "keywords": [
+    "vue",
+    "vue3",
+    "lightbox"
+  ],
+  "files": ["dist"],
+  "main": "./dist/vue-wrapping-lightbox.umd.js",
+  "module": "./dist/vue-wrapping-lightbox.es.js",
+  "exports": {
+    ".": {
+      "import": "./dist/vue-wrapping-lightbox.es.js",
+      "require": "./dist/vue-wrapping-lightbox.umd.js"
+    }
   },
-  "keywords": ["vue", "vue3", "lightbox"],
   "dependencies": {
     "vue": "^3.2.31"
   },
   "devDependencies": {
+    "@rollup/plugin-typescript": "^8.3.1",
     "@rushstack/eslint-patch": "^1.1.0",
     "@types/jsdom": "^16.2.14",
     "@types/node": "^16.11.25",
     "@vitejs/plugin-vue": "^2.2.2",
+    "@vue/compiler-sfc": "^3.2.31",
     "@vue/eslint-config-prettier": "^7.0.0",
     "@vue/eslint-config-typescript": "^10.0.0",
     "@vue/test-utils": "^2.0.0-rc.18",
@@ -35,10 +50,14 @@
     "eslint-plugin-vue": "^8.2.0",
     "jsdom": "^19.0.0",
     "prettier": "^2.5.1",
+    "rollup": "^2.70.1",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-vue": "^6.0.0",
     "start-server-and-test": "^1.14.0",
     "typescript": "~4.5.5",
     "vite": "^2.8.4",
     "vitest": "^0.5.0",
     "vue-tsc": "^0.31.4"
   }
 }
+

src/App.vue

@@ -1,10 +1,10 @@
 <template>
   <button @click="active = !active">Toggle lightbox</button>
-  <vue-simple-lightbox ref="lightbox">
+  <vue-wrapping-lightbox ref="lightbox">
     <img src="https://randomfox.ca/images/57.jpg" alt="" />
     <img src="https://randomfox.ca/images/117.jpg" alt="" />
     <img src="https://randomfox.ca/images/40.jpg" alt="" />
-  </vue-simple-lightbox>
+  </vue-wrapping-lightbox>
   <div class="images">
     <img
       src="https://randomfox.ca/images/57.jpg"
@@ -29,7 +29,7 @@
 
 <script lang="ts" setup>
 import { ref } from "vue";
-import VueSimpleLightbox from "./VueSimpleLightbox.vue";
+import VueWrappingLightbox from "./VueWrappingLightbox.vue";
 
 const active = ref(false);
 </script>

src/VueSimpleLightbox.vue → src/VueWrappingLightbox.vue

@@ -1,16 +1,9 @@
 <template>
-  <vue-simple-lightbox />
+  <vue-wrapping-lightbox />
 </template>
 
 <script setup lang="ts">
-import {
-  defineComponent,
-  h,
-  useSlots,
-  withDefaults,
-  ref,
-  Transition,
-} from "vue";
+import { defineComponent, h, useSlots, withDefaults, ref } from "vue";
 import NextArrow from "./components/NextArrow.vue";
 import PreviousArrow from "./components/PreviousArrow.vue";
 import Close from "./components/Close.vue";
@@ -47,7 +40,7 @@ const openImage = (index: number): void => {
   activeIndex.value = index;
 };
 
-const VueSimpleLightbox = defineComponent({
+const VueWrappingLightbox = defineComponent({
   render() {
     if (!slots.default) {
       return undefined;

src/export.js

@@ -0,0 +1,3 @@
+import VueWrappingLightBox from "./VueWrappingLightbox.vue";
+
+export { VueWrappingLightBox };

src/index.js

@@ -0,0 +1,14 @@
+import components from "./export";
+
+const plugin = {
+  install(Vue) {
+    for (const prop in components) {
+      if (components.hasOwnProperty(prop)) {
+        const component = components[prop];
+        Vue.component(component.name, component);
+      }
+    }
+  },
+};
+
+export default plugin;

vite.config.ts

@@ -1,4 +1,5 @@
 import { fileURLToPath, URL } from "url";
+import path from "path";
 
 import { defineConfig } from "vite";
 import vue from "@vitejs/plugin-vue";
@@ -11,4 +12,19 @@ export default defineConfig({
       "@": fileURLToPath(new URL("./src", import.meta.url)),
     },
   },
+  build: {
+    lib: {
+      entry: path.resolve(__dirname, "src/export.js"),
+      name: "VueWrappingLightbox",
+      fileName: (format) => `vue-wrapping-lightbox.${format}.js`,
+    },
+    rollupOptions: {
+      external: ["vue"],
+      output: {
+        globals: {
+          vue: "Vue",
+        },
+      },
+    },
+  },
 });