@winchsa/ui 0.1.0

package/dist/components/forms/LicensePlateInput.vue

@@ -0,0 +1,159 @@
+<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 },
+  error: { type: Boolean, required: false }
+});
+const model = defineModel({ type: [Array, null], ...{ default: ["", "", "", ""] } });
+const LangLabel = computed(() => props.label ? t(props.label) : "");
+const handleInput = (e, index) => {
+  const input = e.target;
+  const value = input.value;
+  if (!model.value) {
+    model.value = ["", "", "", ""];
+  }
+  if (e.inputType === "deleteContentBackward") {
+    model.value[index] = "";
+    if (index > 0) {
+      document.getElementById(`license-${props.customId || ""}-${index - 1}`)?.focus();
+    }
+    return;
+  }
+  if (index < 3) {
+    if (/\d/.test(value)) {
+      model.value[index] = "";
+      input.value = "";
+      return;
+    }
+    model.value[index] = value;
+    if (value) {
+      document.getElementById(`license-${props.customId || ""}-${index + 1}`)?.focus();
+    }
+  } else {
+    if (/\D/.test(value)) {
+      model.value[index] = "";
+      input.value = "";
+      return;
+    }
+    model.value[index] = value;
+  }
+};
+const clear = () => {
+  model.value = null;
+};
+const requiredRule = computed(() => {
+  return (value) => {
+    return value?.some(Boolean) || t("validation.required");
+  };
+});
+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"
+      :rules="[requiredRule]"
+      validate-on="input lazy"
+    >
+      <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': isValid.value === false || error
+}"
+        >
+          <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"
+            :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 {
+  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--error {
+  border-color: rgba(var(--v-theme-error), 1);
+}
+.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 .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,16 @@
+type __VLS_Props = {
+    hideDetails?: boolean;
+    label?: string;
+    customId?: string;
+    errorMessages?: string[] | string;
+    error?: boolean;
+};
+type __VLS_PublicProps = {
+    modelValue?: string[] | null;
+} & __VLS_Props;
+declare const _default: 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>;
+export default _default;

package/dist/components/forms/ManualDate.vue

@@ -0,0 +1,262 @@
+<script setup>
+import momentHijri from "moment-hijri";
+import { computed, ref, watch } from "vue";
+import { useI18n } from "vue-i18n";
+import { VLabel, VIcon, VValidation, VMessages } from "vuetify/components";
+import { ruleValidator } from "../../utils/ruleValidator";
+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 }
+});
+const emit = defineEmits(["update:model-value"]);
+const { requiredValidator } = ruleValidator();
+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" ? momentHijri().iYear() : (/* @__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"
+      :rules="[requiredValidator]"
+    >
+      <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 || yearIsInvalid,
+  '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 {
+  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);
+  border-radius: 6px;
+  transition: all 0.5s;
+  box-sizing: border-box;
+}
+.app-date-input.app-date-input--error {
+  border-color: rgba(var(--v-theme-error), 1);
+}
+.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 .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,17 @@
+type __VLS_Props = {
+    hideDetails?: boolean;
+    label?: string;
+    customId?: string;
+    modelValue?: string;
+    errorMessages?: string[] | string;
+    type?: 'gregorian' | 'hijri' | string | undefined;
+    disabled?: boolean;
+};
+declare const _default: 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;
+}>, {
+    customId: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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,49 @@
+import { VTextField, VLabel } from 'vuetify/components';
+declare const numberValidator: (value: unknown) => string | true;
+type __VLS_Props = {
+    label?: string;
+    rules?: ((value: unknown) => string | true)[];
+};
+declare const mobileValue: import("vue").ModelRef<string | number | undefined, string, string | number | undefined, string | number | undefined>;
+declare const elementId: import("vue").ComputedRef<string | undefined>;
+declare const LangLabel: import("vue").ComputedRef<string>;
+declare const validateInput: (event: InputEvent) => void;
+type __VLS_PublicProps = {
+    modelValue?: number | string;
+} & __VLS_Props;
+declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
+declare var __VLS_14: any, __VLS_15: any;
+type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
+    [K in NonNullable<typeof __VLS_14>]?: (props: typeof __VLS_15) => any;
+}>;
+declare const __VLS_self: import("vue").DefineComponent<__VLS_PublicProps, {
+    VTextField: typeof VTextField;
+    VLabel: typeof VLabel;
+    numberValidator: typeof numberValidator;
+    mobileValue: typeof mobileValue;
+    elementId: typeof elementId;
+    LangLabel: typeof LangLabel;
+    validateInput: typeof validateInput;
+}, {}, {}, {}, 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;
+}>, {
+    modelValue: number | string;
+    label: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_component: 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;
+}>, {
+    modelValue: number | string;
+    label: 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/PasswordInput.vue

@@ -0,0 +1,29 @@
+<script setup>
+import { computed, ref } from "vue";
+import AppTextField from "../core/app-form-elements/AppTextField.vue";
+const props = defineProps({
+  modelValue: { type: [String, null], required: false, default: null },
+  label: { type: String, required: false, default: "" }
+});
+const emit = defineEmits(["update:modelValue"]);
+const value = computed({
+  get() {
+    return props.modelValue;
+  },
+  set(value2) {
+    emit("update:modelValue", value2 || "");
+  }
+});
+const isPasswordVisible = ref(false);
+</script>
+
+<template>
+  <AppTextField
+    v-bind="$attrs"
+    v-model="value"
+    :label="label"
+    :type="isPasswordVisible ? 'text' : 'password'"
+    :append-inner-icon="isPasswordVisible ? 'tabler-eye-off' : 'tabler-eye'"
+    @click:append-inner="isPasswordVisible = !isPasswordVisible"
+  />
+</template>

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

@@ -0,0 +1,13 @@
+type __VLS_Props = {
+    modelValue?: string | null;
+    label?: string;
+};
+declare const _default: 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;
+}>, {
+    modelValue: string | null;
+    label: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;