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.
Files changed (32) hide show
  1. checksums.yaml +4 -4
  2. data/app/components/lookbook/base_component.rb +1 -1
  3. data/app/components/lookbook/embed/inspector/component.html.erb +19 -4
  4. data/app/components/lookbook/embed/inspector/component.rb +1 -1
  5. data/app/components/lookbook/header/component.html.erb +4 -3
  6. data/app/components/lookbook/tag_component.rb +8 -1
  7. data/app/controllers/lookbook/embeds_controller.rb +3 -3
  8. data/app/controllers/lookbook/inspector_controller.rb +1 -1
  9. data/app/controllers/lookbook/pages_controller.rb +1 -1
  10. data/app/controllers/lookbook/previews_controller.rb +1 -1
  11. data/app/views/layouts/lookbook/embed.html.erb +6 -0
  12. data/app/views/lookbook/inspector/show.html.erb +3 -3
  13. data/app/views/lookbook/previews/group.html.erb +1 -0
  14. data/assets/css/lookbook.css +2 -2
  15. data/assets/js/app.js +6 -0
  16. data/lib/lookbook/cable/cable.rb +2 -2
  17. data/lib/lookbook/engine.rb +3 -1
  18. data/lib/lookbook/entities/collections/preview_collection.rb +1 -4
  19. data/lib/lookbook/entities/entity.rb +4 -0
  20. data/lib/lookbook/entities/scenario_entity.rb +1 -1
  21. data/lib/lookbook/entities/scenario_group_entity.rb +1 -1
  22. data/lib/lookbook/file_watcher.rb +1 -1
  23. data/lib/lookbook/helpers/ui_elements_helper.rb +3 -3
  24. data/lib/lookbook/param.rb +1 -1
  25. data/lib/lookbook/preview_controller_actions.rb +1 -1
  26. data/lib/lookbook/version.rb +1 -1
  27. data/lib/lookbook/websocket.rb +1 -1
  28. data/public/lookbook-assets/css/lookbook.css +21 -3
  29. data/public/lookbook-assets/css/lookbook.css.map +1 -1
  30. data/public/lookbook-assets/js/index.js +165 -162
  31. data/public/lookbook-assets/js/index.js.map +1 -1
  32. 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 $c9dfaeb25bf110ce$exports = {};
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
- $c9dfaeb25bf110ce$exports = {
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 $6178ee12f80cbf68$exports = {};
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
- var $1a7a7298eec5b755$exports = {};
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
- $c9dfaeb25bf110ce$exports,
13564
- $6178ee12f80cbf68$exports,
13566
+ $c2b461c6a9d68b2c$exports,
13567
+ $5d1c9207cb730903$exports,
13565
13568
  $d56e5cced44001d2$exports
13566
13569
  ].forEach((scripts)=>{
13567
13570
  const components = (0, $12b7aa006b8a97e1$export$4e811121b221213b)(scripts);