refactor: replace UButton & UIcon component

OsmanthusBeer · Nov 6, 2023 · 34d10be · 34d10be
1 parent da72894
commit 34d10be
Show file tree

Hide file tree

Showing 14 changed files with 70 additions and 67 deletions.
diff --git a/components/ApiCard.vue b/components/ApiCard.vue
@@ -41,6 +41,6 @@ async function onDeleteApi() {
       <UIApiMethod :method="method" />
       <p>{{ endpoint }}</p>
     </div>
-    <UIcon name="i-heroicons-trash" class="cursor-pointer" @click.stop="onDeleteApi" />
+    <Icon icon="heroicons:trash" class="cursor-pointer" @click.stop="onDeleteApi" />
   </NuxtLink>
 </template>
diff --git a/components/CollectionCreateModal.vue b/components/CollectionCreateModal.vue
@@ -23,10 +23,10 @@ const schema = z.object({
 })
 type Schema = z.output<typeof schema>
 
-const submiting = ref(false)
+const submitting = ref(false)
 async function onSubmit(event: FormSubmitEvent<Schema>) {
   try {
-    submiting.value = true
+    submitting.value = true
     await $client.protected.collectionCreate.mutate({
       projectId: props.projectId,
       name: event.data.name,
@@ -39,7 +39,7 @@ async function onSubmit(event: FormSubmitEvent<Schema>) {
     toast.add({ title: error.message, color: 'red' })
   }
   finally {
-    submiting.value = false
+    submitting.value = false
   }
 }
 </script>
@@ -60,10 +60,9 @@ async function onSubmit(event: FormSubmitEvent<Schema>) {
           <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
             Create Collection
           </h3>
-          <UButton
-            color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1"
-            @click="modelValue = false"
-          />
+          <button class="btn btn-xs -my-1" @click="modelValue = false">
+            <Icon icon="heroicons:x-mark-20-solid" />
+          </button>
         </div>
       </template>
       <UForm
@@ -75,12 +74,12 @@ async function onSubmit(event: FormSubmitEvent<Schema>) {
           <UInput v-model="state.name" placeholder="Input collection name" autofocus />
         </UFormGroup>
         <div class="flex justify-end gap-4">
-          <UButton color="gray" variant="solid" @click="modelValue = false">
+          <button class="btn btn-sm btn-neutral" @click="modelValue = false">
             Cancel
-          </UButton>
-          <UButton type="submit" :loading="submiting">
-            Confrim
-          </UButton>
+          </button>
+          <button :loading="submitting" class="btn btn-sm btn-neutral" type="submit">
+            Confirm
+          </button>
         </div>
       </UForm>
     </UCard>

diff --git a/components/Header.vue b/components/Header.vue
@@ -74,9 +74,11 @@ const dropdownItems = computed(() => ([
       </NuxtLink>
     </ul>
 
-    <ColorModeButton />
+    <UIThemeButton />
 
-    <UButton to="https://github.com/OsmanthusBeer/apibeer" icon="i-mdi-github" variant="ghost" aria-label="Github" />
+    <NuxtLink class="btn btn-ghost" to="https://github.com/OsmanthusBeer/apibeer">
+      <Icon icon="mdi:github" />
+    </NuxtLink>
 
     <div class="flex ml-6 pl-6 border-l">
       <UDropdown
@@ -96,9 +98,9 @@ const dropdownItems = computed(() => ([
           </div>
         </template>
       </UDropdown>
-      <UButton v-else to="/login">
+      <button v-else class="btn btn-neutral" to="/login">
         Login
-      </UButton>
+      </button>
     </div>
   </div>
 </template>
diff --git a/components/ModalInvite.vue b/components/ModalInvite.vue
@@ -68,7 +68,9 @@ function onInvite() {
             <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
               Invite member
             </h3>
-            <UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="modelValue = false" />
+            <button class="btn btn-ghost" @click="modelValue = false">
+              <Icon icon="heroicons:x-mark-20-solid" />
+            </button>
           </div>
         </template>
         <UCommandPalette
@@ -84,13 +86,13 @@ function onInvite() {
           :fuse="{ resultLimit: 6, fuseOptions: { threshold: 0.1 } }"
           @input="onInput"
         />
-        <div class="mt-4 text-right">
-          <UButton class="" :disabled="!selected.length" @click="onInvite">
-            Invite
-          </UButton>
-          <UButton variant="outline" class="ml-4" @click="modelValue = false">
+        <div class="mt-4 flex gap-4 justify-end">
+          <button class="btn btn-neutral" @click="modelValue = false">
             Cancel
-          </UButton>
+          </button>
+          <button class="btn btn-ghost" :disabled="!selected.length" @click="onInvite">
+            Invite
+          </button>
         </div>
       </UCard>
     </UModal>

diff --git a/components/ModalTeamCreate.vue b/components/ModalTeamCreate.vue
@@ -70,7 +70,9 @@ async function submit(event: FormSubmitEvent<any>) {
             <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
               Create Team
             </h3>
-            <UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="modelValue = false" />
+            <button class="btn btn-ghost" @click="modelValue = false">
+              <Icon icon="heroicons:x-mark-20-solid" />
+            </button>
           </div>
         </template>
         <UForm
@@ -88,9 +90,9 @@ async function submit(event: FormSubmitEvent<any>) {
           </UFormGroup>
 
           <div class="mt-4 text-right">
-            <UButton type="submit" class="">
+            <button type="submit" class="btn btn-neutral">
               Submit
-            </UButton>
+            </button>
           </div>
         </UForm>
       </UCard>

diff --git a/components/ProjectList.vue b/components/ProjectList.vue
@@ -15,9 +15,9 @@ const { pending, error, data: projects } = $client.protected.projectList.useQuer
 <template>
   <div class="flex items-center my-8">
     <UInput class="w-44 mr-4" icon="i-heroicons-magnifying-glass-20-solid" size="sm" color="white" :trailing="false" />
-    <UButton :to="`/dashboard/p/create?tid=${teamId}`">
+    <NuxtLink class="btn btn-sm btn-neutral" :to="`/dashboard/p/create?tid=${teamId}`">
       Create Project
-    </UButton>
+    </NuxtLink>
   </div>
   <div v-if="pending" class="grid grid-cols-4 gap-4">
     <UCard v-for="n in 4" :key="n">
@@ -53,7 +53,7 @@ const { pending, error, data: projects } = $client.protected.projectList.useQuer
         </UCard>
       </NuxtLink>
       <NuxtLink :to="`/dashboard/project/${project.id}/edit`">
-        <UIcon class="absolute top-4 right-4" name="i-mdi-cog" />
+        <Icon icon="mdi:cog" class="absolute top-4 right-4" />
       </NuxtLink>
     </div>
   </div>

diff --git a/components/TeamMembers.vue b/components/TeamMembers.vue
@@ -21,9 +21,9 @@ function inviteMembers() {
   <ModalInvite v-model="modalInvite" :team-id="props.teamId" />
   <div class="flex items-center my-8">
     <UInput class="w-44 mr-4" icon="i-heroicons-magnifying-glass-20-solid" size="sm" color="white" :trailing="false" />
-    <UButton @click="inviteMembers">
+    <button class="btn btn-sm btn-neutral" @click="inviteMembers">
       Invite Members
-    </UButton>
+    </button>
   </div>
   <div v-if="pending" class="grid grid-cols-4 gap-4">
     <UCard v-for="n in 4" :key="n">

diff --git a/components/UIApiInput.vue b/components/UIApiInput.vue
@@ -11,18 +11,22 @@ const endpoint = defineModel<string>('endpoint', { default: '' })
 const saving = defineModel<boolean>('saving', { default: false })
 const sending = defineModel<boolean>('sending', { default: false })
 
-const options = ref(ApiOptions)
+const methodOptions = ref(ApiOptions)
 </script>
 
 <template>
   <div class="w-full flex gap-1">
-    <USelectMenu v-model="method" :options="options" />
-    <UInput v-model="endpoint" class="w-full" placeholder="https://echo.hoppscotch.io" />
-    <UButton :loading="saving" @click="$emit('save')">
+    <select v-model="method" class="select select-sm select-bordered">
+      <option v-for="option in methodOptions" :key="option">
+        {{ option }}
+      </option>
+    </select>
+    <input v-model="endpoint" class="input input-sm input-bordered w-full" placeholder="https://echo.hoppscotch.io">
+    <button :loading="saving" class="btn btn-sm btn-neutral" @click="$emit('save')">
       Save
-    </UButton>
-    <UButton :loading="sending" @click="$emit('send')">
+    </button>
+    <button :loading="sending" class="btn btn-sm btn-neutral" @click="$emit('send')">
       Send
-    </UButton>
+    </button>
   </div>
 </template>
diff --git a/components/ColorModeButton.vue → components/UIThemeButton.vue b/components/ColorModeButton.vue → components/UIThemeButton.vue
@@ -13,15 +13,12 @@ const isDark = computed({
 
 <template>
   <ClientOnly>
-    <UButton
-      :icon="isDark ? 'i-heroicons-moon-20-solid' : 'i-heroicons-sun-20-solid'"
-      variant="ghost"
-      aria-label="Theme"
-      @click="isDark = !isDark"
-    />
-
-    <template #fallback>
-      <div class="w-8 h-8" />
-    </template>
+    <button class="btn btn-ghost">
+      <Icon
+        :icon="isDark ? 'heroicons:moon-20-solid' : 'heroicons:sun-20-solid'"
+        class="cursor-pointer"
+        @click="isDark = !isDark"
+      />
+    </button>
   </ClientOnly>
 </template>
diff --git a/pages/dashboard/p/[id]/edit.vue b/pages/dashboard/p/[id]/edit.vue
@@ -111,12 +111,12 @@ async function onDelete() {
           <URadio v-model="project.visibility" label="Public" value="public" help="Anyone on the internet can see this project" />
         </UFormGroup>
         <div class="flex justify-end gap-4">
-          <UButton color="red" :loading="deleting" @click="onDelete">
+          <button class="btn btn-sm btn-error" :loading="deleting" @click="onDelete">
             Delete
-          </UButton>
-          <UButton type="submit" :loading="submiting">
+          </button>
+          <button class="btn btn-sm btn-neutral" type="submit" :loading="submiting">
             Submit
-          </UButton>
+          </button>
         </div>
       </UForm>
     </template>

diff --git a/pages/dashboard/p/create.vue b/pages/dashboard/p/create.vue
@@ -21,10 +21,10 @@ const schema = z.object({
 })
 type Schema = z.output<typeof schema>
 
-const submiting = ref(false)
+const submitting = ref(false)
 async function onSubmit(event: FormSubmitEvent<Schema>) {
   const { name, description, visibility } = event.data
-  submiting.value = true
+  submitting.value = true
   try {
     await $client.protected.projectCreate.mutate({
       name,
@@ -50,7 +50,7 @@ async function onSubmit(event: FormSubmitEvent<Schema>) {
     toast.add({ title: 'Unknown error', color: 'red' })
   }
   finally {
-    submiting.value = false
+    submitting.value = false
   }
 }
 </script>
@@ -75,9 +75,9 @@ async function onSubmit(event: FormSubmitEvent<Schema>) {
         <URadio v-model="state.visibility" label="Public" value="public" help="Anyone on the internet can see this project" />
       </UFormGroup>
       <div class="flex justify-end">
-        <UButton type="submit" :loading="submiting">
+        <button class="btn btn-sm btn-neutral" type="submit" :loading="submitting">
           Submit
-        </UButton>
+        </button>
       </div>
     </UForm>
   </div>

diff --git a/pages/dashboard/t/[id]/invitations.vue b/pages/dashboard/t/[id]/invitations.vue
@@ -45,8 +45,8 @@ function sendInvitation() {
 
     <div class="w-full h-[1px] bg-gray-200 mt-2 mb-4" />
 
-    <UButton type="primary" :loading="sending" class="mx-auto" :disabled="!selectedRole" @click="sendInvitation">
+    <button class="btn btn-sm btn-neutral mx-auto" type="primary" :loading="sending" :disabled="!selectedRole" @click="sendInvitation">
       Send invitation
-    </UButton>
+    </button>
   </div>
 </template>
diff --git a/pages/play.vue b/pages/play.vue
@@ -16,8 +16,5 @@ definePageMeta({
       <h3>## Client</h3>
       <p>NUXT_PUBLIC_GREETING: {{ $config.public.greeting }}</p>
     </div>
-
-    <h2>NuxtUI</h2>
-    <UButton>Button</UButton>
   </div>
 </template>
diff --git a/pages/project/[projectId].vue b/pages/project/[projectId].vue
@@ -44,9 +44,9 @@ async function onCollectionDelete(id: string) {
 <template>
   <Splitpanes class="w-full h-full flex gap-2">
     <Pane class="px-4 py-2 space-y-2 border" size="30">
-      <UButton @click="openModalCollectionCreate">
+      <button class="btn btn-neutral" @click="openModalCollectionCreate">
         Create Collection
-      </UButton>
+      </button>
       <CollectionCreateModal v-model="modalCollectionCreate" :project-id="projectId" @success="collectionsRefresh" />
 
       <div v-if="collectionsError">
@@ -58,8 +58,8 @@ async function onCollectionDelete(id: string) {
       <div v-else class="space-y-2">
         <UCard v-for="collection in collections" :key="collection.id" class="relative">
           <p>{{ collection.name }}</p>
-          <UIcon
-            name="i-heroicons-trash" class="w-4 h-4 absolute top-4 right-4 cursor-pointer"
+          <Icon
+            name="heroicons:trash" class="w-4 h-4 absolute top-4 right-4 cursor-pointer"
             @click="onCollectionDelete(collection.id)"
           />
         </UCard>