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

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

@@ -20,7 +20,7 @@ declare const _default: import("vue").DefineComponent<{
         default: undefined;
     };
 }, {
-    forwardedModelValue: import("vue").WritableComputedRef<string | number | boolean | unknown[]>;
+    localModelValue: import("vue").Ref<any>;
     additionalItems: import("vue").ComputedRef<number>;
     isMultiple: import("vue").ComputedRef<boolean>;
     paddingProvided: import("vue").ComputedRef<boolean>;
@@ -50,9 +50,9 @@ declare const _default: import("vue").DefineComponent<{
     };
 }>>, {
     modelValue: string | number | boolean | unknown[];
+    multiple: boolean;
     tooltip: string;
     tooltipPosition: string;
-    multiple: boolean;
     itemText: Function;
 }, {}>;
 export default _default;

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

@@ -3,8 +3,9 @@
     :class="{
       'py-1': !paddingProvided,
     }"
-    class="VcsSlider"
+    class="vcs-slider"
     hide-details
+    ref="sliderRef"
     :track-color="'base-darken-1'"
     thumb-color="base-darken-3"
     track-fill-color="base-darken-1"
@@ -13,8 +14,18 @@
     :tick-size="tickSize"
     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 #append="scope">
+      <slot name="append" v-bind="scope ?? {}"></slot>
+      <v-tooltip
+        v-if="tooltip"
+        :activator="sliderRef"
+        :location="tooltipPosition"
+        :text="$st(tooltip)"
+      ></v-tooltip>
     </template>
   </v-slider>
 </template>
@@ -54,25 +65,37 @@
   }
 </style>
 <script>
-  import { computed } from 'vue';
-  import { VSlider } from 'vuetify/components';
-  import { usePadding } from '../composables.js';
+  import { computed, ref } from 'vue';
+  import { VSlider, VTooltip } from 'vuetify/components';
+  import { useForwardSlots, usePadding } from '../composables.js';
   import { useItemHeight } from '../../vuePlugins/vuetify.js';
 
   /**
-   * @description stylized wrapper around {@link https://v2.vuetifyjs.com/en/components/sliders/#api}.
+   * @description stylized wrapper around {@link https://vuetifyjs.com/en/components/sliders/#usage}.
+   * @vue-prop {('bottom' | 'left' | 'top' | 'right')}  [tooltipPosition='right'] - Position of the tooltip.
+   * @vue-prop {string|undefined}                       tooltip - Optional tooltip which will be shown on hover when no error message is shown
    */
   export default {
     name: 'VcsSlider',
     components: {
       VSlider,
+      VTooltip,
+    },
+    props: {
+      tooltip: {
+        type: String,
+        default: undefined,
+      },
+      tooltipPosition: {
+        type: String,
+        default: 'right',
+      },
     },
-    setup(props, { attrs }) {
+    setup(props, { attrs, slots }) {
       const itemHeight = useItemHeight();
       const thumbSize = computed(() => {
         return Math.floor(itemHeight.value / 4);
       });
-
       const trackSize = computed(() => {
         return Math.floor(itemHeight.value / 12);
       });
@@ -80,8 +103,11 @@
         return trackSize.value * 2;
       });
       const paddingProvided = usePadding(attrs);
-
+      const forwardSlots = useForwardSlots(slots, ['append']);
+      const sliderRef = ref();
       return {
+        forwardSlots,
+        sliderRef,
         thumbSize,
         tickSize,
         trackSize,

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

@@ -1,7 +1,30 @@
-declare const _default: import("vue").DefineComponent<{}, {
+declare const _default: import("vue").DefineComponent<{
+    tooltip: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    tooltipPosition: {
+        type: StringConstructor;
+        default: string;
+    };
+}, {
+    forwardSlots: import("vue").ComputedRef<string[]>;
+    sliderRef: import("vue").Ref<any>;
     thumbSize: import("vue").ComputedRef<number>;
     tickSize: import("vue").ComputedRef<number>;
     trackSize: import("vue").ComputedRef<number>;
     paddingProvided: import("vue").ComputedRef<boolean>;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
+}, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    tooltip: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    tooltipPosition: {
+        type: StringConstructor;
+        default: string;
+    };
+}>>, {
+    tooltip: string;
+    tooltipPosition: string;
+}, {}>;
 export default _default;

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

@@ -18,7 +18,7 @@
         ref="errorTooltipRef"
         :activator="textAreaRef"
         v-if="message"
-        :text="message"
+        :text="$st(message)"
         content-class="bg-error"
         :location="tooltipPosition"
       />
@@ -29,7 +29,7 @@
         v-if="tooltip && !errorTooltipRef"
         :activator="textAreaRef"
         :location="tooltipPosition"
-        :text="tooltip"
+        :text="$st(tooltip)"
       ></v-tooltip>
     </template>
   </v-textarea>
@@ -43,20 +43,26 @@
     --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;
+    padding-left: 8px;
+    padding-right: 8px;
+    .v-field__clearable {
+      margin: 4px -4px 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,16 +70,26 @@
     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: 8px;
+      margin-left: -4px;
     }
+
     .v-field__outline *::before {
       border-width: 0;
       border-radius: 0;
@@ -83,10 +99,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
@@ -118,10 +137,6 @@
   :deep(.v-field__loader) {
     top: calc(100% - 2px);
   }
-
-  :deep(.v-field--appended) {
-    padding-inline-end: 8px;
-  }
 </style>
 
 <script>

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

@@ -6,7 +6,7 @@
     :hide-details="false"
     :rules="rules"
     :type="type"
-    class="primary--placeholder"
+    class="vcs-text-field primary--placeholder"
     :class="{
       'py-1': !paddingProvided,
     }"
@@ -17,25 +17,28 @@
     <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 }">
       <v-tooltip
         ref="errorTooltipRef"
         :activator="textFieldRef"
         v-if="message"
-        :text="message"
+        :text="$st(message)"
         content-class="bg-error"
         :location="tooltipPosition"
       />
     </template>
-    <v-tooltip
-      v-if="tooltip && !errorTooltipRef"
-      :activator="textFieldRef"
-      :location="tooltipPosition"
-      :text="tooltip"
-    ></v-tooltip>
+    <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>
   </v-text-field>
 </template>
 
@@ -45,7 +48,7 @@
 <script>
   import { computed, ref } from 'vue';
   import { VTextField, VTooltip } from 'vuetify/components';
-  import { usePadding } from '../composables.js';
+  import { useForwardSlots, usePadding } from '../composables.js';
   import { useProxiedAtomicModel } from '../modelHelper.js';
 
   function countDecimalPlaces(value) {
@@ -108,7 +111,7 @@
         default: undefined,
       },
     },
-    setup(props, { attrs }) {
+    setup(props, { attrs, slots }) {
       const textFieldRef = ref();
       const errorTooltipRef = ref();
       const focused = ref(attrs.autofocus);
@@ -148,8 +151,10 @@
       });
 
       const paddingProvided = usePadding(attrs);
+      const forwardSlots = useForwardSlots(slots, ['default']);
 
       return {
+        forwardSlots,
         paddingProvided,
         visibleValue,
         rules,

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

@@ -24,6 +24,7 @@ declare const _default: import("vue").DefineComponent<{
         default: undefined;
     };
 }, {
+    forwardSlots: import("vue").ComputedRef<string[]>;
     paddingProvided: import("vue").ComputedRef<boolean>;
     visibleValue: import("vue").WritableComputedRef<any>;
     rules: import("vue").ComputedRef<unknown>;

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">
+    <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 { 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: {
-      modelValue: {
-        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 {
-      :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: 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));
     }
-    :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-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<{
-    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: import("vue").ComputedRef<string[]>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
 export default _default;