@vcmap/ui 6.1.14 → 6.2.0-rc.2

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

@@ -37,19 +37,6 @@
   </v-file-input>
 </template>
 
-<style lang="scss" scoped>
-  @use './vcsTextField.scss';
-
-  // set text overflow for file input
-  :deep(.v-field__input) {
-    display: unset;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    line-height: calc(var(--v-vcs-font-size) * 2 - 3px);
-  }
-</style>
-
 <script>
   import { ref } from 'vue';
   import { VFileInput, VTooltip } from 'vuetify/components';
@@ -66,11 +53,11 @@
    */
   export default {
     name: 'VcsTextField',
-    inheritAttrs: false,
     components: {
       VTooltip,
       VFileInput,
     },
+    inheritAttrs: false,
     props: {
       tooltip: {
         type: String,
@@ -97,3 +84,16 @@
     },
   };
 </script>
+
+<style lang="scss" scoped>
+  @use './vcsTextField.scss';
+
+  // set text overflow for file input
+  :deep(.v-field__input) {
+    display: unset;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    line-height: calc(var(--v-vcs-font-size) * 2 - 3px);
+  }
+</style>

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

@@ -23,32 +23,6 @@
   </label>
 </template>
 
-<style lang="scss" scoped>
-  .ellipsis-text {
-    flex: 1;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-  .vcs-label {
-    box-sizing: content-box;
-    display: flex;
-    flex-direction: row;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    align-items: center;
-    height: calc(var(--v-vcs-font-size) * 2 - 2px);
-    font-size: var(--v-vcs-font-size);
-  }
-  .vcs-label-required .ellipsis-text:after {
-    content: ' *';
-    color: rgb(var(--v-theme-error));
-  }
-  .vcs-label-disabled {
-    opacity: var(--v-disabled-opacity);
-  }
-</style>
 <script>
   import { VTooltip } from 'vuetify/components';
   import { computed, ref } from 'vue';
@@ -114,3 +88,29 @@
     },
   };
 </script>
+<style lang="scss" scoped>
+  .ellipsis-text {
+    flex: 1;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .vcs-label {
+    box-sizing: content-box;
+    display: flex;
+    flex-direction: row;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    align-items: center;
+    height: calc(var(--v-vcs-font-size) * 2 - 2px);
+    font-size: var(--v-vcs-font-size);
+  }
+  .vcs-label-required .ellipsis-text:after {
+    content: ' *';
+    color: rgb(var(--v-theme-error));
+  }
+  .vcs-label-disabled {
+    opacity: var(--v-disabled-opacity);
+  }
+</style>

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

@@ -48,32 +48,6 @@
     ></v-tooltip>
   </v-radio-group>
 </template>
-<style lang="scss" scoped>
-  .v-input--density-compact :deep(.v-selection-control) {
-    --v-selection-control-size: calc(var(--v-vcs-font-size) * 2 - 2px);
-    --v-input-control-height: calc(var(--v-vcs-font-size) + 3px);
-  }
-  // remove ripple effect
-  :deep(.v-selection-control__input::before) {
-    background-color: transparent;
-  }
-  :deep(.v-icon--size-default) {
-    font-size: calc(var(--v-vcs-font-size) + 3px);
-    padding-right: 2px;
-  }
-  // remove details
-  :deep(.v-input__details) {
-    display: none;
-  }
-  // switch input and label order
-  :deep(.label-top > .v-selection-control__wrapper) {
-    order: 2;
-  }
-  :deep(.v-selection-control-group) {
-    row-gap: 8px;
-    column-gap: 8px;
-  }
-</style>
 <script>
   import { ref } from 'vue';
   import { VRadio, VRadioGroup, VTooltip } from 'vuetify/components';
@@ -100,12 +74,12 @@
    */
   export default {
     name: 'VcsRadio',
-    inheritAttrs: false,
     components: {
       VTooltip,
       VRadioGroup,
       VRadio,
     },
+    inheritAttrs: false,
     props: {
       items: {
         type: Array,
@@ -143,3 +117,29 @@
     },
   };
 </script>
+<style lang="scss" scoped>
+  .v-input--density-compact :deep(.v-selection-control) {
+    --v-selection-control-size: calc(var(--v-vcs-font-size) * 2 - 2px);
+    --v-input-control-height: calc(var(--v-vcs-font-size) + 3px);
+  }
+  // remove ripple effect
+  :deep(.v-selection-control__input::before) {
+    background-color: transparent;
+  }
+  :deep(.v-icon--size-default) {
+    font-size: calc(var(--v-vcs-font-size) + 3px);
+    padding-right: 2px;
+  }
+  // remove details
+  :deep(.v-input__details) {
+    display: none;
+  }
+  // switch input and label order
+  :deep(.label-top > .v-selection-control__wrapper) {
+    order: 2;
+  }
+  :deep(.v-selection-control-group) {
+    row-gap: 8px;
+    column-gap: 8px;
+  }
+</style>

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

@@ -62,84 +62,6 @@
     </template>
   </v-select>
 </template>
-<style lang="scss" scoped>
-  :deep(.v-field) {
-    --v-field-padding-start: 4px;
-    --v-field-padding-end: 4px;
-  }
-  :deep(.v-field__input) {
-    flex-wrap: unset;
-    padding-right: calc(var(--v-vcs-font-size) * 2 + 2px);
-    > input {
-      align-self: auto !important;
-    }
-  }
-  .v-input--density-compact :deep(.v-field) {
-    --v-input-control-height: calc(var(--v-vcs-font-size) * 2 - 2px);
-    --v-field-padding-bottom: 0px;
-    --v-field-input-padding-top: 0px;
-    --v-input-padding-top: 0px;
-  }
-  :deep(.v-field--focused .v-field__outline *) {
-    --v-field-border-width: 1px;
-  }
-  // set the border color on focused to primary, but not on error
-  :deep(.v-field--focused:not(.v-field--error) .v-field__outline *) {
-    border-color: rgb(var(--v-theme-primary));
-  }
-  // Not color, just used if label is given
-  :deep(.v-field--focused:not(.v-field--error) .v-field__outline *::after) {
-    border-color: rgb(var(--v-theme-primary));
-  }
-  // remove outline, if not focused, hovered or an error
-  :deep(.v-field:not(.v-field--focused):not(.v-field--error):not(:hover)) {
-    .v-field__outline * {
-      border-width: 0 0 1px 0;
-      border-radius: 0;
-    }
-    .v-field__outline {
-      padding-left: 4px;
-      padding-right: 4px;
-    }
-    .v-field__loader {
-      padding-left: 3px;
-      padding-right: 3px;
-    }
-    .v-field__outline *::before {
-      border-width: 0;
-      border-radius: 0;
-    }
-    .v-field__outline * label {
-      color: rgb(var(--v-theme-primary));
-      margin-left: -4px;
-    }
-  }
-  :deep(.v-field--appended) {
-    padding-inline-end: 4px;
-    .v-field__append-inner {
-      i {
-        margin-left: 0;
-      }
-    }
-  }
-  .primary--placeholder {
-    :deep(input::placeholder) {
-      color: rgb(var(--v-theme-primary));
-      opacity: 1;
-      font-style: italic !important;
-      padding: 0 3px 0 0;
-    }
-  }
-  // remove details
-  :deep(.v-input__details) {
-    display: none;
-  }
-
-  // Progress Bar
-  :deep(.v-field__loader) {
-    top: calc(100% - 2px);
-  }
-</style>
 <script>
   import { VSelect, VTooltip, VListItem } from 'vuetify/components';
   import { computed, ref } from 'vue';
@@ -230,3 +152,81 @@
     },
   };
 </script>
+<style lang="scss" scoped>
+  :deep(.v-field) {
+    --v-field-padding-start: 4px;
+    --v-field-padding-end: 4px;
+  }
+  :deep(.v-field__input) {
+    flex-wrap: unset;
+    padding-right: calc(var(--v-vcs-font-size) * 2 + 2px);
+    > input {
+      align-self: auto !important;
+    }
+  }
+  .v-input--density-compact :deep(.v-field) {
+    --v-input-control-height: calc(var(--v-vcs-font-size) * 2 - 2px);
+    --v-field-padding-bottom: 0px;
+    --v-field-input-padding-top: 0px;
+    --v-input-padding-top: 0px;
+  }
+  :deep(.v-field--focused .v-field__outline *) {
+    --v-field-border-width: 1px;
+  }
+  // set the border color on focused to primary, but not on error
+  :deep(.v-field--focused:not(.v-field--error) .v-field__outline *) {
+    border-color: rgb(var(--v-theme-primary));
+  }
+  // Not color, just used if label is given
+  :deep(.v-field--focused:not(.v-field--error) .v-field__outline *::after) {
+    border-color: rgb(var(--v-theme-primary));
+  }
+  // remove outline, if not focused, hovered or an error
+  :deep(.v-field:not(.v-field--focused):not(.v-field--error):not(:hover)) {
+    .v-field__outline * {
+      border-width: 0 0 1px 0;
+      border-radius: 0;
+    }
+    .v-field__outline {
+      padding-left: 4px;
+      padding-right: 4px;
+    }
+    .v-field__loader {
+      padding-left: 3px;
+      padding-right: 3px;
+    }
+    .v-field__outline *::before {
+      border-width: 0;
+      border-radius: 0;
+    }
+    .v-field__outline * label {
+      color: rgb(var(--v-theme-primary));
+      margin-left: -4px;
+    }
+  }
+  :deep(.v-field--appended) {
+    padding-inline-end: 4px;
+    .v-field__append-inner {
+      i {
+        margin-left: 0;
+      }
+    }
+  }
+  .primary--placeholder {
+    :deep(input::placeholder) {
+      color: rgb(var(--v-theme-primary));
+      opacity: 1;
+      font-style: italic !important;
+      padding: 0 3px 0 0;
+    }
+  }
+  // remove details
+  :deep(.v-input__details) {
+    display: none;
+  }
+
+  // Progress Bar
+  :deep(.v-field__loader) {
+    top: calc(100% - 2px);
+  }
+</style>

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

@@ -30,49 +30,6 @@
     </template>
   </v-slider>
 </template>
-<style lang="scss" scoped>
-  .v-input--horizontal :deep(.v-input__control) {
-    min-height: calc(var(--v-vcs-font-size) * 2 - 2px);
-  }
-  .v-input--horizontal.v-slider--has-labels {
-    margin-bottom: var(--v-vcs-font-size);
-  }
-  .v-slider.v-input--horizontal {
-    :deep(.v-slider-track__fill) {
-      height: 2px;
-    }
-    :deep(.v-slider-track__tick--first) {
-      margin-inline-start: 0;
-    }
-    :deep(.v-slider-track__tick--last) {
-      margin-inline-start: 100%;
-    }
-  }
-  .v-slider.v-input--vertical {
-    :deep(.v-slider-track__fill) {
-      width: 2px;
-    }
-    :deep(.v-slider-track__tick--first) {
-      bottom: 0;
-    }
-    :deep(.v-slider-track__tick--last) {
-      bottom: 100%;
-    }
-  }
-  :deep(.v-slider-thumb__surface::before) {
-    --v-focus-opacity: 0;
-    --v-hover-opacity: 0;
-    --v-pressed-opacity: 0;
-  }
-  :deep(.v-slider-track__tick) {
-    background-color: rgb(var(--v-theme-base-darken-1));
-  }
-  .remove-append-margin {
-    :deep(.v-input__append) {
-      margin-inline-start: 0px;
-    }
-  }
-</style>
 <script>
   import { computed, ref } from 'vue';
   import { VSlider, VTooltip } from 'vuetify/components';
@@ -128,3 +85,46 @@
     },
   };
 </script>
+<style lang="scss" scoped>
+  .v-input--horizontal :deep(.v-input__control) {
+    min-height: calc(var(--v-vcs-font-size) * 2 - 2px);
+  }
+  .v-input--horizontal.v-slider--has-labels {
+    margin-bottom: var(--v-vcs-font-size);
+  }
+  .v-slider.v-input--horizontal {
+    :deep(.v-slider-track__fill) {
+      height: 2px;
+    }
+    :deep(.v-slider-track__tick--first) {
+      margin-inline-start: 0;
+    }
+    :deep(.v-slider-track__tick--last) {
+      margin-inline-start: 100%;
+    }
+  }
+  .v-slider.v-input--vertical {
+    :deep(.v-slider-track__fill) {
+      width: 2px;
+    }
+    :deep(.v-slider-track__tick--first) {
+      bottom: 0;
+    }
+    :deep(.v-slider-track__tick--last) {
+      bottom: 100%;
+    }
+  }
+  :deep(.v-slider-thumb__surface::before) {
+    --v-focus-opacity: 0;
+    --v-hover-opacity: 0;
+    --v-pressed-opacity: 0;
+  }
+  :deep(.v-slider-track__tick) {
+    background-color: rgb(var(--v-theme-base-darken-1));
+  }
+  .remove-append-margin {
+    :deep(.v-input__append) {
+      margin-inline-start: 0px;
+    }
+  }
+</style>

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

@@ -37,6 +37,53 @@
   </v-textarea>
 </template>
 
+<script>
+  import { ref } from 'vue';
+  import { VTextarea, VTooltip } from 'vuetify/components';
+  import { getForwardSlots, usePadding } from '../composables.js';
+
+  /**
+   * @description extends API of {@link https://vuetifyjs.com/en/api/v-textarea/|vuetify v-textarea}.
+   * Default for number of rows can be overwritten using the vuetify API.
+   * Provides a tooltip to
+   * - show error messages on focus
+   * - show tooltips, if no error messages are available
+   * @vue-prop {('bottom' | 'left' | 'top' | 'right')}  [tooltipPosition='right'] - Position of the error tooltip.
+   * @vue-prop {string|undefined}                       tooltip - Optional tooltip which will be shown on hover when no error message is shown
+   */
+  export default {
+    name: 'VcsTextArea',
+    components: {
+      VTooltip,
+      VTextarea,
+    },
+    props: {
+      tooltip: {
+        type: String,
+        default: undefined,
+      },
+      tooltipPosition: {
+        type: String,
+        default: 'right',
+      },
+    },
+    setup(_p, { attrs, slots }) {
+      const textAreaRef = ref();
+      const errorTooltipRef = ref();
+
+      const paddingProvided = usePadding(attrs);
+      const forwardSlots = getForwardSlots(slots, ['append-inner', 'message']);
+
+      return {
+        forwardSlots,
+        textAreaRef,
+        errorTooltipRef,
+        paddingProvided,
+      };
+    },
+  };
+</script>
+
 <style lang="scss" scoped>
   .v-input--density-compact :deep(.v-field) {
     --v-input-control-height: calc(var(--v-vcs-font-size) * 2 - 2px);
@@ -142,50 +189,3 @@
     top: calc(100% - 2px);
   }
 </style>
-
-<script>
-  import { ref } from 'vue';
-  import { VTextarea, VTooltip } from 'vuetify/components';
-  import { getForwardSlots, usePadding } from '../composables.js';
-
-  /**
-   * @description extends API of {@link https://vuetifyjs.com/en/api/v-textarea/|vuetify v-textarea}.
-   * Default for number of rows can be overwritten using the vuetify API.
-   * Provides a tooltip to
-   * - show error messages on focus
-   * - show tooltips, if no error messages are available
-   * @vue-prop {('bottom' | 'left' | 'top' | 'right')}  [tooltipPosition='right'] - Position of the error tooltip.
-   * @vue-prop {string|undefined}                       tooltip - Optional tooltip which will be shown on hover when no error message is shown
-   */
-  export default {
-    name: 'VcsTextArea',
-    components: {
-      VTooltip,
-      VTextarea,
-    },
-    props: {
-      tooltip: {
-        type: String,
-        default: undefined,
-      },
-      tooltipPosition: {
-        type: String,
-        default: 'right',
-      },
-    },
-    setup(_p, { attrs, slots }) {
-      const textAreaRef = ref();
-      const errorTooltipRef = ref();
-
-      const paddingProvided = usePadding(attrs);
-      const forwardSlots = getForwardSlots(slots, ['append-inner', 'message']);
-
-      return {
-        forwardSlots,
-        textAreaRef,
-        errorTooltipRef,
-        paddingProvided,
-      };
-    },
-  };
-</script>

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

@@ -54,9 +54,6 @@
   </v-text-field>
 </template>
 
-<style lang="scss" scoped>
-  @use './vcsTextField.scss';
-</style>
 <script>
   import { computed, ref } from 'vue';
   import { VTextField, VTooltip } from 'vuetify/components';
@@ -88,11 +85,11 @@
    */
   export default {
     name: 'VcsTextField',
-    inheritAttrs: false,
     components: {
       VTooltip,
       VTextField,
     },
+    inheritAttrs: false,
     props: {
       type: {
         type: String,
@@ -190,3 +187,6 @@
     },
   };
 </script>
+<style lang="scss" scoped>
+  @use './vcsTextField.scss';
+</style>

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

@@ -70,13 +70,13 @@
     z-index: 2;
   }
   :deep(
-      .v-expansion-panel-title--active .v-stepper-vertical-item__avatar.v-avatar
-    ) {
+    .v-expansion-panel-title--active .v-stepper-vertical-item__avatar.v-avatar
+  ) {
     background: rgb(var(--v-theme-primary));
   }
   :deep(
-      .v-stepper-vertical-item--error .v-stepper-vertical-item__avatar.v-avatar
-    ) {
+    .v-stepper-vertical-item--error .v-stepper-vertical-item__avatar.v-avatar
+  ) {
     background: rgb(var(--v-theme-error));
   }
   /* alignment of heading */

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

@@ -28,17 +28,6 @@
     ></v-tooltip>
   </span>
 </template>
-<style lang="scss" scoped>
-  .vcs-formatted-number {
-    box-sizing: content-box;
-    display: flex;
-    align-items: center;
-    height: calc(var(--v-vcs-font-size) * 2 - 2px);
-  }
-  .vcs-disabled {
-    opacity: var(--v-disabled-opacity);
-  }
-</style>
 <script>
   import { computed, inject } from 'vue';
   import { VTooltip } from 'vuetify/components';
@@ -156,3 +145,14 @@
     },
   };
 </script>
+<style lang="scss" scoped>
+  .vcs-formatted-number {
+    box-sizing: content-box;
+    display: flex;
+    align-items: center;
+    height: calc(var(--v-vcs-font-size) * 2 - 2px);
+  }
+  .vcs-disabled {
+    opacity: var(--v-disabled-opacity);
+  }
+</style>

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

@@ -1,4 +1,5 @@
 <template>
+  <!-- eslint-disable vue/no-v-html -->
   <div
     class="marked vcs-markdown"
     :class="{
@@ -7,28 +8,6 @@
     v-html="markedHtml"
   ></div>
 </template>
-<style lang="scss" scoped>
-  div {
-    :deep(p) {
-      margin-bottom: calc(var(--v-vcs-font-size) * 1);
-    }
-    :deep(h1) {
-      margin-bottom: calc(var(--v-vcs-font-size) * 1);
-    }
-    :deep(h2) {
-      margin-bottom: calc(var(--v-vcs-font-size) * 1);
-    }
-    :deep(ul) {
-      margin-bottom: calc(var(--v-vcs-font-size) * 1);
-    }
-    :deep(ol) {
-      margin-bottom: calc(var(--v-vcs-font-size) * 1);
-    }
-    :deep(li) {
-      margin-left: 1.5em;
-    }
-  }
-</style>
 <script>
   import { computed } from 'vue';
   import { parseAndSanitizeMarkdown } from './markdownHelper.js';
@@ -54,3 +33,25 @@
     },
   };
 </script>
+<style lang="scss" scoped>
+  div {
+    :deep(p) {
+      margin-bottom: calc(var(--v-vcs-font-size) * 1);
+    }
+    :deep(h1) {
+      margin-bottom: calc(var(--v-vcs-font-size) * 1);
+    }
+    :deep(h2) {
+      margin-bottom: calc(var(--v-vcs-font-size) * 1);
+    }
+    :deep(ul) {
+      margin-bottom: calc(var(--v-vcs-font-size) * 1);
+    }
+    :deep(ol) {
+      margin-bottom: calc(var(--v-vcs-font-size) * 1);
+    }
+    :deep(li) {
+      margin-left: 1.5em;
+    }
+  }
+</style>

package/src/components/form-output/markdownHelper.js

@@ -5,7 +5,7 @@ import DOMPurify from 'dompurify';
  * @param {string} content
  * @returns {string}
  */
-// eslint-disable-next-line import/prefer-default-export
+
 export function parseAndSanitizeMarkdown(content) {
   const html = marked.parse(content, { breaks: true });
   // Then sanitize the HTML using DOMPurify