feat(pages): add chapter picker dropdown to story pages
This commit is contained in:
parent
3b7eb4822e
commit
9ecb93d85d
33
components/story/view/chapterPicker.vue
Normal file
33
components/story/view/chapterPicker.vue
Normal file
@ -0,0 +1,33 @@
|
||||
<script lang="ts" setup>
|
||||
import { LabeledValue } from "ant-design-vue/es/select";
|
||||
import { SingleChapterResult } from "~/lib/client/types/slightlyDifferentStory";
|
||||
|
||||
const { params } = useRoute();
|
||||
const cidx = parseInt(params.cidx as string);
|
||||
const story = inject<SingleChapterResult | null>("story")!;
|
||||
const opts = ref<LabeledValue[]>(
|
||||
story!.chapterNames.map(
|
||||
(s, i) =>
|
||||
({
|
||||
label: s,
|
||||
value: i + 1,
|
||||
}) as LabeledValue,
|
||||
),
|
||||
);
|
||||
const onChange = (v) => {
|
||||
console.log("SELECT", v);
|
||||
navigateTo(`/story/${story._id}/${v as LabeledValue}`);
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div style="display: flow-root">
|
||||
<a-select :value="opts[cidx - 1]" @select="onChange" :options="opts" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.ant-select {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
Loading…
Reference in New Issue
Block a user