vxe-pc-ui 3.5.3 → 3.5.4
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.
- package/es/icon/style.css +1 -1
- package/es/split/src/split.js +16 -0
- package/es/split/style.css +1 -1
- package/es/split/style.min.css +1 -1
- package/es/style.css +1 -1
- package/es/style.min.css +1 -1
- package/es/ui/index.js +1 -1
- package/es/ui/src/log.js +1 -1
- package/es/vxe-split/style.css +1 -1
- package/es/vxe-split/style.min.css +1 -1
- package/lib/icon/style/style.css +1 -1
- package/lib/icon/style/style.min.css +1 -1
- package/lib/index.umd.js +18 -2
- package/lib/index.umd.min.js +1 -1
- package/lib/split/src/split.js +16 -0
- package/lib/split/src/split.min.js +1 -1
- package/lib/split/style/style.css +1 -1
- package/lib/split/style/style.min.css +1 -1
- package/lib/style.css +1 -1
- package/lib/style.min.css +1 -1
- package/lib/ui/index.js +1 -1
- package/lib/ui/index.min.js +1 -1
- package/lib/ui/src/log.js +1 -1
- package/lib/ui/src/log.min.js +1 -1
- package/lib/vxe-split/style/style.css +1 -1
- package/lib/vxe-split/style/style.min.css +1 -1
- package/package.json +1 -1
- package/packages/split/src/split.ts +17 -0
- package/styles/components/split.scss +1 -1
- package/types/components/split.d.ts +1 -0
- /package/es/icon/{iconfont.1743080331925.ttf → iconfont.1743125681770.ttf} +0 -0
- /package/es/icon/{iconfont.1743080331925.woff → iconfont.1743125681770.woff} +0 -0
- /package/es/icon/{iconfont.1743080331925.woff2 → iconfont.1743125681770.woff2} +0 -0
- /package/es/{iconfont.1743080331925.ttf → iconfont.1743125681770.ttf} +0 -0
- /package/es/{iconfont.1743080331925.woff → iconfont.1743125681770.woff} +0 -0
- /package/es/{iconfont.1743080331925.woff2 → iconfont.1743125681770.woff2} +0 -0
- /package/lib/icon/style/{iconfont.1743080331925.ttf → iconfont.1743125681770.ttf} +0 -0
- /package/lib/icon/style/{iconfont.1743080331925.woff → iconfont.1743125681770.woff} +0 -0
- /package/lib/icon/style/{iconfont.1743080331925.woff2 → iconfont.1743125681770.woff2} +0 -0
- /package/lib/{iconfont.1743080331925.ttf → iconfont.1743125681770.ttf} +0 -0
- /package/lib/{iconfont.1743080331925.woff → iconfont.1743125681770.woff} +0 -0
- /package/lib/{iconfont.1743080331925.woff2 → iconfont.1743125681770.woff2} +0 -0
package/lib/split/src/split.js
CHANGED
|
@@ -116,6 +116,20 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
|
|
|
116
116
|
}
|
|
117
117
|
return [];
|
|
118
118
|
},
|
|
119
|
+
reset: function reset() {
|
|
120
|
+
var $xeSplit = this;
|
|
121
|
+
var reactData = $xeSplit.reactData;
|
|
122
|
+
var staticItems = reactData.staticItems;
|
|
123
|
+
staticItems.forEach(function (item) {
|
|
124
|
+
item.isExpand = true;
|
|
125
|
+
item.isVisible = true;
|
|
126
|
+
item.foldHeight = 0;
|
|
127
|
+
item.foldWidth = 0;
|
|
128
|
+
item.resizeHeight = 0;
|
|
129
|
+
item.resizeWidth = 0;
|
|
130
|
+
});
|
|
131
|
+
return $xeSplit.$nextTick();
|
|
132
|
+
},
|
|
119
133
|
recalculate: function recalculate() {
|
|
120
134
|
var $xeSplit = this;
|
|
121
135
|
var props = $xeSplit;
|
|
@@ -311,6 +325,7 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
|
|
|
311
325
|
resizeHeight: item.resizeHeight,
|
|
312
326
|
resizeWidth: item.resizeWidth
|
|
313
327
|
}, evnt);
|
|
328
|
+
$xeSplit.recalculate();
|
|
314
329
|
};
|
|
315
330
|
$xeSplit.dispatchEvent('resize-start', {
|
|
316
331
|
item: item,
|
|
@@ -364,6 +379,7 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
|
|
|
364
379
|
targetName: targetItem ? targetItem.name : '',
|
|
365
380
|
expanded: item.isExpand
|
|
366
381
|
}, evnt);
|
|
382
|
+
$xeSplit.recalculate();
|
|
367
383
|
}
|
|
368
384
|
}
|
|
369
385
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _comp=require("../../ui/src/comp"),_xeUtils=_interopRequireDefault(require("xe-utils")),_ui=require("../../ui"),_vn=require("../../ui/src/vn"),_dom=require("../../ui/src/dom"),_utils=require("../../ui/src/utils");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}var _default2=exports.default=(0,_comp.defineVxeComponent)({name:"VxeSplit",mixins:[_ui.globalMixins.sizeMixin],props:{width:[Number,String],height:[Number,String],vertical:{type:Boolean,default:function(){return(0,_ui.getConfig)().split.vertical}},border:{type:Boolean,default:function(){return(0,_ui.getConfig)().split.border}},padding:{type:Boolean,default:function(){return(0,_ui.getConfig)().split.padding}},itemConfig:Object,barConfig:Object,actionConfig:Object},data:function(){return{xID:_xeUtils.default.uniqueId(),reactData:{staticItems:[]},internalData:{}}},provide:function(){return{$xeSplit:this}},computed:Object.assign(Object.assign({},{}),{computeItemOpts:function(){return Object.assign({},(0,_ui.getConfig)().split.itemConfig,this.itemConfig)},computeBarOpts:function(){return Object.assign({},(0,_ui.getConfig)().split.barConfig,this.barConfig)},computeActionOpts:function(){return Object.assign({},(0,_ui.getConfig)().split.actionConfig,this.actionConfig)},computeIsFoldNext:function(){return"next"===this.computeActionOpts.direction},computeBarStyle:function(){var e=this.computeBarOpts,t=e.width,e=e.height,i={};return e&&(i.height=(0,_dom.toCssUnit)(e)),t&&(i.width=(0,_dom.toCssUnit)(t)),i}}),methods:{dispatchEvent:function(e,t,i){this.$emit(e,(0,_ui.createEvent)(i,{$split:this},t))},callSlot:function(e,t){var i=this.$scopedSlots;return e&&(_xeUtils.default.isString(e)&&(e=i[e]||null),_xeUtils.default.isFunction(e))?(0,_vn.getSlotVNs)(e(t)):[]},recalculate:function(){var h=this,
|
|
1
|
+
Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _comp=require("../../ui/src/comp"),_xeUtils=_interopRequireDefault(require("xe-utils")),_ui=require("../../ui"),_vn=require("../../ui/src/vn"),_dom=require("../../ui/src/dom"),_utils=require("../../ui/src/utils");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}var _default2=exports.default=(0,_comp.defineVxeComponent)({name:"VxeSplit",mixins:[_ui.globalMixins.sizeMixin],props:{width:[Number,String],height:[Number,String],vertical:{type:Boolean,default:function(){return(0,_ui.getConfig)().split.vertical}},border:{type:Boolean,default:function(){return(0,_ui.getConfig)().split.border}},padding:{type:Boolean,default:function(){return(0,_ui.getConfig)().split.padding}},itemConfig:Object,barConfig:Object,actionConfig:Object},data:function(){return{xID:_xeUtils.default.uniqueId(),reactData:{staticItems:[]},internalData:{}}},provide:function(){return{$xeSplit:this}},computed:Object.assign(Object.assign({},{}),{computeItemOpts:function(){return Object.assign({},(0,_ui.getConfig)().split.itemConfig,this.itemConfig)},computeBarOpts:function(){return Object.assign({},(0,_ui.getConfig)().split.barConfig,this.barConfig)},computeActionOpts:function(){return Object.assign({},(0,_ui.getConfig)().split.actionConfig,this.actionConfig)},computeIsFoldNext:function(){return"next"===this.computeActionOpts.direction},computeBarStyle:function(){var e=this.computeBarOpts,t=e.width,e=e.height,i={};return e&&(i.height=(0,_dom.toCssUnit)(e)),t&&(i.width=(0,_dom.toCssUnit)(t)),i}}),methods:{dispatchEvent:function(e,t,i){this.$emit(e,(0,_ui.createEvent)(i,{$split:this},t))},callSlot:function(e,t){var i=this.$scopedSlots;return e&&(_xeUtils.default.isString(e)&&(e=i[e]||null),_xeUtils.default.isFunction(e))?(0,_vn.getSlotVNs)(e(t)):[]},reset:function(){return this.reactData.staticItems.forEach(function(e){e.isExpand=!0,e.isVisible=!0,e.foldHeight=0,e.foldWidth=0,e.resizeHeight=0,e.resizeWidth=0}),this.$nextTick()},recalculate:function(){var h=this,f=h,m=h.reactData;return h.$nextTick().then(function(){var n,s,t,i,r,l,a,o,d,e=f.vertical,u=m.staticItems,c=h.$refs.refElem;c&&(n=c.clientWidth,s=c.clientHeight,n)&&s&&(c=h.computeItemOpts,t=_xeUtils.default.toNumber(c.minWidth),i=_xeUtils.default.toNumber(c.minHeight),r=[],e?(l=0,u.forEach(function(e){var t=e.height,i=0;t?(i=(0,_dom.isScale)(t)?s*_xeUtils.default.toNumber(t):_xeUtils.default.toNumber(t),e.renderHeight=i):r.push(e),l+=i}),r.length&&(a=(s-l)/r.length,r.forEach(function(e){e.renderHeight=Math.max(_xeUtils.default.toNumber((0,_utils.getGlobalDefaultConfig)(e.minHeight,i)),a)}))):(o=0,u.forEach(function(e){var t=e.width,i=0;t?(i=(0,_dom.isScale)(t)?n*_xeUtils.default.toNumber(t):_xeUtils.default.toNumber(t),e.renderWidth=i):r.push(e),o+=i}),r.length&&(d=(n-o)/r.length,r.forEach(function(e){e.renderWidth=Math.max(_xeUtils.default.toNumber((0,_utils.getGlobalDefaultConfig)(e.minWidth,t)),d)}))))})},dragEvent:function(e){var t,n,s,i,r,l,a,o,d,u,c,h,f,m,g,p,v=this,_=v,x=v.reactData,b=(e.preventDefault(),_.vertical),_=x.staticItems,x=e.currentTarget.parentElement,E=v.$refs.refElem;E&&(t=x.getAttribute("itemid"),x=_xeUtils.default.findIndexOf(_,function(e){return e.id===t}),n=_[x])&&n.isExpand&&(s=v.computeIsFoldNext,r=v.computeItemOpts,i=_xeUtils.default.toNumber(r.minWidth),r=_xeUtils.default.toNumber(r.minHeight),_=(l=_[x+(s?1:-1)])?E.querySelector('.vxe-split-item[itemid="'.concat(l.id,'"]')):null,x=n?E.querySelector('.vxe-split-item[itemid="'.concat(n.id,'"]')):null,a=_?_.clientWidth:0,o=x?x.clientWidth:0,d=_?_.clientHeight:0,u=x?x.clientHeight:0,c=_xeUtils.default.toNumber(l?(0,_utils.getGlobalDefaultConfig)(l.minWidth,i):i),h=_xeUtils.default.toNumber((0,_utils.getGlobalDefaultConfig)(n.minWidth,i)),f=_xeUtils.default.toNumber(l?(0,_utils.getGlobalDefaultConfig)(l.minHeight,r):r),m=_xeUtils.default.toNumber((0,_utils.getGlobalDefaultConfig)(n.minHeight,r)),g=e.clientX,p=e.clientY,(0,_dom.addClass)(E,"is--drag"),document.onmousemove=function(e){var t,i;e.preventDefault(),b?0<(t=s?p-e.clientY:e.clientY-p)?l&&m<=u-t&&(i=u-t,l.resizeHeight=d+t,n.resizeHeight=i,v.dispatchEvent("resize-drag",{item:n,name:n.name,offsetHeight:t,resizeHeight:i,offsetWidth:0,resizeWidth:0},e)):l&&f<=d+t&&(i=u-t,l.resizeHeight=d+t,n.resizeHeight=i,v.dispatchEvent("resize-drag",{item:n,name:n.name,offsetHeight:t,resizeHeight:i,offsetWidth:0,resizeWidth:0},e)):0<(t=s?g-e.clientX:e.clientX-g)?l&&h<=o-t&&(i=o-t,l.resizeWidth=a+t,n.resizeWidth=i,v.dispatchEvent("resize-drag",{item:n,name:n.name,offsetHeight:0,resizeHeight:0,offsetWidth:t,resizeWidth:i},e)):l&&c<=a+t&&(i=o-t,l.resizeWidth=a+t,n.resizeWidth=i,v.dispatchEvent("resize-drag",{item:n,name:n.name,offsetHeight:0,resizeHeight:0,offsetWidth:t,resizeWidth:i},e))},document.onmouseup=function(e){document.onmousemove=null,(document.onmouseup=null,_dom.removeClass)(E,"is--drag"),v.dispatchEvent("resize-end",{item:n,name:n.name,resizeHeight:n.resizeHeight,resizeWidth:n.resizeWidth},e),v.recalculate()},v.dispatchEvent("resize-start",{item:n,name:n.name},e))},handleItemActionEvent:function(e){var t,i,n,s,r,l=this,a=l.reactData;l.$refs.refElem&&(t=l.vertical,a=a.staticItems,r=l.computeIsFoldNext,i=e.currentTarget.parentElement.getAttribute("itemid"),n=a[s=_xeUtils.default.findIndexOf(a,function(e){return e.id===i})],a=a[s+(r?1:-1)],n)&&(s=n.showAction,r=n.isExpand,s)&&(t?a&&(a.isVisible=!r,a.foldHeight=0,n.isExpand=!r,n.isVisible=!0,n.foldHeight=r?(a.resizeHeight||a.renderHeight)+(n.resizeHeight||n.renderHeight):0):a&&(a.isVisible=!r,a.foldWidth=0,n.isExpand=!r,n.isVisible=!0,n.foldWidth=r?(a.resizeWidth||a.renderWidth)+(n.resizeWidth||n.renderWidth):0),l.dispatchEvent("dblclick"===e.type?"action-dblclick":"action-click",{item:n,name:n.name,targetItem:a,targetName:a?a.name:"",expanded:n.isExpand},e),l.recalculate())},handleGlobalResizeEvent:function(){this.recalculate()},getDefaultActionIcon:function(e){var t=this.vertical,i=e.showAction,e=e.isExpand,n=this.computeIsFoldNext,s="SPLIT_TOP_ACTION",r="SPLIT_BOTTOM_ACTION",l="SPLIT_LEFT_ACTION",a="SPLIT_RIGHT_ACTION";if(i){i="";if(i=n?t?e?r:s:e?a:l:t?e?s:r:e?l:a)return(0,_ui.getIcon)()[i]}return""},renderHandleBar:function(e,t){var i=this,n=i.computeBarStyle,s=i.computeActionOpts,r=i.computeIsFoldNext,l=t.id,a=t.isExpand,o=t.showAction,d={};return"dblclick"===s.trigger?d.dblclick=i.handleItemActionEvent:d.click=i.handleItemActionEvent,e("div",{attrs:{itemid:l},class:["vxe-split-item-handle",r?"to--next":"to--prev"]},[e("div",{class:"vxe-split-item-handle-bar",style:n,on:{mousedown:i.dragEvent}}),o?e("span",{class:"vxe-split-item-action-btn",on:d},[e("i",{class:(a?s.openIcon:s.closeIcon)||i.getDefaultActionIcon(t)})]):(0,_ui.renderEmptyElement)(i)])},renderItems:function(d){var u=this,e=u.reactData,c=u.border,h=u.padding,f=u.vertical,m=e.staticItems,g=u.computeIsFoldNext,p=[];return m.forEach(function(e,t){var i=e.id,n=e.slots,s=e.isVisible,r=e.isExpand,n=n?n.default:null,l={},a=s?e.foldWidth||e.resizeWidth||e.renderWidth:0,o=s?e.foldHeight||e.resizeHeight||e.renderHeight:0;f?o&&(l.height=(0,_dom.toCssUnit)(o)):a&&(l.width=(0,_dom.toCssUnit)(a)),p.push(d("div",{attrs:{itemid:i},class:["vxe-split-item",f?"is--vertical":"is--horizontal",{"is--padding":h,"is--border":c,"is--height":o,"is--width":a,"is--fill":s&&!o&&!a,"is--handle":0<t,"is--expand":r,"is--hidden":!s}],style:l},[t&&!g?u.renderHandleBar(d,e):(0,_ui.renderEmptyElement)(u),d("div",{attrs:{itemid:i},class:"vxe-split-item--wrapper"},[d("div",{class:"vxe-split-item--inner"},n?u.callSlot(n,{}):[])]),g&&t<m.length-1?u.renderHandleBar(d,e):(0,_ui.renderEmptyElement)(u)]))}),d("div",{class:"vxe-split-wrapper"},p)},renderVN:function(e){var t=this.$scopedSlots,i=this.vertical,n=this.width,s=this.height,t=t.default,r={};return s&&(r.height=(0,_dom.toCssUnit)(s)),n&&(r.width=(0,_dom.toCssUnit)(n)),e("div",{ref:"refElem",class:["vxe-split",i?"is--vertical":"is--horizontal"],style:r},[e("div",{class:"vxe-split-slots"},t?t({}):[]),this.renderItems(e)])}},created:function(){_ui.globalEvents.on(this,"resize",this.handleGlobalResizeEvent)},mounted:function(){var e=this;e.$nextTick(function(){e.recalculate()})},beforeDestroy:function(){_ui.globalEvents.off(this,"resize")},render:function(e){return this.renderVN(e)}});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.vxe-split.is--vertical>.vxe-split-wrapper{flex-direction:column}.vxe-split.is--vertical>.vxe-split-wrapper>.vxe-split-item{width:100%}.vxe-split.is--drag{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.vxe-split.is--drag>.vxe-split-wrapper>.vxe-split-item>.vxe-split-item--wrapper::after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;background:0 0}.vxe-split-wrapper{height:100%;display:flex;flex-direction:row;overflow:hidden}.vxe-split-slots{display:none}.vxe-split-item-handle{position:relative;flex-shrink:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.vxe-split-item--wrapper{position:relative;word-break:break-word;overflow:hidden;flex-grow:1}.vxe-split-item--inner{height:100%;width:100%;overflow:auto}.vxe-split-item--inner>.vxe-split{height:100%}.vxe-split-item-handle-bar{background-color:var(--vxe-split-handle-bar-background-color)}.vxe-split-item-action-btn{display:block;position:absolute;z-index:2;cursor:pointer;background-color:var(--vxe-ui-layout-background-color);border:1px solid var(--vxe-ui-input-border-color);transition:transform .1s ease-in-out}.vxe-split-item{display:flex;position:relative;overflow:
|
|
1
|
+
.vxe-split.is--vertical>.vxe-split-wrapper{flex-direction:column}.vxe-split.is--vertical>.vxe-split-wrapper>.vxe-split-item{width:100%}.vxe-split.is--drag{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.vxe-split.is--drag>.vxe-split-wrapper>.vxe-split-item>.vxe-split-item--wrapper::after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;background:0 0}.vxe-split-wrapper{height:100%;display:flex;flex-direction:row;overflow:hidden}.vxe-split-slots{display:none}.vxe-split-item-handle{position:relative;flex-shrink:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.vxe-split-item--wrapper{position:relative;word-break:break-word;overflow:hidden;flex-grow:1}.vxe-split-item--inner{height:100%;width:100%;overflow:auto}.vxe-split-item--inner>.vxe-split{height:100%}.vxe-split-item-handle-bar{background-color:var(--vxe-split-handle-bar-background-color)}.vxe-split-item-action-btn{display:block;position:absolute;z-index:2;cursor:pointer;background-color:var(--vxe-ui-layout-background-color);border:1px solid var(--vxe-ui-input-border-color);transition:transform .1s ease-in-out}.vxe-split-item{display:flex;position:relative;overflow:hidden}.vxe-split-item.is--hidden{width:0}.vxe-split-item.is--padding>.vxe-split-item--wrapper{padding:var(--vxe-ui-layout-padding-default)}.vxe-split-item.is--fill{flex-grow:1}.vxe-split-item.is--height,.vxe-split-item.is--width{flex-shrink:0}.vxe-split-item.is--border>.vxe-split-item--wrapper,.vxe-split-item.is--border>.vxe-split-item-handle{border:1px solid var(--vxe-ui-base-popup-border-color)}.vxe-split-item.is--expand.is--horizontal>.vxe-split-item-handle .vxe-split-item-handle-bar{cursor:w-resize}.vxe-split-item.is--expand.is--vertical>.vxe-split-item-handle .vxe-split-item-handle-bar{cursor:n-resize}.vxe-split-item.is--expand>.vxe-split-item-handle>.vxe-split-item-handle-bar{background-color:var(--vxe-split-handle-bar-background-color)}.vxe-split-item.is--expand>.vxe-split-item-handle>.vxe-split-item-handle-bar:hover{background-color:var(--vxe-ui-font-primary-lighten-color)}.vxe-split-item.is--expand>.vxe-split-item-handle>.vxe-split-item-handle-bar:active{background-color:var(--vxe-ui-font-primary-darken-color)}.vxe-split-item.is--horizontal{flex-direction:row}.vxe-split-item.is--horizontal>.vxe-split-item-handle.to--prev .vxe-split-item-action-btn{left:0}.vxe-split-item.is--horizontal>.vxe-split-item-handle.to--next .vxe-split-item-action-btn{right:0}.vxe-split-item.is--horizontal>.vxe-split-item-handle .vxe-split-item-handle-bar{width:var(--vxe-split-handle-bar-width);height:100%}.vxe-split-item.is--horizontal>.vxe-split-item-handle .vxe-split-item-action-btn{top:50%;transform:translateY(-50%);padding:1em 0}.vxe-split-item.is--horizontal>.vxe-split-item-handle .vxe-split-item-action-btn:hover{color:var(--vxe-ui-font-primary-color)}.vxe-split-item.is--horizontal>.vxe-split-item-handle .vxe-split-item-action-btn:active{transform:translateY(-50%) scale(.9)}.vxe-split-item.is--horizontal.is--border>.vxe-split-item-handle{border-width:1px 0 1px 0}.vxe-split-item.is--vertical{flex-direction:column}.vxe-split-item.is--vertical>.vxe-split-item-handle.to--prev .vxe-split-item-action-btn{top:0}.vxe-split-item.is--vertical>.vxe-split-item-handle.to--next .vxe-split-item-action-btn{bottom:0}.vxe-split-item.is--vertical>.vxe-split-item-handle .vxe-split-item-handle-bar{height:var(--vxe-split-handle-bar-height);width:100%}.vxe-split-item.is--vertical>.vxe-split-item-handle .vxe-split-item-action-btn{left:50%;transform:translateX(-50%);padding:0 1em}.vxe-split-item.is--vertical>.vxe-split-item-handle .vxe-split-item-action-btn:hover{color:var(--vxe-ui-font-primary-color)}.vxe-split-item.is--vertical>.vxe-split-item-handle .vxe-split-item-action-btn:active{transform:translateX(-50%) scale(.9)}.vxe-split-item.is--vertical.is--border>.vxe-split-item-handle{border-width:0 1px 0 1px}
|