@ramathibodi/nuxt-commons 0.1.12 → 0.1.14

package/dist/runtime/components/Camera.vue

@@ -1,129 +0,0 @@
-<script lang="ts" setup>
-import { ref, onMounted, watchEffect } from 'vue'
-import { useDevicesList, useUserMedia } from '@vueuse/core'
-import { useAlert } from '../composables/alert'
-
-interface Props {
-  modelValue?: string
-}
-const props = defineProps<Props>()
-const emit = defineEmits(['update:modelValue', 'closeDialog'])
-
-const alert = useAlert()
-const videoRef = ref<HTMLVideoElement>()
-const capturedPhoto = ref<string | null>(null)
-const currentCameraId = ref<ConstrainDOMString | undefined>()
-
-const { videoInputs: cameras } = useDevicesList({
-  requestPermissions: true,
-  constraints: { audio: false, video: true },
-  onUpdated() {
-    if (!cameras.value.find(camera => camera.deviceId === currentCameraId.value))
-      currentCameraId.value = cameras.value[0]?.deviceId
-  },
-})
-
-const { stream, enabled } = useUserMedia({
-  constraints: { video: { deviceId: currentCameraId.value } },
-})
-
-watchEffect(() => {
-  if (videoRef.value) (videoRef.value as HTMLVideoElement).srcObject = stream.value!
-})
-
-const captureImage = () => {
-  if (videoRef.value) {
-    const canvas = document.createElement('canvas')
-    canvas.width = (videoRef.value as HTMLVideoElement).videoWidth
-    canvas.height = (videoRef.value as HTMLVideoElement).videoHeight
-    const context = canvas.getContext('2d')
-    if (context) {
-      context.drawImage(videoRef.value as HTMLVideoElement, 0, 0, canvas.width, canvas.height)
-      capturedPhoto.value = canvas.toDataURL('image/jpeg')
-
-      enabled.value = false
-      emit('update:modelValue', capturedPhoto.value)
-    }
-  }
-}
-
-function loadImageFile(selectedFile: File | File[] | undefined) {
-  if (!selectedFile) {
-    alert?.addAlert({ message: 'No file selected.', alertType: 'error' })
-    return
-  }
-
-  const reader = new FileReader()
-  reader.onload = (event) => {
-    capturedPhoto.value = event.target?.result as string
-
-    enabled.value = false
-    emit('update:modelValue', capturedPhoto.value)
-  }
-  const scanImageSingleFile: File = Array.isArray(selectedFile) ? selectedFile[0] : selectedFile
-  reader.readAsDataURL(scanImageSingleFile)
-}
-
-const openCamera = () => {
-  enabled.value = true
-}
-
-const closeDialog = () => {
-  enabled.value = false
-  emit('closeDialog')
-}
-
-defineExpose({
-  openCamera,
-})
-
-onMounted(() => {
-  enabled.value = true
-})
-</script>
-
-<template>
-  <v-card>
-    <v-card-title class="d-flex justify-end">
-      <v-btn
-        icon="fa:fa-solid fa-xmark"
-        variant="text"
-        @click="closeDialog"
-      />
-    </v-card-title>
-    <v-card-text class="d-flex justify-center">
-      <video
-        ref="videoRef"
-        autoplay
-        style="max-width: 1024px"
-      />
-      <div style="z-index: 2000; position: relative; bottom: -410px; left: -80px; height: 50px">
-        <FileBtn
-          accept="image/*"
-          icon="mdi mdi-image-plus"
-          icon-only
-          @update:model-value="loadImageFile"
-        />
-      </div>
-    </v-card-text>
-    <v-card-actions class="d-flex justify-center">
-      <v-btn
-        icon
-        size="x-large"
-        variant="tonal"
-        @click="captureImage()"
-      >
-        <v-icon
-          icon="fa:fa-solid fa-circle"
-          size="x-large"
-        />
-        <v-tooltip
-          activator="parent"
-          location="top"
-        >
-          ถ่ายภาพ
-        </v-tooltip>
-      </v-btn>
-    </v-card-actions>
-  </v-card>
-</template>

package/dist/runtime/components/form/images/CameraCrop.vue

@@ -1,58 +0,0 @@
-<script lang="ts" setup>
-import { ref } from 'vue'
-import { isUndefined } from 'lodash'
-
-interface Props {
-  modelValue?: string
-}
-
-const props = defineProps<Props>()
-const emit = defineEmits(['update:modelValue', 'closeDialog', 'openCamera'])
-
-const selectedImage = ref<string>()
-const isDialogOpen = ref<boolean>(false)
-const cameraRef = ref()
-
-const handleAddImage = (image: string) => {
-  selectedImage.value = image
-  isDialogOpen.value = true
-}
-
-const handleCloseDialog = () => {
-  isDialogOpen.value = false
-  emit('openCamera', true)
-  emit('closeDialog', false)
-}
-
-const handleCameraClose = (shouldClose: boolean, editStatus: string) => {
-  if (isUndefined(editStatus)) {
-    emit('closeDialog', shouldClose)
-  }
-}
-
-const handleImageEdit = (imageData: any) => {
-  emit('update:modelValue', imageData)
-}
-
-const handleOpenCamera = () => {
-  emit('openCamera', true)
-  isDialogOpen.value = false
-  cameraRef.value.openCamera()
-}
-</script>
-
-<template>
-  <Camera
-    ref="cameraRef"
-    @update:model-value="handleAddImage"
-    @close-dialog="handleCameraClose"
-  />
-  <v-dialog v-model="isDialogOpen">
-    <FormImagesEdit
-      v-model="selectedImage"
-      @update:model-value="handleImageEdit"
-      @close-dialog="handleCloseDialog"
-      @open-camera="handleOpenCamera"
-    />
-  </v-dialog>
-</template>

package/dist/runtime/components/form/images/Preview.vue

@@ -1,48 +0,0 @@
-<script lang="ts" setup>
-interface Props {
-  modelValue?: any
-  readonly?: boolean
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  readonly: false,
-})
-
-const emit = defineEmits([
-  'update:modelValue',
-  'closeDialogPreview',
-  'toPaint',
-])
-
-const editImage = () => {
-  emit('toPaint')
-}
-</script>
-
-<template>
-  <v-card>
-    <v-toolbar>
-      <v-toolbar-title>Preview</v-toolbar-title>
-      <v-spacer />
-      <v-btn
-        v-if="!props.readonly"
-        icon="fa:fa-solid fa-pen"
-        variant="text"
-        @click="editImage"
-      />
-      <v-btn
-        icon="fa:fa-solid fa-xmark"
-        variant="text"
-        @click="$emit('closeDialogPreview', false)"
-      />
-    </v-toolbar>
-    <v-card-text>
-      <v-row>
-        <v-img
-          :src="modelValue.data"
-          height="70dvh"
-        />
-      </v-row>
-    </v-card-text>
-  </v-card>
-</template>