fix form cosmetics

components/BaseForm.vue

@@ -5,12 +5,14 @@ import * as yup from 'yup'
 
 const props = defineProps<{
   schema: yup.ObjectShape
+  initialValues: Record<string, any>
 }>()
 
 const emit = defineEmits(['submit'])
 
 const { handleSubmit } = useForm({
   validationSchema: toTypedSchema(yup.object(props.schema)),
+  initialValues: props.initialValues,
 })
 
 const onSubmit = handleSubmit((values) => {

components/FormField.vue

@@ -7,6 +7,7 @@ const props = defineProps<{
   label: string
   icon?: string
   description?: string
+  row?: boolean
 }>()
 
 const { errorMessage } = useField(() => props.name)
@@ -33,11 +34,11 @@ provide(formGroupExtras, {
     <div
       role="group"
       :aria-invalid="invalid"
-      :class="{ 'is-invalid': invalid }"
+      :class="{ 'is-invalid': invalid, 'flex-col': !row }"
       class="flex"
     >
       <slot name="label">
-        <label :id="name + '__label'" :for="name" class="block">
+        <label :id="name + '__label'" :for="name" class="block ml-1 mb-2">
           <Icon
             v-if="icon"
             :name="icon"

components/YButton.vue

@@ -5,6 +5,8 @@ const props = withDefaults(
     text?: string
     variant?: string
     icon?: string
+    iconSize: string
+    iconOnly: boolean
     block?: boolean
   }>(),
   {
@@ -12,6 +14,8 @@ const props = withDefaults(
     text: undefined,
     variant: 'primary',
     icon: undefined,
+    iconSize: '1.5em',
+    iconOnly: false,
     block: false,
   },
 )
@@ -21,6 +25,7 @@ const variantClass = computed(() => {
     primary: 'btn-primary',
     success: 'btn-success',
     info: 'btn-info',
+    error: 'btn-error',
   }[props.variant]
 })
 </script>
@@ -28,8 +33,8 @@ const variantClass = computed(() => {
 <template>
   <button class="btn" :class="[variantClass, { 'btn-block': block }]">
     <slot name="default">
-      <Icon v-if="icon" :name="icon" size="1.5em" aria-hidden="true" />
+      <Icon v-if="icon" :name="icon" :size="iconSize" aria-hidden="true" />
-      {{ text }}
+      <span :class="{ 'sr-only': iconOnly }">{{ text }}</span>
     </slot>
   </button>
 </template>

pages/login.vue

@@ -46,6 +46,7 @@ const schema = {
         :label="t('username')"
         icon="mdi:account-circle"
         class="mb-4"
+        row
       >
         <TextInput name="username" type="text" :placeholder="t('username')" />
       </FormField>
@@ -55,6 +56,7 @@ const schema = {
         :label="t('password')"
         icon="mdi:lock"
         class="mb-4"
+        row
       >
         <TextInput
           name="password"