Merge pull request #272 from skryukov/infinite-scroll

Implement infinite scroll

Author: bknoles

.github/workflows/push.yml

@@ -34,12 +34,16 @@ jobs:
       fail-fast: false
       matrix:
         ruby: ['3.0', '3.1', '3.2', '3.3']
-        rails: ['6.1', '7.0', '7.1', '7.2', '8.0']
+        rails: ['6.1', '7.0', '7.1', '7.2', '8.0', '8.1']
         exclude:
           - ruby: '3.0'
             rails: '8.0'
           - ruby: '3.1'
             rails: '8.0'
+          - ruby: '3.0'
+            rails: '8.1'
+          - ruby: '3.1'
+            rails: '8.1'
           - ruby: '3.0'
             rails: '7.2'
           - ruby: '3.1'
@@ -63,9 +67,7 @@ jobs:
         uses: ruby/setup-ruby@v1
         with:
           ruby-version: ${{ matrix.ruby }}
-          # Use the latest version of RubyGems with Ruby 3.0 to avoid:
-          # https://bugs.ruby-lang.org/issues/19371
-          rubygems: ${{ startsWith(matrix.ruby-version, '3.0') && 'latest' || 'default' }}
+          rubygems: latest
           bundler-cache: true
         env:
           RAILS_VERSION:  ${{ matrix.rails }}

Gemfile

@@ -5,7 +5,7 @@ source 'https://rubygems.org'
 # Specify your gem's dependencies in inertia_rails.gemspec
 gemspec
 
-version = ENV['RAILS_VERSION'] || '8.0'
+version = ENV.fetch('RAILS_VERSION', '8.1')
 gem 'rails', "~> #{version}.0"
 
 gem 'bundler', '~> 2.0'
@@ -17,3 +17,6 @@ gem 'responders'
 gem 'rspec-rails', '~> 6.0'
 gem 'rubocop', '~> 1.21'
 gem 'sqlite3'
+
+gem 'kaminari'
+gem 'pagy'

docs/.vitepress/config.mts

@@ -127,6 +127,7 @@ export default defineConfig({
             { text: 'Prefetching', link: '/guide/prefetching' },
             { text: 'Load when visible', link: '/guide/load-when-visible' },
             { text: 'Merging props', link: '/guide/merging-props' },
+            { text: 'Infinite scroll', link: '/guide/infinite-scroll' },
             { text: 'Remembering state', link: '/guide/remembering-state' },
           ],
         },

docs/.vitepress/theme/components/Opt.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { useTabsSelectedState } from '../composables/useTabsSelectedState'
+
+const props = defineProps<{
+  v: string
+}>()
+
+// Use the shared tabs state system
+const acceptValues = ref(['Vue', 'React', 'Svelte 4', 'Svelte 5'])
+const sharedStateKey = ref('frameworks')
+
+const { selected } = useTabsSelectedState(acceptValues, sharedStateKey)
+
+const shouldShow = computed(() => {
+  if (!selected.value) return false
+
+  // Handle multiple values separated by pipe (|)
+  const values = props.v.split('|').map((v) => v.trim())
+  return values.includes(selected.value)
+})
+</script>
+
+<template>
+  <span v-if="shouldShow" class="opt-text">
+    <slot></slot>
+  </span>
+</template>
+
+<style scoped>
+.opt-text {
+  display: inline;
+}
+</style>

docs/.vitepress/theme/components/React.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import Opt from './Opt.vue'
+</script>
+
+<template>
+  <Opt v="React">
+    <slot></slot>
+  </Opt>
+</template>

docs/.vitepress/theme/components/Svelte.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import Opt from './Opt.vue'
+</script>
+
+<template>
+  <Opt v="Svelte 4|Svelte 5">
+    <slot></slot>
+  </Opt>
+</template>

docs/.vitepress/theme/components/Svelte4.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import Opt from './Opt.vue'
+</script>
+
+<template>
+  <Opt v="Svelte 4">
+    <slot></slot>
+  </Opt>
+</template>

docs/.vitepress/theme/components/Svelte5.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import Opt from './Opt.vue'
+</script>
+
+<template>
+  <Opt v="Svelte 5">
+    <slot></slot>
+  </Opt>
+</template>

docs/.vitepress/theme/components/Vue.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import Opt from './Opt.vue'
+</script>
+
+<template>
+  <Opt v="Vue">
+    <slot></slot>
+  </Opt>
+</template>

docs/.vitepress/theme/components/index.ts

@@ -1,3 +1,9 @@
 import AvailableSince from './AvailableSince.vue'
+import Opt from './Opt.vue'
+import React from './React.vue'
+import Svelte from './Svelte.vue'
+import Svelte4 from './Svelte4.vue'
+import Svelte5 from './Svelte5.vue'
+import Vue from './Vue.vue'
 
-export { AvailableSince }
+export { AvailableSince, Opt, React, Svelte, Svelte4, Svelte5, Vue }