@livx.cc/bare-v3 0.1.0-alpha.154 → 0.1.0-alpha.155

package/dist/components/swipe.js

@@ -1,11 +1,12 @@
-var A=typeof HTMLElement==="function"?HTMLElement:class{};function L(e,t){if(typeof customElements>"u"||customElements.get?.(e))return;try{customElements.define(e,t)}catch(s){console.warn(`bare-v3: ${e} was not registered`,s)}}var O=Symbol.for("bare-v3.styles");function C(e,t,s){if(!e?.head||e.getElementById(t))return;let o=e[O]??=new Set;if(o.has(t))return;let l=e.defaultView;if(l&&"adoptedStyleSheets"in e&&"replaceSync"in l.CSSStyleSheet.prototype){let d=new l.CSSStyleSheet;d.replaceSync(s),e.adoptedStyleSheets=[...e.adoptedStyleSheets,d],o.add(t);return}let c=e.createElement("style");c.id=t,c.textContent=s,e.head.append(c)}var X=10,P=24,N=0.6,B=48,Y=400,T="[data-b3-swipe],[data-b3-swipe-left],[data-b3-swipe-right]",W="b3-swipe-style",_=`
+var C=typeof HTMLElement==="function"?HTMLElement:class{};function L(e,t){if(typeof customElements>"u"||customElements.get?.(e))return;try{customElements.define(e,t)}catch(s){console.warn(`bare-v3: ${e} was not registered`,s)}}var O=Symbol.for("bare-v3.styles");function T(e,t,s){if(!e?.head||e.getElementById(t))return;let o=e[O]??=new Set;if(o.has(t))return;let l=e.defaultView;if(l&&"adoptedStyleSheets"in e&&"replaceSync"in l.CSSStyleSheet.prototype){let b=new l.CSSStyleSheet;b.replaceSync(s),e.adoptedStyleSheets=[...e.adoptedStyleSheets,b],o.add(t);return}let d=e.createElement("style");d.id=t,d.textContent=s,e.head.append(d)}var X=10,P=24,N=0.6,B=48,Y=400,M="[data-b3-swipe],[data-b3-swipe-left],[data-b3-swipe-right]",W="b3-swipe-style",_=`
 b3-swipe{display:block;}
-b3-swipe :is(${T}){touch-action:pan-y;}
-b3-swipe [data-b3-swiping]{position:relative;z-index:1;background:var(--b3-color-canvas,#fff);transition:none!important;}
+b3-swipe :is(${M}){touch-action:pan-y;}
+b3-swipe [data-b3-swiping]{position:relative;z-index:1;transition:none!important;}
 b3-swipe [data-b3-swipe-back]{transition:transform .18s ease-out;}
 .b3-swipe-action{position:absolute;display:flex;align-items:center;padding-inline:20px;box-sizing:border-box;
-  font-weight:600;color:#fff;background:var(--b3-color-muted,#888);pointer-events:none;}
-.b3-swipe-action[data-side=left]{justify-content:flex-end;}
-.b3-swipe-action[data-go][data-side=left]{background:var(--b3-swipe-left-color,var(--b3-color-danger,#c0392b));}
-.b3-swipe-action[data-go][data-side=right]{background:var(--b3-swipe-right-color,var(--b3-color-accent,#276bdd));}
-`;class M extends A{static observedAttributes=["disabled"];#e=null;#t=null;get edge(){return Number(this.getAttribute("edge"))||0}get threshold(){return Number(this.getAttribute("threshold"))||0}get hold(){let e=this.getAttribute("hold");return e===null?500:Number(e)||0}connectedCallback(){C(this.ownerDocument,W,_),this.#e=new AbortController;let e=this.#e.signal;this.addEventListener("pointerdown",(t)=>this.#n(t),{signal:e}),this.addEventListener("touchmove",(t)=>{if(this.hasAttribute("data-b3-dragging")&&t.cancelable)t.preventDefault()},{signal:e,passive:!1})}disconnectedCallback(){this.#t?.(),this.#e?.abort(),this.#e=null}attributeChangedCallback(){if(this.hasAttribute("disabled"))this.#t?.()}cancel(){this.#t?.()}#n(e){if(e.pointerType==="mouse"||!e.isPrimary||this.hasAttribute("disabled")||this.#t)return;let t=e.target.closest?.(T);if(!t||!this.contains(t))return;let s=this.ownerDocument.defaultView;if(this.edge&&(e.clientX<this.edge||e.clientX>s.innerWidth-this.edge))return;let{pointerId:o,clientX:l,clientY:c}=e,d=t.offsetWidth,p=this.threshold,w=p?p<=1?p*d:p:Math.max(110,d*0.4),u=null,r=0,f=!1,a=null,h=[[e.timeStamp,l]],v=new AbortController,m={signal:v.signal},y=()=>{let n=(i)=>{i.stopPropagation(),i.preventDefault()};s.addEventListener("click",n,{capture:!0,once:!0}),s.setTimeout(()=>s.removeEventListener("click",n,!0),Y)},b=(n)=>{if(v.abort(),s.clearTimeout(E),this.#t=null,this.removeAttribute("data-b3-dragging"),u!=="x")return;y();try{t.releasePointerCapture(o)}catch{}t.removeAttribute("data-b3-swiping"),t.setAttribute("data-b3-swipe-back",""),t.style.transform="",s.setTimeout(()=>t.removeAttribute("data-b3-swipe-back"),200),a?.remove();let i=r<0?"left":"right";if(n&&t.hasAttribute(`data-b3-swipe-${i}`))t.dispatchEvent(new CustomEvent("b3-swipe",{bubbles:!0,detail:{side:i,item:t}}))};this.#t=()=>b(!1);let E=this.hold?s.setTimeout(()=>{if(u)return;b(!1),y(),t.dispatchEvent(new CustomEvent("b3-swipe-hold",{bubbles:!0,detail:{item:t,x:l,y:c}}))},this.hold):0,k=()=>{let n=r<0?"left":"right",i=t.getAttribute(`data-b3-swipe-${n}`),g=Math.abs(r);if(f=!!i&&(f?g>=w-P:g>=w),t.style.transform=`translateX(${i?r:r/4}px)`,!a)a=this.ownerDocument.createElement("div"),a.className="b3-swipe-action",a.style.cssText=`top:${t.offsetTop}px;left:${t.offsetLeft}px;width:${d}px;height:${t.offsetHeight}px`,t.before(a);a.dataset.side=n,a.textContent=i||"",a.toggleAttribute("data-go",f)};s.addEventListener("pointermove",(n)=>{if(n.pointerId!==o)return;r=n.clientX-l;let i=n.clientY-c;h.push([n.timeStamp,n.clientX]);while(h.length>2&&n.timeStamp-h[0][0]>100)h.shift();if(!u){if(Math.hypot(r,i)<X)return;if(s.clearTimeout(E),Math.abs(i)>=Math.abs(r))return u="y",b(!1);if(!t.hasAttribute("data-b3-swipe-left")&&!t.hasAttribute("data-b3-swipe-right"))return b(!1);u="x",this.setAttribute("data-b3-dragging",""),t.setAttribute("data-b3-swiping","");try{t.setPointerCapture(o)}catch{}}k()},m),s.addEventListener("pointerup",(n)=>{if(n.pointerId!==o)return;let i=h.filter(([H])=>n.timeStamp-H<=100),[g,I]=i[0]??[n.timeStamp,n.clientX],S=n.timeStamp-g,x=S>0?(n.clientX-I)/S:0,D=Math.abs(r)>=B&&Math.abs(x)>=N&&Math.sign(x)===Math.sign(r);b(f||D)},m),s.addEventListener("pointercancel",(n)=>{if(n.pointerId===o)b(!1)},m)}}L("b3-swipe",M);export{M as B3Swipe};
+  overflow:hidden;white-space:nowrap;font-weight:600;color:#fff;pointer-events:none;
+  --b3-swipe-color:var(--b3-swipe-left-color,var(--b3-color-danger,#c0392b));
+  background:color-mix(in srgb,var(--b3-swipe-color) 55%,var(--b3-color-muted,#888));}
+.b3-swipe-action[data-side=right]{justify-content:flex-end;--b3-swipe-color:var(--b3-swipe-right-color,var(--b3-color-accent,#276bdd));}
+.b3-swipe-action[data-go]{background:var(--b3-swipe-color);}
+`;class k extends C{static observedAttributes=["disabled"];#e=null;#t=null;get edge(){return Number(this.getAttribute("edge"))||0}get threshold(){return Number(this.getAttribute("threshold"))||0}get hold(){let e=this.getAttribute("hold");return e===null?500:Number(e)||0}connectedCallback(){T(this.ownerDocument,W,_),this.#e=new AbortController;let e=this.#e.signal;this.addEventListener("pointerdown",(t)=>this.#n(t),{signal:e}),this.addEventListener("touchmove",(t)=>{if(this.hasAttribute("data-b3-dragging")&&t.cancelable)t.preventDefault()},{signal:e,passive:!1})}disconnectedCallback(){this.#t?.(),this.#e?.abort(),this.#e=null}attributeChangedCallback(){if(this.hasAttribute("disabled"))this.#t?.()}cancel(){this.#t?.()}#n(e){if(e.pointerType==="mouse"||!e.isPrimary||this.hasAttribute("disabled")||this.#t)return;let t=e.target.closest?.(M);if(!t||!this.contains(t))return;let s=this.ownerDocument.defaultView;if(this.edge&&(e.clientX<this.edge||e.clientX>s.innerWidth-this.edge))return;let{pointerId:o,clientX:l,clientY:d}=e,b=t.offsetWidth,f=this.threshold,y=f?f<=1?f*b:f:Math.max(110,b*0.4),h=null,r=0,g=!1,a=null,p=[[e.timeStamp,l]],v=new AbortController,w={signal:v.signal},S=()=>{let n=(i)=>{i.stopPropagation(),i.preventDefault()};s.addEventListener("click",n,{capture:!0,once:!0}),s.setTimeout(()=>s.removeEventListener("click",n,!0),Y)},u=(n)=>{if(v.abort(),s.clearTimeout(E),this.#t=null,this.removeAttribute("data-b3-dragging"),h!=="x")return;S();try{t.releasePointerCapture(o)}catch{}t.removeAttribute("data-b3-swiping"),t.style.background="",t.setAttribute("data-b3-swipe-back",""),t.style.transform="",s.setTimeout(()=>t.removeAttribute("data-b3-swipe-back"),200),a?.remove();let i=r<0?"left":"right";if(n&&t.hasAttribute(`data-b3-swipe-${i}`))t.dispatchEvent(new CustomEvent("b3-swipe",{bubbles:!0,detail:{side:i,item:t}}))};this.#t=()=>u(!1);let E=this.hold?s.setTimeout(()=>{if(h)return;u(!1),S(),t.dispatchEvent(new CustomEvent("b3-swipe-hold",{bubbles:!0,detail:{item:t,x:l,y:d}}))},this.hold):0,I=()=>{let n=r<0?"left":"right",i=t.getAttribute(`data-b3-swipe-${n}`),c=Math.abs(r);if(g=!!i&&(g?c>=y-P:c>=y),t.style.transform=`translateX(${i?r:r/4}px)`,!a)a=this.ownerDocument.createElement("div"),a.className="b3-swipe-action",a.style.cssText=`top:${t.offsetTop}px;height:${t.offsetHeight}px`,t.before(a);let m=Math.abs(i?r:r/4);a.style.left=`${t.offsetLeft+(r<0?b-m:0)}px`,a.style.width=`${m}px`,a.dataset.side=n,a.textContent=i||"",a.toggleAttribute("data-go",g)};s.addEventListener("pointermove",(n)=>{if(n.pointerId!==o)return;r=n.clientX-l;let i=n.clientY-d;p.push([n.timeStamp,n.clientX]);while(p.length>2&&n.timeStamp-p[0][0]>100)p.shift();if(!h){if(Math.hypot(r,i)<X)return;if(s.clearTimeout(E),Math.abs(i)>=Math.abs(r))return h="y",u(!1);if(!t.hasAttribute("data-b3-swipe-left")&&!t.hasAttribute("data-b3-swipe-right"))return u(!1);h="x",this.setAttribute("data-b3-dragging",""),t.setAttribute("data-b3-swiping","");let c=s.getComputedStyle(t).backgroundColor;t.style.background=`linear-gradient(${c},${c}),var(--b3-swipe-surface,var(--b3-color-canvas,#fff))`;try{t.setPointerCapture(o)}catch{}}I()},w),s.addEventListener("pointerup",(n)=>{if(n.pointerId!==o)return;let i=p.filter(([H])=>n.timeStamp-H<=100),[c,m]=i[0]??[n.timeStamp,n.clientX],x=n.timeStamp-c,A=x>0?(n.clientX-m)/x:0,D=Math.abs(r)>=B&&Math.abs(A)>=N&&Math.sign(A)===Math.sign(r);u(g||D)},w),s.addEventListener("pointercancel",(n)=>{if(n.pointerId===o)u(!1)},w)}}L("b3-swipe",k);export{k as B3Swipe};

package/dist/manifest.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.1.0-alpha.154",
+  "version": "0.1.0-alpha.155",
   "cssSha256": "e8a1cc0d967b07a320c429873198cae5522155a82e2acdf92bb760fa83749d8c",
   "classes": [
     "b3-accordion",

package/dist/references/swipe.md

@@ -23,7 +23,7 @@ Touch and pen only; a mouse never swipes, so always offer the same actions as bu
 | `hold` | Still-press ms that fires `b3-swipe-hold`; `0` disables. Default 500. |
 | `disabled` | No swipes (e.g. while the list is in select mode). |
 
-Colours: `--b3-swipe-left-color`, `--b3-swipe-right-color` (the action's colour once the pull will commit).
+Colours: `--b3-swipe-left-color`, `--b3-swipe-right-color` (strong once the pull will commit, muted before). The dragged row is painted opaque (its own background over `--b3-swipe-surface`, default the canvas), so a translucent selection tint never shows the action through it.
 The action panel is positioned by the row's `offsetTop`, so give the rows' container `position: relative`.
 
 Events (bubble from the row): `b3-swipe` `{ side: 'left'|'right', item }` when a pull commits;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@livx.cc/bare-v3",
-  "version": "0.1.0-alpha.154",
+  "version": "0.1.0-alpha.155",
   "type": "module",
   "thirdPartyNotices": "./dist/third-party.json",
   "files": [