Merge 103

.github/workflows/gh-pages.yml

@@ -8,6 +8,7 @@ on:
 jobs:
   publish:
     runs-on: ubuntu-latest
+    container: cypress/base:latest
     env:
       NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
     steps:
@@ -26,6 +27,7 @@ jobs:
       - name: Check if a new tag is created
         run: "[[ '${{ steps.create_tag.outputs.tagname }}' ]]"
       - run: npm ci
+      - run: npm test
       - run: npm run build
       - name: Deploy app to GitHub Pages
         uses: JamesIves/github-pages-deploy-action@v4

cypress/support/component.js

@@ -22,7 +22,7 @@ import './commands';
 import { mount } from 'cypress/vue';
 
 import { createMemoryHistory, createRouter } from 'vue-router'
-import router from '../../src/router';
+import router from '../../src/app/router';
 
 Cypress.Commands.add('mount', (component, options = {}) => {
     // Setup options object

package.json

@@ -1,6 +1,6 @@
 {
   "name": "crate-o",
-  "version": "0.2.7",
+  "version": "0.3.0",
   "description": "A VueJS UI component to create and edit Research Object Crate (RO-Crate) metadata",
   "keywords": [
     "RO-Crate",
@@ -21,20 +21,28 @@
     "Rosanna Smith"
   ],
   "files": [
-    "src/components",
-    "src/lookups"
+    "dist",
+    "src/lib",
+    "!/src/lib/**/*.cy.js"
   ],
-  "main": "index.js",
+  "main": "./dist/crate-o.js",
+  "module": "./dist/crate-o.js",
   "type": "module",
+  "exports": {
+    ".": "./dist/crate-o.js",
+    "./DefaultRouteHandler": "./src/lib/DefaultRouteHandler.js",
+    "./*": "./*"
+  },
   "repository": {
     "type": "git",
     "url": "https://github.com/Language-Research-Technology/crate-o"
   },
   "scripts": {
-    "dev": "npm install ro-crate-editor-profiles && vite",
-    "build": "npm install ro-crate-editor-profiles && vite build",
+    "dev": "vite",
+    "build": "vite build",
+    "build:library": "vite build --mode library",
     "preview": "vite preview --port 5000",
-    "test": "cypress run --component --browser chrome --headless",
+    "test": "cypress run --component --headless",
     "test:ui": "cypress run --component --browser chrome",
     "test:unit": "npm test -- --record --spec ",
     "cypress:open": "npx cypress open",
@@ -45,20 +53,18 @@
   "dependencies": {
     "@element-plus/icons-vue": "^2.1.0",
     "@element-plus/theme-chalk": "^2.2.16",
-    "ajv": "^8.12.0",
-    "element-plus": "^2.3.5",
     "leaflet": "^1.9.4",
     "leaflet-editable": "^1.2.0",
     "leaflet-gesture-handling": "^1.2.2",
     "leaflet.path.drag": "^0.0.6",
     "lodash": "^4.17.21",
     "mime": "^3.0.0",
     "moment": "^2.29.4",
-    "ro-crate": "^3.3.3",
-    "ro-crate-editor-profiles": "github:Language-Research-Technology/ro-crate-editor-profiles",
-    "ro-crate-excel": "^1.0.18",
-    "vue": "^3.2.45",
-    "vue-router": "^4.1.6"
+    "ro-crate": "^3.3.3"
+  },
+  "peerDependencies": {
+    "vue": "^3.3.8",
+    "element-plus": "^2.4.2"
   },
   "devDependencies": {
     "@babel/core": "^7.14.8",
@@ -69,6 +75,7 @@
     "@types/leaflet-editable": "^1.2.2",
     "@types/wicg-file-system-access": "^2020.9.5",
     "@vitejs/plugin-vue": "^4.3.1",
+    "ajv": "^8.12.0",
     "autoprefixer": "^10.4.14",
     "babel-loader": "^8.2.2",
     "buffer": "^6.0.3",
@@ -84,6 +91,8 @@
     "mini-css-extract-plugin": "^2.1.0",
     "postcss": "^8.4.21",
     "postcss-loader": "^6.1.1",
+    "ro-crate-editor-profiles": "github:Language-Research-Technology/ro-crate-editor-profiles",
+    "ro-crate-excel": "^1.0.18",
     "sass": "^1.57.1",
     "tailwindcss": "^3.3.1",
     "to-arraybuffer": "^1.0.1",
@@ -92,6 +101,7 @@
     "vite": "^4.5.0",
     "vite-plugin-html": "^3.2.0",
     "vue-loader": "^17.0.1",
+    "vue-router": "^4.2.5",
     "webpack": "^5.72.0",
     "webpack-cli": "^4.9.2",
     "webpack-dev-server": "^4.0.0",

src/App.vue → src/app/App.vue

@@ -3,6 +3,7 @@ import {RouterLink, RouterView} from 'vue-router';
 
 import {reactive} from "vue";
 
+const version = __APP_VERSION__;
 const data = reactive({
   noBrowserSupport: false
 });
@@ -18,12 +19,12 @@ if (!window.showDirectoryPicker) {
     <el-row :gutter="10" class="flex items-center justify-center min-w-md">
       <el-col :span="8">
         <span class="flex flex-col justify-center items-center ml-2">
-          <img alt="Crate-O an RO-Crate Editor" class="logo min-h-full p-0 h-16" src="@/assets/logo.svg" width="85"/>
+          <img alt="Crate-O an RO-Crate Editor" class="logo min-h-full p-0" src="/logo.svg" width="60"/>
         </span>
       </el-col>
       <el-col :span="16">
-        <div class="flex flex-col justify-center items-center">
-          <p class="text-2xl">Crate-O</p>
+        <div class="justify-center text-2xl">Crate-O
+          <span class="text-xs">v{{ version }}</span>
         </div>
       </el-col>
     </el-row>

src/components/Welcome.vue → src/app/components/Welcome.vue

@@ -1,5 +1,5 @@
 <script setup>
-import Help from "@/components/Help.vue";
+import Help from "./Help.vue";
 
 //TODO: Insert code that will load the readme markdown into here as html
 </script>

src/main.js → src/app/main.js

@@ -1,9 +1,9 @@
-import {createApp, inject, provide} from 'vue';
+import {createApp} from 'vue';
 //import {createPinia} from 'pinia';
 //import ElementPlus from 'element-plus';
 
 import './styles.css';
-//import "@element-plus/theme-chalk/dist/index.css";
+import "@element-plus/theme-chalk/dist/index.css";
 //import 'element-plus/dist/index.css';
 
 import App from './App.vue';