pome-ui 2.0.0-preview50 → 2.0.0-preview51

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pome-ui",
-  "version": "2.0.0-preview50",
+  "version": "2.0.0-preview51",
   "description": "Front-end MVC library",
   "main": "pome-ui.js",
   "bin": {

package/pome-skeleton.css

@@ -0,0 +1,121 @@
+/* Pomelo Vue Skeleton Styles
+ * These styles control the skeleton loading placeholder appearance.
+ * You can override any of these rules in your own CSS to customize the skeleton effect.
+ */
+
+/* Skeleton container */
+._pome-skeleton {
+    pointer-events: none !important;
+    user-select: none !important;
+}
+
+/* Hide all text and visual decorations inside skeleton */
+._pome-skeleton * {
+    color: transparent !important;
+    -webkit-text-fill-color: transparent !important;
+    border-color: transparent !important;
+    box-shadow: none !important;
+    text-shadow: none !important;
+}
+
+/* Hide media elements */
+._pome-skeleton svg,
+._pome-skeleton video,
+._pome-skeleton canvas,
+._pome-skeleton iframe {
+    visibility: hidden !important;
+}
+
+._pome-skeleton img {
+    visibility: hidden !important;
+}
+
+/* Shimmer animation keyframes */
+@keyframes _pome-sk-shimmer {
+    0% { background-position: 100% 50%; }
+    100% { background-position: 0 50%; }
+}
+
+/* Shimmer class – applied to elements that should show the loading animation */
+._pome-sk-shimmer {
+    background-image: linear-gradient(90deg, #e8e8e8 25%, #d8d8d8 37%, #e8e8e8 63%) !important;
+    background-size: 400% 100% !important;
+    animation: _pome-sk-shimmer 1.4s ease infinite !important;
+}
+
+/* Inline elements sizing */
+._pome-skeleton span._pome-sk-shimmer,
+._pome-skeleton a._pome-sk-shimmer,
+._pome-skeleton label._pome-sk-shimmer {
+    display: inline-block !important;
+    min-width: 100px !important;
+    min-height: 1em !important;
+    border-radius: 4px !important;
+}
+
+/* Block elements sizing */
+._pome-skeleton p._pome-sk-shimmer,
+._pome-skeleton h1._pome-sk-shimmer,
+._pome-skeleton h2._pome-sk-shimmer,
+._pome-skeleton h3._pome-sk-shimmer,
+._pome-skeleton h4._pome-sk-shimmer,
+._pome-skeleton h5._pome-sk-shimmer,
+._pome-skeleton h6._pome-sk-shimmer,
+._pome-skeleton li._pome-sk-shimmer,
+._pome-skeleton blockquote._pome-sk-shimmer,
+._pome-skeleton figcaption._pome-sk-shimmer {
+    display: block !important;
+    min-height: 1em !important;
+    border-radius: 4px !important;
+}
+
+/* Table layout */
+._pome-skeleton table {
+    table-layout: fixed !important;
+    width: 100% !important;
+}
+
+._pome-skeleton td,
+._pome-skeleton th {
+    color: transparent !important;
+    overflow: hidden !important;
+}
+
+._pome-skeleton td ._pome-sk-block,
+._pome-skeleton th ._pome-sk-block {
+    min-width: 0 !important;
+    width: 80% !important;
+}
+
+/* Button / input sizing */
+._pome-skeleton button._pome-sk-shimmer,
+._pome-skeleton input._pome-sk-shimmer,
+._pome-skeleton textarea._pome-sk-shimmer,
+._pome-skeleton select._pome-sk-shimmer {
+    display: inline-block !important;
+    min-width: 80px !important;
+    min-height: 1em !important;
+    border-radius: 4px !important;
+}
+
+/* Skeleton block – replaces text nodes */
+._pome-sk-block {
+    display: inline-block;
+    min-width: 100px;
+    height: 1em;
+    border-radius: 4px;
+    vertical-align: middle;
+    background-image: linear-gradient(90deg, #e8e8e8 25%, #d8d8d8 37%, #e8e8e8 63%);
+    background-size: 400% 100%;
+    animation: _pome-sk-shimmer 1.4s ease infinite;
+}
+
+/* Skeleton image – replaces img elements */
+._pome-sk-img {
+    display: inline-block;
+    border-radius: 4px;
+    vertical-align: middle;
+    background-image: linear-gradient(90deg, #e8e8e8 25%, #d8d8d8 37%, #e8e8e8 63%);
+    background-size: 400% 100%;
+    animation: _pome-sk-shimmer 1.4s ease infinite;
+}

package/pome-ui.dev.js

@@ -18196,6 +18196,195 @@ function build(options, exports) {
         document.head.appendChild(style);
     }
 
+    function _ensureSkeletonStyle() {
+        // pome-skeleton.css must be referenced by the host page manually.
+        // This function is kept as a hook point for future use.
+    }
+
+    // --- Known HTML tags for skeleton (custom components will be unwrapped) ---
+    var _knownHtmlTags = null;
+    function _isKnownHtmlTag(tag) {
+        if (!_knownHtmlTags) {
+            _knownHtmlTags = {};
+            'div,span,p,a,h1,h2,h3,h4,h5,h6,ul,ol,li,table,thead,tbody,tfoot,tr,td,th,colgroup,col,img,video,canvas,iframe,svg,form,input,textarea,select,option,button,label,section,article,aside,header,footer,nav,main,figure,figcaption,blockquote,pre,code,em,strong,i,b,u,small,sub,sup,br,hr,dl,dt,dd,details,summary,fieldset,legend,caption,abbr,cite,mark,time,address'.split(',').forEach(function(t) { _knownHtmlTags[t] = true; });
+        }
+        return !!_knownHtmlTags[tag];
+    }
+
+    function _generateSkeletonHtml(templateHtml) {
+        if (!templateHtml) return '';
+        var html = templateHtml;
+        // Remove Vue mustache expressions – replace with non-breaking space
+        html = html.replace(/\{\{[\s\S]*?\}\}/g, '\u00A0');
+        // Parse as DOM
+        var doc = new DOMParser().parseFromString(
+            '<div id="_pome-sk-wrap">' + html + '</div>', 'text/html'
+        );
+        var root = doc.getElementById('_pome-sk-wrap');
+        if (!root) return '';
+        // Pass 1 – structural: unwrap <template> slots, replace custom elements,
+        //   clone v-for rows, remove v-else branches
+        _skeletonStructurePass(root, doc);
+        // Pass 2 – cleanup: strip Vue directives, replace text with skeleton blocks
+        _skeletonCleanupPass(root);
+        return root.innerHTML;
+    }
+
+    function _wrapTemplateWithSkeleton(opt) {
+        if (!opt.skeleton || !opt.template) return;
+        _ensureSkeletonStyle();
+        var skeletonHtml = typeof opt.skeleton === 'string'
+            ? opt.skeleton
+            : _generateSkeletonHtml(opt.template);
+
+        var inner = '<template v-if="!pomeSkeletonLoading">' + opt.template
+            + '</template><div v-if="pomeSkeletonLoading" class="_pome-skeleton">'
+            + skeletonHtml + '</div>';
+
+        if (opt.delayOpen) {
+            // Wrap everything in a single div with reactive delayOpen classes
+            // so the delayOpen animation applies to both skeleton and real content.
+            opt.template = '<div :class="{\'_pome-ui-opened\': pomeDelayOpened, \'_pome-ui-opening\': pomeDelayOpening}">' + inner + '</div>';
+        } else {
+            opt.template = inner;
+        }
+    }
+
+    // --- Pass 1: structural transformations ---
+    function _skeletonStructurePass(node, doc) {
+        if (!node || node.nodeType !== 1) return;
+        var i = 0;
+        while (i < node.childNodes.length) {
+            var child = node.childNodes[i];
+            if (child.nodeType !== 1) { i++; continue; }
+            var tag = child.tagName.toLowerCase();
+
+            // 1. Handle <template> tags (Vue slots)
+            if (tag === 'template') {
+                // Determine slot name from #xxx or v-slot:xxx
+                var slotName = null;
+                for (var a = 0; a < child.attributes.length; a++) {
+                    var attr = child.attributes[a].name;
+                    if (attr[0] === '#') { slotName = attr.substring(1); break; }
+                    if (attr.indexOf('v-slot:') === 0) { slotName = attr.substring(7); break; }
+                }
+                // Only keep the default slot (or unnamed templates); discard others
+                if (slotName && slotName !== 'default') {
+                    node.removeChild(child);
+                    continue;
+                }
+                // Unwrap template content into parent
+                if (child.content) {
+                    var tplNodes = Array.from(child.content.childNodes);
+                    for (var j = 0; j < tplNodes.length; j++) {
+                        node.insertBefore(doc.importNode(tplNodes[j], true), child);
+                    }
+                }
+                node.removeChild(child);
+                continue; // re-examine index (new children inserted)
+            }
+
+            // 2. Remove v-else / v-else-if branches entirely
+            if (child.getAttribute('v-else') !== null || child.getAttribute('v-else-if') !== null) {
+                node.removeChild(child);
+                continue;
+            }
+
+            // 3. Handle v-for – clone element to simulate repeated rows
+            if (child.getAttribute('v-for')) {
+                child.removeAttribute('v-for');
+                var cloneCount = (tag === 'tr') ? 4 : (tag === 'li') ? 3 : 2;
+                var refNode = child.nextSibling;
+                for (var j = 0; j < cloneCount; j++) {
+                    var clone = child.cloneNode(true);
+                    node.insertBefore(clone, refNode);
+                }
+                // fall through to continue processing this element
+            }
+
+            // 4. Replace custom/unknown elements with <div>, keep children
+            if (!_isKnownHtmlTag(tag)) {
+                var div = doc.createElement('div');
+                if (child.getAttribute('class')) div.setAttribute('class', child.getAttribute('class'));
+                if (child.getAttribute('style')) div.setAttribute('style', child.getAttribute('style'));
+                while (child.firstChild) div.appendChild(child.firstChild);
+                node.replaceChild(div, child);
+                _skeletonStructurePass(div, doc); // recurse into replacement
+                i++;
+                continue;
+            }
+
+            // 5. Recurse into known elements
+            _skeletonStructurePass(child, doc);
+            i++;
+        }
+    }
+
+    // --- Pass 2: cleanup directives, replace text, handle media ---
+    function _skeletonCleanupPass(node) {
+        if (!node) return;
+        if (node.nodeType === 1) {
+            // Strip Vue directives / bindings / event listeners
+            var attrsToRemove = [];
+            for (var i = 0; i < node.attributes.length; i++) {
+                var attrName = node.attributes[i].name;
+                if (attrName.indexOf('v-') === 0 || attrName[0] === '@' || attrName[0] === ':' || attrName[0] === '#') {
+                    attrsToRemove.push(attrName);
+                }
+            }
+            for (var i = 0; i < attrsToRemove.length; i++) {
+                node.removeAttribute(attrsToRemove[i]);
+            }
+            // Remove delayOpen classes
+            node.classList.remove('_pome-ui-opened');
+            node.classList.remove('_pome-ui-opening');
+            // Add shimmer class to leaf-level text containers
+            var tag = node.tagName.toLowerCase();
+            var shimmerTags = {span:1,a:1,p:1,h1:1,h2:1,h3:1,h4:1,h5:1,h6:1,li:1,label:1,button:1,input:1,textarea:1,select:1,dt:1,dd:1,figcaption:1,blockquote:1};
+            if (shimmerTags[tag]) {
+                node.classList.add('_pome-sk-shimmer');
+            }
+            if (tag === 'img') {
+                // Replace img with a shimmer skeleton block that preserves dimensions
+                var imgBlock = node.ownerDocument.createElement('span');
+                imgBlock.className = '_pome-sk-img';
+                // Preserve sizing from class or explicit attributes
+                if (node.getAttribute('class')) imgBlock.className += ' ' + node.getAttribute('class');
+                if (node.getAttribute('width')) imgBlock.style.width = node.getAttribute('width') + (/\d$/.test(node.getAttribute('width')) ? 'px' : '');
+                else imgBlock.style.width = '24px';
+                if (node.getAttribute('height')) imgBlock.style.height = node.getAttribute('height') + (/\d$/.test(node.getAttribute('height')) ? 'px' : '');
+                else imgBlock.style.height = '24px';
+                node.parentNode.replaceChild(imgBlock, node);
+                return; // node replaced, skip children
+            }
+            if (tag === 'video' || tag === 'canvas' || tag === 'iframe') {
+                node.removeAttribute('src');
+                node.removeAttribute('srcset');
+                node.style.backgroundColor = '#e8e8e8';
+                node.style.borderRadius = '4px';
+            }
+        }
+        var children = Array.from(node.childNodes);
+        for (var i = 0; i < children.length; i++) {
+            var child = children[i];
+            if (child.nodeType === 3) { // text node
+                // \u00A0 comes from mustache replacement – treat it as content
+                var text = child.textContent.replace(/[\s\u00A0]+/g, '');
+                var hasNbsp = child.textContent.indexOf('\u00A0') >= 0;
+                if (text || hasNbsp) {
+                    var parentTag = child.parentNode && child.parentNode.tagName
+                        ? child.parentNode.tagName.toLowerCase() : '';
+                    var block = child.ownerDocument.createElement('span');
+                    block.className = '_pome-sk-block';
+                    block.innerHTML = '\u00A0';
+                    child.parentNode.replaceChild(block, child);
+                }
+            } else if (child.nodeType === 1) {
+                _skeletonCleanupPass(child);
+            }
+        }
+    }
+
     function _httpCached(url) {
         return !!_cache[url];
     }
@@ -18481,14 +18670,21 @@ function build(options, exports) {
                             if (children[i].getAttribute('v-if') != null || children[i].getAttribute('v-else-if') || children[i].getAttribute('v-else')) {
                                 continue;
                             }
-                            children[i].classList.add('_pome-ui-opened');
-                            children[i].classList.add('_pome-ui-opening');
+                            if (component.skeleton) {
+                                // Skeleton mode: delayOpen classes will be added by
+                                // _wrapTemplateWithSkeleton on an outer wrapper div.
+                                // No need to add them to individual children here.
+                            } else {
+                                children[i].classList.add('_pome-ui-opened');
+                                children[i].classList.add('_pome-ui-opening');
+                            }
                         }
 
                         var ret = template.indexOf('<html') >= 0 ? new XMLSerializer().serializeToString(dom) : dom.querySelector('body').innerHTML;
                         component.template = ret;
                     }
                     _patchComponent(url, component);
+                    _wrapTemplateWithSkeleton(component);
                     return Promise.resolve(component);
                 });
             })
@@ -19229,24 +19425,51 @@ function build(options, exports) {
             options.created = function () { };
         }
 
-        if (options.style) {
+        if (options.style || options.skeleton) {
             var originalCreated = options.created;
             options.created = function () {
-                if (!_css[view]) {
-                    _css[view] = 0;
-                }
-                if (_css[view] == 0) {
-                    if (_options.preloadCss) {
-                        this._cssLoadPromise = appendCssReferenceAsync(view, options.style);
-                    } else {
-                        appendCssReference(view, options.style);
+                if (options.style) {
+                    if (!_css[view]) {
+                        _css[view] = 0;
                     }
+                    if (_css[view] == 0) {
+                        if (_options.preloadCss) {
+                            this._cssLoadPromise = appendCssReferenceAsync(view, options.style);
+                        } else {
+                            appendCssReference(view, options.style);
+                        }
+                    }
+                    ++_css[view];
                 }
-                ++_css[view];
+
                 this.createdPromise = Promise.resolve();
                 var ret = originalCreated.call(this);
                 if (ret instanceof Promise) {
                     this.createdPromise = ret;
+                    if (options.skeleton) {
+                        var self = this;
+                        // For skeleton + delayOpen: start the delayOpen animation
+                        // IMMEDIATELY so the skeleton fades in right away.
+                        if (options.delayOpen) {
+                            self.$nextTick(function () {
+                                requestAnimationFrame(function () {
+                                    requestAnimationFrame(function () {
+                                        self.pomeDelayOpening = false;
+                                    });
+                                });
+                                setTimeout(function () {
+                                    self.pomeDelayOpened = false;
+                                }, options.delayOpen);
+                            });
+                        }
+                        ret.then(function () {
+                            self.pomeSkeletonLoading = false;
+                        }).catch(function (err) {
+                            console.error('[SKELETON] created Promise REJECTED:', err);
+                        });
+                    }
+                } else if (options.skeleton) {
+                    this.pomeSkeletonLoading = false;
                 }
 
                 return ret;
@@ -19268,11 +19491,12 @@ function build(options, exports) {
             }
 
             // Remove opening class if needed
-            if (options.delayOpen) {
+            if (options.delayOpen && !options.skeleton) {
                 var self = this;
-                (self.createdPromise || Promise.resolve()).then(function () {
+                var delayOpenFunc = function () {
                     requestAnimationFrame(function () {
                         requestAnimationFrame(function () {
+                            if (!self.$el || !self.$el.parentNode) return;
                             var doms = self.$el.parentNode.querySelectorAll('._pome-ui-opening');
                             for (var i = 0; i < doms.length; ++i) {
                                 doms[i].classList.remove('_pome-ui-opening');
@@ -19281,11 +19505,16 @@ function build(options, exports) {
                     });
 
                     setTimeout(function () {
+                        if (!self.$el || !self.$el.parentNode) return;
                         var doms = self.$el.parentNode.querySelectorAll('._pome-ui-opened');
                         for (var i = 0; i < doms.length; ++i) {
                             doms[i].classList.remove('_pome-ui-opened');
                         }
                     }, options.delayOpen);
+                };
+
+                (self.createdPromise || Promise.resolve()).then(function () {
+                    delayOpenFunc();
                 });
             }
 
@@ -19294,14 +19523,16 @@ function build(options, exports) {
 
         var originalUnmounted = options.unmounted;
         options.unmounted = function () {
-            if (!_css[view]) {
-                return;
-            }
+            if (options.style) {
+                if (!_css[view]) {
+                    return originalUnmounted.call(this);
+                }
 
-            --_css[view];
-            if (_css[view] <= 0) {
-                removeCssReference(view);
-                delete _css[view];
+                --_css[view];
+                if (_css[view] <= 0) {
+                    removeCssReference(view);
+                    delete _css[view];
+                }
             }
             return originalUnmounted.call(this);
         };
@@ -19593,6 +19824,7 @@ function build(options, exports) {
                 }
                 _hookSetup(_opt);
                 _patchComponent(c, _opt);
+                _wrapTemplateWithSkeleton(_opt);
                 _hookData(_opt);
                 var cssPreloadPromise = Promise.resolve();
                 if (_options.preloadCss && _opt.style) {
@@ -19700,6 +19932,13 @@ function build(options, exports) {
         opt.data = function (app) {
             var data = func1.call(this, app);
             var data2 = { pomeUiSubTitles: [] };
+            if (opt.skeleton) {
+                data2.pomeSkeletonLoading = true;
+            }
+            if (opt.skeleton && opt.delayOpen) {
+                data2.pomeDelayOpened = true;
+                data2.pomeDelayOpening = true;
+            }
             _combineObject(data2, data);
             return data;
         }