wip: refactor(client): migrate paging components to composition api
This commit is contained in:
		
							parent
							
								
									861d028d09
								
							
						
					
					
						commit
						7271fbb092
					
				
					 2 changed files with 25 additions and 59 deletions
				
			
		| 
						 | 
				
			
			@ -2,43 +2,26 @@
 | 
			
		|||
<XColumn :column="column" :is-stacked="isStacked">
 | 
			
		||||
	<template #header><i class="fas fa-envelope" style="margin-right: 8px;"></i>{{ column.name }}</template>
 | 
			
		||||
 | 
			
		||||
	<XNotes :pagination="pagination" @before="before()" @after="after()"/>
 | 
			
		||||
	<XNotes :pagination="pagination"/>
 | 
			
		||||
</XColumn>
 | 
			
		||||
</template>
 | 
			
		||||
 | 
			
		||||
<script lang="ts">
 | 
			
		||||
import { computed, defineComponent } from 'vue';
 | 
			
		||||
<script lang="ts" setup>
 | 
			
		||||
import { computed } from 'vue';
 | 
			
		||||
import XColumn from './column.vue';
 | 
			
		||||
import XNotes from '@/components/notes.vue';
 | 
			
		||||
import * as os from '@/os';
 | 
			
		||||
 | 
			
		||||
export default defineComponent({
 | 
			
		||||
	components: {
 | 
			
		||||
		XColumn,
 | 
			
		||||
		XNotes
 | 
			
		||||
	},
 | 
			
		||||
const props = defineProps<{
 | 
			
		||||
	column: Record<string, unknown>; // TODO
 | 
			
		||||
	isStacked: boolean;
 | 
			
		||||
}>();
 | 
			
		||||
 | 
			
		||||
	props: {
 | 
			
		||||
		column: {
 | 
			
		||||
			type: Object,
 | 
			
		||||
			required: true
 | 
			
		||||
		},
 | 
			
		||||
		isStacked: {
 | 
			
		||||
			type: Boolean,
 | 
			
		||||
			required: true
 | 
			
		||||
		}
 | 
			
		||||
	},
 | 
			
		||||
 | 
			
		||||
	data() {
 | 
			
		||||
		return {
 | 
			
		||||
			pagination: {
 | 
			
		||||
				endpoint: 'notes/mentions' as const,
 | 
			
		||||
				limit: 10,
 | 
			
		||||
				params: computed(() => ({
 | 
			
		||||
					visibility: 'specified'
 | 
			
		||||
				})),
 | 
			
		||||
			},
 | 
			
		||||
		}
 | 
			
		||||
	},
 | 
			
		||||
});
 | 
			
		||||
const pagination = {
 | 
			
		||||
	point: 'notes/mentions' as const,
 | 
			
		||||
	limit: 10,
 | 
			
		||||
	params: computed(() => ({
 | 
			
		||||
		visibility: 'specified' as const,
 | 
			
		||||
	})),
 | 
			
		||||
};
 | 
			
		||||
</script>
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -2,40 +2,23 @@
 | 
			
		|||
<XColumn :column="column" :is-stacked="isStacked">
 | 
			
		||||
	<template #header><i class="fas fa-at" style="margin-right: 8px;"></i>{{ column.name }}</template>
 | 
			
		||||
 | 
			
		||||
	<XNotes :pagination="pagination" @before="before()" @after="after()"/>
 | 
			
		||||
	<XNotes :pagination="pagination"/>
 | 
			
		||||
</XColumn>
 | 
			
		||||
</template>
 | 
			
		||||
 | 
			
		||||
<script lang="ts">
 | 
			
		||||
import { defineComponent } from 'vue';
 | 
			
		||||
<script lang="ts" setup>
 | 
			
		||||
import { } from 'vue';
 | 
			
		||||
import XColumn from './column.vue';
 | 
			
		||||
import XNotes from '@/components/notes.vue';
 | 
			
		||||
import * as os from '@/os';
 | 
			
		||||
 | 
			
		||||
export default defineComponent({
 | 
			
		||||
	components: {
 | 
			
		||||
		XColumn,
 | 
			
		||||
		XNotes
 | 
			
		||||
	},
 | 
			
		||||
const props = defineProps<{
 | 
			
		||||
	column: Record<string, unknown>; // TODO
 | 
			
		||||
	isStacked: boolean;
 | 
			
		||||
}>();
 | 
			
		||||
 | 
			
		||||
	props: {
 | 
			
		||||
		column: {
 | 
			
		||||
			type: Object,
 | 
			
		||||
			required: true
 | 
			
		||||
		},
 | 
			
		||||
		isStacked: {
 | 
			
		||||
			type: Boolean,
 | 
			
		||||
			required: true
 | 
			
		||||
		}
 | 
			
		||||
	},
 | 
			
		||||
 | 
			
		||||
	data() {
 | 
			
		||||
		return {
 | 
			
		||||
			pagination: {
 | 
			
		||||
				endpoint: 'notes/mentions' as const,
 | 
			
		||||
				limit: 10,
 | 
			
		||||
			},
 | 
			
		||||
		}
 | 
			
		||||
	},
 | 
			
		||||
});
 | 
			
		||||
const pagination = {
 | 
			
		||||
	endpoint: 'notes/mentions' as const,
 | 
			
		||||
	limit: 10,
 | 
			
		||||
};
 | 
			
		||||
</script>
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue