@7365admin1/layer-common 1.8.0

package/components/Input/Number.vue

@@ -0,0 +1,124 @@
+<script setup lang="ts">
+import { ref, computed, nextTick, useAttrs } from "vue";
+
+const props = defineProps({
+  infinityEnabled: { type: Boolean, default: false }, // Enable ∞ display for 0
+});
+
+const modelValue = defineModel<number>(); // Store actual number
+const inputRef = ref<HTMLInputElement | null>(null);
+const attrs = useAttrs();
+
+let cursorPosition = 0;
+let forceCursorToEnd = false;
+
+// Computed property to format value with commas or infinity sign
+const formattedValue = computed({
+  get: () => {
+    if (props.infinityEnabled && modelValue.value === 0) return "∞"; // Show ∞ if enabled
+    return modelValue.value?.toLocaleString() ?? "";
+  },
+  set: (val: string) => {
+    if (props.infinityEnabled && val === "∞") {
+      modelValue.value = 0; // Convert back to 0 internally
+      return;
+    }
+
+    const rawValue = val.replace(/\D/g, ""); // Remove non-numeric characters
+    const numericValue = rawValue ? Number(rawValue) : 0;
+
+    if (!isNaN(numericValue)) {
+      modelValue.value = numericValue;
+      nextTick(() => restoreCursor());
+    }
+  },
+});
+
+// Handle keydown for navigation & number changes
+const handleKeyDown = (event: KeyboardEvent) => {
+  if (!inputRef.value || modelValue.value === undefined) return;
+
+  const { selectionStart, selectionEnd, value } = inputRef.value;
+  const isAllSelected = selectionStart === 0 && selectionEnd === value.length;
+
+  if (
+    !/^\d$/.test(event.key) &&
+    ![
+      "Backspace",
+      "Delete",
+      "ArrowLeft",
+      "ArrowRight",
+      "ArrowUp",
+      "ArrowDown",
+    ].includes(event.key)
+  ) {
+    event.preventDefault();
+    return;
+  }
+
+  if (isAllSelected && /^\d$/.test(event.key)) {
+    event.preventDefault();
+    modelValue.value = Number(event.key);
+    forceCursorToEnd = true;
+    nextTick(() => restoreCursor());
+    return;
+  }
+
+  if (event.key === "ArrowLeft" || event.key === "ArrowRight") {
+    forceCursorToEnd = false;
+    return;
+  }
+
+  if (event.key === "ArrowUp") {
+    event.preventDefault();
+    modelValue.value += 1;
+    forceCursorToEnd = true;
+  } else if (event.key === "ArrowDown") {
+    event.preventDefault();
+    modelValue.value = Math.max(0, modelValue.value - 1);
+    forceCursorToEnd = true;
+  } else {
+    cursorPosition = selectionStart || 0;
+  }
+
+  nextTick(() => restoreCursor());
+};
+
+// Restore cursor position
+const restoreCursor = () => {
+  if (!inputRef.value) return;
+  const length = formattedValue.value.length;
+
+  if (forceCursorToEnd) {
+    inputRef.value.setSelectionRange(length, length);
+  } else {
+    inputRef.value.setSelectionRange(cursorPosition, cursorPosition);
+  }
+};
+</script>
+
+<template>
+  <v-text-field
+    ref="inputRef"
+    v-model="formattedValue"
+    v-bind="attrs"
+    type="text"
+    @keydown="handleKeyDown"
+  >
+    <template v-if="$slots.prepend" v-slot:prepend>
+      <slot name="prepend"></slot>
+    </template>
+
+    <template v-if="$slots.append" v-slot:append>
+      <slot name="append"></slot>
+    </template>
+
+    <template v-if="$slots['append-inner']" v-slot:append-inner>
+      <slot name="append-inner"></slot>
+    </template>
+
+    <template v-if="$slots['prepend-inner']" v-slot:prepend-inner>
+      <slot name="prepend-inner"></slot>
+    </template>
+  </v-text-field>
+</template>

package/components/Input/Password.vue

@@ -0,0 +1,22 @@
+<template>
+  <v-text-field
+    id="_password"
+    v-model="password"
+    :type="showPassword ? 'text' : 'password'"
+    :append-inner-icon="showPassword ? 'mdi-eye-off' : 'mdi-eye'"
+    v-bind="$attrs"
+    autocomplete="off"
+    @click:append-inner="togglePasswordVisibility"
+  />
+</template>
+
+<script setup lang="ts">
+// Define the props for the v-model
+const password = defineModel({ default: "" });
+
+// Control password visibility
+const showPassword = ref(false);
+const togglePasswordVisibility = () => {
+  showPassword.value = !showPassword.value;
+};
+</script>

package/components/Input/PhoneNumber.vue

@@ -0,0 +1,188 @@
+<template>
+  <v-row dense>
+    <!-- Country/Dial Code -->
+    <v-col cols="4">
+      <v-select
+        v-model="localDialCode"
+        :items="countryOptions"
+        item-title="display"
+        item-value="label"
+        density="comfortable"
+        :rules="[dialCodeRequired]"
+        hide-details="auto"
+        placeholder="Select Country"
+        z-index="100000000"
+        :menu-props="{
+          maxHeight: 300,
+          zIndex: 3000
+        }"
+        no-data-text="No countries available"
+      >
+        <template #selection="{ item }">
+          <span class="text-body-2">{{ item.raw.dialCode }}</span>
+        </template>
+        <template #item="{ item }">
+          <v-list-item-title>
+            {{ item.raw.display }}
+          </v-list-item-title>
+        </template>
+      </v-select>
+    </v-col>
+
+    <!-- Phone Number -->
+    <v-col cols="8">
+      <v-text-field
+        v-model="localPhoneNumber"
+        :placeholder="selectedCountry?.placeholder || 'Phone Number'"
+        density="comfortable"
+        :rules="phoneValidationRules"
+        hide-details="auto"
+        type="tel"
+        @input="handlePhoneInput"
+      />
+    </v-col>
+  </v-row>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  dialCode: {
+    type: String,
+    default: "+65",
+  },
+  phoneNumber: {
+    type: String,
+    default: "",
+  },
+  required: {
+    type: Boolean,
+    default: true,
+  },
+});
+
+const emit = defineEmits([
+  "update:dialCode",
+  "update:phoneNumber",
+  "update:isValid",
+]);
+
+const { countries, getCountryByDialCode, formatPhoneNumber } =
+  usePhoneCountries();
+
+const initialCountry = countries.find(
+  (country) => country.dialCode === props.dialCode
+);
+const localDialCode = ref(initialCountry?.label || props.dialCode);
+const localPhoneNumber = ref(props.phoneNumber);
+
+const countryOptions = computed(() => {
+  return countries.map((country) => ({
+    ...country,
+    display: `${country.country} (${country.dialCode})`,
+  }));
+});
+
+const selectedCountry = computed(() => {
+  const selected = countries.find(
+    (country) => country.label === localDialCode.value
+  );
+  return selected;
+});
+
+const dialCodeRequired = (v: string) => {
+  if (!props.required) return true;
+  return !!v || "Country code is required";
+};
+
+const phoneRequired = (v: string) => {
+  if (!props.required) return true;
+  return !!v || "Phone number is required";
+};
+
+const phoneDigitsOnly = (v: string) => {
+  if (!v) return props.required ? "Phone number is required" : true;
+  return (
+    /^\d+$/.test(v.replace(/\s|-|\(|\)/g, "")) || "Only numbers are allowed"
+  );
+};
+
+const phoneValidLength = (v: string) => {
+  if (!v || !selectedCountry.value) return true;
+
+  const cleanNumber = v.replace(/\s|-|\(|\)/g, "");
+  const { minLength, maxLength } = selectedCountry.value;
+
+  if (cleanNumber.length < minLength) {
+    return `Phone number must be at least ${minLength} digits`;
+  }
+  if (cleanNumber.length > maxLength) {
+    return `Phone number must not exceed ${maxLength} digits`;
+  }
+  return true;
+};
+
+const phoneCountryFormat = (v: string) => {
+  if (!v || !selectedCountry.value?.format) return true;
+
+  const cleanNumber = v.replace(/\s|-|\(|\)/g, "");
+  return (
+    selectedCountry.value.format.test(cleanNumber) ||
+    `Invalid ${selectedCountry.value.country} phone number format`
+  );
+};
+
+const phoneValidationRules = computed(() => [
+  phoneRequired,
+  phoneDigitsOnly,
+  phoneValidLength,
+  phoneCountryFormat,
+]);
+
+const handlePhoneInput = (event: Event) => {
+  const target = event.target as HTMLInputElement;
+  const actualDialCode = selectedCountry.value?.dialCode || localDialCode.value;
+  const formatted = formatPhoneNumber(target.value, actualDialCode);
+  localPhoneNumber.value = formatted;
+};
+
+const isValid = computed(() => {
+  if (!props.required && !localPhoneNumber.value) return true;
+
+  return phoneValidationRules.value.every(
+    (rule) => rule(localPhoneNumber.value) === true
+  );
+});
+
+watch(localDialCode, (val) => {
+  const actualDialCode = selectedCountry.value?.dialCode || val;
+  emit("update:dialCode", actualDialCode);
+});
+watch(localPhoneNumber, (val) => emit("update:phoneNumber", val));
+watch(isValid, (val) => emit("update:isValid", val));
+
+watch(
+  () => props.dialCode,
+  (val) => {
+    // Find the country with matching dialCode and set the label
+    const matchingCountry = countries.find(
+      (country) => country.dialCode === val
+    );
+    localDialCode.value = matchingCountry?.label || val;
+  }
+);
+watch(
+  () => props.phoneNumber,
+  (val) => (localPhoneNumber.value = val)
+);
+
+watch(localDialCode, () => {
+  if (localPhoneNumber.value) {
+    const actualDialCode =
+      selectedCountry.value?.dialCode || localDialCode.value;
+    localPhoneNumber.value = formatPhoneNumber(
+      localPhoneNumber.value,
+      actualDialCode
+    );
+  }
+});
+</script>

package/components/Input/VehicleNumber.vue

@@ -0,0 +1,49 @@
+<template>
+  <v-text-field
+    v-model="model"
+    :rules="rules"
+    :maxlength="maxlength"
+    :placeholder="placeholder"
+    :counter="maxlength"
+    @input="onInput"
+    outlined
+    :disabled="disabled"
+    :readonly="readonly"
+    clearable
+  />
+</template>
+
+<script setup>
+
+const props = defineProps({
+  placeholder: {
+    type: String,
+    default: 'Vehicle Number'
+  },
+  rules: {
+    type: Array,
+    default: () => []
+  },
+  maxlength: {
+    type: [Number, String],
+    default: false
+  },
+  disabled: {
+    type: Boolean,
+  },
+  readonly: {
+    type: Boolean,
+  }
+})
+
+const model = defineModel({required: true })
+
+function onInput(event) {
+  const value = typeof event === 'string' ? event : event?.target?.value || ''
+
+  let formatted = value.replace(/[^A-Za-z0-9]/g, '')
+  formatted = formatted.toUpperCase()
+
+  model.value = formatted
+}
+</script>

package/components/InputLabel.vue

@@ -0,0 +1,22 @@
+<template>
+  <span :class="`text-subtitle-2 font-weight-medium ${props.class}`">
+    {{ title }} <span v-if="props.required" class="text-error">*</span>
+  </span>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  title: {
+    type: String,
+    required: true,
+  },
+  required: {
+    type: Boolean,
+    default: false,
+  },
+  class: {
+    type: String,
+    default: "",
+  },
+});
+</script>