@winchsa/ui 0.1.30 → 0.1.33

package/dist/components/forms/DraggedUploadFile.vue

@@ -1,120 +0,0 @@
-<script setup>
-import { VProgressLinear, VIcon } from "vuetify/components";
-import { ref, computed } from "vue";
-import { useI18n } from "vue-i18n";
-import { toaster } from "../../utils/toaster";
-const { t } = useI18n();
-const isDragging = ref(false);
-const isHovered = ref(false);
-const props = defineProps({
-  modelValue: { type: Array, required: true },
-  loading: { type: Boolean, required: false }
-});
-const emit = defineEmits(["update:model-value"]);
-const files = computed({
-  get() {
-    return props.modelValue;
-  },
-  set(val) {
-    emit("update:model-value", val);
-  }
-});
-const dragover = (event) => {
-  event.preventDefault();
-  isDragging.value = true;
-};
-const dragleave = (event) => {
-  event.preventDefault();
-  isDragging.value = false;
-};
-const mouseEnter = (event) => {
-  event.preventDefault();
-  isHovered.value = true;
-};
-const mouseLeave = (event) => {
-  event.preventDefault();
-  isHovered.value = false;
-};
-const handleFileUpload = async (event) => {
-  event.preventDefault();
-  const allowedExtensions = /(\.xls|\.xlsx)$/i;
-  let inputFiles = document.getElementById("upload-input").files;
-  if (event.target.files && allowedExtensions.test(event.target.files[0]?.name) || event.dataTransfer.files && allowedExtensions.test(event.dataTransfer.files[0]?.name)) {
-    inputFiles = event.type === "change" ? event.target.files : event.dataTransfer.files;
-    files.value = [...inputFiles ? [inputFiles] : []];
-    isDragging.value = false;
-  } else {
-    toaster().error(t("files_must_be_xls_xlsx"));
-    isDragging.value = false;
-  }
-};
-</script>
-
-<template>
-  <div
-    class="drop-area d-flex flex-column justify-center app-min-h-250px py-10 px-7 gap-4 position-relative overflow-hidden"
-    :class="isHovered || isDragging ? 'bg-yellow-light app-border-primary' : 'bg-surface app-border-silver'"
-    @dragover="dragover"
-    @dragleave="dragleave"
-    @mouseenter="mouseEnter"
-    @mouseleave="mouseLeave"
-    @drop="handleFileUpload"
-  >
-    <input
-      id="upload-input"
-      type="file"
-      class="d-none"
-      name="file"
-      accept=".xls,.xlsx"
-      @change="handleFileUpload"
-    >
-    <div class="app-w-48px app-h-48px rounded-lg bg-grayish-blue d-flex align-center justify-center me-2">
-      <VIcon icon="tabler-upload" size="28" color="dark-gray" />
-    </div>
-    <div v-if="!isDragging" class="d-flex flex-column align-center gap-4">
-      <p class="mb-0">
-        {{ t('drag_here_or') }}
-      </p>
-      <label
-        for="upload-input"
-        class="text-base font-weight-medium hover-underline text-blue"
-      >
-        {{ t("actions.choose_from_files") }}
-      </label>
-      <span class="text-sm text-gray-500">{{ t("upload_restriction") }}</span>
-      <div v-if="files && files[0]" class="d-flex align-center app-font-size-15 font-weight-medium mt-2 text-success">
-        {{ t("inputs.file_name") }}: {{ files[0]?.item(0)?.name }}
-      </div>
-      <VProgressLinear
-        v-if="loading"
-        indeterminate
-        color="primary"
-        :size="20"
-        :width="2"
-      />
-    </div>
-    <div v-else>
-      <span> {{ t("release_to_upload") }} </span>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.file-upload {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-
-.drop-area {
-  width: 100%;
-  min-height: 100px;
-  border-radius: 10px;
-  border-width: 2px;
-  border-style: dashed;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin-top: 10px;
-}
-</style>

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

@@ -1,11 +0,0 @@
-type __VLS_Props = {
-    modelValue: FileList[];
-    loading?: boolean;
-};
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    "update:model-value": (value: FileList[]) => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    "onUpdate:model-value"?: ((value: FileList[]) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: typeof __VLS_export;
-export default _default;

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

@@ -1,35 +0,0 @@
-import 'cropperjs/dist/cropper.css';
-type __VLS_Props = {
-    src?: string | null | Partial<MediaStream>;
-    canEdit?: boolean;
-    canDelete?: boolean;
-    imagePlaceholder?: string;
-    isLoading: boolean;
-};
-type __VLS_ModelProps = {
-    modelValue?: File | null;
-};
-type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare var __VLS_75: {
-    avatarRef: any;
-};
-type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_75) => any;
-};
-declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    update: (...args: any[]) => void;
-    delete: (...args: any[]) => void;
-    "update:modelValue": (value: File | null | undefined) => void;
-}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    "onUpdate:modelValue"?: ((value: File | null | undefined) => any) | undefined;
-    onUpdate?: ((...args: any[]) => any) | undefined;
-    onDelete?: ((...args: any[]) => 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;
-    };
-};

package/dist/components/forms/ImageCardInput.vue

@@ -1,234 +0,0 @@
-<script setup>
-import Cropper from "cropperjs";
-import "cropperjs/dist/cropper.css";
-import { computed, ref, watch, nextTick } from "vue";
-import { useI18n } from "vue-i18n";
-import { VSlider, VList, VListItem, VBadge, VMenu, VAvatar, VImg, VIcon } from "vuetify/components";
-import avatar from "../../images/avatar.png";
-import { ruleValidator } from "../../utils/ruleValidator";
-import Modal from "../Modal.vue";
-import BaseButton from "./BaseButton.vue";
-const { fileValidator } = ruleValidator();
-const emit = defineEmits(["delete", "update"]);
-const props = defineProps({
-  src: { type: [String, null, Object], required: false },
-  canEdit: { type: Boolean, required: false, default: true },
-  canDelete: { type: Boolean, required: false, default: true },
-  imagePlaceholder: { type: String, required: false },
-  isLoading: { type: Boolean, required: true }
-});
-const { t } = useI18n();
-const model = defineModel({ type: null });
-const avatarRef = ref();
-const imageSrc = ref(props.src || avatar);
-const fileInputRef = ref(null);
-const zoomLevel = ref(1);
-const initialZoom = ref(1);
-const cropperDialog = ref(false);
-const cropImageSrc = ref(null);
-const selectedFile = ref(null);
-const cropperInstance = ref(null);
-const cropperImage = ref(null);
-watch(() => props.src, (newSrc) => {
-  imageSrc.value = newSrc || props.imagePlaceholder || avatar;
-}, { immediate: true });
-const generateImageUrl = (file) => {
-  const imageElement = document.getElementById("image-preview");
-  const imageUrl = URL.createObjectURL(file);
-  imageSrc.value = imageUrl;
-  if (imageElement) {
-    imageElement.onload = () => URL.revokeObjectURL(imageUrl);
-  }
-};
-const onImageChange = (event) => {
-  const inputElement = event.target;
-  const file = inputElement.files?.[0];
-  const isValidFile = fileValidator(file, 3, ["image/png", "image/jpeg", "image/jpg"]);
-  if (isValidFile && 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, {
-      aspectRatio: 1,
-      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 cropImage = () => {
-  if (!cropperInstance.value) {
-    return;
-  }
-  const canvas = cropperInstance.value.getCroppedCanvas({
-    width: 200,
-    height: 200
-  });
-  canvas.toBlob((blob) => {
-    if (blob && selectedFile.value) {
-      const croppedFile = new File([blob], selectedFile.value.name, { type: selectedFile.value.type });
-      generateImageUrl(croppedFile);
-      model.value = croppedFile;
-      emit("update");
-      cropperDialog.value = false;
-    }
-  }, selectedFile.value?.type);
-};
-const deleteUserImage = () => {
-  imageSrc.value = avatar;
-  model.value = null;
-  emit("delete");
-  emit("update");
-};
-watch(zoomLevel, async (newZoom) => {
-  await nextTick(() => {
-    if (cropperInstance.value) {
-      cropperInstance.value.zoomTo(newZoom);
-    }
-  });
-});
-const loading = computed(() => props.isLoading);
-const hasImage = computed(() => {
-  return !/^https?:\/\/[^\/]+\/assets\/images\/.*/.test(props.src);
-});
-</script>
-
-<template>
-  <VBadge location="end top" class="badge-camera mb-4">
-    <template #badge>
-      <VMenu v-if="src && canEdit" location="end">
-        <template #activator="{ props: propsBadge }">
-          <BaseButton
-            elevation="0"
-            size="32"
-            :loading="loading"
-            v-bind="propsBadge"
-          >
-            <VIcon icon="tabler-camera-plus" size="20" />
-          </BaseButton>
-        </template>
-        <VList>
-          <VListItem @click="fileInputRef?.click()">
-            {{ t('actions.change_img') }}
-          </VListItem>
-
-          <VListItem v-if="hasImage && canDelete" class="text-red" @click="deleteUserImage">
-            {{ t("actions.delete_img") }}
-          </VListItem>
-        </VList>
-      </VMenu>
-
-      <BaseButton
-        v-else-if="canEdit"
-        elevation="0"
-        size="32"
-        :loading="loading"
-        @click="fileInputRef?.click()"
-      >
-        <VIcon icon="tabler-camera-plus" size="20" />
-      </BaseButton>
-    </template>
-
-    <VAvatar
-      ref="avatarRef"
-      style="overflow: visible;"
-      rounded="circle"
-      size="120"
-    >
-      <VImg
-        id="image-preview"
-        cover
-        :src="imageSrc || imagePlaceholder || avatar"
-        class="rounded-circle bg-grey-lighten-1"
-      />
-      <slot v-bind="{
-  avatarRef
-}" />
-    </VAvatar>
-
-    <input
-      ref="fileInputRef"
-      class="d-none"
-      type="file"
-      accept=".jpeg, .jpg, .png"
-      @change="onImageChange"
-    >
-  </VBadge>
-
-  <!-- Cropper Dialog -->
-  <Modal
-    v-model="cropperDialog"
-    persistent
-    width="500"
-    :has-icon="false"
-    @save="cropImage"
-    @cancel="cropperDialog = false"
-  >
-    <img
-      v-if="cropImageSrc"
-      ref="cropperImage"
-      :src="cropImageSrc"
-      style="max-width: 100%;"
-      @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>
-</template>
-
-<style>
-.badge-camera .v-badge__badge {
-  z-index: 10000;
-  inset-inline-start: calc(100% - 24px) !important;
-  background: transparent !important;
-  inset-block-end: calc(100% - 24px) !important;
-  inset-inline-end: auto !important;
-  bottom: auto !important;
-}
-
-: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), 0.75);
-}
-</style>
-
-<style scoped>
-:deep(.v-img__img){border-radius:999999px}
-</style>

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

@@ -1,35 +0,0 @@
-import 'cropperjs/dist/cropper.css';
-type __VLS_Props = {
-    src?: string | null | Partial<MediaStream>;
-    canEdit?: boolean;
-    canDelete?: boolean;
-    imagePlaceholder?: string;
-    isLoading: boolean;
-};
-type __VLS_ModelProps = {
-    modelValue?: File | null;
-};
-type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare var __VLS_75: {
-    avatarRef: any;
-};
-type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_75) => any;
-};
-declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    update: (...args: any[]) => void;
-    delete: (...args: any[]) => void;
-    "update:modelValue": (value: File | null | undefined) => void;
-}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    "onUpdate:modelValue"?: ((value: File | null | undefined) => any) | undefined;
-    onUpdate?: ((...args: any[]) => any) | undefined;
-    onDelete?: ((...args: any[]) => 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;
-    };
-};

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

@@ -1,26 +0,0 @@
-type __VLS_Props = {
-    errorMessages?: string | string[];
-};
-type __VLS_ModelProps = {
-    modelValue?: unknown;
-};
-type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare var __VLS_1: {
-    internalErrorMessages: string | string[] | undefined;
-};
-type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_1) => any;
-};
-declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (value: unknown) => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    "onUpdate:modelValue"?: ((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;
-    };
-};

package/dist/components/forms/InputValidationWrapper.vue

@@ -1,24 +0,0 @@
-<script setup>
-import { watch, ref } from "vue";
-const value = defineModel({ type: null });
-const props = defineProps({
-  errorMessages: { type: [String, Array], required: false }
-});
-const internalErrorMessages = ref();
-watch(() => props.errorMessages, (val) => {
-  internalErrorMessages.value = val;
-}, {
-  deep: true,
-  immediate: true
-});
-watch(() => value, () => {
-  internalErrorMessages.value = "";
-}, {
-  deep: true,
-  immediate: true
-});
-</script>
-
-<template>
-  <slot v-bind="{ internalErrorMessages }" />
-</template>

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

@@ -1,26 +0,0 @@
-type __VLS_Props = {
-    errorMessages?: string | string[];
-};
-type __VLS_ModelProps = {
-    modelValue?: unknown;
-};
-type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare var __VLS_1: {
-    internalErrorMessages: string | string[] | undefined;
-};
-type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_1) => any;
-};
-declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (value: unknown) => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    "onUpdate:modelValue"?: ((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;
-    };
-};

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

@@ -1,21 +0,0 @@
-import type { ValidateOn } from '../../types';
-type __VLS_Props = {
-    hideDetails?: boolean;
-    label?: string;
-    customId?: string;
-    errorMessages?: string[] | string;
-    validateOn?: ValidateOn;
-    error?: boolean;
-    rules?: ((value: unknown) => string)[];
-};
-type __VLS_ModelProps = {
-    modelValue?: string[] | null;
-};
-type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (value: string[] | null) => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    "onUpdate:modelValue"?: ((value: string[] | null) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: typeof __VLS_export;
-export default _default;