@vcmap/ui 5.0.2 → 5.1.0-rc.2

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

@@ -7,6 +7,9 @@
       'vcs-label-required': required,
       'px-1': dense,
       'px-2': !dense,
+      'vcs-label-disabled': disabled,
+      'theme--dark': $vuetify.theme.dark,
+      'theme--light': !$vuetify.theme.dark,
     }"
   >
     <slot />
@@ -16,6 +19,8 @@
 <style lang="scss" scoped>
   @import '../../styles/vcsGrid.scss';
   @import '../../styles/vcsFont';
+  @import '../../styles/shades.scss';
+
   .vcs-label {
     font-size: $vcs-font-size;
     line-height: $line-height-base;
@@ -27,6 +32,14 @@
     content: ' *';
     color: var(--v-error-base);
   }
+  .vcs-label-disabled {
+    &.theme--dark {
+      color: rgba(map-get($shades, 'white'), 0.5);
+    }
+    &.theme--light {
+      color: rgba(map-get($shades, 'black'), 0.3);
+    }
+  }
 </style>
 <script>
   /**
@@ -35,6 +48,7 @@
    * @vue-prop {string} htmlFor - an id reference the label is meant for
    * @vue-prop {boolean} [dense=true] - default line height is 32px (dense). If set false, height is 40px.
    * @vue-prop {boolean} [required=false] - Marks an input field as required by adding an asterisk after the label.
+   * @vue-prop {boolean} [disabled=false] - Marks an input field as disabled by adding transparency to the label.
    */
   export default {
     name: 'VcsLabel',
@@ -51,6 +65,10 @@
         type: Boolean,
         default: false,
       },
+      disabled: {
+        type: Boolean,
+        default: false,
+      },
     },
   };
 </script>

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

@@ -0,0 +1,41 @@
+declare const _default: import("vue").DefineComponent<{
+    htmlFor: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    dense: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    required: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}, {}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+    htmlFor: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    dense: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    required: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>>, {
+    disabled: boolean;
+    dense: boolean;
+    required: boolean;
+    htmlFor: string;
+}>;
+export default _default;

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

@@ -0,0 +1,32 @@
+declare const _default: import("vue").DefineComponent<{
+    tooltipPosition: {
+        type: StringConstructor;
+        default: string;
+    };
+    items: {
+        type: ArrayConstructor;
+        required: true;
+    };
+}, {
+    radioGroup: import("vue").Ref<any>;
+    errorMessage: import("vue").Ref<string>;
+    isDense: import("vue").ComputedRef<boolean>;
+}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+    tooltipPosition: {
+        type: StringConstructor;
+        default: string;
+    };
+    items: {
+        type: ArrayConstructor;
+        required: true;
+    };
+}>>, {
+    tooltipPosition: string;
+}>;
+export default _default;
+export type VcsRadioItem = {
+    label: string;
+    color?: string | undefined;
+    value: any;
+    disabled?: boolean | undefined;
+};

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

@@ -0,0 +1,35 @@
+declare const _default: import("vue").DefineComponent<{
+    items: {
+        type: ArrayConstructor;
+        required: true;
+    };
+    tooltipPosition: {
+        type: StringConstructor;
+        default: string;
+    };
+    itemValue: {
+        type: StringConstructor;
+        default: string;
+    };
+}, {
+    isDense: import("vue").ComputedRef<boolean>;
+    radioGroup: import("vue").Ref<any>;
+    errorMessage: import("vue").Ref<string>;
+}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+    items: {
+        type: ArrayConstructor;
+        required: true;
+    };
+    tooltipPosition: {
+        type: StringConstructor;
+        default: string;
+    };
+    itemValue: {
+        type: StringConstructor;
+        default: string;
+    };
+}>>, {
+    tooltipPosition: string;
+    itemValue: string;
+}>;
+export default _default;

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

@@ -0,0 +1,31 @@
+declare const _default: import("vue").DefineComponent<{
+    tooltipPosition: {
+        type: StringConstructor;
+        default: string;
+    };
+    itemText: {
+        type: FunctionConstructor;
+        default: undefined;
+    };
+}, {
+    hover: import("vue").Ref<boolean>;
+    focus: import("vue").Ref<boolean>;
+    errorMessage: import("vue").Ref<string>;
+    isDense: import("vue").ComputedRef<boolean>;
+    isOutlined: import("vue").ComputedRef<boolean>;
+    getText: (item: any) => any;
+    selectField: import("vue").Ref<any>;
+}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+    tooltipPosition: {
+        type: StringConstructor;
+        default: string;
+    };
+    itemText: {
+        type: FunctionConstructor;
+        default: undefined;
+    };
+}>>, {
+    tooltipPosition: string;
+    itemText: Function;
+}>;
+export default _default;

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

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, any, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
+export default _default;

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

@@ -0,0 +1,22 @@
+declare const _default: import("vue").DefineComponent<{
+    tooltipPosition: {
+        type: StringConstructor;
+        default: string;
+    };
+}, {
+    hover: import("vue").Ref<boolean>;
+    focus: import("vue").Ref<boolean>;
+    textAreaRef: import("vue").Ref<any>;
+    errorMessage: import("vue").Ref<string>;
+    isClearable: import("vue").ComputedRef<string | boolean>;
+    isDense: import("vue").ComputedRef<boolean>;
+    isOutlined: import("vue").ComputedRef<boolean | "">;
+}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+    tooltipPosition: {
+        type: StringConstructor;
+        default: string;
+    };
+}>>, {
+    tooltipPosition: string;
+}>;
+export default _default;

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

@@ -31,6 +31,7 @@
             'remove-outline': !isOutlined,
             'outline--current': focus,
             'outline--error': !!errorMessage,
+            'input--unit': !!unit,
             'input--dense': isDense,
             'input--not-dense': !isDense,
             'file-border-bottom':
@@ -39,7 +40,11 @@
               !hover &&
               !errorMessage,
           }"
-        />
+        >
+          <template #append>
+            <slot name="append">{{ unit }}</slot>
+          </template>
+        </component>
       </template>
     </VcsTooltip>
   </div>
@@ -52,6 +57,10 @@
         color: var(--v-primary-base);
         font-style: italic;
         opacity: 1;
+        padding: 0 3px 0 0;
+      }
+      input::-moz-placeholder {
+        font-style: initial;
       }
     }
   }
@@ -82,6 +91,40 @@
       }
     }
   }
+  div[type='number'] {
+    ::v-deep {
+      .v-text-field__slot input {
+        text-align: right;
+      }
+    }
+  }
+  .input--unit {
+    ::v-deep {
+      .v-text-field__slot input {
+        text-align: right;
+        padding-right: 3px;
+      }
+      .v-input__append-inner {
+        margin-top: 6px !important;
+        &:last-child {
+          border-bottom: 1px solid var(--v-base-base);
+          height: 24px;
+          margin-top: 0 !important;
+          align-items: center;
+        }
+      }
+    }
+  }
+  .input--unit.input--not-dense {
+    ::v-deep {
+      .v-input__append-inner {
+        &:last-child {
+          height: 32px;
+          padding-top: 2px;
+        }
+      }
+    }
+  }
   .input--dense {
     ::v-deep {
       .v-text-field__slot input {
@@ -160,6 +203,7 @@
    * When clicking esc key, previous input is restored.
    * @vue-prop {('bottom' | 'left' | 'top' | 'right')}  [tooltipPosition='right'] - Position of the error tooltip.
    * @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}                                showSpinButtons - If true, spin buttons are displayed in number input fields. Overrides Vuetify hide-spin-buttons.
    * @vue-prop {boolean}                                noPadding - Padding is required for usage within rows. For standalone usage this prop removes class py-1.
    * @vue-computed {boolean}                            isClearable - Whether textfield is isClearable. Makes sure icon is only shown on focus, hover or error.
@@ -184,6 +228,10 @@
         type: String,
         default: '',
       },
+      decimals: {
+        type: Number,
+        default: undefined,
+      },
       showSpinButtons: {
         type: Boolean,
         default: false,
@@ -230,18 +278,17 @@
           if (
             attrs.type === 'number' &&
             Number.isFinite(attrs.value) &&
-            props.unit &&
-            !focus.value &&
-            !hover.value
+            props.decimals >= 0
           ) {
-            return `${attrs.value} ${props.unit}`;
-          } else {
-            return attrs.value ?? '';
+            return parseFloat(attrs.value.toFixed(props.decimals));
           }
+          return attrs.value ?? '';
         },
-        set() {
-          // emit is not needed, the vuetify component already emits an @input event. (forwarded listeners)
-          // emit('input', event);
+        set(value) {
+          if (attrs.type === 'file') {
+            emit('input', value);
+          }
+          // emit is not needed for other types, the vuetify component already emits an @input event. (forwarded listeners)
         },
       });
       const type = computed(() => {

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

@@ -0,0 +1,65 @@
+declare const _default: import("vue").DefineComponent<{
+    tooltipPosition: {
+        type: StringConstructor;
+        default: string;
+    };
+    unit: {
+        type: StringConstructor;
+        default: string;
+    };
+    decimals: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    showSpinButtons: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    noPadding: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}, {
+    hover: import("vue").Ref<boolean>;
+    focus: import("vue").Ref<boolean>;
+    inputComponent: import("vue").ComputedRef<"VFileInput" | "VTextField">;
+    isClearable: import("vue").ComputedRef<boolean>;
+    isDense: import("vue").ComputedRef<boolean>;
+    isOutlined: import("vue").ComputedRef<boolean>;
+    visibleValue: import("vue").WritableComputedRef<{}>;
+    type: import("vue").ComputedRef<{}>;
+    rules: import("vue").ComputedRef<unknown>;
+    onEscape: (event: any) => void;
+    textFieldRef: import("vue").Ref<any>;
+    errorMessage: import("vue").Ref<string>;
+    onBlur: (event: any) => void;
+    onFocus: (event: any) => void;
+}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+    tooltipPosition: {
+        type: StringConstructor;
+        default: string;
+    };
+    unit: {
+        type: StringConstructor;
+        default: string;
+    };
+    decimals: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    showSpinButtons: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    noPadding: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>>, {
+    tooltipPosition: string;
+    unit: string;
+    decimals: number;
+    showSpinButtons: boolean;
+    noPadding: boolean;
+}>;
+export default _default;

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

@@ -0,0 +1,14 @@
+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;
+}>;
+export default _default;

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

@@ -0,0 +1,89 @@
+declare const _default: import("vue").DefineComponent<{
+    step: {
+        type: (StringConstructor | NumberConstructor)[];
+        required: true;
+    };
+    editable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    complete: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    rules: {
+        type: ArrayConstructor;
+        default: () => never[];
+    };
+    heading: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    headerActions: {
+        type: ArrayConstructor;
+        default: () => never[];
+    };
+    actionButtonListOverflowCount: {
+        type: NumberConstructor;
+        required: false;
+        default: undefined;
+    };
+    helpText: {
+        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<{
+    step: {
+        type: (StringConstructor | NumberConstructor)[];
+        required: true;
+    };
+    editable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    complete: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    rules: {
+        type: ArrayConstructor;
+        default: () => never[];
+    };
+    heading: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    headerActions: {
+        type: ArrayConstructor;
+        default: () => never[];
+    };
+    actionButtonListOverflowCount: {
+        type: NumberConstructor;
+        required: false;
+        default: undefined;
+    };
+    helpText: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    value: {
+        type: (StringConstructor | NumberConstructor)[];
+        required: true;
+    };
+}>>, {
+    headerActions: unknown[];
+    rules: unknown[];
+    complete: boolean;
+    heading: string;
+    actionButtonListOverflowCount: number;
+    helpText: string;
+    editable: boolean;
+}>;
+export default _default;

package/src/components/form-inputs-controls/composables.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Syncs the error and validation state with the underlying vuetify component.
+ * @param {import("vue").Ref<unknown>} elementRef The template ref to the base vuetify component.
+ * @returns {import("vue").Ref<string>} Error message to display. Is empty string if either there are no error messages or if the validation errors are not displayed because
+ * no interaction with the component or validation was reset by form. Validation errors have precedence over custom error messages.
+ */
+export function useErrorSync(elementRef: import("vue").Ref<unknown>): import("vue").Ref<string>;

package/src/components/form-inputs-controls/composables.js

@@ -2,7 +2,7 @@ import { computed } from 'vue';
 
 /**
  * Syncs the error and validation state with the underlying vuetify component.
- * @param {import("vue").Ref<any>} elementRef The template ref to the base vuetify component.
+ * @param {import("vue").Ref<unknown>} elementRef The template ref to the base vuetify component.
  * @returns {import("vue").Ref<string>} Error message to display. Is empty string if either there are no error messages or if the validation errors are not displayed because
  * no interaction with the component or validation was reset by form. Validation errors have precedence over custom error messages.
  */

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

@@ -1,8 +1,9 @@
 <template>
   <span
-    class="vcs-formatted-number pr-2 pl-1"
-    :class="{ 'vcs-formatted-number-dense': dense }"
+    class="vcs-formatted-number"
+    :class="{ 'vcs-formatted-number-dense': dense, 'px-2': !noPadding }"
   >
+    <span v-if="prefix" class="pr-1">{{ prefix }}</span>
     {{ formatted }}
     <span v-if="unit === SpecialUnits.SQM"> m<sup>2</sup> </span>
     <span v-else-if="unit === SpecialUnits.CBM"> m<sup>3</sup> </span>
@@ -67,7 +68,9 @@
    * @vue-prop {string|SpecialUnits} [unit=undefined]
    * @vue-prop {number} [fractionDigits=undefined]
    * @vue-prop {number} value
+   * @vue-prop {string|number} prefix
    * @vue-prop {boolean} [dense=true] - default line height is 32px (dense). If set false, height is 40px.
+   * @vue-prop {boolean} noPadding    - Padding is required for usage within rows. For standalone usage this prop removes class.
    * @vue-computed {string} formatted - value formatted to locale string
    */
   export default {
@@ -85,10 +88,18 @@
         type: Number,
         default: 0,
       },
+      prefix: {
+        type: [String, Number],
+        default: undefined,
+      },
       dense: {
         type: Boolean,
         default: true,
       },
+      noPadding: {
+        type: Boolean,
+        default: false,
+      },
     },
     setup(props) {
       const formatted = computed(() =>

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

@@ -0,0 +1,89 @@
+/**
+ * @description Converts a number (e.g. 12345678,9) to a locale-aware and
+ * dot-seperated string with given amount of fractional digits (e.g. 12.345.678,90)
+ * @param {string|number} value
+ * @param {number} fractionDigits
+ * @returns {string|number}
+ */
+export function numberToLocaleString(value: string | number, fractionDigits: number): string | number;
+/**
+ * *
+ */
+export type SpecialUnits = string;
+export namespace SpecialUnits {
+    let SQM: string;
+    let CBM: string;
+    let DEG: string;
+}
+declare const _default: import("vue").DefineComponent<{
+    unit: {
+        type: StringConstructor[];
+        default: undefined;
+    };
+    fractionDigits: {
+        type: NumberConstructor;
+        default: number;
+    };
+    value: {
+        type: NumberConstructor;
+        default: number;
+    };
+    prefix: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: undefined;
+    };
+    dense: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    noPadding: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}, {
+    SpecialUnits: {
+        SQM: string;
+        CBM: string;
+        DEG: string;
+    };
+    formatted: import("vue").ComputedRef<string | number>;
+}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+    unit: {
+        type: StringConstructor[];
+        default: undefined;
+    };
+    fractionDigits: {
+        type: NumberConstructor;
+        default: number;
+    };
+    value: {
+        type: NumberConstructor;
+        default: number;
+    };
+    prefix: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: undefined;
+    };
+    dense: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    noPadding: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>>, {
+    value: number;
+    unit: string;
+    noPadding: boolean;
+    dense: boolean;
+    fractionDigits: number;
+    prefix: string | number;
+}>;
+export default _default;
+export namespace VcsFormattedNumber {
+    /**
+     * Enumeration of units displayed with special symbol
+     */
+    type SpecialUnits = Object;
+}

package/src/components/icons/+all.d.ts

@@ -0,0 +1,9 @@
+export const IconIds: string[];
+export const IconNames: string[];
+export default Icons;
+export type Icon = {
+    Map: {
+        [x: string]: Object;
+    };
+};
+declare const Icons: {};