@ramathibodi/nuxt-commons 0.1.14 → 0.1.16

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

@@ -1,32 +1,32 @@
-<script lang="ts" setup>
-import { watch } from 'vue'
-import { cloneDeep } from 'lodash-es'
-
-interface Props {
-  itemValue?: any
-  hook?: Function
-  modelValue?: any
-}
-
-const props = defineProps<Props>()
-const emit = defineEmits(['update:modelValue'])
-
-watch(() => props.itemValue, (newValue) => {
-  const resultValue = cloneDeep(newValue)
-  if (props.hook) {
-    Promise.resolve(props.hook(resultValue, props.modelValue)).then((result) => {
-      emit('update:modelValue', result)
-    }).catch(e => void e)
-  }
-  else {
-    emit('update:modelValue', resultValue)
-  }
-}, { deep: true, immediate: true })
-</script>
-
-<template>
-  <input
-    type="hidden"
-    v-bind="$attrs"
-  >
-</template>
+<script lang="ts" setup>
+import { watch } from 'vue'
+import { cloneDeep } from 'lodash-es'
+
+interface Props {
+  itemValue?: any
+  hook?: Function
+  modelValue?: any
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits(['update:modelValue'])
+
+watch(() => props.itemValue, (newValue) => {
+  const resultValue = cloneDeep(newValue)
+  if (props.hook) {
+    Promise.resolve(props.hook(resultValue, props.modelValue)).then((result) => {
+      emit('update:modelValue', result)
+    }).catch(e => void e)
+  }
+  else {
+    emit('update:modelValue', resultValue)
+  }
+}, { deep: true, immediate: true })
+</script>
+
+<template>
+  <input
+    type="hidden"
+    v-bind="$attrs"
+  >
+</template>

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

@@ -1,131 +1,131 @@
-<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>
+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>