@itfin/components 1.2.43 → 1.2.45

package/src/components/pdf-viewer/styles/index.scss

@@ -0,0 +1,4 @@
+@import "text_layer_builder.scss";
+@import "annotation_layer_builder.scss";
+@import "pdf_viewer.scss";
+@import "viewer.scss";

package/src/components/text-field/Textarea.vue

@@ -1,28 +1,35 @@
 <template>
 
-  <div class="itf-textarea input-group" :class="{ 'with-addon addon-start': prependIcon, 'itf-textarea__autogrow': autogrow }">
-    <div class="addon" v-if="prependIcon">
-      <slot name="addon">
-        <itf-icon :name="prependIcon"/>
-      </slot>
+  <div class="itf-textarea" :class="{ 'with-addon addon-start': prependIcon, 'itf-textarea__autogrow': autogrow, 'p-0': !hasContent }">
+    <div class="p-2 itf-textarea__content" v-if="hasContent">
+      <slot></slot>
+    </div>
+
+    <div class="position-relative input-group">
+      <div class="addon" v-if="prependIcon">
+        <slot name="addon">
+          <itf-icon :name="prependIcon"/>
+        </slot>
+      </div>
+
+      <div v-if="autogrow" class="itf-textarea__autogrow-text form-control" :class="{'pt-5': hasContent}">{{value}}&nbsp;</div>
+      <textarea
+        ref="input"
+        :rows="rows"
+        :readonly="readonly"
+        :disabled="disabled"
+        :placeholder="placeholder"
+        :class="{ 'is-invalid': isInvalid(), 'is-valid': isSuccess(), 'pt-5': hasContent }"
+        class="itf-textarea__input form-control"
+        :value="value"
+        @input="onInput($event.target.value)"
+        @keydown="$emit('keydown', $event)"
+        @keyup="$emit('keyup', $event)"
+        @keypress="$emit('keypress', $event)"
+        @blur="$emit('blur', $event)"
+        @focus="$emit('focus', $event)"
+      />
     </div>
-    <div v-if="autogrow" class="itf-textarea__autogrow-text form-control">{{value}}&nbsp;</div>
-    <textarea
-      ref="input"
-      :rows="rows"
-      :readonly="readonly"
-      :disabled="disabled"
-      :placeholder="placeholder"
-      :class="{ 'is-invalid': isInvalid(), 'is-valid': isSuccess() }"
-      class="itf-textarea__input form-control"
-      :value="value"
-      @input="onInput($event.target.value)"
-      @keydown="$emit('keydown', $event)"
-      @keyup="$emit('keyup', $event)"
-      @keypress="$emit('keypress', $event)"
-      @blur="$emit('blur', $event)"
-      @focus="$emit('focus', $event)"
-    />
   </div>
 
 </template>
@@ -52,6 +59,10 @@ class itfTextarea extends Vue {
 
   onInput = null;
 
+  get hasContent() {
+    return !!this.$slots.default;
+  }
+
   created() {
     this.onInput = debounce((val) => this.$emit('input', val), Number(this.delayInput));
   }