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

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