@vcmap/ui 6.1.0-rc.6 → 6.1.0

package/src/application/VcsNavbarMobile.vue

@@ -0,0 +1,206 @@
+<template>
+  <v-toolbar
+    absolute
+    density="comfortable"
+    elevation="0"
+    class="px-4 vcs-navbar-mobile"
+    :height="toolbarHeight"
+  >
+    <v-container fluid class="pa-0">
+      <v-row no-gutters class="align-center">
+        <v-col>
+          <v-toolbar-items>
+            <div class="d-flex justify-space-between w-100">
+              <VcsToolButton
+                v-if="mobileMenuAction"
+                :key="mobileMenuAction.name"
+                :data-action-name="mobileMenuAction.name"
+                :tooltip="mobileMenuAction.title"
+                :icon="mobileMenuAction.icon"
+                :active="mobileMenuAction.active"
+                @click.stop="mobileMenuAction.callback($event)"
+                v-bind="{ ...$attrs }"
+              />
+              <VcsToolButton
+                v-if="searchAction"
+                :data-action-name="searchAction.name"
+                :key="searchAction.name"
+                :tooltip="searchAction.title"
+                :icon="searchAction.icon"
+                :active="searchAction.active"
+                @click.stop="searchAction.callback($event)"
+                v-bind="{ ...$attrs }"
+              />
+
+              <MapsGroupMobileMenu> </MapsGroupMobileMenu>
+
+              <template v-if="contentActions.length > 0">
+                <VcsToolButton
+                  v-for="(action, index) in contentActions"
+                  :key="action.name || index"
+                  :tooltip="action.title"
+                  :icon="action.icon"
+                  :active="action.active"
+                  @click.stop="action.callback($event)"
+                  v-bind="{ ...$attrs }"
+                />
+              </template>
+              <VcsToolButton
+                v-if="toolboxToggleAction"
+                :key="toolboxToggleAction.name"
+                :tooltip="toolboxToggleAction.title"
+                :icon="toolboxToggleAction.icon"
+                :active="toolboxToggleAction.active"
+                @click.stop="toolboxToggleAction.callback($event)"
+                v-bind="{ ...$attrs }"
+              />
+            </div>
+          </v-toolbar-items>
+        </v-col>
+      </v-row>
+    </v-container>
+  </v-toolbar>
+</template>
+
+<style lang="scss" scoped>
+  .v-toolbar.v-toolbar--bottom {
+    bottom: 0;
+    position: fixed;
+  }
+  .flex-grow-2 {
+    flex-grow: 2;
+  }
+  .vcs-navbar-mobile {
+    bottom: 0;
+    padding-top: calc(var(--v-vcs-font-size) - 5px);
+    padding-bottom: calc(var(--v-vcs-font-size) - 5px);
+  }
+</style>
+
+<script>
+  import { computed, inject, onUnmounted, shallowRef } from 'vue';
+  import {
+    VCol,
+    VContainer,
+    VRow,
+    VToolbar,
+    VToolbarItems,
+  } from 'vuetify/components';
+  import {
+    ButtonLocation,
+    deviceSymbol,
+    getActionsByLocation,
+  } from '../manager/navbarManager.js';
+  import VcsToolButton from '../components/buttons/VcsToolButton.vue';
+  import { vcsAppSymbol } from '../pluginHelper.js';
+  import {
+    createSearchButtonAction,
+    createToggleAction,
+  } from '../actions/actionHelper.js';
+  import { useFontSize } from '../vuePlugins/vuetify.js';
+  import VcsMobileMenuList from './VcsMobileMenuList.vue';
+  import { WindowSlot } from '../manager/window/windowManager.js';
+  import MapsGroupMobileMenu from './MapsGroupMobileMenu.vue';
+  import { toolboxComponentId } from '../manager/toolbox/ToolboxManagerComponent.vue';
+
+  export const mobileMenuListId = 'mobileMenuList';
+
+  /**
+   * @description The menu bar of a VcsMap application in Mobile view.
+   * Consists of three sections (first: Menu & Search, second: Map & Content, third: Toolbox).
+   * They rearrange the buttons of the desktop view according to the new sections.
+   * The ButtonLocation of MENU & imprint/dataprotection buttons are now in the Mobile Menu, the MAP and CONTENT are now in the second section, and the Toolbox is in the third section.
+   */
+  export default {
+    name: 'VcsNavbarMobile',
+    components: {
+      VcsToolButton,
+      VToolbar,
+      VContainer,
+      VRow,
+      VCol,
+      VToolbarItems,
+      MapsGroupMobileMenu,
+    },
+    setup() {
+      const app = inject('vcsApp');
+
+      const mobileButtonComponents = computed(() =>
+        app.navbarManager.componentIds
+          .map((id) => app.navbarManager.get(id))
+          .filter((buttonComponent) => {
+            return buttonComponent[deviceSymbol].mobile;
+          }),
+      );
+      const getActions = (location) =>
+        computed(() =>
+          getActionsByLocation(
+            mobileButtonComponents.value,
+            location,
+            [...app.plugins].map((p) => p.name),
+          ),
+        );
+
+      const { searchAction, destroy: destroySearchAction } =
+        createSearchButtonAction(app);
+
+      onUnmounted(() => {
+        destroySearchAction();
+      });
+
+      const fontSize = useFontSize();
+      const toolbarHeight = computed(() => {
+        return fontSize.value * 3 + 1;
+      });
+
+      const mobileMenuList = {
+        id: mobileMenuListId,
+        component: VcsMobileMenuList,
+        slot: WindowSlot.DYNAMIC_LEFT,
+        state: {
+          headerIcon: '$vcsMenu',
+          headerTitle: 'Menu',
+        },
+      };
+
+      const { action: mobileMenuAction } = createToggleAction(
+        {
+          name: 'mobileMenuAction',
+          title: 'mobileMenu.title',
+          icon: '$vcsMenu',
+        },
+        mobileMenuList,
+        app.windowManager,
+        vcsAppSymbol,
+      );
+
+      // only show the first two actions, rest handled in VcsMobileMenuList
+      const contentActions = computed(() => {
+        return getActions(ButtonLocation.CONTENT)?.value?.slice(0, 2);
+      });
+
+      const toolboxToggleAction = shallowRef(
+        app.navbarManager.get(toolboxComponentId)?.action,
+      );
+      const navbarManagerAddedListener =
+        app.navbarManager.added.addEventListener(({ id }) => {
+          if (id === toolboxComponentId) {
+            toolboxToggleAction.value =
+              app.navbarManager.get(toolboxComponentId).action;
+          }
+        });
+
+      onUnmounted(() => {
+        navbarManagerAddedListener();
+      });
+
+      return {
+        mobileMenuAction,
+        contentActions,
+        toolboxToggleAction,
+        searchAction,
+        toolbarHeight,
+      };
+    },
+  };
+</script>

package/src/application/VcsNavbarMobile.vue.d.ts

@@ -0,0 +1,42 @@
+export const mobileMenuListId: "mobileMenuList";
+declare const _default: import("vue").DefineComponent<{}, {
+    mobileMenuAction: import("../actions/actionHelper.js", { with: { "resolution-mode": "import" } }).VcsAction;
+    contentActions: import("vue").ComputedRef<import("../actions/actionHelper.js", { with: { "resolution-mode": "import" } }).VcsAction[]>;
+    toolboxToggleAction: import("vue").ShallowRef<any>;
+    searchAction: import("vue").Ref<{
+        /**
+         * - reactive and translatable name rendered in overflow
+         */
+        name: string;
+        /**
+         * - reactive and translatable title rendered as tooltip
+         */
+        title?: string | undefined;
+        /**
+         * - icon rendered on the button. If no icon provided, item is rendered in overflow
+         */
+        icon?: string | undefined;
+        /**
+         * - callback function is triggered when the button is clicked
+         */
+        callback: import("../actions/actionHelper.js", { with: { "resolution-mode": "import" } }).ActionCallback;
+        /**
+         * - optional state of button. If active, button is rendered in primary color
+         */
+        active?: boolean | undefined;
+        /**
+         * - optional hasUpdate of button. If true, a yellow notification is rendered next to the button
+         */
+        hasUpdate?: boolean | undefined;
+        /**
+         * - optional background state. If active and background, button is rendered in primary color outlined
+         */
+        background?: boolean | undefined;
+        /**
+         * - optional flag to indicate that the action is disabled
+         */
+        disabled?: boolean | undefined;
+    } | null>;
+    toolbarHeight: import("vue").ComputedRef<number>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
+export default _default;

package/src/application/VcsPositionDisplay.vue

@@ -4,6 +4,7 @@
     :class="{ active: positionDisplayAction.active }"
   >
     <VcsButton
+      :data-action-name="positionDisplayAction.name"
       :tooltip="positionDisplayAction.title"
       :icon="positionDisplayAction.icon"
       @click.stop="positionDisplayAction.callback($event)"

package/src/application/VcsSplashScreen.vue

@@ -10,7 +10,7 @@
     class="vcs-splash-screen"
   >
     <v-card>
-      <v-card-text>
+      <v-card-text class="pb-0 overflow-y-auto">
         <VcsMarkdown :content="$st(options.content)" />
         <VcsCheckbox v-if="options.acceptInput" v-model="checkBox">
           <template #label>
@@ -34,7 +34,7 @@
         </VcsCheckbox>
       </v-card-text>
 
-      <v-card-actions>
+      <v-card-actions class="vcs-splash-screen-actions">
         <div class="d-flex gc-2 w-100 justify-end">
           <VcsFormButton
             v-if="
@@ -69,7 +69,12 @@
   import { computed, ref, inject } from 'vue';
   import { moduleIdSymbol } from '@vcmap/core';
   import { v5 as uuidv5 } from 'uuid';
-  import { hideSplashScreenKey, setToLocalStorage } from '../localStorage.js';
+  import {
+    hideSplashScreenKey,
+    getFromLocalStorage,
+    removeFromLocalStorage,
+    setToLocalStorage,
+  } from '../localStorage.js';
   import { executeCallbacks } from '../callback/vcsCallback.js';
   import VcsFormButton from '../components/buttons/VcsFormButton.vue';
   import VcsCheckbox from '../components/form-inputs-controls/VcsCheckbox.vue';
@@ -89,6 +94,25 @@
     return uuidv5(string, uuidv5.URL);
   }
 
+  /**
+   * Whether the splash screen should be shown.
+   * @param {import("../vcsUiApp.js").default} app
+   * @returns {boolean} - true if the SplashScreenConfigHash of the local storage is different from the current SplashScreenConfigHash
+   */
+  export function shouldShowSplashSceen(app) {
+    if (app.uiConfig.config.splashScreen) {
+      const config = app.uiConfig.getByKey('splashScreen');
+      const hash = getSplashScreenHash(app);
+      const moduleId = config[moduleIdSymbol];
+      const storedHash = getFromLocalStorage(
+        `${name}_${moduleId}`,
+        hideSplashScreenKey,
+      );
+      return hash !== storedHash;
+    }
+    return false;
+  }
+
   export default {
     name: 'VcsSplashScreen',
     components: {
@@ -115,16 +139,20 @@
       const localValue = useProxiedAtomicModel(props, 'modelValue', emit);
 
       const checkBox = ref(false);
-      const dontShowAgain = ref(false);
+      const dontShowAgain = ref(!shouldShowSplashSceen(app));
 
       function exitScreen() {
         localValue.value = false;
         checkBox.value = false;
-        if (dontShowAgain.value) {
+        if (props.options.enableDontShowAgain) {
           const config = app.uiConfig.getByKey('splashScreen');
           const hash = getSplashScreenHash(app);
           const moduleId = config[moduleIdSymbol];
-          setToLocalStorage(`${name}_${moduleId}`, hideSplashScreenKey, hash);
+          if (dontShowAgain.value) {
+            setToLocalStorage(`${name}_${moduleId}`, hideSplashScreenKey, hash);
+          } else {
+            removeFromLocalStorage(`${name}_${moduleId}`, hideSplashScreenKey);
+          }
         }
         if (Array.isArray(props.options.exitCallbackOptions)) {
           executeCallbacks(app, props.options.exitCallbackOptions);
@@ -139,7 +167,7 @@
 
       const position = computed(() => ({
         width: props.options.position?.width || 800,
-        height: props.options.position?.height || 500,
+        height: props.options.position?.height,
         maxWidth: props.options.position?.maxWidth,
         maxHeight: props.options.position?.maxHeight,
       }));
@@ -165,4 +193,8 @@
   .v-input {
     margin-left: -5px !important;
   }
+  .vcs-splash-screen-actions {
+    position: sticky !important;
+    bottom: 0;
+  }
 </style>

package/src/application/VcsSplashScreen.vue.d.ts

@@ -3,6 +3,12 @@
  * @returns {Promise<string>} The hash of the SplashScreen config.
  */
 export function getSplashScreenHash(app: import("@vcmap/ui").VcsUiApp): Promise<string>;
+/**
+ * Whether the splash screen should be shown.
+ * @param {import("../vcsUiApp.js").default} app
+ * @returns {boolean} - true if the SplashScreenConfigHash of the local storage is different from the current SplashScreenConfigHash
+ */
+export function shouldShowSplashSceen(app: import("../vcsUiApp.js").default): boolean;
 declare const _default: import("vue").DefineComponent<{
     modelValue: {
         type: BooleanConstructor;

package/src/application/uiConfigHelper.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Creates a computed property for data protection configuration.
+ * @param {import("../uiConfig.js").UiConfigObject} uiConfig - The UI configuration object from the app.
+ * @returns {import('vue').ComputedRef<import('../uiConfig.js').TextPageType|undefined>}
+ */
+export function getDataProtection(uiConfig: import("../uiConfig.js").UiConfigObject): import('vue').ComputedRef<import('../uiConfig.js').TextPageType | undefined>;
+/**
+ * Creates a computed property for imprint configuration.
+ * @param {import("../uiConfig.js").UiConfigObject} uiConfig - The UI configuration object from the app.
+ * @returns {import('vue').ComputedRef<import('../uiConfig.js').TextPageType|undefined>}
+ */
+export function getImprint(uiConfig: import("../uiConfig.js").UiConfigObject): import('vue').ComputedRef<import('../uiConfig.js').TextPageType | undefined>;

package/src/application/uiConfigHelper.js

@@ -0,0 +1,37 @@
+import { computed } from 'vue';
+
+/**
+ * Creates a computed property for data protection configuration.
+ * @param {import("../uiConfig.js").UiConfigObject} uiConfig - The UI configuration object from the app.
+ * @returns {import('vue').ComputedRef<import('../uiConfig.js').TextPageType|undefined>}
+ */
+export function getDataProtection(uiConfig) {
+  return computed(() => {
+    if (uiConfig?.dataProtection) {
+      return {
+        title: 'footer.dataProtection.title',
+        tooltip: 'footer.dataProtection.tooltip',
+        ...uiConfig.dataProtection,
+      };
+    }
+    return undefined;
+  });
+}
+
+/**
+ * Creates a computed property for imprint configuration.
+ * @param {import("../uiConfig.js").UiConfigObject} uiConfig - The UI configuration object from the app.
+ * @returns {import('vue').ComputedRef<import('../uiConfig.js').TextPageType|undefined>}
+ */
+export function getImprint(uiConfig) {
+  return computed(() => {
+    if (uiConfig?.imprint) {
+      return {
+        title: 'footer.imprint.title',
+        tooltip: 'footer.imprint.tooltip',
+        ...uiConfig.imprint,
+      };
+    }
+    return undefined;
+  });
+}

package/src/components/buttons/VcsActionButtonList.vue

@@ -10,6 +10,7 @@
         class="d-flex"
         v-for="(btn, index) in buttons"
         :key="`${btn.name}-${index}`"
+        :data-action-name="btn.name"
         :tooltip="btn.title"
         :tooltip-position="tooltipPosition"
         :icon="btn.icon"

package/src/components/buttons/VcsToolButton.vue

@@ -20,7 +20,11 @@
         :text="$st(tooltip)"
         :location="tooltipPosition"
       />
-      <v-icon :size="iconSize" v-if="icon" :class="{ 'mr-2': hasDefaultSlot }">
+      <v-icon
+        :size="iconSize"
+        v-if="icon"
+        :class="{ 'mr-2': hasDefaultSlot && !xs }"
+      >
         {{ icon }}
       </v-icon>
       <VcsBadge
@@ -68,6 +72,7 @@
 <script>
   import { computed } from 'vue';
   import { VBtn, VIcon, VTooltip } from 'vuetify/components';
+  import { useDisplay } from 'vuetify';
   import VcsBadge from '../notification/VcsBadge.vue';
   import { getForwardSlots } from '../composables.js';
   import { useFontSize } from '../../vuePlugins/vuetify.js';
@@ -147,6 +152,7 @@
         return 'text';
       });
 
+      const { xs } = useDisplay();
       const fontSize = useFontSize();
       const itemHeight = computed(() => {
         return fontSize.value * 2 + 6;
@@ -162,6 +168,7 @@
         forwardSlots,
         buttonVariant,
         hasDefaultSlot,
+        xs,
       };
     },
   };

package/src/components/buttons/VcsToolButton.vue.d.ts

@@ -38,6 +38,7 @@ declare const _default: import("vue").DefineComponent<{
     forwardSlots: string[];
     buttonVariant: import("vue").ComputedRef<"flat" | "text">;
     hasDefaultSlot: import("vue").ComputedRef<boolean>;
+    xs: import("vue").Ref<boolean>;
 }, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     active: {
         type: BooleanConstructor;

package/src/components/form-inputs-controls/VcsSelect.vue

@@ -15,12 +15,14 @@
     v-model="localModelValue"
   >
     <template #selection="{ item, index }">
-      <span v-if="index === 0" class="text-truncate w-100">
-        {{ $st(getTitle(item.raw)) }}
-      </span>
-      <span v-if="index === 1" class="text-no-wrap">
-        (+{{ additionalItems }})
-      </span>
+      <slot name="selection" v-bind="{ item, index }">
+        <span v-if="index === 0" class="text-truncate w-100">
+          {{ $st(getTitle(item.raw)) }}
+        </span>
+        <span v-if="index === 1" class="text-no-wrap">
+          (+{{ additionalItems }})
+        </span>
+      </slot>
     </template>
 
     <template #append-inner="scope">

package/src/components/form-output/VcsTemplateMarkdown.vue

@@ -0,0 +1,43 @@
+<script setup>
+  import { computed, inject } from 'vue';
+  import { renderTemplate } from '@vcmap/core';
+  import VcsMarkdown from './VcsMarkdown.vue';
+
+  const app = inject('vcsApp');
+
+  const props = defineProps({
+    /**
+     * The template to render to markdown.
+     */
+    template: {
+      type: String,
+      default: '',
+    },
+    /**
+     * The context to render the template with.
+     * The context will get augmented with the currentVcsAppLocale.
+     * Template re-renders on locale change and uses vue18n.t for translation.
+     */
+    context: {
+      type: Object,
+      default: () => ({}),
+    },
+  });
+
+  const content = computed(() => {
+    return renderTemplate(
+      props.template,
+      {
+        ...props.context,
+        currentVcsAppLocale: app.vueI18n.locale.value,
+      },
+      (key) => app.vueI18n.t(key),
+    );
+  });
+</script>
+
+<template>
+  <vcs-markdown :content="content" />
+</template>
+
+<style scoped lang="scss"></style>

package/src/components/form-output/VcsTemplateMarkdown.vue.d.ts

@@ -0,0 +1,9 @@
+declare const _default: import("vue").DefineComponent<{}, {
+    template: string;
+    context: Record<string, any>;
+    $props: {
+        readonly template?: string | undefined;
+        readonly context?: Record<string, any> | undefined;
+    };
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
+export default _default;

package/src/components/icons/+all.d.ts

@@ -1,3 +1,8 @@
+/**
+ * @param {string} color
+ * @returns {import("ol/style/Icon").Options}
+ */
+export function getColoredMapIcon(color: string): import("ol/style/Icon").Options;
 export const IconIds: string[];
 export const IconNames: string[];
 export default Icons;

package/src/components/icons/+all.js

@@ -497,3 +497,17 @@ export const IconNames = Object.keys(Icons).map((name) => {
   return `$${name}`;
 });
 export default Icons;
+
+/**
+ * @param {string} color
+ * @returns {import("ol/style/Icon").Options}
+ */
+export function getColoredMapIcon(color) {
+  return {
+    src: `data:image/svg+xml,%3Csvg xmlns:dc='http://purl.org/dc/elements/1.1/' xmlns:cc='http://creativecommons.org/ns%23' xmlns:rdf='http://www.w3.org/1999/02/22-rdf-syntax-ns%23' xmlns:svg='http://www.w3.org/2000/svg' xmlns='http://www.w3.org/2000/svg' xmlns:sodipodi='http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd' xmlns:inkscape='http://www.inkscape.org/namespaces/inkscape' id='icon_24_poi' width='24' height='23.994' viewBox='0 0 24 23.994' sodipodi:docname='mapIcon.svg'%3E%3Cg id='Gruppe_1972' transform='translate(-571 -609.477)'%3E%3Cpath id='Pfad_773' d='M583,611a8.009,8.009,0,0,0-8,8c0,5.314,6.952,13.32,7.248,13.658a1,1,0,0,0,1.5,0c.3-.338,7.248-8.344,7.248-13.658A8.009,8.009,0,0,0,583,611Zm0,19.444c-2.18-2.685-6-8.09-6-11.444a6,6,0,0,1,12,0C589,622.354,585.18,627.759,583,630.444Z' fill='currentColor' /%3E%3Cpath id='Pfad_774' d='M583,615a4,4,0,1,0,4,4A4,4,0,0,0,583,615Zm0,6a2,2,0,1,1,2-2A2,2,0,0,1,583,621Z' fill='currentColor' /%3E%3C/g%3E%3Cpath fill='${encodeURIComponent(
+      color,
+    )}' d='M 11.672998,20.526286 C 8.5115524,16.526958 6.4310003,12.714969 6.0702695,10.260963 6.0109099,9.8571482 6.0115821,9.1201807 6.0716855,8.7084104 6.4424582,6.1682348 8.3335069,4.1603103 10.828528,3.6575721 c 1.904966,-0.383844 3.881822,0.1903514 5.289639,1.5364231 0.993092,0.9495349 1.610829,2.1488769 1.810148,3.5144152 0.0601,0.4117703 0.06077,1.1487378 0.0014,1.5525526 -0.357076,2.429138 -2.337816,6.081898 -5.487559,10.119822 -0.224045,0.287223 -0.415188,0.530536 -0.424763,0.540696 -0.0096,0.01016 -0.16456,-0.167678 -0.344411,-0.395195 z m 0.990366,-7.047968 c 0.894914,-0.146674 1.762065,-0.627065 2.349286,-1.301476 0.86707,-0.995812 1.194989,-2.3427819 0.880571,-3.6170541 -0.379849,-1.5394474 -1.596396,-2.6842781 -3.173401,-2.9863277 -0.368703,-0.070619 -1.070937,-0.070619 -1.43964,0 C 9.7056173,5.875042 8.48604,7.0227247 8.1067793,8.5597879 7.8410265,9.6368274 8.0329903,10.787029 8.6317551,11.705317 c 0.5717674,0.876885 1.4205679,1.474277 2.4457369,1.721329 0.47704,0.114961 1.079877,0.134602 1.585872,0.05167 z' id='path1432' /%3E%3C/svg%3E`,
+    scale: 1,
+    color,
+  };
+}

package/src/components/lists/VcsActionList.vue

@@ -2,6 +2,7 @@
   <v-list v-if="actions.length > 0" rounded class="vcs-action-list">
     <v-list-item
       v-for="(action, index) in actions"
+      :data-action-name="action.name"
       :key="`${action.name}-${index}`"
       :class="action.active ? 'text-primary' : ''"
       :disabled="action.disabled || disabled"

package/src/components/lists/VcsGroupedList.vue

@@ -142,7 +142,7 @@
 </script>
 
 <template>
-  <div>
+  <div class="vcs-grouped-list">
     <VcsTreeviewSearchbar
       v-if="searchable"
       :placeholder="searchbarPlaceholder"
@@ -156,6 +156,7 @@
     >
       <vcs-expansion-panel
         v-for="(group, i) in groups"
+        :data-group-name="group.name"
         :key="i"
         :value="group.name"
         :disabled="group.disabled"

package/src/components/lists/VcsListItemComponent.vue

@@ -93,6 +93,7 @@
     :disabled="item.disabled"
     v-bind="$attrs"
     class="vcs-list-item-component"
+    :data-list-item-name="item.name"
   >
     <template #prepend="scope">
       <slot name="prepend" v-bind="scope">

package/src/components/lists/VcsTreeNode.vue

@@ -1,5 +1,9 @@
 <template>
-  <div class="vcs-tree-node" v-if="matchFilter">
+  <div
+    class="vcs-tree-node"
+    v-if="matchFilter"
+    :data-tree-item-name="item.name"
+  >
     <v-row
       no-gutters
       class="treenode flex-nowrap text-truncate"
@@ -13,7 +17,12 @@
         @click="bubbleItemToggled(item.name)"
       />
       <slot name="prepend" v-bind="{ item }">
-        <span class="prepend">
+        <span
+          class="prepend"
+          :class="{
+            'text-disabled': item.disabled,
+          }"
+        >
           <div v-if="item.icon">
             <v-icon v-if="typeof item?.icon === 'string'" :size="iconSize">
               {{ item.icon }}