lookbook 2.0.5 → 2.1.1

Sign up to get free protection for your applications and to get access to all the features.
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);