@ramathibodi/nuxt-commons 0.0.1

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

@@ -0,0 +1,187 @@
+<script lang="ts" setup>
+import { uniqWith, isEqual } from 'lodash-es'
+import { ref, watch } from 'vue'
+import { VTextField } from 'vuetify/components/VTextField'
+import { useAlert } from '../../composables/alert'
+
+const alert = useAlert()
+
+interface Base64String {
+  base64String?: string
+  fileName: string
+  id?: number
+}
+
+interface Props extends /* @vue-ignore */ InstanceType<typeof VTextField['$props']> {
+  accept?: string
+  multiple?: boolean
+  maxSize?: number
+  modelValue?: Base64String[]
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  accept: '*',
+  multiple: false,
+  maxSize: 5,
+})
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: Base64String[]): void
+}>()
+
+const allFiles = ref<File[]>([])
+const allAssets = ref<Base64String[]>([])
+const combinedBase64String = ref<Base64String[]>([])
+const fileInput = ref()
+
+function openWindowUpload() {
+  if (props.multiple || (!allFiles.value?.length && !allAssets.value?.length)) {
+    fileInput.value?.click()
+  }
+}
+
+function addFiles(files: File | File[]) {
+  if (Array.isArray(files)) allFiles.value?.push(...files)
+  else allFiles.value?.push(files)
+}
+
+function removeFileByIndex(i: number | string) {
+  const index = Number(i)
+  if (Array.isArray(allFiles.value) && allFiles.value.length) {
+    if (index >= 0 && index < allFiles.value.length) allFiles.value.splice(index, 1)
+  }
+}
+
+function removeAssetByIndex(i: number | string) {
+  const index = Number(i)
+  if (Array.isArray(allAssets.value) && allAssets.value.length) {
+    if (index >= 0 && index < allAssets.value.length) allAssets.value.splice(index, 1)
+  }
+}
+
+function fileToBase64(file: File) {
+  const maxSize = props.maxSize * 1048576
+
+  return new Promise<Base64String>((resolve, reject) => {
+    if (file.size > maxSize) reject (`File (${file.name}) size exceeds the ${props.maxSize} MB limit.`)
+
+    const reader = new FileReader()
+    reader.onload = function (event) {
+      resolve({ fileName: file.name, base64String: event.target?.result as string })
+    }
+    reader.onerror = function (error) {
+      reject(error)
+    }
+    reader.readAsDataURL(file)
+  })
+}
+
+function base64ToFile(base64Data: string, filename: string) {
+  // Extract content type and base64 payload from the Base64 string
+  const matchResult = base64Data.match(/data:([^;]*);base64,(.*)/)
+  if (matchResult === null) {
+    return undefined
+  }
+  const [contentType, base64Payload] = matchResult.slice(1)
+
+  // Convert base64 to a Uint8Array
+  const binaryStr = atob(base64Payload)
+  const len = binaryStr.length
+  const bytes = new Uint8Array(len)
+  for (let i = 0; i < len; i++) {
+    bytes[i] = binaryStr.charCodeAt(i)
+  }
+
+  return new File([bytes], filename, { type: contentType })
+}
+
+watch(
+  () => props.modelValue,
+  () => {
+    if (props.modelValue && Array.isArray(props.modelValue)) {
+      allAssets.value = props.modelValue.filter((item: Base64String) => item.id !== undefined)
+      allFiles.value = props.modelValue.filter((item: Base64String) => item.id === undefined && item.base64String !== undefined).map((base64: Base64String) => base64ToFile(base64.base64String as string, base64.fileName)).filter((item: File | undefined) => item !== undefined) as File[]
+    }
+    else {
+      allAssets.value = []
+      allFiles.value = []
+    }
+  },
+  { deep: true, immediate: true },
+)
+
+watch([allAssets, allFiles], () => {
+  if (allFiles.value && allFiles.value?.length) {
+    const base64Promises = allFiles.value?.map(file => fileToBase64(file))
+
+    Promise.all(base64Promises).then((base64Strings) => {
+      combinedBase64String.value = [...allAssets.value, ...base64Strings]
+    }).catch((error) => {
+      alert?.addAlert({ message: error, alertType: 'error' })
+      allFiles.value = []
+    })
+  }
+  else {
+    combinedBase64String.value = [...allAssets.value]
+  }
+}, { deep: true, immediate: true })
+
+watch(combinedBase64String, (newValue, oldValue) => {
+  if (!isEqual(newValue, oldValue)) {
+    emit('update:modelValue', uniqWith(newValue, isEqual))
+  }
+}, { deep: true })
+</script>
+
+<template>
+  <v-text-field
+    v-bind="$attrs"
+    label="Upload files"
+    readonly
+    :dirty="combinedBase64String.length>0"
+    v-on="(combinedBase64String.length>0) ? {} : { click: openWindowUpload }"
+  >
+    <template #default>
+      <v-chip
+        v-for="(asset, index) in allAssets"
+        :key="asset"
+        color="green"
+        variant="flat"
+        closable
+        @click:close="removeAssetByIndex(index)"
+      >
+        {{ asset.fileName }}
+      </v-chip>
+      <v-chip
+        v-for="(file, index) in allFiles"
+        :key="file"
+        color="primary"
+        variant="flat"
+        closable
+        @click:close="removeFileByIndex(index)"
+      >
+        {{ file.name }}
+      </v-chip>
+    </template>
+
+    <template
+      v-if="combinedBase64String.length>0 && props.multiple"
+      #append-inner
+    >
+      <VBtn
+        variant="text"
+        :icon="true"
+        @click="openWindowUpload"
+      >
+        <v-icon>mdi mdi-plus</v-icon>
+      </VBtn>
+    </template>
+  </v-text-field>
+  <v-file-input
+    ref="fileInput"
+    :accept="props.accept"
+    :multiple="props.multiple"
+    style="display: none"
+    @update:modelValue="addFiles"
+  />
+</template>

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

@@ -0,0 +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>

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

@@ -0,0 +1,179 @@
+<script lang="ts" setup>
+/* eslint-disable @typescript-eslint/no-explicit-any,import/no-self-import */
+import { compile, defineComponent, inject, onMounted, ref, shallowRef, watch, computed, withDefaults } from 'vue'
+import { isObject } from 'lodash-es'
+import { watchDebounced } from '@vueuse/core'
+import { useRules } from '../../composables/utils/validation'
+import FormPad from './Pad.vue'
+
+interface Props {
+  modelValue?: object
+  template?: any
+  templateScript?: string
+  disabled?: boolean
+  readonly?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  disabled: false,
+  readonly: false,
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const disabled = ref(props.disabled)
+const readonly = ref(props.readonly)
+
+watch(() => props.disabled, (newValue) => {
+  disabled.value = newValue
+})
+
+watch(() => props.readonly, (newValue) => {
+  readonly.value = newValue
+})
+
+const { rules } = useRules()
+
+const trimmedTemplate = computed(() => props.template?.trim() || '')
+
+const templateScriptFunction = computed(() => {
+  let templateScript = props.templateScript?.trim() || 'return {}'
+  const pattern = /^\s*[{[].*[}\]]\s*$/
+  if (pattern.test(templateScript)) templateScript = 'return {}'
+  return Function('props', 'ctx', templateScript)
+})
+
+const formPad = ref()
+const formInjectKey = Symbol.for('vuetify:form')
+const formInjected = ref()
+
+const formData = ref<any>({})
+
+watch(formData, (newValue) => {
+  emit('update:modelValue', newValue)
+}, { deep: true })
+
+watch(() => props.modelValue, (newValue) => {
+  formData.value = isObject(newValue) ? newValue : {}
+}, { deep: true, immediate: true })
+
+const formComponent = shallowRef()
+
+function buildFormComponent() {
+  if (!trimmedTemplate.value) return
+  const originalConsoleError = console.warn
+  console.warn = (error) => { throw new Error(error) } // eslint-disable-line
+  try {
+    const componentTemplate = '<form-pad ref="formPadTemplate" v-model="formComponentData" :disabled="disabled" :readonly="readonly"><template v-slot="{ data,isDisabled,isReadonly,rules,formProvided }">' + trimmedTemplate.value + '</template></form-pad>'
+    compile(componentTemplate)
+    formComponent.value = defineComponent({
+      components: { FormPad },
+      props: {
+        modelValue: { type: Object, default: undefined },
+        disabled: { type: Boolean, default: false },
+        readonly: { type: Boolean, default: false },
+      },
+      emits: ['update:modelValue'],
+      setup(props, ctx) {
+        const formComponentData = ref<any>({})
+        const formPadTemplate = ref<any>({})
+        watch(formComponentData, (newValue) => {
+          ctx.emit('update:modelValue', newValue)
+        }, { deep: true })
+        watch(() => props.modelValue, (newValue) => {
+          formComponentData.value = isObject(newValue) ? newValue : {}
+        }, { deep: true, immediate: true })
+        const isValid = computed(() => formPadTemplate.value.isValid)
+        return {
+          formComponentData,
+          formPadTemplate,
+          reset: () => formPadTemplate.value.reset(),
+          validate: () => formPadTemplate.value.validate(),
+          resetValidate: () => formPadTemplate.value.resetValidate(),
+          isValid,
+          ...templateScriptFunction.value(props, ctx),
+        }
+      },
+      template: componentTemplate,
+    })
+  }
+  catch (e) {
+    formComponent.value = null
+    console.error(e)
+  }
+  console.warn = originalConsoleError
+}
+
+function reset() {
+  if (!formInjected.value) formPad.value.reset()
+  else formInjected.value.reset()
+}
+
+function validate() {
+  if (!formInjected.value) formPad.value.validate()
+  else formInjected.value.validate()
+}
+
+function resetValidate() {
+  if (!formInjected.value) formPad.value.resetValidate()
+  else formInjected.value.resetValidate()
+}
+
+const isValid = computed(() => {
+  validate()
+  return formInjected.value ? formInjected.value.isValid || false : formPad.value.isValid || false
+})
+
+onMounted(() => {
+  formInjected.value = inject(formInjectKey, false)
+  buildFormComponent()
+})
+
+watchDebounced(() => props.template, buildFormComponent, { debounce: 1000, maxWait: 5000 })
+watchDebounced(() => props.templateScript, buildFormComponent, { debounce: 1000, maxWait: 5000 })
+
+defineExpose({
+  isValid,
+  disabled,
+  readonly,
+  reset,
+  validate,
+  resetValidate,
+})
+</script>
+
+<template>
+  <v-form
+    v-if="!formInjected && !trimmedTemplate"
+    ref="formPad"
+    :disabled="disabled"
+    :readonly="readonly"
+  >
+    <template #default="formProvided">
+      <slot
+        :data="formData"
+        :form-provided="formProvided"
+        :is-disabled="disabled"
+        :is-readonly="readonly"
+        :rules="rules"
+      />
+    </template>
+  </v-form>
+  <template v-if="formInjected && !trimmedTemplate">
+    <slot
+      :data="formData"
+      :form-provided="formInjected"
+      :is-disabled="disabled"
+      :is-readonly="readonly"
+      :rules="rules"
+    />
+  </template>
+  <component
+    :is="formComponent"
+    v-if="trimmedTemplate"
+    ref="formPad"
+    v-model="formData"
+    :disabled="disabled"
+    :readonly="readonly"
+  />
+</template>

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

@@ -0,0 +1,186 @@
+<script lang="ts" setup>
+import { VueSignaturePad } from 'vue-signature-pad'
+import { type Ref, ref, onMounted, onBeforeUnmount, withDefaults } from 'vue'
+
+interface SignatureOptions {
+  penColor: string
+  minWidth?: number
+  maxWidth?: number
+}
+
+interface SignatureProps {
+  title?: string
+  titleConfirm?: string
+  modelValue: string
+}
+
+const props = withDefaults(defineProps<SignatureProps>(), {
+  title: 'Draw Your Signature',
+  titleConfirm: 'I Accept My Signature',
+})
+
+const signaturePadRef: Ref<any> = ref(null)
+const signatureData: Ref<string> = ref('')
+const colorOptions: string[] = ['#303F9F', '#1A2023', '#2E7D32', '#AC04BF']
+const defaultColor: string = colorOptions[0]
+const selectedColor: Ref<string> = ref(defaultColor)
+const signatureOptions: Ref<SignatureOptions> = ref({ penColor: defaultColor, minWidth: 0.5, maxWidth: 4 })
+const isDialogOpen: Ref<boolean> = ref(false)
+
+const undoSignature = (): void => {
+  signaturePadRef.value.undoSignature()
+}
+
+const clearSignature = (): void => {
+  signaturePadRef.value.clearSignature()
+}
+
+const closeDialog = (): void => {
+  isDialogOpen.value = false
+  signaturePadRef.value.clearSignature()
+  signaturePadRef.value.clearCacheImages()
+}
+
+const emit = defineEmits<{
+  (event: 'update:modelValue', value: string): void
+}>()
+
+const saveSignature = (): void => {
+  isDialogOpen.value = false
+  const { isEmpty, data } = signaturePadRef.value.saveSignature()
+  signatureData.value = isEmpty ? '' : data
+  emit('update:modelValue', signatureData.value)
+}
+
+const changePenColor = (color: string): void => {
+  selectedColor.value = color
+  signatureOptions.value = { penColor: color }
+}
+
+const openSignatureDialog = (): void => {
+  selectedColor.value = defaultColor
+  signatureOptions.value = { penColor: defaultColor }
+  isDialogOpen.value = true
+}
+
+const signaturePadHeight: Ref<string> = ref('')
+const updateSignaturePadHeight = () => {
+  const screenHeight = window.innerHeight
+  signaturePadHeight.value = `${screenHeight * 0.4}px`
+}
+
+onMounted(() => {
+  updateSignaturePadHeight()
+  window.addEventListener('resize', updateSignaturePadHeight)
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', updateSignaturePadHeight)
+})
+</script>
+
+<template>
+  <v-card
+    v-if="signatureData"
+    class="pa-2 mb-1"
+    color="grey-lighten-1"
+    variant="outlined"
+    @click="openSignatureDialog"
+  >
+    <v-img
+      :src="signatureData"
+      cover
+    />
+  </v-card>
+  <v-btn
+    append-icon="mdi mdi-draw-pen"
+    block
+    class="text-none"
+    color="primary"
+    variant="flat"
+    @click="openSignatureDialog"
+  >
+    {{ props.title }}
+  </v-btn>
+
+  <v-dialog
+    v-model="isDialogOpen"
+    height="auto"
+    persistent
+    width="100%"
+  >
+    <v-card>
+      <v-toolbar>
+        <v-toolbar-title class="text-no-wrap">
+          {{ props.title }}
+        </v-toolbar-title>
+        <v-btn
+          icon
+          @click="undoSignature"
+        >
+          <v-icon>fa-solid fa-arrow-rotate-left</v-icon>
+        </v-btn>
+        <v-btn
+          icon
+          @click="clearSignature"
+        >
+          <v-icon>fa-solid fa-trash</v-icon>
+        </v-btn>
+        <v-menu>
+          <template #activator="{ props : activatorProps }">
+            <v-btn
+              :color="selectedColor"
+              :icon="true"
+              v-bind="activatorProps"
+            >
+              <v-icon>fa-solid fa-paintbrush</v-icon>
+            </v-btn>
+          </template>
+          <v-list>
+            <v-row>
+              <v-col class="text-center">
+                <v-avatar
+                  v-for="(color, index) in colorOptions"
+                  :color="color"
+                  :value="color"
+                  class="mr-1"
+                  @click="changePenColor(color)"
+                  :key="index"
+                >
+                  <v-icon color="white">
+                    {{ selectedColor === color ? 'fa-solid fa-check' : '' }}
+                  </v-icon>
+                </v-avatar>
+              </v-col>
+            </v-row>
+          </v-list>
+        </v-menu>
+        <v-btn
+          icon
+          @click="closeDialog"
+        >
+          <v-icon>fa-solid fa-xmark</v-icon>
+        </v-btn>
+      </v-toolbar>
+      <v-card-text>
+        <VueSignaturePad
+          ref="signaturePadRef"
+          :options="signatureOptions"
+          :height="signaturePadHeight"
+        />
+      </v-card-text>
+      <v-divider />
+      <v-card-actions class="justify-center">
+        <v-btn
+          class="text-none"
+          color="success"
+          prepend-icon="fa-solid fa-check"
+          variant="flat"
+          @click="saveSignature"
+        >
+          {{ props.titleConfirm }}
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>