vue 2.7 version

vue-girder-slicer-ui/package.json

@@ -1,18 +1,24 @@
 {
-  "name": "@bryonlewis/vue-girder-slicer-ui",
-  "version": "0.0.6",
+  "name": "vue-girder-slicer-cli-ui",
+  "version": "0.0.7",
+  "type": "module",
   "files": [
-    "dist"
+    "dist",
+    "src/components/"
   ],
-  "main": "./dist/VueGirderSlicerCLIUI.umd.js",
-  "module": "./dist/VueGirderSlicerCLIUI.es.js",
+  "main": "./dist/vue-girder-slicer-cli-ui.umd.cjs",
+  "types": "./dist/index.d.ts",
+  "module": "./dist/vue-girder-slicer-cli-ui.js",
   "exports": {
     ".": {
-      "import": "./dist/VueGirderSlicerCLIUI.es.js",
-      "require": "./dist/VueGirderSlicerCLIUI.umd.js"
+      "import": "./dist/vue-girder-slicer-cli-ui.js",
+      "require": "./dist/vue-girder-slicer-cli-ui.umd.cjs"
+    },
+    "./dist/style.css": {
+      "import": "./dist/style.css",
+      "require": "./dist/style.css"
     }
   },
-  "types": "./dist/index.d.ts",
   "publishConfig": {
     "@BryonLewis:registry": "https://npm.pkg.github.com"
   },
@@ -22,30 +28,36 @@
   },
   "scripts": {
     "dev": "vite",
-    "build": "vite build && vue-tsc --emitDeclarationOnly",
+    "build": "vue-tsc && vite build",
     "preview": "vite preview",
+    "typecheck": "vue-tsc --noEmit",
     "lint": "eslint --ext .js,.vue --ignore-path .gitignore --fix src"
   },
+  "peerDependencies": {
+    "vue": "^2.7.0"
+  },
   "dependencies": {
     "@jamescoyle/vue-icon": "^0.1.2",
     "@mdi/js": "^7.2.96",
     "@popperjs/core": "^2.11.8",
+    "@vitejs/plugin-vue2": "^2.3.1",
     "axios": "^1.5.0",
     "jquery": "^3.7.1",
     "js-cookie": "^3.0.5",
     "lodash": "^4.17.21",
     "qs": "^6.11.2",
     "underscore": "^1.13.6",
-    "vue": "^3.2.25",
-    "vue-collapsed": "^1.2.9"
+    "vue": "^2.7.0",
+    "vue-template-compiler": "^2.7.15"
   },
   "devDependencies": {
     "@types/bootstrap": "^5.2.10",
+    "@types/jquery": "^3.5.29",
     "@types/js-cookie": "^3.0.6",
     "@types/qs": "^6.9.10",
+    "@types/underscore": "^1.11.15",
     "@typescript-eslint/eslint-plugin": "^6.7.4",
     "@typescript-eslint/parser": "^6.7.4",
-    "@vitejs/plugin-vue": "^4.2.3",
     "bootstrap": "^5.3.1",
     "eslint": "^8.50.0",
     "eslint-plugin-vue": "^9.17.0",

vue-girder-slicer-ui/src/App.vue

@@ -1,25 +1,45 @@
-<script setup lang="ts">
-import { Ref, ref } from 'vue';
+<script lang="ts">
+import { Ref, defineComponent, ref } from 'vue';
 import GirderSlicerTaskButton from './components/GirderSlicerTaskButton.vue';
 import GirderSlicerTaskCard from './components/GirderSlicerTaskCard.vue';
 import DataBrowser from './components/FileBrowser/DataBrowser.vue';
-import { GirderModel } from './girderTypes';
+import type { GirderModel } from './girderTypes';
 
 
-const selected: Ref<string | null> = ref(null);
+export default defineComponent({
+  name: 'App',
+  components: {
+    GirderSlicerTaskButton,
+    GirderSlicerTaskCard,
+    DataBrowser,
+  },
+  props: {
+    
+  },
+  setup() {
+    const selected: Ref<string | null> = ref(null);
 
-const select = (id: string) => {
-  selected.value = id;
-}
-const showBrowser = ref(false);
-
-const validate = (e: GirderModel) => {
-  if (e.name.includes('jpg')) {
-    return  { valid: true}
-  } else {
-    return {valid: false, msg: 'Item needs to be of type jpg'}
-  }
-};
+    const select = (id: string) => {
+      selected.value = id;
+    }
+    const showBrowser = ref(false);
+
+    const validate = (e: GirderModel) => {
+      if (e.name.includes('jpg')) {
+        return  { valid: true}
+      } else {
+        return {valid: false, msg: 'Item needs to be of type jpg'}
+      }
+    };
+    return {
+      selected,
+      select,
+      showBrowser,
+      validate,
+    };
+
+  },
+});
 </script>
 
 <template>

vue-girder-slicer-ui/src/api/girderRest.ts

@@ -2,7 +2,7 @@ import axios_, { Axios, AxiosInstance } from 'axios';
 import cookies from 'js-cookie';
 import { stringify } from 'qs';
 
-interface GirderRestClientParams {
+export interface GirderRestClientParams {
     apiRoot: string;
     token?: string;
     axios?: AxiosInstance;

vue-girder-slicer-ui/src/api/girderSlicerApi.ts

@@ -1,5 +1,5 @@
-import { GirderModel } from "@/girderTypes";
-import { XMLBaseValue, XMLPanel, XMLSpecification } from "../parser/parserTypes";
+import { GirderModel } from '../girderTypes'
+import { XMLBaseValue, XMLSpecification } from "../parser/parserTypes";
 import RestClient from "./girderRest"
 
 export interface SlicerImage {
@@ -22,7 +22,7 @@ export interface JobResponse {
 const fileTypes = ['file', 'directory', 'image', 'item', 'multi', 'new-file'];
 const fileImageItem = ['file', 'image', 'item', 'new-file'];
 const useGirderSlicerApi = (girderRest: RestClient) => {
-    const getSlicerList = async (filter?: string) => {
+    const getSlicerList = async (_filter?: string) => {
         return girderRest.get<SlicerImage[]>('slicer_cli_web/cli');
     }
     const getSlicerXML = async(id: string) => {