mirrors/it-tools
1
0
Fork 0
mirror of https://github.com/CorentinTh/it-tools.git synced 2025-04-20 14:56:17 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Merge b9725eaf11 into 07eea0f484

Browse source
This commit is contained in:
sharevb 2025-04-13 04:10:47 +02:00 • committed by GitHub
commit c77b6e850f
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 21 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

24
src/tools/slugify-string/slugify-string.vue
View file

@ -2,17 +2,35 @@
import slugify from '@sindresorhus/slugify'; import slugify from '@sindresorhus/slugify';
import { withDefaultOnError } from '@/utils/defaults'; import { withDefaultOnError } from '@/utils/defaults';
import { useCopy } from '@/composable/copy'; import { useCopy } from '@/composable/copy';
import { useQueryParamOrStorage } from '@/composable/queryParams';
const input = ref(''); const input = ref('');
const slug = computed(() => withDefaultOnError(() => slugify(input.value), '')); const separator = useQueryParamOrStorage({ name: 'sep', storageName: 'slugify:sep', defaultValue: '-' });
const slug = computed(() => withDefaultOnError(() => slugify(input.value, {
separator: separator.value,
}), ''));
const { copy } = useCopy({ source: slug, text: 'Slug copied to clipboard' }); const { copy } = useCopy({ source: slug, text: 'Slug copied to clipboard' });
</script> </script>
<template> <template>
<div> <div>
<c-input-text v-model:value="input" multiline placeholder="Put your string here (ex: My file path)" label="Your string to slugify" autofocus raw-text mb-5 /> <c-input-text
v-model:value="input" multiline
placeholder="Put your string here (ex: My file path)"
label="Your string to slugify" autofocus raw-text mb-2
/>
<c-input-text :value="slug" multiline readonly placeholder="You slug will be generated here (ex: my-file-path)" label="Your slug" mb-5 /> <c-input-text
v-model:value="separator"
placeholder="Put separator char here"
label="Separator character" raw-text mb-5
/>
<c-input-text
:value="slug" multiline readonly
placeholder="You slug will be generated here (ex: my-file-path)"
label="Your slug" mb-5
/>
<div flex justify-center> <div flex justify-center>
<c-button :disabled="slug.length === 0" @click="copy()"> <c-button :disabled="slug.length === 0" @click="copy()">