@ui-machines/rating
Version:
Core logic for the rating widget implemented as a state machine
3 lines (2 loc) • 6.9 kB
JavaScript
var v=e=>e?"":void 0;var z=(()=>{let e=0;return()=>(e++,e.toString(36))})();function b(e){let t=new Set;function r(n){let s=globalThis.requestAnimationFrame(n);t.add(()=>globalThis.cancelAnimationFrame(s))}return r(()=>r(e)),function(){t.forEach(function(n){n()})}}function O(e){var t;return(t=e==null?void 0:e.ownerDocument.defaultView)!=null?t:window}function x(e,t){var r;let{key:n="value",value:s,type:o="input",hidden:u=!0}=t,l=O(e);if(!(e instanceof l.HTMLInputElement))return;u&&(e.type="text",e.hidden=!0);let d=l.HTMLInputElement.prototype,f=(r=Object.getOwnPropertyDescriptor(d,n))==null?void 0:r.set;f==null||f.call(e,s);let p=new l.Event(o,{bubbles:!0});e.dispatchEvent(p),u&&(e.type="hidden",e.hidden=!1)}var F=["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 E={ArrowLeft:"ArrowRight",ArrowRight:"ArrowLeft",Home:"End",End:"Home"},T={Up:"ArrowUp",Down:"ArrowDown",Esc:"Escape"," ":"Space",",":"Comma",Left:"ArrowLeft",Right:"ArrowRight"};function L(e,t={}){var r;let{dir:n="ltr",orientation:s="horizontal"}=t,{key:o}=e;return o=(r=T[o])!=null?r:o,n==="rtl"&&s==="horizontal"&&o in E&&(o=E[o]),o}var c=(e,t)=>({variable:e,reference:t?`var(${e}, ${t})`:`var(${e})`}),Y={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 _=(()=>{let e=0;return()=>(e++,e.toString(36))})(),C=e=>Array.isArray(e),S=e=>!(e==null||typeof e!="object"||C(e)),M=e=>S(e)&&"touches"in e;var I={pageX:0,pageY:0,clientX:0,clientY:0};function P(e,t="page"){let r=M(e)?e.touches[0]||e.changedTouches[0]||I:e;return{x:r[`${t}X`],y:r[`${t}Y`]}}function k(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 H(e){return{button:e,label:e,input:e,output:e,element:e}}var R=H(e=>e);var y=e=>e;var B=(()=>{let e=0;return()=>(e++,e.toString(36))})();var A=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&&x(t,{value:e.value})}};function W(e,t,r=R){let{context:n}=e,s=o=>{let u=n.isHovering?n.hoveredValue:n.value,l=Math.ceil(u)===o,d=o<=u||l,f=l&&Math.abs(u-o)===.5;return{isEqual:l,isValueEmpty:n.value===-1,isHighlighted:d,isHalf:f,isChecked:l||n.value===-1&&o===1}};return{isHovering:n.isHovering,value:n.value,hoveredValue:n.hoveredValue,size:n.max,getRatingState:s,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,w;let{isHalf:u,isHighlighted:l,isChecked:d}=s(o),f=(w=(p=n.getLabelText)==null?void 0:p.call(n,o))!=null?w:`${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":v(l),"data-half":v(u),onPointerDown(a){A(y(a))&&a.preventDefault()},onPointerMove(a){if(!n.isInteractive)return;let m=P(y(a)),{progress:g}=k(m,a.currentTarget),h=g.x<.5;t({type:"POINTER_OVER",index:o,isMidway:h})},onKeyDown(a){if(!n.isInteractive)return;let m={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")}},g=L(a,n),h=m[g];h&&(a.preventDefault(),h(a))},onClick(){!n.isInteractive||t("CLICK")},onFocus(){!n.isInteractive||t("FOCUS")},onBlur(){!n.isInteractive||t("BLUR")}})}}}import{createMachine as V,ref as D}from"@ui-machines/core";var N=V({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=D(t.doc),e.uid=t.id},clearHoveredValue(e){e.hoveredValue=-1},focusActiveRadio(e){b(()=>{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)}}});export{W as connect,N as machine};
//# sourceMappingURL=index.mjs.map