create-nexwire 4.0.0

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

@@ -0,0 +1,32 @@
+<template>
+  <button class="shadow-none" :type="props.type" v-bind="$attrs">
+    <slot v-if="hasDefaultSlot"></slot>
+    <template v-else>
+      <span v-if="props.label" class="text-capitalize" :class="{ 'me-1': props.icon }">
+        {{ props.label }}
+      </span>
+      <span v-if="props.icon"><i :class="props.icon"></i></span>
+    </template>
+  </button>
+</template>
+
+<script setup lang="ts">
+import { computed, useSlots } from "vue";
+
+interface ButtonProps {
+  label?: string;
+  icon?: string;
+  type?: "button" | "submit" | "reset";
+}
+
+defineOptions({ name: "Button", inheritAttrs: false });
+
+const slots = useSlots();
+const props = withDefaults(defineProps<ButtonProps>(), {
+  type: "button"
+});
+
+const hasDefaultSlot = computed(() => Boolean(slots.default?.().length));
+</script>
+
+<style lang="scss" scoped></style>

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

@@ -0,0 +1,29 @@
+<template>
+  <div class="form-check mb-0" :class="props.topclass">
+    <input
+      :id="String(props.id)"
+      v-model="model"
+      class="form-check-input shadow-none border-secondary"
+      type="checkbox"
+      v-bind="$attrs" />
+    <label v-if="props.label" class="form-check-label" :for="String(props.id)">{{ props.label }}</label>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineOptions({ name: "Checkbox", inheritAttrs: false });
+
+interface CheckboxProps {
+  id?: string | number;
+  label?: string;
+  topclass?: string;
+}
+
+const props = defineProps<CheckboxProps>();
+
+type CheckboxModel = boolean | Array<string | number>;
+
+const model = defineModel<CheckboxModel>({ default: false });
+</script>
+
+<style lang="scss" scoped></style>

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

@@ -0,0 +1,106 @@
+<template>
+  <div :class="parentClass">
+    <label class="text-capitalize d-flex align-items-center mb-1" :class="{ 'd-none': !inputLabel }">
+      <div class="position-relative">
+        <span class="text-capitalize" 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-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>
+    <VueDatePicker
+      v-if="usePicker"
+      v-model="model"
+      :month-picker="props.mode === 'month'"
+      :year-picker="props.mode === 'year'"
+      :time-picker="props.mode === 'datetime'"
+      :time-config="timeConfig"
+      :formats="formats"
+      text-input
+      v-bind="$attrs"></VueDatePicker>
+    <input
+      v-else
+      type="month"
+      class="form-control"
+      :value="nativeValue"
+      :disabled="Boolean($attrs.disabled)"
+      :readonly="Boolean($attrs.readonly)"
+      @input="onNativeInput" />
+    <div class="form-text text-danger" :class="{ 'd-none': !props.err }" style="font-size: 0.8rem">
+      {{ props.err }}
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { VueDatePicker } from "@vuepic/vue-datepicker";
+import { computed, useAttrs } from "vue";
+import "@vuepic/vue-datepicker/dist/main.css";
+import { browserDetect } from "@/plugins/browserDetect";
+
+defineOptions({ name: "Datepicker", inheritAttrs: false });
+
+type DateMode = "date" | "datetime" | "month" | "year";
+type DateValue = string | number | Date | null;
+
+interface DateProps {
+  must?: boolean;
+  err?: string | boolean;
+  hood?: string | boolean;
+  mode?: DateMode;
+}
+
+const $attrs = useAttrs();
+const props = withDefaults(defineProps<DateProps>(), {
+  err: false,
+  mode: "date"
+});
+
+const model = defineModel<DateValue>();
+
+const usePicker = computed(() => browserDetect.isFirefox.value || props.mode !== "month");
+
+const nativeValue = computed(() => {
+  const value = model.value;
+  if (typeof value === "string") return value;
+  if (value instanceof Date && !Number.isNaN(value.getTime())) {
+    const year = value.getFullYear();
+    const month = String(value.getMonth() + 1).padStart(2, "0");
+    return `${year}-${month}`;
+  }
+  return "";
+});
+
+const onNativeInput = (e: Event) => {
+  model.value = (e.target as HTMLInputElement).value || null;
+};
+
+const parentClass = computed(() => ($attrs.parentclass as string | undefined) || "mb-2");
+const inputLabel = computed(() => ($attrs.label as string | undefined) || "");
+
+const hoodHtml = computed(() => (props.hood === false || props.hood == null ? "" : String(props.hood)));
+
+const timeConfig = computed(() => (props.mode === "datetime" ? { is24: false } : undefined));
+
+const formats = computed(() => {
+  switch (props.mode) {
+    case "year":
+      return { input: "yyyy" };
+    case "month":
+      return { input: "MM/yyyy" };
+    case "datetime":
+      return { input: "dd/MM/yyyy hh:mm a" };
+    default:
+      return { input: "dd/MM/yyyy" };
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.must {
+  width: 4px;
+  height: 4px;
+  top: 0;
+  margin-top: 5px;
+  margin-left: 2px;
+}
+</style>

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

@@ -0,0 +1,53 @@
+<template></template>
+
+<script setup lang="ts">
+import { inject, onBeforeUnmount, onMounted, useAttrs, useSlots } from "vue";
+
+defineOptions({ name: "FeatureButton", inheritAttrs: false });
+
+const props = defineProps<{
+  icon?: string;
+  label?: string;
+  title?: string;
+  buttonClass?: any;
+}>();
+
+const emit = defineEmits<(e: "click") => void>();
+
+interface ButtonEntry {
+  id: symbol;
+  icon?: string;
+  label: string;
+  title: string;
+  attrs?: Record<string, string>;
+  class?: any;
+  onClick: () => void;
+  render?: () => any[];
+}
+
+const featureButtons = inject<ButtonEntry[]>("featureButtons")!;
+const slots = useSlots();
+const fallthroughAttrs = useAttrs();
+
+const id = Symbol();
+
+onMounted(() => {
+  featureButtons.push({
+    id,
+    icon: props.icon,
+    label: props.label ?? "",
+    title: props.title ?? props.label ?? "",
+    attrs: fallthroughAttrs as any,
+    class: props.buttonClass,
+    onClick: () => emit("click"),
+    render: slots.default || undefined
+  });
+});
+
+onBeforeUnmount(() => {
+  const index = featureButtons.findIndex((b) => b.id === id);
+  if (index !== -1) featureButtons.splice(index, 1);
+});
+</script>
+
+<style lang="scss" scoped></style>

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

@@ -0,0 +1,33 @@
+<template>
+  <div class="float-button position-fixed text-center removeprintarea" :style="floatStyle" v-bind="$attrs">
+    <slot></slot>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+
+interface FloatButtonProps {
+  top?: string;
+  right?: string;
+  zIndex?: number;
+}
+
+const props = withDefaults(defineProps<FloatButtonProps>(), {
+  top: "200px",
+  right: "0",
+  zIndex: 100
+});
+
+const floatStyle = computed(() => ({
+  top: props.top,
+  right: props.right,
+  zIndex: props.zIndex
+}));
+</script>
+
+<style lang="scss" scoped>
+.float-button {
+  border-radius: 0 5px 5px 5px;
+}
+</style>

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

@@ -0,0 +1,32 @@
+<template>
+  <a :href="String(props.to)" class="d-flex align-items-center" v-bind="$attrs">
+    <slot v-if="hasDefaultSlot"></slot>
+    <template v-else>
+      <span v-if="props.label" class="text-capitalize" :class="{ 'me-1': props.icon }">{{
+        props.label
+      }}</span>
+      <span v-if="props.icon"><i :class="props.icon"></i></span>
+    </template>
+  </a>
+</template>
+
+<script setup lang="ts">
+import { computed, useSlots } from "vue";
+
+interface HrefProps {
+  label?: string;
+  icon?: string;
+  to?: string | number;
+}
+
+defineOptions({ name: "Href", inheritAttrs: false });
+
+const slots = useSlots();
+const props = withDefaults(defineProps<HrefProps>(), {
+  to: "#"
+});
+
+const hasDefaultSlot = computed(() => Boolean(slots.default?.().length));
+</script>
+
+<style lang="scss" scoped></style>

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

@@ -0,0 +1,223 @@
+<template>
+  <div :class="topclass">
+    <div class="position-relative">
+      <label
+        :for="inputId"
+        class="d-flex align-items-center mb-1"
+        :class="{ 'd-none': !inputLabel }">
+        <div class="position-relative">
+          <span class="text-capitalize" 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 fw-semibold"
+          :class="{ 'd-none': !props.hood }"
+          style="font-size: 12px; margin-top: 0.15rem"
+          v-html="hoodHtml"></div>
+      </label>
+      <input
+        ref="inputRef"
+        class="form-control"
+        :value="props.modelValue"
+        :maxlength="maxLengthAttr"
+        :readonly="props.readonly"
+        v-bind="$attrs"
+        :autocomplete="inputAutocomplete"
+        @input="updateModel" />
+      <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";
+
+const { isFirefox } = browserDetect;
+
+const $attrs = useAttrs();
+const inputRef = ref<HTMLInputElement | null>(null);
+type InputCategory = "number" | "decimal" | "+decimal-" | "mobile" | "tax-period" | "bin" | "challan-number" | string;
+
+interface InputProps {
+  focus?: boolean;
+  must?: boolean;
+  err?: string | boolean;
+  modelValue?: string | number;
+  category?: InputCategory;
+  hood?: string | boolean | number;
+  readonly?: boolean;
+}
+
+const props = withDefaults(defineProps<InputProps>(), {
+  err: false,
+  modelValue: ""
+});
+
+const topclass = computed(() => ($attrs.topclass as string | undefined) || "mb-2");
+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 inputAutocomplete = computed(() => {
+  const attrAutocomplete = $attrs.autocomplete as string | undefined;
+  if (attrAutocomplete) {
+    return attrAutocomplete;
+  }
+  return ["number", "decimal"].includes(props.category ?? "") ? "off" : "on";
+});
+
+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;
+
+    // Remove everything except digits, decimal point, and minus sign
+    val = val.replace(/[^0-9.]/g, "");
+
+    // Allow only one decimal point
+    const parts = val.split(".");
+    if (parts.length > 2) {
+      val = `${parts[0]}.${parts.slice(1).join("")}`;
+    }
+
+    emit("update:modelValue", (target.value = val));
+  } else if (props.category === "+decimal-") {
+    let val = target.value;
+
+    // Remove everything except digits, decimal point, and minus sign
+    val = val.replace(/[^0-9.-]/g, ""); // if need minus sign
+
+    // Move minus sign to the front if it exists anywhere
+    const isNegative = val.includes("-");
+    val = val.replace(/-/g, ""); // remove all minus signs
+    if (isNegative) {
+      val = `-${val}`;
+    }
+
+    // Allow only one decimal point
+    const parts = val.split(".");
+    if (parts.length > 2) {
+      val = `${parts[0]}.${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 === "echallan-number") {
+    // Format: V + 9 digits (V000517226)
+    let raw = (target.value || "").toUpperCase();
+
+    // keep only digits, but allow V (we’ll force V at start)
+    let digits = raw.replace(/[^\d]/g, "").slice(0, 9);
+
+    // always prefix V
+    let formatted = "V" + digits;
+
+    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);
+  }
+};
+
+onMounted(() => {
+  const shouldFocus = props.focus !== false && props.focus !== undefined;
+  if (!shouldFocus) return;
+
+  nextTick(() => inputRef.value?.focus());
+});
+</script>
+
+<style lang="scss" scoped>
+.must {
+  width: 4px;
+  height: 4px;
+  margin-left: 2px;
+  margin-top: 5px;
+}
+
+.max {
+  font-size: 0.6rem;
+}
+</style>

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

@@ -0,0 +1,145 @@
+<template>
+  <div :class="topclass">
+    <div class="position-relative">
+      <label
+        :for="inputId"
+        class="text-capitalize d-flex align-items-center mb-1"
+        :class="{ 'd-none': !inputLabel }">
+        <div class="position-relative">
+          <span class="text-capitalize" v-html="inputLabel"></span>
+          <span
+            class="position-absolute text-danger rounded-circle bg-danger must"
+            :class="{ 'd-none': !props.must }"></span>
+        </div>
+        <div
+          :class="hoodClass"
+          style="font-size: 12px; margin-top: 0.15rem"
+          v-html="hoodHtml"></div>
+      </label>
+      <div class="input-group">
+        <div class="position-relative" :style="props.half ? 'width: 50%;' : 'width: 35%;'">
+          <input
+            ref="inputRef"
+            :id="inputId"
+            type="text"
+            class="form-control flex-grow-0 px-1 text-center rounded-0 rounded-start"
+            :maxlength="maxLengthAttr"
+            :value="props.modelValue"
+            v-bind="$attrs"
+            @input="updateModel" />
+          <div
+            class="position-absolute bottom-0 end-0 pe-1 text-secondary max"
+            :class="{ 'd-none': !max }">
+            {{ maxCounter }}
+          </div>
+        </div>
+        <input
+          type="text"
+          class="form-control text-center border-start second-input"
+          :style="props.half ? 'width: 50%;' : 'width: 62%;'"
+          :placeholder="placeholder1"
+          :value="props.calcdata"
+          readonly />
+      </div>
+    </div>
+    <div :id="`${inputId}Help`" class="form-text text-danger" :class="{ 'd-none': !props.err }">
+      {{ props.err }}
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, nextTick, onMounted, ref, useAttrs } from "vue";
+
+defineOptions({ name: "InputGroup", inheritAttrs: false });
+
+type InputGroupCategory = "number" | "decimal" | "mobile" | string;
+
+interface InputGroupProps {
+  focus?: boolean;
+  must?: boolean;
+  half?: boolean;
+  err?: string | boolean;
+  modelValue?: string | number;
+  category?: InputGroupCategory;
+  calcdata?: string | number;
+  hood?: string | number | boolean;
+}
+
+const $attrs = useAttrs();
+const inputRef = ref<HTMLInputElement | null>(null);
+const props = withDefaults(defineProps<InputGroupProps>(), {
+  err: false,
+  modelValue: "",
+  calcdata: ""
+});
+
+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 placeholder1 = computed(() => ($attrs.placeholder1 as string | undefined) || "");
+
+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 maxCounter = computed(() => (max.value == null ? "" : max.value - String(props.modelValue).length));
+
+const hoodHtml = computed(() => (props.hood === false || props.hood == null ? "" : String(props.hood)));
+const hoodClass = computed(() => [
+  "text-uppercase w-50 text-end text-primary fw-semibold",
+  props.half ? "w-50" : "w-100",
+  !props.hood && "d-none"
+]);
+
+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;
+    val = val.replace(/[^0-9.]/g, "");
+
+    const parts = val.split(".");
+    if (parts.length > 2) {
+      val = `${parts[0]}.${parts.slice(1).join("")}`;
+    }
+
+    emit("update:modelValue", (target.value = val));
+  } else if (props.category === "mobile") {
+    const digits = target.value.replace(/[^\d]/g, "");
+    let val = digits;
+    if (target.value.includes("+")) {
+      val = `+${digits}`;
+    }
+    emit("update:modelValue", (target.value = val));
+  } else {
+    emit("update:modelValue", target.value);
+  }
+};
+
+onMounted(() => {
+  const shouldFocus = props.focus !== false && props.focus !== undefined;
+  if (!shouldFocus) return;
+
+  nextTick(() => inputRef.value?.focus());
+});
+</script>
+
+<style lang="scss" scoped>
+.must {
+  width: 4px;
+  height: 4px;
+  margin-left: 2px;
+  margin-top: 5px;
+}
+
+.max {
+  font-size: 0.6rem;
+}
+</style>