lookbook 0.3.0.beta.0 → 0.3.1
Sign up to get free protection for your applications and to get access to all the features.
- 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:
|