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

feat: add refresh button (from PR #1213)

Browse Source
This commit is contained in:
ShareVB 2024-08-04 10:06:49 +02:00
parent 2a4462ccaf
commit 40aad48cc0
1 changed files with 6 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/tools/lorem-ipsum-generator/lorem-ipsum-generator.vue
View File

@ -1,5 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
import { generateLoremIpsum, getSupportedLanguages } from './lorem-ipsum-generator.service'; import { generateLoremIpsum, getSupportedLanguages } from './lorem-ipsum-generator.service';
import { computedRefreshable } from '@/composable/computedRefreshable';
import { useCopy } from '@/composable/copy'; import { useCopy } from '@/composable/copy';
import { useQueryParamOrStorage } from '@/composable/queryParams'; import { useQueryParamOrStorage } from '@/composable/queryParams';
import { randIntFromInterval } from '@/utils/random'; import { randIntFromInterval } from '@/utils/random';
@ -12,7 +13,7 @@ const asHTML = ref(false);
const language = useQueryParamOrStorage({ defaultValue: 'English', storageName: 'lorem:lang', name: 'lang' }); const language = useQueryParamOrStorage({ defaultValue: 'English', storageName: 'lorem:lang', name: 'lang' });
const supportedLanguages = getSupportedLanguages(); const supportedLanguages = getSupportedLanguages();
const loremIpsumText = computed(() => const [loremIpsumText, refreshLoremIpsum] = computedRefreshable(() =>
generateLoremIpsum({ generateLoremIpsum({
paragraphCount: paragraphs.value, paragraphCount: paragraphs.value,
asHTML: asHTML.value, asHTML: asHTML.value,
@ -52,10 +53,13 @@ const { copy } = useCopy({ source: loremIpsumText, text: 'Lorem ipsum copied to
<c-input-text :value="loremIpsumText" multiline placeholder="Your lorem ipsum..." readonly mt-5 rows="5" /> <c-input-text :value="loremIpsumText" multiline placeholder="Your lorem ipsum..." readonly mt-5 rows="5" />
<div mt-5 flex justify-center> <div mt-5 flex justify-center gap-3>
<c-button autofocus @click="copy()"> <c-button autofocus @click="copy()">
Copy Copy
</c-button> </c-button>
<c-button @click="refreshLoremIpsum">
Refresh
</c-button>
</div> </div>
</c-card> </c-card>
</template> </template>