Width config

README.md

@@ -186,6 +186,7 @@ There are options to
       },
       {
         "label": "text",
+        "width": 1.5,
         "views": [
           {
             "id": "text1",
@@ -297,6 +298,7 @@ There are options to
 | panels[i].views                         | ViewConfig[]  | ↓    | Defines an array of views inside of a panel. If there are multiple views, we display them in tabs. If there is only one view we omit the tabs and display the view directly inside the panel.                                   |
 | panels[i].views[j].id                   | String        | `view-j`  | Unique identifier for the view across the app.                                                                                                                                                                                  |
 | panels[i].views[j].label                | String        | `View j`  | Sets the label which appears in the tab header. If there is only one view then this label will be displayed as panel header label. Translatable.                                                                                |
+| panels[i].views[j].width                | Number        | 1         | Defines a width multiplier to a panel default width. Values between 1 and 10 are allowed. Float values allowed. Causes horizontal overflow. Ignored on mobile screens since the default width takes the whole screen width.     |
 | panels[i].views[j].default              | Boolean       | `false`   | Specifies whether this view should be visible at the initial start of the app. If no `default` keys provided on views or all `default` keys are set to `false`, then the first view will be considered as default.              |
 | panels[i].views[j].connector            | Object        | ↓    | Defines which view component and its options. Each view can have its own arbitrary config options.                                                                                                                              |
 | panels[i].views[j].connector.id         | Number        | null      | Defines the component id which will be rendered dynamically for this view. See view connectors.                                                                                                                                 |

package.json

@@ -59,7 +59,7 @@
     "tailwindcss": "^3.4.1",
     "typescript-eslint": "^7.16.1",
     "vite": "^5.2.6",
-    "vue": "^3.4.20",
+    "vue": "^3.5.13",
     "vue-i18n": "^9.2.0-beta.35",
     "vuex": "^4.0.1"
   },

src/components/header/PanelsToggle.vue

@@ -70,12 +70,13 @@
 <script setup>
 import { computed, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { isMobile } from '@/utils/is-mobile';
+import { useResize } from '@/utils/resize.js';
 import BaseCheckbox from '@/components/base/BaseCheckbox.vue';
 import BaseButton from '@/components/base/BaseButton.vue';
 import BaseDropdown from '@/components/base/BaseDropdown.vue';
 import { useConfigStore } from '@/stores/config';
 
+const { isMobile } = useResize();
 const configStore = useConfigStore();
 const { t } = useI18n();