lookbook 0.8.0 → 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 -830
- 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 -61
- 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 -8
- data/app/controllers/lookbook/previews_controller.rb +60 -23
- data/app/helpers/lookbook/application_helper.rb +5 -1
- 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 -67
- 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 +5 -5
- 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 +79 -74
- 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 +21 -12
- data/lib/lookbook/page_collection.rb +8 -0
- data/lib/lookbook/params.rb +15 -4
- data/lib/lookbook/preview.rb +15 -6
- 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 +10 -2
- 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 +127 -114
- 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.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,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
|
-
}
|
@@ -1,25 +0,0 @@
|
|
1
|
-
import Split from "split-grid";
|
2
|
-
|
3
|
-
export default function splitter(direction, props = {}) {
|
4
|
-
return {
|
5
|
-
splits: [],
|
6
|
-
init() {
|
7
|
-
const type = `${direction === "vertical" ? "column" : "row"}Gutters`;
|
8
|
-
const element = this.$el;
|
9
|
-
Split({
|
10
|
-
[type]: [{ track: 1, element }],
|
11
|
-
minSize: props.minSize || 0,
|
12
|
-
writeStyle() {},
|
13
|
-
onDrag: (dir, track, style) => {
|
14
|
-
this.splits = style.split(" ").map((num) => parseFloat(num, 10));
|
15
|
-
},
|
16
|
-
onDragStart: () => {
|
17
|
-
this.$store.layout.reflowing = true;
|
18
|
-
},
|
19
|
-
onDragEnd: () => {
|
20
|
-
this.$store.layout.reflowing = false;
|
21
|
-
},
|
22
|
-
});
|
23
|
-
},
|
24
|
-
};
|
25
|
-
}
|
@@ -1,52 +0,0 @@
|
|
1
|
-
import tippy from "tippy.js";
|
2
|
-
|
3
|
-
export default function tabs() {
|
4
|
-
return {
|
5
|
-
width: 0,
|
6
|
-
tabsWidth: 0,
|
7
|
-
init() {
|
8
|
-
const ro = new ResizeObserver((entries) => {
|
9
|
-
this.width = Math.round(entries[0].contentRect.width);
|
10
|
-
});
|
11
|
-
ro.observe(this.$refs.tabs);
|
12
|
-
this.dropdown = tippy(this.$refs.toggle, {
|
13
|
-
allowHTML: true,
|
14
|
-
interactive: true,
|
15
|
-
trigger: "click",
|
16
|
-
placement: "bottom-end",
|
17
|
-
theme: "menu",
|
18
|
-
content: this.$refs.dropdown,
|
19
|
-
});
|
20
|
-
},
|
21
|
-
get tabs() {
|
22
|
-
return Array.from(
|
23
|
-
this.$refs.tabs ? this.$refs.tabs.querySelectorAll(":scope > a") : []
|
24
|
-
);
|
25
|
-
},
|
26
|
-
get visibleTabCount() {
|
27
|
-
let cumulativeWidth = 0;
|
28
|
-
for (let i = 0; i < this.tabs.length; i++) {
|
29
|
-
const el = this.tabs[i];
|
30
|
-
const margin = parseInt(
|
31
|
-
window
|
32
|
-
.getComputedStyle(el)
|
33
|
-
.getPropertyValue("margin-left")
|
34
|
-
.replace("px", ""),
|
35
|
-
10
|
36
|
-
);
|
37
|
-
cumulativeWidth += el.clientWidth + margin;
|
38
|
-
if (cumulativeWidth > this.width) {
|
39
|
-
this.tabsWidth = cumulativeWidth - el.clientWidth;
|
40
|
-
return i;
|
41
|
-
}
|
42
|
-
}
|
43
|
-
return this.tabs.length;
|
44
|
-
},
|
45
|
-
get hiddenTabs() {
|
46
|
-
return this.tabs.slice(this.visibleTabCount, -1);
|
47
|
-
},
|
48
|
-
hideDropdown() {
|
49
|
-
this.dropdown.hide();
|
50
|
-
},
|
51
|
-
};
|
52
|
-
}
|
@@ -1,15 +0,0 @@
|
|
1
|
-
import Split from "split-grid";
|
2
|
-
|
3
|
-
export default function (element, props) {
|
4
|
-
Split({
|
5
|
-
[`${props.direction === "vertical" ? "row" : "column"}Gutters`]: [
|
6
|
-
{ track: 1, element },
|
7
|
-
],
|
8
|
-
minSize: props.minSize,
|
9
|
-
writeStyle() {},
|
10
|
-
onDrag(dir, track, style) {
|
11
|
-
const splits = style.split(" ").map((num) => parseInt(num));
|
12
|
-
props.onDrag(splits);
|
13
|
-
},
|
14
|
-
});
|
15
|
-
}
|
@@ -1,26 +0,0 @@
|
|
1
|
-
import config from "../config";
|
2
|
-
|
3
|
-
export default function createSidebarStore(Alpine) {
|
4
|
-
const { defaultWidth, minWidth, maxWidth } = config.sidebar;
|
5
|
-
return {
|
6
|
-
openDesktop: Alpine.$persist(true).as("sidebar-open-desktop"),
|
7
|
-
openMobile: Alpine.$persist(false).as("sidebar-open-mobile"),
|
8
|
-
width: Alpine.$persist(defaultWidth).as("sidebar-width"),
|
9
|
-
panelSplits: Alpine.$persist([1.0, 1.0]).as(`sidebar-panel-splits`),
|
10
|
-
minWidth,
|
11
|
-
maxWidth,
|
12
|
-
get open() {
|
13
|
-
return Alpine.store("sidebar")[
|
14
|
-
Alpine.store("layout").desktop ? "openDesktop" : "openMobile"
|
15
|
-
];
|
16
|
-
},
|
17
|
-
toggle() {
|
18
|
-
const sidebar = Alpine.store("sidebar");
|
19
|
-
if (Alpine.store("layout").desktop) {
|
20
|
-
sidebar.openDesktop = !sidebar.openDesktop;
|
21
|
-
} else {
|
22
|
-
sidebar.openMobile = !sidebar.openMobile;
|
23
|
-
}
|
24
|
-
},
|
25
|
-
};
|
26
|
-
}
|
@@ -1,17 +0,0 @@
|
|
1
|
-
<%
|
2
|
-
language ||= "html"
|
3
|
-
wrap ||= nil;
|
4
|
-
%>
|
5
|
-
<% code ||= capture do %><%= yield %><% end %>
|
6
|
-
<% output = highlight(code, language, {
|
7
|
-
strip: defined?(strip) ? strip : true,
|
8
|
-
line_numbers: line_numbers ||= false,
|
9
|
-
highlight_lines: highlight_lines ||= [],
|
10
|
-
start_line: start_line ||= 0
|
11
|
-
}) %>
|
12
|
-
<div class="code not-prose <%= "numbered" if line_numbers %> <%= classes ||= "" %> <%= "focussed" if highlight_lines.any? %>"
|
13
|
-
x-data="code"
|
14
|
-
:class="{'wrapped': wrap}"
|
15
|
-
<% if wrap.present? %>x-effect="wrap = <%= wrap %>"<% end %>>
|
16
|
-
<pre><code class="highlight"><%= output %></code></pre>
|
17
|
-
</div>
|
@@ -1,11 +0,0 @@
|
|
1
|
-
<%= tag.button disabled: disabled ||= false,
|
2
|
-
"x-data": "copy",
|
3
|
-
"x-tooltip.theme.lookbook": "done ? 'copied!' : '#{tooltip ||= "copy to clipboard"}'",
|
4
|
-
"@click": "save",
|
5
|
-
":class": "{ '!text-green-600 hover:text-green-600': done, 'hover:text-indigo-500': !done}",
|
6
|
-
"x-cloak": true,
|
7
|
-
class: "text-gray-400 transition",
|
8
|
-
data: { target: target },
|
9
|
-
**(attrs ||= {}) do %>
|
10
|
-
<%= icon "${done ? 'check' : '#{icon ||= "clipboard"}'}", size: 4 %>
|
11
|
-
<% end %>
|