feat: implemented nsfw settings

src/App.vue

@@ -19,7 +19,7 @@
   );
 
   const [showTable, toggleShowTable] = useToggle(false);
-  const { isFetching, error, data } = useGreasyfork();
+  const data = useDataList();
 
   const pagePsl = computed(() => {
     return psl.get(window.location.hostname);

src/components/DataTable.vue

@@ -156,15 +156,18 @@
     daily: '' as '' | 'desc' | 'asc'
   });
 
-  const sortedData = useSorted(props.data, (a, b) => {
-    if (sort.updated !== '') {
-      if (sort.updated === 'asc')
-        return +new Date(a.code_updated_at) - +new Date(b.code_updated_at);
-      return +new Date(b.code_updated_at) - +new Date(a.code_updated_at);
+  const sortedData = useSorted(
+    computed(() => props.data),
+    (a, b) => {
+      if (sort.updated !== '') {
+        if (sort.updated === 'asc')
+          return +new Date(a.code_updated_at) - +new Date(b.code_updated_at);
+        return +new Date(b.code_updated_at) - +new Date(a.code_updated_at);
+      }
+      if (sort.daily === 'asc') return a.daily_installs - b.daily_installs;
+      return b.daily_installs - a.daily_installs;
     }
-    if (sort.daily === 'asc') return a.daily_installs - b.daily_installs;
-    return b.daily_installs - a.daily_installs;
-  });
+  );
 
   const sortIcon = (sort: '' | 'desc' | 'asc') => {
     if (sort === '') return 'i-carbon-caret-sort';

src/composables/data.ts

@@ -31,10 +31,41 @@ export type GreasyforkScript = {
   version: string;
 };
 
-export function useGreasyfork(site = 'https://greasyfork.org') {
+export function useGreasyfork(
+  site = 'https://greasyfork.org',
+  immediate = true
+) {
   const host = psl.get(window.location.hostname);
   const apiEndpoint = `${site}/en/scripts/by-site/${host}.json`;
-  return useFetch(apiEndpoint, { fetch: unsafeWindow.fetch }).json<
+  return useFetch(apiEndpoint, { fetch: unsafeWindow.fetch, immediate }).json<
     GreasyforkScript[]
   >();
 }
+
+export function useDataList() {
+  const settings = useUserjsDiggerSettings();
+  const { data: greasyfork } = useGreasyfork();
+  const { data: sleazyfork, execute } = useGreasyfork(
+    'https://sleazyfork.org',
+    false
+  );
+  watch(
+    () => settings.value.nsfw,
+    (val) => {
+      if (val) {
+        if (!sleazyfork.value) execute();
+      }
+    },
+    { immediate: true }
+  );
+
+  const data = computed(() => {
+    return (
+      greasyfork.value?.concat(
+        settings.value.nsfw ? sleazyfork.value ?? [] : []
+      ) ?? []
+    );
+  });
+
+  return data;
+}