@winchsa/ui 0.1.31 → 0.1.33

package/dist/components/forms/DatePicker.vue

@@ -1,400 +0,0 @@
-<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(() => {
-  if (props.placeholder) {
-    return props.placeholder;
-  }
-  if (LangLabel.value) {
-    return t("inputs.placeholder_select", {
-      name: LangLabel.value
-    });
-  }
-  return "";
-});
-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 ? 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

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

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

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

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

@@ -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;