-
Notifications
You must be signed in to change notification settings - Fork 5
/
index.html
105 lines (102 loc) · 5.63 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
<head>
<link rel="icon" type="image/x-icon" href="./assets/favicon.ico">
<script src="https://unpkg.com/@vimesh/style"></script>
<script src="https://unpkg.com/@vimesh/ui"></script>
<script src="https://unpkg.com/alpinejs" defer></script>
<script src="https://unpkg.com/universal-router/universal-router.min.js"></script>
<script>
const DEBUG = false
$vui.config.debug = DEBUG
$vui.config.importMap = {
"hui": '../components/${component}.html' + (DEBUG ? '?v=' + new Date().valueOf() : '?v=0.1'),
"app": './components/${path}${component}.html' + (DEBUG ? '?v=' + new Date().valueOf() : '?v=0.1'),
"page": './pages/${path}${component}.html' + (DEBUG ? '?v=' + new Date().valueOf() : '?v=0.1'),
}
let root = {
$route: {},
get isHome() { return this.$route.page === 'home' },
routes: [
{ name: 'Home', path: '/index', page: 'home' },
{ name: 'Listbox', path: '/listbox/basic', page: 'listbox/basic' },
{ name: 'Listbox Multi Select', path: '/listbox/multi-select', page: 'listbox/multi-select' },
{ name: 'Listbox Multi Elements', path: '/listbox/multi-elements', page: 'listbox/multi-elements' },
{ name: 'Radio Group', path: '/radio-group/basic', page: 'radio-group/basic' },
{ name: 'Switch', path: '/switch/basic', page: 'switch/basic' },
{ name: 'Tabs', path: '/tabs/basic', page: 'tabs/basic' },
{ name: 'Combobox', path: '/combobox/basic', page: 'combobox/basic' },
{ name: 'Combobox Multi Select', path: '/combobox/multi-select', page: 'combobox/multi-select' },
{ name: 'Combobox Command Palette', path: '/combobox/command-palette', page: 'combobox/command-palette' },
{ name: 'Combobox Command Palette with Group', path: '/combobox/command-palette-group', page: 'combobox/command-palette-group' },
{ name: 'Menu', path: '/menu/basic', page: 'menu/basic' },
{ name: 'Menu Multiple Elements', path: '/menu/multiple-elements', page: 'menu/multiple-elements' },
{ name: 'Menu with Popper', path: '/menu/with-popper', page: 'menu/with-popper' },
{ name: 'Menu with Transition', path: '/menu/with-transition', page: 'menu/with-transition' },
{ name: 'Menu with Transition and Popper', path: '/menu/with-transition-and-popper', page: 'menu/with-transition-and-popper' },
{ name: 'Popover', path: '/popover/basic', page: 'popover/basic' },
{ name: 'Dialog', path: '/dialog/basic', page: 'dialog/basic' },
{ name: 'Dialog with Slide Over', path: '/dialog/slide-over', page: 'dialog/slide-over' },
{ name: 'Something Wrong!', path: '(.*)', page: 'home', hidden: true }
]
}
</script>
<style>
[x-cloak] {
display: none !important;
}
</style>
</head>
<body x-cloak x-import="app:header,side-menu,code-viewer,key-caster"
class="h-full w-full font-sans text-gray-900 antialiased flex flex-col" x-data="root">
<app-header class="flex-none h-16 px-1 py-3 flex"></app-header>
<div class="flex-1 flex">
<app-side-menu class="w-74 flex-none" x-show="!isHome"></app-side-menu>
<div class="flex-1 h-full flex flex-col overflow-hidden">
<app-router-view class="flex-1"></app-router-view>
<app-code-viewer x-show="!isHome" class="flex-none h-64 overflow-y-auto bg-gray-700 m-1 rounded-md"
language="html" :code="$route.code"></app-code-viewer>
</div>
</div>
<app-key-caster></app-key-caster>
<template x-component:app="router-view" x-shtml="$api && $api.pageContent || ''"
x-import:dynamic="$api && $api.pageToImport">
<script>
return {
router: null,
pageContent: '',
pageToImport: null,
onUrlChange() {
let match = window.location.href.match(/#(.*)$/)
let fragment = match ? match[1] : ''
this.router.resolve({ pathname: fragment }).then(page => {
if (page) {
let component = `page-${page.replace('/', '-')}`
this.pageContent = `<${component}></${component}>`
this.pageToImport = `page:${page}`
$vui.import(this.pageToImport).then(() => {
$vui._.each($vui.imports, meta => {
if (meta.fullname === this.pageToImport) {
this.$route.code = meta.html
}
})
})
}
})
},
onMounted() {
this.router = new UniversalRouter(this.routes, {
context: { self: this },
resolveRoute(context, params) {
context.self.$route = { params, ...context.route }
if (typeof context.route.action === 'function') {
return context.route.action(context, params)
}
return context.route.page
}
})
this.onUrlChange()
window.addEventListener('popstate', e => this.onUrlChange())
}
}
</script>
</template>
</body>