create-nexwire 4.3.0 → 4.4.0

package/fastify/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/fastify/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/fastify/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>

package/fastify/src/resources/src/components/datatable/index.vue

@@ -0,0 +1,199 @@
+<template>
+  <div class="card border">
+    <div class="card-header" :class="{ 'd-none': !(props.removable || props.searchable || props.optionable) }">
+      <div class="row align-items-center gx-1">
+        <div class="col-12 col-md-3">
+          <SelectOption :is-options="props.optionable" :option="props.option" :data="dataForOption"
+            :selectedoption="selectedoption" :search="searchdata" />
+        </div>
+        <div class="col-12 col-md-9">
+          <slot name="extra-tools"></slot>
+          <div class="d-flex align-items-center justify-content-center justify-content-md-end">
+            <div v-if="checked.checkcolumn.length > 0" class="me-1" :class="{ 'd-none': !props.removable }">
+              <Button type="button" class="btn btn-outline-danger" @click.prevent="remove">
+                <i class="bi bi-trash"></i>
+              </Button>
+            </div>
+            <div class="d-flex align-items-center" :class="{ 'd-none': !props.searchable }">
+              <Button class="btn btn-outline-secondary rounded-0 rounded-start" type="button" @click="searchMe">
+                <i class="bi bi-search"></i>
+              </Button>
+              <Input v-model="searchdata" type="text" class="w-auto rounded-0 rounded-end" topclass="mb-0"
+                placeholder="Search..." @keyup.enter="searchMe" @keyup.delete="searchMe" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="card-body">
+      <slot name="extra"></slot>
+      <div class="table-responsive">
+        <table
+          class="table table-bordered table-striped border-custom table-sm align-middle m-0 datatable no-shrink-table">
+          <slot name="customhead"></slot>
+          <thead :class="{ 'd-none': slots.customhead }">
+            <tr>
+              <th class="align-middle" :class="{ 'd-none': !props.removable || !props.data.current_page }">
+                <Checkbox v-model="checked.check" topclass="ms-2" :value="checked.check" :disabled="props.disabled"
+                  @click="checkAll" />
+              </th>
+              <th class="text-center align-middle" :class="{ 'd-none': !props.countable }">#</th>
+              <slot name="thead"></slot>
+            </tr>
+          </thead>
+
+          <slot name="custombody"></slot>
+          <tbody :class="{ 'd-none': slots.custombody }">
+            <tr v-for="(dt, i) in tableRows" :key="`${dt.id}-${i}`">
+              <td class="align-middle" :class="{ 'd-none': !props.removable || !props.data.current_page }">
+                <Checkbox v-model="checked.checkcolumn" topclass="ms-2" :value="dt.id" :disabled="props.disabled"
+                  @change="updateChecked" />
+              </td>
+              <td class="text-center align-middle" :class="{ 'd-none': !props.countable }">
+                {{
+                  props.data.current_page
+                    ? props.data.per_page * (props.data.current_page - 1) + (i + 1)
+                    : i + 1
+                }}
+              </td>
+              <slot name="tbody" :td="dt"></slot>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+    <div class="card-footer" :class="{ 'd-none': props.data.total <= props.data.data?.length }">
+      <Pagination :data="props.data" :selectedoption="selectedoption" :search="searchdata" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { debounce } from "lodash-es";
+import { computed, reactive, ref, useSlots, watchEffect } from "vue";
+import { useRoute } from "vue-router";
+import Button from "@/components/Button.vue";
+import Checkbox from "@/components/Checkbox.vue";
+import Input from "@/components/Input.vue";
+import { useGum } from "@/plugins/gum";
+import Pagination from "./Pagination.vue";
+import SelectOption from "./SelectOpption.vue";
+
+interface DataRow {
+  id: string | number;
+  [key: string]: any;
+}
+
+interface DataPage {
+  path: string;
+  current_page: number;
+}
+
+interface DataTableProps {
+  data: any;
+  search?: string;
+  loop?: DataRow[] | false;
+  option?: Array<string | number>;
+  removable?: boolean;
+  countable?: boolean;
+  searchable?: boolean;
+  optionable?: boolean;
+  disabled?: boolean;
+}
+
+const props = withDefaults(defineProps<DataTableProps>(), {
+  search: "",
+  option: () => [],
+  removable: true,
+  countable: true,
+  searchable: true,
+  optionable: true,
+  disabled: false
+});
+const gum = useGum();
+const route = useRoute();
+
+const slots = useSlots();
+
+const emit = defineEmits<(event: "remove", value: Array<string | number>) => void>();
+
+// checkbox select
+let checked = reactive<{ check: boolean; checkcolumn: Array<string | number> }>({
+  check: false,
+  checkcolumn: []
+});
+const checkAll = () => {
+  if (!checked.check) {
+    props.data.data.forEach((dt: DataRow) => {
+      if (!checked.checkcolumn.includes(dt.id)) {
+        checked.checkcolumn.push(dt.id);
+      }
+    });
+  } else {
+    checked.checkcolumn = [];
+  }
+};
+const updateChecked = () => (checked.checkcolumn.length === props.data.data.length ? (checked.check = true) : (checked.check = false));
+
+// remove from parent
+const remove = () => {
+  emit("remove", checked.checkcolumn);
+  checked.check = false;
+};
+
+// for change data size show
+const selectedoption = ref<string | number | undefined>(undefined);
+const dataForOption = computed<DataPage>(() => ({
+  path: props.data.path,
+  current_page: props.data.current_page
+}));
+const tableRows = computed<DataRow[]>(() => (props.loop ? props.loop : props.data.data));
+
+// search data
+const searchdata = ref(props.search || "");
+const searchMe = debounce(() => {
+  const isSearching = !!searchdata.value && searchdata.value.trim() !== "";
+  gum.get(props.data.path, {
+    query: {
+      page: isSearching ? 1 : props.data.current_page,
+      size: selectedoption.value,
+      search: searchdata.value
+    },
+    routePath: route.path,
+    preserveState: true,
+    preserveScroll: true,
+    skipFetch: true
+  });
+}, 500);
+
+// watch instantce
+watchEffect(() => {
+  selectedoption.value = props.option.find((x) => Number(x) === Number(props.data.per_page));
+  searchdata.value = props.search || "";
+});
+</script>
+
+<style lang="scss" scoped>
+.border-custom {
+  border-color: #cccccc !important;
+}
+
+.no-shrink-table th,
+.no-shrink-table td {
+  white-space: nowrap;
+}
+
+/* By default (large screens and up) do not force a min-width:
+   allow table to size normally so no horizontal scrollbar on large screens */
+@media (min-width: 992px) {
+  .no-shrink-table {
+    min-width: 0;
+  }
+}
+
+@media (max-width: 991.98px) {
+  .no-shrink-table {
+    min-width: 1000px;
+  }
+}
+</style>

package/fastify/src/resources/src/composables/useAuth.ts

@@ -0,0 +1,52 @@
+import { computed, type Ref, readonly, ref } from "vue";
+
+type UnknownRecord = Record<string, unknown>;
+
+export type RoleLike = {
+  id?: string | number;
+  name?: string;
+  title?: string;
+  slug?: string;
+} & UnknownRecord;
+
+export type AuthUser = UnknownRecord & {
+  id?: string | number;
+  name?: string;
+  role?: RoleLike | null;
+  roles?: RoleLike[] | null;
+};
+
+const userRef: Ref<AuthUser | null> = ref(null);
+
+export function setUser(user: AuthUser | null) {
+  userRef.value = user;
+}
+
+export function clearUser() {
+  userRef.value = null;
+}
+
+export function useAuth() {
+  return {
+    user: readonly(userRef),
+    isAuthenticated: computed(() => !!userRef.value),
+    setUser,
+    clearUser
+  };
+}
+
+export const authUser = computed<AuthUser>(() => userRef.value ?? {});
+
+export function hasRole(...wanted: string[]): boolean {
+  const subject = userRef.value;
+  if (!subject) return false;
+
+  const current = (subject.roles ?? (subject.role ? [subject.role] : []))
+    .map((item) => (item.name || item.title || item.slug || "").toLowerCase().trim())
+    .filter(Boolean);
+
+  if (!wanted.length) return current.length > 0;
+
+  const expected = wanted.map((item) => item.toLowerCase().trim()).filter(Boolean);
+  return current.some((item) => expected.includes(item));
+}

package/fastify/src/resources/src/helpers/assets.ts

@@ -0,0 +1,51 @@
+// src/helpers/assets.ts
+
+// 1. Eagerly load ALL images in the entire src folder.
+// This tells Vite: "Find every image, hash it, and give me the final URL."
+const allImages = import.meta.glob("/src/**/*.{png,jpg,jpeg,svg,webp,gif}", {
+  eager: true,
+  import: "default"
+});
+
+/**
+ * Resolves ANY image path (using @, relative, or absolute) for both dev and prod.
+ */
+export default function asset(path: string): string {
+  // 1. If it's already a full URL or data URI, return it as is.
+  if (path.startsWith("http") || path.startsWith("data:")) {
+    return path;
+  }
+
+  // 2. Normalize the path.
+  // Vite's glob keys always start from the root, like "/src/assets/..."
+  let cleanPath = path;
+
+  // Convert alias `@/` to `/src/`
+  if (cleanPath.startsWith("@/")) {
+    cleanPath = cleanPath.replace("@/", "/src/");
+  }
+  // Convert absolute `/` to `/src/` (assuming you mean inside src)
+  else if (cleanPath.startsWith("/") && !cleanPath.startsWith("/src/")) {
+    cleanPath = `/src${cleanPath}`;
+  }
+  // Convert relative `../../` (This is the tricky part)
+  else if (cleanPath.startsWith("../")) {
+    // We can't easily resolve `../../` from a utility file, so we just
+    // try to find a matching suffix in the glob keys.
+    // (e.g., if you pass "../../assets/foo.png", we look for "assets/foo.png" inside /src)
+    const match = Object.keys(allImages).find((key) => key.endsWith(cleanPath.replace(/^(\.\.\/)+/, "")));
+    if (match) {
+      return allImages[match] as string;
+    }
+  }
+
+  // 3. Look up the normalized path in the glob object
+  const resolved = allImages[cleanPath] as string | undefined;
+
+  if (!resolved) {
+    console.warn(`[getAssetUrl] Image not found: ${path}. Returning original path.`);
+    return path;
+  }
+
+  return resolved;
+}

package/fastify/src/resources/src/helpers/nformatter.ts

@@ -0,0 +1,10 @@
+const compactFormatter = new Intl.NumberFormat("en", {
+  notation: "compact",
+  maximumFractionDigits: 1
+});
+
+export function formatCompactNumber(value: number): string | number {
+  if (!Number.isFinite(value)) return String(value);
+  if (Math.abs(value) < 1000) return value;
+  return compactFormatter.format(value).replace(/\s/g, "");
+}