efront 3.16.1 → 3.18.0

package/coms/zimoli/getGenerator.js

@@ -47,8 +47,8 @@ var getGenerator = function (container, tagName = 'item') {
                 [itemName || '$item']: com,
                 [indexName || '$index']: index
             };
-            var newItem = render(element, newScope, scopes);
-            if (element.with) newItem.with = render(element.with, newScope, scopes);
+            var newItem = render(element, newScope, scopes, false);
+            if (element.with) newItem.with = render(element.with, newScope, scopes, false);
         } else {
             var newScope = container.src[index];
             if (!isObject(newScope)) newScope = {
@@ -68,8 +68,8 @@ var getGenerator = function (container, tagName = 'item') {
                     return this.$item;
                 }
             }
-            var newItem = render(element, newScope, scopes);
-            if (element.with) newItem.with = render(newItem.with = element.with, newScope, scopes);
+            var newItem = render(element, newScope, scopes, false);
+            if (element.with) newItem.with = render(newItem.with = element.with, newScope, scopes, false);
         }
         return newItem;
     };

package/coms/zimoli/getTreeFromData.js

@@ -5,8 +5,10 @@ function getTreeFromData(array) {
     root.count = 0;
     var map = {};
     array = array.filter(a => !!a);
+    var active_item = null;
     array.forEach(function (data) {
         var item = new Item(data);
+        if (!active_item && item.isActived()) active_item = item;
         if (data.id) {
             map[data.id] = item;
         } else {
@@ -46,5 +48,6 @@ function getTreeFromData(array) {
         return item.count = count;
     };
     run(root);
+    root.actived = active_item;
     return root;
 }

package/coms/zimoli/list.js

@@ -379,12 +379,12 @@ function ylist(container, generator, $Y) {
         if (deltay >= delta) {
             return false;
         }
-        if (deltay < 1) y = target_y;
-        else if (deltay > count || deltay > 3) {
-            y = last_y + (target_y > last_y ? .8 : -.8);
-        }
+        if (deltay < 2) y = target_y;
         else {
-            y = (target_y + last_y) / 2;
+            var speed = Math.abs(spd.read()[0]);
+            if (speed < 1) speed = 1;
+            if (deltay < 3) speed = .5;
+            y = last_y + (target_y > last_y ? speed : -speed);
         }
         list.Top(y);
         if (target_y === y) {

package/coms/zimoli/menu.js

@@ -90,7 +90,11 @@ var getTreeNodes = function (elem) {
     [].forEach.call(elem.children, run);
     return nodes;
 };
-
+var emitEvent = function (item, event) {
+    event.preventDefault(true);
+    if (item.disabled) return;
+    active(this, item, item, createItemTarget.call(this, item));
+}
 function bindGlobalkey(elem, keymap, emit) {
     if (elem.keymap) {
         for (var off of elem.keyoff) {
@@ -99,14 +103,6 @@ function bindGlobalkey(elem, keymap, emit) {
     }
     if (!keymap) return;
     var keyoff = [];
-    var emitEvent = function (item, event) {
-        event.preventDefault(true);
-        var $scope = {};
-        var { itemName } = this.$src;
-        if (itemName) $scope[itemName] = item;
-        else $scope.menu = item, $scope.$item = item;
-        emit(item, { $scope });
-    }
     for (let k in keymap) {
         keyoff.push(bind("keydown." + k)(elem, emitEvent.bind(elem, keymap[k])));
     }
@@ -153,10 +149,10 @@ function main(elem, mode) {
                 mode = "inline";
                 if (elem) {
                     var generator = getGenerator(elem, 'menu-item');
-                    tree(elem, function (index, item) {
+                    tree(elem, function (index, item, menu) {
                         var e = generator(index, item);
                         if (!e || e.children.length) return e;
-                        var m = menuItem(e, item, elem.useIcon);
+                        var m = menuItem(e, menu, elem.useIcon);
                         return m;
                     });
                     care(elem, function (data) {
@@ -198,8 +194,8 @@ function main(elem, mode) {
             case "y":
             case "vertical":
                 if (!direction) mode = "vertical", direction = 'y';
-                var emit = function (item, target) {
-                    active(elem, item.value, item, target);
+                var emit = function (item) {
+                    active(elem, item.value, item, createItemTarget.call(elem, item.value));
                 };
                 if ("$src" in elem) {
                     getGenerator(elem, 'menu-item');
@@ -209,6 +205,13 @@ function main(elem, mode) {
                         bindGlobalkey(elem, src.keymap, emit);
                         src0.splice(0, src0.length);
                         var s = getTreeFromData(src);
+                        if (s.actived) {
+                            elem.selected = s.actived;
+                        }
+                        else if (direction === 't') {
+                            elem.selected = s[0];
+                            if (elem.selected) elem.selected.setActive(true);
+                        }
                         var i = 0;
                         while (i < s.length) {
                             src0.push.apply(src0, s.slice(i, i += 1000));

package/coms/zimoli/menuItem.js

@@ -4,7 +4,7 @@ function main(elem, scope, hasIcon) {
     item.innerHTML = menuItem;
     if (isObject(scope) && scope !== item.$scope) {
     }
-    else {
+    else if (item.$scope) {
         var scope = item.$scope;
     }
     if (scope.menu) scope = scope.menu;
@@ -17,7 +17,7 @@ function main(elem, scope, hasIcon) {
     else {
         item.removeAttribute("disabled");
     }
-    render(item.children, scope, hasIcon instanceof Array ? hasIcon : [{ useIcon: hasIcon, hasIcon, name, icon }]);
+    render(item.children, scope, hasIcon instanceof Array ? hasIcon : [{ useIcon: hasIcon, hasIcon, name, icon }], false);
     if (scope.line) item.setAttribute("line", ''), on("click")(item, preventDefault);
     if (scope.hotkey) bindAccesskey(item, scope.hotkey);
     return item;

package/coms/zimoli/menuList.html

@@ -1,6 +1,6 @@
 <menu-item ng-repeat="menu in menus" ng-if="!menu.hidden" ng-click="open.call(this)" ng-mouseleave="cancel()"
     ng-mouseenter="popMenu.call(this)" ng-mousedown="popMenu1.call(this,event)" ng-class="{'has-children':menu.children&&menu.children.length,
     'warn':menu.type==='danger'||menu.type==='warn'||menu.type==='red',
-    'selected':menu.selected
+    'actived':menu.isActived()
 }">
 </menu-item>

package/coms/zimoli/menuList.js

@@ -166,18 +166,19 @@ function register() {
 }
 function main(page, items, active, direction = 'y') {
     if (!isNode(page)) {
-        var page = div();
+        var page = document.createElement("menu-list");
     }
     var main = this;
     if (direction == 'y') page.ispop = true;
     var istoolbar = direction === 't';
-    function popMenu(item, target) {
+    function popMenu(item, target, emptyFocus) {
         if (page.actived) {
             clear();
             remove(page.actived);
         }
+        if (emptyFocus !== false) page.setFocus(target);
+        if (!item.length) return;
         page.setFocus(target);
-        if (!item.children || !item.children.length) return;
         var clone = template.cloneNode();
         clone.$parentScopes = page.$parentScopes;
         clone.$scope = page.$scope;
@@ -188,7 +189,6 @@ function main(page, items, active, direction = 'y') {
         page.actived = menu;
         menu.root = page.root || page;
         popup(menu, target);
-        menu.setFocus(menu.firstMenu);
         if (page.ispop === true) {
         } else {
             page.ispop = 1;
@@ -234,18 +234,19 @@ function main(page, items, active, direction = 'y') {
         var pop = active(this.menu, this);
         if (pop === false) return;
         var root = page.root || page;
-        if (root.direction === 't') {
+        if (root.direction === 't' || root.selected) {
             var menu = this.menu;
+            if (root.selected) root.selected.setActive(false);
             if (root !== page) {
-                delete menu.children;
                 var target = root.actived.target;
-                menu = extend(target.menu, menu);
+                if (isObject(menu.value)) delete menu.value.children;
+                target.menu.extends(menu.value);
+                menu = target.menu;
             }
             else {
                 target = this;
             }
-            if (root.selected) root.selected.selected = false;
-            menu.selected = true;
+            menu.setActive(true);
             root.selected = target.menu;
         }
         if (root.ispop === 1) root.ispop = false;
@@ -253,7 +254,7 @@ function main(page, items, active, direction = 'y') {
             while (mounted_menus.length && mounted_menus[mounted_menus.length - 1] !== page.actived) remove(mounted_menus.pop());
             if (!mounted_menus.length) {
                 if (byMousedown === false) return;
-                popMenu(this.menu, this);
+                popMenu(this.menu, this, false);
             }
             else {
                 remove(mounted_menus.pop());
@@ -262,7 +263,7 @@ function main(page, items, active, direction = 'y') {
         else {
             while (mounted_menus.length && mounted_menus[mounted_menus.length - 1] !== page) remove(mounted_menus.pop());
             if (byMousedown === false) return;
-            popMenu(this.menu, this);
+            popMenu(this.menu, this, false);
             if (!page.actived) {
                 (page.root || page).blur();
             }
@@ -286,7 +287,7 @@ function main(page, items, active, direction = 'y') {
         var $scope = {
             "menu-item"(e, s) {
                 var a = button(
-                    menuItem(e, s, this.hasIcon)
+                    menuItem(e, s.value, this.hasIcon)
                 );
                 if (!page.firstMenu) {
                     page.firstMenu = a;
@@ -307,14 +308,13 @@ function main(page, items, active, direction = 'y') {
             var itemName = src.itemName;
             var className = `{'has-children':${itemName}.children&&${itemName}.children.length,
             'warn':${itemName}.type==='danger'||${itemName}.type==='warn'||${itemName}.type==='red',
-            'selected':${itemName}.selected
+            actived:${itemName}.isActived()
         }`;
             var notHidden = `!${itemName}.hidden`;
             var generator = getGenerator(page, 'menu-item');
             list(page, function (index) {
                 var item = items[index];
                 if (!item) return;
-                if (item instanceof Item) item = item.value;
                 var a = $scope["menu-item"](null, item);
                 if (src.itemName) a.setAttribute("e-if", notHidden);
                 a.setAttribute("e-class", className);

package/coms/zimoli/menuList.less

@@ -29,7 +29,7 @@
             color: #29c;
         }
 
-        &.selected {
+        &.actived {
             background: #29c;
             color: #fff;
         }

package/coms/zimoli/model.js

@@ -212,9 +212,9 @@ function main(elem) {
                     if (create) {
                         var e = create(elem, data, field_ref);
                         if (isNode(e)) {
-                            appendChild(elem, e);
+                            if (e !== elem) appendChild(elem, e);
                         }
-                        else {
+                        else if (!isEmpty(e)) {
                             elem.innerHTML = e;
                         }
                         return;
@@ -222,6 +222,7 @@ function main(elem) {
                     elem.innerHTML = '<span ng-bind=get()></span>';
                     render(elem, {
                         get() {
+                            if (!field.key) return;
                             var value = seek(data, field.key);
                             if (field.options) {
                                 if (!field.optionsMap) {
@@ -243,7 +244,7 @@ function main(elem) {
                 }
             } else {
                 var create = field_type === "function" ? field_editor : constructors[field_type];
-                var ipt = create ? create(elem, field_ref) : input();
+                var ipt = create ? create(elem, field_ref) : field.key ? input() : null;
 
                 if (ipt) {
                     if (ipt !== elem) appendChild(elem, ipt);

package/coms/zimoli/on.js

@@ -253,7 +253,7 @@ var checkroot = function (element, k) {
     if (!(k in element)) {
         if (element === window && k in document) {
             element = document;
-            if (!checkroot[k]) checkroot[k] = true, console.warn("use ", k, "on document instead of on window");
+            if (!checkroot[k]) checkroot[k] = true, console.warn("使用 document 的", k, "替代 window 的");
         }
     }
     return element;

package/coms/zimoli/once.js

@@ -1,15 +1,16 @@
+"use strict";
 var oncetree = {};
 function _once(key) {
     if (oncetree[key]) return oncetree[key];
-    return oncetree[key] = function (target, handler) {
-        var off = on(key)(target, function (event) {
+    return oncetree[key] = function (target, handler, firstmost) {
+        var off = on(key).call(this, target, function (event) {
             off();
             return handler.call(this, event);
-        });
+        }, firstmost);
         return off;
     };
 }
-function once(key, target, handler) {
-    if (isFunction(handler) && isNode(target)) return _once(key)(target, handler);
+function once(key, target, handler, firstmost) {
+    if (isFunction(handler) && isNode(target)) return _once(key).call(this, target, handler, firstmost);
     return _once(key);
 }

package/coms/zimoli/onmounted.js

@@ -9,5 +9,5 @@ function onmounted(target, handle) {
     if (isMounted(target)) {
         handle.call(target);
     }
-    onappend(target, handle);
+    on("mounted")(target, handle);
 }

package/coms/zimoli/render.js

@@ -10,7 +10,7 @@ presets.template = function (t) {
         node.innerHTML = t.innerHTML;
         comment.with = [].slice.call(node.childNodes, 0);
         appendChild.after(comment, comment.with);
-        renderElement(comment.with, comment.$scope, comment.$parentScopes);
+        renderElement(comment.with, comment.$scope, comment.$parentScopes, this.renderid === 9);
     });
     return comment;
 };
@@ -20,8 +20,11 @@ var renderidClosed = 0;
 var addRenderElement = function () {
     var element = this;
     if (!isNode(element)) return;
-    if (element.renderid < 10 && element.renderid > 0) element.renderid = ++renderidOffset;
-    renderElements[element.renderid] = element;
+    if (element.renderid !== 9) {
+        // 只渲染一次
+        if (element.renderid < 10 && element.renderid > 0) element.renderid = ++renderidOffset;
+        renderElements[element.renderid] = element;
+    }
     rebuild(element);
 };
 var removeRenderElement = function () {
@@ -78,12 +81,19 @@ var createGetter = function (search, isprop = true) {
 var initialComment = function (renders, type, expression) {
     var comment = document.createComment(`${type} ${expression}`);
     comment.renders = renders;
-    comment.renderid = ++renderidOffset;
-    onappend(comment, addRenderElement);
-    onremove(comment, removeRenderElement);
     appendChild.after(this, comment);
     if (!/if/i.test(type)) remove(this);
-    rebuild(comment);
+    if (!this.$struct.once) {
+        comment.renderid = ++renderidOffset;
+        onmounted(comment, addRenderElement);
+        onremove(comment, removeRenderElement);
+        if (isMounted(comment) || eagermount) rebuild(comment);
+    }
+    else {
+        comment.renderid = 9;
+        rebuild(comment);
+        remove(comment);
+    }
     return comment;
 };
 var parseRepeat = function (expression) {
@@ -228,7 +238,7 @@ var createIf = function (search, id = 0) {
                 appendChild.before(this, element);
                 if (element.renderid < 0) {
                     element.renderid = id;
-                    elements[cx] = render(element);
+                    elements[cx] = render(element, this.$scope, this.$parentScopes);
                 }
             }
             else {
@@ -442,7 +452,7 @@ var directives = {
         } else if (/^(select|input|textarea)$/i.test(this.tagName) || "value" in this) {
             this.renders.push(setter || function () {
                 var value = getter();
-                if (value === undefined) value = "";
+                if (isEmpty(value)) value = "";
                 if (deepEqual(oldValue, value)) return;
                 oldValue = value;
                 if (this.value !== value) this.value = value;
@@ -599,17 +609,17 @@ function getFromScopes(key, scope, parentScopes) {
     }
 }
 
-function renderElement(element, scope = element.$scope, parentScopes = element.$parentScopes) {
+function renderElement(element, scope = element.$scope, parentScopes = element.$parentScopes, once) {
     if (!isNode(element) && element.length) {
         return [].concat.apply([], element).map(function (element) {
-            return renderElement(element, scope, parentScopes);
+            return renderElement(element, scope, parentScopes, once);
         });
     }
     if (!isElement(element)) {
         return element;
     }
     if (!isNumber(element.renderid)) {
-        renderStructure(element, scope, parentScopes);
+        renderStructure(element, scope, parentScopes, once);
     }
     var elementid = element.getAttribute("renderid") || element.getAttribute("elementid") || element.getAttribute("id");
     if (elementid) {
@@ -631,7 +641,8 @@ function renderElement(element, scope = element.$scope, parentScopes = element.$
             if (parentNode.renderid > 1 || isMounted(parentNode)) element.renderid = 2;
         }
         element.renders = element.renders ? [].concat(element.renders) : [];
-        var { ons, copys, attrs, props, binds, context: withContext, ids } = element.$struct;
+        var { ons, copys, attrs, props, binds, context: withContext, ids, once } = element.$struct;
+        if (once) element.renderid = 9;
         delete element.$struct;
         if (binds.src) {
             element.$src = parseRepeat(binds.src);
@@ -679,7 +690,7 @@ function renderElement(element, scope = element.$scope, parentScopes = element.$
             }
         }
     }
-    if (element.children && element.children.length) renderElement(element.children, scope, parentScopes);
+    if (element.children && element.children.length) renderElement(element.children, scope, parentScopes, once);
     if (!isFirstRender) return element;
     for (var k in binds) {
         if (directives.hasOwnProperty(k)) {
@@ -699,10 +710,15 @@ function renderElement(element, scope = element.$scope, parentScopes = element.$
     }
     ons.forEach(([on, key, value]) => on.call(element, key, [withContext, value]));
     if (element.renders.length) {
-        rebuild(element);
-        onappend(element, addRenderElement);
-        onremove(element, removeRenderElement);
-        if (isMounted(element) || element.renderid > 1) addRenderElement.call(element);
+        if (element.renderid !== 9) {
+            onmounted(element, addRenderElement);
+            onremove(element, removeRenderElement);
+            if (isMounted(element) || element.renderid > 1) addRenderElement.call(element);
+            else if (eagermount) rebuild(element);
+        }
+        else {
+            rebuild(element);
+        }
     }
     if (elementid) scope[elementid] = element;
     for (var id of ids) {
@@ -710,7 +726,7 @@ function renderElement(element, scope = element.$scope, parentScopes = element.$
     }
     return element;
 }
-function renderStructure(element, scope, parentScopes = []) {
+function renderStructure(element, scope, parentScopes = [], once) {
     // 处理结构流
     if (parentScopes !== null && !isArray(parentScopes)) {
         throw new Error('父级作用域链应以数组的类型传入');
@@ -791,19 +807,40 @@ function renderStructure(element, scope, parentScopes = []) {
             if (!/\-/.test(name) || value === '') {
                 copys.push(attr);
             }
-            props[name.replace(/\-(\w)/g, (_, w) => w.toUpperCase())] = value === "" ? true : value;
+            var k = name.replace(/\-(\w)/g, (_, w) => w.toUpperCase());
+            if (!(k in element)) {
+                props[k] = value === "" ? true : value;
+            }
+            else {
+                props[k] = element[k];
+            }
         }
     }
-    if (!element.$struct) element.$struct = { ons, copys, binds, attrs: attr1, props, context: withContext, ids };
+    if (props["zimoli"] || props["fresh"] || props["once"]) once = true;
+    else if (props["refresh"] || props["digest"] || props["mount"]) once = false;
+    if (!element.$struct) element.$struct = { ons, copys, binds, attrs: attr1, props, context: withContext, ids, once };
     if (element.renderid <= -1) createStructure.call(element, types.if, types.repeat, withContext);
 }
-function render(element, scope, parentScopes) {
+var eagermount = false, renderlock = false;
+function render(element, scope, parentScopes, lazy = true) {
     var if_top_length = if_top.length;
-    var e = renderElement(element, scope, parentScopes);
+    var haslock = false;
+    if (isFinite(scope) && arguments.length === 2) lazy = scope, scope = undefined;
+    else if (isFinite(parentScopes) && arguments.length === 3) lazy = parentScopes, parentScopes = undefined;
+    var renderonce = lazy === 0;
+    if (!renderlock) {
+        haslock = true;
+        renderlock = true;
+        eagermount = !+lazy;
+    }
+    var e = renderElement(element, scope, parentScopes, renderonce);
+    if (haslock) {
+        renderlock = false;
+        eagermount = false;
+    }
     if (if_top_length < if_top.length) if_top.splice(if_top_length, if_top.length - if_top_length);
     return e;
 }
-
 var digest = lazy(refresh, -{});
 render.digest = render.apply = render.refresh = digest;
 render.parseRepeat = parseRepeat;

package/coms/zimoli/renderDefaults.js

@@ -8,6 +8,7 @@ extend(renderDefaults, {
     go: zimoli.go,
     care,
     cast,
+    container,
     input,
     padding,
     block,

package/coms/zimoli/resize.js

@@ -142,6 +142,7 @@ function resize(elem, initialEvent) {
 }
 moveupon(window, handle);
 
+
 resize.on = function (elem, dragHandle) {
     if (elem) {
         elem.dragHandle = dragHandle;
@@ -150,6 +151,23 @@ resize.on = function (elem, dragHandle) {
         var off = onmousemove(window, getResizer);
         onremove(elem, off);
     });
+    var computed = getComputedStyle(elem);
+    var resizeh = function () {
+        var elem = this;
+        if (elem.scrollWidth > elem.clientWidth) {
+            css(elem, { width: elem.offsetWidth });
+            dispatch(elem, 'resize');
+        }
+        if (elem.scrollHeight > elem.clientHeight) {
+            css(elem, { height: elem.offsetHeight });
+            dispatch(elem, 'resize');
+        }
+        if (unbind && parseInt(computed.height) && parseInt(computed.width)) {
+            unbind();
+            unbind = null;
+        };
+    }
+    if (!parseInt(computed.height) || !parseInt(computed.width)) var unbind = bind('render')(elem, resizeh);
     if (!~resizingElements.indexOf(elem)) {
         resizingElements.push(elem);
         once('remove')(elem, function () {

package/coms/zimoli/scrollbar.js

@@ -2,7 +2,7 @@ var scrollbary = function () {
     var reshape = function (scrollHeight, offsetHeight) {
         var target = this.target;
         if (target) {
-            this.style.height = target.offsetHeight + "px";
+            css(this, { height: target.offsetHeight });
         }
         var scrollbarHeight = this.offsetHeight;
         var ratio = offsetHeight / scrollHeight;
@@ -10,11 +10,14 @@ var scrollbary = function () {
         if (thumbHeight < 14) thumbHeight = 14;
         if (thumbHeight < 0) thumbHeight = 0;
         this.restHeight = scrollHeight - offsetHeight;
-        this.thumb.style.height = thumbHeight + "px";
+        css(this.thumb, {
+            height: thumbHeight
+        });
         if (thumbHeight >= this.clientHeight) {
             this.style.opacity = 0;
         } else {
             this.style.opacity = 1;
+            this.autoshow();
         }
     };
     var getTop = function () {
@@ -59,7 +62,7 @@ var scrollbary = function () {
         deltaY = targetY - thumbTop;
         moving.y += deltaY;
         if (targetY !== thumbTop) {
-            thumb.style.top = targetY + "px";
+            css(thumb, { top: targetY });
             dispatch(target, "change");
         }
     };
@@ -138,7 +141,7 @@ var scrollbary = function () {
         return { Height, height };
     };
 
-    function bindTarget(_container) {
+    function bindTarget(_container, followResize = _container) {
         var _scrollbar = this;
         _container.with = _scrollbar;
         onappend(_container, _scrollbar.reshape);
@@ -146,24 +149,33 @@ var scrollbary = function () {
         on("scroll")(_container, function () {
             var top = getTargetTop(_container);
             _scrollbar.scrollTo(top);
+            _scrollbar.autoshow();
         });
         on("change")(_scrollbar, function () {
             var top = _scrollbar.Top();
             setTargetTop(_container, top);
         });
-        _scrollbar.reshape();
+        if (followResize) on("resize")(followResize, _scrollbar.reshape);
     }
-    function scrollbar() {
-        var _scrollbar = div();
+    function scrollbar(elem) {
+        var _scrollbar = elem || document.createElement("scrollbar");
         _scrollbar.reshape = function () {
             var _container = _scrollbar.target;
             var { Height, height } = getTargetHeight(_container);
             reshape.call(_scrollbar, Height, height);
         };
         _scrollbar.scrollTo = scrollTo;
-        var _handler = div();
+        var _handler = document.createElement("scrollbar-thumb");
         _handler.className = "thumb";
         _scrollbar.Top = getTop;
+        _scrollbar.autohide = lazy(function () {
+            this.thumb.style.opacity = 0;
+        }, 600);
+        _scrollbar.autoshow = function () {
+            this.autohide();
+            this.thumb.style.opacity = 1;
+        };
+
         moveupon(_handler, {
             start: mousedown,
             move: mousemove,

package/coms/zimoli/scrollbar.less

@@ -1,10 +1,31 @@
 & {
     position: absolute;
-    width: 14px;
+    width: 6px;
     background-color: rgba(0, 0, 0, .1);
     border-radius: 7px;
     height: 100px;
+    border-left: 3px solid transparent;
+
+    &:hover {
+        >.thumb {
+            opacity: 1 !important;
+            overflow: visible;
+        }
+    }
+
     >.thumb {
+        &:after {
+            position: absolute;
+            top: 0;
+            bottom: 0;
+            left: -4px;
+            right: -4px;
+            width: auto;
+            display: block;
+            content: "";
+        }
+
+        transition: opacity .2s;
         position: absolute;
         border-radius: 7px;
         height: 100%;