create-nexwire 4.0.0

package/express/src/resources/src/components/InputPasswordToggle.vue

@@ -0,0 +1,213 @@
+<template>
+  <div :class="topclass">
+    <div class="position-relative">
+      <label :for="inputId" class="d-flex align-items-center" :class="{ 'd-none': !inputLabel }">
+        <div class="position-relative">
+          <span class="text-capitalize mb-1" v-html="inputLabel"></span>
+          <span
+            class="position-absolute text-danger rounded-circle bg-danger must"
+            :class="{ 'd-none': !props.must }"></span>
+        </div>
+        <div
+          class="text-end ms-auto text-primary align-self-center"
+          :class="{ 'd-none': !props.hood }"
+          style="font-size: 12px; margin-top: 0.15rem"
+          v-html="hoodHtml"></div>
+      </label>
+
+      <div class="input-group mb-3">
+        <input
+          ref="inputRef"
+          class="form-control border-0"
+          :type="showPassword ? 'text' : 'password'"
+          :value="props.modelValue"
+          :maxlength="maxLengthAttr"
+          :readonly="props.readonly"
+          v-bind="$attrs"
+          @input="updateModel" />
+        <button
+          class="input-group-text p-0 border-0 border-start border-1 position-relative z-1"
+          type="button"
+          @click="togglePassword">
+          <i
+            class="py-2 px-3"
+            :class="showPassword ? 'bi bi-eye' : 'bi bi-eye-slash'"
+            style="font-size: 15px"></i>
+        </button>
+      </div>
+      <!-- <input class="form-control" v-model="model" :maxlength="max" v-bind="$attrs"> vue3.3 (2nd way)/3.4 -->
+      <div
+        class="position-absolute bottom-0 end-0 pe-1 text-secondary max"
+        :class="{ 'd-none': !max }">
+        {{ maxCounter }}
+      </div>
+    </div>
+    <div
+      :id="`${inputId}Help`"
+      class="form-text mt-1 text-danger"
+      :class="{ 'd-none': !props.err }">
+      {{ props.err }}
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, nextTick, onMounted, ref, useAttrs } from "vue";
+import { browserDetect } from "@/plugins/browserDetect";
+
+defineOptions({ name: "InputPasswordToggle", inheritAttrs: false });
+const { isFirefox } = browserDetect;
+
+const $attrs = useAttrs();
+const inputRef = ref<HTMLInputElement | null>(null);
+type InputPasswordCategory = "number" | "decimal" | "mobile" | "tax-period" | "bin" | "challan-number" | string;
+
+interface InputPasswordProps {
+  focus?: boolean;
+  must?: boolean;
+  err?: string | boolean;
+  modelValue?: string | number;
+  category?: InputPasswordCategory;
+  hood?: string | boolean | number;
+  readonly?: boolean;
+}
+
+const props = withDefaults(defineProps<InputPasswordProps>(), {
+  err: false,
+  modelValue: ""
+});
+
+const topclass = computed(() => ($attrs.topclass as string | undefined) || "mb-3");
+const inputId = computed(() => ($attrs.id as string | undefined) || "");
+const inputLabel = computed(() => ($attrs.label as string | undefined) || "");
+const inputType = computed(() => ($attrs.type as string | undefined) || "text");
+
+const max = computed<number | null>(() => {
+  const raw = $attrs.maxlength as string | number | undefined;
+  return raw != null ? Number(raw) : null;
+});
+const maxLengthAttr = computed<number | undefined>(() => max.value ?? undefined);
+
+const hoodHtml = computed(() => (props.hood === false || props.hood == null ? "" : String(props.hood)));
+
+const maxCounter = computed(() => {
+  if (max.value == null) {
+    return "";
+  }
+
+  if (!isFirefox && inputType.value === "month") {
+    return "";
+  }
+
+  return max.value - String(props.modelValue).length;
+});
+
+const emit = defineEmits<(event: "update:modelValue", value: string | number) => void>();
+const updateModel = (e: Event) => {
+  const target = e.target as HTMLInputElement;
+
+  if (props.category === "number") {
+    emit("update:modelValue", (target.value = target.value.replace(/[^\d]/gi, "")));
+  } else if (props.category === "decimal") {
+    let val = target.value.replace(/[^\d.]/g, "");
+    const parts = val.split(".");
+    val = parts[0];
+    if (parts.length > 1) {
+      val += `.${parts.slice(1).join("")}`;
+    }
+    emit("update:modelValue", (target.value = val));
+  } else if (props.category === "mobile") {
+    let digits = target.value.replace(/[^\d]/g, ""); // only digits
+    let val = digits;
+    if (target.value.includes("+")) {
+      val = `+${digits}`;
+    }
+    emit("update:modelValue", (target.value = val));
+  } else if (props.category === "tax-period") {
+    let val = target.value.replace(/[^\d-]/g, ""); // Only numbers and hyphen
+    val = val.replace(/-/g, ""); // Remove all hyphens
+    val = val.slice(0, 6); // Only 6 digits (YYYYMM)
+
+    if (val.length > 4) {
+      let year = val.slice(0, 4);
+      let month = val.slice(4, 6);
+
+      // Only correct if both month digits entered
+      if (month.length === 2) {
+        let m = parseInt(month, 10);
+        // Clamp month between 1 and 12
+        if (m < 1) m = 1;
+        if (m > 12) m = 12;
+        // Always pad to 2 digits
+        month = m.toString().padStart(2, "0");
+      }
+
+      val = `${year}-${month}`;
+    }
+
+    emit("update:modelValue", (target.value = val));
+  } else if (props.category === "bin") {
+    let digits = target.value.replace(/[^\d]/g, "");
+    digits = digits.slice(0, 14);
+    let formatted = digits;
+    if (digits.length > 9) {
+      formatted = `${digits.slice(0, 9)}-${digits.slice(9, 14)}`;
+    }
+    emit("update:modelValue", (target.value = formatted));
+  } else if (props.category === "challan-number") {
+    let digits = target.value.replace(/[^\d]/g, "");
+    digits = digits.slice(0, 16);
+    let formatted = digits;
+    if (digits.length > 4) {
+      formatted = `${digits.slice(0, 4)}-${digits.slice(4, 16)}`;
+    }
+    emit("update:modelValue", (target.value = formatted));
+  } else {
+    emit("update:modelValue", target.value);
+  }
+};
+
+const showPassword = ref(false);
+const togglePassword = () => (showPassword.value = !showPassword.value);
+
+onMounted(() => {
+  const shouldFocus = props.focus !== false && props.focus !== undefined;
+  if (!shouldFocus) return;
+
+  nextTick(() => inputRef.value?.focus());
+});
+</script>
+
+<style lang="scss" scoped>
+input {
+  border-color: #cccccc;
+
+  &:read-only {
+    background-color: #f8f8f8;
+  }
+
+  &::placeholder {
+    color: #bfbfbf;
+  }
+}
+
+button:focus-visible {
+  border: none;
+  box-shadow: none;
+}
+
+.form-text {
+  font-size: 0.75rem;
+}
+
+.must {
+  width: 4px;
+  height: 4px;
+  margin-left: 2px;
+  margin-top: 5px;
+}
+
+.max {
+  font-size: 0.6rem;
+}
+</style>

package/express/src/resources/src/components/Modal.vue

@@ -0,0 +1,55 @@
+<template>
+  <Teleport to="#modal-show">
+    <div :id="props.id" ref="modal" class="modal fade" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
+      :aria-labelledby="`${props.id}Label`">
+      <div :class="`modal-dialog modal-dialog-centered modal-dialog-scrollable modal-${props.size}`">
+        <div class="modal-content border">
+          <div class="modal-header">
+            <div class="d-flex w-100 justify-content-between align-items-center">
+              <h5 id="modalScrollableTitle" class="modal-title me-3">{{ props.title }}</h5>
+              <button ref="closeButton" type="button" class="btn-close shadow-none" data-bs-dismiss="modal"
+                aria-label="Close"></button>
+              <slot name="modal-header-extra"></slot>
+            </div>
+          </div>
+          <div class="modal-body">
+            <slot name="modalbody"></slot>
+          </div>
+          <div class="modal-footer py-2">
+            <slot name="modalfooter"></slot>
+          </div>
+        </div>
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+
+type ModalSize = "sm" | "md" | "lg" | "xl" | string;
+
+interface ModalProps {
+  id: string;
+  title?: string;
+  size?: ModalSize;
+}
+
+defineOptions({ name: "Modal", inheritAttrs: false });
+
+const props = withDefaults(defineProps<ModalProps>(), {
+  title: "",
+  size: "md"
+});
+
+const modal = ref<HTMLElement | null>(null);
+const closeButton = ref<HTMLButtonElement | null>(null);
+
+const close = () => {
+  closeButton.value?.click();
+};
+
+defineExpose({ close });
+</script>
+
+<style lang="scss" scoped></style>

package/express/src/resources/src/components/Pagebar.vue

@@ -0,0 +1,26 @@
+<template>
+  <Teleport v-if="target" :to="target">
+    <p v-if="props.title && !$slots.default" class="m-0 fs-4">{{ props.title }}</p>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref, useSlots } from "vue";
+
+defineOptions({ name: "PageBar", inheritAttrs: false });
+
+interface PageBarProps {
+  title?: string;
+}
+
+const props = defineProps<PageBarProps>();
+const slots = useSlots();
+
+const target = ref<HTMLElement | null>(null);
+
+onMounted(() => {
+  target.value = document.getElementById("pagebar");
+});
+</script>
+
+<style lang="scss" scoped></style>

package/express/src/resources/src/components/Select.vue

@@ -0,0 +1,384 @@
+<script setup lang="ts">
+import axios from "axios";
+import { debounce } from "lodash-es";
+import { computed, nextTick, onBeforeUnmount, onMounted, reactive, ref, useAttrs, watch } from "vue";
+import "vue-select/dist/vue-select.css";
+import vSelect from "vue-select";
+import { empty } from "../helpers/utils";
+
+defineOptions({ name: "Select", inheritAttrs: false });
+
+type AnyRecord = Record<string, unknown>;
+type SelectValue = string | number | boolean | AnyRecord | null;
+type OptionHook = ((value: unknown) => void | Promise<void>) | null;
+
+interface FetchPack {
+  url?: string | null;
+  data?: string | null;
+  params?: AnyRecord;
+  mapFn?: (x: AnyRecord) => AnyRecord;
+  option?: ((value: unknown) => void | Promise<void>) | Array<(value: unknown) => void | Promise<void>>;
+  reset?: boolean;
+  reload?: boolean;
+}
+
+interface SelectProps {
+  fetched?: (payload: Record<string, any>) => any;
+  must?: boolean;
+  err?: string | boolean;
+  hood?: string | boolean;
+  defaultValue?: SelectValue;
+  resetKey?: string | number | boolean | AnyRecord | null;
+}
+
+const $attrs = useAttrs();
+const props = withDefaults(defineProps<SelectProps>(), {
+  defaultValue: null,
+  resetKey: null
+});
+
+// vue3.4 way
+const emit = defineEmits<{
+  (event: "fetched"): void;
+  (event: "clear"): void;
+}>();
+const model = defineModel<SelectValue | SelectValue[]>();
+
+const skipNextSearch = ref(false); // suppress search right after clear
+
+let observer = ref<IntersectionObserver | null>(null);
+let load = ref<HTMLElement | null>(null);
+
+// store callbacks coming from fetchedDropdown(pack)
+const hooks = ref<{ option: OptionHook | OptionHook[] }>({ option: null }); // function | function[] | null
+
+// remember last fetch config and search so the child can refetch/append by itself
+const lastPack = ref<FetchPack | null>(null); // { url, data, params, mapFn }
+const lastSearch = ref(""); // current search term
+const lastSearchRows = ref<AnyRecord[]>([]); // results of the last search, to pin on top after clearing
+
+const hasNextPage = computed(() => {
+  const total = Number((fieldData.value as { total?: number }).total ?? 0);
+  return field.all.length < total;
+});
+
+// ask parent for a pack and run our internal fetcher
+const callParentFetched = async (search: string, opts: Partial<FetchPack> = {}) => {
+  const maybePack = await props.fetched?.({ search, ...opts });
+  if (maybePack && typeof maybePack === "object") {
+    await fetchedDropdown(search, { ...maybePack, ...opts });
+  }
+};
+
+const onClear = () => {
+  resetMe(); // clear options + selected value
+  skipNextSearch.value = true; // suppress the immediate empty search
+  emit("clear"); // notify parent that clear button was clicked
+};
+
+const onOpen = async () => {
+  // if empty, load page 1 via parent fetcher (no boolean flags)
+  if (!field.all.length) {
+    if (lastPack.value) {
+      await fetchedDropdown("", { ...lastPack.value, reset: true });
+    } else {
+      // await props.fetched?.('');
+      await callParentFetched("", { reset: true });
+    }
+  }
+
+  await nextTick();
+  if (load.value && hasNextPage.value) {
+    observer.value?.observe(load.value);
+  }
+};
+
+const onClose = async () => {
+  observer.value?.disconnect();
+};
+
+const onModelUpdate = async (val: unknown) => {
+  const optHooks = Array.isArray(hooks.value.option) ? hooks.value.option : hooks.value.option ? [hooks.value.option] : [];
+
+  // When user clicks × or backspaces everything, v-select sets model to null.
+  if (val == null || val === "") {
+    for (const f of optHooks) {
+      if (typeof f === "function") {
+        await Promise.resolve(f(null));
+      }
+    }
+    emit("clear");
+    return;
+  }
+
+  field.val = val as SelectValue;
+
+  for (const f of optHooks) {
+    if (typeof f === "function") {
+      await Promise.resolve(f(val));
+    }
+  }
+};
+
+const inputSearch = debounce(async (search: string, loading: (value: boolean) => void) => {
+  if (skipNextSearch.value && !search?.trim().length) {
+    skipNextSearch.value = false; // consume the flag
+    return;
+  }
+
+  if (search?.trim().length) {
+    loading(true);
+    if (lastPack.value) {
+      await fetchedDropdown(search, { ...lastPack.value, reset: true }).finally(() => loading(false));
+    } else {
+      await callParentFetched(search, { reset: true }).finally(() => loading(false));
+    }
+  } else {
+    // user erased the query manually: refetch the full list, then pin the last search results on top
+    field.page = 0;
+    if (lastPack.value) {
+      await fetchedDropdown("", { ...lastPack.value, reset: true });
+    } else {
+      await callParentFetched("");
+    }
+    pinLastSearchRows();
+    await nextTick();
+    if (load.value && hasNextPage.value) observer.value?.observe(load.value);
+  }
+}, 400);
+
+const infiniteScroll = async ([{ isIntersecting, target }]: IntersectionObserverEntry[]) => {
+  if (!isIntersecting) return;
+
+  const ul = target instanceof HTMLElement && target.offsetParent instanceof HTMLElement ? target.offsetParent : null;
+  const scrollTop = ul?.scrollTop ?? 0;
+
+  if (lastPack.value) {
+    await fetchedDropdown(lastSearch.value, { ...lastPack.value }); // next page of current mode
+  } else {
+    await callParentFetched(lastSearch.value || "");
+  }
+
+  await nextTick();
+
+  if (ul) ul.scrollTop = scrollTop;
+};
+
+onMounted(async () => {
+  observer.value = new IntersectionObserver(infiniteScroll);
+
+  // set default value if provided
+  if (props.defaultValue) {
+    await nextTick();
+    field.val = props.defaultValue;
+    model.value = props.defaultValue;
+  }
+});
+
+onBeforeUnmount(() => {
+  observer.value?.disconnect();
+  observer.value = null;
+});
+
+// prototype and it will call from parent
+const field = reactive<{ all: AnyRecord[]; val: SelectValue; page: number; size: number }>({
+  all: [],
+  val: "",
+  page: 0,
+  size: 10
+});
+const fieldData = ref<AnyRecord>({});
+
+const resetMe = () => {
+  field.all = [];
+  field.page = 0;
+  field.val = "";
+};
+
+const reloadMe = () => {
+  field.all = [];
+  field.page = 0;
+};
+
+const fetchedDropdown = async (search: string, pack: FetchPack | null = null) => {
+  const url = pack?.url ?? null;
+  const data = pack?.data ?? null;
+  const params = pack?.params ?? {};
+  const mapFn = pack?.mapFn ?? ((x: AnyRecord) => x);
+  const reset = !!pack?.reset;
+  const reload = !!pack?.reload;
+
+  // make option sticky: only overwrite if caller provided it
+  if ("option" in (pack ?? {})) {
+    const pOpt = pack?.option;
+    hooks.value.option = Array.isArray(pOpt) ? pOpt.filter((fn) => typeof fn === "function") : typeof pOpt === "function" ? [pOpt] : [];
+  }
+
+  // remember essentials so the child can refetch/append on its own
+  lastPack.value = { url, data, params, mapFn };
+  lastSearch.value = search ?? "";
+
+  // if pass and true -> reset, reload , search
+  (reset && resetMe()) || (reload && reloadMe()) || (!empty(search) && !reset && !reload && reloadMe());
+
+  // after reset/reload/search
+  field.page++;
+  const param = { page: field.page, size: field.size, search: search };
+
+  // log once (don't call axios twice)
+  // console.log('GET', pack.url, { params: pack.params ? { ...pack.params, ...param } : param });
+
+  if (!url || !data) {
+    return;
+  }
+
+  let key: any;
+  try {
+    key = await axios.get(url, { params: params ? { ...params, ...param } : param });
+  } catch {
+    return; // failed to fetch (e.g. cascade with missing parent)
+  }
+  const payload = key.data[data as string] as AnyRecord;
+
+  fieldData.value = payload;
+  const rows = Array.isArray((payload as { data?: unknown }).data) ? (payload as { data: AnyRecord[] }).data : [];
+
+  const options = rows.map((dt) => (dt == null ? null : mapFn(dt))).filter((opt): opt is AnyRecord => opt != null);
+
+  // remember the last fresh search results so they can be pinned on top after clearing the search
+  if (search?.trim().length && reset) {
+    lastSearchRows.value = options.map((opt) => ({ ...opt }));
+  }
+
+  // console.log('Fetched', payload?.data);
+  options.forEach((opt) => {
+    const key = opt?.id ?? opt?.title ?? JSON.stringify(opt); // build a comparison key: prefer id, then title, then full object
+
+    if (
+      !field.all.some(
+        (o) =>
+          o != null &&
+          ((o as { id?: unknown; title?: unknown }).id ?? (o as { id?: unknown; title?: unknown }).title ?? JSON.stringify(o)) === key
+      )
+    ) {
+      field.all = [...field.all, opt];
+    }
+  });
+};
+
+const optionKey = (o: AnyRecord) =>
+  (o as { id?: unknown; title?: unknown }).id ?? (o as { id?: unknown; title?: unknown }).title ?? JSON.stringify(o);
+
+// after a refetch, move the last search results to the top of the list
+const pinLastSearchRows = () => {
+  if (!lastSearchRows.value.length) return;
+  const pinKeys = new Set(lastSearchRows.value.map(optionKey));
+  const rest = field.all.filter((o) => !pinKeys.has(optionKey(o)));
+  field.all = [...lastSearchRows.value, ...rest];
+};
+
+/**
+ * This function created for
+ * functionally reset or reload
+ * from without component
+ * like fn.value.reload({reset:true/reload:true/both});
+ * it is exposed, so we can call from with
+ * template ref
+ */
+const reload = async () => {
+  resetMe(); // clear field.all, page, val
+  await callParentFetched("", { reset: true }); // ask parent to fetch first page again
+};
+
+/**
+ * if backend send proper object or null
+ * then watch function not get any axios
+ * error else axios can send error
+ */
+watch(
+  () => props.resetKey,
+  async (newVal, oldVal) => {
+    if (oldVal === undefined) return;
+
+    const optHooks = Array.isArray(hooks.value.option) ? hooks.value.option : hooks.value.option ? [hooks.value.option] : [];
+
+    model.value = "";
+
+    // Notify hooks that selection is gone
+    for (const fn of optHooks) {
+      if (typeof fn === "function") {
+        await Promise.resolve(fn(null));
+      }
+    }
+
+    skipNextSearch.value = true; // avoid instant empty-search call
+    if (newVal == null) {
+      lastPack.value = null;
+      return;
+    } // parent cleared, don't fetch with null key
+    await callParentFetched("", { reload: true });
+    pinLastSearchRows();
+    skipNextSearch.value = false; // allow subsequent empty-searches (backspace-to-empty)
+  }
+);
+
+defineExpose({ field, fieldData, fetchedDropdown, reload });
+
+const parentClass = computed(() => ($attrs.parentclass as string | undefined) || "mb-2");
+
+const inputTitle = computed(() => ($attrs.title as string | undefined) || "");
+const hoodHtml = computed(() => (props.hood === false || props.hood == null ? "" : String(props.hood)));
+</script>
+
+<template>
+  <div :class="parentClass">
+    <label
+      class="text-capitalize d-flex align-items-center mb-1"
+      :class="{ 'd-none': !inputTitle }">
+      <div class="position-relative">
+        <span class="text-capitalize" v-html="inputTitle"></span>
+        <span
+          class="position-absolute text-danger rounded-circle bg-danger must"
+          :class="{ 'd-none': !props.must }"></span>
+      </div>
+      <div
+        class="text-uppercase w-100 text-end text-primary fw-semibold"
+        :class="{ 'd-none': !props.hood }"
+        style="font-size: 12px; margin-top: 0.15rem"
+        v-html="hoodHtml"></div>
+    </label>
+    <v-select
+      v-model="model"
+      label="title"
+      :filterable="false"
+      :options="field.all"
+      v-bind="$attrs"
+      @open="onOpen"
+      @update:model-value="onModelUpdate"
+      @close="onClose"
+      @search="inputSearch"
+      @clear="onClear">
+      <template #list-footer>
+        <li v-show="hasNextPage" ref="load" class="loader">More...</li>
+      </template>
+    </v-select>
+    <div class="form-text text-danger" :class="{ 'd-none': !props.err }" style="font-size: 0.8rem">
+      {{ props.err }}
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.loader {
+  text-align: center;
+  color: #bbbbbb;
+}
+
+.must {
+  width: 4px;
+  height: 4px;
+  top: 0;
+  margin-top: 5px;
+  margin-left: 2px;
+}
+</style>