Merge pull request #67 from ddjnw1yu/vue3

Vue3 migration
ABI-Software · Feb 28, 2024 · 4a12ab8 · 4a12ab8
2 parents 7b150e1 + 266b87c
commit 4a12ab8
Show file tree

Hide file tree

Showing 25 changed files with 4,236 additions and 15,019 deletions.
diff --git a/.browserslistrc b/.browserslistrc
@@ -0,0 +1,4 @@
+> 1%
+last 2 versions
+not dead
+defaults
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -0,0 +1,12 @@
+module.exports = {
+  root: true,
+  env: {
+    node: true,
+    es2022: true,
+  },
+  extends: [
+    "plugin:vue/essential",
+    "eslint:recommended"
+  ],
+  rules: {}
+}
diff --git a/.postcssrc.json b/.postcssrc.json
@@ -0,0 +1,6 @@
+{
+    "map": true,
+    "plugins": {
+        "autoprefixer": {}
+    }
+}
diff --git a/README.md b/README.md
@@ -2,44 +2,57 @@
 
 [![npm version](https://badge.fury.io/js/%40abi-software%2Fmap-side-bar.svg)](https://badge.fury.io/js/%40abi-software%2Fmap-side-bar)
 
-This project aims to provide a sidebar for searching capability for
+The project is developed based on Vite-Vue3. Aims to provide a sidebar for searching capability for
 SPARC portal.
 
-## Project installation
+## Customize configuration
+
+See [Vite Configuration Reference](https://vitejs.dev/config/).
+
+## Package installation
+
 ```
 npm i @abi-software/map-side-bar
 ```
 
+## Project Setup
 
-## Project setup
 ```
 npm install
+```
+
+### Compile and Hot-Reload for Development
+
+```
 npm run serve
 ```
 
-### Compiles and minifies for production
+### Compile and Minify for Production
+
 ```
 npm run build-bundle
 ```
 
 ## How to use
-Include the package in your script.
+
+Import the component and the style from the package.
+
 ```javascript
-import '@abi-software/map-side-bar'
-import '@abi-software/map-side-bar/dist/map-side-bar.css'
+import { SideBar } from "@abi-software/map-side-bar";
+import "@abi-software/map-side-bar/dist/style.css";
 ```
 
-#Template
-The code should looks like this
+The code in template should looks like this
 
 ```html
-<SideBar :envVars="envVars"
-         :visible="sideBarVisibility"
-         @actionClick="actionClick">
-</SideBar>
+<SideBar 
+  :envVars="envVars"
+  :visible="sideBarVisibility"
+  @actionClick="actionClick"
+/>
 ```
 
-envVars contains environment varibables like so:
+envVars contains environment variables like so:
 
 ```yaml
 {
@@ -50,8 +63,7 @@ envVars contains environment varibables like so:
 }
 ```
 
-actionClick event is called when an action button has benn clicked on.
-
+actionClick event is called when an action button has been clicked on.
 
 ## Sidebar Data formats
 ### Algolia
@@ -60,14 +72,14 @@ Data retrieved from Algolia can be found here:
 https://github.com/ABI-Software/map-sidebar/blob/3310b165489b10901f50a21e5689ef046251dbd9/src/algolia/algolia.js#L136
 
 ```
-           [
-            'pennsieve.publishDate',  // optional
-            'pennsieve.updatedAt', // optional
-            'Item.curie', //contains the DOI for the dataset (required)
-            'Item.name', // dataset title (required)
-            'Item.description', // dataset description (required)
-            'objectID', // Pennsieve discover ID (required)
-          ],
+[
+  'pennsieve.publishDate',  // optional
+  'pennsieve.updatedAt', // optional
+  'Item.curie', //contains the DOI for the dataset (required)
+  'Item.name', // dataset title (required)
+  'Item.description', // dataset description (required)
+  'objectID', // Pennsieve discover ID (required)
+],
 ```
 
 ### Scicrunch
@@ -130,7 +142,7 @@ All fields are strings:
     {
       "annotation": optional,
       "description": required,
-      "id": requried,
+      "id": required,
       "path": required // relative path to the view file, eg "derivative\\Scaffolds\\scaffoldMap_tenial_view.json",
       "sample": optional // used to link to views to samples
       "thumbnail": optional // technically optional but it won’t look great

diff --git a/babel.config.js b/babel.config.js
diff --git a/index.html b/index.html
@@ -1,11 +1,17 @@
-<!doctype html>
-<html>
-<head>
-
-
-</head>
-<body>
- <!-- Modify the 'file' input to point to a csv file you wish to show -->
- <map-side-bar ></map-side-bar>
-</body>
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="/favicon.ico">
+    <title>Map Sidebar</title>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but this app doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
 </html>