public-repos/it-tools
5
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

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
Show Stats 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 { withDefaultOnError } from '@/utils/defaults';
import { useCopy } from '@/composable/copy';
import { useQueryParamOrStorage } from '@/composable/queryParams';
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' });
</script>
<template>
<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>
<c-button :disabled="slug.length === 0" @click="copy()">