GS-2156

alex

2025-06-20 5ad82c502af6db6c3697f0c54ed233f74a43eedb

 vue/src/components/Pagination.vue

@@ -1,69 +1,145 @@
<script setup>

import * as itemOffset from '../lib/itemOffset.js'
import {onKeyStroke} from "@vueuse/core"
import IconKeyboard from "@/components/icons/IconKeyboard.vue"
import KeyboardToggle from "@/components/KeyboardToggle.vue"
import {ref} from "vue"

const props = defineProps({
   total: Number,
   offset: Number,
   limit: Number,
   current: Number,
})

const emit = defineEmits(["go"])

function goStart () {
   const {offset, limit, total} = props
   console.log("goStart", {offset, limit, total})
   emit("go", 0)
   const offset2 = itemOffset.goStart(props.offset, props.limit, props.total)
   emit("go", offset2)
}

function goEnd () {
   const {offset, limit, total} = props
   console.log("goEnd ", {offset, limit, total})
   emit("go", Math.floor(total / limit) * limit)
   const offset2 = itemOffset.goEnd(props.offset, props.limit, props.total)
   emit("go", offset2)
}

function goPrev () {
   const {offset, limit, total} = props
   console.log("goPrev", {offset, limit, total})
   emit("go", Math.max(0, offset - limit))
function goPrev (multiplier = 1) {
   const offset2 = itemOffset.goPrev(props.offset, props.limit * multiplier, props.total)
   emit("go", offset2)
}

function goNext () {
   const {offset, limit, total} = props
   console.log("goNext", {offset, limit, total})
   console.log(total%limit)
   const maxNext = Math.floor(total/limit)*limit
   const nextNext = offset+limit
   let noffset = Math.min(maxNext, nextNext)
   // console.log({maxNext,nextNext,noffset})
   emit("go", noffset)
function goNext (multiplier = 1) {
   const offset2 = itemOffset.goNext(props.offset, props.limit * multiplier, props.total)
   emit("go", offset2)
}

/////// KEYBOARD ////////////////////////////////////////////////////////////////

onKeyStroke(["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown"], (e) => {
   let multiplier = 1
   switch (e.key) {
      case "ArrowLeft":
         multiplier = e.shiftKey ? 10 : 1
         goPrev(multiplier)
         break
      case "ArrowRight":
         multiplier = e.shiftKey ? 10 : 1
         goNext(multiplier)
         break
      case "ArrowUp":
         goStart()
         break
      case "ArrowDown":
         goEnd()
         break
   }
})

/////// keyboard ////////////////////////////////////////////////////////////////

const keyboardVisible = ref(false)
function toggleKeyboard (value) {
   console.log("toggleKeyboard", value)
   keyboardVisible.value = value
}

</script>

<template>

   <div class="pagination">
      <input type="button" @click="goStart()" class="start" value="«" >
      <input type="button" @click="goPrev()" class="prev" value="‹" >
      <span class="current">
         {{ offset }} - {{ offset + limit }}
          / {{ total }}
      </span>
      <input type="button" @click="goNext()" class="next" value="›" >
      <input type="button" @click="goEnd()" class="end" value="»" >
      <div class="pagination-buttons">
<!--         <pre>&#45;&#45;{{current}}&#45;&#45;</pre>-->
         <input type="button" @click="goStart()" class="start" value="«">
         <input type="button" @click="goPrev()" class="prev" value="‹">
         <span class="current">{{ offset }} - {{ offset + current }} / {{ total }}</span>
         <input type="button" @click="goNext()" class="next" value="›">
         <input type="button" @click="goEnd()" class="end" value="»">
         <KeyboardToggle :initial="false" @toggle="toggleKeyboard" style="color: #666" />
      </div>
      <small class="pagination-info" v-show="keyboardVisible">
         <em>Keyboard control:</em>
         <span class="spacer" />
         <kbd class="bigger">&ltri;</kbd> previous page
         <span class="spacer" />
         <kbd class="bigger">&rtri;</kbd> next page
         <span class="spacer" />
         <kbd>SHIFT</kbd> + <kbd class="bigger">&ltri;</kbd> {{limit * 10}} backward
         <span class="spacer" />
         <kbd>SHIFT</kbd> + <kbd class="bigger">&rtri;</kbd> {{limit * 10}} forward
         <span class="spacer" />
         <kbd class="bigger">&utri;</kbd> start
         <span class="spacer" />
         <kbd class="bigger">&dtri;</kbd> end
      </small>
   </div>

</template>

<style scoped lang="stylus">

.pagination-info
   margin-top .5em;
   display flex;
   gap .5em
   padding .33em .66em;
   align-items center;
   background-color #f1f1f1
   .spacer
      width 2em;
      height 1px
      display inline-block;
      //background-color black

kbd
   border 1px solid #777
   border-radius 4px
   font-size 120%;
   line-height 50%
   min-width 1rem;
   height 1rem
   padding 3px;
   display inline-flex;
   align-items center;
   justify-content center;

kbd.bigger
   font-size 220%
   line-height 0


.pagination
   display flex;
   flex-direction column
   align-items center;
.pagination-buttons
   font-size 1.33rem
   display flex;
   gap 1em
   align-items center;
   justify-content center;
   margin -1em 0 1em 0;

   & > div
      cursor: pointer
@@ -75,7 +151,8 @@

.start, .end, .prev, .next
   font-size 130%
   //width 1em

//width 1em
.current
   width 12em;
   text-align center;
@@ -84,5 +161,22 @@
   //all: unset
   border none
   width 1em
input[type=button]
   color rgb(0,0,238)
   cursor pointer;
   &:hover
      background-color #ddd;


button
   display inline-flex;
   align-items center;
   justify-content center;
   border none
   background-color transparent;
   cursor pointer
   &:hover
      background-color #eee;


</style>