@winchsa/ui 0.1.33 → 0.1.34

package/dist/components/forms/DatePicker.vue

@@ -0,0 +1,392 @@
+<script setup>
+import { DatePicker as VCalendarDatePicker } from "v-calendar";
+import "v-calendar/style.css";
+import { useTheme } from "vuetify";
+import { computed, onBeforeMount, onMounted, onBeforeUnmount, ref, watch, nextTick, useAttrs } from "vue";
+import { useI18n } from "vue-i18n";
+import { VTextField, VLabel } from "vuetify/components";
+import { extractDate, formatDateWithoutTime } from "../../utils/formatters";
+import { generateUniqueId } from "../../utils/utils";
+const { t, locale } = useI18n();
+const { current } = useTheme();
+const props = defineProps({
+  modelValue: { type: [String, Date], required: false, default: "" },
+  format: { type: String, required: false, default: "DD-MM-YYYY" },
+  displayFormat: { type: String, required: false },
+  label: { type: String, required: false },
+  forcedLabel: { type: String, required: false },
+  minDate: { type: [String, Date, null], required: false },
+  maxDate: { type: [String, Date, null], required: false },
+  placeholder: { type: String, required: false },
+  disabled: { type: Boolean, required: false, skipCheck: true },
+  errorMessages: { type: [String, Array], required: false, default: "" },
+  clearable: { type: Boolean, required: false },
+  clearIcon: { type: String, required: false },
+  required: { type: Boolean, required: false },
+  rules: { type: Array, required: false },
+  showToday: { type: Boolean, required: false, default: true },
+  hideErrorMessage: { type: Boolean, required: false, default: false },
+  inTable: { type: Boolean, required: false }
+});
+const emit = defineEmits(["update:modelValue", "resetSelectedDate"]);
+const popover = ref({
+  visibility: "focus",
+  placement: "top"
+});
+const inputValue = ref("");
+const isFocus = ref(false);
+const value = ref();
+const guid = generateUniqueId();
+const elementId = computed(() => {
+  const attrs = useAttrs();
+  const _elementIdToken = attrs.id || attrs.label;
+  return _elementIdToken ? `AppTextField-${_elementIdToken}-${guid}` : `datepicker-${_elementIdToken}-${guid}`;
+});
+const langLabel = computed(() => props.label ? t(props.label) : "");
+const placeholder = computed(() => {
+  return props.placeholder || (langLabel.value ? t("inputs.placeholder_select", { name: langLabel.value }) : "");
+});
+const localeConfig = computed(() => ({
+  id: locale.value,
+  firstDayOfWeek: 2,
+  masks: { weekdays: "WWW" }
+}));
+const isValueToday = computed(() => formatDateWithoutTime(/* @__PURE__ */ new Date()) === formatDateWithoutTime(value.value));
+const calendarAttributes = computed(() => props.showToday ? [{
+  key: "today",
+  highlight: {
+    fillMode: isValueToday.value ? "solid" : "outline",
+    contentStyle: { pointerEvents: isValueToday.value ? "none" : "auto", fontWeight: "600" }
+  },
+  dates: /* @__PURE__ */ new Date()
+}] : []);
+const selectAttribute = computed(() => {
+  return { highlight: { contentStyle: { pointerEvents: "none", fontWeight: "600" } } };
+});
+const resetSelectedDate = () => {
+  value.value = "";
+  inputValue.value = "";
+  emit("resetSelectedDate");
+};
+const formatDate = ($event) => {
+  const input = document.getElementById(elementId.value);
+  if (!$event) {
+    inputValue.value = "";
+    input?.focus();
+    resetSelectedDate();
+    return;
+  }
+  let cleaned = $event.replace(/[^0-9\\/]/g, "");
+  if (cleaned.length >= 2 && cleaned[2] !== "/") {
+    cleaned = `${cleaned.slice(0, 2)}/${cleaned.slice(2)}`;
+  }
+  if (cleaned.length >= 5 && cleaned[5] !== "/") {
+    cleaned = `${cleaned.slice(0, 5)}/${cleaned.slice(5)}`;
+  }
+  const parts = cleaned.split("/");
+  if (parts[0] && parseInt(parts[0], 10) > 31) {
+    parts[0] = "31";
+  }
+  if (parts[1] && parseInt(parts[1], 10) > 12) {
+    parts[1] = "12";
+  }
+  if (parts[2] && Number((/* @__PURE__ */ new Date()).getFullYear()) < Number(parts[2])) {
+    parts[2] = `${(/* @__PURE__ */ new Date()).getFullYear()}`;
+  }
+  if (parts[2] && parts[2].length > 4) {
+    parts[2] = "";
+  }
+  inputValue.value = parts.join("/");
+  if (parts[2] && parts[2].length > 3 && parts[1] && parts[0]) {
+    value.value = new Date(Number(parts[2]), Number(parts[1]) - 1, Number(parts[0]));
+    nextTick(() => {
+      isFocus.value = true;
+    });
+  }
+  input.value = parts.join("/");
+  input?.focus();
+};
+const customPosition = () => {
+  const datepickerInputElement = document.querySelector(`#${elementId.value}`);
+  const rect = datepickerInputElement?.getBoundingClientRect();
+  return {
+    top: (rect?.top || 0) + window.pageYOffset + (rect?.height || 100) / 2 + 46 / 2,
+    left: (rect?.left || 0) - (props.inTable ? rect?.width : 0)
+  };
+};
+const closeMenu = (event) => {
+  const vCalendarMenu = document.getElementById(`vc-calendar-container-${elementId.value}`);
+  const vCalendarInput = document.getElementById(`${elementId.value}`);
+  if (!vCalendarMenu?.contains(event.target) && !vCalendarInput?.contains(event.target)) {
+    isFocus.value = false;
+  }
+};
+const getFullTextDate = (date, format, hasTime = true) => {
+  if (date) {
+    const extractedDateParts = extractDate(date, format, hasTime);
+    const generatedStandardDate = extractedDateParts ? new Date(+extractedDateParts.year, +extractedDateParts.month - 1, +extractedDateParts.day) : "";
+    return generatedStandardDate;
+  } else {
+    return "";
+  }
+};
+const setCalendarValue = (dateValue) => {
+  value.value = dateValue;
+  inputValue.value = dateValue ? formatDateWithoutTime(dateValue, props.displayFormat) : "";
+  isFocus.value = false;
+  emit("update:modelValue", value.value ? formatDateWithoutTime(value.value, props.format) : "");
+};
+watch(() => props.modelValue, (val) => {
+  if (val) {
+    const date = getFullTextDate(val, props.format);
+    inputValue.value = formatDateWithoutTime(date, props.displayFormat)?.includes("NaN") ? "" : date ? formatDateWithoutTime(date, props.displayFormat) : "";
+    value.value = date;
+  } else {
+    inputValue.value = "";
+    resetSelectedDate();
+  }
+}, {
+  immediate: true
+});
+onBeforeMount(() => {
+  if (props.modelValue) {
+    const date = getFullTextDate(props.modelValue, props.format);
+    inputValue.value = formatDateWithoutTime(date, props.displayFormat)?.includes("NaN") ? "" : date ? formatDateWithoutTime(date, props.displayFormat) : "";
+  }
+});
+onMounted(() => {
+  window.addEventListener("mouseup", closeMenu);
+  const observer = new MutationObserver((mutations) => {
+    mutations.forEach((mutation) => {
+      if (mutation && mutation.addedNodes) {
+        mutation.addedNodes.forEach((elm) => {
+          if (elm && typeof elm?.className === "string" && elm?.className?.includes("vc-nav-popover-container")) {
+            elm.addEventListener("click", (e) => {
+              if (e?.target?.classList?.contains("is-active")) {
+                document.body.click();
+              }
+            });
+          }
+        });
+      }
+    });
+  });
+  observer.observe(document.body, {
+    childList: true,
+    subtree: true
+  });
+});
+onBeforeUnmount(() => {
+  window.removeEventListener("mouseup", closeMenu);
+});
+</script>
+
+<template>
+  <div class="d-flex flex-column w-100">
+    <VLabel
+      v-if="forcedLabel || label"
+      class="text-body-2 text-high-emphasis mb-2"
+      :text="forcedLabel || langLabel"
+    />
+    <div dir="ltr" class="h-100">
+      <div :dir="locale === 'en' ? 'ltr' : 'rtl'" class="d-flex justify-center align-center gap-2 h-100">
+        <VTextField
+          v-bind="{
+  ...$attrs
+}"
+          :id="elementId"
+          :model-value="inputValue"
+          :placeholder="placeholder"
+          :append-inner-icon="$attrs['append-inner-icon'] || 'tabler-calendar-event'"
+          :disabled="disabled"
+          :clearable="clearable"
+          :clear-icon="clearIcon"
+          :rules="rules"
+          :hide-details="hideErrorMessage"
+          :error-messages="errorMessages"
+          style="padding-block: 0.125rem;"
+          autocomplete="off"
+          @update:model-value="formatDate"
+          @click:clear="resetSelectedDate"
+          @focus="isFocus = true"
+          @click="isFocus = true"
+        >
+          <template #details>
+            <span class="app-h-1" />
+          </template>
+        </VTextField>
+      </div>
+      <Teleport to="body">
+        <div
+          v-show="isFocus"
+          :id="`vc-calendar-container-${elementId}`"
+          class="position-absolute"
+          style="z-index: 1005;"
+          dir="ltr"
+          :style="{
+  left: `${customPosition().left - 20}px`,
+  top: `${customPosition().top + 10}px`
+}"
+        >
+          <div class="position-relative">
+            <div class="vc-custom-arrow" />
+            <VCalendarDatePicker
+              :model-value="value"
+              dir="ltr"
+              class="vc-calender-custom"
+              :popover="popover"
+              :locale="localeConfig"
+              :attributes="calendarAttributes"
+              :select-attribute="selectAttribute"
+              :min-date="minDate instanceof Date ? minDate : typeof minDate === 'string' ? getFullTextDate(minDate, props.format, false) : null"
+              :max-date="maxDate instanceof Date ? maxDate : typeof maxDate === 'string' ? getFullTextDate(maxDate, props.format, false) : null"
+              :is-required="required"
+              :is-dark="current.dark"
+              inline
+              @update:model-value="setCalendarValue"
+            />
+          </div>
+        </div>
+      </Teleport>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+:deep(.v-input__control) .v-field__input {
+  padding-inline-start: 14px !important;
+}
+:deep(.v-input__control) .v-field__input input {
+  padding-inline-start: 0px !important;
+  font-size: 13px !important;
+}
+:deep(.v-input__control) .v-field .v-field__clearable {
+  inset-inline-start: -4px !important;
+}
+
+.app-border-primary {
+  border-color: rgb(var(--v-theme-primary)) !important;
+}
+
+:deep(.vc-blue) {
+  --vc-accent-50: #fdf7e6;
+  --vc-accent-100: #fcefbf;
+  --vc-accent-200: #fbe791;
+  --vc-accent-300: #fadd62;
+  --vc-accent-400: #fdc930;
+  --vc-accent-500: #fdc930;
+  --vc-accent-600: #fdc930;
+  --vc-accent-700: #fdc930;
+  --vc-accent-800: #fdc930;
+  --vc-accent-900: #fdc930;
+  color: #000 !important;
+}
+
+.vc-calender-custom {
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06) !important;
+}
+
+:deep(.vc-nav-item.is-active) {
+  color: #000 !important;
+}
+
+:deep(.vc-monthly) .is-not-in-month * {
+  color: rgb(var(--v-theme-gray-600));
+  opacity: 1;
+  pointer-events: all !important;
+}
+
+:deep(.vc-light), :deep(.vc-dark) {
+  --vc-focus-ring: none !important;
+}
+
+:deep(.vc-title) span {
+  font-weight: 500 !important;
+  font-size: 16px !important;
+}
+
+:deep(.vc-nav-title) {
+  font-weight: 500 !important;
+  font-size: 14px !important;
+}
+
+:deep(.vc-weekday), :deep(.vc-nav-item) {
+  font-weight: 500 !important;
+}
+
+:deep(.vc-disabled) {
+  color: rgb(var(--v-theme-gray-600)) !important;
+  opacity: 0.5 !important;
+  cursor: not-allowed;
+}
+
+:deep(.vc-popover-content) {
+  min-width: 200px !important;
+}
+
+:deep(.vc-nav-item) {
+  width: auto !important;
+  padding-left: 2px !important;
+  padding-right: 2px !important;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  line-height: unset;
+}
+
+:deep(.vc-nav-item.is-current) {
+  background-color: transparent !important;
+  color: rgb(var(--v-theme-on-surface));
+  font-weight: 400 !important;
+  border: 2px solid rgb(var(--v-theme-primary)) !important;
+}
+
+:deep(.vc-arrow), :deep(.vc-weekday) {
+  color: rgb(var(--v-theme-on-surface));
+}
+
+:deep(.vc-bordered) {
+  border-color: rgba(var(--v-theme-gray-300));
+}
+
+:deep(.vc-custom-arrow) {
+  width: 15px;
+  height: 15px;
+  background: rgba(var(--v-theme-surface));
+  position: absolute;
+  z-index: 10;
+  border-top: 1px solid rgba(var(--v-theme-gray-300));
+  border-left: 1px solid rgba(var(--v-theme-gray-300));
+  left: 50%;
+  top: -7px;
+  transform: translateX(-50%) rotate(45deg);
+}
+
+:deep(.vc-popover-content-wrapper[data-popper-placement]) {
+  width: 100% !important;
+  height: 100% !important;
+  top: 0 !important;
+  transform: translate(0) !important;
+}
+:deep(.vc-popover-content-wrapper[data-popper-placement]) .vc-nav-container {
+  margin-top: 2px;
+}
+:deep(.vc-popover-content-wrapper[data-popper-placement]) .vc-popover-content {
+  background-color: rgba(var(--v-theme-surface));
+  margin-top: 0px !important;
+  width: 100% !important;
+  height: 100% !important;
+}
+:deep(.vc-popover-content-wrapper[data-popper-placement]) .vc-popover-content .vc-nav-items {
+  padding: 15px;
+  gap: 20px;
+}
+
+:deep(.vc-custom-arrow) {
+  display: none !important;
+}
+</style>
+
+<style>
+.vc-calender-custom{box-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px 0 rgba(0,0,0,.06)!important}
+</style>

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

@@ -0,0 +1,29 @@
+import 'v-calendar/style.css';
+type __VLS_Props = {
+    modelValue?: string | Date;
+    format?: string;
+    displayFormat?: string;
+    label?: string;
+    forcedLabel?: string;
+    minDate?: string | Date | null;
+    maxDate?: string | Date | null;
+    placeholder?: string;
+    disabled?: boolean | undefined;
+    errorMessages?: string | string[];
+    clearable?: boolean;
+    clearIcon?: string;
+    required?: boolean;
+    rules?: ((value: unknown) => typeof value | string)[];
+    showToday?: boolean;
+    hideErrorMessage?: boolean;
+    inTable?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:modelValue": (value: string | Date) => any;
+    resetSelectedDate: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | Date) => any) | undefined;
+    onResetSelectedDate?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,24 @@
+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 __VLS_export: 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>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/forms/DatePickerRange.vue

@@ -0,0 +1,127 @@
+<script setup>
+import { computed, ref, watch } from "vue";
+import { useI18n } from "vue-i18n";
+import { VCol } from "vuetify/components";
+import { useIsMobile } from "../../composables/useIsMobile";
+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"
+      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"
+      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,24 @@
+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 __VLS_export: 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>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

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