lookbook 0.9.1 → 1.0.0.beta.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/README.md +43 -859
- data/app/assets/lookbook/css/lookbook.css +55 -0
- data/app/assets/lookbook/css/themes/blue.css +42 -0
- data/app/assets/lookbook/css/themes/indigo.css +42 -0
- data/app/assets/lookbook/css/themes/zinc.css +42 -0
- data/app/assets/lookbook/css/{tooltip_theme.css → tooltip.css} +14 -8
- data/app/assets/lookbook/js/app.js +64 -63
- data/app/assets/lookbook/js/components/clipboard.js +47 -0
- data/app/assets/lookbook/js/components/tooltip.js +30 -0
- data/app/assets/lookbook/js/config.js +7 -4
- data/app/assets/lookbook/js/helpers/build.js +22 -0
- data/app/assets/lookbook/js/helpers/dom.js +45 -0
- data/app/assets/lookbook/js/helpers/layout.js +21 -0
- data/app/assets/lookbook/js/helpers/request.js +16 -0
- data/app/assets/lookbook/js/helpers/string.js +11 -0
- data/app/assets/lookbook/js/lib/socket.js +4 -3
- data/app/assets/lookbook/js/lib/tippy.js +8 -0
- data/app/assets/lookbook/js/lookbook.js +61 -0
- data/app/assets/lookbook/js/plugins/logger.js +39 -0
- data/app/assets/lookbook/js/stores/filter.js +2 -2
- data/app/assets/lookbook/js/stores/inspector.js +22 -16
- data/app/assets/lookbook/js/stores/layout.js +101 -5
- data/app/assets/lookbook/js/stores/nav.js +17 -16
- data/app/assets/lookbook/js/stores/pages.js +4 -2
- data/app/assets/lookbook/js/stores/settings.js +7 -0
- data/app/assets/lookbook/js/stores/workbench.js +29 -0
- data/app/components/lookbook/button/component.html.erb +28 -0
- data/app/components/lookbook/button/component.js +55 -0
- data/app/components/lookbook/button/component.rb +39 -0
- data/app/components/lookbook/button_group/component.html.erb +3 -0
- data/app/components/lookbook/button_group/component.rb +18 -0
- data/app/components/lookbook/code/component.css +57 -0
- data/app/components/lookbook/code/component.html.erb +10 -0
- data/app/components/lookbook/code/component.js +3 -0
- data/app/components/lookbook/code/component.rb +56 -0
- data/app/components/lookbook/code/highlight_github_light.css +217 -0
- data/app/components/lookbook/component.rb +41 -0
- data/app/components/lookbook/copy_button/component.html.erb +11 -0
- data/app/components/lookbook/copy_button/component.js +16 -0
- data/app/components/lookbook/copy_button/component.rb +23 -0
- data/app/components/lookbook/dimensions_display/component.html.erb +10 -0
- data/app/components/lookbook/dimensions_display/component.js +30 -0
- data/app/components/lookbook/dimensions_display/component.rb +18 -0
- data/app/components/lookbook/embed/component.html.erb +50 -0
- data/app/components/lookbook/embed/component.js +39 -0
- data/app/components/lookbook/embed/component.rb +22 -0
- data/app/components/lookbook/filter/component.html.erb +17 -0
- data/app/components/lookbook/filter/component.js +21 -0
- data/app/components/lookbook/filter/component.rb +15 -0
- data/app/components/lookbook/header/component.html.erb +79 -0
- data/app/components/lookbook/header/component.rb +9 -0
- data/app/components/lookbook/icon/component.css +11 -0
- data/app/components/lookbook/icon/component.html.erb +5 -0
- data/app/components/lookbook/icon/component.js +5 -0
- data/app/components/lookbook/icon/component.rb +23 -0
- data/app/components/lookbook/nav/component.html.erb +33 -0
- data/app/components/lookbook/nav/component.js +52 -0
- data/app/components/lookbook/nav/component.rb +37 -0
- data/app/components/lookbook/nav/item/component.html.erb +23 -0
- data/app/components/lookbook/nav/item/component.js +66 -0
- data/app/components/lookbook/nav/item/component.rb +84 -0
- data/app/components/lookbook/params_editor/component.html.erb +3 -0
- data/app/components/lookbook/params_editor/component.js +12 -0
- data/app/components/lookbook/params_editor/component.rb +11 -0
- data/app/components/lookbook/params_editor/field/component.html.erb +50 -0
- data/app/components/lookbook/params_editor/field/component.js +36 -0
- data/app/components/lookbook/params_editor/field/component.rb +41 -0
- data/app/components/lookbook/prose/component.css +12 -0
- data/app/components/lookbook/prose/component.html.erb +3 -0
- data/app/components/lookbook/prose/component.rb +26 -0
- data/app/components/lookbook/split_layout/component.html.erb +13 -0
- data/app/components/lookbook/split_layout/component.js +151 -0
- data/app/components/lookbook/split_layout/component.rb +11 -0
- data/app/components/lookbook/tabbed_content/component.html.erb +5 -0
- data/app/components/lookbook/tabbed_content/component.js +21 -0
- data/app/components/lookbook/tabbed_content/component.rb +20 -0
- data/app/components/lookbook/tabbed_content/section/component.html.erb +8 -0
- data/app/components/lookbook/tabbed_content/section/component.rb +9 -0
- data/app/components/lookbook/tabs/component.css +8 -0
- data/app/components/lookbook/tabs/component.html.erb +14 -0
- data/app/components/lookbook/tabs/component.js +107 -0
- data/app/components/lookbook/tabs/component.rb +30 -0
- data/app/components/lookbook/tabs/dropdown_tab/component.html.erb +14 -0
- data/app/components/lookbook/tabs/dropdown_tab/component.rb +16 -0
- data/app/components/lookbook/tabs/tab/component.html.erb +18 -0
- data/app/components/lookbook/tabs/tab/component.rb +16 -0
- data/app/components/lookbook/tag_component.rb +29 -0
- data/app/components/lookbook/toolbar/component.css +16 -0
- data/app/components/lookbook/toolbar/component.html.erb +5 -0
- data/app/components/lookbook/toolbar/component.rb +26 -0
- data/app/components/lookbook/viewport/component.css +11 -0
- data/app/components/lookbook/viewport/component.html.erb +57 -0
- data/app/{assets/lookbook/js/components/preview-window.js → components/lookbook/viewport/component.js} +57 -14
- data/app/components/lookbook/viewport/component.rb +21 -0
- data/app/controllers/lookbook/application_controller.rb +16 -5
- data/app/controllers/lookbook/pages_controller.rb +18 -10
- data/app/controllers/lookbook/previews_controller.rb +62 -25
- data/app/helpers/lookbook/application_helper.rb +7 -3
- data/app/helpers/lookbook/component_helper.rb +22 -10
- data/app/helpers/lookbook/output_helper.rb +8 -4
- data/app/helpers/lookbook/page_helper.rb +13 -21
- data/app/views/layouts/lookbook/application.html.erb +76 -28
- data/app/views/layouts/lookbook/inspector.html.erb +7 -0
- data/app/views/layouts/lookbook/page.html.erb +53 -0
- data/app/views/layouts/lookbook/shell.html.erb +64 -0
- data/app/views/layouts/lookbook/skeleton.html.erb +27 -10
- data/app/views/layouts/lookbook/standalone.html.erb +5 -0
- data/app/views/lookbook/404.html.erb +15 -0
- data/app/views/lookbook/error.html.erb +34 -34
- data/app/views/lookbook/index.html.erb +11 -6
- data/app/views/lookbook/pages/show.html.erb +29 -93
- data/app/views/{layouts/lookbook → lookbook}/preview.html.erb +3 -5
- data/app/views/lookbook/previews/panels/_notes.html.erb +19 -25
- data/app/views/lookbook/previews/panels/_output.html.erb +7 -18
- data/app/views/lookbook/previews/panels/_params.html.erb +13 -15
- data/app/views/lookbook/previews/panels/_preview.html.erb +6 -52
- data/app/views/lookbook/previews/panels/_source.html.erb +7 -16
- data/app/views/lookbook/previews/show.html.erb +130 -24
- data/config/routes.rb +7 -7
- data/lib/lookbook/code_formatter.rb +37 -13
- data/lib/lookbook/collection.rb +19 -16
- data/lib/lookbook/config.rb +125 -0
- data/lib/lookbook/engine.rb +66 -59
- data/lib/lookbook/entity.rb +47 -0
- data/lib/lookbook/error.rb +1 -2
- data/lib/lookbook/features.rb +1 -1
- data/lib/lookbook/markdown.rb +3 -4
- data/lib/lookbook/page.rb +26 -43
- data/lib/lookbook/page_collection.rb +8 -0
- data/lib/lookbook/params.rb +14 -3
- data/lib/lookbook/preview.rb +16 -7
- data/lib/lookbook/preview_collection.rb +8 -0
- data/lib/lookbook/preview_controller.rb +6 -2
- data/lib/lookbook/preview_example.rb +5 -6
- data/lib/lookbook/preview_group.rb +4 -9
- data/lib/lookbook/{code_inspector.rb → source_inspector.rb} +2 -2
- data/lib/lookbook/theme.rb +22 -0
- data/lib/lookbook/utils.rb +11 -3
- data/lib/lookbook/version.rb +1 -1
- data/lib/lookbook.rb +4 -1
- data/lib/tasks/lookbook_tasks.rake +12 -0
- data/public/lookbook-assets/css/app.css +2340 -1
- data/public/lookbook-assets/css/app.css.map +11 -1
- data/public/lookbook-assets/css/lookbook.css +3040 -0
- data/public/lookbook-assets/css/lookbook.css.map +1 -0
- data/public/lookbook-assets/css/themes/blue.css +44 -0
- data/public/lookbook-assets/css/themes/blue.css.map +1 -0
- data/public/lookbook-assets/css/themes/indigo.css +44 -0
- data/public/lookbook-assets/css/themes/indigo.css.map +1 -0
- data/public/lookbook-assets/css/themes/zinc.css +44 -0
- data/public/lookbook-assets/css/themes/zinc.css.map +1 -0
- data/public/lookbook-assets/js/app.js +10861 -1
- data/public/lookbook-assets/js/app.js.map +2571 -1
- data/public/lookbook-assets/js/embed.js +895 -1
- data/public/lookbook-assets/js/embed.js.map +1 -1
- data/public/lookbook-assets/js/lookbook.js +13529 -0
- data/public/lookbook-assets/js/lookbook.js.map +1 -0
- metadata +128 -116
- data/app/assets/lookbook/css/app.css +0 -161
- data/app/assets/lookbook/css/code_theme.css +0 -214
- data/app/assets/lookbook/js/components/app.js +0 -55
- data/app/assets/lookbook/js/components/code.js +0 -5
- data/app/assets/lookbook/js/components/copy.js +0 -20
- data/app/assets/lookbook/js/components/embed.js +0 -89
- data/app/assets/lookbook/js/components/filter.js +0 -35
- data/app/assets/lookbook/js/components/inspector.js +0 -66
- data/app/assets/lookbook/js/components/nav-group.js +0 -47
- data/app/assets/lookbook/js/components/nav-item.js +0 -29
- data/app/assets/lookbook/js/components/nav.js +0 -28
- data/app/assets/lookbook/js/components/page-tabs.js +0 -9
- data/app/assets/lookbook/js/components/page.js +0 -25
- data/app/assets/lookbook/js/components/param.js +0 -34
- data/app/assets/lookbook/js/components/sidebar.js +0 -18
- data/app/assets/lookbook/js/components/sizes.js +0 -16
- data/app/assets/lookbook/js/components/splitter.js +0 -25
- data/app/assets/lookbook/js/components/tabs.js +0 -52
- data/app/assets/lookbook/js/lib/split.js +0 -15
- data/app/assets/lookbook/js/stores/sidebar.js +0 -26
- data/app/views/layouts/lookbook/basic.html.erb +0 -7
- data/app/views/lookbook/components/_branding.html.erb +0 -8
- data/app/views/lookbook/components/_code.html.erb +0 -17
- data/app/views/lookbook/components/_copy_button.html.erb +0 -11
- data/app/views/lookbook/components/_drawer.html.erb +0 -112
- data/app/views/lookbook/components/_embed.html.erb +0 -39
- data/app/views/lookbook/components/_errors.html.erb +0 -13
- data/app/views/lookbook/components/_filter.html.erb +0 -18
- data/app/views/lookbook/components/_header.html.erb +0 -6
- data/app/views/lookbook/components/_icon.html.erb +0 -5
- data/app/views/lookbook/components/_nav.html.erb +0 -16
- data/app/views/lookbook/components/_nav_collection.html.erb +0 -5
- data/app/views/lookbook/components/_nav_group.html.erb +0 -14
- data/app/views/lookbook/components/_nav_item.html.erb +0 -24
- data/app/views/lookbook/components/_nav_page.html.erb +0 -22
- data/app/views/lookbook/components/_nav_preview.html.erb +0 -13
- data/app/views/lookbook/components/_not_found.html.erb +0 -11
- data/app/views/lookbook/components/_param.html.erb +0 -21
- data/app/views/lookbook/components/_preview.html.erb +0 -77
- data/app/views/lookbook/components/_sidebar.html.erb +0 -69
- data/app/views/lookbook/pages/not_found.html.erb +0 -15
- data/app/views/lookbook/previews/error.html.erb +0 -1
- data/app/views/lookbook/previews/inputs/_select.html.erb +0 -7
- data/app/views/lookbook/previews/inputs/_text.html.erb +0 -8
- data/app/views/lookbook/previews/inputs/_textarea.html.erb +0 -8
- data/app/views/lookbook/previews/inputs/_toggle.html.erb +0 -13
- data/app/views/lookbook/previews/not_found.html.erb +0 -23
@@ -1,214 +0,0 @@
|
|
1
|
-
/*
|
2
|
-
* GitHub style for Pygments
|
3
|
-
* Courtesy of GitHub.com
|
4
|
-
*/
|
5
|
-
|
6
|
-
.highlight .hll {
|
7
|
-
background-color: #f8f8f8;
|
8
|
-
border: 1px solid #ccc;
|
9
|
-
padding: 6px 10px;
|
10
|
-
border-radius: 3px;
|
11
|
-
}
|
12
|
-
.highlight .c {
|
13
|
-
color: #999988;
|
14
|
-
font-style: italic;
|
15
|
-
}
|
16
|
-
.highlight .err {
|
17
|
-
color: #a61717;
|
18
|
-
background-color: #e3d2d2;
|
19
|
-
}
|
20
|
-
.highlight .k {
|
21
|
-
font-weight: bold;
|
22
|
-
}
|
23
|
-
.highlight .o {
|
24
|
-
font-weight: bold;
|
25
|
-
}
|
26
|
-
.highlight .cm {
|
27
|
-
color: #999988;
|
28
|
-
font-style: italic;
|
29
|
-
}
|
30
|
-
.highlight .cp {
|
31
|
-
color: #999999;
|
32
|
-
font-weight: bold;
|
33
|
-
}
|
34
|
-
.highlight .c1 {
|
35
|
-
color: #999988;
|
36
|
-
font-style: italic;
|
37
|
-
}
|
38
|
-
.highlight .cs {
|
39
|
-
color: #999999;
|
40
|
-
font-weight: bold;
|
41
|
-
font-style: italic;
|
42
|
-
}
|
43
|
-
.highlight .gd {
|
44
|
-
color: #000000;
|
45
|
-
background-color: #ffdddd;
|
46
|
-
}
|
47
|
-
.highlight .gd .x {
|
48
|
-
color: #000000;
|
49
|
-
background-color: #ffaaaa;
|
50
|
-
}
|
51
|
-
.highlight .ge {
|
52
|
-
font-style: italic;
|
53
|
-
}
|
54
|
-
.highlight .gr {
|
55
|
-
color: #aa0000;
|
56
|
-
}
|
57
|
-
.highlight .gh {
|
58
|
-
color: #999999;
|
59
|
-
}
|
60
|
-
.highlight .gi {
|
61
|
-
color: #000000;
|
62
|
-
background-color: #ddffdd;
|
63
|
-
}
|
64
|
-
.highlight .gi .x {
|
65
|
-
color: #000000;
|
66
|
-
background-color: #aaffaa;
|
67
|
-
}
|
68
|
-
.highlight .go {
|
69
|
-
color: #888888;
|
70
|
-
}
|
71
|
-
.highlight .gp {
|
72
|
-
color: #555555;
|
73
|
-
}
|
74
|
-
.highlight .gs {
|
75
|
-
font-weight: bold;
|
76
|
-
}
|
77
|
-
.highlight .gu {
|
78
|
-
color: #800080;
|
79
|
-
font-weight: bold;
|
80
|
-
}
|
81
|
-
.highlight .gt {
|
82
|
-
color: #aa0000;
|
83
|
-
}
|
84
|
-
.highlight .kc {
|
85
|
-
font-weight: bold;
|
86
|
-
}
|
87
|
-
.highlight .kd {
|
88
|
-
font-weight: bold;
|
89
|
-
}
|
90
|
-
.highlight .kn {
|
91
|
-
font-weight: bold;
|
92
|
-
}
|
93
|
-
.highlight .kp {
|
94
|
-
font-weight: bold;
|
95
|
-
}
|
96
|
-
.highlight .kr {
|
97
|
-
font-weight: bold;
|
98
|
-
}
|
99
|
-
.highlight .kt {
|
100
|
-
color: #445588;
|
101
|
-
font-weight: bold;
|
102
|
-
}
|
103
|
-
.highlight .m {
|
104
|
-
color: #009999;
|
105
|
-
}
|
106
|
-
.highlight .s {
|
107
|
-
color: #dd1144;
|
108
|
-
}
|
109
|
-
.highlight .n {
|
110
|
-
color: #333333;
|
111
|
-
}
|
112
|
-
.highlight .na {
|
113
|
-
color: teal;
|
114
|
-
}
|
115
|
-
.highlight .nb {
|
116
|
-
color: #0086b3;
|
117
|
-
}
|
118
|
-
.highlight .nc {
|
119
|
-
color: #445588;
|
120
|
-
font-weight: bold;
|
121
|
-
}
|
122
|
-
.highlight .no {
|
123
|
-
color: teal;
|
124
|
-
}
|
125
|
-
.highlight .ni {
|
126
|
-
color: purple;
|
127
|
-
}
|
128
|
-
.highlight .ne {
|
129
|
-
color: #990000;
|
130
|
-
font-weight: bold;
|
131
|
-
}
|
132
|
-
.highlight .nf {
|
133
|
-
color: #990000;
|
134
|
-
font-weight: bold;
|
135
|
-
}
|
136
|
-
.highlight .nn {
|
137
|
-
color: #555555;
|
138
|
-
}
|
139
|
-
.highlight .nt {
|
140
|
-
color: navy;
|
141
|
-
}
|
142
|
-
.highlight .nv {
|
143
|
-
color: teal;
|
144
|
-
}
|
145
|
-
.highlight .ow {
|
146
|
-
font-weight: bold;
|
147
|
-
}
|
148
|
-
.highlight .w {
|
149
|
-
color: #bbbbbb;
|
150
|
-
}
|
151
|
-
.highlight .mf {
|
152
|
-
color: #009999;
|
153
|
-
}
|
154
|
-
.highlight .mh {
|
155
|
-
color: #009999;
|
156
|
-
}
|
157
|
-
.highlight .mi {
|
158
|
-
color: #009999;
|
159
|
-
}
|
160
|
-
.highlight .mo {
|
161
|
-
color: #009999;
|
162
|
-
}
|
163
|
-
.highlight .sb {
|
164
|
-
color: #dd1144;
|
165
|
-
}
|
166
|
-
.highlight .sc {
|
167
|
-
color: #dd1144;
|
168
|
-
}
|
169
|
-
.highlight .sd {
|
170
|
-
color: #dd1144;
|
171
|
-
}
|
172
|
-
.highlight .s2 {
|
173
|
-
color: #dd1144;
|
174
|
-
}
|
175
|
-
.highlight .se {
|
176
|
-
color: #dd1144;
|
177
|
-
}
|
178
|
-
.highlight .sh {
|
179
|
-
color: #dd1144;
|
180
|
-
}
|
181
|
-
.highlight .si {
|
182
|
-
color: #dd1144;
|
183
|
-
}
|
184
|
-
.highlight .sx {
|
185
|
-
color: #dd1144;
|
186
|
-
}
|
187
|
-
.highlight .sr {
|
188
|
-
color: #009926;
|
189
|
-
}
|
190
|
-
.highlight .s1 {
|
191
|
-
color: #dd1144;
|
192
|
-
}
|
193
|
-
.highlight .ss {
|
194
|
-
color: #990073;
|
195
|
-
}
|
196
|
-
.highlight .bp {
|
197
|
-
color: #999999;
|
198
|
-
}
|
199
|
-
.highlight .vc {
|
200
|
-
color: teal;
|
201
|
-
}
|
202
|
-
.highlight .vg {
|
203
|
-
color: teal;
|
204
|
-
}
|
205
|
-
.highlight .vi {
|
206
|
-
color: teal;
|
207
|
-
}
|
208
|
-
.highlight .il {
|
209
|
-
color: #009999;
|
210
|
-
}
|
211
|
-
.highlight .gc {
|
212
|
-
color: #999;
|
213
|
-
background-color: #eaf2f5;
|
214
|
-
}
|
@@ -1,55 +0,0 @@
|
|
1
|
-
import createSocket from "../lib/socket";
|
2
|
-
|
3
|
-
const morphOpts = {
|
4
|
-
key(el) {
|
5
|
-
return el.getAttribute("key") ? el.getAttribute("key") : el.id;
|
6
|
-
},
|
7
|
-
lookahead: false,
|
8
|
-
updating(el, toEl, childrenOnly, skip) {
|
9
|
-
if (
|
10
|
-
el.getAttribute &&
|
11
|
-
el.getAttribute("data-morph-strategy") === "replace"
|
12
|
-
) {
|
13
|
-
el.innerHTML = toEl.innerHTML;
|
14
|
-
return skip();
|
15
|
-
}
|
16
|
-
},
|
17
|
-
};
|
18
|
-
|
19
|
-
export default function app() {
|
20
|
-
return {
|
21
|
-
init() {
|
22
|
-
if (window.SOCKET_PATH) {
|
23
|
-
const socket = createSocket(window.SOCKET_PATH);
|
24
|
-
socket.addListener("Lookbook::ReloadChannel", () => this.refresh());
|
25
|
-
}
|
26
|
-
},
|
27
|
-
async update() {
|
28
|
-
const response = await fetch(window.document.location);
|
29
|
-
if (!response.ok) return window.location.reload();
|
30
|
-
const html = await response.text();
|
31
|
-
const newDoc = new DOMParser().parseFromString(html, "text/html");
|
32
|
-
this.morph(newDoc);
|
33
|
-
document.title = newDoc.title;
|
34
|
-
},
|
35
|
-
setLocation(loc) {
|
36
|
-
let path;
|
37
|
-
if (loc instanceof Event) {
|
38
|
-
path = loc.currentTarget.href;
|
39
|
-
loc.preventDefault();
|
40
|
-
} else {
|
41
|
-
path = loc;
|
42
|
-
}
|
43
|
-
history.pushState({}, null, path);
|
44
|
-
this.$dispatch("popstate");
|
45
|
-
},
|
46
|
-
refresh() {
|
47
|
-
this.$dispatch("refresh");
|
48
|
-
},
|
49
|
-
morph(dom) {
|
50
|
-
const pageHtml = dom.getElementById(this.$root.id).outerHTML;
|
51
|
-
Alpine.morph(this.$root, pageHtml, morphOpts);
|
52
|
-
this.$dispatch("page:morphed");
|
53
|
-
},
|
54
|
-
};
|
55
|
-
}
|
@@ -1,20 +0,0 @@
|
|
1
|
-
export default function copy() {
|
2
|
-
return {
|
3
|
-
get content() {
|
4
|
-
const target = document.getElementById(
|
5
|
-
this.$root.getAttribute("data-target")
|
6
|
-
);
|
7
|
-
const decoder = document.createElement("textarea");
|
8
|
-
decoder.innerHTML = target ? target.innerHTML : "";
|
9
|
-
return decoder.value.trim();
|
10
|
-
},
|
11
|
-
done: false,
|
12
|
-
async save() {
|
13
|
-
await window.navigator.clipboard.writeText(this.content);
|
14
|
-
this.done = true;
|
15
|
-
setTimeout(() => {
|
16
|
-
this.done = false;
|
17
|
-
}, 1000);
|
18
|
-
},
|
19
|
-
};
|
20
|
-
}
|
@@ -1,89 +0,0 @@
|
|
1
|
-
import "iframe-resizer/js/iframeResizer";
|
2
|
-
|
3
|
-
export default function embed() {
|
4
|
-
return {
|
5
|
-
init() {
|
6
|
-
if (!this.$store.pages.embeds[this.$root.id]) {
|
7
|
-
this.$store.pages.embeds[this.$root.id] = {
|
8
|
-
width: "100%",
|
9
|
-
};
|
10
|
-
}
|
11
|
-
},
|
12
|
-
lastWidth: null,
|
13
|
-
reflowing: false,
|
14
|
-
get resizer() {
|
15
|
-
if (this.$refs.iframe) {
|
16
|
-
if (!this.$refs.iframe.iFrameResizer) {
|
17
|
-
window.iFrameResize(
|
18
|
-
{
|
19
|
-
heightCalculationMethod: "lowestElement",
|
20
|
-
onResized: this.onIframeResized.bind(this),
|
21
|
-
},
|
22
|
-
this.$refs.iframe
|
23
|
-
);
|
24
|
-
}
|
25
|
-
return this.$refs.iframe.iFrameResizer;
|
26
|
-
}
|
27
|
-
return null;
|
28
|
-
},
|
29
|
-
set width(value) {
|
30
|
-
this.store.width = value;
|
31
|
-
},
|
32
|
-
get width() {
|
33
|
-
return this.store.width || "100%";
|
34
|
-
},
|
35
|
-
get height() {
|
36
|
-
return this.store.height;
|
37
|
-
},
|
38
|
-
get parentWidth() {
|
39
|
-
return Math.round(this.$root.parentElement.clientWidth);
|
40
|
-
},
|
41
|
-
get maxWidth() {
|
42
|
-
return this.width === "100%" ? "100%" : `${this.width}px`;
|
43
|
-
},
|
44
|
-
get store() {
|
45
|
-
return this.$store.pages.embeds[this.$root.id];
|
46
|
-
},
|
47
|
-
recaclulateIframeHeight() {
|
48
|
-
if (this.resizer) this.resizer.resize();
|
49
|
-
},
|
50
|
-
onIframeResized({ iframe, height }) {
|
51
|
-
if (iframe.isSameNode(this.$refs.iframe)) {
|
52
|
-
this.store.height = height;
|
53
|
-
}
|
54
|
-
},
|
55
|
-
onResizeWidth(e) {
|
56
|
-
const width =
|
57
|
-
this.resizeStartWidth - (this.resizeStartPositionX - e.pageX);
|
58
|
-
const boundedWidth = Math.min(
|
59
|
-
Math.max(Math.round(width), 200),
|
60
|
-
this.parentWidth
|
61
|
-
);
|
62
|
-
this.width = boundedWidth === this.parentWidth ? "100%" : boundedWidth;
|
63
|
-
this.recaclulateIframeHeight();
|
64
|
-
},
|
65
|
-
onResizeWidthStart(e) {
|
66
|
-
this.reflowing = true;
|
67
|
-
this.onResizeWidth = this.onResizeWidth.bind(this);
|
68
|
-
this.onResizeWidthEnd = this.onResizeWidthEnd.bind(this);
|
69
|
-
this.resizeStartPositionX = e.pageX;
|
70
|
-
this.resizeStartWidth = this.$refs.resizer.clientWidth;
|
71
|
-
window.addEventListener("pointermove", this.onResizeWidth);
|
72
|
-
window.addEventListener("pointerup", this.onResizeWidthEnd);
|
73
|
-
},
|
74
|
-
onResizeWidthEnd() {
|
75
|
-
window.removeEventListener("pointermove", this.onResizeWidth);
|
76
|
-
window.removeEventListener("pointerup", this.onResizeWidthEnd);
|
77
|
-
this.reflowing = false;
|
78
|
-
},
|
79
|
-
toggleFullWidth() {
|
80
|
-
if (this.width === "100%" && this.lastWidth) {
|
81
|
-
this.width = this.lastWidth;
|
82
|
-
} else {
|
83
|
-
this.lastWidth = this.width;
|
84
|
-
this.width = "100%";
|
85
|
-
}
|
86
|
-
this.$nextTick(() => this.recaclulateIframeHeight());
|
87
|
-
},
|
88
|
-
};
|
89
|
-
}
|
@@ -1,35 +0,0 @@
|
|
1
|
-
export default function filter() {
|
2
|
-
return {
|
3
|
-
get active() {
|
4
|
-
return this.$store.filter.active;
|
5
|
-
},
|
6
|
-
focussed: false,
|
7
|
-
checkEsc($event) {
|
8
|
-
if ($event.key === "Escape") {
|
9
|
-
this.active ? this.clear() : this.blur();
|
10
|
-
}
|
11
|
-
},
|
12
|
-
clear() {
|
13
|
-
this.$store.filter.raw = "";
|
14
|
-
},
|
15
|
-
focus($event) {
|
16
|
-
if ($event && $event.target.tagName === "INPUT") {
|
17
|
-
return;
|
18
|
-
}
|
19
|
-
setTimeout(() => {
|
20
|
-
this.$dispatch("filter:focus");
|
21
|
-
this.$nextTick(() => {
|
22
|
-
this.focussed = true;
|
23
|
-
this.$refs.input.focus();
|
24
|
-
});
|
25
|
-
}, 0);
|
26
|
-
},
|
27
|
-
blur() {
|
28
|
-
setTimeout(() => {
|
29
|
-
this.focussed = false;
|
30
|
-
this.$refs.input.blur();
|
31
|
-
this.$dispatch("filter:blur");
|
32
|
-
}, 0);
|
33
|
-
},
|
34
|
-
};
|
35
|
-
}
|
@@ -1,66 +0,0 @@
|
|
1
|
-
import sizeObserver from "./sizes";
|
2
|
-
|
3
|
-
export default function inspector() {
|
4
|
-
return {
|
5
|
-
width: 0,
|
6
|
-
height: 0,
|
7
|
-
init() {
|
8
|
-
const ro = new ResizeObserver((entries) => {
|
9
|
-
const rect = entries[0].contentRect;
|
10
|
-
this.width = Math.round(rect.width);
|
11
|
-
this.height = Math.round(rect.height);
|
12
|
-
});
|
13
|
-
ro.observe(this.$el);
|
14
|
-
this.width = Math.round(this.$el.clientWidth);
|
15
|
-
this.height = Math.round(this.$el.clientHeight);
|
16
|
-
},
|
17
|
-
get orientation() {
|
18
|
-
return this.$store.inspector.drawer.orientation;
|
19
|
-
},
|
20
|
-
get view() {
|
21
|
-
return this.$store.inspector.preview.view;
|
22
|
-
},
|
23
|
-
get horizontal() {
|
24
|
-
return this.canBeVertical ? this.orientation === "horizontal" : true;
|
25
|
-
},
|
26
|
-
get vertical() {
|
27
|
-
return !this.horizontal;
|
28
|
-
},
|
29
|
-
get canBeVertical() {
|
30
|
-
return this.width > 800;
|
31
|
-
},
|
32
|
-
get drawerHidden() {
|
33
|
-
return this.$store.inspector.drawer.hidden;
|
34
|
-
},
|
35
|
-
get maxDrawerHeight() {
|
36
|
-
return Math.round(this.height * 0.7);
|
37
|
-
},
|
38
|
-
get maxDrawerWidth() {
|
39
|
-
return Math.round(this.width * 0.7);
|
40
|
-
},
|
41
|
-
isActiveDrawerPanel(panel) {
|
42
|
-
return this.$store.inspector.drawer.panel === panel;
|
43
|
-
},
|
44
|
-
switchDrawerPanel(panel) {
|
45
|
-
this.$store.inspector.drawer.panel = panel;
|
46
|
-
},
|
47
|
-
isActivePreviewPanel(panel) {
|
48
|
-
return this.$store.inspector.preview.panel === panel;
|
49
|
-
},
|
50
|
-
switchPreviewPanel(panel) {
|
51
|
-
this.$store.inspector.preview.panel = panel;
|
52
|
-
},
|
53
|
-
toggleOrientation() {
|
54
|
-
this.$store.inspector.drawer.orientation =
|
55
|
-
this.orientation === "horizontal" ? "vertical" : "horizontal";
|
56
|
-
},
|
57
|
-
toggleDrawer() {
|
58
|
-
this.$store.inspector.drawer.hidden =
|
59
|
-
!this.$store.inspector.drawer.hidden;
|
60
|
-
},
|
61
|
-
preview: {
|
62
|
-
width: null,
|
63
|
-
height: null,
|
64
|
-
},
|
65
|
-
};
|
66
|
-
}
|
@@ -1,47 +0,0 @@
|
|
1
|
-
export default function navGroup() {
|
2
|
-
return {
|
3
|
-
hidden: false,
|
4
|
-
children: [],
|
5
|
-
get id() {
|
6
|
-
return this.$root.id;
|
7
|
-
},
|
8
|
-
get open() {
|
9
|
-
return this.$store.nav.isOpen(this.id);
|
10
|
-
},
|
11
|
-
toggle() {
|
12
|
-
this.$store.nav.toggle(this.id);
|
13
|
-
},
|
14
|
-
getChildren() {
|
15
|
-
return this.$refs.items
|
16
|
-
? Array.from(this.$refs.items.querySelectorAll(":scope > li > div"))
|
17
|
-
: [];
|
18
|
-
},
|
19
|
-
navigateToFirstChild() {
|
20
|
-
if (this.open) {
|
21
|
-
const child = this.firstVisibleChild();
|
22
|
-
if (child) {
|
23
|
-
const link = child.querySelector(":scope > a.nav-link");
|
24
|
-
if (link) {
|
25
|
-
this.setLocation(link.getAttribute("href"));
|
26
|
-
}
|
27
|
-
}
|
28
|
-
}
|
29
|
-
},
|
30
|
-
filter(text) {
|
31
|
-
this.hidden = true;
|
32
|
-
this.getChildren().forEach((child) => {
|
33
|
-
const data = Alpine.$data(child);
|
34
|
-
data.filter(text);
|
35
|
-
if (!data.hidden) {
|
36
|
-
this.hidden = false;
|
37
|
-
}
|
38
|
-
});
|
39
|
-
},
|
40
|
-
firstVisibleChild() {
|
41
|
-
return this.getChildren().find((child) => {
|
42
|
-
const data = Alpine.$data(child);
|
43
|
-
return data.hidden === false;
|
44
|
-
});
|
45
|
-
},
|
46
|
-
};
|
47
|
-
}
|
@@ -1,29 +0,0 @@
|
|
1
|
-
export default function navItem(matchers) {
|
2
|
-
return {
|
3
|
-
hidden: false,
|
4
|
-
get id() {
|
5
|
-
return this.$root.id;
|
6
|
-
},
|
7
|
-
get path() {
|
8
|
-
return this.$root.getAttribute("data-path");
|
9
|
-
},
|
10
|
-
get active() {
|
11
|
-
return this.$store.nav.active === this.id;
|
12
|
-
},
|
13
|
-
navigate() {
|
14
|
-
this.setLocation(this.path);
|
15
|
-
if (this.$store.layout.mobile) {
|
16
|
-
this.$store.sidebar.open = false;
|
17
|
-
}
|
18
|
-
},
|
19
|
-
filter(text) {
|
20
|
-
this.hidden = false;
|
21
|
-
if (text.length) {
|
22
|
-
const matched = matchers.map((m) => m.includes(text));
|
23
|
-
this.hidden = !matched.filter((m) => m).length;
|
24
|
-
} else {
|
25
|
-
this.hidden = false;
|
26
|
-
}
|
27
|
-
},
|
28
|
-
};
|
29
|
-
}
|
@@ -1,28 +0,0 @@
|
|
1
|
-
export default function nav(filterable = true) {
|
2
|
-
return {
|
3
|
-
empty: false,
|
4
|
-
init() {
|
5
|
-
if (filterable) {
|
6
|
-
this.$watch("$store.filter.text", () => this.filter());
|
7
|
-
this.$nextTick(() => {
|
8
|
-
this.filter();
|
9
|
-
});
|
10
|
-
}
|
11
|
-
},
|
12
|
-
filter() {
|
13
|
-
this.empty = true;
|
14
|
-
this.getChildren().forEach((child) => {
|
15
|
-
const data = Alpine.$data(child);
|
16
|
-
data.filter(this.$store.filter.text);
|
17
|
-
if (!data.hidden) {
|
18
|
-
this.empty = false;
|
19
|
-
}
|
20
|
-
});
|
21
|
-
},
|
22
|
-
getChildren() {
|
23
|
-
return this.$refs.items
|
24
|
-
? Array.from(this.$refs.items.querySelectorAll(":scope > li > div"))
|
25
|
-
: [];
|
26
|
-
},
|
27
|
-
};
|
28
|
-
}
|
@@ -1,25 +0,0 @@
|
|
1
|
-
export default function page() {
|
2
|
-
return {
|
3
|
-
init() {},
|
4
|
-
scrollToTop() {
|
5
|
-
this.$refs.scroller.scrollTop = 0;
|
6
|
-
},
|
7
|
-
checkForNavigation(event) {
|
8
|
-
const link = event.target.closest("a[href]");
|
9
|
-
if (
|
10
|
-
link &&
|
11
|
-
!isExternalLink(link.href) &&
|
12
|
-
link.getAttribute("target") !== "_blank"
|
13
|
-
) {
|
14
|
-
event.preventDefault();
|
15
|
-
this.setLocation(link.href);
|
16
|
-
}
|
17
|
-
},
|
18
|
-
};
|
19
|
-
}
|
20
|
-
|
21
|
-
function isExternalLink(url) {
|
22
|
-
const tmp = document.createElement("a");
|
23
|
-
tmp.href = url;
|
24
|
-
return tmp.host !== window.location.host;
|
25
|
-
}
|
@@ -1,34 +0,0 @@
|
|
1
|
-
import debounce from "debounce";
|
2
|
-
|
3
|
-
export default function param(name, value, opts = {}) {
|
4
|
-
return {
|
5
|
-
name,
|
6
|
-
value,
|
7
|
-
updating: false,
|
8
|
-
init() {
|
9
|
-
if (opts.debounce) {
|
10
|
-
this.$watch(
|
11
|
-
"value",
|
12
|
-
debounce(() => this.updateIfValid(), opts.debounce)
|
13
|
-
);
|
14
|
-
} else {
|
15
|
-
this.$watch("value", () => this.updateIfValid());
|
16
|
-
}
|
17
|
-
},
|
18
|
-
setFocus() {
|
19
|
-
setTimeout(() => this.$root.focus(), 0);
|
20
|
-
},
|
21
|
-
updateIfValid() {
|
22
|
-
if (this.validate()) this.update();
|
23
|
-
},
|
24
|
-
update() {
|
25
|
-
const searchParams = new URLSearchParams(window.location.search);
|
26
|
-
searchParams.set(this.name, this.value);
|
27
|
-
const path = location.href.replace(location.search, "");
|
28
|
-
this.setLocation(`${path}?${searchParams.toString()}`);
|
29
|
-
},
|
30
|
-
validate() {
|
31
|
-
return this.$root.reportValidity ? this.$root.reportValidity() : true;
|
32
|
-
},
|
33
|
-
};
|
34
|
-
}
|
@@ -1,18 +0,0 @@
|
|
1
|
-
export default function sidebar() {
|
2
|
-
return {
|
3
|
-
init() {
|
4
|
-
this.$nextTick(() => this.setActiveNavItem());
|
5
|
-
},
|
6
|
-
setActiveNavItem() {
|
7
|
-
const target = this.$el.querySelector(
|
8
|
-
`[data-path="${window.location.pathname}"]`
|
9
|
-
);
|
10
|
-
this.$store.nav.active = target ? target.id : "";
|
11
|
-
},
|
12
|
-
setSplits(splits) {
|
13
|
-
if (splits.length) {
|
14
|
-
this.$store.sidebar.panelSplits = [splits[0] || 1.0, splits[2] || 1.0];
|
15
|
-
}
|
16
|
-
},
|
17
|
-
};
|
18
|
-
}
|
@@ -1,16 +0,0 @@
|
|
1
|
-
export default function sizeObserver() {
|
2
|
-
return {
|
3
|
-
width: 0,
|
4
|
-
height: 0,
|
5
|
-
init() {
|
6
|
-
const ro = new ResizeObserver((entries) => {
|
7
|
-
const rect = entries[0].contentRect;
|
8
|
-
this.width = Math.round(rect.width);
|
9
|
-
this.height = Math.round(rect.height);
|
10
|
-
});
|
11
|
-
ro.observe(this.$el);
|
12
|
-
this.width = Math.round(this.$el.clientWidth);
|
13
|
-
this.height = Math.round(this.$el.clientHeight);
|
14
|
-
},
|
15
|
-
};
|
16
|
-
}
|