refactor(gui-v2): replace vuetify form with ant form

packages/nc-gui-v2/app.vue

@@ -16,7 +16,7 @@ const signOut = () => {
 const toggleSidebar = useToggle($state.sidebarOpen)
 
 const sidebarOpen = computed({
-  get: () => !($state.sidebarOpen.value ?? true),
+  get: () => !$state.sidebarOpen.value,
   set: (val) => toggleSidebar(val),
 })
 </script>
@@ -87,7 +87,7 @@ const sidebarOpen = computed({
     <a-layout>
       <a-layout-sider
         v-model:collapsed="sidebarOpen"
-        width="300"
+        :width="sidebarOpen ? 300 : 0"
         collapsed-width="0"
         class="bg-white dark:!bg-gray-800 border-r-1 border-gray-200 dark:!border-gray-600 h-full"
         :trigger="null"

packages/nc-gui-v2/assets/style-v2.scss

@@ -49,8 +49,8 @@ a {
   @apply prose text-primary underline hover:opacity-75 dark:(text-secondary) hover:(opacity-75);
 }
 
-h1, h2, h3, h4, h5, h6 {
-  @apply text-black dark:(text-white);
+h1, h2, h3, h4, h5, h6, p, label, button, textarea, select {
+  @apply dark:(!text-white);
 }
 
 .v-field__field {
@@ -68,3 +68,4 @@ h1, h2, h3, h4, h5, h6 {
 :root {
   --header-height: 64px;
 }
+

packages/nc-gui-v2/components/general/NocoIcon.vue

@@ -8,7 +8,7 @@ const { width = 90, height = 90 } = defineProps<Props>()
 </script>
 
 <template>
-  <div :style="{ left: `calc(50% - ${width / 2}px)`, top: `-${height * 0.6}px` }" class="absolute rounded-lg bg-primary">
+  <div :style="{ left: `calc(50% - ${width / 2}px)`, top: `-${height * 0.6}px` }" class="absolute rounded-lg !bg-primary">
     <img :width="width" :height="height" alt="NocoDB" src="~/assets/img/icons/512x512-trans.png" />
   </div>
 </template>

packages/nc-gui-v2/pages/signin.vue

@@ -30,8 +30,6 @@ let error = $ref<string | null>(null)
 
 const valid = ref()
 
-const formValidator = ref()
-
 const form = reactive({
   email: '',
   password: '',
@@ -71,11 +69,11 @@ const resetError = () => {
 
 <template>
   <NuxtLayout>
-    <v-form
-      ref="formValidator"
-      v-model="valid"
+    <a-form
+      v-model="form"
+      layout="vertical"
       class="h-[calc(100%_+_90px)] min-h-[600px] flex justify-center items-center"
-      @submit.prevent="signIn"
+      @finish="signIn"
     >
       <div class="h-full w-full flex flex-col flex-wrap justify-center items-center">
         <div
@@ -91,29 +89,25 @@ const resetError = () => {
             </div>
           </Transition>
 
-          <v-text-field
-            id="email"
-            v-model="form.email"
-            class="bg-white dark:!bg-gray-900"
-            :rules="formRules.email"
-            :label="$t('labels.email')"
-            :placeholder="$t('labels.email')"
-            :persistent-placeholder="true"
-            type="text"
-            @focus="resetError"
-          />
-
-          <v-text-field
-            id="password"
-            v-model="form.password"
-            class="bg-white dark:!bg-gray-900"
-            :rules="formRules.password"
-            :label="$t('labels.password')"
-            :placeholder="$t('labels.password')"
-            :persistent-placeholder="true"
-            type="password"
-            @focus="resetError"
-          />
+          <a-form-item :label="$t('labels.email')" name="email" :rules="formRules.email">
+            <a-input
+              v-model="form.email"
+              size="large"
+              class="bg-white dark:!bg-gray-900"
+              :placeholder="$t('labels.email')"
+              @focus="resetError"
+            />
+          </a-form-item>
+
+          <a-form-item :label="$t('labels.password')" name="password" :rules="formRules.password">
+            <a-input
+              v-model="form.password"
+              size="large"
+              class="bg-white dark:!bg-gray-900"
+              :placeholder="$t('labels.password')"
+              @focus="resetError"
+            />
+          </a-form-item>
 
           <div class="hidden md:block self-end mx-8">
             <nuxt-link class="prose-sm" to="/forgot-password">
@@ -147,6 +141,6 @@ const resetError = () => {
           </div>
         </div>
       </div>
-    </v-form>
+    </a-form>
   </NuxtLayout>
 </template>