@vcmap/ui 5.3.3 → 6.0.0-rc.2

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

@@ -1,137 +1,108 @@
 <template>
-  <v-stepper
-    vertical
-    :value="value"
-    @change="(newValue) => $emit('input', newValue)"
-    class="rounded-0 pb-1"
-  >
-    <slot />
-  </v-stepper>
+  <v-stepper-vertical v-bind="$attrs">
+    <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/lib';
+  import { VStepperVertical } from 'vuetify/labs/VStepperVertical';
+  import { VIcon } from 'vuetify/components';
+  import { useForwardSlots } 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: {
-      value: {
-        type: Number,
-        default: undefined,
-      },
+    setup(_p, { slots }) {
+      const forwardSlots = useForwardSlots(slots, ['icon']);
+
+      return {
+        forwardSlots,
+      };
     },
   };
 </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');
-          }
-          &--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');
-          }
-        }
-        .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');
-      ::v-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);
-            }
-          }
-        }
-        .step-border:not(:last-child) > .v-stepper__content {
-          border-left: 2px solid rgba(255, 255, 255, 0.8);
-        }
-      }
+  :deep(.v-expansion-panel-title) {
+    height: var(--v-vcs-item-height);
+    min-height: var(--v-vcs-item-height);
+    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));
     }
-    ::v-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);
-          }
-        }
-      }
-      .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-item-height) * 0.5);
+    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<{
-    value: {
-        type: NumberConstructor;
-        default: undefined;
-    };
-}, {}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
-    value: {
-        type: NumberConstructor;
-        default: undefined;
-    };
-}>>, {
-    value: number;
-}>;
+declare const _default: import("vue").DefineComponent<{}, {
+    forwardSlots: import("vue").ComputedRef<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,45 +1,64 @@
 <template>
-  <div class="step-border">
-    <v-stepper-step
-      :step="step"
-      :editable="editable"
-      :complete="complete"
-      :rules="rules"
-      class="pr-2"
-    >
-      <div class="d-flex justify-space-between align-center">
-        <slot name="header" />
-        <div v-if="!$slots.header" class="step-label-wrap">
-          <span>{{ $t(heading) }}</span>
+  <v-stepper-vertical-item
+    :value="step"
+    :editable="isActiveStep || editable"
+    :complete="complete"
+    :rules="rules"
+    :multiple="multiple"
+    :hide-actions="true"
+    icon="mdi-circle"
+    complete-icon="mdi-circle"
+    edit-icon="mdi-circle"
+    error-icon="mdi-circle"
+    v-bind="$attrs"
+  >
+    <template #title>
+      <slot name="title">
+        <div class="d-flex align-center justify-space-between">
+          <div v-if="!$slots.title">
+            <span>{{ $st(heading) }}</span>
+          </div>
+          <v-spacer />
+          <VcsActionButtonList
+            v-if="isActiveStep"
+            :actions="actions"
+            :overflow-count="actionButtonListOverflowCount"
+            @mousedown.stop
+            @touchstart.stop
+            @keydown.stop
+            class="justify-end"
+          />
         </div>
-        <VcsActionButtonList
-          v-if="Number(step) === Number(value)"
-          :actions="actions"
-          :overflow-count="actionButtonListOverflowCount"
-          @mousedown.stop
-          @touchstart.stop
-          @keydown.stop
-        />
+      </slot>
+    </template>
+    <template #default>
+      <div class="pr-4">
+        <VcsHelp :text="helpText" :show="showHelp">
+          <slot name="help" />
+        </VcsHelp>
+        <slot />
       </div>
-    </v-stepper-step>
-    <v-stepper-content v-if="$slots.content" class="pr-4" :step="step">
-      <VcsHelp :text="helpText" :show="showHelp">
-        <slot name="help" />
-      </VcsHelp>
-      <slot name="content" />
-    </v-stepper-content>
-  </div>
+    </template>
+    <template v-for="slot of forwardSlots" #[slot]="scope">
+      <slot :name="slot" v-bind="scope ?? {}" />
+    </template>
+  </v-stepper-vertical-item>
 </template>
 
 <script>
   import { computed, reactive, watch } from 'vue';
-  import { VStepperStep, VStepperContent } from 'vuetify/lib';
+  import { VStepperVerticalItem } from 'vuetify/labs/VStepperVertical';
+  import { VSpacer } from 'vuetify/components';
+  import { useProxiedComplexModel } from '../modelHelper.js';
+  import { useForwardSlots } from '../composables.js';
   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
    * {@link https://vuetifyjs.com/en/api/v-stepper-content/ |vuetify VStepperContent}.
+   * @vue-prop {boolean} multiple - Whether multiple steps can be active at the same time.
+   * @vue-prop {string | number} modelValue - The current step of the VcsWizard.
    * @vue-prop {number | string} step - Declares which step of the VcsWizard this VcsWizardStep is.
    * @vue-prop {boolean} [editable=false] - If this step is editable. If so, user can jump to that step by clicking on the v-stepper-step.
    * @vue-prop {boolean} [complete=false] - If this step is completed. Has effect on the look of the v-stepper-step.
@@ -48,7 +67,6 @@
    * @vue-prop {Array<VcsAction>} [headerActions] - Action buttons to be displayed on the right side of the v-stepper-step.
    * @vue-prop {number} [actionButtonListOverflowCount] - Overflow count to use for the headerActions.
    * @vue-prop {string} [helpText] - Optional help text. Must be plain string. Use 'help' slot for html based help texts. Help slot has precedence over helpText prop.
-   * @vue-prop {string | number} value - The current step of the VcsWizard.
    * @vue-data {slot} [#header] - Slot to override the heading prop. Allows to pass html as v-stepper-step content.
    * @vue-data {slot} [#content] - Slot to add content to the step. Is rendered in v-stepper-content.
    * @vue-data {slot} [#help] - Slot to add html to the help section. Overrides content of helpText prop.
@@ -56,15 +74,28 @@
   export default {
     name: 'VcsWizardStep',
     components: {
-      VStepperStep,
-      VStepperContent,
+      VSpacer,
+      VStepperVerticalItem,
       VcsActionButtonList,
       VcsHelp,
     },
     props: {
+      multiple: {
+        type: Boolean,
+        default: false,
+      },
+      modelValue: {
+        type: [Array, String, Boolean, Number],
+        default(rawProps) {
+          if (rawProps.multiple) {
+            return [];
+          }
+          return 0;
+        },
+      },
       step: {
         type: [String, Number],
-        required: true,
+        default: 0,
       },
       editable: {
         type: Boolean,
@@ -95,12 +126,13 @@
         type: String,
         default: undefined,
       },
-      value: {
-        type: [String, Number],
-        required: true,
-      },
     },
     setup(props, { slots, emit }) {
+      const localValue = useProxiedComplexModel(props, 'modelValue', emit);
+      const isActiveStep = computed(
+        () => Number(props.step) === Number(localValue.value),
+      );
+
       const helpAction = reactive({
         name: 'help',
         title: 'components.vcsFormSection.help',
@@ -108,15 +140,15 @@
         icon: 'mdi-help-circle',
         callback() {
           this.active = !this.active;
-          if (Number(props.value) !== Number(props.step) && props.editable) {
-            emit('input', props.step);
+          if (!isActiveStep.value && props.editable) {
+            localValue.value = props.step;
           }
         },
       });
       const showHelp = computed(() => helpAction.active);
       // deactivate help when leaving a step
       watch(
-        () => props.value,
+        () => localValue,
         (currentStep, previousStep) => {
           if (Number(previousStep) === Number(props.step)) {
             helpAction.active = false;
@@ -133,29 +165,15 @@
         return props.headerActions;
       });
 
+      const forwardSlots = useForwardSlots(slots, ['title', 'default']);
+
       return {
         showHelp,
         actions,
+        isActiveStep,
+        forwardSlots,
       };
     },
   };
 </script>
-<style scoped lang="scss">
-  .v-alert--text:before {
-    background-color: transparent;
-  }
-  .v-stepper__step {
-    ::v-deep {
-      .v-ripple__container {
-        display: none !important;
-      }
-    }
-  }
-  .v-stepper__content {
-    padding-left: 2px !important;
-  }
-  .step-label-wrap {
-    padding-top: 13px !important;
-    padding-bottom: 13px !important;
-  }
-</style>
+<style scoped lang="scss"></style>

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

@@ -1,7 +1,15 @@
 declare const _default: import("vue").DefineComponent<{
+    multiple: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    modelValue: {
+        type: (BooleanConstructor | ArrayConstructor | StringConstructor | NumberConstructor)[];
+        default(rawProps: any): 0 | never[];
+    };
     step: {
         type: (StringConstructor | NumberConstructor)[];
-        required: true;
+        default: number;
     };
     editable: {
         type: BooleanConstructor;
@@ -32,17 +40,23 @@ declare const _default: import("vue").DefineComponent<{
         type: StringConstructor;
         default: undefined;
     };
-    value: {
-        type: (StringConstructor | NumberConstructor)[];
-        required: true;
-    };
 }, {
     showHelp: import("vue").ComputedRef<boolean>;
     actions: import("vue").ComputedRef<VcsAction>;
-}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+    isActiveStep: import("vue").ComputedRef<boolean>;
+    forwardSlots: import("vue").ComputedRef<string[]>;
+}, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    multiple: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    modelValue: {
+        type: (BooleanConstructor | ArrayConstructor | StringConstructor | NumberConstructor)[];
+        default(rawProps: any): 0 | never[];
+    };
     step: {
         type: (StringConstructor | NumberConstructor)[];
-        required: true;
+        default: number;
     };
     editable: {
         type: BooleanConstructor;
@@ -73,17 +87,16 @@ declare const _default: import("vue").DefineComponent<{
         type: StringConstructor;
         default: undefined;
     };
-    value: {
-        type: (StringConstructor | NumberConstructor)[];
-        required: true;
-    };
 }>>, {
+    complete: boolean;
     headerActions: unknown[];
+    modelValue: string | number | boolean | unknown[];
     rules: unknown[];
-    complete: boolean;
+    multiple: boolean;
+    step: string | number;
     heading: string;
     actionButtonListOverflowCount: number;
     helpText: string;
     editable: boolean;
-}>;
+}, {}>;
 export default _default;

package/src/components/form-inputs-controls/vcsTextField.scss

@@ -0,0 +1,83 @@
+:deep(.v-field) {
+  --v-field-padding-start: 8px;
+  --v-field-padding-end: 8px;
+}
+.v-input--density-compact :deep(.v-field) {
+  --v-input-control-height: calc(var(--v-vcs-item-height) - 8px);
+  --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: 8px;
+    padding-right: 8px;
+  }
+  .v-field__loader {
+    padding-left: 8px;
+    padding-right: 8px;
+  }
+  .v-field__outline *::before {
+    border-width: 0;
+    border-radius: 0;
+  }
+  .v-field__outline * label {
+    color: rgb(var(--v-theme-primary));
+    margin-left: -4px;
+  }
+}
+
+// move unit to the right
+:deep(.v-field--appended) {
+  padding-inline-end: 8px;
+}
+
+// remove margin from prepended Icon
+.v-input--horizontal :deep(.v-input__prepend) {
+  margin-inline-end: 4px;
+}
+.primary--placeholder {
+  :deep(input::placeholder) {
+    color: rgb(var(--v-theme-primary));
+    font-style: italic;
+    opacity: 1;
+    padding: 0 3px 0 0;
+  }
+  :deep(input::-moz-placeholder) {
+    font-style: initial;
+  }
+}
+
+// remove details
+:deep(.v-input__details) {
+  display: none;
+}
+
+// Progress Bar
+:deep(.v-field__loader) {
+  top: calc(100% - 2px);
+}
+
+// unit margin
+:deep(.v-field__clearable) {
+  margin-left: 0;
+}