diff options
Diffstat (limited to 'src/tools/slugify-string/slugify-string.vue')
-rw-r--r-- | src/tools/slugify-string/slugify-string.vue | 33 |
1 files changed, 33 insertions, 0 deletions
diff --git a/src/tools/slugify-string/slugify-string.vue b/src/tools/slugify-string/slugify-string.vue new file mode 100644 index 0000000..be5db14 --- /dev/null +++ b/src/tools/slugify-string/slugify-string.vue @@ -0,0 +1,33 @@ +<template> + <div> + <n-form-item label="Your string to slugify"> + <n-input v-model:value="input" type="textarea" placeholder="Put your string here (ex: My file path)"></n-input> + </n-form-item> + + <n-form-item label="Your slug"> + <n-input + :value="slug" + type="textarea" + readonly + placeholder="You slug will be generated here (ex: my-file-path)" + ></n-input> + </n-form-item> + + <n-space justify="center"> + <n-button secondary :disabled="slug.length === 0" @click="copy">Copy slug</n-button> + </n-space> + </div> +</template> + +<script setup lang="ts"> +import { computed, ref } from 'vue'; +import slugify from '@sindresorhus/slugify'; +import { withDefaultOnError } from '@/utils/defaults'; +import { useCopy } from '@/composable/copy'; + +const input = ref(''); +const slug = computed(() => withDefaultOnError(() => slugify(input.value), '')); +const { copy } = useCopy({ source: slug, text: 'Slug copied to clipboard' }); +</script> + +<style lang="less" scoped></style> |