pome-ui 2.0.0-preview34 → 2.0.0-preview37

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 (5) hide show
  1. package/package.json +1 -1
  2. package/pome-ui.dev.js +154 -87
  3. package/pome-ui.dev.min.js +23 -23
  4. package/pome-ui.js +154 -88
  5. package/pome-ui.min.js +5 -5
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pome-ui",
3
- "version": "2.0.0-preview34",
3
+ "version": "2.0.0-preview37",
4
4
  "description": "Front-end MVC library",
5
5
  "main": "pome-ui.js",
6
6
  "bin": {
package/pome-ui.dev.js CHANGED
@@ -5239,6 +5239,7 @@ If this is a native custom element, make sure to exclude it from component resol
5239
5239
  $watch: (i) => instanceWatch.bind(i),
5240
5240
  $containers: i => i.$containers,
5241
5241
  $container: i => i.$container,
5242
+ $delayClose: i => i.$delayClose,
5242
5243
  $data: i => i.$data,
5243
5244
  $created: i => i.$created,
5244
5245
  $unmounted: i => i.$unmounted,
@@ -18356,6 +18357,23 @@ function build(options, exports) {
18356
18357
  if (!component.template) {
18357
18358
  component.template = template;
18358
18359
  }
18360
+ if (component.delayOpen) {
18361
+ var dom = new DOMParser().parseFromString(component.template, 'text/html');
18362
+ var children = dom.querySelector('body').children;
18363
+ for (var i = 0; i < children.length; ++i) {
18364
+ if (children[i].tagName.toUpperCase() != 'DIV') {
18365
+ continue;
18366
+ }
18367
+ if (children[i].getAttribute('v-if') != null || children[i].getAttribute('v-else-if') || children[i].getAttribute('v-else')) {
18368
+ continue;
18369
+ }
18370
+ children[i].classList.add('_pome-ui-opened');
18371
+ children[i].classList.add('_pome-ui-opening');
18372
+ }
18373
+
18374
+ var ret = template.indexOf('<html') >= 0 ? new XMLSerializer().serializeToString(dom) : dom.querySelector('body').innerHTML;
18375
+ component.template = ret;
18376
+ }
18359
18377
  _patchComponent(url, component);
18360
18378
  return Promise.resolve(component);
18361
18379
  });
@@ -18376,6 +18394,7 @@ function build(options, exports) {
18376
18394
  instance.$created = component.created || function () { };
18377
18395
  instance.$mounted = component.mounted || function () { };
18378
18396
  instance.$unmounted = component.unmounted || function () { };
18397
+ instance.$delayClose = component.delayClose || 0;
18379
18398
  _attachContainer(instance);
18380
18399
  }
18381
18400
 
@@ -18472,111 +18491,133 @@ function build(options, exports) {
18472
18491
  currentProxy = instance.$.proxy;
18473
18492
  }
18474
18493
 
18494
+ var p = Promise.resolve();
18475
18495
  if (!this.active || this.active.$view != url || !_options.reuseContainerActiveView()) {
18476
- this.close();
18496
+ p = this.close();
18477
18497
  }
18478
18498
 
18479
18499
  var self = this;
18480
18500
 
18481
- params = generateParametersFromRoute(params);
18482
- _parseQueryString(params);
18483
- if (_options.reuseContainerActiveView() && this.active?.$view == url) {
18484
- var reuseComponentFunc = function (container) {
18485
- var p = Promise.resolve();
18486
- if (!container || !container.active) {
18487
- return p;
18488
- }
18501
+ return p.then(function () {
18502
+ var p = Promise.resolve();
18503
+ params = generateParametersFromRoute(params);
18504
+ _parseQueryString(params);
18505
+ if (_options.reuseContainerActiveView() && self.active?.$view == url) {
18506
+ var reuseComponentFunc = function (container) {
18507
+ if (!container || !container.active) {
18508
+ return p;
18509
+ }
18489
18510
 
18490
- if (_options.callUnmountedWhenReuseContainerActiveView(container.active.$view)) {
18491
- p = p.then(function () {
18492
- var val = container.active.$unmounted();
18493
- if (val instanceof Promise) {
18494
- return val;
18495
- } else {
18496
- return Promise.resolve();
18497
- }
18498
- });
18499
- }
18500
- p = p.then(function () {
18501
- var initData = container.active.$data();
18502
- if (_options.resetDataWhenReuseContainerActiveView()) {
18503
- _combineObject(initData, container.active);
18511
+ if (_options.callUnmountedWhenReuseContainerActiveView(container.active.$view)) {
18512
+ p = p.then(function () {
18513
+ var val = container.active.$unmounted();
18514
+ if (val instanceof Promise) {
18515
+ return val;
18516
+ } else {
18517
+ return Promise.resolve();
18518
+ }
18519
+ });
18504
18520
  }
18505
- _combineObject(params, container.active);
18506
- return Promise.resolve();
18507
- });
18508
- if (_options.callCreatedWhenReuseContainerActiveView(container.active.$view)) {
18509
- p = p.then(function () {
18510
- var val = container.active.$created();
18511
- if (val instanceof Promise) {
18512
- return val;
18513
- } else {
18514
- return Promise.resolve();
18515
- }
18516
- });
18517
- }
18518
- if (_options.callMountedWhenReuseContainerActiveView(container.active.$view)) {
18519
18521
  p = p.then(function () {
18520
- var val = container.active.$mounted();
18521
- if (val instanceof Promise) {
18522
- return val;
18523
- } else {
18524
- return Promise.resolve();
18522
+ var initData = container.active.$data();
18523
+ if (_options.resetDataWhenReuseContainerActiveView()) {
18524
+ _combineObject(initData, container.active);
18525
18525
  }
18526
+ _combineObject(params, container.active);
18527
+ return Promise.resolve();
18526
18528
  });
18527
- }
18529
+ if (_options.callCreatedWhenReuseContainerActiveView(container.active.$view)) {
18530
+ p = p.then(function () {
18531
+ var val = container.active.$created();
18532
+ if (val instanceof Promise) {
18533
+ return val;
18534
+ } else {
18535
+ return Promise.resolve();
18536
+ }
18537
+ });
18538
+ }
18539
+ if (_options.callMountedWhenReuseContainerActiveView(container.active.$view)) {
18540
+ p = p.then(function () {
18541
+ var val = container.active.$mounted();
18542
+ if (val instanceof Promise) {
18543
+ return val;
18544
+ } else {
18545
+ return Promise.resolve();
18546
+ }
18547
+ });
18548
+ }
18528
18549
 
18529
- if (container.active.$containers && container.active.$containers.length) {
18530
- for (var i = 0; i < container.active.$containers.length; ++i) {
18531
- reuseComponentFunc(container.active.$containers[i]);
18550
+ if (container.active.$containers && container.active.$containers.length) {
18551
+ for (var i = 0; i < container.active.$containers.length; ++i) {
18552
+ reuseComponentFunc(container.active.$containers[i]);
18553
+ }
18532
18554
  }
18533
- }
18534
18555
 
18535
- return p.then(function () { container.active.$forceUpdate(); return Promise.resolve(container.active) });
18556
+ return p.then(function () { container.active.$forceUpdate(); return Promise.resolve(container.active) });
18536
18557
 
18558
+ }
18559
+ return Promise.resolve(reuseComponentFunc(self));
18537
18560
  }
18538
- return Promise.resolve(reuseComponentFunc(this));
18539
- }
18540
18561
 
18541
- var _result;
18542
- var retryLeft = 20;
18543
- var buildRetryPromise = function () {
18544
- return new Promise(function (res, rej) {
18545
- var active = _result.mount(self.selector);
18546
- if (active) {
18547
- self.active = active;
18548
- return Promise.resolve(active);
18549
- }
18562
+ var _result;
18563
+ var retryLeft = 20;
18564
+ var buildRetryPromise = function () {
18565
+ var final = new Promise(function (res, rej) {
18566
+ var active = _result.mount(self.selector);
18567
+ if (active) {
18568
+ self.active = active;
18569
+ return Promise.resolve(active);
18570
+ }
18550
18571
 
18551
- if (--retryLeft > 0) {
18552
- return sleep(50).then(function () {
18553
- return buildRetryPromise();
18554
- });
18555
- } else {
18556
- return Promise.reject('Mount component to ' + self.selector + ' failed');
18557
- }
18558
- });
18559
- };
18572
+ if (--retryLeft > 0) {
18573
+ return sleep(50).then(function () {
18574
+ return buildRetryPromise();
18575
+ });
18576
+ } else {
18577
+ return Promise.reject('Mount component to ' + self.selector + ' failed');
18578
+ }
18579
+ });
18580
+ return final;
18581
+ };
18560
18582
 
18561
- return _buildApp(url, params, mobile, currentProxy).then(function (result) {
18562
- _result = result;
18563
- return buildRetryPromise();
18583
+ return _buildApp(url, params, mobile, currentProxy).then(function (result) {
18584
+ _result = result;
18585
+ return buildRetryPromise();
18586
+ });
18564
18587
  });
18565
18588
  },
18566
- close: function (recurse = true) {
18567
- function liftClose(container) {
18589
+ close: async function (recurse = true) {
18590
+ async function liftClose(container) {
18568
18591
  if (container.active && container.active.$) {
18569
18592
  if (recurse) {
18570
18593
  for (var i = 0; i < container.active.$containers.length; ++i) {
18571
18594
  liftClose(container.active.$containers[i]);
18572
18595
  }
18573
18596
  }
18574
- container.active.$.appContext.app.unmount();
18597
+
18598
+ if (container.active.$delayClose) {
18599
+ console.log(container.active.$el);
18600
+ try {
18601
+ if (container.active.$el && container.active.$el.nextElementSibling) {
18602
+ container.active.$el.nextElementSibling?.classList?.add('_pome-ui-closing');
18603
+ }
18604
+ } catch (ex) {
18605
+ console.warn(ex);
18606
+ }
18607
+ console.log(`sleeping ${container.active.$delayClose}ms...`);
18608
+ await sleep(container.active.$delayClose);
18609
+ }
18610
+
18611
+ try {
18612
+ container.active.$.appContext.app.unmount();
18613
+ } catch (ex) {
18614
+ console.warn(ex);
18615
+ }
18575
18616
  container.active = null;
18576
18617
  }
18577
18618
  }
18578
-
18579
- liftClose(this);
18619
+
18620
+ await liftClose(this);
18580
18621
  },
18581
18622
  active: null
18582
18623
  };
@@ -19030,12 +19071,37 @@ function build(options, exports) {
19030
19071
  appendCssReference(view, options.style);
19031
19072
  }
19032
19073
  ++_css[view];
19033
- return originalCreated.call(this);
19074
+ this.createdPromise = Promise.resolve();
19075
+ var ret = originalCreated.call(this);
19076
+ if (ret instanceof Promise) {
19077
+ this.createdPromise = ret;
19078
+ }
19079
+
19080
+ return ret;
19034
19081
  };
19035
19082
 
19036
19083
  var originalMounted = options.mounted;
19037
19084
  options.mounted = function () {
19038
- // placeholder
19085
+ // Remove opening class if needed
19086
+ if (options.delayOpen) {
19087
+ var self = this;
19088
+ (self.createdPromise || Promise.resolve()).then(function () {
19089
+ setTimeout(function () {
19090
+ var doms = self.$el.parentNode.querySelectorAll('._pome-ui-opening');
19091
+ for (var i = 0; i < doms.length; ++i) {
19092
+ doms[i].classList.remove('_pome-ui-opening');
19093
+ }
19094
+ }, 1);
19095
+
19096
+ setTimeout(function () {
19097
+ var doms = self.$el.parentNode.querySelectorAll('._pome-ui-opened');
19098
+ for (var i = 0; i < doms.length; ++i) {
19099
+ doms[i].classList.remove('_pome-ui-opened');
19100
+ }
19101
+ }, options.delayOpen);
19102
+ });
19103
+ }
19104
+
19039
19105
  return originalMounted.call(this);
19040
19106
  };
19041
19107
 
@@ -19112,16 +19178,17 @@ function build(options, exports) {
19112
19178
  var val = params[fields[i]];
19113
19179
  exports.root()[fields[i]] = val;
19114
19180
  }
19115
-
19116
- exports.root().$containers[0].open(route.view, params);
19117
- var promise = Promise.resolve();
19118
- if (typeof exports.root().$.$onUpdating == 'function') {
19119
- var result = exports.root().$.$onUpdating.call(exports.root());
19120
- if (result instanceof Promise) {
19121
- promise = result;
19181
+
19182
+ return exports.root().$containers[0].open(route.view, params).then(function () {
19183
+ var promise = Promise.resolve();
19184
+ if (typeof exports.root().$.$onUpdating == 'function') {
19185
+ var result = exports.root().$.$onUpdating.call(exports.root());
19186
+ if (result instanceof Promise) {
19187
+ promise = promise.then(() => result);
19188
+ }
19122
19189
  }
19123
- }
19124
- return promise;
19190
+ return promise;
19191
+ });
19125
19192
  }
19126
19193
 
19127
19194
  exports.root().$.appContext.app.unmount();