@fy-/fws-vue-core 3.0.4 → 3.0.6

package/src/components/fws/DataTable.vue

@@ -0,0 +1,659 @@
+<script setup lang="ts">
+import {
+  ArrowDownIcon,
+  ArrowDownTrayIcon,
+  ArrowsUpDownIcon,
+  ArrowUpIcon,
+} from '@heroicons/vue/24/solid'
+import { useStorage } from '@vueuse/core'
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
+import { useRoute } from 'vue-router'
+import { useEventBus } from '../../composables/event-bus'
+import { useRest } from '../../composables/rest'
+import DefaultInput from '../ui/DefaultInput.vue'
+import DefaultPaging from '../ui/DefaultPaging.vue'
+
+interface DefaultStringObject {
+  [key: string]: string
+}
+interface DefaultAnyObject {
+  [key: string]: any
+}
+interface DefaultBoolObject {
+  [key: string]: boolean
+}
+interface SortingField {
+  field: string
+  direction: string
+}
+
+const eventBus = useEventBus()
+const currentPage = ref<number>(1)
+const route = useRoute()
+const data = ref<any[]>([])
+const paging = ref<any>(undefined)
+const isLoading = ref<boolean>(false)
+const perPageOptions = [
+  ['10', '10'],
+  ['25', '25'],
+  ['50', '50'],
+  ['100', '100'],
+]
+
+const props = withDefaults(
+  defineProps<{
+    id: string
+    headers: DefaultStringObject
+    sortables?: DefaultBoolObject
+    showHeaders?: boolean
+    exportableColumns?: string[]
+    csvFormatColumns?: Record<string, (value: any) => string>
+    defaultPerPage?: number
+    filtersData: DefaultAnyObject
+    apiPath: string
+    defaultSort?: SortingField
+    restFunction?: Function | null
+  }>(),
+  {
+    showHeaders: true,
+    sortables: () => ({}),
+    exportableColumns: () => [],
+    csvFormatColumns: () => ({}),
+    defaultPerPage: 25,
+    defaultSort: () => ({ field: 'Created', direction: 'DESC' }),
+    restFunction: null,
+  },
+)
+
+const rest = useRest()
+const restFunction = props.restFunction ?? rest
+const perPage = useStorage<number>(`${props.id}PerPage`, props.defaultPerPage)
+const currentSort = useStorage<SortingField>(
+  `${props.id}CurrentSort`,
+  props.defaultSort,
+)
+
+const hasData = computed(() => data.value && data.value.length > 0)
+const hasExportableColumns = computed(() => props.exportableColumns.length > 0)
+const hasPaging = computed(() => paging.value && paging.value.page_max > 1 && paging.value.page_no)
+
+const currentRequest = ref<AbortController | null>(null)
+const requestCounter = ref<number>(0)
+
+async function getData(page: number = 1) {
+  const thisRequestNumber = requestCounter.value + 1
+  requestCounter.value = thisRequestNumber
+
+  if (currentRequest.value) {
+    currentRequest.value.abort()
+    currentRequest.value = null
+  }
+
+  currentRequest.value = new AbortController()
+  const signal = currentRequest.value.signal
+
+  isLoading.value = true
+  eventBus.emit('main-loading', true)
+
+  if (route.query.page) page = Number.parseInt(route.query.page.toString())
+  const sort: any = {}
+  sort[currentSort.value.field] = currentSort.value.direction
+  const requestParams = {
+    ...props.filtersData,
+    sort,
+    results_per_page: perPage.value,
+    page_no: page,
+  }
+
+  try {
+    const localAbortController = currentRequest.value
+    const r = await restFunction(props.apiPath, 'GET', requestParams, {
+      getBody: true,
+      signal,
+    })
+
+    if (thisRequestNumber === requestCounter.value && localAbortController === currentRequest.value) {
+      currentPage.value = page
+      data.value = []
+      paging.value = undefined
+
+      if (r && r.result === 'success') {
+        data.value = r.data
+        paging.value = r.paging
+        eventBus.emit(`${props.id}NewData`, data.value)
+      }
+    }
+  }
+  catch (error) {
+    if (!(error instanceof DOMException && error.name === 'AbortError')
+      && thisRequestNumber === requestCounter.value) {
+      console.error('Error fetching data:', error)
+    }
+  }
+  finally {
+    if (thisRequestNumber === requestCounter.value) {
+      if (currentRequest.value && currentRequest.value.signal === signal) {
+        currentRequest.value = null
+      }
+      isLoading.value = false
+      eventBus.emit('main-loading', false)
+    }
+  }
+}
+
+function sortData(key: string) {
+  if (!props.sortables[key]) return
+  const newSort: SortingField = {
+    field: currentSort.value.field,
+    direction: currentSort.value.direction,
+  }
+  if (key === newSort.field) {
+    newSort.direction = newSort.direction === 'desc' ? 'asc' : 'desc'
+  }
+  else {
+    newSort.direction = 'desc'
+    newSort.field = key
+  }
+  currentSort.value = { ...newSort }
+}
+
+function exportToCsv() {
+  if (!hasData.value || !hasExportableColumns.value) return
+
+  const header = props.exportableColumns
+    .map(column => props.headers[column] ?? column)
+    .join(',')
+  const rows = data.value
+    .map(row =>
+      props.exportableColumns
+        .map((column) => {
+          let cell = row[column]
+          if (props.csvFormatColumns[column]) {
+            cell = props.csvFormatColumns[column](row)
+          }
+          return `"${cell}"`
+        })
+        .join(','),
+    )
+    .join('\n')
+
+  const blob = new Blob([`${header}\n${rows}`], { type: 'text/csv;charset=utf-8;' })
+  const link = document.createElement('a')
+  const url = URL.createObjectURL(blob)
+  link.setAttribute('href', url)
+  link.setAttribute(
+    'download',
+    `${props.id}_${new Date().toISOString().slice(0, 10)}_Page-${currentPage.value}_${perPage.value}-per-page_Order-by-${currentSort.value.field}-${currentSort.value.direction}.csv`,
+  )
+  link.style.visibility = 'hidden'
+  document.body.appendChild(link)
+  link.click()
+  document.body.removeChild(link)
+}
+
+watch(perPage, () => getData())
+watch(currentSort, () => getData())
+watch(() => props.filtersData, () => getData())
+watch(() => props.apiPath, () => getData())
+
+await getData()
+
+onMounted(() => {
+  eventBus.on(`${props.id}PagesGoToPage`, getData)
+  eventBus.on(`${props.id}Reload`, getData)
+  eventBus.on(`${props.id}Refresh`, getData)
+})
+onUnmounted(() => {
+  eventBus.off(`${props.id}PagesGoToPage`, getData)
+  eventBus.off(`${props.id}Reload`, getData)
+  eventBus.off(`${props.id}Refresh`, getData)
+})
+</script>
+
+<template>
+  <div class="fws-table">
+    <!-- Controls bar -->
+    <div v-if="hasExportableColumns || hasPaging" class="fws-table__controls">
+      <div v-if="hasExportableColumns && hasData" class="fws-table__export-wrap">
+        <button class="fws-table__export-btn" @click="exportToCsv">
+          <ArrowDownTrayIcon class="fws-table__icon-sm" aria-hidden="true" />
+          <span class="fws-table__export-label">{{ $t("global_table_export") || 'Export' }}</span>
+        </button>
+      </div>
+      <div v-if="hasPaging" class="fws-table__paging-top">
+        <DefaultPaging :id="`${props.id}Pages`" :items="paging" />
+        <DefaultInput
+          id="perPageSelectTop"
+          v-model="perPage"
+          :options="perPageOptions"
+          :show-label="false"
+          type="select"
+          class="fws-table__per-page"
+        />
+      </div>
+    </div>
+
+    <!-- Loading — skeleton rows instead of spinner -->
+    <div v-if="isLoading" class="fws-table__loading">
+      <div v-for="i in 5" :key="i" class="fws-table__skeleton-row">
+        <div v-for="j in Object.keys(headers).length" :key="j" class="fws-table__skeleton-cell">
+          <div class="fws-table__skeleton-bar" :style="{ width: `${40 + (j * 17) % 50}%` }" />
+        </div>
+      </div>
+    </div>
+
+    <!-- Table -->
+    <div v-else-if="hasData" class="fws-table__scroll">
+      <table class="fws-table__table">
+        <thead v-if="showHeaders" class="fws-table__thead">
+          <tr>
+            <th
+              v-for="(header, key) in headers"
+              :key="key"
+              scope="col"
+              class="fws-table__th"
+              :class="{ 'fws-table__th--sortable': sortables[key] }"
+              @click="sortables[key] ? sortData(key.toString()) : undefined"
+            >
+              <div class="fws-table__th-inner">
+                {{ header }}
+                <span v-if="sortables[key]" class="fws-table__sort-icon">
+                  <ArrowsUpDownIcon v-if="currentSort.field !== key" class="fws-table__icon-sm fws-table__sort-neutral" aria-hidden="true" />
+                  <ArrowUpIcon v-else-if="currentSort.direction === 'asc'" class="fws-table__icon-sm fws-table__sort-active" aria-hidden="true" />
+                  <ArrowDownIcon v-else class="fws-table__icon-sm fws-table__sort-active" aria-hidden="true" />
+                </span>
+              </div>
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr
+            v-for="(row, index) in data"
+            :key="index"
+            class="fws-table__tr"
+          >
+            <td
+              v-for="(header, key) in headers"
+              :key="key"
+              class="fws-table__td"
+            >
+              <slot :name="key" :value="row">
+                <template v-if="row[key]">{{ row[key] }}</template>
+                <span v-else class="fws-table__empty-cell">{{ $t("global_table_empty_cell") || '—' }}</span>
+              </slot>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <!-- Empty state -->
+    <div v-else class="fws-table__empty">
+      <svg class="fws-table__empty-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 6h16M4 10h16M4 14h16M4 18h16" />
+      </svg>
+      <p class="fws-table__empty-title">{{ $t("no_data_found") || 'No data found' }}</p>
+      <p class="fws-table__empty-desc">{{ $t("try_another_search") || 'Try adjusting your filters.' }}</p>
+    </div>
+
+    <!-- Pagination bottom -->
+    <div v-if="hasPaging" class="fws-table__paging-bottom">
+      <DefaultPaging :id="`${props.id}Pages`" :items="paging" />
+      <DefaultInput
+        id="perPageSelectBottom"
+        v-model="perPage"
+        :options="perPageOptions"
+        :show-label="false"
+        type="select"
+        class="fws-table__per-page"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+/* Container — Vercel shadow-as-border + Stripe blue-tinted elevation */
+.fws-table {
+  border-radius: 10px;
+  overflow: hidden;
+  background: #fff;
+  box-shadow:
+    0 0 0 1px rgba(0, 0, 0, 0.06),
+    rgba(50, 50, 93, 0.08) 0 4px 12px,
+    rgba(0, 0, 0, 0.04) 0 1px 3px;
+}
+
+.dark .fws-table {
+  background: var(--fv-neutral-900, #0a0a0a);
+  box-shadow:
+    0 0 0 1px rgba(255, 255, 255, 0.06),
+    rgba(0, 0, 0, 0.4) 0 4px 12px;
+}
+
+/* Controls bar */
+.fws-table__controls {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 12px 16px;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+}
+
+.dark .fws-table__controls {
+  border-bottom-color: rgba(255, 255, 255, 0.06);
+}
+
+.fws-table__export-wrap {
+  display: flex;
+  align-items: center;
+}
+
+/* Export button — Stripe ghost pill */
+.fws-table__export-btn {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 14px;
+  border: none;
+  border-radius: 9999px;
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--fv-primary-600, #7c3aed);
+  background: rgba(124, 58, 237, 0.06);
+  cursor: pointer;
+  transition: background 0.15s ease, color 0.15s ease;
+}
+
+.fws-table__export-btn:hover {
+  background: rgba(124, 58, 237, 0.12);
+}
+
+.fws-table__export-btn:active {
+  transform: scale(0.97);
+}
+
+.fws-table__export-btn:focus-visible {
+  outline: 2px solid var(--fv-primary-500, #7c3aed);
+  outline-offset: 2px;
+}
+
+.dark .fws-table__export-btn {
+  color: var(--fv-primary-400, #a78bfa);
+  background: rgba(167, 139, 250, 0.08);
+}
+
+.dark .fws-table__export-btn:hover {
+  background: rgba(167, 139, 250, 0.15);
+}
+
+.fws-table__export-label {
+  display: none;
+}
+
+@media (min-width: 640px) {
+  .fws-table__export-label {
+    display: inline;
+  }
+}
+
+.fws-table__paging-top,
+.fws-table__paging-bottom {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.fws-table__paging-bottom {
+  padding: 10px 16px;
+  border-top: 1px solid rgba(0, 0, 0, 0.06);
+}
+
+.dark .fws-table__paging-bottom {
+  border-top-color: rgba(255, 255, 255, 0.06);
+}
+
+.fws-table__per-page {
+  width: 80px;
+}
+
+.fws-table__icon-sm {
+  width: 16px;
+  height: 16px;
+}
+
+/* Skeleton loading — Linear pattern: shimmer bars */
+.fws-table__loading {
+  padding: 0;
+}
+
+.fws-table__skeleton-row {
+  display: flex;
+  gap: 0;
+  padding: 0;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
+}
+
+.dark .fws-table__skeleton-row {
+  border-bottom-color: rgba(255, 255, 255, 0.04);
+}
+
+.fws-table__skeleton-cell {
+  flex: 1;
+  padding: 14px 20px;
+}
+
+.fws-table__skeleton-bar {
+  height: 12px;
+  border-radius: 4px;
+  background: linear-gradient(90deg, rgba(0, 0, 0, 0.04) 25%, rgba(0, 0, 0, 0.08) 50%, rgba(0, 0, 0, 0.04) 75%);
+  background-size: 200% 100%;
+  animation: fws-shimmer 1.5s ease infinite;
+}
+
+.dark .fws-table__skeleton-bar {
+  background: linear-gradient(90deg, rgba(255, 255, 255, 0.03) 25%, rgba(255, 255, 255, 0.06) 50%, rgba(255, 255, 255, 0.03) 75%);
+  background-size: 200% 100%;
+}
+
+@keyframes fws-shimmer {
+  0% { background-position: 200% 0; }
+  100% { background-position: -200% 0; }
+}
+
+/* Table scroll */
+.fws-table__scroll {
+  overflow-x: auto;
+}
+
+/* Table — Stripe tabular numerals */
+.fws-table__table {
+  width: 100%;
+  font-size: 14px;
+  text-align: left;
+  border-collapse: collapse;
+  font-variant-numeric: tabular-nums;
+  font-feature-settings: "tnum";
+}
+
+/* Header — Linear style: sticky, minimal, weight distinction */
+.fws-table__thead {
+  font-size: 12px;
+  letter-spacing: 0.02em;
+  color: var(--fv-neutral-500, #737373);
+  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  background: #fff;
+}
+
+.dark .fws-table__thead {
+  color: var(--fv-neutral-400, #a3a3a3);
+  background: var(--fv-neutral-900, #0a0a0a);
+  border-bottom-color: rgba(255, 255, 255, 0.08);
+}
+
+.fws-table__th {
+  padding: 8px 20px;
+  white-space: nowrap;
+  font-weight: 500;
+  text-transform: none;
+}
+
+.fws-table__th--sortable {
+  cursor: pointer;
+  user-select: none;
+  transition: color 0.15s ease;
+}
+
+.fws-table__th--sortable:hover {
+  color: var(--fv-neutral-800, #1e1e1e);
+}
+
+.dark .fws-table__th--sortable:hover {
+  color: var(--fv-neutral-200, #e5e5e5);
+}
+
+.fws-table__th-inner {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.fws-table__sort-icon {
+  display: inline-flex;
+}
+
+.fws-table__sort-neutral {
+  color: var(--fv-neutral-400, #a3a3a3);
+  opacity: 0.5;
+}
+
+.fws-table__th--sortable:hover .fws-table__sort-neutral {
+  opacity: 1;
+}
+
+.dark .fws-table__sort-neutral {
+  color: var(--fv-neutral-500, #737373);
+}
+
+.fws-table__sort-active {
+  color: var(--fv-primary-600, #7c3aed);
+}
+
+.dark .fws-table__sort-active {
+  color: var(--fv-primary-400, #a78bfa);
+}
+
+/* Rows — Linear: semi-transparent borders, opacity-step hover, entrance animation */
+.fws-table__tr {
+  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
+  transition: background 0.1s ease;
+  animation: fws-row-in 0.15s ease-out;
+}
+
+@keyframes fws-row-in {
+  from { opacity: 0.6; }
+  to { opacity: 1; }
+}
+
+.fws-table__tr:last-child {
+  border-bottom: none;
+}
+
+.fws-table__tr:hover {
+  background: rgba(0, 0, 0, 0.02);
+}
+
+.dark .fws-table__tr {
+  border-bottom-color: rgba(255, 255, 255, 0.04);
+}
+
+.dark .fws-table__tr:hover {
+  background: rgba(255, 255, 255, 0.03);
+}
+
+.fws-table__td {
+  padding: 10px 20px;
+  vertical-align: middle;
+  line-height: 1.5;
+}
+
+.fws-table__empty-cell {
+  color: var(--fv-neutral-400, #a3a3a3);
+  font-style: italic;
+  font-size: 13px;
+}
+
+.dark .fws-table__empty-cell {
+  color: var(--fv-neutral-600, #525252);
+}
+
+/* Empty state — Supabase style: muted, clean */
+.fws-table__empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 56px 16px;
+  text-align: center;
+}
+
+.fws-table__empty-icon {
+  width: 40px;
+  height: 40px;
+  margin-bottom: 16px;
+  color: var(--fv-neutral-300, #d4d4d4);
+  opacity: 0.6;
+}
+
+.dark .fws-table__empty-icon {
+  color: var(--fv-neutral-600, #525252);
+}
+
+.fws-table__empty-title {
+  font-size: 15px;
+  font-weight: 500;
+  color: var(--fv-neutral-600, #525252);
+  margin: 0 0 4px;
+}
+
+.dark .fws-table__empty-title {
+  color: var(--fv-neutral-400, #a3a3a3);
+}
+
+.fws-table__empty-desc {
+  font-size: 13px;
+  color: var(--fv-neutral-400, #a3a3a3);
+  margin: 0;
+  max-width: 260px;
+}
+
+.dark .fws-table__empty-desc {
+  color: var(--fv-neutral-500, #737373);
+}
+
+/* Mobile */
+@media (max-width: 640px) {
+  .fws-table__controls {
+    padding: 10px 12px;
+  }
+
+  .fws-table__th,
+  .fws-table__td {
+    padding: 8px 12px;
+  }
+
+  .fws-table__paging-bottom {
+    padding: 10px 12px;
+  }
+
+  .fws-table__skeleton-cell {
+    padding: 14px 12px;
+  }
+}
+</style>