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>
|