@vcmap/ui 5.0.0-rc.21 → 5.0.0-rc.23

package/src/components/form-inputs-controls/composables.js

@@ -0,0 +1,26 @@
+import { computed } from 'vue';
+
+/**
+ * Syncs the error and validation state with the underlying vuetify component.
+ * @param {Ref<any>} elementRef The template ref to the base vuetify component.
+ * @returns {Ref<string>} Error message to display. Is empty string if either there are no error messages or if the validation errors are not displayed because
+ * no interaction with the component or validation was reset by form. Validation errors have precedence over custom error messages.
+ */
+// eslint-disable-next-line import/prefer-default-export
+export function useErrorSync(elementRef) {
+  const errorMessage = computed(() => {
+    // if element is already mounted
+    if (elementRef.value) {
+      // errorMessages of selectField can either be (empty) array or string. Makes sure it is array.
+      const customErrorMessages = Array.isArray(elementRef.value.errorMessages) ?
+        elementRef.value.errorMessages : [elementRef.value.errorMessages];
+      // if validationState is 'error' (reset button removes this) or if there is errorMessages prop
+      if (elementRef.value.validationState === 'error' || !!customErrorMessages.length) {
+        // custom errorMessages are displayed when all validation error are solved.
+        return [...elementRef.value.errorBucket, ...customErrorMessages][0] || '';
+      }
+    }
+    return '';
+  });
+  return errorMessage;
+}

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

@@ -1,5 +1,5 @@
 <template>
-  <span class="vcs-formatted-number" :class="{'vcs-formatted-number-dense': dense}">
+  <span class="vcs-formatted-number px-1" :class="{'vcs-formatted-number-dense': dense}">
     {{ formatted }}
     <span v-if="unit === SpecialUnits.SQM">
       m<sup>2</sup>

package/src/components/icons/2DDistanceIcon.vue

@@ -10,9 +10,6 @@
       d="M10956.373,13156.8h-11.986a1.387,1.387,0,0,1-1.387-1.39v-3.467a1.386,1.386,0,0,1,1.387-1.387h19.1a1.387,1.387,0,0,1,1.388,1.387v3.467a1.387,1.387,0,0,1-1.388,1.39Zm-11.986-4.51v2.773a.349.349,0,0,0,.347.347h18.411a.346.346,0,0,0,.347-.347v-2.773a.346.346,0,0,0-.347-.347h-2.255a.347.347,0,0,0-.347.347v.693a.52.52,0,0,1-1.04,0v-.693a.347.347,0,0,0-.347-.347h-.693a.35.35,0,0,0-.351.347v.693a.52.52,0,0,1-1.04,0v-.693a.346.346,0,0,0-.347-.347h-.71a.347.347,0,0,0-.347.347v.693a.52.52,0,0,1-1.04,0v-.693a.347.347,0,0,0-.347-.347h-.693a.347.347,0,0,0-.347.347v.693a.52.52,0,0,1-1.04,0v-.693a.347.347,0,0,0-.347-.347h-.7a.347.347,0,0,0-.347.347v.693a.52.52,0,0,1-1.04,0v-.693a.347.347,0,0,0-.347-.347h-.7a.343.343,0,0,0-.343.347v.693a.522.522,0,0,1-1.044,0v-.693a.347.347,0,0,0-.347-.347h-2.255A.349.349,0,0,0,10944.387,13152.286Zm.7,1.387a.694.694,0,1,1,.693.693A.693.693,0,0,1,10945.083,13153.673Zm17.382-5.376v-.35a.347.347,0,0,0-.347-.347h-16.342a.347.347,0,0,0-.347.347v.35a.522.522,0,0,1-.891.366l-1.388-1.387a.525.525,0,0,1,0-.736l1.388-1.387a.52.52,0,0,1,.891.367v.347a.347.347,0,0,0,.347.347h16.342a.347.347,0,0,0,.347-.347v-.347a.52.52,0,0,1,.888-.367l1.388,1.387a.519.519,0,0,1,0,.736l-1.388,1.387a.52.52,0,0,1-.888-.366Z"
       transform="translate(-10942 -13142.48)"
       fill="currentColor"
-      stroke="rgba(0,0,0,0)"
-      stroke-miterlimit="10"
-      stroke-width="1"
     />
   </svg>
 </template>

package/src/components/icons/3DDistanceIcon.vue

@@ -10,9 +10,6 @@
       d="M10956.373,13156.8h-11.986a1.387,1.387,0,0,1-1.387-1.39v-3.467a1.386,1.386,0,0,1,1.387-1.387h19.1a1.387,1.387,0,0,1,1.388,1.387v3.467a1.387,1.387,0,0,1-1.388,1.39Zm-11.986-4.51v2.773a.349.349,0,0,0,.347.347h18.411a.346.346,0,0,0,.347-.347v-2.773a.346.346,0,0,0-.347-.347h-2.255a.347.347,0,0,0-.347.347v.693a.52.52,0,0,1-1.04,0v-.693a.347.347,0,0,0-.347-.347h-.693a.35.35,0,0,0-.351.347v.693a.52.52,0,0,1-1.04,0v-.693a.346.346,0,0,0-.347-.347h-.71a.347.347,0,0,0-.347.347v.693a.52.52,0,0,1-1.04,0v-.693a.347.347,0,0,0-.347-.347h-.693a.347.347,0,0,0-.347.347v.693a.52.52,0,0,1-1.04,0v-.693a.347.347,0,0,0-.347-.347h-.7a.347.347,0,0,0-.347.347v.693a.52.52,0,0,1-1.04,0v-.693a.347.347,0,0,0-.347-.347h-.7a.343.343,0,0,0-.343.347v.693a.522.522,0,0,1-1.044,0v-.693a.347.347,0,0,0-.347-.347h-2.255A.349.349,0,0,0,10944.387,13152.286Zm.7,1.387a.694.694,0,1,1,.693.693A.693.693,0,0,1,10945.083,13153.673Zm17.382-5.376v-.35a.347.347,0,0,0-.347-.347h-16.342a.347.347,0,0,0-.347.347v.35a.522.522,0,0,1-.891.366l-1.388-1.387a.525.525,0,0,1,0-.736l1.388-1.387a.52.52,0,0,1,.891.367v.347a.347.347,0,0,0,.347.347h16.342a.347.347,0,0,0,.347-.347v-.347a.52.52,0,0,1,.888-.367l1.388,1.387a.519.519,0,0,1,0,.736l-1.388,1.387a.52.52,0,0,1-.888-.366Z"
       transform="translate(-10942 -13140.795)"
       fill="currentColor"
-      stroke="rgba(0,0,0,0)"
-      stroke-miterlimit="10"
-      stroke-width="1"
     />
   </svg>
 </template>

package/src/components/icons/3DHeightIcon.vue

@@ -10,9 +10,6 @@
       d="M10944.387,13167.025a1.387,1.387,0,0,1-1.388-1.388v-19.106a1.387,1.387,0,0,1,1.388-1.388h3.47a1.388,1.388,0,0,1,1.389,1.388v19.106a1.388,1.388,0,0,1-1.389,1.388Zm0-20.147v18.41a.349.349,0,0,0,.348.35h2.775a.349.349,0,0,0,.347-.35v-2.254a.348.348,0,0,0-.347-.348h-.694a.52.52,0,0,1,0-1.04h.694a.346.346,0,0,0,.347-.344v-.7a.347.347,0,0,0-.347-.348h-.694a.521.521,0,0,1,0-1.041h.694a.347.347,0,0,0,.347-.347v-.707a.35.35,0,0,0-.347-.351h-.694a.519.519,0,0,1,0-1.037h.694a.349.349,0,0,0,.347-.347v-.694a.347.347,0,0,0-.347-.347h-.694a.521.521,0,0,1,0-1.041h.694a.347.347,0,0,0,.347-.348v-.7a.347.347,0,0,0-.347-.348h-.694a.52.52,0,0,1,0-1.04h.694a.347.347,0,0,0,.347-.344v-.7a.344.344,0,0,0-.347-.344h-.694a.522.522,0,0,1,0-1.045h.694a.346.346,0,0,0,.347-.343v-2.258a.349.349,0,0,0-.347-.347h-2.775A.349.349,0,0,0,10944.387,13146.878Zm8.338,19.863-1.389-1.388a.521.521,0,0,1,.367-.889h.347a.347.347,0,0,0,.348-.347v-16.345a.347.347,0,0,0-.348-.344h-.347a.51.51,0,0,1-.367-.155.518.518,0,0,1,0-.733l1.389-1.388a.518.518,0,0,1,.736,0l1.385,1.388a.506.506,0,0,1,.152.367.52.52,0,0,1-.52.521h-.347a.347.347,0,0,0-.347.344v16.345a.347.347,0,0,0,.347.347h.347a.521.521,0,0,1,.367.889l-1.385,1.388a.523.523,0,0,1-.369.151A.513.513,0,0,1,10952.725,13166.741Zm-7.3-18.822a.694.694,0,1,1,.694.694A.694.694,0,0,1,10945.428,13147.919Z"
       transform="translate(-10942 -13144.023)"
       fill="currentColor"
-      stroke="rgba(0,0,0,0)"
-      stroke-miterlimit="10"
-      stroke-width="1"
     />
   </svg>
 </template>

package/src/components/icons/CheckboxCheckedIcon.vue

@@ -1,16 +1,9 @@
 <!-- eslint-disable max-len -->
 
 <template>
-  <svg id="icon-checkbox-check" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
-    <rect
-      id="bg"
-      width="12"
-      height="12"
-      rx="1"
-      transform="translate(2 2)"
-      fill="rgba(34,34,34,0.8)"
-    />
-    <path id="hook" d="M13.525,6.363a.776.776,0,0,0-1.1.171h0L8.68,11.741,6.3,9.789a.778.778,0,0,0-1.108.15.825.825,0,0,0,.121,1.114l3.021,2.478a.784.784,0,0,0,1.12-.141l.009-.012L13.695,7.5a.824.824,0,0,0-.17-1.132Z" transform="translate(-1.364 -1.831)" fill="#fff" />
-    <rect id="size" width="16" height="16" fill="none" />
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+    <g id="icon-checkbox-check">
+      <path fill="currentColor" d="m13,2H3c-.55,0-1,.45-1,1v10c0,.55.45,1,1,1h10c.55,0,1-.45,1-1V3c0-.55-.45-1-1-1Zm-.67,3.67l-4.23,5.88h0s-.01.03-.02.03c-.27.34-.77.39-1.1.12l-3.02-2.48c-.33-.28-.38-.77-.12-1.11,0,0,.01-.01.02-.02.27-.34.76-.4,1.09-.13l2.38,1.95,3.74-5.21s0-.01.01-.02c.26-.34.74-.41,1.09-.15h0c.35.27.43.78.17,1.14Z" />
+    </g>
   </svg>
 </template>

package/src/components/icons/CheckboxIcon.vue

@@ -1,11 +1,18 @@
 <template>
-  <svg id="icon-checkbox-uncheck" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <svg
+    id="icon-checkbox-uncheck"
+    xmlns="http://www.w3.org/2000/svg"
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+  >
     <g
       id="Rectangle_749"
       data-name="Rectangle 749"
       transform="translate(2 2)"
       fill="none"
-      stroke="#cecece"
+      stroke="currentColor"
+      stroke-opacity="0.4"
       stroke-width="1"
     >
       <rect width="12" height="12" rx="2" stroke="none" />

package/src/components/icons/CheckboxIndeterminateIcon.vue

@@ -1,24 +1,7 @@
+<!-- eslint-disable max-len -->
+
 <template>
-  <svg id="icon-checkbox-half" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
-    <rect
-      id="Rectangle_123"
-      data-name="Rectangle 123"
-      width="12"
-      height="12"
-      rx="1"
-      transform="translate(2 2)"
-      fill="rgba(34,34,34,0.8)"
-    />
-    <line
-      id="Line_84"
-      data-name="Line 84"
-      x2="4"
-      transform="translate(6 8)"
-      fill="none"
-      stroke="#fff"
-      stroke-linecap="round"
-      stroke-width="2"
-    />
-    <rect id="size" width="16" height="16" fill="none" />
+  <svg id="icon-checkbox-half" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+    <path fill="currentColor" d="m13,2H3c-.55,0-1,.45-1,1v10c0,.55.45,1,1,1h10c.55,0,1-.45,1-1V3c0-.55-.45-1-1-1Zm-3,7h-4c-.55,0-1-.45-1-1s.45-1,1-1h4c.55,0,1,.45,1,1s-.45,1-1,1Z" />
   </svg>
 </template>

package/src/components/icons/CommentIcon.vue

@@ -1,7 +1,7 @@
 <!-- eslint-disable max-len -->
 
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" width="24.999" height="24" viewBox="0 0 24.999 24">
+  <svg xmlns="http://www.w3.org/2000/svg" width="25" height="24" viewBox="0 0 25 24">
     <g id="icon_24_comment" transform="translate(0.5)">
       <path
         id="Union_51"
@@ -9,11 +9,7 @@
         d="M6.381.477V4.287H3.523l-.03,0H3.487A1.39,1.39,0,0,0,2.1,5.665V7.959a4.11,4.11,0,0,1,.9-.1,4.207,4.207,0,0,1,1.1.146V6.287H8.381v-2.9L12.06,5.93l.513.357H22V18H4.1V15.988a4.176,4.176,0,0,1-1.1.146,4.13,4.13,0,0,1-.9-.1v2.536A1.429,1.429,0,0,0,3.523,20H22.571A1.432,1.432,0,0,0,24,18.571V5.714a1.43,1.43,0,0,0-1.428-1.427H13.2L7.129.086a.475.475,0,0,0-.748.391ZM0,12A3,3,0,1,0,3,9,3,3,0,0,0,0,12Z"
         transform="translate(23.999 22.997) rotate(180)"
         fill="currentColor"
-        stroke="rgba(0,0,0,0)"
-        stroke-miterlimit="10"
-        stroke-width="1"
       />
-      <rect id="size" width="24" height="24" fill="none" />
     </g>
   </svg>
 </template>

package/src/components/icons/LegendIcon.vue

@@ -1,65 +1,15 @@
 <!-- eslint-disable max-len -->
 <template>
-  <svg id="icon_24_legend" xmlns="http://www.w3.org/2000/svg" width="24" height="25.523" viewBox="0 0 24 25.523">
-    <rect id="size" width="24" height="24" transform="translate(0 1.523)" fill="none" />
-    <g id="Group_1711" data-name="Group 1711" transform="translate(-712 -904)">
-      <rect
-        id="size-2"
-        data-name="size"
-        width="24"
-        height="24"
-        transform="translate(712 904.521)"
-        fill="none"
-      />
-      <rect
-        id="Rectangle_747"
-        data-name="Rectangle 747"
-        width="6.677"
-        height="6.677"
-        rx="2"
-        transform="translate(713 921.323)"
-        fill="currentColor"
-      />
-      <path id="Polygon_8" data-name="Polygon 8" d="M3.474,0,6.947,5.955H0Z" transform="translate(713 904)" fill="currentColor" />
-      <circle
-        id="Ellipse_88"
-        data-name="Ellipse 88"
-        cx="3.338"
-        cy="3.338"
-        r="3.338"
-        transform="translate(713 912.677)"
-        fill="currentColor"
-      />
-      <line
-        id="Line_297"
-        data-name="Line 297"
-        x2="9"
-        transform="translate(724 907.978)"
-        fill="none"
-        stroke="currentColor"
-        stroke-linecap="round"
-        stroke-width="3"
-      />
-      <line
-        id="Line_298"
-        data-name="Line 298"
-        x2="9"
-        transform="translate(724 916.016)"
-        fill="none"
-        stroke="currentColor"
-        stroke-linecap="round"
-        stroke-width="3"
-      />
-      <line
-        id="Line_299"
-        data-name="Line 299"
-        x2="9"
-        transform="translate(724 924.053)"
-        fill="none"
-        stroke="currentColor"
-        stroke-linecap="round"
-        stroke-width="3"
-      />
+  <svg id="icon_24_legend" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <g transform="translate(-438 -549)">
+      <g fill="currentColor">
+        <path d="M446.8,562.318a2.87,2.87,0,0,0-4.052,0l-1.766,1.765a2.87,2.87,0,0,0,0,4.053l1.766,1.765a2.868,2.868,0,0,0,4.052,0l1.766-1.765a2.87,2.87,0,0,0,0-4.053Zm.352,4.4-1.766,1.765a.865.865,0,0,1-1.224,0l-1.766-1.765a.869.869,0,0,1,0-1.225l1.766-1.765a.867.867,0,0,1,1.224,0l1.765,1.765A.868.868,0,0,1,447.155,566.722Z" />
+        <path d="M445.642,551.372a1,1,0,0,0-1.728,0l-4.156,7.124a1,1,0,0,0,.864,1.5h8.311a1,1,0,0,0,.863-1.5ZM442.363,558l2.415-4.14,2.414,4.14Z" />
+        <path d="M459,563h-7a1,1,0,0,0,0,2h7a1,1,0,0,0,0-2Z" />
+        <path d="M459,567h-7a1,1,0,0,0,0,2h7a1,1,0,0,0,0-2Z" />
+        <path d="M452,554h7a1,1,0,0,0,0-2h-7a1,1,0,0,0,0,2Z" />
+        <path d="M459,556h-7a1,1,0,0,0,0,2h7a1,1,0,0,0,0-2Z" />
+      </g>
     </g>
   </svg>
 </template>

package/src/components/icons/ObliqueViewIcon.vue

@@ -1,13 +1,11 @@
 <!-- eslint-disable max-len -->
 <template>
   <svg id="icon_24_oblique" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-    <rect id="size" width="24" height="24" fill="none" />
-    <path
-      id="Pfad_751"
-      data-name="Pfad 751"
-      d="M650,461H636a1,1,0,0,0-.707.293l-4,4A1,1,0,0,0,631,466v14a1,1,0,0,0,1,1h14a1,1,0,0,0,.707-.293l4-4A1,1,0,0,0,651,476V462A1,1,0,0,0,650,461Zm-1,14h-2v-8.586l2-2Zm-1.414,2-.586.586V477ZM635,475.586l-2,2V467h2ZM634.414,465l.586-.586V465ZM637,467h8v8h-8Zm10.586-4-2,2H637v-2Zm-13.172,16,2-2H645v2Z"
-      transform="translate(-629 -459)"
-      fill="currentColor"
-    />
+    <rect width="24" height="24" fill="none" />
+    <g transform="translate(1 2.994)">
+      <g>
+        <path d="M19.769.862A1,1,0,0,0,18.778,0H3.222a1,1,0,0,0-.99.862l-2.222,16A1,1,0,0,0,1,18H21a1,1,0,0,0,.991-1.138ZM4.093,2H17.908l1.208,8.7L14.921,7.657a1,1,0,0,0-1.278.086L4.988,16H2.149ZM7.886,16l6.535-6.235L19.5,13.446,19.852,16Zm.753-7.6a2.876,2.876,0,0,0,3.083-2.6A2.841,2.841,0,0,0,8.639,3.2,2.841,2.841,0,0,0,5.556,5.8,2.876,2.876,0,0,0,8.639,8.4m0-3.2c.662,0,1.083.355,1.083.6s-.421.6-1.083.6-1.083-.355-1.083-.6.422-.6,1.083-.6" fill="currentColor" />
+      </g>
+    </g>
   </svg>
 </template>

package/src/components/icons/SimpleCircleOutlinedIcon.vue

@@ -1,6 +1,6 @@
 <template>
   <svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8">
-    <g id="Rectangle_750" data-name="Rectangle 750" fill="none" stroke="#585858" stroke-width="2">
+    <g id="Rectangle_750" data-name="Rectangle 750" fill="none" stroke="currentColor" stroke-width="2">
       <rect width="8" height="8" rx="4" stroke="none" />
       <rect
         x="1"

package/src/components/icons/SplitViewIcon.vue

@@ -9,11 +9,7 @@
         d="M10942,13196v-22a1,1,0,1,1,2,0v22a1,1,0,1,1-2,0Zm9.5-9.25v-.5a.5.5,0,0,0-.5-.5h-4v-2h4a.5.5,0,0,0,.5-.5v-.5a.75.75,0,0,1,1.281-.53l2,2a.747.747,0,0,1,0,1.06l-2,2a.757.757,0,0,1-.529.218A.748.748,0,0,1,10951.5,13186.75Zm-18.279.53-2-2a.75.75,0,0,1,0-1.063l2-2a.736.736,0,0,1,.526-.219.747.747,0,0,1,.752.749v.5a.5.5,0,0,0,.5.5h4v2h-4a.5.5,0,0,0-.5.5v.5a.763.763,0,0,1-.218.534.754.754,0,0,1-1.061,0Zm5.779-1.53Zm8-2Z"
         transform="translate(-10931 -13172.998)"
         fill="currentColor"
-        stroke="rgba(0,0,0,0)"
-        stroke-miterlimit="10"
-        stroke-width="1"
       />
-      <rect id="size" width="24" height="24" fill="none" />
     </g>
   </svg>
 </template>

package/src/components/icons/ToolsIcon.vue

@@ -1,9 +1,7 @@
 <!-- eslint-disable max-len -->
 <template>
   <svg id="icon_24_tools" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-    <g id="Gruppe_1966" transform="translate(-500.726 -577.125)">
-      <path id="Pfad_763" d="M519,578h-6a1,1,0,0,0-1,1v20a1,1,0,0,0,1,1h6a1,1,0,0,0,1-1V579A1,1,0,0,0,519,578Zm-1,20h-4v-2h1a1,1,0,0,0,0-2h-1v-2h1a1,1,0,0,0,0-2h-1v-2h1a1,1,0,0,0,0-2h-1v-2h1a1,1,0,0,0,0-2h-1v-2h4Z" transform="translate(0.726 0.125)" fill="currentColor" />
-      <path id="Pfad_764" d="M507.363,580.719a1,1,0,0,0-1.827,0l-2,4.5a1,1,0,0,0-.086.406v11.5a3,3,0,0,0,6,0v-11.5a1,1,0,0,0-.087-.406Zm-1.913,6.9h2v7.511h-2Zm1-4.027.9,2.027h-1.8Zm0,14.538a1,1,0,0,1-1-1h2A1,1,0,0,1,506.45,598.125Z" transform="translate(0.275)" fill="currentColor" />
-    </g>
+    <rect width="24" height="24" fill="none" />
+    <path d="M86.444,100.021l.363-.363a4.962,4.962,0,0,0,5.509-6.213,1,1,0,0,0-1.674-.451l-1.021,1.021a1.024,1.024,0,0,1-1.415,0,1,1,0,0,1,0-1.414l1.022-1.021a1,1,0,0,0-.451-1.674,4.962,4.962,0,0,0-6.213,5.51l-.363.363-3.03-3.03a1.008,1.008,0,0,0-.348-.227l-4.6-1.767a1,1,0,0,0-1.292,1.293l1.768,4.6a1,1,0,0,0,.226.348l3.03,3.03-.766.766A4.963,4.963,0,0,0,71.683,107a1,1,0,0,0,.707.71,1.016,1.016,0,0,0,.968-.259l1.02-1.021a1,1,0,1,1,1.415,1.414l-1.022,1.021a1,1,0,0,0,.452,1.674,5.045,5.045,0,0,0,1.286.167,4.951,4.951,0,0,0,4.926-5.677l.766-.766,4.394,4.395a3,3,0,0,0,4.244-4.242Zm-8.765-5.8L76.4,95.5l-.8-2.069Zm.07,2.757,1.414-1.414,1.624,1.624-1.414,1.414Zm1.895,7.01a1,1,0,0,0-.26.962,2.969,2.969,0,0,1-1.588,3.472,3,3,0,0,0-4-4,2.969,2.969,0,0,1,3.472-1.59,1,1,0,0,0,.963-.26l6.127-6.127a1,1,0,0,0,.259-.962A2.972,2.972,0,0,1,86.2,92.018a3.006,3.006,0,0,0,.589,3.412,3.068,3.068,0,0,0,3.412.588,2.966,2.966,0,0,1-3.471,1.588,1,1,0,0,0-.963.26Zm9.78,3.251a1.022,1.022,0,0,1-1.414,0l-4.4-4.4,1.415-1.414,4.394,4.4a1,1,0,0,1,0,1.414" transform="translate(-69.515 -87.739)" fill="currentColor" />
   </svg>
 </template>

package/src/components/lists/VcsActionList.vue

@@ -12,7 +12,6 @@
       <template #activator="{ on, attrs }">
         <v-list-item
           :class="action.active ? 'primary--text' : ''"
-          color="primary"
           @click="action.callback($event)"
           v-bind="{...$attrs, ...attrs}"
           v-on="{...$listeners, ...on}"

package/src/components/lists/VcsList.vue

@@ -17,12 +17,19 @@
         <v-list-item-action
           v-if="selectable"
         >
+          <v-spacer v-if="singleSelect" />
           <v-icon
-            v-if="selected.length === renderingItems.length"
+            v-else-if="selected.length === renderingItems.length"
             @click="clear"
           >
             mdi-check-circle-outline
           </v-icon>
+          <v-icon
+            v-else-if="selected.length > 0 && selected.length < renderingItems.length"
+            @click="selectAll()"
+          >
+            mdi-minus-circle-outline
+          </v-icon>
           <v-icon
             v-else
             @click="selectAll()"
@@ -52,7 +59,6 @@
             :block-overflow="true"
             :overflow-count="actionButtonListOverflowCount"
             small
-            right
           />
         </v-list-item-content>
       </v-list-item>
@@ -64,6 +70,7 @@
         @mousedown.shift="$event.preventDefault()"
         @mouseover="hovering = index"
         @mouseout="hovering = null"
+        :class="{ 'v-list-item__lighten_even': lightenEven, 'v-list-item__lighten_odd': !lightenEven }"
       >
         <v-list-item-action
           v-if="selectable"
@@ -112,7 +119,6 @@
             :block-overflow="true"
             :overflow-count="actionButtonListOverflowCount"
             small
-            right
           />
         </v-list-item-content>
       </v-list-item>
@@ -129,6 +135,7 @@
     VListItemAction,
     VIcon,
     VListItemTitle,
+    VSpacer,
   } from 'vuetify/lib';
   import VcsActionButtonList from '../buttons/VcsActionButtonList.vue';
   import VcsTooltip from '../notification/VcsTooltip.vue';
@@ -182,6 +189,7 @@
       VListItemAction,
       VIcon,
       VListItemTitle,
+      VSpacer,
     },
     props: {
       /** @type {Array<VcsListItem>} */
@@ -246,6 +254,9 @@
       /** @type {import("vue").Ref<string>} */
       const query = ref('');
       const hovering = ref(null);
+      const lightenEven = computed(() => {
+        return !(!props.searchable && !props.showTitle);
+      });
       let firstSelected = null;
 
       watch(props, () => {
@@ -281,6 +292,7 @@
       return {
         query,
         hovering,
+        lightenEven,
         /**
          * @type {import("vue").ComputedRef<Array<VcsListItem>>}
          */
@@ -418,39 +430,27 @@
 
 <style lang="scss" scoped>
   ::v-deep {
-    .v-list{
+    .v-list {
+      .v-list-item__lighten_even {
+        &:nth-child(even) {
+          background-color: var(--v-base-lighten4);
+        }
+      }
+      .v-list-item__lighten_odd {
+        &:nth-child(odd) {
+          background-color: var(--v-base-lighten4);
+        }
+      }
       .v-list-item {
         padding: 4px 8px 4px 16px;
         &:after{
           display: none;
         }
-        &.font-weight-bold{
-          .v-list-item__title{
+        &.font-weight-bold {
+          .v-list-item__title {
             font-weight: 700;
           }
         }
-        &.v-list-item--active{
-          padding: 4px 8px 3px 16px;
-          &.theme--light{
-            background-color: var(--v-primary-base);
-            border-bottom: 1px solid var(--v-primary-darken1);
-          }
-        }
-        &.v-list-item.theme--dark{
-          &.v-list-item--active{
-            background-color: var(--v-primary-darken1);
-            border-bottom: 1px solid var(--v-primary-darken2);
-            &:nth-child(even){
-              background-color: var(--v-primary-darken1);
-            }
-          }
-          &:nth-child(even){
-            background-color: rgba(255, 255, 255, 0.15);
-          }
-        }
-        &:nth-child(even) {
-          background-color: var(--v-accent-base);
-        }
         .v-list-item__action {
           .v-icon {
             font-size: 16px;
@@ -463,9 +463,9 @@
           .action-btn-wrap {
             flex: 1 1 auto;
           }
-          .v-icon{
+          .v-icon {
             font-size: 16px;
-            .v-icon__component{
+            .v-icon__component {
               width: 16px;
               height: 16px;
             }

package/src/components/lists/VcsTreeview.vue

@@ -32,8 +32,8 @@
       min-height: 40px;
     }
     // Border around root nodes with children included
-    > .v-treeview-node {
-      border-bottom: 1px solid var(--v-gray-200-base);
+    > .v-treeview-node:not(:last-child) {
+      border-bottom: 1px solid var(--v-base-lighten2);
     }
     // Only Root Entries have a bold font
     > .v-treeview-node > .v-treeview-node__root > .v-treeview-node__content > .v-treeview-node__label {

package/src/components/lists/VcsTreeviewLeaf.vue

@@ -4,10 +4,11 @@
     v-if="item"
   >
     <div
-      class="position-relative col-8 pa-0 d-flex align-center vcs-treeview-leaf"
+      class="position-relative col-8 pa-0 d-flex align-center"
     >
       <span
         v-if="item.icon"
+        class="d-inline-flex"
       >
         <v-icon
           v-if="isStringIcon"
@@ -24,7 +25,7 @@
           <span
             v-bind="attrs"
             v-on="on"
-            class="vcs-treeview-item-title"
+            class="d-inline-block text-truncate"
           >{{ $t(item.title) }}</span>
         </template>
       </VcsTooltip>
@@ -41,13 +42,6 @@
     />
   </div>
 </template>
-<style lang="css" scoped>
-.vcs-treeview-leaf .vcs-treeview-item-title{
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-</style>
 
 <script>
   import { computed } from 'vue';

package/src/components/lists/VcsTreeviewSearchbar.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="pa-2 accent position-relative d-flex flex-row justify-space-between align-center">
+  <div class="pa-2 base lighten-3 position-relative d-flex flex-row justify-space-between align-center rounded-0">
     <slot name="prepend">
       <v-icon
         class="search-icon my-0 ml-1"
@@ -14,7 +14,7 @@
         solo
         dense
         hide-details
-        class="searchbar outlined rounded-xl align-center d-flex justify-center white pa-1 pl-6"
+        class="searchbar outlined rounded-xl align-center d-flex justify-center base lighten-4 pa-1 pl-6"
         :placeholder="$t(placeholder)"
         :value="value"
         v-on="$listeners"
@@ -44,7 +44,7 @@
     border-radius: 9999rem;
     outline-style: none;
     font-size: 12px;
-    box-shadow: 0 0 0 1px #dedede;
+    box-shadow: 0 0 0 1px var(--v-base-lighten2);
 
     &:focus {
       box-shadow: 0 0 0 1px var(--v-primary-base);
@@ -81,7 +81,7 @@
     .v-input.outlined {
       outline-style: none;
       font-size: 12px;
-      box-shadow: 0 0 0 1px #dedede;
+      box-shadow: 0 0 0 1px var(--v-base-lighten2);
 
       &:focus,
       &.v-input--is-focused {

package/src/components/notification/VcsBadge.vue

@@ -3,9 +3,13 @@
 </template>
 
 <style lang="scss" scoped>
-  .v-application .badge {
-    border: 1px solid var(--v-basic-base) !important;
+@import '../../styles/shades.scss';
+  .v-application .theme--light .badge {
+    border: 1px solid map-get($shades, 'white') !important;
   }
+.v-application .theme--dark .badge {
+  border: 1px solid map-get($shades, 'black') !important;
+}
 </style>
 
 

package/src/components/notification/VcsHelp.vue

@@ -0,0 +1,39 @@
+<template>
+  <v-alert
+    :value="show"
+    dense
+    text
+    class="mb-0 font-weight-regular rounded-0 px-2 pt-2"
+  >
+    <slot>
+      <span>{{ $t(text) }}</span>
+    </slot>
+  </v-alert>
+</template>
+
+<script>
+  import { VAlert } from 'vuetify/lib';
+
+  /**
+   * @description Wraps Vuetify VAlert for displaying help.
+   * @vue-data {slot} [#default] - Slot to specify html based help. Gets precedence over text prop.
+   * @vue-prop {boolean} show - If help should be displayed. If false, component is completely hidden.
+   * @vue-prop {string} [text] - Optional help text. Must be plain string. Use 'help' slot for html based help texts. Help slot has precedence over text prop.
+   */
+  export default {
+    name: 'VcsHelp',
+    components: {
+      VAlert,
+    },
+    props: {
+      text: {
+        type: String,
+        default: undefined,
+      },
+      show: {
+        type: Boolean,
+        required: true,
+      },
+    },
+  };
+</script>