Nebulous Puffy Marshmallows

    vue-dynamic-height

    1.0.6 • Public • Published

    vue-dynamic-height

    pull-request-analyser npm-publisher

    A light weight Vue plugin to let the height of your textarea component dynamic.

    Demonstration 👀

    Vue Dynamic Height Sample

    How to 🤔

    npm install --save vue-dynamic-height
    

    Use locally 📍

    <template>
      <textarea v-dynamic-height></textarea>
    </template>
     
    <script>
    import dynamicHeight from 'vue-dynamic-height';
     
    export default {
      name: MySampleTextareaComponent,
      directives: {
        dynamicHeight,
      },
    };
    </script>

    Use globally 🌐

    import Vue from 'vue';
    import { installVueDynamicHeight } from 'vue-dynamic-height';
     
    Vue.use(installVueDynamicHeight);

    API 🔌

    Config options

    Prop Required Default Type Description
    disabled No false Boolean It disables the directive behavior.
    minHeight No '0px' String Defines style a minimum height for textarea input

    Usage

    Simple one

    <template>
      <textarea v-dynamic-height></textarea>
    </template>

    Custom setup

    <template>
      <textarea v-dynamic-height="{ disabled: false, minHeight: '100px' }"></textarea>
    </template>

    Turn height calc reactive

    It might not not be the most beautiful way to do it, but it seems to be a good and efficient way.

    The point is just trigger an native input event every time the value prop updates.

    <template>
      <textarea
        ref="textarea"
        :value="value"
        @input="onInput"
        v-dynamic-height></textarea>
    </template>
     
    <script>
    import DynamicHeight from 'vue-dynamic-height';
     
    export default {
      name: 'MyTextareaComponent',
      directives: {
        DynamicHeight,
      },
      props: {
        value: String,
      },
      watch: {
        value() {
          this.triggerEventToDynamicHeight();
        },
      },
      methods: {
        triggerEventToDynamicHeight() {
          this.$nextTick(() => {
            this.$refs.textarea.dispatchEvent(new Event('input'));
          });
        },
        onInput(event) {
          this.$emit('input', event.target.value);
        },
      },
    };
    </script>

    Contribution 🚀

    Want to contribute? Feel free to open up an issue and/or a pull request here. 🙂

    At first, install all dependencies.

    npm install
    

    To run all tests, please run it.

    npm test
    

    To build you result, just do it.

    npm run build
    

    Note ℹ️

    To play with your result, you might run the command npm pack to generate a compressed .tgz file. So far, you can install it within your own project and test it as long as you wish.

    For example, browse your terminal to your own project repository path and run a command like this below:

    npm install --save ../vue-dynamic-height/vue-dynamic-height-1.0.1.tgz
    

    License 📜

    MIT

    Install

    npm i vue-dynamic-height

    DownloadsWeekly Downloads

    14

    Version

    1.0.6

    License

    MIT

    Unpacked Size

    26.6 kB

    Total Files

    16

    Last publish

    Collaborators

    • guibrancopc