checkboxes with default values

src/views/AddMerchView.vue

@@ -1,11 +1,50 @@
 <script setup>
 
 import router from '@/router/index.js'
+import { computed, ref } from 'vue'
 
 const addMerch = async () => {
   router.push({ name: 'collection' })
 }
 
+const mandarakeLink = 'https://order.mandarake.co.jp/order/listPage/list?soldOut=1&keyword='
+
+const name = ref('')
+
+// surugaya block
+const checkCookie = ref(true)
+const surugayaDefaultCookieValues = ref('safe_search_expired=2;safe_search_option=3')
+const surugayaCustomCookieValues = ref('')
+
+const cookieValue = computed({
+  get() {
+    return checkCookie.value ? surugayaDefaultCookieValues.value : surugayaCustomCookieValues.value
+  },
+  set(newValue) {
+    if (!checkCookie.value) {
+      surugayaCustomCookieValues.value = newValue
+    }
+  }
+})
+
+// mandarake block
+const checkAutoComplete = ref(true)
+const customLink = ref('')
+
+const mandarakeAutocomplete = computed(() => {
+  return `${mandarakeLink}${name.value}`
+})
+
+const inputValue = computed({
+  get() {
+    return checkAutoComplete.value ? mandarakeAutocomplete.value : customLink.value
+  },
+  set(newValue) {
+    if (!checkAutoComplete.value) {
+      customLink.value = newValue
+    }
+  }
+})
 </script>
 
 <template>
@@ -14,19 +53,30 @@ const addMerch = async () => {
       <n-divider title-placement="left">Main</n-divider>
       <div class="mb-20">
         <h3>Name</h3>
-        <n-input class="mt-10" clearable placeholder="Name" />
+        <n-input class="mt-10" clearable placeholder="Name" v-model:value="name" />
       </div>
 
       <n-divider title-placement="left">Origins</n-divider>
       <div>
         <h3>Surugaya</h3>
         <n-input class="mt-10" clearable placeholder="Link" />
-        <n-input class="mt-10" clearable placeholder="Cookie values" />
+        <n-input
+          class="mt-10"
+          clearable
+          placeholder="Cookie values"
+          v-model:value="cookieValue"
+        />
+        <n-checkbox v-model:checked="checkCookie">Default values</n-checkbox>
       </div>
 
       <div>
         <h3>Mandarake</h3>
-        <n-input class="mt-10" clearable placeholder="Link" />
+        <n-input
+          v-model:value="inputValue"
+          class="mt-10"
+          clearable
+          placeholder="Link" />
+        <n-checkbox v-model:checked="checkAutoComplete">Auto-complete link</n-checkbox>
       </div>
 
       <div class="mt-10 c-center">