Merge branch 'CorentinTh:main' into main

package.json

@@ -138,5 +138,6 @@
     "vitest": "^0.34.0",
     "workbox-window": "^7.0.0",
     "zx": "^7.2.1"
-  }
+  },
+  "packageManager": "pnpm@8.15.3"
 }

src/components/FormatTransformer.vue

@@ -48,7 +48,7 @@ const output = computed(() => transformer.value(input.value));
     monospace
   />
 
-  <div>
+  <div overflow-auto>
     <div mb-5px>
       {{ outputLabel }}
     </div>

src/composable/debouncedref.ts

@@ -0,0 +1,21 @@
+import _ from 'lodash';
+
+function useDebouncedRef<T>(initialValue: T, delay: number, immediate: boolean = false) {
+  const state = ref(initialValue);
+  const debouncedRef = customRef((track, trigger) => ({
+    get() {
+      track();
+      return state.value;
+    },
+    set: _.debounce(
+      (value) => {
+        state.value = value;
+        trigger();
+      },
+      delay,
+      { leading: immediate },
+    ),
+  }));
+  return debouncedRef;
+}
+export default useDebouncedRef;

src/tools/emoji-picker/emoji-picker.vue

@@ -4,6 +4,7 @@ import emojiKeywords from 'emojilib';
 import _ from 'lodash';
 import type { EmojiInfo } from './emoji.types';
 import { useFuzzySearch } from '@/composable/fuzzySearch';
+import useDebouncedRef from '@/composable/debouncedref';
 
 const escapeUnicode = ({ emoji }: { emoji: string }) => emoji.split('').map(unit => `\\u${unit.charCodeAt(0).toString(16).padStart(4, '0')}`).join('');
 const getEmojiCodePoints = ({ emoji }: { emoji: string }) => emoji.codePointAt(0) ? `0x${emoji.codePointAt(0)?.toString(16)}` : undefined;
@@ -23,7 +24,7 @@ const emojisGroups: { emojiInfos: EmojiInfo[]; group: string }[] = _
   .map((emojiInfos, group) => ({ group, emojiInfos }))
   .value();
 
-const searchQuery = ref('');
+const searchQuery = useDebouncedRef('', 500);
 
 const { searchResult } = useFuzzySearch({
   search: searchQuery,

src/tools/jwt-parser/jwt-parser.vue

@@ -39,7 +39,7 @@ const validation = useValidation({
             {{ section.title }}
           </th>
           <tr v-for="{ claim, claimDescription, friendlyValue, value } in decodedJWT[section.key]" :key="claim + value">
-            <td class="claims">
+            <td class="claims" style="vertical-align: top;">
               <span font-bold>
                 {{ claim }}
               </span>
@@ -47,7 +47,7 @@ const validation = useValidation({
                 ({{ claimDescription }})
               </span>
             </td>
-            <td>
+            <td style="word-wrap: break-word;word-break: break-all;">
               <span>{{ value }}</span>
               <span v-if="friendlyValue" ml-2 op-70>
                 ({{ friendlyValue }})

src/tools/lorem-ipsum-generator/lorem-ipsum-generator.vue

@@ -2,6 +2,7 @@
 import { generateLoremIpsum } from './lorem-ipsum-generator.service';
 import { useCopy } from '@/composable/copy';
 import { randIntFromInterval } from '@/utils/random';
+import { computedRefreshable } from '@/composable/computedRefreshable';
 
 const paragraphs = ref(1);
 const sentences = ref([3, 8]);
@@ -9,7 +10,7 @@ const words = ref([8, 15]);
 const startWithLoremIpsum = ref(true);
 const asHTML = ref(false);
 
-const loremIpsumText = computed(() =>
+const [loremIpsumText, refreshLoremIpsum] = computedRefreshable(() =>
   generateLoremIpsum({
     paragraphCount: paragraphs.value,
     asHTML: asHTML.value,
@@ -18,6 +19,7 @@ const loremIpsumText = computed(() =>
     startWithLoremIpsum: startWithLoremIpsum.value,
   }),
 );
+
 const { copy } = useCopy({ source: loremIpsumText, text: 'Lorem ipsum copied to the clipboard' });
 </script>
 
@@ -41,10 +43,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" />
 
-    <div mt-5 flex justify-center>
+    <div mt-5 flex justify-center gap-3>
       <c-button autofocus @click="copy()">
         Copy
       </c-button>
+      <c-button @click="refreshLoremIpsum">
+        Refresh
+      </c-button>
     </div>
   </c-card>
 </template>