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

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

@@ -6,26 +6,37 @@
     <VcsTooltip
       :tooltip-position="tooltipPosition"
       :tooltip="errorMessage"
-      :value="(hover || focus) && isError"
       color="error"
       :max-width="200"
     >
-      <template #activator="{ attrs }">
+      <template #activator="{ attrs, on }">
         <component
           :is="inputComponent"
           ref="textFieldRef"
           hide-details
+          :hide-spin-buttons="!showSpinButtons"
           :dense="isDense"
           :clearable="isClearable"
-          @focus="focus = true"
-          @blur="focus = neverBlurred = false"
-          @input="firstInput = true"
-          :outlined="isOutlined"
+          @focus="focus = true;"
+          @blur="focus = false;"
+          @input="value => $emit('input', value)"
+          @keydown.esc="handleEsc"
+          @keydown="event => $emit('keydown', event)"
+          :value="visibleValue"
+          :type="type"
+          outlined
           v-bind="{...$attrs, ...attrs}"
-          v-on="{...$listeners}"
+          v-on="{...$listeners, ...on}"
           :height="isDense ? 24 : 32"
-          class="ma-0 pb-1 pt-1 primary--placeholder align-center"
-          :class="$attrs.color === 'primary' ? 'primary--textfield' : ''"
+          class="py-1 primary--placeholder align-center"
+          :class="{
+            'remove-outline': !isOutlined,
+            'outline--current': focus,
+            'outline--error': !!errorMessage,
+            'input--dense': isDense,
+            'input--not-dense': !isDense,
+            'file-border-bottom': inputComponent === 'VFileInput' && !focus && !hover && !errorMessage,
+          }"
         />
       </template>
     </VcsTooltip>
@@ -33,27 +44,101 @@
 </template>
 
 <style lang="scss" scoped>
-.primary--placeholder {
-  ::v-deep {
-    input::placeholder {
-      color: var(--v-primary-base);
-      font-style: italic;
-      opacity: 1;
+  .primary--placeholder {
+    ::v-deep {
+      input::placeholder {
+        color: var(--v-primary-base);
+        font-style: italic;
+        opacity: 1;
+      }
     }
   }
-}
-.primary--textfield {
-  ::v-deep {
-    input {
-      color: var(--v-primary-base);
+  .remove-outline {
+    ::v-deep {
+      fieldset {
+        border-width: 0;
+        border-radius: 0;
+      }
+    }
+  }
+  .outline--current {
+    ::v-deep {
+      .v-input__slot fieldset {
+        border-color: currentColor;
+        transition: border-color 0.5s ease;
+      }
+      .v-text-field__slot input {
+        border-color: transparent;
+      }
+    }
+  }
+  .outline--error {
+    ::v-deep {
+      .v-input__slot fieldset, .v-text-field__slot input {
+        border-color: var(--v-error-base);
+      }
+    }
+  }
+  .input--dense {
+    ::v-deep {
+      .v-text-field__slot input {
+        height: 24px;
+      }
+      .v-input__slot {
+        padding: 0 4px !important;
+      }
+      fieldset {
+        padding-left: 2px;
+      }
+    }
+  }
+  .input--not-dense {
+    ::v-deep {
+      .v-input__slot {
+        padding: 0 8px !important;
+      }
+      fieldset {
+        padding-left: 6px;
+      }
+    }
+  }
+  .file-border-bottom {
+    ::v-deep {
+      .v-file-input__text {
+        border-bottom: 1px solid var(--v-base-base);
+        border-radius: 0;
+      }
+    }
+  }
+  .v-input {
+    ::v-deep {
+      input {
+        height: 32px;
+        border-bottom: 1px solid var(--v-base-base);
+        border-radius: 0;
+      }
+      input::selection {
+        background-color: var(--v-primary-base);
+      }
+      .v-text-field__prefix {
+        padding-right: 8px;
+      }
+      .v-text-field__suffix {
+        padding-left: 4px;
+      }
+      fieldset {
+        border-radius: 2px;
+        border-color: var(--v-base-base);
+      }
     }
   }
-}
 </style>
 
 <script>
+  import { computed, onMounted, ref } from 'vue';
   import { VTextField, VFileInput } from 'vuetify/lib';
   import VcsTooltip from '../notification/VcsTooltip.vue';
+  import { useErrorSync } from './composables.js';
 
   /**
    * @description extends API of {@link https://vuetifyjs.com/en/api/v-text-field v-text-field}.
@@ -63,12 +148,15 @@
    * Provides VcsTooltip to
    * - show error messages on focus
    * - show tooltips, if supplied, when hovered over append-icon
+   * When clicking esc key, previous input is restored.
    * @vue-prop {('bottom' | 'left' | 'top' | 'right')}  [tooltipPosition='right'] - Position of the error tooltip.
+   * @vue-prop {string}                                 unit - Unit for number input fields. Is displayed behind the number.
+   * @vue-prop {boolean}                                showSpinButtons - If true, spin buttons are displayed in number input fields. Overrides Vuetify hide-spin-buttons.
    * @vue-computed {boolean}                            isClearable - Whether textfield is isClearable. Makes sure icon is only shown on focus, hover or error.
    * @vue-computed {boolean}                            isDense - Whether size of textfield is dense.
-   * @vue-computed {boolean}                            isError - Whether errorBucket is not empty and textfield was focused at least once.
    * @vue-computed {boolean}                            isOutlined - Textfield is outlined on either hover, focus or error, if not disabled.
-   * @vue-computed {Array<string>}                      joinedErrorBucket - errorBucket + errorMessages of child v-text-field.
+   * @vue-computed {string | number}                    visibleValue - Returns the number input as string with unit, in case unit is provided.
+   * @vue-computed {string}                             type - The input field type. If number input field is blurred and unit is provided, type changes to text field, so unit can be displayed in input field.
    */
   export default {
     name: 'VcsTextField',
@@ -82,60 +170,74 @@
         type: String,
         default: 'right',
       },
+      unit: {
+        type: String,
+        default: '',
+      },
+      showSpinButtons: {
+        type: Boolean,
+        default: false,
+      },
     },
-    data() {
-      return {
-        hover: false,
-        focus: false,
-        firstInput: false,
-        neverBlurred: true,
-        isMounted: false,
-        errorMessage: '',
-      };
-    },
-    computed: {
-      inputComponent() {
-        if (this.$attrs.type === 'file') {
+    setup(props, { attrs, emit }) {
+      const hover = ref(false);
+      const focus = ref(false);
+      const textFieldRef = ref();
+
+      onMounted(() => {
+        // fix for autofocus
+        focus.value = attrs.autofocus != null;
+      });
+
+      const errorMessage = useErrorSync(textFieldRef);
+
+      const inputComponent = computed(() => {
+        if (attrs.type === 'file') {
           return 'VFileInput';
         }
         return 'VTextField';
-      },
-      isClearable() {
-        return (this.$attrs.clearable !== undefined && this.$attrs.clearable !== false) &&
-          (this.hover || this.focus || this.isError);
-      },
-      isDense() {
-        return this.$attrs.dense !== undefined && this.$attrs.dense !== false;
-      },
-      isError() {
-        return this.joinedErrorBucket.length > 0 && (this.firstInput || !this.neverBlurred);
-      },
-      isOutlined() {
-        return (this.$attrs.outlined || this.hover || this.focus || this.isError) && !(this.$attrs.disabled || this.$attrs.disabled === '');
-      },
-      joinedErrorBucket() {
-        if (!this.isMounted) {
-          return false;
+      });
+      const isClearable = computed(() => {
+        return (attrs.clearable !== undefined && attrs.clearable !== false) &&
+          (hover.value || focus.value || !!errorMessage.value);
+      });
+      const isDense = computed(() => attrs.dense !== false);
+      const isOutlined = computed(() => {
+        return (hover.value || focus.value || !!errorMessage.value) && !(attrs.disabled || attrs.disabled === '');
+      });
+      const visibleValue = computed(() => {
+        if (attrs.type === 'number' && attrs.value && props.unit && !focus.value && !hover.value) {
+          return `${attrs.value} ${props.unit}`;
         } else {
-          return this.$refs.textFieldRef.errorBucket.concat(this.$refs.textFieldRef.errorMessages).join('\n');
+          return attrs.value || '';
         }
-      },
-    },
-    watch: {
-      joinedErrorBucket(newValue, oldValue) {
-        if (oldValue && !newValue) {
-          setTimeout(() => {
-            this.errorMessage = newValue;
-          }, 200);
+      });
+      const type = computed(() => {
+        if (attrs.type === 'number' && !focus.value) {
+          return 'text';
         } else {
-          this.errorMessage = newValue;
+          return attrs.type || 'text';
         }
-      },
-    },
-    mounted() {
-      this.isMounted = true;
-      // fix for autofocus
-      this.focus = this.$attrs.autofocus != null;
+      });
+
+      function handleEsc() {
+        textFieldRef.value.blur();
+        emit('input', textFieldRef.value.initialValue);
+      }
+
+      return {
+        hover,
+        focus,
+        inputComponent,
+        isClearable,
+        isDense,
+        isOutlined,
+        visibleValue,
+        type,
+        handleEsc,
+        textFieldRef,
+        errorMessage,
+      };
     },
   };
 </script>

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

@@ -32,21 +32,28 @@
   };
 </script>
 <style scoped lang="scss">
+@import '../../styles/shades.scss';
 .v-stepper{
   &.theme--light {
     ::v-deep{
       .v-stepper__step {
+        .v-stepper__label {
+          color: map-get($shades, 'black');
+        }
         &--active {
           background-color: rgba(34, 34, 34, 0.1);
           .v-stepper__label {
-            color: rgba(34, 34, 34, 0.8);
+            color: var(--v-primary-base);
           }
         }
         &--complete {
           .v-stepper__label {
-            color: rgba(0, 0, 0, 0.38);
+            color: map-get($shades, 'black');
           }
         }
+        .v-stepper__step__step::before {
+          color: map-get($shades, 'white');
+        }
       }
       .step-border:not(:last-child) > .v-stepper__content {
           border-left: 2px solid rgba(0, 0, 0, 0.12);
@@ -56,21 +63,27 @@
   &.theme--dark {
     ::v-deep{
       .v-stepper__step {
+        .v-stepper__label {
+          color: map-get($shades, 'white');
+        }
         &--active {
           background-color: rgba(255, 255, 255, 0.5);
           .v-stepper__label {
-            color: rgba(255, 255, 255, 1);
+            color: var(--v-primary-base);
           }
         }
         &--complete {
           .v-stepper__label {
-            color: rgba(255, 255, 255, 0.5);
+            color: map-get($shades, 'white');
           }
         }
         .v-stepper__step__step {
           .v-icon {
             color: transparent;
           }
+          &:before{
+            color: map-get($shades, 'black');
+          }
         }
         &.v-stepper__step--error{
           .v-stepper__label{
@@ -88,26 +101,19 @@
   }
   ::v-deep{
     .v-stepper__step {
-      align-items: start;
+      padding-top: 0;
+      padding-bottom: 0;
       .v-stepper__label {
         font-weight: 700;
         text-shadow: none !important;
-        position: relative;
-        &::before{
-          content: '';
-          position: absolute;
-          top: 14px;
-          bottom: 2px;
-          left: -15px;
-        }
       }
       .v-stepper__step__step {
         color: transparent;
         position: relative;
         margin-top: 2px;
+        margin-right: 5px;
         &:before{
           content: '\25cf';
-          color: var(--v-basic-base);
           font-size: 18px;
           position: absolute;
           top: -9px;

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

@@ -5,12 +5,15 @@
       :editable="editable"
       :complete="complete"
       :rules="rules"
+      class="pr-6"
     >
-      <div class="form-section-header d-flex justify-space-between align-center">
+      <div class="d-flex justify-space-between align-center">
         <slot name="header" />
-        <span v-if="!$slots.header">{{ $t(heading) }}</span>
+        <div v-if="!$slots.header" class="py-3">
+          <span>{{ $t(heading) }}</span>
+        </div>
         <VcsActionButtonList
-          v-if="editable || Number(step) === Number(value)"
+          v-if="Number(step) === Number(value)"
           :actions="actions"
           :overflow-count="actionButtonListOverflowCount"
           small
@@ -22,20 +25,15 @@
     </v-stepper-step>
     <v-stepper-content
       v-if="$slots.content"
-      class="pr-5"
+      class="pr-4"
       :step="step"
     >
-      <v-alert
-        :value="showHelp"
-        dense
-        text
-        color="grey"
-        class="mt-2 mb-0 font-weight-regular rounded-0 px-0 pt-0"
+      <VcsHelp
+        :text="helpText"
+        :show="showHelp"
       >
-        <slot name="help">
-          <span>{{ $t(helpText) }}</span>
-        </slot>
-      </v-alert>
+        <slot name="help" />
+      </VcsHelp>
       <slot name="content" />
     </v-stepper-content>
   </div>
@@ -43,8 +41,9 @@
 
 <script>
   import { computed, reactive, watch } from 'vue';
-  import { VStepperStep, VStepperContent, VAlert } from 'vuetify/lib';
+  import { VStepperStep, VStepperContent } from 'vuetify/lib';
   import VcsActionButtonList from '../buttons/VcsActionButtonList.vue';
+  import VcsHelp from '../notification/VcsHelp.vue';
 
   /**
    * @description Stylized wrapper around {@link https://vuetifyjs.com/en/api/v-stepper-step/ |vuetify VStepperStep} and
@@ -68,7 +67,7 @@
       VStepperStep,
       VStepperContent,
       VcsActionButtonList,
-      VAlert,
+      VcsHelp,
     },
     props: {
       step: {
@@ -157,4 +156,7 @@
       }
     }
   }
+  .v-stepper__content {
+    padding-left: 2px !important;
+  }
 </style>

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/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"