@ui-machines/rating
Version:
Core logic for the rating widget implemented as a state machine
3 lines (2 loc) • 7.46 kB
JavaScript
var y=Object.defineProperty;var M=Object.getOwnPropertyDescriptor;var I=Object.getOwnPropertyNames;var H=Object.prototype.hasOwnProperty;var W=e=>y(e,"__esModule",{value:!0});var V=(e,t)=>{for(var r in t)y(e,r,{get:t[r],enumerable:!0})},D=(e,t,r,n)=>{if(t&&typeof t=="object"||typeof t=="function")for(let l of I(t))!H.call(e,l)&&(r||l!=="default")&&y(e,l,{get:()=>t[l],enumerable:!(n=M(t,l))||n.enumerable});return e};var N=(e=>(t,r)=>e&&e.get(t)||(r=D(W({}),t,1),e&&e.set(t,r),r))(typeof WeakMap!="undefined"?new WeakMap:0);var B={};V(B,{connect:()=>C,machine:()=>S});var w=e=>e?"":void 0;var K=(()=>{let e=0;return()=>(e++,e.toString(36))})();function E(e){let t=new Set;function r(n){let l=globalThis.requestAnimationFrame(n);t.add(()=>globalThis.cancelAnimationFrame(l))}return r(()=>r(e)),function(){t.forEach(function(n){n()})}}function z(e){var t;return(t=e==null?void 0:e.ownerDocument.defaultView)!=null?t:window}function L(e,t){var r;let{key:n="value",value:l,type:o="input",hidden:u=!0}=t,a=z(e);if(!(e instanceof a.HTMLInputElement))return;u&&(e.type="text",e.hidden=!0);let d=a.HTMLInputElement.prototype,f=(r=Object.getOwnPropertyDescriptor(d,n))==null?void 0:r.set;f==null||f.call(e,l);let p=new a.Event(o,{bubbles:!0});e.dispatchEvent(p),u&&(e.type="hidden",e.hidden=!1)}var U=["input:not([disabled]):not([type=hidden])","select:not([disabled])","textarea:not([disabled])","button:not([disabled])","embed","iframe","object","a[href]","area[href]","[tabindex]","audio[controls]","video[controls]","*[tabindex]:not([aria-disabled])","[contenteditable]:not([contenteditable=false])","details > summary:first-of-type"].join(",");var P={ArrowLeft:"ArrowRight",ArrowRight:"ArrowLeft",Home:"End",End:"Home"},F={Up:"ArrowUp",Down:"ArrowDown",Esc:"Escape"," ":"Space",",":"Comma",Left:"ArrowLeft",Right:"ArrowRight"};function k(e,t={}){var r;let{dir:n="ltr",orientation:l="horizontal"}=t,{key:o}=e;return o=(r=F[o])!=null?r:o,n==="rtl"&&l==="horizontal"&&o in P&&(o=P[o]),o}var c=(e,t)=>({variable:e,reference:t?`var(${e}, ${t})`:`var(${e})`}),G={arrowShadowColor:c("--arrow-shadow-color"),arrowSize:c("--arrow-size"),arrowSizeHalf:c("--arrow-size-half"),arrowBg:c("--arrow-background"),transformOrigin:c("--transform-origin"),arrowOffset:c("--arrow-offset"),boxShadow:c("--arrow-box-shadow")};var J=(()=>{let e=0;return()=>(e++,e.toString(36))})(),Y=e=>Array.isArray(e),j=e=>!(e==null||typeof e!="object"||Y(e)),_=e=>j(e)&&"touches"in e;var $={pageX:0,pageY:0,clientX:0,clientY:0};function R(e,t="page"){let r=_(e)?e.touches[0]||e.changedTouches[0]||$:e;return{x:r[`${t}X`],y:r[`${t}Y`]}}function A(e,t){let r=e.x-t.offsetLeft-t.clientLeft+t.scrollLeft,n=e.y-t.offsetTop-t.clientTop+t.scrollTop;return{point:{x:r,y:n},progress:{x:r/t.offsetWidth,y:n/t.offsetHeight}}}function X(e){return{button:e,label:e,input:e,output:e,element:e}}var O=X(e=>e);var b=e=>e;var te=(()=>{let e=0;return()=>(e++,e.toString(36))})();var T=e=>e.button===0;var i={getDoc:e=>{var t;return(t=e.doc)!=null?t:document},getLabelId:e=>`rating-label-${e.uid}`,getInputId:e=>`rating-input-${e.uid}`,getRatingId:(e,t)=>`rating-star-${e.uid}-${t}`,getRootId:e=>`rating-${e.uid}`,getRootEl:e=>i.getDoc(e).getElementById(i.getRootId(e)),getRadioEl:e=>{var t;return(t=i.getRootEl(e))==null?void 0:t.querySelector(`[role=radio][aria-posinset='${Math.ceil(e.value)}']`)},getActiveEl:e=>i.getDoc(e).activeElement,getInputEl:e=>i.getDoc(e).getElementById(i.getInputId(e)),dispatchChangeEvent:e=>{let t=i.getInputEl(e);t&&L(t,{value:e.value})}};function C(e,t,r=O){let{context:n}=e,l=o=>{let u=n.isHovering?n.hoveredValue:n.value,a=Math.ceil(u)===o,d=o<=u||a,f=a&&Math.abs(u-o)===.5;return{isEqual:a,isValueEmpty:n.value===-1,isHighlighted:d,isHalf:f,isChecked:a||n.value===-1&&o===1}};return{isHovering:n.isHovering,value:n.value,hoveredValue:n.hoveredValue,size:n.max,getRatingState:l,inputProps:r.input({"data-part":"input",name:n.name,type:"hidden",id:i.getInputId(n),value:n.value}),labelProps:r.element({"data-part":"label",id:i.getLabelId(n),"data-disabled":n.disabled}),rootProps:r.element({"data-part":"root",id:i.getRootId(n),role:"radiogroup","aria-orientation":"horizontal","aria-labelledby":i.getLabelId(n),tabIndex:n.readonly?0:-1,onPointerMove(){!n.isInteractive||t("GROUP_POINTER_OVER")},onPointerLeave(){!n.isInteractive||t("GROUP_POINTER_LEAVE")}}),getRatingProps({index:o}){var p,x;let{isHalf:u,isHighlighted:a,isChecked:d}=l(o),f=(x=(p=n.getLabelText)==null?void 0:p.call(n,o))!=null?x:`${o} stars`;return r.element({"data-part":"rating",id:i.getRatingId(n,o),role:"radio",tabIndex:d?0:-1,"aria-roledescription":"rating","aria-label":f,"aria-disabled":n.disabled,"aria-readonly":n.readonly,"aria-setsize":n.max,"aria-checked":d,"aria-posinset":o,"data-highlighted":w(a),"data-half":w(u),onPointerDown(s){T(b(s))&&s.preventDefault()},onPointerMove(s){if(!n.isInteractive)return;let g=R(b(s)),{progress:v}=A(g,s.currentTarget),h=v.x<.5;t({type:"POINTER_OVER",index:o,isMidway:h})},onKeyDown(s){if(!n.isInteractive)return;let g={ArrowLeft(){t("ARROW_LEFT")},ArrowRight(){t("ARROW_RIGHT")},ArrowUp(){t("ARROW_LEFT")},ArrowDown(){t("ARROW_LEFT")},Space(){t({type:"SPACE",value:o})},Home(){t("HOME")},End(){t("END")}},v=k(s,n),h=g[v];h&&(s.preventDefault(),h(s))},onClick(){!n.isInteractive||t("CLICK")},onFocus(){!n.isInteractive||t("FOCUS")},onBlur(){!n.isInteractive||t("BLUR")}})}}}var m=require("@ui-machines/core");var S=(0,m.createMachine)({id:"rating-machine",initial:"unknown",context:{name:"rating",max:5,uid:"rating-input",value:-1,hoveredValue:-1,disabled:!1,readonly:!1},computed:{isInteractive:e=>!(e.disabled||e.readonly),isHovering:e=>e.hoveredValue>-1},states:{unknown:{on:{SETUP:{target:"idle",actions:"setupDocument"}}},idle:{entry:"clearHoveredValue",on:{GROUP_POINTER_OVER:"hover",FOCUS:"focus"}},focus:{on:{POINTER_OVER:{actions:"setHoveredValue"},GROUP_POINTER_LEAVE:{actions:"clearHoveredValue"},BLUR:"idle",SPACE:{guard:"isValueEmpty",actions:["setValue","invokeOnChange"]},CLICK:{actions:["setValue","invokeOnChange","focusActiveRadio"]},ARROW_LEFT:{actions:["setPrevValue","invokeOnChange","focusActiveRadio"]},ARROW_RIGHT:{actions:["setNextValue","invokeOnChange","focusActiveRadio"]},HOME:{actions:["setValueToMin","invokeOnChange","focusActiveRadio"]},END:{actions:["setValueToMax","invokeOnChange","focusActiveRadio"]}}},hover:{on:{POINTER_OVER:{actions:"setHoveredValue"},GROUP_POINTER_LEAVE:[{guard:"isRadioFocused",target:"focus"},{target:"idle"}],CLICK:{actions:["setValue","invokeOnChange","focusActiveRadio"]}}}}},{guards:{isInteractive:e=>!(e.disabled||e.readonly),isHoveredValueEmpty:e=>e.hoveredValue===-1,isValueEmpty:e=>e.value<=0,isRadioFocused:e=>{var t;return!!((t=i.getRootEl(e))==null?void 0:t.contains(i.getActiveEl(e)))}},actions:{setupDocument(e,t){e.doc=(0,m.ref)(t.doc),e.uid=t.id},clearHoveredValue(e){e.hoveredValue=-1},focusActiveRadio(e){E(()=>{var t;return(t=i.getRadioEl(e))==null?void 0:t.focus()})},setPrevValue(e){let t=e.allowHalf?.5:1;e.value=Math.max(0,e.value-t)},setNextValue(e){let t=e.allowHalf?.5:1,r=e.value===-1?0:e.value;e.value=Math.min(e.max,r+t)},setValueToMin(e){e.value=1},setValueToMax(e){e.value=e.max},setValue(e,t){var r;e.value=(r=t.value)!=null?r:e.hoveredValue},setHoveredValue(e,t){let r=e.allowHalf&&t.isMidway?.5:0;e.hoveredValue=t.index-r},invokeOnChange(e){var t;(t=e.onChange)==null||t.call(e,e.value),i.dispatchChangeEvent(e)}}});module.exports=N(B);
//# sourceMappingURL=index.js.map