create-nexgen 1.0.4

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

@@ -0,0 +1,99 @@
+<template>
+  <div class="card h-100 border">
+    <div class="card-header bg-white 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 bg-white 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 {
+  background-color: #efefef;
+  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/template/src/resources/src/components/datatable/Pagination.vue

@@ -0,0 +1,161 @@
+<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" 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 lastpage">
+            <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 { reactive, computed, watchEffect } from "vue";
+import { useGum } from "@/composables/useGum";
+import { formatCompactNumber } from "@/helpers/nformatter";
+import Input from "../Input.vue";
+
+interface PaginationData {
+  current_page: number;
+  last_page: number;
+  per_page: number;
+  total: number;
+  path: string;
+}
+
+interface PaginationProps {
+  data: PaginationData;
+  selectedoption?: string | number;
+  search?: string;
+}
+
+const props = withDefaults(defineProps<PaginationProps>(), {
+  search: ""
+});
+const gum = useGum();
+
+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 (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 },
+    preserveState: true,
+    preserveScroll: 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/template/src/resources/src/components/datatable/SelectOpption.vue

@@ -0,0 +1,54 @@
+<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 } from "vue";
+import { useGum } from "@/composables/useGum";
+
+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();
+
+// select option and pass SelectOption component
+const selectedoption = ref<string | number | undefined>(props.selectedoption);
+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 },
+    preserveState: true,
+    preserveScroll: true
+  });
+};
+</script>
+
+<style lang="scss" scoped></style>

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

@@ -0,0 +1,237 @@
+<template>
+  <div class="card border h-100">
+    <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="form-control 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 { computed, reactive, ref, useSlots, watchEffect } from "vue";
+import { debounce } from "lodash-es";
+import { useGum } from "@/composables/useGum";
+
+import Checkbox from "../Checkbox.vue";
+import Button from "../Button.vue";
+import SelectOption from "./SelectOpption.vue";
+import Pagination from "./Pagination.vue";
+
+import Input from "../Input.vue";
+
+interface DataRow {
+  id: string | number;
+  [key: string]: unknown;
+}
+interface PaginatedData {
+  data: DataRow[];
+  current_page: number;
+  last_page: number;
+  per_page: number;
+  total: number;
+  path: string;
+}
+interface DataPage {
+  path: string;
+  current_page: number;
+}
+interface DataTableProps {
+  data: PaginatedData;
+  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 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, // Go to page 1 if searching
+      size: selectedoption.value,
+      search: searchdata.value
+    },
+    preserveState: true,
+    preserveScroll: true
+  });
+}, 500);
+
+// watch instantce
+watchEffect(() => {
+  selectedoption.value = props.option.find((x) => Number(x) === Number(props.data.per_page));
+});
+</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/template/src/resources/src/composables/useAuth.ts

@@ -0,0 +1,52 @@
+import { computed, readonly, ref, type 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/template/src/resources/src/composables/useBrowserDetect.ts

@@ -0,0 +1,5 @@
+import { browserDetect, type BrowserDetectResult } from "@/plugins/browserDetect";
+
+export default function useBrowserDetect(): BrowserDetectResult {
+  return browserDetect;
+}

package/template/src/resources/src/composables/useDialog.ts

@@ -0,0 +1,5 @@
+import { dialog } from "@/plugins/dialog";
+
+export function useDialog() {
+  return dialog;
+}

package/template/src/resources/src/composables/useGum.ts

@@ -0,0 +1,3 @@
+import { useGum, useGumForm, useGumRemember } from "@/plugins/gum";
+
+export { useGum, useGumForm, useGumRemember };

package/template/src/resources/src/composables/usePulse.ts

@@ -0,0 +1,5 @@
+import { pulse } from "@/plugins/pulse";
+
+export function usePulse() {
+  return pulse;
+}

package/template/src/resources/src/env.d.ts

@@ -0,0 +1,20 @@
+declare module "*.vue" {
+  import type { DefineComponent } from "vue";
+  const component: DefineComponent<Record<string, unknown>, Record<string, unknown>, unknown>;
+  export default component;
+}
+
+declare module "bootstrap/js/dist/modal.js" {
+  export default class Modal {
+    constructor(element: Element, options?: { backdrop?: boolean | "static"; keyboard?: boolean });
+    show(): void;
+    hide(): void;
+    dispose(): void;
+  }
+}
+
+declare module "vue-select" {
+  import type { DefineComponent } from "vue";
+  const VueSelect: DefineComponent<Record<string, unknown>, Record<string, unknown>, unknown>;
+  export default VueSelect;
+}

package/template/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, "");
+}