@ramathibodi/nuxt-commons 0.1.13 → 0.1.15

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

@@ -1,138 +1,138 @@
-<script lang="ts" setup>
-import {computed, defineModel, ref, watch, watchEffect} from 'vue'
-import {cloneDeep, isEqual} from 'lodash-es'
-import type {FormDialogCallback} from '../../types/formDialog'
-
-interface Props {
-  maxWidth?: number | string
-  fullscreen?: boolean
-  title?: string
-  initialData?: object
-  formData?: object
-  saveCaption?: string
-  cancelCaption?: string
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  saveCaption: 'บันทึก',
-  cancelCaption: 'ยกเลิก',
-})
-
-const isShowing = defineModel<boolean>({ default: false })
-const isSaving = ref<boolean>(false)
-const formPadRef = ref()
-const formData = ref<object>({})
-
-const emit = defineEmits(['create', 'update'])
-
-function save() {
-  if (formPadRef.value.isValid) {
-    isSaving.value = true
-    emit((isCreating.value) ? 'create' : 'update', cloneDeep(formData.value), callback)
-  }
-}
-
-function cancel() {
-  isShowing.value = false
-}
-
-const callback: FormDialogCallback = {
-  done: function () {
-    isSaving.value = false
-    isShowing.value = false
-  },
-  error: function () {
-    isSaving.value = false
-  },
-}
-
-const isDataChange = computed(() => {
-  return !((isCreating.value) ? isEqual(formData.value, createOriginalValue.value) : isEqual(formData.value, props.formData))
-})
-
-const isCreating = computed(() => {
-  return !props.formData
-})
-
-const createOriginalValue = computed(() => {
-  return Object.assign({}, props.initialData)
-})
-
-const loadFormData = () => {
-  if (props.formData) {
-    formData.value = cloneDeep(props.formData)
-  }
-  else {
-    formData.value = Object.assign({}, props.initialData)
-  }
-}
-
-watchEffect(loadFormData)
-
-watch(() => isShowing.value, (newValue) => {
-  if (!newValue) formPadRef.value.reset()
-  else loadFormData()
-})
-</script>
-
-<template>
-  <v-dialog
-    v-model="isShowing"
-    :fullscreen="fullscreen"
-    :max-width="maxWidth"
-    persistent
-    scrollable
-  >
-    <VCard>
-      <VToolbar>
-        <VToolbarTitle>
-          <slot name="title">
-            {{ (isCreating) ? "New" : "Edit" }} {{ title }}
-          </slot>
-        </VToolbarTitle>
-        <VSpacer />
-        <VToolbarItems>
-          <VBtn
-            icon="mdi mdi-close"
-            @click="cancel"
-          />
-        </VToolbarItems>
-      </VToolbar>
-      <VCardText>
-        <form-pad
-          ref="formPadRef"
-          v-model="formData"
-          isolated
-        >
-          <template #default="slotData">
-            <slot
-              v-bind="slotData"
-              :is-creating="isCreating"
-              :is-data-change="isDataChange"
-            />
-          </template>
-        </form-pad>
-      </VCardText>
-      <VCardActions>
-        <VSpacer />
-        <VBtn
-          color="primary"
-          variant="flat"
-          :loading="isSaving"
-          :disabled="!isDataChange"
-          @click="save"
-        >
-          {{ saveCaption }}
-        </VBtn>
-        <VBtn
-          color="error"
-          variant="flat"
-          :disabled="isSaving"
-          @click="cancel"
-        >
-          {{ cancelCaption }}
-        </VBtn>
-      </VCardActions>
-    </VCard>
-  </v-dialog>
-</template>
+<script lang="ts" setup>
+import {computed, defineModel, ref, watch, watchEffect} from 'vue'
+import {cloneDeep, isEqual} from 'lodash-es'
+import type {FormDialogCallback} from '../../types/formDialog'
+
+interface Props {
+  maxWidth?: number | string
+  fullscreen?: boolean
+  title?: string
+  initialData?: object
+  formData?: object
+  saveCaption?: string
+  cancelCaption?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  saveCaption: 'บันทึก',
+  cancelCaption: 'ยกเลิก',
+})
+
+const isShowing = defineModel<boolean>({ default: false })
+const isSaving = ref<boolean>(false)
+const formPadRef = ref()
+const formData = ref<object>({})
+
+const emit = defineEmits(['create', 'update'])
+
+function save() {
+  if (formPadRef.value.isValid) {
+    isSaving.value = true
+    emit((isCreating.value) ? 'create' : 'update', cloneDeep(formData.value), callback)
+  }
+}
+
+function cancel() {
+  isShowing.value = false
+}
+
+const callback: FormDialogCallback = {
+  done: function () {
+    isSaving.value = false
+    isShowing.value = false
+  },
+  error: function () {
+    isSaving.value = false
+  },
+}
+
+const isDataChange = computed(() => {
+  return !((isCreating.value) ? isEqual(formData.value, createOriginalValue.value) : isEqual(formData.value, props.formData))
+})
+
+const isCreating = computed(() => {
+  return !props.formData
+})
+
+const createOriginalValue = computed(() => {
+  return Object.assign({}, props.initialData)
+})
+
+const loadFormData = () => {
+  if (props.formData) {
+    formData.value = cloneDeep(props.formData)
+  }
+  else {
+    formData.value = Object.assign({}, props.initialData)
+  }
+}
+
+watchEffect(loadFormData)
+
+watch(() => isShowing.value, (newValue) => {
+  if (!newValue) formPadRef.value.reset()
+  else loadFormData()
+})
+</script>
+
+<template>
+  <v-dialog
+    v-model="isShowing"
+    :fullscreen="fullscreen"
+    :max-width="maxWidth"
+    persistent
+    scrollable
+  >
+    <VCard>
+      <VToolbar>
+        <VToolbarTitle>
+          <slot name="title">
+            {{ (isCreating) ? "New" : "Edit" }} {{ title }}
+          </slot>
+        </VToolbarTitle>
+        <VSpacer />
+        <VToolbarItems>
+          <VBtn
+            icon="mdi mdi-close"
+            @click="cancel"
+          />
+        </VToolbarItems>
+      </VToolbar>
+      <VCardText>
+        <form-pad
+          ref="formPadRef"
+          v-model="formData"
+          isolated
+        >
+          <template #default="slotData">
+            <slot
+              v-bind="slotData"
+              :is-creating="isCreating"
+              :is-data-change="isDataChange"
+            />
+          </template>
+        </form-pad>
+      </VCardText>
+      <VCardActions>
+        <VSpacer />
+        <VBtn
+          color="primary"
+          variant="flat"
+          :loading="isSaving"
+          :disabled="!isDataChange"
+          @click="save"
+        >
+          {{ saveCaption }}
+        </VBtn>
+        <VBtn
+          color="error"
+          variant="flat"
+          :disabled="isSaving"
+          @click="cancel"
+        >
+          {{ cancelCaption }}
+        </VBtn>
+      </VCardActions>
+    </VCard>
+  </v-dialog>
+</template>

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

@@ -1,187 +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:model-value="addFiles"
-  />
-</template>
+<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:model-value="addFiles"
+  />
+</template>