@winchsa/ui 0.1.0

package/dist/components/forms/BankSelect.vue

@@ -0,0 +1,43 @@
+<script setup>
+import { buildApiUrl } from "../../utils/apiUrl";
+import AutocompleteInput from "./AutocompleteInput.vue";
+const bank = defineModel({ type: [Object, String, null], ...{ default: null } });
+defineProps({
+  rules: { type: Array, required: false },
+  errorMessages: { type: String, required: false },
+  multiple: { type: Boolean, required: false },
+  params: { type: Object, required: false },
+  searchInternally: { type: Boolean, required: false },
+  disabled: { type: Boolean, required: false },
+  trackByValue: { type: [String, Array], required: false }
+});
+</script>
+
+<template>
+  <AutocompleteInput
+    v-model="bank"
+    :params="params"
+    :url="buildApiUrl('/banks')"
+    label="inputs.bank"
+    item-label="name"
+    track-by="id"
+    :track-by-value="trackByValue"
+    searchable
+    :search-internally="searchInternally"
+    :rules="rules"
+    :error-messages="errorMessages"
+    :multiple="multiple"
+    :disabled="disabled"
+  >
+    <template #option="{ option }">
+      <div class="d-flex align-center">
+        <img
+          :src="option?.image"
+          width="25"
+          class="me-2"
+        >
+        {{ option.name }}
+      </div>
+    </template>
+  </AutocompleteInput>
+</template>

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

@@ -0,0 +1,19 @@
+import type { Bank, Params } from '../../types';
+type __VLS_Props = {
+    rules?: ((value: unknown) => string | true)[];
+    errorMessages?: string;
+    multiple?: boolean;
+    params?: Params;
+    searchInternally?: boolean;
+    disabled?: boolean;
+    trackByValue?: string | string[];
+};
+type __VLS_PublicProps = {
+    modelValue?: Bank | string | null;
+} & __VLS_Props;
+declare const _default: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string | Bank | null) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | Bank | null) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/components/forms/BaseButton.vue

@@ -0,0 +1,42 @@
+<script setup>
+import { computed, useAttrs } from "vue";
+import { VBtn, VIcon } from "vuetify/components";
+const props = defineProps({
+  title: { type: String, required: false },
+  color: { type: String, required: false, default: "primary" },
+  icon: { type: String, required: false },
+  leadingIcon: { type: String, required: false },
+  trailingIcon: { type: String, required: false }
+});
+const buttonColor = computed(() => useAttrs()?.disabled ? "secondary" : props.color);
+</script>
+
+<template>
+  <VBtn
+    :color="buttonColor"
+    v-bind="$attrs"
+    class="px-4 text-center"
+  >
+    <VIcon
+      v-if="leadingIcon"
+      :icon="leadingIcon"
+      class="me-2 pa-0"
+      size="20"
+    />
+    <VIcon
+      v-if="icon"
+      size="20"
+      :icon="icon"
+      rounded="md"
+    />
+    <slot>
+      {{ title }}
+    </slot>
+    <VIcon
+      v-if="trailingIcon"
+      :icon="trailingIcon"
+      class="ms-2 pa-0"
+      size="20"
+    />
+  </VBtn>
+</template>

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

@@ -0,0 +1,31 @@
+import { VBtn, VIcon } from 'vuetify/components';
+type __VLS_Props = {
+    title?: string;
+    color?: string;
+    icon?: string;
+    leadingIcon?: string;
+    trailingIcon?: string;
+};
+declare const buttonColor: import("vue").ComputedRef<string>;
+declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
+declare var __VLS_14: {};
+type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
+    default?: (props: typeof __VLS_14) => any;
+}>;
+declare const __VLS_self: import("vue").DefineComponent<__VLS_Props, {
+    VBtn: typeof VBtn;
+    VIcon: typeof VIcon;
+    buttonColor: typeof buttonColor;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    color: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    color: string;
+}, {}, {}, {}, 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;
+    };
+};

package/dist/components/forms/CounterInput.vue

@@ -0,0 +1,71 @@
+<script setup>
+import { VBtn, VIcon, VTextField } from "vuetify/components";
+const props = defineProps({
+  disabled: { type: Boolean, required: false },
+  max: { type: Number, required: false },
+  min: { type: Number, required: false, default: 0 },
+  modelValue: { type: Number, required: false, default: 1 }
+});
+const emit = defineEmits(["update:modelValue"]);
+const increment = () => {
+  if (props.max !== void 0 && props.modelValue >= props.max) {
+    return;
+  }
+  emit("update:modelValue", props.modelValue + 1);
+};
+const decrement = () => {
+  if (props.modelValue <= props.min) {
+    return;
+  }
+  emit("update:modelValue", props.modelValue - 1);
+};
+</script>
+
+<template>
+  <div class="d-flex align-center mt-6">
+    <VBtn
+      icon
+      size="36"
+      color="yellow"
+      :disabled="disabled"
+      @click="decrement"
+    >
+      <VIcon color="black">
+        mdi-minus
+      </VIcon>
+    </VBtn>
+
+    <VTextField
+      :model-value="modelValue"
+      readonly
+      hide-details
+      style="max-width: 60px;"
+      @update:model-value="(val) => $emit('update:modelValue', +val)"
+    />
+
+    <VBtn
+      icon
+      :disabled="disabled"
+      size="36"
+      color="yellow"
+      @click="increment"
+    >
+      <VIcon color="black">
+        mdi-plus
+      </VIcon>
+    </VBtn>
+  </div>
+</template>
+
+<style scoped>
+:deep(.v-input *) {
+  border: 0 !important;
+}
+
+:deep(.v-field__input) input {
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  text-align: center;
+}
+</style>

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

@@ -0,0 +1,15 @@
+type __VLS_Props = {
+    disabled?: boolean;
+    max?: number;
+    min?: number;
+    modelValue?: number;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:modelValue": (value: number) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: number) => any) | undefined;
+}>, {
+    modelValue: number;
+    min: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/components/forms/DatePicker.vue

@@ -0,0 +1,400 @@
+<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: "YYYY-MM-DD" },
+  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;
+}
+:deep(.v-input__control) .v-field__input input {
+  padding-inline-start: 0px;
+  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,34 @@
+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 _default: 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;
+}>, {
+    modelValue: string | Date;
+    errorMessages: string | string[];
+    format: string;
+    showToday: boolean;
+    hideErrorMessage: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;