@eeplatform/nuxt-layer-common 1.0.0

package/components/BtnUploadFile.vue

@@ -0,0 +1,139 @@
+<template>
+  <v-input
+    :label="label"
+    :error="!!errorMessage"
+    :error-messages="errorMessage"
+    :hide-details="readOnly ?? !!value"
+    class="btn-input-file"
+  >
+    <template #default>
+      <v-row no-gutters>
+        <v-col cols="12" v-if="value || readOnly">
+          <v-row no-gutters>
+            <v-card
+              variant="outlined"
+              border="thin"
+              class="px-4 text-caption font-weight-medium"
+              :rounded="readOnly ? '' : '0 s'"
+              @click="emit('click:view')"
+              height="36"
+            >
+              <v-row no-gutters class="fill-height" align="center">
+                {{ value ? "View attachment" : "No file attached" }}
+              </v-row>
+            </v-card>
+            <v-card
+              v-if="!readOnly"
+              variant="outlined"
+              border="s-0 thin"
+              rounded="0 e"
+              class="px-4 d-inline"
+              @click="emit('click:close')"
+              height="36"
+            >
+              <v-row no-gutters class="fill-height" align="center">
+                <v-icon size="small"> mdi-close </v-icon>
+              </v-row>
+            </v-card>
+          </v-row>
+        </v-col>
+
+        <v-col cols="12" v-else>
+          <v-btn
+            variant="outlined"
+            border="thin"
+            class="text-none"
+            :prepend-icon="value ? '' : 'mdi-tray-arrow-up'"
+            @click="selectAttachment"
+            :disabled="loading"
+            :loading="loading"
+          >
+            Add file
+          </v-btn>
+        </v-col>
+      </v-row>
+
+      <v-file-input
+        v-show="false"
+        v-model="attachment"
+        multiple
+        accept="image/*"
+        :class="`attachment-input-${inputClass}`"
+        @change="uploadAttachment"
+        :name="name + 'custom-input-file'"
+      ></v-file-input>
+    </template>
+  </v-input>
+</template>
+
+<script setup lang="ts">
+const value = defineModel<string>({ required: true, default: "" });
+const attachment = ref<File | null>(null);
+const loading = ref(false);
+
+const emit = defineEmits(["click:view", "click:close", "upload"]);
+
+const { addFile } = useFile();
+const inputClass = Date.now().toString();
+
+function selectAttachment() {
+  const input = document.querySelector(
+    `.attachment-input-${inputClass} input`
+  ) as HTMLInputElement;
+  input.click();
+}
+
+async function uploadAttachment(e: Event) {
+  loading.value = true;
+  const files = (e.target as HTMLInputElement).files;
+
+  if (files && files.length > 0) {
+    const file = files[0];
+
+    try {
+      const res = await addFile(file);
+      value.value = res.id as string;
+      await emit("upload", res);
+    } catch (error) {
+      console.log(error);
+    }
+  } else {
+    console.log("No file selected");
+  }
+  loading.value = false;
+}
+
+// Other props (optional)
+const { label, rules, name, readOnly } = defineProps({
+  label: {
+    type: String,
+    default: "Rating",
+  },
+  // Array of validation functions: (number) => true | string
+  rules: {
+    type: Array<Function>,
+    default: () => [],
+  },
+  name: {
+    type: String,
+    required: true,
+    default: "button-upload-file",
+  },
+  readOnly: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+/**
+ * Compute the first failed validation rule, if any.
+ * Each rule returns true (if valid) or a string (if invalid).
+ */
+const errorMessage = computed(() => {
+  for (const rule of rules) {
+    const result = rule(attachment.value || value.value);
+    return typeof result === "string" ? result : null;
+  }
+  return null;
+});
+</script>

package/components/ConfirmDialog.vue

@@ -0,0 +1,66 @@
+<template>
+  <v-dialog v-model="dialog" max-width="400" persistent>
+    <v-card class="rounded-xl pa-6" elevation="2">
+      <!-- Close Button -->
+      <v-btn
+        icon
+        variant="text"
+        size="small"
+        class="position-absolute"
+        style="top: 8px; right: 8px"
+        @click="closeDialog"
+      >
+        <v-icon>mdi-close</v-icon>
+      </v-btn>
+
+      <v-card-text class="text-center">
+        <v-row v-if="imageSrc" justify="center" class="py-10">
+          <v-img height="120" :src="imageSrc" alt="Dialog Image" contain />
+        </v-row>
+
+        <!-- Title Slot -->
+        <div class="text-h6 font-weight-medium mb-2">
+          <slot name="title"></slot>
+        </div>
+
+        <!-- Description Slot -->
+        <div class="text-body-1 mb-4">
+          <slot name="description"></slot>
+        </div>
+      </v-card-text>
+
+      <!-- Footer Slot -->
+      <v-card-actions>
+        <slot name="footer"></slot>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script lang="ts" setup>
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: false,
+  },
+  imageSrc: {
+    type: String,
+    default: "",
+  },
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(["update:modelValue", "submit"]);
+
+const dialog = computed({
+  get: () => props.modelValue,
+  set: (value) => emit("update:modelValue", value),
+});
+
+function closeDialog() {
+  dialog.value = false;
+}
+</script>

package/components/Container/Standard.vue

@@ -0,0 +1,33 @@
+<template>
+  <v-row no-gutters>
+    <v-col cols="12">
+      <span
+        class="font-weight-medium text-subtitle-1 text-decoration-underline cursor-pointer"
+        @click="emit('back')"
+      >
+        Back
+      </span>
+    </v-col>
+    <v-col cols="12">
+      <span class="text-h5 font-weight-medium">{{ props.title }}</span>
+    </v-col>
+
+    <v-col cols="12" class="mt-4">
+      <slot name="default"> </slot>
+    </v-col>
+
+    <v-col cols="12" class="mt-4">
+      <slot name="footer"> </slot>
+    </v-col>
+  </v-row>
+</template>
+
+<script setup lang="ts">
+const emit = defineEmits(["back"]);
+const props = defineProps({
+  title: {
+    type: String,
+    default: "",
+  },
+});
+</script>

package/components/Input/Date.vue

@@ -0,0 +1,177 @@
+<template>
+  <v-input
+    :error="!!validationErrMsg"
+    :error-messages="validationErrMsg"
+    hide-details="auto"
+    :name="name + 'custom-input-date'"
+    :disabled="props.disabled"
+  >
+    <template #default>
+      <v-row>
+        <v-col cols="12" lg="6" md="6">
+          <v-select
+            v-model="month"
+            :items="props.months"
+            label="Month"
+            density="comfortable"
+            :name="props.name + 'custom-input-date-month'"
+            hide-details
+            :error="!!validationErrMsg"
+            :disabled="props.disabled"
+          />
+        </v-col>
+
+        <v-col cols="12" lg="3" md="3">
+          <v-text-field
+            v-model.number="day"
+            type="number"
+            label="Day"
+            hide-details
+            placeholder="DD"
+            density="comfortable"
+            :name="props.name + 'custom-input-date-day'"
+            :error="!!validationErrMsg"
+            :disabled="props.disabled"
+          />
+        </v-col>
+
+        <v-col cols="12" lg="3" md="3">
+          <v-text-field
+            v-model.number="year"
+            type="number"
+            label="Year"
+            hide-details
+            placeholder="YYYY"
+            density="comfortable"
+            :name="props.name + 'custom-input-date-year'"
+            :error="!!validationErrMsg"
+            :disabled="props.disabled"
+          />
+        </v-col>
+      </v-row>
+    </template>
+  </v-input>
+</template>
+
+<script setup lang="ts">
+const month = defineModel("month", { default: "" });
+const day = defineModel("day", { default: 0 });
+const year = defineModel("year", { default: 0 });
+
+const props = defineProps({
+  months: {
+    type: Array,
+    default: [
+      "January",
+      "February",
+      "March",
+      "April",
+      "May",
+      "June",
+      "July",
+      "August",
+      "September",
+      "October",
+      "November",
+      "December",
+    ],
+  },
+  name: {
+    type: String,
+    default: "input-date-combo",
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const isLeapYear = (year: number): boolean =>
+  (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0;
+
+const monthMap: Record<string, number> = {
+  January: 1,
+  February: 2,
+  March: 3,
+  April: 4,
+  May: 5,
+  June: 6,
+  July: 7,
+  August: 8,
+  September: 9,
+  October: 10,
+  November: 11,
+  December: 12,
+};
+
+const validateBirthDate = (): string => {
+  const _month = monthMap[month.value];
+  const _day = day.value;
+  const _year = year.value;
+
+  const errorMessage = "Enter a valid date";
+
+  if (
+    !_month ||
+    !_day ||
+    !_year ||
+    _year < 1904 ||
+    _year > new Date().getFullYear()
+  ) {
+    return errorMessage;
+  }
+
+  const daysInMonth = [
+    31,
+    isLeapYear(_year) ? 29 : 28,
+    31,
+    30,
+    31,
+    30,
+    31,
+    31,
+    30,
+    31,
+    30,
+    31,
+  ];
+
+  if (_day < 1 || _day > daysInMonth[_month - 1]) {
+    return errorMessage;
+  }
+
+  if (!_month || !_day || !_year) {
+    return errorMessage;
+  }
+
+  return "";
+};
+
+const validationErrMsg = ref("");
+
+const date = computed(() => {
+  return {
+    day: day.value,
+    month: month.value,
+    year: year.value,
+  };
+});
+
+validationErrMsg.value = validateBirthDate();
+
+const disabled = computed(() => props.disabled);
+
+watch(disabled, (curr) => {
+  if (curr) {
+    validationErrMsg.value = validateBirthDate();
+  }
+});
+
+watch(
+  date,
+  () => {
+    validationErrMsg.value = validateBirthDate();
+  },
+  { deep: true }
+);
+</script>

package/components/Input/ListGroupSelection.vue

@@ -0,0 +1,93 @@
+<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 }" class="pl-1">
+                  <v-list-item-action start>
+                    <v-checkbox-btn :model-value="isSelected"></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/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>