@winchsa/ui 0.1.0

package/dist/components/forms/DatePickerRange.vue

@@ -0,0 +1,129 @@
+<script setup>
+import { computed, ref, watch } from "vue";
+import { useI18n } from "vue-i18n";
+import { VCol } from "vuetify/components";
+import { useIsMobile } from "../../composables/use-is-mobile";
+import DatePicker from "./DatePicker.vue";
+const { t } = useI18n();
+const props = defineProps({
+  modelValue: { type: null, required: true },
+  waitTo: { type: Boolean, required: false },
+  label: { type: String, required: false },
+  rules: { type: Array, required: false },
+  fromErrorMessages: { type: String, required: false },
+  toErrorMessages: { type: String, required: false },
+  fromLabel: { type: String, required: false },
+  toLabel: { type: String, required: false },
+  fromPlaceholder: { type: String, required: false },
+  toPlaceholder: { type: String, required: false },
+  clearable: { type: Boolean, required: false },
+  fromMinDate: { type: [Date, null], required: false },
+  toMinDate: { type: [Date, null], required: false },
+  fromMaxDate: { type: [Date, null], required: false },
+  toMaxDate: { type: [Date, null], required: false }
+});
+const emits = defineEmits(["update:modelValue"]);
+const from = ref(void 0);
+const to = ref(void 0);
+watch(
+  () => props.modelValue,
+  (value) => {
+    if (!value || value.length === 0) {
+      from.value = void 0;
+      to.value = void 0;
+    }
+    if (!Array.isArray(value)) {
+      return;
+    }
+    if (value?.[0] !== from.value && value?.[0] != "" && value?.[0] !== void 0 && value[0] !== null) {
+      from.value = value?.[0];
+    }
+    if (value?.[1] !== to.value && value?.[1] != "" && value?.[1] !== void 0 && value[1] !== null) {
+      to.value = value?.[1];
+    }
+  },
+  { immediate: true }
+);
+const onInput = () => {
+  const newValue = [
+    from.value || null,
+    to.value || null
+  ];
+  emits("update:modelValue", newValue);
+};
+const disableFrom = computed(() => props.waitTo ? !from.value : false);
+const maxToDate = computed(() => props.toMaxDate || /* @__PURE__ */ new Date());
+const maxFromDate = computed(() => props.fromMaxDate || to.value || /* @__PURE__ */ new Date());
+const resetSelectedDate = (type) => {
+  if (type === "to") {
+    to.value = void 0;
+  }
+  if (type === "from") {
+    from.value = void 0;
+  }
+  if (!from.value && !to.value) {
+    emits("update:modelValue", null);
+  } else {
+    onInput();
+  }
+};
+const label = (type) => {
+  const baseLabel = t(props.label || "date");
+  if (type === "from") {
+    return props.fromLabel || t("inputs.from", { name: baseLabel });
+  }
+  if (type === "to") {
+    return props.toLabel || t("inputs.to", { name: baseLabel });
+  }
+};
+</script>
+
+<template>
+  <VCol cols="12" sm="3" class="py-0">
+    <DatePicker
+      id="from"
+      v-model="from"
+      v-bind="{
+        ...$attrs,
+      }"
+      show-today
+      :rules="rules"
+      :clearable="clearable"
+      :error-messages="fromErrorMessages"
+      :min-date="fromMinDate"
+      :max-date="maxFromDate"
+      format="DD-MM-YYYY"
+      display-format="DD/MM/YYYY"
+      :label="props.label"
+      :forced-label="label('from')"
+      :placeholder="props.fromPlaceholder || t('inputs.from')"
+      :hide-error-message="useIsMobile().value"
+      @update:model-value="onInput"
+      @reset-selected-date="resetSelectedDate('from')"
+    />
+  </VCol>
+  <VCol cols="12" sm="3" class="py-0">
+    <DatePicker
+      id="to"
+      v-model="to"
+      v-bind="{
+        ...$attrs,
+      }"
+      show-today
+      :rules="rules"
+      :clearable="clearable"
+      :error-messages="toErrorMessages"
+      :min-date="from || toMinDate"
+      :max-date="maxToDate"
+      :disabled="disableFrom"
+      format="DD-MM-YYYY"
+      display-format="DD/MM/YYYY"
+      :label="props.label"
+      :forced-label="label('to')"
+      :placeholder="t('inputs.to')"
+      :hide-error-message="useIsMobile().value"
+      @update:model-value="onInput"
+      @reset-selected-date="resetSelectedDate('to')"
+    />
+  </VCol>
+</template>

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

@@ -0,0 +1,23 @@
+type __VLS_Props = {
+    modelValue: [Date | string, Date | string] | [] | undefined;
+    waitTo?: boolean;
+    label?: string;
+    rules?: ((value: unknown) => typeof value | string)[];
+    fromErrorMessages?: string;
+    toErrorMessages?: string;
+    fromLabel?: string;
+    toLabel?: string;
+    fromPlaceholder?: string;
+    toPlaceholder?: string;
+    clearable?: boolean;
+    fromMinDate?: Date | null;
+    toMinDate?: Date | null;
+    fromMaxDate?: Date | null;
+    toMaxDate?: Date | null;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:modelValue": (value: [string | Date | null, string | Date | null] | null) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: [string | Date | null, string | Date | null] | null) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/components/forms/DraggedUploadFile.vue

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

@@ -0,0 +1,10 @@
+type __VLS_Props = {
+    modelValue: FileList[];
+    loading?: boolean;
+};
+declare const _default: 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>;
+export default _default;

package/dist/components/forms/ImageCardInput.vue

@@ -0,0 +1,234 @@
+<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/InputValidationWrapper.vue

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

@@ -0,0 +1,33 @@
+type __VLS_Props = {
+    errorMessages?: string | string[];
+};
+declare const internalErrorMessages: import("vue").Ref<string | string[] | undefined, string | string[] | undefined>;
+type __VLS_PublicProps = {
+    modelValue?: unknown;
+} & __VLS_Props;
+declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
+declare var __VLS_1: {
+    internalErrorMessages: any;
+};
+type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
+    default?: (props: typeof __VLS_1) => any;
+}>;
+declare const __VLS_self: import("vue").DefineComponent<__VLS_PublicProps, {
+    internalErrorMessages: typeof internalErrorMessages;
+}, {}, {}, {}, 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_component: 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 _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};