@ramathibodi/nuxt-commons 0.1.73 → 0.1.75

package/dist/runtime/components/form/Login.vue

@@ -1,131 +1,143 @@
-<script lang="ts" setup>
-import { ref, watch, withDefaults } from 'vue'
-
-interface Props {
-  title?: string
-  btnSubmit?: string
-  imgLogo?: string
-  errorMessages?: string
-  loading?: boolean
-  hint?: string
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  title: 'Login Ramathibodi',
-  btnSubmit: 'เข้าสู่ระบบ',
-  imgLogo: '',
-  errorMessages: '',
-  loading: false,
-  hint: '',
-})
-
-interface LoginData {
-  username: string
-  password: string
-}
-
-const formValid = ref<boolean>(false)
-const loginData = ref<LoginData>({ username: '', password: '' })
-const emit = defineEmits(['update:modelValue'])
-
-const errorText = ref<string>('')
-
-const clearErrorMessages = () => {
-  errorText.value = ''
-}
-
-watch(() => props.errorMessages, (newVal) => {
-  if (errorText.value !== newVal) {
-    errorText.value = newVal
-  }
-})
-
-const onSubmit = () => {
-  if (!formValid.value) return
-  emit('update:modelValue', { ...loginData.value })
-}
-</script>
-
-<template>
-  <v-row
-    justify="center"
-    align="center"
-  >
-    <v-col
-      cols="12"
-      xs="12"
-      sm="8"
-      md="6"
-      lg="6"
-      xl="4"
-      align-self="center"
-    >
-      <v-sheet
-        class="pa-3"
-        rounded
-      >
-        <v-card class="mx-auto px-6 py-6">
-          <v-img
-            :src="props.imgLogo"
-            cover
-          />
-          <v-card-title class="text-primary text-center">
-            {{ props.title }}
-          </v-card-title>
-          <v-form
-            v-model="formValid"
-            @submit.prevent="onSubmit"
-          >
-            <form-pad
-              ref="formPadTemplate"
-              v-model="loginData"
-            >
-              <template #default="{ data, rules }">
-                <v-text-field
-                  ref="usernameField"
-                  v-model="data.username"
-                  color="primary"
-                  label="ชื่อผู้ใช้งาน (Username)"
-                  clearable
-                  :rules="[rules.require('กรุณาระบุ')]"
-                  autofocus
-                  @update:model-value="clearErrorMessages()"
-                />
-                <v-text-field
-                  ref="passwordField"
-                  v-model="data.password"
-                  color="primary"
-                  label="รหัสผ่าน (Password)"
-                  type="password"
-                  clearable
-                  :rules="[rules.require('กรุณาระบุ')]"
-                  autofocus
-                  @update:model-value="clearErrorMessages()"
-                />
-              </template>
-            </form-pad>
-            <div class="text-body-2 text-error">
-              {{ errorText }}
-            </div>
-            <div class="my-3">
-              <slot name="hint">
-                {{ props.hint }}
-              </slot>
-            </div>
-            <v-btn
-              :disabled="!formValid"
-              :loading="props.loading"
-              block
-              color="primary"
-              size="large"
-              type="submit"
-              variant="elevated"
-            >
-              {{ props.btnSubmit }}
-            </v-btn>
-          </v-form>
-        </v-card>
-      </v-sheet>
-    </v-col>
-  </v-row>
-</template>
+<script lang="ts" setup>
+/**
+ * FormLogin is a schema-driven form field component that binds model data, renders field UI, and emits normalized updates.
+ * This doc block is consumed by vue-docgen for generated API documentation.
+ */
+import { ref, watch, withDefaults } from 'vue'
+
+interface Props {
+  title?: string // Title text displayed in the component header or dialog.
+  btnSubmit?: string // Label text displayed on the login submit button.
+  imgLogo?: string // Logo image URL shown above the login form.
+  errorMessages?: string // Validation or authentication error message displayed to the user.
+  loading?: boolean // Displays loading state and disables actions while pending.
+  hint?: string // Helper text displayed under input fields.
+}
+
+/**
+ * Public props accepted by FormLogin.
+ * Document each prop field with intent, defaults, and side effects for clear generated docs.
+ */
+const props = withDefaults(defineProps<Props>(), {
+  title: 'Login Ramathibodi',
+  btnSubmit: 'เข้าสู่ระบบ',
+  imgLogo: '',
+  errorMessages: '',
+  loading: false,
+  hint: '',
+})
+
+interface LoginData {
+  username: string
+  password: string
+}
+
+const formValid = ref<boolean>(false)
+const loginData = ref<LoginData>({ username: '', password: '' })
+/**
+ * Custom events emitted by FormLogin.
+ * Parents can listen to these events to react to user actions and internal state changes.
+ */
+const emit = defineEmits(['update:modelValue'])
+
+const errorText = ref<string>('')
+
+const clearErrorMessages = () => {
+  errorText.value = ''
+}
+
+watch(() => props.errorMessages, (newVal) => {
+  if (errorText.value !== newVal) {
+    errorText.value = newVal
+  }
+})
+
+const onSubmit = () => {
+  if (!formValid.value) return
+  emit('update:modelValue', { ...loginData.value })
+}
+</script>
+
+<template>
+  <v-row
+    justify="center"
+    align="center"
+  >
+    <v-col
+      cols="12"
+      xs="12"
+      sm="8"
+      md="6"
+      lg="6"
+      xl="4"
+      align-self="center"
+    >
+      <v-sheet
+        class="pa-3"
+        rounded
+      >
+        <v-card class="mx-auto px-6 py-6">
+          <v-img
+            :src="props.imgLogo"
+            cover
+          />
+          <v-card-title class="text-primary text-center">
+            {{ props.title }}
+          </v-card-title>
+          <v-form
+            v-model="formValid"
+            @submit.prevent="onSubmit"
+          >
+            <form-pad
+              ref="formPadTemplate"
+              v-model="loginData"
+            >
+              <template #default="{ data, rules }">
+                <v-text-field
+                  ref="usernameField"
+                  v-model="data.username"
+                  color="primary"
+                  label="ชื่อผู้ใช้งาน (Username)"
+                  clearable
+                  :rules="[rules.require('กรุณาระบุ')]"
+                  autofocus
+                  @update:model-value="clearErrorMessages()"
+                />
+                <v-text-field
+                  ref="passwordField"
+                  v-model="data.password"
+                  color="primary"
+                  label="รหัสผ่าน (Password)"
+                  type="password"
+                  clearable
+                  :rules="[rules.require('กรุณาระบุ')]"
+                  autofocus
+                  @update:model-value="clearErrorMessages()"
+                />
+              </template>
+            </form-pad>
+            <div class="text-body-2 text-error">
+              {{ errorText }}
+            </div>
+            <div class="my-3">
+              <slot name="hint">
+                {{ props.hint }}
+              </slot>
+            </div>
+            <v-btn
+              :disabled="!formValid"
+              :loading="props.loading"
+              block
+              color="primary"
+              size="large"
+              type="submit"
+              variant="elevated"
+            >
+              {{ props.btnSubmit }}
+            </v-btn>
+          </v-form>
+        </v-card>
+      </v-sheet>
+    </v-col>
+  </v-row>
+</template>