@winchsa/ui 0.1.0

package/dist/components/forms/AttachmentCropperInput.vue

@@ -0,0 +1,228 @@
+<script setup>
+import Cropper from "cropperjs";
+import { ref, computed, watch, nextTick } from "vue";
+import "cropperjs/dist/cropper.css";
+import { useI18n } from "vue-i18n";
+import { VIcon, VBtn, VValidation, VSlider } from "vuetify/components";
+import { ruleValidator } from "../../utils/ruleValidator";
+import Modal from "../Modal.vue";
+import { generateUniqueId } from "../../utils/utils";
+import BaseButton from "./BaseButton.vue";
+const props = defineProps({
+  validTypes: { type: Array, required: false, default: () => ["image/png", "image/jpeg", "image/jpg"] },
+  rules: { type: Array, required: false },
+  multiple: { type: Boolean, required: false, default: false },
+  modelValue: { type: [Object, Array, null], required: true },
+  sizeInMB: { type: Number, required: false, default: 3 },
+  showPreview: { type: Boolean, required: false, default: true },
+  cropWidth: { type: Number, required: false, default: 120 },
+  cropHeight: { type: Number, required: false, default: 40 }
+});
+const emit = defineEmits(["update:model-value"]);
+const { locale } = useI18n();
+const { fileValidator } = ruleValidator();
+const imageUploadInput = ref(null);
+const attachments = ref([]);
+const cropperDialog = ref(false);
+const cropImageSrc = ref(null);
+const selectedFile = ref(null);
+const cropperInstance = ref(null);
+const zoomLevel = ref(1);
+const initialZoom = ref(1);
+const cropperImage = ref(null);
+const allowMultipleAttachments = computed(
+  () => props.multiple || !props.showPreview ? true : attachments.value?.length === 0
+);
+const onImageChanged = (e) => {
+  const target = e.target;
+  const file = target.files?.[0];
+  const isValid = fileValidator(file, props.sizeInMB, props.validTypes);
+  if (isValid && file) {
+    selectedFile.value = file;
+    cropImageSrc.value = URL.createObjectURL(file);
+    cropperDialog.value = true;
+  }
+};
+const initCropper = () => {
+  if (cropperInstance.value) {
+    cropperInstance.value.destroy();
+  }
+  if (cropperImage.value) {
+    cropperInstance.value = new Cropper(cropperImage.value, {
+      viewMode: 1,
+      responsive: true,
+      zoomable: true,
+      scalable: false,
+      movable: true,
+      wheelZoomRatio: 0,
+      zoomOnWheel: false,
+      ready() {
+        const data = cropperInstance.value?.getImageData();
+        initialZoom.value = data ? Math.min(data.width / data.naturalWidth, data.height / data.naturalHeight) : 1;
+        zoomLevel.value = initialZoom.value;
+      }
+    });
+  }
+};
+const closeCropper = () => {
+  cropperDialog.value = false;
+  selectedFile.value = null;
+  if (imageUploadInput.value) {
+    imageUploadInput.value.value = "";
+  }
+};
+const resizeCanvas = (canvas, width, height) => {
+  const offscreenCanvas = document.createElement("canvas");
+  offscreenCanvas.width = width;
+  offscreenCanvas.height = height;
+  const ctx = offscreenCanvas.getContext("2d");
+  if (ctx) {
+    ctx.drawImage(canvas, 0, 0, width, height);
+  }
+  return offscreenCanvas;
+};
+const cropImage = () => {
+  if (!cropperInstance.value) {
+    return;
+  }
+  const targetWidth = props.cropWidth;
+  const targetHeight = props.cropHeight;
+  let canvas = cropperInstance.value.getCroppedCanvas();
+  if (!canvas) {
+    return;
+  }
+  if (canvas.width !== targetWidth || canvas.height !== targetHeight) {
+    canvas = resizeCanvas(canvas, targetWidth, targetHeight);
+  }
+  canvas.toBlob((blob) => {
+    if (blob && selectedFile.value) {
+      const croppedFile = new File([blob], selectedFile.value.name, { type: selectedFile.value.type });
+      const attachment = {
+        id: generateUniqueId(),
+        src: URL.createObjectURL(croppedFile),
+        file: croppedFile
+      };
+      attachments.value.push(attachment);
+      emit("update:model-value", props.multiple ? attachments.value : attachment);
+      cropperDialog.value = false;
+    }
+  }, selectedFile.value?.type);
+};
+const removeImageCopy = (id) => {
+  const index = attachments.value.findIndex((attachment) => attachment.id === id);
+  if (index > -1) {
+    attachments.value.splice(index, 1);
+    emit("update:model-value", props.multiple ? attachments.value : attachments.value[0] || null);
+  }
+};
+watch(zoomLevel, async (newZoom) => {
+  await nextTick(() => {
+    if (cropperInstance.value) {
+      cropperInstance.value.zoomTo(newZoom);
+    }
+  });
+});
+</script>
+
+<template>
+  <div class="d-flex flex-column">
+    <div class="d-flex align-center gap-3">
+      <BaseButton
+        v-if="allowMultipleAttachments"
+        size="48"
+        color="gray-200"
+        elevation="0"
+        class="app-z-40"
+        @click="imageUploadInput?.click()"
+      >
+        <VIcon size="28" icon="tabler-upload" color="on-gray-200" />
+      </BaseButton>
+
+      <TransitionGroup
+        v-if="showPreview"
+        tag="div"
+        class="d-flex align-center flex-wrap sb-w-full gap-3"
+        enter-active-class="slide-in-right"
+        leave-active-class="slide-out-right"
+        mode="out-in"
+      >
+        <div
+          v-for="attachment in attachments"
+          :key="attachment.id"
+          class="app-w-48px app-h-48px bg-gray-50 app-rounded-6 position-relative d-flex align-center justify-center"
+        >
+          <img v-if="attachment.src" :src="attachment.src" class="app-rounded-6 overflow-hidden app-w-48px app-h-48px">
+          <VIcon v-else color="gray-600">
+            tabler-pdf
+          </VIcon>
+          <VBtn
+            icon="tabler-x"
+            size="20"
+            color="red"
+            small
+            class="d-flex align-center justify-center position-absolute app-top--8px app-z-10"
+            :class="locale === 'en' ? 'app-right--8px' : 'app-left--8px'"
+            @click="removeImageCopy(attachment.id)"
+          />
+        </div>
+      </TransitionGroup>
+    </div>
+
+    <VValidation
+      v-slot="{ errorMessages: validationErrors, isValid }"
+      ref="attachmentInputRef"
+      v-model="attachments"
+      :rules="rules"
+      validate-on="submit lazy"
+    >
+      <div class="d-flex flex-column">
+        <input
+          ref="imageUploadInput"
+          class="d-none"
+          type="file"
+          :disabled="!allowMultipleAttachments"
+          :accept="validTypes?.join(',')"
+          @change="onImageChanged($event)"
+        >
+        <VMessages class="mt-1 d-block" :messages="validationErrors.value" :active="isValid.value === false" />
+      </div>
+    </VValidation>
+
+    <!-- Cropper Dialog -->
+    <Modal
+      v-model="cropperDialog"
+      persistent
+      width="500"
+      :has-icon="false"
+      @save="cropImage"
+      @cancel="closeCropper"
+    >
+      <img
+        v-if="cropImageSrc"
+        ref="cropperImage"
+        :src="cropImageSrc"
+        style="max-width: 100%; margin-bottom: 1px;"
+        @load="initCropper"
+      >
+
+      <template #additional-actions>
+        <VSlider
+          v-model="zoomLevel"
+          class="pa-3 mt-2 flex-grow-1"
+          :min="initialZoom"
+          :max="initialZoom * 3"
+          step="0.1"
+          density="comfortable"
+          track-size="6"
+          thumb-size="18"
+          prepend-icon="tabler-minus"
+          append-icon="tabler-plus"
+        />
+      </template>
+    </Modal>
+  </div>
+</template>
+
+<style scoped>
+:deep(.cropper-container){width:auto!important}:global(.cropper-line),:global(.cropper-point){background-color:rgb(var(--v-theme-primary))}:global(.cropper-view-box){outline-color:rgba(var(--v-theme-primary),.75)}
+</style>

package/dist/components/forms/AttachmentCropperInput.vue.d.ts

@@ -0,0 +1,25 @@
+import 'cropperjs/dist/cropper.css';
+import type { Attachment } from '../../types';
+type __VLS_Props = {
+    validTypes?: string[];
+    rules?: ((value: unknown) => typeof value | string)[];
+    multiple?: boolean;
+    modelValue: Attachment | Attachment[] | null;
+    sizeInMB?: number;
+    showPreview?: boolean;
+    cropWidth?: number;
+    cropHeight?: number;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:model-value": (value: Attachment | Attachment[]) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:model-value"?: ((value: Attachment | Attachment[]) => any) | undefined;
+}>, {
+    multiple: boolean;
+    validTypes: string[];
+    sizeInMB: number;
+    showPreview: boolean;
+    cropWidth: number;
+    cropHeight: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/components/forms/AttachmentInput.vue

@@ -0,0 +1,116 @@
+<script setup>
+import { VBtn, VIcon, VValidation, VMessages } from "vuetify/components";
+import { ref, computed } from "vue";
+import { useI18n } from "vue-i18n";
+import { generateUniqueId } from "../../utils/utils";
+import { ruleValidator } from "../../utils/ruleValidator";
+import BaseButton from "./BaseButton.vue";
+const props = defineProps({
+  validTypes: { type: Array, required: false, default: () => ["image/png", "image/jpeg", "image/jpg"] },
+  rules: { type: Array, required: false },
+  multiple: { type: Boolean, required: false, default: false },
+  modelValue: { type: [Object, Array, null], required: true },
+  sizeInMB: { type: Number, required: false, default: 3 },
+  showPreview: { type: Boolean, required: false, default: true }
+});
+const emit = defineEmits(["update:model-value"]);
+const { locale } = useI18n();
+const { fileValidator } = ruleValidator();
+const imageUploadInput = ref(null);
+const attachments = ref([]);
+const allowMultipleAttachments = computed(() => props.multiple || !props.showPreview ? true : attachments.value?.length === 0 && attachments.value?.length < 1);
+const onImageChanged = (e, validate) => {
+  const target = e.target;
+  const file = target.files?.[0];
+  const isVaild = fileValidator(file, props.sizeInMB, props.validTypes);
+  if (isVaild && file) {
+    const attachment = {
+      id: generateUniqueId(),
+      src: file.type !== "application/pdf" ? createImageUrl(file) : "",
+      file
+    };
+    attachments.value.push(attachment);
+    validate();
+    emit("update:model-value", props.multiple ? attachments.value : attachments.value[attachments.value.length - 1]);
+    if (imageUploadInput.value) {
+      imageUploadInput.value.value = "";
+    }
+  }
+};
+function createImageUrl(file) {
+  const imageUrl = URL.createObjectURL(file);
+  return imageUrl;
+}
+const removeImageCopy = (id) => {
+  const attachmentIndex = attachments.value.findIndex((attachment) => attachment.id === id);
+  if (attachmentIndex > -1) {
+    attachments.value.splice(attachmentIndex, 1);
+    emit("update:model-value", props.multiple ? attachments.value : attachments.value[0]);
+  }
+};
+</script>
+
+<template>
+  <div class="d-flex flex-column">
+    <div class="d-flex align-center gap-3">
+      <BaseButton
+        v-if="allowMultipleAttachments"
+        size="48"
+        color="gray-200"
+        elevation="0"
+        class="app-z-40"
+        @click="imageUploadInput?.click()"
+      >
+        <VIcon
+          size="28"
+          icon="tabler-upload"
+          color="on-gray-200"
+        />
+      </BaseButton>
+      <TransitionGroup
+        v-if="showPreview"
+        tag="div"
+        class="d-flex align-center flex-wrap sb-w-full gap-3"
+        enter-active-class="slide-in-right"
+        leave-active-class="slide-out-right"
+        mode="out-in"
+      >
+        <div v-for="attachment in attachments" :key="attachment.id" class="app-w-48px app-h-48px bg-gray-50 app-rounded-6 position-relative d-flex align-center justify-center">
+          <img v-if="attachment.src" :src="attachment.src" class="app-rounded-6 overflow-hidden app-w-48px app-h-48px">
+          <VIcon v-else color="gray-600">
+            tabler-pdf
+          </VIcon>
+          <VBtn
+            icon="tabler-x"
+            size="20"
+            color="red"
+            small
+            class="d-flex align-center justify-center position-absolute app-top--8px app-z-10"
+            :class="locale === 'en' ? 'app-right--8px' : 'app-left--8px'"
+            @click="removeImageCopy(attachment.id)"
+          />
+        </div>
+      </TransitionGroup>
+    </div>
+    <VValidation
+      v-slot="{ errorMessages: validationErrors, isValid, validate }"
+      ref="attachmentInputRef"
+      v-model="attachments"
+      :rules="rules"
+      validate-on="submit lazy"
+    >
+      <div class="d-flex flex-column">
+        <input
+          ref="imageUploadInput"
+          class="d-none"
+          type="file"
+          :disabled="!allowMultipleAttachments"
+          :accept="validTypes?.join(',')"
+          @change="onImageChanged($event, validate)"
+        >
+
+        <VMessages class="mt-1 d-block" :messages="validationErrors.value" :active="isValid.value === false" />
+      </div>
+    </VValidation>
+  </div>
+</template>

package/dist/components/forms/AttachmentInput.vue.d.ts

@@ -0,0 +1,20 @@
+import type { Attachment } from '../../types';
+type __VLS_Props = {
+    validTypes?: string[];
+    rules?: ((value: unknown) => typeof value | string)[];
+    multiple?: boolean;
+    modelValue: Attachment | Attachment[] | null;
+    sizeInMB?: number;
+    showPreview?: boolean;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:model-value": (value: Attachment | Attachment[]) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:model-value"?: ((value: Attachment | Attachment[]) => any) | undefined;
+}>, {
+    multiple: boolean;
+    validTypes: string[];
+    sizeInMB: number;
+    showPreview: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;