feat(props): Added min-height and max-height attributes

Added min- and maxHeight attributes
iliyaZelenko · Nov 8, 2019 · 525347c · 525347c
2 parents e59a91c + 478ca62
commit 525347c
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 2 deletions.
diff --git a/src/components/TiptapVuetify.vue b/src/components/TiptapVuetify.vue
@@ -36,7 +36,10 @@
 
       <slot name="toolbar-after" />
 
-      <div class="tiptap-vuetify-editor__content">
+      <div
+        class="tiptap-vuetify-editor__content"
+        :style="contentDynamicStyles"
+      >
         <editor-content
           :editor="editor"
         />
@@ -112,6 +115,12 @@ export default class TiptapVuetify extends Vue {
   })
   readonly [PROPS.TYPE]: EDITOR_TYPES_ENUM
 
+  @Prop({ type: Number })
+  readonly [PROPS.MIN_HEIGHT]: number
+
+  @Prop({ type: Number })
+  readonly [PROPS.MAX_HEIGHT]: number
+
   PROPS = PROPS
   EDITOR_TYPES_ENUM = EDITOR_TYPES_ENUM
   editor: Editor | null = null
@@ -132,6 +141,13 @@ export default class TiptapVuetify extends Vue {
     return this[PROPS.EXTENSIONS].filter(i => i.renderIn)
   }
 
+  get contentDynamicStyles () {
+    let dynamicStylesToReturn = {}
+    if (this[PROPS.MIN_HEIGHT]) Object.assign(dynamicStylesToReturn, { minHeight: `${this[PROPS.MIN_HEIGHT]}px` })
+    if (this[PROPS.MAX_HEIGHT]) Object.assign(dynamicStylesToReturn, { maxHeight: `${this[PROPS.MAX_HEIGHT]}px` })
+    return dynamicStylesToReturn
+  }
+
   @Watch('value')
   onValueChange (val) {
     if (this.emitAfterOnUpdate) {

diff --git a/src/const.ts b/src/const.ts
@@ -16,7 +16,9 @@ export const PROPS = {
   PLACEHOLDER: 'placeholder' as const,
   CARD_PROPS: 'cardProps' as const,
   OUTPUT_FORMAT: 'outputFormat' as const,
-  TYPE: 'type' as const
+  TYPE: 'type' as const,
+  MIN_HEIGHT: 'minHeight' as const,
+  MAX_HEIGHT: 'maxHeight' as const
 }
 
 export enum EDITOR_TYPES_ENUM {