Convert markdown container to composables

client/src/components/Markdown/MarkdownContainer.vue

@@ -1,3 +1,67 @@
+<script setup>
+import { computed, ref } from "vue";
+import HistoryDatasetAsImage from "./Elements/HistoryDatasetAsImage";
+import HistoryDatasetDisplay from "./Elements/HistoryDatasetDisplay";
+import HistoryDatasetLink from "./Elements/HistoryDatasetLink";
+import HistoryDatasetIndex from "./Elements/HistoryDatasetIndex";
+import HistoryDatasetCollectionDisplay from "./Elements/HistoryDatasetCollection/CollectionDisplay";
+import HistoryDatasetDetails from "./Elements/HistoryDatasetDetails";
+import HistoryLink from "./Elements/HistoryLink";
+import InvocationTime from "./Elements/InvocationTime";
+import JobMetrics from "./Elements/JobMetrics";
+import JobParameters from "./Elements/JobParameters";
+import ToolStd from "./Elements/ToolStd";
+import WorkflowDisplay from "./Elements/Workflow/WorkflowDisplay";
+import Visualization from "./Elements/Visualization";
+
+const toggle = ref(false);
+const props = defineProps({
+    name: {
+        type: String,
+        default: null,
+    },
+    args: {
+        type: Object,
+        default: null,
+    },
+    datasets: {
+        type: Object,
+        default: null,
+    },
+    collections: {
+        type: Object,
+        default: null,
+    },
+    histories: {
+        type: Object,
+        default: null,
+    },
+    invocations: {
+        type: Object,
+        default: null,
+    },
+    jobs: {
+        type: Object,
+        default: null,
+    },
+    time: {
+        type: String,
+        default: null,
+    },
+    version: {
+        type: String,
+        default: null,
+    },
+    workflows: {
+        type: Object,
+        default: null,
+    },
+});
+
+const isCollapsible = computed(() => props.args.collapse !== undefined);
+const isVisible = computed(() => !isCollapsible.value || toggle.value);
+</script>
+
 <template>
     <div>
         <b-link v-if="isCollapsible" class="font-weight-bold" @click="toggle = !toggle">
@@ -44,91 +108,3 @@
         </b-collapse>
     </div>
 </template>
-
-<script>
-import HistoryDatasetAsImage from "./Elements/HistoryDatasetAsImage";
-import HistoryDatasetDisplay from "./Elements/HistoryDatasetDisplay";
-import HistoryDatasetLink from "./Elements/HistoryDatasetLink";
-import HistoryDatasetIndex from "./Elements/HistoryDatasetIndex";
-import HistoryDatasetCollectionDisplay from "./Elements/HistoryDatasetCollection/CollectionDisplay";
-import HistoryDatasetDetails from "./Elements/HistoryDatasetDetails";
-import HistoryLink from "./Elements/HistoryLink";
-import InvocationTime from "./Elements/InvocationTime";
-import JobMetrics from "./Elements/JobMetrics";
-import JobParameters from "./Elements/JobParameters";
-import ToolStd from "./Elements/ToolStd";
-import WorkflowDisplay from "./Elements/Workflow/WorkflowDisplay";
-import Visualization from "./Elements/Visualization";
-export default {
-    components: {
-        HistoryDatasetDetails,
-        HistoryDatasetAsImage,
-        HistoryDatasetCollectionDisplay,
-        HistoryDatasetDisplay,
-        HistoryDatasetIndex,
-        HistoryDatasetLink,
-        HistoryLink,
-        InvocationTime,
-        JobMetrics,
-        JobParameters,
-        WorkflowDisplay,
-        ToolStd,
-        Visualization,
-    },
-    props: {
-        name: {
-            type: String,
-            default: null,
-        },
-        args: {
-            type: Object,
-            default: null,
-        },
-        datasets: {
-            type: Object,
-            default: null,
-        },
-        collections: {
-            type: Object,
-            default: null,
-        },
-        histories: {
-            type: Object,
-            default: null,
-        },
-        invocations: {
-            type: Object,
-            default: null,
-        },
-        jobs: {
-            type: Object,
-            default: null,
-        },
-        time: {
-            type: String,
-            default: null,
-        },
-        version: {
-            type: String,
-            default: null,
-        },
-        workflows: {
-            type: Object,
-            default: null,
-        },
-    },
-    data() {
-        return {
-            toggle: false,
-        };
-    },
-    computed: {
-        isVisible() {
-            return !this.isCollapsible || this.toggle;
-        },
-        isCollapsible() {
-            return this.args.collapse !== undefined;
-        },
-    },
-};
-</script>