feat(dependencies): add packageBrowser option

Author: VChet

src/components/input-select.vue

@@ -2,28 +2,39 @@
   <label class="input-select">
     <div class="input-select__label">{{ label }}</div>
     <select v-model="model" :name>
-      <option value="">N/A</option>
+      <option v-if="!mandatory" value="">N/A</option>
       <option v-for="(item, index) in items" :key="index" :value="item[itemValue]">
         {{ item[itemText] }}
       </option>
     </select>
   </label>
 </template>
 <script setup lang="ts">
-import type { SelectHTMLAttributes } from "vue";
+import { onBeforeMount, type SelectHTMLAttributes } from "vue";
 import { useVModel } from "@vueuse/core";
+import { isNullish } from "@/helpers/validate";
 
 interface Props {
   modelValue: SelectHTMLAttributes["value"]
   name: SelectHTMLAttributes["name"]
   items: readonly Record<string, unknown>[]
+  mandatory?: boolean
   itemValue?: string
   itemText?: string
   label?: string | null
 }
-const props = withDefaults(defineProps<Props>(), { label: null, itemValue: "value", itemText: "name" });
+const props = withDefaults(defineProps<Props>(), {
+  mandatory: false,
+  itemValue: "value",
+  itemText: "name",
+  label: null
+});
 const emit = defineEmits<{ "update:modelValue": [value: Props["modelValue"]] }>();
 const model = useVModel(props, "modelValue", emit, { defaultValue: "" });
+
+onBeforeMount(() => {
+  if (props.mandatory && isNullish(model.value)) model.value = props.items[0][props.itemValue];
+});
 </script>
 <style lang="scss">
 .input-select {

src/components/modals/settings-modal.vue

@@ -24,6 +24,10 @@
             Display badges
           </label>
         </fieldset>
+        <fieldset>
+          <legend>NPM</legend>
+          <input-select v-model="form.packageBrowser" :items="PACKAGE_BROWSERS" name="packageBrowser" mandatory />
+        </fieldset>
         <fieldset>
           <legend>GitHub API</legend>
           <ol v-if="!form.authToken">
@@ -71,6 +75,7 @@ import { deepCopy } from "@/helpers/object";
 import { fetchCurrentUser, setAuthToken } from "@/service/octokit";
 import { useSettingsStore } from "@/store/settings";
 import ImportExport from "@/components/import-export.vue";
+import InputSelect from "@/components/input-select.vue";
 
 const dialogRef = useTemplateRef("dialogElement");
 const { open, close } = useDialog(dialogRef);
@@ -90,6 +95,11 @@ watch(() => settings.value.theme, (theme) => {
   document.documentElement.setAttribute("data-theme", theme);
 }, { immediate: true });
 
+const PACKAGE_BROWSERS = [
+  { value: "npmjs.org", name: "npmjs.org" },
+  { value: "npmx.dev", name: "npmx.dev" }
+] as const;
+
 async function setUsername(): Promise<void> {
   const user = await fetchCurrentUser();
   if (user) form.username = user.login;

src/helpers/validate.ts

@@ -12,3 +12,7 @@ export function isValidJSON(payload: string): boolean {
 export function isRequestError(payload: unknown): payload is RequestError {
   return !!payload && typeof payload === "object" && "status" in payload;
 }
+
+export function isNullish(value: unknown): value is null | undefined {
+  return value === null || value === undefined;
+}

src/pages/dependencies.vue

@@ -38,10 +38,10 @@
                 <icon-x />
               </button>
               <a
-                :href="`https://npmjs.org/${dep}`"
+                :href="`https://${settings.packageBrowser}/${dep}`"
                 target="_blank"
                 rel="noopener noreferrer"
-                :title="`Go to ${dep} on npm`"
+                :title="`Go to ${dep} on ${settings.packageBrowser}`"
                 class="text-truncate"
               >
                 {{ dep }}

src/store/settings.ts

@@ -1,12 +1,14 @@
 import { createGlobalState, useLocalStorage } from "@vueuse/core";
 import { useRegisterSW } from "virtual:pwa-register/vue";
 
+export type PackageBrowser = "npmjs.org" | "npmx.dev";
 type Theme = "github" | "aqua" | "cream" | "mint" | "rose" | "departure";
 export interface SettingsStore {
   authToken: string
   username: string
   displayOwner: boolean
   displayBadges: boolean
+  packageBrowser: PackageBrowser
   theme: Theme
 }
 
@@ -15,6 +17,7 @@ const DEFAULT_STORE: SettingsStore = {
   username: "",
   displayOwner: true,
   displayBadges: true,
+  packageBrowser: "npmjs.org",
   theme: "github"
 };