@winchsa/ui 0.1.31 → 0.1.33

package/dist/components/forms/LicensePlateInput.vue

@@ -1,175 +0,0 @@
-<script setup>
-import { computed, watch } from "vue";
-import { useI18n } from "vue-i18n";
-import { VLabel, VIcon, VValidation, VMessages } from "vuetify/components";
-const { t } = useI18n();
-const props = defineProps({
-  hideDetails: { type: Boolean, required: false },
-  label: { type: String, required: false },
-  customId: { type: String, required: false },
-  errorMessages: { type: [Array, String], required: false },
-  validateOn: { type: null, required: false, default: "submit lazy" },
-  error: { type: Boolean, required: false },
-  rules: { type: Array, required: false }
-});
-const model = defineModel({ type: [Array, null], ...{ default: ["", "", "", ""] } });
-const LangLabel = computed(() => props.label ? t(props.label) : "");
-const allowedLetters = ["A", "B", "J", "D", "R", "S", "X", "T", "E", "G", "K", "L", "Z", "N", "H", "U", "V"];
-const allowedArabicLetters = ["\u0623", "\u0627", "\u0628", "\u062D", "\u062F", "\u0631", "\u0633", "\u0635", "\u0637", "\u0639", "\u0642", "\u0643", "\u0644", "\u0645", "\u0646", "\u0647", "\u0648", "\u064A"];
-const normalizeInput = (input) => {
-  const arabicCasting = {
-    "\u0627": "\u0623",
-    "\u0622": "\u0623",
-    "\u0625": "\u0623",
-    "\u0649": "\u064A"
-  };
-  return input.split("").map((char) => arabicCasting[char] || char.toUpperCase()).join("");
-};
-const updateModelAt = (index, value) => {
-  const newModel = [...model.value ?? ["", "", "", ""]];
-  newModel[index] = value;
-  model.value = newModel;
-};
-const handleInput = (e, index) => {
-  const input = e.target;
-  let value = input.value;
-  if (!model.value) {
-    model.value = ["", "", "", ""];
-  }
-  if (e.inputType === "deleteContentBackward") {
-    updateModelAt(index, "");
-    if (index > 0) {
-      document.getElementById(`license-${props.customId || ""}-${index - 1}`)?.focus();
-    }
-    return;
-  }
-  if (index < 3) {
-    value = normalizeInput(value);
-    if (!allowedLetters.includes(value) && !allowedArabicLetters.includes(value)) {
-      updateModelAt(index, "");
-      input.value = "";
-      return;
-    }
-    updateModelAt(index, value);
-    if (value) {
-      document.getElementById(`license-${props.customId || ""}-${index + 1}`)?.focus();
-    }
-  } else {
-    if (/\D/.test(value)) {
-      updateModelAt(index, "");
-      input.value = "";
-      return;
-    }
-    updateModelAt(index, value);
-  }
-};
-const clear = () => {
-  model.value = null;
-};
-watch(() => model.value, (newVal) => {
-  if (Array.isArray(newVal)) {
-    model.value = newVal;
-  } else {
-    model.value = null;
-  }
-}, { immediate: true });
-</script>
-
-<template>
-  <div class="d-flex flex-column h-100 w-100">
-    <VValidation
-      v-slot="{ errorMessages: validationErrors, isValid }"
-      v-model="model"
-      :error="error"
-      :rules="rules"
-      :validate-on="validateOn"
-    >
-      <div class="d-flex flex-column h-100">
-        <VLabel
-          v-if="label"
-          class="mb-2 text-body-2 text-high-emphasis"
-          :text="LangLabel"
-        />
-        <div
-          class="app-license-plate-input position-relative"
-          style="min-height: 45px;"
-          :class="{
-  'app-license-plate-input--error': error || isValid.value === false
-}"
-        >
-          <input
-            v-for="(_, index) in 4"
-            :id="`license-${customId || ''}-${index}`"
-            :key="`license-${customId || ''}-${index}`"
-            :value="model?.[index] ?? ''"
-            class="app-license-plate-input-cell"
-            type="text"
-            autocomplete="off"
-            :maxlength="index === 3 ? 4 : 1"
-            :placeholder="index === 3 ? t('inputs.numbers') : t('inputs.character')"
-            @input="handleInput($event, index)"
-          >
-          <a
-            v-if="model?.some(Boolean)"
-            class="position-absolute"
-            style="inset-inline-end: 10px;"
-            @click="clear"
-          >
-            <VIcon
-              size="19"
-              style="color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)) !important;"
-            >
-              tabler-x
-            </VIcon>
-          </a>
-        </div>
-        <VMessages
-          v-if="!hideDetails"
-          class="mt-n1"
-          :messages="errorMessages || validationErrors.value"
-          :active="!isValid.value"
-        />
-      </div>
-    </VValidation>
-  </div>
-</template>
-
-<style scoped>
-.app-license-plate-input.app-license-plate-input--error {
-  border-color: rgba(var(--v-theme-error), 1) !important;
-}
-.app-license-plate-input:hover {
-  transition: all 0.3s;
-  border-color: rgba(var(--v-theme-primary), 1);
-}
-.app-license-plate-input:focus-within {
-  transition: all 0.3s;
-  border-color: rgba(var(--v-theme-primary));
-}
-.app-license-plate-input {
-  display: grid;
-  grid-template-columns: 60px 60px 60px 1fr;
-  width: 100%;
-  min-height: 40px;
-  height: 100%;
-  align-items: center;
-  border: 1px solid rgba(var(--v-border-color), 0.29);
-  border-radius: 6px;
-  transition: all 0.5s;
-  box-sizing: border-box;
-}
-.app-license-plate-input .app-license-plate-input-cell {
-  height: 100%;
-  text-align: center;
-  padding: 2px 6px;
-  font-size: 13px;
-  outline: none;
-  border-inline-end: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
-}
-.app-license-plate-input .app-license-plate-input-cell:last-of-type {
-  text-align: start;
-  padding-inline-start: 12px;
-  border: 0px;
-  width: 100%;
-}
-</style>

package/dist/components/forms/LicensePlateInput.vue.d.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;

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

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

package/dist/components/forms/ManualDate.vue

@@ -1,264 +0,0 @@
-<script setup>
-import { computed, ref, watch } from "vue";
-import { useI18n } from "vue-i18n";
-import { VLabel, VIcon, VValidation, VMessages } from "vuetify/components";
-import { HijriJS } from "../../utils/hijriDate";
-const { t } = useI18n();
-const props = defineProps({
-  hideDetails: { type: Boolean, required: false },
-  label: { type: String, required: false },
-  customId: { type: String, required: false, default: "" },
-  modelValue: { type: String, required: false },
-  errorMessages: { type: [Array, String], required: false },
-  type: { type: null, required: false },
-  disabled: { type: Boolean, required: false },
-  validateOn: { type: null, required: false, default: "submit lazy" },
-  error: { type: Boolean, required: false },
-  rules: { type: Array, required: false }
-});
-const emit = defineEmits(["update:model-value"]);
-const date = ref({
-  year: "",
-  month: "",
-  day: ""
-});
-const dayInputRef = ref(null);
-const monthInputRef = ref(null);
-const yearInputRef = ref(null);
-const LangLabel = computed(() => props.label ? t(props.label) : "");
-const yearIsInvalid = computed(() => {
-  return date.value.year ? date.value.year.length < 4 : false;
-});
-const onBackspace = (e, key) => {
-  const input = e.target;
-  if (e.key === "Backspace" && !date.value[key]) {
-    if (input.dataset.order === "2") {
-      dayInputRef.value?.focus();
-    } else if (input.dataset.order === "3") {
-      monthInputRef.value?.focus();
-    }
-  }
-};
-const onDayInput = (e) => {
-  const input = e.target;
-  if (e.inputType === "deleteContentBackward") {
-    date.value.day = date.value.day?.slice(0, -1);
-    return;
-  }
-  if (/\D/g.test(input.value)) {
-    date.value.day = date.value.day.replace(/\D/g, "");
-    input.value = date.value.day;
-    return;
-  }
-  if (parseInt(input.value) > 31) {
-    date.value.day = "31";
-    input.value = "31";
-  } else {
-    date.value.day = input.value;
-  }
-  if (date.value.day?.length > 1) {
-    monthInputRef.value?.focus();
-  }
-};
-const onMonthInput = (e) => {
-  const input = e.target;
-  if (e.inputType === "deleteContentBackward") {
-    date.value.month = date.value.month?.slice(0, -1);
-    return;
-  }
-  if (/\D/g.test(input.value)) {
-    date.value.month = date.value.month.replace(/\D/g, "");
-    input.value = date.value.month;
-    return;
-  }
-  if (parseInt(input.value) > 12) {
-    date.value.month = "12";
-    input.value = "12";
-  } else {
-    date.value.month = input.value;
-  }
-  if (date.value.month?.length > 1) {
-    yearInputRef.value?.focus();
-  }
-};
-const onYearInput = (e) => {
-  const input = e.target;
-  if (e.inputType === "deleteContentBackward") {
-    date.value.year = date.value.year?.slice(0, -1);
-    return;
-  }
-  if (/\D/g.test(input.value)) {
-    date.value.year = date.value.year.replace(/\D/g, "");
-    input.value = date.value.year;
-    return;
-  }
-  const currentYear = props.type === "hijri" ? HijriJS.today().year : (/* @__PURE__ */ new Date()).getFullYear();
-  if (parseInt(input.value) > currentYear) {
-    date.value.year = String(currentYear);
-    input.value = String(currentYear);
-  } else {
-    date.value.year = input.value;
-  }
-};
-const clear = () => {
-  date.value = {
-    year: "",
-    month: "",
-    day: ""
-  };
-};
-const dateFormat = (type) => {
-  if (type === "day") {
-    date.value.day = date.value.day ? date.value.day.padStart(2, "0") : "";
-  }
-  if (type === "month") {
-    date.value.month = date.value.month ? date.value.month.padStart(2, "0") : "";
-  }
-};
-watch(() => date.value, (val) => {
-  emit("update:model-value", [val.year, val.month, val.day].join("-"));
-}, {
-  deep: true
-});
-watch(() => props.type, clear, { deep: true });
-watch(() => props.modelValue, (val) => {
-  if (val) {
-    const [year, month, day] = val.split("-") ?? [];
-    date.value = {
-      year: year ?? "",
-      month: month ?? "",
-      day: day ?? ""
-    };
-  } else {
-    date.value = {
-      year: "",
-      month: "",
-      day: ""
-    };
-  }
-}, { deep: true, immediate: true });
-</script>
-
-<template>
-  <div>
-    <VValidation
-      v-slot="{ errorMessages: validationErrors, isValid }"
-      v-model="date"
-      :error="error"
-      :rules="rules"
-    >
-      <div class="d-flex flex-column">
-        <VLabel
-          v-if="label"
-          class="mb-2 text-body-2 text-high-emphasis"
-          :text="LangLabel"
-        />
-        <div class="app-date-input position-relative" style="min-height: 45px;" :class="{
-  'app-date-input--error': isValid.value === false || yearIsInvalid || error,
-  'app-date-input--disabled': disabled
-}">
-          <input
-            ref="dayInputRef"
-            data-order="1"
-            :value="date.day"
-            class="app-date-input-cell"
-            type="text"
-            maxlength="2"
-            :placeholder="t('inputs.day')"
-            :disabled="disabled"
-            autocomplete="off"
-            @input="onDayInput($event)"
-            @keyup="onBackspace($event, 'day')"
-            @blur="dateFormat('day')"
-          >
-          <input
-            ref="monthInputRef"
-            data-order="2"
-            :value="date.month"
-            class="app-date-input-cell"
-            type="text"
-            maxlength="2"
-            :placeholder="t('inputs.month')"
-            :disabled="disabled"
-            autocomplete="off"
-            @input="onMonthInput($event)"
-            @keyup="onBackspace($event, 'month')"
-            @blur="dateFormat('month')"
-          >
-          <input
-            ref="yearInputRef"
-            data-order="3"
-            :value="date.year"
-            class="app-date-input-cell"
-            type="text"
-            maxlength="4"
-            :placeholder="t('inputs.year')"
-            :disabled="disabled"
-            autocomplete="off"
-            @input="onYearInput($event)"
-            @keyup="onBackspace($event, 'year')"
-          >
-          <a
-            v-if="date && Object.values(date).filter(Boolean).length > 0"
-            class="position-absolute"
-            style="inset-inline-end: 10px;"
-            @click="clear"
-          >
-            <VIcon size="19" style="color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)) !important;">tabler-x</VIcon>
-          </a>
-        </div>
-        <VMessages
-          v-if="!hideDetails"
-          class="mt-n1"
-          :messages="errorMessages || validationErrors.value"
-          :active="!isValid.value"
-        />
-      </div>
-    </VValidation>
-  </div>
-</template>
-
-<style scoped>
-.app-date-input.app-date-input--error {
-  border-color: rgba(var(--v-theme-error), 1) !important;
-}
-.app-date-input.app-date-input--disabled {
-  border-color: rgba(var(--v-border-color), var(--v-border-opacity)) !important;
-  background: rgb(var(--v-disabled-background)) !important;
-}
-.app-date-input:hover {
-  transition: all 0.3s;
-  border-color: rgba(var(--v-border-color), 1);
-}
-.app-date-input:focus-within {
-  transition: all 0.3s;
-  border-color: rgba(var(--v-theme-primary));
-}
-.app-date-input {
-  display: grid;
-  grid-template-columns: 60px 60px 1fr;
-  width: 100%;
-  min-height: 40px;
-  height: 100%;
-  align-items: center;
-  border: 1px solid rgba(var(--v-border-color), 0.29) !important;
-  border-radius: 6px;
-  transition: all 0.5s;
-  box-sizing: border-box;
-}
-.app-date-input .app-date-input-cell {
-  height: 100%;
-  text-align: center;
-  padding: 2px 6px;
-  font-size: 13px;
-  outline: none;
-  border-inline-end: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
-}
-.app-date-input .app-date-input-cell:last-of-type {
-  text-align: start;
-  padding-inline-start: 12px;
-  border: 0px;
-  width: 100%;
-  min-width: 80px;
-}
-</style>

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

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

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

@@ -1,25 +0,0 @@
-type __VLS_Props = {
-    label?: string;
-    rules?: ((value: unknown) => string | true)[];
-};
-type __VLS_ModelProps = {
-    modelValue?: number | string;
-};
-type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare var __VLS_17: string | number, __VLS_18: any;
-type __VLS_Slots = {} & {
-    [K in NonNullable<typeof __VLS_17>]?: (props: typeof __VLS_18) => any;
-};
-declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (value: string | number | undefined) => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    "onUpdate:modelValue"?: ((value: string | number | undefined) => 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/MobileInput.vue

@@ -1,118 +0,0 @@
-<script setup>
-import { computed, useAttrs } from "vue";
-import { useI18n } from "vue-i18n";
-import { VTextField, VLabel } from "vuetify/components";
-import { ruleValidator } from "../../utils/ruleValidator";
-const { t } = useI18n();
-const { numberValidator } = ruleValidator();
-const props = defineProps({
-  label: { type: String, required: false, default: "" },
-  rules: { type: Array, required: false }
-});
-const mobileValue = defineModel({ type: [Number, String] });
-const elementId = computed(() => {
-  const attrs = useAttrs();
-  const _elementIdToken = attrs.id || attrs.label;
-  return _elementIdToken ? `AppTextField-${_elementIdToken}-${Math.random().toString(36).slice(2, 7)}` : void 0;
-});
-const LangLabel = computed(() => props.label ? t(props.label) : "");
-const validateInput = (event) => {
-  const input = event.target;
-  let value = input.value.replace(/\D/g, "");
-  if (value.length > 0 && !/^0|^5/.test(value)) {
-    value = "";
-  }
-  mobileValue.value = value;
-  input.value = value;
-};
-</script>
-
-<template>
-  <div
-    class="AppTextField flex-grow-1 mobile-input w-100"
-    :class="$attrs.class"
-    lang="en"
-  >
-    <VLabel
-      v-if="label"
-      :for="elementId"
-      class="mb-2 text-body-2 text-high-emphasis"
-      :text="LangLabel"
-    />
-
-    <VTextField
-      v-bind="{
-  ...$attrs,
-  class: null,
-  label: void 0,
-  variant: 'outlined',
-  id: elementId
-}"
-      v-model="mobileValue"
-      lang="en"
-      placeholder="5xxxxxxxx"
-      :maxlength="mobileValue?.startsWith('0') ? 10 : 9"
-      type="text"
-      :rules="[numberValidator, ...(props.rules || [])]"
-      @input="validateInput"
-    >
-      <template
-        v-for="(_, name) in $slots"
-        #[name]="slotProps"
-      >
-        <slot
-          :name="name"
-          v-bind="slotProps || {}"
-        />
-      </template>
-      <template #details>
-        <span class="app-h-1" />
-      </template>
-      <template #append-inner>
-        <div
-          class="d-flex flex-nowrap"
-        >
-          <img
-            src="../../images/sa.svg"
-            alt="sa"
-            width="20"
-          >
-          <span class="ms-2"> +966 </span>
-        </div>
-      </template>
-    </VTextField>
-  </div>
-</template>
-
-<style>
-.mobile-input .v-field__input {
-  padding-inline-start: 16px !important;
-  padding-inline-end: 16px !important;
-}
-.mobile-input .v-input__control .v-field__field {
-  border: none !important;
-}
-.mobile-input .v-field {
-  padding: 0 !important;
-}
-.mobile-input .v-input input,
-.mobile-input .v-field__append-inner {
-  direction: ltr !important;
-  text-align: start !important;
-}
-.mobile-input .v-field__append-inner {
-  padding-inline-start: 16px;
-}
-.mobile-input .v-field__append-inner span {
-  direction: ltr;
-  font-size: 14px;
-}
-
-[dir=ltr] .mobile-input .v-field {
-  display: flex !important;
-  flex-direction: row-reverse !important;
-}
-[dir=ltr] .mobile-input .v-field--appended {
-  padding-inline-end: 0 !important;
-}
-</style>

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

@@ -1,25 +0,0 @@
-type __VLS_Props = {
-    label?: string;
-    rules?: ((value: unknown) => string | true)[];
-};
-type __VLS_ModelProps = {
-    modelValue?: number | string;
-};
-type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare var __VLS_17: string | number, __VLS_18: any;
-type __VLS_Slots = {} & {
-    [K in NonNullable<typeof __VLS_17>]?: (props: typeof __VLS_18) => any;
-};
-declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (value: string | number | undefined) => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    "onUpdate:modelValue"?: ((value: string | number | undefined) => 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/PasswordInput.d.vue.ts

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