@7365admin1/layer-common 1.8.0

package/components/Input/FileV2.vue

@@ -0,0 +1,234 @@
+<template>
+  <v-row no-gutters class="w-100 pb-5" @click="resetErrorMessage">
+
+    <!-- VIEW MODE -->
+    <template v-if="viewMode">
+      <div class="w-100">
+        <v-file-upload-item v-for="({ file }, idx) in filesCollection" :key="fileKey(file)" :file="file" lines="one" nav
+          @click="handleClickItem(file)">
+          <template #prepend>
+            <v-avatar size="32" rounded></v-avatar>
+          </template>
+
+          <!-- delete hidden in view mode -->
+          <template #clear>
+            <!-- empty on purpose -->
+          </template>
+        </v-file-upload-item>
+      </div>
+    </template>
+
+    <!-- NORMAL MODE -->
+    <template v-else>
+      <v-file-upload v-model="uploadFiles" density="compact" @update:model-value="handleUpdateValue"
+        :loading="processing" :disabled="processing" :height="height" :title="title" :accept="accept"
+        :name="`upload_images`" class="text-caption w-100" clearable :multiple="multiple">
+        <template #item="{ props: itemProps, file }">
+          <v-file-upload-item v-bind="itemProps" lines="one" nav @click="handleClickItem(file)">
+            <template #prepend>
+              <v-avatar size="32" rounded></v-avatar>
+            </template>
+
+            <!-- delete button NOT shown in view mode -->
+            <template #clear="{ props: clearProps }">
+              <v-btn v-if="!viewMode" color="primary" @click.stop="handleRemove(file)"></v-btn>
+            </template>
+          </v-file-upload-item>
+        </template>
+      </v-file-upload>
+    </template>
+
+    <v-row no-gutters class="w-100" v-if="errorMessage">
+      <p class="text-error w-100 text-center text-subtitle-2">{{ errorMessage }}</p>
+    </v-row>
+
+    <ImageCarousel v-model="showImageCarousel" :files="idsArray" :active-file-id="activeImageId" />
+  </v-row>
+</template>
+
+
+<script setup lang="ts">
+import { nextTick, ref, onMounted, watch } from 'vue'
+
+const props = defineProps({
+  height: {
+    type: [Number, String],
+    default: 68,
+  },
+  multiple: {
+    type: Boolean,
+    default: false,
+  },
+  maxLength: {
+    type: Number,
+    default: 10,
+  },
+  title: {
+    type: String,
+    default: 'Upload Images'
+  },
+  accept: {
+    type: String,
+    default: "image/*"
+  },
+  viewMode: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const { addFile, deleteFile, getFileUrl, urlToFile } = useFile()
+
+const showImageCarousel = ref(false)
+const activeImageId = ref("")
+
+// The parent v-model binding
+const idsArray = defineModel<string[]>({ default: [] })
+
+const uploadFiles = ref<File[]>([])
+const filesCollection = ref<{ file: File; id: string }[]>([])
+const errorMessage = ref('')
+const processing = ref(false)
+
+function fileKey(f: File) {
+  return `${f.name}_${f.size}_${f.lastModified}`
+}
+
+async function handleRemove(removedFile: File) {
+  const key = fileKey(removedFile)
+  const arr = [...filesCollection.value]
+
+  const removedItem = arr.find((item) => fileKey(item.file) === key)
+  if (!removedItem) return
+
+  filesCollection.value = arr.filter((item) => item.id !== removedItem.id)
+  uploadFiles.value = uploadFiles.value.filter((f) => fileKey(f) !== key)
+
+
+  idsArray.value = filesCollection.value.map((x) => x.id)
+
+}
+
+async function handleClickItem(file: File) {
+  const isImageOrVideo =
+    file.type.startsWith('image/') ||
+    /\.(jpg|jpeg|png|gif|webp|bmp|svg|mp4|mov|mkv|avi)$/i.test(file.name)
+
+
+  const found = filesCollection.value.find((item) => fileKey(item.file) === fileKey(file))
+  if (!found) return
+
+
+  if (isImageOrVideo) {
+    activeImageId.value = found.id
+    showImageCarousel.value = true
+    return;
+  }
+
+  await downloadFile(found.id, file.name)
+}
+
+async function downloadFile(id: string, filename: string) {
+  try {
+    const url = await getFileUrl(id)
+    const link = document.createElement('a')
+    link.href = url
+    link.download = filename
+    link.target = '_blank'
+
+    document.body.appendChild(link)
+    link.click()
+    document.body.removeChild(link)
+  } catch (err) {
+    console.error('Failed to download file', err)
+    errorMessage.value = 'Failed to download file.'
+  }
+}
+
+
+
+
+
+  async function handleUpdateValue(value: File[]) {
+    await nextTick()
+    const max = props.maxLength
+    const existingLength = filesCollection.value.length
+    errorMessage.value = ''
+
+    if (existingLength + value.length > max) {
+      value = value.slice(0, max - existingLength)
+      errorMessage.value = `Max allowed images is ${max}`
+    }
+
+    const collectionKeys = filesCollection.value.map((x) => fileKey(x.file))
+    const addedFiles = value.filter((f) => !collectionKeys.includes(fileKey(f)))
+
+    processing.value = true
+    try {
+      for (const file of addedFiles) {
+        const res = await addFile(file) // should return { id, url }
+        if (res?.id) {
+          filesCollection.value = [...filesCollection.value, { file, id: res.id }]
+        }
+      }
+
+      uploadFiles.value = filesCollection.value.map((x) => x.file)
+
+    } catch (err) {
+      console.error('Upload failed', err)
+      errorMessage.value = 'Failed to upload some files.'
+    } finally {
+      processing.value = false
+    }
+  }
+
+
+  async function loadFilesFromIds(ids: string[]) {
+    const result: { file: File; id: string }[] = []
+    for (const id of ids) {
+      try {
+        const url = await getFileUrl(id)
+        const name = decodeURIComponent(url.split('/').pop() || `file_${id}`)
+        const file = await urlToFile(url, name)
+        result.push({ file, id })
+      } catch (err) {
+        console.warn('Failed to load file from ID:', id, err)
+      }
+    }
+    return result
+  }
+
+
+  function resetErrorMessage() {
+    errorMessage.value = ''
+  }
+
+
+  onMounted(async () => {
+    setTimeout(async () => {
+      if (idsArray.value.length > 0) {
+        const loadedFiles = await loadFilesFromIds(idsArray.value)
+        filesCollection.value = loadedFiles
+        uploadFiles.value = loadedFiles.map((x) => x.file)
+      }
+    }, 200)
+  })
+
+  watch(filesCollection, () => {
+    idsArray.value = [...filesCollection.value.map(x => x.id)]
+  }, { deep: true })
+
+
+</script>
+
+
+<style scoped>
+* :deep(.v-file-upload-title) {
+  font-size: 1rem;
+  font-weight: 500;
+}
+
+* :deep(.v-file-upload-items) {
+  min-width: 100%;
+}
+</style>

package/components/Input/InputPhoneNumberV2.vue

@@ -0,0 +1,164 @@
+<template>
+    <v-row no-gutters class="mb-5">
+        <v-col cols="12" class="d-flex ga-2">
+            <v-select v-model="selectedCode" :variant="variant" :items="countries" item-title="code" item-value="code"
+                hide-details class="px-0" :density="density" style="max-width: 95px" :rules="[...props.rules]"
+                :readonly="props.readOnly" @update:model-value="handleUpdateCountry">
+                <template v-slot:item="{ props: itemProps, item }">
+                    <v-list-item v-bind="itemProps" :title="item.raw.name" :subtitle="item.raw.dial_code" width="300" />
+                </template>
+            </v-select>
+            <v-mask-input v-model="input" :mask="currentMask" :rules="[...props.rules, validatePhone]" ref="maskRef" :key="`mask-key-${maskKey}`"
+                :loading="loading" :readonly="props.readOnly" :variant="variant" hint="Enter a valid phone number"
+                hide-details persistent-hint return-masked-value :prefix="phonePrefix || '###'" persistent-placeholder
+                :density="density" :placeholder="placeholder || currentMask"></v-mask-input>
+        </v-col>
+        <span class="text-error text-caption w-100" v-if="errorMessage && !hideDetails">{{ errorMessage }}</span>
+    </v-row>
+
+</template>
+
+<script setup lang="ts">
+import { ref, computed, type PropType } from 'vue'
+import type { ValidationRule } from 'vuetify/lib/types.mjs'
+//@ts-ignore
+import phoneMasks from '~/utils/phoneMasks'
+
+const props = defineProps({
+    rules: {
+        type: Array as PropType<ValidationRule[]>,
+        default: []
+    },
+    variant: {
+        type: String as PropType<any>,
+        default: "outlined"
+    },
+    density: {
+        type: String as PropType<Density>,
+        default: "default"
+    },
+    placeholder: {
+        type: String,
+    },
+    hideDetails: {
+        type: Boolean,
+        default: false
+    },
+    loading: {
+        type: Boolean,
+        default: false
+    },
+    readOnly: {
+        type: Boolean,
+        default: false
+    }
+})
+
+type Density = 'default' | 'comfortable' | 'compact';
+
+type TPhoneMask =
+    {
+        name: string
+        flag: string
+        code: string;
+        dial_code: string;
+        regex: string;
+    }
+
+const phone = defineModel({ default: '' })
+const input = ref('')
+const selectedCode = ref('SG')
+const countries = phoneMasks
+const errorMessage = ref('')
+const maskRef = ref()
+const maskKey = ref(0)
+
+const currentMask = computed(() => {
+    const country = phoneMasks.find((c: TPhoneMask) => c.code === selectedCode.value)
+    if (!country) return '############'
+    return generateMaskFromRegex(country.regex)
+})
+
+
+
+const validatePhone = (): boolean | string => {
+    if(props.readOnly) return true;
+    const value = phone.value
+    if (!value) {
+        errorMessage.value = ''
+        return true;
+    }
+    const country = phoneMasks.find((c: any) => c.code === selectedCode.value)
+    if (!country) {
+        errorMessage.value = ''
+        return true
+    }
+
+    const regex = new RegExp(country.regex)
+    const isValid = regex.test(value)
+
+    errorMessage.value = isValid ? '' : `Invalid ${country.name} phone number`
+    return isValid
+}
+
+
+
+function generateMaskFromRegex(regex: string): string {
+    let pattern = regex.replace(/^\^|\$$/g, '');
+
+    pattern = pattern.replace(/\(\?:\+?\d+\)\?/g, '');
+    pattern = pattern.replace(/\+?\d{1,4}/, '');
+
+    pattern = pattern.replace(/\\d\{(\d+)\}/g, (_, count) => '#'.repeat(Number(count)));
+
+    pattern = pattern.replace(/\\d/g, '#');
+
+    pattern = pattern.replace(/\\/g, '');
+    pattern = pattern.replace(/\(\?:/g, '');
+    pattern = pattern.trim();
+
+    return pattern;
+}
+
+const phonePrefix = computed(() => {
+    const country = phoneMasks.find((c: TPhoneMask) => c.code === selectedCode.value)
+    return country?.dial_code || ''
+})
+
+
+function handleUpdateCountry() {
+    phone.value = ''
+}
+
+const emit = defineEmits(['update:modelValue'])
+
+watch(phone, (newVal) => {
+    emit('update:modelValue', newVal)
+})
+
+watch(input, (newInput) => {
+    const prefix = phonePrefix.value
+
+    if (!newInput) {
+        return
+    }
+
+    phone.value = prefix + newInput
+})
+
+
+onMounted(() => {
+    if (!phone.value) return
+
+    const found = phoneMasks.find((c: any) => phone.value?.startsWith(c?.dial_code))
+    if (found) {
+        selectedCode.value = found.code
+    }
+
+    input.value = phone.value.replace(found?.dial_code || '', '')
+    maskKey.value++
+})
+
+
+
+</script>

package/components/Input/ListGroupSelection.vue

@@ -0,0 +1,96 @@
+<template>
+  <v-input v-bind="attrs">
+    <v-card width="100%" v-bind="attrs">
+      <v-list
+        v-model:selected="selected"
+        lines="two"
+        :select-strategy="attrs.readonly ? 'classic' : 'leaf'"
+        class="pa-0"
+        density="compact"
+        read-only
+        open-strategy="single"
+      >
+        <template
+          v-for="(permission, permissionKey, permissionIndex) in props.items"
+          :key="permissionKey"
+        >
+          <v-divider v-if="permissionIndex > 0"></v-divider>
+          <v-list-group :value="permissionKey" fluid>
+            <template v-slot:activator="{ props }">
+              <v-list-item v-bind="props" density="compact">
+                <span class="text-capitalize">
+                  {{ String(permissionKey).replace(/-/g, " ") }}
+                </span>
+
+                <template #prepend>
+                  <v-chip class="mr-2" small>
+                    {{ selectedActionCount(String(permissionKey)) }}
+                  </v-chip>
+                </template>
+              </v-list-item>
+            </template>
+
+            <template v-for="(item, itemKey) in permission" :key="itemKey">
+              <v-divider></v-divider>
+              <v-list-item v-if="attrs.readonly" density="compact">
+                <template #title class="pl-2">
+                  <span class="text-subtitle-2 text-capitalize">
+                    {{ String(itemKey).replace(/-/g, " ") }}
+                  </span>
+                </template>
+
+                <template #subtitle class="pl-2">
+                  <span class="text-subtitle-2">{{ item.description }}</span>
+                </template>
+              </v-list-item>
+
+              <v-list-item
+                v-else
+                :value="`${permissionKey}:${itemKey}`"
+                density="compact"
+              >
+                <template #title class="pl-2">
+                  <span class="text-subtitle-2 text-capitalize">
+                    {{ String(itemKey).replace(/-/g, " ") }}
+                  </span>
+                </template>
+
+                <template #subtitle class="pl-2">
+                  <span class="text-subtitle-2 text-capitalize">
+                    {{ String(item.description).replace(/-/g, " ") }}
+                  </span>
+                </template>
+
+                <template #prepend="{ isSelected, select }" class="pl-1">
+                  <v-list-item-action start>
+                    <v-checkbox-btn
+                      :model-value="isSelected"
+                      @update:model-value="select"
+                    ></v-checkbox-btn>
+                  </v-list-item-action>
+                </template>
+              </v-list-item>
+            </template>
+          </v-list-group>
+        </template>
+      </v-list>
+    </v-card>
+  </v-input>
+</template>
+
+<script setup lang="ts">
+const selected = defineModel<Array<string>>({ default: [] });
+const attrs = useAttrs();
+const props = defineProps({
+  items: {
+    type: Object,
+    required: true,
+    default: () => ({}),
+  },
+});
+
+const selectedActionCount = (resource: string) => {
+  return selected.value.filter((permission) => permission.startsWith(resource))
+    .length;
+};
+</script>

package/components/Input/NRICNumber.vue

@@ -0,0 +1,53 @@
+<template>
+  <v-text-field
+    v-model.trim="model"
+    :rules="rules"
+    :maxlength="maxlength"
+    :placeholder="placeholder"
+    :counter="maxlength"
+    @input="onInput"
+    :loading="loading"
+    outlined
+    clearable
+  />
+</template>
+
+<script setup>
+
+const props = defineProps({
+  placeholder: {
+    type: String,
+    default: ''
+  },
+  rules: {
+    type: Array,
+    default: () => []
+  },
+  maxlength: {
+    type: [Number, String],
+    default: false
+  },
+  loading: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+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 || ""
+}
+
+
+watch(model, (newVal) => {
+  emit('update:modelValue', newVal)
+})
+</script>

package/components/Input/NewDate.vue

@@ -0,0 +1,123 @@
+<script setup lang="ts">
+import { defineModel, defineProps, computed, ref } from "vue";
+
+const props = defineProps<{
+  rules?: ((value: string) => boolean | string)[]; // Accepts external validation rules
+}>();
+
+const dateValue = defineModel<string>({ default: "" });
+const inputRef = ref<HTMLInputElement | null>(null);
+
+const formatDate = (event: Event) => {
+  const input = event.target as HTMLInputElement;
+  let value = input.value.replace(/\D/g, ""); // Remove non-numeric characters
+
+  // Format as MM/DD/YYYY
+  let formattedValue = value
+    .slice(0, 8)
+    .replace(/(\d{2})(\d{0,2})?(\d{0,4})?/, (_, m, d, y) =>
+      [m, d, y].filter(Boolean).join("/")
+    );
+
+  // Preserve cursor position
+  const cursorPosition = input.selectionStart ?? 0;
+  const slashCountBefore = (dateValue.value.match(/\//g) || []).length;
+  const slashCountAfter = (formattedValue.match(/\//g) || []).length;
+  const cursorOffset = slashCountAfter - slashCountBefore;
+
+  // Only update if value changed to prevent unnecessary reactivity updates
+  if (dateValue.value !== formattedValue) {
+    dateValue.value = formattedValue;
+    setTimeout(() => {
+      input.setSelectionRange(
+        cursorPosition + cursorOffset,
+        cursorPosition + cursorOffset
+      );
+    });
+  }
+};
+
+// Compute combined validation rules
+const computedRules = computed(() => {
+  return props.rules ? [...props.rules] : [];
+});
+
+// Handle arrow key increments with cursor preservation
+const handleArrowKeys = (event: KeyboardEvent) => {
+  if (!dateValue.value) return;
+
+  const input = event.target as HTMLInputElement;
+  const cursorPosition = input.selectionStart ?? 0; // Store cursor position
+  dateValue.value.split("/").map(Number);
+
+  let updatedDate = dateValue.value;
+
+  // Determine which part to modify
+  if (cursorPosition <= 2) {
+    updatedDate = modifyDatePart(
+      dateValue.value,
+      "month",
+      event.key === "ArrowUp" ? 1 : -1
+    );
+  } else if (cursorPosition <= 5) {
+    updatedDate = modifyDatePart(
+      dateValue.value,
+      "day",
+      event.key === "ArrowUp" ? 1 : -1
+    );
+  } else {
+    updatedDate = modifyDatePart(
+      dateValue.value,
+      "year",
+      event.key === "ArrowUp" ? 1 : -1
+    );
+  }
+
+  if (dateValue.value !== updatedDate) {
+    dateValue.value = updatedDate;
+    setTimeout(() => {
+      input.setSelectionRange(cursorPosition, cursorPosition);
+    });
+  }
+
+  event.preventDefault();
+};
+
+const modifyDatePart = (
+  date: string,
+  part: "month" | "day" | "year",
+  change: number
+) => {
+  let [month, day, year] = date.split("/").map(Number);
+
+  if (part === "month") {
+    month = Math.max(1, Math.min(12, month + change));
+    const maxDays = new Date(year, month, 0).getDate();
+    day = Math.min(day, maxDays); // Adjust day to fit new month's max days
+  } else if (part === "day") {
+    const maxDays = new Date(year, month, 0).getDate();
+    day = Math.max(1, Math.min(maxDays, day + change));
+  } else if (part === "year") {
+    year += change;
+    const maxDays = new Date(year, month, 0).getDate();
+    day = Math.min(day, maxDays); // Adjust day to fit new year's month
+  }
+
+  return `${String(month).padStart(2, "0")}/${String(day).padStart(
+    2,
+    "0"
+  )}/${year}`;
+};
+</script>
+
+<template>
+  <v-text-field
+    ref="inputRef"
+    v-model="dateValue"
+    placeholder="MM/DD/YYYY"
+    @input="formatDate"
+    @keydown.up="handleArrowKeys"
+    @keydown.down="handleArrowKeys"
+    :rules="computedRules"
+  ></v-text-field>
+</template>