@vcmap/ui 6.0.0-rc.2 → 6.0.0-rc.3

package/src/manager/collectionManager/CollectionComponent.vue.d.ts

@@ -9,12 +9,14 @@ declare const _default: import("vue").DefineComponent<{
     selectable: any;
     overflowCount: any;
     actions: import("vue").ComputedRef<any>;
-}, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+}, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "openList"[], "openList", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     open: {
         type: BooleanConstructor;
         default: boolean;
     };
-}>>, {
+}>> & {
+    onOpenList?: ((...args: any[]) => any) | undefined;
+}, {
     open: boolean;
 }, {}>;
 export default _default;

package/src/manager/collectionManager/CollectionComponentContent.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-container class="py-0 px-0">
+  <v-container class="py-0 px-0 collection-component-content">
     <vcs-list
       :items="items.slice(0, limit)"
       :draggable="draggable"
@@ -36,13 +36,14 @@
    * @vue-event {string} openList
    */
   export default {
-    name: 'CollectionComponent',
+    name: 'CollectionComponentContent',
     components: {
       VcsButton,
       VcsList,
       VSheet,
       VContainer,
     },
+    emits: ['openList'],
     setup(_props, { emit }) {
       /**
        * @type {CollectionComponentClass}
@@ -89,12 +90,12 @@
 <style lang="scss" scoped>
   :deep(.v-list) {
     .v-list-item {
-      padding: 4px 8px 4px 28px;
+      padding-left: 24px;
+      padding-inline-start: 24px !important;
     }
     .v-list-item__selected {
-      border-left: solid 4px;
-      border-left-color: var(--v-primary-base);
-      padding-left: 24px !important;
+      padding-left: 20px !important;
+      padding-inline-start: 20px !important;
     }
   }
 </style>

package/src/manager/collectionManager/CollectionComponentContent.vue.d.ts

@@ -13,5 +13,7 @@ declare const _default: import("vue").DefineComponent<{}, {
         targetIndex: any;
     }): void;
     openCollectionComponentList(): void;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "openList"[], "openList", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>> & {
+    onOpenList?: ((...args: any[]) => any) | undefined;
+}, {}, {}>;
 export default _default;

package/src/manager/collectionManager/CollectionComponentList.vue

@@ -1,11 +1,8 @@
 <template>
-  <div>
-    <div
-      v-if="!hideHeader"
-      class="v-expansion-panel-header px-2 v-expansion-panel-header--active"
-    >
-      <div class="d-flex justify-space-between">
-        <div class="d-flex align-center gc-1 pl-2">
+  <div class="collection-component-list">
+    <div v-if="!hideHeader" class="pr-2 pl-4 py-1">
+      <div class="d-flex justify-space-between inner-header">
+        <div class="d-flex align-center gc-1">
           <span>
             {{ $st(title) }}
           </span>
@@ -93,6 +90,7 @@
       VcsList,
       VSheet,
     },
+    emits: ['closeList'],
     setup(_props, { emit }) {
       /**
        * @type {import("./collectionComponentClass.js").CollectionComponentClass}
@@ -136,4 +134,8 @@
   };
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+  .inner-header {
+    height: calc(var(--v-vcs-item-height) - 8px);
+  }
+</style>

package/src/manager/collectionManager/CollectionComponentList.vue.d.ts

@@ -31,7 +31,7 @@ declare const _default: import("vue").DefineComponent<{
         targetIndex: any;
     }): void;
     closeList(): void;
-}, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+}, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "closeList"[], "closeList", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     showLessButton: {
         type: BooleanConstructor;
         default: boolean;
@@ -40,7 +40,9 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
-}>>, {
+}>> & {
+    onCloseList?: ((...args: any[]) => any) | undefined;
+}, {
     hideHeader: boolean;
     showLessButton: boolean;
 }, {}>;

package/src/manager/collectionManager/CollectionComponentProvider.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="w-100">
+  <div class="w-100 collection-component-provider">
     <slot>
       <collection-component />
     </slot>

package/src/manager/collectionManager/CollectionComponentStandalone.vue

@@ -4,6 +4,7 @@
     :header-actions="actions"
     :action-button-list-overflow-count="overflowCount"
     v-bind="{ ...$attrs }"
+    class="collection-component-standalone"
   >
     <collection-component-list
       v-if="componentListView"
@@ -16,7 +17,7 @@
 
 <script>
   import { computed, getCurrentInstance, inject, ref } from 'vue';
-  import VcsFormSection from '../../components/form-inputs-controls/VcsFormSection.vue';
+  import VcsFormSection from '../../components/section/VcsFormSection.vue';
   import { createSelectionActions } from '../../components/lists/VcsList.vue';
   import CollectionComponentList from './CollectionComponentList.vue';
   import CollectionComponentContent from './CollectionComponentContent.vue';
@@ -27,7 +28,7 @@
    * The collectionComponent must be passed via {@link https://vuejs.org/api/composition-api-dependency-injection.html |provide }.
    */
   export default {
-    name: 'CollectionComponent',
+    name: 'CollectionComponentStandalone',
     components: {
       CollectionComponentList,
       CollectionComponentContent,

package/src/manager/collectionManager/CollectionManager.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-container class="pa-0">
+  <v-container class="pa-0 collection-manager">
     <v-expansion-panels
       variant="accordion"
       multiple

package/src/manager/collectionManager/collectionComponentClass.js

@@ -3,13 +3,12 @@ import { getLogger } from '@vcsuite/logger';
 import { v4 as uuidv4 } from 'uuid';
 import { computed, ref, shallowRef, watch } from 'vue';
 import { parseBoolean, parseNumber } from '@vcsuite/parsers';
-import { check } from '@vcsuite/check';
+import { check, oneOf } from '@vcsuite/check';
 import { validateAction } from '../../components/lists/VcsActionList.vue';
 import { sortByWeight } from '../buttonManager.js';
 import {
   createListItemBulkAction,
   createListItemDeleteAction,
-  createListItemRenameAction,
 } from '../../actions/listActions.js';
 import { sortByOwner } from '../navbarManager.js';
 
@@ -56,7 +55,7 @@ function destroyListItem(listItem) {
 /**
  * Renames the title of an item for VcsObject based items.
  * @param {import("@vcmap/core").VcsObject} item
- * @param {import("../../components/lists/VcsList").VcsListItem} listItem
+ * @param {import("../../components/lists/VcsList.vue").VcsListItem} listItem
  * @param {string} newTitle
  */
 function titleChanged(item, listItem, newTitle) {
@@ -77,7 +76,7 @@ export function createSupportedMapMappingFunction(
   supportedMaps,
   mapCollection,
 ) {
-  check(supportedMaps, [[String], Function]);
+  check(supportedMaps, oneOf([String], Function));
 
   return (item, _c, listItem) => {
     const mapNames =
@@ -359,11 +358,9 @@ class CollectionComponentClass {
       destroyFunctions: [],
     };
     if (this.renamable.value) {
-      listItem.actions.push(
-        createListItemRenameAction(listItem, {
-          name: this._actionTitles.renameTitle,
-        }),
-      );
+      listItem.renamable = {
+        name: this._actionTitles.renameTitle,
+      };
       listItem.titleChanged = (newTitle) =>
         titleChanged(item, listItem, newTitle);
     }

package/src/manager/collectionManager/collectionManager.js

@@ -1,6 +1,6 @@
 import { VcsEvent, Collection } from '@vcmap/core';
 import { reactive } from 'vue';
-import { check, checkMaybe } from '@vcsuite/check';
+import { check, maybe, oneOf } from '@vcsuite/check';
 import { validateActions } from '../../components/lists/VcsActionList.vue';
 import CollectionComponentClass from './collectionComponentClass.js';
 
@@ -133,7 +133,7 @@ class CollectionManager {
    */
   add(collectionComponentOptions, owner) {
     check(collectionComponentOptions, { collection: Collection });
-    check(owner, [String, Symbol]);
+    check(owner, oneOf(String, Symbol));
 
     if (
       collectionComponentOptions.id &&
@@ -220,9 +220,9 @@ class CollectionManager {
     owner,
     collectionComponentIds = [],
   ) {
-    checkMaybe(predicate, Function);
+    check(predicate, maybe(Function));
     check(mappingFunction, Function);
-    check(owner, [String, Symbol]);
+    check(owner, oneOf(String, Symbol));
     check(collectionComponentIds, [String]);
 
     /** @type {ItemMapping} */
@@ -260,7 +260,7 @@ class CollectionManager {
    */
   removeMappingFunction(mappingFunction, owner) {
     check(mappingFunction, Function);
-    check(owner, [String, Symbol]);
+    check(owner, oneOf(String, Symbol));
 
     [...this._collectionComponents.values()].forEach((collectionComponent) => {
       collectionComponent.removeItemMapping({ mappingFunction, owner });
@@ -279,7 +279,7 @@ class CollectionManager {
    */
   addFilterFunction(filterFunction, owner, collectionComponentIds = []) {
     check(filterFunction, Function);
-    check(owner, [String, Symbol]);
+    check(owner, oneOf(String, Symbol));
     check(collectionComponentIds, [String]);
 
     /** @type {ItemFilter} */
@@ -316,7 +316,7 @@ class CollectionManager {
    */
   removeFilterFunction(filterFunction, owner) {
     check(filterFunction, Function);
-    check(owner, [String, Symbol]);
+    check(owner, oneOf(String, Symbol));
 
     [...this._collectionComponents.values()].forEach((collectionComponent) => {
       collectionComponent.removeItemFilter({ filterFunction, owner });
@@ -334,7 +334,7 @@ class CollectionManager {
    * @param {Array<string>} [collectionComponentIds] list of collectionComponents this mappingFunction should be used on. If empty, actions are applied to all managed collectionComponents.
    */
   addActions(actions, owner, collectionComponentIds = []) {
-    check(owner, [String, Symbol]);
+    check(owner, oneOf(String, Symbol));
     check(collectionComponentIds, [String]);
 
     if (!validateActions(actions)) {
@@ -367,7 +367,7 @@ class CollectionManager {
    * @param {string | symbol} owner
    */
   removeActions(actions, owner) {
-    check(owner, [String, Symbol]);
+    check(owner, oneOf(String, Symbol));
 
     const idx = this._itemActions.findIndex((a) => a.actions === actions);
     if (idx > -1) {
@@ -386,7 +386,7 @@ class CollectionManager {
    * @param {string | symbol} owner
    */
   removeOwner(owner) {
-    check(owner, [String, Symbol]);
+    check(owner, oneOf(String, Symbol));
 
     [...this._collectionComponents.values()].forEach((collectionComponent) => {
       if (collectionComponent.owner === owner) {

package/src/manager/collectionManager/editorCollectionComponentClass.js

@@ -1,5 +1,5 @@
 import { nextTick, reactive, watch } from 'vue';
-import { check, checkMaybe } from '@vcsuite/check';
+import { check, maybe, oneOf } from '@vcsuite/check';
 import { WindowSlot } from '../window/windowManager.js';
 import CollectionComponentClass from './collectionComponentClass.js';
 import { createListEditAction } from '../../actions/listActions.js';
@@ -65,9 +65,9 @@ export function makeEditorCollectionComponentClass(
   parentId = 'category-manager',
 ) {
   check(collectionComponent, CollectionComponentClass);
-  check(editingOptions.editor, [Object, Function]);
-  checkMaybe(editingOptions.multiEditor, Object);
-  checkMaybe(editingOptions.predicate, Function);
+  check(editingOptions.editor, oneOf(Object, Function));
+  check(editingOptions.multiEditor, maybe(Object));
+  check(editingOptions.predicate, maybe(Function));
 
   const editorCollectionComponent =
     /** @type {EditorCollectionComponentClass} */ collectionComponent;

package/src/manager/contextMenu/contextMenuManager.js

@@ -1,6 +1,6 @@
 import { CesiumMap, BaseOLMap, VcsEvent } from '@vcmap/core';
 import { unByKey } from 'ol/Observable.js';
-import { check } from '@vcsuite/check';
+import { check, oneOf } from '@vcsuite/check';
 import ContextMenuInteraction from './contextMenuInteraction.js';
 import { vcsAppSymbol } from '../../pluginHelper.js';
 import { validateAction } from '../../components/lists/VcsActionList.vue';
@@ -176,7 +176,7 @@ class ContextMenuManager {
    */
   addEventHandler(handler, owner) {
     check(handler, Function);
-    check(owner, [String, vcsAppSymbol]);
+    check(owner, oneOf(String, vcsAppSymbol));
 
     this._ensureInteraction();
     this._eventHandlers.push({ owner, handler });

package/src/manager/navbarManager.js

@@ -1,4 +1,4 @@
-import { check } from '@vcsuite/check';
+import { check, ofEnum } from '@vcsuite/check';
 import ButtonManager, { sortByWeight } from './buttonManager.js';
 import { vcsAppSymbol } from '../pluginHelper.js';
 
@@ -89,7 +89,7 @@ class NavbarManager extends ButtonManager {
    * @returns {import("./buttonManager.js").ButtonComponent}
    */
   add(buttonComponentOptions, owner, location) {
-    check(location, Object.values(ButtonLocation));
+    check(location, ofEnum(ButtonLocation));
     const buttonComponent = super.add(buttonComponentOptions, owner);
     buttonComponent[locationSymbol] = location;
     return buttonComponent;

package/src/manager/panel/panelManager.js

@@ -1,6 +1,6 @@
 import { reactive } from 'vue';
 import { VcsEvent } from '@vcmap/core';
-import { check } from '@vcsuite/check';
+import { check, ofEnum, oneOf } from '@vcsuite/check';
 import { v4 as uuidv4 } from 'uuid';
 import { parseBoolean } from '@vcsuite/parsers';
 import { vcsAppSymbol } from '../../pluginHelper.js';
@@ -279,8 +279,8 @@ class PanelManager {
    * @returns {PanelComponent}
    */
   add(panelComponentOptions, owner, location) {
-    check(owner, [String, vcsAppSymbol]);
-    check(location, Object.values(PanelLocation));
+    check(owner, oneOf(String, vcsAppSymbol));
+    check(location, ofEnum(PanelLocation));
 
     const id = panelComponentOptions.id || uuidv4();
     const { component, position: panelPosition } = panelComponentOptions;

package/src/manager/toolbox/toolboxManager.js

@@ -1,5 +1,5 @@
 import { VcsEvent } from '@vcmap/core';
-import { check, checkMaybe } from '@vcsuite/check';
+import { check, maybe, ofEnum, oneOf, optional } from '@vcsuite/check';
 import { v4 as uuidv4 } from 'uuid';
 import { reactive, shallowReactive } from 'vue';
 import { vcsAppSymbol } from '../../pluginHelper.js';
@@ -230,7 +230,7 @@ class ToolboxManager {
   }
 
   set toolboxName(name) {
-    check(name, [String, defaultToolboxName]);
+    check(name, oneOf(String, defaultToolboxName));
 
     if (this._toolboxName !== name) {
       this._toolboxName = name;
@@ -285,9 +285,9 @@ class ToolboxManager {
    * @returns {SingleToolboxComponent|SelectToolboxComponent|import("vue").ShallowReactive<GroupToolboxComponent>}
    */
   add(toolboxComponentOptions, owner) {
-    checkMaybe(toolboxComponentOptions.id, String);
-    check(toolboxComponentOptions.type, Object.values(ToolboxType));
-    check(owner, [String, vcsAppSymbol]);
+    check(toolboxComponentOptions.id, maybe(String));
+    check(toolboxComponentOptions.type, ofEnum(ToolboxType));
+    check(owner, oneOf(String, vcsAppSymbol));
 
     if (toolboxComponentOptions.id && this.has(toolboxComponentOptions.id)) {
       throw new Error(
@@ -335,13 +335,13 @@ class ToolboxManager {
         ...ActionPattern,
         selected: Function,
         currentIndex: Number,
-        disabled: [undefined, Boolean],
+        disabled: optional(Boolean),
         tools: [
           {
             name: String,
-            title: [undefined, String],
+            title: optional(String),
             icon: String,
-            disabled: [undefined, Boolean],
+            disabled: optional(Boolean),
           },
         ],
       });
@@ -357,8 +357,8 @@ class ToolboxManager {
       };
     } else {
       check(toolboxComponentOptions.icon, String);
-      checkMaybe(toolboxComponentOptions.title, String);
-      checkMaybe(toolboxComponentOptions.disabled, Boolean);
+      check(toolboxComponentOptions.title, maybe(String));
+      check(toolboxComponentOptions.disabled, maybe(Boolean));
       const {
         icon,
         title = undefined,

package/src/manager/window/windowManager.d.ts

@@ -19,7 +19,7 @@ export function isSlotPosition(windowPosition: WindowPosition): boolean;
  *   headerComponent?: import("vue").Component<T, unknown, unknown>,
  *   state? : Partial<WindowState>,
  *   position? : Partial<WindowPositionOptions>,
- *   slot: WindowSlot,
+ *   slot?: WindowSlot,
  *   props?: T,
  *   provides?: Record<string, unknown>
  * }} WindowComponentOptions
@@ -136,7 +136,7 @@ export type WindowComponentOptions<T extends Object = Object> = {
     headerComponent?: import("vue").Component<T, unknown, unknown>;
     state?: Partial<WindowState>;
     position?: Partial<WindowPositionOptions>;
-    slot: WindowSlot;
+    slot?: WindowSlot;
     props?: T;
     provides?: Record<string, unknown>;
 };

package/src/manager/window/windowManager.js

@@ -2,7 +2,7 @@ import { computed, reactive, ref } from 'vue';
 import { VcsEvent } from '@vcmap/core';
 import { v4 as uuidv4 } from 'uuid';
 import { parseEnumValue } from '@vcsuite/parsers';
-import { check } from '@vcsuite/check';
+import { check, oneOf } from '@vcsuite/check';
 import { vcsAppSymbol } from '../../pluginHelper.js';
 
 /**
@@ -109,7 +109,7 @@ export function isSlotPosition(windowPosition) {
  *   headerComponent?: import("vue").Component<T, unknown, unknown>,
  *   state? : Partial<WindowState>,
  *   position? : Partial<WindowPositionOptions>,
- *   slot: WindowSlot,
+ *   slot?: WindowSlot,
  *   props?: T,
  *   provides?: Record<string, unknown>
  * }} WindowComponentOptions
@@ -563,7 +563,7 @@ class WindowManager {
    * @returns {WindowComponent}
    */
   add(windowComponentOptions, owner) {
-    check(owner, [String, vcsAppSymbol]);
+    check(owner, oneOf(String, vcsAppSymbol));
 
     if (
       windowComponentOptions.id &&
@@ -747,7 +747,7 @@ class WindowManager {
    */
   addExternalIdToZIndex(id, owner) {
     check(id, String);
-    check(owner, [String, vcsAppSymbol]);
+    check(owner, oneOf(String, vcsAppSymbol));
 
     if (this.has(id)) {
       throw new Error(`Id ${id} already belongs to a window id`);

package/src/search/search.js

@@ -10,7 +10,7 @@ import {
   Viewpoint,
 } from '@vcmap/core';
 import { shallowRef } from 'vue';
-import { check } from '@vcsuite/check';
+import { check, oneOf } from '@vcsuite/check';
 import { Icon } from 'ol/style.js';
 import { getLogger } from '@vcsuite/logger';
 import { vcsAppSymbol } from '../pluginHelper.js';
@@ -183,7 +183,7 @@ class Search extends IndexedCollection {
    * @param {number=} index
    */
   add(item, owner, index) {
-    check(owner, [String, vcsAppSymbol]);
+    check(owner, oneOf(String, vcsAppSymbol));
     check(item.search, Function);
 
     item[searchImplOwnerSymbol] = owner;

package/src/siteConfig.js

@@ -35,7 +35,7 @@ function setHeaderTitle(title) {
   document.head.appendChild(titleElement);
 }
 
-const defaultFavicon = './assets/favicon.svg';
+const defaultFavicon = './assets/favicon-4c4ce5df.svg';
 
 const defaultHeaderTitle = 'VC Map';
 

package/src/state.js

@@ -1,4 +1,4 @@
-import { check } from '@vcsuite/check';
+import { check, optional } from '@vcsuite/check';
 import { getLogger } from '@vcsuite/logger';
 import { Viewpoint } from '@vcmap/core';
 
@@ -257,9 +257,9 @@ export function getStateFromURL(url) {
  */
 export function setStateToUrl(state, url) {
   check(state, {
-    activeMap: [String, undefined],
-    activeViewpoint: [Object, undefined],
-    activeObliqueCollection: [String, undefined],
+    activeMap: optional(String),
+    activeViewpoint: optional(Object),
+    activeObliqueCollection: optional(String),
     layers: Array,
     plugins: Array,
     moduleIds: [String],

package/src/vcsUiApp.d.ts

@@ -275,7 +275,14 @@ declare class VcsUiApp extends VcsApp {
         theme: import("vuetify").ThemeInstance & {
             install: (app: import("vue").App<any>) => void;
         };
-        icons: Record<string, any>;
+        icons: {
+            defaultSet: string;
+            aliases: Partial<import("vuetify").IconAliases>;
+            sets: Record<string, import("vuetify").IconSet>; /**
+             * @type {Array<function():void>}
+             * @private
+             */
+        };
         locale: {
             isRtl: import("vue").Ref<boolean>;
             rtl: import("vue").Ref<Record<string, boolean>>;
@@ -306,7 +313,7 @@ declare class VcsUiApp extends VcsApp {
                 toISO: (date: unknown) => string;
                 startOfDay: (date: unknown) => unknown;
                 endOfDay: (date: unknown) => unknown;
-                startOfWeek: (date: unknown) => unknown;
+                startOfWeek: (date: unknown, firstDayOfWeek?: string | number | undefined) => unknown;
                 endOfWeek: (date: unknown) => unknown;
                 startOfMonth: (date: unknown) => unknown;
                 endOfMonth: (date: unknown) => unknown;
@@ -329,8 +336,8 @@ declare class VcsUiApp extends VcsApp {
                 getYear: (date: unknown) => number;
                 setYear: (date: unknown, year: number) => unknown;
                 getDiff: (date: unknown, comparing: unknown, unit?: string | undefined) => number;
-                getWeekArray: (date: unknown) => unknown[][];
-                getWeekdays: () => string[];
+                getWeekArray: (date: unknown, firstDayOfWeek?: string | number | undefined) => unknown[][];
+                getWeekdays: (firstDayOfWeek?: string | number | undefined) => string[];
                 getMonth: (date: unknown) => number;
                 setMonth: (date: unknown, month: number) => unknown;
                 getDate: (date: unknown) => number;
@@ -343,15 +350,12 @@ declare class VcsUiApp extends VcsApp {
                 setMinutes: (date: unknown, minutes: number) => unknown;
             };
         };
-        goTo: {
-            rtl: import("vue").Ref<boolean>;
-            options: Record<string, any>;
-        };
+        goTo: import("vuetify").GoToInstance;
     };
     /**
-     * @returns {import("vue-i18n").VueI18n}
+     * @returns {import("vue-i18n").Composer<{}, {}, {}, string, string, string>}
      */
-    get vueI18n(): import("vue-i18n").VueI18n<any, any, any, string, string, string, import("vue-i18n").Composer<any, any, any, string, string, string>>;
+    get vueI18n(): import("vue-i18n").Composer<{}, {}, {}, string, string, string>;
     /**
      * @returns {CategoryManager}
      */

package/src/vcsUiApp.js

@@ -466,7 +466,7 @@ class VcsUiApp extends VcsApp {
   }
 
   /**
-   * @returns {import("vue-i18n").VueI18n}
+   * @returns {import("vue-i18n").Composer<{}, {}, {}, string, string, string>}
    */
   get vueI18n() {
     return this._vueI18n;

package/src/vuePlugins/vuetify.d.ts

@@ -48,6 +48,8 @@ export function createVcsThemes(): {
         };
         variables: {
             'hover-opacity': number;
+            'high-emphasis-opacity': number;
+            'medium-emphasis-opacity': number;
             'vcs-item-height': string;
             'vcs-font-size': string;
             'vcs-font-family': string;

package/src/vuePlugins/vuetify.js

@@ -64,6 +64,8 @@ export function createVcsThemes() {
       },
       variables: {
         'hover-opacity': 0.16,
+        'high-emphasis-opacity': 1,
+        'medium-emphasis-opacity': 1,
         'vcs-item-height': '40px',
         'vcs-font-size': '15px',
         'vcs-font-family': 'Titillium Web',
@@ -144,6 +146,15 @@ export function createVcsVuetify(i18n) {
         density: 'compact',
         ripple: false,
       },
+      VColorPicker: {
+        elevation: 0,
+        tile: true,
+      },
+      VExpansionPanel: {
+        ripple: false,
+        elevation: 0,
+        tile: true,
+      },
     },
     defaultAssets: {
       font: {