@vcmap/ui 6.0.0-rc.1 → 6.0.0-rc.10

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

@@ -4,32 +4,34 @@
     variant="outlined"
     clear-icon="$close"
     :rows="$attrs.rows"
-    class="primary--placeholder"
+    color="primary"
+    class="primary--placeholder vcs-text-area"
     :class="{
       'py-1': !paddingProvided,
     }"
-    v-bind="{ ...$attrs }"
+    v-bind="$attrs"
   >
-    <template v-for="slot of Object.keys($slots)" #[slot]="scope">
-      <slot :name="slot" v-bind="scope" />
+    <template v-for="slot of forwardSlots" #[slot]="scope">
+      <slot :name="slot" v-bind="scope ?? {}" />
     </template>
-    <template #message="{ message }">
+    <template #message="scope">
       <v-tooltip
         ref="errorTooltipRef"
         :activator="textAreaRef"
-        v-if="message"
-        :text="message"
+        v-if="scope?.message"
+        :text="$st(scope?.message)"
         content-class="bg-error"
         :location="tooltipPosition"
       />
+      <slot name="message" v-bind="scope ?? {}"></slot>
     </template>
-    <template #append-inner>
-      <slot name="append-inner"></slot>
+    <template #append-inner="scope">
+      <slot name="append-inner" v-bind="scope ?? {}"></slot>
       <v-tooltip
         v-if="tooltip && !errorTooltipRef"
         :activator="textAreaRef"
         :location="tooltipPosition"
-        :text="tooltip"
+        :text="$st(tooltip)"
       ></v-tooltip>
     </template>
   </v-textarea>
@@ -37,26 +39,32 @@
 
 <style lang="scss" scoped>
   .v-input--density-compact :deep(.v-field) {
-    --v-input-control-height: calc(var(--v-vcs-item-height) - 8px);
+    --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;
   }
 
-  .remove-outline :deep(fieldset) {
-    border-width: 0;
-    border-radius: 0;
-  }
   :deep(.v-field) {
-    --v-field-padding-start: 8px;
-    --v-field-padding-end: 8px;
+    --v-field-padding-start: 4px;
+    --v-field-padding-end: 4px;
+    padding-left: 4px;
+    padding-right: 4px;
+    .v-field__clearable {
+      margin: 2px -2px 0px 0px;
+    }
+  }
+
+  :deep(.v-field__field) {
+    padding-bottom: 2px;
+    padding-top: 2px;
   }
 
-  //:deep(.v-field__input) {
-  //  padding: 0 0 6px 0;
-  //}
-  :deep(.v-field--focused .v-field__outline *) {
-    --v-field-border-width: 1px;
+  :deep(.v-field__input) {
+    padding: 0;
+    // remove white fade out on top
+    mask-image: none !important;
+    -webkit-mask-image: none !important;
   }
 
   // set the border color on focused to primary, but not on error
@@ -64,15 +72,28 @@
     border-color: rgb(var(--v-theme-primary));
   }
 
+  :deep(.v-field--focused .v-field__outline__end) {
+    border-width: 1px 1px 1px 0 !important;
+  }
+  :deep(.v-field--focused .v-field__outline__start) {
+    border-width: 1px 0 1px 1px !important;
+  }
+
   // 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-width: 0 0 0 0;
       border-radius: 0;
     }
-    .v-field__outline {
-      padding-left: 8px;
-      padding-right: 8px;
+    .v-field__outline__end {
+      border-width: 0 0 1px 0 !important;
+      border-radius: 0;
+      margin-right: 4px;
+      margin-left: -8px;
+    }
+    .v-field__loader {
+      padding-left: 3px;
+      padding-right: 3px;
     }
     .v-field__outline *::before {
       border-width: 0;
@@ -83,10 +104,13 @@
       margin-left: -4px;
     }
   }
-
+  :deep(.v-field .v-field--focused .v-field--error):hover {
+    border-width: 1px !important;
+  }
   // 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));
+    border-width: 1px !important;
   }
 
   // remove margin from prepended Icon
@@ -97,13 +121,10 @@
   .primary--placeholder {
     :deep(textarea::placeholder) {
       color: rgb(var(--v-theme-primary));
-      font-style: italic;
+      font-style: italic !important;
       opacity: 1;
       padding: 0 3px 0 0;
     }
-    :deep(textarea::-moz-placeholder) {
-      font-style: initial;
-    }
   }
 
   // remove details
@@ -112,22 +133,15 @@
   }
 
   // Progress Bar
-  :deep(.v-progress-linear) {
-    color: rgb(var(--v-theme-primary));
-  }
   :deep(.v-field__loader) {
     top: calc(100% - 2px);
   }
-
-  :deep(.v-field--appended) {
-    padding-inline-end: 8px;
-  }
 </style>
 
 <script>
   import { ref } from 'vue';
   import { VTextarea, VTooltip } from 'vuetify/components';
-  import { 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}.
@@ -154,13 +168,15 @@
         default: 'right',
       },
     },
-    setup(_p, { attrs }) {
+    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,

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

@@ -8,6 +8,7 @@ declare const _default: import("vue").DefineComponent<{
         default: 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

@@ -6,36 +6,51 @@
     :hide-details="false"
     :rules="rules"
     :type="type"
-    class="primary--placeholder"
+    color="primary"
+    class="vcs-text-field primary--placeholder"
     :class="{
       'py-1': !paddingProvided,
+      'no-prepended-content': !prependedContent,
     }"
     v-bind="$attrs"
+    :prefix="forcePrefix ? undefined : $attrs.prefix"
     v-model="visibleValue"
     v-model:focused="focused"
   >
     <template #append-inner v-if="unit">
       <slot name="append-inner">{{ unit }}</slot>
     </template>
-    <template v-for="slot of Object.keys($slots)" #[slot]="scope">
-      <slot :name="slot" v-bind="scope" />
+    <template v-for="slot of forwardSlots" #[slot]="scope">
+      <slot :name="slot" v-bind="scope ?? {}" />
     </template>
-    <template #message="{ message }">
+    <template #message="scope">
       <v-tooltip
         ref="errorTooltipRef"
         :activator="textFieldRef"
-        v-if="message"
-        :text="message"
+        v-if="scope?.message"
+        :text="$st(scope?.message)"
         content-class="bg-error"
         :location="tooltipPosition"
       />
+      <slot name="message" v-bind="scope ?? {}"></slot>
+    </template>
+    <template #default="scope">
+      <v-tooltip
+        v-if="tooltip && !errorTooltipRef"
+        :activator="textFieldRef"
+        :location="tooltipPosition"
+        :text="$st(tooltip)"
+      ></v-tooltip>
+      <slot name="default" v-bind="scope ?? {}"></slot>
+    </template>
+    <!-- use slot to show prefix always, independent of modelValue (unlike prefix prop) -->
+    <template #prepend-inner="prependInnerScope">
+      <slot name="prepend-inner" v-bind="prependInnerScope">
+        <template v-if="forcePrefix && $attrs.prefix">
+          {{ $attrs.prefix }}
+        </template>
+      </slot>
     </template>
-    <v-tooltip
-      v-if="tooltip && !errorTooltipRef"
-      :activator="textFieldRef"
-      :location="tooltipPosition"
-      :text="tooltip"
-    ></v-tooltip>
   </v-text-field>
 </template>
 
@@ -45,7 +60,7 @@
 <script>
   import { computed, ref } from 'vue';
   import { VTextField, VTooltip } from 'vuetify/components';
-  import { usePadding } from '../composables.js';
+  import { getForwardSlots, usePadding } from '../composables.js';
   import { useProxiedAtomicModel } from '../modelHelper.js';
 
   function countDecimalPlaces(value) {
@@ -69,6 +84,7 @@
    * @vue-prop {string|undefined}                       tooltip - Optional tooltip which will be shown on hover when no error message is shown
    * @vue-prop {string}                                 unit - Unit for number input fields. Is displayed behind the number.
    * @vue-prop {number|undefined}                       [decimals] - An optional number of decimal places the visible value will be rounded to. Does not affect the input value!
+   * @vue-prop {boolean}                                [forcePrefix=false] - If set, forces the prefix to be always rendered independent of modelValue by using prepend-inner slot
    */
   export default {
     name: 'VcsTextField',
@@ -107,8 +123,12 @@
         type: Number,
         default: undefined,
       },
+      forcePrefix: {
+        type: Boolean,
+        default: false,
+      },
     },
-    setup(props, { attrs }) {
+    setup(props, { attrs, slots }) {
       const textFieldRef = ref();
       const errorTooltipRef = ref();
       const focused = ref(attrs.autofocus);
@@ -126,14 +146,18 @@
           ) {
             const v = parseFloat(localValue.value);
             if (Number.isFinite(v)) {
-              return v.toFixed(props.decimals);
+              return parseFloat(v.toFixed(props.decimals));
             }
           }
           return localValue.value ?? '';
         },
         set(value) {
-          localValue.value = value;
           // emit is not needed since the vuetify component already emits an @input event. (forwarded listeners)
+          if (props.type === 'number') {
+            localValue.value = parseFloat(value);
+          } else {
+            localValue.value = value;
+          }
         },
       });
 
@@ -148,8 +172,14 @@
       });
 
       const paddingProvided = usePadding(attrs);
+      const forwardSlots = getForwardSlots(slots, ['default', 'message']);
 
+      const prependedContent = computed(() => {
+        return (props.forcePrefix && attrs.prefix) || !!slots['prepend-inner'];
+      });
       return {
+        prependedContent,
+        forwardSlots,
         paddingProvided,
         visibleValue,
         rules,

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

@@ -23,9 +23,15 @@ declare const _default: import("vue").DefineComponent<{
         type: NumberConstructor;
         default: undefined;
     };
+    forcePrefix: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }, {
+    prependedContent: import("vue").ComputedRef<{}>;
+    forwardSlots: string[];
     paddingProvided: import("vue").ComputedRef<boolean>;
-    visibleValue: import("vue").WritableComputedRef<any>;
+    visibleValue: import("vue").WritableComputedRef<string | number | boolean>;
     rules: import("vue").ComputedRef<unknown>;
     textFieldRef: import("vue").Ref<any>;
     errorTooltipRef: import("vue").Ref<any>;
@@ -55,6 +61,10 @@ declare const _default: import("vue").DefineComponent<{
         type: NumberConstructor;
         default: undefined;
     };
+    forcePrefix: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>>, {
     type: string;
     modelValue: string | number;
@@ -62,5 +72,6 @@ declare const _default: import("vue").DefineComponent<{
     tooltipPosition: string;
     unit: string;
     decimals: number;
+    forcePrefix: boolean;
 }, {}>;
 export default _default;

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

@@ -1,131 +1,108 @@
 <template>
-  <v-stepper
-    vertical
-    :model-value="modelValue"
-    @change="(newValue) => $emit('update:modelValue', newValue)"
-    class="rounded-0 pb-1"
-  >
-    <slot />
-  </v-stepper>
+  <v-stepper-vertical v-bind="$attrs" class="vcs-wizard">
+    <template #icon>
+      <slot name="icon"><v-icon>mdi-circle</v-icon></slot>
+    </template>
+    <template v-for="slot of forwardSlots" #[slot]="scope">
+      <slot :name="slot" v-bind="scope ?? {}" />
+    </template>
+  </v-stepper-vertical>
 </template>
 
 <script>
-  import { VStepper } from 'vuetify/components';
+  import { VStepperVertical } from 'vuetify/labs/VStepperVertical';
+  import { VIcon } from 'vuetify/components';
+  import { getForwardSlots } from '../composables.js';
 
   /**
-   * @description Stylized wrapper around {@link https://vuetifyjs.com/en/api/v-stepper/ |vuetify stepper}
-   * Is always vertical.
-   * Only passes the step property, all other props are ignored.
-   * @vue-prop {number} value - The current step of the stepper.
+   * @description Stylized wrapper around {@link https://vuetifyjs.com/en/api/v-stepper-vertical/ |vuetify stepper vertical}per.
    * @vue-data {slot} [#default] - Slot to add VcsWizardSteps.
    */
   export default {
     name: 'VcsWizard',
     components: {
-      VStepper,
+      VStepperVertical,
+      VIcon,
     },
-    props: {
-      modelValue: {
-        type: Number,
-        default: undefined,
-      },
+    setup(_p, { slots }) {
+      const forwardSlots = getForwardSlots(slots, ['icon']);
+
+      return {
+        forwardSlots,
+      };
     },
   };
 </script>
 <style scoped lang="scss">
-  /*@import '../../styles/shades.scss';
-  .v-stepper {
-    &.theme--light {
-      :deep(.v-stepper__step) {
-        .v-stepper__label {
-          color: map-get($shades, 'black');
-        }
-        &--complete {
-          .v-stepper__label {
-            color: map-get($shades, 'black');
-          }
-        }
-        &--active {
-          background-color: rgba(34, 34, 34, 0.1);
-          .v-stepper__label {
-            color: var(--v-primary-base);
-          }
-        }
-        .v-stepper__step__step::before {
-          color: map-get($shades, 'white');
-        }
-      }
-      :deep(.step-border:not(:last-child) > .v-stepper__content) {
-        border-left: 2px solid rgba(0, 0, 0, 0.12);
-      }
-    }
-    &.theme--dark {
-      background: map-get($shades, 'black');
-      :deep(.v-stepper__step) {
-        .v-stepper__label {
-          color: map-get($shades, 'white');
-        }
-        &--complete {
-          .v-stepper__label {
-            color: map-get($shades, 'white');
-          }
-        }
-        &--active {
-          background-color: rgba(255, 255, 255, 0.17);
-          .v-stepper__label {
-            color: var(--v-primary-base);
-          }
-        }
-        .v-stepper__step__step {
-          .v-icon {
-            color: transparent;
-          }
-          &:before {
-            color: map-get($shades, 'black');
-          }
-        }
-        &.v-stepper__step--error {
-          .v-stepper__label {
-            color: var(--v-error-darken2);
-          }
-          .v-stepper__step__step {
-            background-color: var(--v-error-darken1);
-          }
-        }
-      }
-      :deep(.step-border:not(:last-child) > .v-stepper__content) {
-        border-left: 2px solid rgba(255, 255, 255, 0.8);
-      }
-    }
-    :deep(.v-stepper__step) {
-      padding-top: 0;
-      padding-bottom: 0;
-      .v-stepper__label {
-        font-weight: 700;
-        text-shadow: none !important;
-      }
-      .v-stepper__step__step {
-        color: transparent;
-        position: relative;
-        margin-top: 1px;
-        &:before {
-          content: '\25cf';
-          font-size: 18px;
-          position: absolute;
-          top: -9px;
-        }
-      }
-      &.v-stepper__step--error {
-        .v-stepper__step__step {
-          background-color: var(--v-error-base);
-        }
-        .v-stepper__label {
-          color: var(--v-error-base);
-        }
-      }
+  :deep(.v-expansion-panel-title) {
+    height: calc(var(--v-vcs-font-size) * 2 + 6px);
+    min-height: calc(var(--v-vcs-font-size) * 2 + 6px);
+    padding: 0 8px;
+  }
+  :deep(.v-expansion-panel-title.v-expansion-panel-title--active) {
+    background-color: rgba(
+      var(--v-theme-base-darken-4),
+      var(--v-selected-opacity)
+    );
+
+    color: rgb(var(--v-theme-primary));
+
+    .action-btn-wrap {
+      color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
     }
-    :deep(.v-stepper__content .v-stepper__wrapper) {
-      margin: 4px 0 4px 4px;
+
+    .v-expansion-panel-title__overlay:hover,
+    .v-expansion-panel-title__overlay {
+      background-color: rgb(var(--v-theme-base));
     }
-  }*/
+  }
+  :deep(.v-stepper-vertical-item:not(:last-child):before) {
+    height: 100%;
+    top: calc(var(--v-vcs-font-size) * 2 - 16px);
+    left: calc(14px + var(--v-vcs-font-size) * 0.42);
+    width: calc(var(--v-vcs-font-size) * 0.1);
+  }
+  :deep(.v-stepper-vertical-item__avatar.v-avatar) {
+    background: rgb(var(--v-theme-base-darken-2));
+    color: rgb(var(--v-theme-background)) !important;
+    width: calc(var(--v-vcs-font-size) - 1px) !important;
+    height: calc(var(--v-vcs-font-size) - 1px) !important;
+    z-index: 2;
+  }
+  :deep(
+      .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
+    ) {
+    background: rgb(var(--v-theme-error));
+  }
+  /* alignment of heading */
+  :deep(.v-stepper-vertical-item__avatar.v-avatar) + div {
+    width: 100%;
+  }
+  /* Removes padding right at header actions */
+  :deep(.v-expansion-panel-title__icon) {
+    display: none;
+  }
+  :deep(.v-stepper-vertical-item__avatar.v-avatar .v-icon) {
+    font-size: calc(var(--v-vcs-font-size) - 3px) !important;
+    height: calc(var(--v-vcs-font-size) - 3px) !important;
+    width: calc(var(--v-vcs-font-size) - 3px) !important;
+  }
+  :deep(.v-avatar--start) {
+    margin-inline-start: 6px;
+  }
+  /* button on disabled shouldn't still contain the .bg-primary class! */
+  :deep(.v-btn--disabled.v-btn--variant-flat.bg-primary) {
+    color: rgba(var(--v-theme-on-surface), 0.26) !important;
+  }
+  :deep(.v-expansion-panel__shadow) {
+    box-shadow: unset;
+  }
+  :deep(.v-expansion-panel-text) {
+    padding-left: 12px;
+  }
 </style>

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

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