@vcmap/ui 5.0.0-rc.8 → 5.0.0

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

@@ -0,0 +1,180 @@
+<template>
+  <div>
+    <VcsTooltip
+      :tooltip-position="tooltipPosition"
+      :tooltip="errorMessage"
+      color="error"
+      :max-width="200"
+    >
+      <template #activator="{ on, attrs }">
+        <v-textarea
+          ref="textAreaRef"
+          hide-details
+          :dense="isDense"
+          :clearable="isClearable"
+          @focus="focus = true"
+          @blur="focus = false"
+          @mouseover="hover = true"
+          @mouseleave="hover = false"
+          outlined
+          v-bind="{ ...$attrs, ...attrs }"
+          v-on="{ ...$listeners, ...on }"
+          :rows="$attrs.rows || (isDense ? 3 : 5)"
+          class="ma-0 py-1 primary--placeholder"
+          :class="{
+            'remove-outline': !isOutlined,
+            'outline--current': focus,
+            'outline--error': errorMessage,
+            'input--dense': isDense,
+            'input--not-dense': !isDense,
+          }"
+        />
+      </template>
+    </VcsTooltip>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .primary--placeholder {
+    ::v-deep {
+      textarea::placeholder {
+        color: var(--v-primary-base);
+        font-style: italic;
+        opacity: 1;
+      }
+    }
+  }
+  .remove-outline {
+    ::v-deep {
+      fieldset {
+        border-width: 0;
+        border-radius: 0;
+      }
+    }
+  }
+  .outline--current {
+    ::v-deep {
+      .v-input__slot fieldset {
+        border-color: currentColor;
+        transition: border-color 0.5s ease;
+      }
+      .v-text-field__slot textarea {
+        border-color: transparent;
+      }
+    }
+  }
+  .outline--error {
+    ::v-deep {
+      .v-input__slot fieldset,
+      .v-text-field__slot textarea {
+        border-color: var(--v-error-base);
+      }
+    }
+  }
+  .input--dense {
+    ::v-deep {
+      .v-input__slot {
+        padding: 0 4px !important;
+      }
+      fieldset {
+        padding-left: 2px;
+      }
+    }
+  }
+  .input--not-dense {
+    ::v-deep {
+      .v-input__slot {
+        padding: 0 8px !important;
+      }
+      fieldset {
+        padding-left: 6px;
+      }
+    }
+  }
+  .v-input {
+    ::v-deep {
+      textarea {
+        border-bottom: 1px solid var(--v-base-base);
+        border-radius: 0;
+      }
+      textarea::selection {
+        background-color: var(--v-primary-base);
+      }
+      fieldset {
+        border-radius: 2px;
+        border-color: var(--v-base-base);
+      }
+      .v-text-field__slot {
+        margin-right: 0 !important;
+      }
+    }
+  }
+</style>
+
+<script>
+  import { computed, ref } from 'vue';
+  import { VTextarea } from 'vuetify/lib';
+  import VcsTooltip from '../notification/VcsTooltip.vue';
+  import { useErrorSync } from './composables.js';
+
+  /**
+   * @description extends API of {@link https://vuetifyjs.com/en/api/v-textarea/|vuetify v-textarea}.
+   * Provides two default height options depending on "dense" property:
+   * - if dense is set true (default), height is 72 px (3 rows each 24 px)
+   * - if dense is set false, height is 120 px (5 rows each 24 px)
+   * Default for number of rows can be overwritten using the vuetify API.
+   * Provides VcsTooltip to
+   * - show error messages on focus
+   * - show tooltips, if supplied, when hovered over append-icon
+   * @vue-prop {('bottom' | 'left' | 'top' | 'right')}  [tooltipPosition='right'] - Position of the error tooltip.
+   * @vue-computed {boolean}                            isClearable - Whether textarea is isClearable. Makes sure icon is only shown on focus, hover or error.
+   * @vue-computed {boolean}                            isDense - Whether size of textarea is dense.
+   * @vue-computed {boolean}                            isError - Whether errorBucket is not empty and textarea was focused at least once.
+   * @vue-computed {boolean}                            isOutlined - Textarea is outlined on either hover, focus or error, if not disabled.
+   * @vue-computed {Array<string>}                      joinedErrorBucket - errorBucket + errorMessages of child v-text-field.
+   */
+  export default {
+    name: 'VcsTextArea',
+    components: {
+      VcsTooltip,
+      VTextarea,
+    },
+    props: {
+      tooltipPosition: {
+        type: String,
+        default: 'right',
+      },
+    },
+    setup(props, { attrs }) {
+      const hover = ref(false);
+      const focus = ref(false);
+      const textAreaRef = ref();
+
+      const errorMessage = useErrorSync(textAreaRef);
+
+      const isClearable = computed(() => {
+        return (
+          attrs.clearable !== undefined &&
+          attrs.clearable !== false &&
+          (hover.value || focus.value || errorMessage.value)
+        );
+      });
+      const isDense = computed(() => attrs.dense !== false);
+      const isOutlined = computed(() => {
+        return (
+          (hover.value || focus.value || errorMessage.value) &&
+          !(attrs.disabled || attrs.disabled === '')
+        );
+      });
+      return {
+        hover,
+        focus,
+        textAreaRef,
+        errorMessage,
+        isClearable,
+        isDense,
+        isOutlined,
+      };
+    },
+  };
+</script>

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

@@ -0,0 +1,298 @@
+<template>
+  <div @mouseover="hover = true" @mouseleave="hover = false">
+    <VcsTooltip
+      :tooltip-position="tooltipPosition"
+      :tooltip="errorMessage"
+      color="error"
+      :max-width="200"
+    >
+      <template #activator="{ attrs, on }">
+        <component
+          :is="inputComponent"
+          ref="textFieldRef"
+          hide-details
+          :hide-spin-buttons="!showSpinButtons"
+          :dense="isDense"
+          :clearable="isClearable"
+          @focus="onFocus"
+          @blur="onBlur"
+          @keydown.esc="onEscape"
+          @keydown="$emit('keydown', $event)"
+          :type="type"
+          outlined
+          v-model="visibleValue"
+          v-bind="{ ...$attrs, ...attrs }"
+          v-on="{ ...$listeners, ...on }"
+          :height="isDense ? 24 : 32"
+          :rules="rules"
+          class="primary--placeholder align-center"
+          :class="{
+            'py-1': !noPadding,
+            'remove-outline': !isOutlined,
+            'outline--current': focus,
+            'outline--error': !!errorMessage,
+            'input--dense': isDense,
+            'input--not-dense': !isDense,
+            'file-border-bottom':
+              inputComponent === 'VFileInput' &&
+              !focus &&
+              !hover &&
+              !errorMessage,
+          }"
+        />
+      </template>
+    </VcsTooltip>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .primary--placeholder {
+    ::v-deep {
+      input::placeholder {
+        color: var(--v-primary-base);
+        font-style: italic;
+        opacity: 1;
+      }
+    }
+  }
+  .remove-outline {
+    ::v-deep {
+      fieldset {
+        border-width: 0;
+        border-radius: 0;
+      }
+    }
+  }
+  .outline--current {
+    ::v-deep {
+      .v-input__slot fieldset {
+        border-color: currentColor;
+        transition: border-color 0.5s ease;
+      }
+      .v-text-field__slot input {
+        border-color: transparent;
+      }
+    }
+  }
+  .outline--error {
+    ::v-deep {
+      .v-input__slot fieldset,
+      .v-text-field__slot input {
+        border-color: var(--v-error-base);
+      }
+    }
+  }
+  .input--dense {
+    ::v-deep {
+      .v-text-field__slot input {
+        height: 24px;
+      }
+      .v-input__slot {
+        padding: 0 4px !important;
+      }
+      fieldset {
+        padding-left: 2px;
+      }
+    }
+  }
+  .input--not-dense {
+    ::v-deep {
+      .v-input__slot {
+        padding: 0 8px !important;
+      }
+      fieldset {
+        padding-left: 6px;
+      }
+    }
+  }
+  .file-border-bottom {
+    ::v-deep {
+      .v-file-input__text {
+        border-bottom: 1px solid var(--v-base-base);
+        border-radius: 0;
+      }
+    }
+  }
+  .v-input {
+    ::v-deep {
+      input {
+        height: 32px;
+        border-bottom: 1px solid var(--v-base-base);
+        border-radius: 0;
+      }
+      input::selection {
+        background-color: var(--v-primary-base);
+      }
+      .v-text-field__prefix {
+        padding-right: 8px;
+      }
+      .v-text-field__suffix {
+        padding-left: 4px;
+      }
+      .v-input__prepend-outer {
+        margin-right: 4px;
+      }
+      .v-icon {
+        font-size: 16px;
+      }
+      .v-text-field--rounded fieldset {
+        border-radius: 2px;
+        border-color: var(--v-base-base);
+      }
+    }
+  }
+</style>
+
+<script>
+  import { computed, onMounted, ref } from 'vue';
+  import { VTextField, VFileInput } from 'vuetify/lib';
+  import VcsTooltip from '../notification/VcsTooltip.vue';
+  import { useErrorSync } from './composables.js';
+
+  /**
+   * @description extends API of {@link https://vuetifyjs.com/en/api/v-text-field v-text-field}.
+   * Provides two height options depending on "dense" property:
+   * - if dense is set true (default), height is 24 px
+   * - if dense is set false, height is 32 px
+   * Provides VcsTooltip to
+   * - show error messages on focus
+   * - show tooltips, if supplied, when hovered over append-icon
+   * 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 {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.
+   * @vue-computed {boolean}                            isDense - Whether size of textfield is dense.
+   * @vue-computed {boolean}                            isOutlined - Textfield is outlined on either hover, focus or error, if not disabled.
+   * @vue-computed {string | number}                    visibleValue - Returns the number input as string with unit, in case unit is provided.
+   * @vue-computed {string}                             type - The input field type. If number input field is blurred and unit is provided, type changes to text field, so unit can be displayed in input field.
+   */
+  export default {
+    name: 'VcsTextField',
+    components: {
+      VcsTooltip,
+      VTextField,
+      VFileInput,
+    },
+    props: {
+      tooltipPosition: {
+        type: String,
+        default: 'right',
+      },
+      unit: {
+        type: String,
+        default: '',
+      },
+      showSpinButtons: {
+        type: Boolean,
+        default: false,
+      },
+      noPadding: {
+        type: Boolean,
+        default: false,
+      },
+    },
+    setup(props, { attrs, emit }) {
+      const hover = ref(false);
+      const focus = ref(false);
+      const textFieldRef = ref();
+
+      onMounted(() => {
+        // fix for autofocus
+        focus.value = attrs.autofocus != null;
+      });
+
+      const errorMessage = useErrorSync(textFieldRef);
+
+      const inputComponent = computed(() => {
+        if (attrs.type === 'file') {
+          return 'VFileInput';
+        }
+        return 'VTextField';
+      });
+      const isClearable = computed(() => {
+        return (
+          attrs.clearable !== undefined &&
+          attrs.clearable !== false &&
+          (hover.value || focus.value || !!errorMessage.value)
+        );
+      });
+      const isDense = computed(() => attrs.dense !== false);
+      const isOutlined = computed(() => {
+        return (
+          (hover.value || focus.value || !!errorMessage.value) &&
+          !(attrs.disabled || attrs.disabled === '')
+        );
+      });
+      const visibleValue = computed({
+        get() {
+          if (
+            attrs.type === 'number' &&
+            Number.isFinite(attrs.value) &&
+            props.unit &&
+            !focus.value &&
+            !hover.value
+          ) {
+            return `${attrs.value} ${props.unit}`;
+          } else {
+            return attrs.value ?? '';
+          }
+        },
+        set() {
+          // emit is not needed, the vuetify component already emits an @input event. (forwarded listeners)
+          // emit('input', event);
+        },
+      });
+      const type = computed(() => {
+        if (attrs.type === 'number' && !focus.value) {
+          return 'text';
+        } else {
+          return attrs.type || 'text';
+        }
+      });
+
+      const rules = computed(() => {
+        if (attrs.type === 'number' && Array.isArray(attrs.rules)) {
+          return attrs.rules.map((rule) => {
+            return (value) => rule(parseFloat(value));
+          });
+        } else {
+          return attrs.rules;
+        }
+      });
+
+      function onEscape(event) {
+        textFieldRef.value.blur();
+        emit('input', textFieldRef.value.initialValue);
+        emit('keydown', event);
+      }
+
+      function onBlur(event) {
+        focus.value = false;
+        emit('blur', event);
+      }
+      function onFocus(event) {
+        focus.value = true;
+        emit('focus', event);
+      }
+
+      return {
+        hover,
+        focus,
+        inputComponent,
+        isClearable,
+        isDense,
+        isOutlined,
+        visibleValue,
+        type,
+        rules,
+        onEscape,
+        textFieldRef,
+        errorMessage,
+        onBlur,
+        onFocus,
+      };
+    },
+  };
+</script>

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

@@ -0,0 +1,137 @@
+<template>
+  <v-stepper
+    vertical
+    :value="value"
+    @change="(newValue) => $emit('input', newValue)"
+    class="rounded-0 pb-1"
+  >
+    <slot />
+  </v-stepper>
+</template>
+
+<script>
+  import { VStepper } from 'vuetify/lib';
+
+  /**
+   * @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.
+   * @vue-data {slot} [#default] - Slot to add VcsWizardSteps.
+   */
+  export default {
+    name: 'VcsWizard',
+    components: {
+      VStepper,
+    },
+    props: {
+      value: {
+        type: Number,
+        default: undefined,
+      },
+    },
+  };
+</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);
+        }
+      }
+    }
+    ::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;
+      }
+    }
+  }
+</style>