@winchsa/ui 0.1.33 → 0.1.35

package/dist/components/forms/LicensePlateInput.vue

@@ -0,0 +1,175 @@
+<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-1"
+          color="error"
+          :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;
+  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

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

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

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

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

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

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

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

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