Nuns Practicing Misanthropy

    vue-debounced

    1.0.0 • Public • Published

    vue-debounced

    A simple vue component to debounce value changes

    Example

    Debounce value in place with a custom timeout

    <Debounced :value="reactiveValue" :timeout="100" @input="onDebouncedChange" />

    Pass deboucned value down as a scoped slot prop

    <Debounced :value="reactiveValue">
      <template v-slot="{ debounced }">
        Debounced value: {{ debounced }}
      </template>
    </Debounced>

    Store and debounce value from scoped slot

    <Debounced>
      <template v-slot="{ debounced, value, setValue }">
        <!-- 'value' is set immediate and is not not debounced -->
        <TextInput :value="value" @input="setValue" />
        Debounced value: {{ debounced }}
      </template>
    </Debounced>

    Usage

    Install via npm:

    npm install vue-promised --save

    Pick one of three ways to use it.

    1. Wrap in your component

    Recommended way

    <template>
      <Debounced :value="value" :timeout="timeout" @input="$emit('input', $event)">
        <template v-slot="{ debounced, value, setValue }">
          <slot :debounced="debounced" :value="value" :setValue="setValue" />
        </template>
      </Debounced>
    </template>
     
    <script>
      import { Debounced } from 'vue-debounced';
     
      export default {
        name: "MyDebounce",
        components: { Debounced },
        props: ['value', 'timeout']
      }
    </script> 

    2. Directly as a component

    Not recommended for medium and big projects

    <template>
      <div class="my-component">
        <Debounced @input="$emit('input', $event)">
          <template v-slot="{ value, setValue }">
            <TextInput :value="value" @input="setValue" />
          </template>
        </Debounced>
      </div>
    </template>
     
    <script>
      import { Debounced } from 'vue-debounced';
      import TextInput from '~/components/TextInput.vue';
     
      export default {
        name: 'MyComponent',
        components: { Debounced, TextInput },
      }
    </script> 

    3. Use as a global component

    Not recommended, only for prototyping

    // main.js
    import Vue from 'vue';
    import Debounced from 'vue-debounced';
     
    Vue.use(Debounced);
    <template>
      <div class="my-component">
        <Debounced @input="$emit('input', $event)">
          <template v-slot="{ value, setValue }">
            <TextInput :value="value" @input="setValue" />
          </template>
        </Debounced>
      </div>
    </template>
     
    <script>
      import TextInput from '~/components/TextInput.vue';
     
      export default {
        name: 'MyComponent',
        components: { TextInput },
      }
    </script> 

    API

    Component

    Properties

    value

    • type: any

    A reactive value that will be debounced

    <Debounced :value="reactiveValue" />

    timeout

    • type: Number
    • default: 250

    Time in milliseconds to debounce value

    <Debounced :value="reactiveValue" :timeout="100" @input="onDebouncedInput" />

    Events

    input

    Returns debounced value

    <Debounced :value="reactiveValue" @input="onReactiveInput" />
    <!-- @input will emit as soon as the setValue finishes debouncing -->
    <Debounced @input="onReactiveInput">
      <template v-slot="{ value, setValue }">
        <TextInput :value="value" @input="setValue" />
      </template>
    </Debounced>

    Scoped slot (default)

    Properties

    debounced

    Provides debounced value.

    <Debounced :value="outerValue">
      <template v-slot="{ debounced }">
        Debounced value: {{ debounced }}
      </template>
    </Debounced>
    <Debounced>
      <template v-slot="{ debounced, setValue }">
        <TextInput @input="setValue" />
        Debounced value: {{ debounced }}
      </template>
    </Debounced>
    <Debounced :value="outerValue">
      <template v-slot="{ debounced, setValue }">
        <TextInput @input="setValue" />
        <!-- inherits debounced changes from both 'outerValue' and 'setValue' -->
        Debounced value: {{ debounced }}
      </template>
    </Debounced>

    value

    Provides scoped reactive value that inherits changes from the top level value.

    <Debounced :value="outerValue">
      <template v-slot="{ value }">
        <!-- Updates as soon as 'outerValue' changes -->
        Immediate value: {{ value }}
      </template>
    </Debounced>
    <Debounced>
      <template v-slot="{ value, setValue }">
        <TextInput :value="value" @input="setValue" />
        <!-- Updates as soon as 'setValue' is inkoved -->
        Immediate value: {{ value }}
      </template>
    </Debounced>
    <Debounced :value="outerValue">
      <template v-slot="{ value, setValue }">
        <TextInput :value="value" @input="setValue" />
        <!-- Updates as soon as 'setValue' is inkoved or 'outerValue' changes -->
        Immediate value: {{ value }}
      </template>
    </Debounced>

    Methods

    setValue

    Set internal immediate value and trigger debounce

    <Debounced>
      <template v-slot="{ debounced, value, setValue }">
        <TextInput :value="value" @input="setValue" />
        Debounced value: {{ debounced }}
      </template>
    </Debounced>
    <Debounced @input="onDebouncedInput">
      <template v-slot="{ setValue }">
        <TextInput @input="setValue" />
      </template>
    </Debounced>

    Keywords

    none

    Install

    npm i vue-debounced

    DownloadsWeekly Downloads

    2

    Version

    1.0.0

    License

    none

    Unpacked Size

    16.5 kB

    Total Files

    10

    Last publish

    Collaborators

    • cyberap