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

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

@@ -7,7 +7,7 @@
     :menu-props="{ origin: 'overlap' }"
     :item-title="(item) => $st(getTitle(item))"
     color="primary"
-    class="primary--placeholder"
+    class="primary--placeholder vcs-select"
     :class="{
       'py-1': !paddingProvided,
     }"
@@ -23,8 +23,8 @@
       </span>
     </template>
 
-    <template #append-inner>
-      <slot name="append-inner"></slot>
+    <template #append-inner="scope">
+      <slot name="append-inner" v-bind="scope ?? {}"></slot>
       <v-tooltip
         :activator="selectFieldRef"
         v-if="tooltip && !errorTooltipRef"
@@ -32,37 +32,38 @@
         :location="tooltipPosition"
       />
     </template>
-    <template
-      v-for="slot of Object.keys($slots).filter(
-        (name) => name !== 'append-inner',
-      )"
-      #[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
         :activator="selectFieldRef"
         ref="errorTooltipRef"
-        v-if="message"
-        :text="$st(message)"
+        v-if="scope?.message"
+        :text="$st(scope?.message)"
         content-class="bg-error"
         :location="tooltipPosition"
       />
+      <slot name="message" v-bind="scope ?? {}"></slot>
     </template>
-    <template #item="{ props }">
-      <v-list-item density="compact" v-bind="props" role="option">
-        <template #prepend="scope" v-if="multiple">
-          <VcsCheckbox v-model="scope.isSelected" class="py-0"></VcsCheckbox>
-        </template>
-      </v-list-item>
+    <template #item="itemScope">
+      <slot name="item" v-bind="itemScope ?? {}">
+        <v-list-item density="compact" v-bind="itemScope.props" role="option">
+          <template #prepend="prependScope" v-if="multiple">
+            <VcsCheckbox
+              v-model="prependScope.isSelected"
+              class="py-0"
+            ></VcsCheckbox>
+          </template>
+        </v-list-item>
+      </slot>
     </template>
   </v-select>
 </template>
 <style lang="scss" scoped>
   :deep(.v-field) {
-    --v-field-padding-start: 8px;
-    --v-field-padding-end: 8px;
+    --v-field-padding-start: 4px;
+    --v-field-padding-end: 4px;
   }
   :deep(.v-field__input) {
     flex-wrap: unset;
@@ -95,12 +96,12 @@
       border-radius: 0;
     }
     .v-field__outline {
-      padding-left: 8px;
-      padding-right: 8px;
+      padding-left: 4px;
+      padding-right: 4px;
     }
     .v-field__loader {
-      padding-left: 8px;
-      padding-right: 8px;
+      padding-left: 3px;
+      padding-right: 3px;
     }
     .v-field__outline *::before {
       border-width: 0;
@@ -111,16 +112,21 @@
       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;
-      // line-height: unset !important;
+      font-style: italic !important;
       padding: 0 3px 0 0;
     }
-    :deep(input::-moz-placeholder) {
-      font-style: italic;
-    }
   }
   // remove details
   :deep(.v-input__details) {
@@ -135,7 +141,7 @@
 <script>
   import { VSelect, VTooltip, VListItem } from 'vuetify/components';
   import { computed, ref } from 'vue';
-  import { usePadding } from '../composables.js';
+  import { useForwardSlots, usePadding } from '../composables.js';
   import VcsCheckbox from './VcsCheckbox.vue';
   import { useProxiedComplexModel } from '../modelHelper.js';
 
@@ -183,7 +189,8 @@
         default: undefined,
       },
     },
-    setup(props, { attrs, emit }) {
+    emits: ['update:modelValue'],
+    setup(props, { attrs, slots, emit }) {
       const selectFieldRef = ref();
       const errorTooltipRef = ref();
       const localModelValue = useProxiedComplexModel(props, 'modelValue', emit);
@@ -206,8 +213,10 @@
         return props.multiple;
       });
       const paddingProvided = usePadding(attrs);
+      const forwardSlots = useForwardSlots(slots, ['append-inner', 'message']);
 
       return {
+        forwardSlots,
         localModelValue,
         additionalItems,
         isMultiple,

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

@@ -20,6 +20,7 @@ declare const _default: import("vue").DefineComponent<{
         default: undefined;
     };
 }, {
+    forwardSlots: import("vue").ComputedRef<string[]>;
     localModelValue: import("vue").Ref<any>;
     additionalItems: import("vue").ComputedRef<number>;
     isMultiple: import("vue").ComputedRef<boolean>;
@@ -27,7 +28,7 @@ declare const _default: import("vue").DefineComponent<{
     selectFieldRef: import("vue").Ref<any>;
     errorTooltipRef: import("vue").Ref<any>;
     getTitle: (item: any) => any;
-}, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+}, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     multiple: {
         type: BooleanConstructor;
         default: boolean;
@@ -48,7 +49,9 @@ declare const _default: import("vue").DefineComponent<{
         type: FunctionConstructor;
         default: undefined;
     };
-}>>, {
+}>> & {
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}, {
     modelValue: string | number | boolean | unknown[];
     multiple: boolean;
     tooltip: string;

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

@@ -2,8 +2,9 @@
   <v-slider
     :class="{
       'py-1': !paddingProvided,
+      'remove-append-margin': !hasAppendSlot,
     }"
-    class="vcs-slider"
+    class="vcs-slider mx-1"
     hide-details
     ref="sliderRef"
     :track-color="'base-darken-1'"
@@ -33,6 +34,9 @@
   .v-input--horizontal :deep(.v-input__control) {
     min-height: calc(var(--v-vcs-item-height) - 8px);
   }
+  .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;
@@ -63,6 +67,11 @@
   :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';
@@ -106,6 +115,9 @@
       const forwardSlots = useForwardSlots(slots, ['append']);
       const sliderRef = ref();
       return {
+        hasAppendSlot: computed(() => {
+          return !!slots.append;
+        }),
         forwardSlots,
         sliderRef,
         thumbSize,

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

@@ -8,6 +8,7 @@ declare const _default: import("vue").DefineComponent<{
         default: string;
     };
 }, {
+    hasAppendSlot: import("vue").ComputedRef<boolean>;
     forwardSlots: import("vue").ComputedRef<string[]>;
     sliderRef: import("vue").Ref<any>;
     thumbSize: import("vue").ComputedRef<number>;

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

@@ -4,27 +4,29 @@
     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="$st(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"
@@ -44,12 +46,12 @@
   }
 
   :deep(.v-field) {
-    --v-field-padding-start: 8px;
-    --v-field-padding-end: 8px;
-    padding-left: 8px;
-    padding-right: 8px;
+    --v-field-padding-start: 4px;
+    --v-field-padding-end: 4px;
+    padding-left: 4px;
+    padding-right: 4px;
     .v-field__clearable {
-      margin: 4px -4px 0px 0px;
+      margin: 2px -2px 0px 0px;
     }
   }
 
@@ -86,10 +88,13 @@
     .v-field__outline__end {
       border-width: 0 0 1px 0 !important;
       border-radius: 0;
-      margin-right: 8px;
-      margin-left: -4px;
+      margin-right: 4px;
+      margin-left: -8px;
+    }
+    .v-field__loader {
+      padding-left: 3px;
+      padding-right: 3px;
     }
-
     .v-field__outline *::before {
       border-width: 0;
       border-radius: 0;
@@ -116,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
@@ -131,9 +133,6 @@
   }
 
   // Progress Bar
-  :deep(.v-progress-linear) {
-    color: rgb(var(--v-theme-primary));
-  }
   :deep(.v-field__loader) {
     top: calc(100% - 2px);
   }
@@ -142,7 +141,7 @@
 <script>
   import { ref } from 'vue';
   import { VTextarea, VTooltip } from 'vuetify/components';
-  import { usePadding } from '../composables.js';
+  import { useForwardSlots, usePadding } from '../composables.js';
 
   /**
    * @description extends API of {@link https://vuetifyjs.com/en/api/v-textarea/|vuetify v-textarea}.
@@ -169,13 +168,15 @@
         default: 'right',
       },
     },
-    setup(_p, { attrs }) {
+    setup(_p, { attrs, slots }) {
       const textAreaRef = ref();
       const errorTooltipRef = ref();
 
       const paddingProvided = usePadding(attrs);
+      const forwardSlots = useForwardSlots(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: import("vue").ComputedRef<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,11 +6,13 @@
     :hide-details="false"
     :rules="rules"
     :type="type"
+    color="primary"
     class="vcs-text-field primary--placeholder"
     :class="{
       'py-1': !paddingProvided,
     }"
     v-bind="$attrs"
+    :prefix="forcePrefix ? undefined : $attrs.prefix"
     v-model="visibleValue"
     v-model:focused="focused"
   >
@@ -20,15 +22,16 @@
     <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="$st(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
@@ -39,6 +42,14 @@
       ></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-text-field>
 </template>
 
@@ -72,6 +83,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',
@@ -110,6 +122,10 @@
         type: Number,
         default: undefined,
       },
+      forcePrefix: {
+        type: Boolean,
+        default: false,
+      },
     },
     setup(props, { attrs, slots }) {
       const textFieldRef = ref();
@@ -151,7 +167,7 @@
       });
 
       const paddingProvided = usePadding(attrs);
-      const forwardSlots = useForwardSlots(slots, ['default']);
+      const forwardSlots = useForwardSlots(slots, ['default', 'message']);
 
       return {
         forwardSlots,

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

@@ -23,6 +23,10 @@ declare const _default: import("vue").DefineComponent<{
         type: NumberConstructor;
         default: undefined;
     };
+    forcePrefix: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }, {
     forwardSlots: import("vue").ComputedRef<string[]>;
     paddingProvided: import("vue").ComputedRef<boolean>;
@@ -56,6 +60,10 @@ declare const _default: import("vue").DefineComponent<{
         type: NumberConstructor;
         default: undefined;
     };
+    forcePrefix: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>>, {
     type: string;
     modelValue: string | number;
@@ -63,5 +71,6 @@ declare const _default: import("vue").DefineComponent<{
     tooltipPosition: string;
     unit: string;
     decimals: number;
+    forcePrefix: boolean;
 }, {}>;
 export default _default;

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

@@ -23,17 +23,14 @@
             v-if="isActiveStep"
             :actions="actions"
             :overflow-count="actionButtonListOverflowCount"
-            @mousedown.stop
-            @touchstart.stop
-            @keydown.stop
             class="justify-end"
           />
         </div>
       </slot>
     </template>
     <template #default>
-      <div class="pr-4">
-        <VcsHelp :text="helpText" :show="showHelp">
+      <div>
+        <VcsHelp :text="helpText" :show="showHelp" class="mb-1">
           <slot name="help" />
         </VcsHelp>
         <slot />
@@ -136,7 +133,7 @@
       const helpAction = reactive({
         name: 'help',
         title: 'components.vcsFormSection.help',
-        active: false,
+        active: true,
         icon: 'mdi-help-circle',
         callback() {
           this.active = !this.active;

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

@@ -1,6 +1,6 @@
 :deep(.v-field) {
-  --v-field-padding-start: 8px;
-  --v-field-padding-end: 8px;
+  --v-field-padding-start: 4px;
+  --v-field-padding-end: 4px;
 }
 .v-input--density-compact :deep(.v-field) {
   --v-input-control-height: calc(var(--v-vcs-item-height) - 8px);
@@ -29,12 +29,12 @@
     border-radius: 0;
   }
   .v-field__outline {
-    padding-left: 8px;
-    padding-right: 8px;
+    padding-left: 4px;
+    padding-right: 4px;
   }
   .v-field__loader {
-    padding-left: 8px;
-    padding-right: 8px;
+    padding-left: 3px;
+    padding-right: 3px;
   }
   .v-field__outline *::before {
     border-width: 0;
@@ -48,7 +48,7 @@
 
 // move unit to the right
 :deep(.v-field--appended) {
-  padding-inline-end: 8px;
+  padding-inline-end: 4px;
 }
 
 // remove margin from prepended Icon
@@ -58,13 +58,10 @@
 .primary--placeholder {
   :deep(input::placeholder) {
     color: rgb(var(--v-theme-primary));
-    font-style: italic;
+    font-style: italic !important;
     opacity: 1;
     padding: 0 3px 0 0;
   }
-  :deep(input::-moz-placeholder) {
-    font-style: initial;
-  }
 }
 
 // remove details
@@ -72,7 +69,6 @@
   display: none;
 }
 
-// Progress Bar
 :deep(.v-field__loader) {
   top: calc(100% - 2px);
 }
@@ -80,4 +76,5 @@
 // unit margin
 :deep(.v-field__clearable) {
   margin-left: 0;
+  margin-right: 0;
 }

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

@@ -1,14 +1,22 @@
 <template>
-  <span class="vcs-formatted-number" :class="{ 'py-1': !paddingProvided }">
+  <span
+    class="vcs-formatted-number"
+    :class="{
+      'vcs-disabled': disabled,
+      'pa-1': !paddingProvided,
+    }"
+  >
     <slot name="prepend">
       <span v-if="prefix" class="pr-1">{{ prefix }}</span>
     </slot>
     {{ formatted }}
     <slot name="append">
-      <span v-if="unit === SpecialUnits.SQM"> m<sup>2</sup> </span>
-      <span v-else-if="unit === SpecialUnits.CBM"> m<sup>3</sup> </span>
-      <span v-else-if="unit === SpecialUnits.DEG"> ° </span>
-      <span v-else>
+      <span class="pl-1" v-if="unit === SpecialUnits.SQM"> m<sup>2</sup> </span>
+      <span class="pl-1" v-else-if="unit === SpecialUnits.CBM">
+        m<sup>3</sup>
+      </span>
+      <span class="pl-1" v-else-if="unit === SpecialUnits.DEG"> ° </span>
+      <span class="pl-1" v-else>
         {{ unit }}
       </span>
     </slot>
@@ -27,6 +35,9 @@
     align-items: center;
     height: calc(var(--v-vcs-item-height) - 8px);
   }
+  .vcs-disabled {
+    opacity: var(--v-disabled-opacity);
+  }
 </style>
 <script>
   import { computed } from 'vue';
@@ -70,6 +81,7 @@
 
   /**
    * @description Formatted number display, optionally with unit
+   * @vue-prop {boolean} [disabled=false] - disabled by adding transparency to the label.
    * @vue-prop {string|SpecialUnits} [unit=undefined]
    * @vue-prop {number} [fractionDigits=undefined]
    * @vue-prop {number} modelValue
@@ -83,6 +95,10 @@
       VTooltip,
     },
     props: {
+      disabled: {
+        type: Boolean,
+        default: false,
+      },
       unit: {
         type: [String || SpecialUnits],
         default: undefined,

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

@@ -16,6 +16,10 @@ export namespace SpecialUnits {
     let DEG: string;
 }
 declare const _default: import("vue").DefineComponent<{
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     unit: {
         type: StringConstructor[];
         default: undefined;
@@ -49,6 +53,10 @@ declare const _default: import("vue").DefineComponent<{
     formatted: import("vue").ComputedRef<string | number>;
     paddingProvided: import("vue").ComputedRef<boolean>;
 }, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     unit: {
         type: StringConstructor[];
         default: undefined;
@@ -74,6 +82,7 @@ declare const _default: import("vue").DefineComponent<{
         default: string;
     };
 }>>, {
+    disabled: boolean;
     modelValue: number;
     prefix: string | number;
     tooltip: string;