@vcmap/ui 6.0.0-rc.7 → 6.0.0-rc.9

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

@@ -11,8 +11,10 @@
     }"
     v-bind="$attrs"
   >
-    <template #label="scope">
-      <slot name="label" v-bind="scope ?? {}">{{ $st($attrs.label) }}</slot>
+    <template #label="scope" v-if="label || $slots.label">
+      <span class="pl-1">
+        <slot name="label" v-bind="scope ?? {}">{{ $st(label) }}</slot>
+      </span>
     </template>
     <template v-for="slot of forwardSlots" #[slot]="scope">
       <slot :name="slot" v-bind="scope ?? {}" />
@@ -61,14 +63,14 @@
 <script>
   import { ref } from 'vue';
   import { VCheckbox, VTooltip } from 'vuetify/components';
-  import { useForwardSlots, usePadding } from '../composables.js';
+  import { getForwardSlots, usePadding } from '../composables.js';
 
   /**
    * @description Stylized wrapper around {@link https://vuetifyjs.com/en/api/v-checkbox/ |vuetify checkbox}.
    * Provides VTooltip to show error messages
    * @vue-prop {string} [tooltip] - A message to be displayed when there is no error.
    * @vue-prop {('bottom' | 'left' | 'top' | 'right')}  [tooltipPosition='right'] - Position of the error tooltip, see {@link https://vuetifyjs.com/en/api/v-tooltip/#props-location | vuetify tooltip}.
-   * @vue-prop {string} label - Label to be displayed, will be translated.
+   * @vue-prop {string} [label] - Label to be displayed, will be translated.
    * @vue-data {slot} [#label] - slot to pass html for Checkbox label. Overrides label passed as prop.
    */
   export default {
@@ -87,12 +89,16 @@
         type: String,
         default: 'right',
       },
+      label: {
+        type: String,
+        default: undefined,
+      },
     },
     setup(props, { attrs, slots }) {
       const checkbox = ref();
       const errorTooltip = ref();
       const paddingProvided = usePadding(attrs);
-      const forwardSlots = useForwardSlots(slots, ['label', 'message']);
+      const forwardSlots = getForwardSlots(slots, ['label', 'message']);
       return {
         forwardSlots,
         paddingProvided,

package/src/components/form-inputs-controls/VcsCheckbox.vue.d.ts

@@ -7,8 +7,12 @@ declare const _default: import("vue").DefineComponent<{
         type: StringConstructor;
         default: string;
     };
+    label: {
+        type: StringConstructor;
+        default: undefined;
+    };
 }, {
-    forwardSlots: import("vue").ComputedRef<string[]>;
+    forwardSlots: string[];
     paddingProvided: import("vue").ComputedRef<boolean>;
     checkbox: import("vue").Ref<any>;
     errorTooltip: import("vue").Ref<any>;
@@ -21,7 +25,12 @@ declare const _default: import("vue").DefineComponent<{
         type: StringConstructor;
         default: string;
     };
+    label: {
+        type: StringConstructor;
+        default: undefined;
+    };
 }>>, {
+    label: string;
     tooltip: string;
     tooltipPosition: string;
 }, {}>;

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

@@ -53,7 +53,7 @@
 <script>
   import { ref } from 'vue';
   import { VFileInput, VTooltip } from 'vuetify/components';
-  import { useForwardSlots, usePadding } from '../composables.js';
+  import { getForwardSlots, usePadding } from '../composables.js';
 
   /**
    * @description extends API of {@link https://vuetifyjs.com/en/api/v-file-input v-text-field}.
@@ -86,7 +86,7 @@
       const errorTooltipRef = ref();
 
       const paddingProvided = usePadding(attrs);
-      const forwardSlots = useForwardSlots(slots, ['append-inner', 'message']);
+      const forwardSlots = getForwardSlots(slots, ['append-inner', 'message']);
 
       return {
         forwardSlots,

package/src/components/form-inputs-controls/VcsFileInput.vue.d.ts

@@ -8,7 +8,7 @@ declare const _default: import("vue").DefineComponent<{
         default: string;
     };
 }, {
-    forwardSlots: import("vue").ComputedRef<string[]>;
+    forwardSlots: string[];
     paddingProvided: import("vue").ComputedRef<boolean>;
     fileInputRef: import("vue").Ref<any>;
     errorTooltipRef: import("vue").Ref<any>;

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

@@ -141,7 +141,7 @@
 <script>
   import { VSelect, VTooltip, VListItem } from 'vuetify/components';
   import { computed, ref } from 'vue';
-  import { useForwardSlots, usePadding } from '../composables.js';
+  import { getForwardSlots, usePadding } from '../composables.js';
   import VcsCheckbox from './VcsCheckbox.vue';
   import { useProxiedComplexModel } from '../modelHelper.js';
 
@@ -213,7 +213,7 @@
         return props.multiple;
       });
       const paddingProvided = usePadding(attrs);
-      const forwardSlots = useForwardSlots(slots, ['append-inner', 'message']);
+      const forwardSlots = getForwardSlots(slots, ['append-inner', 'message']);
 
       return {
         forwardSlots,

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

@@ -20,7 +20,7 @@ declare const _default: import("vue").DefineComponent<{
         default: undefined;
     };
 }, {
-    forwardSlots: import("vue").ComputedRef<string[]>;
+    forwardSlots: string[];
     localModelValue: import("vue").Ref<any>;
     additionalItems: import("vue").ComputedRef<number>;
     isMultiple: import("vue").ComputedRef<boolean>;

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

@@ -76,7 +76,7 @@
 <script>
   import { computed, ref } from 'vue';
   import { VSlider, VTooltip } from 'vuetify/components';
-  import { useForwardSlots, usePadding } from '../composables.js';
+  import { getForwardSlots, usePadding } from '../composables.js';
   import { useFontSize } from '../../vuePlugins/vuetify.js';
 
   /**
@@ -112,7 +112,7 @@
         return trackSize.value * 2;
       });
       const paddingProvided = usePadding(attrs);
-      const forwardSlots = useForwardSlots(slots, ['append']);
+      const forwardSlots = getForwardSlots(slots, ['append']);
       const sliderRef = ref();
       return {
         hasAppendSlot: computed(() => {

package/src/components/form-inputs-controls/VcsSlider.vue.d.ts

@@ -9,7 +9,7 @@ declare const _default: import("vue").DefineComponent<{
     };
 }, {
     hasAppendSlot: import("vue").ComputedRef<boolean>;
-    forwardSlots: import("vue").ComputedRef<string[]>;
+    forwardSlots: string[];
     sliderRef: import("vue").Ref<any>;
     thumbSize: import("vue").ComputedRef<number>;
     tickSize: import("vue").ComputedRef<number>;

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

@@ -141,7 +141,7 @@
 <script>
   import { ref } from 'vue';
   import { VTextarea, VTooltip } from 'vuetify/components';
-  import { useForwardSlots, usePadding } from '../composables.js';
+  import { getForwardSlots, usePadding } from '../composables.js';
 
   /**
    * @description extends API of {@link https://vuetifyjs.com/en/api/v-textarea/|vuetify v-textarea}.
@@ -173,7 +173,7 @@
       const errorTooltipRef = ref();
 
       const paddingProvided = usePadding(attrs);
-      const forwardSlots = useForwardSlots(slots, ['append-inner', 'message']);
+      const forwardSlots = getForwardSlots(slots, ['append-inner', 'message']);
 
       return {
         forwardSlots,

package/src/components/form-inputs-controls/VcsTextArea.vue.d.ts

@@ -8,7 +8,7 @@ declare const _default: import("vue").DefineComponent<{
         default: string;
     };
 }, {
-    forwardSlots: import("vue").ComputedRef<string[]>;
+    forwardSlots: string[];
     textAreaRef: import("vue").Ref<any>;
     errorTooltipRef: import("vue").Ref<any>;
     paddingProvided: import("vue").ComputedRef<boolean>;

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

@@ -60,7 +60,7 @@
 <script>
   import { computed, ref } from 'vue';
   import { VTextField, VTooltip } from 'vuetify/components';
-  import { useForwardSlots, usePadding } from '../composables.js';
+  import { getForwardSlots, usePadding } from '../composables.js';
   import { useProxiedAtomicModel } from '../modelHelper.js';
 
   function countDecimalPlaces(value) {
@@ -146,7 +146,7 @@
           ) {
             const v = parseFloat(localValue.value);
             if (Number.isFinite(v)) {
-              return v.toFixed(props.decimals);
+              return parseFloat(v.toFixed(props.decimals));
             }
           }
           return localValue.value ?? '';
@@ -172,7 +172,7 @@
       });
 
       const paddingProvided = usePadding(attrs);
-      const forwardSlots = useForwardSlots(slots, ['default', 'message']);
+      const forwardSlots = getForwardSlots(slots, ['default', 'message']);
 
       const prependedContent = computed(() => {
         return (props.forcePrefix && attrs.prefix) || !!slots['prepend-inner'];

package/src/components/form-inputs-controls/VcsTextField.vue.d.ts

@@ -29,7 +29,7 @@ declare const _default: import("vue").DefineComponent<{
     };
 }, {
     prependedContent: import("vue").ComputedRef<{}>;
-    forwardSlots: import("vue").ComputedRef<string[]>;
+    forwardSlots: string[];
     paddingProvided: import("vue").ComputedRef<boolean>;
     visibleValue: import("vue").WritableComputedRef<string | number | boolean>;
     rules: import("vue").ComputedRef<unknown>;

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

@@ -1,5 +1,5 @@
 <template>
-  <v-stepper-vertical v-bind="$attrs">
+  <v-stepper-vertical v-bind="$attrs" class="vcs-wizard">
     <template #icon>
       <slot name="icon"><v-icon>mdi-circle</v-icon></slot>
     </template>
@@ -12,7 +12,7 @@
 <script>
   import { VStepperVertical } from 'vuetify/labs/VStepperVertical';
   import { VIcon } from 'vuetify/components';
-  import { useForwardSlots } from '../composables.js';
+  import { getForwardSlots } from '../composables.js';
 
   /**
    * @description Stylized wrapper around {@link https://vuetifyjs.com/en/api/v-stepper-vertical/ |vuetify stepper vertical}per.
@@ -25,7 +25,7 @@
       VIcon,
     },
     setup(_p, { slots }) {
-      const forwardSlots = useForwardSlots(slots, ['icon']);
+      const forwardSlots = getForwardSlots(slots, ['icon']);
 
       return {
         forwardSlots,

package/src/components/form-inputs-controls/VcsWizard.vue.d.ts

@@ -1,4 +1,4 @@
 declare const _default: import("vue").DefineComponent<{}, {
-    forwardSlots: import("vue").ComputedRef<string[]>;
+    forwardSlots: string[];
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
 export default _default;

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

@@ -1,5 +1,6 @@
 <template>
   <v-stepper-vertical-item
+    class="vcs-wizard-step"
     :value="step"
     :editable="isActiveStep || editable"
     :complete="complete"
@@ -51,7 +52,7 @@
   import { VStepperVerticalItem } from 'vuetify/labs/VStepperVertical';
   import { VSpacer } from 'vuetify/components';
   import { useProxiedComplexModel } from '../modelHelper.js';
-  import { useForwardSlots } from '../composables.js';
+  import { getForwardSlots } from '../composables.js';
   import VcsActionButtonList from '../buttons/VcsActionButtonList.vue';
   import VcsHelp from '../notification/VcsHelp.vue';
 
@@ -166,7 +167,7 @@
         return props.headerActions;
       });
 
-      const forwardSlots = useForwardSlots(slots, ['title', 'default']);
+      const forwardSlots = getForwardSlots(slots, ['title', 'default']);
 
       return {
         showHelp,

package/src/components/form-inputs-controls/VcsWizardStep.vue.d.ts

@@ -44,7 +44,7 @@ declare const _default: import("vue").DefineComponent<{
     showHelp: import("vue").ComputedRef<boolean>;
     actions: import("vue").ComputedRef<VcsAction>;
     isActiveStep: import("vue").ComputedRef<boolean>;
-    forwardSlots: import("vue").ComputedRef<string[]>;
+    forwardSlots: string[];
 }, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     multiple: {
         type: BooleanConstructor;

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

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="marked"
+    class="marked vcs-markdown"
     :class="{
       'pa-2': !paddingProvided,
     }"

package/src/components/import/VcsFileDrop.vue

@@ -4,7 +4,7 @@
     @dragover.prevent="isDragging = true"
     @dragleave.prevent="isDragging = false"
     @drop.prevent="dropped"
-    class="d-flex justify-center drop-field"
+    class="d-flex justify-center drop-field vcs-file-drop"
     :class="{ dragging: isDragging }"
     :dragging="isDragging"
     flat

package/src/components/import/VcsImportComponent.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-card flat class="pa-2">
+  <v-card flat class="pa-2 vcs-import-component">
     <vcs-file-drop
       :height="dropElementHeight"
       :multiple="multiple"

package/src/components/lists/VcsList.vue

@@ -57,14 +57,17 @@
           }"
           @click="select(item, $event)"
         >
-          <template #title="titleScope">
-            <slot name="item.title" v-bind="{ ...titleScope, index }"></slot>
+          <template #append="scope">
+            <slot name="item.append" v-bind="{ ...scope, index, item }" />
           </template>
-          <template #subtitle="subtitleScope">
-            <slot name="item.subtitle" v-bind="{ ...subtitleScope, index }" />
+          <template #title="scope">
+            <slot name="item.title" v-bind="{ ...scope, index, item }" />
           </template>
-          <template #default="scope">
-            <slot name="item.default" v-bind="{ ...scope, index }" />
+          <template #subtitle="scope">
+            <slot name="item.subtitle" v-bind="{ ...scope, index, item }" />
+          </template>
+          <template #prepend="scope">
+            <slot name="item.prepend" v-bind="{ ...scope, index, item }" />
           </template>
         </VcsListItemComponent>
         <slot name="item.intermediate" :item="item" :index="index" />
@@ -170,10 +173,11 @@
    * @vue-prop {string} [tooltip] - tooltip to render on the list title
    * @vue-prop {Array<import("../../actions/actionHelper.js").VcsAction>} [actions] - actions to render in the list title
    * @vue-event {ItemMovedEvent} item-moved - event triggered after item was dragged and is dropped
-   * @vue-data {slot} [#item.prepend-title] - A slot to adapt the list item titel, adding content before the title. Binds item and index.
-   * @vue-data {slot} [#item.title] - A slot to adapt the list item titel. Default content is a span or VcsTextField for active rename action. Binds item and index.
-   * @vue-data {slot} [#item.append-title] - A slot to adapt the list item titel, adding content after the title. Binds item and index.
-   * @vue-data {slot} [#item.intermediate] - A slot to introduce content, e.g. buttons between two list items. Binds item and index.
+   * @vue-data {slot} [#item.prepend] - A slot that forwads to v-list-item prepend slot. Binds v-list-item append slot props, item and item index.
+   * @vue-data {slot} [#item.title] - A slot that forwards to v-list-item title slot. Binds v-list-item title slot props, item and item index.
+   * @vue-data {slot} [#item.subtitle] - A slot that forwards to v-list-item subtitle slot. Binds v-list-item subtitle slot props, item and item index.
+   * @vue-data {slot} [#item.append] - A slot that forwards to v-list-item append slot. Binds v-list-item append slot props, item and item index.
+   * @vue-data {slot} [#item.intermediate] - A slot to introduce content, e.g. buttons between two list items. Binds item and item index.
    */
   export default {
     name: 'VcsList',

package/src/components/lists/VcsListItemComponent.vue

@@ -89,14 +89,20 @@
 </script>
 
 <template>
-  <v-list-item :disabled="item.disabled" v-bind="$attrs">
-    <template #prepend>
-      <v-icon v-if="item.icon">
-        {{ item.icon }}
-      </v-icon>
+  <v-list-item
+    :disabled="item.disabled"
+    v-bind="$attrs"
+    class="vcs-list-item-component"
+  >
+    <template #prepend="scope">
+      <slot name="prepend" v-bind="scope">
+        <v-icon v-if="item.icon">
+          {{ item.icon }}
+        </v-icon>
+      </slot>
     </template>
-    <template #title>
-      <slot name="title" v-bind="{ item, dragging, tooltip }">
+    <template #title="scope">
+      <slot name="title" v-bind="{ ...scope, tooltip }">
         <v-list-item-title
           ref="title"
           :class="{ 'vcs-list-item__rename': rename }"
@@ -121,17 +127,17 @@
         </v-list-item-title>
       </slot>
     </template>
-    <template #subtitle>
-      <slot name="subtitle" v-bind="{ item }" />
+    <template #subtitle="scope">
+      <slot name="subtitle" v-bind="scope" />
     </template>
     <template #default="scope">
-      <slot name="default" v-bind="{ ...scope, item, dragging, tooltip }" />
+      <slot name="default" v-bind="{ ...scope, tooltip }" />
     </template>
-    <template #append="appendScope">
+    <template #append="scope">
       <slot
         name="append"
         v-bind="{
-          ...appendScope,
+          ...scope,
           item,
           actions,
           actionButtonListOverflowCount,

package/src/components/lists/VcsListItemComponent.vue.d.ts

@@ -3,17 +3,21 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{}
         readonly [x: string]: any;
     };
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>, {
+    prepend?(_: {
+        isActive: boolean;
+        isOpen: boolean;
+        isSelected: boolean;
+        isIndeterminate: boolean;
+        select: (value: boolean) => void;
+    }): any;
     title?(_: {
-        item: any;
-        dragging: any;
         tooltip: string;
+        title?: string | number | undefined;
     }): any;
     subtitle?(_: {
-        item: any;
+        subtitle?: string | number | undefined;
     }): any;
     default?(_: {
-        item: any;
-        dragging: any;
         tooltip: string;
         isActive: boolean;
         isOpen: boolean;

package/src/components/lists/VcsTreeview.vue

@@ -118,7 +118,7 @@
   import { VIcon } from 'vuetify/components';
   import { VTreeview } from 'vuetify/labs/VTreeview';
   import { useProxiedAtomicModel } from '../modelHelper.js';
-  import { useForwardSlots } from '../composables.js';
+  import { getForwardSlots } from '../composables.js';
   import VcsTreeviewSearchbar from './VcsTreeviewSearchbar.vue';
   import VcsActionButtonList from '../buttons/VcsActionButtonList.vue';
   import ImageElementInjector from '../ImageElementInjector.vue';
@@ -184,7 +184,7 @@
           .indexOf(q.toLocaleLowerCase());
       };
 
-      const forwardSlots = useForwardSlots(slots, [
+      const forwardSlots = getForwardSlots(slots, [
         'append',
         'title',
         'prepend',

package/src/components/lists/VcsTreeview.vue.d.ts

@@ -19,7 +19,7 @@ declare const _default: import("vue").DefineComponent<{
     iconSize: import("vue").ComputedRef<number>;
     localSearchValue: import("vue").Ref<any>;
     handleFilter: (value: string, q: string, item: Object) => number;
-    forwardSlots: import("vue").ComputedRef<string[]>;
+    forwardSlots: string[];
     itemClicked(name: any, event: any): void;
 }, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:search"[], "update:search", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     items: {

package/src/components/lists/VcsTreeviewSearchbar.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="pa-2 bg-base-lighten-3 position-relative d-flex flex-row justify-space-between align-center rounded-0"
+    class="pa-2 bg-base-lighten-3 position-relative d-flex flex-row justify-space-between align-center rounded-0 vcs-treeview-searchbar"
   >
     <slot name="prepend">
       <v-icon class="search-icon my-0 ml-1" :size="iconSize - 4">

package/src/components/lists/VcsTreeviewTitle.vue

@@ -26,7 +26,7 @@
 </style>
 <template>
   <div
-    class="title-parent pr-2"
+    class="title-parent pr-2 vcs-treeview-title"
     ref="titleParent"
     @click.stop="item.clicked && !item.disabled && item.clicked($event)"
   >

package/src/components/notification/VcsBadge.vue

@@ -1,9 +1,9 @@
 <template>
-  <span class="badge rounded-circle h-3 w-3" :class="[color]" />
+  <span class="vcs-badge rounded-circle h-3 w-3" :class="[color]" />
 </template>
 
 <style lang="scss" scoped>
-  .badge {
+  .vcs-badge {
     border: 1px solid rgb(var(--v-theme-surface)) !important;
   }
   .h-3 {

package/src/components/notification/VcsHelp.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     v-if="$slots.default || text"
-    class="ma-0 font-weight-regular rounded-0 bg-base-lighten-4"
+    class="ma-0 font-weight-regular rounded-0 bg-base-lighten-4 vcs-help"
   >
     <v-container class="py-1 px-2 vcs-help">
       <slot>

package/src/components/plugins/AbstractConfigEditor.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-container class="pa-0">
+  <v-container class="pa-0 abstract-config-editor">
     <v-form v-model="isValid" @submit.prevent="submit">
       <slot />
       <div class="d-flex gc-2 px-2 pt-2 pb-1">

package/src/components/section/VcsExpansionPanel.vue

@@ -43,7 +43,11 @@
   const iconSize = useIconSize();
 </script>
 <template>
-  <v-expansion-panel :disabled="disabled" v-bind="$attrs">
+  <v-expansion-panel
+    :disabled="disabled"
+    v-bind="$attrs"
+    class="vcs-expansion-panel"
+  >
     <v-expansion-panel-title static class="px-2">
       <template #default="{ expanded }">
         <v-list-item-title ref="panelHeader">

package/src/components/style/MenuWrapper.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-sheet>
+  <v-sheet class="menu-wrapper">
     <div class="d-flex align-center py-1">
       <VcsCheckbox
         :model-value="!!modelValue"

package/src/components/style/VcsFeatureStyleComponent.vue

@@ -1,5 +1,6 @@
 <template>
   <VcsVectorStyleComponent
+    class="vcs-feature-style-component"
     :model-value="styleOptions"
     @update:fill="updateFill"
     @update:stroke="updateStroke"

package/src/components/style/VcsFillMenu.vue

@@ -1,5 +1,6 @@
 <template>
   <MenuWrapper
+    class="vcs-fill-menu"
     :value-fallback="{ color: [255, 255, 255, 1] }"
     name="components.style.fill"
     v-bind="{ ...$attrs, ...$props }"

package/src/components/style/VcsFillSelector.vue

@@ -1,5 +1,6 @@
 <template>
   <v-color-picker
+    class="vcs-fill-selector"
     :model-value="rgbaObject"
     @update:model-value="updateColor"
     mode="rgba"

package/src/components/style/VcsImageMenu.vue

@@ -1,5 +1,6 @@
 <template>
   <MenuWrapper
+    class="vcs-image-menu"
     :value-fallback="{
       radius: 10,
       fill: { color: [255, 255, 255, 1] },

package/src/components/style/VcsImageSelector.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-sheet>
+  <v-sheet class="vcs-image-selector">
     <v-container class="px-1 py-0">
       <v-row no-gutters>
         <v-col class="d-flex justify-center py-1">

package/src/components/style/VcsStrokeMenu.vue

@@ -1,5 +1,6 @@
 <template>
   <MenuWrapper
+    class="vcs-stroke-menu"
     :value-fallback="{ color: [0, 0, 0, 1], width: 1 }"
     name="components.style.stroke"
     v-bind="{ ...$attrs, ...$props }"

package/src/components/style/VcsStrokeSelector.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-sheet>
+  <v-sheet class="vcs-stroke-selector">
     <v-container class="px-1 py-0">
       <v-row no-gutters>
         <v-col>

package/src/components/style/VcsTextMenu.vue

@@ -1,5 +1,6 @@
 <template>
   <MenuWrapper
+    class="vcs-text-menu"
     :value-fallback="fallbackStyle"
     name="components.style.text"
     v-bind="{ ...$attrs, ...$props }"

package/src/components/style/VcsTextSelector.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-sheet>
+  <v-sheet class="vcs-text-selector">
     <v-container class="px-1 py-0">
       <v-row no-gutters>
         <v-col>

package/src/components/style/VcsVectorStyleComponent.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-sheet>
+  <v-sheet class="vcs-vector-style-component">
     <component
       v-for="key in styleComponents"
       :key="key"