Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/vue-avengers/vue-composable-utils
Vue composition-api composable utils components. Different composables functions.
https://github.com/vue-avengers/vue-composable-utils
List: vue-composable-utils
binding dark-mode date debounce embed internal lists localstorage modal multidates pick queue stringcase vue vue-composition-api vuejs vuejs2
Last synced: 2 months ago
JSON representation
Vue composition-api composable utils components. Different composables functions.
- Host: GitHub
- URL: https://github.com/vue-avengers/vue-composable-utils
- Owner: vue-avengers
- Created: 2021-04-08T21:04:52.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2021-10-13T10:59:13.000Z (about 3 years ago)
- Last Synced: 2024-10-12T06:03:29.703Z (2 months ago)
- Topics: binding, dark-mode, date, debounce, embed, internal, lists, localstorage, modal, multidates, pick, queue, stringcase, vue, vue-composition-api, vuejs, vuejs2
- Language: JavaScript
- Homepage: https://vue-composable-utils.netlify.app/
- Size: 2.39 MB
- Stars: 7
- Watchers: 0
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- ultimate-awesome - vue-composable-utils - Vue composition-api composable utils components. Different composables functions. (Other Lists / Monkey C Lists)
README
Vue Composable Utils
[](https://www.npmjs.com/package/vue-composable-utils)
Reusability and Composition functions.
## :sunflower: Introduction
Vue Composable Utils implemented as vue composition functions. currently usable with the `@vue/composition-api`.
## :package: Installation
```bash
# install with yarn
yarn add @vue/composition-api vue-composable-utils
# install with npm
npm install @vue/composition-api vue-composable-utils
```
## :books: Documentation
Check our [documentation](https://vue-composable-utils.netlify.app/)
## :rocket: Composable Utils
| Name | Arguments | Returns |
| --------------------------------------------------------------------------------------------------- | --------- | ------------------------------------------------------------------------------------------- |
| [`UseBind`](https://vue-composable-utils.netlify.app/composable-utils/useBind.html) | initial | value, changed, reset |
| [`UseEmbed`](https://vue-composable-utils.netlify.app/composable-utils/useEmbed.html) | initial | isEmbedBlock, clear |
| [`UseState`](https://vue-composable-utils.netlify.app/composable-utils/useState.html) | initial | value, set |
| [`UseDebounce`](https://vue-composable-utils.netlify.app/composable-utils/useDebounce.html) | initial | value, delay, debounceVal, debounceListener |
| [`UseDebounceFn`](https://vue-composable-utils.netlify.app/composable-utils/useDebounceFn.html) | initial | delay, immediate, fn |
| [`UsePick`](https://vue-composable-utils.netlify.app/composable-utils/usePick.html) | Parameter | Object, Keys |
| [`UseResize`](https://vue-composable-utils.netlify.app/composable-utils/useResize.html) | initial | screenWidth, screenHeight, ratiowh, ratiohw, rect |
| [`UseLocalStorage`](https://vue-composable-utils.netlify.app/composable-utils/useLocalStorage.html) | initial | value, key, |
| [`UseQuene`](https://vue-composable-utils.netlify.app/composable-utils/useQuene.html) | initial | set, state, remove, first, last, size |
| [`UseModal`](https://vue-composable-utils.netlify.app/composable-utils/useModal.html) | initial | visible, setVisible, current, openModal, closeModal |
| [`UseDarkMode`](https://vue-composable-utils.netlify.app/composable-utils/useDarkMode.html) | initial | darkMode, setDarkMode |
| [`UseStringCase`](https://vue-composable-utils.netlify.app/composable-utils/useStringCase.html) | initial | string, camelCase,capitalizeCase, sentenceCase, kebabCase, pascalCase, lowerCase, upperCase |
| [`UseDate`](https://vue-composable-utils.netlify.app/composable-utils/useDate.html) | initial | format, timeAgo, getDate, utc, timezone, difference |
| [`Usei18nDate`](https://vue-composable-utils.netlify.app/composable-utils/usei18nDate.html) | initial | format, timeAgo, getDate, utc, timezone, difference, |
| [`UseCookie`](https://vue-composable-utils.netlify.app/composable-utils/useCookie.html) | initial | cookie, appendCookie,setCookie, parseCookie ,getCookie, deleteCookie |
| [`UseClipboard`](https://vue-composable-utils.netlify.app/composable-utils/useClipboard.html) | initial | copy, set |
| [`UseList`](https://vue-composable-utils.netlify.app/composable-utils/useList.html) | initial | list, set, reduce, sort, first, deleteFirst, deleteLast, last,filter, push, reset |
- [UseBind](https://vue-composable-utils.netlify.app/composable-utils/useBind.html).
- [UseEmbed](https://vue-composable-utils.netlify.app/composable-utils/useEmbed.html).
- [UseState](https://vue-composable-utils.netlify.app/composable-utils/useState.html).
- [UseDebounce](https://vue-composable-utils.netlify.app/composable-utils/useDebounce.html).
- [UseDebounceFn](https://vue-composable-utils.netlify.app/composable-utils/useDebounceFn.html).
- [UsePick](https://vue-composable-utils.netlify.app/composable-utils/usePick.html).
- [UseResize](https://vue-composable-utils.netlify.app/composable-utils/useResize.html).
- [UseLocalStorage](https://vue-composable-utils.netlify.app/composable-utils/useLocalStorage.html).
- [UseQuene](https://vue-composable-utils.netlify.app/composable-utils/useQuene.html).
- [UseModal](https://vue-composable-utils.netlify.app/composable-utils/useModal.html).
- [UseDarkMode](https://vue-composable-utils.netlify.app/composable-utils/useDarkMode.html).
- [UseStringCase](https://vue-composable-utils.netlify.app/composable-utils/useStringCase.html).
- [UseDate](https://vue-composable-utils.netlify.app/composable-utils/useDate.html).
- [Usei18nDate](https://vue-composable-utils.netlify.app/composable-utils/usei18nDate.html).
- [UseCookie](https://vue-composable-utils.netlify.app/composable-utils/useCookie.html).
- [UseClipboard](https://vue-composable-utils.netlify.app/composable-utils/useClipboard.html).
- [UseList](https://vue-composable-utils.netlify.app/composable-utils/useList.html).
## :bulb: Usage
## :sparkles: useBind
```vue
Input : {{ value }}
Reset
import { useBind } from 'vue-composable-utils';
export default {
setup() {
const { value, changed, reset } = useBind('Type here....');
return { value, changed, reset };
},
};
```
```vue
Select : {{ value }}
apple
orange
Watermelon
Strawberry
import { useBind } from 'vue-composable-utils';
export default {
setup() {
const { value, changed, reset } = useBind('Type a here....');
return { value, changed, reset };
},
};
```
## :sparkles: useModal
```vue
show
Modal Header
x
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 };
},
};
```
## :sparkles: usePick
```vue
{{ JSON.stringify(pick) }}
import { usePick } from 'vue-composable-utils';
export default {
setup() {
const pick = usePick(
{
a: 1,
b: 2,
c: 3,
d: 4,
},
['a', 'd'],
);
return {
pick,
};
},
};
```
## :sparkles: useResize
```vue
{{ JSON.stringify({ screenWidth, screenHeight, ratiowh, ratiohw, rect }, undefined, 2) }}
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 };
},
};
```
## :sparkles: useState
```vue
{{ count }}
Decrement
Increment
import { useState } from 'vue-composable-utils';
export default {
setup() {
const [count, setCount] = useState(0);
return {
count,
setCount,
};
},
};
```
## :sparkles: useStringCase
```vue
CamelCase: {{ camelCase(state.about) }}
CapitalizeCase: {{ capitalizeCase(state.name) }}
SentenceCase: {{ sentenceCase(state.company) }}
KebabCase: {{ kebabCase(state.balance) }}
PascalCase: {{ pascalCase(state.address) }}
LowerCase: {{ lowerCase(state.email) }}
UpperCase: {{ upperCase(state.gender) }}
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: '[email protected]',
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,
};
},
};
```
## :sparkles: useQueue
```vue
First: {{ first }}
Last: {{ last }}
Size: {{ size }}
Add
Remove
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 };
},
};
```
## :sparkles: useClipboard
```vue
{{ copyText }}
Copy
Copy
{{ clipboardModel }}
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,
};
},
};
```
## :sparkles: useDarkMode
```vue
import { useDarkMode } from 'vue-composable-utils';
export default {
setup() {
const { darkMode, setDarkMode } = useDarkMode();
return { darkMode, setDarkMode };
},
};
```
## :sparkles: useDate
```vue
Format: {{ dateFormat }}
TimeAgo: {{ timeAgoFormat }}
GetDate: {{ getDateFormat }}
Difference: {{ differenceFormat }}
Utc: {{ utcFormat }}
Timezone: {{ timezoneFormat }}
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,
};
},
};
```
## :sparkles: useDebounce
```vue
Value : {{ debounceVal }}
Delay is set to 1000ms.
import { useDebounce } from 'vue-composable-utils';
export default {
name: 'Debounce',
setup() {
const { debounceVal, value, debounceListener } = useDebounce(1000);
return {
debounceVal,
value,
debounceListener,
};
},
};
```
## :sparkles: useDebounceFn
```vue
Event handler : {{ updated }}
Delay is set to 1000ms.
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 };
},
};
```
## :sparkles: usei18nDate
```vue
Format: {{ dateFormat }}
TimeAgo: {{ timeAgoFormat }}
GetDate: {{ getDateFormat }}
Difference: {{ differenceFormat }}
Utc: {{ utcFormat }}
Timezone: {{ timezoneFormat }}
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,
};
},
};
```
## :sparkles: useEmbed
```vue
Clear
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,
};
},
};
```
## :sparkles: useLocalStorage
```vue
value is: {{ value }}
Change
import { useLocalStorage } from 'vue-composable-utils';
export default {
setup() {
const { value } = useLocalStorage('test', 1);
return { value };
},
};
```
## :sparkles: useList
```vue
list: {{ JSON.stringify(list) }}
a - b)">Sort List
Set list
{
return total + next;
})
"
>
Sum list
Math.max(t, n))">Max list
(t.includes(n) ? t : [...t, n]))">Unique List
[n, ...t])">Reverse List
Set Multi Array
t.concat(n))">Flatten List
{
t.push(n * 2);
return t;
})
"
>
Map List
Delete First
Delete Last
First
Last
a >= 5)">Greater than or equal to 5
Push
Reset
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,
};
},
};
```
## :man: :woman: Contributors
Abdulnasır Olcan
Büşra Şanlıbayrak
Mehmet Varol
Rukiye Demir
Burak Küçükali
Ä°lker Ä°smailoÄŸlu
Güvenç Terzierol
## License
MIT