@winchsa/ui 0.1.31 → 0.1.33

package/dist/components/forms/AttachmentCropperInput.vue

@@ -1,227 +0,0 @@
-<script setup>
-import Cropper from "cropperjs";
-import { ref, computed, watch, nextTick } from "vue";
-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>
-@import "cropperjs/dist/cropper.css";:deep(.cropper-container){width:auto!important}:global(.cropper-line),:global(.cropper-point){background-color:rgb(var(--v-theme-primary))!important}:global(.cropper-view-box){outline-color:rgba(var(--v-theme-primary),.75)!important}
-</style>

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

@@ -1,18 +0,0 @@
-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 __VLS_export: 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;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: typeof __VLS_export;
-export default _default;

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

@@ -1,16 +0,0 @@
-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 __VLS_export: 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;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: typeof __VLS_export;
-export default _default;

package/dist/components/forms/AttachmentInput.vue

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

@@ -1,16 +0,0 @@
-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 __VLS_export: 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;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: typeof __VLS_export;
-export default _default;

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

@@ -1,84 +0,0 @@
-import { type Ref } from 'vue';
-import type { OptionItem, Params } from '../../types';
-type __VLS_Props = {
-    options?: OptionItem[] | string[] | number[];
-    rules?: ((value: unknown) => typeof value | string)[];
-    multiple?: boolean;
-    searchable?: boolean;
-    searchInternally?: boolean;
-    querySearchParam?: string;
-    disabled?: boolean;
-    required?: boolean;
-    grouped?: boolean;
-    returnObject?: boolean;
-    teleported?: boolean;
-    preselectFirst?: boolean;
-    hideSelected?: boolean;
-    error?: boolean;
-    modelValue?: unknown;
-    itemLabel?: string;
-    groupValues?: string;
-    groupLabel?: string;
-    trackBy?: string;
-    trackByValue?: string | number | string[];
-    placeholder?: string;
-    url?: string;
-    label?: string;
-    deselectLabel?: string;
-    selectLabel?: string;
-    selectedLabel?: string;
-    errorMessages?: string;
-    params?: Params;
-    hideDetails?: boolean;
-    fetchEnabled?: boolean;
-    isLoading?: boolean;
-    disableIfEmpty?: boolean;
-    clearable?: boolean;
-};
-declare var __VLS_68: string | number, __VLS_69: any, __VLS_133: string | number, __VLS_134: any;
-type __VLS_Slots = {} & {
-    [K in NonNullable<typeof __VLS_68>]?: (props: typeof __VLS_69) => any;
-} & {
-    [K in NonNullable<typeof __VLS_133>]?: (props: typeof __VLS_134) => any;
-};
-declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
-    records: Ref<{
-        id?: string | number | boolean | undefined;
-        name?: string | number | undefined;
-        value?: string | number | boolean | undefined;
-        allowTranslate?: boolean | undefined;
-        svg_icon_url?: string | undefined;
-        png_icon_url?: string | undefined;
-        children?: /*elided*/ any[] | undefined;
-    }[], OptionItem[] | {
-        id?: string | number | boolean | undefined;
-        name?: string | number | undefined;
-        value?: string | number | boolean | undefined;
-        allowTranslate?: boolean | undefined;
-        svg_icon_url?: string | undefined;
-        png_icon_url?: string | undefined;
-        children?: /*elided*/ any[] | undefined;
-    }[]>;
-    internalOptions: import("vue").ComputedRef<({
-        id?: string | number | boolean | undefined;
-        name?: string | number | undefined;
-        value?: string | number | boolean | undefined;
-        allowTranslate?: boolean | undefined;
-        svg_icon_url?: string | undefined;
-        png_icon_url?: string | undefined;
-        children?: /*elided*/ any[] | undefined;
-    } | null)[]>;
-    loading: import("vue").ComputedRef<boolean>;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    "update:model-value": (value: unknown) => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    "onUpdate:model-value"?: ((value: unknown) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
-declare const _default: typeof __VLS_export;
-export default _default;
-type __VLS_WithSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};