tiptap/demos/preview/index.vue

91 lines
1.9 KiB
Vue
Raw Normal View History

2024-06-18 15:25:12 +08:00
<script setup>
import { ref } from 'vue'
2021-09-17 03:30:09 +08:00
// @ts-nocheck
2024-06-18 15:25:12 +08:00
const showDemoList = process.env.NODE_ENV === 'development'
const searchValue = ref('')
2021-09-17 03:30:09 +08:00
</script>
2021-08-25 17:52:20 +08:00
<template>
2024-06-18 15:25:12 +08:00
<template v-if="$route.path === '/'">
<input
class="w-full p-3 my-3 focus:outline-none border-b"
type="search"
placeholder="Search for a demo..."
autofocus
v-model="searchValue"
2021-08-26 16:52:15 +08:00
>
2024-06-18 15:25:12 +08:00
<ul v-if="showDemoList || listing">
<li
class="p-5 border-b-2 border-black"
v-for="route in $router.options.routes.filter(route => searchValue === ''? true : route.props.name.toLowerCase().includes(searchValue.toLowerCase()))"
:key="route.path"
2021-08-26 16:52:15 +08:00
>
2024-06-18 15:25:12 +08:00
<router-link
class="block mb-2 font-medium"
:to="route.path"
2021-08-26 16:52:15 +08:00
>
2024-06-18 15:25:12 +08:00
{{ route.props.name }}
</router-link>
<div class="flex">
<a
class="mr-4 text-sm text-gray-300 font-medium"
v-for="(tab, index) in route.props.tabs"
:key="index"
:href="`/src/${route.props.name}/${tab.name}/`"
>
{{ tab.name }}
</a>
</div>
</li>
</ul>
<div v-else>Nothing to see here :-)</div>
</template>
2021-08-25 17:52:20 +08:00
<router-view v-else />
</template>
2024-06-18 15:25:12 +08:00
<script>
export default {
methods: {
fromString(value) {
if (value === null) {
return true
}
if (value.match(/^\d*(\.\d+)?$/)) {
return Number(value)
}
if (value === 'true') {
return true
}
if (value === 'false') {
return false
}
if (value === 'null') {
return null
}
return value
},
},
computed: {
query() {
return Object.fromEntries(Object
.entries(this.$route.query)
.map(([key, value]) => [key, this.fromString(value)]))
},
listing() {
return this.query.listing || false
},
},
}
</script>