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

package/src/components/ui/DefaultPaging.vue

@@ -0,0 +1,395 @@
+<script setup lang="ts">
+import type { WatchStopHandle } from 'vue'
+import type { RouteLocationRaw } from 'vue-router'
+import type { APIPaging } from '../../composables/rest'
+import { getURL, hasFW } from '@fy-/fws-js'
+import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/vue/24/solid'
+import { useServerHead } from '@unhead/vue'
+import { useDebounceFn } from '@vueuse/core'
+import { computed, nextTick, onMounted, ref, shallowRef, watch } from 'vue'
+import { useRoute } from 'vue-router'
+import { useEventBus } from '../../composables/event-bus'
+import { useServerRouter } from '../../stores/serverRouter'
+
+const props = withDefaults(
+  defineProps<{
+    items: APIPaging
+    id: string
+    hash?: string
+    showLegend?: boolean
+  }>(),
+  {
+    showLegend: true,
+    hash: '',
+  },
+)
+
+const route = useRoute()
+const eventBus = useEventBus()
+const history = useServerRouter()
+
+const isMounted = shallowRef(false)
+const pageWatcher = shallowRef<WatchStopHandle>()
+const jumpPageValue = ref('')
+const showJumpInput = ref(false)
+
+const inputWidthClass = computed(() => {
+  const digits = props.items.page_max.toString().length
+  return digits >= 3 ? 'fv-paging__jump--wide' : ''
+})
+
+const hashString = computed(() => props.hash !== '' ? `#${props.hash}` : undefined)
+
+function isNewPage(p: number) {
+  return p >= 1 && p <= props.items.page_max && p !== props.items.page_no
+}
+
+const next = useDebounceFn(() => {
+  const p = props.items.page_no + 1
+  if (!isNewPage(p)) return
+  history.push({ path: history.currentRoute.path, query: { ...route.query, page: p.toString() }, hash: hashString.value })
+}, 300)
+
+const prev = useDebounceFn(() => {
+  const p = props.items.page_no - 1
+  if (!isNewPage(p)) return
+  history.push({ path: history.currentRoute.path, query: { ...route.query, page: p.toString() }, hash: hashString.value })
+}, 300)
+
+const jumpToPage = useDebounceFn(() => {
+  const target = Number.parseInt(jumpPageValue.value)
+  if (Number.isNaN(target) || !isNewPage(target)) { jumpPageValue.value = ''; return }
+  history.push({ path: history.currentRoute.path, query: { ...route.query, page: target.toString() }, hash: hashString.value })
+  jumpPageValue.value = ''
+  showJumpInput.value = false
+}, 300)
+
+function toggleJumpInput() {
+  showJumpInput.value = !showJumpInput.value
+  if (!showJumpInput.value) { jumpPageValue.value = '' }
+  else {
+    nextTick(() => {
+      (document.querySelector('.fv-paging__jump-input') as HTMLInputElement)?.focus()
+    })
+  }
+}
+
+function handleJumpKeydown(e: KeyboardEvent) {
+  if (e.key === 'Enter') jumpToPage()
+  else if (e.key === 'Escape') { showJumpInput.value = false; jumpPageValue.value = '' }
+}
+
+function page(p: number): RouteLocationRaw {
+  if (!isNewPage(p)) return { path: history.currentRoute.path, query: route.query, hash: hashString.value }
+  return { path: history.currentRoute.path, query: { ...route.query, page: p.toString() }, hash: hashString.value }
+}
+
+pageWatcher.value = watch(
+  () => route.query.page,
+  (v, old) => { if (v !== old && isMounted.value) eventBus.emit(`${props.id}GoToPage`, v || 1) },
+)
+
+const paginationLinks = computed(() => {
+  if (!hasFW() || props.items.page_max <= 1) return []
+  const result: any[] = []
+  const url = getURL()
+  if (!url) return result
+  try {
+    const canonical = new URL(url.Canonical)
+    const base = `https://${url.Host}${url.Path}`
+    const query: Record<string, string> = {}
+    canonical.searchParams.forEach((v, k) => { query[k] = v })
+    const p = Number(query.page) || 1
+    const hash = props.hash !== '' ? `#${props.hash}` : ''
+    delete query.page
+    if (p + 1 <= props.items.page_max) {
+      result.push({ rel: 'next', href: `${base}?${new URLSearchParams({ ...query, page: (p + 1).toString() })}${hash}`, key: `paging-next${props.id}` })
+    }
+    if (p - 1 >= 1) {
+      result.push({ rel: 'prev', href: `${base}?${new URLSearchParams({ ...query, page: (p - 1).toString() })}${hash}`, key: `paging-prev${props.id}` })
+    }
+  } catch { /* silently fail */ }
+  return result
+})
+
+useServerHead({ link: paginationLinks.value })
+onMounted(() => { isMounted.value = true })
+</script>
+
+<template>
+  <div
+    v-if="items && items.page_max > 1 && items.page_no"
+    :id="`pagination-${id}`"
+    class="fv-paging"
+  >
+    <nav aria-label="Pagination" :aria-describedby="showLegend ? `pagination-info-${id}` : undefined">
+      <ul class="fv-paging__list" role="list">
+        <!-- Prev -->
+        <li v-if="items.page_no >= 2">
+          <button type="button" class="fv-paging__btn" aria-label="Previous page" @click="prev()">
+            <ChevronLeftIcon class="fv-paging__chevron" aria-hidden="true" />
+          </button>
+        </li>
+
+        <!-- First page -->
+        <li v-if="items.page_no - 1 > 1">
+          <router-link class="fv-paging__btn" :to="page(1)" aria-label="Go to page 1">1</router-link>
+        </li>
+
+        <!-- Ellipsis / jump (before) -->
+        <li v-if="items.page_no - 1 > 2">
+          <div v-if="!showJumpInput" class="fv-paging__ellipsis" title="Jump to page" @click="toggleJumpInput">...</div>
+          <input
+            v-else
+            v-model="jumpPageValue"
+            type="number"
+            :min="1"
+            :max="items.page_max"
+            :class="['fv-paging__jump-input', inputWidthClass]"
+            placeholder="#"
+            @keydown="handleJumpKeydown"
+            @blur="showJumpInput = false; jumpPageValue = ''"
+          >
+        </li>
+
+        <!-- Previous page number -->
+        <li v-if="items.page_no - 1 >= 1">
+          <router-link
+            class="fv-paging__btn"
+            :to="page(items.page_no - 1)"
+            :aria-label="`Go to page ${items.page_no - 1}`"
+          >
+            {{ items.page_no - 1 }}
+          </router-link>
+        </li>
+
+        <!-- Current page -->
+        <li>
+          <div
+            class="fv-paging__btn fv-paging__btn--current"
+            aria-current="page"
+            :aria-label="`Current page, page ${items.page_no}`"
+          >
+            {{ items.page_no }}
+          </div>
+        </li>
+
+        <!-- Next page number -->
+        <li v-if="items.page_no + 1 <= items.page_max">
+          <router-link
+            class="fv-paging__btn"
+            :to="page(items.page_no + 1)"
+            :aria-label="`Go to page ${items.page_no + 1}`"
+          >
+            {{ items.page_no + 1 }}
+          </router-link>
+        </li>
+
+        <!-- Ellipsis / jump (after) -->
+        <li v-if="items.page_no + 1 < items.page_max - 1">
+          <div v-if="!showJumpInput" class="fv-paging__ellipsis" title="Jump to page" @click="toggleJumpInput">...</div>
+          <input
+            v-else
+            v-model="jumpPageValue"
+            type="number"
+            :min="1"
+            :max="items.page_max"
+            :class="['fv-paging__jump-input', inputWidthClass]"
+            placeholder="#"
+            @keydown="handleJumpKeydown"
+            @blur="showJumpInput = false; jumpPageValue = ''"
+          >
+        </li>
+
+        <!-- Last page -->
+        <li v-if="items.page_no + 1 < items.page_max">
+          <router-link
+            class="fv-paging__btn"
+            :to="page(items.page_max)"
+            :aria-label="`Go to page ${items.page_max}`"
+          >
+            {{ items.page_max }}
+          </router-link>
+        </li>
+
+        <!-- Fallback jump for edge case -->
+        <li v-if="items.page_max > 5 && (items.page_no - 1 <= 2 && items.page_no + 1 >= items.page_max - 1)">
+          <div v-if="!showJumpInput" class="fv-paging__ellipsis" title="Jump to page" @click="toggleJumpInput">...</div>
+          <input
+            v-else
+            v-model="jumpPageValue"
+            type="number"
+            :min="1"
+            :max="items.page_max"
+            :class="['fv-paging__jump-input', inputWidthClass]"
+            placeholder="#"
+            @keydown="handleJumpKeydown"
+            @blur="showJumpInput = false; jumpPageValue = ''"
+          >
+        </li>
+
+        <!-- Next -->
+        <li v-if="items.page_no < items.page_max">
+          <button type="button" class="fv-paging__btn" aria-label="Next page" @click="next()">
+            <ChevronRightIcon class="fv-paging__chevron" aria-hidden="true" />
+          </button>
+        </li>
+      </ul>
+    </nav>
+
+    <p
+      v-if="showLegend"
+      :id="`pagination-info-${id}`"
+      class="fv-paging__legend"
+    >
+      {{
+        $t("global_paging", {
+          start: items.results_per_page * (items.page_no - 1) + 1,
+          end: Math.min(items.results_per_page * items.page_no, items.count),
+          total: items.count >= 10000 ? ($t("paging_a_lot_of") || '10,000+') : items.count,
+        }) || `${items.results_per_page * (items.page_no - 1) + 1}–${Math.min(items.results_per_page * items.page_no, items.count)} of ${items.count >= 10000 ? '10,000+' : items.count}`
+      }}
+    </p>
+  </div>
+</template>
+
+<style scoped>
+/* ═══ Pagination — Compact pill style, clean active state ═══ */
+.fv-paging {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.fv-paging__list {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.fv-paging__btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 1.75rem;
+  height: 1.75rem;
+  padding: 0 0.375rem;
+  font-size: 0.75rem;
+  font-weight: 500;
+  border-radius: 0.375rem;
+  border: none;
+  cursor: pointer;
+  text-decoration: none;
+  transition: color 150ms, background-color 150ms;
+
+  color: #525252;
+  background: transparent;
+}
+.fv-paging__btn:hover {
+  background: rgba(0, 0, 0, 0.05);
+  color: var(--color-fv-primary-600, #7c3aed);
+}
+.fv-paging__btn:focus-visible {
+  outline: 2px solid var(--color-fv-primary-400, #a78bfa);
+  outline-offset: -1px;
+}
+
+:is(.dark) .fv-paging__btn {
+  color: #a3a3a3;
+}
+:is(.dark) .fv-paging__btn:hover {
+  background: rgba(255, 255, 255, 0.06);
+  color: #f5f5f5;
+}
+
+/* Current page — primary pill */
+.fv-paging__btn--current {
+  background: var(--color-fv-primary-600, #7c3aed);
+  color: white;
+  cursor: default;
+  font-weight: 600;
+}
+.fv-paging__btn--current:hover {
+  background: var(--color-fv-primary-600, #7c3aed);
+  color: white;
+}
+:is(.dark) .fv-paging__btn--current {
+  background: var(--color-fv-primary-500, #8b5cf6);
+  color: white;
+}
+
+.fv-paging__chevron {
+  width: 0.875rem;
+  height: 0.875rem;
+}
+
+.fv-paging__ellipsis {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.5rem;
+  height: 1.75rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: #a3a3a3;
+  cursor: pointer;
+  transition: color 150ms;
+  letter-spacing: 0.1em;
+}
+.fv-paging__ellipsis:hover {
+  color: var(--color-fv-primary-600, #7c3aed);
+}
+:is(.dark) .fv-paging__ellipsis { color: #525252; }
+:is(.dark) .fv-paging__ellipsis:hover { color: var(--color-fv-primary-400, #a78bfa); }
+
+/* Jump input */
+.fv-paging__jump-input {
+  width: 2rem;
+  height: 1.75rem;
+  padding: 0 0.25rem;
+  font-size: 0.75rem;
+  text-align: center;
+  border-radius: 0.375rem;
+  border: 1px solid #d4d4d8;
+  background: white;
+  color: #171717;
+  outline: none;
+  transition: border-color 150ms;
+  -moz-appearance: textfield;
+}
+.fv-paging__jump-input::-webkit-inner-spin-button,
+.fv-paging__jump-input::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+.fv-paging__jump-input:focus {
+  border-color: var(--color-fv-primary-500, #7c3aed);
+}
+:is(.dark) .fv-paging__jump-input {
+  background: rgba(38, 38, 42, 0.8);
+  border-color: rgba(255, 255, 255, 0.1);
+  color: #f5f5f5;
+}
+.fv-paging__jump--wide { width: 2.75rem; }
+
+/* Legend */
+.fv-paging__legend {
+  margin-top: 0.375rem;
+  font-size: 0.6875rem;
+  color: #737373;
+  text-align: center;
+}
+:is(.dark) .fv-paging__legend { color: #a3a3a3; }
+
+/* Responsive */
+@media (min-width: 768px) {
+  .fv-paging__btn { min-width: 2rem; height: 2rem; font-size: 0.8125rem; }
+  .fv-paging__chevron { width: 1rem; height: 1rem; }
+  .fv-paging__jump-input { width: 2.25rem; height: 2rem; }
+  .fv-paging__jump--wide { width: 3rem; }
+  .fv-paging__legend { font-size: 0.75rem; margin-top: 0.5rem; }
+}
+</style>

package/src/components/ui/DefaultSidebar.vue

@@ -0,0 +1,267 @@
+<script setup lang="ts">
+import type { NavLink } from '../../types'
+import { ArrowLeftIcon, ArrowRightIcon } from '@heroicons/vue/24/solid'
+import { useDebounceFn, useStorage } from '@vueuse/core'
+import { computed, shallowRef } from 'vue'
+import { useRoute } from 'vue-router'
+
+const props = withDefaults(
+  defineProps<{
+    links: NavLink[]
+    id?: string
+    baseUrl?: string
+  }>(),
+  {
+    id: 'main',
+    baseUrl: '/',
+  },
+)
+
+const route = useRoute()
+const storageKey = computed(() => `isOpenSidebar-${props.id}`)
+const activeLinkCache = shallowRef(new Map<string, boolean>())
+
+function isLinkActive(link: NavLink): boolean {
+  if (activeLinkCache.value.has(link.to)) {
+    return activeLinkCache.value.get(link.to)!
+  }
+  let active = false
+  if (link.to !== props.baseUrl) {
+    active = route.path === link.to || route.path.startsWith(link.to)
+  } else {
+    active = route.path === link.to
+  }
+  activeLinkCache.value.set(link.to, active)
+  return active
+}
+
+const isOpen = useStorage(storageKey.value, true)
+const toggleSidebar = useDebounceFn(() => { isOpen.value = !isOpen.value }, 150)
+</script>
+
+<template>
+  <aside :class="['fv-sidebar', { 'fv-sidebar--collapsed': !isOpen }]">
+    <div class="fv-sidebar__toggle">
+      <button
+        class="fv-sidebar__toggle-btn"
+        aria-controls="side-nav"
+        @click="toggleSidebar"
+      >
+        <ArrowLeftIcon v-if="isOpen" class="w-4 h-4" />
+        <ArrowRightIcon v-else class="w-4 h-4" />
+        <span class="sr-only">{{ $t("sidebar_size_control") }}</span>
+      </button>
+    </div>
+
+    <slot name="before" />
+
+    <ul id="side-nav" role="list" class="fv-sidebar__nav">
+      <li v-for="(link, index) of links" :key="`aside_link_${index}`">
+        <RouterLink
+          :to="link.to"
+          :class="['fv-sidebar__link', { 'fv-sidebar__link--active': isLinkActive(link) }]"
+        >
+          <div class="fv-sidebar__tooltip">{{ link.name }}</div>
+          <component :is="link.icon" v-if="link.icon" class="fv-sidebar__icon" />
+          <span class="fv-sidebar__text">{{ link.name }}</span>
+        </RouterLink>
+      </li>
+      <slot name="lis" />
+    </ul>
+
+    <slot name="after" />
+  </aside>
+</template>
+
+<style scoped>
+/* ═══ Sidebar — Glass-inspired, collapsible with tooltip ═══ */
+.fv-sidebar {
+  width: 15rem;
+  transition: width 300ms cubic-bezier(0.4, 0, 0.2, 1);
+  flex-shrink: 0;
+}
+
+.fv-sidebar__toggle {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  padding: 0.75rem 0.75rem 0.5rem;
+}
+
+.fv-sidebar__toggle-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.75rem;
+  height: 1.75rem;
+  border-radius: 0.375rem;
+  border: 1px solid rgba(0, 0, 0, 0.06);
+  background: transparent;
+  color: #737373;
+  cursor: pointer;
+  transition: color 150ms, background-color 150ms, border-color 150ms;
+}
+.fv-sidebar__toggle-btn:hover {
+  background: rgba(0, 0, 0, 0.03);
+  color: #404040;
+  border-color: rgba(0, 0, 0, 0.1);
+}
+:is(.dark) .fv-sidebar__toggle-btn {
+  border-color: rgba(255, 255, 255, 0.06);
+  color: #a3a3a3;
+}
+:is(.dark) .fv-sidebar__toggle-btn:hover {
+  background: rgba(255, 255, 255, 0.06);
+  color: #d4d4d4;
+}
+
+.fv-sidebar__nav {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.fv-sidebar__link {
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: 0.625rem 0.75rem;
+  font-size: 0.8125rem;
+  font-weight: 500;
+  color: #525252;
+  text-decoration: none;
+  border-left: 3px solid transparent;
+  transition: color 200ms, background-color 200ms, border-color 200ms;
+}
+.fv-sidebar__link:hover {
+  background: rgba(0, 0, 0, 0.03);
+  color: var(--color-fv-primary-600, #7c3aed);
+}
+.fv-sidebar__link:focus-visible {
+  background: rgba(0, 0, 0, 0.03);
+  outline: none;
+  box-shadow: inset 2px 0 0 var(--color-fv-primary-500, #7c3aed);
+}
+
+:is(.dark) .fv-sidebar__link {
+  color: #a3a3a3;
+}
+:is(.dark) .fv-sidebar__link:hover {
+  background: rgba(255, 255, 255, 0.04);
+  color: var(--color-fv-primary-400, #a78bfa);
+}
+
+/* Active state — left accent stripe */
+.fv-sidebar__link--active {
+  border-left-color: var(--color-fv-primary-500, #7c3aed);
+  background: rgba(0, 0, 0, 0.03);
+  color: #171717;
+}
+:is(.dark) .fv-sidebar__link--active {
+  background: rgba(255, 255, 255, 0.06);
+  color: #f5f5f5;
+}
+
+.fv-sidebar__icon {
+  width: 1.25rem;
+  height: 1.25rem;
+  margin-right: 0.5rem;
+  color: #a3a3a3;
+  flex-shrink: 0;
+}
+:is(.dark) .fv-sidebar__icon { color: #525252; }
+.fv-sidebar__link--active .fv-sidebar__icon {
+  color: var(--color-fv-primary-500, #7c3aed);
+}
+:is(.dark) .fv-sidebar__link--active .fv-sidebar__icon {
+  color: var(--color-fv-primary-400, #a78bfa);
+}
+
+.fv-sidebar__text {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Tooltip — shown on collapsed sidebar hover */
+.fv-sidebar__tooltip {
+  visibility: hidden;
+  opacity: 0;
+  position: absolute;
+  left: 3rem;
+  top: 50%;
+  transform: translateY(-50%);
+  padding: 0.375rem 0.625rem;
+  font-size: 0.75rem;
+  font-weight: 500;
+  white-space: nowrap;
+  border-radius: 0.375rem;
+  z-index: 50;
+  pointer-events: none;
+  transition: opacity 150ms, visibility 150ms;
+
+  background: #171717;
+  color: white;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+}
+:is(.dark) .fv-sidebar__tooltip {
+  background: #2a2a2e;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+}
+
+/* ═══ Collapsed state ═══ */
+.fv-sidebar--collapsed {
+  width: 3rem;
+}
+.fv-sidebar--collapsed .fv-sidebar__link {
+  flex-direction: column;
+  padding: 0.5rem 0.25rem;
+  font-size: 0.625rem;
+  border-left: none;
+}
+.fv-sidebar--collapsed .fv-sidebar__icon {
+  margin-right: 0;
+  margin-bottom: 0.125rem;
+}
+.fv-sidebar--collapsed .fv-sidebar__text {
+  display: none;
+}
+.fv-sidebar--collapsed .fv-sidebar__link:hover .fv-sidebar__tooltip,
+.fv-sidebar--collapsed .fv-sidebar__link:focus .fv-sidebar__tooltip {
+  visibility: visible;
+  opacity: 1;
+}
+
+/* Mobile — always collapsed */
+@media (max-width: 640px) {
+  .fv-sidebar { width: 3rem; }
+  .fv-sidebar__toggle { display: none; }
+  .fv-sidebar__link {
+    flex-direction: column;
+    padding: 0.5rem 0.25rem;
+    font-size: 0.625rem;
+    border-left: none;
+  }
+  .fv-sidebar__icon { margin-right: 0; margin-bottom: 0.125rem; }
+  .fv-sidebar__text { display: none; }
+  .fv-sidebar__link:hover .fv-sidebar__tooltip,
+  .fv-sidebar__link:focus .fv-sidebar__tooltip {
+    visibility: visible;
+    opacity: 1;
+  }
+}
+
+/* sr-only utility */
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+</style>