Vue Composable Utils

Reusability and Composition functions.

🌻 Introduction

Vue Composable Utils implemented as vue composition functions. currently usable with the @vue/composition-api.

📦 Installation

# install with yarn
yarn add @vue/composition-api vue-composable-utils
# install with npm
npm install @vue/composition-api vue-composable-utils

📚 Documentation

Check our documentation

🚀 Composable Utils

Name	Arguments	Returns
`UseBind`	initial	value, changed, reset
`UseEmbed`	initial	isEmbedBlock, clear
`UseState`	initial	value, set
`UseDebounce`	initial	value, delay, debounceVal, debounceListener
`UseDebounceFn`	initial	delay, immediate, fn
`UsePick`	Parameter	Object, Keys
`UseResize`	initial	screenWidth, screenHeight, ratiowh, ratiohw, rect
`UseLocalStorage`	initial	value, key,
`UseQuene`	initial	set, state, remove, first, last, size
`UseModal`	initial	visible, setVisible, current, openModal, closeModal
`UseDarkMode`	initial	darkMode, setDarkMode
`UseStringCase`	initial	string, camelCase,capitalizeCase, sentenceCase, kebabCase, pascalCase, lowerCase, upperCase
`UseDate`	initial	format, timeAgo, getDate, utc, timezone, difference
`Usei18nDate`	initial	format, timeAgo, getDate, utc, timezone, difference,
`UseCookie`	initial	cookie, appendCookie,setCookie, parseCookie ,getCookie, deleteCookie
`UseClipboard`	initial	copy, set
`UseList`	initial	list, set, reduce, sort, first, deleteFirst, deleteLast, last,filter, push, reset

💡 Usage

✨ useBind

<template>
  <div>
    <p>Input : {{ value }}</p>
    <input type="text" :value="value" @input="changed" />
    <button @click="reset">Reset</button>
  </div>
</template>

<script>
import { useBind } from 'vue-composable-utils';

export default {
  setup() {
    const { value, changed, reset } = useBind('Type here....');
    return { value, changed, reset };
  },
};
</script>

<template>
  <div>
    <p>Select : {{ value }}</p>
    <div>
      <select @change="changed">
        <option value="apple">apple</option>
        <option value="orange">orange</option>
        <option value="watermelon">Watermelon</option>
        <option value="strawberry">Strawberry</option>
      </select>
    </div>
  </div>
</template>

<script>
import { useBind } from 'vue-composable-utils';

export default {
  setup() {
    const { value, changed, reset } = useBind('Type a here....');
    return { value, changed, reset };
  },
};
</script>

✨ useModal

<template>
  <div class="modal-vue">
    <!-- button show -->
    <button class="btn yellow" @click="handleButton">show</button>

    <!-- overlay -->
    <div class="overlay" v-if="visible"></div>

    <!-- modal -->
    <div class="modal" v-if="visible">
      <div class="modal-header">Modal Header</div>
      <button class="close" @click="closeModal">x</button>
      <div class="modal-content" v-for="curr in current" :key="curr.id">
        <ul>
          <li>
            <p>{{ curr.emoji }}</p>
            <h1>{{ curr.fullname }}</h1>
            <span>{{ curr.job }}</span>
          </li>
        </ul>
      </div>
      <div class="modal-footer">Modal Footer</div>
    </div>
  </div>
</template>

<script>
import { useModal } from 'vue-composable-utils';

export default {
  setup() {
    const contrubitors = [
      {
        id: 1,
        emoji: '👨',
        fullname: 'Abdulnasır Olcan',
        job: 'Frontend Developer',
      },
      {
        id: 2,
        emoji: '👩',
        fullname: 'Büşra Şanlıbayrak',
        job: 'Frontend Developer',
      },
      {
        id: 3,
        emoji: '👨',
        fullname: 'Mehmet Varol',
        job: 'Frontend Developer',
      },
    ];
    const { visible, setVisible, current, openModal, closeModal } = useModal();

    const handleButton = () => {
      openModal(contrubitors);
      setVisible(true);
    };

    return { handleButton, visible, current, closeModal };
  },
};
</script>

✨ usePick

<template>
  <p>{{ JSON.stringify(pick) }}</p>
</template>

<script>
import { usePick } from 'vue-composable-utils';

export default {
  setup() {
    const pick = usePick(
      {
        a: 1,
        b: 2,
        c: 3,
        d: 4,
      },
      ['a', 'd'],
    );

    return {
      pick,
    };
  },
};
</script>

✨ useResize

<template>
  <div ref="resizeRef">
    <pre class="resize">{{ JSON.stringify({ screenWidth, screenHeight, ratiowh, ratiohw, rect }, undefined, 2) }}</pre>
  </div>
</template>

<script>
import { ref } from 'vue';
import { useResize } from 'vue-composable-utils';

export default {
  setup() {
    const resizeRef = ref(null);
    const { screenWidth, screenHeight, ratiowh, ratiohw, rect } = useResize(resizeRef);

    return { screenWidth, screenHeight, ratiowh, ratiohw, rect, resizeRef };
  },
};
</script>

✨ useState

<template>
  <p>{{ count }}</p>
  <button @click="setCount(count - 1)">Decrement</button>
  <button @click="setCount(count + 1)">Increment</button>
</template>

<script>
import { useState } from 'vue-composable-utils';

export default {
  setup() {
    const [count, setCount] = useState(0);

    return {
      count,
      setCount,
    };
  },
};
</script>

✨ useStringCase

<template>
  <div>
    <p><b>CamelCase: </b>{{ camelCase(state.about) }}</p>
    <p><b>CapitalizeCase: </b>{{ capitalizeCase(state.name) }}</p>
    <p><b>SentenceCase: </b>{{ sentenceCase(state.company) }}</p>
    <p><b>KebabCase: </b>{{ kebabCase(state.balance) }}</p>
    <p><b>PascalCase: </b>{{ pascalCase(state.address) }}</p>
    <p><b>LowerCase: </b>{{ lowerCase(state.email) }}</p>
    <p><b>UpperCase: </b>{{ upperCase(state.gender) }}</p>
  </div>
</template>

<script>
import { reactive } from '@vue/composition-api';
import { useStringCase } from 'vue-composable-utils';

export default {
  setup() {
    const state = reactive({
      name: 'imelda white',
      gender: 'female',
      company: 'NEUROCELL',
      email: 'Imeldawhite@nr.com',
      balance: '3,814.49',
      about: 'Veniam fugiat pariatur adipisicing do consequat.',
      address: 'bulwer place, lemoyne, district of columbia, 5597',
    });

    const { camelCase, kebabCase, pascalCase, upperCase, lowerCase, sentenceCase, capitalizeCase } = useStringCase();

    return {
      state,
      camelCase,
      kebabCase,
      pascalCase,
      upperCase,
      lowerCase,
      sentenceCase,
      capitalizeCase,
    };
  },
};
</script>

✨ useQueue

<template>
  <div>
    <p>First: {{ first }}</p>
    <p>Last: {{ last }}</p>
    <p>Size: {{ size }}</p>
    <button @click="set([...state, ...data])">Add</button>
    <button @click="remove()">Remove</button>
  </div>
</template>

<script>
import { useQueue } from 'vue-composable-utils';

export default {
  setup() {
    const data = [
      { id: 9, name: 'John', age: 15, occupation: 'gardener' },
      { id: 10, name: 'Lenny', age: 51, occupation: 'programmer' },
    ];
    const { set, state, remove, first, last, size } = useQueue([
      { id: 1, name: 'John', age: 25, occupation: 'gardener' },
      { id: 2, name: 'Lenny', age: 51, occupation: 'programmer' },
      { id: 3, name: 'Andrew', age: 43, occupation: 'teacher' },
      { id: 4, name: 'Peter', age: 52, occupation: 'gardener' },
      { id: 5, name: 'Anna', age: 43, occupation: 'teacher' },
      { id: 6, name: 'Albert', age: 46, occupation: 'programmer' },
      { id: 7, name: 'Adam', age: 47, occupation: 'teacher' },
      { id: 8, ame: 'Robert', age: 32, occupation: 'driver' },
    ]);

    return { data, set, state, remove, first, last, size };
  },
};
</script>

✨ useClipboard

<template>
  <div class="clipboard" ref="clipboardRef">
    <div>
      <p>{{ copyText }}</p>
      <button class="btn" @click="onCopy">Copy</button>
    </div>
    <div>
      <input type="text" v-model="clipboardModel" />
      <button class="btn" @click="onCopyInput">Copy</button>
      <p>{{ clipboardModel }}</p>
    </div>
  </div>
</template>

<script>
import { ref } from '@vue/composition-api';
import { useClipboard } from 'vue-composable-utils';

export default {
  name: 'ClipboardComponent',
  setup() {
    const clipboardRef = ref(null);
    const clipboardModel = ref(null);
    const copyText = ref('Kopyalanmak istenilen veri...');

    const { copy } = useClipboard();

    const onCopy = () => {
      copy(copyText.value, clipboardRef.value);
    };

    const onCopyInput = () => {
      copy(clipboardModel.value, clipboardRef.value);
    };

    return {
      copy,
      onCopy,
      copyText,
      onCopyInput,
      clipboardRef,
      clipboardModel,
    };
  },
};
</script>

✨ useDarkMode

<template>
  <div>
    <a @click="setDarkMode((darkMode = !darkMode))">
      <p v-if="darkMode">🌞 Light</p>
      <p v-if="!darkMode">🌜 Dark</p>
    </a>
  </div>
</template>

<script>
import { useDarkMode } from 'vue-composable-utils';

export default {
  setup() {
    const { darkMode, setDarkMode } = useDarkMode();
    return { darkMode, setDarkMode };
  },
};
</script>

✨ useDate

<template>
  <div>
    <p><b>Format: </b>{{ dateFormat }}</p>
    <p><b>TimeAgo: </b>{{ timeAgoFormat }}</p>
    <p><b>GetDate: </b>{{ getDateFormat }}</p>
    <p><b>Difference: </b>{{ differenceFormat }}</p>
    <p><b>Utc: </b>{{ utcFormat }}</p>
    <p><b>Timezone: </b>{{ timezoneFormat }}</p>
  </div>
</template>

<script>
import { useDate } from 'vue-composable-utils';

export default {
  setup(props) {
    // The useDate function is added and the desired properties are used.
    // The parameter sent from useDate represents the language option.
    const { format, timeAgo, getDate, utc, timezone, difference } = useDate();

    const dateFormat = format(date, 'LLLL'); // Friday, April 9, 2021 11:47 PM
    const timeAgoFormat = timeAgo(date, '2021-04-07:23:00'); // 2 days ago
    const getDateFormat = getDate('date'); // 10
    const differenceFormat = difference(date, '2018-06-05', 'day'); // 1400
    const utcFormat = utc(date, 'LLLL');
    const timezoneFormat = timezone('2014-06-01 12:00', 'America/New_York', 'L LT');

    return {
      dateFormat,
      timeAgoFormat,
      getDateFormat,
      differenceFormat,
      utcFormat,
      timezoneFormat,
    };
  },
};
</script>

✨ useDebounce

<template>
  <div>
    <p>Value : {{ debounceVal }}</p>
    <input :value="value" @input="debounceListener" placeholder="search here" />
    <small>Delay is set to 1000ms.</small>
  </div>
</template>

<script>
import { useDebounce } from 'vue-composable-utils';

export default {
  name: 'Debounce',
  setup() {
    const { debounceVal, value, debounceListener } = useDebounce(1000);
    return {
      debounceVal,
      value,
      debounceListener,
    };
  },
};
</script>

✨ useDebounceFn

<template>
  <div>
    <p>Event handler : {{ updated }}</p>
    <input :value="updated" @input="debouncedFn" placeholder="input" />
    <input disabled placeholder="output" :value="updated" />
    <small>Delay is set to 1000ms.</small>
  </div>
</template>

<script>
import { ref } from 'vue';
import { useDebounceFn } from 'vue-composable-utils';

export default {
  setup() {
    const updated = ref('');
    const fn = e => (updated.value = e.target.value);

    const debouncedFn = useDebounceFn({ delay: 1000, immediate: true }, fn);

    return { updated, debouncedFn };
  },
};
</script>

✨ usei18nDate

<template>
  <div>
    <p><b>Format: </b>{{ dateFormat }}</p>
    <p><b>TimeAgo: </b>{{ timeAgoFormat }}</p>
    <p><b>GetDate: </b>{{ getDateFormat }}</p>
    <p><b>Difference: </b>{{ differenceFormat }}</p>
    <p><b>Utc: </b>{{ utcFormat }}</p>
    <p><b>Timezone: </b>{{ timezoneFormat }}</p>
  </div>
</template>

<script>
import { ref, computed } from '@vue/composition-api';
import { usei18nDate } from 'vue-composable-utils';

export default {
  setup(props) {
    const date = new Date();
    const langUnit = ref('en');

    // The usei18nDate function is added and the desired properties are used.
    // The parameter sent from usei18nDate represents the language option.
    const { format, timeAgo, getDate, utc, timezone, difference } = usei18nDate(langUnit);

    const dateFormat = computed(() => format(date, 'LLLL')); // Friday, April 9, 2021 11:47 PM
    const timeAgoFormat = computed(() => timeAgo(date, '2021-04-07:23:00')); // 2 days ago
    const getDateFormat = computed(() => getDate('date')); // 10
    const differenceFormat = computed(() => difference(date, '2018-06-05', 'day')); // 1400
    const utcFormat = computed(() => utc(date, 'LLLL'));
    const timezoneFormat = computed(() => timezone('2014-06-01 12:00', 'America/New_York', 'L LT'));

    return {
      dateFormat,
      timeAgoFormat,
      getDateFormat,
      differenceFormat,
      utcFormat,
      timezoneFormat,
    };
  },
};
</script>

✨ useEmbed

<template>
  <div class="example-container">
    <div class="flex-container">
      <textarea rows="5" cols="50" placeholder="Place embed code here" v-model="code"></textarea>
      <button type="button" class="clear-button" @click="clear">Clear</button>
    </div>
    <div v-if="isEmbedBlock" v-html="code" class="embed-block"></div>
  </div>
</template>

<script>
import { ref } from '@vue/composition-api';
import { useEmbed } from 'vue-use-embed';

export default {
  setup() {
    const code = ref(null);

    const { isEmbedBlock, clear } = useEmbed(code);

    return {
      code,
      clear,
      isEmbedBlock,
    };
  },
};
</script>

✨ useLocalStorage

<template>
  <div>
    <p>value is: {{ value }}</p>
    <button @click="value = '2'">Change</button>
  </div>
</template>

<script>
import { useLocalStorage } from 'vue-composable-utils';

export default {
  setup() {
    const { value } = useLocalStorage('test', 1);

    return { value };
  },
};
</script>

✨ useList

<template>
  <div>
    <p>list: {{ JSON.stringify(list) }}</p>
    <button @click="sort((a, b) => a - b)">Sort List</button>
    <button @click="set([...list, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20])">Set list</button>
    <button
      @click="
        reduce((total, next) => {
          return total + next;
        })
      "
    >
      Sum list
    </button>
    <button @click="reduce((t, n) => Math.max(t, n))">Max list</button>
    <button @click="reduce((t, n) => (t.includes(n) ? t : [...t, n]))">Unique List</button>
    <button @click="reduce((t, n) => [n, ...t])">Reverse List</button>
    <button @click="set([[...list], [11, [12], 13], [14, [15], 16, 17], [18, [19], 20]])">Set Multi Array</button>
    <button @click="reduce((t, n) => t.concat(n))">Flatten List</button>
    <button
      @click="
        reduce((t, n) => {
          t.push(n * 2);
          return t;
        })
      "
    >
      Map List
    </button>
    <button @click="deleteFirst">Delete First</button>
    <button @click="deleteLast">Delete Last</button>
    <button @click="first">First</button>
    <button @click="last">Last</button>
    <button @click="filter(a => a >= 5)">Greater than or equal to 5</button>
    <button @click="push(11, 12, 13, 14, 15, 16, 17, 18, 19, 20)">Push</button>
    <button @click="reset">Reset</button>
  </div>
</template>

<script>
import { useList } from 'vue-composable-utils';

export default {
  setup() {
    const { list, sort, set, reduce, first, deleteFirst, deleteLast, last, filter, push, reset } = useList([
      5,
      1,
      4,
      7,
      10,
      4,
      9,
      6,
      2,
      5,
      8,
      3,
    ]);

    return {
      list,
      set,
      reduce,
      sort,
      first,
      deleteFirst,
      deleteLast,
      last,
      filter,
      push,
      reset,
    };
  },
};
</script>

👨 👩 Contributors

_{Abdulnasır Olcan}

_{Büşra Şanlıbayrak}

_{Mehmet Varol}

_{Rukiye Demir}

_{Burak Küçükali}

_{İlker İsmailoğlu}

_{Güvenç Terzierol}

License

MIT

Name		Name	Last commit message	Last commit date
Latest commit History 94 Commits
docs		docs
scripts		scripts
src		src
tests		tests
utils		utils
.browserslistrc		.browserslistrc
.editorconfig		.editorconfig
.eslintignore		.eslintignore
.eslintrc.js		.eslintrc.js
.gitignore		.gitignore
.huskyrc.js		.huskyrc.js
.prettierignore		.prettierignore
.prettierrc.js		.prettierrc.js
README.md		README.md
babel.config.js		babel.config.js
jest.config.js		jest.config.js
package.json		package.json
yarn.lock		yarn.lock

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Repository files navigation

Vue Composable Utils

🌻 Introduction

📦 Installation

📚 Documentation

🚀 Composable Utils

💡 Usage

✨ useBind

✨ useModal

✨ usePick

✨ useResize

✨ useState

✨ useStringCase

✨ useQueue

✨ useClipboard

✨ useDarkMode

✨ useDate

✨ useDebounce

✨ useDebounceFn

✨ usei18nDate

✨ useEmbed

✨ useLocalStorage

✨ useList

👨 👩 Contributors

License

About

Releases

Packages

Contributors 3

Languages

vue-avengers/vue-composable-utils

Folders and files

Latest commit

History

Repository files navigation

Vue Composable Utils

🌻 Introduction

📦 Installation

📚 Documentation

🚀 Composable Utils

💡 Usage

✨ useBind

✨ useModal

✨ usePick

✨ useResize

✨ useState

✨ useStringCase

✨ useQueue

✨ useClipboard

✨ useDarkMode

✨ useDate

✨ useDebounce

✨ useDebounceFn

✨ usei18nDate

✨ useEmbed

✨ useLocalStorage

✨ useList

👨 👩 Contributors

License

About

Topics

Resources

Stars

Watchers

Forks

Releases

Packages 0

Contributors 3

Languages

Packages