Version 0.20251206.0.

Author: agarny

package.json

@@ -23,7 +23,7 @@
     "url": "git+https://github.com/opencor/webapp.git"
   },
   "type": "module",
-  "version": "0.20251205.2",
+  "version": "0.20251206.0",
   "scripts": {
     "archive:web": "bun src/renderer/scripts/archive.web.js",
     "build": "electron-vite build",

src/renderer/README.md

@@ -7,7 +7,12 @@ There are two versions of OpenCOR:
 1. **OpenCOR:** a desktop application that can be run on [Intel](https://en.wikipedia.org/wiki/List_of_Intel_processors)-based and [ARM](https://en.wikipedia.org/wiki/ARM_architecture_family)-based [Windows](https://en.wikipedia.org/wiki/Microsoft_Windows), [Linux](https://en.wikipedia.org/wiki/Linux), and [macOS](https://en.wikipedia.org/wiki/MacOS) machines; and
 2. **OpenCOR's Web app:** a [Web app](https://en.wikipedia.org/wiki/Web_application) that can be run on a Web browser.
 
-This package is a [Vue 3](https://vuejs.org/) component for OpenCOR, built with the [Composition API](https://vuejs.org/guide/extras/composition-api-faq).
+Some characteristics of this package are that:
+- It is built as a [Vue 3](https://vuejs.org/) component using the [Composition API](https://vuejs.org/guide/extras/composition-api-faq).
+- It uses [PrimeVue](https://www.primefaces.org/primevue/) as its UI framework.
+- It uses [Tailwind CSS](https://tailwindcss.com/) for styling.
+- It can be used as a standalone Web app or embedded in a Vue 3 application.
+- It uses [CSS containment](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Containment) to prevent CSS leakage when embedded in an application that uses a different UI framework.
 
 ## Usage
 
@@ -36,7 +41,9 @@ When no `omex` prop is provided, the component gives access to all of OpenCOR's
 
 ```vue
 <template>
-  <OpenCOR />
+  <div style="height: 100vh; height: 100dvh;">
+    <OpenCOR />
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -53,7 +60,9 @@ When an `omex` prop is provided, the component goes straight into OpenCOR's simu
 
 ```vue
 <template>
-  <OpenCOR omex="https://raw.githubusercontent.com/opencor/webapp/refs/heads/main/tests/models/ui/lorenz.omex" />
+  <div style="height: 100vh; height: 100dvh;">
+    <OpenCOR omex="https://raw.githubusercontent.com/opencor/webapp/refs/heads/main/tests/models/ui/lorenz.omex" />
+  </div>
 </template>
 
 <script setup lang="ts">

src/renderer/package.json

@@ -39,7 +39,7 @@
     },
     "./style.css": "./dist/opencor.css"
   },
-  "version": "0.20251205.2",
+  "version": "0.20251206.0",
   "scripts": {
     "build": "vite build",
     "build:lib": "vite build --config vite.lib.config.ts && cp index.d.ts dist/index.d.ts",

src/renderer/src/App.vue

@@ -1,10 +1,12 @@
 <template>
-  <OpenCOR />
-  <!-- <OpenCOR omex="https://raw.githubusercontent.com/opencor/webapp/refs/heads/main/tests/models/lorenz.cellml" /> -->
-  <!-- <OpenCOR omex="https://raw.githubusercontent.com/opencor/webapp/refs/heads/main/tests/models/lorenz.omex" /> -->
-  <!-- <OpenCOR omex="https://raw.githubusercontent.com/opencor/webapp/refs/heads/main/tests/models/ui/lorenz.omex" /> -->
-  <!-- <OpenCOR omex="https://models.physiomeproject.org/workspace/b7c/rawfile/e0ae8d2d56aaaa091e23e1ee7e84cacbda1dfb6b/lorenz.omex" /> -->
-  <!-- <OpenCOR :omex="rawLorenzOmexFile" /> -->
+  <div class="h-screen">
+    <OpenCOR />
+    <!-- <OpenCOR omex="https://raw.githubusercontent.com/opencor/webapp/refs/heads/main/tests/models/lorenz.cellml" /> -->
+    <!-- <OpenCOR omex="https://raw.githubusercontent.com/opencor/webapp/refs/heads/main/tests/models/lorenz.omex" /> -->
+    <!-- <OpenCOR omex="https://raw.githubusercontent.com/opencor/webapp/refs/heads/main/tests/models/ui/lorenz.omex" /> -->
+    <!-- <OpenCOR omex="https://models.physiomeproject.org/workspace/b7c/rawfile/e0ae8d2d56aaaa091e23e1ee7e84cacbda1dfb6b/lorenz.omex" /> -->
+    <!-- <OpenCOR :omex="rawLorenzOmexFile" /> -->
+  </div>
 </template>
 
 <!-- <script setup lang="ts">

src/renderer/src/components/ContentsComponent.vue

@@ -12,7 +12,7 @@
         :width="width"
         :height="height"
         :isActive="isActive"
-        :interactiveEnabled="interactiveEnabled"
+        :uiEnabled="uiEnabled"
         :file="fileTab.file"
         :isActiveFile="fileTab.file.path() === activeFile"
         :simulationOnly="simulationOnly"
@@ -66,7 +66,7 @@
             :width="width"
             :height="heightMinusFileTablist"
             :isActive="isActive"
-            :interactiveEnabled="interactiveEnabled"
+            :uiEnabled="uiEnabled"
             :file="fileTab.file"
             :isActiveFile="fileTab.file.path() === activeFile"
             :uiJson="fileTab.uiJson"
@@ -97,8 +97,8 @@ const props = defineProps<{
   width: number;
   height: number;
   isActive: boolean;
-  interactiveEnabled: boolean;
   simulationOnly?: boolean;
+  uiEnabled: boolean;
 }>();
 defineExpose({ openFile, closeCurrentFile, closeAllFiles, hasFile, hasFiles, selectFile });
 
@@ -266,7 +266,7 @@ vue.onMounted(() => {
 
 if (common.isDesktop()) {
   vueusecore.onKeyStroke((event: KeyboardEvent) => {
-    if (!props.isActive || !props.interactiveEnabled || fileTabs.value.length === 0) {
+    if (!props.isActive || !props.uiEnabled || fileTabs.value.length === 0) {
       return;
     }
 

src/renderer/src/components/MainMenu.vue

@@ -33,8 +33,8 @@ import * as common from '../common/common';
 
 const props = defineProps<{
   isActive: boolean;
-  interactiveEnabled: boolean;
   hasFiles: boolean;
+  uiEnabled: boolean;
 }>();
 
 const emit = defineEmits([
@@ -191,7 +191,7 @@ vue.onMounted(() => {
 
 if (common.isDesktop()) {
   vueusecore.onKeyStroke((event: KeyboardEvent) => {
-    if (!props.isActive || !props.interactiveEnabled) {
+    if (!props.isActive || !props.uiEnabled) {
       return;
     }