lookbook 2.0.0.beta.7 → 2.0.0.beta.9

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 (44) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +7 -0
  3. data/app/components/lookbook/page_tabs/component.html.erb +2 -2
  4. data/app/components/lookbook/params/field/component.rb +1 -1
  5. data/app/components/lookbook/prose/component.css +3 -1
  6. data/app/components/lookbook/prose/component.html.erb +1 -0
  7. data/app/components/lookbook/split_layout/component.html.erb +3 -3
  8. data/app/controllers/concerns/lookbook/targetable_concern.rb +1 -1
  9. data/app/helpers/lookbook/application_helper.rb +1 -1
  10. data/app/views/lookbook/errors/default.html.erb +1 -1
  11. data/app/views/lookbook/inspector/panels/_preview.html.erb +1 -1
  12. data/app/views/lookbook/inspector/show.html.erb +1 -0
  13. data/app/views/lookbook/pages/show.html.erb +65 -58
  14. data/assets/css/lookbook.css +5 -1
  15. data/assets/css/themes/blue.css +3 -0
  16. data/assets/css/themes/green.css +3 -0
  17. data/assets/css/themes/indigo.css +3 -0
  18. data/assets/css/themes/rose.css +3 -0
  19. data/assets/css/themes/zinc.css +3 -0
  20. data/config/tags.yml +4 -0
  21. data/lib/lookbook/engine.rb +16 -2
  22. data/lib/lookbook/entities/preview_entity.rb +6 -1
  23. data/lib/lookbook/entities/scenario_entity.rb +5 -0
  24. data/lib/lookbook/preview.rb +1 -0
  25. data/lib/lookbook/preview_after_render.rb +13 -0
  26. data/lib/lookbook/preview_controller_actions.rb +18 -3
  27. data/lib/lookbook/tags/after_render_tag.rb +7 -0
  28. data/lib/lookbook/tags/param_tag.rb +1 -1
  29. data/lib/lookbook/version.rb +1 -1
  30. data/public/lookbook-assets/css/lookbook.css +85 -11
  31. data/public/lookbook-assets/css/lookbook.css.map +1 -1
  32. data/public/lookbook-assets/css/themes/blue.css +3 -0
  33. data/public/lookbook-assets/css/themes/blue.css.map +1 -1
  34. data/public/lookbook-assets/css/themes/green.css +3 -0
  35. data/public/lookbook-assets/css/themes/green.css.map +1 -1
  36. data/public/lookbook-assets/css/themes/indigo.css +3 -0
  37. data/public/lookbook-assets/css/themes/indigo.css.map +1 -1
  38. data/public/lookbook-assets/css/themes/rose.css +3 -0
  39. data/public/lookbook-assets/css/themes/rose.css.map +1 -1
  40. data/public/lookbook-assets/css/themes/zinc.css +3 -0
  41. data/public/lookbook-assets/css/themes/zinc.css.map +1 -1
  42. data/public/lookbook-assets/js/index.js +143 -143
  43. data/public/lookbook-assets/js/index.js.map +1 -1
  44. metadata +4 -2
@@ -7815,17 +7815,7 @@ function $12b7aa006b8a97e1$var$toCamel(s) {
7815
7815
  }
7816
7816
 
7817
7817
 
7818
- var $28969a71dc98c66d$exports = {};
7819
- var $99486586f6691564$exports = {};
7820
-
7821
- $parcel$defineInteropFlag($99486586f6691564$exports);
7822
-
7823
- $parcel$export($99486586f6691564$exports, "default", () => $99486586f6691564$export$2e2bcd8739ae039);
7824
- function $99486586f6691564$export$2e2bcd8739ae039() {
7825
- return {};
7826
- }
7827
-
7828
-
7818
+ var $d9c79682b7f8e136$exports = {};
7829
7819
  var $cbd28b10fa9798c7$exports = {};
7830
7820
 
7831
7821
  $parcel$defineInteropFlag($cbd28b10fa9798c7$exports);
@@ -11356,6 +11346,49 @@ function $cbd28b10fa9798c7$export$2e2bcd8739ae039() {
11356
11346
  }
11357
11347
 
11358
11348
 
11349
+ var $99486586f6691564$exports = {};
11350
+
11351
+ $parcel$defineInteropFlag($99486586f6691564$exports);
11352
+
11353
+ $parcel$export($99486586f6691564$exports, "default", () => $99486586f6691564$export$2e2bcd8739ae039);
11354
+ function $99486586f6691564$export$2e2bcd8739ae039() {
11355
+ return {};
11356
+ }
11357
+
11358
+
11359
+ var $e398acaded942bbe$exports = {};
11360
+
11361
+ $parcel$defineInteropFlag($e398acaded942bbe$exports);
11362
+
11363
+ $parcel$export($e398acaded942bbe$exports, "default", () => $e398acaded942bbe$export$2e2bcd8739ae039);
11364
+
11365
+ function $e398acaded942bbe$export$2e2bcd8739ae039(targetSelector) {
11366
+ return {
11367
+ width: 0,
11368
+ height: 0,
11369
+ resizing: false,
11370
+ target: null,
11371
+ init () {
11372
+ this.target = document.querySelector(targetSelector);
11373
+ if (this.target) {
11374
+ this.width = Math.round(this.target.clientWidth);
11375
+ this.height = Math.round(this.target.clientHeight);
11376
+ this.createObserver();
11377
+ }
11378
+ },
11379
+ createObserver () {
11380
+ if (this.target) this.observer = (0, $7ecd1fc3a6b35e5c$export$a2214cc2adb2dc44)(this.target, ({ width: width , height: height })=>{
11381
+ this.width = width;
11382
+ this.height = height;
11383
+ });
11384
+ },
11385
+ tearDown () {
11386
+ if (this.observer) this.observer.disconnect();
11387
+ }
11388
+ };
11389
+ }
11390
+
11391
+
11359
11392
  var $47a1c62621be0c54$exports = {};
11360
11393
 
11361
11394
  $parcel$defineInteropFlag($47a1c62621be0c54$exports);
@@ -11412,39 +11445,6 @@ function $47a1c62621be0c54$export$2e2bcd8739ae039() {
11412
11445
  }
11413
11446
 
11414
11447
 
11415
- var $e398acaded942bbe$exports = {};
11416
-
11417
- $parcel$defineInteropFlag($e398acaded942bbe$exports);
11418
-
11419
- $parcel$export($e398acaded942bbe$exports, "default", () => $e398acaded942bbe$export$2e2bcd8739ae039);
11420
-
11421
- function $e398acaded942bbe$export$2e2bcd8739ae039(targetSelector) {
11422
- return {
11423
- width: 0,
11424
- height: 0,
11425
- resizing: false,
11426
- target: null,
11427
- init () {
11428
- this.target = document.querySelector(targetSelector);
11429
- if (this.target) {
11430
- this.width = Math.round(this.target.clientWidth);
11431
- this.height = Math.round(this.target.clientHeight);
11432
- this.createObserver();
11433
- }
11434
- },
11435
- createObserver () {
11436
- if (this.target) this.observer = (0, $7ecd1fc3a6b35e5c$export$a2214cc2adb2dc44)(this.target, ({ width: width , height: height })=>{
11437
- this.width = width;
11438
- this.height = height;
11439
- });
11440
- },
11441
- tearDown () {
11442
- if (this.observer) this.observer.disconnect();
11443
- }
11444
- };
11445
- }
11446
-
11447
-
11448
11448
  var $216ef7001f59f21d$exports = {};
11449
11449
 
11450
11450
  $parcel$defineInteropFlag($216ef7001f59f21d$exports);
@@ -12116,99 +12116,6 @@ function $a87dacf5139b5e2f$export$2e2bcd8739ae039(store) {
12116
12116
  }
12117
12117
 
12118
12118
 
12119
- var $0db07828cadc68e0$exports = {};
12120
-
12121
- $parcel$defineInteropFlag($0db07828cadc68e0$exports);
12122
-
12123
- $parcel$export($0db07828cadc68e0$exports, "default", () => $0db07828cadc68e0$export$2e2bcd8739ae039);
12124
-
12125
-
12126
-
12127
-
12128
- function $0db07828cadc68e0$export$2e2bcd8739ae039(store) {
12129
- const initial = store ? store.activeTab : null;
12130
- let dropdown = null;
12131
- return {
12132
- visibleTabsCount: 0,
12133
- triggerLeft: 0,
12134
- get store () {
12135
- return store || this;
12136
- },
12137
- get tabs () {
12138
- return this.$refs.tabs ? Array.from(this.$refs.tabs.children) : [];
12139
- },
12140
- get dropdownTabs () {
12141
- return Array.from(this.$refs.tabsDropdown ? this.$refs.tabsDropdown.children : []);
12142
- },
12143
- get tabWidths () {
12144
- return this.tabs.map((tab)=>(0, $490552754c23ef6f$export$bdf7e699b242f476)(tab, {
12145
- includeMargins: true
12146
- }).width);
12147
- },
12148
- init () {
12149
- this.$nextTick(()=>{
12150
- if (this.$root.parentElement.offsetWidth === this.$root.offsetWidth) this.visibleTabsCount = this.tabs.length;
12151
- dropdown = (0, $789b7d27a7c715a6$export$2e2bcd8739ae039)(this.$refs.dropdownTrigger, {
12152
- content: this.$refs.tabsDropdown,
12153
- theme: "menu",
12154
- interactive: true,
12155
- trigger: "click",
12156
- placement: "bottom",
12157
- appendTo: this.$root
12158
- });
12159
- const initialTab = initial ? this.tabs.find((t)=>this._getRef(t) === initial) : this.tabs[0];
12160
- this.selectTab(initialTab || this.tabs[0], true);
12161
- this.parentObserver = (0, $7ecd1fc3a6b35e5c$export$a2214cc2adb2dc44)(this.$root.parentElement, (0, $c5d017602d25d050$export$61fc7d43ac8f84b0)(10, this.handleResize.bind(this)));
12162
- this.$watch("visibleTabsCount", (value)=>{
12163
- this.debug(`'#${this.$root.id}' visible tabs count:`, value);
12164
- });
12165
- });
12166
- },
12167
- handleResize ({ width: width }) {
12168
- if (width === this._lastMeasuredWidth) return;
12169
- if (width === this.$root.offsetWidth) {
12170
- this.visibleTabsCount = this.tabs.length;
12171
- return;
12172
- }
12173
- let sumTabWidths = 60;
12174
- let triggerLeft = 20;
12175
- let visibleTabsCount = 0;
12176
- this.tabWidths.forEach((tabWidth)=>{
12177
- sumTabWidths += tabWidth;
12178
- if (sumTabWidths < width) {
12179
- triggerLeft += tabWidth;
12180
- visibleTabsCount++;
12181
- }
12182
- });
12183
- this.visibleTabsCount = visibleTabsCount;
12184
- this.triggerLeft = triggerLeft;
12185
- this._lastMeasuredWidth = width;
12186
- },
12187
- selectTab (el, initial = false) {
12188
- this.store.activeTab = this._getRef(el);
12189
- dropdown.hide();
12190
- if (!initial) this.$dispatch("tabs:change", {
12191
- tabs: this
12192
- });
12193
- },
12194
- isSelected (el) {
12195
- return this.store.activeTab === this._getRef(el);
12196
- },
12197
- isDisabled (el) {
12198
- return el.getAttribute("data-disabled") == "true";
12199
- },
12200
- hasHiddenTabs () {
12201
- return this.visibleTabsCount < this.tabs.length;
12202
- },
12203
- // protected
12204
- _lastMeasuredWidth: 0,
12205
- _getRef (el) {
12206
- return el ? el.getAttribute("x-ref").replace("dropdown-", "") : null;
12207
- }
12208
- };
12209
- }
12210
-
12211
-
12212
12119
  var $6d64716f0b34fdf4$exports = {};
12213
12120
 
12214
12121
  $parcel$defineInteropFlag($6d64716f0b34fdf4$exports);
@@ -12336,18 +12243,111 @@ function $6d64716f0b34fdf4$export$2e2bcd8739ae039(store) {
12336
12243
  }
12337
12244
 
12338
12245
 
12339
- $28969a71dc98c66d$exports = {
12340
- "code": $99486586f6691564$exports,
12246
+ var $0db07828cadc68e0$exports = {};
12247
+
12248
+ $parcel$defineInteropFlag($0db07828cadc68e0$exports);
12249
+
12250
+ $parcel$export($0db07828cadc68e0$exports, "default", () => $0db07828cadc68e0$export$2e2bcd8739ae039);
12251
+
12252
+
12253
+
12254
+
12255
+ function $0db07828cadc68e0$export$2e2bcd8739ae039(store) {
12256
+ const initial = store ? store.activeTab : null;
12257
+ let dropdown = null;
12258
+ return {
12259
+ visibleTabsCount: 0,
12260
+ triggerLeft: 0,
12261
+ get store () {
12262
+ return store || this;
12263
+ },
12264
+ get tabs () {
12265
+ return this.$refs.tabs ? Array.from(this.$refs.tabs.children) : [];
12266
+ },
12267
+ get dropdownTabs () {
12268
+ return Array.from(this.$refs.tabsDropdown ? this.$refs.tabsDropdown.children : []);
12269
+ },
12270
+ get tabWidths () {
12271
+ return this.tabs.map((tab)=>(0, $490552754c23ef6f$export$bdf7e699b242f476)(tab, {
12272
+ includeMargins: true
12273
+ }).width);
12274
+ },
12275
+ init () {
12276
+ this.$nextTick(()=>{
12277
+ if (this.$root.parentElement.offsetWidth === this.$root.offsetWidth) this.visibleTabsCount = this.tabs.length;
12278
+ dropdown = (0, $789b7d27a7c715a6$export$2e2bcd8739ae039)(this.$refs.dropdownTrigger, {
12279
+ content: this.$refs.tabsDropdown,
12280
+ theme: "menu",
12281
+ interactive: true,
12282
+ trigger: "click",
12283
+ placement: "bottom",
12284
+ appendTo: this.$root
12285
+ });
12286
+ const initialTab = initial ? this.tabs.find((t)=>this._getRef(t) === initial) : this.tabs[0];
12287
+ this.selectTab(initialTab || this.tabs[0], true);
12288
+ this.parentObserver = (0, $7ecd1fc3a6b35e5c$export$a2214cc2adb2dc44)(this.$root.parentElement, (0, $c5d017602d25d050$export$61fc7d43ac8f84b0)(10, this.handleResize.bind(this)));
12289
+ this.$watch("visibleTabsCount", (value)=>{
12290
+ this.debug(`'#${this.$root.id}' visible tabs count:`, value);
12291
+ });
12292
+ });
12293
+ },
12294
+ handleResize ({ width: width }) {
12295
+ if (width === this._lastMeasuredWidth) return;
12296
+ if (width === this.$root.offsetWidth) {
12297
+ this.visibleTabsCount = this.tabs.length;
12298
+ return;
12299
+ }
12300
+ let sumTabWidths = 60;
12301
+ let triggerLeft = 20;
12302
+ let visibleTabsCount = 0;
12303
+ this.tabWidths.forEach((tabWidth)=>{
12304
+ sumTabWidths += tabWidth;
12305
+ if (sumTabWidths < width) {
12306
+ triggerLeft += tabWidth;
12307
+ visibleTabsCount++;
12308
+ }
12309
+ });
12310
+ this.visibleTabsCount = visibleTabsCount;
12311
+ this.triggerLeft = triggerLeft;
12312
+ this._lastMeasuredWidth = width;
12313
+ },
12314
+ selectTab (el, initial = false) {
12315
+ this.store.activeTab = this._getRef(el);
12316
+ dropdown.hide();
12317
+ if (!initial) this.$dispatch("tabs:change", {
12318
+ tabs: this
12319
+ });
12320
+ },
12321
+ isSelected (el) {
12322
+ return this.store.activeTab === this._getRef(el);
12323
+ },
12324
+ isDisabled (el) {
12325
+ return el.getAttribute("data-disabled") == "true";
12326
+ },
12327
+ hasHiddenTabs () {
12328
+ return this.visibleTabsCount < this.tabs.length;
12329
+ },
12330
+ // protected
12331
+ _lastMeasuredWidth: 0,
12332
+ _getRef (el) {
12333
+ return el ? el.getAttribute("x-ref").replace("dropdown-", "") : null;
12334
+ }
12335
+ };
12336
+ }
12337
+
12338
+
12339
+ $d9c79682b7f8e136$exports = {
12341
12340
  "button": $cbd28b10fa9798c7$exports,
12342
- "copy_button": $47a1c62621be0c54$exports,
12341
+ "code": $99486586f6691564$exports,
12343
12342
  "dimensions_display": $e398acaded942bbe$exports,
12343
+ "copy_button": $47a1c62621be0c54$exports,
12344
12344
  "embed_code_dropdown": $216ef7001f59f21d$exports,
12345
12345
  "filter": $e9904a14dabf652d$exports,
12346
12346
  "nav": $d92d9d5253f84566$exports,
12347
12347
  "split_layout": $506dabb2bf255b38$exports,
12348
12348
  "tab_panels": $a87dacf5139b5e2f$exports,
12349
- "tabs": $0db07828cadc68e0$exports,
12350
- "viewport": $6d64716f0b34fdf4$exports
12349
+ "viewport": $6d64716f0b34fdf4$exports,
12350
+ "tabs": $0db07828cadc68e0$exports
12351
12351
  };
12352
12352
 
12353
12353
 
@@ -13521,7 +13521,7 @@ const $22969b543678f572$var$prefix = window.APP_NAME;
13521
13521
  // Components
13522
13522
  (0, $caa9439642c6336c$export$2e2bcd8739ae039).data("app", (0, $5792afa4170ed552$export$2e2bcd8739ae039));
13523
13523
  [
13524
- $28969a71dc98c66d$exports,
13524
+ $d9c79682b7f8e136$exports,
13525
13525
  $f3e1e32f4a1bd6da$exports,
13526
13526
  $338da9a25bc5c332$exports
13527
13527
  ].forEach((scripts)=>{