Initial Vue Vault implementation

apideck-libraries · Dec 16, 2022 · 2507e1a · 2507e1a
1 parent 73baff4
commit 2507e1a
Show file tree

Hide file tree

Showing 9 changed files with 1,207 additions and 0 deletions.
diff --git a/dev/App.vue b/dev/App.vue
@@ -0,0 +1,33 @@
+<template>
+  <main>
+    <h1>Vue Vault</h1>
+
+    <VueVault
+      :token="sessionJwt"
+      :service-id="serviceId"
+      :unified-api="unifiedApi"
+      :show-attribution="false"
+      :on-close="onClose"
+      :on-ready="onReady"
+      v-slot="vaultProps"
+    >
+      <button @click="vaultProps.open">Open Vault</button>
+    </VueVault>
+  </main>
+</template>
+
+<script setup lang="ts">
+import VueVault from "../src/VueVault.vue";
+
+const sessionJwt = "TOKEN_HERE";
+const serviceId = "dropbox";
+const unifiedApi = "file-storage";
+
+function onClose() {
+  console.log("close!");
+}
+
+function onReady() {
+  console.log("ready!");
+}
+</script>
diff --git a/dev/index.ts b/dev/index.ts
@@ -0,0 +1,7 @@
+import { createApp } from "vue";
+
+import App from "./App.vue";
+
+const app = createApp(App);
+
+app.mount("#app");
diff --git a/index.html b/index.html
@@ -0,0 +1,15 @@
+<!-- index.html -->
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vue Vault</title>
+  </head>
+
+  <body>
+    <div id="app"></div>
+
+    <script type="module" src="./dev/index.ts"></script>
+  </body>
+</html>
diff --git a/package.json b/package.json
@@ -0,0 +1,48 @@
+{
+  "version": "1.0.0",
+  "name": "@apideck/vue-vault",
+  "author": "Apideck",
+  "license": "MIT",
+  "main": "dist/vue-vault.umd.js",
+  "module": "dist/vue-vault.es.js",
+  "typings": "dist/index.d.ts",
+  "repository": "https://github.com/apideck-libraries/vue-vault",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "keywords": [
+    "apideck",
+    "vault",
+    "javascript"
+  ],
+  "engines": {
+    "node": ">=12"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "typecheck": "vue-tsc --emitDeclarationOnly"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "devDependencies": {
+    "@babel/types": "^7.20.5",
+    "@types/node": "^18.11.15",
+    "@vitejs/plugin-vue": "^4.0.0",
+    "@vue/tsconfig": "^0.1.3",
+    "sass": "^1.56.2",
+    "typescript": "^4.9.4",
+    "vite": "^4.0.1",
+    "vite-plugin-dts": "^1.7.1",
+    "vue": "^3.2.45",
+    "vue-tsc": "^1.0.13"
+  },
+  "dependencies": {
+    "@apideck/vault-js": "^1.0.0"
+  },
+  "peerDependencies": {
+    "vue": "^3.0.0"
+  }
+}
diff --git a/src/VueVault.vue b/src/VueVault.vue
@@ -0,0 +1,28 @@
+<template>
+  <slot :open="onClick"> </slot>
+</template>
+
+<script setup lang="ts">
+import { ApideckVault } from "@apideck/vault-js";
+
+const props = defineProps<{
+  token: string;
+  unifiedApi?: string;
+  serviceId?: string;
+  showAttribution?: boolean;
+  onClose?: () => void;
+  onReady?: () => void;
+}>();
+
+function onClick() {
+  ApideckVault.open(props);
+}
+</script>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  name: "VueVault",
+});
+</script>
diff --git a/src/index.ts b/src/index.ts
@@ -0,0 +1,3 @@
+import VueVault from "./VueVault.vue";
+
+export { VueVault };
diff --git a/tsconfig.json b/tsconfig.json
@@ -0,0 +1,8 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.web.json",
+  "include": ["src/**/*", "src/**/*.vue"],
+  "compilerOptions": {
+    "composite": true,
+    "baseUrl": "."
+  }
+}
diff --git a/vite.config.js b/vite.config.js
@@ -0,0 +1,21 @@
+import { resolve } from "node:path";
+import { defineConfig } from "vite";
+import vue from "@vitejs/plugin-vue";
+import dts from "vite-plugin-dts";
+
+export default defineConfig({
+  plugins: [vue(), dts({ skipDiagnostics: true })],
+
+  build: {
+    outDir: "./dist",
+    lib: {
+      entry: resolve(__dirname, "src/index.ts"),
+      name: "vue-vault",
+      fileName: (format) => `vue-vault.${format}.js`,
+    },
+    rollupOptions: {
+      external: ["vue"],
+      output: { globals: { vue: "Vue" } },
+    },
+  },
+});
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import VueVault from "./VueVault.vue";

		export { VueVault };