npm changes and readme updates. npm is now prefered import for this l…

…ibarary

README.md

@@ -59,47 +59,29 @@ yarn add vue
 yarn add mitt
 yarn add sparc-design-system-components-2
 ```
-### Adding dependencies to your project
+### Importing Dashboard into your project
 
 ```js
 
-import { createApp, defineAsyncComponent } from 'vue'
-import mitt from 'mitt'
-import DesignSystemComponentsPlugin from 'sparc-design-system-components-2'
+
+import { createApp } from 'vue'
 import App from './App.vue'
-//this allows for dynamically importing components
-import { useGlobalVarsStore } from '../node_modules/sparc-dashboard-beta/src/stores/globalVars'
-import { createPinia } from 'pinia'
+import { createPinia } from 'pinia';
+import 'sparc-dashboard-beta/dist/style.css'
+import sparcDesignSystemComponents2Umd from 'sparc-design-system-components-2';
+import {default as SparcDashboard, install as install} from 'sparc-dashboard-beta/dist/index.js'
 
 const app = createApp(App);
+let piniaInstance = createPinia();
+app.use(piniaInstance);
 
-//import mitt and set as emitter
-const emitter = mitt();
-app.provide('emitter', emitter); 
+install(app, piniaInstance); //call the install method and pass in the app and pinia instance
+app.component("SparcDashboard",SparcDashboard) // add the dashboard component to your vue app
 
-//list whichever components you want available and import them dynamically
-const componentMap = [
-    'SubjectNav',
-    'ImageSelector',
-    'ImageViewer',
-    'LocationNav',
-    'FlatmapViewer',
-    'BiolucidaViewer'
-]
-componentMap.forEach(comp=>{
-    const asyncComponent = defineAsyncComponent(() => import(`../node_modules/sparc-dashboard-beta/src/components/${comp}.vue`)); 
-    app.component(comp, asyncComponent);
-})
-
-app.use(createPinia());
-//add list of components to add componet drop down
-const globalVars = useGlobalVarsStore();
-globalVars.componentList = componentMap;
-
-
-app.use(DesignSystemComponentsPlugin);
+app.use(sparcDesignSystemComponents2Umd);
 app.mount('#app');
 
+
 ```
 
 # DOCUMENTATION 

package.json

@@ -1,22 +1,15 @@
 {
   "name": "sparc-dashboard-beta",
-  "version": "0.1.95",
+  "version": "0.2.0",
   "author": "Sam Kraft (https://Sparc.Science)",
   "private": false,
   "type": "module",
-  "main": "dist/index.cjs",
-  "module": "dist/index.js",
-  "exports": {
-    ".": "./dist/index.js",
-    "./styles.css": "./dist/style.css"
-  },
-  "browser": {
-    "./styles.css": "./dist/style.css"
-  },
-  "types": "dist/SparcDashboard.d.ts",
+  "main": "./dist/index.js",
   "license": "Apache-2.0",
   "files": [
-    "dist"
+    "dist",
+    "src/stores",
+    "tailwind"
   ],
   "scripts": {
     "dev": "vite & yarn tailwindcss -i ./src/assets/base.css -o ./dist/output.css --watch",

src/DashboardPlugin.js

@@ -1,7 +1,6 @@
 
-import { SparcDashboard } from './components/Index'
+import  SparcDashboard  from './components/SparcDashboard.vue'
 import "../tailwind/output.css"
-import { createPinia } from 'pinia'
 import { defineAsyncComponent } from 'vue'
 import mitt from 'mitt'
 import { useGlobalVarsStore } from './stores/globalVars'
@@ -10,13 +9,12 @@ import '../node_modules/sparc-design-system-components-2/dist/style.css';
 
   //for auto install -----------------------------------------------------------------------------------------------------------------
 
-export default {
-  install: (app) => {
+export function install(app, pinia){
 
     const emitter = mitt();
     app.provide('emitter', emitter); 
     //app.config.globalProperties.$emitter = emitter;
-    app.use(createPinia());
+    //app.use(createPinia());
 
     const componentMap = [
         'ImageSelector',
@@ -30,23 +28,12 @@ export default {
     })
 
     //add list of components to add componet drop down
-    const globalVars = useGlobalVarsStore();
+    const globalVars = useGlobalVarsStore(pinia);
     globalVars.componentList = componentMap;
 
     app.component("SparcDashboard", SparcDashboard);
-  },
-};
-export {SparcDashboard};
-// Auto-install when vue is found (eg. in browser via <script> tag)
-// let GlobalVue = null;
-// if (typeof window !== 'undefined') {
-// 	GlobalVue = window.Vue;
-// } else if (typeof global !== 'undefined') {
-// 	GlobalVue = global.Vue;
-// }
-// if (GlobalVue) {
-// 	GlobalVue.use(sparcDash);
-// }
-//------------------------------------------------------------------------------------------------------------------------------------
+  }
+export default SparcDashboard;
+
 
 

src/components/SparcDashboard.vue

@@ -51,8 +51,8 @@ let NextId = DashboardItems.value.length;
 
 
 onBeforeMount(() => {
-  DashboardItems.value = [    { id: "FlatmapViewer-1", x: 1, y: 0, h: 10, w:2, componentName:"Flatmap Viewer",component:"FlatmapViewer" },
-    { id: "ImageSelector-2", x: 3, y: 1, h: 10, w:3, componentName:"Image Selector", component:"ImageSelector"},
+  DashboardItems.value = [    { id: "FlatmapViewer-1", x: 0, y: 0, h: 8, w:2, componentName:"Flatmap Viewer",component:"FlatmapViewer" },
+    { id: "ImageSelector-2", x: 3, y: 0, h: 8, w:3, componentName:"Image Selector", component:"ImageSelector"},
     { id: "BiolucidaViewer-3", x: 6, y: 0,h: 10, w:5, componentName:"MBF Viewer", component:"BiolucidaViewer"},
     //{ id: "BiolucidaViewer-4", x: 10, y: 0,h: 8, w:3, componentName:"MBF Viewer", component:"BiolucidaViewer"}
     ]

vite.config.ts

@@ -15,7 +15,7 @@ export default defineConfig({
   build: {
     lib: {
       entry: "./src/DashboardPlugin.js",
-      name: 'DashboardPlugin',
+      name: 'SparcDashboard',
       formats:["es","cjs"],
       fileName: (format) => (format === "es" ? "index.js" : "index.cjs"),
     },
@@ -34,3 +34,4 @@ export default defineConfig({
     },
   },
 })
+