@vcmap/ui 5.3.3 → 6.0.0-rc.2

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

@@ -1,187 +1,184 @@
 <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="onFocus"
-          @blur="onBlur"
-          @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>
+  <v-textarea
+    ref="textAreaRef"
+    variant="outlined"
+    clear-icon="$close"
+    :rows="$attrs.rows"
+    class="primary--placeholder"
+    :class="{
+      'py-1': !paddingProvided,
+    }"
+    v-bind="{ ...$attrs }"
+  >
+    <template v-for="slot of Object.keys($slots)" #[slot]="scope">
+      <slot :name="slot" v-bind="scope" />
+    </template>
+    <template #message="{ message }">
+      <v-tooltip
+        ref="errorTooltipRef"
+        :activator="textAreaRef"
+        v-if="message"
+        :text="$st(message)"
+        content-class="bg-error"
+        :location="tooltipPosition"
+      />
+    </template>
+    <template #append-inner>
+      <slot name="append-inner"></slot>
+      <v-tooltip
+        v-if="tooltip && !errorTooltipRef"
+        :activator="textAreaRef"
+        :location="tooltipPosition"
+        :text="$st(tooltip)"
+      ></v-tooltip>
+    </template>
+  </v-textarea>
 </template>
 
 <style lang="scss" scoped>
-  .primary--placeholder {
-    ::v-deep {
-      textarea::placeholder {
-        color: var(--v-primary-base);
-        font-style: italic;
-        opacity: 1;
-      }
-    }
+  .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;
   }
-  .remove-outline {
-    ::v-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;
     }
   }
-  .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;
-      }
-    }
+
+  :deep(.v-field__field) {
+    padding-bottom: 2px;
+    padding-top: 2px;
   }
-  .outline--error {
-    ::v-deep {
-      .v-input__slot fieldset,
-      .v-text-field__slot textarea {
-        border-color: var(--v-error-base);
-      }
-    }
+
+  :deep(.v-field__input) {
+    padding: 0;
+    // remove white fade out on top
+    mask-image: none !important;
+    -webkit-mask-image: none !important;
   }
-  .input--dense {
-    ::v-deep {
-      .v-input__slot {
-        padding: 0 4px !important;
-      }
-      fieldset {
-        padding-left: 2px;
-      }
-    }
+
+  // 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));
+  }
+
+  :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;
   }
-  .input--not-dense {
-    ::v-deep {
-      .v-input__slot {
-        padding: 0 8px !important;
-      }
-      fieldset {
-        padding-left: 6px;
-      }
+
+  // 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 0 0;
+      border-radius: 0;
+    }
+    .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;
     }
+    .v-field__outline * label {
+      color: rgb(var(--v-theme-primary));
+      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
+  .v-input--horizontal :deep(.v-input__prepend) {
+    margin-inline-end: 4px;
   }
-  .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;
-      }
+
+  .primary--placeholder {
+    :deep(textarea::placeholder) {
+      color: rgb(var(--v-theme-primary));
+      font-style: italic;
+      opacity: 1;
+      padding: 0 3px 0 0;
+    }
+    :deep(textarea::-moz-placeholder) {
+      font-style: initial;
     }
   }
+
+  // remove details
+  :deep(.v-input__details) {
+    display: none;
+  }
+
+  // Progress Bar
+  :deep(.v-progress-linear) {
+    color: rgb(var(--v-theme-primary));
+  }
+  :deep(.v-field__loader) {
+    top: calc(100% - 2px);
+  }
 </style>
 
 <script>
-  import { computed, ref } from 'vue';
-  import { VTextarea } from 'vuetify/lib';
-  import VcsTooltip from '../notification/VcsTooltip.vue';
-  import { useErrorSync } from './composables.js';
+  import { ref } from 'vue';
+  import { VTextarea, VTooltip } from 'vuetify/components';
+  import { usePadding } 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
+   * - show tooltips, if no error messages are available
    * @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.
+   * @vue-prop {string|undefined}                       tooltip - Optional tooltip which will be shown on hover when no error message is shown
    */
   export default {
     name: 'VcsTextArea',
     components: {
-      VcsTooltip,
+      VTooltip,
       VTextarea,
     },
     props: {
+      tooltip: {
+        type: String,
+        default: undefined,
+      },
       tooltipPosition: {
         type: String,
         default: 'right',
       },
     },
-    setup(props, { attrs, emit }) {
-      const hover = ref(false);
-      const focus = ref(false);
+    setup(_p, { attrs }) {
       const textAreaRef = ref();
+      const errorTooltipRef = ref();
+
+      const paddingProvided = usePadding(attrs);
 
-      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,
-        onFocus(e) {
-          focus.value = true;
-          emit('focus', e);
-        },
-        onBlur(e) {
-          focus.value = false;
-          emit('blur', e);
-        },
+        errorTooltipRef,
+        paddingProvided,
       };
     },
   };

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

@@ -1,24 +1,27 @@
 declare const _default: import("vue").DefineComponent<{
+    tooltip: {
+        type: StringConstructor;
+        default: undefined;
+    };
     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 | "">;
-    onFocus(e: any): void;
-    onBlur(e: any): void;
-}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+    errorTooltipRef: import("vue").Ref<any>;
+    paddingProvided: import("vue").ComputedRef<boolean>;
+}, 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;