lookbook 2.0.5 → 2.1.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/app/components/lookbook/base_component.rb +1 -1
- data/app/components/lookbook/embed/inspector/component.html.erb +19 -4
- data/app/components/lookbook/embed/inspector/component.rb +1 -1
- data/app/components/lookbook/header/component.html.erb +4 -3
- data/app/components/lookbook/tag_component.rb +8 -1
- data/app/controllers/lookbook/embeds_controller.rb +3 -3
- data/app/controllers/lookbook/inspector_controller.rb +1 -1
- data/app/controllers/lookbook/pages_controller.rb +1 -1
- data/app/controllers/lookbook/previews_controller.rb +1 -1
- data/app/views/layouts/lookbook/embed.html.erb +6 -0
- data/app/views/lookbook/inspector/show.html.erb +3 -3
- data/app/views/lookbook/previews/group.html.erb +1 -0
- data/assets/css/lookbook.css +2 -2
- data/assets/js/app.js +6 -0
- data/lib/lookbook/cable/cable.rb +2 -2
- data/lib/lookbook/engine.rb +3 -1
- data/lib/lookbook/entities/collections/preview_collection.rb +1 -4
- data/lib/lookbook/entities/entity.rb +4 -0
- data/lib/lookbook/entities/scenario_entity.rb +1 -1
- data/lib/lookbook/entities/scenario_group_entity.rb +1 -1
- data/lib/lookbook/file_watcher.rb +1 -1
- data/lib/lookbook/helpers/ui_elements_helper.rb +3 -3
- data/lib/lookbook/param.rb +1 -1
- data/lib/lookbook/preview_controller_actions.rb +1 -1
- data/lib/lookbook/version.rb +1 -1
- data/lib/lookbook/websocket.rb +1 -1
- data/public/lookbook-assets/css/lookbook.css +21 -3
- data/public/lookbook-assets/css/lookbook.css.map +1 -1
- data/public/lookbook-assets/js/index.js +165 -162
- data/public/lookbook-assets/js/index.js.map +1 -1
- metadata +3 -3
@@ -7781,6 +7781,9 @@ function $5792afa4170ed552$export$2e2bcd8739ae039() {
|
|
7781
7781
|
const socket = (0, $f57397824b7ddfec$export$2e2bcd8739ae039)(window.SOCKET_PATH);
|
7782
7782
|
socket.addListener("Lookbook::ReloadChannel", ()=>this.updateDOM());
|
7783
7783
|
}
|
7784
|
+
this.$watch("$store.layout.mobile", (mobile)=>{
|
7785
|
+
if (!mobile) this.$store.layout.sidebar.hidden = true;
|
7786
|
+
});
|
7784
7787
|
},
|
7785
7788
|
navigateTo (path) {
|
7786
7789
|
this.debug(`Navigating to ${path}`);
|
@@ -7871,7 +7874,7 @@ function $12b7aa006b8a97e1$var$toCamel(s) {
|
|
7871
7874
|
}
|
7872
7875
|
|
7873
7876
|
|
7874
|
-
var $
|
7877
|
+
var $c2b461c6a9d68b2c$exports = {};
|
7875
7878
|
var $cbd28b10fa9798c7$exports = {};
|
7876
7879
|
|
7877
7880
|
$parcel$defineInteropFlag($cbd28b10fa9798c7$exports);
|
@@ -11568,6 +11571,126 @@ function $d92d9d5253f84566$export$2e2bcd8739ae039(store) {
|
|
11568
11571
|
}
|
11569
11572
|
|
11570
11573
|
|
11574
|
+
var $a87dacf5139b5e2f$exports = {};
|
11575
|
+
|
11576
|
+
$parcel$defineInteropFlag($a87dacf5139b5e2f$exports);
|
11577
|
+
|
11578
|
+
$parcel$export($a87dacf5139b5e2f$exports, "default", () => $a87dacf5139b5e2f$export$2e2bcd8739ae039);
|
11579
|
+
function $a87dacf5139b5e2f$export$2e2bcd8739ae039(store) {
|
11580
|
+
return {
|
11581
|
+
get store () {
|
11582
|
+
return store || this;
|
11583
|
+
},
|
11584
|
+
get id () {
|
11585
|
+
return this.$root.id;
|
11586
|
+
},
|
11587
|
+
get panels () {
|
11588
|
+
return Array.from(this.$refs.panels.children);
|
11589
|
+
},
|
11590
|
+
isActive (el) {
|
11591
|
+
return this.store.activeTab === this._getRef(el);
|
11592
|
+
},
|
11593
|
+
// protected
|
11594
|
+
_getRef (el) {
|
11595
|
+
return el.getAttribute("x-ref");
|
11596
|
+
}
|
11597
|
+
};
|
11598
|
+
}
|
11599
|
+
|
11600
|
+
|
11601
|
+
var $0db07828cadc68e0$exports = {};
|
11602
|
+
|
11603
|
+
$parcel$defineInteropFlag($0db07828cadc68e0$exports);
|
11604
|
+
|
11605
|
+
$parcel$export($0db07828cadc68e0$exports, "default", () => $0db07828cadc68e0$export$2e2bcd8739ae039);
|
11606
|
+
|
11607
|
+
|
11608
|
+
|
11609
|
+
|
11610
|
+
function $0db07828cadc68e0$export$2e2bcd8739ae039(store) {
|
11611
|
+
const initial = store ? store.activeTab : null;
|
11612
|
+
let dropdown = null;
|
11613
|
+
return {
|
11614
|
+
visibleTabsCount: 0,
|
11615
|
+
triggerLeft: 0,
|
11616
|
+
get store () {
|
11617
|
+
return store || this;
|
11618
|
+
},
|
11619
|
+
get tabs () {
|
11620
|
+
return this.$refs.tabs ? Array.from(this.$refs.tabs.children) : [];
|
11621
|
+
},
|
11622
|
+
get dropdownTabs () {
|
11623
|
+
return Array.from(this.$refs.tabsDropdown ? this.$refs.tabsDropdown.children : []);
|
11624
|
+
},
|
11625
|
+
get tabWidths () {
|
11626
|
+
return this.tabs.map((tab)=>(0, $490552754c23ef6f$export$bdf7e699b242f476)(tab, {
|
11627
|
+
includeMargins: true
|
11628
|
+
}).width);
|
11629
|
+
},
|
11630
|
+
init () {
|
11631
|
+
this.$nextTick(()=>{
|
11632
|
+
if (this.$root.parentElement.offsetWidth === this.$root.offsetWidth) this.visibleTabsCount = this.tabs.length;
|
11633
|
+
dropdown = (0, $789b7d27a7c715a6$export$2e2bcd8739ae039)(this.$refs.dropdownTrigger, {
|
11634
|
+
content: this.$refs.tabsDropdown,
|
11635
|
+
theme: "menu",
|
11636
|
+
interactive: true,
|
11637
|
+
trigger: "click",
|
11638
|
+
placement: "bottom",
|
11639
|
+
appendTo: this.$root
|
11640
|
+
});
|
11641
|
+
const initialTab = initial ? this.tabs.find((t)=>this._getRef(t) === initial) : this.tabs[0];
|
11642
|
+
this.selectTab(initialTab || this.tabs[0], true);
|
11643
|
+
this.parentObserver = (0, $7ecd1fc3a6b35e5c$export$a2214cc2adb2dc44)(this.$root.parentElement, (0, $c5d017602d25d050$export$61fc7d43ac8f84b0)(10, this.handleResize.bind(this)));
|
11644
|
+
this.$watch("visibleTabsCount", (value)=>{
|
11645
|
+
this.debug(`'#${this.$root.id}' visible tabs count:`, value);
|
11646
|
+
});
|
11647
|
+
});
|
11648
|
+
},
|
11649
|
+
handleResize ({ width: width }) {
|
11650
|
+
if (width === this._lastMeasuredWidth) return;
|
11651
|
+
if (width === this.$root.offsetWidth) {
|
11652
|
+
this.visibleTabsCount = this.tabs.length;
|
11653
|
+
return;
|
11654
|
+
}
|
11655
|
+
let sumTabWidths = 60;
|
11656
|
+
let triggerLeft = 20;
|
11657
|
+
let visibleTabsCount = 0;
|
11658
|
+
this.tabWidths.forEach((tabWidth)=>{
|
11659
|
+
sumTabWidths += tabWidth;
|
11660
|
+
if (sumTabWidths < width) {
|
11661
|
+
triggerLeft += tabWidth;
|
11662
|
+
visibleTabsCount++;
|
11663
|
+
}
|
11664
|
+
});
|
11665
|
+
this.visibleTabsCount = visibleTabsCount;
|
11666
|
+
this.triggerLeft = triggerLeft;
|
11667
|
+
this._lastMeasuredWidth = width;
|
11668
|
+
},
|
11669
|
+
selectTab (el, initial = false) {
|
11670
|
+
this.store.activeTab = this._getRef(el);
|
11671
|
+
dropdown.hide();
|
11672
|
+
if (!initial) this.$dispatch("tabs:change", {
|
11673
|
+
tabs: this
|
11674
|
+
});
|
11675
|
+
},
|
11676
|
+
isSelected (el) {
|
11677
|
+
return this.store.activeTab === this._getRef(el);
|
11678
|
+
},
|
11679
|
+
isDisabled (el) {
|
11680
|
+
return el.getAttribute("data-disabled") == "true";
|
11681
|
+
},
|
11682
|
+
hasHiddenTabs () {
|
11683
|
+
return this.visibleTabsCount < this.tabs.length;
|
11684
|
+
},
|
11685
|
+
// protected
|
11686
|
+
_lastMeasuredWidth: 0,
|
11687
|
+
_getRef (el) {
|
11688
|
+
return el ? el.getAttribute("x-ref").replace("dropdown-", "") : null;
|
11689
|
+
}
|
11690
|
+
};
|
11691
|
+
}
|
11692
|
+
|
11693
|
+
|
11571
11694
|
var $506dabb2bf255b38$exports = {};
|
11572
11695
|
|
11573
11696
|
$parcel$defineInteropFlag($506dabb2bf255b38$exports);
|
@@ -12118,126 +12241,6 @@ function $506dabb2bf255b38$var$sizeSplits(sizes) {
|
|
12118
12241
|
}
|
12119
12242
|
|
12120
12243
|
|
12121
|
-
var $a87dacf5139b5e2f$exports = {};
|
12122
|
-
|
12123
|
-
$parcel$defineInteropFlag($a87dacf5139b5e2f$exports);
|
12124
|
-
|
12125
|
-
$parcel$export($a87dacf5139b5e2f$exports, "default", () => $a87dacf5139b5e2f$export$2e2bcd8739ae039);
|
12126
|
-
function $a87dacf5139b5e2f$export$2e2bcd8739ae039(store) {
|
12127
|
-
return {
|
12128
|
-
get store () {
|
12129
|
-
return store || this;
|
12130
|
-
},
|
12131
|
-
get id () {
|
12132
|
-
return this.$root.id;
|
12133
|
-
},
|
12134
|
-
get panels () {
|
12135
|
-
return Array.from(this.$refs.panels.children);
|
12136
|
-
},
|
12137
|
-
isActive (el) {
|
12138
|
-
return this.store.activeTab === this._getRef(el);
|
12139
|
-
},
|
12140
|
-
// protected
|
12141
|
-
_getRef (el) {
|
12142
|
-
return el.getAttribute("x-ref");
|
12143
|
-
}
|
12144
|
-
};
|
12145
|
-
}
|
12146
|
-
|
12147
|
-
|
12148
|
-
var $0db07828cadc68e0$exports = {};
|
12149
|
-
|
12150
|
-
$parcel$defineInteropFlag($0db07828cadc68e0$exports);
|
12151
|
-
|
12152
|
-
$parcel$export($0db07828cadc68e0$exports, "default", () => $0db07828cadc68e0$export$2e2bcd8739ae039);
|
12153
|
-
|
12154
|
-
|
12155
|
-
|
12156
|
-
|
12157
|
-
function $0db07828cadc68e0$export$2e2bcd8739ae039(store) {
|
12158
|
-
const initial = store ? store.activeTab : null;
|
12159
|
-
let dropdown = null;
|
12160
|
-
return {
|
12161
|
-
visibleTabsCount: 0,
|
12162
|
-
triggerLeft: 0,
|
12163
|
-
get store () {
|
12164
|
-
return store || this;
|
12165
|
-
},
|
12166
|
-
get tabs () {
|
12167
|
-
return this.$refs.tabs ? Array.from(this.$refs.tabs.children) : [];
|
12168
|
-
},
|
12169
|
-
get dropdownTabs () {
|
12170
|
-
return Array.from(this.$refs.tabsDropdown ? this.$refs.tabsDropdown.children : []);
|
12171
|
-
},
|
12172
|
-
get tabWidths () {
|
12173
|
-
return this.tabs.map((tab)=>(0, $490552754c23ef6f$export$bdf7e699b242f476)(tab, {
|
12174
|
-
includeMargins: true
|
12175
|
-
}).width);
|
12176
|
-
},
|
12177
|
-
init () {
|
12178
|
-
this.$nextTick(()=>{
|
12179
|
-
if (this.$root.parentElement.offsetWidth === this.$root.offsetWidth) this.visibleTabsCount = this.tabs.length;
|
12180
|
-
dropdown = (0, $789b7d27a7c715a6$export$2e2bcd8739ae039)(this.$refs.dropdownTrigger, {
|
12181
|
-
content: this.$refs.tabsDropdown,
|
12182
|
-
theme: "menu",
|
12183
|
-
interactive: true,
|
12184
|
-
trigger: "click",
|
12185
|
-
placement: "bottom",
|
12186
|
-
appendTo: this.$root
|
12187
|
-
});
|
12188
|
-
const initialTab = initial ? this.tabs.find((t)=>this._getRef(t) === initial) : this.tabs[0];
|
12189
|
-
this.selectTab(initialTab || this.tabs[0], true);
|
12190
|
-
this.parentObserver = (0, $7ecd1fc3a6b35e5c$export$a2214cc2adb2dc44)(this.$root.parentElement, (0, $c5d017602d25d050$export$61fc7d43ac8f84b0)(10, this.handleResize.bind(this)));
|
12191
|
-
this.$watch("visibleTabsCount", (value)=>{
|
12192
|
-
this.debug(`'#${this.$root.id}' visible tabs count:`, value);
|
12193
|
-
});
|
12194
|
-
});
|
12195
|
-
},
|
12196
|
-
handleResize ({ width: width }) {
|
12197
|
-
if (width === this._lastMeasuredWidth) return;
|
12198
|
-
if (width === this.$root.offsetWidth) {
|
12199
|
-
this.visibleTabsCount = this.tabs.length;
|
12200
|
-
return;
|
12201
|
-
}
|
12202
|
-
let sumTabWidths = 60;
|
12203
|
-
let triggerLeft = 20;
|
12204
|
-
let visibleTabsCount = 0;
|
12205
|
-
this.tabWidths.forEach((tabWidth)=>{
|
12206
|
-
sumTabWidths += tabWidth;
|
12207
|
-
if (sumTabWidths < width) {
|
12208
|
-
triggerLeft += tabWidth;
|
12209
|
-
visibleTabsCount++;
|
12210
|
-
}
|
12211
|
-
});
|
12212
|
-
this.visibleTabsCount = visibleTabsCount;
|
12213
|
-
this.triggerLeft = triggerLeft;
|
12214
|
-
this._lastMeasuredWidth = width;
|
12215
|
-
},
|
12216
|
-
selectTab (el, initial = false) {
|
12217
|
-
this.store.activeTab = this._getRef(el);
|
12218
|
-
dropdown.hide();
|
12219
|
-
if (!initial) this.$dispatch("tabs:change", {
|
12220
|
-
tabs: this
|
12221
|
-
});
|
12222
|
-
},
|
12223
|
-
isSelected (el) {
|
12224
|
-
return this.store.activeTab === this._getRef(el);
|
12225
|
-
},
|
12226
|
-
isDisabled (el) {
|
12227
|
-
return el.getAttribute("data-disabled") == "true";
|
12228
|
-
},
|
12229
|
-
hasHiddenTabs () {
|
12230
|
-
return this.visibleTabsCount < this.tabs.length;
|
12231
|
-
},
|
12232
|
-
// protected
|
12233
|
-
_lastMeasuredWidth: 0,
|
12234
|
-
_getRef (el) {
|
12235
|
-
return el ? el.getAttribute("x-ref").replace("dropdown-", "") : null;
|
12236
|
-
}
|
12237
|
-
};
|
12238
|
-
}
|
12239
|
-
|
12240
|
-
|
12241
12244
|
var $6d64716f0b34fdf4$exports = {};
|
12242
12245
|
|
12243
12246
|
$parcel$defineInteropFlag($6d64716f0b34fdf4$exports);
|
@@ -12365,7 +12368,7 @@ function $6d64716f0b34fdf4$export$2e2bcd8739ae039(store) {
|
|
12365
12368
|
}
|
12366
12369
|
|
12367
12370
|
|
12368
|
-
$
|
12371
|
+
$c2b461c6a9d68b2c$exports = {
|
12369
12372
|
"button": $cbd28b10fa9798c7$exports,
|
12370
12373
|
"code": $99486586f6691564$exports,
|
12371
12374
|
"copy_button": $47a1c62621be0c54$exports,
|
@@ -12373,14 +12376,14 @@ $c9dfaeb25bf110ce$exports = {
|
|
12373
12376
|
"embed_code_dropdown": $216ef7001f59f21d$exports,
|
12374
12377
|
"filter": $e9904a14dabf652d$exports,
|
12375
12378
|
"nav": $d92d9d5253f84566$exports,
|
12376
|
-
"split_layout": $506dabb2bf255b38$exports,
|
12377
12379
|
"tab_panels": $a87dacf5139b5e2f$exports,
|
12378
12380
|
"tabs": $0db07828cadc68e0$exports,
|
12381
|
+
"split_layout": $506dabb2bf255b38$exports,
|
12379
12382
|
"viewport": $6d64716f0b34fdf4$exports
|
12380
12383
|
};
|
12381
12384
|
|
12382
12385
|
|
12383
|
-
var $
|
12386
|
+
var $5d1c9207cb730903$exports = {};
|
12384
12387
|
var $6a9b69d9cc7f810f$exports = {};
|
12385
12388
|
|
12386
12389
|
$parcel$defineInteropFlag($6a9b69d9cc7f810f$exports);
|
@@ -13391,6 +13394,38 @@ function $c299e36fa9e271bc$export$2e2bcd8739ae039(id, embedStore) {
|
|
13391
13394
|
}
|
13392
13395
|
|
13393
13396
|
|
13397
|
+
var $1a7a7298eec5b755$exports = {};
|
13398
|
+
|
13399
|
+
$parcel$defineInteropFlag($1a7a7298eec5b755$exports);
|
13400
|
+
|
13401
|
+
$parcel$export($1a7a7298eec5b755$exports, "default", () => $1a7a7298eec5b755$export$2e2bcd8739ae039);
|
13402
|
+
|
13403
|
+
function $1a7a7298eec5b755$export$2e2bcd8739ae039() {
|
13404
|
+
return {
|
13405
|
+
narrow: false,
|
13406
|
+
init () {
|
13407
|
+
(0, $7ecd1fc3a6b35e5c$export$a2214cc2adb2dc44)(this.$el, ({ width: width })=>{
|
13408
|
+
this.narrow = width < 500;
|
13409
|
+
});
|
13410
|
+
}
|
13411
|
+
};
|
13412
|
+
}
|
13413
|
+
|
13414
|
+
|
13415
|
+
var $e773f8ef556b41ff$exports = {};
|
13416
|
+
|
13417
|
+
$parcel$defineInteropFlag($e773f8ef556b41ff$exports);
|
13418
|
+
|
13419
|
+
$parcel$export($e773f8ef556b41ff$exports, "default", () => $e773f8ef556b41ff$export$2e2bcd8739ae039);
|
13420
|
+
function $e773f8ef556b41ff$export$2e2bcd8739ae039() {
|
13421
|
+
return {
|
13422
|
+
get isNarrowLayout () {
|
13423
|
+
return this.narrow || false;
|
13424
|
+
}
|
13425
|
+
};
|
13426
|
+
}
|
13427
|
+
|
13428
|
+
|
13394
13429
|
var $9b24cbeb3a465447$exports = {};
|
13395
13430
|
|
13396
13431
|
$parcel$defineInteropFlag($9b24cbeb3a465447$exports);
|
@@ -13448,51 +13483,19 @@ function $9b24cbeb3a465447$export$2e2bcd8739ae039({ id: id , matchers: matchers
|
|
13448
13483
|
}
|
13449
13484
|
|
13450
13485
|
|
13451
|
-
|
13452
|
-
|
13453
|
-
$parcel$defineInteropFlag($1a7a7298eec5b755$exports);
|
13454
|
-
|
13455
|
-
$parcel$export($1a7a7298eec5b755$exports, "default", () => $1a7a7298eec5b755$export$2e2bcd8739ae039);
|
13456
|
-
|
13457
|
-
function $1a7a7298eec5b755$export$2e2bcd8739ae039() {
|
13458
|
-
return {
|
13459
|
-
narrow: false,
|
13460
|
-
init () {
|
13461
|
-
(0, $7ecd1fc3a6b35e5c$export$a2214cc2adb2dc44)(this.$el, ({ width: width })=>{
|
13462
|
-
this.narrow = width < 500;
|
13463
|
-
});
|
13464
|
-
}
|
13465
|
-
};
|
13466
|
-
}
|
13467
|
-
|
13468
|
-
|
13469
|
-
var $e773f8ef556b41ff$exports = {};
|
13470
|
-
|
13471
|
-
$parcel$defineInteropFlag($e773f8ef556b41ff$exports);
|
13472
|
-
|
13473
|
-
$parcel$export($e773f8ef556b41ff$exports, "default", () => $e773f8ef556b41ff$export$2e2bcd8739ae039);
|
13474
|
-
function $e773f8ef556b41ff$export$2e2bcd8739ae039() {
|
13475
|
-
return {
|
13476
|
-
get isNarrowLayout () {
|
13477
|
-
return this.narrow || false;
|
13478
|
-
}
|
13479
|
-
};
|
13480
|
-
}
|
13481
|
-
|
13482
|
-
|
13483
|
-
$6178ee12f80cbf68$exports = {
|
13486
|
+
$5d1c9207cb730903$exports = {
|
13484
13487
|
"display_options": {
|
13485
13488
|
"field": $6a9b69d9cc7f810f$exports
|
13486
13489
|
},
|
13487
13490
|
"embed": {
|
13488
13491
|
"inspector": $c299e36fa9e271bc$exports
|
13489
13492
|
},
|
13490
|
-
"nav": {
|
13491
|
-
"item": $9b24cbeb3a465447$exports
|
13492
|
-
},
|
13493
13493
|
"params": {
|
13494
13494
|
"editor": $1a7a7298eec5b755$exports,
|
13495
13495
|
"field": $e773f8ef556b41ff$exports
|
13496
|
+
},
|
13497
|
+
"nav": {
|
13498
|
+
"item": $9b24cbeb3a465447$exports
|
13496
13499
|
}
|
13497
13500
|
};
|
13498
13501
|
|
@@ -13560,8 +13563,8 @@ const $22969b543678f572$var$prefix = window.APP_NAME;
|
|
13560
13563
|
// Components
|
13561
13564
|
(0, $caa9439642c6336c$export$2e2bcd8739ae039).data("app", (0, $5792afa4170ed552$export$2e2bcd8739ae039));
|
13562
13565
|
[
|
13563
|
-
$
|
13564
|
-
$
|
13566
|
+
$c2b461c6a9d68b2c$exports,
|
13567
|
+
$5d1c9207cb730903$exports,
|
13565
13568
|
$d56e5cced44001d2$exports
|
13566
13569
|
].forEach((scripts)=>{
|
13567
13570
|
const components = (0, $12b7aa006b8a97e1$export$4e811121b221213b)(scripts);
|