lookbook 0.3.0.beta.0 → 0.3.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/README.md +5 -3
- data/app/assets/lookbook/css/app.css +2 -2
- data/app/assets/lookbook/js/nav.js +5 -2
- data/app/controllers/lookbook/app_controller.rb +3 -3
- data/app/views/lookbook/_workbench.html.erb +1 -1
- data/app/views/lookbook/layouts/app.html.erb +7 -7
- data/app/views/lookbook/nav/_leaf.html.erb +22 -0
- data/app/views/lookbook/nav/_node.html.erb +1 -1
- data/app/views/lookbook/nav/_preview.html.erb +10 -28
- data/app/views/lookbook/preview_group.html.erb +8 -0
- data/app/views/lookbook/workbench/_header.html.erb +4 -2
- data/app/views/lookbook/workbench/_preview.html.erb +1 -1
- data/lib/lookbook/engine.rb +8 -1
- data/lib/lookbook/preview.rb +1 -0
- data/lib/lookbook/version.rb +1 -1
- data/public/lookbook-assets/app.css +24 -50
- data/public/lookbook-assets/app.js +44 -87
- metadata +10 -9
- data/app/views/lookbook/layouts/group.html.erb +0 -6
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: e1f01b55ea75634f7e4cf2f7fe438ce6b56042daa5d7f178e50d0db7c267a644
|
|
4
|
+
data.tar.gz: 81fddb93ab9aed2d51a59ecd00deced19c97a395ced5de3223db0d229f3a57dd
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 535340241df2352ba1c0fa5983f178cdb76d5fc39f0b4c9bcc8c34e4dc782177a4110f85a47ac6632064ac52b064f6936fe9cb764d5a5f2a8b527c9a80342bff
|
|
7
|
+
data.tar.gz: 1d580f19491db04693d6e31941c198c4b1416665836d90436e84ddf4dadad7e325612be88c959fd2fff1900c061e2e54e2b8cbf82cda5ce947addcdba7bd251d
|
data/README.md
CHANGED
|
@@ -27,9 +27,9 @@ Lookbook uses [RDoc/Yard-style comment tags](https://rubydoc.info/gems/yard/file
|
|
|
27
27
|
- Resizable preview window for responsive testing
|
|
28
28
|
- Highlighted preview source code and HTML output
|
|
29
29
|
- Add notes via comments in the preview file (markdown supported)
|
|
30
|
-
- Auto-updating UI when component or preview files are updated
|
|
31
|
-
-
|
|
32
|
-
-
|
|
30
|
+
- Auto-updating UI when component or preview files are updated _(Rails v6.0+ only)_
|
|
31
|
+
- Hide, group and rename preview examples using comment tags
|
|
32
|
+
- Fully compatible with standard the ViewComponent preview system
|
|
33
33
|
|
|
34
34
|
## Lookbook demo
|
|
35
35
|
|
|
@@ -248,6 +248,8 @@ However the following Lookbook-specific config options are also available:
|
|
|
248
248
|
|
|
249
249
|
### UI auto-refresh
|
|
250
250
|
|
|
251
|
+
> ⚠️ UI auto-refresh is only supported in Rails v6.0+
|
|
252
|
+
|
|
251
253
|
Disable/enable the auto-updating of the Lookbook UI when files change. Enabled by default.
|
|
252
254
|
|
|
253
255
|
```ruby
|
|
@@ -21,8 +21,11 @@ export default function () {
|
|
|
21
21
|
this.$dispatch("nav:updated");
|
|
22
22
|
});
|
|
23
23
|
},
|
|
24
|
-
navigate(
|
|
25
|
-
|
|
24
|
+
navigate(path) {
|
|
25
|
+
if (path instanceof Event) {
|
|
26
|
+
path = path.currentTarget.href;
|
|
27
|
+
}
|
|
28
|
+
history.pushState({}, null, path);
|
|
26
29
|
this.$dispatch("popstate");
|
|
27
30
|
},
|
|
28
31
|
focusFilter() {
|
|
@@ -89,13 +89,13 @@ module Lookbook
|
|
|
89
89
|
|
|
90
90
|
def rendered_example
|
|
91
91
|
if @example.type == :group
|
|
92
|
-
|
|
92
|
+
examples = @example.examples.map do |example|
|
|
93
93
|
{
|
|
94
94
|
label: example.label,
|
|
95
|
-
|
|
95
|
+
html: preview_controller.render_example_to_string(@preview, example.name)
|
|
96
96
|
}
|
|
97
97
|
end
|
|
98
|
-
joined = render_to_string "
|
|
98
|
+
joined = render_to_string "./preview_group", locals: {examples: examples}, layout: nil
|
|
99
99
|
preview_controller.render_in_layout_to_string(joined, @preview.lookbook_layout)
|
|
100
100
|
else
|
|
101
101
|
preview_controller.request.params[:path] = "#{@preview.preview_name}/#{@example.name}".chomp("/")
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
<div id="workbench" class="bg-gray-50 h-
|
|
1
|
+
<div id="workbench" class="bg-gray-50 h-screen flex flex-col" x-data="workbench">
|
|
2
2
|
<%= render "./workbench/header" %>
|
|
3
3
|
<div class="md:grid flex-grow" :style="`grid-template-rows: 1fr 1px ${$store.inspector.height}px`">
|
|
4
4
|
<%= render "./workbench/preview" %>
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<!DOCTYPE html>
|
|
2
|
-
<html lang="en" class="h-
|
|
2
|
+
<html lang="en" class="h-screen">
|
|
3
3
|
<head>
|
|
4
4
|
<meta charset="UTF-8">
|
|
5
5
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
|
|
18
18
|
<title><%= [@example&.label, @preview&.label, "Lookbook"].compact.join(" :: ") %></title>
|
|
19
19
|
</head>
|
|
20
|
-
<body class="text-gray-800 font-sans text-sm antialiased h-
|
|
20
|
+
<body class="text-gray-800 font-sans text-sm antialiased h-screen overflow-hidden">
|
|
21
21
|
<div
|
|
22
22
|
x-data="page"
|
|
23
23
|
x-effect="updateTitle"
|
|
@@ -25,15 +25,15 @@
|
|
|
25
25
|
@popstate.window="fetchHTML().then(doc => { $dispatch('document:loaded', {doc}); sidebarOpenMobile = false})"
|
|
26
26
|
@sidebar:toggle.window="sidebarOpenMobile = !sidebarOpenMobile"
|
|
27
27
|
:style="`grid-template-columns: ${$store.nav.width}px 1px 1fr;`"
|
|
28
|
-
class="md:grid w-screen
|
|
28
|
+
class="md:grid w-screen h-screen"
|
|
29
29
|
>
|
|
30
|
-
<div class="h-full
|
|
30
|
+
<div class="h-full bg-gray-100 overflow-hidden" x-show="$screen('md') || sidebarOpenMobile" x-cloak>
|
|
31
31
|
<%= render "./sidebar" %>
|
|
32
32
|
</div>
|
|
33
|
-
<div x-data="split(splitProps)" class="h-
|
|
34
|
-
<div class="w-[9px] h-full
|
|
33
|
+
<div x-data="split(splitProps)" class="h-full gutter border-r border-gray-300 relative" x-show="$screen('md')" x-cloak>
|
|
34
|
+
<div class="w-[9px] h-full bg-transparent hover:bg-indigo-100 hover:bg-opacity-20 transition absolute top-0 bottom-0 transform -translate-x-1/2 cursor-[col-resize] z-10"></div>
|
|
35
35
|
</div>
|
|
36
|
-
<main id="main" x-effect="render" class="h-
|
|
36
|
+
<main id="main" x-effect="render" class="h-full overflow-hidden w-full" x-show="!$screen('md') || !sidebarOpenMobile" x-cloak>
|
|
37
37
|
<%= yield %>
|
|
38
38
|
</main>
|
|
39
39
|
</div>
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
<%
|
|
2
|
+
path = show_path leaf.path
|
|
3
|
+
display ||= :leaf
|
|
4
|
+
label ||= leaf.label
|
|
5
|
+
%>
|
|
6
|
+
<li x-data="navLeaf" :class="{hidden}" x-init="matchers = <%= leaf.matchers.to_json %>; path = '<%= path %>'; setActive()" @popstate.window="setActive">
|
|
7
|
+
<a href="<%= path %>"
|
|
8
|
+
class="pr-3 py-[5px] flex items-center w-full group transition hover:bg-gray-200 hover:bg-opacity-50"
|
|
9
|
+
style="<%= nav_padding_style(depth) %>"
|
|
10
|
+
:class="{'!bg-indigo-100':active}"
|
|
11
|
+
@click.stop.prevent="navigate"
|
|
12
|
+
>
|
|
13
|
+
<div class="relative w-3.5 h-3.5 mr-1.5 <%= "ml-[3px]" if display == :node %> " :class="active ? 'text-gray-900' : 'text-indigo-500'">
|
|
14
|
+
<svg class="feather flex-none group-hover:text-indigo-800 transition w-3.5 h-3.5">
|
|
15
|
+
<use xlink:href="/lookbook-assets/feather-sprite.svg#<%= display == :node ? "layers" : "eye" %>" />
|
|
16
|
+
</svg>
|
|
17
|
+
</div>
|
|
18
|
+
<div class="truncate whitespace-nowrap <%= "font-bold" if display == :node %>">
|
|
19
|
+
<%= label %>
|
|
20
|
+
</div>
|
|
21
|
+
</a>
|
|
22
|
+
</li>
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<li id="<%= node.id %>" x-data="navNode" <% if node.hierarchy_depth == 1 %> class="py-1 border-b border-gray-300 cursor-pointer"<% end %> :class="{hidden}" x-cloak>
|
|
2
|
-
<div @click="toggle" style="<%= nav_padding_style(node.hierarchy_depth) %>">
|
|
2
|
+
<div @click="toggle(); if (open()) { <%= "navigate('#{path}')" if defined?(path) %>}" style="<%= nav_padding_style(node.hierarchy_depth) %>" class="hover:bg-gray-200 hover:bg-opacity-50">
|
|
3
3
|
<div class="flex items-center cursor-pointer pr-3 py-[5px]">
|
|
4
4
|
<svg class="feather w-3 h-3 mr-1 text-gray-500 flex-none">
|
|
5
5
|
<use xlink:href="/lookbook-assets/feather-sprite.svg#chevron-down" x-show="open" x-cloak />
|
|
@@ -1,29 +1,11 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
style="<%= nav_padding_style(example.hierarchy_depth + 1) %>"
|
|
8
|
-
:class="{'!bg-indigo-100':active}"
|
|
9
|
-
@click.stop.prevent="navigate"
|
|
10
|
-
>
|
|
11
|
-
<div class="relative w-3.5 h-3.5 mr-1.5" :class="active ? 'text-gray-900' : 'text-indigo-500'">
|
|
12
|
-
<svg class="feather flex-none group-hover:text-indigo-800 transition <% if example.type == :group %> absolute top-[-2px] left-[-2px] w-3 h-3<% else %>w-3.5 h-3.5<% end %>">
|
|
13
|
-
<use xlink:href="/lookbook-assets/feather-sprite.svg#eye" />
|
|
14
|
-
</svg>
|
|
15
|
-
<% if example.type == :group %>
|
|
16
|
-
<svg class="feather w-3 h-3 flex-none group-hover:text-indigo-800 transition absolute top-[4px] left-[4px]">
|
|
17
|
-
<use xlink:href="/lookbook-assets/feather-sprite.svg#eye" />
|
|
18
|
-
</svg>
|
|
19
|
-
<% end %>
|
|
20
|
-
</div>
|
|
21
|
-
<div class="truncate whitespace-nowrap">
|
|
22
|
-
<%= example.label %>
|
|
23
|
-
</div>
|
|
24
|
-
</a>
|
|
25
|
-
</li>
|
|
1
|
+
<% examples = node.get_examples %>
|
|
2
|
+
<% if examples.many? %>
|
|
3
|
+
<%= render "./nav/node", node: node, path: show_path(examples.first.path) do %>
|
|
4
|
+
<% examples.each do |example| %>
|
|
5
|
+
<%= render "./nav/leaf", leaf: example, depth: example.hierarchy_depth + 1 %>
|
|
6
|
+
<% end %>
|
|
26
7
|
<% end %>
|
|
27
|
-
<%
|
|
28
|
-
|
|
29
|
-
|
|
8
|
+
<% else %>
|
|
9
|
+
<% example = examples.first %>
|
|
10
|
+
<%= render "./nav/leaf", leaf: example, depth: example.hierarchy_depth, label: node.label, display: :node %>
|
|
11
|
+
<% end %>
|
|
@@ -2,8 +2,10 @@
|
|
|
2
2
|
<div class="flex items-center">
|
|
3
3
|
<div class="flex items-center space-x-1">
|
|
4
4
|
<strong class="whitespace-nowrap truncate"><%= @preview.label %></strong>
|
|
5
|
-
|
|
6
|
-
|
|
5
|
+
<% if @preview.get_examples.many? %>
|
|
6
|
+
<span>/</span>
|
|
7
|
+
<span class="whitespace-nowrap truncate"><%= @example.label %></span>
|
|
8
|
+
<% end %>
|
|
7
9
|
</div>
|
|
8
10
|
</div>
|
|
9
11
|
<div class="flex text-xs ml-auto font-monospace text-gray-700 space-x-1" x-show="$screen('md')">
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
<div id="preview" class="h-full
|
|
1
|
+
<div id="preview" class="h-full md:h-auto md:min-h-0 flex w-full bg-gray-50">
|
|
2
2
|
<div class="relative mx-auto bg-white" x-data="preview" :style="`width: ${$screen('md') ? $store.preview.width : '100%'}`">
|
|
3
3
|
<iframe seamless
|
|
4
4
|
class="absolute h-full inset-0 w-full border-l border-gray-300 md:pr-4 md:-mx-px"
|
data/lib/lookbook/engine.rb
CHANGED
|
@@ -83,7 +83,14 @@ module Lookbook
|
|
|
83
83
|
|
|
84
84
|
class << self
|
|
85
85
|
def websocket
|
|
86
|
-
|
|
86
|
+
if Rails.version.to_f >= 6.0
|
|
87
|
+
@websocket ||= ActionCable::Server::Base.new(config: Lookbook::Engine.cable)
|
|
88
|
+
else
|
|
89
|
+
@websocket = ActionCable::Server::Base.new
|
|
90
|
+
@websocket.config = Lookbook::Engine.cable
|
|
91
|
+
|
|
92
|
+
@websocket
|
|
93
|
+
end
|
|
87
94
|
end
|
|
88
95
|
|
|
89
96
|
def cable
|
data/lib/lookbook/preview.rb
CHANGED
data/lib/lookbook/version.rb
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/*! tailwindcss v2.2.
|
|
1
|
+
/*! tailwindcss v2.2.7 | MIT License | https://tailwindcss.com */
|
|
2
2
|
|
|
3
3
|
/*! modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize */
|
|
4
4
|
|
|
@@ -475,18 +475,6 @@ button,
|
|
|
475
475
|
cursor: pointer;
|
|
476
476
|
}
|
|
477
477
|
|
|
478
|
-
/**
|
|
479
|
-
* Override legacy focus reset from Normalize with modern Firefox focus styles.
|
|
480
|
-
*
|
|
481
|
-
* This is actually an improvement over the new defaults in Firefox in our testing,
|
|
482
|
-
* as it triggers the better focus styles even for links, which still use a dotted
|
|
483
|
-
* outline in Firefox by default.
|
|
484
|
-
*/
|
|
485
|
-
|
|
486
|
-
:-moz-focusring {
|
|
487
|
-
outline: auto;
|
|
488
|
-
}
|
|
489
|
-
|
|
490
478
|
table {
|
|
491
479
|
border-collapse: collapse;
|
|
492
480
|
}
|
|
@@ -818,12 +806,10 @@ pre[class*="language-"] {
|
|
|
818
806
|
fill: none;
|
|
819
807
|
}
|
|
820
808
|
|
|
821
|
-
.h-fill {
|
|
822
|
-
height: -webkit-fill-available;
|
|
823
|
-
}
|
|
824
|
-
|
|
825
809
|
.min-h-fill {
|
|
826
810
|
min-height: -webkit-fill-available;
|
|
811
|
+
min-height: -moz-available;
|
|
812
|
+
min-height: fill-available;
|
|
827
813
|
}
|
|
828
814
|
|
|
829
815
|
::-webkit-scrollbar {
|
|
@@ -1494,22 +1480,6 @@ pre[class*="language-"] {
|
|
|
1494
1480
|
bottom: 0px;
|
|
1495
1481
|
}
|
|
1496
1482
|
|
|
1497
|
-
.top-\[-2px\] {
|
|
1498
|
-
top: -2px;
|
|
1499
|
-
}
|
|
1500
|
-
|
|
1501
|
-
.left-\[-2px\] {
|
|
1502
|
-
left: -2px;
|
|
1503
|
-
}
|
|
1504
|
-
|
|
1505
|
-
.top-\[4px\] {
|
|
1506
|
-
top: 4px;
|
|
1507
|
-
}
|
|
1508
|
-
|
|
1509
|
-
.left-\[4px\] {
|
|
1510
|
-
left: 4px;
|
|
1511
|
-
}
|
|
1512
|
-
|
|
1513
1483
|
.left-4 {
|
|
1514
1484
|
left: 1rem;
|
|
1515
1485
|
}
|
|
@@ -1543,14 +1513,18 @@ pre[class*="language-"] {
|
|
|
1543
1513
|
margin-top: 0.5rem;
|
|
1544
1514
|
}
|
|
1545
1515
|
|
|
1546
|
-
.mr-1 {
|
|
1547
|
-
margin-right: 0.25rem;
|
|
1548
|
-
}
|
|
1549
|
-
|
|
1550
1516
|
.mr-1\.5 {
|
|
1551
1517
|
margin-right: 0.375rem;
|
|
1552
1518
|
}
|
|
1553
1519
|
|
|
1520
|
+
.ml-\[3px\] {
|
|
1521
|
+
margin-left: 3px;
|
|
1522
|
+
}
|
|
1523
|
+
|
|
1524
|
+
.mr-1 {
|
|
1525
|
+
margin-right: 0.25rem;
|
|
1526
|
+
}
|
|
1527
|
+
|
|
1554
1528
|
.mr-3 {
|
|
1555
1529
|
margin-right: 0.75rem;
|
|
1556
1530
|
}
|
|
@@ -1595,14 +1569,14 @@ pre[class*="language-"] {
|
|
|
1595
1569
|
height: 0.75rem;
|
|
1596
1570
|
}
|
|
1597
1571
|
|
|
1598
|
-
.h-\[11px\] {
|
|
1599
|
-
height: 11px;
|
|
1600
|
-
}
|
|
1601
|
-
|
|
1602
1572
|
.h-screen {
|
|
1603
1573
|
height: 100vh;
|
|
1604
1574
|
}
|
|
1605
1575
|
|
|
1576
|
+
.h-\[11px\] {
|
|
1577
|
+
height: 11px;
|
|
1578
|
+
}
|
|
1579
|
+
|
|
1606
1580
|
.h-3\.5 {
|
|
1607
1581
|
height: 0.875rem;
|
|
1608
1582
|
}
|
|
@@ -1864,16 +1838,16 @@ pre[class*="language-"] {
|
|
|
1864
1838
|
padding-right: 1rem;
|
|
1865
1839
|
}
|
|
1866
1840
|
|
|
1867
|
-
.py-1 {
|
|
1868
|
-
padding-top: 0.25rem;
|
|
1869
|
-
padding-bottom: 0.25rem;
|
|
1870
|
-
}
|
|
1871
|
-
|
|
1872
1841
|
.py-\[5px\] {
|
|
1873
1842
|
padding-top: 5px;
|
|
1874
1843
|
padding-bottom: 5px;
|
|
1875
1844
|
}
|
|
1876
1845
|
|
|
1846
|
+
.py-1 {
|
|
1847
|
+
padding-top: 0.25rem;
|
|
1848
|
+
padding-bottom: 0.25rem;
|
|
1849
|
+
}
|
|
1850
|
+
|
|
1877
1851
|
.py-2 {
|
|
1878
1852
|
padding-top: 0.5rem;
|
|
1879
1853
|
padding-bottom: 0.5rem;
|
|
@@ -1975,14 +1949,14 @@ pre[class*="language-"] {
|
|
|
1975
1949
|
color: rgba(31, 41, 55, var(--tw-text-opacity));
|
|
1976
1950
|
}
|
|
1977
1951
|
|
|
1978
|
-
.text-
|
|
1952
|
+
.text-gray-900 {
|
|
1979
1953
|
--tw-text-opacity: 1;
|
|
1980
|
-
color: rgba(
|
|
1954
|
+
color: rgba(17, 24, 39, var(--tw-text-opacity));
|
|
1981
1955
|
}
|
|
1982
1956
|
|
|
1983
|
-
.text-
|
|
1957
|
+
.text-indigo-500 {
|
|
1984
1958
|
--tw-text-opacity: 1;
|
|
1985
|
-
color: rgba(
|
|
1959
|
+
color: rgba(99, 102, 241, var(--tw-text-opacity));
|
|
1986
1960
|
}
|
|
1987
1961
|
|
|
1988
1962
|
.\!text-gray-300 {
|
|
@@ -20,10 +20,7 @@
|
|
|
20
20
|
return a;
|
|
21
21
|
};
|
|
22
22
|
var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
|
|
23
|
-
var
|
|
24
|
-
throw new Error('Dynamic require of "' + x + '" is not supported');
|
|
25
|
-
};
|
|
26
|
-
var __commonJS = (cb, mod) => function __require2() {
|
|
23
|
+
var __commonJS = (cb, mod) => function __require() {
|
|
27
24
|
return mod || (0, cb[Object.keys(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
|
|
28
25
|
};
|
|
29
26
|
var __reExport = (target, module, desc) => {
|
|
@@ -2222,7 +2219,7 @@
|
|
|
2222
2219
|
function closestDataStack(node) {
|
|
2223
2220
|
if (node._x_dataStack)
|
|
2224
2221
|
return node._x_dataStack;
|
|
2225
|
-
if (
|
|
2222
|
+
if (node instanceof ShadowRoot) {
|
|
2226
2223
|
return closestDataStack(node.host);
|
|
2227
2224
|
}
|
|
2228
2225
|
if (!node.parentNode) {
|
|
@@ -2428,9 +2425,6 @@ Expression: "${expression}"
|
|
|
2428
2425
|
return getDirectiveHandler(el, directive2);
|
|
2429
2426
|
});
|
|
2430
2427
|
}
|
|
2431
|
-
function attributesOnly(attributes) {
|
|
2432
|
-
return Array.from(attributes).map(toTransformedAttributes()).filter((attr) => !outNonAlpineAttributes(attr));
|
|
2433
|
-
}
|
|
2434
2428
|
var isDeferringHandlers = false;
|
|
2435
2429
|
var directiveHandlerStacks = new Map();
|
|
2436
2430
|
var currentHandlerStackKey = Symbol();
|
|
@@ -2484,8 +2478,7 @@ Expression: "${expression}"
|
|
|
2484
2478
|
return { name, value };
|
|
2485
2479
|
};
|
|
2486
2480
|
var into = (i) => i;
|
|
2487
|
-
function toTransformedAttributes(callback
|
|
2488
|
-
}) {
|
|
2481
|
+
function toTransformedAttributes(callback) {
|
|
2489
2482
|
return ({ name, value }) => {
|
|
2490
2483
|
let { name: newName, value: newValue } = attributeTransformers.reduce((carry, transform) => {
|
|
2491
2484
|
return transform(carry);
|
|
@@ -2565,7 +2558,7 @@ Expression: "${expression}"
|
|
|
2565
2558
|
isHolding = true;
|
|
2566
2559
|
}
|
|
2567
2560
|
function walk(el, callback) {
|
|
2568
|
-
if (
|
|
2561
|
+
if (el instanceof ShadowRoot) {
|
|
2569
2562
|
Array.from(el.children).forEach((el2) => walk(el2, callback));
|
|
2570
2563
|
return;
|
|
2571
2564
|
}
|
|
@@ -2593,7 +2586,7 @@ Expression: "${expression}"
|
|
|
2593
2586
|
onAttributesAdded((el, attrs) => {
|
|
2594
2587
|
directives(el, attrs).forEach((handle) => handle());
|
|
2595
2588
|
});
|
|
2596
|
-
let outNestedComponents = (el) => !closestRoot(el.parentElement
|
|
2589
|
+
let outNestedComponents = (el) => !closestRoot(el.parentElement);
|
|
2597
2590
|
Array.from(document.querySelectorAll(allSelectors())).filter(outNestedComponents).forEach((el) => {
|
|
2598
2591
|
initTree(el);
|
|
2599
2592
|
});
|
|
@@ -2613,15 +2606,14 @@ Expression: "${expression}"
|
|
|
2613
2606
|
function addInitSelector(selectorCallback) {
|
|
2614
2607
|
initSelectorCallbacks.push(selectorCallback);
|
|
2615
2608
|
}
|
|
2616
|
-
function closestRoot(el
|
|
2609
|
+
function closestRoot(el) {
|
|
2617
2610
|
if (!el)
|
|
2618
2611
|
return;
|
|
2619
|
-
|
|
2620
|
-
if (selectors.some((selector) => el.matches(selector)))
|
|
2612
|
+
if (rootSelectors().some((selector) => el.matches(selector)))
|
|
2621
2613
|
return el;
|
|
2622
2614
|
if (!el.parentElement)
|
|
2623
2615
|
return;
|
|
2624
|
-
return closestRoot(el.parentElement
|
|
2616
|
+
return closestRoot(el.parentElement);
|
|
2625
2617
|
}
|
|
2626
2618
|
function isRoot(el) {
|
|
2627
2619
|
return rootSelectors().some((selector) => el.matches(selector));
|
|
@@ -2637,29 +2629,6 @@ Expression: "${expression}"
|
|
|
2637
2629
|
function destroyTree(root) {
|
|
2638
2630
|
walk(root, (el) => cleanupAttributes(el));
|
|
2639
2631
|
}
|
|
2640
|
-
function debounce(func, wait) {
|
|
2641
|
-
var timeout;
|
|
2642
|
-
return function() {
|
|
2643
|
-
var context = this, args = arguments;
|
|
2644
|
-
var later = function() {
|
|
2645
|
-
timeout = null;
|
|
2646
|
-
func.apply(context, args);
|
|
2647
|
-
};
|
|
2648
|
-
clearTimeout(timeout);
|
|
2649
|
-
timeout = setTimeout(later, wait);
|
|
2650
|
-
};
|
|
2651
|
-
}
|
|
2652
|
-
function throttle(func, limit) {
|
|
2653
|
-
let inThrottle;
|
|
2654
|
-
return function() {
|
|
2655
|
-
let context = this, args = arguments;
|
|
2656
|
-
if (!inThrottle) {
|
|
2657
|
-
func.apply(context, args);
|
|
2658
|
-
inThrottle = true;
|
|
2659
|
-
setTimeout(() => inThrottle = false, limit);
|
|
2660
|
-
}
|
|
2661
|
-
};
|
|
2662
|
-
}
|
|
2663
2632
|
function plugin(callback) {
|
|
2664
2633
|
callback(alpine_default);
|
|
2665
2634
|
}
|
|
@@ -2746,7 +2715,7 @@ Expression: "${expression}"
|
|
|
2746
2715
|
get raw() {
|
|
2747
2716
|
return raw;
|
|
2748
2717
|
},
|
|
2749
|
-
version: "3.4
|
|
2718
|
+
version: "3.2.4",
|
|
2750
2719
|
disableEffectScheduling,
|
|
2751
2720
|
setReactivityEngine,
|
|
2752
2721
|
addRootSelector,
|
|
@@ -2757,8 +2726,6 @@ Expression: "${expression}"
|
|
|
2757
2726
|
interceptor,
|
|
2758
2727
|
mutateDom,
|
|
2759
2728
|
directive,
|
|
2760
|
-
throttle,
|
|
2761
|
-
debounce,
|
|
2762
2729
|
evaluate,
|
|
2763
2730
|
initTree,
|
|
2764
2731
|
nextTick,
|
|
@@ -2793,23 +2760,7 @@ Expression: "${expression}"
|
|
|
2793
2760
|
}));
|
|
2794
2761
|
});
|
|
2795
2762
|
magic("store", getStores);
|
|
2796
|
-
magic("
|
|
2797
|
-
magic("refs", (el) => {
|
|
2798
|
-
if (el._x_refs_proxy)
|
|
2799
|
-
return el._x_refs_proxy;
|
|
2800
|
-
el._x_refs_proxy = mergeProxies(getArrayOfRefObject(el));
|
|
2801
|
-
return el._x_refs_proxy;
|
|
2802
|
-
});
|
|
2803
|
-
function getArrayOfRefObject(el) {
|
|
2804
|
-
let refObjects = [];
|
|
2805
|
-
let currentEl = el;
|
|
2806
|
-
while (currentEl) {
|
|
2807
|
-
if (currentEl._x_refs)
|
|
2808
|
-
refObjects.push(currentEl._x_refs);
|
|
2809
|
-
currentEl = currentEl.parentNode;
|
|
2810
|
-
}
|
|
2811
|
-
return refObjects;
|
|
2812
|
-
}
|
|
2763
|
+
magic("refs", (el) => closestRoot(el)._x_refs || {});
|
|
2813
2764
|
magic("el", (el) => el);
|
|
2814
2765
|
function setClasses(el, value) {
|
|
2815
2766
|
if (Array.isArray(value)) {
|
|
@@ -3017,9 +2968,7 @@ Expression: "${expression}"
|
|
|
3017
2968
|
};
|
|
3018
2969
|
}
|
|
3019
2970
|
window.Element.prototype._x_toggleAndCascadeWithTransitions = function(el, value, show, hide) {
|
|
3020
|
-
let clickAwayCompatibleShow = () =>
|
|
3021
|
-
document.visibilityState === "visible" ? requestAnimationFrame(show) : setTimeout(show);
|
|
3022
|
-
};
|
|
2971
|
+
let clickAwayCompatibleShow = () => requestAnimationFrame(show);
|
|
3023
2972
|
if (value) {
|
|
3024
2973
|
el._x_transition ? el._x_transition.in(show) : clickAwayCompatibleShow();
|
|
3025
2974
|
return;
|
|
@@ -3299,7 +3248,7 @@ Expression: "${expression}"
|
|
|
3299
3248
|
return booleanAttributes.includes(attrName);
|
|
3300
3249
|
}
|
|
3301
3250
|
function attributeShouldntBePreservedIfFalsy(name) {
|
|
3302
|
-
return !["aria-pressed", "aria-checked"
|
|
3251
|
+
return !["aria-pressed", "aria-checked"].includes(name);
|
|
3303
3252
|
}
|
|
3304
3253
|
function on(el, event, modifiers, callback) {
|
|
3305
3254
|
let listenerTarget = el;
|
|
@@ -3351,12 +3300,12 @@ Expression: "${expression}"
|
|
|
3351
3300
|
if (modifiers.includes("debounce")) {
|
|
3352
3301
|
let nextModifier = modifiers[modifiers.indexOf("debounce") + 1] || "invalid-wait";
|
|
3353
3302
|
let wait = isNumeric(nextModifier.split("ms")[0]) ? Number(nextModifier.split("ms")[0]) : 250;
|
|
3354
|
-
handler3 = debounce(handler3, wait);
|
|
3303
|
+
handler3 = debounce(handler3, wait, this);
|
|
3355
3304
|
}
|
|
3356
3305
|
if (modifiers.includes("throttle")) {
|
|
3357
3306
|
let nextModifier = modifiers[modifiers.indexOf("throttle") + 1] || "invalid-wait";
|
|
3358
3307
|
let wait = isNumeric(nextModifier.split("ms")[0]) ? Number(nextModifier.split("ms")[0]) : 250;
|
|
3359
|
-
handler3 = throttle(handler3, wait);
|
|
3308
|
+
handler3 = throttle(handler3, wait, this);
|
|
3360
3309
|
}
|
|
3361
3310
|
if (modifiers.includes("once")) {
|
|
3362
3311
|
handler3 = wrapHandler(handler3, (next, e) => {
|
|
@@ -3375,6 +3324,29 @@ Expression: "${expression}"
|
|
|
3375
3324
|
function camelCase2(subject) {
|
|
3376
3325
|
return subject.toLowerCase().replace(/-(\w)/g, (match, char) => char.toUpperCase());
|
|
3377
3326
|
}
|
|
3327
|
+
function debounce(func, wait) {
|
|
3328
|
+
var timeout;
|
|
3329
|
+
return function() {
|
|
3330
|
+
var context = this, args = arguments;
|
|
3331
|
+
var later = function() {
|
|
3332
|
+
timeout = null;
|
|
3333
|
+
func.apply(context, args);
|
|
3334
|
+
};
|
|
3335
|
+
clearTimeout(timeout);
|
|
3336
|
+
timeout = setTimeout(later, wait);
|
|
3337
|
+
};
|
|
3338
|
+
}
|
|
3339
|
+
function throttle(func, limit) {
|
|
3340
|
+
let inThrottle;
|
|
3341
|
+
return function() {
|
|
3342
|
+
let context = this, args = arguments;
|
|
3343
|
+
if (!inThrottle) {
|
|
3344
|
+
func.apply(context, args);
|
|
3345
|
+
inThrottle = true;
|
|
3346
|
+
setTimeout(() => inThrottle = false, limit);
|
|
3347
|
+
}
|
|
3348
|
+
};
|
|
3349
|
+
}
|
|
3378
3350
|
function isNumeric(subject) {
|
|
3379
3351
|
return !Array.isArray(subject) && !isNaN(subject);
|
|
3380
3352
|
}
|
|
@@ -3426,9 +3398,7 @@ Expression: "${expression}"
|
|
|
3426
3398
|
up: "arrow-up",
|
|
3427
3399
|
down: "arrow-down",
|
|
3428
3400
|
left: "arrow-left",
|
|
3429
|
-
right: "arrow-right"
|
|
3430
|
-
period: ".",
|
|
3431
|
-
equal: "="
|
|
3401
|
+
right: "arrow-right"
|
|
3432
3402
|
};
|
|
3433
3403
|
modifierToKeyMap[key] = key;
|
|
3434
3404
|
return Object.keys(modifierToKeyMap).map((modifier) => {
|
|
@@ -3509,12 +3479,7 @@ Expression: "${expression}"
|
|
|
3509
3479
|
}
|
|
3510
3480
|
directive("cloak", (el) => queueMicrotask(() => mutateDom(() => el.removeAttribute(prefix("cloak")))));
|
|
3511
3481
|
addInitSelector(() => `[${prefix("init")}]`);
|
|
3512
|
-
directive("init", skipDuringClone((el, { expression }) => {
|
|
3513
|
-
if (typeof expression === "string") {
|
|
3514
|
-
return !!expression.trim() && evaluate(el, expression, {}, false);
|
|
3515
|
-
}
|
|
3516
|
-
return evaluate(el, expression, {}, false);
|
|
3517
|
-
}));
|
|
3482
|
+
directive("init", skipDuringClone((el, { expression }) => evaluate(el, expression, {}, false)));
|
|
3518
3483
|
directive("text", (el, { expression }, { effect: effect3, evaluateLater: evaluateLater2 }) => {
|
|
3519
3484
|
let evaluate2 = evaluateLater2(expression);
|
|
3520
3485
|
effect3(() => {
|
|
@@ -3554,12 +3519,6 @@ Expression: "${expression}"
|
|
|
3554
3519
|
cleanupRunners.pop()();
|
|
3555
3520
|
getBindings((bindings) => {
|
|
3556
3521
|
let attributes = Object.entries(bindings).map(([name, value]) => ({ name, value }));
|
|
3557
|
-
attributesOnly(attributes).forEach(({ name, value }, index2) => {
|
|
3558
|
-
attributes[index2] = {
|
|
3559
|
-
name: `x-bind:${name}`,
|
|
3560
|
-
value: `"${value}"`
|
|
3561
|
-
};
|
|
3562
|
-
});
|
|
3563
3522
|
directives(el, attributes, original).map((handle) => {
|
|
3564
3523
|
cleanupRunners.push(handle.runCleanups);
|
|
3565
3524
|
handle();
|
|
@@ -3759,11 +3718,6 @@ Expression: "${expression}"
|
|
|
3759
3718
|
names.forEach((name, i) => {
|
|
3760
3719
|
scopeVariables[name] = item[i];
|
|
3761
3720
|
});
|
|
3762
|
-
} else if (/^\{.*\}$/.test(iteratorNames.item) && !Array.isArray(item) && typeof item === "object") {
|
|
3763
|
-
let names = iteratorNames.item.replace("{", "").replace("}", "").split(",").map((i) => i.trim());
|
|
3764
|
-
names.forEach((name) => {
|
|
3765
|
-
scopeVariables[name] = item[name];
|
|
3766
|
-
});
|
|
3767
3721
|
} else {
|
|
3768
3722
|
scopeVariables[iteratorNames.item] = item;
|
|
3769
3723
|
}
|
|
@@ -8420,8 +8374,11 @@ Expression: "${expression}"
|
|
|
8420
8374
|
this.$dispatch("nav:updated");
|
|
8421
8375
|
});
|
|
8422
8376
|
},
|
|
8423
|
-
navigate(
|
|
8424
|
-
|
|
8377
|
+
navigate(path) {
|
|
8378
|
+
if (path instanceof Event) {
|
|
8379
|
+
path = path.currentTarget.href;
|
|
8380
|
+
}
|
|
8381
|
+
history.pushState({}, null, path);
|
|
8425
8382
|
this.$dispatch("popstate");
|
|
8426
8383
|
},
|
|
8427
8384
|
focusFilter() {
|
metadata
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: lookbook
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.3.
|
|
4
|
+
version: 0.3.1
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Mark Perkins
|
|
8
8
|
autorequire:
|
|
9
9
|
bindir: bin
|
|
10
10
|
cert_chain: []
|
|
11
|
-
date: 2021-
|
|
11
|
+
date: 2021-10-02 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: rails
|
|
@@ -16,14 +16,14 @@ dependencies:
|
|
|
16
16
|
requirements:
|
|
17
17
|
- - ">="
|
|
18
18
|
- !ruby/object:Gem::Version
|
|
19
|
-
version: '
|
|
19
|
+
version: '5.0'
|
|
20
20
|
type: :runtime
|
|
21
21
|
prerelease: false
|
|
22
22
|
version_requirements: !ruby/object:Gem::Requirement
|
|
23
23
|
requirements:
|
|
24
24
|
- - ">="
|
|
25
25
|
- !ruby/object:Gem::Version
|
|
26
|
-
version: '
|
|
26
|
+
version: '5.0'
|
|
27
27
|
- !ruby/object:Gem::Dependency
|
|
28
28
|
name: view_component
|
|
29
29
|
requirement: !ruby/object:Gem::Requirement
|
|
@@ -72,14 +72,14 @@ dependencies:
|
|
|
72
72
|
requirements:
|
|
73
73
|
- - "~>"
|
|
74
74
|
- !ruby/object:Gem::Version
|
|
75
|
-
version: '3.
|
|
75
|
+
version: '3.0'
|
|
76
76
|
type: :runtime
|
|
77
77
|
prerelease: false
|
|
78
78
|
version_requirements: !ruby/object:Gem::Requirement
|
|
79
79
|
requirements:
|
|
80
80
|
- - "~>"
|
|
81
81
|
- !ruby/object:Gem::Version
|
|
82
|
-
version: '3.
|
|
82
|
+
version: '3.0'
|
|
83
83
|
- !ruby/object:Gem::Dependency
|
|
84
84
|
name: yard
|
|
85
85
|
requirement: !ruby/object:Gem::Requirement
|
|
@@ -214,10 +214,11 @@ files:
|
|
|
214
214
|
- app/views/lookbook/app/not_found.html.erb
|
|
215
215
|
- app/views/lookbook/app/show.html.erb
|
|
216
216
|
- app/views/lookbook/layouts/app.html.erb
|
|
217
|
-
- app/views/lookbook/layouts/group.html.erb
|
|
218
217
|
- app/views/lookbook/nav/_collection.html.erb
|
|
218
|
+
- app/views/lookbook/nav/_leaf.html.erb
|
|
219
219
|
- app/views/lookbook/nav/_node.html.erb
|
|
220
220
|
- app/views/lookbook/nav/_preview.html.erb
|
|
221
|
+
- app/views/lookbook/preview_group.html.erb
|
|
221
222
|
- app/views/lookbook/shared/_clipboard.html.erb
|
|
222
223
|
- app/views/lookbook/shared/_header.html.erb
|
|
223
224
|
- app/views/lookbook/workbench/_header.html.erb
|
|
@@ -258,9 +259,9 @@ required_ruby_version: !ruby/object:Gem::Requirement
|
|
|
258
259
|
version: '0'
|
|
259
260
|
required_rubygems_version: !ruby/object:Gem::Requirement
|
|
260
261
|
requirements:
|
|
261
|
-
- - "
|
|
262
|
+
- - ">="
|
|
262
263
|
- !ruby/object:Gem::Version
|
|
263
|
-
version:
|
|
264
|
+
version: '0'
|
|
264
265
|
requirements: []
|
|
265
266
|
rubygems_version: 3.1.2
|
|
266
267
|
signing_key:
|