create-nexwire 4.0.0

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

@@ -0,0 +1,42 @@
+<template>
+  <div class="h-100" v-bind="$attrs">
+    <div class="h-100 d-flex align-items-center justify-content-center">
+      <div class="spinner-grow" :style="spinnerStyle" role="status">
+        <span class="visually-hidden">Loading...</span>
+      </div>
+      <div class="fw-bold ms-2">
+        <span v-if="props.text" :class="props.textsize" :style="textStyle">
+          {{ props.text }}
+        </span>
+        <span v-else>Loading...</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+
+defineOptions({ name: "Spinner", inheritAttrs: false });
+
+interface SpinnerProps {
+  size?: string;
+  text?: string;
+  textsize?: string;
+}
+
+const props = withDefaults(defineProps<SpinnerProps>(), {
+  size: "3rem",
+  text: "",
+  textsize: ""
+});
+
+const spinnerStyle = computed(() => ({
+  width: props.size,
+  height: props.size
+}));
+
+const textStyle = computed(() => ({
+  fontSize: props.textsize || undefined
+}));
+</script>

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

@@ -0,0 +1,65 @@
+<template>
+  <div :class="wrapperClass">
+    <label :class="props.vertical ? 'form-check-label d-block' : 'd-none'">
+      <span v-html="statusHtml"></span>
+    </label>
+    <div class="form-check form-switch d-inline-block">
+      <input
+        class="form-check-input shadow-none border-primary"
+        type="checkbox"
+        role="switch"
+        :checked="isChecked"
+        v-bind="$attrs" />
+      <label :class="props.vertical ? 'd-none' : 'form-check-label'">
+        <span v-html="statusHtml"></span>
+      </label>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, useAttrs } from "vue";
+
+defineOptions({ name: "Switch", inheritAttrs: false });
+
+interface SwitchProps {
+  modelValue?: string | number | boolean;
+  value?: unknown[] | Record<string, unknown> | string | number | boolean;
+  vertical?: boolean;
+  checked?: boolean | number;
+}
+
+const $attrs = useAttrs();
+const props = defineProps<SwitchProps>();
+
+const textLabel = computed(() => ($attrs.text as string | undefined) || "");
+const blankLabel = computed(() => ($attrs.blank as string | undefined) || "");
+const topclass = computed(() => ($attrs.topclass as string | undefined) || "");
+
+const isChecked = computed(() => Boolean(props.checked));
+
+const wrapperClass = computed(() => (props.vertical ? `text-center ${topclass.value}`.trim() : ""));
+
+const statusHtml = computed(() => {
+  if (isChecked.value) {
+    return `<div class='d-flex justify-content-center'><span>${textLabel.value}</span><div class='rounded-circle bg-success indicator'></div></div>`;
+  }
+
+  return `<div class='d-flex justify-content-center'><span>${blankLabel.value}</span><div class='rounded-circle bg-danger indicator'></div></div>`;
+});
+</script>
+
+<style lang="scss">
+.indicator {
+  width: 4px;
+  height: 4px;
+  margin-left: 2px;
+  margin-top: 5px;
+}
+</style>
+<style lang="scss" scoped>
+label,
+input {
+  cursor: pointer;
+}
+</style>

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

@@ -0,0 +1,117 @@
+<template>
+  <div :class="wrapperClass">
+    <div class="position-relative">
+      <div class="position-relative mb-1">
+        <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="form-floating h-100">
+        <textarea
+          :value="props.modelValue"
+          class="form-control mb-0 h-100"
+          :maxlength="maxLengthAttr"
+          :aria-describedby="`${inputId}Help`"
+          v-bind="$attrs"
+          rows="3"
+          @input="updateModel">
+        </textarea>
+        <label
+          :for="inputId"
+          class="d-block placeholder-label border-0"
+          :class="{ 'd-none': !placeholderText }">
+          {{ placeholderText }}
+        </label>
+      </div>
+      <label
+        class="position-absolute end-0 pe-1 text-secondary max"
+        :class="{ 'd-none': !max }"
+        style="top: 28px">
+        {{ maxCounter }}
+      </label>
+    </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, useAttrs } from "vue";
+
+defineOptions({ name: "TextArea", inheritAttrs: false });
+
+const $attrs = useAttrs();
+interface TextAreaProps {
+  focus?: boolean;
+  must?: boolean;
+  err?: string | boolean;
+  modelValue?: string | number;
+}
+
+const props = withDefaults(defineProps<TextAreaProps>(), {
+  modelValue: ""
+});
+
+const inputId = computed(() => ($attrs.id as string | undefined) || "");
+const inputLabel = computed(() => ($attrs.label as string | undefined) || "");
+const placeholderText = computed(() => ($attrs.placeholder as string | undefined) || "");
+const topclass = computed(() => ($attrs.topclass as string | undefined) || "");
+
+const wrapperClass = computed(() => (topclass.value ? `${topclass.value} position-relative` : "mb-2"));
+
+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 emit = defineEmits<(event: "update:modelValue", value: string) => void>();
+const updateModel = (e: Event) => {
+  const target = e.target as HTMLTextAreaElement;
+  emit("update:modelValue", target.value);
+};
+
+onMounted(() => {
+  if (!props.focus || !inputId.value) {
+    return;
+  }
+
+  nextTick(() => {
+    const textarea = document.querySelector(`#${inputId.value}`) as HTMLTextAreaElement | null;
+    textarea?.focus();
+  });
+});
+</script>
+
+<style lang="scss" scoped>
+.form-floating {
+  label {
+    top: -1px;
+    left: 1px;
+  }
+
+  textarea:focus+label,
+  textarea:not(:placeholder-shown)+label {
+    top: -6px;
+  }
+}
+
+.placeholder-label {
+  color: #cccccc !important;
+}
+
+.must {
+  width: 4px;
+  height: 4px;
+  margin-left: 2px;
+  margin-top: 5px;
+}
+
+.max {
+  font-size: 0.6rem;
+}
+</style>

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

@@ -0,0 +1,56 @@
+<template>
+  <Teleport to="#toast-show">
+    <div
+      ref="notify"
+      class="toast position-fixed"
+      role="alert"
+      aria-live="assertive"
+      aria-atomic="true"
+      style="z-index: 1000000; top: 10px; right: 23px"
+      data-bs-delay="2000">
+      <div :class="`text-bg-${bgcolor} align-items-center rounded-1 shadow-sm`">
+        <div class="d-flex">
+          <div class="toast-body">
+            {{ message }}
+          </div>
+          <button
+            type="button"
+            class="btn-close btn-close-white me-2 m-auto"
+            data-bs-dismiss="toast"
+            aria-label="Close"></button>
+        </div>
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import Toast from "bootstrap/js/dist/toast.js";
+import { ref } from "vue";
+
+defineOptions({ name: "Toast", inheritAttrs: false });
+
+interface ToastProps {
+  icon?: string;
+}
+
+defineProps<ToastProps>();
+
+const notify = ref<HTMLElement | null>(null);
+const message = ref("");
+const bgcolor = ref("primary");
+
+const toastme = (msg: string, bg: string) => {
+  message.value = msg;
+  bgcolor.value = bg;
+  if (!notify.value) {
+    return;
+  }
+  const toast = Toast.getOrCreateInstance(notify.value);
+  toast.show();
+};
+
+defineExpose({ toastme });
+</script>
+
+<style lang="scss" scoped></style>

package/express/src/resources/src/components/datatable/DataTableSkeleton.vue

@@ -0,0 +1,98 @@
+<template>
+  <div class="skeleton card border">
+    <div class="card-header border-bottom-0 pb-0 px-2 px-sm-3">
+      <div class="row align-items-center">
+        <div class="col-12 col-sm-6 col-lg-3 col-xl-3 mb-2 mb-lg-0 d-flex">
+          <div class="py-2 rounded-1 border bg-custom ps-3 me-2"></div>
+          <div class="form-control py-2 bg-custom"></div>
+        </div>
+        <div class="col-12 col-sm-6 col-lg-4 col-xl-5 mb-2 mb-lg-0">
+          <slot name="extra-option"></slot>
+        </div>
+        <div class="col-12 col-lg-5 col-xl-4">
+          <div class="row gx-1">
+            <div class="col-2 col-sm-4 col-md-6 col-lg-2 text-start text-lg-end">
+              <span class="form-control py-2 bg-custom"></span>
+            </div>
+            <div class="mb-2 mb-sm-0 text-start col-6 col-sm-6 col-md-4 col-lg-7">
+              <span class="form-control py-2 bg-custom"></span>
+            </div>
+            <div class="col-4 col-sm-2 col-md-2 col-lg-3 text-end">
+              <span class="bg-custom form-control py-2"></span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="card-body py-3 px-2 px-sm-3">
+      <div class="table-responsive rounded-1">
+        <table class="table table-bordered table-striped table-sm align-middle m-0">
+          <thead>
+            <tr>
+              <th v-for="dt in colCount" :key="`h-${dt}`" class="bg-custom py-2"></th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="r in rowCount" :key="`r-${r}`">
+              <td v-for="c in colCount" :key="`c-${r}-${c}`" class="bg-custom py-2"></td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+    <div class="card-footer border-top-0 pt-0 px-2 px-sm-3">
+      <div class="row align-items-center">
+        <div class="col-12 col-md-5 mb-2 mb-md-0"></div>
+        <div class="col-12 col-md-7 text-center text-md-end">
+          <span class="form-control bg-custom py-2"></span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, useAttrs } from "vue";
+
+defineOptions({ inheritAttrs: false });
+
+const $attrs = useAttrs();
+const colCount = computed(() => Number($attrs.col ?? 1));
+const rowCount = computed(() => Number($attrs.row ?? 1));
+</script>
+
+<style lang="scss" scoped>
+table,
+tr,
+th,
+td {
+  border-color: #cccccc;
+  animation: anim 3s infinite;
+}
+
+.bg-custom {
+  animation: anim 3s infinite;
+}
+
+@keyframes anim {
+  0% {
+    background-color: #efefef;
+  }
+
+  25% {
+    background-color: #f8f8f8;
+  }
+
+  50% {
+    background-color: #efefef;
+  }
+
+  75% {
+    background-color: #f8f8f8;
+  }
+
+  100% {
+    background-color: #efefef;
+  }
+}
+</style>

package/express/src/resources/src/components/datatable/Pagination.vue

@@ -0,0 +1,147 @@
+<template>
+  <div class="row">
+    <div class="col-12 col-md-6 mb-3 mb-md-0">
+      <div class="py-2 text-black-50 text-center text-md-start">
+        Showing {{ page.from }} to {{ page.to }} of {{ nFormatter(page.total) }} entries
+      </div>
+    </div>
+    <div class="col-12 col-md-6">
+      <nav :class="['datatable-pagination', `pagination-${variant}`]" aria-label="Page navigation">
+        <ul class="pagination justify-content-center justify-content-md-end">
+          <!-- First -->
+          <li :class="['page-item', { disabled: noPreviousPage }]">
+            <button type="button" class="page-link" :aria-disabled="noPreviousPage ? 'true' : 'false'"
+              :tabindex="noPreviousPage ? -1 : 0" @click.prevent="!noPreviousPage && loadPage(1)">
+              <i class="bi bi-chevron-double-left"></i>
+            </button>
+          </li>
+
+          <!-- Prev -->
+          <li :class="['page-item', { disabled: noPreviousPage }]">
+            <button type="button" class="page-link" :aria-disabled="noPreviousPage ? 'true' : 'false'"
+              :tabindex="noPreviousPage ? -1 : 0"
+              @click.prevent="!noPreviousPage && loadPage(props.data.current_page - 1)">
+              <i class="bi bi-chevron-left"></i>
+            </button>
+          </li>
+
+          <li class="page-item">
+            <div class="input-group input-group-sm">
+              <Input v-model="page.page" type="text" category="number" topclass="m-0" class="text-center"
+                style="width: 100px" @keyup.enter="loadPage(page.page)" />
+            </div>
+          </li>
+
+          <li class="page-item">
+            <span class="page-link text-nowrap"> of {{ nFormatter(props.data.last_page) }} </span>
+          </li>
+
+          <!-- Next -->
+          <li :class="['page-item', { disabled: noNextPage }]">
+            <button type="button" class="page-link" :aria-disabled="noNextPage ? 'true' : 'false'"
+              :tabindex="noNextPage ? -1 : 0" @click.prevent="!noNextPage && loadPage(props.data.current_page + 1)">
+              <i class="bi bi-chevron-right"></i>
+            </button>
+          </li>
+
+          <!-- Last -->
+          <li :class="['page-item', { disabled: noNextPage }]">
+            <button type="button" class="page-link" :aria-disabled="noNextPage ? 'true' : 'false'"
+              :tabindex="noNextPage ? -1 : 0" @click.prevent="!noNextPage && loadPage(props.data.last_page)">
+              <i class="bi bi-chevron-double-right"></i>
+            </button>
+          </li>
+        </ul>
+      </nav>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, reactive, watchEffect } from "vue";
+import { useRoute } from "vue-router";
+import Input from "@/components/Input.vue";
+import { formatCompactNumber } from "@/helpers/nformatter";
+import { useGum } from "@/plugins/gum";
+
+interface PaginationData {
+  current_page: number;
+  last_page: number;
+  per_page: number;
+  total: number;
+  path: string;
+}
+
+interface PaginationProps {
+  data: PaginationData;
+  selectedoption?: string | number;
+  search?: string;
+  variant?: string;
+}
+
+const props = withDefaults(defineProps<PaginationProps>(), {
+  search: "",
+  variant: "dark"
+});
+
+const gum = useGum();
+const route = useRoute();
+
+const page = reactive({ page: 1, from: 0, to: 0, total: 0 });
+
+const noPreviousPage = computed(() => props.data.current_page - 1 <= 0);
+const noNextPage = computed(() => props.data.current_page + 1 > props.data.last_page);
+
+const loadPage = (pageNo: string | number) => {
+  let p = parseInt(String(pageNo), 10);
+
+  // fallback if NaN
+  if (Number.isNaN(p)) p = props.data.current_page;
+
+  const last = Number(props.data.last_page) || 1;
+
+  // clamp between 1 and last
+  if (p < 1) p = 1;
+  if (p > last) p = last;
+
+  return gum.get(props.data.path, {
+    query: { page: p, size: props.selectedoption, search: props.search },
+    routePath: route.path,
+    preserveState: true,
+    preserveScroll: true,
+    skipFetch: true
+  });
+};
+
+const nFormatter = formatCompactNumber;
+
+watchEffect(() => {
+  // "Showing {$from} to {$to} of {$total} entries"
+  page.page = props.data.current_page;
+  page.from = (props.data.current_page - 1) * props.data.per_page + 1;
+  page.to = Math.min(props.data.current_page * props.data.per_page, props.data.total);
+  page.total = props.data.total;
+});
+</script>
+
+<style lang="scss" scoped>
+ul.pagination {
+  margin: 0;
+
+  :deep(.page-item.disabled .page-link),
+  :deep(.page-link:disabled),
+  :deep(.page-link[aria-disabled="true"]) {
+    pointer-events: none;
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  .page-link {
+    border-radius: 5px !important;
+    margin-left: 0;
+    border-color: #cdcdcd !important;
+    color: inherit;
+    box-shadow: none;
+  }
+}
+</style>

package/express/src/resources/src/components/datatable/SelectOpption.vue

@@ -0,0 +1,64 @@
+<template>
+  <div class="d-flex align-items-center justify-content-center justify-content-md-start mb-2 mb-md-0" :class="{ 'd-none': !props.isOptions }">
+    Show
+    <select
+      v-model="selectedoption"
+      class="form-select shadow-none w-auto mx-2"
+      @change="selectOption">
+      <option v-for="(val, i) in props.option" :key="i" :value="val">{{ val }}</option>
+    </select>
+    entries
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from "vue";
+import { useRoute } from "vue-router";
+import { useGum } from "@/plugins/gum";
+
+interface DataPage {
+  path: string;
+  current_page: number;
+}
+
+interface SelectOptionProps {
+  data: DataPage;
+  search?: string;
+  isOptions?: boolean;
+  option?: Array<string | number>;
+  selectedoption?: string | number;
+}
+
+const props = withDefaults(defineProps<SelectOptionProps>(), {
+  search: "",
+  isOptions: true,
+  option: () => []
+});
+const gum = useGum();
+const route = useRoute();
+
+// select option and pass SelectOption component
+const selectedoption = ref<string | number | undefined>(props.selectedoption);
+
+watch(
+  () => props.selectedoption,
+  (value) => {
+    selectedoption.value = value;
+  }
+);
+
+const selectOption = (e: Event) => {
+  const target = e.target as HTMLSelectElement;
+  selectedoption.value = target.value;
+
+  return gum.get(props.data.path, {
+    query: { page: props.data.current_page, size: selectedoption.value, search: props.search },
+    routePath: route.path,
+    preserveState: true,
+    preserveScroll: true,
+    skipFetch: true
+  });
+};
+</script>
+
+<style lang="scss" scoped></style>